@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
    --primary: #1BA4DE;
    --danger: #f73757;
    --success: #18bb6b;
    --info: #32bfff;
    --warning: #ffab4d;
    --purple: #8932ff;
    --orange: #ff6632;
    --bronze: #cc7429;
    --pink: #e72e7a;
    --tiffany: #3361ff;
    --secondary: #6c757d;
    --light: #f8f9fa;
    --dark: #212529;

    --primary-hard: #1F89B7;
    --danger-hard: #e93452;
    --success-hard: #14aa62;
    --info-hard: #2bc5e4;
    --warning-hard: #f7a548;
    --purple-hard: #8436a8;
    --orange-hard: #ff6632;
    --bronze-hard: #cc7429;
    --pink-hard: #e72e7a;
    --tiffany-hard: #3361ff;
    --secondary-hard: #565e64;
    --light-hard: #f9fafb;
    --dark-hard: #1c1f23;

    --white: #ffffff;
    --black: #000000;

    --color: #5f5f5f;
    
    --border: rgba(232, 233, 235, 0.5);
    --border2: #dcdcdc;
    --background: #f7f8fa;

    --shadow: 0 0.25rem 1rem 0.5rem rgba(54, 56, 72, 0.05);
    --shadow-xs: 0 0.15rem 0.625rem 0.5rem rgba(54, 56, 72, 0.035);
    --shadow-sm: 0 0.15rem 1rem 0.5rem rgba(54, 56, 72, 0.035);
    --shadow-md: 0 0.313rem 1.25rem rgba(54, 56, 72, 0.1);

    --transition: all .4s ease-in-out;
    --transition-2: all .2s ease-in-out;
    --transition-3: all .3s ease-in-out;
    --transition-4: all .4s ease-in-out;
    --transition-5: all .5s ease-in-out;
    --transition-6: all .6s ease-in-out;
    --transition-7: all .7s ease-in-out;
    --transition-8: all .8s ease-in-out;
    --transition-9: all .9s ease-in-out;

    --transform-fix: 'none';

    --font: 'Roboto', sans-serif;
}


