* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: arial, san-serf;
}

html,
body {
    /*background-color: #eee;*/
    margin: 0;
    height: 100%;
    font-size: 16px;
    /*overflow: auto;*/
}

body {
    overflow: auto;
}

.table tbody {
    --bs-table-striped-bg: #f7f9fc !important;
    --bs-table-bg: #fff !important;
}

/* #region table-style-1 開始*/
.table.t-style-1 td {
    text-align: center !important;
}

.table.t-style-1 tbody.checked {
    --bs-table-striped-bg: #CFE2FF !important;
}

.table.t-style-1 tbody[data-tr-sub].checked {
    --bs-table-striped-bg: #EFF5FF !important;
}

    .table.t-style-1 tbody[data-tr-sub].checked:hover {
        --bs-table-striped-bg: #E7E9EC !important;
    }

.table.t-style-1 tbody {
    --bs-table-striped-bg: #fff !important;
    --bs-table-bg: #fff !important;
}

    /*偶數列、列hover樣式*/
    .table.t-style-1 tbody:not([data-tr-sub]).even:not(.checked), .table.t-style-1 tbody:hover, .table.t-style-1 tbody[data-tr-sub] td {
        --bs-table-striped-bg: #F7F9FC !important;
        --bs-table-bg: #F7F9FC !important;
    }

.table.t-style-1 td {
    border-color: #E2E2E2 !important;
}

.border-bottom-1.checked {
    border-bottom: initial !important;
}

/* #endregion table-style-1 結束*/
.table td.bg-1 {
    border: none;
    --bs-table-accent-bg: #495057 !important;
}

.table td.bg-2 {
    border: none;
    --bs-table-accent-bg: #6C757D !important;
}

.table thead.sub {
    background-color: #e9ecef !important;
}

.table.invoice tbody {
    --bs-table-striped-bg: #f5f5f5 !important;
    --bs-table-bg: #e2e7e8 !important;
}

.invoice .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

td {
    vertical-align: middle;
}

.table td {
    padding: 0.25rem !important;
}
.table .detail-view td {
    padding: 0px !important;
}

    .table .detail-view td .product table tbody tr td {
        padding: 0.25rem !important;
    }

/*選單樣式 開始*/
.logo-img {
    height: 3rem !important;
}

