@charset "UTF-8";

/*@import url("inc/bootstrap/bootstrap.min.css");
@import url("inc/owl-carousel/owl.carousel.min.css");
@import url("inc/owl-carousel/owl.theme.default.css");*/
/*@import url("https://fonts.googleapis.com/css?family=Inter:400,500,700&display=swap");*/

html {
    height: 100% !important;
}

body {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.55rem;
    letter-spacing: -0.015rem;
    color: #4F5050;
    background: #F9F9F9;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
    width: 0;
}

::selection {
    background: rgba(30, 116, 253, 0.3);
}

a {
    transition: 0.2s all;
    color: #0370ba;
    outline: 0 !important;
}

    a:hover, a:active, a:focus {
        outline: 0 !important;
        color: #0370ba;
        text-decoration: none;
    }

button {
    outline: 0 !important;
}

    button:hover, button:active, button:focus {
        outline: 0 !important;
    }

.appHeader {
    min-height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    z-index: 999;
    background: #FFF;
    color: #141515;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.02);
}

    .appHeader:before {
        content: '';
        height: env(safe-area-inset-top);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 99999;
        background: #0370ba;
    }

    .appHeader.no-border {
        border: 0;
        box-shadow: none;
    }

    .appHeader.transparent {
        background: transparent;
        box-shadow: none;
    }

    .appHeader .left,
    .appHeader .right {
        height: 56px;
        display: flex;
        align-items: center;
        position: absolute;
    }

        .appHeader .left i.icon,
        .appHeader .left ion-icon,
        .appHeader .right i.icon,
        .appHeader .right ion-icon {
            font-size: 26px;
            --ionicon-stroke-width: 36px;
        }

        .appHeader .left .headerButton,
        .appHeader .right .headerButton {
            min-width: 36px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            color: #141515 !important;
            position: relative;
        }

            .appHeader .left .headerButton .btn,
            .appHeader .right .headerButton .btn {
                font-size: 16px;
                height: 32px;
                padding: 0px 14px;
                font-weight: 400;
            }

            .appHeader .left .headerButton:active,
            .appHeader .right .headerButton:active {
                opacity: 0.6;
            }

    .appHeader .left {
        left: 8px;
        top: 0;
    }

    .appHeader .right {
        right: 8px;
        top: 0;
    }

    .appHeader .pageTitle {
        font-size: 17px;
        font-weight: 500;
        padding: 0 10px;
    }
        /*height 18-25px*/
        .appHeader .pageTitle .logo {
            max-height: 25px;
        }

    .appHeader.text-light {
        color: #fff;
    }

        .appHeader.text-light .headerButton,
        .appHeader.text-light .pageTitle {
            color: #fff;
        }

    .appHeader.bg-primary, .appHeader.bg-secondary, .appHeader.bg-success, .appHeader.bg-warning, .appHeader.bg-danger, .appHeader.bg-info, .appHeader.bg-light, .appHeader.bg-dark {
        border: 0;
    }

.extraHeader {
    position: fixed;
    left: 0;
    top: 56px;
    height: 56px;
    right: 0;
    width: 100%;
    padding: 5px 16px;
    margin-top: env(safe-area-inset-top);
    display: flex;
    align-items: center;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

.header-large-title {
    padding: 0 16px;
}

    .header-large-title .title {
        margin: 4px 0 0 0;
        font-size: 34px;
        letter-spacing: -0.02em;
        line-height: 1.3em;
    }

    .header-large-title .subtitle {
        font-size: 17px;
        font-weight: 400;
        margin: 6px 0 0 0;
        color: #141515;
        line-height: 1.6em;
    }

.appHeader.scrolled {
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    height: 0;
    transition: 0.1s all;
}

    .appHeader.scrolled .pageTitle {
        opacity: 0;
    }

    .appHeader.scrolled.is-active {
        background: #FFF;
        min-height: 56px;
        border-bottom-color: #E1E1E1;
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    }

        .appHeader.scrolled.is-active .pageTitle {
            opacity: 1;
        }

    .appHeader.scrolled.bg-primary {
        background: transparent !important;
        border-bottom: 0 !important;
    }

        .appHeader.scrolled.bg-primary .headerButton {
            color: #0370ba;
        }

        .appHeader.scrolled.bg-primary.is-active {
            background: #0370ba !important;
        }

            .appHeader.scrolled.bg-primary.is-active .headerButton {
                color: #FFF !important;
            }

    .appHeader.scrolled.bg-secondary {
        background: transparent !important;
        border-bottom: 0 !important;
    }

        .appHeader.scrolled.bg-secondary .headerButton {
            color: #6C7C94;
        }

        .appHeader.scrolled.bg-secondary.is-active {
            background: #6C7C94 !important;
        }

            .appHeader.scrolled.bg-secondary.is-active .headerButton {
                color: #FFF !important;
            }

    .appHeader.scrolled.bg-success {
        background: transparent !important;
        border-bottom: 0 !important;
    }

        .appHeader.scrolled.bg-success .headerButton {
            color: #34C759;
        }

        .appHeader.scrolled.bg-success.is-active {
            background: #28a745 !important;
        }

            .appHeader.scrolled.bg-success.is-active .headerButton {
                color: #FFF !important;
            }

    .appHeader.scrolled.bg-danger {
        background: transparent !important;
        border-bottom: 0 !important;
    }

        .appHeader.scrolled.bg-danger .headerButton {
            color: #EC4433;
        }

        .appHeader.scrolled.bg-danger.is-active {
            background: #EC4433 !important;
        }

            .appHeader.scrolled.bg-danger.is-active .headerButton {
                color: #FFF !important;
            }

    .appHeader.scrolled.bg-warning {
        background: transparent !important;
        border-bottom: 0 !important;
    }

        .appHeader.scrolled.bg-warning .headerButton {
            color: #FE9500;
        }

        .appHeader.scrolled.bg-warning.is-active {
            background: #FE9500 !important;
        }

            .appHeader.scrolled.bg-warning.is-active .headerButton {
                color: #FFF !important;
            }

    .appHeader.scrolled.bg-info {
        background: transparent !important;
        border-bottom: 0 !important;
    }

        .appHeader.scrolled.bg-info .headerButton {
            color: #592BCA;
        }

        .appHeader.scrolled.bg-info.is-active {
            background: #592BCA !important;
        }

            .appHeader.scrolled.bg-info.is-active .headerButton {
                color: #FFF !important;
            }

    .appHeader.scrolled.bg-dark {
        background: transparent !important;
        border-bottom: 0 !important;
    }

        .appHeader.scrolled.bg-dark .headerButton {
            color: #000;
        }

        .appHeader.scrolled.bg-dark.is-active {
            background: #000 !important;
        }

            .appHeader.scrolled.bg-dark.is-active .headerButton {
                color: #FFF !important;
            }

.appBottomMenu {
    min-height: 56px;
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #E1E1E1;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: env(safe-area-inset-bottom);
}

    .appBottomMenu.no-border {
        border: 0 !important;
        box-shadow: 0 !important;
    }

    .appBottomMenu.rounded {
        border-radius: 24px 24px 0 0 !important;
    }

        .appBottomMenu.rounded .item:before {
            display: none;
        }

    .appBottomMenu .item {
        font-size: 14px;
        letter-spacing: 0;
        text-align: center;
        width: 100%;
        height: 56px;
        line-height: 1.2em;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

        .appBottomMenu .item:before {
            content: '';
            display: block;
            height: 2px;
            border-radius: 0 0 10px 10px;
            background: transparent;
            position: absolute;
            left: 4px;
            right: 4px;
            top: 0;
        }

        .appBottomMenu .item .col {
            width: 100%;
            padding: 0 4px;
            text-align: center;
        }

        .appBottomMenu .item i.icon,
        .appBottomMenu .item ion-icon {
            display: inline-flex;
            margin: 1px auto 3px auto;
            font-size: 26px;
            line-height: 1em;
            color: #141515;
            transition: 0.1s all;
            display: block;
            margin-top: 1px;
            margin-bottom: 3px;
        }

        .appBottomMenu .item .action-button {
            display: inline-flex;
            width: 50px;
            height: 50px;
            margin-left: -5px;
            margin-right: -5px;
            align-items: center;
            justify-content: center;
            border-radius: 200px;
            background: #0370ba;
        }

            .appBottomMenu .item .action-button.large {
                width: 80px;
                height: 80px;
                margin-top: -20px;
                margin-left: -10px;
                margin-right: -10px;
            }

            .appBottomMenu .item .action-button i.icon,
            .appBottomMenu .item .action-button ion-icon {
                color: #FFF !important;
                margin: 0 !important;
                line-height: 0 !important;
            }

        .appBottomMenu .item strong {
            margin-top: 4px;
            display: block;
            color: #141515;
            font-weight: 400;
            transition: 0.1s all;
        }

        .appBottomMenu .item:active {
            opacity: .8;
        }

        .appBottomMenu .item.active:before {
            background: transparent;
        }

        .appBottomMenu .item.active i.icon,
        .appBottomMenu .item.active ion-icon,
        .appBottomMenu .item.active strong {
            color: #0370ba !important;
            font-weight: 500;
        }

        .appBottomMenu .item:hover i.icon,
        .appBottomMenu .item:hover ion-icon,
        .appBottomMenu .item:hover strong {
            color: #141515;
        }

    .appBottomMenu.text-light {
        color: #FFF;
    }

        .appBottomMenu.text-light .item {
            color: #FFF;
            opacity: .7;
        }

            .appBottomMenu.text-light .item i.icon,
            .appBottomMenu.text-light .item ion-icon,
            .appBottomMenu.text-light .item strong {
                color: #FFF;
            }

            .appBottomMenu.text-light .item.active {
                opacity: 1;
            }

                .appBottomMenu.text-light .item.active i.icon,
                .appBottomMenu.text-light .item.active ion-icon,
                .appBottomMenu.text-light .item.active strong {
                    color: #FFF !important;
                }

    .appBottomMenu.bg-primary, .appBottomMenu.bg-secondary, .appBottomMenu.bg-success, .appBottomMenu.bg-warning, .appBottomMenu.bg-danger, .appBottomMenu.bg-info, .appBottomMenu.bg-light, .appBottomMenu.bg-dark {
        border: 0;
    }

        .appBottomMenu.bg-primary .item:before, .appBottomMenu.bg-secondary .item:before, .appBottomMenu.bg-success .item:before, .appBottomMenu.bg-warning .item:before, .appBottomMenu.bg-danger .item:before, .appBottomMenu.bg-info .item:before, .appBottomMenu.bg-light .item:before, .appBottomMenu.bg-dark .item:before {
            display: none;
        }

#appCapsule {
    padding: 56px 0 0 0;
    margin-bottom: env(safe-area-inset-bottom);
    margin-top: env(safe-area-inset-top);
}

    #appCapsule.extra-header-active {
        padding-top: 112px;
    }

    #appCapsule.full-height {
        min-height: 100vh;
    }

.section {
    padding: 0 16px;
}

    .section.full {
        padding: 0;
    }

.wide-block {
    background: #fff;
    /*border-top: 1px solid #E1E1E1;
   border-bottom: 1px solid #E1E1E1;*/
    padding-left: 16px;
    padding-right: 16px;
}

    .wide-block.transparent {
        background: transparent !important;
    }

.section-title {
    font-size: 15px;
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #141515;
    font-weight: 500;
}

    .section-title.large {
        font-size: 24px;
        line-height: 1.2em;
        font-weight: 700;
    }

    .section-title.medium {
        font-size: 17px;
        font-weight: 700;
    }

.content-header,
.content-footer {
    font-size: 11px;
    color: #A1A1A2;
    padding-left: 0;
    padding-right: 0;
    line-height: 1.4em;
}

.section.full .section-title {
    padding-left: 16px;
    padding-right: 16px;
}

.section.full .content-header,
.section.full .content-footer {
    padding-left: 16px;
    padding-right: 16px;
}

.section.full .wide-block .content-header,
.section.full .wide-block .content-footer {
    padding-left: 0;
    padding-right: 0;
}

.section.inset .wide-block {
    border: 1px solid #E1E1E1;
    border-radius: 6px;
}

.profileBox {
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    align-items: center;
    position: relative;
    /* background: #fff !important; */
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.02);
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    margin-top: env(safe-area-inset-top);
    right: 0;
    top: 0;
    background: #007fe3;
    width: 100%;
    z-index: 999;
    border-radius: 0px 0px 10px 10px;
    color: white !Important;
    background-image: linear-gradient(-45deg, #45a4e3, #0885d9, #438ee9, #5da4d3) !important;
    background-size: 400% 400% !important;
    animation: gradient-move 3s ease infinite !important;
    webkit-animation: gradient-move 3s ease infinite !important;
    border: transparent;
}
    .profileBox:before {
        background: #0370ba;
        content: '';
        height: env(safe-area-inset-top);
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    .profileBox .image-wrapper {
        margin-right: 16px;
        padding: 16px 0;
    }

        .profileBox .image-wrapper .imaged {
            width: 42px;
            height: 42px;
            border: 2px solid #FFF;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
        }

    .profileBox .in {
        line-height: 1.4em;
        padding: 16px 25px 16px 0;
    }

        .profileBox .in strong {
            display: block;
            font-weight: 500;
            color: #FFF;
        }

        .profileBox .in .text-muted {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5) !important;
        }

.sidebar-buttons {
    background: #FFF;
    border-top: 1px solid #E1E1E1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom);
}

    .sidebar-buttons .button {
        float: 1;
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: #141515;
    }

        .sidebar-buttons .button:hover, .sidebar-buttons .button:active {
            background: rgba(225, 225, 225, 0.2);
        }

    .sidebar-buttons:last-child {
        border-right-color: transparent;
    }

.close-sidebar-button {
    font-size: 22px;
    position: absolute;
    width: 36px;
    display: flex;
    align-items: center;
    border-radius: 100%;
    justify-content: center;
    height: 36px;
    right: 5px;
    top: 50%;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-top: -18px;
}

    .close-sidebar-button:active {
        background: rgba(255, 255, 255, 0.1);
    }

.action-group {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0px 16px 10px 16px;
    background: #0370ba;
}

    .action-group .action-button {
        padding: 10px 2px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 11px;
        line-height: 1em;
        color: rgba(255, 255, 255, 0.7);
    }

        .action-group .action-button .iconbox {
            background: rgba(0, 0, 0, 0.3);
            width: 38px;
            height: 38px;
            margin: 0 auto 8px auto;
            border-radius: 100%;
            font-size: 18px;
            color: #FFF;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .action-group .action-button:last-child {
            border-right: 0;
        }

#sidebarPanel .modal-dialog {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
}

#sidebarPanel .modal-body {
    margin-top: 76px;
    margin-bottom: 80px;
}

#sidebarPanel .modal-content {
    width: 300px;
    padding-top: env(safe-area-inset-top);
}

.panelbox-left .listview > li,
.panelbox-right .listview > li {
    padding: 10px 16px;
}

.panelbox-left .link-listview > li,
.panelbox-right .link-listview > li {
    padding: 0;
}

    .panelbox-left .link-listview > li a,
    .panelbox-right .link-listview > li a {
        padding: 10px 36px 10px 16px;
    }

.panelbox-left .image-listview > li,
.panelbox-right .image-listview > li {
    padding: 0;
}

    .panelbox-left .image-listview > li .item,
    .panelbox-right .image-listview > li .item {
        padding: 10px 16px;
    }

    .panelbox-left .image-listview > li a.item,
    .panelbox-right .image-listview > li a.item {
        padding-right: 36px;
    }

.sidebar-close {
    position: absolute;
    right: 10px;
}

.appFooter {
    border-top: 1px solid #E1E1E1;
    padding: 24px 16px;
    font-size: 12px;
    text-align: center;
    line-height: 1.2em;
    background: #fff;
}

    .appFooter .footer-title {
        font-weight: 500;
        color: #141515;
        margin-bottom: 8px;
    }

    .appFooter .btn {
        margin: 0 5px;
    }

.fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    min-height: 84px;
    right: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: env(safe-area-inset-bottom);
}

    .fixed-footer > div {
        width: 100%;
    }

    .fixed-footer.transparent {
        background: transparent !important;
    }

.footer-logo {
    height: 16px;
}

.footer-link {
    padding: 0;
    border-top: 1px solid rgba(225, 225, 225, 0.5);
    border-bottom: 1px solid rgba(225, 225, 225, 0.5);
    margin-left: -16px;
    margin-right: -16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .footer-link a {
        float: 1;
        padding: 12px 2px;
        width: 100%;
        color: #4F5050;
        display: block;
    }

        .footer-link a span {
            display: block;
        }

        .footer-link a i.icon,
        .footer-link a ion-icon {
            font-size: 24px;
            margin-bottom: 4px;
        }

.exampleBox {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E1E1E1;
    background: rgba(225, 225, 225, 0.3);
    font-size: 10px;
}

.demoPage .appHeader {
    position: relative;
    z-index: 0;
}

    .demoPage .appHeader:before {
        height: 0 !important;
        display: none;
    }

.demoPage .appBottomMenu {
    position: relative;
    z-index: 0;
    padding-bottom: 0;
}

.row {
    margin-left: -8px;
    margin-right: -8px;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12 {
    padding-left: 8px;
    padding-right: 8px;
}

.m-0 {
    margin: 0 !important;
}

.m-05 {
    margin: 5px !important;
}

.m-1 {
    margin: 8px !important;
}

.m-2 {
    margin: 16px !important;
}

.m-3 {
    margin: 24px !important;
}

.m-4 {
    margin: 32px !important;
}

.m-5 {
    margin: 40px !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-05 {
    margin-top: 5px !important;
}

.mt-1 {
    margin-top: 8px !important;
}

.mt-2 {
    margin-top: 16px !important;
}

.mt-3 {
    margin-top: 24px !important;
}

.mt-4 {
    margin-top: 32px !important;
}

.mt-5 {
    margin-top: 40px !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mb-05 {
    margin-bottom: 5px !important;
}

.mb-1 {
    margin-bottom: 8px !important;
}

.mb-2 {
    margin-bottom: 16px !important;
}

.mb-3 {
    margin-bottom: 24px !important;
}

.mb-4 {
    margin-bottom: 32px !important;
}

.mb-5 {
    margin-bottom: 40px !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-05 {
    margin-left: 5px !important;
}

.ml-1 {
    margin-left: 8px !important;
}

.ml-2 {
    margin-left: 16px !important;
}

.ml-3 {
    margin-left: 24px !important;
}

.ml-4 {
    margin-left: 32px !important;
}

.ml-5 {
    margin-left: 40px !important;
}

.mr-0 {
    margin-right: 0px !important;
}

.mr-05 {
    margin-right: 5px !important;
}

.mr-1 {
    margin-right: 8px !important;
}

.mr-2 {
    margin-right: 16px !important;
}

.mr-3 {
    margin-right: 24px !important;
}

.mr-4 {
    margin-right: 32px !important;
}

.mr-5 {
    margin-right: 40px !important;
}

.p-0 {
    padding: 0 !important;
}

.p-05 {
    padding: 5px !important;
}

.px-25 {
    padding: 2.5px !important;
}

.p-1 {
    padding: 8px !important;
}

.p-2 {
    padding: 16px !important;
}

.p-3 {
    padding: 24px !important;
}

.p-4 {
    padding: 32px !important;
}

.p-5 {
    padding: 40px !important;
}

.pt-0 {
    padding-top: 0px !important;
}

.pt-05 {
    padding-top: 5px !important;
}

.pt-1 {
    padding-top: 8px !important;
}

.pt-2 {
    padding-top: 16px !important;
}

.pt-3 {
    padding-top: 24px !important;
}

.pt-4 {
    padding-top: 32px !important;
}

.pt-5 {
    padding-top: 40px !important;
}

.mr-20 {
    margin-right: 20px;
}

.pb-0 {
    padding-bottom: 0px !important;
}

.pb-05 {
    padding-bottom: 5px !important;
}

.pb-1 {
    padding-bottom: 8px !important;
}

.pb-2 {
    padding-bottom: 16px !important;
}

.pb-3 {
    padding-bottom: 24px !important;
}

.pb-4 {
    padding-bottom: 32px !important;
}

.pb-5 {
    padding-bottom: 40px !important;
}

.pl-0 {
    padding-left: 0px !important;
}

.pl-05 {
    padding-left: 5px !important;
}

.pl-1 {
    padding-left: 8px !important;
}

.pl-2 {
    padding-left: 16px !important;
}

.pl-3 {
    padding-left: 24px !important;
}

.pl-4 {
    padding-left: 32px !important;
}

.pl-5 {
    padding-left: 40px !important;
}

.pr-0 {
    padding-right: 0px !important;
}

.pr-05 {
    padding-right: 5px !important;
}

.pr-1 {
    padding-right: 8px !important;
}

.pr-2 {
    padding-right: 16px !important;
}

.pr-3 {
    padding-right: 24px !important;
}

.pr-4 {
    padding-right: 32px !important;
}

.pr-5 {
    padding-right: 40px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #141515;
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
    line-height: 1.3em;
}

    h1 small,
    h2 small,
    h3 small,
    h4 small,
    h5 small,
    h6 small {
        color: rgba(20, 21, 21, 0.6);
    }

    h1 .badge,
    h2 .badge,
    h3 .badge,
    h4 .badge,
    h5 .badge,
    h6 .badge {
        line-height: 1em;
    }

.text-muted {
    font-size: 13px;
    color: #4F5050 !important;
}

h1 {
    font-size: 34px;
    font-weight: 700;
}

h2 {
    font-size: 24px;
    font-weight: 700;
}

h3 {
    font-size: 17px;
    font-weight: 700;
}

h4 {
    font-size: 15px;
    font-weight: 500;
}

h5 {
    font-size: 13px;
    font-weight: 500;
}

h6 {
    font-size: 11px;
    font-weight: 500;
}

.lead {
    font-weight: 400;
    font-size: 17px;
    color: #4F5050 !important;
}

mark {
    border-radius: 6px;
}

.text-large {
    font-size: 34px;
}

strong,
b {
    font-weight: 500;
}

.page-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

    .page-title.inset {
        padding-left: 16px;
        padding-right: 16px;
    }

    .page-title .in {
        padding-right: 16px;
    }

    .page-title .link {
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 3px;
    }

        .page-title .link:hover, .page-title .link:active {
            opacity: 0.8;
        }

    .page-title strong {
        font-weight: 500;
        color: #A1A1A2;
        font-size: 13px;
        text-transform: uppercase;
        line-height: 1.2em;
    }

    .page-title .title {
        margin: 0;
        font-size: 24px;
        line-height: 1.2em;
    }

.section.full .page-title {
    padding-left: 16px;
    padding-right: 16px;
}

code {
    color: #0370ba;
}

figure.codebox {
    background: #E1E1E1;
    border-radius: 6px;
    padding: 5px 12px;
}

    figure.codebox code {
        color: #141515;
        line-height: 1.2em;
    }

ion-icon {
    --ionicon-stroke-width: 32px;
}

i.icon {
    line-height: 1em !important;
}

.demoIcons {
    font-size: 32px;
    color: #141515;
}

.iconedbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1em;
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

    .iconedbox.iconedbox-sm {
        width: 26px;
        height: 26px;
        font-size: 18px;
        line-height: 1em;
    }

    .iconedbox.iconedbox-lg {
        width: 64px;
        height: 64px;
        font-size: 42px;
        line-height: 1em;
    }

    .iconedbox.iconedbox-xl {
        width: 96px;
        height: 96px;
        font-size: 64px;
        line-height: 1em;
    }

    .iconedbox.iconedbox-xxl {
        width: 144px;
        height: 144px;
        font-size: 90px;
        line-height: 1em;
    }

.imaged {
    height: auto;
    border-radius: 6px;
}

    .imaged.w16 {
        width: 16px !important;
    }

    .imaged.w24 {
        width: 24px !important;
    }

    .imaged.w32 {
        width: 32px !important;
    }

    .imaged.w36 {
        width: 36px !important;
    }

    .imaged.w48 {
        width: 48px !important;
    }

    .imaged.w64 {
        width: 64px !important;
    }

    .imaged.w76 {
        width: 76px !important;
    }

    .imaged.w86 {
        width: 86px !important;
    }

    .imaged.w100 {
        width: 100px !important;
    }

    .imaged.w120 {
        width: 120px !important;
    }

    .imaged.w140 {
        width: 140px !important;
    }

    .imaged.w160 {
        width: 160px !important;
    }

    .imaged.w180 {
        width: 180px !important;
    }

    .imaged.w200 {
        width: 200px !important;
    }

    .imaged.img-fluid {
        width: 100%;
    }

    .imaged.rounded {
        border-radius: 100% !important;
    }

    .imaged.radius {
        border-radius: 6px !important;
    }

    .imaged.square {
        border-radius: 0 !important;
    }

#loader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: #FFF;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

    #loader .loading-icon {
        width: 42px;
        height: auto;
        animation: loadingAnimation 1s infinite;
    }

@keyframes loadingAnimation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner-border-x {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
}


.spinner-border-ajax {
    animation: spinner-border .75s linear infinite;
    width: 75px !important;
    height: 75px !important;
    display: inline-block;
    border-width: 2px !important;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #0570ba;
    /* animation: spin 1s infinite linear; */
    border-radius: 100%;
    border-style: solid;
}

.spinner-border-saving {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    vertical-align: text-bottom;
    margin-bottom: 50px !important;
    border: .05em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
    /* display: table; */
    /* position: relative !important; */
}

.spinner-border-large {
    animation: spinner-border .75s linear infinite;
    width: 100px !important;
    height: 100px !important;
    display: inline-block;
    border-width: 3px !important;
    border-color: rgba(255,255,255,.05);
    border-top-color: #0570ba;
    border-radius: 100%;
    border-style: solid;
}


#loaderAjax {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

#savingAjax {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
}



#savingFunctionAjax {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.weighingBinLoader {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,.7);
    align-items: center;
    justify-content: center;
}

.taringBinLoader {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,.7);
    align-items: center;
    justify-content: center;
}


#taringBinLoaderQS {
    left: 0;
    top: 0;
    justify-content: center !important;
    right: 0;
    position: absolute;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,.7);
    align-items: center;
    justify-content: center;
}

#loadingBinDataQS {
    left: 0;
    top: 0;
    justify-content: center !important;
    right: 0;
    position: absolute;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,1);
    align-items: center;
    justify-content: center;
}

#weighingBinLoaderQS {
    left: 0;
    top: 0;
    justify-content: center !important;
    right: 0;
    position: absolute;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,.7);
    align-items: center;
    justify-content: center;
}


#uliLoader {
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    /* display: flex; */
    bottom: 0;
    /* height: 100vh !important; */
    z-index: 99999;
    background: rgba(255,255,255,.7);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

#uliTaskLoader {
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    /* display: flex; */
    bottom: 0;
    /* height: 100vh !important; */
    z-index: 99999;
    background: rgba(255,255,255,1);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}


#taskLoaderCancel {
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    /* display: flex; */
    bottom: 0;
    /* height: 100vh !important; */
    z-index: 99999;
    background: rgba(255,255,255,1);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

#uliTaskLoaderQuick {
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    /* display: flex; */
    bottom: 0;
    /* height: 100vh !important; */
    z-index: 99999;
    background: rgba(255,255,255,1);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

#uliCustomLoader {
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    /* display: flex; */
    bottom: 0;
    /* height: 100vh !important; */
    z-index: 99999;
    background: rgba(255,255,255,1);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}


.uliCustomLoader {
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    /* display: flex; */
    bottom: 0;
    /* height: 100vh !important; */
    z-index: 99999;
    background: rgba(255,255,255,1);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

#putAwayStartRouteLoader {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(247, 250, 253, 0.97);
    padding: 1.5rem;
}

.putAway-start-loader {
    width: min(100%, 320px);
    text-align: center;
}

.putAway-start-loader__visual {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.putAway-start-loader__img {
    width: 64px;
    height: auto;
    position: relative;
    z-index: 1;
    animation: putAwayStartLoaderBob 1.6s ease-in-out infinite;
}

.putAway-start-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(3, 112, 186, 0.12);
    border-top-color: #0370ba;
    animation: putAwayStartLoaderSpin 0.9s linear infinite;
}

.putAway-start-loader__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0370ba;
}

.putAway-start-loader__title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a2b3c;
}

.putAway-start-loader__status {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: #5a6b7c;
    min-height: 1.4em;
}

.putAway-start-loader__track {
    height: 8px;
    border-radius: 999px;
    background: rgba(3, 112, 186, 0.12);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.putAway-start-loader__bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background-image: linear-gradient(-90deg, #0370ba, #5082b9, #0370ba);
    background-size: 200% 100%;
    animation: putAwayStartLoaderShimmer 1.4s ease infinite;
    transition: width 0.25s ease;
}

.putAway-start-loader__count {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0370ba;
}

@keyframes putAwayStartLoaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes putAwayStartLoaderBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes putAwayStartLoaderShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

#putAwayUnselectModal {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 43, 60, 0.55);
    padding: 1.5rem;
    pointer-events: all;
    animation: putAwayUnselectModalFadeIn 0.2s ease-out;
}

#putAwayUnselectModal.d-none {
    display: none !important;
    pointer-events: none;
}

.putAway-unselect-modal {
    width: min(100%, 320px);
    text-align: center;
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: 0 12px 40px rgba(26, 43, 60, 0.22);
    animation: putAwayUnselectModalScaleIn 0.22s ease-out;
}

.putAway-unselect-modal__visual {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.putAway-unselect-modal__img {
    width: 52px;
    height: auto;
    position: relative;
    z-index: 1;
    animation: putAwayStartLoaderBob 1.6s ease-in-out infinite;
}

.putAway-unselect-modal__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(3, 112, 186, 0.12);
    border-top-color: #0370ba;
    animation: putAwayStartLoaderSpin 0.9s linear infinite;
}

.putAway-unselect-modal__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0370ba;
}

.putAway-unselect-modal__title {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2b3c;
}

.putAway-unselect-modal__status {
    margin: 0;
    font-size: 0.95rem;
    color: #5a6b7c;
    min-height: 1.4em;
}

@keyframes putAwayUnselectModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes putAwayUnselectModalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#patientChargingLoader {
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    /* display: flex; */
    bottom: 0;
    /* height: 100vh !important; */
    z-index: 99999;
    background: rgba(255,255,255,1);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}


#loaderDataHome {
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    /* display: flex; */
    bottom: 0;
    /* height: 100vh !important; */
    z-index: 99999;
    background: rgba(255,255,255,1);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}



#loaderData360 {
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    /* display: flex; */
    bottom: 0;
    /* height: 100vh !important; */
    z-index: 99999;
    background: rgba(255,255,255,1);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

#loaderBins {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
}

#loaderCloudRouter {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
}

#createLoader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
}

#gatheringBins {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

#removingScale {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loaderImageHome {
    left: 50% !important;
    top: 50% !important;
    position: fixed;
    /* display: block; */
    transform: translate(-50%, -50%);
}



.loaderHome {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
}


.loaderTable {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
}

#loaderSavedQS {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}


#errorSavedQS {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#errorRWSavedQS {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#successRWSavedQS {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /*CY REMOVED !!!! z-index: 99999;*/
    display: flex;
    align-items: center;
    justify-content: center;
}


#loaderAjax .loading-icon {
    width: 42px;
    height: auto;
    animation: loadingAnimation 1s infinite;
}

@keyframes loadingAnimation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.badge {
    font-size: 12px;
    line-height: 1em;
    border-radius: 100px;
    letter-spacing: 0;
    height: 22px;
    min-width: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
}

.badge-primary,
a.badge-primary {
    background: #0370ba !important;
}

.badge-secondary,
a.badge-secondary {
    background: #6C7C94 !important;
}

.badge-success,
a.badge-success {
    background: #289c45 !important;
}

.badge-danger,
a.badge-danger {
    background: #EC4433 !important;
}

.badge-warning,
a.badge-warning {
    background: #FE9500 !important;
    color: #FFF;
}

.badge-info,
a.badge-info {
    background: #592BCA !important;
}

.badge-light,
a.badge-light {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #141515;
}

.badge-dark,
a.badge-dark {
    background: #222 !important;
}

.badge-empty {
    display: block !important;
    min-width: 8px !important;
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    font-size: 0px;
}

.appHeader .badge {
    min-width: 16px;
    height: 16px;
    line-height: 9px !important;
    font-size: 10px;
    padding: 0 4px !important;
    position: absolute;
    right: 2px;
    top: 10px;
}

.appHeader .badge-empty {
    top: 14px;
}

.appBottomMenu .badge {
    min-width: 16px;
    height: 16px;
    line-height: 9px !important;
    font-size: 10px;
    padding: 0 4px !important;
    position: absolute;
    right: 50%;
    transform: translateX(120%);
    top: -3px;
}

.appBottomMenu .badge-empty {
    transform: translateX(200%);
    top: -1px;
}

.listview-title {
    color: #4F5050;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .listview-title .link {
        color: #A1A1A2;
        font-weight: 500;
        font-size: 11px;
        display: flex;
        align-items: center;
    }

        .listview-title .link i.icon,
        .listview-title .link ion-icon {
            font-size: 15px;
            margin-right: 4px;
        }

.listview {
    display: block;
    padding: 0;
    margin: 0;
    color: #141515;
    background: #fff;
    /*  border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;*/
    line-height: 1.3em;
}

    .listview .text-muted {
        font-size: 13px;
        color: #A1A1A2 !important;
    }

    .listview .text-muted-dark {
        font-size: 13px;
        color: #737376 !important;
    }

    .listview > li {
        padding: 8px 16px;
        display: block;
        align-items: center;
        justify-content: space-between;
        position: relative;
        min-height: 50px;
    }

        .listview > li .item {
            position: relative;
        }

        .listview > li:after {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: #E1E1E1;
        }

        .listview > li.border-0:after {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: #fff;
        }

        .listview > li:last-child:after {
            display: none;
        }

        .listview > li footer,
        .listview > li header {
            font-size: 12px;
            margin: 0;
            line-height: 1.2em;
        }

        .listview > li footer {
            color: #4F5050;
            margin-top: 3px;
        }

        .listview > li header {
            margin-bottom: 3px;
        }

        .listview > li.divider-title {
            background: rgba(225, 225, 225, 0.5);
            margin-top: -1px;
            border-top: 1px solid #E1E1E1;
            border-bottom: 1px solid #E1E1E1;
            padding: 12px 16px;
            font-size: 13px;
            min-height: auto;
            color: #4F5050;
        }

            .listview > li.divider-title:after {
                display: none;
            }

    .listview.flush {
        border-top: 0;
        border-bottom: 0;
    }

    .listview.transparent {
        background: transparent;
    }

.simple-listview > li {
    display: flex;
}

.link-listview > li {
    padding: 0;
    min-height: auto;
}

    .link-listview > li a {
        padding: 8px 36px 8px 16px;
        min-height: 50px;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        color: #141515 !important;
    }

        .link-listview > li a:after {
            background-image: url("data:image/svg+xml,%0A%3Csvg width='10px' height='16px' viewBox='0 0 10 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Listview' transform='translate(-112.000000, -120.000000)' stroke='%23A1A1A2' stroke-width='2.178'%3E%3Cpolyline id='Path' points='114 122 120 128 114 134'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center center;
            width: 16px;
            height: 16px;
            content: "";
            position: absolute;
            right: 12px;
            opacity: 0.5;
            top: 50%;
            margin-top: -8px;
        }

        .link-listview > li a:active {
            background: rgba(225, 225, 225, 0.3);
        }

.image-listview > li {
    padding: 0;
    min-height: auto;
}

    .image-listview > li:after {
        left: 68px;
    }

    .image-listview > li .item, li.locationItem > .item {
        padding: 10px 16px;
        width: 100%;
        min-height: 50px;
        display: flex;
        align-items: center;
    }


    .image-listview > li .item-small {
        padding: 5px 8px;
        width: 100%;
        min-height: 25px;
        display: flex;
        align-items: center;
    }

    .image-listview > li .item .image {
        min-width: 36px;
        max-width: 36px;
        width: 36px;
        height: 36px;
        border-radius: 400px;
        margin-right: 16px;
    }

    .image-listview > li .item-small .image {
        min-width: 18px;
        max-width: 18px;
        width: 18px;
        height: 18px;
        border-radius: 400px;
        margin-right: 8px;
    }

#menuItemsUL.image-listview > li .item .icon-box, li.locationItem .icon-box {
    min-width: 36px;
    max-width: 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1em;
    font-size: 20px;
    border-radius: 400px;
    margin-right: 16px;
    /*background-color: #e8f2f9;*/
    background-color: #DDF1FF;
}


    .image-listview > li .item .icon-box, li.locationItem .icon-box {
        min-width: 36px;
        max-width: 36px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1em;
        font-size: 20px;
        border-radius: 400px;
        margin-right: 16px;
        /*background-color: #e8f2f9;*/
       
    }

    .image-listview > li .item .icon-box-small, li.locationItem .icon-box-small {
        min-width: 24px;
        max-width: 24px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1em;
        font-size: 16px;
        border-radius: 400px;
        margin-right: 13px;
    }

    .image-listview > li .item .icon-box-small, li .icon-box-small {
        min-width: 24px;
        max-width: 24px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1em;
        font-size: 16px;
        border-radius: 400px;
        margin-right: 13px;
    }



    .image-listview > li .item-small .icon-box {
        min-width: 24px;
        max-width: 24px;
        width: 124px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1em;
        font-size: 15px;
        border-radius: 400px;
        margin-right: 8px;
    }

    .image-listview > li .item .icon-box.bg-primary, .image-listview > li .item .icon-box.bg-secondary, .image-listview > li .item .icon-box.bg-success, .image-listview > li .item .icon-box.bg-danger, .image-listview > li .item .icon-box.bg-warning, .image-listview > li .item .icon-box.bg-info, .image-listview > li .item .icon-box.bg-dark, .image-listview > li .item .icon-box.bg-light {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    }

    .image-listview > li .item-small .icon-box.bg-primary, .image-listview > li .item .icon-box.bg-secondary, .image-listview > li .item .icon-box.bg-success, .image-listview > li .item .icon-box.bg-danger, .image-listview > li .item .icon-box.bg-warning, .image-listview > li .item .icon-box.bg-info, .image-listview > li .item .icon-box.bg-dark, .image-listview > li .item .icon-box.bg-light {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    }

    .image-listview > li .item .in, li.locationItem .item .in {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .image-listview > li .item-small .in, li.locationItem .item-small .in {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    /*FONT WEIGHT ADDED*/
    .image-listview > li a.item {
        color: #141515 !important;
        padding-right: 36px;
        font-weight: 500;
    }

        .image-listview > li a.item:active {
            background: rgba(225, 225, 225, 0.3);
        }

        .image-listview > li a.item:after {
            background-image: url("data:image/svg+xml,%0A%3Csvg width='10px' height='16px' viewBox='0 0 10 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Listview' transform='translate(-112.000000, -120.000000)' stroke='%23A1A1A2' stroke-width='2.178'%3E%3Cpolyline id='Path' points='114 122 120 128 114 134'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center center;
            width: 16px;
            height: 16px;
            content: "";
            position: absolute;
            right: 12px;
            opacity: 0.5;
            top: 50%;
            margin-top: -8px;
        }

.image-listview.text > li:after {
    left: 16px;
}

.image-listview.media > li {
    border-bottom: 1px solid #E1E1E1;
}

    .image-listview.media > li:last-child {
        border-bottom: 0;
    }

    .image-listview.media > li .imageWrapper {
        margin-right: 16px;
    }

    .image-listview.media > li:after {
        display: none;
    }

.listview.no-line > li:after,
.listview.no-line .item  :after {
    display: none;
}

.listview.no-space > li .item {
    padding: 0;
}

.multi-level > a:after {
    transform: rotate(90deg);
}

.multi-level ul {
    border: 0;
    padding: 0;
    margin: 0;
    display: none;
}

    .multi-level ul > li {
        border: 0 !important;
    }

        .multi-level ul > li:after {
            height: 0;
        }

        .multi-level ul > li a,
        .multi-level ul > li .item {
            padding-left: 68px;
        }

            .multi-level ul > li a,
            .multi-level ul > li .item .p-0 {
                padding-left: 0px !important;
            }

.multi-level.active > a:after {
    transform: rotate(-90deg);
}

.multi-level.active ul {
    padding-bottom: 8px;
}

.link-listview .link-listview a,
.link-listview .link-listview .item,
.link-listview .image-listview a,
.link-listview .image-listview .item {
    padding-left: 16px !important;
}

.link-listview .image-listview.media > li {
    border: 0;
}

.link-listview .simple-listview {
    padding-left: 0 !important;
}
/*REMOVED ON 06/09 FOR LIST PADDING
    .image-listview .simple-listview {
    padding-left: 0px !important;
}

    */

.image-listview .simple-listview {
    padding-left: 52px;
}


    .image-listview .simple-listview .p-0 {
        padding-left: 0px !important;
    }





.image-listview.text .simple-listview {
    padding-left: 0 !important;
}

.image-listview.text .link-listview a,
.image-listview.text .link-listview .item,
.image-listview.text .image-listview a,
.image-listview.text .image-listview .item {
    padding-left: 16px !important;
}

.image-listview.media .simple-listview {
    padding-left: 80px !important;
}

.image-listview.media .link-listview a,
.image-listview.media .link-listview .item,
.image-listview.media .image-listview a,
.image-listview.media .image-listview .item {
    padding-left: 96px !important;
}

.card {
    background: #ffffff;
    border-radius: 6px;
    border: 0;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

    .card .card-body {
        padding: 24px 16px;
        line-height: 1.4em;
    }

    .card .card-title {
        color: #141515;
        font-size: 24px;
        font-weight: 700;
    }

    .card .card-subtitle {
        color: #4F5050;
        font-weight: 500;
        letter-spacing: .01em;
        font-size: 11px;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .card .listview > li:first-child .item {
        border-radius: 6px 6px 0 0;
    }

    .card .listview > li:last-child .item {
        border-radius: 0 0 6px 6px;
    }

    .card .card-header {
        background: transparent;
        color: #141515;
        font-weight: 500;
        padding: 12px 16px;
        border-bottom: 1px solid #E1E1E1;
    }

    .card .card-footer {
        background: transparent;
        border-top: 1px solid #E1E1E1;
        color: #4F5050;
        padding: 12px 16px;
    }

    .card .card-img-top {
        border-radius: 6px 6px 0 0;
    }

    .card .overlay-img {
        border-radius: 6px;
    }

    .card .card-img-overlay {
        background: rgba(0, 0, 0, 0.5);
        border-radius: 6px;
    }

        .card .card-img-overlay .card-title {
            color: #fff;
        }

        .card .card-img-overlay .card-text {
            color: rgba(255, 255, 255, 0.7);
        }

    .card.bg-primary, .card.bg-secondary, .card.bg-danger, .card.bg-success, .card.bg-warning, .card.bg-info, .card.bg-dark {
        border: 0;
    }

        .card.bg-primary .card-title, .card.bg-secondary .card-title, .card.bg-danger .card-title, .card.bg-success .card-title, .card.bg-warning .card-title, .card.bg-info .card-title, .card.bg-dark .card-title {
            color: #fff;
        }

        .card.bg-primary .card-text, .card.bg-secondary .card-text, .card.bg-danger .card-text, .card.bg-success .card-text, .card.bg-warning .card-text, .card.bg-info .card-text, .card.bg-dark .card-text {
            color: rgba(255, 255, 255, 0.7);
        }

        .card.bg-primary .card-header, .card.bg-secondary .card-header, .card.bg-danger .card-header, .card.bg-success .card-header, .card.bg-warning .card-header, .card.bg-info .card-header, .card.bg-dark .card-header {
            color: #fff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        }

    .card.bg-light {
        background: #fff;
    }

    .card.product-card .card-body {
        padding: 8px;
    }

    .card.product-card .image {
        width: 100%;
        border-radius: 6px;
    }

    .card.product-card .title {
        font-size: 15px;
        margin: 10px 0 0 0;
        /* padding: 0 4px;*/
        font-weight: 500;
    }

    .card.product-card .text {
        font-size: 11px;
        color: #A1A1A2;
        margin: 0;
        padding: 0 4px 10px 4px;
    }

    .card.product-card .price {
        margin: 0 0 10px 0;
        padding: 0px 4px;
        display: block;
        font-size: 15px;
        font-weight: 500;
        color: #0370ba;
    }

.btn {
    height: 40px;
    padding: 3px 18px;
    font-size: 13px;
    line-height: 1.2em;
    font-weight: 500;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s all;
    text-decoration: none !important;
    border-radius: 6px;
    border-width: 2px;
}

    .btn i.icon,
    .btn ion-icon {
        font-size: 22px;
        margin-right: 10px;
        margin-top: -2px;
        font-weight: 700;
    }

    .btn.rounded {
        border-radius: 100px !important;
    }

    .btn.square {
        border-radius: 0 !important;
    }

    .btn.shadowed {
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08) !important;
    }

.btn-lg {
    height: 48px;
    padding: 3px 24px;
    font-size: 18px;
}

    .btn-lg i.icon,
    .btn-lg ion-icon {
        font-size: 26px;
    }

.btn-sm {
    height: 30px;
    padding: 0px 12px;
    font-size: 12px;
}

    .btn-sm i.icon,
    .btn-sm ion-icon {
        font-size: 20px;
        margin-right: 6px;
    }

.btn-group .btn:active {
    transform: none;
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
}

    .btn-icon i.icon,
    .btn-icon ion-icon {
        text-align: center;
        margin: 0 !important;
    }

    .btn-icon.btn-lg {
        width: 48px;
        height: 48px;
    }

        .btn-icon.btn-lg i.icon,
        .btn-icon.btn-lg ion-icon {
            font-size: 32px;
        }

    .btn-icon.btn-sm {
        width: 30px;
        height: 30px;
    }

        .btn-icon.btn-sm i.icon,
        .btn-icon.btn-sm ion-icon {
            font-size: 18px;
        }

.btn-primary {
    background: #0370ba !important;
    border-color: #0370ba !important;
    color: #ffffff !important;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
        background: #0370ba !important;
        border-color: #0370ba !important;
    }

    .btn-primary.disabled, .btn-primary:disabled {
        background: #0370ba;
        border-color: #0370ba;
        opacity: 0.5;
    }

/*ADDED*/
.btn-soft {
    background: #F9F9F9 !important;
    border-color: #F9F9F9 !important;
    color: #000 !important;
}

.btn-secondary {
    background: #6C7C94 !important;
    border-color: #6C7C94 !important;
    color: #ffffff !important;
}

    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active {
        background: #617085 !important;
        border-color: #617085 !important;
    }

    .btn-secondary.disabled, .btn-secondary:disabled {
        background: #6C7C94;
        border-color: #6C7C94;
        opacity: 0.5;
    }

.btn-success {
    background: #2fb350 !important;
    border-color: #2fb350 !important;
    color: #ffffff !important;
}

    .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
        background: #289c45 !important;
        border-color: #289c45 !important;
    }

    .btn-success.disabled, .btn-success:disabled {
        background: #34C759;
        border-color: #34C759;
        opacity: 0.5;
    }

.btn-danger {
    background: #EC4433 !important;
    border-color: #EC4433 !important;
    color: #ffffff !important;
}

    .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
        background: #ea2f1c !important;
        border-color: #ea2f1c !important;
    }

    .btn-danger.disabled, .btn-danger:disabled {
        background: #EC4433;
        border-color: #EC4433;
        opacity: 0.5;
    }

.btn-warning {
    color: #fff !important;
    background: #FE9500 !important;
    border-color: #FE9500 !important;
    color: #ffffff !important;
}

    .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active {
        background: #e58600 !important;
        border-color: #e58600 !important;
    }

    .btn-warning.disabled, .btn-warning:disabled {
        background: #FE9500;
        border-color: #FE9500;
        opacity: 0.5;
    }

.btn-link {
    color: #0370ba !important;
}

.btn-info {
    background: #592BCA !important;
    border-color: #592BCA !important;
    color: #ffffff !important;
}

    .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
        background: #5027b5 !important;
        border-color: #5027b5 !important;
    }

    .btn-info.disabled, .btn-info:disabled {
        background: #592BCA;
        border-color: #592BCA;
        opacity: 0.5;
    }

.btn-dark {
    background: #333 !important;
    border-color: #333 !important;
    color: #ffffff !important;
}

    .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active {
        background: #262626 !important;
        border-color: #262626 !important;
    }

    .btn-dark.disabled, .btn-dark:disabled {
        background: #333;
        border-color: #333;
        opacity: 0.5;
    }

.btn-light {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    color: #141515 !important;
}

    .btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active {
        background: rgba(242, 242, 242, 0.5) !important;
        border-color: rgba(242, 242, 242, 0.5) !important;
    }

    .btn-light.disabled, .btn-light:disabled {
        background: rgba(255, 255, 255, 0.5);
        border-color: rgba(255, 255, 255, 0.5);
        opacity: 0.5;
    }

.btn-outline-primary {
    background: transparent;
    border-color: #0370ba;
    border-width: 1px;
    color: #0370ba;
    transition: 0.2s all;
}

    .btn-outline-primary:hover, .btn-outline-primary:active {
        background: rgba(30, 116, 253, 0.15) !important;
        border-color: #0370ba !important;
        color: #0370ba !important;
    }

    .btn-outline-primary.active {
        background: #0370ba !important;
        color: #fff !important;
        border-color: #0370ba !important;
    }

    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
        color: #0370ba !important;
        border-color: #0370ba !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-outline-secondary {
    background: transparent;
    border-color: #6C7C94;
    border-width: 1px;
    color: #6C7C94;
    transition: 0.2s all;
}

    .btn-outline-secondary:hover, .btn-outline-secondary:active {
        background: rgba(108, 124, 148, 0.15) !important;
        border-color: #6C7C94 !important;
        color: #6C7C94 !important;
    }

    .btn-outline-secondary.active {
        background: #6C7C94 !important;
        color: #fff !important;
        border-color: #6C7C94 !important;
    }

    .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
        color: #6C7C94 !important;
        border-color: #6C7C94 !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-outline-success {
    background: transparent;
    border-color: #34C759;
    border-width: 1px;
    color: #34C759;
    transition: 0.2s all;
}

    .btn-outline-success:hover, .btn-outline-success:active {
        background: rgba(52, 199, 89, 0.15) !important;
        border-color: #28a745 !important;
        color: #28a745 !important;
    }

    .btn-outline-success.active {
        background: #28a745 !important;
        color: #fff !important;
        border-color: #28a745 !important;
    }

    .btn-outline-success.disabled, .btn-outline-success:disabled {
        color: #28a745 !important;
        border-color: #28a745 !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-outline-danger {
    background: transparent;
    border-color: #EC4433;
    border-width: 1px;
    color: #EC4433;
    transition: 0.2s all;
}

    .btn-outline-danger:hover, .btn-outline-danger:active {
        background: rgba(236, 68, 51, 0.15) !important;
        border-color: #EC4433 !important;
        color: #EC4433 !important;
    }

    .btn-outline-danger.active {
        background: #EC4433 !important;
        color: #fff !important;
        border-color: #EC4433 !important;
    }

    .btn-outline-danger.disabled, .btn-outline-danger:disabled {
        color: #EC4433 !important;
        border-color: #EC4433 !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-outline-warning {
    background: transparent;
    border-color: #FE9500;
    border-width: 1px;
    color: #FE9500;
    transition: 0.2s all;
}

    .btn-outline-warning:hover, .btn-outline-warning:active {
        background: rgba(254, 149, 0, 0.15) !important;
        border-color: #FE9500 !important;
        color: #FE9500 !important;
    }

    .btn-outline-warning.active {
        background: #FE9500 !important;
        color: #fff !important;
        border-color: #FE9500 !important;
    }

    .btn-outline-warning.disabled, .btn-outline-warning:disabled {
        color: #FE9500 !important;
        border-color: #FE9500 !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-outline-info {
    background: transparent;
    border-color: #592BCA;
    border-width: 1px;
    color: #592BCA;
    transition: 0.2s all;
}

    .btn-outline-info:hover, .btn-outline-info:active {
        background: rgba(89, 43, 202, 0.15) !important;
        border-color: #592BCA !important;
        color: #592BCA !important;
    }

    .btn-outline-info.active {
        background: #592BCA !important;
        color: #fff !important;
        border-color: #592BCA !important;
    }

    .btn-outline-info.disabled, .btn-outline-info:disabled {
        color: #592BCA !important;
        border-color: #592BCA !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-outline-light {
    background: transparent;
    border-color: #fff;
    border-width: 1px;
    color: #fff;
    transition: 0.2s all;
}

    .btn-outline-light:hover, .btn-outline-light:active {
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: #fff !important;
        color: #fff !important;
    }

    .btn-outline-light.active {
        background: #fff !important;
        color: #fff !important;
        border-color: #fff !important;
    }

    .btn-outline-light.disabled, .btn-outline-light:disabled {
        color: #fff !important;
        border-color: #fff !important;
        background: transparent !important;
        opacity: 0.5;
    }

    .btn-outline-light:active {
        color: #141515 !important;
    }

.btn-text-primary {
    background: transparent;
    border-color: transparent;
    color: #0370ba !important;
    transition: 0.2s all;
}

    .btn-text-primary:hover {
        background: transparent;
    }

    .btn-text-primary:active, .btn-text-primary.active {
        background: rgba(30, 116, 253, 0.15) !important;
        border-color: transparent !important;
        color: #0370ba !important;
    }

    .btn-text-primary.disabled, .btn-text-primary:disabled {
        color: #0370ba !important;
        border-color: #0370ba !important;
        background: transparent !important;
        opacity: 0.5;
    }


.btn-white-primary {
    background: #fff;
    border-color: #fff;
    color: #0370ba !important;
    transition: 0.2s all;
}

    .btn-white-primary:hover {
        background: #fff;
    }

    .btn-white-primary:active, .btn-white-primary.active {
        background: #fff !important;
        border-color: #fff !important;
        color: #0370ba !important;
    }

    .btn-white-primary.disabled, .btn-white-primary:disabled {
        color: #0370ba !important;
        border-color: #0370ba !important;
        background: #fff !important;
        opacity: 0.5;
    }

.btn-text-secondary {
    background: transparent;
    border-color: transparent;
    color: #6C7C94 !important;
    transition: 0.2s all;
}

    .btn-text-secondary:hover {
        background: transparent;
    }

    .btn-text-secondary:active, .btn-text-secondary.active {
        background: rgba(108, 124, 148, 0.15) !important;
        border-color: transparent !important;
        color: #6C7C94 !important;
    }

    .btn-text-secondary.disabled, .btn-text-secondary:disabled {
        color: #6C7C94 !important;
        border-color: #6C7C94 !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-text-success {
    background: transparent;
    border-color: transparent;
    color: #28a745 !important;
    transition: 0.2s all;
}

    .btn-text-success:hover {
        background: transparent;
    }

    .btn-text-success:active, .btn-text-success.active {
        background: rgba(52, 199, 89, 0.15) !important;
        border-color: transparent !important;
        color: #28a745 !important;
    }

    .btn-text-success.disabled, .btn-text-success:disabled {
        color: #28a745 !important;
        border-color: #28a745 !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-text-danger {
    background: transparent;
    border-color: transparent;
    color: #EC4433 !important;
    transition: 0.2s all;
}

    .btn-text-danger:hover {
        background: transparent;
    }

    .btn-text-danger:active, .btn-text-danger.active {
        background: rgba(236, 68, 51, 0.15) !important;
        border-color: transparent !important;
        color: #EC4433 !important;
    }

    .btn-text-danger.disabled, .btn-text-danger:disabled {
        color: #EC4433 !important;
        border-color: #EC4433 !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-text-warning {
    background: transparent;
    border-color: transparent;
    color: #FE9500 !important;
    transition: 0.2s all;
}

    .btn-text-warning:hover {
        background: transparent;
    }

    .btn-text-warning:active, .btn-text-warning.active {
        background: rgba(254, 149, 0, 0.15) !important;
        border-color: transparent !important;
        color: #FE9500 !important;
    }

    .btn-text-warning.disabled, .btn-text-warning:disabled {
        color: #FE9500 !important;
        border-color: #FE9500 !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-text-info {
    background: transparent;
    border-color: transparent;
    color: #592BCA !important;
    transition: 0.2s all;
}

    .btn-text-info:hover {
        background: transparent;
    }

    .btn-text-info:active, .btn-text-info.active {
        background: rgba(89, 43, 202, 0.15) !important;
        border-color: transparent !important;
        color: #592BCA !important;
    }

    .btn-text-info.disabled, .btn-text-info:disabled {
        color: #592BCA !important;
        border-color: #592BCA !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-text-light {
    background: transparent;
    color: #fff;
}

    .btn-text-light:hover, .btn-text-light:active, .btn-text-light.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
    }

.btn-text-dark {
    background: transparent;
    border-color: transparent;
    color: #141515 !important;
    transition: 0.2s all;
}

    .btn-text-dark:hover {
        background: transparent;
    }

    .btn-text-dark:active, .btn-text-dark.active {
        background: rgba(20, 21, 21, 0.15) !important;
        border-color: transparent !important;
        color: #141515 !important;
    }

    .btn-text-dark.disabled, .btn-text-dark:disabled {
        color: #141515 !important;
        border-color: #141515 !important;
        background: transparent !important;
        opacity: 0.5;
    }

.btn-group .btn {
    margin-left: -1px !important;
}

.btn-facebook {
    color: #fff !important;
    background: #39579b;
}

    .btn-facebook:hover, .btn-facebook:active {
        background: #324d88;
    }

.bg-facebook {
    background: #39579b;
    color: #FFF !important;
}

.btn-twitter {
    color: #fff !important;
    background: #049ff6;
}

    .btn-twitter:hover, .btn-twitter:active {
        background: #048fdd;
    }

.bg-twitter {
    background: #049ff6;
    color: #FFF !important;
}

.btn-instagram {
    color: #fff !important;
    background: #df237b;
}

    .btn-instagram:hover, .btn-instagram:active {
        background: #cb1e6f;
    }

.bg-instagram {
    background: #DE0067;
    color: #FFF !important;
}

.btn-linkedin {
    color: #fff !important;
    background: #0075aa;
}

    .btn-linkedin:hover, .btn-linkedin:active {
        background: #006391;
    }

.bg-linkedin {
    background: #0075aa;
    color: #FFF !important;
}

.btn-twitch {
    color: #fff !important;
    background: #923cff;
}

    .btn-twitch:hover, .btn-twitch:active {
        background: #8423ff;
    }

.bg-twitch {
    background: #923cff;
    color: #FFF !important;
}

.btn-whatsapp {
    color: #fff !important;
    background: #0ad561;
}

    .btn-whatsapp:hover, .btn-whatsapp:active {
        background: #09bd56;
    }

.bg-whatsapp {
    background: #0ad561;
    color: #FFF !important;
}

.btn-youtube {
    color: #fff !important;
    background: #FF0000;
}

    .btn-youtube:hover, .btn-youtube:active {
        background: #e60000;
    }

.bg-youtube {
    background: #FF0000;
    color: #FFF !important;
}

.btn-amazon {
    color: #fff !important;
    background: #292929;
}

    .btn-amazon:hover, .btn-amazon:active {
        background: #1c1c1c;
    }

.bg-amazon {
    background: #292929;
    color: #FFF !important;
}

.btn-android {
    color: #fff !important;
    background: #7DD159;
}

    .btn-android:hover, .btn-android:active {
        background: #6dcb45;
    }

.bg-android {
    background: #7DD159;
    color: #FFF !important;
}

.btn-apple {
    color: #fff !important;
    background: #000;
}

    .btn-apple:hover, .btn-apple:active {
        background: #222;
    }

.bg-apple {
    background: #000;
    color: #FFF !important;
}

.btn-dribbble {
    color: #fff !important;
    background: #EC4989;
}

    .btn-dribbble:hover, .btn-dribbble:active {
        background: #ea327a;
    }

.bg-dribbble {
    background: #EC4989;
    color: #FFF !important;
}

.btn-skype {
    color: #fff !important;
    background: #00A8F3;
}

    .btn-skype:hover, .btn-skype:active {
        background: #0096da;
    }

.bg-skype {
    background: #00A8F3;
    color: #FFF !important;
}

.btn-pinterest {
    color: #fff !important;
    background: #F12A2C;
}

    .btn-pinterest:hover, .btn-pinterest:active {
        background: #ef1214;
    }

.bg-pinterest {
    background: #F12A2C;
    color: #FFF !important;
}

.btn-dropbox {
    color: #fff !important;
    background: #005CFF;
}

    .btn-dropbox:hover, .btn-dropbox:active {
        background: #0053e6;
    }

.bg-dropbox {
    background: #005CFF;
    color: #FFF !important;
}

.btn-bitcoin {
    color: #fff !important;
    background: #F99400;
}

    .btn-bitcoin:hover, .btn-bitcoin:active {
        background: #e08500;
    }

.bg-bitcoin {
    background: #F99400;
    color: #FFF !important;
}

.btn-github {
    color: #fff !important;
    background: #323131;
}

    .btn-github:hover, .btn-github:active {
        background: #252424;
    }

.bg-github {
    background: #323131;
    color: #FFF !important;
}

.accordion {
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
    background: #fff;
}

    .accordion .accordion-content {
        padding: 8px 16px 20px 16px;
    }

    .accordion .accordion-header {
        position: relative;
    }


        .accordion .accordion-header .btn {
            justify-content: flex-start !important;
            border-radius: 0 !important;
            width: 100%;
            text-align: left !important;
            font-weight: 600;
            background: #b1b1b12e !important;
            font-size: 15px;
            padding: 8px 50px 8px 16px;
            min-height: 50px;
            align-items: center;
        }

            .accordion .accordion-header .btn:active {
                background: rgba(225, 225, 225, 0.3) !important;
            }

            .accordion .accordion-header .btn:after {
                background-image: url("data:image/svg+xml,%0A%3Csvg width='10px' height='16px' viewBox='0 0 10 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Listview' transform='translate(-112.000000, -120.000000)' stroke='%23A1A1A2' stroke-width='2.178'%3E%3Cpolyline id='Path' points='114 122 120 128 114 134'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: center center;
                content: "";
                font-family: "Line Awesome Free";
                width: 20px;
                height: 20px;
                font-weight: 700;
                font-size: 18px;
                position: absolute;
                right: 10px;
                color: #A1A1A2;
                line-height: 1em;
                height: 18px;
                top: 30%;
                opacity: .5;
                margin-top: -9px;
                transform: rotate(-90deg);
            }

            .accordion .accordion-header .btn:before {
                content: "";
                display: block;
                height: 1px;
                background: transparent;
                position: absolute;
                left: 16px;
                bottom: 0;
                right: 0;
            }

         

            .accordion .accordion-header .btn.collapsed:before {
                background: #E1E1E1;
            }

            .accordion .accordion-header .btn i.icon,
            .accordion .accordion-header .btn ion-icon {
                width: 24px;
                font-size: 24px;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

    .accordion .item:last-child .accordion-header .btn:before {
        display: none;
    }

.inset .accordion {
    border-radius: 6px;
    border: 1px solid #E1E1E1;
}

    .inset .accordion .item:first-child .btn {
        border-radius: 6px 6px 0 0 !important;
    }

    .inset .accordion .item:last-child .btn {
        border-radius: 0 0 6px 6px !important;
    }

.modal.action-sheet {
    z-index: 9999;
}

    .modal.action-sheet .modal-dialog {
        padding: 0;
        margin: 0;
        bottom: 0;
        position: fixed;
        width: 100%;
        min-width: 100%;
        z-index: 12000;
        transform: translate(0, 100%);
    }

    .modal.action-sheet.show .modal-dialog {
        transform: translate(0, 0);
    }

    .modal.action-sheet .close-button {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        position: absolute;
        right: 10px;
        top: 3px;
        color: #A1A1A2;
    }

        .modal.action-sheet .close-button:hover, .modal.action-sheet .close-button:active {
            color: #4F5050;
        }

    .modal.action-sheet .modal-content {
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
        border: 0;
        border-radius: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

        .modal.action-sheet .modal-content .action-sheet-content {
            padding: 20px 16px;
            max-height: 460px;
            overflow: auto;
        }

        .modal.action-sheet .modal-content .modal-header {
            display: block;
            padding: 2px 20px;
        }

            .modal.action-sheet .modal-content .modal-header .modal-title {
                padding: 0;
                margin: 0;
                text-align: center;
                display: block;
                font-size: 13px;
                padding: 6px 0;
                color: #141515;
                font-weight: 500;
            }

        .modal.action-sheet .modal-content .modal-body {
            padding: 0;
        }

.action-button-list {
    padding: 0;
    margin: 0;
}

    .action-button-list > li {
        display: block;
    }

        .action-button-list > li .btn {
            padding: 0;
            display: flex;
            width: 100%;
            min-height: 50px;
            font-size: 15px;
            color: #141515;
            line-height: 1.1em;
            justify-content: space-between;
            font-weight: 400;
            border-radius: 0 !important;
            padding: 10px 16px;
        }

            .action-button-list > li .btn:active, .action-button-list > li .btn.active {
                background: rgba(225, 225, 225, 0.3);
            }

            .action-button-list > li .btn.text-primary {
                color: #0370ba !important;
            }

            .action-button-list > li .btn.text-secondary {
                color: #6C7C94 !important;
            }

            .action-button-list > li .btn.text-danger {
                color: #EC4433 !important;
            }

            .action-button-list > li .btn.text-success {
                color: #28a745 !important;
            }

            .action-button-list > li .btn.text-warning {
                color: #FE9500 !important;
            }

            .action-button-list > li .btn.text-info {
                color: #592BCA !important;
            }

            .action-button-list > li .btn.text-light {
                color: #FFF !important;
            }

            .action-button-list > li .btn.text-dark {
                color: #141515 !important;
            }

            .action-button-list > li .btn > span {
                display: flex;
                align-items: center;
                justify-content: flex-start;
            }

            .action-button-list > li .btn i.icon,
            .action-button-list > li .btn ion-icon {
                width: 24px !important;
                height: 24px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-right: 10px;
                margin-left: -5px;
                font-size: 24px;
                line-height: 1em;
            }

        .action-button-list > li.action-divider {
            height: 1px;
            background: #E1E1E1;
        }

.action-sheet.inset .modal-dialog {
    padding: 16px;
    padding-bottom: 16px !important;
    margin-bottom: env(safe-area-inset-bottom);
}

    .action-sheet.inset .modal-dialog .modal-content {
        border-radius: 16px;
        padding-bottom: 0;
    }

.action-sheet.inset .action-button-list > li:last-child .btn {
    border-radius: 0 0 16px 16px !important;
}

.dialogbox .modal-dialog {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 12000;
    display: flex;
    overflow: auto;
    align-items: center;
    justify-content: center;
    transform: translate(0, 0) !important;
    transform: scale(0.7) !important;
}

    .dialogbox .modal-dialog .modal-content {
        max-width: 280px;
        margin: auto;
        max-height: 560px;
        overflow: auto;
        border: 0;
        border-radius: 16px;
    }

        .dialogbox .modal-dialog .modal-content .btn-list {
            margin: 0;
        }

            .dialogbox .modal-dialog .modal-content .btn-list .btn {
                padding: 0px 10px;
                min-height: 56px;
                border-radius: 0;
                margin: 0;
                border: 0;
                border-bottom: 1px solid #E1E1E1 !important;
                font-size: 15px;
            }

                .dialogbox .modal-dialog .modal-content .btn-list .btn:hover, .dialogbox .modal-dialog .modal-content .btn-list .btn:focus, .dialogbox .modal-dialog .modal-content .btn-list .btn:active, .dialogbox .modal-dialog .modal-content .btn-list .btn.active {
                    background: rgba(225, 225, 225, 0.3) !important;
                }

                .dialogbox .modal-dialog .modal-content .btn-list .btn:last-child {
                    border-radius: 0 0 16px 16px;
                    border-bottom: 0 !important;
                }

        .dialogbox .modal-dialog .modal-content .btn-inline {
            display: flex;
            margin: 0;
        }

            .dialogbox .modal-dialog .modal-content .btn-inline .btn {
                width: 100%;
                border-radius: 0;
                min-height: 56px;
                border: 0 !important;
                border-right: 1px solid #E1E1E1;
                font-size: 15px;
            }

                .dialogbox .modal-dialog .modal-content .btn-inline .btn:hover, .dialogbox .modal-dialog .modal-content .btn-inline .btn:focus, .dialogbox .modal-dialog .modal-content .btn-inline .btn:active, .dialogbox .modal-dialog .modal-content .btn-inline .btn.active {
                    background: rgba(225, 225, 225, 0.3);
                }

                .dialogbox .modal-dialog .modal-content .btn-inline .btn:last-child {
                    border-right: 0;
                    border-radius: 0 0 16px 0;
                }

                .dialogbox .modal-dialog .modal-content .btn-inline .btn:first-child {
                    border-radius: 0 0 0 16px !important;
                }

        .dialogbox .modal-dialog .modal-content .modal-header {
            border: 0;
            padding: 20px 20px 10px 20px;
        }

            .dialogbox .modal-dialog .modal-content .modal-header .modal-title {
                color: #141515;
                text-align: center;
                margin: 0 auto;
                font-size: 17px;
            }

        .dialogbox .modal-dialog .modal-content .modal-body {
            padding: 0 20px;
            margin-bottom: 30px;
            text-align: center;
            font-size: 15px;
            word-break: break-word;
        }

        .dialogbox .modal-dialog .modal-content .modal-footer {
            border: 0;
            border-top: 1px solid #E1E1E1;
            padding: 0;
            display: block;
            text-align: right;
        }

.dialogbox.show .modal-dialog {
    transform: translate(0, 0) !important;
    transform: scale(1) !important;
    transition: .2s all;
}

.modal-icon {
    font-size: 60px;
    line-height: 1em;
    margin-top: 30px;
    margin-bottom: -10px;
    color: #0370ba;
    text-align: center;
}

.modalbox {
    padding-top: env(safe-area-inset-top);
    overflow: hidden;
}

    .modalbox .modal-dialog {
        transform: translate(0, 100%) !important;
        min-width: 100%;
        margin: 0;
        transition: 0.5s all !important;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin-top: env(safe-area-inset-top);
    }

        .modalbox .modal-dialog .modal-content {
            border-radius: 0;
            border: 0;
            margin: auto;
            overflow: hidden;
            /*AUTO OVERFLOW-Y ADDED CY*/
            overflow-Y: auto !important;
            padding-top: 56px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }

            .modalbox .modal-dialog .modal-content .modal-header {
                border: 0;
                padding: 0;
                min-height: 56px;
                padding: 10px 16px;
                border-radius: 0;
                display: flex;
                border-bottom: 1px solid #E1E1E1;
                align-items: center;
                justify-content: space-between;
                margin: 0;
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                width: 100%;
                z-index: 100;
                background: #FFF;
            }

                .modalbox .modal-dialog .modal-content .modal-header .modal-title {
                    margin: 0;
                    color: #141515;
                    font-size: 17px;
                }

            .modalbox .modal-dialog .modal-content .modal-body {
                padding: 20px 16px;
                overflow: auto;
            }

    .modalbox.show .modal-dialog {
        transform: translate(0, 0) !important;
    }

.panelbox .modal-dialog {
    margin: 0;
    position: fixed;
    left: 0;
    top: 0;
}

    .panelbox .modal-dialog .modal-content {
        border: 0;
        border-radius: 0;
        width: 300px;
        height: 100vh;
        overflow: auto;
        padding-top: env(safe-area-inset-top);
        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    }

        .panelbox .modal-dialog .modal-content .modal-header {
            border-bottom: 0;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 56px;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
            margin-bottom: 6px;
        }

            .panelbox .modal-dialog .modal-content .modal-header .panel-close {
                color: #0370ba;
            }

                .panelbox .modal-dialog .modal-content .modal-header .panel-close i.icon,
                .panelbox .modal-dialog .modal-content .modal-header .panel-close ion-icon {
                    font-size: 26px;
                }

            .panelbox .modal-dialog .modal-content .modal-header .modal-title {
                color: #141515;
            }

        .panelbox .modal-dialog .modal-content .modal-body {
            padding: 10px 16px;
        }

.panelbox.show .modal-dialog {
    transform: translate(0, 0) !important;
}

.panelbox-left .modal-dialog {
    transform: translate(-100%, 0) !important;
}

.panelbox-right .modal-dialog {
    transform: translate(100%, 0) !important;
    left: auto;
    right: 0;
}

.tooltip .tooltip-inner {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
}

.dropdown .dropdown-menu,
.dropup .dropdown-menu {
    border: 1px solid transparent;
    min-width: 120px;
    padding: 8px 0;
    border-radius: 6px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

    .dropdown .dropdown-menu .dropdown-item,
    .dropup .dropdown-menu .dropdown-item {
        padding: 12px 16px;
        line-height: 1.2em;
        color: #141515;
        font-size: 15px;
        display: flex;
        align-items: center;
    }



        .dropdown .dropdown-menu .dropdown-item:hover, .dropdown .dropdown-menu .dropdown-item:active,
        .dropup .dropdown-menu .dropdown-item:hover,
        .dropup .dropdown-menu .dropdown-item:active {
            background: rgba(225, 225, 225, 0.5);
            color: #141515;
        }

    .dropdown .dropdown-menu .dropdown-divider,
    .dropup .dropdown-menu .dropdown-divider {
        border-top: 1px solid #E1E1E1;
    }

    .dropdown .dropdown-menu .dropdown-header,
    .dropup .dropdown-menu .dropdown-header {
        padding: 9px 16px;
        color: #4F5050;
        font-weight: 400;
        font-size: 11px;
    }

    .dropdown .dropdown-menu .text,
    .dropup .dropdown-menu .text {
        padding: 9px 16px;
        color: #4F5050;
    }

    .dropdown .dropdown-menu i.icon,
    .dropdown .dropdown-menu ion-icon,
    .dropup .dropdown-menu i.icon,
    .dropup .dropdown-menu ion-icon {
        margin-right: 10px;
        width: 22px;
        height: 22px;
        font-size: 22px;
        justify-content: center;
        align-items: center;
        line-height: 1em;
        display: inline-flex;
        color: #141515;
    }

.appHeader .dropdown-menu {
    margin-top: -10px;
}

.dropdown-toggle:after {
    border-radius: 4px;
    margin-left: 7px;
}

.bg-primary {
    background: #0370ba !important;
    color: #FFF;
}


.bg-par {
    background: #0370ba !important;
    color: #FFF;
}

.bg-par-disabled {
    background: #0370ba !important;
    color: #FFF;
    opacity: .5;
}

.bg-secondary {
    background: #6C7C94 !important;
    color: #FFF;
}

.bg-dimmed {
    background: #efefef !important;
    color: #FFF;
}

.bg-success {
    background: #289c45 !important;
    color: #FFF;
}

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

.bg-warning {
    background: #e99f36 !important;
    color: #FFF;
}


.bg-warning-dark {
    background: #c50000 !important;
    color: #FFF;
}

.bg-info {
    background: #592BCA !important;
    color: #FFF;
}

.bg-light {
    background: rgba(255, 255, 255, 0.5) !important;
}

.bg-dark {
    background: #222 !important;
    color: #FFF;
}

a.bg-primary {
    background: #0370ba !important;
    color: #FFF !important;
}

    a.bg-primary:hover, a.bg-primary:active {
        background: #0370ba !important;
    }

a.bg-secondary {
    background: #6C7C94 !important;
    color: #FFF !important;
}

    a.bg-secondary:hover, a.bg-secondary:active {
        background: #617085 !important;
    }

a.bg-success {
    background: #28a745 !important;
    color: #FFF !important;
}

    a.bg-success:hover, a.bg-success:active {
        background: #2fb350 !important;
    }

a.bg-danger {
    background: #EC4433 !important;
    color: #FFF !important;
}

    a.bg-danger:hover, a.bg-danger:active {
        background: #ea2f1c !important;
    }

a.bg-warning {
    background: #FE9500 !important;
    color: #FFF !important;
}

    a.bg-warning:hover, a.bg-warning:active {
        background: #e58600 !important;
    }

a.bg-info {
    background: #592BCA !important;
    color: #FFF !important;
}

    a.bg-info:hover, a.bg-info:active {
        background: #5027b5 !important;
    }

a.bg-light {
    background: rgba(255, 255, 255, 0.5) !important;
}

    a.bg-light:hover, a.bg-light:active {
        background: rgba(242, 242, 242, 0.5) !important;
    }

a.bg-dark {
    background: #222 !important;
    color: #FFF !important;
}

    a.bg-dark:hover, a.bg-dark:active {
        background: #151515 !important;
    }

.text-primary,
a.text-primary {
    color: #0370ba !important;
}

.text-par,
a.text-par {
    color: #0370ba !important;
}

.text-secondary,
a.text-secondary {
    color: #6C7C94 !important;
}

.text-success,
a.text-success {
    color: #28a745 !important;
}

.text-danger,
a.text-danger {
    color: #EC4433 !important;
}

.text-warning,
a.text-warning {
    color: #FE9500 !important;
}

.text-info,
a.text-info {
    color: #592BCA !important;
}

.text-light,
a.text-light {
    color: #FFF !important;
}

.text-dark,
a.text-dark {
    color: #141515 !important;
}

.border-primary {
    border-color: #0370ba !important;
}

.border-secondary {
    border-color: #6C7C94 !important;
}

.border-success {
    border-color: #28a745 !important;
}


.border-lightgray {
    border-color: #7f7f7f29 !important;
    border: 2px solid;
}

.border-danger {
    border-color: #EC4433 !important;
    border: 2px solid;
}

.border-warning {
    border-color: #FE9500 !important;
}

.border-info {
    border-color: #592BCA !important;
}

.border-light {
    border-color: #FFF !important;
}

.border-dark {
    border-color: #141515 !important;
}

.alert {
    margin: 0;
    padding: 6px 16px;
    border: 0;
    font-size: 13px;
    border-radius: 6px;
}

    .alert .close {
        text-shadow: none !important;
        outline: 0;
        opacity: 1;
        width: 40px;
        padding: 0;
        line-height: 1em;
        height: 36px !important;
    }

    .alert .alert-title {
        margin: 4px 0;
        font-size: 15px;
        font-weight: 500;
    }

    .alert.alert-dismissible {
        padding-right: 56px;
    }

.alert-primary {
    background: #0370ba;
    color: #fff;
    border: 1px solid #0370ba;
}

    .alert-primary a {
        color: #fff !important;
        text-decoration: underline;
    }

    .alert-primary .alert-title {
        color: #FFF;
    }

    .alert-primary .close {
        color: #FFF;
    }

.alert-outline-primary {
    background: transparent;
    color: #0370ba;
    border: 1px solid #0370ba;
}

    .alert-outline-primary a {
        color: #0370ba !important;
        text-decoration: underline !important;
    }

    .alert-outline-primary .alert-title {
        color: #0370ba;
    }

    .alert-outline-primary .close {
        color: #0370ba;
    }

.alert-secondary {
    background: #6C7C94;
    color: #fff;
    border: 1px solid #6C7C94;
}

    .alert-secondary a {
        color: #fff !important;
        text-decoration: underline;
    }

    .alert-secondary .alert-title {
        color: #FFF;
    }

    .alert-secondary .close {
        color: #FFF;
    }

.alert-outline-secondary {
    background: transparent;
    color: #6C7C94;
    border: 1px solid #6C7C94;
}

    .alert-outline-secondary a {
        color: #6C7C94 !important;
        text-decoration: underline !important;
    }

    .alert-outline-secondary .alert-title {
        color: #6C7C94;
    }

    .alert-outline-secondary .close {
        color: #6C7C94;
    }

.alert-success {
    background: #34C759;
    color: #fff;
    border: 1px solid #34C759;
}

    .alert-success a {
        color: #fff !important;
        text-decoration: underline;
    }

    .alert-success .alert-title {
        color: #FFF;
    }

    .alert-success .close {
        color: #FFF;
    }

.alert-outline-success {
    background: transparent;
    color: #34C759;
    border: 1px solid #34C759;
}

    .alert-outline-success a {
        color: #28a745 !important;
        text-decoration: underline !important;
    }

    .alert-outline-success .alert-title {
        color: #34C759;
    }

    .alert-outline-success .close {
        color: #34C759;
    }

.alert-danger {
    background: #EC4433;
    color: #fff;
    border: 1px solid #EC4433;
}

    .alert-danger a {
        color: #fff !important;
        text-decoration: underline;
    }

    .alert-danger .alert-title {
        color: #FFF;
    }

    .alert-danger .close {
        color: #FFF;
    }

.alert-icon {
    color: #F44336;
    margin-right: 10px;
}

.alert-hospital {
    background-color: rgb(237 242 249);
    border: 1px solid rgba(222, 68, 54, 1);
    color: #000000;
}

    .alert-hospital hr {
        border-top-color: #f1b0b7;
    }

    .alert-hospital .alert-link {
        color: #491217;
    }

#mainDashAlert.main-dash-alert {
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    border: 1px solid rgba(220, 53, 69, 0.32);
    border-left: 6px solid #dc3545;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff8f8 0%, #fff 62%, #f7fbff 100%);
    box-shadow: none !important;
    filter: none !important;
    color: #2d2f31;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

    #mainDashAlert.main-dash-alert:before {
        display: none;
    }

    #mainDashAlert.main-dash-alert:hover {
        transform: translateY(-2px);
        border-color: rgba(220, 53, 69, 0.54);
        box-shadow: none !important;
        filter: none !important;
    }

    #mainDashAlert .main-dash-alert__content {
        position: relative;
        display: flex;
        width: 100%;
    }

    #mainDashAlert .main-dash-alert__body {
        width: 100%;
    }

    #mainDashAlert .main-dash-alert__header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(220, 53, 69, 0.16);
    }

    #mainDashAlert .main-dash-alert__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        margin-right: 0;
        border-radius: 12px;
        background: #dc3545;
        color: #fff;
        font-size: 18px;
    }

    #mainDashAlert .main-dash-alert__title {
        margin: 0;
        color: #b4232f;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    #mainDashAlert .main-dash-alert__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-left: auto;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(180, 35, 47, 0.08);
        color: #b4232f;
        cursor: pointer;
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
    }

    #mainDashAlert .main-dash-alert__close:hover,
    #mainDashAlert .main-dash-alert__close:focus {
        background: rgba(180, 35, 47, 0.16);
        color: #8f1d28;
    }

    #mainDashAlert .main-dash-alert__row {
        margin: 0 0 7px;
        color: #303336;
        font-size: 13px;
        line-height: 1.35rem;
    }

    #mainDashAlert .main-dash-alert__row:last-child {
        margin-bottom: 0;
    }

    #mainDashAlert .main-dash-alert__label {
        display: inline-block;
        margin-right: 6px;
        color: #b4232f;
        font-weight: 800;
    }

    #mainDashAlert .main-dash-alert__message {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed rgba(220, 53, 69, 0.2);
    }

.alert-outline-danger {
    background: transparent;
    color: #EC4433;
    border: 1px solid #EC4433;
}

    .alert-outline-danger a {
        color: #EC4433 !important;
        text-decoration: underline !important;
    }

    .alert-outline-danger .alert-title {
        color: #EC4433;
    }

    .alert-outline-danger .close {
        color: #EC4433;
    }

.alert-warning {
    background: #FE9500;
    color: #fff;
    border: 1px solid #FE9500;
}

    .alert-warning a {
        color: #fff !important;
        text-decoration: underline;
    }

    .alert-warning .alert-title {
        color: #FFF;
    }

    .alert-warning .close {
        color: #FFF;
    }

.alert-outline-warning {
    background: transparent;
    color: #FE9500;
    border: 1px solid #FE9500;
}

    .alert-outline-warning a {
        color: #FE9500 !important;
        text-decoration: underline !important;
    }

    .alert-outline-warning .alert-title {
        color: #FE9500;
    }

    .alert-outline-warning .close {
        color: #FE9500;
    }

.alert-info {
    background: #592BCA;
    color: #fff;
    border: 1px solid #592BCA;
}

    .alert-info a {
        color: #fff !important;
        text-decoration: underline;
    }

    .alert-info .alert-title {
        color: #FFF;
    }

    .alert-info .close {
        color: #FFF;
    }

.alert-outline-info {
    background: transparent;
    color: #592BCA;
    border: 1px solid #592BCA;
}

    .alert-outline-info a {
        color: #592BCA !important;
        text-decoration: underline !important;
    }

    .alert-outline-info .alert-title {
        color: #592BCA;
    }

    .alert-outline-info .close {
        color: #592BCA;
    }

.alert-light {
    background: #FFF;
    color: #141515;
}

.alert-dark {
    background: #333;
    color: #FFF;
}

    .alert-dark a {
        color: #FFF !important;
        text-decoration: underline !important;
    }

.alert-outline-dark {
    background: transparent;
    color: #333;
    border: 1px solid #333;
}

.table {
    color: #4F5050;
    margin: 0;
    font-size: 13px;
    line-height: 1.4em;
}

    .table thead th {
        border-top: 0;
        border-bottom: 0;
        color: #141515;
        font-weight: 800;
        background-color: #f9f9f9;
        padding-bottom: 12px;
    }
    /*table to 0px*/
    .table td,
    .table th {
        border-top: 0px solid #E1E1E1;
    }

.table-line td,
.table-line th {
    border-top: 1px solid #fff !important;
    border-spacing: 500px !important;
}

.table-inner td,
.table-inner th {
    border-top: 0px solid #E1E1E1 !important;
}

.table-dark {
    border-radius: 0px;
}

    .table-dark thead th {
        color: #fff;
        border-top: 0;
    }

    .table-dark td,
    .table-dark th {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
    }

    .table-dark.table-striped tbody tr:nth-of-type(even) {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

.table-bordered {
    border-radius: 0px;
}

    .table-bordered td,
    .table-bordered th {
        border-color: #E1E1E1;
    }

textarea,
.form-control {
    background-clip: padding-box;
    background-image: linear-gradient(transparent, transparent);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-group {
    width: 100%;
}

    .form-group .label {
        font-size: 11px;
        margin: 0;
        font-weight: 500;
        color: #141515;
        display: block;
        line-height: 1.2em;
        text-align: left;
    }

    .form-group textarea {
        resize: none;
    }

    .form-group .input-info {
        font-size: 11px;
        color: #A1A1A2;
    }

    .form-group .clear-input {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4F5050;
        height: 38px;
        font-size: 22px;
        position: absolute;
        right: -10px;
        bottom: 0;
        width: 32px;
        opacity: 0.5;
        display: none;
    }



        .form-group .clear-input:hover, .form-group .clear-input:active {
            opacity: 0.8;
        }

    .form-group .input-wrapper {
        position: relative;
    }

        .form-group .input-wrapper.not-empty .clear-input {
            display: flex;
        }

        .form-group .input-wrapper.active .label {
            color: #0370ba !important;
        }

    .form-group.basic {
        padding: 8px 0;
        margin: 0;
    }

        .form-group.basic .form-control,
        .form-group.basic .custom-select {
            background: transparent !important;
            border: none;
            border-bottom: 1px solid #E1E1E1;
            padding: 0 30px 0 0;
            border-radius: 0;
            height: 40px;
            color: #141515;
            font-size: 15px;
        }

            .form-group.basic .form-control:focus,
            .form-group.basic .custom-select:focus {
                border-bottom-color: #0370ba;
                box-shadow: inset 0 -1px 0 0 #0370ba;
            }

        .form-group.basic textarea.form-control {
            height: auto;
            padding: 7px 40px 7px 0;
        }

        .form-group.basic.animated .label {
            margin-top: 20px;
            opacity: 0;
            top: -3px;
            transition: 0.2s all;
            position: absolute;
        }

        .form-group.basic.animated .input-wrapper {
            padding-top: 5px;
        }

            .form-group.basic.animated .input-wrapper.not-empty .label {
                margin-top: 0;
                opacity: 1;
            }

    .form-group.boxed {
        margin: 0;
        padding: 8px 0;
    }

        .form-group.boxed .form-control {
            background: #fff;
            box-shadow: none;
            height: 42px;
            border-radius: 6px;
            padding: 0 40px 0 16px;
        }

            .form-group.boxed .form-control:focus {
                border-color: #0370ba;
            }

        .form-group.boxed textarea.form-control {
            height: auto;
            padding: 7px 40px 7px 16px;
        }

        .form-group.boxed .clear-input {
            right: 0;
            height: 42px;
            width: 40px;
        }

        .form-group.boxed .label {
            margin-bottom: 8px;
        }

.input-group .input-group-text {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #E1E1E1;
    border-radius: 0;
    font-size: 20px;
    font-weight: 400;
    color: #141515;
    height: 40px;
    width: auto;
    padding: 0 10px 0 0;
}

.custom-file-upload {
    position: relative;
    display: flex;
    width: 100%;
    height: 220px;
}

    .custom-file-upload input[type="file"] {
        overflow: hidden;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
    }

    .custom-file-upload label {
        z-index: 1;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        overflow: hidden;
        background-color: rgba(225, 225, 225, 0.2);
        background-size: 45px 58px;
        border: 3px dashed #E1E1E1;
        border-radius: 6px;
        margin: 0;
    }

        .custom-file-upload label span {
            display: block;
            font-size: 15px;
            color: #A1A1A2;
            height: auto;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            font-weight: 500;
            transform: translate(0%, -50%);
            align-items: center;
            justify-content: center;
            padding: 10px 16px;
            width: 100%;
            text-align: center;
            border-radius: 0;
        }

            .custom-file-upload label span i.icon,
            .custom-file-upload label span ion-icon {
                --ionicon-stroke-width: 32px;
                font-size: 48px;
                color: #A1A1A2;
            }

            .custom-file-upload label span strong {
                display: block;
                font-weight: 500;
            }

            .custom-file-upload label span i {
                font-style: normal;
                /*   display: block;*/
            }

        .custom-file-upload label.file-uploaded {
            background-size: cover;
            background-position: center;
        }

            .custom-file-upload label.file-uploaded:before {
                content: "";
                width: 38px;
                height: 38px;
                background: #34C759;
                border-radius: 100%;
                display: flex;
                background-image: url("data:image/svg+xml,%0A%3Csvg width='23px' height='20px' viewBox='0 0 23 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline id='Path' stroke='%23FFFFFF' stroke-width='2.4' points='21.2 2 7.76 18 2 12'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: center center;
                position: absolute;
                left: 50%;
                top: calc(50% + -22px);
                box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
                transform: translate(-50%, -50%);
            }

            .custom-file-upload label.file-uploaded label {
                border-color: transparent;
            }

            .custom-file-upload label.file-uploaded span {
                bottom: 0;
                left: 0;
                top: auto;
                transform: translate(0, 0);
                font-size: 11px;
                color: #4F5050;
                background-color: #E1E1E1;
            }

.verify-input {
    height: 72px !important;
    font-size: 32px;
    font-weight: 700;
    color: #141515;
    letter-spacing: 5px;
    padding: 0 0 0 5px !important;
    max-width: 190px;
    margin: auto;
    text-align: center !important;
}

.nav-tabs {
    width: 100%;
}

    .nav-tabs.style1 {
        border: 0;
        background: rgba(225, 225, 225, 0.4);
        border-radius: 6px;
        display: flex;
    }

        .nav-tabs.style1 .nav-item {
            flex: 1;
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
        }

            .nav-tabs.style1 .nav-item .nav-link {
                color: #4F5050;
                font-weight: 500;
                font-size: 13px;
                border: 0 !important;
                line-height: 1.2em;
                width: 100%;
                border-radius: 6px;
                padding: 6px 10px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 4px !important;
            }

                .nav-tabs.style1 .nav-item .nav-link i.icon,
                .nav-tabs.style1 .nav-item .nav-link ion-icon {
                    margin-right: 8px;
                    margin-left: 8px;
                    line-height: 1em;
                    font-size: 18px;
                }

                .nav-tabs.style1 .nav-item .nav-link.active {
                    color: #141515;
                    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
                }

    /*ACTIVE ADDED STYLE2*/
    .style2.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
        color: #495057;
        background-color: #DDF1FF;
        border-color: #dee2e6 #dee2e6 #fff;
    }

    .nav-tabs.style2 {
        border: 0;
        background: #F5F5F5;
        border-radius: 6px;
        display: flex;
    }

        .nav-tabs.style2 .nav-item {
            flex: 1;
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
        }

            .nav-tabs.style2 .nav-item .nav-link {
                color: #4F5050;
                font-weight: 500;
                font-size: 13px;
                border: 0 !important;
                line-height: 1.2em;
                width: 100%;
                border-radius: 6px;
                padding: 6px 6px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 4px !important;
            }

                .nav-tabs.style2 .nav-item .nav-link i.icon,
                .nav-tabs.style2 .nav-item .nav-link ion-icon {
                    margin-right: 8px;
                    margin-left: 8px;
                    line-height: 1em;
                    font-size: 18px;
                }

                .nav-tabs.style2 .nav-item .nav-link.active {
                    color: #0370ba !important;
                    font-weight: 800;
                    box-shadow: 0 3px 6px 0 rgb(64 25 101 / 10%), 0 1px 3px 0 rgb(0 0 0 / 8%);
                }


    /*ACTIVE ADDED style3*/

    .style3.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
        color: #495057;
        background-color: #DDF1FF;
        border-color: #dee2e6 #dee2e6 #fff;
    }

    .nav-tabs.style3 {
        border: 0;
        border-color: transparent;
        background: #fefefe;
        border-radius: 25px;
        display: flex;
        /* box-shadow: 0 3px 6px 0 rgb(231 231 231 / 10%), 0 1px 3px 0; */
    }

        .nav-tabs.style3 .nav-item {
            flex: 1;
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            /* margin: 4px; */
            padding: 0;
            border-radius: 25px;
            background: white;
        }

            .nav-tabs.style3 .nav-item .nav-link {
                color: #4F5050;
                font-weight: 500;
                font-size: 13px;
                border: 0 !important;
                line-height: 1.2em;
                width: 100%;
                border-radius: 25px;
                padding: 6px 6px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                /* margin: 4px !important; */
            }

                .nav-tabs.style3 .nav-item .nav-link i.icon,
                .nav-tabs.style3 .nav-item .nav-link ion-icon {
                    margin-right: 8px;
                    margin-left: 8px;
                    line-height: 1em;
                    font-size: 18px;
                }

                .nav-tabs.style3 .nav-item .nav-link.active {
                    color: #0370ba !important;
                    font-weight: 800;
                    /* box-shadow: 0 3px 6px 0 rgb(64 25 101 / 10%), 0 1px 3px 0 rgb(0 0 0 / 8%); */
                }



    .nav-tabs.lined {
        border: 0;
        background: transparent;
        border-radius: 0;
        display: flex;
    }

        .nav-tabs.lined .nav-item {
            flex: 1;
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
        }

            .nav-tabs.lined .nav-item .nav-link {
                color: #4F5050;
                font-weight: 500;
                font-size: 13px;
                border: 0 !important;
                border-bottom: 2px solid transparent !important;
                line-height: 1.2em;
                width: 100%;
                border-radius: 0;
                padding: 6px 10px;
                height: 56px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 !important;
                border-bottom-color: 2px solid;
            }

                .nav-tabs.lined .nav-item .nav-link i.icon,
                .nav-tabs.lined .nav-item .nav-link ion-icon {
                    margin-right: 8px;
                    margin-left: 8px;
                    line-height: 1em;
                    font-size: 18px;
                }

                /*ADDED FONT-WEIGHT BOLD and added font-size*/
                .nav-tabs.lined .nav-item .nav-link.active {
                    color: #0370ba;
                    font-weight: bold !important;
                    font-size: 14px !important;
                    background: transparent;
                    border-bottom-color: #0370ba !important;
                }

    .nav-tabs.iconed i.icon,
    .nav-tabs.iconed ion-icon {
        font-size: 24px !important;
    }

.custom-control .custom-control-label {
    padding-left: 10px;
    padding-top: 2px;
    color: #141515;
}

    .custom-control .custom-control-label:before {
        transition: 0s all;
        box-shadow: none !important;
        background: #E1E1E1;
        width: 22px;
        height: 22px;
        border-color: #E1E1E1 !important;
        border-radius: 100%;
        margin-top: -2px;
        background: transparent;
        border-color: #E1E1E1;
    }

    .custom-control .custom-control-label:after {
        margin-top: 1px;
        margin-left: 3px;
    }

    .custom-control .custom-control-label:active:before {
        background: #fff !important;
        border-color: #E1E1E1 !important;
    }

.custom-control .custom-control-input:checked ~ .custom-control-label:before {
    background: #0370ba !important;
    border-color: #0370ba !important;
}

.custom-control .custom-control-input:checked ~ .custom-control-label-on:before {
    background: #28a745 !important;
    border-color: #28a745 !important;
}

.custom-control .custom-control-input:checked ~ .custom-control-label:after {
    width: 16px;
    height: 16px;
    background-size: 12px 12px;
}

.custom-control .custom-control-input:checked ~ .custom-control-label:before {
    border-radius: 100%;
}

.custom-radio .custom-control-label:before {
    border-radius: 100%;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label:before {
    border-radius: 100%;
}

.input-list .custom-control {
    padding: 0;
}

    .input-list .custom-control:after {
        content: "";
        height: 1px;
        background: #E1E1E1;
        display: block;
        margin-left: 54px;
    }

.input-list .custom-control-label {
    width: 100%;
    padding: 10px 20px 10px 54px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.1s all;
}


    .input-list .custom-control-label.no-flex {
        display: block !important;
    }

    .input-list .custom-control-label:active {
        background: rgba(225, 225, 225, 0.3);
    }

    .input-list .custom-control-label:before, .input-list .custom-control-label:after {
        top: 50%;
        left: 16px;
        transform: translate(0%, -50%);
        margin: 0;
    }

    .input-list .custom-control-label:after {
        width: 22px;
        height: 22px;
        margin: 0px 0 0 3px;
    }

.input-list .custom-control:last-child:after {
    display: none;
}

.custom-switch .custom-control-label {
    width: 56px;
    height: 30px;
}

    .custom-switch .custom-control-label:before {
        margin: 0;
        left: 0;
        top: 0;
        border-radius: 100px;
        width: 56px;
        height: 30px;
        border-color: #d4d4d4 !important;
        background: #E1E1E1;
    }

    .custom-switch .custom-control-label:after {
        width: 24px;
        height: 24px;
        border-radius: 100px;
        margin-top: -1px;
        margin-left: 1px;
        left: 3px;
        top: 4px;
        background: #fff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 2px 1px 0 rgba(0, 0, 0, 0.05);
    }

    .custom-switch .custom-control-label:active:before {
        background: rgba(225, 225, 225, 0.5) !important;
    }

.custom-switch .custom-control-input:checked ~ .custom-control-label:before {
    border-radius: 100px;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label:after {
    width: 24px;
    height: 24px;
    border-radius: 100px;
    left: 16px;
}

.message-divider {
    font-size: 12px;
    text-align: center;
    padding: 5px 0;
    color: #A1A1A2;
}

.message-item {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 2px 16px;
    margin-right: 60px;
}

    .message-item .bubble {
        padding: 10px 16px;
        background: #FFF;
        border-radius: 16px 16px 16px 0;
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
        color: #141515;
        display: inline-block;
        margin-top: 4px;
        line-height: 1.4em;
    }

        .message-item .bubble .imaged {
            margin: 0px -6px;
        }

    .message-item .title {
        font-size: 12px;
        font-weight: 500;
        color: #4F5050;
        line-height: 1.2em;
        padding: 0 0 0 10px;
    }

    .message-item .footer {
        font-size: 12px;
        padding: 0 10px;
        text-align: right;
        line-height: 1em;
        margin-top: 5px;
        color: #141515;
        opacity: .4;
        height: 14px;
    }

    .message-item .avatar {
        margin-right: 10px;
        width: 32px;
        height: auto;
        border-radius: 100%;
        margin-bottom: 18px;
    }

    .message-item.user {
        justify-content: flex-end;
        margin-right: 0;
        margin-left: 60px;
    }

        .message-item.user .bubble {
            background: #0370ba;
            color: #FFF;
            border-radius: 16px 16px 0 16px;
        }

.chatFooter {
    min-height: 56px;
    background: #FFF;
    border-top: 1px solid #E1E1E1;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: env(safe-area-inset-bottom);
}

    .chatFooter .form-group {
        width: calc(100% - 100px);
    }

        .chatFooter .form-group .form-control {
            font-size: 13px;
            border-radius: 300px;
            height: 40px;
        }

        .chatFooter .form-group .clear-input {
            height: 40px;
        }

    .chatFooter form {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.progress {
    height: 14px;
    border-radius: 6px;
}

.progress-bar {
    background: #0370ba;
    height: 14px;
    line-height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
}

.circle-progress {
    position: relative;
    width: 100%;
}

.circle-progress-sm {
    position: relative;
    width: 20px;
}


.circle-progress .in {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .circle-progress .in .text {
        text-align: center;
        font-size: 11px;
        line-height: 1.5em;
    }

        .circle-progress .in .text .value {
            margin: 0;
            line-height: 1.5em;
        }

.circle-progress canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.chip {
    background: #f5f5f5 !important;
    font-size: 13px;
    color: #141515;
    line-height: 1em;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border-radius: 100px;
}

    .chip .chip-label {
        padding: 0 12px;
    }

    .chip.chip-outline {
        background: transparent;
        box-shadow: inset 0 0 0 1px #E1E1E1;
    }

    .chip.chip-media {
        position: relative;
        padding-left: 20px;
    }

        .chip.chip-media img {
            width: 26px;
            height: 26px;
            border-radius: 100px;
            position: absolute;
            left: 0;
            top: 0;
        }

    .chip .chip-icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 26px;
        height: 26px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        background: #4F5050;
        color: #fff;
        font-size: 14px;
    }

    .chip .chip-delete {
        width: 26px;
        margin-left: -10px;
        height: 26px;
        display: inline-flex;
        color: #141515;
        opacity: 0.7;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        border-radius: 100px;
    }

        .chip .chip-delete:hover, .chip .chip-delete:active {
            opacity: 1;
        }

.chip-primary {
    background: #0370ba !important;
    color: #fff !important;
}

    .chip-primary .chip-delete {
        color: #fff !important;
    }

    .chip-primary.chip-outline {
        background: transparent !important;
        color: #0370ba !important;
        box-shadow: inset 0 0 0 1px #0370ba !important;
    }

.chip-danger {
    background: #EC4433 !important;
    color: #fff !important;
}

    .chip-danger .chip-delete {
        color: #fff !important;
    }

    .chip-danger.chip-outline {
        background: transparent !important;
        color: #EC4433 !important;
        box-shadow: inset 0 0 0 1px #EC4433 !important;
    }

.chip-success {
    background: #28a745 !important;
    color: #fff !important;
}

    .chip-success .chip-delete {
        color: #fff !important;
    }

    .chip-success.chip-outline {
        background: transparent !important;
        color: #28a745 !important;
        box-shadow: inset 0 0 0 1px #28a745 !important;
    }

.chip-warning {
    background: #FE9500 !important;
    color: #fff !important;
}

    .chip-warning .chip-delete {
        color: #fff !important;
    }

    .chip-warning.chip-outline {
        background: transparent !important;
        color: #FE9500 !important;
        box-shadow: inset 0 0 0 1px #FE9500 !important;
    }

.chip-info {
    background: #592BCA !important;
    color: #fff !important;
}

    .chip-info .chip-delete {
        color: #fff !important;
    }

    .chip-info.chip-outline {
        background: transparent !important;
        color: #592BCA !important;
        box-shadow: inset 0 0 0 1px #592BCA !important;
    }

.chip-light {
    background: #fff !important;
    color: #000 !important;
}

    .chip-light .chip-delete {
        color: #000 !important;
    }

    .chip-light.chip-outline {
        background: transparent !important;
        color: #fff !important;
        box-shadow: inset 0 0 0 1px #fff !important;
    }

.chip-dark {
    background: #000 !important;
    color: #fff !important;
}

    .chip-dark .chip-delete {
        color: #fff !important;
    }

    .chip-dark.chip-outline {
        background: transparent !important;
        color: #000 !important;
        box-shadow: inset 0 0 0 1px #000 !important;
    }

.search-form {
    display: block;
    width: 100%;
}

.searchbox {
    width: 100%;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .searchbox .form-control {
        height: 36px;
        border-radius: 6px;
        border: 1px solid #fff !important;
        padding: 0 16px 0 36px;
        font-size: 15px;
        box-shadow: none !important;
        color: #141515;
    }

        .searchbox .form-control:focus {
            border-color: #fff !important;
        }

            .searchbox .form-control:focus ~ .input-icon {
                color: #141515;
            }

    .searchbox i.icon,
    .searchbox ion-icon {
        font-size: 26px;
        line-height: 1em;
        margin: 0;
    }

    .searchbox .close {
        opacity: 1;
        color: #A1A1A2;
        width: 46px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 8px;
        top: 0;
    }

    .searchbox .input-icon {
        font-size: 26px;
        position: absolute;
        left: 0px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #A1A1A2;
        top: 0;
    }

#search {
    display: block;
    padding: 0;
    background: #fff;
    border-bottom: 1px solid #FFF;
    position: fixed;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    left: 0;
    top: -50%;
    right: 0;
    width: 100%;
    z-index: 1001;
    transition: 0.2s all ease-in-out;
}

    #search.show {
        top: env(safe-area-inset-top);
        transition: 0.3s all;
    }

    #search .searchbox .form-control {
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0;
        height: 56px;
        padding: 0 56px 0 56px;
        background: transparent;
        font-size: 17px;
        color: #141515;
        width: 100%;
    }

        #search .searchbox .form-control:focus {
            border-color: #bbbbbb;
        }

            #search .searchbox .form-control:focus ~ .input-icon {
                color: #141515;
            }

    #search .searchbox .input-icon {
        font-size: 26px;
        position: absolute;
        left: 8px;
        width: 46px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #A1A1A2;
        top: 0;
    }

.search-result li > .item,
.search-result li > a {
    padding-top: 20px;
    padding-bottom: 20px;
}

.carousel-slider {
    text-align: center;
}

    .carousel-slider .owl-dots {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 100px;
        outline: 0 !important;
    }

        .carousel-slider .owl-dots button {
            outline: 0 !important;
        }

    .carousel-slider .imaged.w-100 {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

.carousel-button-footer {
    min-height: 84px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: env(safe-area-inset-bottom);
    width: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 990;
    left: 0;
    bottom: 0;
    right: 0;
}

    .carousel-button-footer > div {
        width: 100%;
    }

.carousel-multiple {
    width: calc(100% + 16px);
    margin-left: -16px;
}

.carousel-single {
    width: calc(100% + 16px);
    margin-left: -16px;
}

.carousel-small {
    width: calc(100% + 16px);
    margin-left: -16px;
}

.owl-carousel .owl-stage-outer {
    padding-bottom: 20px;
    margin-bottom: -20px;
}

.login-form {
    max-width: 500px;
    margin: auto;
    text-align: center;
}

    .login-form .form-image {
        width: 100%;
        max-width: 200px;
        height: auto;
    }

.form-button-group {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    background: #FFF;
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom);
}

.form-links {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 14px;
}

.timeline {
    position: relative;
    padding: 24px 0;
}

    .timeline:before {
        content: '';
        display: block;
        position: absolute;
        width: 2px;
        left: 0;
        bottom: 0;
        top: 0;
        background: #E1E1E1;
        z-index: 1;
    }

    .timeline .item {
        position: relative;
        margin-bottom: 90px;
    }

.timelineRS .item {
    position: relative;
    margin-bottom: 30px !important;
}

.timelineREC .item {
    position: relative;
    margin-bottom: 40px !important;
}


.timelineULI .item {
    position: relative;
    margin-bottom: 25px !important;
}

.timeline .item:last-child {
    margin-bottom: 0;
}

.timeline .content {
    padding-left: 20px;
}

    .timeline .content .title {
        margin-bottom: 5px;
        line-height: 1.3em;
    }

    .timeline .content .text {
        font-size: 13px;
        line-height: 1.4em;
        padding-right: 30px;
    }

.timeline .dot {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    position: absolute;
    background: #A1A1A2;
    left: -5px;
    top: 50%;
    margin-top: -6px;
    z-index: 10;
    box-shadow: 0 0 0 3px #FFF;
}

.timeline.timed {
    padding-left: 80px;
}

    .timeline.timed:before {
        left: 80px;
    }

    .timeline.timed .time {
        font-size: 11px;
        position: absolute;
        left: -80px;
        line-height: 1.5em;
        width: 70px;
        text-align: right;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 20;
    }

.form-wizard-section {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding: 4px 0 0 0;
    position: relative;
}

    .form-wizard-section:before {
        content: "";
        height: 2.5px;
        background: #E1E1E1;
        width: 70%;
        position: absolute;
        top: 16px;
    }

    .form-wizard-section .button-item {
        flex: 1;
        text-align: center;
        padding: 0 6px;
        position: relative;
    }

        .form-wizard-section .button-item strong {
            background: #E1E1E1;
            width: 30px;
            height: 30px;
            border-radius: 100%;
            color: #A1A1A2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            line-height: 1em;
            position: relative;
            z-index: 2;
        }

            .form-wizard-section .button-item strong i.icon,
            .form-wizard-section .button-item strong ion-icon {
                font-size: 16px;
            }

        .form-wizard-section .button-item p {
            font-size: 12px;
            line-height: 1em;
            color: #A1A1A2;
            margin: 4px 0 0 0;
        }

        .form-wizard-section .button-item.active strong {
            background: #0370ba;
            color: #fff;
        }

        .form-wizard-section .button-item.active p {
            color: #141515;
        }

.extraHeader.bg-primary .form-wizard-section:before, .extraHeader.bg-secondary .form-wizard-section:before, .extraHeader.bg-success .form-wizard-section:before, .extraHeader.bg-danger .form-wizard-section:before, .extraHeader.bg-warning .form-wizard-section:before, .extraHeader.bg-dark .form-wizard-section:before {
    background: transparent;
}

.extraHeader.bg-primary .form-wizard-section .button-item strong, .extraHeader.bg-secondary .form-wizard-section .button-item strong, .extraHeader.bg-success .form-wizard-section .button-item strong, .extraHeader.bg-danger .form-wizard-section .button-item strong, .extraHeader.bg-warning .form-wizard-section .button-item strong, .extraHeader.bg-dark .form-wizard-section .button-item strong {
    background: rgba(255, 255, 255, 0.4);
    color: #FFF;
}

.extraHeader.bg-primary .form-wizard-section .button-item p, .extraHeader.bg-secondary .form-wizard-section .button-item p, .extraHeader.bg-success .form-wizard-section .button-item p, .extraHeader.bg-danger .form-wizard-section .button-item p, .extraHeader.bg-warning .form-wizard-section .button-item p, .extraHeader.bg-dark .form-wizard-section .button-item p {
    color: rgba(255, 255, 255, 0.7);
}

.extraHeader.bg-primary .form-wizard-section .button-item.active strong, .extraHeader.bg-secondary .form-wizard-section .button-item.active strong, .extraHeader.bg-success .form-wizard-section .button-item.active strong, .extraHeader.bg-danger .form-wizard-section .button-item.active strong, .extraHeader.bg-warning .form-wizard-section .button-item.active strong, .extraHeader.bg-dark .form-wizard-section .button-item.active strong {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.extraHeader.bg-primary .form-wizard-section .button-item.active p, .extraHeader.bg-secondary .form-wizard-section .button-item.active p, .extraHeader.bg-success .form-wizard-section .button-item.active p, .extraHeader.bg-danger .form-wizard-section .button-item.active p, .extraHeader.bg-warning .form-wizard-section .button-item.active p, .extraHeader.bg-dark .form-wizard-section .button-item.active p {
    color: #FFF;
}

.adbox {
    text-align: center;
}

    .adbox.fixed {
        position: fixed;
        bottom: 56px;
        left: 50%;
        margin-left: -150px;
        right: 0;
        width: 300px;
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
    }

        .adbox.fixed .closebutton {
            width: 24px;
            height: 24px;
            font-size: 24px;
            background: rgba(0, 0, 0, 0.4);
            color: rgba(255, 255, 255, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: 0;
        }

    .adbox.hide.fixed {
        bottom: -100%;
    }

.adbox-300-50 img {
    width: 300px;
    height: 50px;
}

.adbox-300-250 img {
    width: 300px;
    height: 250px;
}

.windowsphone-detection,
.ios-detection,
.android-detection,
.non-mobile-detection {
    display: none;
}

    .windowsphone-detection.is-active,
    .ios-detection.is-active,
    .android-detection.is-active,
    .non-mobile-detection.is-active {
        display: block;
    }

.fab-button .fab {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0370ba;
    border-radius: 100%;
    color: #fff !important;
}

    .fab-button .fab.no-color {
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        color: #fff !important;
        background: linear-gradient(45deg, #01A09C, #47DDA5);
        text-align: center;
        color: rgba(255,255,255,0.9);
        border-radius: 50px;
        background-size: 600%;
        -webkit-animation: anime 6s linear infinite !important;
        animation: anime 16s linear infinite !important;
    }


    .fab-button .fab.no-color-anim {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        color: #fff !important;
        text-align: center;
        color: rgba(255,255,255,0.9);
        border-radius: 50px;
    }



    .fab-button .fab.text-danger {
        color: #EC4433 !important;
    }

    .fab-button .fab > i.icon,
    .fab-button .fab > ion-icon {
        font-size: 26px;
        transition: .2s all;
        --ionicon-stroke-width: 42px;
    }

    .fab-button .fab:hover, .fab-button .fab:active {
        background: #0370ba;
    }

.fab-button.text .fab {
    width: auto;
    border-radius: 300px;
    font-size: 17px;
    padding: 0px 24px;
    font-family: inherit !important;
}

    .fab-button.text .fab > i.icon,
    .fab-button.text .fab > ion-icon {
        margin-right: 6px;
    }

.fab-button.animate.dropdown.show .fab ion-icon[name=add],
.fab-button.animate.dropdown.show .fab ion-icon[name=add-sharp],
.fab-button.animate.dropdown.show .fab ion-icon[name=add-outline] {
    transform: rotate(45deg);
}

.fab-button.dropdown.show .fab {
    background: #0370ba;
}

.fab-button .dropdown-menu {
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0px 7px;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    text-align: center;
}

    .fab-button .dropdown-menu .dropdown-item {
        padding: 0;
        background: #0370ba;
        width: 42px;
        height: 42px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin: 14px 0;
        border-radius: 100%;
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    }

        .fab-button .dropdown-menu .dropdown-item:hover, .fab-button .dropdown-menu .dropdown-item:active {
            background: #0370ba;
        }

        .fab-button .dropdown-menu .dropdown-item i.icon,
        .fab-button .dropdown-menu .dropdown-item ion-icon {
            --ionicon-stroke-width: 32px;
            line-height: 1em;
            margin-right: 0;
            color: #fff !important;
            width: 24px !important;
            height: 24px !important;
            display: flex !important;
            justify-content: center;
            align-items: center;
            line-height: 1em;
            display: inline-flex;
        }

        .fab-button .dropdown-menu .dropdown-item p {
            background: #FFF;
            position: absolute;
            left: 58px;
            color: #141515;
            font-size: 13px;
            padding: 4px 12px;
            line-height: 1.5em;
            border-radius: 6px;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
        }

.fab-button.bottom-right {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 100;
    margin-bottom: env(safe-area-inset-bottom);
}

.fab-button.bottom-left {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 100;
    margin-bottom: env(safe-area-inset-bottom);
}

.fab-button.bottom-center {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translate(-50%, 0%);
    margin-bottom: env(safe-area-inset-bottom);
}

.fab-button.top-center {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translate(-50%, 0%);
    margin-top: env(safe-area-inset-top);
}

.fab-button.top-left {
    position: fixed;
    top: 72px;
    left: 16px;
    z-index: 100;
    margin-top: env(safe-area-inset-top);
}

.fab-button.top-right {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 100;
    margin-top: env(safe-area-inset-top);
}

    .fab-button.top-right .dropdown-menu .dropdown-item p, .fab-button.bottom-right .dropdown-menu .dropdown-item p {
        left: auto;
        right: 58px;
    }

.notification-box {
    position: fixed;
    left: 0;
    top: -100%;
    right: 0;
    width: 100%;
    z-index: 9999;
    transition: 0.3s all;
    margin-top: env(safe-area-inset-top);
}

    .notification-box.show {
        top: 0;
    }

.notification-dialog.android-style {
    background: #ffffff;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    padding: 16px 16px;
}

    .notification-dialog.android-style .notification-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .notification-dialog.android-style .notification-header .in {
            display: flex;
            align-items: center;
        }

            .notification-dialog.android-style .notification-header .in .imaged {
                margin-right: 8px;
            }

            .notification-dialog.android-style .notification-header .in strong {
                font-size: 13px;
                font-weight: 400;
                color: #141515;
            }

            .notification-dialog.android-style .notification-header .in span {
                display: inline-flex;
                align-items: center;
                margin-left: 6px;
                font-size: 11px;
            }

                .notification-dialog.android-style .notification-header .in span:before {
                    display: inline-flex;
                    align-items: center;
                    margin-right: 6px;
                    content: "•";
                }

        .notification-dialog.android-style .notification-header .close-button {
            display: flex;
            width: 24px;
            height: 24px;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #A1A1A2;
        }

            .notification-dialog.android-style .notification-header .close-button:hover, .notification-dialog.android-style .notification-header .close-button:active {
                color: #4F5050;
            }

    .notification-dialog.android-style .notification-content {
        font-size: 13px;
        line-height: 1.4em;
        margin-top: 14px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

        .notification-dialog.android-style .notification-content .subtitle {
            font-size: 15px;
            margin: 0 0 5px 0;
            line-height: 1.4em;
            font-weight: 500;
        }

        .notification-dialog.android-style .notification-content .in {
            padding-right: 16px;
        }

    .notification-dialog.android-style .icon-box {
        width: 46px;
        height: 46px;
        font-size: 46px;
        color: #A1A1A2;
    }

    .notification-dialog.android-style .notification-footer {
        border-top: 1px solid #E1E1E1;
        margin: 16px -16px -16px -16px;
        padding: 0;
        display: flex;
        align-items: flex-start;
    }

        .notification-dialog.android-style .notification-footer .notification-button {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0370ba !important;
            font-size: 13px;
            border-right: 1px solid #E1E1E1;
            padding: 16px 6px;
        }

            .notification-dialog.android-style .notification-footer .notification-button i.icon,
            .notification-dialog.android-style .notification-footer .notification-button ion-icon {
                font-size: 20px;
                line-height: 1em;
                margin-right: 8px;
            }

            .notification-dialog.android-style .notification-footer .notification-button:last-child {
                border-right: 0;
            }

            .notification-dialog.android-style .notification-footer .notification-button:hover, .notification-dialog.android-style .notification-footer .notification-button:active {
                color: #0370ba;
                background: rgba(225, 225, 225, 0.3);
            }

.notification-dialog.ios-style {
    margin: 10px;
    background: #3b4859;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

    .notification-dialog.ios-style .notification-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 10px 10px 0 0;
    }

        .notification-dialog.ios-style .notification-header .in {
            display: flex;
            align-items: center;
        }

            .notification-dialog.ios-style .notification-header .in .imaged {
                margin-right: 8px;
            }

            .notification-dialog.ios-style .notification-header .in strong {
                font-size: 13px;
                font-weight: 400;
                color: #fff;
            }

        .notification-dialog.ios-style .notification-header .right {
            display: flex;
            align-items: center;
        }

            .notification-dialog.ios-style .notification-header .right span {
                display: inline-flex;
                align-items: center;
                margin-right: 6px;
                color: rgba(255, 255, 255, 0.5);
                font-size: 11px;
            }

        .notification-dialog.ios-style .notification-header .close-button {
            display: flex;
            width: 24px;
            height: 24px;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            opacity: 0.5;
        }

            .notification-dialog.ios-style .notification-header .close-button:hover, .notification-dialog.ios-style .notification-header .close-button:active {
                opacity: 0.7;
            }

    .notification-dialog.ios-style .icon-box {
        width: 46px;
        height: 46px;
        font-size: 46px;
        color: #A1A1A2;
    }

    .notification-dialog.ios-style .notification-content {
        font-size: 13px;
        line-height: 1.4em;
        padding: 14px 16px 20px 16px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        color: rgba(255, 255, 255, 0.75);
    }

        .notification-dialog.ios-style .notification-content .subtitle {
            font-size: 15px;
            margin: 0 0 5px 0;
            line-height: 1.4em;
            color: #fff;
            font-weight: 500;
        }

        .notification-dialog.ios-style .notification-content .in {
            padding-right: 16px;
        }

    .notification-dialog.ios-style .notification-footer {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin: 0px -16px -16px -16px;
        padding: 0;
        display: flex;
        align-items: flex-start;
    }

        .notification-dialog.ios-style .notification-footer .notification-button {
            color: #fff !important;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            padding: 15px 6px;
        }

            .notification-dialog.ios-style .notification-footer .notification-button i.icon,
            .notification-dialog.ios-style .notification-footer .notification-button ion-icon {
                font-size: 20px;
                line-height: 1em;
                margin-right: 10px;
                color: #fff;
            }

            .notification-dialog.ios-style .notification-footer .notification-button:last-child {
                border-right: 0;
            }

            .notification-dialog.ios-style .notification-footer .notification-button:hover, .notification-dialog.ios-style .notification-footer .notification-button:active {
                color: #0370ba;
                background: rgba(255, 255, 255, 0.02);
            }

.toast-box {
    position: fixed;
    left: 0;
    top: -100%;
    right: 0;
    width: 100%;
    z-index: 600;
    /*min-height: 52px;*/
    min-height: 57px;
    margin-top: env(safe-area-inset-top);
    transition: 0.2s all;
    background: #2b3543;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    padding: 10px 16px;
    line-height: 1.4em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .toast-box .toast-title {
        font-size: 15px;
        color: #FFF;
    }

    .toast-box .btn {
        font-size: 13px;
        font-weight: 500;
    }

    .toast-box.show {
        top: 0;
    }

    .toast-box .in {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-right: 20px;
    }

        .toast-box .in i.icon,
        .toast-box .in ion-icon {
            font-size: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            margin-right: 8px;
            color: #FFF;
        }

        .toast-box .in .text {
            width: 100%;
        }

    .toast-box.toast-top.show {
        /* top: 56px;*/
        z-index: 9999999 !important;
    }

.toast-top2.show {
    top: 46px;
    z-index: 99999 !important;
}

.toast-box.toast-bottom {
    top: auto;
    bottom: -100%;
}

    .toast-box.toast-bottom.show {
        bottom: 56px;
        top: auto;
        margin-bottom: env(safe-area-inset-bottom);
    }

.toast-box.toast-center {
    width: auto;
    left: auto;
    right: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    padding: 16px 24px;
    border-radius: 6px;
    text-align: center;
}

    .toast-box.toast-center.show {
        display: block;
        transform: translate(-50%, -50%);
    }

    .toast-box.toast-center .in {
        padding: 0;
        display: block;
    }

        .toast-box.toast-center .in i.icon,
        .toast-box.toast-center .in ion-icon {
            margin: 0 0 10px 0;
            font-size: 64px;
            width: 64px;
            height: 64px;
        }

    .toast-box.toast-center .btn {
        margin-top: 20px;
    }

.extra-header-active .toast-box.toast-top.show {
    /*  top: 95px;*/
    top: 0;
    z-index: 9999999 !important;
}


.notop .toast-box.toast-top.show {
    /*  top: 95px;*/
    top: 0;
    z-index: 10000 !important;
}


.divider {
    height: 1px;
    background: #E1E1E1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .divider .icon-box {
        background: #E1E1E1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF;
        border-radius: 100%;
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

    .divider.inset {
        margin-left: 16px;
        margin-right: 16px;
    }

.comment-block {
    font-size: 13px;
    line-height: 1.6em;
}

    .comment-block .item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 30px;
    }

        .comment-block .item:last-child {
            margin-bottom: 0;
        }

        .comment-block .item .avatar {
            margin-right: 14px;
        }

        .comment-block .item .in {
            width: 100%;
        }

        .comment-block .item .text {
            color: #4F5050;
        }

        .comment-block .item .comment-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
        }

            .comment-block .item .comment-header .title {
                margin: 0;
                padding-right: 10px;
                color: #141515;
                font-size: 15px;
            }

            .comment-block .item .comment-header .time {
                font-size: 11px;
                color: #A1A1A2;
            }

        .comment-block .item .comment-footer {
            margin-top: 10px;
            display: flex;
            align-content: flex-start;
            font-size: 11px;
        }

            .comment-block .item .comment-footer .comment-button {
                font-weight: 500;
                display: flex;
                align-content: center;
                margin-right: 14px;
                color: #4F5050 !important;
            }

                .comment-block .item .comment-footer .comment-button i.icon,
                .comment-block .item .comment-footer .comment-button ion-icon {
                    margin-right: 5px;
                    font-size: 18px;
                    line-height: 1em;
                }

.comment-box {
    padding: 24px 16px;
    text-align: center;
}

    .comment-box .imaged {
        margin: 0 auto 10px auto;
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    }

    .comment-box .card-title {
        margin: 0;
        font-size: 17px;
        font-weight: 500;
    }

    .comment-box .card-text {
        font-size: 11px;
    }

    .comment-box .text {
        margin-top: 6px;
    }

.pagination {
    margin: 0;
    padding: 0;
    text-align: center;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pagination .page-item .page-link {
        background: #0370ba;
        border: 0;
        color: #FFF;
        box-shadow: 0 !important;
        outline: 0 !important;
        margin: 0 4px;
        border-radius: 6px !important;
        font-size: 13px;
    }

        .pagination .page-item .page-link:focus {
            box-shadow: none !important;
        }

    .pagination.pagination-secondary .page-item .page-link {
        background: #FFF;
        color: #4F5050;
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    }

    .pagination.pagination-rounded .page-item .page-link {
        border-radius: 400px !important;
    }

    .pagination.pagination-square .page-item .page-link {
        border-radius: 0 !important;
    }

.error-page {
    text-align: center;
    padding: 40px 16px;
    max-width: 300px;
    margin: auto;
}

    .error-page .icon-box {
        font-size: 86px;
        margin-bottom: 20px;
    }

    .error-page .title {
        font-size: 24px;
        margin-bottom: 20px;
    }

#countDown {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #141515;
    margin: 0 -40px;
}

    #countDown > div {
        display: inline-block;
        width: 70px;
        border: 1px solid #E1E1E1;
        margin: 5px;
        text-align: center;
        border-radius: 6px;
        padding: 10px 5px;
    }

        #countDown > div span {
            display: block;
            font-weight: 400;
            color: #A1A1A2;
            font-size: 10px;
        }

#offline-toast,
#online-toast {
    color: #FFF;
    font-weight: 500;
}

.ios-add-to-home .modal-content {
    position: relative;
    margin-bottom: 10px;
    z-index: 1;
}

    .ios-add-to-home .modal-content:before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-left: 14px solid transparent;
        border-right: 14px solid transparent;
        border-top: 10px solid #fff;
        position: absolute;
        bottom: -7px;
        z-index: 10;
        left: 50%;
        margin-left: -16px;
    }

    .ios-add-to-home .modal-content .action-sheet-content {
        font-size: 13px;
        color: #141515;
        line-height: 1.5em;
    }

        .ios-add-to-home .modal-content .action-sheet-content h4 {
            font-size: 15px;
            margin-bottom: 10px;
        }

        .ios-add-to-home .modal-content .action-sheet-content i.icon,
        .ios-add-to-home .modal-content .action-sheet-content ion-icon {
            font-size: 22px;
            margin-bottom: -4px;
        }

.android-add-to-home {
    z-index: 200000;
}

    .android-add-to-home .modal-dialog {
        top: 0;
        bottom: auto;
        padding: 6px !important;
        transform: translate(0, -100%) !important;
        transition: .5s all !important;
    }

    .android-add-to-home.show .modal-dialog {
        transform: translate(0, 0) !important;
        top: 10px;
    }

    .android-add-to-home .modal-content {
        position: relative;
        z-index: 1;
        border-radius: 4px !important;
    }

        .android-add-to-home .modal-content:before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-top: 10px solid #FFF;
            position: absolute;
            top: -7px;
            z-index: 10;
            right: 9px;
            transform: rotate(180deg);
            margin-left: -16px;
        }

        .android-add-to-home .modal-content .action-sheet-content {
            font-size: 13px;
            color: #141515;
            line-height: 1.5em;
        }

            .android-add-to-home .modal-content .action-sheet-content h4 {
                font-size: 15px;
                margin-bottom: 10px;
            }

            .android-add-to-home .modal-content .action-sheet-content i.icon,
            .android-add-to-home .modal-content .action-sheet-content ion-icon {
                font-size: 20px;
                margin-bottom: -5px;
            }

.button.goTop {
    width: 46px;
    height: 46px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: #cfcfcf;
    color: #FFF;
    position: fixed;
    z-index: 9999999;
    right: 16px;
    bottom: 85px;
    font-size: 18px;
    margin-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

    .button.goTop:hover, .button.goTop:active {
        background: #617085;
    }

    .button.goTop.show {
        display: flex;
    }

.needs-validation.was-validated .form-group.basic .invalid-feedback,
.needs-validation.was-validated .form-group.basic .valid-feedback,
.needs-validation.was-validated .form-group.boxed .invalid-feedback,
.needs-validation.was-validated .form-group.boxed .valid-feedback {
    height: 16px;
    font-size: 11px;
    line-height: 1.4em;
    margin-top: 4px;
}

.needs-validation.was-validated .form-group.basic .invalid-feedback,
.needs-validation.was-validated .form-group.boxed .invalid-feedback {
    color: #EC4433;
}

.needs-validation.was-validated .form-group.basic .valid-feedback,
.needs-validation.was-validated .form-group.boxed .valid-feedback {
    color: #34C759;
}

.needs-validation.was-validated .form-group.basic .clear-input,
.needs-validation.was-validated .form-group.boxed .clear-input {
    bottom: 20px;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #34C759;
    box-shadow: 0 !important;
    background-image: none !important;
}

    .form-control.is-valid:focus,
    .was-validated .form-control:valid:focus {
        border-color: #34C759;
        box-shadow: none !important;
    }

.custom-select.is-valid,
.was-validated .custom-select:valid {
    border-color: #34C759;
}

    .custom-select.is-valid:focus,
    .was-validated .custom-select:valid:focus {
        border-color: #34C759;
        box-shadow: none !important;
    }

.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
    color: #34C759;
}

.custom-control-input.is-valid ~ .custom-control-label,
.was-validated .custom-control-input:valid ~ .custom-control-label {
    color: #34C759;
}

    .custom-control-input.is-valid ~ .custom-control-label::before,
    .was-validated .custom-control-input:valid ~ .custom-control-label::before {
        border-color: #34C759;
    }

.custom-control-input.is-valid:checked ~ .custom-control-label::before,
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before {
    border-color: #34C759;
    background-color: #34C759;
}

.custom-control-input.is-valid:focus ~ .custom-control-label::before,
.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before {
    box-shadow: none !important;
}

.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before,
.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #34C759;
}

.custom-file-input.is-valid ~ .custom-file-label,
.was-validated .custom-file-input:valid ~ .custom-file-label {
    border-color: #34C759;
}

.custom-file-input.is-valid:focus ~ .custom-file-label,
.was-validated .custom-file-input:valid:focus ~ .custom-file-label {
    border-color: #34C759;
    box-shadow: none !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #EC4433;
    background-image: none !important;
}

    .form-control.is-invalid:focus,
    .was-validated .form-control:invalid:focus {
        border-color: #EC4433;
        box-shadow: none !important;
    }

.custom-select.is-invalid,
.was-validated .custom-select:invalid {
    border-color: #EC4433;
}

    .custom-select.is-invalid:focus,
    .was-validated .custom-select:invalid:focus {
        border-color: #EC4433;
        box-shadow: none !important;
    }

.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label {
    color: #EC4433;
}

.custom-control-input.is-invalid ~ .custom-control-label,
.was-validated .custom-control-input:invalid ~ .custom-control-label {
    color: #EC4433;
}

    .custom-control-input.is-invalid ~ .custom-control-label::before,
    .was-validated .custom-control-input:invalid ~ .custom-control-label::before {
        border-color: #EC4433;
    }

.custom-control-input.is-invalid:checked ~ .custom-control-label::before,
.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before {
    border-color: #EC4433;
    background-color: #EC4433;
}

.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before,
.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #EC4433;
}

.custom-file-input.is-invalid ~ .custom-file-label,
.was-validated .custom-file-input:invalid ~ .custom-file-label {
    border-color: #EC4433;
}

.custom-file-input.is-invalid:focus ~ .custom-file-label,
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label {
    border-color: #EC4433;
    box-shadow: none !important;
}

.blog-post .title {
    padding: 0px 16px;
    margin: 0 0 10px 0;
}

.blog-post .post-header {
    font-size: 11px;
    padding: 10px 0;
    margin: 16px 16px;
    color: #A1A1A2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
}

    .blog-post .post-header a {
        color: #141515;
        font-weight: 700;
    }

.blog-post .post-body {
    padding: 0 16px;
}

    .blog-post .post-body img {
        width: calc(100% + 32px);
        height: auto;
        margin: 0px -16px;
        margin-bottom: 16px;
    }

.profile-head {
    display: flex;
    align-items: center;
}

    .profile-head .avatar {
        margin-right: 16px;
    }

    .profile-head .in .name {
        margin: 0 0 5px 0;
        font-weight: 500;
    }

    .profile-head .in .subtext {
        color: #A1A1A2;
        font-weight: 400;
        margin: 0;
    }

.profile-info {
    font-size: 13px;
    line-height: 1.5em;
}

    .profile-info .bio {
        color: #4F5050;
    }

    .profile-info .link {
        margin-top: 4px;
        color: #0370ba;
    }

.profile-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .profile-stats .item {
        font-size: 11px;
        line-height: 1.6em;
        padding: 5px;
        color: #4F5050;
        text-align: center;
    }

        .profile-stats .item:last-child {
            border-right-color: transparent;
        }

        .profile-stats .item strong {
            display: block;
            line-height: 1.4em;
            color: #141515;
            font-size: 17px;
        }

.stepper {
    height: 40px;
    width: 120px;
    min-width: 120px;
    border-radius: 6px;
    display: inline-flex;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
}

    .stepper .stepper-button {
        width: 40px;
        height: 40px;
        color: #fff;
        border-radius: 6px 0 0 6px;
        display: flex;
        font-size: 24px;
        align-items: center;
        justify-content: center;
        background: #0370ba;
        position: relative;
        border: 2px solid #0370ba;
    }

        .stepper .stepper-button:last-child {
            border-radius: 0 6px 6px 0;
        }

    .stepper .form-control {
        padding: 0 3px;
        width: 52px;
        height: 40px;
        border-radius: 0;
        box-shadow: none !important;
        background: transparent;
        text-align: center;
        border: 2px solid #0370ba;
        font-size: 17px;
        font-weight: 500;
        color: #0370ba;
    }

.stepper-sm {
    height: 30px;
    width: 80px;
    min-width: 80px;
}

    .stepper-sm .stepper-button {
        height: 30px;
        width: 24px;
        font-size: 17px;
    }

    .stepper-sm .form-control {
        height: 30px;
        width: 32px;
        /*font-size: 15px;*/
        font-size: 12px !important;
    }

.stepper-lg {
    height: 48px;
}

    .stepper-lg .stepper-button {
        height: 48px;
        font-size: 24px;
    }

    .stepper-lg .form-control {
        height: 48px;
    }

.stepper-primary .stepper-button {
    background: #0370ba;
    border-color: #0370ba;
    color: white !important;
}

.stepper-primary .form-control {
    border-color: #0370ba;
    color: #0370ba;
}

.stepper-secondary .stepper-button {
    background: #6C7C94;
    border-color: #6C7C94;
    color: white !important;
}


.stepper-secondary .form-control {
    border-color: #6C7C94;
    color: #6C7C94;
}

.stepper-success .stepper-button {
    background: #34C759;
    border-color: #34C759;
    color: white !important;
}

.stepper-success .form-control {
    border-color: #34C759;
    color: #34C759;
}

.stepper-danger .stepper-button {
    background: #EC4433;
    border-color: #EC4433;
    color: white !important;
}

.stepper-danger .form-control {
    border-color: #EC4433;
    color: #EC4433;
}

.stepper-warning .stepper-button {
    background: #FE9500;
    border-color: #FE9500;
    color: white !important;
}

.stepper-warning .form-control {
    border-color: #FE9500;
    color: #FE9500;
}

.stepper-info .stepper-button {
    background: #592BCA;
    border-color: #592BCA;
    color: white !important;
}

.stepper-info .form-control {
    border-color: #592BCA;
    color: #592BCA;
}

.stepper-dark .stepper-button {
    background: #333;
    border-color: #333;
    color: white !important;
}

.stepper-dark .form-control {
    border-color: #333;
    color: #333;
}

.stepper-outline-primary .stepper-button {
    background: transparent;
    color: #0370ba;
    border-color: #0370ba;
}

    .stepper-outline-primary .stepper-button:first-child {
        border-right: 0;
    }

    .stepper-outline-primary .stepper-button:last-child {
        border-left: 0;
    }

.stepper-outline-primary .form-control {
    border-color: #0370ba;
    color: #0370ba;
}

.stepper-outline-secondary .stepper-button {
    background: transparent;
    color: #6C7C94;
    border-color: #6C7C94;
}

    .stepper-outline-secondary .stepper-button:first-child {
        border-right: 0;
    }

    .stepper-outline-secondary .stepper-button:last-child {
        border-left: 0;
    }

.stepper-outline-secondary .form-control {
    border-color: #6C7C94;
    color: #6C7C94;
}

.stepper-outline-success .stepper-button {
    background: transparent;
    color: #34C759;
    border-color: #34C759;
}

    .stepper-outline-success .stepper-button:first-child {
        border-right: 0;
    }

    .stepper-outline-success .stepper-button:last-child {
        border-left: 0;
    }

.stepper-outline-success .form-control {
    border-color: #34C759;
    color: #34C759;
}

.stepper-outline-danger .stepper-button {
    background: transparent;
    color: #EC4433;
    border-color: #EC4433;
}

    .stepper-outline-danger .stepper-button:first-child {
        border-right: 0;
    }

    .stepper-outline-danger .stepper-button:last-child {
        border-left: 0;
    }

.stepper-outline-danger .form-control {
    border-color: #EC4433;
    color: #EC4433;
}

.stepper-outline-warning .stepper-button {
    background: transparent;
    color: #FE9500;
    border-color: #FE9500;
}

    .stepper-outline-warning .stepper-button:first-child {
        border-right: 0;
    }

    .stepper-outline-warning .stepper-button:last-child {
        border-left: 0;
    }

.stepper-outline-warning .form-control {
    border-color: #FE9500;
    color: #FE9500;
}

.stepper-outline-info .stepper-button {
    background: transparent;
    color: #592BCA;
    border-color: #592BCA;
}

    .stepper-outline-info .stepper-button:first-child {
        border-right: 0;
    }

    .stepper-outline-info .stepper-button:last-child {
        border-left: 0;
    }

.stepper-outline-info .form-control {
    border-color: #592BCA;
    color: #592BCA;
}

.stepper-outline-dark .stepper-button {
    background: transparent;
    color: #333;
    border-color: #333;
}

    .stepper-outline-dark .stepper-button:first-child {
        border-right: 0;
    }

    .stepper-outline-dark .stepper-button:last-child {
        border-left: 0;
    }

.stepper-outline-dark .form-control {
    border-color: #333;
    color: #333;
}

.rate-block {
    font-size: 18px;
    display: flex;
    color: #A1A1A2;
}

    .rate-block ion-icon,
    .rate-block i.icon {
        margin-right: 3px;
    }

        .rate-block ion-icon.active,
        .rate-block i.icon.active {
            color: #FE9500;
        }

.comment-block .rate-block {
    font-size: 14px;
}

.product-detail-header .title {
    margin: 0 0 2px 0;
    font-weight: 500;
    font-size: 17px;
    color: #141515;
}

.product-detail-header .text {
    font-size: 13px;
    color: #4F5050;
}

.product-detail-header .detail-footer {
    margin: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .product-detail-header .detail-footer .price .old-price {
        font-size: 15px;
        color: #4F5050;
        text-decoration: line-through;
        margin-bottom: 4px;
    }

    .product-detail-header .detail-footer .price .current-price {
        font-size: 24px;
        color: #0370ba;
        font-weight: 500;
    }

.cart-item .card-body {
    padding: 16px;
}

.cart-item .imaged {
    width: 80px;
    height: auto;
}

.cart-item .in {
    display: flex;
    align-items: center;
}

    .cart-item .in .text {
        margin-left: 16px;
    }

        .cart-item .in .text .title {
            font-weight: 500;
            font-size: 15px;
            line-height: 1.2em;
            margin: 0 0 6px 0;
        }

        .cart-item .in .text .detail {
            line-height: 1.2em;
            margin: 0 0 4px 0;
            font-size: 11px;
            color: #A1A1A2;
        }

        .cart-item .in .text .price {
            font-weight: 500;
            font-size: 15px;
            color: #0370ba;
        }

.cart-item .cart-item-footer {
    border-top: 1px solid #E1E1E1;
    padding: 16px 0 0 0;
    margin: 16px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.dark-mode-active {
    background: #0c1624 !important;
    color: #8195a6;
}

    body.dark-mode-active.bg-light, body.dark-mode-active.bg-white {
        background: #0c1624 !important;
    }

    body.dark-mode-active #loader {
        background: #0c1624;
    }

    body.dark-mode-active select option {
        background: #0c1624;
        color: #fff;
    }

    body.dark-mode-active .text-muted {
        color: #586d7f !important;
    }

    body.dark-mode-active .bg-dark {
        background: #000 !important;
    }

    body.dark-mode-active .bg-light {
        background: #fff !important;
    }

    body.dark-mode-active h1,
    body.dark-mode-active h2,
    body.dark-mode-active h3,
    body.dark-mode-active h4,
    body.dark-mode-active h5,
    body.dark-mode-active h6 {
        color: #FFFFFF;
    }

        body.dark-mode-active h1 small,
        body.dark-mode-active h2 small,
        body.dark-mode-active h3 small,
        body.dark-mode-active h4 small,
        body.dark-mode-active h5 small,
        body.dark-mode-active h6 small {
            color: #8195a6;
        }

    body.dark-mode-active .lead {
        color: #586d7f !important;
    }

    body.dark-mode-active .appHeader {
        background: #0F1C2F;
        border-bottom-color: #1B283B;
    }

        body.dark-mode-active .appHeader .pageTitle {
            color: #FFFFFF;
        }

        body.dark-mode-active .appHeader.transparent {
            background: transparent !important;
        }

        body.dark-mode-active .appHeader.bg-light .pageTitle {
            color: #141515;
        }

        body.dark-mode-active .appHeader .left .headerButton,
        body.dark-mode-active .appHeader .right .headerButton {
            color: #FFFFFF;
        }

    body.dark-mode-active .extraHeader {
        background: #0F1C2F;
        border-bottom-color: #1B283B;
    }

    body.dark-mode-active .appHeader.scrolled {
        background: transparent;
        border-bottom-color: transparent;
    }

        body.dark-mode-active .appHeader.scrolled.is-active {
            background: #0F1C2F;
            border-bottom-color: #1B283B;
        }

    body.dark-mode-active .section-title {
        color: #8195a6;
    }

    body.dark-mode-active .section .wide-block {
        background: #0F1C2F;
        border-top-color: #1B283B;
        border-bottom-color: #1B283B;
    }

    body.dark-mode-active .section .content-header,
    body.dark-mode-active .section .content-footer {
        color: #586d7f;
    }

    body.dark-mode-active .section.inset .wide-block {
        border-color: #1B283B;
    }

    body.dark-mode-active .header-large-title .title {
        color: #FFFFFF;
    }

    body.dark-mode-active .header-large-title .subtitle {
        color: #FFFFFF !important;
    }

    body.dark-mode-active .appBottomMenu {
        background: #0F1C2F;
        border-top-color: #1B283B;
    }

        body.dark-mode-active .appBottomMenu .item i.icon,
        body.dark-mode-active .appBottomMenu .item ion-icon,
        body.dark-mode-active .appBottomMenu .item strong {
            color: #FFFFFF;
        }

        body.dark-mode-active .appBottomMenu .item:hover i.icon,
        body.dark-mode-active .appBottomMenu .item:hover ion-icon,
        body.dark-mode-active .appBottomMenu .item:hover strong {
            color: #FFFFFF;
        }

        body.dark-mode-active .appBottomMenu.bg-light .item i.icon,
        body.dark-mode-active .appBottomMenu.bg-light .item ion-icon,
        body.dark-mode-active .appBottomMenu.bg-light .item strong {
            color: #141515;
        }

        body.dark-mode-active .appBottomMenu.bg-light .item:hover i.icon,
        body.dark-mode-active .appBottomMenu.bg-light .item:hover ion-icon,
        body.dark-mode-active .appBottomMenu.bg-light .item:hover strong {
            color: #141515;
        }

    body.dark-mode-active .accordion {
        background: #0F1C2F;
        border-top-color: #1B283B;
        border-bottom-color: #1B283B;
    }

        body.dark-mode-active .accordion .accordion-header .btn {
            color: #FFFFFF;
        }

            body.dark-mode-active .accordion .accordion-header .btn:active {
                background: rgba(27, 40, 59, 0.2) !important;
            }

            body.dark-mode-active .accordion .accordion-header .btn.collapsed:before {
                background: #1B283B;
            }

    body.dark-mode-active .inset .accordion {
        border-color: #1B283B;
    }

    body.dark-mode-active .action-sheet .modal-content {
        background: #0F1C2F;
    }

        body.dark-mode-active .action-sheet .modal-content .modal-header {
            border-bottom-color: #1B283B;
        }

            body.dark-mode-active .action-sheet .modal-content .modal-header .modal-title {
                color: #FFFFFF !important;
            }

    body.dark-mode-active .action-button-list > li .btn {
        color: #FFFFFF;
    }

        body.dark-mode-active .action-button-list > li .btn:active, body.dark-mode-active .action-button-list > li .btn.active {
            background: rgba(27, 40, 59, 0.3) !important;
        }

    body.dark-mode-active .action-button-list .action-divider {
        background: #1B283B;
    }

    body.dark-mode-active .listview.transparent {
        background: transparent !important;
    }

    body.dark-mode-active .listview-title {
        color: #8195a6;
    }

        body.dark-mode-active .listview-title .link {
            color: #586d7f;
        }

    body.dark-mode-active .listview {
        color: #FFFFFF;
        background-color: #0F1C2F !important;
        border-top-color: #1B283B;
        border-bottom-color: #1B283B;
    }

        body.dark-mode-active .listview .text-muted {
            color: #586d7f !important;
        }

        body.dark-mode-active .listview > li:after {
            background: #1B283B;
        }

        body.dark-mode-active .listview > li header,
        body.dark-mode-active .listview > li footer {
            color: #8195a6;
        }

        body.dark-mode-active .listview > li.divider-title {
            background: rgba(0, 0, 0, 0.1);
            color: #8195a6;
            border-top-color: #1B283B;
            border-bottom-color: #1B283B;
        }

    body.dark-mode-active .link-listview > li a {
        color: #FFFFFF !important;
    }

        body.dark-mode-active .link-listview > li a:after {
            background-image: url("data:image/svg+xml,%0A%3Csvg width='10px' height='16px' viewBox='0 0 10 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Listview' transform='translate(-112.000000, -120.000000)' stroke='%23586d7f' stroke-width='2.178'%3E%3Cpolyline id='Path' points='114 122 120 128 114 134'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        body.dark-mode-active .link-listview > li a:active {
            background: rgba(27, 40, 59, 0.3);
        }

    body.dark-mode-active .image-listview > li a.item {
        color: #FFFFFF !important;
    }

        body.dark-mode-active .image-listview > li a.item:active {
            background: rgba(27, 40, 59, 0.3);
        }

        body.dark-mode-active .image-listview > li a.item:after {
            background-image: url("data:image/svg+xml,%0A%3Csvg width='10px' height='16px' viewBox='0 0 10 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Listview' transform='translate(-112.000000, -120.000000)' stroke='%23586d7f' stroke-width='2.178'%3E%3Cpolyline id='Path' points='114 122 120 128 114 134'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

    body.dark-mode-active .image-listview.media > li {
        border-bottom: 1px solid #1B283B;
    }

    body.dark-mode-active .btn-light {
        background: #fff !important;
        color: #000 !important;
        border-color: #fff !important;
    }

        body.dark-mode-active .btn-light:hover, body.dark-mode-active .btn-light:active {
            background: #fff !important;
            color: #000 !important;
            border-color: #fff !important;
            opacity: 0.8;
        }

    body.dark-mode-active .btn-dark {
        background: #000 !important;
        color: #fff !important;
        border-color: #000 !important;
    }

        body.dark-mode-active .btn-dark:hover, body.dark-mode-active .btn-dark:active {
            background: #000 !important;
            color: #fff !important;
            border-color: #000 !important;
            opacity: 0.6;
        }

    body.dark-mode-active .btn-outline-light {
        border-color: #fff !important;
        color: #fff !important;
    }

        body.dark-mode-active .btn-outline-light:hover, body.dark-mode-active .btn-outline-light:active {
            color: #fff !important;
            border-color: #fff !important;
        }

    body.dark-mode-active .btn-outline-dark {
        border-color: #000 !important;
        color: #000 !important;
    }

        body.dark-mode-active .btn-outline-dark:hover, body.dark-mode-active .btn-outline-dark:active {
            color: #000 !important;
            border-color: #000 !important;
            background: rgba(0, 0, 0, 0.2) !important;
        }

    body.dark-mode-active .card {
        background: #0F1C2F;
    }

        body.dark-mode-active .card .card-title {
            color: #FFFFFF;
        }

        body.dark-mode-active .card .card-subtitle {
            color: #FFFFFF;
        }

        body.dark-mode-active .card .card-header {
            border-bottom-color: rgba(255, 255, 255, 0.1);
            color: #FFFFFF;
        }

        body.dark-mode-active .card .card-footer {
            border-top-color: rgba(255, 255, 255, 0.1);
            color: #8195a6;
        }

        body.dark-mode-active .card .text-muted {
            color: #586d7f !important;
        }

        body.dark-mode-active .card.bg-light {
            color: #4F5050;
        }

            body.dark-mode-active .card.bg-light .card-title {
                color: #141515;
            }

            body.dark-mode-active .card.bg-light .card-subtitle {
                color: #141515;
            }

            body.dark-mode-active .card.bg-light .card-header {
                color: #000;
                border-bottom-color: #E1E1E1;
            }

    body.dark-mode-active .blockquote-footer {
        color: #8195a6;
    }

    body.dark-mode-active .custom-control .custom-control-label {
        color: #FFFFFF;
    }

        body.dark-mode-active .custom-control .custom-control-label:before {
            background: transparent;
            border-color: rgba(255, 255, 255, 0.15) !important;
        }

        body.dark-mode-active .custom-control .custom-control-label:active:before {
            background: transparent !important;
            border-color: #1B283B !important;
        }

    body.dark-mode-active .input-list .custom-control:after {
        background: #1B283B;
    }

    body.dark-mode-active .input-list .custom-control-label:active {
        background: rgba(27, 40, 59, 0.3);
    }

    body.dark-mode-active .chip {
        background: #1B283B;
        color: #FFFFFF;
    }

        body.dark-mode-active .chip.chip-outline {
            box-shadow: inset 0 0 0 1px #1B283B;
            background: transparent;
        }

        body.dark-mode-active .chip .chip-icon {
            background: #8195a6;
            color: #fff;
        }

        body.dark-mode-active .chip .chip-delete {
            color: #FFFFFF;
        }

    body.dark-mode-active .comment-block .item .text {
        color: #8195a6;
    }

    body.dark-mode-active .comment-block .item .comment-header .title {
        color: #FFFFFF;
    }

    body.dark-mode-active .comment-block .item .comment-header .time {
        color: #586d7f;
    }

    body.dark-mode-active .comment-block .item .comment-footer .comment-button {
        color: #8195a6 !important;
    }

    body.dark-mode-active .dialogbox .modal-dialog .modal-content {
        background: #0F1C2F;
        color: #8195a6;
    }

        body.dark-mode-active .dialogbox .modal-dialog .modal-content .btn-list .btn {
            border-bottom-color: #1B283B !important;
            color: #FFFFFF;
        }

            body.dark-mode-active .dialogbox .modal-dialog .modal-content .btn-list .btn:hover, body.dark-mode-active .dialogbox .modal-dialog .modal-content .btn-list .btn:focus, body.dark-mode-active .dialogbox .modal-dialog .modal-content .btn-list .btn:active, body.dark-mode-active .dialogbox .modal-dialog .modal-content .btn-list .btn.active {
                background: rgba(27, 40, 59, 0.3) !important;
            }

        body.dark-mode-active .dialogbox .modal-dialog .modal-content .btn-inline .btn {
            color: #FFFFFF;
            border-right-color: #1B283B !important;
        }

            body.dark-mode-active .dialogbox .modal-dialog .modal-content .btn-inline .btn:hover, body.dark-mode-active .dialogbox .modal-dialog .modal-content .btn-inline .btn:focus, body.dark-mode-active .dialogbox .modal-dialog .modal-content .btn-inline .btn:active, body.dark-mode-active .dialogbox .modal-dialog .modal-content .btn-inline .btn.active {
                background: rgba(27, 40, 59, 0.3) !important;
            }

        body.dark-mode-active .dialogbox .modal-dialog .modal-content .modal-header .modal-title {
            color: #FFFFFF;
        }

        body.dark-mode-active .dialogbox .modal-dialog .modal-content .modal-footer {
            border-top-color: #1B283B;
        }

    body.dark-mode-active .divider {
        background: #1B283B;
    }

        body.dark-mode-active .divider .icon-box {
            background: #1B283B;
        }

    body.dark-mode-active .dropdown .dropdown-menu,
    body.dark-mode-active .dropup .dropdown-menu {
        background: #0c1624;
        border: 1px solid #1B283B;
    }

        body.dark-mode-active .dropdown .dropdown-menu .dropdown-item,
        body.dark-mode-active .dropup .dropdown-menu .dropdown-item {
            color: #FFFFFF;
        }

            body.dark-mode-active .dropdown .dropdown-menu .dropdown-item:hover, body.dark-mode-active .dropdown .dropdown-menu .dropdown-item:active,
            body.dark-mode-active .dropup .dropdown-menu .dropdown-item:hover,
            body.dark-mode-active .dropup .dropdown-menu .dropdown-item:active {
                background: rgba(27, 40, 59, 0.5) !important;
                color: #FFFFFF;
            }

        body.dark-mode-active .dropdown .dropdown-menu .dropdown-divider,
        body.dark-mode-active .dropup .dropdown-menu .dropdown-divider {
            border-top-color: #1B283B !important;
        }

        body.dark-mode-active .dropdown .dropdown-menu .dropdown-header,
        body.dark-mode-active .dropup .dropdown-menu .dropdown-header {
            color: #8195a6;
        }

        body.dark-mode-active .dropdown .dropdown-menu .text,
        body.dark-mode-active .dropup .dropdown-menu .text {
            color: #8195a6;
        }

        body.dark-mode-active .dropdown .dropdown-menu i.icon,
        body.dark-mode-active .dropdown .dropdown-menu ion-icon,
        body.dark-mode-active .dropup .dropdown-menu i.icon,
        body.dark-mode-active .dropup .dropdown-menu ion-icon {
            color: #FFFFFF;
        }

    body.dark-mode-active .error-page .title {
        color: #FFFFFF;
    }

    body.dark-mode-active .fixed-footer {
        background: #0c1624;
    }

    body.dark-mode-active .fab-button .dropdown-menu {
        background: transparent;
        border-color: transparent;
    }

    body.dark-mode-active .form-wizard-section:before {
        background: #1B283B;
    }

    body.dark-mode-active .form-wizard-section .button-item strong {
        background: #1B283B;
        color: #586d7f;
    }

    body.dark-mode-active .form-wizard-section .button-item p {
        color: #586d7f;
    }

    body.dark-mode-active .form-wizard-section .button-item.active strong {
        background: #0370ba;
        color: #fff;
    }

    body.dark-mode-active .form-wizard-section .button-item.active p {
        color: #FFFFFF;
    }

    body.dark-mode-active .exampleBox {
        border-color: #1B283B;
        background: rgba(27, 40, 59, 0.3);
    }

    body.dark-mode-active .form-group .label {
        color: #FFFFFF;
    }

    body.dark-mode-active .form-group .input-info {
        color: #586d7f;
    }

    body.dark-mode-active .form-group .clear-input {
        color: #586d7f;
    }

    body.dark-mode-active .form-group.basic .form-control,
    body.dark-mode-active .form-group.basic .custom-select {
        border-bottom-color: #1B283B;
        color: #FFFFFF;
    }

    body.dark-mode-active .form-group.boxed .form-control,
    body.dark-mode-active .form-group.boxed .custom-select {
        color: #FFFFFF;
        background: #1B283B;
        border-color: #1B283B;
    }

    body.dark-mode-active .input-group .input-group-text {
        border-bottom-color: #1B283B;
        color: #FFFFFF;
    }

    body.dark-mode-active .form-button-group {
        background: #0c1624;
    }

    body.dark-mode-active .message-divider {
        color: #8195a6;
    }

    body.dark-mode-active .message-item .bubble {
        background: #1B283B;
        color: #FFFFFF;
    }

    body.dark-mode-active .message-item .title {
        color: #8195a6;
    }

    body.dark-mode-active .message-item .footer {
        color: #FFFFFF;
    }

    body.dark-mode-active .message-item.user .bubble {
        background: #0370ba;
    }

    body.dark-mode-active .chatFooter {
        background: #0F1C2F;
        border-top-color: #1B283B;
    }

    body.dark-mode-active .modalbox {
        background: #0c1624;
    }

        body.dark-mode-active .modalbox .modal-dialog .modal-content {
            background: #0c1624;
        }

            body.dark-mode-active .modalbox .modal-dialog .modal-content .modal-header {
                border-bottom-color: #1B283B;
                background: #0F1C2F;
            }

                body.dark-mode-active .modalbox .modal-dialog .modal-content .modal-header .modal-title {
                    color: #FFFFFF;
                }

    body.dark-mode-active .notification-box {
        position: fixed;
        left: 0;
        top: -100%;
        right: 0;
        width: 100%;
        z-index: 9999;
        transition: 0.3s all;
    }

        body.dark-mode-active .notification-box.show {
            top: 0;
        }

    body.dark-mode-active .notification-dialog.android-style {
        background: #0a1320;
    }

        body.dark-mode-active .notification-dialog.android-style .notification-header .in strong {
            color: #FFFFFF;
        }

        body.dark-mode-active .notification-dialog.android-style .notification-header .close-button {
            color: #586d7f;
        }

            body.dark-mode-active .notification-dialog.android-style .notification-header .close-button:hover, body.dark-mode-active .notification-dialog.android-style .notification-header .close-button:active {
                color: #8195a6;
            }

        body.dark-mode-active .notification-dialog.android-style .icon-box {
            color: #586d7f;
        }

        body.dark-mode-active .notification-dialog.android-style .notification-footer {
            border-top: 1px solid #1B283B;
        }

            body.dark-mode-active .notification-dialog.android-style .notification-footer .notification-button {
                border-right: 1px solid #1B283B;
            }

                body.dark-mode-active .notification-dialog.android-style .notification-footer .notification-button:hover, body.dark-mode-active .notification-dialog.android-style .notification-footer .notification-button:active {
                    background: rgba(27, 40, 59, 0.3);
                }

    body.dark-mode-active .notification-dialog.ios-style {
        background: #0a1320;
    }

        body.dark-mode-active .notification-dialog.ios-style .icon-box {
            color: #586d7f;
        }

    body.dark-mode-active .panelbox .modal-dialog .modal-content {
        background: #0F1C2F;
    }

        body.dark-mode-active .panelbox .modal-dialog .modal-content .modal-header .modal-title {
            color: #FFFFFF;
        }

    body.dark-mode-active .pagination.pagination-secondary .page-item .page-link {
        background: #0c1624;
        color: #8195a6;
    }

    body.dark-mode-active .progress {
        background: #162a46;
    }

    body.dark-mode-active .searchbox .form-control {
        border-color: #1B283B !important;
        color: #FFFFFF;
        background: #1B283B;
    }

        body.dark-mode-active .searchbox .form-control:focus {
            border-color: #2b405e !important;
        }

            body.dark-mode-active .searchbox .form-control:focus ~ .input-icon {
                color: #FFFFFF;
            }

    body.dark-mode-active .searchbox .close {
        color: #586d7f;
    }

    body.dark-mode-active .searchbox .input-icon {
        color: #586d7f;
    }

    body.dark-mode-active #search {
        background: #0F1C2F;
        border-bottom-color: #0F1C2F;
    }

        body.dark-mode-active #search .searchbox .form-control {
            color: #FFFFFF;
        }

            body.dark-mode-active #search .searchbox .form-control:focus {
                border-color: #030407;
            }

                body.dark-mode-active #search .searchbox .form-control:focus ~ .input-icon {
                    color: #FFFFFF;
                }

        body.dark-mode-active #search .searchbox .input-icon {
            color: #586d7f;
        }

    body.dark-mode-active .table {
        color: #8195a6;
    }

        body.dark-mode-active .table thead th {
            color: #FFFFFF;
        }

        body.dark-mode-active .table td,
        body.dark-mode-active .table th {
            border-color: rgba(255, 255, 255, 0.1);
        }

    body.dark-mode-active .table-dark {
        background: #080f19;
    }

    body.dark-mode-active .table-striped tbody tr:nth-of-type(odd) {
        background: rgba(27, 40, 59, 0.4);
    }

    body.dark-mode-active .table-bordered td,
    body.dark-mode-active .table-bordered th {
        border-color: #1B283B;
    }

    body.dark-mode-active .timeline:before {
        background: #1B283B;
    }

    body.dark-mode-active .timeline .dot {
        background: darkModeColorLight;
        box-shadow: 0 0 0 4px #0F1C2F;
    }

    body.dark-mode-active .toast-box {
        background: #060a11;
    }

    body.dark-mode-active .appFooter {
        border-top-color: #1B283B;
        background: #0c1624;
    }

        body.dark-mode-active .appFooter .footer-title {
            color: #FFFFFF;
        }

        body.dark-mode-active .appFooter .btn-icon {
            color: #586d7f;
        }

    body.dark-mode-active .sidebar-buttons {
        background: #0c1624;
        border-top: 1px solid #1B283B;
    }

        body.dark-mode-active .sidebar-buttons .button {
            color: #FFFFFF;
        }

            body.dark-mode-active .sidebar-buttons .button:hover, body.dark-mode-active .sidebar-buttons .button:active {
                background: rgba(27, 40, 59, 0.2);
            }

        body.dark-mode-active .sidebar-buttons:last-child {
            border-right-color: transparent;
        }

    body.dark-mode-active .profileBox .in strong {
        color: #fff;
    }

    body.dark-mode-active .profileBox .in .text-muted {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    body.dark-mode-active .close-sidebar-button {
        color: rgba(255, 255, 255, 0.5) !important;
    }

        body.dark-mode-active .close-sidebar-button:active {
            background: rgba(27, 40, 59, 0.3);
        }

    body.dark-mode-active .ios-add-to-home,
    body.dark-mode-active .android-add-to-home {
        background: rgba(12, 22, 36, 0.4) !important;
    }

        body.dark-mode-active .ios-add-to-home .modal-content:before,
        body.dark-mode-active .android-add-to-home .modal-content:before {
            border-top-color: #0F1C2F;
        }

        body.dark-mode-active .ios-add-to-home .modal-content .action-sheet-content,
        body.dark-mode-active .android-add-to-home .modal-content .action-sheet-content {
            color: #FFFFFF;
        }

    body.dark-mode-active .demoIcons {
        color: #8195a6;
    }

    body.dark-mode-active .custom-file-upload label {
        background-color: rgba(27, 40, 59, 0.2);
        border-color: #1B283B;
    }

        body.dark-mode-active .custom-file-upload label span {
            color: #586d7f;
        }

            body.dark-mode-active .custom-file-upload label span i.icon,
            body.dark-mode-active .custom-file-upload label span ion-icon {
                color: #586d7f;
            }

        body.dark-mode-active .custom-file-upload label.file-uploaded span {
            color: #8195a6;
            background-color: #1B283B;
        }

    body.dark-mode-active .nav-tabs.style1 {
        background: rgba(27, 40, 59, 0.4);
    }

        body.dark-mode-active .nav-tabs.style1 .nav-item .nav-link {
            color: #8195a6;
        }

            body.dark-mode-active .nav-tabs.style1 .nav-item .nav-link.active {
                background: #23344c;
                color: #FFFFFF;
            }

    body.dark-mode-active .nav-tabs.lined .nav-item .nav-link {
        color: #8195a6;
        background: transparent;
    }

        body.dark-mode-active .nav-tabs.lined .nav-item .nav-link.active {
            background: transparent;
            color: #0370ba;
        }

    body.dark-mode-active .blog-post .post-header {
        color: #586d7f;
        border-top-color: #1B283B;
        border-bottom-color: #1B283B;
    }

        body.dark-mode-active .blog-post .post-header a {
            color: #FFFFFF;
        }

    body.dark-mode-active #countDown {
        color: #FFFFFF;
    }

        body.dark-mode-active #countDown > div {
            border-color: #1B283B;
        }

            body.dark-mode-active #countDown > div span {
                color: #586d7f;
            }

    body.dark-mode-active figure.codebox {
        background: #1B283B;
    }

        body.dark-mode-active figure.codebox code {
            color: #FFFFFF;
        }

    body.dark-mode-active .profile-head .in .subtext {
        color: #586d7f;
    }

    body.dark-mode-active .profile-info .bio {
        color: #8195a6;
    }

    body.dark-mode-active .profile-stats .item {
        color: #8195a6;
    }

        body.dark-mode-active .profile-stats .item strong {
            color: #FFFFFF;
        }

    body.dark-mode-active .rate-block {
        color: #586d7f;
    }

    body.dark-mode-active .product-detail-header .title {
        color: #FFFFFF;
    }

    body.dark-mode-active .product-detail-header .text {
        color: #8195a6;
    }

    body.dark-mode-active .product-detail-header .detail-footer .price .old-price {
        color: #8195a6;
    }

    body.dark-mode-active .cart-item .in .text .detail {
        color: #586d7f;
    }

    body.dark-mode-active .cart-item .cart-item-footer {
        border-top: 1px solid #1B283B;
    }

/*Text Black Added*/
.text-black {
    color: rgb(0, 0, 0) !important;
}


/*SCANNER*/


/* iPad Fix-- test */



video {
    width: 100%;
    height: 100vh; /* Full screen */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999 !important;
    object-fit: cover; /* Ensures video covers the screen without distortion */
}


 /* video.small {
       
        height: 50vh !important;
        position: absolute;
        top: 35%;
        width: 80%;
        left: 10vw;
        object-fit: cover;
      
        z-index: 99 !important;
   
    }
*/


    video.small {
        height: 45vh !important;
        position: absolute;
        top: 43%;
        width: 80%;
        left: 10vw;
        object-fit: cover;
        z-index: 0 !important;
    }



#continuousScanAll.small .iconed-qr {
    /* margin-bottom: 200px !important; */
    height: 20vh;
    width: 20vh;
    background: linear-gradient(#ea2f1c, #ea2f1c) top left, linear-gradient(#ea2f1c, #ea2f1c) top left, linear-gradient(#ea2f1c, #ea2f1c) top right, linear-gradient(#ea2f1c, #ea2f1c) top right, linear-gradient(#ea2f1c, #ea2f1c) bottom left, linear-gradient(#ea2f1c, #ea2f1c) bottom left, linear-gradient(#ea2f1c, #ea2f1c) bottom right, linear-gradient(#ea2f1c, #ea2f1c) bottom right;
    background-size: 4px 20px, 20px 4px;
    background-repeat: no-repeat;
    position: fixed !important;
    z-index: 99 !important;
    /* width: 100% !important; */
    /* margin: auto; */
    bottom: 25vh !important;
    opacity: 1;
    animation: fadeInOut 2s infinite;
    flex-shrink: 0;
}


@media screen and (max-width: 400px) {
    /* Apply styles only when the screen width is 768px or smaller */
    video.small {
        height: 40vh !important;
        position: fixed;
        top: 50%;
        width: 80vw;
        left: 10vw;
        object-fit: cover;
        z-index: 0 !important; /* Adjust z-index as needed */
    }

    #continuousScanAll.small .iconed-qr {
        /* margin-bottom: 200px !important; */
        height: 20vh;
        width: 20vh;
        background: linear-gradient(#ea2f1c, #ea2f1c) top left, linear-gradient(#ea2f1c, #ea2f1c) top left, linear-gradient(#ea2f1c, #ea2f1c) top right, linear-gradient(#ea2f1c, #ea2f1c) top right, linear-gradient(#ea2f1c, #ea2f1c) bottom left, linear-gradient(#ea2f1c, #ea2f1c) bottom left, linear-gradient(#ea2f1c, #ea2f1c) bottom right, linear-gradient(#ea2f1c, #ea2f1c) bottom right;
        background-size: 4px 20px, 20px 4px;
        background-repeat: no-repeat;
        position: fixed !important;
        z-index: 99 !important;
        /* width: 100% !important; */
        /* margin: auto; */
        bottom: 20vh !important;
        opacity: 1;
        animation: fadeInOut 2s infinite;
        flex-shrink: 0;
    }
}


.front {
    position: fixed !important;
    z-index: 99999 !important;
    width: 100% !important;
    bottom: 0px !important;
}

/*Font Awesome Gradient */
.fa-blue-gradient {
    background: -webkit-linear-gradient(to right, #0370ba, #005289, #0370ba);
    background: linear-gradient(to left,#0370ba, #005289, #0370ba);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.fa-light-gradient {
    color: #d9d9d9;
}

.fa-par-blue {
    color: #005289;
}

.font-larger-h3 {
    font-size: 13.5px !important;
}

.font-larger {
    font-size: 23.5px !important;
}

.font-small-p {
    font-size: 11px !important;
}

.card-gradient {
    border-radius: 15px;
    background: #005289;
    background: -webkit-linear-gradient(to right, #005289, #2980b9);
    background: linear-gradient(to right, #005289, #2980b9);
    background-size: 150% !important;
}

.border-bottom-round {
    border-radius: 0px 0px 12px 12px !important;
}


.btn-gradient {
    background-color: #21D4FD;
    background-image: linear-gradient(19deg, #19548B 0%, #005289 100%) !important;
    color: white !important;
}

.animateScanner {
    background-color: red !important;
    animation: animateScan 1s infinite;
}

@keyframes animateScan {
    from {
        background-color: yellow !important;
    }

    to {
        background-color: red !important;
    }
}




.bg-success-notification {
    background: #2ca049;
    color: white;
}



.text-small {
    font-size: 11px !important;
}


/*LOGIN CSS*/

.logo-300px {
    width: 300px !important;
    height: 42px !important;
}


.text-thin {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
}





.text-thin-reg {
    font-weight: 300;
    font-style: normal;
}




.btn-blue {
    /*  width: 200px;*/
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    cursor: pointer !important;
    /* margin: 20px;*/
    /* height: 55px;*/
    text-align: center !important;
    border: none !important;
    background-size: 300% 100% !important;
    border-radius: 50px !important;
    moz-transition: all .4s ease-in-out !important;
    -o-transition: all .4s ease-in-out !important;
    -webkit-transition: all .4s ease-in-out !important;
    transition: all .4s ease-in-out !important;
}

    .btn-blue:hover {
        background-position: 100% 0;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

    .btn-blue:focus {
        background-position: 100% 0;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }





    .btn-blue.color-par {
        color: #fff;
        background-color: #0370ba;
        background: linear-gradient(90deg, rgba(0,134,224,1) 0%, rgba(3,112,186,1) 35%, rgba(0,82,137,1) 69%);
        /*background-image: linear-gradient(to right, #0886da, #5ab7f6, #0570ba) !important;
        background-image: linear-gradient(to right, #0370ba, #4481eb, #0370ba, #3f86ed) !important;*/
    }


.bg-none {
    background-color: rgba(250, 250, 250, 0.5) !important;
}


.bg-noneAll {
    background-color: rgba(250, 250, 250, 0) !important;
}




.bg-transparent {
    background-color: rgba(250, 250, 250, 0) !important;
}



/*SELECT STYLED*/


select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*padding: .5em !important;*/
    /* background: #f9f9f9; */
    border-radius: 4px;
    padding: .5em 2em .5em .5em !important;
    border-width: 2px;
    font-size: 1em;
    border-color: #efefef;
}

.select-par {
    color: #6C7C94 !important
}

.select-container {
    position: relative !important;
    display: inline !important;
}

    .select-container::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute !important;
        pointer-events: none;
    }

    .select-container::after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        top: 1em;
        right: .75em;
        border-top: 8px solid #0370ba;
        opacity: 1;
    }

select::-ms-expand {
    display: none;
}


/*

#itemsReqTable > tbody tr:hover {
    background-color: rgba(176,255,173, .5);
}*/


#searchItemsReqTable tr.selected {
    background-color: rgba(176,255,173, .5);
}


tr.selected {
    background-color: rgba(176,255,173, .5);
}


input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}


/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


.bg-danger-scanning {
    background: #EC4433 !important;
    color: #FFF;
    opacity: 1;
    animation: fade 1.5s infinite;
}


@keyframes fade {
    0%,100% {
        opacity: .60
    }

    50% {
        opacity: 1
    }
}

.text-bold {
    font-weight: 800 !important;
}

#searchItemsQS td:nth-child(4) {
    display: none !important;
}

#searchItemsQS td:nth-child(3) {
    display: none !important;
}

#tableForLocateItemULITbody td:nth-child(5) {
    display: none !important;
}

#tableForLocateItemULITbody td:nth-child(4) {
    display: none !important;
}

#searchItemsLocationTableULI td:nth-child(4) {
    display: none !important;
}

#searchItemsLocationTableULI td:nth-child(3) {
    display: none !important;
}

#searchItemsLocationTableULI td:nth-child(5) {
    display: none !important;
}

#searchItemsLocationULITbody td:nth-child(5) {
    display: none !important;
}

#searchItemsLocationTableULI td:nth-child(6) {
    display: none !important;
}


#searchItemsLocationTableULI td:nth-child(7) {
    display: none !important;
}





#reviewReq td:nth-child(6) {
    display: none !important;
}

#reviewRec td:nth-child(5) {
    display: none !important;
}

#reviewRec td:nth-child(6) {
    display: none !important;
}


#reviewRec td:nth-child(7) {
    display: none !important;
}


#reviewRecScans td:nth-child(5) {
    display: none !important;
}

#reviewRecScans td:nth-child(6) {
    display: none !important;
}


#reviewRecScans td:nth-child(7) {
    display: none !important;
}

#searchItemsReqTable td:nth-child(13),
#searchItemsReqTable td:nth-child(6),
#searchItemsReqTable td:nth-child(7),
#searchItemsReqTable td:nth-child(8),
#searchItemsReqTable td:nth-child(8),
#searchItemsReqTable td:nth-child(9),
#searchItemsReqTable td:nth-child(10),
#searchItemsReqTable td:nth-child(11),
#searchItemsReqTable td:nth-child(12) {
    display: none !important;
}


#searchItemsRSTable td:nth-child(4) {
    display: none !important;
}

/*
#searchItemsRSTable th.scaleAddressesRS {
    display: none !important;
}*/





#searchItemsRSTable td:nth-child(5) {
    display: none !important;
}



#searchItemsRSTable td:nth-child(6) {
    display: none !important;
}

#searchItemsRSTable td:nth-child(7) {
    display: none !important;
}



#searchItemsMBTable td:nth-child(4) {
    display: none !important;
}

#reviewRSBody td:nth-child(1) {
    font-weight: 600;
}



#searchItemsMBTable td:nth-child(5) {
    display: none !important;
}

#searchItemsMBTable td:nth-child(6) {
    display: none !important;
}

#searchItemsRecTable td:nth-child(6) {
    display: none !important;
}

#searchItemsRecTable td:nth-child(7) {
    display: none !important;
}

#searchItemsRecTable td:nth-child(8) {
    display: none !important;
}

#searchItemsRecTable td:nth-child(9) {
    display: none !important;
}

#searchItemsRecTable td:nth-child(10) {
    display: none !important;
}


/*

#manuData {
    counter-reset: rowNumber;
}

    #manuData tr::before {
        display: table-cell;
        counter-increment: rowNumber;
        content: counter(rowNumber) ".";
        padding-right: 1em;
        text-align: left;
        font-size: 20px;
        padding-bottom: .5em;
        padding-top: .5em;
    
    }
    */


.fs-18 {
    font-size: 16.5px !important;
    font-weight: 600 !important;
}

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


.table-striped, tr, td {
    border: 0px none rgb(0, 0, 0) !important;
}



.bottom25 {
    padding-bottom: 20px;
}

.notop {
    top: 0px !important;
}

.heightAdded {
    height: 70px !important;
}

.no-bottom-top-border {
    border-top: transparent !important;
    border-bottom: transparent !important;
}

.no-bottom-border {
    border-bottom: #fff !important;
}

.background-dialog {
    background: rgba(0,0,0,0.75) !important;
}

.orange-gradient {
    color: #ffffff !important;
    background-color: #FF5722;
    background-image: linear-gradient(19deg, #FF5722 0%, #FF9800 100%) !important;
    border: transparent;
}

    .orange-gradient:hover {
        color: #ffffff !important;
        background-color: #FF5722;
        background-image: linear-gradient(19deg, #FF9800 0%, #FF5722 100%) !important;
        border: transparent;
    }



.blue-gradient {
    color: #ffffff !important;
    background-color: #0370ba;
    background-image: linear-gradient(19deg, #0370ba 0%, #005289 100%) !important;
    border: transparent;
}

    .blue-gradient:hover {
        color: #ffffff !important;
        background-color: #0370ba;
        background-image: linear-gradient(50deg, #0370ba 0%, #005289 100%) !important;
        border: transparent;
    }

.green-gradient {
    color: #ffffff !important;
    background-color: #289c45 !important;
    background-image: linear-gradient(137.13deg, #29a044 0%, #31b779 100%) !important;
    border: transparent;
}

    .green-gradient:hover {
        color: #ffffff !important;
        background-color: #289c45;
        background-image: linear-gradient(30deg, 0%, #0bab64 #289c4550%);
        border: transparent;
    }



.red-gradient {
    color: #ffffff !important;
    border: transparent;
    background-color: #EC4433;
    background-image: linear-gradient(147deg, #f85032 0%, #EC4433 50%);
}

    .red-gradient:hover {
        color: #ffffff !important;
        border: transparent;
        background-color: #EC4433;
        background-image: linear-gradient(100deg, #f85032 0%, #EC4433 50%);
    }


.gray-gradient {
    color: #ffffff !important;
    border: transparent;
    background-color: #6c7c94;
    background-image: linear-gradient(170deg, #778d9e 0%, #6c7c94 100%);
}



/*BTN X-LARGE*/


.btn-xl {
    height: 68px;
    padding: 3px 34px;
    font-size: 18px;
    margin-bottom: 10px;
}





.text-16 {
    font-size: 16px !important;
}




.bl-danger {
    border-left: 5px solid #EC4433 !important;
}

.bl-primary {
    border-left: 5px solid #0370ba !important;
}

.bl-warning {
    border-left: 5px solid #FE9500;
}

.bl-success {
    border-left: 5px solid #28a745 !important;
}

.table-bottom-border {
    border-bottom: 1px solid #f1f1f1 !important;
}

.text-table {
    font-size: 14px !important;
}

.shown.bl-secondary {
    border-left: 5px solid #6C7C94 !important;
    border-spacing: 5px !important;
}



.bl-table {
    border-left: 5px solid #6C7C94 !important;
    border-bottom: solid 20px #fff !important;
    background: #f6f6f6;
}

.bl-danger-table {
    border-left: 5px solid #EC4433 !important;
    border-bottom: solid 20px #fff !important;
}

.bl-table-gray {
    border-left: 5px solid #6C7C94 !important;
    border-bottom: solid 20px #fff !important;
}

.bl-success-table {
    border-left: 5px solid #28a745 !important;
    border-bottom: solid 20px #fff !important;
}

.bl-gray {
    border-left: 5px solid #6C7C94 !important;
}



.height-50 {
    height: 50px !important;
}


.rel-icon {
    position: relative !important;
}



.h-65 {
    height: 65vh !important;
}



input[type="radio"],
input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
    width: 17px !important;
    height: 17px !important;
    margin: 0px 0 0 3px;
    border-color: #e1e1e1 !important;
}


.table-striped tbody tr:nth-of-type(even) {
    background-color: #f9f9f9 !important;
}


.h-90-dynamic {
    height: calc(75vh);
}

.h-80 {
    height: 80vh !important
}



.h-70 {
    height: 70vh !important
}







.nav-tabs-alt .nav-item.show .nav-link, .nav-tabs-alt .nav-link.active {
    background-color: transparent;
    border-color: #fff;
    box-shadow: inset 0 -2px #fff;
}

.nav-tabs {
    border-bottom: 1px solid #fff !important;
}

.nav-link.active > span.text-danger {
    color: #EC4433 !important;
}



.nav-link.active > span.text-white {
    color: #FFF !important;
}

.nav-link.active > span {
    color: #29a044 !important;
}


.nav-link > span {
    color: #6c7c94 !important;
}

    .nav-link > span.text-danger {
        color: #EC4433 !important;
    }

    .nav-link > span.text-white {
        color: #fff !important;
    }

.opacity-3 {
    opacity: .3 !important;
}



.opacity-25 {
    opacity: 25% !important;
}



.form-wizard-section .button-item.completedWiz strong {
    background: #289c45;
    color: #fff;
}

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


.text-19 {
    font-size: 19px !important;
}

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


.text-20 {
    font-size: 20px !important;
}

.text-17 {
    font-size: 17px !important;
}


.bg-lightgray {
    background: #E1E1E1 !important;
    color: #FFF;
}



#fullscreenLoad.fullscreenLoader {
    z-index: 9999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff !important;
}


.text-min {
    font-weight: 100 !important;
}


.p-25-circle {
    padding-left: 25px !important;
    padding-right: 25px !important;
}


fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

/* GRID */

.twelve {
    width: 100%;
}

.eleven {
    width: 91.53%;
}

.ten {
    width: 83.06%;
}

.nine {
    width: 74.6%;
}

.eight {
    width: 66.13%;
}

.seven {
    width: 57.66%;
}

.six {
    width: 49.2%;
}

.five {
    width: 40.73%;
}

.four {
    width: 32.26%;
}

.three {
    width: 23.8%;
}

.two {
    width: 15.33%;
}

.one {
    width: 6.866%;
}

/* COLUMNS */


/* CLEARFIX */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

.wrapper {
    width: 100%;
    margin: 30px 0;
}

/* STEPS */

.steps {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    text-align: center;
}


    .steps li {
        display: inline-block;
        margin: 20px;
        color: #ccc;
        padding-bottom: 5px;
    }

        .steps li.is-active {
            border-bottom: 1px solid #0370ba;
            color: #0370ba;
        }

/* FORM */

.form-wrapper .section {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    text-align: center;
    position: absolute;
    width: 80vw !important;
    min-height: 200px;
}

.firstTabRW {
    width: 380px !important;
}

.form-wrapper .section h3 {
    margin-bottom: 30px;
}

.form-wrapper .section.is-active {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

.form-wrapper .buttonForm, .form-wrapper .submit {
    background-color: #0370ba;
    padding: 8px 30px;
    color: #fff;
    cursor: pointer;
    font-size: 14px !important;
    position: absolute;
    right: 20px;
    bottom: 0px;
}

.form-wrapper .prevButton {
    font-size: 14px !important;
    position: absolute;
    left: 20px;
    bottom: 0px;
}

.form-wrapper .btnFinishRW {
    font-size: 14px !important;
    right: 20px;
    bottom: 0px;
}

.form-wrapper .submit {
    border: none;
    outline: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


.form-wrapper input[type="radio"] {
    display: none;
}

    .form-wrapper input[type="radio"] + label {
        display: block;
        border: 1px solid #ccc;
        width: 100%;
        max-width: 100%;
        padding: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
        position: relative;
    }

        .form-wrapper input[type="radio"] + label:before {
            content: "?";
            position: absolute;
            right: -10px;
            top: -10px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 100%;
            background-color: #0370ba;
            color: #fff;
            display: none;
        }

    .form-wrapper input[type="radio"]:checked + label:before {
        display: block;
    }

    .form-wrapper input[type="radio"] + label h4 {
        margin: 15px;
        color: #ccc;
    }

    .form-wrapper input[type="radio"]:checked + label {
        border: 1px solid #0370ba;
    }

        .form-wrapper input[type="radio"]:checked + label h4 {
            color: #0370ba;
        }





/*Form FOR Ref Weight Function*/

.form-wrapperRW .sectionRW {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    text-align: center;
    position: absolute;
    width: 95vw !important;
    min-height: 200px;
    height: 70vh;
}

.firstTabRW {
    width: 380px !important;
}

.form-wrapperRW .sectionRW h3 {
    margin-bottom: 30px;
}

.form-wrapperRW .sectionRW.is-active {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

.form-wrapperRW .buttonFormRW, .form-wrapperRW .submit {
    background-color: #0370ba;
    padding: 8px 30px;
    color: #fff;
    cursor: pointer;
    font-size: 14px !important;
    position: absolute;
    right: 20px;
    bottom: 0px;
}

.form-wrapperRW .prevButton {
    font-size: 14px !important;
    position: absolute;
    left: 20px;
    bottom: 0px;
}

.form-wrapperRW .btnFinishRefWeight {
    font-size: 14px !important;
    right: 20px;
    bottom: 0px;
}

.form-wrapperRW .submit {
    border: none;
    outline: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}



.form-wrapperRW input[type="radio"] {
    display: none;
}

    .form-wrapperRW input[type="radio"] + label {
        display: block;
        border: 1px solid #ccc;
        width: 100%;
        max-width: 100%;
        padding: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
        position: relative;
    }

        .form-wrapperRW input[type="radio"] + label:before {
            content: "?";
            position: absolute;
            right: -10px;
            top: -10px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 100%;
            background-color: #0370ba;
            color: #fff;
            display: none;
        }

    .form-wrapperRW input[type="radio"]:checked + label:before {
        display: block;
    }

    .form-wrapperRW input[type="radio"] + label h4 {
        margin: 15px;
        color: #ccc;
    }

    .form-wrapperRW input[type="radio"]:checked + label {
        border: 1px solid #0370ba;
    }

        .form-wrapperRW input[type="radio"]:checked + label h4 {
            color: #0370ba;
        }




.dialogbox .modal-dialog .modal-content .modal-bodyRW {
    padding: 0 20px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 15px;
    min-height: 200px;
    overflow: auto;
}


.w-setRW {
    border-radius: 0px !important;
    max-width: 400px !important;
}

.text-13 {
    font-size: 13px !important;
}

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

.text-15 {
    font-size: 15px !important;
}


.quotes {
    display: none;
}

.loaderPreload {
    display: none;
}

.quotesULI {
    display: none;
}

.quotesRW {
    display: none;
}

#deleteScaleConfirm {
    z-index: 99999 !important;
}




ul.none-border.listview.image-listview {
    border-top: none !important;
    border-bottom: none !important;
}



.image-listviewXS > li .item .icon-box {
    min-width: 30px !important;
    max-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1em;
    font-size: 20px;
    border-radius: 400px;
    margin-right: 16px;
}


.text-15 {
    font-size: 15px !important
}


.font-weight-500 {
    font-weight: 500 !important;
}

.font-weight-300 {
    font-weight: 300 !important;
}




#bottomflat {
    color: #005289;
    /*a white-transparent gradient above black base, making it a white-black gradient*/
    background-color: #0370ba;
    background-image: linear-gradient(#0370ba, rgba(3, 112, 186, 0));
    animation: bottomflat 2s infinite alternate;
}

@keyframes bottomflat {
    100% {
        background-color: #02436f;
    }
}


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

.text-10 {
    font-size: 10px !important;
    color: #6C7C94;
}

.text-11 {
    font-size: 11px !important;
}


.text-13 {
    font-size: 13px !important;
}


select:focus {
    /* border: none !important; */
    /* border-color: #e9e9e9 !important; */
    outline: none !important;
}

.error-shown {
    box-shadow: 0 0 5px #da0b0b;
}



.border-glow {
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}



.border-glow-success {
    outline: none;
    border-color: #34C759;
    box-shadow: 0 0 10px #95d7a6;
}

.border-glow-danger {
    outline: none;
    border-color: #ee3131;
    box-shadow: 0 0 10px #ffb3b3;
}


.border-glow-danger2 {
    outline: none;
    box-shadow: 0 0 10px #ffb3b3;
}

.glow-danger {
    outline: none;
    box-shadow: 0 0 10px #ffb3b3;
}

.text-lightgray {
    color: #adadad;
}



.header-lightgray {
    background-color: #f7f7f8;
    box-shadow: none !important;
}


.spinner-border-small {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
}

.spinner-border-xsmall {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: .15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
}


.spinner-border-xsmall-bold {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: .18em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
}



/*ADD BACKGROUND BEHIND TARE BINS LI LIST*/
#binListViewTB li.multi-level:nth-child(odd) {
    background: #fcfcfc;
}




#stripedUl li:nth-child(odd) {
    background: #fcfcfc;
}



/*test*/
.highlight {
    background-color: #e0eef7 !important;
}


.listview > .headerTB:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #fff !important;
}



.circle {
    width: 50px;
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: top;
}

    .circle strong {
        position: absolute;
        top: 15px;
        left: 0;
        width: 100%;
        text-align: center;
        line-height: 22.5px;
        font-size: 15px;
    }



.circleQS {
    width: 50px;
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: top;
}

    .circleQS strong {
        position: absolute;
        top: 15px;
        left: 0;
        width: 100%;
        text-align: center;
        line-height: 22.5px;
        font-size: 15px;
    }


.hide-element {
    visibility: hidden !important;
    opacity: 0;
    transition: visibility 0s .5s, opacity .5s linear;
}



.hide-element-space {
    visibility: hidden;
}


.show-element {
    visibility: visible !important;
    opacity: 1;
    transition: visibility 0s .5s, opacity .5s linear;
}





.text-small-bold {
    font-weight: 800 !important;
    font-size: 12px !important;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.movedList {
    background-color: #dbecfa !important;
}



.dragItemBP {
    padding-top: 7px !important;
    vertical-align: middle !Important;
    min-height: 30px !important;
    min-width: 40px !important;
    text-align: right;
    padding-right: 10px;
    padding-left: 10px !important;
}

.dragItemMenu {
    padding-top: 7px !important;
    vertical-align: middle !Important;
    min-height: 30px !important;
    min-width: 40px !important;
    text-align: right;
    padding-right: 10px;
    padding-left: 10px !important;
}

.removeElementBPIcon {
    padding-top: 7px !important;
    vertical-align: middle !Important;
    min-height: 30px !important;
    min-width: 40px !important;
    text-align: right;
    padding-right: 10px;
    padding-left: 10px !important;
}

.lds-grid {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-grid div {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #0370ba;
        animation: lds-grid 1.2s linear infinite;
    }

        .lds-grid div:nth-child(1) {
            top: 8px;
            left: 8px;
            animation-delay: 0s;
        }

        .lds-grid div:nth-child(2) {
            top: 8px;
            left: 32px;
            animation-delay: -0.4s;
        }

        .lds-grid div:nth-child(3) {
            top: 8px;
            left: 56px;
            animation-delay: -0.8s;
        }

        .lds-grid div:nth-child(4) {
            top: 32px;
            left: 8px;
            animation-delay: -0.4s;
        }

        .lds-grid div:nth-child(5) {
            top: 32px;
            left: 32px;
            animation-delay: -0.8s;
        }

        .lds-grid div:nth-child(6) {
            top: 32px;
            left: 56px;
            animation-delay: -1.2s;
        }

        .lds-grid div:nth-child(7) {
            top: 56px;
            left: 8px;
            animation-delay: -0.8s;
        }

        .lds-grid div:nth-child(8) {
            top: 56px;
            left: 32px;
            animation-delay: -1.2s;
        }

        .lds-grid div:nth-child(9) {
            top: 56px;
            left: 56px;
            animation-delay: -1.6s;
        }

@keyframes lds-grid {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}










.loaderLoc {
    width: 48px;
    height: 48px;
    display: block;
    margin: 20px auto;
    box-sizing: border-box;
    position: relative;
}

    .loaderLoc::after {
        content: '';
        box-sizing: border-box;
        width: 48px;
        height: 48px;
        left: 0;
        bottom: 0;
        position: absolute;
        border-radius: 50% 50% 0;
        border: 15px solid #0370ba;
        transform: rotate(45deg) translate(0, 0);
        box-sizing: border-box;
        animation: animMarker 0.4s ease-in-out infinite alternate;
    }

    .loaderLoc::before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 150%;
        width: 24px;
        height: 4px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.2);
        animation: animShadow 0.4s ease-in-out infinite alternate;
    }

@keyframes animMarker {
    0% {
        transform: rotate(45deg) translate(5px, 5px);
    }

    100% {
        transform: rotate(45deg) translate(-5px, -5px);
    }
}

@keyframes animShadow {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}



.loaderSearch {
    width: 48px;
    height: 48px;
    display: block;
    margin: 20px auto;
    position: relative;
    border: 4px solid #0370ba;
    border-radius: 50%;
    box-sizing: border-box;
    animation: animloaderSearch 2s linear infinite;
}

    .loaderSearch::after {
        content: '';
        box-sizing: border-box;
        width: 6px;
        height: 24px;
        background: #0370ba;
        transform: rotate(-45deg);
        position: absolute;
        bottom: -18px;
        left: 42px;
    }

@keyframes animloaderSearch {
    0% {
        transform: translate(-10px, -10px);
    }

    25% {
        transform: translate(-10px, 10px);
    }

    50% {
        transform: translate(10px, 10px);
    }

    75% {
        transform: translate(10px, -10px);
    }

    100% {
        transform: translate(-10px, -10px);
    }
}
/*



.loaderSearch {
    width: 48px;
    height: 48px;
    display: block;
    margin: 20px auto;
    position: relative;
    border: 4px solid #0370ba;
    border-radius: 50%;
    box-sizing: border-box;
    animation: animloader 2s linear infinite;
}

    .loaderSearch::after {
        content: '';
        box-sizing: border-box;
        width: 6px;
        height: 24px;
        background: #0370ba;
        transform: rotate(-45deg);
        position: absolute;
        bottom: -20px;
        left: 46px;
    }

@keyframes animloader {
    0% {
        transform: translate(-10px, -10px);
    }

    25% {
        transform: translate(-10px, 10px);
    }

    50% {
        transform: translate(10px, 10px);
    }

    75% {
        transform: translate(10px, -10px);
    }

    100% {
        transform: translate(-10px, -10px);
    }
}


    */

.form-control-glow {
    color: #495057 !important;
    background-color: #fff;
    border-color: #80bdff !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25) !important;
}

.btn-remove-color {
    background: rgb(252, 227, 225) !important;
    border-color: transparent !important;
    color: #EC4433 !important;
}

.btn-done-color {
    background: #DDF1FF !important;
    border-color: transparent !important;
    color: #004A98 !important;
}


.btn-done-color-text {
    /*  background: rgb(221, 234, 255) !important;*/
    border-color: transparent !important;
    color: #0370ba !important;
}


a.text-danger {
    color: #a71d2a !important;
}



.list-group-item-bp {
    padding: 10px !important;
}



.dangerIconGif {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.ui-success,
.ui-error {
    width: 50px;
    height: 50px;
}

.ui-success-circle {
    stroke-dasharray: 260.75219025px, 260.75219025px;
    stroke-dashoffset: 260.75219025px;
    transform: rotate(220deg);
    transform-origin: center center;
    stroke-linecap: round;
    animation: ani-success-circle 1s ease-in both;
}

.ui-success-path {
    stroke-dasharray: 60px 64px;
    stroke-dashoffset: 62px;
    stroke-linecap: round;
    animation: ani-success-path 0.4s 1s ease-in both;
}

@keyframes ani-success-circle {
    to {
        stroke-dashoffset: 782.25657074px;
    }
}

@keyframes ani-success-path {
    0% {
        stroke-dashoffset: 62px;
    }

    65% {
        stroke-dashoffset: -5px;
    }

    84% {
        stroke-dashoffset: 4px;
    }

    100% {
        stroke-dashoffset: -2px;
    }
}

.ui-error-circle {
    stroke-dasharray: 260.75219025px, 260.75219025px;
    stroke-dashoffset: 260.75219025px;
    animation: ani-error-circle 1.2s linear;
}

.ui-error-line1 {
    stroke-dasharray: 54px 55px;
    stroke-dashoffset: 55px;
    stroke-linecap: round;
    animation: ani-error-line 0.15s 1.2s linear both;
}

.ui-error-line2 {
    stroke-dasharray: 54px 55px;
    stroke-dashoffset: 55px;
    stroke-linecap: round;
    animation: ani-error-line 0.2s 0.9s linear both;
}

@keyframes ani-error-line {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes ani-error-circle {
    0% {
        stroke-dasharray: 0, 260.75219025px;
        stroke-dashoffset: 0;
    }

    35% {
        stroke-dasharray: 120px, 120px;
        stroke-dashoffset: -120px;
    }

    70% {
        stroke-dasharray: 0, 260.75219025px;
        stroke-dashoffset: -260.75219025px;
    }

    100% {
        stroke-dasharray: 260.75219025px, 0;
        stroke-dashoffset: -260.75219025px;
    }
}



#searchItemsBP td:nth-child(4) {
    display: none !important;
}

#searchItemsBP td:nth-child(5) {
    display: none !important;
}


#searchItemsBP td:nth-child(6) {
    display: none !important;
}




.table th, .table td.center-align {
    vertical-align: unset !important;
}


.text-yellow {
    color: #ead119;
}




.fa-Requisition:before {
    content: "\f01e";
    font-family: 'Font Awesome 5 Free';
}



.fa-Reconciliation:before {
    content: "\f162";
    font-family: 'Font Awesome 5 Free';
}



.fa-RegisterScales:before {
    content: "\f0fe";
    font-family: 'Font Awesome 5 Free';
}


.fa-ReferenceWeights:before {
    content: "\f24e";
    font-family: 'Font Awesome 5 Free';
}


.fa-TasksMenu:before {
    content: "\f0ae";
    font-family: 'Font Awesome 5 Free';
}




.fa-LocateItem:before {
    content: "\f689";
    font-family: 'Font Awesome 5 Free';
}



.fa-ManufacturerBarcodes:before {
    content: "\f02a";
    font-family: 'Font Awesome 5 Free';
}

.fa-BinPositions:before {
    content: "\f009";
    font-family: 'Font Awesome 5 Free';
}


.fa-TareBins:before {
    content: "\f146";
    font-family: 'Font Awesome 5 Free';
}


.fa-UpdateLocationItem:before {
    content: "\f14e";
    font-family: 'Font Awesome 5 Free';
}


.fa-ReceiveOrder:before {
    content: "\f05a";
    font-family: 'Font Awesome 5 Free';
}

.fa-QuickRegistration:before {
    content: "\f7d9";
    font-family: 'Font Awesome 5 Free';
}


.fa-CloudRouters:before {
    content: "\f1eb";
    font-family: 'Font Awesome 5 Free';
}


.fa-PatientCharging:before {
    content: "\f80d";
    font-family: 'Font Awesome 5 Free';
}


.h-card {
    height: 82px !important;
}


@media only screen and (min-device-width: 320px) and (max-device-width: 395px) and (-webkit-min-device-pixel-ratio: 2) {
    .padding-size {
        padding-top: 8px !important;
        height: 82px !important;
    }
}



@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    .padding-size {
        height: 82px !important;
    }
}


.padding-set {
    height: 70px !important;
    padding-top: 8px !important;
}




.video-top {
    background: rgba(0,0,0,.3);
    position: fixed !important;
    z-index: 99999 !important;
    width: 100% !important;
    top: 0px !important;
}

.bg-whit-t {
    background-color: rgba(255, 255, 255, 0.2) !important
}


@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3) {
    .padding-size {
        padding-top: 8px !important;
    }
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    .padding-size {
        padding-top: 8px !important;
    }
}



.noscan-menu {
    padding-top: 23px !important;
    height: 82px !important;
}


@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    .scanRequiredMenu {
        padding-top: 8px !important;
        height: 82px !important;
    }
}


@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    .scanRequiredMenu {
        padding-top: 8px !important;
        height: 82px !important;
    }
}

@media (min-width: 455px) {
    .scanRequiredMenu {
        padding-top: 23px !important;
        height: 82px !important;
    }
}


@media only screen and (min-device-width: 455px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
    .scanRequiredMenu {
        padding-top: 23px !important;
        height: 82px !important;
    }
}


@media only screen and (min-device-width: 0px) and (max-device-width: 455px) and (-webkit-min-device-pixel-ratio: 2) {
    .scanRequiredMenu {
        padding-top: 8px !important;
        height: 82px !important;
    }
}



.z-99 {
    z-index: 99 !important;
}

.z-999 {
    z-index: 999 !important;
}

.z-100 {
    z-index: 9999 !important;
}




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


.findLocationIdByNameRO {
    font-size: 14px !important
}





.loaderLoc-sm::after {
    content: '';
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    left: 0;
    bottom: 0;
    position: absolute;
    border-radius: 50% 50% 0;
    border: 12px solid #0370ba;
    transform: rotate( 45deg ) translate(0, 0);
    box-sizing: border-box;
    animation: animMarker 0.4s ease-in-out infinite alternate;
}

.loaderLoc-sm::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 150%;
    width: 24px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    animation: animShadow 0.4s ease-in-out infinite alternate;
}

.loaderLoc-sm {
    width: 38px;
    height: 38px;
    display: block;
    margin: 20px auto;
    box-sizing: border-box;
    position: relative;
}




/*WIFI LOADER CSS*/
.wifi-loader {
    --background: #62ABFF;
    --front-color: #0370ba;
    --back-color: #e4e4e4;
    --text-color: #414856;
    /*width: 64px;
    height: 64px;*/
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}




.wifi-loader-soft {
    --background: #ffffff;
    --front-color: #e0e0e0 !important;
    --back-color: #ffffff !important;
    --text-color: #0370ba !important;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wifi-loader-soft-green {
    --background: #ffffff;
    --front-color: #64b777 !important;
    --back-color: #ffffff !important;
    --text-color: #0370ba !important;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}


.wifi-loader svg {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .wifi-loader svg circle {
        position: absolute;
        fill: none;
        stroke-width: 6px;
        stroke-linecap: round;
        stroke-linejoin: round;
        transform: rotate(-100deg);
        transform-origin: center;
    }

        .wifi-loader svg circle.back {
            stroke: var(--back-color);
        }

        .wifi-loader svg circle.front {
            stroke: var(--front-color);
        }

    .wifi-loader svg.circle-outer {
        height: 86px;
        width: 86px;
    }

    .wifi-loader svg.circle-outer-sm {
        height: 43px;
        width: 43px;
    }

        .wifi-loader svg.circle-outer circle {
            stroke-dasharray: 62.75 188.25;
        }

            .wifi-loader svg.circle-outer circle.back {
                -webkit-animation: circle-outer 1.8s ease infinite 0.3s;
                animation: circle-outer 1.8s ease infinite 0.3s;
            }

            .wifi-loader svg.circle-outer circle.front {
                -webkit-animation: circle-outer 1.8s ease infinite 0.15s;
                animation: circle-outer 1.8s ease infinite 0.15s;
            }

    .wifi-loader svg.circle-middle {
        height: 60px;
        width: 60px;
    }

    .wifi-loader svg.circle-middle-sm {
        height: 30px;
        width: 30px;
    }

        .wifi-loader svg.circle-middle circle {
            stroke-dasharray: 42.5 127.5;
        }

            .wifi-loader svg.circle-middle circle.back {
                -webkit-animation: circle-middle 1.8s ease infinite 0.25s;
                animation: circle-middle 1.8s ease infinite 0.25s;
            }

            .wifi-loader svg.circle-middle circle.front {
                -webkit-animation: circle-middle 1.8s ease infinite 0.1s;
                animation: circle-middle 1.8s ease infinite 0.1s;
            }

    .wifi-loader svg.circle-inner {
        height: 34px;
        width: 34px;
    }

    .wifi-loader svg.circle-inner-sm {
        height: 17px;
        width: 17px;
    }

        .wifi-loader svg.circle-inner circle {
            stroke-dasharray: 22 66;
        }

            .wifi-loader svg.circle-inner circle.back {
                -webkit-animation: circle-inner 1.8s ease infinite 0.2s;
                animation: circle-inner 1.8s ease infinite 0.2s;
            }

            .wifi-loader svg.circle-inner circle.front {
                -webkit-animation: circle-inner 1.8s ease infinite 0.05s;
                animation: circle-inner 1.8s ease infinite 0.05s;
            }

.wifi-loader .text {
    position: absolute;
    bottom: -70px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-transform: lowercase; */
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2px;
}

    .wifi-loader .text::before, .wifi-loader .text::after {
        content: attr(data-text);
    }

    .wifi-loader .text::before {
        color: var(--text-color);
    }

    .wifi-loader .text::after {
        color: var(--front-color);
        -webkit-animation: text-animation 3.6s ease infinite;
        animation: text-animation 3.6s ease infinite;
        position: absolute;
        left: 0;
    }

@-webkit-keyframes circle-outer {
    0% {
        stroke-dashoffset: 25;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 301;
    }

    80% {
        stroke-dashoffset: 276;
    }

    100% {
        stroke-dashoffset: 276;
    }
}

@keyframes circle-outer {
    0% {
        stroke-dashoffset: 25;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 301;
    }

    80% {
        stroke-dashoffset: 276;
    }

    100% {
        stroke-dashoffset: 276;
    }
}

@-webkit-keyframes circle-middle {
    0% {
        stroke-dashoffset: 17;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 204;
    }

    80% {
        stroke-dashoffset: 187;
    }

    100% {
        stroke-dashoffset: 187;
    }
}

@keyframes circle-middle {
    0% {
        stroke-dashoffset: 17;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 204;
    }

    80% {
        stroke-dashoffset: 187;
    }

    100% {
        stroke-dashoffset: 187;
    }
}

@-webkit-keyframes circle-inner {
    0% {
        stroke-dashoffset: 9;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 106;
    }

    80% {
        stroke-dashoffset: 97;
    }

    100% {
        stroke-dashoffset: 97;
    }
}

@keyframes circle-inner {
    0% {
        stroke-dashoffset: 9;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 106;
    }

    80% {
        stroke-dashoffset: 97;
    }

    100% {
        stroke-dashoffset: 97;
    }
}

@-webkit-keyframes text-animation {
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }

    50% {
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
    }

    100% {
        -webkit-clip-path: inset(0 0 0 100%);
        clip-path: inset(0 0 0 100%);
    }
}

@keyframes text-animation {
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }

    50% {
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
    }

    100% {
        -webkit-clip-path: inset(0 0 0 100%);
        clip-path: inset(0 0 0 100%);
    }
}






/*LOADER*/



.pin {
    z-index: 5000;
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #0370ba;
    position: absolute;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    /* -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    -ms-animation-name: bounce;
    animation-name: bounce;*/
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    /* -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    -ms-animation-duration: 1s;
    animation-duration: 1s;*/
}

    .pin:after {
        content: '';
        width: 14px;
        height: 14px;
        margin: 8px 0 0 8px;
        background: #ffffff;
        position: absolute;
        border-radius: 50%;
    }

.pulse {
    z-index: 5000;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    height: 14px;
    width: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 11px 0px 0px -12px;
    -webkit-transform: rotateX(55deg);
    -moz-transform: rotateX(55deg);
    -o-transform: rotateX(55deg);
    -ms-transform: rotateX(55deg);
    transform: rotateX(55deg);
}

    .pulse:after {
        content: "";
        border-radius: 50%;
        height: 40px;
        width: 40px;
        position: absolute;
        margin: -13px 0 0 -13px;
        -webkit-animation: pulsate 1s ease-out;
        -moz-animation: pulsate 1s ease-out;
        -o-animation: pulsate 1s ease-out;
        -ms-animation: pulsate 1s ease-out;
        animation: pulsate 1s ease-out;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-box-shadow: 0 0 1px 2px #0370BA;
        box-shadow: 0 0 1px 2px #0370BA;
        -webkit-animation-delay: .5s;
        -moz-animation-delay: .5s;
        -o-animation-delay: .5s;
        -ms-animation-delay: .5s;
        animation-delay: .5s;
    }

@-moz-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        -moz-transform: scale(0.1, 0.1);
        -o-transform: scale(0.1, 0.1);
        -ms-transform: scale(0.1, 0.1);
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }

    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        -moz-transform: scale(0.1, 0.1);
        -o-transform: scale(0.1, 0.1);
        -ms-transform: scale(0.1, 0.1);
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }

    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}

@-o-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        -moz-transform: scale(0.1, 0.1);
        -o-transform: scale(0.1, 0.1);
        -ms-transform: scale(0.1, 0.1);
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }

    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}

@keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        -moz-transform: scale(0.1, 0.1);
        -o-transform: scale(0.1, 0.1);
        -ms-transform: scale(0.1, 0.1);
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }

    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}

@-moz-keyframes bounce {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: translateY(-2000px) rotate(-45deg);
        -moz-transform: translateY(-2000px) rotate(-45deg);
        -o-transform: translateY(-2000px) rotate(-45deg);
        -ms-transform: translateY(-2000px) rotate(-45deg);
        transform: translateY(-2000px) rotate(-45deg);
    }

    60% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(30px) rotate(-45deg);
        -moz-transform: translateY(30px) rotate(-45deg);
        -o-transform: translateY(30px) rotate(-45deg);
        -ms-transform: translateY(30px) rotate(-45deg);
        transform: translateY(30px) rotate(-45deg);
    }

    80% {
        -webkit-transform: translateY(-10px) rotate(-45deg);
        -moz-transform: translateY(-10px) rotate(-45deg);
        -o-transform: translateY(-10px) rotate(-45deg);
        -ms-transform: translateY(-10px) rotate(-45deg);
        transform: translateY(-10px) rotate(-45deg);
    }

    100% {
        -webkit-transform: translateY(0) rotate(-45deg);
        -moz-transform: translateY(0) rotate(-45deg);
        -o-transform: translateY(0) rotate(-45deg);
        -ms-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
}

@-webkit-keyframes bounce {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: translateY(-2000px) rotate(-45deg);
        -moz-transform: translateY(-2000px) rotate(-45deg);
        -o-transform: translateY(-2000px) rotate(-45deg);
        -ms-transform: translateY(-2000px) rotate(-45deg);
        transform: translateY(-2000px) rotate(-45deg);
    }

    60% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(30px) rotate(-45deg);
        -moz-transform: translateY(30px) rotate(-45deg);
        -o-transform: translateY(30px) rotate(-45deg);
        -ms-transform: translateY(30px) rotate(-45deg);
        transform: translateY(30px) rotate(-45deg);
    }

    80% {
        -webkit-transform: translateY(-10px) rotate(-45deg);
        -moz-transform: translateY(-10px) rotate(-45deg);
        -o-transform: translateY(-10px) rotate(-45deg);
        -ms-transform: translateY(-10px) rotate(-45deg);
        transform: translateY(-10px) rotate(-45deg);
    }

    100% {
        -webkit-transform: translateY(0) rotate(-45deg);
        -moz-transform: translateY(0) rotate(-45deg);
        -o-transform: translateY(0) rotate(-45deg);
        -ms-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
}

@-o-keyframes bounce {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: translateY(-2000px) rotate(-45deg);
        -moz-transform: translateY(-2000px) rotate(-45deg);
        -o-transform: translateY(-2000px) rotate(-45deg);
        -ms-transform: translateY(-2000px) rotate(-45deg);
        transform: translateY(-2000px) rotate(-45deg);
    }

    60% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(30px) rotate(-45deg);
        -moz-transform: translateY(30px) rotate(-45deg);
        -o-transform: translateY(30px) rotate(-45deg);
        -ms-transform: translateY(30px) rotate(-45deg);
        transform: translateY(30px) rotate(-45deg);
    }

    80% {
        -webkit-transform: translateY(-10px) rotate(-45deg);
        -moz-transform: translateY(-10px) rotate(-45deg);
        -o-transform: translateY(-10px) rotate(-45deg);
        -ms-transform: translateY(-10px) rotate(-45deg);
        transform: translateY(-10px) rotate(-45deg);
    }

    100% {
        -webkit-transform: translateY(0) rotate(-45deg);
        -moz-transform: translateY(0) rotate(-45deg);
        -o-transform: translateY(0) rotate(-45deg);
        -ms-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
}

@keyframes bounce {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: translateY(-2000px) rotate(-45deg);
        -moz-transform: translateY(-2000px) rotate(-45deg);
        -o-transform: translateY(-2000px) rotate(-45deg);
        -ms-transform: translateY(-2000px) rotate(-45deg);
        transform: translateY(-2000px) rotate(-45deg);
    }

    60% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(30px) rotate(-45deg);
        -moz-transform: translateY(30px) rotate(-45deg);
        -o-transform: translateY(30px) rotate(-45deg);
        -ms-transform: translateY(30px) rotate(-45deg);
        transform: translateY(30px) rotate(-45deg);
    }

    80% {
        -webkit-transform: translateY(-10px) rotate(-45deg);
        -moz-transform: translateY(-10px) rotate(-45deg);
        -o-transform: translateY(-10px) rotate(-45deg);
        -ms-transform: translateY(-10px) rotate(-45deg);
        transform: translateY(-10px) rotate(-45deg);
    }

    100% {
        -webkit-transform: translateY(0) rotate(-45deg);
        -moz-transform: translateY(0) rotate(-45deg);
        -o-transform: translateY(0) rotate(-45deg);
        -ms-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
}




.loader-wifi {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    margin: 15px auto;
    position: relative;
    color: #efefef;
    box-sizing: border-box;
    animation: animloaderWifi 2s linear infinite;
}

@keyframes animloaderWifi {
    0% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
    }

    25% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 2px;
    }

    50% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 2px, -38px 0 0 -2px;
    }

    75% {
        box-shadow: 14px 0 0 2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px;
    }

    100% {
        box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
    }
}










:root {
    --spBrand: #0370ba;
    --spBg: #f6f8fb;
    --spCard: #ffffff;
    --spText: #1f2937;
    --spMuted: #60708c;
    --spLine: #e7edf5;
    --spRadius: 14px;
    --spShadow: 0 2px 10px rgba(16,24,40,.08);
    --animation-speed: 2s;
    --primary-colorCR: #fff;
    --secondary-colorCR: #000;
    --background-colorCR: #313131;
    --text-colorCR: #fff;
    /*    Spinner Variables */
    --spinner-sizeCR: 10;
    --line-colorCR: #077512;
    --line-alphaCR: 0.73;
    --ring-colorCR: #ababab;
    --ring-alphaCR: 0.5;
    --ring-sizeCR: 4;
}





.spinnerCR {
    font-size: calc(var(--spinner-sizeCR) * 1em);
    width: .5em;
    height: .5em;
    border-radius: 50%;
}

    .spinnerCR .lineCR {
        fill: none;
        stroke: var(--line-colorCR);
        stroke-width: var(--ring-sizeCR);
        opacity: var(--line-alphaCR);
        stroke-linecap: round;
        transform-origin: 50% 50%;
        transform: rotate3d(0, 0, 1, 0deg);
        animation: 2156ms spinner-arc ease-in-out infinite, 1829ms spinner-rotate linear infinite;
    }

    .spinnerCR .ringCR {
        fill: none;
        stroke: var(--ring-colorCR);
        stroke-width: var(--ring-sizeCR);
        opacity: var(--ring-alphaCR);
    }

@keyframes spinner-rotate {
    to {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

@keyframes spinner-arc {
    from {
        stroke-dasharray: 0 150;
        stroke-dashoffset: 0;
    }

    to {
        stroke-dasharray: 100 150;
        stroke-dashoffset: -140;
    }
}




.background-none {
    background: none !important
}






.zebraInput {
    position: fixed;
    bottom: 0;
    z-index: -1;
    height: 0px !important;
    background-color: transparent !important;
    border: 0px !important;
    color: #fff;
}




.zebraInputModal {
    position: fixed;
    bottom: 0;
    z-index: -1;
    height: 0px !important;
    background-color: transparent !important;
    border: 0px !important;
}





.btn-success-color {
    background: #D1E7DD !important;
    border-color: transparent !important;
    color: #146C43 !important;
}

/* Patient Charging — “Also show” batch list filters (segmented toggle) */
.pc-batch-toolbar {
    /* background: linear-gradient(180deg, rgba(0, 74, 152, 0.055) 0%, rgba(255, 255, 255, 0.92) 100%); */
    /* border: 1px solid rgba(0, 0, 0, 0.07); */
    border-radius: 12px;
    padding: 10px 12px;
    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); */
}

.pc-batch-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
}

.pc-batch-toolbar-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6c757d;
    margin: 0;
    max-width: 100%;
}

.pc-batch-toolbar-hint {
    font-size: 0.75rem;
    color: #868e96;
    margin: 0;
    width: 100%;
    flex-basis: 100%;
    line-height: 1.35;
}

.pc-batch-filter-group {
    flex-shrink: 0;
    border-radius: 10px;
    width: 90%;
    /* overflow: hidden; */
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); */
}

    .pc-batch-filter-group .pc-batch-filter-btn {
        border: 1px solid rgba(0, 0, 0, 0.12);
        background: #fff;
        color: #495057;
        font-weight: 600;
        font-size: 0.8125rem;
        padding: 0.4rem 0.85rem;
        line-height: 1.35;
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .pc-batch-filter-group .pc-batch-filter-btn + .pc-batch-filter-btn {
            margin-left: -1px;
        }

.pc-batch-filter-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 74, 152, 0.28);
    z-index: 2;
    position: relative;
}

.pc-batch-filter-btn--completed[aria-pressed="true"] {
    background: #d1e7dd;
    color: #146c43;
    border-color: #badbcc;
    z-index: 1;
    position: relative;
}

.pc-batch-filter-btn--suspended[aria-pressed="true"] {
    background: #FCE3E1;
    color: #EC4433;
    border-color: #FCE3E1;
    z-index: 1;
    position: relative;
}

.pc-batch-filter-btn--completed[aria-pressed="false"]:hover,
.pc-batch-filter-btn--suspended[aria-pressed="false"]:hover {
    background: #f8f9fa;
    color: #212529;
}

.pc-batch-filter-btn--completed[aria-pressed="true"]:hover {
    background: #c3e6cb;
}

.pc-batch-filter-btn--suspended[aria-pressed="true"]:hover {
    background: #FCE3E1;
    color: #EC4433 !important
}

/* Patient Charging — Other Patients tab: extended search hint */
.pc-other-search-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 20px;
    /* border-radius: 12px; */
    /* background: linear-gradient(145deg, rgba(0, 74, 152, 0.07) 0%, rgba(255, 255, 255, 0.98) 55%, rgba(248, 250, 252, 0.95) 100%); */
    /* border: 1px solid rgba(0, 74, 152, 0.14); */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8); */
}


.pc-other-search-hint__icon {
    flex-shrink: 0;
    color: #004a98;
    font-size: 1.2rem;
    line-height: 1.25;
    padding-top: 2px;
    opacity: 0.92;
}

.pc-other-search-hint__body {
    flex: 1;
    min-width: 0;
}

.pc-other-search-hint__lead {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #004a98;
    margin-bottom: 6px;
}

.pc-other-search-hint__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #495057;
}

.pc-other-search-hint__text strong {
    color: #212529;
    font-weight: 600;
}

.btn-success-process-color {
    background: #289c45 !important;
    border-color: transparent !important;
    color: #289c45 !important;
}

.btn-confirmed-color {
    background-color: #17a2b8;
    color: #fff;
}





/**
 * Extracted from: SweetAlert
 * Modified by: Istiak Tridip
 */
.success-checkmark {
    width: 40px;
    height: 57.5px;
    margin: 0 auto;
}

    .success-checkmark .check-icon {
        width: 40px;
        height: 40px;
        position: relative;
        border-radius: 50%;
        box-sizing: content-box;
        border: 2px solid #4CAF50;
    }

        .success-checkmark .check-icon::before {
            top: 1.5px;
            left: -1px;
            width: 15px;
            transform-origin: 100% 50%;
            border-radius: 100px 0 0 100px;
        }

        .success-checkmark .check-icon::after {
            top: 0;
            left: 15px;
            width: 30px;
            transform-origin: 0 50%;
            border-radius: 0 100px 100px 0;
            animation: rotate-circle 4.25s ease-in;
        }

        .success-checkmark .check-icon::before, .success-checkmark .check-icon::after {
            content: "";
            height: 50px;
            position: absolute;
            background: #FFFFFF;
            transform: rotate(-45deg);
        }

        .success-checkmark .check-icon .icon-line {
            height: 2px;
            background-color: #4CAF50;
            display: block;
            border-radius: 1px;
            position: absolute;
            z-index: 10;
        }

            .success-checkmark .check-icon .icon-line.line-tip {
                top: 23px;
                left: 7px;
                width: 12.5px;
                transform: rotate(45deg);
                animation: icon-line-tip 0.75s;
            }

            .success-checkmark .check-icon .icon-line.line-long {
                top: 19px;
                right: 4px;
                width: 23.5px;
                transform: rotate(-45deg);
                animation: icon-line-long 0.75s;
            }

        .success-checkmark .check-icon .icon-circle {
            top: -2px;
            left: -2px;
            z-index: 10;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: absolute;
            box-sizing: content-box;
            border: 2px solid rgba(76, 175, 80, 0.5);
        }

        .success-checkmark .check-icon .icon-fix {
            top: 4px;
            width: 2.5px;
            left: 13px;
            z-index: 1;
            height: 42.5px;
            position: absolute;
            transform: rotate(-45deg);
            background-color: #FFFFFF;
        }

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg);
    }

    5% {
        transform: rotate(-45deg);
    }

    12% {
        transform: rotate(-405deg);
    }

    100% {
        transform: rotate(-405deg);
    }
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 0.5px;
        top: 9.5px;
    }

    54% {
        width: 0;
        left: 0.5px;
        top: 9.5px;
    }

    70% {
        width: 25px;
        left: -4px;
        top: 18.5px;
    }

    84% {
        width: 8.5px;
        left: 10.5px;
        top: 24px;
    }

    100% {
        width: 12.5px;
        left: 7px;
        top: 22.5px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 23px;
        top: 27px;
    }

    65% {
        width: 0;
        right: 23px;
        top: 27px;
    }

    84% {
        width: 27.5px;
        right: 0px;
        top: 17.5px;
    }

    100% {
        width: 23.5px;
        right: 4px;
        top: 19px;
    }
}




.btn-warning-color {
    background: #FFE5D0;
    border-color: transparent !important;
    color: #D76A0F !important;
}


div#continuousScanAll {
    display: flex;
    justify-content: center;
    align-items: center;
}

#continuousScanAll .iconed-qr {
    /* margin-bottom: 200px !important; */
    height: 30vh;
    width: 30vh;
    background: linear-gradient(#ea2f1c, #ea2f1c) top left, linear-gradient(#ea2f1c, #ea2f1c) top left, linear-gradient(#ea2f1c, #ea2f1c) top right, linear-gradient(#ea2f1c, #ea2f1c) top right, linear-gradient(#ea2f1c, #ea2f1c) bottom left, linear-gradient(#ea2f1c, #ea2f1c) bottom left, linear-gradient(#ea2f1c, #ea2f1c) bottom right, linear-gradient(#ea2f1c, #ea2f1c) bottom right;
    background-size: 4px 20px, 20px 4px;
    background-repeat: no-repeat;
    position: fixed !important;
    z-index: 99999 !important;
    /* width: 100% !important; */
    /* margin: auto; */
    bottom: 35vh !important;
    opacity: 1;
    animation: fadeInOut 2s infinite;
    flex-shrink: 0;
}

@keyframes fadeInOut {
    0%,100% {
        opacity: .5
    }

    50% {
        opacity: 1
    }
}












.bg-0 {
    background: none !important;
}




.flashing-blue-scan {
    animation: lds-gridScan 1s infinite !important;
    -webkit-animation: lds-gridScan 1s infinite !important;
}




@keyframes lds-gridScan {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .75;
    }

    100% {
        opacity: 1;
    }
}





.flashing-blue {
    background: #b3d4ea !important;
    background-color: #b3d4ea !important;
    animation: lds-grid 1s linear infinite !important;
    -webkit-animation: lds-grid 1s linear infinite !important;
}


@keyframes bgblink {
    0% {
        background-color: #b3d4ea;
    }

    50% {
        background-color: #8eb5cf;
    }

    100% {
        background-color: #b3d4ea;
    }
}





@-webkit-keyframes bgblink {
    from {
        background-color: #b3d4ea;
    }

    to {
        background-color: #8eb5cf;
    }
}




.flashing-red {
    animation: bgblink 1s linear infinite !important;
    -webkit-animation: bgblink 1s linear infinite !important;
}

@keyframes bgblink {
    0% {
        background-color: #ead4d2;
    }



    100% {
        background-color: #f9aca6;
    }
}







@-webkit-keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: .5;
    }
}

.blink {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}



@-webkit-keyframes bgblink {
    from {
        background-color: #ead4d2;
    }

    to {
        background-color: #f9aca6;
    }
}



li.border-bottom {
    border-bottom: 1px solid #e6e6e6 !important;
    padding: 10px !important;
}

.checkbox {
    min-height: auto;
    position: relative;
}

    .checkbox label {
        cursor: pointer;
    }

    .checkbox input[type="checkbox"] {
        margin: 0;
        display: none;
        width: 1.25rem;
    }

        .checkbox input[type="checkbox"] + label {
            padding-left: 0px;
        }

            .checkbox input[type="checkbox"] + label:before {
                content: '\2713';
                width: 1.25rem;
                height: 1.25rem;
                display: inline-block;
                margin-right: 10px;
                border: 2px solid #edf2f9;
                border-radius: 0.25rem;
                font-size: 12px;
                font-family: "anticon";
                font-weight: 400;
                line-height: 1.4;
                vertical-align: bottom;
                text-align: center;
                background: #fff;
                color: transparent;
                cursor: pointer;
                transition: all 0.2s ease-in-out;
                -webkit-transition: all 0.2s ease-in-out;
                -moz-transition: all 0.2s ease-in-out;
                -o-transition: all 0.2s ease-in-out;
                -ms-transition: all 0.2s ease-in-out;
            }

        .checkbox input[type="checkbox"]:checked + label:before {
            background: #3f87f5;
            border-color: #3f87f5;
            color: #fff;
        }


.btn-xs {
    height: 20px;
    padding: 0px 5px;
    font-size: 12px;
}


.badge-blue {
    color: #3f87f5;
    background: rgba(63,135,245,0.1);
    border-color: transparent;
    font-weight: 500;
}


.h-60 {
    height: 60%;
}


#dangerModal {
    z-index: 999999999999 !important;
    box-shadow: gray;
    position: fixed;
    background: rgba(0,0,0,.5);
}


.w-180p {
    width: 180px !important
}



ul {
    list-style-type: none;
}


.input-missing {
    outline: none;
    box-shadow: 0 0 10px red;
}






.text-mfa-code {
    font-size: 30px !important;
    text-align: center;
}


.text-phone-mfa {
    font-size: 16px !important;
    text-align: center;
}


.form-control-mfa {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 0px;
    border-bottom: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}



input#tokenMFA:focus-visible {
    outline: 0px !important;
    border-bottom: 2px solid #4b8dce !important;
    /* box-shadow: inset 10px 0px 0 10px #0370ba; */
    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    /* -webkit-box-shadow: 0 4px 4px rgb(0 0 0 / 40%); */
    /* box-shadow: 0 0px 0px 10px rgb(0 0 0 / 40%); */
    /* box-shadow: 0 5px 0px 0px #619bd4; */
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 10px 10px -9px #0370ba8c;
}



.badge-red {
    color: #f53f3f;
    background: rgba(245,63,63, .10);
    border-color: transparent;
    font-weight: 500;
}






.loader-charge {
    position: absolute;
    width: 100px;
    height: 130px;
    /* align-items: center; */
    margin-left: 20px !important;
    background: #f9f9f9;
    border-radius: 4px;
}

    .loader-charge:before {
        content: '';
        position: absolute;
        width: 54px;
        height: 25px;
        left: 50%;
        top: 0;
        background-image: radial-gradient(ellipse at center, #0000 24%,#ade5ba 25%,rgb(173 229 186) 64%,#0000 65%), linear-gradient(to bottom, #0000 34%,#ade5ba 35%);
        background-size: 12px 12px, 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
        transform: translate(-50%, -65%);
        box-shadow: 0 -3px rgb(65 153 86 / 25%) inset;
    }

    .loader-charge:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
        width: 66%;
        height: 60%;
        background: linear-gradient(to bottom, #ade5ba 30%, #0000 31%);
        background-size: 100% 16px;
        animation: writeDown 2s ease-out infinite;
    }

@keyframes writeDown {
    0% {
        height: 0%;
        opacity: 0;
    }

    20% {
        height: 0%;
        opacity: 1;
    }

    80% {
        height: 65%;
        opacity: 1;
    }

    100% {
        height: 65%;
        opacity: 0;
    }
}






.loader-suspend {
    position: absolute;
    width: 100px;
    height: 130px;
    /* align-items: center; */
    margin-left: 20px !important;
    background: #f9f9f9;
    border-radius: 4px;
}

    .loader-suspend:before {
        content: '';
        position: absolute;
        width: 54px;
        height: 25px;
        left: 50%;
        top: 0;
        background-image: radial-gradient(ellipse at center, #0000 24%,#fce3e1 25%,#fce3e1 64%,#0000 65%), linear-gradient(to bottom, #0000 34%,#fce3e1 35%);
        background-size: 12px 12px, 100% auto;
        background-repeat: no-repeat;
        background-position: center top;
        transform: translate(-50%, -65%);
        box-shadow: 0 -3px #f1aaa4 inset;
    }

    .loader-suspend:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
        width: 66%;
        height: 60%;
        background: linear-gradient(to bottom, #fce3e1 30%, #0000 31%);
        background-size: 100% 16px;
        animation: writeDown 2s ease-out infinite;
    }




.text-close {
    color: #e95549;
}



.checkmark-sm {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    /* display: block;*/
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}


.checkmark-md {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* display: block;*/
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}



.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* display: block;*/
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}


.checkmark_blue {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #0370ba;
    animation: fillBlue 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.checkmark__circle_blue {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #0370ba;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check_blue {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
}


@keyframes fillBlue {
    100% {
        box-shadow: inset 0px 0px 0px 30px #0370ba;
    }
}

img.rfidImg {
    width: 20px !important;
}


.rounded-btn {
    border-radius: 150px;
    margin-left: 2px;
    margin-right: 2px;
}


.h-45px {
    height: 45px !important;
    width: 98%;
}


.image-listview > li .h-45px a.item:after {
    background-image: url(data:image/svg+xml,%0A%3Csvg width='10px' height='16px' viewBox='0 0 10 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='Listview' transform='translate(-112.000000, -120.000000)' stroke='%23A1A1A2' stroke-width='2.178'%3E%3Cpolyline id='Path' points='114 122 120 128 114 134'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: center center;
    width: 16px;
    height: 16px;
    content: "";
    position: absolute;
    right: 12px;
    opacity: 0.5;
    top: 45%;
    margin-top: -8px;
}






.preloader-scan {
    position: fixed;
    top: 0;
    right: 40px;
    left: 0px;
    max-width: 200px;
    display: table;
    margin: 0 auto;
    height: 100%;
    text-align: center;
}

    .preloader-scan li:nth-child(1) {
        width: 2px;
    }

    .preloader-scan li:nth-child(2) {
        width: 2px;
    }

    .preloader-scan li:nth-child(3) {
        width: 2px;
    }

    .preloader-scan li:nth-child(4) {
        width: 3px;
    }

    .preloader-scan li:nth-child(5) {
        width: 3px;
    }

    .preloader-scan li:nth-child(6) {
        width: 1px;
    }

    .preloader-scan li:nth-child(7) {
        width: 2px;
    }

    .preloader-scan li:nth-child(8) {
        width: 4px;
    }

    .preloader-scan li:nth-child(9) {
        width: 1px;
    }

    .preloader-scan li:nth-child(10) {
        width: 1px;
    }

    .preloader-scan li:nth-child(11) {
        width: 4px;
    }

    .preloader-scan li:nth-child(12) {
        width: 1px;
    }

    .preloader-scan li:nth-child(13) {
        width: 1px;
    }

    .preloader-scan li:nth-child(14) {
        width: 3px;
    }

    .preloader-scan li:nth-child(15) {
        width: 2px;
    }

    .preloader-scan li:nth-child(16) {
        width: 5px;
    }

    .preloader-scan li:nth-child(17) {
        width: 3px;
    }

    .preloader-scan li:nth-child(18) {
        width: 1px;
    }

    .preloader-scan li:nth-child(19) {
        width: 1px;
    }

    .preloader-scan li:nth-child(20) {
        width: 2px;
    }

    .preloader-scan li:nth-child(21) {
        width: 3px;
    }

    .preloader-scan li:nth-child(22) {
        width: 4px;
    }

    .preloader-scan li:nth-child(23) {
        width: 4px;
    }

    .preloader-scan li:nth-child(24) {
        width: 3px;
    }

    .preloader-scan ul {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        list-style-type: none;
        text-align: center;
    }

    .preloader-scan li {
        display: inline-block;
        width: 2px;
        height: 50px;
        background-color: #444;
    }

    .preloader-scan .laser {
        width: 150%;
        margin-left: -35%;
        background-color: #ff6347;
        height: 1px;
        position: absolute;
        top: 40%;
        z-index: 2;
        box-shadow: 0 0 4px red;
        -webkit-animation: scanning 2s infinite;
        animation: scanning 2s infinite;
    }

    .preloader-scan .diode {
        -webkit-animation: beam 0.01s infinite;
        animation: beam 0.01s infinite;
    }


@-webkit-keyframes beam {
    50% {
        opacity: 0;
    }
}

@keyframes beam {
    50% {
        opacity: 0;
    }
}

@-webkit-keyframes scanning {
    50% {
        transform: translateY(75px);
    }
}

@keyframes scanning {
    50% {
        transform: translateY(75px);
    }
}








.f-modal-alert {
    background-color: #fff;
    /* box-shadow: 0 0 10px 2px rgb(0 0 0 / 20%); */
    border-radius: 4px;
    margin: 20px;
    /* padding: 50px; */
}

    .f-modal-alert .f-modal-icon {
        border-radius: 50%;
        border: 4px solid gray;
        box-sizing: content-box;
        height: 60px;
        margin: 20px auto;
        padding: 0;
        position: relative;
        width: 60px;
    }

        .f-modal-alert .f-modal-icon.f-modal-success, .f-modal-alert .f-modal-icon.f-modal-error {
            border-color: #A5DC86;
        }

            .f-modal-alert .f-modal-icon.f-modal-success:after, .f-modal-alert .f-modal-icon.f-modal-success:before, .f-modal-alert .f-modal-icon.f-modal-error:after, .f-modal-alert .f-modal-icon.f-modal-error:before {
                background: #fff;
                content: "";
                height: 120px;
                position: absolute;
                transform: rotate(45deg);
                width: 60px;
            }

            .f-modal-alert .f-modal-icon.f-modal-success:before, .f-modal-alert .f-modal-icon.f-modal-error:before {
                border-radius: 120px 0 0 120px;
                left: -33px;
                top: -7px;
                transform-origin: 60px 60px;
                transform: rotate(-45deg);
            }

            .f-modal-alert .f-modal-icon.f-modal-success:after, .f-modal-alert .f-modal-icon.f-modal-error:after {
                border-radius: 0 120px 120px 0;
                left: 30px;
                top: -11px;
                transform-origin: 0 60px;
                transform: rotate(-45deg);
            }

            .f-modal-alert .f-modal-icon.f-modal-success .f-modal-placeholder, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-placeholder {
                border-radius: 50%;
                border: 4px solid rgba(165, 220, 134, 0.2);
                box-sizing: content-box;
                height: 80px;
                left: -4px;
                position: absolute;
                top: -4px;
                width: 80px;
                z-index: 2;
            }

            .f-modal-alert .f-modal-icon.f-modal-success .f-modal-fix, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-fix {
                background-color: #fff;
                height: 90px;
                left: 28px;
                position: absolute;
                top: 8px;
                transform: rotate(-45deg);
                width: 5px;
                z-index: 1;
            }

            .f-modal-alert .f-modal-icon.f-modal-success .f-modal-line, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line {
                background-color: #A5DC86;
                border-radius: 2px;
                display: block;
                height: 5px;
                position: absolute;
                z-index: 2;
            }

                .f-modal-alert .f-modal-icon.f-modal-success .f-modal-line.f-modal-tip, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-tip {
                    left: 14px;
                    top: 46px;
                    transform: rotate(45deg);
                    width: 25px;
                }

                .f-modal-alert .f-modal-icon.f-modal-success .f-modal-line.f-modal-long, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-long {
                    right: 8px;
                    top: 38px;
                    transform: rotate(-45deg);
                    width: 47px;
                }

        .f-modal-alert .f-modal-icon.f-modal-error {
            border-color: #F27474;
        }

            .f-modal-alert .f-modal-icon.f-modal-error .f-modal-x-mark {
                display: block;
                position: relative;
                z-index: 2;
            }

            .f-modal-alert .f-modal-icon.f-modal-error .f-modal-placeholder {
                border: 4px solid rgba(200, 0, 0, 0.2);
            }

            .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line {
                background-color: #F27474;
                top: 37px;
                width: 47px;
            }

                .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-left {
                    left: 17px;
                    transform: rotate(45deg);
                }

                .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-right {
                    right: 16px;
                    transform: rotate(-45deg);
                }

        .f-modal-alert .f-modal-icon.f-modal-warning {
            border-color: #F8BB86;
        }

            .f-modal-alert .f-modal-icon.f-modal-warning:before {
                -webkit-animation: pulseWarning 2s linear infinite;
                animation: pulseWarning 2s linear infinite;
                background-color: #fff;
                border-radius: 50%;
                content: "";
                display: inline-block;
                height: 100%;
                opacity: 0;
                position: absolute;
                width: 100%;
            }

            .f-modal-alert .f-modal-icon.f-modal-warning:after {
                background-color: #fff;
                border-radius: 50%;
                content: "";
                display: block;
                height: 100%;
                position: absolute;
                width: 100%;
                z-index: 1;
            }

            .f-modal-alert .f-modal-icon.f-modal-warning .f-modal-body {
                background-color: #F8BB86;
                border-radius: 2px;
                height: 27px;
                left: 50%;
                margin-left: -2px;
                position: absolute;
                top: 10px;
                width: 5px;
                z-index: 2;
            }

            .f-modal-alert .f-modal-icon.f-modal-warning .f-modal-dot {
                background-color: #F8BB86;
                border-radius: 50%;
                bottom: 10px;
                height: 7px;
                left: 50%;
                margin-left: -3px;
                position: absolute;
                width: 7px;
                z-index: 2;
            }

        .f-modal-alert .f-modal-icon + .f-modal-icon {
            margin-top: 50px;
        }

.animateSuccessTip {
    -webkit-animation: animateSuccessTip 0.75s;
    animation: animateSuccessTip 0.75s;
}

.animateSuccessLong {
    -webkit-animation: animateSuccessLong 0.75s;
    animation: animateSuccessLong 0.75s;
}

.f-modal-icon.f-modal-success.animate:after {
    -webkit-animation: rotatePlaceholder 4.25s ease-in;
    animation: rotatePlaceholder 4.25s ease-in;
}

.f-modal-icon.f-modal-error.animate:after {
    -webkit-animation: rotatePlaceholder 4.25s ease-in;
    animation: rotatePlaceholder 4.25s ease-in;
}

.animateErrorIcon {
    -webkit-animation: animateErrorIcon 0.5s;
    animation: animateErrorIcon 0.5s;
}

.animateXLeft {
    -webkit-animation: animateXLeft 0.75s;
    animation: animateXLeft 0.75s;
}

.animateXRight {
    -webkit-animation: animateXRight 0.75s;
    animation: animateXRight 0.75s;
}

.scaleWarning {
    -webkit-animation: scaleWarning 0.75s infinite alternate;
    animation: scaleWarning 0.75s infinite alternate;
}

.pulseWarningIns {
    -webkit-animation: pulseWarningIns 0.75s infinite alternate;
    animation: pulseWarningIns 0.75s infinite alternate;
}

@-webkit-keyframes animateSuccessTip {
    0%, 54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes animateSuccessTip {
    0%, 54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@-webkit-keyframes animateSuccessLong {
    0%, 65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0;
        top: 35px;
    }

    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

@keyframes animateSuccessLong {
    0%, 65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0;
        top: 35px;
    }

    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

@-webkit-keyframes rotatePlaceholder {
    0%, 5% {
        transform: rotate(-45deg);
    }

    100%, 12% {
        transform: rotate(-405deg);
    }
}

@keyframes rotatePlaceholder {
    0%, 5% {
        transform: rotate(-45deg);
    }

    100%, 12% {
        transform: rotate(-405deg);
    }
}

@-webkit-keyframes animateErrorIcon {
    0% {
        transform: rotateX(100deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes animateErrorIcon {
    0% {
        transform: rotateX(100deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes animateXLeft {
    0%, 65% {
        left: 82px;
        top: 95px;
        width: 0;
    }

    84% {
        left: 14px;
        top: 33px;
        width: 47px;
    }

    100% {
        left: 17px;
        top: 37px;
        width: 47px;
    }
}

@keyframes animateXLeft {
    0%, 65% {
        left: 82px;
        top: 95px;
        width: 0;
    }

    84% {
        left: 14px;
        top: 33px;
        width: 47px;
    }

    100% {
        left: 17px;
        top: 37px;
        width: 47px;
    }
}

@-webkit-keyframes animateXRight {
    0%, 65% {
        right: 82px;
        top: 95px;
        width: 0;
    }

    84% {
        right: 14px;
        top: 33px;
        width: 47px;
    }

    100% {
        right: 16px;
        top: 37px;
        width: 47px;
    }
}

@keyframes animateXRight {
    0%, 65% {
        right: 82px;
        top: 95px;
        width: 0;
    }

    84% {
        right: 14px;
        top: 33px;
        width: 47px;
    }

    100% {
        right: 16px;
        top: 37px;
        width: 47px;
    }
}

@-webkit-keyframes scaleWarning {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes scaleWarning {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes pulseWarning {
    0% {
        background-color: #fff;
        transform: scale(1);
        opacity: 0.5;
    }

    30% {
        background-color: #fff;
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        background-color: #F8BB86;
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulseWarning {
    0% {
        background-color: #fff;
        transform: scale(1);
        opacity: 0.5;
    }

    30% {
        background-color: #fff;
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        background-color: #F8BB86;
        transform: scale(2);
        opacity: 0;
    }
}

@-webkit-keyframes pulseWarningIns {
    0% {
        background-color: #F8D486;
    }

    100% {
        background-color: #F8BB86;
    }
}

@keyframes pulseWarningIns {
    0% {
        background-color: #F8D486;
    }

    100% {
        background-color: #F8BB86;
    }
}



.btn-gray-color {
    background: #eaeaea !important;
}

.btn-overstock-gray-color {
    background: #ADB5BD !important;
}

.btn-lightgray-color {
    background: #f1f1f1;
}

.topScreen {
    position: fixed !important;
    z-index: 99999 !important;
    width: 100% !important;
    top: 10px !important;
    left: 10px !important;
    justify-content: end !IMPORTANT;
}


.heightAddedTop {
    height: 40px !important;
}



.question-color {
    color: rgb(200,204, 212) !important;
    border-color: transparent !important;
    /* color: #0370ba !important; */
}






.loaderCoffee {
    width: 48px;
    height: 40px;
    margin-top: 30px;
    display: inline-block;
    position: relative;
    background: #c8c8c8;
    border-radius: 15% 15% 35% 35%;
}

    .loaderCoffee::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 45px;
        top: 8px;
        border: 4px solid #c8c8c8;
        width: 16px;
        height: 20px;
        border-radius: 0 4px 4px 0;
    }

    .loaderCoffee::before {
        content: '';
        position: absolute;
        width: 1px;
        height: 10px;
        color: #c8c8c8;
        top: -15px;
        left: 11px;
        box-sizing: border-box;
        animation: animloader 1s ease infinite;
    }

@keyframes animloader {
    0% {
        box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(139, 139, 139, 0.3), 20px 0px rgba(211, 211, 211, 0);
    }

    50% {
        box-shadow: 2px -5px rgba(139, 139, 139, 0.5), 12px -3px rgba(139, 139, 139, 0.5), 20px -2px rgba(139,138, 138, 0.6);
    }

    100% {
        box-shadow: 2px -8px rgba(139, 139, 139, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(139, 138, 138, 0);
    }
}




.quotesTask {
    opacity: 1;
    animation: fade 3s infinite;
}


@keyframes fade {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}




.blue-gradient-move {
    background-image: linear-gradient(-90deg, #0370ba, #5082b9, #0370ba, #0370ba) !important;
    background-size: 400% 400% !important;
    animation: gradient-move 3s ease infinite !important;
    webkit-animation: gradient-move 3s ease infinite !important;
    border: transparent;
}

    /* Focus state */
    .blue-gradient-move:focus {
        transform: scale(1.02) !important;
        outline: none !important;
        background-image: linear-gradient(-90deg, #0370ba, #5082b9, #0370ba, #0370ba) !important;
        background-size: 400% 400% !important;
        animation: gradient-move 3s ease infinite !important;
        webkit-animation: gradient-move 3s ease infinite !important;
        border: transparent;
        border-right: 0 !important;
        border-radius: 0 0 16px 0 !important;
        border-right: unset !important;
        border-radius: unset !important;
    }

    /* Active (clicked) state */
    .blue-gradient-move:active {
        transform: scale(1.02) !important;
        outline: none !important;
        background-image: linear-gradient(-90deg, #0370ba, #5082b9, #0370ba, #0370ba) !important;
        background-size: 400% 400% !important;
        animation: gradient-move 3s ease infinite !important;
        webkit-animation: gradient-move 3s ease infinite !important;
        border: transparent;
        border-right: unset !important;
        border-radius: unset !important;
        border-right: unset !important;
        border-radius: unset !important;
    }

/* Override Bootstrap’s .btn:focus using specificity and !important */
.btn.blue-gradient-move:focus,
a.blue-gradient-move:focus {
    transform: scale(1.02) !important;
    outline: none !important;
    background-image: linear-gradient(-90deg, #0370ba, #5082b9, #0370ba, #0370ba) !important;
    background-size: 400% 400% !important;
    animation: gradient-move 3s ease infinite !important;
    webkit-animation: gradient-move 3s ease infinite !important;
    border: transparent;
    border-right: unset !important;
    border-radius: unset !important;
}

/* Active state */
.btn.blue-gradient-move:active,
a.blue-gradient-move:active {
    transform: scale(1.02) !important;
    outline: none !important;
    background-image: linear-gradient(-90deg, #0370ba, #5082b9, #0370ba, #0370ba) !important;
    background-size: 400% 400% !important;
    animation: gradient-move 3s ease infinite !important;
    webkit-animation: gradient-move 3s ease infinite !important;
    border: transparent;
    border-right: unset !important;
    border-radius: unset !important;
}


.green-gradient-move {
    /* Fallback prefixed gradient for older WebKit */
    background-color: #0BAB64 !important;
    background-image: -webkit-linear-gradient(-90deg, #0BAB64, #3BB78F, #0BAB64, #3BB78F) !important;
    /* Standard gradient */
    background-image: linear-gradient(-90deg, #0BAB64, #3BB78F, #0BAB64, #3BB78F) !important;
    background-size: 400% 400% !important;
    /* Standard animation */
    animation: gradient-move 3s ease infinite !important;
    /* WebKit-prefixed animation */
    -webkit-animation: gradient-move 3s ease infinite !important;
    border: none;
}



@-webkit-keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-moz-keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}






.loaderSquareSet {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: rgb(215 215 215 / 50%);
    transform: rotate(45);
    overflow: hidden;
}

    .loaderSquareSet:after {
        content: '';
        position: absolute;
        inset: 8px;
        margin: auto;
        background: #ffffff;
    }

    .loaderSquareSet:before {
        content: '';
        position: absolute;
        inset: -15px;
        margin: auto;
        background: #a1e69e;
    }




.loaderSquareSolid {
    position: relative;
    width: 32px;
    height: 90px;
    background-color: rgb(215 215 215 / 50%);
    transform: rotate(45);
    overflow: hidden;
}

    .loaderSquareSolid:after {
        content: '';
        position: absolute;
        inset: 8px;
        margin: auto;
        background: #ffffff;
    }

    .loaderSquareSolid:before {
        content: '';
        position: absolute;
        inset: -15px;
        margin: auto;
        background: #ebebeb;
    }



.loaderSquareWarning {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: rgb(241 165 96 / 25%);
    transform: rotate(45);
    overflow: hidden;
}


    .loaderSquareWarning:after {
        content: '';
        position: absolute;
        inset: 8px;
        margin: auto;
        background: #ffffff;
    }

    .loaderSquareWarning:before {
        content: '';
        position: absolute;
        inset: -15px;
        margin: auto;
        background: #ffb979;
        animation: diamondLoader 2s linear infinite;
    }





.loaderSquareYellow {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: rgb(255 236 125 / 33%);
    transform: rotate(45);
    overflow: hidden;
}

    .loaderSquareYellow:after {
        content: '';
        position: absolute;
        inset: 8px;
        margin: auto;
        background: #ffffff;
    }

    .loaderSquareYellow:before {
        content: '';
        position: absolute;
        inset: -15px;
        margin: auto;
        background: #ffec7d;
        animation: diamondLoader 2s linear infinite;
    }







.loaderSquareGreen {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: rgb(107 232 127 / 25%);
    transform: rotate(45);
    overflow: hidden;
}

    .loaderSquareGreen:after {
        content: '';
        position: absolute;
        inset: 8px;
        margin: auto;
        background: #ffffff;
    }

    .loaderSquareGreen:before {
        content: '';
        position: absolute;
        inset: -15px;
        margin: auto;
        background: #95d7a6;
        animation: diamondLoader 2s linear infinite;
    }





.loaderSquare {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: rgb(138 176 228 / 19%);
    transform: rotate(45);
    overflow: hidden;
}

    .loaderSquare:after {
        content: '';
        position: absolute;
        inset: 8px;
        margin: auto;
        background: #ffffff;
    }

    .loaderSquare:before {
        content: '';
        position: absolute;
        inset: -15px;
        margin: auto;
        background: #0370ba4f;
        animation: diamondLoader 2s linear infinite;
    }





@keyframes diamondLoader {
    0%,10% {
        transform: translate(-64px, -64px) rotate(-45deg)
    }

    90%, 100% {
        transform: translate(0px, 0px) rotate(-45deg)
    }
}


span h1.centerBasketText {
    font-size: 34px !important;
    position: fixed;
    justify-content: center;
    color: #3e3e3e !important;
    font-weight: 700 !important;
    z-index: 60 !important;
    margin-top: 9px;
    /* bottom: 50%; */
    top: 10px !important;
    /* align-self: center; */
    /* display: flex; */
    /* flex-direction: column !important; */
    justify-content: center !important;
    text-align: center;
    /* position: fixed; */
    top: 10px !important;
    /* left: 50%; */
    /* position: absolute !important; */
    position: absolute;
    left: 50%;
    /* top: auto; */
    transform: translateX(-50%);
}

.loaderSquareSelected {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: rgb(201 243 200 / 50%);
    transform: rotate(45);
    overflow: hidden;
}

    .loaderSquareSelected:after {
        content: '';
        position: absolute;
        inset: 8px;
        margin: auto;
        background: #ffffff;
    }

    .loaderSquareSelected:before {
        content: '';
        position: absolute;
        inset: -15px;
        margin: auto;
        background: #a1e69e;
        animation: diamondLoader 2s linear infinite;
    }






#standardInfoModal.dialogbox .modal-dialog .modal-content {
    max-width: 380px !important;
}


#standardInfoModal {
    position: fixed; /* Positioning and size */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 0 0 / 50%); /* color */
    display: none; /* making it hidden by default */
}

#standardInfoModalModify {
    position: fixed; /* Positioning and size */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 0 0 / 50%); /* color */
    display: none; /* making it hidden by default */
}
    #standardInfoModalModify.dialogbox .modal-dialog .modal-content {
        max-width: 380px !important;
    }

#standardInfoModalRFID {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(100 100 100 / 80%);
    display: none;
}





.loaderPinMap {
    width: 38px;
    height: 38px;
    display: block;
    margin-top: 0px !important;
    margin: 20px auto;
    box-sizing: border-box;
    position: relative;
}

    .loaderPinMap::after {
        content: '';
        box-sizing: border-box;
        width: 38px;
        height: 38px;
        left: 0;
        bottom: 0;
        position: absolute;
        border-radius: 50% 50% 0;
        border: 12px solid #0370ba;
        transform: rotate(45deg) translate(0, 0);
        box-sizing: border-box;
        animation: animMarkerPin 0.4s ease-in-out infinite alternate;
    }

    .loaderPinMap::before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 150%;
        width: 24px;
        height: 4px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.2);
        animation: animShadow 0.4s ease-in-out infinite alternate;
    }

@keyframes animMarkerPin {
    0% {
        transform: rotate(45deg) translate(5px, 5px);
    }

    100% {
        transform: rotate(45deg) translate(-5px, -5px);
    }
}

@keyframes animShadow {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}



.loaderSquareRedSolid {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: #f3ddee;
    overflow: hidden;
}

.loaderSquareBlueSolid {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: #C7F9EE;
    overflow: hidden;
}



.loaderSquarePurpleSolid {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: #E5E1EF;
    overflow: hidden;
}


.loaderSquareTanSolid {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: #f8f4d9;
    overflow: hidden;
}



.loaderSquareJadeSolid {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: #F1FBD1;
    overflow: hidden;
}



.loaderSquareYellowSolid {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: rgb(255 236 125 / 33%);
    overflow: hidden;
}



.loaderSquareWarningSolid {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: rgb(241 165 96 / 25%);
    overflow: hidden;
}


.loaderSquareGreenSolid {
    position: relative;
    width: 64px;
    height: 90px;
    background-color: rgb(107 232 127 / 25%);
    overflow: hidden;
}


#searchRecBinNumber {
    /* white-space: pre-wrap !important; */
    /* word-break: break-word !important; */
    word-wrap: break-word !important;
    width: 140px;
    text-align: right !important;
    /* align-items: end !important; */
    /* justify-content: end !important; */
    /* align-content: end !important; */
    margin: auto;
}





.popup-button {
    /* display: block; */
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    color: white !important;
    /* margin: 10px; */
    /* padding: 1em 3em; */
    background-size: 200% auto;
    color: white;
    box-shadow: 0 5px 20px #2DAA5C;
    /* background-image: linear-gradient(to right, #2DAA5C 0%, #72d68a 50%, #2DAA5C 100%); */
    transition: 0.5s;
    animation: 2s moveBackground infinite linear;
    background-image: linear-gradient(to right, #64c589 0%, #8dd8aa 50%, #64c589 100%) !important;
}



@keyframes moveBackground {
    0% {
        background-position: 100% center
    }

    100% {
        background-position: -100% center
    }
}





/*HEXAGON LOADER**/


#loaderSend {
    width: 98px;
    height: 98px;
    border: 5px solid #e3f3ff;
    border-bottom-color: #0370ba;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}





#loaderSendGreen {
    width: 98px;
    height: 98px;
    border: 5px solid #c5f4d0;
    border-bottom-color: #28a745;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}




.wifi-symbol {
    display: none;
}

    .wifi-symbol [foo], .wifi-symbol {
        display: block;
        position: absolute;
        top: 50%;
        display: inline-block;
        width: 150px;
        height: 150px;
        margin-top: -187.5px;
        -ms-transform: rotate(-45deg) translate(-100px);
        -moz-transform: rotate(-45deg) translate(-100px);
        -o-transform: rotate(-45deg) translate(-100px);
        -webkit-transform: rotate(-45deg) translate(-100px);
        transform: rotate(-45deg) translate(-100px);
    }

        .wifi-symbol .wifi-circle {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            display: block;
            width: 100%;
            height: 100%;
            font-size: 21.4285714286px;
            position: absolute;
            bottom: 0;
            left: 0;
            border-color: #0370ba;
            border-style: solid;
            border-width: 1em 1em 0 0;
            -webkit-border-radius: 0 100% 0 0;
            border-radius: 0 100% 0 0;
            opacity: 0;
            -o-animation: wifianimation 3s infinite;
            -moz-animation: wifianimation 3s infinite;
            -webkit-animation: wifianimation 3s infinite;
            animation: wifianimation 3s infinite;
        }

            .wifi-symbol .wifi-circle.first {
                -o-animation-delay: 800ms;
                -moz-animation-delay: 800ms;
                -webkit-animation-delay: 800ms;
                animation-delay: 800ms;
            }

            .wifi-symbol .wifi-circle.second {
                width: 5em;
                height: 5em;
                -o-animation-delay: 400ms;
                -moz-animation-delay: 400ms;
                -webkit-animation-delay: 400ms;
                animation-delay: 400ms;
            }

            .wifi-symbol .wifi-circle.third {
                width: 3em;
                height: 3em;
            }

            .wifi-symbol .wifi-circle.fourth {
                width: 1em;
                height: 1em;
                opacity: 1;
                background-color: #0370ba;
                -o-animation: none;
                -moz-animation: none;
                -webkit-animation: none;
                animation: none;
            }

@-o-keyframes wifianimation {
    0% {
        opacity: 0.4;
    }

    5% {
        opactiy: 1;
    }

    6% {
        opactiy: 0.1;
    }

    100% {
        opactiy: 0.1;
    }
}

@-moz-keyframes wifianimation {
    0% {
        opacity: 0.4;
    }

    5% {
        opactiy: 1;
    }

    6% {
        opactiy: 0.1;
    }

    100% {
        opactiy: 0.1;
    }
}

@-webkit-keyframes wifianimation {
    0% {
        opacity: 0.4;
    }

    5% {
        opactiy: 1;
    }

    6% {
        opactiy: 0.1;
    }

    100% {
        opactiy: 0.1;
    }
}




.loaderWIFI, .loaderWIFI:before {
    display: inline-block;
    border: 20px double transparent;
    border-top-color: #0370BA;
    border-radius: 50%;
    box-sizing: border-box;
}

.loaderWIFI {
    padding: 8px;
    animation: wifiLoading 1s ease-in infinite;
}

    .loaderWIFI:before {
        content: '';
        width: 0;
        height: 0;
    }

@keyframes wifiLoading {
    0% {
        border-style: none
    }

    100% {
        border-style: double
    }
}


.gradientText {
    /* color: #fc5c7d; */ /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fc5c7d, #27a2eb) !important; /* Chrome 10-25, Safari 5.1-6 */
    background-image: linear-gradient(to right, #4095cf, #27a2eb) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    -webkit-text-fill-color: transparent !important;
    background-color: red;
    /* Create the gradient. */
    /* background-image: linear-gradient(45deg, #f3ec78, #af4261); */
    /* Set the background size and repeat properties. */
    background-size: 100%;
    background-repeat: repeat;
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-clip: text !important;
}


.text-button-head {
    -webkit-text-fill-color: #0370ba !important;
}


/*.card-gradient {
  background: #005289; 
background: -webkit-linear-gradient(to right, #005289, #2980b9); 
background: linear-gradient(to right, #005289, #2980b9); 
background-size: 150% !important;
}
    
    */



.gradientIcon {
    /* color: #fc5c7d; */ /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fc5c7d, #6a82fb) !important; /* Chrome 10-25, Safari 5.1-6 */
    background-image: linear-gradient(to right, #fc5c7d, #6a82fb) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    -webkit-text-fill-color: transparent !important;
    background-color: red;
    /* Create the gradient. */
    /* background-image: linear-gradient(45deg, #f3ec78, #af4261); */
    /* Set the background size and repeat properties. */

    background-repeat: repeat;
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-clip: text !important;
    background-size: 200% 100%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



.custom-control-sm .custom-control-label:before {
    transition: 0s all;
    /* box-shadow: none !important; */
    background: #E1E1E1;
    width: 16px;
    height: 16px;
    /* margin-top: 20px; */
    border-color: #a6c1eb !important;
    /* border-radius: 100%; */
    /* margin-top: -2px; */
    background: transparent;
    border-color: #E1E1E1;
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border-color: rgba(81, 203, 238, 1);
}



#warningModal {
    z-index: 999999;
    background: #00000078;
}


#saveRememberMe {
    z-index: 2000;
}



#facilitiesModal {
    z-index: 3000;
}





.card-style .card-body {
    padding: 15px
}

.card-style .card-overlay {
    border-radius: 20px
}

.card-style-full {
    margin-left: 0;
    margin-right: 0
}

.card-body {
    z-index: 2
}

.card-header {
    z-index: 2
}

.card-footer {
    z-index: 2
}

.card-top {
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    top: 0
}

.card-bottom {
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0
}

.card-center {
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.ms-auto {
    margin-left: auto !important
}

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



.font-700 {
    font-weight: 700;
}


.color-green-dark {
    color: #8cc152 !important;
}


.color-red-light {
    color: #ed5565 !important;
}

.card-style {
    overflow: hidden;
    margin: 0px 10px 30px 5px !important;
    border-radius: 20px;
    border: none;
    box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);
    /*height: 160px;*/
    height: 130px;
}



.robotoFont {
    font-family: "Roboto", sans-serif !important;
}



.font-200 {
    font-weight: 200
}

.font-300 {
    font-weight: 300
}

.font-400 {
    font-weight: 400
}

.font-500 {
    font-weight: 500
}

.font-600 {
    font-weight: 600
}

.font-700 {
    font-weight: 700
}

.font-800 {
    font-weight: 800
}

.font-900 {
    font-weight: 900
}


.visibleShow {
    overflow: unset !important;
}



.fadeLoader {
    opacity: 1;
    animation: fade 1.5s infinite;
}


.overflowHidden {
    overflow: hidden !important;
}



/*-Footer Menu-*/
#footer-bar {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 98;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    min-height: 61px;
    border-top: solid 1px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 350ms ease !important;
}

    #footer-bar a {
        color: #1f1f1f;
        padding-top: 12px;
        position: relative;
        flex: 1 1 auto;
    }

        #footer-bar a span {
            position: relative;
            z-index: 2;
            display: block;
            font-size: 10px;
            font-weight: 500;
            margin-top: -6px;
            opacity: 0.7;
            font-family: "Roboto", sans-serif !important;
        }

        #footer-bar a i {
            font-size: 18px;
            position: relative;
            z-index: 2;
        }

        #footer-bar a svg {
            transform: translateY(-6px);
        }

    #footer-bar .badge {
        font-style: normal;
        z-index: 5;
        top: 0px;
        position: absolute;
        margin-left: 3px;
        color: #FFF !important;
        width: 18px;
        text-align: center;
        line-height: 18px;
        padding: 0px;
        padding-left: 0px !important;
        border-radius: 18px;
        margin-top: 7px;
        font-size: 11px;
    }

.footer-bar-2 .active-nav {
    color: #FFF !important;
}

    .footer-bar-2 .active-nav strong {
        position: absolute;
        width: 80px;
        left: 50%;
        transform: translateX(-50%);
        top: 0px;
        bottom: 0px;
    }

.footer-bar-4 .active-nav {
    color: #FFF !important;
}

    .footer-bar-4 .active-nav strong {
        position: absolute;
        width: 47px;
        height: 47px;
        border-radius: 60px;
        left: 50%;
        top: 30px;
        transform: translate(-50%, -50%);
        bottom: 0px;
    }

.footer-bar-4 span {
    display: none !important;
}

.footer-bar-4 i {
    padding-top: 10px;
}

.footer-bar-5 .active-nav strong {
    position: absolute;
    width: 50px;
    height: 2px;
    border-radius: 60px;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
}

.footer-bar-3 span {
    display: none !important;
}

.footer-bar-3 .active-nav {
    padding-top: 11px !important;
}

    .footer-bar-3 .active-nav span {
        display: block !important;
    }

.footer-bar-3 a {
    padding-top: 18px !important;
}

.footer-menu-hidden {
    transition: all 100ms ease;
    transform: translateY(100%) !important;
}

.footer-bar-white * {
    color: #FFF;
}

#footer-bar.position-relative {
    z-index: 2 !important;
}

#footer-bar {
    height: calc(65px + (constant(safe-area-inset-bottom))*1.1);
    height: calc(65px + (env(safe-area-inset-bottom))*1.1);
}

.is-not-ios .footer-menu-clear {
    height: 70px;
    display: block;
}

.is-not-ios .footer {
    padding-bottom: 0px;
}

.is-not-ios #footer-menu a i {
    padding-top: 13px;
}

.is-not-ios #footer-menu a span {
    opacity: 0.6;
}

.footer-bar-6 u {
    background-color: rgba(255, 255, 255, 0.2);
}

.footer-bar-6 {
    margin-left: -3px;
}

    .footer-bar-6 span {
        font-size: 11px !important;
    }

    .footer-bar-6 i {
        transform: translateY(-2px);
        opacity: 0.7;
    }

    .footer-bar-6 .circle-nav strong {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        left: 50%;
        top: -23px;
        z-index: 0;
        transform: translateX(-50%);
        box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.09);
        animation: footerAni 1s infinite;
        background-image: linear-gradient(to bottom, #3BB78F 0%, #0BAB64 100%) !important;
        /*background-image: linear-gradient(to bottom, #1b55bf 0%, #1740bf 100%) !important;*/
    }

@keyframes footerAni {
    0% {
        transform: scale(1, 1) translateX(-50%);
    }

    50% {
        transform: scale(1.05, 1.05) translateX(-48%);
    }
}

.footer-bar-6 .circle-nav span {
    font-size: 11px !important;
    margin-top: -8px !important;
}

.footer-bar-6 .circle-nav i {
    transform: translateY(-21px) translateX(0px);
    color: #FFF !important;
    opacity: 1 !important;
    font-size: 20px !important;
    position: relative;
    z-index: 2;
}

.footer-bar-6 .circle-nav svg {
    width: 25px !important;
    height: 25px !important;
    stroke: #FFF !important;
    fill: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-25px) translateX(-1px) !important;
    position: relative;
    z-index: 2;
}

.footer-bar-6 .circle-nav u {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 50px;
    border-radius: 50px;
    height: 50px;
    z-index: 0;
}

.footer-bar-6 .active-nav em {
    position: absolute;
    width: 60px;
    height: 4px;
    border-radius: 60px;
    left: 50%;
    top: 57px;
    transform: translateX(-50%);
    background-image: linear-gradient(to bottom, #1b55bf 0%, #1740bf 100%) !important;
}



/**TABS TO SELECT CSS*/


/*Interests Page*/
.interest-check input {
    position: absolute !important;
    transform: translateX(-150524px);
}

.interest-check .fa-check-circle {
    display: none;
}

.interest-check i {
    width: 20px;
    text-align: center;
    pointer-events: none;
    position: absolute;
    left: 30px;
    top: 0px;
    height: 40px;
    line-height: 40px;
}

.interest-check {
    margin-left: -20px;
    margin-right: 10px;
    margin-bottom: 35px;
    height: 22px;
    cursor: pointer;
    position: relative;
    width: auto;
    display: inline-block;
}

    .interest-check label {
        cursor: pointer;
        font-weight: 500;
        font-size: 13px;
        font-family: "Inter", sans-serif;
        padding: 8px 15px 8px 40px;
    }

    .interest-check input:checked ~ .fa {
        display: block !important;
    }

    .interest-check input:checked ~ label {
        color: #FFF !important;
        background-color: #4A89DC !important;
    }

    .interest-check input:checked ~ .fa:last-child,
    .interest-check input:checked ~ .fab:last-child,
    .interest-check input:checked ~ .fas:last-child,
    .interest-check input:checked ~ .far:last-child {
        display: none !important;
    }


.shadow-xl {
    box-shadow: 0 5px 30px 0 rgb(0 0 0 / 11%), 0 5px 15px 0 rgb(0 0 0 / 2%) !important;
}

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


.color-red-dark {
    color: #DA4453 !important;
}




/**UPDATED UI CSS*/

.input-style input,
.input-style select,
.input-style textarea {
    font-size: 12px;
    width: 100%;
    line-height: 45px;
    height: 45px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    padding: 0px;
    border-radius: 0px;
}

    .input-style select,
    .input-style select option,
    .input-style select option:disabled {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

.input-style label {
    opacity: 0;
    left: 0px !important;
    transform: translateX(30px);
    position: absolute;
    top: -12px;
    height: 10px;
    font-size: 10px;
    transition: all 150ms ease;
    background-color: #FFF;
}

.input-style-active label {
    opacity: 1;
    transform: none !important;
}

.input-style.has-icon i:first-child {
    position: absolute;
    top: 50%;
    width: 10px;
    text-align: center;
    margin-top: -8px;
}

.input-style.has-icon.has-borders i:first-child {
    position: absolute;
    top: 50%;
    width: 10px;
    padding-left: 15px !important;
    text-align: center;
    margin-top: -7px;
}

.input-style.has-icon.has-borders input,
.input-style.has-icon.has-borders select,
.input-style.has-icon.has-borders textarea {
    padding-left: 35px !important;
}

.input-style.has-icon input,
.input-style.has-icon select,
.input-style.has-icon textarea {
    padding-left: 25px;
}

.input-style input[type=date]::-webkit-calendar-picker-indicator {
    opacity: 0.3;
}

.input-style textarea {
    line-height: 32px !important;
    padding-top: 10px !important;
    transition: all 250ms ease !important;
}

    .input-style textarea:focus {
        line-height: 24px !important;
    }

.input-style select {
    color: inherit;
}

.input-style input[type=date] {
    color: inherit;
}

.input-style em,
.input-style span,
.input-style .valid,
.input-style .invalid {
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: 5px;
    pointer-events: none;
}



.input-style.has-borders .valid,
.input-style.has-borders .invalid,
.input-style.has-borders span,
.input-style.has-borders em {
    margin-right: 10px;
}

.input-style.input-style-active label {
    left: 4px !important;
    transform: translateX(-14px) !important;
    position: absolute;
    padding: 0px 8px !important;
    height: 23px;
    font-size: 12px;
    transition: all 250ms ease;
    background-color: #FFF;
}

.input-style.has-borders.input-style-active label {
    margin-left: 14px !important;
}

.input-style textarea:focus {
    height: 150px;
    transition: all 250ms ease !important;
}

.input-style.no-borders.input-style-always-active label {
    opacity: 1;
    left: 6px !important;
    transform: translateX(-14px) !important;
    margin-left: 0px !important;
    position: absolute;
    padding: 0px 8px !important;
    height: 23px;
    font-size: 12px;
    transition: all 250ms ease;
    background-color: #FFF;
}

.input-style.has-borders.input-style-always-active label {
    opacity: 1;
    left: 23px !important;
    transform: translateX(-14px) !important;
    margin-left: 0px !important;
    position: absolute;
    padding: 0px 5px !important;
    height: 23px;
    font-size: 12px;
    transition: all 250ms ease;
    background-color: #FFF;
}

/*Remove Number Arrows*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.input-transparent * {
    color: #FFF !important;
    background-color: transparent !important;
}

.input-transparent.no-borders input {
    border-bottom-width: 1px !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/*Menus & Action Sheets & Modals*/
/*--Menu System---*/
.menu-title {
    position: relative;
}

    .menu-title h1 {
        font-size: 28px;
        font-weight: 700;
        padding: 20px 0px 10px 15px;
    }

    .menu-title h2 {
        font-size: 18px;
        font-weight: 700;
        padding: 20px 0px 0px 15px;
    }

    .menu-title p {
        font-weight: 600;
        font-size: 12px;
        margin: 15px 0px -25px 15px !important;
        padding: 0px 0px 0px 0px;
    }

    .menu-title a {
        font-size: 20px;
        color: #dc3545;
        position: absolute;
        text-align: center;
        width: 55px;
        right: 0px;
        top: 50%;
        margin-top: -13px;
    }

.menu-bg {
    background-color: #eef2f1;
}

.menu-hider {
    position: fixed;
    z-index: 3000;
    top: -100px;
    bottom: -100px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: all 300ms ease;
}

.menu {
    position: fixed;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 101;
    overflow: scroll;
    transition: all 300ms ease;
    -webkit-overflow-scrolling: touch;
}

    .menu .content {
        margin-bottom: 0px !important;
    }

.menu-box-left {
    left: 0px;
    top: 0px !important;
    width: 250px;
    height: 100%;
    bottom: 0px;
    transform: translate3d(-100%, 0, 0);
}

.menu-box-right {
    display: none;
    right: 0px;
    transform: translateX(100%);
    top: 0px !important;
    height: 100%;
    bottom: 0px;
    width: 250px;
}

.menu-box-top {
    transform: translate3d(0, -115%, 0);
    top: 0px;
    left: 0px;
    right: 0px;
}

.menu-box-bottom {
    bottom: 0px;
    left: 0px;
    right: 0px;
    transform: translate3d(0, 110%, 0);
}

.menu-box-modal {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    opacity: 0;
    pointer-events: none;
    transition: all 200ms ease;
}

.menu-box-top.menu-box-detached {
    top: 10px;
    left: 10px;
    right: 10px;
}

.menu-box-bottom.menu-box-detached {
    bottom: 20px;
    left: 10px;
    right: 10px;
}

.menu-box-left.menu-active {
    transform: translate3d(0%, 0, 0) !important;
}

.menu-box-right.menu-active {
    transform: translate3d(0%, 0, 0) !important;
}

.menu-box-top.menu-active {
    transform: translate3d(0%, 0, 0) !important;
}

.is-on-homescreen .menu-box-top.menu-active {
    transform: translate3d(0%, 40px, 0) !important;
}

.menu-box-bottom.menu-active {
    transform: translate3d(0%, 20px, 0) !important;
}

.menu-box-bottom-full.menu-active {
    transform: translate3d(0%, 0px, 0) !important;
}

.menu-box-modal.menu-active {
    transition: all 200ms ease;
    pointer-events: all !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
}

.menu-hider.menu-active {
    transition: all 300ms ease;
    opacity: 1;
    pointer-events: all;
}

    .menu-hider.menu-active.menu-active-clear {
        background-color: rgba(0, 0, 0, 0) !important;
    }

.menu-box-left[data-menu-effect=menu-reveal] {
    opacity: 0;
    pointer-events: none;
    transform: translate(0px) !important;
    z-index: 96;
}

.menu-box-right[data-menu-effect=menu-reveal] {
    opacity: 0;
    pointer-events: none;
    transform: translate(0px) !important;
    z-index: 96;
}

.menu-box-bottom[data-menu-height=cover],
.menu-box-top[data-menu-height=cover] {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.menu-active.menu {
    opacity: 1 !important;
    transition: all 300ms ease;
    pointer-events: all !important;
}

.theme-light input, select, textarea {
    /*CY REMOVED border-color: rgba(0, 0, 0, 0.08) !important;*/
}

.input-style {
    position: relative;
    margin-bottom: 10px !important;
}

    .input-style input,
    .input-style select,
    .input-style textarea {
        font-size: 12px;
        width: 100%;
        line-height: 45px;
        height: 45px;
        border-top-width: 0px;
        border-right-width: 0px;
        border-left-width: 0px;
        padding: 0px;
        border-radius: 0px;
    }

        .input-style select,
        .input-style select option,
        .input-style select option:disabled {
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
        }

    .input-style label {
        opacity: 0;
        left: 0px !important;
        transform: translateX(30px);
        position: absolute;
        top: -12px;
        height: 10px;
        font-size: 10px;
        transition: all 150ms ease;
        background-color: #FFF;
    }

.input-style-active label {
    opacity: 1;
    transform: none !important;
}

.input-style.has-icon i:first-child {
    position: absolute;
    top: 50%;
    width: 10px;
    text-align: center;
    margin-top: -8px;
}

.input-style.has-icon.has-borders i:first-child {
    position: absolute;
    top: 50%;
    width: 10px;
    padding-left: 15px !important;
    text-align: center;
    margin-top: -7px;
}

.input-style.has-icon.has-borders input,
.input-style.has-icon.has-borders select,
.input-style.has-icon.has-borders textarea {
    padding-left: 35px !important;
}

.input-style.has-icon input,
.input-style.has-icon select,
.input-style.has-icon textarea {
    padding-left: 25px;
}

.input-style input[type=date]::-webkit-calendar-picker-indicator {
    opacity: 0.3;
}

.input-style textarea {
    line-height: 32px !important;
    padding-top: 10px !important;
    transition: all 250ms ease !important;
}

    .input-style textarea:focus {
        line-height: 24px !important;
    }

.input-style select {
    color: inherit;
}

.input-style input[type=date] {
    color: inherit;
}

.input-style em,
.input-style span,
.input-style .valid,
.input-style .invalid {
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: 5px;
    pointer-events: none;
}



.input-style.has-borders input,
.input-style.has-borders select,
.input-style.has-borders textarea {
    height: 53px;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
    border-top-width: 1px !important;
    padding-left: 13px !important;
    padding-right: 10px !important;
    border-radius: 10px !important;
}

.input-style.has-borders .valid,
.input-style.has-borders .invalid,
.input-style.has-borders span,
.input-style.has-borders em {
    margin-right: 10px;
}

.input-style.input-style-active label {
    left: 4px !important;
    transform: translateX(-14px) !important;
    position: absolute;
    padding: 0px 8px !important;
    height: 23px;
    font-size: 12px;
    transition: all 250ms ease;
    background-color: #FFF;
}

.input-style.has-borders.input-style-active label {
    margin-left: 14px !important;
}

.input-style textarea:focus {
    height: 150px;
    transition: all 250ms ease !important;
}

.input-style.no-borders.input-style-always-active label {
    opacity: 1;
    left: 6px !important;
    transform: translateX(-14px) !important;
    margin-left: 0px !important;
    position: absolute;
    padding: 0px 8px !important;
    height: 23px;
    font-size: 12px;
    transition: all 250ms ease;
    background-color: #FFF;
}

.input-style.has-borders.input-style-always-active label {
    opacity: 1;
    left: 23px !important;
    transform: translateX(-14px) !important;
    margin-left: 0px !important;
    position: absolute;
    padding: 0px 5px !important;
    height: 23px;
    font-size: 12px;
    transition: all 250ms ease;
    background-color: #FFF;
}

.input-style.has-borders .valid, .input-style.has-borders .invalid, .input-style.has-borders span, .input-style.has-borders em {
    margin-right: 10px;
}

.input-style em, .input-style span {
    margin-top: -12px;
    font-size: 10px;
    font-style: normal;
    opacity: 0.3;
}




.font-13 {
    font-size: 13px !important;
}

.font-600 {
    font-weight: 600;
}

.rounded-s {
    border-radius: 8px !important;
}

.gradient-blue {
    background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC);
    color: #FFF;
}

.btn-full {
    display: block;
}

.btn-l {
    padding: 14px 26px !important;
}



.page-title h1 {
    margin-right: auto;
    font-weight: 700 !important;
    font-size: 28px;
    padding-top: 3px;
}

.font-16 {
    font-size: 16px !important;
}

.color-highlight {
    color: #4A89DC;
}

.color-highlight {
    color: #4A89DC !important;
}




.z-above {
    z-index: 10000 !important;
}


.font-inter {
    font-family: "Inter", sans-serif;
}



/**HIERARCHY select CSS*/

.hierarchy-select.dropdown .hs-searchbox {
    padding: 0 5px 4px
}

.hierarchy-select.dropdown .dropdown-menu a[data-level='2'] {
    padding-left: 40px
}

.hierarchy-select.dropdown .dropdown-menu a[data-level='3'] {
    padding-left: 60px
}

.hierarchy-select.dropdown .dropdown-menu a[data-level='4'] {
    padding-left: 80px
}

.hierarchy-select.dropdown .dropdown-menu a[data-level='5'] {
    padding-left: 100px
}

.hierarchy-select.dropdown .dropdown-menu a[data-level='6'] {
    padding-left: 120px
}

.hierarchy-select.dropdown .dropdown-menu a[data-level='7'] {
    padding-left: 140px
}

.hierarchy-select.dropdown .dropdown-menu a[data-level='8'] {
    padding-left: 160px
}

.hierarchy-select.dropdown .dropdown-menu a[data-level='9'] {
    padding-left: 180px
}

.hierarchy-select.dropdown .dropdown-menu a[data-level='10'] {
    padding-left: 200px
}





.text-27 {
    font-size: 27px !important;
}




.xl-parForm {
    width: 40px !important;
}
.xxl-parForm {
    width: 60px !important;
}




.height48 {
    height: 50px !important
}



.loaderMeasureIcon {
    width: 8px;
    height: 40px;
    border-radius: 4px;
    display: block;
    margin: 20px auto;
    position: relative;
    background: currentColor;
    color: #0370ba;
    box-sizing: border-box;
    animation: animloader 0.3s 0.3s linear infinite alternate;
}

    .loaderMeasureIcon::after, .loaderMeasureIcon::before {
        content: '';
        width: 8px;
        height: 40px;
        border-radius: 4px;
        background: currentColor;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 20px;
        box-sizing: border-box;
        animation: animloader 0.3s 0.45s linear infinite alternate;
    }

    .loaderMeasureIcon::before {
        left: -20px;
        animation-delay: 0s;
    }

@keyframes animloader {
    0% {
        height: 48px
    }

    100% {
        height: 4px
    }
}





@-webkit-keyframes fadeInOnce {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeInOnce {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInOnce {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeInOnce {
    -webkit-animation: fadeInOnce 1s ease-in-out 0s;
    -moz-animation: fadeInOnce 1s ease-in-out 0s;
    -o-animation: fadeInOnce 1s ease-in-out 0s;
    animation: fadeInOnce 1s ease-in-out 0s;
}



.sticky-top-tare {
    position: -webkit-sticky;
    position: sticky !important;
    top: 50px !important;
    z-index: 1020;
    background: white;
    /* padding: 30px; */
    /* width: 100%; */
}






.sticky-bp {
    background-color: white !important;
    position: sticky;
    top: 55px !important;
    /* width: 100%; */
    z-index: 100;
}

.sticky-bp-wall {
    position: sticky;
    top: 110px !important;
    padding-bottom: 7px;
    z-index: 99;
    background: white !important;
}




ul#menuItemsUL {
    font-weight: 500;
    border-radius: 20px;
    margin-left: 20px;
    margin-right: 20px;
}





.bg-background-dark {
    background: rgba(0,0,0,.5);
}


.select2-selection {
    overflow: hidden;
}

.select2-selection__rendered {
    white-space: normal;
    word-break: break-all;
}




/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.form-control-searchfacility:focus {
    box-shadow: none !important;
    border: none !important;
}

.form-control-underlined {
    border-width: 0;
    border-bottom-width: 1px;
    border-radius: 0;
    padding-left: 0;
}

/*
*
* ==========================================
* FOR DEMO PURPOSE
* ==========================================
*
*/



.form-control::placeholder {
    font-size: 0.95rem;
    color: #aaa;
    font-style: italic;
}





.btn-move-multicolor {
    text-align: center;
    color: rgba(255,255,255,0.9);
    border-radius: 50px;
    background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
    background-size: 600%;
    -webkit-animation: anime 16s linear infinite;
    animation: anime 16s linear infinite;
}

.btn-move-multicolor-green {
    background: linear-gradient(-45deg, #0dbb71,#85d1b0, #0370ba);
    background-size: 500%;
    animation: Gradient 5s ease infinite;
    text-align: center;
    color: rgba(255,255,255,0.9) !important;
    /* border-radius: 50px; */
}

.btn-move-multicolor-blue {
    text-align: center;
    color: rgba(255,255,255,0.9);
    border-radius: 50px;
    background: linear-gradient(-45deg, #3cf0c5, #338aff, #3cf0c5, #338aff);
    background-size: 600% !important;
    -webkit-animation: anime 16s linear infinite;
    animation: anime 16s linear infinite;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-webkit-keyframes anime {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes anime {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.fixed-bottom-log {
    position: fixed !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

.componentSearch {
    margin-left: 20px;
    margin-right: 20px;
    /* position: relative; */
    /* padding: 2rem; */
    background: #f6f6f6;
    border-radius: 16px;
    /* transform: translateY(-40%); */
    display: flex;
    align-items: center;
    justify-content: center;
}

.displaySearch {
    padding: 1rem;
    border: none;
    border-radius: 8px;
    background: #EDEFFB;
    outline: 2px solid #EDEFFB;
    transition: all 300ms;
    cursor: pointer;
    user-select: none;
}

    .displaySearch:active {
        outline-color: #99A8FF;
    }

    .displaySearch .icon {
        transition: 300ms;
        transform: rotate(180deg);
        pointer-events: none;
    }

.selectSearch {
    position: absolute;
    top: 100px;
    left: 25px;
    padding: 1rem;
    background: #FFF;
    box-shadow: 0 16px 15px rgba(17,16,60,0.1);
    border-radius: 16px;
    transition: 300ms;
    opacity: 0;
    transform: translateY(-50px);
}

    .selectSearch.open {
        opacity: 1;
        transform: translateY(0);
    }

    .selectSearch p {
        padding: 1rem;
        cursor: pointer;
        user-select: none;
        transition: 200ms;
        border-radius: 8px;
    }

#select p:hover {
    background-color: #EDEFFB;
}

.inputSearch {
    display: flex;
    align-items: center;
    padding-left: 1rem;
}

    .inputSearch > input {
        font: inherit;
        padding: 1rem;
        padding-left: 6px;
        padding-right: 10px;
        border: none;
        outline: none;
        background: transparent;
        border-bottom: 1px solid transparent;
        transition: 200ms;
    }


.bg-light-search {
    background: rgb(249,249,249) !important;
}



.switch-field {
    align-content: center;
    justify-content: center !important;
    /* overflow: hidden; */
    justify-content: stretch !Important;
}

.switch-title {
    margin-bottom: 6px;
}

.switch-field input {
    display: none;
}

.switch-field label {
    /* float: left; */
}

.switch-field label {
    width: 150px;
    border-radius: 50px !Important;
    background-color: #fafafa;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-shadow: none;
    padding: 6px 14px;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.1);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

    .switch-field label:hover {
        cursor: pointer;
    }

.switch-field .switcher_true:checked + label {
    background-color: #e5f5ff;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #0370ba;
}

.switch-field .switcher_false:checked + label {
    background-color: #d9534f;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
}

/*ADDED DUE TO TABLE DISRUPTING UI
.table-responsive table {
    max-width: 100vw !important;
    overflow-y: scroll !important;
    display: block !important;
}*/



.text-blue-bold {
    color: #007bff !important;
    background-image: unset !important;
    -webkit-text-fill-color: #003b7b;
    font-size: 24px;
}

.d-none {
    display: none !important
}



.order-details-short {
    list-style: none;
    padding: 10px;
    /* border: 1px solid #ccc; */
    margin: 10px 0;
    background-color: #ffffff;
    /* box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); */
    display: block;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: 20px;
}

.btn-delete-color {
    background: rgb(107, 116, 123) !important;
    border-color: transparent !important;
    color: #E1E1E1 !important;
}



.dataTables_filter input[type="search"] {
    border: solid 1px lightgray;
    border-radius: 10px;
    padding-left: 10px !important;
}


    .dataTables_filter input[type="search"]:focus {
        outline: 2px solid #cacaca !important;
    }



.gradient-360-btn {
    background: #005289;
    background: -webkit-linear-gradient(to right, #005289, #2980b9);
    background: linear-gradient(to right, #0370ba, #1585d1, #0370ba);
    background-size: 200% !important;
}





.ctn-preloader {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: default;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 9000;
}

    .ctn-preloader .animation-preloader {
        z-index: 1000;
    }

        .ctn-preloader .animation-preloader .spinner {
            -webkit-animation: spinner 1s infinite linear;
            animation: spinner 1s infinite linear;
            border-radius: 50%;
            border: 3px solid rgba(0, 0, 0, 0.2);
            border-top-color: #000000;
            height: 9em;
            margin: 0 auto 3.5em auto;
            width: 9em;
        }

        .ctn-preloader .animation-preloader .txt-loading {
            font: bold 5em "Poppins", sans-serif;
            text-align: center;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            .ctn-preloader .animation-preloader .txt-loading .letters-loading {
                color: rgb(153 153 153 / 13%);
                position: relative;
            }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
                    -webkit-animation: letters-loading 4s infinite;
                    animation: letters-loading 4s infinite;
                    color: #0370ba;
                    content: attr(data-text-preloader);
                    left: 0;
                    opacity: 0;
                    font-family: "Poppins", sans-serif;
                    position: absolute;
                    top: -3px;
                    -webkit-transform: rotateY(-90deg);
                    transform: rotateY(-90deg);
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
                    -webkit-animation-delay: 0.2s;
                    animation-delay: 0.2s;
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
                    -webkit-animation-delay: 0.4s;
                    animation-delay: 0.4s;
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
                    -webkit-animation-delay: 0.6s;
                    animation-delay: 0.6s;
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
                    -webkit-animation-delay: 0.8s;
                    animation-delay: 0.8s;
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
                    -webkit-animation-delay: 1s;
                    animation-delay: 1s;
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
                    -webkit-animation-delay: 1.2s;
                    animation-delay: 1.2s;
                }

                .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
                    -webkit-animation-delay: 1.4s;
                    animation-delay: 1.4s;
                }

    .ctn-preloader.dark .animation-preloader .spinner {
        border-color: rgba(255, 255, 255, 0.2);
        border-top-color: #fff;
    }

    .ctn-preloader.dark .animation-preloader .txt-loading .letters-loading {
        color: rgba(255, 255, 255, 0.2);
    }

        .ctn-preloader.dark .animation-preloader .txt-loading .letters-loading:before {
            color: #fff;
        }

    .ctn-preloader p {
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 8px;
        color: #3b3b3b;
    }

    .ctn-preloader .loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 0;
        z-index: 1;
        pointer-events: none;
    }

        .ctn-preloader .loader .row {
            height: 100%;
        }

        .ctn-preloader .loader .loader-section {
            padding: 0px;
        }

            .ctn-preloader .loader .loader-section .bg {
                background-color: #ffffff;
                height: 100%;
                left: 0;
                width: 100%;
                -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
                -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
                transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
            }

        .ctn-preloader .loader.dark_bg .loader-section .bg {
            background: #111339;
        }

    .ctn-preloader.loaded .animation-preloader {
        opacity: 0;
        -webkit-transition: 0.3s ease-out;
        -o-transition: 0.3s ease-out;
        transition: 0.3s ease-out;
    }

    .ctn-preloader.loaded .loader-section .bg {
        width: 0;
        -webkit-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
        -o-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
        transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
    }

@-webkit-keyframes spinner {
    to {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@keyframes spinner {
    to {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@-webkit-keyframes letters-loading {
    0%, 75%, 100% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    25%, 50% {
        opacity: 1;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes letters-loading {
    0%, 75%, 100% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    25%, 50% {
        opacity: 1;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

.waves {
    position: fixed;
    width: 100%;
    height: 15vh;
    z-index: 1000000;
    left: 0px;
    bottom: 0;
}



/* Animation */

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

    .parallax > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
    }

    .parallax > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
    }

    .parallax > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
    }

    .parallax > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
    }

@keyframes move-forever {
    0% {
        transform: translate3d(-90px,0,0);
    }

    100% {
        transform: translate3d(85px,0,0);
    }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height: 100px;
        min-height: 100px;
    }

    .ctn-preloader .animation-preloader .txt-loading {
        font: bold 4em "Poppins", sans-serif;
        text-align: center;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

.pos-element-fixed {
    position: fixed;
    top: 10px;
    width: 90px !important;
    right: 40%;
    /* width: 75vw !important; */
    /* justify-content: center; */
    align-content: center;
}


.pos-abs {
    position: absolute;
    top: 40px;
    right: 12%;
    width: 75vw !important;
    justify-content: center;
    align-content: center;
}

#page-wrap-360-relative {
    /* parents of absolutely positioned elements must have a position */
    position: relative;
}


.pos-abs-icon {
    position: absolute;
    left: 5%;
    top: 10%;
    color: white;
    width: 15vw !important;
    justify-content: center;
    align-content: center;
}

.rounded-bottom-header {
    border-radius: 0px 0px 30px 30px;
    width: 100vw;
    height: 128px;
    /* background: #0066cc; */
    /* margin: 10px auto; */
    display: inline-block;
    background-image: linear-gradient(-45deg, #45a4e3, #0885d9, #438ee9, #5da4d3) !important;
    background-size: 400% 400% !important;
    animation: gradient-move 3s ease infinite !important;
    webkit-animation: gradient-move 3s ease infinite !important;
    border: transparent;
}


.card-absolute {
    position: relative;
    width: 90vw;
    top: -45px;
    left: 5%;
}

.pos-abs-header {
    position: absolute;
    top: 20px;
    left: 0px;
    /* width: 75vw !important; */
    justify-content: center;
    align-content: center;
}

.text-lightblue {
    color: #cadfed !important
}


.rounded-bottom-header-title {
    border-radius: 0px 0px 30px 30px;
    width: 100vw;
    height: 90px !important;
    /*   height: 12vh;*/
    /* background: #0066cc; */
    /* margin: 10px auto; */
    display: inline-block;
    background-image: linear-gradient(-45deg, #45a4e3, #0885d9, #438ee9, #5da4d3) !important;
    background-size: 400% 400% !important;
    animation: gradient-move 3s ease infinite !important;
    webkit-animation: gradient-move 3s ease infinite !important;
    border: transparent;
}


.no-padding {
    padding: 0px !important;
}

.wallet-card-section {
    position: relative
}

    .wallet-card-section:before {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        content: "";
        display: block;
        height: 140px;
        background: #6236FF
    }

.wallet-card {
    background: #ffffff;
    /* box-shadow: 0 1px 3px 0 rgba(0,0,0,0.09); */
    border-radius: 10px;
    /* padding: 20px 24px; */
    position: relative;
    z-index: 1
}

    .wallet-card .balance {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        height: 100px
    }

        .wallet-card .balance .left {
            padding-right: 10px
        }

        .wallet-card .balance .right {
            padding: 0
        }

            .wallet-card .balance .right .button {
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1em;
                color: #6236FF;
                background: rgba(98,54,255,0.1);
                width: 50px;
                height: 64px;
                font-size: 26px;
                border-radius: 10px
            }

                .wallet-card .balance .right .button:hover {
                    background: #6236FF !important;
                    color: #fff !important
                }

        .wallet-card .balance .title {
            color: #27173E;
            font-weight: 500;
            display: block;
            margin-bottom: 8px
        }

        .wallet-card .balance .total {
            font-weight: 700;
            letter-spacing: -0.01em;
            line-height: 1em;
            font-size: 32px
        }

    .wallet-card .wallet-footer {
        border-top: 1px solid #DCDCE9;
        padding-top: 20px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between
    }

        .wallet-card .wallet-footer .item {
            flex: 1;
            text-align: center
        }

            .wallet-card .wallet-footer .item a {
                display: block
            }

                .wallet-card .wallet-footer .item a:active {
                    transform: scale(0.94)
                }

            .wallet-card .wallet-footer .item .icon-wrapper {
                background: #106bd5;
                width: 48px;
                height: 48px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                color: #fff;
                font-size: 24px;
                margin-bottom: 14px
            }

            .wallet-card .wallet-footer .item strong {
                display: block;
                color: #27173E;
                font-weight: 500;
                font-size: 11px;
                line-height: 1.2em
            }


.pageItem360.active > div > i {
    color: #0370ba !important
}

/*TABS IN 360*/


.tabs-container {
    /*  position: absolute;*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


:root {
    --primary-color: #0370BA;
    --secondary-color: #e6eef9;
}

.tabs-mobile {
    display: flex;
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
    padding: 0.75rem;
    border-radius: 99px;
}

    .tabs-mobile * {
        z-index: 2;
    }


.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 115px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 99px;
    cursor: pointer;
    transition: color 0.15s ease-in;
    /* padding: 0px; */
    /* margin: 0px; */
    margin-bottom: 0;
}

.notification {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    border-radius: 50%;
    background-color: var(--secondary-color);
    transition: 0.15s ease-in;
}

input[type=radio]:checked + label {
    color: var(--primary-color);
}

    input[type=radio]:checked + label > .notification {
        background-color: var(--primary-color);
        color: #fff;
    }

input[id=radio-1-assigned]:checked ~ .glider-tasks {
    transform: translateX(0%);
}

input[id=radio-2-tasks]:checked ~ .glider-tasks {
    transform: translateX(90%);
}

input[id=radio-3-completed]:checked ~ .glider-tasks {
    transform: translateX(180%);
}


input[id=radio-1]:checked ~ .glider-tasks {
    transform: translateX(0);
}

input[id=radio-2]:checked ~ .glider-tasks {
    transform: translateX(90%);
}

input[id=radio-3]:checked ~ .glider-tasks {
    transform: translateX(180%);
}

input[class=tab1]:checked ~ .glider-tasks {
    transform: translateX(0);
}

input[class=tab2]:checked ~ .glider-tasks {
    transform: translateX(90%);
}

input[class=tab3]:checked ~ .glider-tasks {
    transform: translateX(180%);
}

input[class=tab1-2]:checked ~ .glider-tasks2 {
    transform: translateX(5%);
}

input[class=tab3-2]:checked ~ .glider-tasks2 {
    transform: translateX(110%);
}

.glider {
    position: absolute;
    display: flex;
    height: 32px;
    width: 115px;
    background-color: var(--secondary-color);
    z-index: 1;
    border-radius: 99px;
    transition: 0.25s ease-out;
}

.glider {
    position: absolute;
    display: flex;
    height: 32px;
    width: 115px;
    background-color: var(--secondary-color);
    z-index: 1;
    border-radius: 99px;
    transition: 0.25s ease-out;
}

.glider-tasks {
    position: absolute;
    display: flex;
    height: 32px;
    width: 30vw;
    background-color: var(--secondary-color);
    z-index: 1;
    border-radius: 99px;
    transition: 0.25s ease-out;
}


.glider-tasks2 {
    position: absolute;
    display: flex;
    height: 32px;
    width: 40vw;
    background-color: var(--secondary-color);
    z-index: 1;
    border-radius: 99px;
    transition: 0.25s ease-out;
}
.tab-task {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 30vw;
    font-size: 12px;
    font-weight: 500;
    border-radius: 99px;
    cursor: pointer;
    transition: color 0.15s ease-in;
    /* padding: 0px; */
    /* margin: 0px; */
    margin-bottom: 0;
}


.tab-task2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 45vw;
    font-size: 12px;
    font-weight: 500;
    border-radius: 99px;
    cursor: pointer;
    transition: color 0.15s ease-in;
    /* padding: 0px; */
    /* margin: 0px; */
    margin-bottom: 0;
}


@media (max-width: 700px) {
    .tabs-mobile {
        transform: scale(1);
    }
}

.tabs-mobile.tabs-mobile-long {
    width: 90vw;
}



.menu-bar-step {
    margin-bottom: 20px !important;
}


.step-on-top {
    margin-top: 20px !important;
}


.tabs-mobile input[type="radio"] {
    display: none;
}


.crop {
    overflow: hidden;
    white-space: nowrap;
    display: block;
    text-overflow: ellipsis;
    width: 150px;
}

.flashing-text-red {
    color: #EC4433 !important;
    animation: flash-red 3s linear infinite;
    opacity: 1;
}

@keyframes flash-red {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

div#successModal {
    z-index: 9999;
}





.button-blue-gradient:hover {
    color: white;
}


.button-blue-gradient {
    background: linear-gradient(-45deg, #60b8f3, #0370ba);
    animation: Gradient 10s ease infinite;
    /* font-family: 'Poppins'; */
    /* font-weight: 400; */
    /* letter-spacing: 0.5px; */
    transition: all 0.3s ease;
    cursor: pointer;
    /* border-radius: 26px; */
    background-size: 400% 400%;
    color: #ffffff;
    text-transform: uppercase;
    border: 0;
    padding: 13px 30px;
    font-size: 15px;
}


.button-red-gradient {
    background: linear-gradient(-45deg, #ba0303e6, #fb976f);
    animation: Gradient 10s ease infinite;
    /* font-family: 'Poppins'; */
    /* font-weight: 400; */
    /* letter-spacing: 0.5px; */
    transition: all 0.3s ease;
    cursor: pointer;
    /* border-radius: 26px; */
    background-size: 400% 400%;
    color: #ffffff;
    text-transform: uppercase;
    border: 0;
    padding: 13px 30px;
    font-size: 15px;
}









@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}




.button-green-gradient {
    background: linear-gradient(-45deg, #06a31ae6, #81bcff);
    animation: Gradient 10s ease infinite;
    /* font-family: 'Poppins'; */
    /* font-weight: 400; */
    /* letter-spacing: 0.5px; */
    transition: all 0.3s ease;
    cursor: pointer;
    /* border-radius: 26px; */
    background-size: 400% 400%;
    color: #ffffff;
    text-transform: uppercase;
    border: 0;
    padding: 13px 30px;
    font-size: 15px;
}

.button-green-gradient:hover {
    color: #ffffff;
}
/**********************************************************/
/**************** CALL DOWN STYLES START *****************/
/********************************************************/
div#steps_modal .modal-content {
    width: 100vw !important;
}

#callDownContent360 .btn:focus, .profile-section .btn:focus {
    background: var(--primary);
    color: #fff;
}


#callDownContent360 a.btn > svg {
    margin-left: 10px;
}

#callDownContent360 .btn:hover, .profile-section .btn:hover {
    background-color: var(--secondary);
    border-color: var(--primary);
    color: var(--primary);
}

#callDownContent360 .btn.border_btn:hover, .profile-section .btn.border_btn:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

#callDownContent360 .container, .par360settings .container {
    max-width: 800px;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 2;
    position: static;
}

#callDownContent360 section {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
}

#callDownContent360 header {
    background-color: var(--primary);
    padding: 26px 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

#callDownContent360 .hedare_wrp {
    position: relative;
}

#callDownContent360 .header_hedding h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    line-height: 1;
}

#callDownContent360 .hedare_wrp .previouse_btn {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    position: absolute;
    display: flex;
    align-items: center;
}


#callDownContent360 .icon_box {
    display: flex;
    border-radius: 6px;
    border: 1px solid #E1EAEF;
    background: #FFF;
    padding: 20px;
    margin-bottom: 18px;
    color: #676661;
    font-size: 13px;
    align-items: center;
    transition: all 0.4s;
    position: relative;
}

    #callDownContent360 .icon_box .icon_box_link {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    #callDownContent360 .icon_box a {
        display: block;
    }

    #callDownContent360 .icon_box .content {
        padding-left: 20px;
    }

        #callDownContent360 .icon_box .content .hedding {
            font-size: 18px;
            font-weight: 600;
            line-height: normal;
            color: #1886dd;
            margin-bottom: 0;
        }

    #callDownContent360 .icon_box:hover .content .hedding {
        color: #fff;
    }

    #callDownContent360 .icon_box:hover {
        color: #fff;
        background-color: var(--primary);
    }

        #callDownContent360 .icon_box:hover a {
            color: #fff;
        }

        #callDownContent360 .icon_box:hover svg path {
            fill: #fff
        }

#callDownContent360 .request_info_box, .request_info_card {
    border-radius: 10px;
    border: 1px solid #E1EAEF;
    background: #FFF;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);
    padding: 18px;
    margin-bottom: 12px;
}

    #callDownContent360 .request_info_box ul {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 15px;
        line-height: normal;
    }

#callDownContent360 .icon_box .icon svg {
    min-width: 38px;
    width: 38px;
    max-width: 38px;
    height: 38px;
}

#callDownContent360 .request_info_box ul li b {
    font-weight: 500;
    padding-left: 4px;
}

#callDownContent360 .request_info_box ul li {
    padding-bottom: 5px;
}

    #callDownContent360 .request_info_box ul li:last-child {
        padding-bottom: 0;
    }

#callDownContent360 .request_info_tabs button {
    color: var(--primary);
    border-radius: 8px;
    border: 1px solid var(--primary);
    background: transparent;
    width: 100%;
    height: 38px;
    line-height: 38px;
    padding: 0;
    font-size: 14px;
    text-transform: uppercase;
}

/* Mobile Devices */
@media (max-width: 480px) {
    #callDownContent360 .request_info_tabs button {
        font-size: 12px !important;
    }
}

#callDownContent360 .request_info_tabs button.active {
    background: var(--primary);
    color: #fff;
}

#callDownContent360 .request_info_tabs li.nav-item {
    width: calc(33.33% - 3px);
    /* width: calc(50% - 3px);*/
}

#callDownContent360 .request_info_tabs {
    border-radius: 10px;
    /* background: #D0EAFF;*/
    padding: 6px;
    margin-bottom: 20px;
    /*margin-top: 14px;*/
    gap: 4px;
}

    #callDownContent360 .request_info_tabs button:hover {
        background: var(--primary);
        color: #fff;
    }

#callDownContent360 .modal_content .sort-by-wrp .form-check {
    width: 50%;
    display: inline-block;
}

#callDownContent360 .modal_content .sort-type-wrp .form-check {
    display: inline-block;
}

#callDownContent360 .btn_wrp .btn {
    height: 30px;
    padding: 0px 16px;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
    border-radius: 50px;
}

#callDownContent360 .btn_wrp {
    text-align: right;
    margin-top: 10px;
}

    #callDownContent360 .btn_wrp .center {
        text-align: center !important;
    }

#callDownContent360 .filter_btn_wrp {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
}

#callDownContent360 html .btn-close {
    opacity: 1;
}

#callDownContent360 .btn-close:focus, .profile-section .btn-close:focus {
    box-shadow: none;
}

#callDownContent360 html .modal-header {
    border: none;
}

#callDownContent360 .modal_content .sort-by-wrp {
    border-top: 1px solid #DCDCDC;
    display: flex;
    flex-wrap: wrap;
}

#callDownContent360 .modal_content .sort-type-wrp {
    border-top: 1px solid #DCDCDC;
    display: flex;
    flex-wrap: wrap;
}

#callDownContent360 .modal_content .form-check-input[type=radio] {
    position: relative;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    background-color: #F2F2FF;
    width: 18px;
    height: 18px;
    border-radius: 50px;
    margin-top: -1px;
    vertical-align: middle;
}

#callDownContent360 .modal_content .form-check-input:checked[type=radio] {
    background-color: var(--primary);
    box-shadow: none;
}

#callDownContent360 .modal_content label.form-check-label {
    font-size: 13px;
    padding-left: 0px;
    line-height: 19px;
    display: inline;
}

#callDownContent360 .modal-footer.btn_wrp .btn {
    border-radius: 50px;
    font-size: 16px;
    text-transform: uppercase;
    padding: 5px 25px;
    height: auto;
}

#callDownContent360 .modal-footer.btn_wrp {
    border: none;
    padding-top: 0;
}

#callDownContent360 .filter_modal .modal-body {
    padding-bottom: 0;
    padding-top: 5px;
}

#callDownContent360 .modal_content form {
    margin: 0;
}

#callDownContent360 .modal_content .sort-by-wrp .form-check {
    margin-bottom: 10px;
    padding-left: 0;
}

#callDownContent360 .modal_content .sort-type-wrp .form-check {
    padding-left: 0;
    padding-right: 1.25rem;
}

#callDownContent360 .details_info li {
    background: #fff;
    margin-bottom: 6px;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 15px;
}

#callDownContent360 .details_info ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
}

#callDownContent360 .details_info li b {
    font-weight: 600;
}

#callDownContent360 .details_info_decription h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

#callDownContent360 .details_info_decription {
    margin-top: 25px
}

    #callDownContent360 .details_info_decription p {
        font-size: 14px;
        line-height: 140%;
    }

#callDownContent360 .filter_modal .modal-title {
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 600;
}

#callDownContent360 .modal_content h6 {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
}

#callDownContent360 .filter_modal .modal-content {
    border-radius: 16px;
}


#callDownContent360 .fade-out {
    animation: fade 2s;
    -webkit-animation: fade 2s;
    -moz-animation: fade 2s;
}

#callDownContent360 .modal-header .btn-close, .profile-section, .profile-section .modal-header .btn-close {
    padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
    margin: calc(var(--bs-modal-header-padding-y) * -.5) calc(var(--bs-modal-header-padding-x) * -.5) calc(var(--bs-modal-header-padding-y) * -.5) auto;
}


    #callDownContent360 .btn-close, .profile-section .btn-close {
        box-sizing: content-box;
        width: 1em;
        height: 1em;
        /* padding: 0.25em 0.25em; */
        color: #000;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2523000'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat;
        border: 0;
        border-radius: 0.375rem;
        opacity: .5;
    }



#callDownContent360 .modal .btn-close {
    box-sizing: content-box;
    width: 1.25em;
    height: 1.25em;
    /* padding: 0.25em 0.25em; */
    color: #000;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>') center/contain no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: 1 !important;
}

#callDownContent360 .request_info_card.bg {
    background: #F1F9FF;
    position: relative;
    padding-left: 60px;
}

#callDownContent360 .absolute-icon {
    position: absolute;
    top: 45%;
    left: 8px;
}

    #callDownContent360 .absolute-icon svg {
        height: 35px;
        width: 45px;
    }


#callDownContent360 img, svg {
    vertical-align: middle;
}


#callDownContent360 .pull-to-refresh {
    display: none;
    transition: top 0.7s ease-in-out;
    width: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    transition: top 0.7s ease-in-out;
}

    /*#callDownContent360 .pull-to-refresh {
    display:none;
    transition: top 0.7s ease-in-out;*/
    /* position: fixed;
    top: -50px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: top 0.7s ease-in-out;*/
    /*}*/

    #callDownContent360 .pull-to-refresh.visible {
        transition: top 0.7s ease-in-out;
        display: block;
        top: 0;
    }

/*#callDownContent360 .tweets {*/
/*  height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;*/
/*}*/




#callDownContent360 div#steps_modal {
    background: #F9F9F9;
}

#callDownContent360 div#assign_modal {
    background: #F9F9F9;
}

#callDownContent360 .steps_modal .btn-close, .profile-section .steps_modal .btn-close {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9999999;
}

#callDownContent360 .steps_modal form {
    padding-top: 90px;
    padding-bottom: 92px;
}


/*
#callDownContent360 .top_bar {
    position: fixed;
    top: 0;
    background: #f3f3f3;
    width: 100%;
    padding: 20px 0px;
    z-index: 999;
}*/

#callDownContent360 .top_bar, .par360modal-popup .top_bar, .profile-section .top_bar {
    position: fixed;
    top: 0;
    background: #007fe3;
    width: 100%;
    /* padding: 20px 0px;*/
    padding: 10px 0px 5px 0px;
    z-index: 999;
    border-radius: 0px 0px 30px 30px;
    border-radius: 0px 0px 30px 30px;
    width: 100vw;
    height: 13.5vh;
    /* background: #0066cc; */
    /* margin: 10px auto; */
    display: inline-block;
    background-image: linear-gradient(-45deg, #45a4e3, #0885d9, #438ee9, #5da4d3) !important;
    background-size: 400% 400% !important;
    animation: gradient-move 3s ease infinite !important;
    webkit-animation: gradient-move 3s ease infinite !important;
    border: transparent;
}



    #callDownContent360 .top_bar .step, .par360modal-popup .top_bar .step {
        min-width: 72px;
        height: 72px;
    }




    #callDownContent360 .top_bar .text, .par360modal-popup .top_bar .text {
        padding-left: 18px;
    }

        #callDownContent360 .top_bar .text h4, .par360modal-popup .top_bar .text h4 {
            font-size: 19px;
            margin-bottom: 2px;
            text-transform: capitalize;
        }

        #callDownContent360 .top_bar .text p, .par360modal-popup .top_bar .text p {
            font-size: 13px;
            margin-bottom: 0;
        }

#callDownContent360 p:last-child {
    margin-bottom: 0;
}


#callDownContent360 .top_bar .step img {
    width: 100%;
    height: 100%;
}

/*#callDownContent360 img {
    max-width: 100%;
    width: auto;
    height: auto;
    z-index: 1;
}*/


#callDownContent360 .step h6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
}



#callDownContent360 .container {
    max-width: 800px;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 2;
    position: static;
}



#callDownContent360 .input-field {
    margin-bottom: 20px;
}


#callDownContent360 label {
    color: #26241F;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    width: 100%;
    margin-bottom: 6px;
}

    #callDownContent360 label em {
        color: #D6372E;
        font-style: normal;
        font-size: 17px;
    }


/*
#callDownContent360 .form-step .input-field input,
#callDownContent360 .form-step .input-field select,
#callDownContent360 .form-step .input-field textarea,
.profile-section .form-step .input-field input,
.profile-section .form-step .input-field select,
.profile-section .form-step .input-field textarea {
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.05);
    height: 44px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid transparent;
}*/

#callDownContent360 .form-footer, .profile-section .form-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100% !important;
    bottom: 0;
    padding: 20px 0;
    background: #F1F9FF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
    z-index: 2;
}

#callDownContent360 .form-footer-inner, .profile-section .form-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    gap: 8px;
    padding: 0 15px;
    width: 100%;
    margin: 0 auto;
}

#callDownContent360 .btn.border_btn, .profile-section .btn.border_btn {
    background: #F1F9FF;
    border: 1px solid #0370BA;
    color: #0370BA;
}

    #callDownContent360 .btn.border_btn:hover, .profile-section .btn.border_btn:hover {
        background-color: #b1e0ff;
        border-color: #a9d7f6;
        color: var#0370BA;
    }



#callDownContent360 .form-footer .btn, .profile-section .form-footer .btn {
    width: 100%;
    border-radius: 50px;
    height: 38px;
    text-transform: uppercase;
}

    #callDownContent360 .form-footer .btn.btn-unset {
        /*   width: unset !important;
           border-radius: unset !important;
        height: unset !important;*/
        text-transform: unset !important;
    }

/* Removed -- caused UI issues... 
    #callDownContent360 .btn, .profile-section .btn {
    background: var(--primary);
    box-shadow: 0 0 0 transparent !important;
    border-radius: 10px;
    padding: 0;
    line-height: 30px;
    border: 1px solid transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    transition: all 0.4s;
}*/



#callDownContent360 .text-white h4 {
    color: #fff !important;
}



#callDownContent360 .complete_btn {
    text-align: center;
}

    #callDownContent360 .complete_btn .btn {
        height: 44px;
        padding: 0px 19px;
        border-radius: 50px;
        width: 198px;
        margin-top: 50px;
    }



#callDownContent360 .select_img_hedd {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px;
}


#callDownContent360 .upload__box {
    display: flex;
    align-items: flex-start;
}


#callDownContent360 .upload__btn-box {
    margin-bottom: 10px;
}

#callDownContent360 .upload__btn {
    border-radius: 12px;
    border: 1px solid #D4E7F6;
    background: #FFF;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}


#callDownContent360 .upload__img-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0px;
}


#callDownContent360 .upload__inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

#callDownContent360 .form-step .input-field textarea {
    height: 100px;
    padding: 12px;
}


#callDownContent360 .upload__img-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0px;
}

#callDownContent360 .upload__img-box {
    width: 78px;
    padding: 0 5px;
    margin-bottom: 12px;
}


#callDownContent360 .upload__img-box {
    width: 78px;
    padding: 0 5px;
    margin-bottom: 12px;
}

#callDownContent360 .upload__img-close {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #D6372E;
    position: absolute;
    top: -5px;
    right: -5px;
    text-align: center;
    line-height: 14px;
    z-index: 1;
    cursor: pointer;
}

    #callDownContent360 .upload__img-close:after {
        content: '\2716';
        font-size: 12px;
        color: white;
    }

#callDownContent360 .img-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding-bottom: 100%;
    border-radius: 5px;
}



#callDownContent360 .submit_form_popup {
    padding: 18px 18px 48px;
}

#callDownContent360 .submit_form .modal-dialog {
    max-width: 345px;
}

#callDownContent360 .submit_form.show .modal-dialog {
    animation: Modal_popup 300ms cubic-bezier(.39,.575,.565,1) 0s both;
}

@keyframes Modal_popup {
    0% {
        transform: translateY(50px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

#callDownContent360 .submit_form_popup h4 {
    font-size: 22px;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 0;
}

#callDownContent360 .popup-body p {
    color: #26241F;
    font-size: 22px;
    font-weight: 500;
    line-height: normal;
}

#callDownContent360 .popup-body {
    padding: 30px 0;
}

#callDownContent360 .submit_form_popup .popup-footer .btn {
    height: 40px;
    padding: 5px 25px;
    border-radius: 50px;
    text-transform: uppercase;
}

#callDownContent360 .submit_form {
    display: none;
}

    #callDownContent360 .submit_form.show {
        display: flex !important;
        justify-content: center;
        background: rgb(0 18 29 / 80%);
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 9999999;
        align-items: center;
    }

#callDownContent360 .modal_scan .modal-content {
    border-radius: 0;
    height: 100vh;
    border: 0 none;
    background: #000;
    z-index: 2000;
}

#callDownContent360 .modal_scan {
    z-index: 2000;
}


#callDownContent360 .upload__box_wrap {
    display: flex;
}


#callDownContent360 .camerabox {
    overflow: hidden;
    height: calc(100vh - 190px);
}

    #callDownContent360 .camerabox video {
        display: block;
        position: relative !important;
    }

#callDownContent360 .camera-btn-area {
    text-align: center;
    margin: 10px 0;
}

#callDownContent360 .btn.camera_change {
    padding: 10px 8px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary);
    width: 50px;
    height: 50px;
}


#callDownContent360 .scan_btn .btn {
    height: 44px;
    padding: 0px 19px;
    border-radius: 50px;
    width: 198px;
}

    #callDownContent360 .scan_btn .btn svg {
        margin-right: 10px;
    }


#callDownContent360 a.btn > svg {
    margin-left: 10px;
}


#callDownContent360 .search-box .input-field {
    position: relative;
}

#callDownContent360 .users-list .user-info {
    position: relative;
}

#callDownContent360 .users-list li span {
    display: block;
    line-height: 25px;
}


#callDownContent360 .user-info .form-check {
    position: absolute;
    right: 25px;
    top: 4px;
}


#callDownContent360 .details_info li:nth-child(odd) {
    background: #f9f9f9;
    margin-bottom: 6px;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 15px;
}



#callDownContent360 .user-save-btn {
    text-align: center;
    margin-top: 20px;
}

/**********************************************************/
/**************** CALL DOWN STYLES END *****************/
/********************************************************/








.hidden-accessible {
    position: absolute;
    left: -999em;
}

.circle-progress-sm {
    position: relative;
}

.progressBar {
    position: relative;
    width: 40px; /* Adjust the width and height as needed */
    height: 40px;
}

.circle-progress-sm text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px; /* Adjust the font size as needed */
    font-weight: bold;
}






.selectStyle {
    position: relative;
    min-width: 150px;
}

    .selectStyle svg {
        position: absolute;
        right: 12px;
        top: calc(50% - 3px);
        width: 10px;
        height: 6px;
        stroke-width: 2px;
        stroke: #9098a9;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
    }

    .selectStyle select {
        -webkit-appearance: none;
        padding: 7px 40px 7px 12px;
        width: 100%;
        border: 1px solid #e8eaed;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 1px 3px -2px #9098a9;
        cursor: pointer;
        font-family: inherit;
        font-size: 16px;
        transition: all 150ms ease;
    }

        .selectStyle select:required:invalid {
            color: #5a667f;
        }

        .selectStyle select option {
            color: #223254;
        }

            .selectStyle select option[value=""][disabled] {
                display: none;
            }

        .selectStyle select:focus {
            outline: none;
            border-color: #07f;
            box-shadow: 0 0 0 2px rgba(0,119,255,0.2);
        }

        .selectStyle select:hover + svg {
            stroke: #07f;
        }

.sprites {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}




@keyframes flash {
    0% {
        background-color: #cdebd4;
    }

    50% {
        background-color: transparent;
    }

    100% {
        background-color: #cdebd4;
    }
}

.flash-green {
    animation: flash 1s ease-in-out 3; /* 3 iterations of 1s each */
}
.flash-green-done {
    animation: none; /* This class stops the animation */
}


.loadingInProgress {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgb(253 148 0);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

.text-13-gray {
    font-size: 13px !important;
    color: #6C7C94;
}

.text-15-bold {
    font-size: 15px !important;
    font-weight: 700 !important;
}


.lower {
    margin: 0px 17px 0px 20px !important;
    padding-bottom: 20px !important;
}

.chat-list {
    max-width: 100%;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.chat-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .chat-item img {
        border-radius: 50%;
        margin-right: 15px;
    }

    .chat-item:hover {
        background-color: #f9f9f9;
    }

.user-details {
    flex: 1;
}

.user-name {
    font-weight: bold;
}

@media (max-width: 100%) {
    .chat-list {
        max-width: 100%;
        border-radius: 0;
    }
}

/* Main Screen */
@media (max-width: 767px) {

    /* Add a margin to the remaining items to separate them */
    .wallet-footer .item {
        margin-bottom: 10px;
    }
}

/* Chat header */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}


.bg-lightHeader {
    background-color: #f2f2f2;
}

/* User avatar */
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

/* User name */
.user-name {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: large;
}

/* Online status indicator */
.online-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #2ecc71; /* Change to your online status color */
}

/* Media query for mobile responsiveness */

@media screen and (max-width: 768px) {

    .chat-header {
        padding: 10px;
    }

    .user-avatar {
        width: 30px;
        height: 30px;
    }

    /* Adjust other styles for smaller screens if needed */

}


.message {
    padding: 5px 10px;
    margin: 5px;
    border-radius: 8px;
    max-width: 70%;
    word-wrap: break-word;
}

.sender {
    background-color: #007bff66;
    align-self: flex-end;
    color: #000; /* Change text color as needed */
    border-radius: 10px;
    padding: 10px;
    margin: 5px;
    max-width: 70%; /* Adjust based on your layout */
    word-wrap: break-word;
}

.receiver {
    background-color: #E5E5EA;
    align-self: flex-start;
    color: #000; /* Change text color as needed */
    border-radius: 10px;
    padding: 10px;
    margin: 5px;
    max-width: 70%; /* Adjust based on your layout */
    word-wrap: break-word; /* To break long words if needed */
}

.chat-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 20px;
}

.chat-input-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 20px;
}


/* Input field */
.chat-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
}

/* Send button */
.send-button {
    padding: 8px 15px;
    background-color: #007bff; /* Change to your desired color */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Media query for mobile responsiveness */
@media screen and (max-width: 768px) {
    .chat-input {
        margin-right: 5px;
        font-size: 14px;
    }

    .send-button {
        /*padding: 6px 12px;*/
        font-size: 14px;
    }
    /* Adjust other styles for smaller screens if needed */
}

.sender-time {
    align-self: end
}

#messageForm {
    position: fixed;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.ticks {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
    margin-bottom: -10px;
}

.tick {
    color: #4CAF50; /* Green color for tick marks */
}

.unread-tick {
    color: #484848; /* Grey color for tick marks */
}

/* classes for break time watch*/
.stopwatch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 55vh;
}

.stopwatch-modal-body {
    /* width: 220px;
    height: 220px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
    width: 220px;
    height: 220px;
    margin: 0px auto 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #42a1e1;
    box-shadow: 1px 3px 15px 0px #0003;
    border-radius: 100%;
    font-size: 35px;
    font-weight: 600;
    color: #fff;
    /* border: 5px solid #fff;*/
}

/*#timer {
    font-size: 2.5em;*/
/*margin-bottom: 20px;*/
/*color: black;
}*/

/* css class for Today's Activity */


.todays-activity-toolbar {
    margin-bottom: 8px;
}

.todays-activity-toolbar .todays-activity-back {
    font-weight: 600;
    color: #007bff;
    font-size: 15px;
    text-decoration: none;
}

.todays-activity-toolbar .todays-activity-back:hover {
    color: #0056b3;
    text-decoration: none;
}

.todays-activity-table .activity-type-badge {
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.35em 0.65em;
    white-space: normal;
    text-align: left;
}

.todays-activity-table .activity-time-main {
    font-weight: 600;
    font-size: 0.95rem;
}

.todays-activity-table .activity-time-sub {
    font-size: 0.8rem;
    margin-top: 2px;
}

.todays-activity-empty-row td {
    border-bottom: none !important;
    background: transparent !important;
}

.dynamic-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    .dynamic-table th {
        background-color: #f2f2f2;
        padding: 12px;
        text-align: left;
    }

    .todays-activity-table.dynamic-table th {
        background: linear-gradient(to bottom, #fafbfc, #eef1f4);
        color: #5a6570;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        border-bottom: 2px solid #dee2e6;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .dynamic-table tr.item:nth-child(even) {
        background-color: #f9f9f9;
    }

    .dynamic-table tr.item:nth-child(odd) {
        background-color: #ffffff;
    }

    .dynamic-table td {
        padding: 12px;
        border-bottom: 1px solid #ddd;
    }

    .todays-activity-table.dynamic-table tr.item td {
        vertical-align: middle;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .dynamic-table tr.item:last-child td {
        border-bottom: none;
    }

/*Global Menu CSS */
.global-menu {
    position: fixed;
    top: 20px;
    right: 110px;
    z-index: 999;
}


.global-menu-abs {
    position: absolute;
    top: 20px;
    right: 25px;
    z-index: 999;
}

.flexDiv {
    display: flex;
    float: left;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin: 32px;
}

.selectWrapper {
    width: 100%;
    position: relative;
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms linear 0s;
    filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.24));
    padding-top: calc(var(--sizeVar) / 2);
}

.multiSelect-global-menu {
    clip-path: var(--clipPath, polygon(0 0, 100% 0, 100% 100%, 0% 100%)); /* Dynamic clip-path */
    border: var(--border, 1px solid var(--borderColor));
    box-sizing: border-box;
    border-radius: var(--borderRadius, calc(var(--sizeVar) / 2));
    position: absolute;
    width: var(--width, 150px); /* Dynamic width */
    height: var(--height, auto); /* Dynamic height */
    left: var(--left, -130px); /* Dynamic left position */
    right: var(--right, 0); /* Dynamic right position */
    overflow: hidden;
    background: var(--background, #ffffff);
    transition: transform 300ms ease-in-out 0s, clip-path 300ms ease-in-out 0s;
}

    .multiSelect-global-menu div {
        color: var(--textPrimary);
        padding: 16px;
        width: auto;
        cursor: pointer;
    }

        .multiSelect-global-menu div:hover {
            background-color: #f6f6f6;
        }

.bottomBorder {
    border-bottom: 1px solid var(--borderColor);
}

.topBorder {
    border-top: 1px solid var(--borderColor);
}

.iconDiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.noSpace {
    justify-content: flex-start;
    gap: 6px;
}

.titleDiv {
    pointer-events: none;
    font-weight: 700;
}

.justHover i {
    opacity: 0;
}

.justHover:hover i {
    opacity: 1;
}

.multiSelect-global-menu .placeholder {
    color: var(--textSecondary);
    font-style: italic;
}

.multiSelect-global-menu .narrow {
    padding-top: 10px;
    padding-bottom: 10px;
}

.multiSelect-global-menu i {
    color: var(--textSecondary);
}

.multiSelect-global-menu {
    transform: translateX(100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

    .multiSelect-global-menu:nth-of-type(1) {
        transform: translateX(0);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }


@media only screen and (max-width: 768px) {
    .global-menu {
        top: 20px;
        right: 25px;
    }

    .sec_btn {
        --bgColor: #869cff;
    }
}

.global-menu-font > i {
    font-family: "Inter", sans-serif !important;
    font-style: normal !important;
}
/* Cutomized css for Put away Search */
.put-away-card-static {
    position: static;
    width: 90vw;
    top: 10vh;
    left: 5%;
}

.put-away-dropdown-form-control-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 1rem;
    margin: 10px !important;
}

/*Cutomized css for Search Options */
.search-option-dropdown {
    flex-grow: 1;
}

.search-option-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}



/************************ CallDown Popup related changes **********************/



/************************ CallDown Popup related changes **********************/


/* Call Down Content 360 */
.call-down-modal-custom div.steps_modal, .request-submit-form div.steps_modal {
    background: #F9F9F9;
}

.call-down-modal-custom .steps_modal .btn-close, .request-submit-form .btn-close {
    position: fixed;
    top: 24px;
}

.call-down-modal-custom .top_bar .step.back-button-top, .request-submit-form .top_bar .step.back-button-top {
    display: flex;
    align-items: center;
    height: auto;
}

    .call-down-modal-custom .top_bar .step.back-button-top img, .request-submit-form .top_bar .step.back-button-top img {
        width: 20px;
    }

        .call-down-modal-custom .top_bar .text.popup-header-title, .request-submit-form .top_bar .text.popup-header-title {
            margin: 0;
            padding: 0;
        }

    .call-down-modal-custom .top_bar .text.popup-header-title h4, .request-submit-form .top_bar .text.popup-header-title h4 {
        margin: 0 5px;
    }

        .call-down-modal-custom .details_info li .btn, .request-submit-form .details_info li .btn {
            height: 32px;
            line-height: 32px;
            border-radius: 50px;
            font-size: 13px;
            padding: 0 12px;
            vertical-align: middle;
            margin: 0 0 0 10px;
        }

.call-down-modal-custom .steps_modal .form.page-content-form, .request-submit-form .form.page-content-form {
    height: calc(100vh - 110px);
    overflow-y: auto;
    padding-bottom: 30px;
}

    .call-down-modal-custom .steps_modal .form.page-content-form form, .request-submit-form .form.page-content-form form {
        padding-top: 70px;
        padding-bottom: 0;
    }

    .call-down-modal-custom .steps_modal .form.page-content-form .dropdown, .request-submit-form .form.page-content-form .dropdown {
        margin-bottom: 15px;
    }

    .call-down-modal-custom .steps_modal .form.page-content-form .form-control, .request-submit-form .form.page-content-form .form-control {
        padding: 10px 15px 11px !important;
        height: auto;
        font-size: 14px;
        border-radius: 5px;
        line-height: 1.5;
        width: 100%;
    }

    .call-down-modal-custom .steps_modal .form.page-content-form select.form-control, .request-submit-form .form.page-content-form select.form-control {
        background-image: url("../img/select-downarrow.png");
        background-position: center right 12px;
        background-repeat: no-repeat;
        background-size: 15px;
        padding-right: 35px !important;
    }

    .call-down-modal-custom .steps_modal .form.page-content-form .request-from-box, .request-submit-form .form.page-content-form .request-from-box {
        background: #fff;
        padding: 20px 20px 10px 20px;
        border: 1px solid #e6e6e6;
        border-radius: 5px;
    }

@media screen and (max-width: 450px) {
    .call-down-modal-custom .form-footer-inner.form-footer-inner-btn .btn, .request-submit-form .form-footer-inner.form-footer-inner-btn .btn {
        font-size: 13px;
        padding: 0 10px;
    }
}

.modal-align-center {
    width: 50vw;
    position: absolute;
    top: 0%;
}

.pageloader {
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    /* display: flex; */
    bottom: 0;
    /* height: 100vh !important; */
    z-index: 99999;
    background: rgba(255,255,255,.75);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

    .pageloader .spinner-border {
        /* z-index: 9999 !important; */
        /* top: 50% !important; */
        /* left: 50vw !important; */
        /* position: absolute; */
    }


.loader-bg-full {
    background-color: rgb(184 178 178 / 35%);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100svh;
    z-index: 99999;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-bg-small {
    background-color: rgb(184 178 178 / 35%);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(#0000 10%,#ffffff);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0);
    animation: s3 1s infinite linear;
}


#menuListContent360 {
    margin-top: -10px !important;
    /* margin-top: 160px !important;*/
}

/* Custom PAR 360 inventory menu list (Locate Item / Location Item Review)
   Lives on the 360 Menu page (#statusListContent360). */
#menuItemsForPar360 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
}

#menuItemsForPar360 .par360-custom-menu {
    background: #fff;
    border-radius: 16px;
    box-shadow: rgb(23 108 164 / 6%) 0px 7px 29px 0px;
    padding: 1rem 0 0.25rem;
    overflow: hidden;
}

#menuItemsForPar360 .par360-custom-menu > .menu-title {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

#menuItemsForPar360 .par360-custom-menu > .menu-title h1 {
    font-size: 1.35rem;
}

#menuItemsForPar360 #menuItemsULPar360 {
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent;
}

#menuItemsForPar360 #menuItemsULPar360 > li .item {
    cursor: pointer;
}

#menuItemsForPar360 #menuItemsULPar360 > li .item .icon-box {
    background-color: #DDF1FF;
}

#menuItemsForPar360 #menuItemsULPar360 > li .item .in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.errorUnassign {
    color: red;
}

.formNoPadding {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/*Customize class for autocomplete functionality*/
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    width: 400px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

.loaderRFID {
    position: relative;
    /* display: flex; */
}

    .loaderRFID:before, .loaderRFID:after {
        content: '';
        width: 15px;
        height: 15px;
        display: inline-block;
        position: relative;
        margin: 0 5px;
        border-radius: 50%;
        color: #e7e7e7;
        background: currentColor;
        box-shadow: 50px 0, -50px 0;
        animation: left 1s infinite ease-in-out;
    }

    .loaderRFID:after {
        color: #9b9b9b;
        animation: right 1.1s infinite ease-in-out;
    }


@keyframes right {
    0%, 100% {
        transform: translateY(-10px)
    }

    50% {
        transform: translateY(10px)
    }
}

@keyframes left {
    0%, 100% {
        transform: translateY(10px)
    }

    50% {
        transform: translateY(-10px)
    }
}



#useRfidForMultipleItems .custom-checkbox-rfid {
    display: none;
}


#useRfidForMultipleItems .btn-found-tranfer {
    display: none;
}


#useRfidForMultipleItems .item {
    padding-left: 0px;
    padding-right: 0px;
}


.loader-rfid {
    width: 28px;
    height: 28px;
    display: inline-block;
    position: relative;
}

    .loader-rfid::after,
    .loader-rfid::before {
        content: '';
        box-sizing: border-box;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #FFF;
        position: absolute;
        left: 0;
        top: 0;
        animation: animloaderRfid 2s linear infinite;
    }

    .loader-rfid::after {
        animation-delay: 1s;
    }

@keyframes animloaderRfid {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}





.btn-rfid-send {
    width: 150px;
    /* height: 100px; */
    /* font-size: 30px; */
    text-align: center;
    /* line-height: 100px; */
    color: rgba(255,255,255,0.9);
    border-radius: 50px;
    background: linear-gradient(-45deg, #6b8f70, #94cdab, #2dc37e);
    background-size: 600%;
    -webkit-animation: anime-rfid 5s linear infinite;
    animation: anime-rfid 5s linear infinite;
}

@-webkit-keyframes anime-rfid {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes anime-rfid {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.bubble {
    background: #E9E9EB;
    color: #212121;
    border-radius: 16px 16px 0 16px
}

.bg-main {
    background: #F9F9F9;
}



.searchbox .form-control-order {
    background: #efefef;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #fff !important;
    padding: 10px 16px 10px 36px;
}


.movingGreenGradientText {
    font-weight: 600;
    color: transparent;
    background-image: linear-gradient(to right,#4dab5b, #6dc97b, #38b34b, #2fb16b);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200%;
    background-position: -200%;
    animation: animated-gradient-moving 5s infinite alternate-reverse;
}

@keyframes animated-gradient-moving {
    to {
        background-position: 200%;
    }
}



.small-input-number {
    width: 100px !important
}


.small-input-number-70 {
    width: 70px !important
}


.small-input-select {
    width: 100px !important
}




/* Custom bottom send-message sheet (avoids Bootstrap modal/offcanvas conflicts) */
.cd-send-message-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1100;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.cd-send-message-backdrop--open {
    opacity: 0.5;
    visibility: visible;
}

.cd-send-message-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, .15);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .25s ease-in-out, visibility .25s ease-in-out;
    padding-bottom: env(safe-area-inset-bottom);
    pointer-events: auto;
}

.cd-send-message-sheet--open {
    transform: translateY(0);
    visibility: visible;
}

.cd-send-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 4px;
}

.cd-send-message-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.cd-send-message-close {
    color: #333;
    font-size: 1.1rem;
    padding: 4px 8px;
    line-height: 1;
    text-decoration: none;
}

.cd-send-message-close:hover,
.cd-send-message-close:focus {
    color: #000;
    text-decoration: none;
}

.cd-send-message-body.chatFooter {
    position: relative;
    border-top: none;
    min-height: 56px;
    padding: 8px 14px 14px;
    pointer-events: auto;
}

.cd-send-message-sheet #textAreaCallDownRequestMessage {
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
}

.offcanvas-bottom {
    right: 0;
    left: 0;
    height: 30vh;
    max-height: 100%;
    border-top: 1px solid rgba(0,0,0,.2);
    transform: translateY(100%)
}

.offcanvas.show {
    transform: none
}

.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    transition: transform .3s ease-in-out
}

    .offcanvas.offcanvas-small {
        position: fixed;
        bottom: 0;
        z-index: 1045;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        height: 100px;
        visibility: hidden;
        background-color: #fff;
        background-clip: padding-box;
        outline: 0;
        transition: transform .3s ease-in-out
    }

@media (prefers-reduced-motion:reduce) {
    .offcanvas {
        transition: none
    }
}

.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000
}

    .offcanvas-backdrop.fade {
        opacity: 0
    }



.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem
}

    .offcanvas-header .btn-close {
        padding: .5rem .5rem;
        margin-top: -.5rem;
        margin-right: -.5rem;
        margin-bottom: -.5rem
    }

.offcanvas-title {
    margin-bottom: 0;
    line-height: 1.5
}

.offcanvas-body {
    flex-grow: 1;
    padding: 1rem 1rem;
    overflow-y: auto
}

.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    transition: transform .3s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .offcanvas {
        transition: none
    }
}

.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000
}

    .offcanvas-backdrop.fade {
        opacity: 0
    }

    .offcanvas-backdrop.show {
        opacity: .5;
        z-index: 1100;
    }



/*Styles for User Activities, user checkin, checkout, take break*/

.user-activity-btn {
    border-radius: 50px;
    font-size: 16px;
    text-transform: uppercase;
    padding: 5px 25px;
    /*    width: 155px;*/
}

.user-activity-div {
    width: 200px;
}

#checkInModal .modal-header {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    background: var(--blue);
    color: #fff;
}

    #checkInModal .modal-header .img {
        width: 60px;
        border-radius: 100%;
        overflow: hidden;
        border: 2px solid transparent;
    }

#checkInModal img {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#checkInModal .modal-header .user-name h5 {
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 0;
    color: #fff !important;
}

#checkInModal .user-name p {
    font-size: 14px;
}

#checkInModal p:last-child {
    margin-bottom: 0;
}


#checkInModal .modal-header .btn-close {
    filter: invert(1);
    transition: all 0.5s;
}

#checkInModal .modal-body {
    padding: 45px 35px 0;
}

#checkInModal .clock {
    width: 180px;
    height: 180px;
    margin: 0px auto 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #42a1e1;
    box-shadow: 1px 3px 15px 0px #0003;
    border-radius: 100%;
    font-size: 35px;
    font-weight: 600;
    color: #fff;
    /*  border: 5px solid #fff;*/
}

#checkInModal .modal_content form {
    margin: 0;
}

#checkInModal label {
    color: #26241F;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    width: 100%;
    margin-bottom: 6px;
}

.login-popup .form-group input {
    height: 50px;
}






.text-lightgray-calldown {
    color: #ebebeb;
}


input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    margin-left: .4em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    cursor: pointer;
}


.text-lightgray-calldown {
    color: #ebebeb;
}






.btn-file {
    font-weight: 800;
    color: #0370ba;
    background: #ebebeb !important;
    padding: 15px;
}

    .btn-file input[type=file] {
        right: 0;
        color: white;
        position: absolute;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: #212121;
        cursor: inherit;
    }



/*Menus & Action Sheets & Modals*/
/*--Menu System---*/
.menu-title-nomargins {
    position: relative;
}

    .menu-title-nomargins h1 {
        font-size: 28px;
        font-weight: 700;
        padding: 20px 0px 10px 0px;
    }

    .menu-title-nomargins h2 {
        font-size: 18px;
        font-weight: 700;
        padding: 20px 0px 0px 15px;
    }

    .menu-title-nomargins p {
        font-weight: 600;
        font-size: 12px;
        margin: 15px 0px -25px 0px !important;
        padding: 0px 0px 0px 0px;
    }

    .menu-title-nomargins a {
        font-size: 20px;
        color: #dc3545;
        position: absolute;
        text-align: center;
        width: 55px;
        right: 0px;
        top: 50%;
        margin-top: -13px;
    }



.alertplaceholder {
    position: fixed;
    right: 10px;
    top: 28px;
    background-color: transparent;
    z-index: 120;
    width: 350px;
    box-sizing: border-box;
    border: 0px solid #eee;
}

.hide {
    display: none;
}

/*Notifications*/
.notificationIcon {
    /*   position: fixed;*/
    position: absolute;
    top: 20px;
    right: 60px;
    z-index: 999;
}
/**/


.bg-darkblue {
    background: #005289 !important;
}


#bluetoothSaveContinueReq:hover {
    color: white;
}


td.requisitionQuantity {
    font-weight: 900;
    color: #005289;
}


.font-weight-strong {
    font-weight: 900;

}


/* profile-picture */
.profile-section .steps_modal .profile-upload .profile-picture {
    display: block;
    margin-bottom: 15px;
}

    .profile-section .steps_modal .profile-upload .profile-picture img {
        height: 90px !important;
        width: 90px !important;
        border-radius: 100%;
    }

.profile-section .steps_modal .profile-upload span {
    font-weight: 600;
    font-size: 18px;
}

.profile-section .steps_modal .profile-from {
    margin: 40px 0;
    display: flex;
    flex-wrap: wrap;
    margin: 40px -15px;
}

    .profile-section .steps_modal .profile-from input::-ms-input-placeholder {
        font-style: normal;
    }

    .profile-section .steps_modal .profile-from input::placeholder {
        font-style: normal;
    }

    .profile-section .steps_modal .profile-from .dropdown {
        margin-bottom: 15px;
        padding: 0 15px;
        width: 100%;
    }

        .profile-section .steps_modal .profile-from .dropdown.dropdown-half {
            width: 50%;
        }

    .profile-section .steps_modal .profile-from .form-control {
        padding: 8px 15px 10px;
        height: auto;
    }

.profile-section .steps_modal .modal-content-profile {
    background-color: #fff;
    height: calc(100vh - 100px);
}

    .profile-section .steps_modal .modal-content-profile,
    .profile-section .steps_modal .modal-content-profile .top_bar,
    .profile-section .steps_modal .modal-content-profile .form-footer {
        width: auto;
        max-width: 360px;
    }

        .profile-section .steps_modal .modal-content-profile form {
            padding-top: 50px !important;
        }

        .profile-section .steps_modal .modal-content-profile .btn-close {
            position: absolute !important;
            top: -20px !important;
        }

@media screen and (max-width: 450px) {
    .profile-section .form-footer-inner.form-footer-inner-btn .btn {
        font-size: 13px;
        padding: 0 10px;
    }
}


.top_bar_main 
{
    width: 100% !important;
}

.shadowBlue {
    box-shadow: 0 0.5rem 1rem rgb(117 180 224 / 20%) !important;
}
.cpointer {
    cursor: pointer;
}

/* Upload profile-picture */
.profile-upload .upload-profile-btn {
    display: block;
    background-color: white;
    border: 1px solid transparent;
    color: #2594de;
    padding: 8px 20px 8px;
    height: auto;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s;
}

    .profile-upload .upload-profile-btn span {
        font-size: 15px;
        line-height: 1.25;
        font-weight: 500;
    }

    .profile-upload .upload-profile-btn:hover {
        background-color: #3f87f5;
        color: #fff;
        cursor: pointer;
    }

.upload-profile-btn .upload__inputfile {
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    cursor: pointer;
}




.font-weight-semibold {
    font-size: 15px !important;
    font-weight: 500 !important;
}

.font-size-30 {
    font-size: 30px !important;
}





img.comingSoonImg {
    width: 70px;
    /* left: 0px !important; */
    position: absolute;
    /* top: 20px; */
    margin-bottom: 40px;
}


.wallet-card .wallet-footer .item .icon-wrapper-comingsoon {
    /* background: #00000030 !important;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    font-size: 24px;
    margin-bottom: 14px;*/
}

/*
.comingSoonSpan {
 
    position: absolute;
    margin-top: 40px;
    align-items: center;
    align-content: center;
    font-size: 8px;
    font-weight: 900;
    height: 12px;
    width: 60px;
}
*/

.comingSoonSpan {
    /* width: 70px; */
    /* left: 0px !important; */
    position: absolute;
    margin-top: 50px;
    align-items: center;
    align-content: center;
    font-size: 8px;
    font-weight: 900;
    height: 12px;
    width: 55px;
    background: #fbd4d0 !important;
    color: #EC4433 !important;
}

.rounded-blue-header {
    top: 0;
    background: #007fe3;
    width: 100%;
    z-index: 999;
    border-radius: 0px 0px 30px 30px;
    color: white !Important;
    height: 10vh;
    display: inline-block;
    background-image: linear-gradient(-45deg, #45a4e3, #0885d9, #438ee9, #5da4d3) !important;
    background-size: 400% 400% !important;
    animation: gradient-move 3s ease infinite !important;
    webkit-animation: gradient-move 3s ease infinite !important;
    border: transparent;
}



.rounded-blue-header-modal {
    top: 0;
    background: #007fe3;
    width: 100%;
    z-index: 999;
    border-radius: 30px 30px 0px 0px;
    color: white !Important;
    /*height: 10vh;*/
    height: 90px;
    display: inline-block;
    background-image: linear-gradient(-45deg, #45a4e3, #0885d9, #438ee9, #5da4d3) !important;
    background-size: 400% 400% !important;
    animation: gradient-move 3s ease infinite !important;
    webkit-animation: gradient-move 3s ease infinite !important;
    border: transparent;
}



.modal-content-rounded {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    /* background-clip: padding-box; */
    border: 0px solid rgb(255 255 255 / 0%) !important;
    border-radius: 02rem !important;
    outline: 0;
}



.remove360Tiles {
    display: none !important;
}



#menuMainTabRoutesOverviewDiv .startRouteButton {
    display: none;
}



.emptyTasksDivImage {
    width: 100px;
}




.smallTextModalSide {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 240px !important;
}
label.is-invalid {
    color: #e25959;
}



#createNetworkModal {
    z-index: 9999999999 !important;
    background: #0000009e;
}


/* For Select2 */



#searchItemsMBTable.table {
    width: 100% !important; /* Make the table width responsive to screen width */
    /*   table-layout: fixed;*/ /* Ensures table layout is consistent */
    border-collapse: collapse; /* Optional: Ensures borders are collapsed for better appearance */
}

#searchItemsMBTable > td, th {
    overflow: scroll; /* Ensures content does not overflow the cell */
    text-overflow: clip; /* Adds ellipsis for overflowing text */
}


/* Alerts / Notification */
.mo-list-group .mo-card {
    position: relative;
    background-color: #fff;
    margin-bottom: 1.25rem;
    border: 1px solid #edf2f9;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

    .mo-list-group .mo-card .mo-card-body {
        padding: 15px;
        position: relative;
        flex: 1 1 auto;
    }

    .mo-list-group .mo-card .mo-dropdown-item {
        line-height: 1.5;
        min-height: auto;
        padding: 15px 30px 15px 0;
        display: block;
        clear: both;
        font-weight: 400;
        width: 100%;
        transition: all 0.1s ease-out;
        -webkit-transition: all 0.1s ease-out;
        -moz-transition: all 0.1s ease-out;
        -o-transition: all 0.1s ease-out;
        -ms-transition: all 0.1s ease-out;
        color: #53535f;
        border: 0;
        position: relative;
    }

    .mo-list-group .mo-card .m-l-15 {
        margin-left: 15px !important;
    }

    .mo-list-group .mo-card .m-b-0 {
        margin-bottom: 0 !important;
    }

    .mo-list-group .mo-card .mo-avatar {
        font-size: 0.875rem;
        text-align: center;
        background: #f1f2f3;
        color: #fff;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        vertical-align: middle;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
    }

    .mo-list-group .mo-card .mo-avatar.mo-avatar-icon {
        font-size: 16px;
    }

    .mo-list-group .mo-card .avatar-magenta {
        color: #eb2f96;
        background: rgba(235, 47, 150, 0.05);
    }

    .mo-list-group .mo-card .avatar-red {
        color: #ffffff;
        background: #F44336;
    }

    .mo-list-group .mo-card .avatar-volcano {
        color: #fa541c;
        background: rgba(250, 84, 28, 0.05);
    }

    .mo-list-group .mo-card .avatar-orange {
        color: #fa8c16;
        background: rgba(250, 140, 22, 0.1);
    }

    .mo-list-group .mo-card .avatar-gold {
        color: #ffc107;
        background: rgba(255, 193, 7, 0.1);
    }

    .mo-list-group .mo-card .avatar-lime {
        color: #a0d911;
        background: rgba(160, 217, 17, 0.1);
    }

    .mo-list-group .mo-card .avatar-green {
        color: #52c41a;
        background: rgba(82, 196, 26, 0.1);
    }

    .mo-list-group .mo-card .avatar-cyan {
        color: #00c9a7;
        background: rgba(0, 201, 167, 0.1);
    }

    .mo-list-group .mo-card .avatar-blue {
        color: #3f87f5;
        background: rgba(63, 135, 245, 0.1);
    }

    .mo-list-group .mo-card .avatar-geekblue {
        color: #2f54eb;
        background: rgba(47, 84, 235, 0.1);
    }

    .mo-list-group .mo-card .avatar-purple {
        color: #3f87f5;
        background: rgba(136, 108, 255, 0.1);
    }

    .mo-list-group .mo-card button.close {
        font-weight: 500;
        margin-left: auto;
        margin-right: -30px;
    }

    .mo-list-group .mo-card small {
        font-size: 80% !important;
        font-weight: 400;
    }




.hideWhenFound {
    background: rgb(221 234 255 / 46%) !important;
    border-color: transparent !important;
    color: #0370ba !important;
}





#orderLocationItemsByRoute + .select2-container {
    max-width: 100px; /* Adjust as needed */
}

    /* Ensure the selection area does not exceed the maximum width */
    #orderLocationItemsByRoute + .select2-container .select2-selection--multiple,
    #orderLocationItemsByRoute + .select2-container .select2-selection--single {
        max-width: 100px; /* Adjust as needed */
    }

    /* Adjust the dropdown width if necessary */
    #orderLocationItemsByRoute + .select2-container .select2-dropdown {
        max-width: 100px; /* Adjust as needed */
    }





/*
#mainRecDetailsTable, tr, th {
    padding-bottom: 0px !important;
}*/



.btn-move-multicolor-blue:hover {
    color: #FFF !important;
}


#search-bar-cc {
    padding: 5px 5px 5px 10px;
    border: 1px solid #ccc;
    border-radius: 15px;
    width: 150px; /* Adjust width as needed */
    font-size: 16px;
}




.btn-gradient-batch {
    background-image: linear-gradient(to right, #348F50 0%, #56B4D3 51%, #348F50 100%);
    /* margin: 10px; */
    /* padding: 15px 45px; */
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
}

    .btn-gradient-batch:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }


#reviewRecBatchScans td:nth-child(5) {
    display: none !important;
}

#reviewRecBatchScans td:nth-child(6) {
    display: none !important;
}

#reviewRecBatchScans td:nth-child(7) {
    display: none !important;
}

#reviewRecBatchScans td:nth-child(8) {
    display: none !important;
}

#reconciliationHistoryByLocation td:nth-child(n+5),
#reconciliationBatchHistoryByLocation td:nth-child(n+5) {
    display: none !important;
}



#locationsByFacilityLocateItemULI {
    width: 100px !important; /* Set the width of the Select2 dropdown */
}

    #locationsByFacilityLocateItemULI .select2-selection {
        height: 30px; /* Set the height of the Select2 selection box */
    }

    #locationsByFacilityLocateItemULI .select2-selection__rendered {
        line-height: 30px; /* Align text vertically within the selection box */
    }

    #locationsByFacilityLocateItemULI .select2-selection__arrow {
        height: 28px; /* Adjust arrow height if needed */
        top: 1px; /* Center the arrow vertically */
    }

/* Locate Item — Search by Location: keep Select2 within mobile viewport */
#locateByLocationResults .locate-item-location-select {
    flex: 1 1 55%;
    min-width: 0;
    max-width: 100%;
    text-align: right;
}

#locationsByFacilityLocateItem + .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}

#locationsByFacilityLocateItem + .select2-container .select2-selection--single {
    max-width: 100%;
}

#locationsByFacilityLocateItem + .select2-container .select2-selection__rendered {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#locationsByFacilityLocateItem + .select2-container .select2-dropdown {
    max-width: 100%;
}






#locationsByFacilityRec {
    width: 150px !important; /* Set the width of the Select2 dropdown */
}

#locationsByFacilityReq {
    width: 150px !important; /* Set the width of the Select2 dropdown */
}

#locationsByFacilityno-background-colorRec .select2-selection {
    height: 30px; /* Set the height of the Select2 selection box */
}

#locationsByFacilityRec .select2-selection__rendered {
    line-height: 30px; /* Align text vertically within the selection box */
}

#locationsByFacilityRec .select2-selection__arrow {
    height: 28px; /* Adjust arrow height if needed */
    top: 1px; /* Center the arrow vertically */
}

.select-input-small
{
    width: 150px !important;
}


#Edit_profile .btn:hover, .profile-section .btn:hover {
    background-color: unset !important;
     border-color: transparent !important;
    color: #007bff
}



.profile-section-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100% !important;
    bottom: 0;
    padding: 20px 0;
    background: #ffffff;
    /* box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1); */
}


#tableForLocateItem.dataTable {
    table-layout: fixed !important; /* Enforce fixed layout */
    width: 100% !important; /* Ensure full width */
}



#tableForLocateItem td {
    word-break: break-word !Important;
}

#searchItemsLocationTable.dataTable {
    table-layout: auto !important; /* Enforce fixed layout */
    width: 100% !important; /* Ensure full width */
}



#searchItemsLocationTable td {
    word-break: break-word !Important;
}



.wrap-text {
    white-space: normal; /* Allow text to break lines */
    word-wrap: break-word; /* Break long words if necessary */
    word-break: break-word; /* Break words if they overflow the container */
}


.btn-darkgray-color {
    background: #d2d2d2;
}



.no-background-color 
{
    background-color: transparent !important;
}


.table-striped-color {
    background-color: #f9f9f9 !important;
}
/**action menu  start here*/
.actions-menu .actions-dropdown {
    display: inline-block;
    margin: 0 auto;
    position: relative;
    vertical-align: middle;
}

    .actions-menu .actions-dropdown .dropdown-menu {
        left: 50%;
        transform: translateX(-50%);
        padding-top: 0;
        padding-bottom: 0;
        top: 85% !important;
    }

        .actions-menu .actions-dropdown .dropdown-menu .dropdown-item {
            font-size: 14px;
            font-weight: 500;
            padding: 5px 10px;
            cursor: pointer;
        }

    .actions-menu .actions-dropdown:hover .dropdown-menu {
        display: block;
    }

/**action menu  ends */




.border-radius-10 {
border-radius: 10px;
}


.uppercaseLetters {
    text-transform: uppercase;
}
.btn-blue-green-gradient {
    background-image: linear-gradient(to right, #348F50 0%, #56B4D3 51%, #348F50 100%) !important;
    text-align: center;

    transition: 0.5s;
    background-size: 200% auto !important;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
}

    .btn-blue-green-gradient:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }



.button-360 {
    /* Fallback background color for very old browsers */
    background-color: #0370ba;

    /* Prefixed gradient for older browsers */
    background-image: -webkit-linear-gradient(left, #1b97db 0%, #0370ba 51%, #1b97db 100%);
    background-image: -moz-linear-gradient(to right, #1b97db 0%, #0370ba 51%, #1b97db 100%);
    background-image: -ms-linear-gradient(to right, #1b97db 0%, #0370ba 51%, #1b97db 100%);
    background-image: -o-linear-gradient(to right, #1b97db 0%, #0370ba 51%, #1b97db 100%);
    background-image: linear-gradient(to right, #1b97db 0%, #0370ba 51%, #1b97db 100%);

    /* Fallback for transitions */
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;

    /* Other styles */
    text-align: center;
    text-transform: uppercase;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
}


    .button-360 :hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }



.btn-gradient-purple {
    /* Fallback background color for very old browsers */
    background-color: #348AC7;
    /* Prefixed gradients for older browsers */
    background-image: -webkit-linear-gradient(left, #7474BF 0%, #348AC7 51%, #7474BF 100%);
    background-image: -moz-linear-gradient(to right, #7474BF 0%, #348AC7 51%, #7474BF 100%);
    background-image: -ms-linear-gradient(to right, #7474BF 0%, #348AC7 51%, #7474BF 100%);
    background-image: -o-linear-gradient(to right, #7474BF 0%, #348AC7 51%, #7474BF 100%);
    background-image: linear-gradient(to right, #7474BF 0%, #348AC7 51%, #7474BF 100%);
    /* Transition for smooth background change */
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    /* Other styles */
    text-align: center;
    background-size: 200% auto;
    color: white;
}

    .btn-gradient-purple:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }



.badge-text-long {
    background-color: #f1f1f1;
    /* Or any desired width */
    max-width: 100%;
    /* Ensures it doesn't overflow beyond the container */
    white-space: normal;
    /* Ensures text wraps onto the next line */
    word-wrap: break-word;
    /* Breaks long words onto the next line */
    word-break: break-word;
    /* Breaks words if necessary */
    overflow: hidden;
    /* Hides overflow if needed */
}

.text-long {
 
    /* Or any desired width */
    max-width: 100%;
    /* Ensures it doesn't overflow beyond the container */
    white-space: normal;
    /* Ensures text wraps onto the next line */
    word-wrap: break-word;
    /* Breaks long words onto the next line */
    word-break: break-word;
    /* Breaks words if necessary */
    overflow: hidden;
    /* Hides overflow if needed */
}


.badge-text-long-eclipse {
    display: inline-block; /* Required for width constraints */
    max-width: 100%; /* Adjust to fit your layout */
    white-space: nowrap; /* Prevents line breaks */
    overflow: hidden; /* Hides text overflow */
    text-overflow: ellipsis; /* Shows ellipsis */
    vertical-align: middle;
    align-content: center;
}


/* Container for the headers */
.header-container-title {
    text-align: left;
    /* font-family: Arial, sans-serif; */
}

/* Top header styling */
.header-top-title {
    color: #187bbe; /* Blue color */
    font-weight: bold;
    font-size: 12px;
   
    margin-bottom: -10px;
}

/* Bottom subheader styling */
.header-bottom-title {
    color: #333333; /* Dark gray/black color */
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
}




.btn-gradient-red {
    /* Fallback background color for older browsers */
    background-color: #ff6a00;
    /* Prefixed gradient for older browsers */
    background-image: -webkit-linear-gradient(left, #ee0979 0%, #ff6a00 51%, #ee0979 100%);
    background-image: -moz-linear-gradient(to right, #ee0979 0%, #ff6a00 51%, #ee0979 100%);
    background-image: -ms-linear-gradient(to right, #ee0979 0%, #ff6a00 51%, #ee0979 100%);
    background-image: -o-linear-gradient(to right, #ee0979 0%, #ff6a00 51%, #ee0979 100%);
    background-image: linear-gradient(to right, #ee0979 0%, #ff6a00 51%, #ee0979 100%);
    /* Transition for smooth background change */
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    /* Other styles */
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
}

    .btn-gradient-red:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }





.btn-gradient-blue {
    background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
}

    .btn-gradient-blue:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }

.textUppercaseCenter {
    text-align: center;
    text-transform: uppercase;
}




.btn-gradient-blueGreen {
    background-image: linear-gradient(to right, #67B26F 0%, #4ca2cd 51%, #67B26F 100%) !important;
    transition: 0.5s !important;
    background-size: 200% auto !important;
    color: white;
    box-shadow: 0 0 20px #eee !important;
}

    .btn-gradient-blueGreen:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;

    }



/* Hamburger Menu */
.actions-hamburger-menu {
    margin-left: -8px;
    margin-right: -8px;
}

    .actions-hamburger-menu .actions-menu,
    .actions-hamburger-menu .actions-menu .actions-dropdown i {
        line-height: normal;
    }

        .actions-hamburger-menu .actions-menu .actions-dropdown i {
            cursor: pointer;
            position: relative;
            top: 0;
        }

        .actions-hamburger-menu .actions-menu .actions-dropdown .dropdown-menu {
            left: inherit;
            transform: translateX(0);
            padding-top: 0;
            padding-bottom: 0;
            top: 20px !important;
            right: 0;
        }

        .actions-hamburger-menu .actions-menu .verify-btn,
        .actions-hamburger-menu .actions-menu .not-verify-btn {
            display: inline-block;
            margin-right: 10px;
            text-transform: uppercase;
            color: #289c45;
            font-size: 16px;
            line-height: 1.2em;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .actions-hamburger-menu .actions-menu .not-verify-btn {
            color: #EC4433;
        }

            .actions-hamburger-menu .actions-menu .verify-btn i,
            .actions-hamburger-menu .actions-menu .not-verify-btn i {
                margin-right: 3px;
                font-size: 12px;
                top: -1px;
                position: relative;
            }

    



.w-100-signature {
    width: 100% !important;
    height: 90px;
}

.max-width-input-100 
{
    width: 100px !important;
}









.report-selector {
  
    margin: 0 auto;
    background: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

    .report-selector h2 {
        margin-bottom: 20px;
        font-size: 24px;
        text-align: center;
        color: #333;
    }



/* smart label form 02 */
.request-submit-form {
    border: none;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 25px;
}

    .request-submit-form .custom-control-label {
        display: block;
        position: relative;
        padding-left: 50px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin-bottom: 16px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 13px;
        padding-top: 14px;
        margin-bottom: 0 !important;
        display: block;
        font-size: 14px;
        font-weight: 500;
        z-index: 0;
        overflow: hidden;
    }

        .request-submit-form .custom-control-label:last-child {
            border-bottom: 0;
            margin-bottom: 0;
        }

        .request-submit-form .custom-control-label input, .request-submit-form .custom-control-label input.rdoopacityhidden {
            position: absolute;
            cursor: pointer;
            width: auto !important;
        }

            .request-submit-form .custom-control-label input.rdoopacityhidden {
                opacity: 1 !important;
            }

            .request-submit-form .custom-control-label input, .request-submit-form .custom-control-label input.rdoopacityhidden {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                width: auto !important;
            }

                .request-submit-form .custom-control-label input.rdoopacityhidden {
                    opacity: 0 !important;
                }

    .request-submit-form .checkmark {
        position: absolute !important;
        !i;
        !;
        top: 14px;
        left: 15px;
        height: 22px !important;
        width: 22px !important;
        !i;
        !;
        background-color: #ccc;
        border-radius: 50% !important;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        transition: 0.3s;
        animation: none !important;
        !i;
        !;
    }

.fixedcheck input:checked {
    top: 14px !important;
    left: 18px !important;
}

.request-submit-form .custom-control-label:hover input ~ .checkmark {
    background-color: #00408d;
}

.request-submit-form .custom-control-label input:checked ~ .checkmark {
    background-color: #0370ba;
}

.request-submit-form .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.request-submit-form .custom-control-label input:checked ~ .checkmark.selected:after {
    display: block;
}

.request-submit-form .custom-control-label .checkmark:after {
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.request-submit-form .custom-control-label .checkmark::before {
    content: "";
    top: -24px;
    left: -30px;
    width: 1000vh;
    height: 1000vw;
    background: #ededed;
    display: none;
    position: absolute;
    z-index: -1;
}

.request-submit-form .custom-control-label input:checked ~ .checkmark::before {
    display: block;
}
.request-submit-form input, .form-bg select, .form-bg textarea {
    padding: 10px 15px 11px;
    height: auto;
    color: #53535f;
    border: 1px solid #c8d4e3;
    font-size: 14px;
    border-radius: 6px;
    line-height: 1.5;
    width: 100%;
}
.request-submit-form .file-upload {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

.request-submit-form input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}

.request-submit-form .file-upload .upload-picture {
    width: 100%;
    padding: 30px;
    background: rgb(241 241 241);
    /* border: 1px solid #c8d4e3; */
    text-align: center;
    transition: background 0.3s ease-in-out;
    border-radius: 6px;
    font-size: 14px;
}
.request-submit-form form {
    padding-top: 0px !important;
    padding-bottom: 30px !important;
}
.request-submit-form .file-upload .success {
    display: none;
}

.request-submit-form .file-upload input[type=file]:hover .upload-picture {
    background: rgba(255,255,255,0.1);
}

.request-submit-form .file-upload input[type=file]:valid + .upload-picture {
    border-color: rgb(171 239 183);
    background-color: rgb(171 239 183);
}

    .request-submit-form .file-upload input[type=file]:valid + .upload-picture .success {
        display: inline-block;
    }

    .request-submit-form .file-upload input[type=file]:valid + .upload-picture .default {
        display: none;
    }

.request-submit-form .upload-picture .default i {
    display: block;
    font-size: 21px;
    margin-bottom: 5px;
}

.search-product-result .custom-control-label {
    display: block;
    position: relative;
    padding-left: 50px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 16px;
    border: 1px solid #ededed;
    border-radius: 6px;
    padding-bottom: 12px;
    padding-top: 14px;
    margin-bottom: 10px !important;
    display: block;
    font-size: 14px;
    font-weight: 500;
    z-index: 0;
    overflow: hidden;
}

    .search-product-result .custom-control-label input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        width: auto !important;
    }

.search-product-result .checkmark {
    position: absolute;
    top: 14px;
    left: 15px;
    height: 22px;
    width: 22px;
    background-color: #ebebeb;
    border-radius: 50%;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

.search-product-result .custom-control-label:hover input ~ .checkmark {
    background-color: #00408d;
}

.search-product-result .custom-control-label input:checked ~ .checkmark {
    background-color: #3f87f5;
}

.search-product-result .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.search-product-result .custom-control-label input:checked ~ .checkmark:after {
    display: block;
}

.search-product-result .custom-control-label .checkmark:after {
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.search-product-result .btn {
    margin-top: 15px;
}

.white-popup-block.popup-full-width .search-product label {
    text-align: center;
    color: #2a2a2a;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 15px;
}




div.dt-container .dt-input {
    border: 1px solid #d9d9d9;
    border-radius: 30px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 15px;
    background-color: transparent;
    color: inherit;
    margin-bottom: 10px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}


    div.dt-container .dt-input:focus {
        outline: none !important;
        border-color: #80bdff !important;
        box-shadow: 0 0 8px 0 rgba(0, 123, 255, 0.2) !important;
        background-color: transparent !important;
        color: inherit !important;
    }


    /**Remove the last two TH from ULI */

#searchItemsLocationTableULI th.binIdTableULI,
#searchItemsLocationTableULI td.binIdTableULI {
    display: none;
}


#searchItemsLocationTableULI th.locationIdTableULI,
#searchItemsLocationTableULI td.locationIdTableULI {
    display: none;
}


#searchItemsQS th.locationItemNumberQS,
#searchItemsQS td.locationItemNumberQS {
    display: none;
}

#searchItemsQS th.binIdNumberSearchQS,
#searchItemsQS td.binIdNumberSearchQS {
    display: none;
}




/**Updated Datatable*/


div.dt-container .dt-paging .dt-paging-button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: inherit !important;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
}

    div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
        color: #0370ba !important;
        border: 1px solid rgba(0, 0, 0, 0.3);
        background-color: rgba(0, 0, 0, 0.05);
        background-color: #DDF1FF;
        border-color: #DDF1FF;
        font-weight: 600;
        border-radius: 30px;
    }

    div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
        cursor: default;
        color: rgba(0, 0, 0, 0.5) !important;
        border: 1px solid transparent;
        background: transparent;
        box-shadow: none;
    }

    div.dt-container .dt-paging .dt-paging-button:hover {
        color: #0370ba !important;
        border: 1px solid rgba(0, 0, 0, 0.3);
        background-color: rgba(0, 0, 0, 0.05);
        background-color: #DDF1FF;
        border-color: #DDF1FF;
        font-weight: 600;
    }

    div.dt-container .dt-paging .dt-paging-button:active {
        color: #0370ba !important;
        border: 1px solid rgba(0, 0, 0, 0.3);
        background-color: rgba(0, 0, 0, 0.05);
        background-color: #DDF1FF;
        border-color: #DDF1FF;
        font-weight: 600;
    }

div.dt-container .dt-paging .ellipsis {
    padding: 0 1em;
}

div.dt-container .dt-length,
div.dt-container .dt-search,
div.dt-container .dt-info,
div.dt-container .dt-processing,
div.dt-container .dt-paging {
    color: inherit;
}




@keyframes flashElement {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

.flashingElement {
    animation: flashElement 2s ease-in-out infinite;
}


@keyframes flashElementLight {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.flashingElementLight {
    animation: flashElementLight 2s ease-in-out infinite;
}



/*Custom Search Bar CSS*/

.search-wrapper {
    position: relative;
    display: inline-block;
}

    /* inject FA icon via pseudo-element */
    .search-wrapper::before {
        content: "\f002"; /* Font Awesome “search” unicode */
        font-family: "Font Awesome 5 Free"; /* FA5 */
        font-weight: 900; /* solid style */
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%) scale(1);
        pointer-events: none;
        color: #5f6368;
        transition: transform 0.3s ease, color 0.3s ease;
    }


.search-bar {
    outline: none;
    box-shadow: 0 2px 4px rgba(66,133,244,0.15), 0 4px 8px rgba(66,133,244,0.1);
   
    background-color: #ffffff;
    border-radius: 24px;
    padding-left: 2.5rem; /* room for the icon */
    padding-right: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #9c9c9c38;
}


.search-wrapper-large {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 90%;
}

    /* inject FA icon via pseudo-element */
    .search-wrapper-large::before {
        content: "\f002"; /* Font Awesome “search” unicode */
        font-family: "Font Awesome 5 Free"; /* FA5 */
        font-weight: 900; /* solid style */
        position: absolute;
        /* left: 2rem;*/
        top: 50%;
        transform: translateY(-50%) scale(1);
        pointer-events: none;
        color: #5f6368;
        transition: transform 0.3s ease, color 0.3s ease;
        padding-left: 13px;
      
    }


.search-bar-large {
    outline: none;
    box-shadow: 0 2px 4px rgba(66,133,244,0.15), 0 4px 8px rgba(66,133,244,0.1);
    background-color: #ffffff;
    border-radius: 24px;
    padding-left: 2.5rem; /* room for the icon */
    padding-right: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #9c9c9c38;
    height: 50px;
    width: 90%;
    /* height: 50px !important; */
}


    .search-bar-large:hover {
        background-color: #ffffff;
        border-color: #c6c6c6;
    }


/* focus-within lets us target when the input is focused */
.search-wrapper-large:focus-within::before {
    color: #4285f4;
    transform: translateY(-50%) scale(1.2) rotate(10deg);
}

.search-bar-large:focus {
    outline: none;
    border-color: #4285f4;
    box-shadow: 0 0 0 0.2rem rgba(66,133,244,0.3);
    background-color: #ffffff;
}

.search-bar-large:active {
    box-shadow: 0 0 0 8px rgba(66,133,244,0.1);
}







    /*.search-bar {
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
   
}*/




    .search-bar:hover {
        background-color: #ffffff;
        border-color: #c6c6c6;
    }

/* focus-within lets us target when the input is focused */
.search-wrapper:focus-within::before {
    color: #4285f4;
    transform: translateY(-50%) scale(1.2) rotate(10deg);
}

.search-bar:focus {
    outline: none;
    border-color: #4285f4;
    box-shadow: 0 0 0 0.2rem rgba(66,133,244,0.3);
    background-color: #ffffff;
}

.search-bar:active {
    box-shadow: 0 0 0 8px rgba(66,133,244,0.1);
}



/* 1) Make the dt-container a positioning context (won’t move it) */
/* 1) Make sure the wrapper can host the icon */
.dt-search {
    position: relative;
    display: inline-block;
    width: auto;
}

    /* 2) Pseudo-element (Font‑Awesome) */
    .dt-search::before {
        content: "\f002";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #5f6368;
        transition: color 0.3s ease, transform 0.3s ease;
        z-index: 2;
    }

    /* 3) Your input styling */
    .dt-search .dt-input {
        outline: none;
        background-color: #ffffff;
        border-radius: 24px;
        border: 1px solid rgba(156,156,156,0.22);
        padding: 5px 5px 5px 35px !important;
        /* padding-left: 15px !important; */
        box-shadow: 0 2px 4px rgba(66,133,244,0.15), 0 4px 8px rgba(66,133,244,0.1);
        transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
        position: relative;
        z-index: 1;
        margin-top: 10px;
    }


        /* 4) Hover state */
        div.dt-search .dt-input:hover {
            background-color: #ffffff;
            border-color: #c6c6c6;
        }

        /* 5) Focus or .active state: border+shadow on input and icon animation */
        div.dt-search .dt-input:focus,
        div.dt-search .dt-input.active {
            outline: none;
            background-color: #ffffff;
            border-color: #0370ba;
            box-shadow: 0 0 0 0.2rem rgba(66,133,244,0.3);
        }

    div.dt-search:focus-within::before,
    div.dt-container.active::before {
        color: #0370ba;
        transform: translateY(-50%) scale(1.2) rotate(10deg);
    }

    /* 6) “Ripple” effect on click */
    div.dt-search .dt-input:active {
        box-shadow: 0 0 0 8px rgba(66,133,244,0.1);
    }




/* odd items: white */

/* even items: very light blue */
.custom-control.customSelectLocationList:nth-child(even) {
    background-color: #fdfdfd;
}




#binListViewRW li.multi-level:nth-child(even) {
    background-color: #fcfcfc;
}
/*
#sidebarPanel .icon-box {
    background-color: #DDEAFF !important;
}
    */



li.list-group-item-bp:nth-child(even) {
    background-color: #F9F9F9;
    border-top: 0px;
    border-bottom: 0px;
}



div#locationItemsListedRecSearch .search-wrapper {
    width: 100%;
}

div#locationItemsListedRecSearch .search-bar {
    width: 100%;
}


div#tabSearchItemReq .search-wrapper {
    width: 100%;
}

div#tabSearchItemReq .search-bar {
    width: 100%;
}


div#searchMBContent .search-wrapper {
    width: 100%;
}

div#searchMBContent .search-bar {
    width: 100%;
}


div#locateByULIOptions .search-wrapper {
    width: 100%;
}

div#locateByULIOptions .search-bar {
    width: 100%;
}


#tableForLocateItemULI th.binIdTableULI {
    display: none;
}

#tableForLocateItemULI th.locationIdTableULI {
    display: none;
}


#tableForLocateItemULI th.locationNameULISearch {
    text-align: right;
}




#findOrderRO .icon-box {
    background-color: #efefefe0 !important;
    color: #000 !important;
}


    #findOrderRO .icon-box > i {
        color: #0370ba !important;
    }


.dataCardROModify .icon-box {
    background-color: #efefefe0 !important;
}

    .dataCardROModify .icon-box > i {
        color: #0370ba !important;
    }


.custom-control.customSelectLocationList {
    font-weight: 500;
}


.custom-control.custom-control-facility {
    font-weight: 500;
}

.shadow-menu {
    box-shadow: rgb(23 108 164 / 6%) 0px 7px 29px 0px;
}


.border-radius-100 {
    border-radius: 100px;
}



/* allow the dropdown to overflow */
#infoUserModal .modal-content {
    overflow: visible !important;
}


#createModal .modal-content {
    overflow: visible !important;
}


#standardInfoModal .modal-content {
    overflow: visible !important;
}



/* 1) Default everything in the container */
.communicatedLiRW {
    font-size: 13px;
    color: #494949;
    font-weight: 600;
    text-align: right;
}

    /* 2) “Undo” for <p> children */
    .communicatedLiRW p {
        /* reset to whatever your normal paragraph style is */
        font-size: 15px;
        color: initial;
    }



.binTypeListedULI {
    width: 120px !important;
    max-width: 120px !important;
}




.button-orange {
    background-image: linear-gradient(to right, #EB3349 0%, #F45C43 51%, #EB3349 100%);
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    
}

    .button-orange:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }
         



.btn-gradient-orange {

    background-image: linear-gradient(to right, #fd746c 0%, #ff9068 51%, #fd746c 100%);
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    /* box-shadow: 0 0 20px #eee;*/
    /* border-radius: 10px;*/
}

    .btn-gradient-orange:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }


.min-width-90px {
    min-width: 90px;
}

@keyframes pulseGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(52, 152, 219, 0);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 12px #2aa44e;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(52, 152, 219, 0);
  }
}

.highlight-next-step-btn {
  /* adjust timing to taste */
  animation: pulseGlow 1.5s ease-in-out infinite;
  /* ensure rounded corners if you want a soft glow around edges */
  border-radius: 0.25rem;
}




.btn-gradient-green-move {
    color: #fff !Important;
    text-align: center;
    background-image: linear-gradient( to right, #67B26F 0%, #79b698 51%, #67B26F 100% ) !important;
    background-size: 200% auto;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: gradient-pulse 4s ease infinite;
}

@keyframes gradient-pulse {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.btn-gradient-green-move:hover {
    animation-duration: 2s; /* speed up the gradient on hover */
    transform: scale(1.05); /* subtle “press” effect */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.btn-gradient-green-move:active {
    transform: scale(0.98); /* slightly shrink on actual press */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}


.highlightInputBlue {
    /* remove default outline if any */
    outline: none;
    /* solid blue border */
    border: 2px solid rgb(221 234 255);
    /* gentle glow */
    box-shadow: 0 0 6px rgba(76, 162, 205, 0.5);
    /* rounded corners */
    border-radius: 4px;
    /* smooth transition for any state changes */
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

    /* On hover or focus, intensify the glow */
    .highlightInputBlue:hover,
    .highlightInputBlue:focus {
        border-color: rgb(221 234 255);
        box-shadow: 0 0 10px rgba(76, 162, 205, 0.7);
    }





input[type="checkbox"].form-control-checkbox-custom {
    /* keep original styling */
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block;
    width: 1rem; /* ~16px */
    height: 1rem;
    margin: 0;
    vertical-align: text-bottom;
    background-color: #fff;
    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, .25);
    border: 1px solid #e0e0e0 !Important;
    border-radius: .25rem;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer;
}

    input[type="checkbox"].form-control-checkbox-custom:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    }

    input[type="checkbox"].form-control-checkbox-custom:hover {
        border-color: #868e96;
    }

    input[type="checkbox"].form-control-checkbox-custom:checked {
        background-color: #007bff;
        border-color: #007bff;
    }

        /* refined checkmark */
        input[type="checkbox"].form-control-checkbox-custom:checked::after {
            content: "";
            position: absolute;
            top: 3px; /* nudge down */
            left: 5px; /* align horizontally */
            width: 4px; /* narrow stem */
            height: 8px; /* taller tick */
            border: solid #fff; /* white color */
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }





.put-away-card {
    margin: 1rem 0;
}

    .put-away-card .card-body {
        display: flex;
        justify-content: space-between;
        padding: 1rem;
    }

.stat-block-pd {
    display: flex;
    align-items: center;
}

.put-away-card .card-body {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* let items wrap instead of squeeze */
}

.icon-circle-pd {
    /* prevent shrinking and lock its size */

    width: 30px;
    height: 30px;
    font-size: 12px;
    /* existing styles */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}

.stat-title-pd {
    font-size: 16px;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.stat-value-pd {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 12px;
}


/*Reconciliation Table*/

#reviewRecBatchScansBody tr td:nth-child(1),
#reviewRecBatchScansBody tr td:nth-child(2),
#reviewRecBatchScansBody tr td:nth-child(3),
.recHistoryBatchTable tr td:nth-child(1),
.recHistoryBatchTable tr td:nth-child(2),
.recHistoryBatchTable tr td:nth-child(3) {
    font-weight: bold;
}


#reviewRecBatchScansBody tr td:nth-child(4),
.recHistoryBatchTable tr td:nth-child(4) {
    font-weight: bold;
    color: #0370ba
}



#reviewRec tr td:nth-child(1),
#reviewRec tr td:nth-child(2),
.recHistoryTable tr td:nth-child(1),
.recHistoryTable tr td:nth-child(2) {
    font-weight: bold;
}

#reviewRec tr td:nth-child(3),
.recHistoryTable tr td:nth-child(3) {
    font-weight: bold;
    color:
}


#reviewRec tr td:nth-child(4),
.recHistoryTable tr td:nth-child(4) {
    font-weight: bold;
    color: #0370ba
}


@keyframes flashBackground {
    0% {
        background-color: #ffcccc;
    }

    50% {
        background-color: #ffe6e6;
    }

    100% {
        background-color: #ffcccc;
    }
}

@keyframes pulseShadow {
    0% {
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
    }

    50% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.9);
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
    }
}

.dccTaskPending {
    animation: flashBackground 1.5s infinite, pulseShadow 2s infinite;
    border: 0px solid #ff4d4d;
    border-radius: 8px;
    padding: 12px;
    margin: 15px 0;
    cursor: pointer;
    font-weight: bold;
}


.dcc-task-action {
    margin-top: 4px;
    font-size: 13px !important;
    color: #3e3e3e;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    opacity: 0.85;
}


    .dcc-task-action i {
        font-size: 12px;
    }





.btn-yellow-gradient {
    background-image: linear-gradient(to right, #FF512F 0%, #F09819 51%, #FF512F 100%);
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;

}

    .btn-yellow-gradient:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }

.call-icon-disabled{
    opacity: 0.1;
}



.autocompleteProduct {
    position: relative;
    left: 0px !important;
    top: 0px !important;
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd
}


.model-center-align {
    -webkit-transform: none;
    transform: none;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    max-width: 100%;
}




.sync-status-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
    padding: 12px;
    margin-bottom: 10px;
}

.sync-status-header {
    font-weight: bold;
    margin-bottom: 8px;
}

    .sync-status-header.ok {
        color: #2a7f2a;
    }

    .sync-status-header.fail {
        color: #a12a2a;
    }

.sync-status-details pre {
    background: #f4f4f4;
    padding: 8px;
    overflow-x: auto;
    margin: 6px 0;
}





.par360-loader-container {
    position: relative;
    width: 220px;
    height: 150px;
    text-align: center;
    top: 40%;
    left: 25%;
}

.par360-loader-text {
    font-size: 34px;
    font-weight: 800;
    color: #575757;
    letter-spacing: 10px;
    animation: fadeInOut360 2.5s ease-in-out infinite;
}

.par360-loader-text-thin {
    font-size: 13px;
    font-weight: 400;
    color: #666;
    letter-spacing: 5px;
    margin-top: 8px;
    animation: fadeInOut360 2.5s ease-in-out infinite;
}

.dot-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 10px;
}

.par360-loader-dot {
    width: 14px;
    height: 14px;
    background-color: #0370ba;
    border-radius: 50%;
    animation: bounce360 1s infinite ease-in-out;
}

    .par360-loader-dot:nth-child(1) {
        animation-delay: 0s;
    }

    .par360-loader-dot:nth-child(2) {
        animation-delay: 0.15s;
        background-color: #0592e6;
    }

    .par360-loader-dot:nth-child(3) {
        animation-delay: 0.3s;
        background-color: #66c6f2;
    }

    .par360-loader-dot:nth-child(4) {
        animation-delay: 0.45s;
        background-color: #025c98;
    }

@keyframes fadeInOut360 {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

@keyframes bounce360 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}


.top_bar360 {
    position: fixed;
    top: 0;
    background: #007fe3;
    width: 100%;
    /* padding: 20px 0px;*/
    padding: 10px 0px 5px 0px;
    z-index: 999;
    border-radius: 0px 0px 30px 30px;
    border-radius: 0px 0px 30px 30px;
    width: 100vw;
    height: 13.5vh;
    /* background: #0066cc; */
    /* margin: 10px auto; */
    display: inline-block;
    background-image: linear-gradient(-45deg, #45a4e3, #0885d9, #438ee9, #5da4d3) !important;
    background-size: 400% 400% !important;
    animation: gradient-move 3s ease infinite !important;
    webkit-animation: gradient-move 3s ease infinite !important;
    border: transparent;
}

.top_bar360 {
    position: fixed;
    top: 0;
    background: #007fe3;
    width: 100%;
    /* padding: 20px 0px;*/
    padding: 10px 0px 5px 0px;
    z-index: 999;
    border-radius: 0px 0px 30px 30px;
    border-radius: 0px 0px 30px 30px;
    width: 100vw;
    height: 13.5vh;
    /* background: #0066cc; */
    /* margin: 10px auto; */
    display: inline-block;
    background-image: linear-gradient(-45deg, #45a4e3, #0885d9, #438ee9, #5da4d3) !important;
    background-size: 400% 400% !important;
    animation: gradient-move 3s ease infinite !important;
    webkit-animation: gradient-move 3s ease infinite !important;
    border: transparent;
}

.top_bar360 .step {
    min-width: 72px;
    height: 72px;
}

.step h6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
}

#callDownContent360 .form-step .input-field input {
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.05);
    height: 44px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid transparent;
}





.location-selector {
    display: flex;
    align-items: center;
    /* background-color: #f5f7fa; */
    /* border: 1px solid #d1d9e6; */
    border-radius: 8px;
    padding: 12px 16px;
    color: #2c3e50;
    width: auto;
    justify-content: space-between;
}

    .location-selector .location-info {
        font-size: 14px;
        /* margin-bottom: 8px; */
        line-height: 1.4;
    }

    .location-selector .location-name {
        font-weight: 600;
        color: #0370ba;
    }

    .location-selector .btn-change {
        display: inline-flex;
        align-items: center;
        font-size: 13px;
        background-color: #007bff;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        padding: 6px 12px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .location-selector .btn-change i {
            margin-left: 6px;
            font-size: 14px;
        }

        .location-selector .btn-change:hover {
            background-color: #0056b3;
        }



.custom-toast {
    position: fixed;
    bottom: 30px;
    left: 20px;
    display: flex;
    flex-direction: row; /* force horizontal layout */
    align-items: center; /* vertically center icon/text */
    background-color: #fff;
    border-left: 4px solid #0370ba;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 25px 16px 16px 16px;
    z-index: 1000;
    display: none;
    animation: slideUp 0.3s ease-in-out;
    white-space: nowrap;
    max-width: 300px !important;
    width: 300px;
}

.toast-icon {
    position: relative; /* key: allow child SVGs to use absolute positioning */
    width: 8px; /* contain your absolute SVG */
    height: 8px;
    margin-right: 10px;
    flex-shrink: 0;
    z-index: 1300 !important;
}

.toast-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    z-index: 9999 !important;
    line-height: 1.2;
    background-color: #ffffffa1;
    position: relative;
}


/* New Tab Over stock */
.bg-blue-magenta {
    background-color: #174394 !important;
}

/* Expiration Review */
.bg-orange {
    background-color: #e67e22 !important;
}

.btn-light-blue {
    background: #dce8fd !important;
    border-color: #dce8fd !important;
    color: #0370ba !important;
}

.stock-card .card-body .over-list-bottom {
    padding: 0;
    border: 0;
}

    .stock-card .card-body .over-list-bottom .badge {
        padding: 0 12px;
        margin-right: 7px;
    }

.stock-card, .stock-card .card-body,
.bg-card-transparent.card {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 !important;
    box-shadow: none;
}

    .stock-card .card-body .card {
        padding: 15px;
    }

    .stock-card .card-body .header-large-title,
    .stock-card .card-body .stock-list-bottom,
    .stock-card .card-body .stock-listview {
        padding: 0;
    }

        .stock-card .card-body .header-large-title i {
            margin-right: 5px;
            position: relative;
            top: 1px;
        }

        .stock-card .card-body .header-large-title .btn {
            font-size: 15px;
        }

            .stock-card .card-body .header-large-title .btn i {
                margin: 0 0 0 7px;
            }

    .stock-card .card-body .stock-listview {
        color: #141515;
        padding: 10px 0 15px;
    }

    .stock-card .card-body .stock-list-bottom {
        border-top: 1px solid #e0e0e0;
        padding-top: 10px;
    }

    .stock-card .card-body {
        color: #141515;
    }

        .stock-card .card-body .stock-list-bottom .icon-box span {
            min-width: 36px;
            max-width: 36px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1em;
            font-size: 20px;
            border-radius: 400px;
            margin-right: 5px;
        }

        .stock-card .card-body .stock-listview .select-arrow {
            position: relative;
            margin-left: auto;
        }

            .stock-card .card-body .stock-listview .select-arrow select {
                padding: .3em 1.6em .3em .5em !important;
            }

            .stock-card .card-body .stock-listview .select-arrow:after {
                background-image: url("caret-down-solid-full.svg");
                background-repeat: no-repeat;
                background-position: center center;
                width: 18px;
                height: 18px;
                content: "";
                position: absolute;
                right: 5px;
                top: 50%;
                margin-top: -9px;
                pointer-events: none;
            }

        .stock-card .card-body .checkbox-sort input {
            margin: 0;
            position: relative;
            top: 3px;
        }

     

    .stock-card .bg-card-transparent.card .stock-listview {
        padding: 10px 0 10px;
    }

.custom-over-full .stock-card .card-body .card {
    padding: 0;
    background-color: transparent;
    background: transparent;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.custom-over-full .stock-card .card-body .stock-listview {
    padding: 8px 0 15px;
}

.custom-over-full .view-full-btn {
    clear: both;
    width: 100%;
}

.overstock-selected-item-model {
    max-width: 500px !important
}

#startOverstockDropOffItemList table tbody td{
    text-align:left !important;
}

.no-click {
    pointer-events: none;
    opacity: 1; /* Optional: visual cue */
}


/* =====================
       Simple, mobile‑first styles
       All class names end with `SettingsPage`
       ===================== */



/* App bar */
.appbarSettingsPage {
    position: sticky;
    top: 0;
    z-index: 10;
    background: transparent;
    color: #fff;
    box-shadow: var(--spShadow)
}

.appbarInnerSettingsPage {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 16px
}

.appTitleSettingsPage {
    font-weight: 700
}

/* Page */
.pageSettingsPage {
    max-width: 760px;
    margin: 16px auto;
    padding: 0 12px
}

/* Card */
.cardSettingsPage {
    background: var(--spCard);
    border: 1px solid var(--spLine);
    border-radius: var(--spRadius);
    box-shadow: var(--spShadow)
}

.cardBodySettingsPage {
    padding: 14px
}

/* Tabs */
.tabsSettingsPage {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 10px 0
}

.tabSettingsPage {
    flex: 1 1 auto;
    text-align: center;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--spLine);
    border-radius: 999px;
    color: var(--spMuted);
    font-weight: 600;
    cursor: pointer
}

    .tabSettingsPage.isActiveSettingsPage {
        background: var(--spBrand);
        color: #fff;
        border-color: var(--spBrand)
    }

/* Panels */
.panelSettingsPage {
   
}

.isHiddenSettingsPage {
    display: none
}

/* Rows */
.rowSettingsPage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--spLine)
}

    .rowSettingsPage:last-child {
        border-bottom: 0
    }

.labelSettingsPage {
    font-weight: 600
}

.subSettingsPage {
    color: var(--spMuted);
    font-size: .9rem
}

/* Inputs */
.inputSettingsPage, .selectSettingsPage {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--spLine);
    background: #fff;
    font: inherit;
    color: var(--spText)
}

/* Switch */
.switchSettingsPage {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px
}

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

.sliderSettingsPage {
    position: absolute;
    inset: 0;
    background: #c8d3e5;
    border-radius: 28px;
    transition: .25s
}

    .sliderSettingsPage::before {
        content: "";
        position: absolute;
        width: 22px;
        height: 22px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0,0,0,.12);
        transition: .25s
    }

.switchSettingsPage input:checked + .sliderSettingsPage {
    background: var(--spBrand)
}

    .switchSettingsPage input:checked + .sliderSettingsPage::before {
        transform: translateX(20px)
    }

/* Mobile helpers */
@media (min-width:680px) {
    .rowSettingsPage {
        padding: 14px 4px
    }
}


/* ==== Device details card (SettingsPage) ==== */

.deviceInfoSettingsPage {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(16,24,40,.06);
    overflow: hidden;
}

.deviceHeaderSettingsPage {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 8px;
    background: #f6f6f6;
    border-bottom: 1px solid #eef2f8;
}

.deviceTitleSettingsPage {
    display: flex;
    gap: 10px;
    align-items: center
}

.deviceIconSettingsPage {
    font-size: 1.25rem
}

.hSettingsPage {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937
}

.subSettingsPage {
    margin: 2px 0 0;
    font-size: .88rem;
    color: #5b6b83
}

.badgeRowSettingsPage {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.chipSettingsPage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .8rem;
    border: 1px solid transparent;
}

.chipOkSettingsPage {
    background: #cdebd4 !important;
    border-color: transparent !important;
    color: #289c45 !important;
}


/* Default (mobile) */
.deviceGridSettingsPage {
    display: unset !important; /* no grid on mobile */
    gap: 12px;
    padding: 12px;
}

/* Desktop (≥780px) */
@media (min-width: 780px) {
    .deviceGridSettingsPage {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 12px;
    }
}


/* Section cardlets */
.deviceSectionSettingsPage {
    background: #fff;
    border: 1px solid #eef2f8;
    border-radius: 12px;
    padding: 12px;
}

.sectTitleSettingsPage {
    margin: 0 0 8px;
    font-size: .9rem;
    font-weight: 700;
    color: #334155;
}

/* Key–value rows */
.kvSettingsPage {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.kvItemSettingsPage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #edf1f7;
}

    .kvItemSettingsPage:last-child {
        border-bottom: 0
    }

.kvKeySettingsPage {
    color: #667085;
    font-size: .9rem
}

.kvValSettingsPage {
    color: #0f172a;
    font-weight: 600
}

/* User agent block */
.uaSectionSettingsPage {
    grid-column: 1 / -1
}

.uaBlockSettingsPage {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    background: #0f172a;
    color: #e5e7eb;
    overflow: auto;
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    font-size: .82rem;
    line-height: 1.4;
    white-space: nowrap;
}


/* Card */
.notifCardSettingsPage {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(16,24,40,.06);
}

.notifHeaderSettingsPage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.hSettingsPage {
    margin: 0;
    font-size: 1rem;
    font-weight: 700
}

.subSettingsPage {
    color: #5b6b83;
    font-size: .95rem;
    margin: .5rem 0 1rem
}

/* Buttons */
.btnRowSettingsPage {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.btnSettingsPage, .btnPrimarySettingsPage, .btnGhostSettingsPage {
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.btnPrimarySettingsPage {
    background: #858585;
    border-color: #858585;
    color: #ffffff;
}

    .btnPrimarySettingsPage:hover {
        background: #dbdbdb;
        border-color: #e8e8e8;
        color: black;
    }

.btnGhostSettingsPage {
    background: #fff;
    border: 1px solid #e6ebf2;
    color: #0f172a
}

    .btnGhostSettingsPage:hover {
        border-color: #cfd7e4
    }

/* Status chips */
.chipSettingsPage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.chipOkSettingsPage {
    background: #eaf6ff;
    color: #0b56c5;
    border-color: #cfe6ff
}

.chipWarnSettingsPage {
    background: #fff3f0;
    color: #eb0000;
    border-color: #ffd9d1;
}

.chipPendingSettingsPage {
    background: #fff7e6;
    color: #8a5b00;
    border-color: #ffe2ae
}

/* Modal */
.notifModalSettingsPage {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    display: grid;
    place-items: center;
    z-index: 50;
}

.notifModalBoxSettingsPage {
    width: min(680px, 92vw);
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e6ebf2;
    box-shadow: 0 8px 30px rgba(2,6,23,.25);
    padding: 16px;
}

.instructionsSettingsPage {
    margin: 10px 0 12px;
    display: grid;
    gap: 10px
}

    .instructionsSettingsPage .stepSettingsPage {
        background: #f8fafc;
        border: 1px dashed #e6ebf2;
        border-radius: 10px;
        padding: 10px 12px;
        line-height: 1.4
    }

.hintSettingsPage {
    font-size: .9rem;
    color: #5b6b83;
    margin: 8px 0 14px
}



.customLoginTimeBadge
{
    font-weight: 600;
    font-size: 10px !important;
    color: black !important;
    background: #efefef;
    padding: 5px;
    border-radius: 15px;
}


.wrap-text-50 {
    display: block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 5px 5px 5px; /* adjust for your height */
}

/* Use alongside your existing .badge class */
.badge-wrap {
    /* display: inline-block; */ /* ensure box sizing + wrapping works */
    max-width: 150px;
    white-space: normal !important; /* override Bootstrap's nowrap if present */
    overflow-wrap: anywhere; /* break long words/IDs */
    word-break: break-word; /* extra safety for older browsers */
    /* line-height: 1.2; */
}


/* generic error border */
.border-error {
    border: 2px solid #dc3545 !important; /* red */
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
    border-radius: .375rem; /* match Bootstrap-ish rounding */
}

/* ensure Select2 selections pick up the style */
.select2-container--default .select2-selection--single.border-error,
.select2-container--default .select2-selection--multiple.border-error {
    border: 2px solid #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}



.containInStagingElement {
    max-height: 230px;
    overflow-y: auto; /* vertical scroll when needed */
    overflow-x: hidden; /* prevent horizontal scrollbars */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

    .containInStagingElement::-webkit-scrollbar {
        width: 8px;
    }

    .containInStagingElement::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.4);
        border-radius: 4px;
    }



#createModalStagingBody li {
    padding: 0px !important;
}



#createModalStagingBody {
    padding: 0px !important;
}



#createModalStagingBody th {
    display: none !important;
}



#createModalStagingBody .icon-box {
    display: none !important;
}


#createModalStagingBody td {
    min-width: 60px !important;
}




#createModalStagingBody .search-wrapper {
        width: 250px;
        margin-bottom: 20px;
    }

/* Selected tab style */
#radio-overstock-my:checked + label[for="radio-overstock-my"],
#radio-overstock-all:checked + label[for="radio-overstock-all"] {
    background-color: #e6eef9; /* Your selected color */
    color: #0370BA;
}



.gw-card.connected {
    border-left: 6px solid #28a745;
}
/* green */
.gw-card.disconnected {
    border-left: 6px solid #dc3545;
}
/* red */
.text-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.small-muted {
    font-size: .85rem;
    color: #6c757d;
}

.small-muted-bold {
    font-size: .85rem;
    font-weight: 900;
    color: #000000;
}

.nowrap {
    white-space: nowrap;
}



.esl-card {
 
    border-radius: 14px;
    background: #fff;
}

.esl-field label {
    font-size: 13px;
    color: #6c757d;
    display: block;
    margin-bottom: 6px;
}

.esl-input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ced4da;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.esl-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.esl-btn {
    padding: 12px 14px;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    width: 100%;
}

.esl-btn-primary {
    background: #0370ba;
    color: #fff;
}

.esl-btn-secondary {
    background: #e9ecef;
}

.esl-alert {
    margin-top: 12px;
    border-radius: 10px;
    padding: 10px 12px;
    display: none;
}

    .esl-alert.ok {
        background: #d4edda;
        color: #155724;
        display: block;
    }

    .esl-alert.err {
        background: #f8d7da;
        color: #721c24;
        display: block;
    }




#createModalStatusESL {
    z-index: 999999 !important;
}

span#StatusESLButton {
    width: 176px;
}





.transfer-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    transition: background 0.2s ease;
    text-align: center;
    justify-content: center;
}

    .transfer-option:hover {
        background-color: #f9fafb;
    }

.indicator {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    margin-top: 5px;
}

    .indicator.move {
        background-color: #ff6b6b; /* red for removal */
    }

    .indicator.keep {
        background-color: #00c49a; /* green for keep/update */
    }

    .indicator.transfer {
        background-color: #4f9cf9; /* blue for info transfer */
    }


.item-box-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Circle size */
    height: 30px;
    border-radius: 50%; /* Makes it circular */
    border: 2px solid #0370ba; /* Circle border color */
    background-color: #0370ba; /* Background inside circle */
    color: #fff; /* Icon color */
  
}


/* Default: card looks dimmed but remains interactive */
#menuMainTabOverStockLocationItemList > .routeCard {
    opacity: 0.5;
    transition: opacity 0.3s ease, filter 0.3s ease;
    filter: grayscale(60%); /* subtle greyed-out effect */
}

    /* When checkbox is checked — restore normal look */
    #menuMainTabOverStockLocationItemList > .routeCard:has(input[type="checkbox"]:checked) {
        opacity: 1;
        filter: none;
    }

.line-under-element {
    border-bottom: 1px solid #EEEEEE !important; /* color + thickness */
}

.edit-pickup-btn i,
.save-pickup-btn i {
    font-size: 16px;
}



.table-lightblue thead th {
    color: #141515;
    font-weight: 800;
    background-color: #fff;
    padding-bottom: 12px;
    border-color: #DEE2E6;
}

.table-lightblue tr:nth-of-type(odd) {
    background-color: #F0F5FA;
    border: 1px solid #DEE2E6 !Important;
}

.table-lightblue td {
    border: 1px solid #DEE2E6 !Important;
}

.ordering360-list-item {
    list-style: none;
}

.ordering360-card {
    padding: 10px 14px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid #e5e5e5;
}

.ordering360-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ordering360-label {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

.ordering360-value {
    font-size: 18px;
    font-weight: 700;
    color: #212529;
}

.ordering360-unit {
    font-size: 14px;
    font-weight: 600;
    margin-left: 4px;
    color: #495057;
}

.ordering360-quantity {
    font-weight: 800;
}



.smartScanScreen {
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    background: #ffffff;
  
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.smartScanShell {
    width: 100%;
    max-width: 480px;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.smartScanHeader {
    flex: 0 0 auto;
    padding-top: 2px;
}

.smartScanLogoRow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.smartScanLogoDot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4285f4, #34a853);
    box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.08);
}

.smartScanLogoText {
    font-size: 15px;
    font-weight: 700;
    color: #5f6368;
    letter-spacing: 0.02em;
}

.smartScanTitle {
    margin: 0;
    font-size: 26px;
    line-height: 1.08;
    font-weight: 700;
    color: #202124;
}

.smartScanSubtitle {
    margin: 8px 0 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #5f6368;
}

.smartScanPreviewCard {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(60, 64, 67, 0.08);
}

.smartScanPreviewImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    background: #f8f9fa;
}

.smartScanPreviewPlaceholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 18px;
    background: radial-gradient(circle at top, rgba(66, 133, 244, 0.06), transparent 45%), linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}

.smartScanPreviewIconWrap {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f1f3f4;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px #e8eaed;
}

.smartScanPreviewIcon {
    font-size: 26px;
    line-height: 1;
}

.smartScanPreviewTitle {
    font-size: 16px;
    font-weight: 700;
    color: #202124;
}

.smartScanPreviewSubtext {
    font-size: 13px;
    color: #5f6368;
}

.smartScanBottomArea {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.smartScanActionGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.smartScanActionTile {
    min-height: 78px;
    border-radius: 18px;
    padding: 10px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e8eaed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 14px rgba(60, 64, 67, 0.06);
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
    -webkit-tap-highlight-color: transparent;
}

    .smartScanActionTile:active {
        transform: scale(0.985);
    }

.smartScanActionTilePrimary {
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.smartScanActionIcon {
    font-size: 24px;
    margin-bottom: 2px;
}

.smartScanActionLabel {
    font-size: 14px;
    font-weight: 700;
    color: #202124;
}

.smartScanActionSubtext {
    font-size: 11px;
    color: #5f6368;
}

.smartScanHiddenInput {
    display: none;
}

.smartScanCountButton {
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 14px 16px;
    background: #1a73e8;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(26, 115, 232, 0.2);
    transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

    .smartScanCountButton:active {
        transform: scale(0.99);
    }

    .smartScanCountButton:disabled {
        background: #d2d6dc;
        color: #7a7f86;
        box-shadow: none;
        cursor: not-allowed;
    }

.smartScanLoadingMessage,
.smartScanResultBox,
.smartScanErrorBox {
    border-radius: 16px;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid #e8eaed;
}

.smartScanLoadingMessage {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fbff;
    color: #1a73e8;
    font-size: 14px;
}

.smartScanSpinner {
    width: 16px;
    height: 16px;
    border: 2px solid #d2e3fc;
    border-top-color: #1a73e8;
    border-radius: 50%;
    animation: smartScanSpin 0.8s linear infinite;
}

@keyframes smartScanSpin {
    to {
        transform: rotate(360deg);
    }
}

.smartScanResultBox {
    background: #eefbf3;
    border-color: #c7ebd3;
    color: #137333;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.smartScanErrorBox {
    background: #fce8e6;
    border-color: #f6c7c3;
    color: #c5221f;
    font-size: 13px;
    line-height: 1.4;
}

@media (max-height: 760px) {
    .smartScanScreen {
        padding: 10px;
    }

    .smartScanShell {
        gap: 10px;
    }

    .smartScanTitle {
        font-size: 23px;
    }

    .smartScanSubtitle {
        font-size: 13px;
    }

    .smartScanActionTile {
        min-height: 70px;
        padding: 8px;
    }

    .smartScanCountButton {
        padding: 12px 14px;
    }
}

@media (max-height: 680px) {
    .smartScanTitle {
        font-size: 21px;
    }

    .smartScanSubtitle {
        display: none;
    }

    .smartScanLogoRow {
        margin-bottom: 4px;
    }

    .smartScanActionTile {
        min-height: 64px;
    }

    .smartScanPreviewIconWrap {
        width: 50px;
        height: 50px;
    }

    .smartScanPreviewIcon {
        font-size: 22px;
    }
}


.smartScanResultBox {
    background: #eefbf3;
    border-color: #c7ebd3;
    color: #137333;
    text-align: left;
}

.smartScanResultPrimary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.smartScanResultLabel {
    font-size: 13px;
    font-weight: 600;
    color: #5f6368;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.smartScanResultValue {
    font-size: 28px;
    font-weight: 700;
    color: #137333;
    line-height: 1;
}

.smartScanResultSecondary {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #c7ebd3;
}

.smartScanResultSecondaryLabel {
    font-size: 12px;
    font-weight: 600;
    color: #5f6368;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.smartScanResultSecondaryValue {
    font-size: 14px;
    font-weight: 600;
    color: #202124;
    word-break: break-word;
}


.smartScanMiniCameraButton {
    position: absolute;
    top: 5px;
    right: 1px;
    width: 42px;
    height: 42px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    z-index: 20;
}

    .smartScanMiniCameraButton:hover {
        background: #f9fafb;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    }

    .smartScanMiniCameraButton:active {
        transform: scale(0.96);
    }

.smartScanMiniCameraIcon {
    width: 20px;
    height: 20px;
    fill: #1a73e8;
}



.itemCounterLoaderOverlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

    .itemCounterLoaderOverlay.visible {
        opacity: 1;
        visibility: visible;
    }

.itemCounterLoaderWrap {
    background: white;
    padding: 28px 34px;
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.itemCounterLoader {
    width: 60px;
    height: 60px;
    border: 6px solid #e9ecef;
    border-top: 6px solid #007bff;
    border-radius: 50%;
    animation: itemCounterLoaderSpin .8s linear infinite;
}

.itemCounterLoaderText {
    margin-top: 14px;
    font-weight: 600;
}

.itemCounterLoaderStop {
    margin-top: 18px;
    /* padding: 8px 16px; */
    /* background: #dc3545; */
    border: none;
    color: #f58f8f;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
}
    .itemCounterLoaderStop:hover {
        background: #b02a37;
    }

@keyframes itemCounterLoaderSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* location Item -> calldown step 2 Confirm Item Design */
#callDownContent360 .details_info li.locationheading {
    background: #fff;
    margin-bottom: 6px;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 15px;
}

.call-down-modal-custom .details_info li.locationheading .btn {
    padding: 0px 12px;
    font-size: 12px;
    line-height: 1.2em;
    font-weight: 500;
    border-radius: 6px;
    border-width: 2px;
    margin: 0;
    height: 30px;
}

.call-down-modal-custom .details_info li.locationheading .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.image-listview > li .item .icon-boxPutAway, li.locationItem .icon-box {
    min-width: 20px;
    max-width: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1em;
    font-size: 20px;
    border-radius: 2px;
    margin-right: 16px;
    border: 1px solid #d2d2d2 !important;
    background: #fff !important;
}

    .image-listview > li .item .icon-boxPutAway.icon-boxPutAway.btn-success {
        border: 1px solid #28a745 !important;
        background: #28a745 !important;
    }




.putAwayNoLocations {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 18px 16px;
    margin: 10px;
    /* border: 1px dashed #d6dde8; */
    border-radius: 14px;
    /* background: linear-gradient(180deg, #f9fbfd 0%, #f2f6fa 100%); */
    text-align: center;
}

.putAwayNoLocationsIcon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eaf4ff;
    color: #2f86d6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 10px;
}

.putAwayNoLocationsText {
    font-size: 15px;
    font-weight: 600;
    color: #6c757d !important;
    line-height: 1.2;
    margin-bottom: 4px;
}

.putAwayNoLocationsSubtext {
    font-size: 13px;
    color: #7a8696;
    line-height: 1.4;
    max-width: 260px;
}


.todays-activity-container {
    background-color: #ffffff;
    /* border-radius: 10px; */
    /* box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.08), 0 2px 6px 0 rgba(0, 0, 0, 0.06); */
    padding: 20px;
    /* margin: 20px 0; */
    /* border: 1px solid rgba(0, 0, 0, 0.06); */
}

.activity-overview-panel {
    background: #ffffff;
    border-radius: 28px;
    padding: 22px;
    border: 1px solid #edf0f5;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.activity-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: #8a94a6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}

.activity-heading {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.04em;
}

.activity-subheading {
    font-size: 13px;
    color: #8a94a6;
    margin-top: 4px;
}

.activity-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: #f5f7fb;
    color: #004A98;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.activity-search-wrap {
    height: 46px;
    border-radius: 16px;
    background: #f6f7f9;
    border: 1px solid #eef0f4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    margin-bottom: 16px;
}

    .activity-search-wrap i {
        color: #9aa3b2;
        font-size: 14px;
    }

    .activity-search-wrap input {
        border: none;
        outline: none;
        background: transparent;
        width: 100%;
        font-size: 14px;
        color: #1f2937;
    }

        .activity-search-wrap input::placeholder {
            color: #9aa3b2;
        }

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #f0f2f6;
    transition: all 0.18s ease;
}

   

.activity-item-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 14px;
    background: #DDF1FF;
    color: #004A98;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.activity-item-content {
    flex: 1;
    min-width: 0;
}

.activity-item-title {
    font-size: 14px;
    font-weight: 750;
    color: #111827;
    letter-spacing: -0.01em;
}

.activity-item-date {
    margin-top: 2px;
    font-size: 12px;
    color: #8a94a6;
}

.activity-item-time {
    font-size: 13px;
    font-weight: 700;
    color: #4b5563;
    background: #f6f7f9;
    border-radius: 999px;
    padding: 7px 11px;
    white-space: nowrap;
}

.activity-empty-state {
    text-align: center;
    padding: 42px 20px;
    border-radius: 22px;
    background: #fafbfc;
    border: 1px dashed #d8dee9;
}

.activity-empty-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: #ffffff;
    color: #9aa3b2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 24px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
}

.activity-empty-title {
    font-size: 16px;
    font-weight: 800;
    color: #374151;
}

.activity-empty-subtitle {
    margin-top: 5px;
    font-size: 13px;
    color: #8a94a6;
}


.taskLocationName {
    display: inline-flex;
    align-items: center;
    max-width: 150px;
    min-width: 0;
    vertical-align: bottom;
}

.locationTaskNameSpan {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.locationTaskNameSpan--truncated {
    cursor: pointer;
}

.task-location-tooltip-popup {
    position: absolute;
    z-index: 1080;
    max-width: 280px;
    pointer-events: none;
}

.task-location-tooltip-popup__inner {
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 6px;
    white-space: normal;
    word-break: break-word;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.task-location-tooltip-popup__arrow {
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background-color: rgba(0, 0, 0, 0.9);
    transform: rotate(45deg);
}

.task-location-tooltip-popup--below .task-location-tooltip-popup__arrow {
    top: -4px;
    bottom: auto;
}

.dataCardTasksOn360MainPage > .row.header-large-title > h3 {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.allTasksPageSearchBar {
    margin: 0 0 12px;
}

.allTasksPageSearchBar-label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8a94a6;
}

.allTasksPageSearchBar-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px 0 40px;
    border: 1px solid #d7dce5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(20, 21, 21, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.allTasksPageSearchBar--active .allTasksPageSearchBar-field,
.allTasksPageSearchBar-field:focus-within {
    border-color: #0370BA;
    box-shadow: 0 0 0 3px rgba(3, 112, 186, 0.12);
}

.allTasksPageSearchBar-icon {
    position: absolute;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a94a6;
    font-size: 14px;
    pointer-events: none;
}

.allTasksPageSearchBar-input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    line-height: 1.4;
    color: #141515;
    padding: 10px 36px 10px 0;
}

.allTasksPageSearchBar-input::placeholder {
    color: #a0a8b8;
}

.allTasksPageSearchBar-input::-webkit-search-cancel-button,
.allTasksPageSearchBar-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.allTasksPageSearchBar-clear {
    position: absolute;
    right: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #eef2f7;
    color: #5b6474;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.allTasksPageSearchBar-clear--visible {
    display: inline-flex;
}

.allTasksPageSearchBar-clear:hover,
.allTasksPageSearchBar-clear:focus {
    background: #dfe6f0;
    color: #141515;
}

.allTasksPageSearchBar-empty {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f6f8fb;
    color: #6c7789;
    font-size: 13px;
    text-align: center;
}

body.dark-mode-active .allTasksPageSearchBar-label {
    color: #b0b8c7;
}

body.dark-mode-active .allTasksPageSearchBar-field {
    border-color: #2f3542;
    background: #1f2430;
    box-shadow: none;
}

body.dark-mode-active .allTasksPageSearchBar--active .allTasksPageSearchBar-field,
body.dark-mode-active .allTasksPageSearchBar-field:focus-within {
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16);
}

body.dark-mode-active .allTasksPageSearchBar-icon {
    color: #9aa3b5;
}

body.dark-mode-active .allTasksPageSearchBar-input {
    color: #f5f7fa;
}

body.dark-mode-active .allTasksPageSearchBar-input::placeholder {
    color: #7d8798;
}

body.dark-mode-active .allTasksPageSearchBar-clear {
    background: #2d3442;
    color: #c5cedd;
}

body.dark-mode-active .allTasksPageSearchBar-empty {
    background: #252b36;
    color: #aeb7c7;
}

.dueTasksPageSearchBar {
    margin: 0 0 12px;
}

.dueTasksPageSearchBar-label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8a94a6;
}

.dueTasksPageSearchBar-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px 0 40px;
    border: 1px solid #d7dce5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(20, 21, 21, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dueTasksPageSearchBar--active .dueTasksPageSearchBar-field,
.dueTasksPageSearchBar-field:focus-within {
    border-color: #0370BA;
    box-shadow: 0 0 0 3px rgba(3, 112, 186, 0.12);
}

.dueTasksPageSearchBar-icon {
    position: absolute;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a94a6;
    font-size: 14px;
    pointer-events: none;
}

.dueTasksPageSearchBar-input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    line-height: 1.4;
    color: #141515;
    padding: 10px 36px 10px 0;
}

.dueTasksPageSearchBar-input::placeholder {
    color: #a0a8b8;
}

.dueTasksPageSearchBar-input::-webkit-search-cancel-button,
.dueTasksPageSearchBar-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.dueTasksPageSearchBar-clear {
    position: absolute;
    right: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #eef2f7;
    color: #5b6474;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dueTasksPageSearchBar-clear--visible {
    display: inline-flex;
}

.dueTasksPageSearchBar-clear:hover,
.dueTasksPageSearchBar-clear:focus {
    background: #dfe6f0;
    color: #141515;
}

.dueTasksPageSearchBar-empty {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f6f8fb;
    color: #6c7789;
    font-size: 13px;
    text-align: center;
}

body.dark-mode-active .dueTasksPageSearchBar-label {
    color: #b0b8c7;
}

body.dark-mode-active .dueTasksPageSearchBar-field {
    border-color: #2f3542;
    background: #1f2430;
    box-shadow: none;
}

body.dark-mode-active .dueTasksPageSearchBar--active .dueTasksPageSearchBar-field,
body.dark-mode-active .dueTasksPageSearchBar-field:focus-within {
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16);
}

body.dark-mode-active .dueTasksPageSearchBar-icon {
    color: #9aa3b5;
}

body.dark-mode-active .dueTasksPageSearchBar-input {
    color: #f5f7fa;
}

body.dark-mode-active .dueTasksPageSearchBar-input::placeholder {
    color: #7d8798;
}

body.dark-mode-active .dueTasksPageSearchBar-clear {
    background: #2d3442;
    color: #c5cedd;
}

body.dark-mode-active .dueTasksPageSearchBar-empty {
    background: #252b36;
    color: #aeb7c7;
}

/* Patient Charging — delete batch item loader */
.pcLoaderCustom {
    position: fixed;
    inset: 0;
    z-index: 100000;
}

.pcLoaderCustom__backdrop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
}

.pcLoaderCustom__card {
    width: min(100%, 360px);
    padding: 28px 24px 22px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04);
    text-align: center;
    animation: pcLoaderCustomCardIn 0.35s ease-out;
}

@keyframes pcLoaderCustomCardIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pcLoaderCustom__iconWrap {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.pcLoaderCustom__icon {
    position: relative;
    width: 72px;
    height: 78px;
}

.pcLoaderCustom__iconBody {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 52px;
    height: 54px;
    transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #fff1f0 0%, #ffd8d4 100%);
    border: 2px solid #f5b5ae;
    box-shadow: inset 0 -8px 0 rgba(220, 68, 55, 0.08);
}

.pcLoaderCustom__iconBody::before,
.pcLoaderCustom__iconBody::after {
    content: '';
    position: absolute;
    top: 14px;
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: rgba(220, 68, 55, 0.22);
}

.pcLoaderCustom__iconBody::before {
    left: 16px;
}

.pcLoaderCustom__iconBody::after {
    right: 16px;
}

.pcLoaderCustom__iconLid {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 60px;
    height: 10px;
    transform: translateX(-50%);
    border-radius: 4px;
    background: #f08a7f;
    animation: pcLoaderCustomLidRock 2.4s ease-in-out infinite;
    transform-origin: 12px 50%;
}

.pcLoaderCustom__iconLid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    width: 14px;
    height: 8px;
    transform: translateX(-50%);
    border-radius: 3px 3px 0 0;
    background: #e87468;
}

@keyframes pcLoaderCustomLidRock {
    0%, 18%, 100% {
        transform: translateX(-50%) rotate(0deg);
    }

    8% {
        transform: translateX(-50%) rotate(-28deg);
    }
}

.pcLoaderCustom__iconSpark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f08a7f;
    opacity: 0;
    animation: pcLoaderCustomSpark 2.4s ease-in-out infinite;
}

.pcLoaderCustom__iconSpark--1 {
    left: 8px;
    top: 26px;
    animation-delay: 0.2s;
}

.pcLoaderCustom__iconSpark--2 {
    right: 10px;
    top: 30px;
    animation-delay: 0.45s;
}

.pcLoaderCustom__iconSpark--3 {
    left: 50%;
    top: 18px;
    margin-left: -3px;
    animation-delay: 0.65s;
}

@keyframes pcLoaderCustomSpark {
    0%, 12%, 100% {
        opacity: 0;
        transform: translateY(0) scale(0.6);
    }

    20%, 55% {
        opacity: 1;
        transform: translateY(-10px) scale(1);
    }

    70% {
        opacity: 0;
        transform: translateY(-18px) scale(0.4);
    }
}

.pcLoaderCustom__itemName {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #9b2c2c;
    letter-spacing: 0.01em;
}

.pcLoaderCustom__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    color: #1f2937;
    transition: opacity 0.25s ease;
}

.pcLoaderCustom__subtitle {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.45;
    color: #6b7280;
    min-height: 40px;
    transition: opacity 0.25s ease;
}

.pcLoaderCustom__progressTrack {
    height: 8px;
    border-radius: 999px;
    background: #f3f4f6;
    overflow: hidden;
    margin-bottom: 16px;
}

.pcLoaderCustom__progressBar {
    height: 100%;
    width: 8%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f08a7f 0%, #e87468 55%, #dc4437 100%);
    background-size: 200% 100%;
    transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    animation: pcLoaderCustomProgressShine 2.2s linear infinite;
}

@keyframes pcLoaderCustomProgressShine {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.pcLoaderCustom__steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.pcLoaderCustom__step {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #9ca3af;
    background: #f9fafb;
    border: 1px solid #eceff3;
    transition: all 0.35s ease;
}

.pcLoaderCustom__step--active {
    color: #9b2c2c;
    background: #fff1f0;
    border-color: #f5c6c0;
    box-shadow: 0 0 0 3px rgba(240, 138, 127, 0.12);
}

.pcLoaderCustom__step--done {
    color: #166534;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.pcLoaderCustom__hint {
    margin: 0;
    font-size: 12px;
    color: #9ca3af;
}

#pcAcceptBatchButton.pc-accept-batch--pending,
#pcAcceptBatchButton[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

#pcSuspendBatchButton:disabled,
#pcSuspendBatchButton.pc-suspend-batch--pending {
    opacity: 0.55;
    cursor: not-allowed;
}




.searchboxPC #searchInputItemsPC {
    height: 48px;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 0 16px 0 42px;
    font-size: 15px;
    font-weight: 500;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: all .2s ease;
}

.searchboxPC #searchInputItemsPC::placeholder {
    color: #9aa0a6;
    font-weight: 400;
}

.searchboxPC #searchInputItemsPC:hover {
    border-color: #c5cbd3;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.searchboxPC #searchInputItemsPC:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 4px rgba(13,110,253,.15);
    outline: none;
}

.searchboxPC .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
    font-size: 14px;
    transition: color .2s ease;
}


.searchboxPC #searchInputItemsPC {
    height: 48px;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding-left: 42px;
    transition: all .2s ease;
}

    /* Clicked / focused state */
.searchboxPC #searchInputItemsPC:focus,
.searchboxPC #searchInputItemsPC:active {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 4px rgba(13,110,253,.15) !important;
    outline: none !important;
}

/* Change icon color when clicked */
.searchboxPC:focus-within .input-icon {
    color: #0d6efd;
}

.searchboxPC:focus-within .input-icon {
    color: #0d6efd;
}


.searchboxPC #searchInputItemsPC {
    height: 50px;
    border: none;
    border-radius: 25px;
    padding-left: 46px;
    background: #f8f9fa;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
    transition: all .2s ease;
}

    .searchboxPC #searchInputItemsPC:focus {
        background: #fff;
        box-shadow: 0 0 0 4px rgba(13,110,253,.12), 0 6px 20px rgba(0,0,0,.08);
    }



/*Package Delivery*/

.pd-tabs {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ddd;
    margin-top: 5px;
}

.pd-tab {
    flex: 1;
    text-align: center;
    padding: 12px;
    font-weight: 500;
    color: #777;
    cursor: pointer;
}

.pd-tab.active {
    color: #2b7cff;
    border-bottom: 3px solid #2b7cff;
}

.pd-search {
    border-radius: 20px;
    padding: 8px 12px;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.pd-nonpo-btn {
    background: #e6f0ff;
    color: #2b7cff;
    border-radius: 20px;
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
}

.pd-scan-img {
    width: 140px;
}

.pd-scan-btn {
    background: #0470BA;
    color: white;
    border-radius: 25px;
    padding: 10px 20px;
    font-weight: 500;
}

.pd-delivery-img {
    width: 140px;
}

#pdDeliverTab h5 {
    font-weight: 600;
}

.pd-my-deliveries-list {
    text-align: left;
    overflow: visible;
}

.pd-location-group {
    margin-bottom: 18px;
    overflow: visible;
    position: relative;
}

.pd-location-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.pd-location-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.pd-location-group-name {
    font-weight: 600;
    color: #1f2a37;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-location-info-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #0370ba;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pd-location-info-btn i {
    font-size: 1rem;
}

.pd-location-bulk-menu {
    position: relative;
    flex-shrink: 0;
}

.pd-location-bulk-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: #6c757d;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pd-location-bulk-toggle:hover,
.pd-location-bulk-toggle:focus,
.pd-location-bulk-toggle[aria-expanded="true"] {
    background: #eef3f8;
    color: #0370ba;
}

.pd-location-bulk-dropdown {
    min-width: 280px;
    max-width: min(320px, calc(100vw - 24px));
    padding: 6px 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 2000 !important;
    right: 0 !important;
    left: auto !important;
}

.pd-location-bulk-dropdown.show {
    display: block;
}

.pd-location-bulk-dropdown .dropdown-item {
    padding: 10px 16px;
    font-size: 0.95rem;
    white-space: normal;
    line-height: 1.35;
}

.pd-location-bulk-dropdown .dropdown-item:disabled {
    opacity: 0.45;
}

#pdDeliverTab,
#packageDeliveryContent360 {
    overflow: visible;
}

.pd-location-group-items .pd-card {
    margin-bottom: 10px;
}

.pd-location-modal {
    border-radius: 14px;
    border: none;
    overflow: hidden;
}

.pd-location-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #e8eef4;
}

.pd-location-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2a37;
}

.pd-location-modal-close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #6c757d;
    padding: 0 4px;
}

.pd-location-modal-body {
    padding: 16px;
}

.pd-location-modal-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.pd-location-modal-row:last-child {
    margin-bottom: 0;
}

.pd-location-modal-row > i {
    margin-top: 3px;
    width: 18px;
    text-align: center;
}

.pd-location-modal-row-text {
    color: #374151;
    line-height: 1.45;
    font-size: 0.95rem;
}

.pd-modal {
    border-radius: 12px;
    padding: 10px;
}

.pd-btn-outline {
    border: 1px solid #999;
    border-radius: 20px;
    padding: 6px 15px;
    background: white;
}

.pd-btn-primary {
    background: #0370ba !important;
    color: white;
    border-radius: 20px;
    padding: 6px 15px;
}

.pd-po-info {
    text-align: left;
    margin-top: 10px;
}

#poDetailsModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.pd-row {
    padding: 10px 0;
    border-top: 1px solid #eee;
    font-size: 14px;
}


.pd-row i {
    color: #0370ba !important;
}

.pd-expand {
    background: #fff;
}


.pd-location {
    padding: 12px 5px;
    border-top: 1px solid #eee;
}

.pd-location-title {
    font-weight: 600;
    font-size: 14px;
}

.pd-location-sub {
    font-size: 13px;
    color: #777;
}

.pd-supplier {
    padding: 14px 5px;
    border-top: 1px solid #eee;
    font-weight: 500;
}

.pd-summary {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #555;
}

    .pd-summary span {
        display: flex;
        align-items: center;
        gap: 5px;
    }

.pd-summary-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pd-po-header-row {
    gap: 12px;
}

.pd-po-header-row h2 {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.pd-po-bulk-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #d7dee7;
    background: #fff;
    color: #0370ba;
    border-radius: 10px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pd-po-bulk-toggle i {
    font-size: 1.1rem;
}

.pd-po-bulk-toggle:hover,
.pd-po-bulk-toggle:focus,
.pd-po-bulk-toggle[aria-expanded="true"] {
    background: #eef3f8;
    color: #0370ba;
    border-color: #0370ba;
}

.pd-po-bulk-menu {
    position: relative;
    flex-shrink: 0;
}

.pd-po-bulk-dropdown {
    min-width: 260px;
    padding: 6px 0;
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1050;
}

.pd-po-bulk-dropdown .dropdown-item {
    font-size: 0.95rem;
    padding: 10px 16px;
    color: #212529;
}

.pd-po-bulk-dropdown .dropdown-item:hover:not(:disabled),
.pd-po-bulk-dropdown .dropdown-item:focus:not(:disabled) {
    background: #f3f7fb;
    color: #0370ba;
}

.pd-po-bulk-dropdown .dropdown-item:disabled {
    color: #b0b7bf;
    pointer-events: none;
}

.pd-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #eef3f8;
    color: #4a6b8a;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
}

    .pd-pill i {
        font-size: 11px;
    }

/* --- PO Details Card Custom Styles --- */
.pd-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    padding: 16px 20px;
    margin-bottom: 18px;
    border: none;
}

.pd-item-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 2px;
}

.pd-item-sub {
    font-size: 0.92rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-badge-received {
    background: #eef3f8 !important;
    color: #0370ba !important;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.85em;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.pd-badge-undo {
    background: #f8d7da;
    color: #c82333;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.85em;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    border: none;
}

.pd-pickup-btn {
    background: #0370ba !important;
    color: #fff;
    border-radius: 20px;
    font-weight: 600;
    padding: 6px 22px;
    border: none;
    margin-right: 10px;
    transition: background 0.2s;
}

    .pd-pickup-btn:hover {
        background: #005289;
        color: #fff;
    }

.pd-receive-btn {
    background: #0370ba !important;
    color: #fff;
    border-radius: 20px;
    font-weight: 600;
    padding: 6px 22px;
    border: none;
    margin-right: 10px;
    transition: background 0.2s;
}

.pd-receive-btn:hover {
    background: #ddeaff;
    color: #0370ba;
}

.pd-deliver-btn {
    background: #0370ba !important;
    color: #fff;
    border-radius: 20px;
    font-weight: 600;
    padding: 6px 22px;
    border: none;
    margin-right: 10px;
    transition: background 0.2s;
}

.pd-deliver-btn:hover {
    background: #005289;
    color: #fff;
}

.pd-willcall-btn,
.pd-mark-taken-btn {
    border-radius: 20px;
    font-weight: 600;
    padding: 6px 22px;
    border: solid;
    margin-right: 10px;
    transition: background 0.2s;
}

.pd-qty-input {
    width: 60px;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 4px 8px;
    margin-right: 10px;
    text-align: center;
    font-size: 1rem;
    height: 36px;
}

.pd-card-open-detail {
    cursor: pointer;
    padding: 4px;
}

.pd-item-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.pd-item-detail-header-text {
    flex: 1;
    min-width: 0;
}

.pd-item-detail-header .pd-item-title {
    word-break: break-word;
}

.pd-detail-action-btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pd-view-po-btn,
.pd-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    border-radius: 20px;
    padding: 5px 12px;
    min-width: auto;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
}

.pd-view-po-btn {
    background: #eef3f8 !important;
    color: #0370ba !important;
}

.pd-report-btn {
    background: #fde8ea !important;
    color: #c82333 !important;
}

.pd-report-btn i {
    font-size: 0.8rem;
    margin-left: 3px;
    color: #c82333;
}

.pd-item-detail-meta {
    font-size: 0.9rem;
    color: #555;
    margin-top: 8px;
}

.pd-item-detail-meta i {
    color: #0370ba;
    width: 18px;
}

.pd-location-info-btn {
    cursor: pointer;
    color: #0370ba;
    margin-left: 6px;
}

.pd-detail-status-row {
    border-top: 1px solid #eee;
    padding-top: 12px;
    margin-top: 12px;
}

.pd-detail-qty-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.pd-detail-deliver-actions {
    flex-wrap: wrap;
    gap: 8px;
}

.pd-detail-picked-summary {
    padding-bottom: 4px;
}

.pd-detail-willcall-summary {
    padding-bottom: 4px;
}

.pd-detail-history-row {
    padding-bottom: 8px;
}

.pd-pod-link {
    margin-top: 4px;
}

.pd-pod-link a {
    color: #0370ba;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.pd-pod-link a:hover {
    text-decoration: underline;
}

.pd-pod-img {
    max-height: 240px;
    object-fit: contain;
    border: 1px solid #e5eaf0;
    border-radius: 8px;
    background: #f8fafc;
}

.pd-pod-empty {
    font-size: 0.9rem;
    padding: 12px;
    border: 1px dashed #d7dee7;
    border-radius: 8px;
    background: #f8fafc;
}

.pd-status-label {
    font-weight: 600;
    color: #0370ba;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.pd-status-received i {
    font-size: 0.85rem;
}

.pd-undo-btn {
    margin-left: auto;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fde8ea !important;
    color: #c82333 !important;
}

.pd-qty-readonly {
    background: #fff;
    color: #333;
}

.pd-received-date {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #888;
}

.pd-detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pd-report-modal {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

.pd-report-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #eee;
}

.pd-report-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    color: #c82333;
    font-size: 1.35rem;
}

.pd-report-modal-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #222;
}

.pd-report-modal-close {
    border: none;
    background: transparent;
    color: #666;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.pd-report-modal-body {
    padding: 16px;
}

.pd-report-item-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #222;
    margin-bottom: 10px;
    line-height: 1.35;
}

.pd-report-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.pd-report-badge {
    display: inline-block;
    background: #f0f0f0;
    color: #444;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.pd-report-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: #333;
    margin-bottom: 6px;
}

.pd-report-select,
.pd-report-textarea {
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 0.875rem;
}

.pd-report-textarea {
    resize: vertical;
    min-height: 88px;
}

.pd-report-textarea,
.pd-report-select {
    margin-bottom: 14px;
}

.pd-report-upload-zone {
    margin-bottom: 16px;
}

.pd-report-upload-zone label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 110px;
    margin: 0;
    padding: 20px;
    border: 2px dashed #d5d5d5;
    border-radius: 10px;
    background: #fafafa;
    color: #0370ba;
    font-weight: 600;
    cursor: pointer;
}

.pd-report-upload-zone label i {
    font-size: 1.75rem;
    color: #0370ba;
}

.pd-report-photo-preview {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 12px;
}

.pd-delivery-photo-upload-zone {
    border: 2px dashed #ccc;
    border-radius: 12px;
}

.pd-delivery-photo-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
    border: 2px dashed #ccc;
    border-radius: 12px;
    background: #f5f5f5;
}

.pd-delivery-photo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
}

.pd-delivery-photo-view-btn {
    border: 1.5px solid #0370ba;
    color: #0370ba;
}

.pd-delivery-photo-replace-btn {
    border: 1.5px solid #9e9e9e;
    color: #666;
}

.pd-delivery-photo-delete-btn {
    border: 1.5px solid #dc3545;
    color: #dc3545;
}

.pd-delivery-photo-view-img {
    border-radius: 8px;
    max-height: 70vh;
    object-fit: contain;
}

#deliveryPhotoPicture {
    display: none !important;
}

.pd-report-submit-btn {
    width: 100%;
    border: none;
    border-radius: 24px;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    background: #0370ba !important;
    color: #fff !important;
}

.pd-report-submit-btn:disabled {
    background: #d8d8d8 !important;
    color: #fff !important;
    cursor: not-allowed;
}

.pd-report-remove-photo {
    padding: 0;
    font-size: 0.8125rem;
}