/* ----------------------------------- general ----------------------------------- */
    body { font-family: var(--font); font-size: 14px; letter-spacing: .5px; color: var(--color); background-color: var(--background); overflow-x: hidden; }

    a { text-decoration: none; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    ion-icon { vertical-align: middle; }
    ::placeholder { opacity: 0.5 !important; }

    .wrapper { position: relative; width: 100%; height: auto; }
    .wrapper .page-content-wrapper { margin-left: 260px; margin-top: 65px; padding-bottom: 20px; transition: .3s all; }
    .wrapper .page-content { padding: 1.5rem; }
    .wrapper .overlay {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: -300px;
        background-color: #060505;
        opacity: 0.5;
        z-index: 1;
        cursor: move;
        transition: .7s all;
    }

    @media screen and (max-width: 580px) {
        .wrapper .page-content { padding: 1.5rem 0.625rem; }
    }
    

    .offcanvas-end { width: 300px; }

    /*scrollable*/
    .scrollable {
        position: relative;
        display: -ms-flexbox;
        display: flex; 
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: inherit;
        flex-wrap: inherit;
        white-space: nowrap;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollable::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; cursor: pointer; }
    .scrollable::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0); border-radius: 2.5rem; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable::-webkit-scrollbar-thumb { background: rgba(195, 195, 195, 0); border-radius: 2.5rem; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable:hover::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0.8); -webkit-box-shadow: inset 0 0.313rem 0.5rem rgba(241, 241, 241, 1); box-shadow: inset 0 0.313rem 0.5rem rgba(241, 241, 241, 1); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable:hover::-webkit-scrollbar-thumb { background: rgba(195, 195, 195, 0.5); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable::-webkit-scrollbar-thumb:horizontal:hover,
    .scrollable::-webkit-scrollbar-thumb:vertical:hover { background: rgba(195, 195, 195, 1); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .h-scrollable { overflow-y: hidden !important; overflow-x: auto !important; }

    .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .garis { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); }
/* ----------------------------------- end general ----------------------------------- */


/* ----------------------------------- background ----------------------------------- */
    .bg-primary { background-color: var(--primary)!important; }
    .bg-danger { background-color: #f73757!important; }
    .bg-success { background-color: #18bb6b!important; }
    .bg-info { background-color: #32bfff!important; }
    .bg-warning { background-color: #ffab4d!important; }
    .bg-purple { background-color: #8932ff!important; }
    .bg-orange { background-color: #ff6632!important; }
    .bg-bronze { background-color: #cc7429!important; }
    .bg-pink { background-color: #e72e7a!important; }
    .bg-tiffany { background-color: #3361ff!important; }

    .bg-light-primary { background-color: rgb(146 62 185 / 12%)!important }
    .bg-light-success { background-color: rgb(24 187 107 / 12%)!important }
    .bg-light-danger { background-color: rgb(247 55 87 / 12%)!important }
    .bg-light-info { background-color: rgba(50, 190, 255, 0.12)!important; }
    .bg-light-warning { background-color: rgba(255, 204, 50, 0.12)!important; }
    .bg-light-purple { background-color: rgba(135, 50, 255, 0.12)!important; }
    .bg-light-orange { background-color: rgba(255, 101, 50, 0.12)!important; }
    .bg-light-bronze { background-color: rgba(204, 117, 41, 0.12)!important; }
    .bg-light-pink { background-color: rgba(231, 46, 123, 0.12)!important; }
    .bg-light-tiffany { background-color: rgba(51, 99, 255, 0.12)!important; }
    .bg-light-dark { background-color: rgba(33, 37, 41, 0.12)!important; }

    .bg-login { background-color: #0259e6!important; }
    .bg-surface { background-color: #f7f8fa !important; }
    .bg-white-1 { background-color: rgba(255, 255, 255, 0.16)!important; }

    .bg-facebook { background-color: #3b5998!important }
    .bg-twitter { background-color: #55acee!important }
    .bg-google { background-color: #e52d27!important }
    .bg-linkedin { background-color: #0976b4!important }

    .bg-gradient-primary { background-image: linear-gradient(310deg,#6ba3bc, var(--primary)); }
    .bg-gradient-purple { background-image: linear-gradient(310deg,#7928ca,#ff0080); }
    .bg-gradient-success { background-image: linear-gradient( 310deg,#17ad37,#98ec2d); }
    .bg-gradient-danger { background: linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0)); }
    .bg-gradient-info { background-image: linear-gradient(to top, rgb(0, 198, 251) 0%, rgb(0, 91, 234) 100%); }
    .bg-gradient-warning { background: linear-gradient(to right, rgb(247, 151, 30), rgb(255, 210, 0)); }
    .bg-gradient-voilet { background: linear-gradient(to right, rgb(52, 148, 230), rgb(236, 110, 173)); }
    .bg-gradient-royal { background-image: linear-gradient(-20deg, rgb(43, 88, 118) 0%, rgb(78, 67, 118) 100%); }
    .bg-gradient-branding { background-image: linear-gradient(rgb(42, 245, 152) 0%, rgb(0, 158, 253) 100%); }
/* ----------------------------------- end background ----------------------------------- */


/* ----------------------------------- utilities ----------------------------------- */
    .font-weight-200, .fw-200 { font-weight: 200 !important; }
    .font-weight-light, .fw-300 { font-weight: 300 !important; }
    .font-weight-lighter, .fw-lighter { font-weight: lighter !important; }
    .font-weight-normal, .fw-400 { font-weight: 400 !important; }
    .font-weight-500, .fw-500 { font-weight: 500 !important; }
    .font-weight-600, .fw-600 { font-weight: 600 !important; }
    .font-weight-bold, .fw-bold { font-weight: 600 !important; }
    .font-weight-700, .fw-700 { font-weight: 700 !important; }
    .font-weight-800, .fw-800 { font-weight: 800 !important; }
    .font-weight-900, .fw-900 { font-weight: 900 !important; }
    .font-weight-ultra, .fw-ultra { font-weight: 900 !important; }
    .font-weight-bolder, .fw-bolder { font-weight: 700 !important; }
    .font-italic { font-style: italic !important; }

    .font-10 { font-size: 0.625rem !important; }
    .font-11 { font-size: 0.688rem !important; }
    .font-12 { font-size: 0.75rem !important; }
    .font-13 { font-size: 0.813rem !important; }
    .font-14 { font-size: 0.875rem !important; }
    .font-15 { font-size: 0.938rem !important; }
    .font-16 { font-size: 1rem !important; }
    .font-17 { font-size: 1.063rem !important; }
    .font-18 { font-size: 1.125rem !important; }
    .font-19 { font-size: 1.188rem !important; }
    .font-20 { font-size: 1.25rem !important; }
    .font-21 { font-size: 1.313rem !important; }
    .font-22 { font-size: 1.375rem !important; }
    .font-23 { font-size: 1.438rem !important; }
    .font-24 { font-size: 1.5rem !important; }
    .font-25 { font-size: 1.563rem !important; }
    
    .font-xs { font-size: 0.688rem !important; }
    .font-sm { font-size: 0.75rem !important; }
    .font-md { font-size: 0.938rem !important; }
    .font-lg { font-size: 1.25rem !important; }

    .text-primary { color: var(--primary)!important; }
    .text-danger { color: #f73757!important; }
    .text-success { color: #18bb6b!important; }
    .text-info { color: #32bfff!important; }
    .text-warning { color: #ffab4d!important; }
    .text-purple { color: #8932ff!important; }
    .text-orange { color: #ff6632!important; }
    .text-bronze { color: #cc7429!important; }
    .text-pink { color: #e72e7a!important; }
    .text-tiffany { color: #3361ff!important; }

    .text-option { color: #32393f!important }
    .text-facebook { color: #3b5998!important }
    .text-twitter { color: #55acee!important }
    .text-youtube { color: #e52d27!important }
    .text-sky-light { color: #b4d2ff; }

    .border-primary { border-color: var(--primary)!important; }
    .border-danger { border-color: #f73757!important; }
    .border-success { border-color: #18bb6b!important; }
    .border-info { border-color: #32bfff!important; }
    .border-warning { border-color: #ffab4d!important; }
    .border-purple { border-color: #8932ff!important; }
    .border-orange { border-color: #ff6632!important; }
    .border-bronze { border-color: #cc7429!important; }
    .border-pink { border-color: #e72e7a!important; }
    .border-tiffany { border-color: #3361ff!important; }
    .border-light-1 { border-color: rgb(255 255 255 / 24%)!important; }

    .lh-1 { line-height: 1; }
    .lh-2 { line-height: 1.2; }
    .lh-3 { line-height: 1.3; }
    .lh-4 { line-height: 1.4; }
    .lh-5 { line-height: 1.5; }

    .text-decoration-none { text-decoration: none !important; }
    .text-break { word-break: break-word !important; overflow-wrap: break-word !important; }
    .word-break-all { word-break: break-all !important; }
    .text-reset { color: inherit !important; }

    .text-limit-1-row { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical; }
    .text-limit-2-row { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; }
    .text-limit-3-row { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical; }
    .text-limit-4-row { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical; }
    .text-limit-5-row { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 5 !important; -webkit-box-orient: vertical; }

    .rounded { border-radius: 0.25rem !important; }
    .rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
    .rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
    .rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
    .rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
    .rounded-sm { border-radius: 0.2rem !important; }
    .rounded-lg { border-radius: 0.3rem !important; }
    .rounded-circle { border-radius: 50% !important; }
    .rounded-pill { border-radius: 50rem !important; }

    .rounded-0 { border-radius: 0 !important; }
    .rounded-5 { border-radius: 0.313rem !important; }
    .rounded-8 { border-radius: 0.5rem !important; }
    .rounded-10 { border-radius: 0.625rem !important; }
    .rounded-15 { border-radius: 0.938rem !important; }
    .rounded-20 { border-radius: 1.25rem !important; }
    .rounded-30 { border-radius: 1.875rem !important; }
    .rounded-40 { border-radius: 2.5rem !important; }
    .rounded-50 { border-radius: 50% !important; }

    .chart-container1 { position: relative; height: 380px; }
    .chart-container2 { position: relative; height: 420px; }
    .chart-container3 { position: relative; height: 293px; }
    .chart-container4 { position: relative; height: 350px; }
    .chart-container5 { position: relative; height: 230px; }
    .chart-container6 { position: relative; height: 250px; }
    .chart-container7 { position: relative; height: 300px; }
    .chart-container8 { position: relative; height: 190px; }
    .chart-container9 { position: relative; height: 320px; }

    .img-contain { object-fit: contain; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }
    .img-cover { object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }

    .img-profile-xs { width: 2.5rem; height: 2.5rem; border-radius: 50%; -o-object-fit: cover; object-fit: cover; object-position: 50% 50%; }
    .img-profile-sm { width: 3.75rem; height: 3.75rem; border-radius: 50%; -o-object-fit: cover; object-fit: cover; object-position: 50% 50%; }
    .img-profile-md { width: 5rem; height: 5rem; border-radius: 50%; -o-object-fit: cover; object-fit: cover; object-position: 50% 50%; }
    .img-profile-lg { width: 7.5rem; height: 7.5rem; border-radius: 50%; -o-object-fit: cover; object-fit: cover; object-position: 50% 50%; }
    
    .profile-cover { background-image: url(../images/profile-cover.png); background-size: cover; height: 10rem; background-position: center; }

    .user-profile-avatar { background-color: #ffffff; width: 160px; height: 160px; padding: 5px; border-radius: 50%; margin-left: 6.5rem; }
    .user-profile-avatar img { width: 100%; height: 100%; border-radius: 50%; }

    .user-change-photo { background-color: #ffffff; width: 140px; height: 140px; border-radius: 50%; padding: 5px; }
    .user-change-photo img { width: 100%; height: 100%; border-radius: 50%; }

    .user-setting { border: 1px solid var(--light); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
    .user-setting img { max-width: 40px; max-height: 40px; }
    .image-preview { border-radius: 5px; cursor: pointer; transition: 0.3s; }
    .image-preview:hover { opacity: 0.7; }

    .img-detail { max-width: 200px; border-radius: 10px; }
    
    .bx-rotate-90 { transform: rotate(90deg); -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; }
    .bx-rotate-180 { transform: rotate(180deg); -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; }
    .bx-rotate-270 { transform: rotate(270deg); -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; }
    .bx-flip-horizontal { transform: scaleX(-1); -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)'; }
    .bx-flip-vertical { transform: scaleY(-1); -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)'; }

    .hv-trigger { position: relative; overflow: hidden; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-trigger:hover, .hv-trigger:focus { background: var(--light) !important; }

    .seperator { background-color: #ffffff; left: 35%; padding: 0px 10px; }
    .seperator-2 { background-color: #ffffff; left: 45%; padding: 0px 10px; }

    .nav-item .nav-link:hover { background: transparent !important; }

    .alert { box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%); }
    
    .icon-badge {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
        color: #fff;
        background: #f2f2f2;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .service-box {
        font-size: 25px;
        color: #1c1b1b;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #e9ecef;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .error-social a {
        display: inline-block;
        width: 40px;
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        margin: 0px;
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    }

    .product-img-2 {
        width: 45px;
        height: 45px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid #e6e6e6;
    }
    .theme-icons { background-color: #fff; color: #434547; }

    .back-to-top {
        display: none;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 22px;
        color: #fff;
        position: fixed;
        border-radius: 50%;
        bottom: 20px;
        right: 12px;
        background-color: var(--primary);
        z-index: 5;
    }
    .back-to-top:hover { color: #fff; }

    
    .product-box { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; background-color: #ffffff; }
    .product-box img { width: 100%; }

    .piechart-legend { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }

    .percent { display: inline-block; line-height: 110px !important; z-index: 2; font-size: 18px; color: #525050; }

    .chart { position: relative; display: inline-block; width: 110px !important; height: 110px !important; margin-top: 20px; margin-bottom: 20px; text-align: center; }
    .chart canvas { position: absolute; top: 0; left: 0; width: 110px !important; height: 110px !important; }

    .gmaps, .gmaps-panaroma { height: 400px; background: #eee; border-radius: 3px; }

    .widget-icon {
        width: 48px;
        height: 48px;
        background-color: #fafafa;
        border-radius: 50%;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .widget-icon-2 {
        width: 52px;
        height: 52px;
        background-color: #fafafa;
        border-radius: 10px;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .w_chart { position: relative; display: inline-block; width: 80px !important; height: 80px !important; text-align: center; font-size: 1.4em; }
    .w_chart canvas { position: absolute; top: 0; left: 0; width: 80px !important; height: 80px !important; }
    .w_percent { display: inline-block; line-height: 80px !important; z-index: 2; color: #0a0808; }
    .w_percent:after { content: '%'; margin-left: 0.1em; }

    /* swicther */
    .btn-switcher { position: fixed; right: 0px; top: 40%; border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .header-colors-indigators .indigator { width: 50px; height: 50px; background-color: var(--background); border-radius: 10px; cursor: pointer; }

    .wrap-action { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 1.875rem; }
    .wrap-action:has(.filter-area) .action-area { margin-bottom: 0; }
    .card .card-body .wrap-action .filter-area { padding: 0.75rem 0 0 0; }
    .card .card-body .wrap-action .filter-area:after { padding: 0.15rem 0.425rem 0.15rem 0rem; }

    @media (max-width: 1200px) {
        .wrap-action { display: block; }
        .wrap-action .filter-area { margin-top: 1.875rem; }
    }

    .action-area { position: relative; margin-bottom: 1.25rem; }
    
    .filter-area { position: relative; background: var(--white); padding: 0.625rem 0.875rem; border-radius: 0.4rem; }
    .filter-area:after { content: 'Filter'; position: absolute; top: -0.835rem; left: 0; width: 5rem; height: 1.25rem; padding: 0.15rem 0.425rem 0.15rem 0.875rem; border-radius: 0.4rem; background: var(--white); }
    .filter-area form .form-group { display: inline-flex; width: auto; margin-bottom: 0; }
    .filter-area form .form-group:not(:last-child) { margin-right: 0.313rem; }
    .filter-area form .form-group .select2 { min-width: 130px; }

    .list-group-style { border: 0; }
    .list-group-style .list-group-items {
        list-style: none;
        padding: 8px;
        margin-bottom: 10px;
        background-color: #ffffff;
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
    }

    .list-info { position: relative; width: 100%; }
    .list-info .list-item { position: relative; }
    .list-info .list-item:not(:last-child) { margin-bottom: 0.925rem; }
    .list-info .list-item .label { font-weight: 400; font-size: 14px; line-height: 120%; margin-bottom: 0.25rem; }
    .list-info .list-item .value { font-weight: 500; font-size: 14px; line-height: 120%; margin-bottom: 0; }


    .sortable-area { position: relative; padding-left: 0; }
    .sortable-area .sortable-item { list-style: none; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0.313rem; margin: 0.313rem 0; padding: 0.313rem 0; display: flex; align-items: flex-start; }
    .sortable-area .sortable-item .sortable-drag { width: 30px; text-align: center; }
    .sortable-area .sortable-item .sortable-label { width: calc(100% - 30px); cursor: pointer; }
    
    .sortable-area .sortable-item.active { background: var(--light-hard); }
    .sortable-area .sortable-item.active .sortable-label { color: var(--primary) !important; }
    .sortable-area .sortable-item.active .sortable-drag .icon { color: var(--primary) !important; }



    .card { border: 0; margin-bottom: 1.5rem; border-radius: 0.4rem; box-shadow: var(--shadow); }
    .card-header { background-color: rgb(0 0 0 / 0%); padding: 0.7rem 1rem; }

    .card.card-border { border: 1px solid var(--border); }

    .wrap-item-image { position: relative; overflow: hidden; margin-bottom: 1.25rem; padding-left: 22px; }
    .wrap-item-image .wrap-checkbox-custome { position: absolute; top: 0px; left: 0; width: 19px; height: 19px; }
    .wrap-item-image .item-image-header { height: 110px/*9.375rem*/; overflow: hidden; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; border-radius: 0.24rem !important; margin-bottom: 0.313rem; }
    .wrap-item-image .item-image-header img { max-height: 110px/*9.375rem*/; width: 100%; height: 100%; object-fit: cover !important; object-position : center !important; margin: auto;  }
    .wrap-item-image .item-image-body { text-align: center; }
    .wrap-item-image .item-image-body .title { font-weight: normal; font-size: 0.813rem; line-height: 1.2; color: var(--dark); margin-bottom: 0.25rem; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical; }
    .wrap-item-image .item-image-body .description { font-weight: normal; font-size: 0.813rem; line-height: 1.2; color: var(--secondary); margin-bottom: 0; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical; }

    /*no more result*/
    .no-more-result { width: 100%; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 2.5rem; text-align: center; }
    .no-more-result .icon { width: 200px; height: 200px; object-fit: contain; margin-bottom: 0.313rem; }
    .no-more-result .icon path { fill: var(--secondary); }
    .no-more-result span { display: block; font-weight: 300; font-size: 1.25rem; line-height: 1.3; color: var(--secondary); }

    .no-data-load { width: 100%; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 4rem; text-align: center; }
    .no-data-load img { max-width: 120px; }

    @media (max-width: 480px) {
        .no-more-result { max-width: 75%; margin: auto; }
    } 


    .owl-thumbs .owl-thumb-item {
        width: 80px;
        height: 80px;
        margin: 0 4px;
        padding: 2px;
        background-color: transparent;
        border: 1px solid rgb(0 0 0 / 12%);
        border-radius: 4px;
    }
    .owl-thumbs .owl-thumb-item img { width: 100%; }

    .login-box { width: 30rem; margin: 1.5rem auto; height: auto; }

    .dropdown .dropdown-menu { max-height: 280px; overflow-y: auto; }
    .options { font-size: 20px; color: var(--color); cursor: pointer; }

    .login-bg-overlay {
        width: 100%;
        height: 420px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        background-color: #8436a8;
        background-image: linear-gradient( 310deg,#7928ca,#ff0080);
    }

    .social-login a { width: 50px; height: 50px; }
    .social-login a img { width: 100%; border: 1px solid #e4e6eb; padding: 13px; border-radius: 10px; }
    .social-login-footer a { color: #3c3e40; }
    
    .login-menu-2 a.nav-link { color: #6d6868; }
    .login-cover-wrapper { width: 25rem; height: 48rem; margin: auto; display: flex; align-items: center; justify-content: center; }
    .login-cover-img { background-image: url(../images/thumb-auth.png); background-position: left; background-size: contain; background-repeat: no-repeat; width: 100%; }
    .login-cover-img img { max-width: 400px; }
    .login-cover-img .image-thumb { padding-top: 280px; padding-left: 100px; }
    
    .auth-section .brand-img { object-fit: contain; max-width: 200px; margin: auto; margin-bottom: 1.875rem; }

    .register-cover-img { background-image: url(../images/authentication/register-cover-img.png); background-position: center; background-size: cover; width: 100%; transform: skewX(-10deg); }
    .au-reset-password-cover { background-image: url(../images/authentication/au-reset-password-cover.png); background-position: center; background-size: cover; width: 100%; transform: skewX(-10deg); }

    .reset-passowrd { width: auto; height: 35em; margin: auto; display: flex; align-items: center; justify-content: center; }

    .mt-8 { margin-top: 12rem; }

    .au-sign-up-basic { background-image: url(../images/authentication/au-sign-up-basic.png); background-position: center; background-size: cover; }
    .au-sign-in-basic { background-image: url(../images/authentication/au-sign-in-basic.png); background-position: center; background-size: cover; }
    .au-reset-password-basic { background-image: url(../images/authentication/au-reset-password-cover.png); background-position: center; background-size: cover; }

    .box-response { position: relative; height: 150px; overflow-y: auto; }

    /*scrollable*/
    .scrollable {
        position: relative;
        display: -ms-flexbox;
        display: flex; 
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: inherit;
        flex-wrap: inherit;
        white-space: nowrap;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollable::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; cursor: pointer; }
    .scrollable::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0); border-radius: 2.5rem; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable::-webkit-scrollbar-thumb { background: rgba(195, 195, 195, 0); border-radius: 2.5rem; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable:hover::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0.8); -webkit-box-shadow: inset 0 0.313rem 0.5rem rgba(241, 241, 241, 1); box-shadow: inset 0 0.313rem 0.5rem rgba(241, 241, 241, 1); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable:hover::-webkit-scrollbar-thumb { background: rgba(195, 195, 195, 0.5); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable::-webkit-scrollbar-thumb:horizontal:hover,
    .scrollable::-webkit-scrollbar-thumb:vertical:hover { background: rgba(195, 195, 195, 1); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .h-scrollable { overflow-y: hidden !important; overflow-x: auto !important; }
/* ----------------------------------- end utilities ----------------------------------- */


/* ----------------------------------- sidebar ----------------------------------- */
    .sidebar-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100%;
        background-color: var(--white);
        background-clip: padding-box;
        box-shadow: var(--shadow);
        z-index: 16;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .sidebar-wrapper .sidebar-header {
        width: 260px;
        height: 65px;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        bottom: 0;
        padding: 0 15px;
        z-index: 5;
        background-color: var(--white);
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .sidebar-wrapper .sidebar-header .logo-icon { max-width: 38px; }
    .sidebar-wrapper .sidebar-header .logo-text { font-size: 24px; margin-left: 10px; margin-bottom: 0; letter-spacing: 1px; color: var(-primary); }

    .toggle-icon { font-size: 26px; cursor: pointer; color: var(-primary); }

    .sidebar-wrapper ul { padding: 0; margin: 0; list-style: none; background: 0 0 }
    .sidebar-wrapper .metismenu {
        background: 0 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px;
        margin-top: 60px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .sidebar-wrapper .metismenu li+li { margin-top: 5px }
    .sidebar-wrapper .metismenu li:first-child { margin-top: 5px }
    .sidebar-wrapper .metismenu li:last-child { margin-bottom: 5px }
    .sidebar-wrapper .metismenu>li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        position: relative
    }

    .sidebar-wrapper .metismenu a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: left;
        padding: 10px 15px;
        font-size: 15px;
        color: var(--color);
        outline-width: 0;
        text-overflow: ellipsis;
        overflow: hidden;
        letter-spacing: .5px;
        border-radius: 0.4rem;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }

    .sidebar-wrapper .metismenu a .parent-icon { font-size: 21px; line-height: 1 }
    .sidebar-wrapper .metismenu a .parent-icon ion-icon { vertical-align: initial; }
    .sidebar-wrapper .metismenu a .menu-title { margin-left: 10px }
    .sidebar-wrapper .metismenu ul a { padding: 6px 15px 6px 15px; font-size: 15px; }
    .sidebar-wrapper .metismenu ul a ion-icon { margin-right: 10px }
    .sidebar-wrapper .metismenu ul { background: rgb(255 255 255 / 0%); }
    .sidebar-wrapper .metismenu ul ul a { padding: 8px 15px 8px 30px }
    .sidebar-wrapper .metismenu ul ul ul a { padding: 8px 15px 8px 45px }

    .sidebar-wrapper .metismenu .mm-active>a,
    .sidebar-wrapper .metismenu a:active,
    .sidebar-wrapper .metismenu a:focus,
    .sidebar-wrapper .metismenu a:hover {
        color: var(--primary);
        text-decoration: none;
        background-color: var(--light);
        /* background-color: rgb(146 62 185 / 10%); */
    }

    .menu-label { padding: 20px 15px 5px 5px; color: #b0afaf; text-transform: uppercase; font-size: 12px; letter-spacing: .5px }

    .metismenu .has-arrow:after {
        position: absolute;
        content: "";
        width: .5em;
        height: .5em;
        border-style: solid;
        border-width: 1.2px 0 0 1.2px;
        border-color: initial;
        right: 15px;
        transform: rotate(-45deg) translateY(-50%);
        transform-origin: top;
        top: 50%;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }

    @media screen and (min-width:1025px) {
        .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-text { display: none }
        .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper { width: 80px }
        .wrapper.toggled.sidebar-hovered .sidebar-wrapper { box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .12)!important }
        .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header { width: 80px }
        .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .toggle-icon { display: none }
        .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header { justify-content: center }
        .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header { width: 80px }
        .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a { justify-content: center }
        .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .menu-title { display: none }
        .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li ul { display: none }
        .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li.menu-label { display: none }
        .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .has-arrow:after { display: none }
        
    }

    .wrapper.toggled .top-header { left: 80px }
    .wrapper.toggled .page-content-wrapper { margin-left: 80px; }

    @media screen and (min-width: 1400px) {
        .wrapper.toggled .page-content-wrapper { padding: 0 9rem 2em 9rem; }
    }
/* ----------------------------------- end sidebar ----------------------------------- */


/* ----------------------------------- top header ----------------------------------- */
    .top-header {
        position: fixed;
        top: 0;
        left: 260px;
        right: 0;
        height: 65px;
        padding: 0 1.5rem;
        border-bottom: 1px solid var(--border);
        background-clip: border-box;
        background-color: var(--white);
        z-index: 5;
        box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .top-header .mobile-menu-button { color: #293445; font-size: 20px; font-weight: 500; cursor: pointer; display: none; }
    .top-header .mobile-search-button { display: none; }
    .top-header .navbar .searchbar { position: relative; width: 28%; }
    .top-header .navbar .searchbar .form-control { box-shadow: none; padding-left: 2.5rem; padding-right: 2.5rem; border: 1px solid #e9ecef; background-color: #fff; }
    .top-header .navbar .searchbar .form-control:focus { background-color: #fff; border-color: #c27be4; box-shadow: 0 0 0 .25rem rgba(146, 62, 185, 0.3) }
    .top-header .navbar .top-navbar-right .nav-link { color: #293445; font-size: 18px; font-weight: 500; padding-right: .7rem; padding-left: .7rem; }
    .top-header .navbar .searchbar .search-icon { color: #41464b; font-size: 1.2rem; opacity: 0.5; font-size: 20px; }
    .top-header .navbar .searchbar .search-close-icon { right: 2rem; opacity: 0.5; cursor: pointer; display: none; font-size: 20px; }

    .top-header .navbar .user-img { width: 30px; height: 30px; padding: 0px; border-radius: 50%; }

    .dropdown-toggle-nocaret:after { display: none }

    .top-header .navbar .nav-link .notify-badge { 
        position: absolute;
        top: 0px;
        right: -8px;
        color: var(--white);
        font-size: 12px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f50d0d;
        z-index: 1;
    }

    .dropdown-user-setting .dropdown-menu {
        color: var(--color);
        width: 230px;
        font-size: 14px;
        border: 1px solid var(--border);
        border-radius: 0.4rem;
        box-shadow: var(--shadow);
    }
    .top-header .navbar .dropdown-user-setting .dropdown-menu::after {
        content: '';
        width: 13px;
        height: 13px;
        background: var(--white);
        position: absolute;
        top: -6px;
        right: 16px;
        transform: rotate(45deg);
        border-top: 1px solid var(--border);
        border-left: 1px solid var(--border)
    }
    .top-header .navbar .dropdown-menu::after {
        content: '';
        width: 13px;
        height: 13px;
        background: var(--white);
        position: absolute;
        top: -6px;
        right: 16px;
        transform: rotate(45deg);
        border-top: 1px solid var(--border);
        border-left: 1px solid var(--border)
    }

    .top-header .navbar .dropdown-item:hover,
    .top-header .navbar .dropdown-item:focus {
        color: #1e2125;
        background-color: #f5f5f5
    }

    .top-header .navbar .dropdown-menu {
        -webkit-animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown;
        animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown
    }

    @-webkit-keyframes animdropdown {
        from { -webkit-transform: translate3d(0, 6px, 0); transform: translate3d(0, 6px, 0); opacity: 0 }
        to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
    }
    @keyframes animdropdown {
        from { -webkit-transform: translate3d(0, 6px, 0); transform: translate3d(0, 6px, 0); opacity: 0 }
        to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
    }


    .dropdown-large { position: relative }
    .dropdown-large .dropdown-menu {
        width: 320px;
        border: 1px solid #e9ecef;
        padding: 0 0;
        border-radius: 10px;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)
    }
    .top-header .navbar .dropdown-large .dropdown-menu::after {
        content: '';
        width: 13px;
        height: 13px;
        background: #fff;
        position: absolute;
        top: -6px;
        right: 16px;
        transform: rotate(45deg);
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd
    }


    .top-header .navbar .dropdown-apps .dropdown-menu::after {
        content: '';
        width: 13px;
        height: 13px;
        background: #343a40;
        position: absolute;
        top: -6px;
        right: 12px;
        transform: rotate(45deg);
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd
    }


    .dropdown-large .msg-header {
        padding: .8rem 1rem;
        border-bottom: 1px solid #ededed;
        background-clip: border-box;
        text-align: left;
        display: flex;
        align-items: center;
    }
    .dropdown-large .msg-header .msg-header-title { font-size: 15px; color: #1c1b1b; margin-bottom: 0; font-weight: 500 }
    .dropdown-large .msg-header .msg-header-clear { font-size: 12px; color: #585858; margin-bottom: 0 }
    .dropdown-large .msg-footer {
        padding: .8rem 1rem;
        color: #1c1b1b;
        border-top: 1px solid #ededed;
        background-clip: border-box;
        background: 0 0;
        font-size: 14px;
        font-weight: 500;
    }

    .dropdown-large .user-online { position: relative }
    .dropdown-large .msg-name { font-size: 13px; margin-bottom: 0 }
    .dropdown-large .msg-info { font-size: 12px; margin-bottom: 0 }
    .dropdown-large .msg-avatar { width: 45px; height: 45px; border-radius: 50%; margin-right: 15px }
    .dropdown-large .msg-time { font-size: 11px; margin-bottom: 0; color: #919191 }
    .dropdown-large .user-online:after {
        content: '';
        position: absolute;
        bottom: 1px;
        right: 17px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        box-shadow: 0 0 0 2px #fff;
        background: #16e15e
    }

    .dropdown-large .dropdown-menu .dropdown-item { padding: .5rem 1.3rem; border-bottom: 1px solid #ededed }
    .header-message-list { position: relative; height: 360px }
    .header-notifications-list { position: relative; height: 360px }
    .dropdown-large .notify { font-size: 26px; text-align: center; margin-right: 15px }

    .app-box {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        font-size: 24px;
        justify-content: center;
        cursor: pointer;
        border-radius: 50%;
        background-color: #f6f6f6;
        margin-bottom: 5px;
    }

    .app-title { color: var(--white); font-size: 14px; }
    .header-notifications-list { position: relative; height: 332px; }

    .breadcrumb-title { font-size: 20px; color: var(--color); /* border-right: 1.5px solid #ced3da; */ }

    .page-breadcrumb .breadcrumb li.breadcrumb-item { font-size: 16px; }
    .page-breadcrumb .breadcrumb li a { font-size: 20px; color: #697278; }
    .page-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
        display: inline-block;
        padding-right: .5rem;
        font-family: LineIcons;
        content: "\ea5c";
    }
/* ----------------------------------- end top header ----------------------------------- */


/* ----------------------------------- footer ----------------------------------- */
    .footer {
        position: absolute;
        left: 260px;
        right: 0;
        bottom: 0;
        width: 100%;
        padding: 0.7rem;
        color: #484444;
        background-color: #fff;
        border-top: 1px solid #e9ecef;
        text-align: center;
        transition: .3s all;
    }
    .wrapper.toggled .footer { left: 0px; }
/* ----------------------------------- end footer ----------------------------------- */


/* ----------------------------------- ecommerce ----------------------------------- */
    .btn-mobile-filter {
        width: 45px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #ffffff;
        background-color: var(--primary);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        cursor: pointer;
        position: fixed;
        left: 0;
        top: 55%;
        z-index: 3;
    }

    .btn-ecomm {
        padding: .675rem .85rem;
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .shop-container .card {
        border: 1px solid rgb(240 241 243);
        box-shadow: none;
    }

    .product-grid .card.product-card { background-color: #ffffff; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s }

    @media (min-width: 992px) {
        .product-grid .card.product-card {
            margin-bottom: 1.5rem;
        }
        .product-grid .card.product-card:hover {
            background-color: #fff;
            -webkit-box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        }
    }


    ul.categories-list li { font-size: 14px; margin-bottom: 8px; }

    .product-categories ul a { color: #212529; }

    .product-grid .card .card-footer a { color: #212529; }

    .color-indigator-item { width: 1.5rem; height: 1.5rem; background-color: #e6e0e0; border-radius: 50%; cursor: pointer; }

    .color-indigator { width: 20px; height: 20px; border-radius: 50%; background-color: #ccc; }

    .product-wishlist {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 20px;
        background-color: #f9f9f9;
        color: #212529;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%
    }
    .product-compare, .product-catergory {
        color: #212529;
    }
    .product-compare:hover, .product-wishlist:hover, .product-catergory:hover {
        color: #212529;
    }
    .product-sharing .list-inline-item a {
        width: 36px;
        height: 36px;
        color: #ffffff;
        background-color: rgb(255 255 255);
        font-size: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all .2s;
    }

    .tags-box .tag-link {
        padding: .3rem;
        background-color: #212529;
        border: 1px solid rgb(33 37 41);
        color: rgb(255 255 255);
        font-size: 13px;
        margin: 4px;
        display: inline-block;
    }


    /* Order Tracking */
    .steps { display: flex; width: 100%; }
    .steps-light .step-item { color: #888a8c }
    .step-item { flex-basis: 0; flex-grow: 1; transition: color 0.25s ease-in-out; text-align: center; text-decoration: none !important; }
    .steps-light .step-item.active .step-count, .steps-light .step-item.active .step-progress { color: #ffffff; background-color: var(--primary); }
    .step-item:first-child .step-progress { border-radius: .125rem; border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .steps-light .step-count, .steps-light .step-progress { color: #2e323e; background-color: #eaf0f5; }
    .step-progress { position: relative; width: 100%; height: .25rem; }
    .step-count {
        position: absolute;
        top: -.75rem;
        left: 50%;
        width: 1.625rem;
        height: 1.625rem;
        margin-left: -.8125rem;
        border-radius: 50%;
        font-size: .875rem;
        line-height: 1.625rem;
    }
    .step-label { padding-top: 1.5625rem; }
    .step-label>i { margin-top: -.25rem; margin-right: .425rem; font-size: 1.5em; vertical-align: middle; }
    .steps-light .step-item.active.current { color: #30384a; }
/* ----------------------------------- end ecommerce ----------------------------------- */


/* Responsive */
@media screen and (max-width: 1200px) {
    .filter-sidebar {
        width: 300px;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        overflow-y: scroll;
        background-color: #ffffff;
        z-index: 5;
        border-right: 1px solid #eee;
        box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 28%);
    }
}

@media screen and (max-width: 1024px) {
    .sidebar-wrapper { left: -300px; }

    .wrapper .page-content-wrapper { margin-left: 0px; }

    .top-header { left: 0px; }

    /* Toggeled */
    .wrapper.toggled .sidebar-wrapper { left: 0px; }
    .wrapper.toggled .page-content-wrapper { margin-left: 0px; padding: 0 0rem 2em 0rem; }
    .wrapper.toggled .top-header { left: 0px; }

    .wrapper.toggled .overlay {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #000;
		opacity: .6;
		z-index: 12;
		display: block;
		cursor: move;
		transition: all .2s ease-out
	}

	.top-header .navbar .searchbar { display: none; }
	

	.top-header .navbar .full-search-bar {
		display: flex;
		align-items: center;
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
        top: 0;
        bottom: 0;
        border-bottom: 1px solid rgb(255 255 255 / 12%);
		z-index: 100;
		background-color: #ffffff;
		height: 65px;
		padding: 0 1.5rem;
		-webkit-animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown;
	    animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown
	}

	.top-header .mobile-menu-button { display: block; }
	.top-header .mobile-search-button { display: block; }
	.top-header .navbar .searchbar .search-close-icon { display: block; }

    .footer { left: 0px; }
}

@media screen and (max-width: 620px) {
	.top-header .navbar .dropdown-menu::after { display: none }
	.top-header .navbar .dropdown { position: static!important }
	.top-header .navbar .dropdown-menu { width: 100%!important }

    .login-cover-wrapper { width: auto; height: auto; }
}


/* ----------------------------------- cropper image ----------------------------------- */
    .cropper-canvas { max-width: 100%; border-radius: 0.5rem; }

    /*upload image*/
    .upload-image-area { border: 2px dotted var(--light); border-radius: 0.313rem; height: 120px; display: flex; align-items: center; justify-content: center; }
    .upload-image-area.upload-image-area-lg { height: 190px; }
    .upload-image-area img { max-width: 70px; max-height: 70px; }

    /*input file*/
    .input-file-style { position: relative; overflow: hidden; }
    .input-file-style input { position: absolute; top: 0; left: 0; margin: 0; padding: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }

    /*load Upload gambar*/
    .load-data-gambar .img-upload-load-data { position: relative; overflow: hidden; border-radius: 0.5rem; margin-bottom: 0.313rem; margin: auto; }
    .load-data-gambar .img-upload-load-data img { display: block; max-width: 100%; height: 160px; object-fit: contain; object-position: top center; margin: auto; }
    .load-data-gambar .label-upload-load-data span { font-size: 1rem; font-weight: normal; }
    .load-data-gambar .label-upload-load-data p { font-size: 11px; font-weight: normal; }
/* ----------------------------------- end cropper image ----------------------------------- */


/* ----------------------------------- login ----------------------------------- */
    .auth-page { width: 100%; }
    .auth-page .auth-left-wrapper { object-fit: cover; object-position: bottom center; }

    .section-login { background: #ffffff; overflow: hidden; width: 100%; height: 100vh; }

    .section-login .block-thumbnails { position: relative; overflow: hidden; padding: 40px; border-right: 1px solid #C7C7C7; }
    .section-login .block-thumbnails img { width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }

    .section-login .block-form { padding: 40px; }
    .section-login .block-form img.logo-ultrapreneur { width: auto; max-height: 60px; margin: 0 auto; margin-bottom: 50px; }
    .section-login .block-form h2 { font-weight: 800; font-size: 28px; line-height: 120%; color: #000000; }

    .section-login .block-form .form-login { margin-top: 20px; }
    .section-login .block-form .form-login .form-group label { font-weight: 500; font-size: 14px; line-height: 120%; letter-spacing: 1.3; color: #000000; }
    .section-login .block-form .form-login .form-group input { 
        border: 0; 
        background: #FFFFFF; 
        box-shadow: none; 
        border-bottom: 1px solid var(--accent); 
        border-radius: 2px; 
        padding-left: 0px;
    }

    @media screen and (max-width: 767px) {
        .section-login { height: auto; }
        .section-login .block-thumbnails h2 { text-align: center; }
        .section-login { margin: 0 auto; width: 100%; height: auto; }

        .section-login .box-banner { min-height: 380px; max-height: 380px; }
        .section-login .box-banner h2 { font-size: 28px; text-align: center; }
        .section-login .box-banner h2 span { font-size: 28px; text-align: center; }
        .section-login .box-banner .thumnails img { max-width: 180px; }

        .section-login .block-form { min-height: 470px; max-height: 470px; padding: 20px; }
    }
/* ----------------------------------- end login ----------------------------------- */


/* ----------------------------------- button ----------------------------------- */
    .btn {
        position: relative;
        outline: 0 !important;
        display: inline-block;
        -webkit-box-shadow: none; 
        box-shadow: none;
        font-weight: 400;
        font-size: 14px; 
        line-height: 150%;
        text-align: center;
        vertical-align: middle;
        border-radius: 0.313rem;
        padding: 0.4rem 1.25rem;
        -moz-user-select: none;
        cursor: pointer;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .btn:focus { -webkit-box-shadow: none !important; box-shadow: none !important; }

    .btn ion-icon { vertical-align: middle; font-size: 0.875rem; margin-top: -0.12rem; margin-right: 0.37rem; }
    .btn.btn-lg ion-icon { font-size: 1.25rem; }

    .btn-sm { padding: 0.25rem 0.5rem; font-size: .875rem; }
    .btn-padd-xs { padding-top: 0.313rem; padding-bottom: 0.313rem; }
    .btn-padd-sm { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    .btn-padd { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .btn-padd-md { padding-top: 0.875rem; padding-bottom: 0.875rem; }
    .btn-padd-lg { padding-top: 1rem; padding-bottom: 1rem; font-size: 1rem; }

    .btn .icon { vertical-align: middle; font-size: 15px; margin-top: -1rem; margin-right: 0.25rem; }
    .btn-white { background-color: var(--white); border-color: #e7eaf3; }
    
    .btn-link { font-weight: 400; color: var(--primary); }
    .btn-link:hover { color: var(--primary) }

    .btn-primary { color: var(--white); background-color: var(--primary); border-color: var(--primary) }
    .btn-primary:hover { color: var(--white); background-color: var(--primary-hard); border-color: var(--primary-hard) }
    .btn-check:focus+.btn-primary, .btn-primary:focus { color: var(--white); background-color: var(--primary-hard); border-color: var(--primary-hard); box-shadow: 0 0 0 .25rem rgba(132, 54, 168, 0.5) }
    .btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle { color: var(--white); background-color: var(--primary-hard); border-color: var(--primary-hard) }
    .btn-check:active+.btn-primary:focus, .btn-check:checked+.btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show>.btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .25rem rgba(132, 54, 168, 0.5) }
    .btn-primary.disabled, .btn-primary:disabled { color: var(--white); background-color: var(--primary); border-color: var(--primary) }

    .btn-secondary { color: var(--white); background-color: var(--secondary); border-color: var(--secondary) }
    .btn-secondary:hover { color: var(--white); background-color: var(--secondary-hard); border-color: var(--secondary-hard) }
    .btn-check:focus+.btn-secondary, .btn-secondary:focus { color: var(--white); background-color: var(--secondary-hard); border-color: var(--secondary-hard); box-shadow: 0 0 0 .25rem rgba(130, 138, 145, .5) }
    .btn-check:active+.btn-secondary, .btn-check:checked+.btn-secondary, .btn-secondary.active, .btn-secondary:active, .show>.btn-secondary.dropdown-toggle { color: var(--white); background-color: var(--secondary-hard); border-color: var(--secondary-hard) }
    .btn-check:active+.btn-secondary:focus, .btn-check:checked+.btn-secondary:focus, .btn-secondary.active:focus, .btn-secondary:active:focus, .show>.btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 .25rem rgba(130, 138, 145, .5) }
    .btn-secondary.disabled, .btn-secondary:disabled { color: var(--white); background-color: var(--secondary); border-color: var(--secondary) }

    .btn-success { color: var(--white); background-color: var(--success); border-color: var(--success) }
    .btn-success:hover { color: var(--white); background-color: var(--success-hard); border-color: var(--success-hard) }
    .btn-check:focus+.btn-success, .btn-success:focus { color: var(--white); background-color: var(--success-hard); border-color: var(--success-hard); box-shadow: 0 0 0 .25rem rgba(20, 170, 98, 0.5) }
    .btn-check:active+.btn-success, .btn-check:checked+.btn-success, .btn-success.active, .btn-success:active, .show>.btn-success.dropdown-toggle { color: var(--white); background-color: var(--success-hard); border-color: var(--success-hard) }
    .btn-check:active+.btn-success:focus, .btn-check:checked+.btn-success:focus, .btn-success.active:focus, .btn-success:active:focus, .show>.btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 .25rem rgba(42, 158, 92, 0.5) }
    .btn-success.disabled, .btn-success:disabled { color: var(--white); background-color: var(--success); border-color: var(--success) }

    .btn-info { color: var(--black); background-color: var(--info); border-color: var(--info) }
    .btn-info:hover { color: var(--black); background-color: var(--info-hard); border-color: var(--info-hard) }
    .btn-check:focus+.btn-info, .btn-info:focus { color: var(--black); background-color: var(--info-hard); border-color: var(--info-hard); box-shadow: 0 0 0 .25rem rgba(43, 197, 228, 0.5) }
    .btn-check:active+.btn-info, .btn-check:checked+.btn-info, .btn-info.active, .btn-info:active, .show>.btn-info.dropdown-toggle { color: var(--black); background-color: var(--info-hard); border-color: var(--info-hard) }
    .btn-check:active+.btn-info:focus, .btn-check:checked+.btn-info:focus, .btn-info.active:focus, .btn-info:active:focus, .show>.btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 .25rem rgba(43, 197, 228, 0.5) }
    .btn-info.disabled, .btn-info:disabled { color: var(--black); background-color: var(--info); border-color: var(--info) }

    .btn-warning { color: var(--black); background-color: var(--warning); border-color: var(--warning) }
    .btn-warning:hover { color: var(--black); background-color: var(--warning-hard); border-color: var(--warning-hard) }
    .btn-check:focus+.btn-warning, .btn-warning:focus { color: var(--black); background-color: var(--warning-hard); border-color: var(--warning-hard); box-shadow: 0 0 0 .25rem rgba(247, 165, 72, 0.5) }
    .btn-check:active+.btn-warning, .btn-check:checked+.btn-warning, .btn-warning.active, .btn-warning:active, .show>.btn-warning.dropdown-toggle { color: var(--black); background-color: var(--warning-hard); border-color: var(--warning-hard) }
    .btn-check:active+.btn-warning:focus, .btn-check:checked+.btn-warning:focus, .btn-warning.active:focus, .btn-warning:active:focus, .show>.btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 .25rem rgba(247, 165, 72, 0.5) }
    .btn-warning.disabled, .btn-warning:disabled { color: var(--black); background-color: var(--warning); border-color: var(--warning) }

    .btn-danger { color: var(--white); background-color: var(--danger); border-color: var(--danger) }
    .btn-danger:hover { color: var(--white); background-color: var(--danger-hard); border-color: var(--danger-hard) }
    .btn-check:focus+.btn-danger, .btn-danger:focus { color: var(--white); background-color: var(--danger-hard); border-color: var(--danger-hard); box-shadow: 0 0 0 .25rem rgba(233, 52, 82, 0.5) }
    .btn-check:active+.btn-danger, .btn-check:checked+.btn-danger, .btn-danger.active, .btn-danger:active, .show>.btn-danger.dropdown-toggle { color: var(--white); background-color: var(--danger-hard); border-color: var(--danger-hard) }
    .btn-check:active+.btn-danger:focus, .btn-check:checked+.btn-danger:focus, .btn-danger.active:focus, .btn-danger:active:focus, .show>.btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 .25rem rgba(233, 52, 82, 0.5) }
    .btn-danger.disabled, .btn-danger:disabled { color: var(--white); background-color: var(--danger); border-color: var(--danger) }

    .btn-light { color: var(--black); background-color: var(--light); border-color: var(--light) }
    .btn-light:hover { color: var(--black); background-color: var(--light-hard); border-color: var(--light-hard) }
    .btn-check:focus+.btn-light, .btn-light:focus { color: var(--black); background-color: var(--light-hard); border-color: var(--light-hard); box-shadow: 0 0 0 .25rem rgba(211, 212, 213, .5) }
    .btn-check:active+.btn-light, .btn-check:checked+.btn-light, .btn-light.active, .btn-light:active, .show>.btn-light.dropdown-toggle { color: var(--black); background-color: var(--light-hard); border-color: var(--light-hard) }
    .btn-check:active+.btn-light:focus, .btn-check:checked+.btn-light:focus, .btn-light.active:focus, .btn-light:active:focus, .show>.btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 .25rem rgba(211, 212, 213, .5) }
    .btn-light.disabled, .btn-light:disabled { color: var(--black); background-color: var(--light); border-color: var(--light) }

    .btn-dark { color: var(--white); background-color: var(--dark); border-color: var(--dark) }
    .btn-dark:hover { color: var(--white); background-color: var(--dark-hard); border-color: var(--dark-hard) }
    .btn-check:focus+.btn-dark, .btn-dark:focus { color: var(--white); background-color: var(--dark-hard); border-color: var(--dark-hard); box-shadow: 0 0 0 .25rem rgba(66, 70, 73, .5) }
    .btn-check:active+.btn-dark, .btn-check:checked+.btn-dark, .btn-dark.active, .btn-dark:active, .show>.btn-dark.dropdown-toggle { color: var(--white); background-color: var(--dark-hard); border-color: var(--dark-hard) }
    .btn-check:active+.btn-dark:focus, .btn-check:checked+.btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show>.btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 .25rem rgba(66, 70, 73, .5) }
    .btn-dark.disabled, .btn-dark:disabled { color: var(--white); background-color: var(--dark); border-color: var(--dark) }

    .btn-outline-primary { color: var(--primary); border-color: var(--primary) }
    .btn-outline-primary:hover { color: var(--white); background-color: var(--primary); border-color: var(--primary) }
    .btn-check:focus+.btn-outline-primary, .btn-outline-primary:focus { box-shadow: 0 0 0 .25rem rgb(84, 55, 145 , 0.5) }
    .btn-check:active+.btn-outline-primary, .btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active { color: var(--white); background-color: var(--primary); border-color: var(--primary) }
    .btn-check:active+.btn-outline-primary:focus, .btn-check:checked+.btn-outline-primary:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus, .btn-outline-primary:active:focus { box-shadow: 0 0 0 .25rem rgba(84, 55, 145 , 0.5) }
    .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--primary); background-color: transparent }

    .btn-outline-secondary { color: var(--secondary); border-color: var(--secondary) }
    .btn-outline-secondary:hover { color: var(--white); background-color: var(--secondary); border-color: var(--secondary) }
    .btn-check:focus+.btn-outline-secondary, .btn-outline-secondary:focus { box-shadow: 0 0 0 .25rem rgba(108, 117, 125, .5) }
    .btn-check:active+.btn-outline-secondary, .btn-check:checked+.btn-outline-secondary, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show, .btn-outline-secondary:active { color: var(--white); background-color: var(--secondary); border-color: var(--secondary) }
    .btn-check:active+.btn-outline-secondary:focus, .btn-check:checked+.btn-outline-secondary:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus, .btn-outline-secondary:active:focus { box-shadow: 0 0 0 .25rem rgba(108, 117, 125, .5) }
    .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: var(--secondary); background-color: transparent }

    .btn-outline-success { color: var(--success); border-color: var(--success) }
    .btn-outline-success:hover { color: var(--white); background-color: var(--success); border-color: var(--success) }
    .btn-check:focus+.btn-outline-success, .btn-outline-success:focus { box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .5) }
    .btn-check:active+.btn-outline-success, .btn-check:checked+.btn-outline-success, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show, .btn-outline-success:active { color: var(--white); background-color: var(--success); border-color: var(--success) }
    .btn-check:active+.btn-outline-success:focus, .btn-check:checked+.btn-outline-success:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus, .btn-outline-success:active:focus { box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .5) }
    .btn-outline-success.disabled, .btn-outline-success:disabled { color: var(--success); background-color: transparent }

    .btn-outline-info { color: var(--info); border-color: var(--info) }
    .btn-outline-info:hover { color: var(--black); background-color: var(--info); border-color: var(--info) }
    .btn-check:focus+.btn-outline-info, .btn-outline-info:focus { box-shadow: 0 0 0 .25rem rgba(13, 202, 240, .5) }
    .btn-check:active+.btn-outline-info, .btn-check:checked+.btn-outline-info, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show, .btn-outline-info:active { color: var(--black); background-color: var(--info); border-color: var(--info) }
    .btn-check:active+.btn-outline-info:focus, .btn-check:checked+.btn-outline-info:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus, .btn-outline-info:active:focus { box-shadow: 0 0 0 .25rem rgba(13, 202, 240, .5) }
    .btn-outline-info.disabled, .btn-outline-info:disabled { color: var(--info); background-color: transparent }

    .btn-outline-warning { color: var(--warning); border-color: var(--warning) }
    .btn-outline-warning:hover { color: var(--black); background-color: var(--warning); border-color: var(--warning) }
    .btn-check:focus+.btn-outline-warning, .btn-outline-warning:focus { box-shadow: 0 0 0 .25rem rgba(255, 193, 7, .5) }
    .btn-check:active+.btn-outline-warning, .btn-check:checked+.btn-outline-warning, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show, .btn-outline-warning:active { color: var(--black); background-color: var(--warning); border-color: var(--warning) }
    .btn-check:active+.btn-outline-warning:focus, .btn-check:checked+.btn-outline-warning:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus, .btn-outline-warning:active:focus { box-shadow: 0 0 0 .25rem rgba(255, 193, 7, .5) }
    .btn-outline-warning.disabled, .btn-outline-warning:disabled { color: var(--warning); background-color: transparent }

    .btn-outline-danger { color: var(--danger); border-color: var(--danger) }
    .btn-outline-danger:hover { color: var(--white); background-color: var(--danger); border-color: var(--danger) }
    .btn-check:focus+.btn-outline-danger, .btn-outline-danger:focus { box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .5) }
    .btn-check:active+.btn-outline-danger, .btn-check:checked+.btn-outline-danger, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show, .btn-outline-danger:active { color: var(--white); background-color: var(--danger); border-color: var(--danger) }
    .btn-check:active+.btn-outline-danger:focus, .btn-check:checked+.btn-outline-danger:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus, .btn-outline-danger:active:focus { box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .5) }
    .btn-outline-danger.disabled, .btn-outline-danger:disabled { color: var(--danger); background-color: transparent }

    .btn-outline-light { color: var(--light); border-color: var(--light) }
    .btn-outline-light:hover { color: var(--black); background-color: var(--light); border-color: var(--light) }
    .btn-check:focus+.btn-outline-light, .btn-outline-light:focus { box-shadow: 0 0 0 .25rem rgba(248, 249, 250, .5) }
    .btn-check:active+.btn-outline-light, .btn-check:checked+.btn-outline-light, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show, .btn-outline-light:active { color: var(--black); background-color: var(--light); border-color: var(--light) }
    .btn-check:active+.btn-outline-light:focus, .btn-check:checked+.btn-outline-light:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus, .btn-outline-light:active:focus { box-shadow: 0 0 0 .25rem rgba(248, 249, 250, .5) }
    .btn-outline-light.disabled, .btn-outline-light:disabled { color: var(--light); background-color: transparent }

    .btn-outline-dark { color: var(--dark); border-color: var(--dark) }
    .btn-outline-dark:hover { color: var(--white); background-color: var(--dark); border-color: var(--dark) }
    .btn-check:focus+.btn-outline-dark, .btn-outline-dark:focus { box-shadow: 0 0 0 .25rem rgba(33, 37, 41, .5) }
    .btn-check:active+.btn-outline-dark, .btn-check:checked+.btn-outline-dark, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show, .btn-outline-dark:active { color: var(--white); background-color: var(--dark); border-color: var(--dark) }
    .btn-check:active+.btn-outline-dark:focus, .btn-check:checked+.btn-outline-dark:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus, .btn-outline-dark:active:focus { box-shadow: 0 0 0 .25rem rgba(33, 37, 41, .5) }
    .btn-outline-dark.disabled, .btn-outline-dark:disabled { color: var(--dark); background-color: transparent }
/* ----------------------------------- end button ----------------------------------- */


/* ------------------------------------ badge ------------------------------------ */
    .badge { position: relative; font-weight: 400; line-height: 1.2; letter-spacing: 0.02rem; padding: 0.5rem 1rem; border-radius: 0.625rem; background: var(--primary); vertical-align: middle; cursor: default; }
    .badge-sm { font-size: 0.75rem; padding: 0.313rem 0.625rem; border-radius: 0.625rem; }
    .badge-md { font-size: 0.875rem; padding: 0.625rem 1rem; border-radius: 0.625rem; }
    .badge-lg { font-size: 0.925rem; padding: 0.825rem 1.25rem; border-radius: 0.925rem; }

    .badge-primary { background: var(--primary); color: var(--white); }
    .badge-second { background: var(--second); color: var(--white); }
    .badge-primary { background: #13208a; color: var(--white); }
    .badge-secondary { background: #364a63; color: var(--white); }
    .badge-success { background: #15d670; color: var(--white); }
    .badge-info { background: #0da8e0; color: var(--white); }
    .badge-pink { background: #FF586F; color: var(--white); }
    .badge-warning { background: #f4bd0e; color: var(--white); }
    .badge-danger { background: #e85347; color: var(--white); }
    .badge-dark { background: #1c2b46; color: var(--white); }
    .badge-gray { background: #8091a7; color: var(--white); }
    .badge-light { background: #b7c2d0; color: var(--white); }
    .badge-lighter { background: #e5e9f2; color: var(--white); }
    .badge-light { background: var(--light); color: var(--dark); }
    .badge-salmon { background: #FF586F; font-weight: 300; color: var(--white); letter-spacing: 0.02rem; padding: 0.25rem 0.625rem; }

    .badge-dot { display: inline-flex; align-items: center; background-color: transparent; border: none; padding: 0.313rem 0.7rem; padding-left: 12px; padding-right: 0; }
    .badge-dot:before { position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-45%); display: inline-block; height: 6px; width: 6px; margin-top: -1px; border-radius: 50%; background: currentColor; }

    .badge-dot.badge-primary { color: var(--primary); }
    .badge-dot.badge-secondary { color: #364a63; }
    .badge-dot.badge-success { color: #15d670; }
    .badge-dot.badge-info { color: #0da8e0; }
    .badge-dot.badge-warning { color: #f4bd0e; }
    .badge-dot.badge-danger { color: #e85347; }
    .badge-dot.badge-pink { color: #FF586F; }
    .badge-dot.badge-dark { color: #1c2b46; }
    .badge-dot.badge-gray { color: #8091a7; }
    .badge-dot.badge-light { color: #b7c2d0; }
    .badge-dot.badge-lighter { color: #e5e9f2; }
    .badge-dot.badge-primary { color: var(--primary); }


    .badge-style-1 { border: 0; }

    .badge-style-1.badge-primary { background: var(--primary); color: var(--white); }
    .badge-style-1.badge-secondary { background: rgba(54, 74, 99, 0.1); color: #364a63; }
    .badge-style-1.badge-success { background: rgba(21, 214, 112, 0.1); color: #15d670; }
    .badge-style-1.badge-info { background: rgba(13, 168, 224, 0.1); color: #0da8e0; }
    .badge-style-1.badge-warning { background: rgba(244, 189, 14, 1); color: var(--white); }
    .badge-style-1.badge-danger { background: rgba(206, 44, 55, 0.1); color: #CE2C37; }
    .badge-style-1.badge-dark { background: rgba(28, 43, 70, 0.1); color: #1c2b46; }
    .badge-style-1.badge-gray { background: rgba(128, 145, 167, 0.1); color: #8091a7; }
    .badge-style-1.badge-light { background: rgba(183, 194, 208, 0.1); color: #b7c2d0; }
    .badge-style-1.badge-lighter { background: rgba(229, 233, 242, 0.1); color: #e5e9f2; }


    .badge-style-2 { border: 1px solid currentColor; }

    .badge-style-2.badge-primary { background: rgba(19, 32, 138, 0.1); color: var(--primary); border-color: var(--primary); }
    .badge-style-2.badge-secondary { background: rgba(54, 74, 99, 0.1); color: #364a63; border-color: #364a63; }
    .badge-style-2.badge-success { background: rgba(21, 214, 112, 0.1); color: #15d670; border-color: #15d670; }
    .badge-style-2.badge-info { background: rgba(13, 168, 224, 0.1); color: #0da8e0; border-color: #0da8e0; }
    .badge-style-2.badge-warning { background: rgba(244, 189, 14, 0.1); color: #f4bd0e; border-color: #f4bd0e; }
    .badge-style-2.badge-danger { background: rgba(232, 83, 71, 0.1); color: #e85347; border-color: #e85347; }
    .badge-style-2.badge-dark { background: rgba(28, 43, 70, 0.1); color: #1c2b46; border-color: #1c2b46; }
    .badge-style-2.badge-gray { background: rgba(128, 145, 167, 0.1); color: #8091a7; border-color: #8091a7; }
    .badge-style-2.badge-light { background: rgba(183, 194, 208, 0.1); color: #b7c2d0; border-color: #b7c2d0; }
    .badge-style-2.badge-lighter { background: rgba(229, 233, 242, 0.1); color: #e5e9f2; border-color: #e5e9f2; }
/* ------------------------------------ end badge ------------------------------------ */


/* ----------------------------------- nav tabs ----------------------------------- */
    .nav-search input.form-control { background-color: rgb(255 255 255 / 20%); border: 1px solid rgb(255 255 255 / 45%); color: #fff; }
    .nav-search button[type=submit] { background-color: rgb(255 255 255 / 20%); border: 1px solid rgb(255 255 255 / 32%); color: #fff; }

    .nav-tabs .nav-link { margin-bottom: -1px; border: 1px solid transparent; border-top-right-radius: .313rem; border-top-left-radius: .313rem; color: var(--color); }
    .nav-pills .nav-link { border-radius: .25rem; color: #495057; }

    .nav-tabs.nav-primary { border-bottom: 1px solid var(--primary); }
    .nav-tabs.nav-primary .nav-link:hover { border-color: var(--border) var(--border) transparent; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .nav-tabs.nav-primary .nav-link.active { color: var(--primary); border-color: var(--primary) var(--primary) var(--white); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .nav-danger.nav-tabs .nav-link.active { color: #f41127; border-color: #f41127 #f41127 #fff }
    .nav-success.nav-tabs .nav-link.active { color: #17a00e; border-color: #17a00e #17a00e #fff }
    .nav-warning.nav-tabs .nav-link.active { color: #ffc107; border-color: #ffc107 #ffc107 #fff }
    
    .nav-pills .nav-link.active { color: #fff; background-color: #f41127 }

    .nav-pills.nav-pills-primary .nav-link.active { color: var(--white); background-color: var(--primary) }
    .nav-pills.nav-pills-primary .nav-link.active:hover { color: var(--white); background-color: var(--primary) !important }
    
    .nav-pills-danger.nav-pills .nav-link.active { color: #fff; background-color: #f41127 }
    .nav-pills-success.nav-pills .nav-link.active { color: #fff; background-color: #17a00e }
    .nav-pills-warning.nav-pills .nav-link.active { color: #000; background-color: #ffc107 }

    .tab-icon { vertical-align: middle; line-height: 1; }
/* ----------------------------------- end nav tabs ----------------------------------- */


/* ----------------------------------- dropdown ----------------------------------- */
    .dropdown-menu { overflow: hidden; padding: 0; border: 1px solid var(--light); border-radius: 0.4rem; box-shadow: var(--shadow); }
    .dropdown-item { padding: 0.5rem 0.625rem; font-size: 14px; color: var(--color); }
    .dropdown-item:hover { background: var(--light); }
    .dropdown-item ion-icon, .dropdown-item i, .dropdown-item .icon { margin-right: 0.313rem; }

    .dropdown-action .dropdown-toggle { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin: auto; }
    .dropdown-action .dropdown-toggle:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; transform: scale(0.3); opacity: 0; visibility: hidden; background: var(--light); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dropdown-action .dropdown-toggle:hover:before { transform: scale(1); opacity: 1; visibility: visible; } 
/* ----------------------------------- end dropdown ----------------------------------- */


/* ----------------------------------- modal ----------------------------------- */
    .modal .modal-dialog .modal-content { border: 0; border-radius: 0.4rem; background-color: var(--white); box-shadow: var(--shadow); }
    .modal .modal-line { border: 1px solid #dee2e6!important; border-radius: 0.4rem; padding: 0.4rem; }
    .modal .modal-line .grup-title { text-align: center !important; font-weight: 500;}
    .modal .step-wizard { text-align: center !important; }
    .modal .step-wizard .image-step { max-width: 250px; padding-bottom: 15px;}
    .modal .modal-title { font-weight: 500; font-size: 1rem; line-height: 150%; color: var(--color); }
    .modal .btn-close {
        box-sizing: content-box;
        width: 0.925rem;
        height: 0.925rem;
        padding: 0.25em 0.25em;
        color: var(--text);
        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
        opacity: 0.5;
    }
    .modal .btn-close:hover { color: var(--primary); text-decoration: none; opacity: 0.75; }
    .modal .btn-close:focus { outline: 0; box-shadow: none; opacity: 1; }

    .modal .modal-action { display: flex; align-items: center; justify-content: space-between; margin-top: 1.875rem; }

    .modal-style .modal-dialog .modal-content .modal-body hr { border-bottom: 0.5px solid rgba(45, 45, 45, 1) !important; }

    /* The Modal (background) */
    .modal-preview-image {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1000; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    }

    /* Modal Content (Image) */
    .modal-preview-image .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; }

    /* Caption of Modal Image (Image Text) - Same Width as the Image */
    #caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
        text-align: center;
        color: #ccc;
        padding: 10px 0;
        height: 150px;
    }

    /* Add Animation - Zoom in the Modal */
    .modal-preview-image .modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; }

    @keyframes zoom {
        from { transform:scale(0) }
        to { transform:scale(1) }
    }

    /* The Close Button */
    .modal-preview-image .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }

    .modal-preview-image .close:hover,
    .modal-preview-image .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

    @media only screen and (max-width: 700px) {
        .modal-preview-image .modal-content { width: 100%; }
    }
/* ----------------------------------- end modal ----------------------------------- */


/* ----------------------------------- form style ----------------------------------- */
    .form-body { width: 100%; }
    .form-style { position: relative; width: 100%; }

    .form-label-group { margin-bottom: 0.313rem; }
    .form-label-group .form-label { margin-bottom: 0; }

    .form-control-wrap { position: relative; }
    .form-control-wrap .right-icon { position: absolute; top: 15px; right: 0.75rem; }
    .form-control-wrap .right-icon a { color: var(--color) !important; }

    .text-note { font-size: 0.688rem; line-height: 1.4; color: rgba(0, 0, 0, 0.5); }
    .text-note span { color: #ff3366; }

    .form-group { width: 100%; margin-bottom: 0.625rem; }
    .control-label { font-weight: 400; font-size: 0.825rem; line-height: 1.2; color: var(--color); margin-bottom: 0.5rem; }

    .form-control { 
        position: relative;
        display: block;
        width: 100%;
        height: calc(2.125rem + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        background: var(--light); 
        border: 1px solid var(--border);
        border-radius: 0.4rem !important;
        font-weight: 400 !important;
        font-size: 0.938rem; 
        line-height: 1.2;
        color: var(--color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .form-control::placeholder { font-weight: normal; font-size: 0.8rem; letter-spacing: 0.02rem; color: var(--dark); opacity: 0.4; }
    .form-control::-webkit-input-placeholder { font-weight: normal; font-size: 0.8rem; letter-spacing: 0.02rem; color: var(--dark); opacity: 0.4; }
    .form-control::-moz-placeholder { font-weight: normal; font-size: 0.8rem; letter-spacing: 0.02rem; color: var(--dark); opacity: 0.4; }
    .form-control:-ms-input-placeholder { font-weight: normal; font-size: 0.8rem; letter-spacing: 0.02rem; color: var(--dark); opacity: 0.4; }
    .form-control:-moz-placeholder { font-weight: normal; font-size: 0.8rem; letter-spacing: 0.02rem; color: var(--dark); opacity: 0.4; }
    .form-control:disabled, .form-control[readonly], .form-control[disabled] { background-color: #e9ecef; opacity: 1; }

    .form-control-sm { height: calc(1.45rem + 0.75rem + 2px) !important; }
    .form-control-sm ~ .select2-container .select2-selection--single { height: calc(1.45rem + 0.75rem + 2px); padding: 0.125rem 0.25rem; }

    .form-control:focus { 
        box-shadow: none; 
        background: var(--white) !important;
        border-color: var(--primary) !important; 
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); 
    }

    /* select2 style */
    /* .select2-container { width: 100% !important; }
    .select2-container .select2-selection--single {
        user-select: none;
        -webkit-user-select: none;
        position: relative;
        display: block;
        width: 100%;
        height: calc(1.875rem + 0.75rem + 2px);
        padding: 0.25rem 0.25rem;
        background: var(--light); 
        border: 1px solid var(--border);
        box-shadow: none !important;
        font-weight: 400 !important;
        font-size: 0.938rem !important; 
        line-height: 1.2 !important;
        color: var(--color) !important; 
        border-radius: 0.41rem;
    }
    .select2-container .select2-selection--single .select2-selection__placeholder { font-weight: normal; font-size: 0.875rem; color: var(--color); opacity: 0.4; }
    .select2-container .select2-selection--single .select2-selection__rendered { font-size: 0.825rem !important; line-height: 2rem !important; color: var(--color) !important; }
    .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; position: absolute; top: 60%; right: 0.25rem; }
    .select2-container .select2-selection--single .select2-selection__arrow b {
        border-color: var(--color) transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        margin-left: 0;
        margin-top: 0;
        height: 0;
        width: 0;
    }
    .select2-container .select2-dropdown { background: var(--white); border: 1px solid var(--light); border-radius: 0.4rem; box-shadow: var(--shadow); overflow: hidden; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; }
    .select2-container .select2-dropdown .select2-search { padding: 0.375rem 0.5rem; }
    .select2-container .select2-dropdown .select2-search .select2-search__field { border: 1px solid var(--border) !important; border-radius: 0.25rem !important; outline: 0 !important; }
    .select2-container .select2-results__option { z-index: 9992 !important; font-size: 0.875rem; padding: 0.375rem 0.5rem; -webkit-transition: color .3s, background-color .3s; -moz-transition: color .3s, background-color .3s; -ms-transition: color .3s, background-color .3s; -o-transition: color .3s, background-color .3s; transition: color .3s, background-color .3s; }
    .select2-container .select2-results__option--selected, .select2-container .select2-results__option--highlighted { background-color: var(--primary); color: var(--white); -webkit-transition: color .3s, background-color .3s; -moz-transition: color .3s, background-color .3s; -ms-transition: color .3s, background-color .3s; -o-transition: color .3s, background-color .3s; transition: color .3s, background-color .3s; } */


    /*select2 custome*/
    /* select2 style */
    .select2-container { width: 100% !important; }
    .select2-container.select2-container--open { z-index: 1070; }
    .select2-container .select2-selection--single {
        user-select: none;
        -webkit-user-select: none;
        position: relative;
        display: block;
        width: 100%;
        height: calc(1.875rem + 0.75rem + 2px);
        padding: 0.25rem 0.25rem;
        background: var(--light); 
        border: 1px solid var(--border);
        box-shadow: none !important;
        font-weight: 400 !important;
        font-size: 0.938rem !important; 
        line-height: 1.2 !important;
        color: var(--color) !important; 
        border-radius: 0.41rem;
    }
    .select2-container .select2-selection--single .select2-selection__placeholder { font-weight: normal; font-size: 0.875rem; color: var(--color); opacity: 0.4; }
    .select2-container .select2-selection--single .select2-selection__rendered { font-size: 0.825rem !important; line-height: 2rem !important; color: var(--color) !important; }
    .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; position: absolute; top: 60%; right: 0.25rem; }
    .select2-container .select2-selection--single .select2-selection__arrow b {
        border-color: var(--color) transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        margin-left: 0;
        margin-top: 0;
        height: 0;
        width: 0;
    }
    .select2-container .select2-dropdown { background: var(--white); border: 1px solid var(--light); border-radius: 0.4rem; box-shadow: var(--shadow); overflow: hidden; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; }
    .select2-container .select2-dropdown .select2-search { padding: 0.375rem 0.5rem; }
    .select2-container .select2-dropdown .select2-search .select2-search__field { border: 1px solid var(--border) !important; border-radius: 0.25rem !important; outline: 0 !important; }
    .select2-container .select2-results { max-height: 245px; overflow-y: scroll; }
    .select2-container .select2-results__option { font-size: 0.875rem; padding: 0.375rem 0.5rem; -webkit-transition: color .3s, background-color .3s; -moz-transition: color .3s, background-color .3s; -ms-transition: color .3s, background-color .3s; -o-transition: color .3s, background-color .3s; transition: color .3s, background-color .3s; }
    .select2-container .select2-results__option--selected, .select2-container .select2-results__option--highlighted { background-color: var(--primary); color: var(--white); -webkit-transition: color .3s, background-color .3s; -moz-transition: color .3s, background-color .3s; -ms-transition: color .3s, background-color .3s; -o-transition: color .3s, background-color .3s; transition: color .3s, background-color .3s; }

    
    .checkbox-custome input[type="checkbox"] {
        position: relative;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        color: var(--black);
        border: 1px solid var(--primary);
        appearance: none;
        outline: 0;
        cursor: pointer;
        transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
        -webkit-transition: all;
        -moz-transition: all;
        -ms-transition: all;
        -o-transition: all;
        transition: all;
        transition-duration: 0s;
        -webkit-transition-duration: 250ms;
        transition-duration: 250ms;
    }

    .checkbox-custome input[type="checkbox"]:before {
        position: absolute;
        content: '';
        display: block;
        top: 0px;
        left: 4px;
        width: 8px;
        height: 13px;
        border-style: solid;
        border-color: var(--white);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
        -webkit-transition: all;
        -moz-transition: all;
        -ms-transition: all;
        -o-transition: all;
        transition: all;
        transition-duration: 0s;
        -webkit-transition-duration: 250ms;
        transition-duration: 250ms;

    }
    .checkbox-custome input[type="checkbox"]:checked { color: var(--white); border-color: var(--primary); background: var(--primary); }
    .checkbox-custome input[type="checkbox"]:checked::before { opacity: 1; }

    .checkbox-custome-danger input[type="checkbox"] {
        position: relative;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        color: black;
        border: 1px solid var(--light);
        background: var(--light);
        appearance: none;
        outline: 0;
        cursor: pointer;
        transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
        -webkit-transition: all;
        -moz-transition: all;
        -ms-transition: all;
        -o-transition: all;
        transition: all;
        transition-duration: 0s;
        -webkit-transition-duration: 250ms;
        transition-duration: 250ms;
    }

    .checkbox-custome-danger input[type="checkbox"]:before {
        position: absolute;
        content: '';
        display: block;
        top: 0px;
        left: 4px;
        width: 8px;
        height: 13px;
        border-style: solid;
        border-color: white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
        -webkit-transition: all;
        -moz-transition: all;
        -ms-transition: all;
        -o-transition: all;
        transition: all;
        transition-duration: 0s;
        -webkit-transition-duration: 250ms;
        transition-duration: 250ms;

    }
    .checkbox-custome-danger input[type="checkbox"]:checked { color: #ffffff; border-color: crimson; background: crimson; }
    .checkbox-custome-danger input[type="checkbox"]:checked::before { opacity: 1; }

    .btn-delete-record { position: absolute; left: 9.5rem; }

    .checkbox-custome input[type="checkbox"] {
        position: relative;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        color: black;
        border: 1px solid var(--primary);
        appearance: none;
        outline: 0;
        cursor: pointer;
        transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
        -webkit-transition: all;
        -moz-transition: all;
        -ms-transition: all;
        -o-transition: all;
        transition: all;
        transition-duration: 0s;
        -webkit-transition-duration: 250ms;
        transition-duration: 250ms;
    }
    .checkbox-custome input[type="checkbox"]:before {
        position: absolute;
        content: '';
        display: block;
        top: 0px;
        left: 4px;
        width: 8px;
        height: 13px;
        border-style: solid;
        border-color: var(--white);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
        -webkit-transition: all;
        -moz-transition: all;
        -ms-transition: all;
        -o-transition: all;
        transition: all;
        transition-duration: 0s;
        -webkit-transition-duration: 250ms;
        transition-duration: 250ms;
    }
    .checkbox-custome input[type="checkbox"]:checked { color: var(--white); border-color: var(--primary); background: var(--primary); }
    .checkbox-custome input[type="checkbox"]:checked::before { opacity: 1; }


    /* custome input */
    .custome-input-file { position: relative; margin-bottom: 10px; }
    .custome-input-file input {
        position: relative;
        width: 100%;
        cursor: pointer;
        height: calc(1.875rem + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        border: 1px solid var(--border);
        font-weight: 400 !important;
        font-size: 0.938rem; 
        line-height: 1.2;
        color: var(--color); 
        border-radius: 0.41rem;
    }
    .custome-input-file input::-webkit-file-upload-button {
        padding: 0.313rem 0.625rem;
        height: 100%;
        background: var(--accent);
        border: 0;
        border-radius: 0.41rem;
        font-size: 12px;
        line-height: 1.1;
        color: var(--white);
    }


    /* input custome */
    .input-custome { position: relative; display: flex; z-index: 1; }
    .input-custome input {
        position: relative;
        z-index: 1;
        width: 100%;
        height: calc(2.125rem + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        background: none; 
        border-radius: 0.4rem !important;
        font-weight: 400 !important;
        font-size: 0.938rem; 
        line-height: 1.2;
        color: var(--color);
    }
    .input-custome input[type='file']::-webkit-file-upload-button { visibility: hidden; padding: 0; width: 0; height: calc(2.125rem + 0.75rem + 2px); }
    .input-custome button {
        position: absolute;
        right: 0;
        bottom: 0;
        width: calc(2.125rem + 0.75rem + 2px);
        height: calc(2.125rem + 0.75rem + 2px);
        padding: 0;
        border-radius: 0.4rem !important;
        background-color: var(--primary);
    }
    .input-custome button:before { content: '\e873'; font-family: 'feather'; font-size: 1.25rem; line-height: 1.3; color: var(--white); transform: translateX(4px); }

    @-moz-document url-prefix() {
        .input-custome button { display: none }
    }


    /*input group left icon*/
    .input-group.input-telp { overflow: visible; }
    .input-group.input-telp .input-group-addon { position: absolute; top: 0; bottom: 0; left: 0.75rem; margin: auto; z-index: 5; display: inline-flex; align-items: center; }
    .input-group.input-telp .input-group-addon img.flag-ind { width: auto; height: 1.25rem; margin-right: 0.35rem; }
    .input-group.input-telp .input-group-addon span { font-weight: normal; font-size: 0.938rem; line-height: 1.2; }
    .input-group.input-telp .form-control { padding-left: 50px; border-radius: 0.4rem !important; }
    .input-group.input-telp .form-control:focus { box-shadow: none; border-color: var(--accent); }


    /*tags input*/
    div.tagsinput { border: 1px solid var(--border) !important; background: var(--light) !important; border-radius: 0.313rem !important; padding: 0.75rem !important; }
    div.tagsinput span.tag { border: 1px solid var(--primary) !important; background: var(--primary) !important; border-radius: 0.313rem !important; font-weight: 400 !important; font-size: 0.938rem !important; line-height: 1.2 !important; color: var(--white) !important; }
    div.tagsinput span.tag a { font-weight: normal; color: var(--white) !important; text-decoration: none; font-size: 12px; line-height: 1.5 !important; }
    div.tagsinput span.tag a:hover { color: var(--white) !important; }
    div.tagsinput input { font-size: 0.813rem; color: var(--dark); width: 100px; outline: 0; }
    .tags_clear { clear: both; width: 100%; height: 0; color: var(--dark); }
    .not_valid { background: #FBD8DB !important; color: #90111A !important; }


    /*datepicker*/
    .datepicker-range { font-weight: 400 !important; font-size: 0.938rem; }
    .daterangepicker .daterangepicker_input i { top: 10px !important; font-size: 0.75rem; }
    .daterangepicker .input-mini { font-size: 0.75rem; }
    .daterangepicker td, .daterangepicker th { color: var(--color); }
    .daterangepicker thead tr th { font-size: 14px; font-weight: 500; padding: 4px 2px; }
    .daterangepicker tbody tr td { font-size: 14px; color: var(--color); }
    .daterangepicker tbody tr td { padding: 4px 5px !important; }
    
    /* .datepicker.dropdown-menu {
        background-color: var(--white);
        border: none;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
        color: var(--dark);
    }
    .datepicker table tr td.day:hover, .datepicker table tr td.day.focused { background: var(--light); } */

    /*datepicker*/
    .datepicker.dropdown-menu {
        font-family: var(--font1);
        background-color: var(--white);
        border: none;
        -webkit-border-radius: 0.625rem;
        -moz-border-radius: 0.625rem;
        border-radius: 0.625rem;
        -webkit-box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.10);
        -moz-box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.10);
        box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.10);
        color: var(--dark);
    }
    .datepicker table tr td.day:hover, .datepicker table tr td.day.focused { background: var(--light); }


    /* fileupload */
    .fileupload .thumbnail { text-align: left !important; justify-content: flex-start; }
    .fileupload .thumbnail img { width: 100%; max-width: 6.25rem; max-height: 6.25rem; object-fit: contain; object-position: center; }
    .fileupload .btn { padding: 0.25rem 0.625rem !important; font-size: 0.75rem !important; border-radius: 0.313rem; }
    .fileupload .btn .icon { margin-right: 0.313rem !important; }


    /* summernote */
    .note-editable > p { margin-bottom: 0.625rem; }
    .note-editor.card { border-radius: 0.313rem; }
    .note-editor .card-header { background: none; }
    .note-editor .panel-heading { border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
    .note-btn-group .note-btn { border-color: transparent; background: var(--white); font-weight: normal; font-size: 12px; color: rgba(0, 0, 0, 0.5); outline: 0; -webkit-box-shadow: none; box-shadow: none; }
    .note-btn-group .note-btn:hover, .note-btn-group .note-btn:focus { color: #000000; }
    .note-editor.note-frame { border: 0 !important; border-radius: 0.4rem !important; overflow: hidden !important; }


    /*validate*/
    .text-error { color: var(--danger); }
    .has-error { color: var(--danger); clear: both; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .has-error em, em.has-error { color: var(--danger); font-size: 12px !important; }
    .has-error > input { border-color: var(--danger); }
    .has-error:focus { border-color: var(--danger) !important; }
    .has-error > select { border-color: var(--danger); }
    .has-error > textarea { border-color: var(--danger); }
    input.has-error { border-color: var(--danger); color: var(--dark); }
    .form-group.has-error > label { color: var(--dark); }
    textarea.has-error { border-color: var(--danger); color: var(--light); }
    select.has-error { border-color: var(--danger); color: var(--light); }
    .custom-control.has-error > .custom-control-label { color: var(--dark) !important; }
    .custom-checkbox.has-error > .custom-control-label { color: var(--light) !important; }
    .custom-checkbox.has-error > .custom-control-label::before { border-color: var(--light) !important; }
    .has-error > .select2-container .select2-selection--single { border: 1px solid var(--danger) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
/* ----------------------------------- end form style ----------------------------------- */


/* ----------------------------------- canvas maps ----------------------------------- */
    .maps-area { position: relative; overflow: hidden; width: 100%; height: 300px; margin: auto auto; border: none; border-radius: 0.313rem;  -webkit-transform: translateZ(0); z-index: 10; }

    #maps-canvas, .maps-canvas { width: 100%; height: 100%; margin: 0; padding: 0; z-index: 10; }

    .controls {
        margin-top: 10px;
        border: 1px solid var(--primary);
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none; 
        background-color: var(--white);
        border-radius: 5px;
    }

    #search_location {
        background-color: var(--white);
        height: 40px;
        border: 0;
        font-weight: normal;
        font-size: 14px;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 80%;
        box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
        z-index: 1081;
    }

    #type-selector { color: var(--white); background-color: var(--primary); padding: 5px 11px 0px 11px; }
    #type-selector label { font-family: Roboto; font-size: 13px; font-weight: 300; }

    .pac-container { background-color: var(--white); z-index: 20; position: fixed; display: inline-block; float: left; }
/* ----------------------------------- end canvas maps ----------------------------------- */


/* ----------------------------------- table ----------------------------------- */
    .table-responsive { white-space: nowrap; }

    .table { position: relative; overflow-x: auto; }
    .table thead { border-bottom: 1px solid var(--light) !important; }
    .table thead tr th { font-weight: 500; padding: 0.75rem 0.313rem; }

    .table thead tr th:has(.checkbox-custome) { text-align: center; width: 2.5rem; }
    .table thead tr th.number { text-align: center; width: 2.5rem; }
    .table thead tr th.action { text-align: center; width: 10%; }

    .table tbody tr td img { width: 2.5rem; height: 2.5rem; border-radius: 0.313rem; object-fit: cover; object-position: center; }

    /* .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--light); } */
    
    .color-table .table { color: var(--white); border-color: rgb(255 255 255 / 22%); }
    .info-table .table, .warning-table .table { color: #16191d; border-color: rgb(0 0 0 / 12%); }

    .table-style-tr { width: 100%; font-size: 0.938rem; line-height: 1.2; color: var(--text); }
    .table-style-tr tr th { font-weight: 600; font-size: 0.875rem; border: 0; padding: 0.75rem 0.313rem; border-bottom: 1px solid var(--light); }
    .table-style-tr tr:first-child td { border-top: 0; }
    .table-style-tr tr td { font-weight: normal; font-size: 0.875rem; color: var(--text2); padding: 0.75rem 0.313rem; border-bottom: 1px solid var(--light); }

    .table-padd-sm thead tr th { padding: 0.5rem 0.313rem; }
    .table-padd-sm tbody tr td { padding: 0.313rem 0.313rem; }

    .table-padd-lg thead tr th { padding: 0.75rem 0.313rem; }
    .table-padd-lg tbody tr td { padding: 0.75rem 0.313rem; }
    
    .datatables-filter > div[class*="col-"] { padding: 0; }
    .datatables-filter > div[class*="col-"]:first-child { padding-left: 0; }
    .datatables-filter > div[class*="col-"]:last-child { padding-right: 0; }

    .datatables-filter .dataTables_length .select2-container .select2-selection--single { width: 85px; height: 40px !important; padding: 0.313rem; background: var(--white); }
    .datatables-filter .dataTables_filter .form-control { height: 40px !important; background: var(--white); margin-left: 0; margin-bottom: 0 !important; }

    .dataTables_info { font-weight: 400; font-size: 0.825rem; color: var(--color) }

    @media (max-width: 768px) {
        .table-responsive tbody { white-space: normal !important; }

        .datatables-filter > div[class*="col-"] { width: calc(100%/2); }
        .datatables-filter .dataTables_length { text-align: left !important; }
        .datatables-filter .dataTables_filter label { width: 100%; }
        .datatables-filter .dataTables_filter .form-control { width: 100%; }

        .dataTables_info { margin-bottom: 1rem; }
    }
    @media (max-width: 580px) {
        .datatables-filter > div[class*="col-"] { width: calc(100%); margin-bottom: 0.313rem; }
    }
/* ----------------------------------- end table ----------------------------------- */


/* ------------------------------------ pagination ------------------------------------ */
    .pagination-style { padding: 0; margin: 0; font-weight: 400; font-size: 0.875rem; line-height: 1.2; color: var(--color); }
    .pagination-style .page-item .page-link { border-radius: 4px; background-color: transparent; color: var(--color); border-color: rgba(18, 34, 79, 0.2); margin-left: 0; transform: scale(1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);  }
    .pagination-style .page-item .page-link:focus { box-shadow: none; outline: none; }
    .pagination-style .page-item .page-link:hover { background: transparent; color: var(--primary) !important; border-color: var(--primary); transform: scale(1.03); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);  }
    /* .pagination-style .page-item:first-child .page-link { padding: 0.5rem 0.625rem; } */
    /* .pagination-style .page-item:last-child .page-link { padding: 0.5rem 0.625rem; } */
    .pagination-style .page-item:not(:last-child) { margin-right: 0.313rem; }
    .pagination-style .page-item.active .page-link { color: var(--white) !important; background-color: var(--primary); border-color: var(--primary); }
    .pagination-style .page-item.disabled .page-link { color: var(--color); opacity: 0.6; border-color: var(--border); pointer-events: none; cursor: not-allowed !important; }
/* ------------------------------------ end pagination ------------------------------------ */


/* ----------------------------------- flex-column ----------------------------------- */
    .flex-col { 
        width: 100%; 
        margin-bottom: 0.938rem; 
        padding-left: 0.375rem; 
        padding-right: 0.375rem;
        -webkit-transition: all .4s ease-in-out; 
        -moz-transition: all .4s ease-in-out; 
        -ms-transition: all .4s ease-in-out; 
        -o-transition: all .4s ease-in-out; 
        transition: all .4s ease-in-out; 
    }

    .flex-2-column { display: -ms-flexbox; display: flex; flex-flow: wrap; -ms-flex-direction: row; flex-direction: row; }
    .flex-2-column .flex-col { flex-basis: 50%; -ms-flex: auto; }

    @media (max-width: 1200px) {
        .flex-2-column .flex-col { flex-basis: 50%; }
    }

    @media (max-width: 992px) {
        .flex-2-column .flex-col { flex-basis: 50%; }
    }

    @media (max-width: 768px) {
        .flex-2-column .flex-col { flex-basis: 100%; }
    }

    @media (max-width: 580px) {
        .flex-2-column .flex-col { flex-basis: 100%; }
    }

    @media only screen and (max-width: 480px) {
        .flex-2-column .flex-col { flex-basis: 100%; }
    }


    .flex-3-column { display: -ms-flexbox; display: flex; flex-flow: wrap; -ms-flex-direction: row; flex-direction: row; }
    .flex-3-column .flex-col { flex-basis: 33.33%; -ms-flex: auto; }

    @media (max-width: 1200px) {
        .flex-3-column .flex-col { flex-basis: 33.33%; }
    }

    @media (max-width: 992px) {
        .flex-3-column .flex-col { flex-basis: 33.33%; }
    }

    @media (max-width: 768px) {
        .flex-3-column .flex-col { flex-basis: 50%; }
    }

    @media (max-width: 580px) {
        .flex-3-column .flex-col { flex-basis: 100%; }
    }

    @media only screen and (max-width: 480px) {
        .flex-3-column .flex-col { flex-basis: 100%; }
    }


    .flex-4-column { display: -ms-flexbox; display: flex; flex-flow: wrap; -ms-flex-direction: row; flex-direction: row; }
    .flex-4-column .flex-col { flex-basis: 25%; -ms-flex: auto; }

    @media (max-width: 1200px) {
        .flex-4-column .flex-col { flex-basis: 25%; }
    }

    @media (max-width: 992px) {
        .flex-4-column .flex-col { flex-basis: 25%; }
    }

    @media (max-width: 768px) {
        .flex-4-column .flex-col { flex-basis: 33.33%; }
    }

    @media (max-width: 580px) {
        .flex-4-column .flex-col { flex-basis: 50%; }
    }

    @media only screen and (max-width: 480px) {
        .flex-4-column .flex-col { flex-basis: 100%; }
    }


    .flex-5-column { display: -ms-flexbox; display: flex; flex-flow: wrap; -ms-flex-direction: row; flex-direction: row; }
    .flex-5-column .flex-col { flex-basis: 20%; -ms-flex: auto; }

    @media (max-width: 1200px) {
        .flex-5-column .flex-col { flex-basis: 20%; }
    }

    @media (max-width: 992px) {
        .flex-5-column .flex-col { flex-basis: 25%; }
    }

    @media (max-width: 768px) {
        .flex-5-column .flex-col { flex-basis: 33.33%; }
    }

    @media (max-width: 580px) {
        .flex-5-column .flex-col { flex-basis: 50%; }
    }

    @media only screen and (max-width: 480px) {
        .flex-5-column .flex-col { flex-basis: 100%; }
    }


    .flex-6-column { display: -ms-flexbox; display: flex; flex-flow: wrap; -ms-flex-direction: row; flex-direction: row; }
    .flex-6-column .flex-col { flex-basis: 16.66%; -ms-flex: auto; }

    @media (max-width: 1200px) {
        .flex-6-column .flex-col { flex-basis: 16.66%; }
    }

    @media (max-width: 992px) {
        .flex-6-column .flex-col { flex-basis: 20%; }
    }

    @media (max-width: 768px) {
        .flex-6-column .flex-col { flex-basis: 25%; }
    }

    @media (max-width: 580px) {
        .flex-6-column .flex-col { flex-basis: 33.33%; }
    }

    @media only screen and (max-width: 480px) {
        .flex-6-column .flex-col { flex-basis: 50%; }
    }
/* ----------------------------------- end flex-column ----------------------------------- */


/* ----------------------------------- semi dark ----------------------------------- */
    html.semi-dark .sidebar-wrapper,
    html.semi-dark .sidebar-wrapper .sidebar-header {
        background-color: #181818;
    }

    html.semi-dark .sidebar-wrapper, 
    html.semi-dark .sidebar-wrapper .sidebar-header {
        border-right: 1px solid #181818;
    }

    html.semi-dark .sidebar-wrapper .sidebar-header { border-bottom: 1px solid rgb(255 255 255 / 12%); }

    html.semi-dark .sidebar-wrapper .sidebar-header .logo-text,
    html.semi-dark .sidebar-wrapper .sidebar-header .toggle-icon {
        color: #fcfcfc;
    }

    html.semi-dark .sidebar-wrapper .metismenu a { color: rgb(255 255 255 / 50%); }

    html.semi-dark .sidebar-wrapper .metismenu .mm-active>a, html.semi-dark .sidebar-wrapper .metismenu a:active, html.semi-dark .sidebar-wrapper .metismenu a:focus, html.semi-dark .sidebar-wrapper .metismenu a:hover {
        color: #ffffff;
        text-decoration: none;
        background-color: rgb(255 255 255 / 12%);
    }

    html.semi-dark .sidebar-wrapper .sidebar-header img { filter: invert(1) grayscale(100%) brightness(200%); }
    html.semi-dark .sidebar-wrapper .simplebar-scrollbar:before { background: rgba(255, 255, 255, .4) }
/* ----------------------------------- end semi dark ----------------------------------- */


/* ----------------------------------- pace ----------------------------------- */
    .pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pace-inactive{display:none}.pace .pace-progress{background:var(--primary);position:fixed;z-index:2000;top:0;right:100%;width:100%;height:3px}.pace .pace-progress-inner{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px var(--primary),0 0 5px var(--primary);opacity:1;-webkit-transform:rotate(3deg) translate(0,-4px);-moz-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);-o-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}.pace .pace-activity{display:block;position:fixed;z-index:2000;top:15px;right:15px;width:20px;height:20px;border:solid 3px transparent;border-top-color:var(--primary);border-left-color:var(--primary);border-radius:10px;-webkit-animation:pace-spinner .4s linear infinite;-moz-animation:pace-spinner .4s linear infinite;-ms-animation:pace-spinner .4s linear infinite;-o-animation:pace-spinner .4s linear infinite;animation:pace-spinner .4s linear infinite}@-webkit-keyframes pace-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes pace-spinner{0%{-moz-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes pace-spinner{0%{-o-transform:rotate(0);transform:rotate(0)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes pace-spinner{0%{-ms-transform:rotate(0);transform:rotate(0)}100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pace-spinner{0%{transform:rotate(0);transform:rotate(0)}100%{transform:rotate(360deg);transform:rotate(360deg)}}
/* ----------------------------------- end pace ----------------------------------- */


/* ------------------------------------ animate css ------------------------------------ */
    :root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.not-animated,[data-animate]:not(.animated){opacity:0}.animated{-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.repeat-1{-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animated.repeat-2{-webkit-animation-iteration-count:calc(var(--animate-repeat) * 2);animation-iteration-count:calc(var(--animate-repeat) * 2)}.animated.repeat-3{-webkit-animation-iteration-count:calc(var(--animate-repeat) * 3);animation-iteration-count:calc(var(--animate-repeat) * 3)}.animated.delay-1s{-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animated.delay-2s{-webkit-animation-delay:calc(var(--animate-delay) * 2);animation-delay:calc(var(--animate-delay) * 2)}.animated.delay-3s{-webkit-animation-delay:calc(var(--animate-delay) * 3);animation-delay:calc(var(--animate-delay) * 3)}.animated.delay-4s{-webkit-animation-delay:calc(var(--animate-delay) * 4);animation-delay:calc(var(--animate-delay) * 4)}.animated.delay-5s{-webkit-animation-delay:calc(var(--animate-delay) * 5);animation-delay:calc(var(--animate-delay) * 5)}.animated.faster{-webkit-animation-duration:calc(var(--animate-duration)/ 2);animation-duration:calc(var(--animate-duration)/ 2)}.animated.fast{-webkit-animation-duration:calc(var(--animate-duration) * .8);animation-duration:calc(var(--animate-duration) * .8)}.animated.slow{-webkit-animation-duration:calc(var(--animate-duration) * 2);animation-duration:calc(var(--animate-duration) * 2)}.animated.slower{-webkit-animation-duration:calc(var(--animate-duration) * 3);animation-duration:calc(var(--animate-duration) * 3)}@media print,(prefers-reduced-motion:reduce){.animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}.animated[class*=Out]{opacity:0}}@-webkit-keyframes bounce{20%,53%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0) scaleY(.95);transform:translate3d(0,0,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes bounce{20%,53%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0) scaleY(.95);transform:translate3d(0,0,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}.headShake,.pulse{-webkit-animation-timing-function:ease-in-out}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{50%,from,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{50%,from,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}@keyframes pulse{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}@keyframes rubberBand{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shakeX{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shakeX{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes shakeY{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes shakeY{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}to{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}to{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}}@keyframes tada{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}}@keyframes wobble{from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{11.1%,from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{11.1%,from,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%,28%,70%{-webkit-transform:scale(1);transform:scale(1)}14%,42%{-webkit-transform:scale(1.3);transform:scale(1.3)}}@keyframes heartBeat{0%,28%,70%{-webkit-transform:scale(1);transform:scale(1)}14%,42%{-webkit-transform:scale(1.3);transform:scale(1.3)}}.heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:calc(var(--animate-duration) * 1.3);animation-duration:calc(var(--animate-duration) * 1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}100%{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}100%{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}100%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}@keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}100%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}.backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}100%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}@keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}100%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}.backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}100%{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}100%{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.backOutUp{-webkit-animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-duration:calc(var(--animate-duration) * .75);animation-duration:calc(var(--animate-duration) * .75);-webkit-animation-name:bounceIn;animation-name:bounceIn}.bounceOut,.flipOutX{-webkit-animation-duration:calc(var(--animate-duration) * .75)}@-webkit-keyframes bounceInDown{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInDown{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInLeft{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{animation-duration:calc(var(--animate-duration) * .75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{from{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInDownBig{from{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInLeftBig{from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInRightBig{from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInUpBig{from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{from{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInTopLeft{from{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{from{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInTopRight{from{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{from{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInBottomLeft{from{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{from{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fadeInBottomRight{from{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutTopLeft{from{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}@keyframes fadeOutTopLeft{from{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}.fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{from{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}@keyframes fadeOutTopRight{from{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}.fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{from{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyframes fadeOutBottomRight{from{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{from{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}@keyframes fadeOutBottomLeft{from{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}.fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes flip{from{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,-360deg);transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translate3d(0,0,0) rotate3d(0,1,0,0deg);transform:perspective(400px) scale3d(.95,.95,.95) translate3d(0,0,0) rotate3d(0,1,0,0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,0deg);transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{from{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,-360deg);transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translate3d(0,0,0) rotate3d(0,1,0,0deg);transform:perspective(400px) scale3d(.95,.95,.95) translate3d(0,0,0) rotate3d(0,1,0,0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,0deg);transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}.flipInY,.flipOutX{-webkit-backface-visibility:visible!important}@-webkit-keyframes flipInY{from{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{from{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{from{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{from{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{animation-duration:calc(var(--animate-duration) * .75);-webkit-animation-name:flipOutX;animation-name:flipOutX;backface-visibility:visible!important}@-webkit-keyframes flipOutY{from{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{from{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-animation-duration:calc(var(--animate-duration) * .75);animation-duration:calc(var(--animate-duration) * .75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedInRight{from{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes lightSpeedInRight{from{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{from{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes lightSpeedInLeft{from{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{from{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{from{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{from{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{from{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}.lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{from{-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes rotateIn{from{-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{from{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes rotateInDownLeft{from{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{from{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes rotateInDownRight{from{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{from{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes rotateInUpLeft{from{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{from{-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes rotateInUpRight{from{-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{from{opacity:1}to{-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{from{opacity:1}to{-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{from{opacity:1}to{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{from{opacity:1}to{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{from{opacity:1}to{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{from{opacity:1}to{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{from{opacity:1}to{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{from{opacity:1}to{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{from{opacity:1}to{-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{from{opacity:1}to{-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-duration:calc(var(--animate-duration) * 2);animation-duration:calc(var(--animate-duration) * 2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-transform-origin:top left;transform-origin:top left}@-webkit-keyframes jackInTheBox{from{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{from{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{from{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes rollIn{from{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-origin:left center;transform-origin:left center}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInLeft{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInRight{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
/* ------------------------------------ end animate css ------------------------------------ */


/* ------------------------------------ magnific popup ------------------------------------ */
    .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; }
    .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; }

    .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; }
    .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }

    .mfp-align-top .mfp-container:before { display: none; }

    .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 9999999; }

    .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; }

    .mfp-ajax-cur { cursor: progress; }

    .mfp-zoom-out-cur, 
    .mfp-zoom-out-cur .mfp-image-holder .mfp-close { 
        cursor: -moz-zoom-out; 
        cursor: -webkit-zoom-out; 
        cursor: zoom-out; 
    }
    .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }

    .mfp-auto-cursor .mfp-content { cursor: auto; }

    .mfp-close,
    .mfp-arrow,
    .mfp-preloader,
    .mfp-counter {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none; 
    }

    .mfp-loading.mfp-figure { display: none; }

    .mfp-hide { display: none !important; }

    .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 9999999; }
    .mfp-preloader a { color: #CCC; }
    .mfp-preloader a:hover { color: #FFF; }

    .mfp-s-ready .mfp-preloader { display: none; }

    .mfp-s-error .mfp-content { display: none; }

    button.mfp-close,
    button.mfp-arrow {
        overflow: visible;
        cursor: pointer;
        background: transparent;
        border: 0;
        -webkit-appearance: none;
        display: block;
        outline: none;
        padding: 0;
        z-index: 9999999;
        box-shadow: none;
        touch-action: manipulation; 
    }
    button::-moz-focus-inner {padding: 0;border: 0; }

    .mfp-close {
        width: 44px;
        height: 44px;
        line-height: 44px;
        position: absolute;
        right: 0;
        top: 0;
        text-decoration: none;
        text-align: center;
        opacity: 0.65;
        padding: 0 0 18px 10px;
        color: #FFF;
        font-style: normal;
        font-size: 28px;
        font-family: Arial, Baskerville, monospace; 
    }
    .mfp-close:hover, .mfp-close:focus { opacity: 1; }
    .mfp-close:active { top: 1px; }

    .mfp-close-btn-in .mfp-close { color: #333; }

    .mfp-image-holder .mfp-close,
    .mfp-iframe-holder .mfp-close {
        color: #FFF;
        right: -6px;
        text-align: right;
        padding-right: 6px;
        width: 100%; 
    }

    .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; }

    .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; }
    .mfp-arrow:active { margin-top: -54px; }
    .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; }
    .mfp-arrow:before,
    .mfp-arrow:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 35px;
        margin-left: 35px;
        border: medium inset transparent; 
    }
    .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; }
    .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; }

    .mfp-arrow-left { left: 0; }
    .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; }
    .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; }

    .mfp-arrow-right { right: 0; }
    .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; }
    .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; }

    .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; }
    .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; }
    .mfp-iframe-holder .mfp-close { top: -40px; }

    .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }
    .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; }

    /* Main image in popup */
    img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; }

    /* The shadow behind the image */
    .mfp-figure { line-height: 0; }
    .mfp-figure:after {
        content: '';
        position: absolute;
        left: 0;
        top: 40px;
        bottom: 40px;
        display: block;
        right: 0;
        width: auto;
        height: auto;
        z-index: -1;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
        background: #444; 
    }
    .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; }
    .mfp-figure figure { margin: 0; }

    .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; }

    .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; }

    .mfp-image-holder .mfp-content { max-width: 100%; }

    .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; }

    @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
        .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; }
        .mfp-img-mobile img.mfp-img { padding: 0; }
        .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; }
        .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; }
        .mfp-img-mobile .mfp-bottom-bar {
            background: rgba(0, 0, 0, 0.6);
            bottom: 0;
            margin: 0;
            top: auto;
            padding: 3px 5px;
            position: fixed;
            box-sizing: border-box; 
        }
        .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; }
        .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; }
        .mfp-img-mobile .mfp-close {
            top: 0;
            right: 0;
            width: 35px;
            height: 35px;
            line-height: 35px;
            background: rgba(0, 0, 0, 0.6);
            position: fixed;
            text-align: center;
            padding: 0; 
        } 
    }

    @media all and (max-width: 900px) {
        .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); }
        .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; }
        .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; }
        .mfp-container { padding-left: 6px; padding-right: 6px; } 
    }
/* ------------------------------------ end magnific popup ------------------------------------ */


/* ------------------------------------ start invoice ------------------------------------ */
    .invoice-section { background: var(--white); position: relative; }
    
    .invoice-section .head { position: relative; overflow: hidden; padding: 1rem 1.525rem; display: flex; align-items: center; justify-content: space-between;}
    .invoice-section .head .qr-area { position: relative; z-index: 2; width: 13rem; }
    .invoice-section .head .qr-area img { max-width: 12rem; object-fit: contain; }
    .invoice-section .head .text-area { position: relative; z-index: 2; flex: 1 1; text-align: right; }
    .invoice-section .head .text-area p { font-weight: 600; font-size: 1.525rem; letter-spacing: 0.15rem; color: #F61372; text-transform: uppercase; margin-bottom: 0; }
    
    @media only screen and (max-width: 480px) {
        .invoice-section .head { justify-content: center; }
        .invoice-section .head .text-area { display: none; }
    }

    .invoice-section .body { position: relative; overflow: hidden; padding: 0rem 1.525rem; }
    .invoice-section .body h1 { font-weight: 800; font-size: 1.525rem; color: var(--text); }
    .invoice-section .body h1 span { display: block; }
    .invoice-section .body .box-area { display: flex; align-items: stretch; justify-content: space-between; }
    .invoice-section .body .box-inner { position: relative; display: inline-block; border: 1px solid var(--dark); border-radius: 0.625rem; padding: 1rem; flex: 1 1; }
    @media only screen and (max-width: 480px) {
        .invoice-section .body .box-inner { padding: 0.6rem; }
    }
    .invoice-section .body .box-inner:not(:last-child) { margin-right: 0.625rem; }
    .invoice-section .body .box-inner .box-title { font-weight: 700; font-size: 0.925rem; color: var(--text3); }
    .invoice-section .body .box-inner p { font-weight: 400; font-size: 0.875rem; color: var(--text2); margin-bottom: 0.125rem; }
    .invoice-section .body .box-inner p:last-child { margin-bottom: 0; }
    .invoice-section .body .box-inner p.name { font-weight: 600; font-size: 0.875rem; color: var(--text); }
    .invoice-section .body .separator { border-top: 1px solid var(--text3); }
    .invoice-section .body .info-item { position: relative; display: flex; align-items: flex-start; }
    .invoice-section .body .info-item:not(:last-child) { margin-bottom: 0.313rem; }
    .invoice-section .body .info-item .label { width: 185px; }
    .invoice-section .body .info-item .value { flex: 1 1; }
    .invoice-section .body .info-item span { font-weight: 600; color: var(--text); }
    .invoice-section .body .table thead tr td { font-weight: 600; }
    .invoice-section .body .grand-total { position: relative; padding: 0.625rem 1.25rem; background: rgba(0, 0, 0, 0.05); border-radius: 0.5rem; text-align: right; }
    .invoice-section .body .grand-total span { font-weight: 600; font-size: 1.25rem; color: var(--text); }
    .invoice-section .body .grand-total span:first-child { margin-right: 0.625rem; }

    .invoice-section .body .download { margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: flex-end; }
    .invoice-section .body .download a { font-weight: 600; }
    .invoice-section .body .download a:not(:last-child) { margin-right: 0.313rem; }
    .invoice-section .body .download .trigg-download { border: 1px solid var(--text3); color: var(--text3) !important; }
    .invoice-section .body .download .trigg-print { background: #F61372; color: var(--white);}
    .invoice-section .body .download .trigg-print span { color: var(--white); margin-right: 0.313rem; }
    .invoice-section .body .separator { border-top: 1px solid var(--text3) !important; }

    .invoice-section .foot { position: relative; overflow: hidden; padding: 1.25rem 1.525rem; margin-top: 1.25rem; }
    .invoice-section .foot .brand-area { margin-bottom: 0.925rem; }
    .invoice-section .foot .brand-area img { max-width: 4rem !important; object-fit: contain; }
    .invoice-section .foot address { font-weight: 500; line-height: 1.4; color: var(--text2); margin-bottom: 0; }
    .invoice-section .foot p { font-weight: 600; color: var(--text); margin-bottom: 0.625rem; }
    .invoice-section .foot ul li {list-style-type: none !important;}
    .invoice-section .foot ul li .icon { color: #5F5F5F !important; display: inline-block !important; width: 1.125rem !important; margin-right: 0.625rem !important; }
    .invoice-section .foot ul li .text-icon { font-weight: 500 !important; color: #5F5F5F !important; }
    .invoice-section .foot ul li:not(:last-child) { margin-bottom: 0.313rem !important; }

/* ------------------------------------ end invoice ------------------------------------ */


/* ------------------------------------ produk list ------------------------------------ */
    .product-code { font-weight: 500; line-height: 1; color: var(--primary); }
    .product-name { font-weight: 600; line-height: 140%; color: var(--color); }
    .product-category { line-height: 1; }
    .product-price { margin-bottom: 0; line-height: 1.1; letter-spacing: -0.04rem; }
    .product-price .price { font-weight: 500; color: var(--color); }
    .product-price .satuan { font-weight: 400; color: rgba(0, 0, 0, 0.45); }
    
    .product-area { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 0.5rem; }
    .product-area .product-item { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--white); padding: 0.313rem; border-radius: 0.4rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .product-area .product-item:hover, .product-area .product-item:focus { background: var(--light); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .product-area .product-item:not(:last-child):before { content: ''; position: absolute; bottom: -0.313rem; left: 0; width: 100%; height: 1px; background: var(--border2); }
    .product-area .product-item .product-info { width: 100%; }
    .product-area .product-item .product-act { flex-shrink: 0; display: flex; align-items: center; gap: 1.25rem; }
    .product-area .product-item .product-code { margin-bottom: 0.25rem; }
    .product-area .product-item .product-name { margin-bottom: 0.25rem; }
    .product-area .product-item .product-category { margin-bottom: 0; }
    .product-area .product-item .product-price .price { font-size: 1rem; }
    .product-area .product-item .product-price .satuan { font-size: 0.875rem; }
    .product-area .product-item .product-add { width: 1.75rem; aspect-ratio: 1/1; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .product-area .product-item .product-add:hover, .product-area .product-item .product-add:focus { transform: scale(0.95); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .product-area .product-item .product-add ion-icon { font-size: 1.125rem; color: var(--white); }


    .cart-area { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 1rem; margin: 1.25rem 0; }
    .cart-area .cart-item { width: 100%; display: flex; align-items: stretch; justify-content: space-between; gap: 0.25rem; }
    .cart-area .cart-item > div { position: relative; }
    .cart-area .cart-item > div:nth-child(2) { display: flex; align-items: center; }
    .cart-area .cart-item > div:nth-child(3) { display: flex; align-items: center; }
    .cart-area .cart-item > div:nth-child(4) { display: flex; align-items: center; }
    .cart-area .cart-item > div .product-code { margin-bottom: 0.25rem; }
    .cart-area .cart-item > div .product-name { margin-bottom: 0.25rem; }
    .cart-area .cart-item > div .product-category { margin-bottom: 0; }
    .cart-area .cart-item > div .cart-action { position: absolute; top: -0.15rem; right: 0; display: flex; align-items: stretch; gap: 0.25rem; }
    .cart-area .cart-item > div .cart-action .action-item { width: 1.12rem; height: 1.12rem; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; background: var(--light); }
    .cart-area .cart-item > div .cart-action .action-item ion-icon { line-height: 1; color: rgba(0, 0, 0, 0.4); }
    .cart-area .cart-item > div .cart-action .action-item.edit:hover { background: var(--success); }
    .cart-area .cart-item > div .cart-action .action-item.delete:hover { background: var(--danger); }
    .cart-area .cart-item > div .cart-action .action-item:hover ion-icon { color: var(--white); }

    table.cart-total { float: right; }
    table.cart-total tr td:first-child { padding-right: 0.25rem; }
    table.cart-total tr td { padding: 0.313rem 0; vertical-align: middle; }
    /* ------------------------------------ end produk list ------------------------------------ */