.hamburger {
    display: none;
    color: #fff;
    position: absolute;
    width: initial !important;
    top: 10px;
    right: 10px;
    font-size: 25px;
    border-radius: 5px;
    border: 1px solid #fff;
    z-index: 1;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .nav ul a {
        text-decoration: none;
        color: initial;
    }

.menu ul.dd {
    position: absolute;
    height: 50px;
    bottom: -50px;
    width: 100%;
    left: -9999px;
    /* left: 0; */
    right: 0;
    background-color: #203455;
}

.menu > li {
    position: static;
    border-left: 1px solid #485262;
}

    .menu > li:last-child {
        border-right: 1px solid #485262;
    }

.menu li a {
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e7e7e7;
    position: relative;
}

.menu > li.isDropdown > a:after {
    position: absolute;
    margin: auto;
    right: 25px;
    font-size: 150%;
    transform: rotate(90deg);
    content: '\203A';
    transition: transform .3s ease;
}

.menu ul.dd ul {
    height: 100%;
}

.menu ul.dd li {
    margin: 0;
    border: none;
}

    .menu ul.dd li:first-child > a {
        border-left: 1px solid #c0bfbf;
    }

    .menu ul.dd li a {
        position: relative;
        /* flex-direction: column; */
        color: #203455;
        border-right: 1px solid #c0bfbf;
    }


/*hover styles*/

.menu > li:hover > a {
    color: #fff;
}


/*focus styles*/

.menu li a:focus {
    outline-width: 0;
}


    /*popups*/

    .menu li a:active + ul.dd,
    .menu li a:focus + ul.dd,
    .menu li ul.dd:hover {
        left: 0;
    }

.menu > li > a.active,
.menu > li > a:active,
.menu > li > a:focus {
    background: #fff;
    color: #203455;
}

.menu ul.dd li a.active,
.menu ul.dd li a:active,
.menu ul.dd li a:focus {
    border-bottom: 8px solid #c0bfbf;
}


/* .menu ul.dd li a:active:after,
.menu ul.dd li a:focus:after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 2px;
    margin: 0 auto;
    height: 160%;
    width: 5px;
    background-color: #c0bfbf;
} */

.menu li a:active:after,
.menu li a:focus:after {
    transform: rotate(-90deg);
}

.step-box {
    display: flex;
    border-width: 1.9px;
    border-style: solid;
    border-radius: 4px;
    background: white;
    font-weight: bold;
    padding: .1rem 0.25rem !important
}

    .step-box .btn {
        display: flex !important;
        align-items: center !important;
        padding: 0.1rem 0.2rem;
        font-size: 0.9rem;
    }

        .step-box .btn i {
            padding-right: .25rem;
        }

    .step-box.pink {
        border-color: #F9AFFA;
    }

    .step-box.skyblue {
        border-color: #4183FF;
    }

        .step-box.skyblue .btn {
            border-color: #4183FF !important;
            filter: invert(47%) sepia(43%) saturate(4164%) hue-rotate(204deg) brightness(101%) contrast(101%);
        }

            .step-box.skyblue .btn:hover {
                border-color: #7f905f !important;
                background-color: #7f905f !important;
                filter: invert(100%) sepia(4%) saturate(350%) hue-rotate(322deg) brightness(122%) contrast(100%);
            }

    .step-box.darkblue {
        border-color: #0128D0;
    }

        .step-box.darkblue .btn {
            border-color: #0128D0 !important;
            filter: invert(13%) sepia(86%) saturate(6329%) hue-rotate(234deg) brightness(78%) contrast(113%);
        }

            .step-box.darkblue .btn:hover {
                border-color: #b2ee40 !important;
                background-color: #b2ee40 !important;
                filter: invert(100%) sepia(4%) saturate(350%) hue-rotate(322deg) brightness(122%) contrast(100%);
            }

    .step-box.blue {
        border-color: #032BD1;
    }

    .step-box.purple {
        border-color: #9C26D1;
    }

        .step-box.purple .pic-box {
            display: flex;
            align-items: center;
            border: 1.9px #9C26D1 solid !important;
            border-radius: 0.25rem;
        }

.step-reply, .step-dispatch, .step-arrive, .step-finsh, .step-beforefix, .step-afterfix, .step-sign {
    height: 40px !important;
    width: 40px !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    position: relative;
}

.step-reply {
    background: #fff;
    border: 2px solid #00B6FC;
    color: #00B6FC;
}

.step-dispatch {
    background: #fff;
    border: 2px solid #5CA11F;
    color: #5CA11F;
}

.step-arrive {
    background: #fff;
    border: 2px solid #F9AFFA;
    color: #F9AFFA;
}

.step-finsh {
    background: #fff;
    border: 2px solid #0128D0;
    color: #0128D0;
}

.step-sign {
    background: #bf2c73;
    background-image: linear-gradient(#0229D0, #9C26D1);
    color: #fff;
}


.step > .arrive {
    height: 40px;
    width: 40px;
    background: #fff;
    border: 2px solid #F9AFFA;
    border-radius: 50%;
    color: #F9AFFA;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    position: relative;
}

    .step > .arrive::before {
        position: absolute;
        content: '';
        top: -100vh;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 2px;
        height: 200vh;
        background: #000;
        z-index: -1;
    }

.step > .beforefix {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    position: relative;
    border-radius: 50%;
}

.beforefix, .step-beforefix {
    background: #bf2c73;
    background-image: linear-gradient(#FFB2FC, #4183FF);
    color: #fff;
}

.step > .afterfix {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    position: relative;
    border-radius: 50%;
}

.afterfix, .step-afterfix {
    background: #bf2c73;
    background-image: linear-gradient(#4483FE, #0128D0);
    color: #fff;
}

.step > .sign {
    height: 40px;
    width: 40px;
    background: #bf2c73;
    background-image: linear-gradient(#0229D0, #9C26D1);
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    position: relative;
}

.step > .finish {
    height: 40px;
    width: 40px;
    background: #fff;
    border: 2px solid #032BD1;
    border-radius: 50%;
    color: #032BD1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    position: relative;
}

.drawer-label {
    background-color: #485262;
    color: #e7e7e7;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    font-size: 30px;
    text-align: center;
    box-shadow: 1px 1px 1px #333333;
    transition: box-shadow .1s ease;
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2;
}

    .drawer-label:hover {
        box-shadow: 1px 1px 3px #333333;
        color: #8f99a9;
        cursor: pointer;
    }

    .drawer-label:focus + .fixer,
    .drawer-label:active + .fixer,
    .fixer:hover {
        top: 0;
    }

.fixer {
    position: absolute;
    width: 150px;
    height: auto;
    top: -300px;
    left: 0;
    background: #a2a2a2;
    z-index: 1;
    display: flex;
    flex-direction: column;
    transition: top .8s ease;
}

.fixer-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fixer-menu a {
    text-decoration: none;
    color: #707173;
    display: inline-block;
    width: 100%;
    font-weight: 600;
    text-align: center;
    position: relative;
}

    .fixer-menu a:hover {
        text-decoration: none;
        color: initial;
    }

.fixer-menu > ul > li > a::after {
    position: absolute;
    content: "\2BC6";
    top: 0;
    bottom: 0;
    right: 5px;
    margin: auto 0;
    color: #707173;
    transition: transform .6s ease;
}

.fixer-menu ul ul {
    height: 0;
    overflow: hidden;
    transition: height .6s ease;
}

    .fixer-menu ul ul > li {
        background: #ededed;
    }

    .fixer-menu > ul > li a:focus + ul,
    .fixer-menu > ul > li a:active + ul,
    .fixer-menu ul ul:hover {
        height: auto;
    }

.fixer-menu > ul > li a:focus::after,
.fixer-menu > ul > li a:active::after {
    transform: rotate(-60deg);
}

.card-body > .form > input[type="checkbox"]:checked ~ div:nth-child(3),
.card-body > .form > input[type="checkbox"]:checked ~ div:nth-child(2) {
    display: flex !important;
}

#photo-wall div[data-cs-box], #photo-preview div[data-cs-box] {
    cursor: pointer;
}

.img.checked {
    border: 2px #4183FF solid;
}

#photo-wall .checked::after {
    position: absolute;
    right: 1em;
    bottom: 5px;
    height: 20px;
    width: 20px;
    text-align: center;
    vertical-align: middle;
    /* content: '\2714'; */
    border-radius: 50%;
    /* background: #bf2c73; */
    /* background-image: linear-gradient(#FFB2FC, #4183FF); */
    color: #fff;
    pointer-events: none;
}

.thumbnails img,
#album_left > i,
#album_right > i {
    cursor: pointer;
}

.thumbnails .checked > img {
    border: 2px #4183FF solid;
}

.thumbnails::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

#group .collapse-toggle {
    position: relative;
    display: flex;
    width: 3em;
    background: rgb(206, 206, 206);
    background: linear-gradient(0deg, rgba(206, 206, 206, 1) 0%, rgba(167, 167, 167, 1) 100%);
}

    #group .collapse-toggle.up {
        background: rgb(126, 126, 126);
        background: linear-gradient(0deg, rgba(126, 126, 126, 1) 0%, rgba(77, 77, 77, 1) 100%);
    }

    #group .collapse-toggle::after {
        font: var(--fa-font-solid);
        content: "\f13a";
        position: absolute;
        font-size: 12px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }

    #group .collapse-toggle.up::after {
        content: '\f139';
    }

