@charset "utf-8";

/*
=========================================
共通css
=========================================
*/

#PageTitle {
    width: 100%;
}

#PageTitleLabel {
    display: block;
    padding: 5px 10px 5px 20px;
    color: #fff;
    font-size: 18px;
}

.header-color {
    background: #5e6d7f;
}

.sales-color {
    background: #05b2d2;
}

.text-sales-color {
    color: #05b2d2 !important;
}

.border-sales-color {
    border-color: #05b2d2 !important;
}

.customer-color {
    background: #e1ac46 !important;
}

.text-customer-color {
    color: #e1ac46 !important;
}

.border-customer-color {
    border-color: #e1ac46 !important;
}

.stock-color {
    background: #1fbba6;
}

.text-stock-color {
    color: #1fbba6 !important;
}

.border-stock-color {
    border-color: #1fbba6 !important;
}

.shop-color {
    background: #f1655e;
}

.bg-blue {
    background: #0d6efd !important;
}

.alert-color {
    background: #FADBDA;
}

.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-35 {
    width: 35% !important;
}

.w-45 {
    width: 45% !important;
}

.w-55 {
    width: 55% !important;
}

.w-60 {
    width: 60% !important;
}

.w-65 {
    width: 65% !important;
}

.w-70 {
    width: 70% !important;
}

.w-75 {
    width: 75% !important;
}

.w-80 {
    width: 80% !important;
}

.w-85 {
    width: 85% !important;
}

.w-90 {
    width: 90% !important;
}

.w-95 {
    width: 95% !important;
}

.top-10 {
    top: 10px !important;
}

.zindex-max {
    z-index: 2147483647 !important;
}

.addPerspective {
    -webkit-perspective: 10000px;
    perspective: 10000px;
}

.mT-10 {
    margin-top: 10px !important;
}

.modal-close {
    display: none;
}

.square {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.square img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
}

@media screen and (min-width: 576px) {
    .square {
        position: relative;
        width: 400px;
        height: 400px;
        overflow: hidden;
    }

    .square img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%;
        min-height: 100%;
    }
}

/*@media (min-width: 576px) {
    .square {
        position: relative;
        width: 400px;
        height: 400px;
        overflow: hidden;
    }

        .square img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 100%;
            min-height: 100%;
        }
}*/