#group > div.groupName:focus {
    border: 1px#707070 solid;
}

#group > div.createButton:hover {
    /* border-color: #707070!important; */
    box-shadow: 0 0 10px #5555;
}

@media screen and (max-width:1200px) {
    .hamburger {
        display: block;
    }

    .nav ul a {
        justify-content: start;
    }

    .menu > li {
        position: relative;
        height: auto;
        border-top: 1px solid #485262;
    }

        .menu > li:not(:first-child) {
            display: none;
        }

        .menu > li > a {
            height: auto !important;
        }

    .menu ul.dd {
        position: relative;
        height: auto;
        bottom: initial;
        width: 100%;
        left: initial;
        right: initial;
        background-color: #203455;
        display: none;
    }

        .menu ul.dd li {
            border: 1px solid #e7e7e7;
        }

            .menu ul.dd li a {
                padding: 10px;
            }

    .menu li a:active + ul.dd,
    .menu li a:focus + ul.dd,
    .menu li ul.dd:hover {
        left: initial;
        display: block;
    }

    .menu > li > a:active,
    .menu > li > a:focus {
        background: #203455;
        color: #fff;
    }

    #toggle:checked + ul.menu > li:not(:first-child) {
        display: block;
    }
}


/*選單樣式 結束*/

.btn-login {
    border-radius: 50rem;
    width: 100%;
    font-weight: bold;
    background: transparent;
    border: 2px #8aa3d4 solid;
    color: #8aa3d4;
    transition: all .3s ease-in-out .2s;
}

    .btn-login:hover {
        background: #335a80;
        border: 2px #335a80 solid;
        color: #f8f9fa;
    }


/*footer樣式 開始*/

.content {
    min-height: 87vh;
}

footer {
    min-height: 13vh;
}

.footer {
    min-height: 13vh;
}

.mt-half {
    margin-top: 15vh;
}


/*footer樣式 結束*/

.bg-danger-color {
    background-color: #555555 !important;
}

.bg-danger-color-2 {
    background-color: #38C1AC !important;
}

.bg-danger-color-3 {
    background-color: #FC7E24 !important;
}

.bg-danger-color-4 {
    background-color: #CB3C3C !important;
}

.bg-danger-color-5 {
    background-color: #6923D9 !important;
}

.bg-color {
    background-color: #203455 !important;
}

.bg-color1 {
    background-color: #3b4c69 !important;
}

.bg-color2 {
    background-color: #8f99a9 !important;
}

.bg-color3 {
    background-color: #8aa3d4 !important;
}

.bg-color4 {
    background-color: #335a80 !important;
}

.bg-color5 {
    background-color: #519bb7 !important;
}

.bg-color6 {
    background-color: #e1ecf5 !important;
}

.bg-color7 {
    background-color: #485262 !important;
}

.bg-color8 {
    background-color: #675f45 !important;
}

.bg-color9 {
    background-color: #555555 !important;
}

.bg-color10 {
    background-color: #5da221 !important;
}

.bg-color11 {
    background-color: #e1f5ee !important;
}

.bg-color12 {
    background-color: #14959a !important;
}

.bg-color13 {
    background-color: #ffbebe !important;
}

.bg-color14 {
    background-color: #b53434 !important;
}

.bg-color15 {
    background-color: #ffa3a3 !important;
}

.bg-color16 {
    background-color: #beebff !important;
}

.bg-color17 {
    background-color: #ffc581 !important;
}

.bg-color18 {
    background-color: #d0ffcc !important;
}

.bg-color19 {
    background-color: #ff7474 !important;
}

.bg-color20 {
    background-color: #ffeaea !important;
}

.bg-color21 {
    background-color: #2c61c4 !important;
}

.bg-color22 {
    background-color: #505050 !important;
}

.bg-color23 {
    background-color: #d1d1d1 !important;
}

.bg-color24 {
    background-color: #5f5f5f !important;
}

.bg-color25 {
    background-color: #495c4c !important;
}

.bg-color26 {
    background-color: #00b107 !important;
}

.bg-color27 {
    background-color: #e3e3e6 !important;
}

.bg-color28 {
    background-color: #5f8896 !important;
}

.bg-color29 {
    background-color: #98832c !important;
}

.bg-color30 {
    background-color: #b99500 !important;
}

.bg-color31 {
    background-color: #6e777e !important;
}

.bg-color32 {
    background-color: #20407c !important;
}

.bg-color33 {
    background-color: #f0f0f0 !important;
}

.bg-color34 {
    background-color: #004aaf !important;
}

.bg-color35 {
    background-color: #a7a7a7 !important;
}

.bg-color36 {
    background-color: #6a7e9a !important;
}

.bg-color37 {
    background-color: #01b3ac !important;
}

.bg-color38 {
    background-color: #4f5d69 !important;
}

.bg-color39 {
    background-color: #e1e0e0 !important;
}

.bg-color40 {
    background-color: #a2a2a2 !important;
}

.bg-color41 {
    background-color: #2B89A5 !important;
}

.bg-color42 {
    background-color: #b4bdbf !important;
}

.bg-color43 {
    background-color: #5783D5 !important;
}

.bg-color44 {
    background-color: #62C335 !important;
}

.bg-color45 {
    background-color: #BBBBB9 !important;
}

.bg-color46 {
    background-color: #222222 !important;
}

.bg-color47 {
    background-color: #084298 !important;
}

.bg-color48 {
    background-color: #495057 !important;
}

.bg-color49 {
    background-color: #6C757D !important;
}

.bg-color50 {
    background-color: #ADB5BD !important;
}

.bg-color51 {
    background-color: #E9ECEF !important;
}

.bg-color52 {
    background-color: #CED4DA !important;
}

.bg-color52 {
    background-color: #6610F2 !important;
}

.bg-gradient1 {
    background: rgb(45, 50, 54);
    background-image: linear-gradient(0deg, rgba(45, 50, 54, 1) 0%, rgba(114, 118, 120, 1) 100%);
}

.bg-gray {
    background-color: #e7e7e7 !important;
}

.bg-trans {
    background-color: transparent !important;
}

.bg-coin {
    background-color: #e8c60d !important;
}

.bg-pic-login {
    background-image: url(../image/login/background.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

.border-color1 {
    border-color: #3b4c69 !important;
}

.border-color2 {
    border-color: #8f99a9 !important;
}

.border-color3 {
    border-color: #8aa3d4 !important;
}

.border-color4 {
    border-color: #335a80 !important;
}

.border-color5 {
    border-color: #519bb7 !important;
}

.border-color6 {
    border-color: #e1ecf5 !important;
}

.border-color7 {
    border-color: #485262 !important;
}

.border-color8 {
    border-color: #675f45 !important;
}

.border-color9 {
    border-color: #555555 !important;
}

.border-color10 {
    border-color: #5da221 !important;
}

.border-color11 {
    border-color: #e1f5ee !important;
}

.border-color12 {
    border-color: #14959a !important;
}

.border-color13 {
    border-color: #ffbebe !important;
}

.border-color14 {
    border-color: #b53434 !important;
}

.border-color15 {
    border-color: #ffa3a3 !important;
}

.border-color16 {
    border-color: #beebff !important;
}

.border-color17 {
    border-color: #ffc581 !important;
}

.border-color18 {
    border-color: #d0ffcc !important;
}

.border-color19 {
    border-color: #ff7474 !important;
}

.border-color20 {
    border-color: #ffeaea !important;
}

.border-color21 {
    border-color: #2c61c4 !important;
}

.border-color22 {
    border-color: #505050 !important;
}

.border-color23 {
    border-color: #d1d1d1 !important;
}

.border-color24 {
    border-color: #5f5f5f !important;
}

.border-color25 {
    border-color: #495c4c !important;
}

.border-color26 {
    border-color: #00b107 !important;
}

.border-color27 {
    border-color: #e3e3e6 !important;
}

.border-color28 {
    border-color: #5f8896 !important;
}

.border-color29 {
    border-color: #98832c !important;
}

.border-color30 {
    border-color: #b99500 !important;
}

.border-color31 {
    border-color: #6e777e !important;
}

.border-color32 {
    border-color: #20407c !important;
}

.border-color33 {
    border-color: #f0f0f0 !important;
}

.border-color34 {
    border-color: #004aaf !important;
}

.border-color35 {
    border-color: #a7a7a7 !important;
}

.border-color36 {
    border-color: #6a7e9a !important;
}

.border-color37 {
    border-color: #01b3ac !important;
}

.border-color38 {
    border-color: #4f5d69 !important;
}

.border-color39 {
    border-color: #e1e0e0 !important;
}

.border-color40 {
    border-color: #a2a2a2 !important;
}

.border-color41 {
    border-color: #2B89A5 !important;
}

.border-color52 {
    border-color: #6610F2 !important;
}

.border-color-white {
    border-color: white !important;
}

.border {
    border-color: #004aaf;
}

.border-gray {
    border-color: #e7e7e7 !important;
}

.border-sign {
    border: 1px solid #9C26D1 !important;
}

.text-color {
    color: #203455 !important;
}

.text-color1 {
    color: #3b4c69 !important;
}

.text-color2 {
    color: #8f99a9 !important;
}

.text-color3 {
    color: #8aa3d4 !important;
}

.text-color4 {
    color: #335a80 !important;
}

.text-color5 {
    color: #519bb7 !important;
}

.text-color6 {
    color: #e1ecf5 !important;
}

.text-color7 {
    color: #485262 !important;
}

.text-color8 {
    color: #675f45 !important;
}

.text-color9 {
    color: #555555 !important;
}

.text-color10 {
    color: #5da221 !important;
}

.text-color11 {
    color: #e1f5ee !important;
}

.text-color12 {
    color: #14959a !important;
}

.text-color13 {
    color: #ffbebe !important;
}

.text-color14 {
    color: #b53434 !important;
}

.text-color15 {
    color: #ffa3a3 !important;
}

.text-color16 {
    color: #beebff !important;
}

.text-color17 {
    color: #ffc581 !important;
}

.text-color18 {
    color: #d0ffcc !important;
}

.text-color19 {
    color: #ff7474 !important;
}

.text-color20 {
    color: #ffeaea !important;
}

.text-color21 {
    color: #2c61c4 !important;
}

.text-color22 {
    color: #505050 !important;
}

.text-color23 {
    color: #d1d1d1 !important;
}

.text-color24 {
    color: #5f5f5f !important;
}

.text-color25 {
    color: #495c4c !important;
}

.text-color26 {
    color: #00b107 !important;
}

.text-color27 {
    color: #e3e3e6 !important;
}

.text-color28 {
    color: #5f8896 !important;
}

.text-color29 {
    color: #98832c !important;
}

.text-color30 {
    color: #b99500 !important;
}

.text-color31 {
    color: #6e777e !important;
}

.text-color32 {
    color: #20407c !important;
}

.text-color33 {
    color: #f0f0f0 !important;
}

.text-color34 {
    color: #004aaf !important;
}

.text-color35 {
    color: #a7a7a7 !important;
}

.text-color36 {
    color: #6a7e9a !important;
}

.text-color37 {
    color: #01b3ac !important;
}

.text-color38 {
    color: #4f5d69 !important;
}

.text-color39 {
    color: #e1e0e0 !important;
}

.text-color40 {
    color: #a2a2a2 !important;
}

.text-color41 {
    color: #2B89A5 !important;
}

.text-color42 {
    color: #23bdb7 !important;
}

.text-color43 {
    color: #8ABD87 !important;
}

.text-color44 {
    color: #33D12C !important;
}

.text-color45 {
    color: #0F6EFB !important;
}

.text-color46 {
    color: #D8D8D8 !important;
}

.text-color52 {
    color: #6610F2 !important;
}

.text-gray {
    color: #e7e7e7 !important;
}

.text-white {
    color: white !important;
}

.rounded-4 {
    border-radius: 10px !important;
}

.rounded-5 {
    border-radius: 30px !important;
}

.rounded-10 {
    border-radius: 50px !important;
}

.fs-6 {
    font-size: 18px !important;
}

/*.fs-7 {
    font-size: 16px !important;
}*/

.fs-7_5 {
    font-size: .85rem !important;
}

.fs-8 {
    font-size: 14px !important;
}

.fs-9 {
    font-size: 12px !important;
}

.fs-10 {
    font-size: 10px !important;
}

.border-dotted {
    border-style: dotted !important;
}

.border-dashed {
    border-style: dashed !important;
}

.border-double {
    border-style: double !important;
}

.border-groove {
    border-style: groove !important;
}

.border-ridge {
    border-style: ridge !important;
}

.border-inset {
    border-style: inset !important;
}

.border-outset {
    border-style: outset !important;
}

.ph-color1::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #aaaaaa !important;
}

.ph-color1:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #aaaaaa !important;
    opacity: 1;
}

.ph-color1::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #aaaaaa !important;
    opacity: 1;
}

.ph-color1:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #aaaaaa !important;
}

.flex-1 {
    height: 50vh;
    flex: 1 !important;
}

.flex-03 {
    flex: .3;
}

.googlemap-rwd {
    position: relative;
    height: 0;
    padding-bottom: 75%;
    overflow: hidden
}

.googlemap-rwdiframe,
.googlemap-rwdobject,
.googlemap-rwdembed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}


/* 下拉選單 開始 */


/*下拉選單一行*/

.select-line {
    display: block !important;
}

.dropdown.bootstrap-select.form-select.select-line {
    /*width: 100% !important;*/
}

.form-select.select-line {
    padding: 0 !important;
}


/* 下拉選單 結束 */

input:-webkit-autofill {
    -webkit-background-clip: text;
    -webkit-text-fill-color: initial;
}

input.webkit-white {
    -webkit-text-fill-color: white !important;
}

/* switch button 開始 */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f1f3fa;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: #adb5db;
        -webkit-transition: .4s;
        transition: .4s;
    }

.switch input:checked + .slider {
    background-color: #13d078;
}

.switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

.switch input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
    background-color: #efefef;
}

.switch.text-yes-no .slider::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: unset;
    right: 5px;
    content: 'No';
    font-size: 10px;
    color: #424244;
    font-weight: 600;
}

.switch.text-yes-no {
    width: 48px;
}

    .switch.text-yes-no input:checked + .slider::after {
        content: 'Yes';
        color: #fff;
        left: 5px;
        right: unset;
    }

    .switch.text-yes-no input:checked + .slider:before {
        -webkit-transform: translateX(24px);
        -ms-transform: translateX(24px);
        transform: translateX(24px);
    }


/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }


/* switch button 結束 */

/* 搜尋框 開始 */
.searchbox .select2.select2-container.select2-container--default {
    position: relative;
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}

.searchbox .select2-selection.select2-selection--single {
    height: 100% !important;
    background: transparent;
    border: none;
}

/* 搜尋框 結束 */

/* 下拉選單箭頭改白色 */
.form-select-arrow {
    color: white !important;
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='angle-down' class='svg-inline--fa fa-angle-down' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' style=' color: white;%0A'%3E%3Cpath fill='currentColor' d='M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* Search框 取消按鈕樣式 */
[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 1.5rem;
    width: 1.5rem;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' style=' color: white !important;height: 10px; width: 10px;' focusable='false' data-prefix='far' data-icon='circle-xmark' class='svg-inline--fa fa-circle-xmark' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M336.1 175c-9.375-9.375-24.56-9.375-33.94 0L256 222.1L208.1 175c-9.375-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94l47.03 47.03L175 303c-9.375 9.375-9.375 24.56 0 33.94c9.373 9.373 24.56 9.381 33.94 0L256 289.9l47.03 47.03c9.373 9.373 24.56 9.381 33.94 0c9.375-9.375 9.375-24.56 0-33.94l-47.03-47.03l47.03-47.03C346.3 199.6 346.3 184.4 336.1 175zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256S512 397.4 512 256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z'%3E%3C/path%3E%3C/svg%3E");
}

/* 修正日期選擇框 */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
}

/* 修正下拉選單 */
.select2 {
    width: 100% !important;
}

.select2-selection {
    height: auto !important;
    min-height: 2rem;
}

.align-center {
    margin: 0 auto;
}

.al-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.v-center {
    display: flex;
    align-items: center;
}

.align-items-center {
    align-items: center;
}

.j-c-center {
    justify-content: center;
}

.j-c-end {
    justify-content: end;
}

.text-v-center {
    display: grid;
    align-items: center;
}

.text-center-all {
    display: grid;
    align-items: center;
    text-align: center !important;
}

.nowrap {
    white-space: nowrap;
}

.b-none {
    border: none !important;
}

.a-none {
    text-decoration: none;
    color: initial;
}

.btn-none {
    border: none;
    background: transparent;
}

.select-none {
    background-color: transparent !important;
    border: initial !important;
}

.modal .modal-header .form-control-plaintext {
    display: inline-block !important;
    width: auto !important;
}

.toggle-password {
    margin-left: -1.8rem;
    cursor: pointer;
    margin-top: 0.7rem;
}

.cursor-p {
    cursor: pointer !important;
}

.cursor-m {
    cursor: move !important;
}

.cursor-d {
    cursor: default !important;
}

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

.w-2r {
    width: 2rem !important;
}

.w-1_3r {
    width: 1.3rem;
}

.mw-1r {
    min-width: 1rem !important;
}

.mw-2r {
    min-width: 2.2rem !important;
}

/*.mw-46r {
    min-width: 4.6rem !important;
}

.mw-55r {
    min-width: 5.5rem !important;
}

.mw-7r {
    min-width: 7rem !important;
}*/

.mw-10p {
    min-width: 10px !important;
}

.mh-10p {
    min-height: 10px !important;
}

.h-025r {
    height: 2.5rem !important;
}

.h-22p {
    height: 22px !important;
}

.h-55p {
    height: 55px !important;
}

.h-70p {
    height: 70px !important;
}

.color-init {
    color: initial;
}

.input-instruction::-webkit-calendar-picker-indicator {
    display: none !important;
}

.linear-1 {
    background-image: linear-gradient(#222222, #969696);
}

.linear-2 {
    background-image: linear-gradient(#FFFFFF, #E4E4E4);
}

.border-bottom-1 {
    border-bottom: 1.2px #6C757D solid;
}

.border-right-1 {
    border-right: 1px solid #a7a7a7 !important;
}

.border-left-1 {
    border-left: 1px solid #dfe3e6 !important;
}

.resize-none {
    resize: none !important;
}

.select-none {
    user-select: none;
    /* standard syntax */
    -webkit-user-select: none;
    /* for Chrome、Safari */
    -moz-user-select: none;
    /* for Mozilla、Firefox */
}

/* 進度列表開始 */

.temp_hover {
    position: fixed;
    /*固定在網頁上不隨卷軸移動，若要隨卷軸移動用absolute*/
    background: white;
    /*背景顏色*/
    padding: 10px 20px;
    border-radius: 10px;
    /*圓角*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.progress-box-4.progress-box-4, .progress-box-5, .progress-box-6, .progress-box-7 {
    background-size: 2px 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.progress-box-1 {
    background-image: linear-gradient(#00B9FF, #00B9FF);
    background-size: 2px 50%;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.progress-box-2 {
    background: linear-gradient(#33D12C, #33D12C)50% 0/2px 100% no-repeat, linear-gradient(#33D12C, #33D12C)100% 0/50% 2px no-repeat, linear-gradient(#33D12C, #33D12C)100% 100%/50% 2px no-repeat;
}

.progress-box-3 {
    background: linear-gradient(#505050, #505050)50% 0/2px 100% no-repeat, linear-gradient(#505050, #505050)0 0/50% 2px no-repeat, linear-gradient(#505050, #505050)0 100%/50% 2px no-repeat;
}

.progress-box-4 {
    background-image: linear-gradient(#2C61C4, #2C61C4);
}

.progress-box-5 {
    background-image: linear-gradient(#FFE05D, #FFE05D);
}

.progress-box-6 {
    background-image: linear-gradient(#00AF00, #00AF00);
}

.progress-box-7 {
    background-image: linear-gradient(#203455, #203455);
}

.progress-box-8 {
    background-image: linear-gradient(#23BDB7, #23BDB7);
    background-size: 2px 50%;
    background-repeat: no-repeat;
    background-position: center top;
}

/* 進度列表結束 */

/* virtual-select開始 */
.text-white .vscomp-toggle-button {
    color: white;
}

/* virtual-select結束 */

/* #region 展開按鈕 */
.drop-product-box {
    align-items: center;
    justify-content: center !important;
    text-align: center !important;
    text-align: center;
    cursor: pointer;
    height: 1.5rem;
    width: 1.5rem;
    font-size: 0.5rem;
    color: #212529;
    border: 1px solid #DEE3E6;
    border-radius: 0.2rem;
    background: #495057;
    overflow-anchor: none;
}

    .drop-product-box:hover {
        border: 1px solid #DEE3E6;
        background: #4e596a;
    }

    .drop-product-box::after {
        content: url("../image/common/arrow/chevron-down-regular.svg");
        line-height: 2rem;
    }

    .detailShown .drop-product-box {
        background: #984C0C;
    }

        .detailShown .drop-product-box:hover {
            background: #CA6510;
        }

        .detailShown .drop-product-box::after {
            line-height: 2rem;
            content: url("../image/common/arrow/chevron-up-regular.svg");
        }


/* #endregion 展開按鈕 */

.i-drag {
    content: url("../image/common/arrow/drag.svg");
    cursor: move !important;
}

    .i-drag.gray {
        filter: invert(38%) sepia(1%) saturate(0%) hue-rotate(71deg) brightness(96%) contrast(95%);
    }

.i-pic-select {
    content: url("../image/icon/pricing/select-photo.svg");
}

.i-pic-upload {
    content: url("../image/icon/pricing/upload-photo.svg");
}

.tbody-main-row:nth-child(odd of .tbody-main-row) tr td {
    background-color: #F7F9FC !important;
}

tr.bg-green-1 td {
    background-color: #baebb5 !important;
}

tr.detailShown td {
    background-color: #FFE5D0 !important;
}