@charset "UTF-8";

:root {
    --accent: #ED1C24;
    --accent2: rgba(251, 198, 200, 0.5);
    --accent3: #FEF4F4;
    --second: #2C368D;
    --second2: #7279ba;
    --blue: #035182;
    --yellow: #FCC817;
    --crimson: #EB1E25;
    --light: #F8F8F8;
    --light2: #DDDDDD;
    --dark: #222222;
    --white: #ffffff;
    --black: #000000;
    --danger: #ff3333;

    --color: #222222;
    --color2: #444444;
    --color3: #666666;
    --color4: #AAAAAA;
    --color5: rgba(255, 255, 255, 0.75);
    --color-white: #FFFFFF;
    --text: #434343;
    --text2: #808080;

    --border: #F5F5F5;
    --border2: #DDDDDD;

    --background: #ffffff;
    /* --background: #F8F8F8; */

    --gradient-accent: linear-gradient(135deg, #FF0000 0%, #990000 100%);
    --gradient-accent-2: linear-gradient(180deg, #FF0000 0%, #8E1116 100%);
    --gradient-second: linear-gradient(135deg, #181E88 0%, #0E1252 100%);
    --gradient-second-2: linear-gradient(135deg, #7C66D7 0%, #24186D 100%);
    --gradient-second-3: linear-gradient(135deg, #2A62F6 0%, #04178F 100%);

    --shadow: 0 0.25rem 1rem 0.5rem rgba(34, 34, 34, 0.05);
    --shadow-xxs: 0 0.15rem 0.313rem 0.313rem rgba(34, 34, 34, 0.015);
    --shadow-xs: 0 0.15rem 0.625rem 0.5rem rgba(34, 34, 34, 0.035);
    --shadow-sm: 0 0.15rem 1rem 0.5rem rgba(34, 34, 34, 0.035);
    --shadow-md: 0 0.313rem 1.25rem rgba(34, 34, 34, 0.1);

    --transition: all .2s 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';
    
    --font1: 'Inter', sans-serif;
}

[data-theme="dark"] {
    --background: #030312;
    --dark: #ffffff;
    --white: #000000;
    --text: #cccccc;
    --text2: #d1d1d1;
}


/* ------------------------------------ basic ------------------------------------ */
    *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    html, body { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
    body { background: var(--background); font-family: var(--font1); font-style: normal; font-weight: normal; font-size: 0.875rem; line-height: 1.5; color: var(--text); }
    body.canvas:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 95; background: rgba(34, 34, 34, 0.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    ::-moz-selection { background: var(--second); color: var(--white); }
    ::selection { background: var(--second); color: var(--white); }

    .yearpicker-container { z-index: 9999 !important; }

    .absolute-top-left { position: absolute; top: 0; left: 0; }
    .absolute-top-right { position: absolute; top: 0; right: 0; }
    .absolute-bottom-left { position: absolute; bottom: 0; left: 0; }
    .absolute-bottom-right { position: absolute; bottom: 0; right: 0; }

    .bg-none { background: none !important; }
    .bg-trans { background: transparent !important; }
    .bg-accent { background: var(--accent) !important; }
    .bg-second { background: var(--second) !important; }
    .bg-dark { background: var(--dark) !important; }
    .bg-light { background: var(--light) !important; }
    .bg-light2 { background: var(--light2) !important; }
    .bg-border { background: var(--border) !important; }
    .bg-text { background: var(--text) !important; }
    .bg-text2 { background: var(--text2) !important; }
    .bg-black { background: var(--black) !important; }
    .bg-white { background: var(--white) !important; }

    .bg-gradient-light { background: linear-gradient(0deg, #ebebeb, rgba(255, 255, 255, 1)); }
    .bg-gradient-second-2 { background: var(--gradient-second-2) !important; }
    .bg-gradient-second-3 { background: var(--gradient-second-3) !important; }

    ol { padding: 0; margin: 0; }
    ol li { list-style: decimal inside !important; }
    ul { padding: 0; margin: 0; }
    ul li { list-style: none; }
    .list-unstyled { padding-left: 0; list-style: none; }
    .list-inline { padding-left: 0; list-style: none; }
    .list-inline-item { display: inline-block; }
    .list-inline-item:not(:last-child) { margin-right: 0.938rem; }

    .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%; }

    .separator { border-top: 1px solid var(--light); }
    .v-separator { width: 1px; height: 1.8rem; background: var(--light); }
    .separator-dark { border-top: 1px solid var(--dark); }
    hr { border-bottom: 1px solid var(--light); border-top: 0 none; padding: 0; }

    .trans-4, .trans-4:hover { -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; }

    .text-shadow-xs { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

    .shadow-md { box-shadow: 0 0.25rem 0.5rem rgba(192, 189, 189, 0.25); }

    .wrap-not-found { text-align: center; }
    .wrap-not-found img { margin-bottom: 0.313rem; max-width: 160px; }

    .theiaStickySidebar:after { content: ""; display: table; clear: both; }

    @media (min-width: 768px) {
        .row {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -10px;
            margin-left: -10px;
        }

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

        .gutters-md > .col,
        .gutters-md > [class*="col-"] {
            padding-right: 15px;
            padding-left: 15px;
        }
    }

    .popup-close { transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease; }
    .toast.toast-hide { display: none; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
/* ------------------------------------ end basic ------------------------------------ */


/* ------------------------------------ general class ------------------------------------ */
    .content-progress { display: none; position: fixed; width: 100%; height: 100%; z-index: 1001; background: rgba(255, 255, 255, .58); cursor: pointer; transition-duration: 0.2s; }
    .top-scroll-bar { position: fixed; top: 0; width: 0px; height: 3px; z-index: 9999999; background: var(--accent); }

    .primary { transform: none; }
    #content { max-width: 100%; border: 0; word-wrap: break-word; transform: none; }

    @media (min-width: 1200px) {
        .container-2 { max-width: 1070px; }
    }

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

    .section-xl { padding-top: 6.25rem; padding-bottom: 6.25rem; }
    .section-lg { padding-top: 5rem; padding-bottom: 5rem; }
    .section-md { padding-top: 3.75rem; padding-bottom: 3.75rem; }
    .section-sm { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .section-xs { padding-top: 1.563rem; padding-bottom: 1.563rem; }
    .section-xxs { padding-top: 0.938rem; padding-bottom: 0.938rem; }

    @media (max-width: 1200px) {
        .section-xl { padding-top: 5.75rem; padding-bottom: 5.75rem; }
        .section-lg { padding-top: 4.75rem; padding-bottom: 4.75rem; }
        .section-md { padding-top: 3.5rem; padding-bottom: 3.5rem; }
        .section-sm { padding-top: 2.25rem; padding-bottom: 2.25rem; }
        .section-xs { padding-top: 1.35rem; padding-bottom: 1.35rem; }
        .section-xxs { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    }

    @media (max-width: 991px) {
        .section-xl { padding-top: 5rem; padding-bottom: 5rem; }
        .section-lg { padding-top: 4.25rem; padding-bottom: 4.25rem; }
        .section-md { padding-top: 3.10rem; padding-bottom: 3.10rem; }
        .section-sm { padding-top: 2.10rem; padding-bottom: 2.10rem; }
        .section-xs { padding-top: 1.25rem; padding-bottom: 1.25rem; }
        .section-xxs { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    }


    /*scrollable*/
    .scrollable {
        position: relative;
        display: flex; 
        flex-direction: column;
        flex-wrap: inherit;
        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: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .scrollable::-webkit-scrollbar-thumb { background: rgba(195, 195, 195, 0); border-radius: 2.5rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .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: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .scrollable:hover::-webkit-scrollbar-thumb { background: rgba(195, 195, 195, 0.5); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .scrollable::-webkit-scrollbar-thumb:horizontal:hover,
    .scrollable::-webkit-scrollbar-thumb:vertical:hover { background: rgba(195, 195, 195, 1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .h-scrollable { -ms-flex-direction: row; flex-direction: row; overflow-y: hidden !important; overflow-x: auto !important; }

    .visible { visibility: visible !important; }
    .invisible { visibility: hidden !important; }

    .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:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 20%; height: 20%; opacity: 0.2; visibility: visible; border-radius: 0.5rem; background: var(--light); z-index: 0; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-trigger:hover:before, .hv-trigger:focus:before { width: 100%; height: 100%; opacity: 1; visibility: visible; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-trigger * { position: relative; }
    
    .hv-shadow-sm { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow-sm:hover, .hv-shadow-sm:focus { box-shadow: var(--shadow-sm); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow:hover, .hv-shadow:focus { box-shadow: var(--shadow); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .hv-underline { display: block; position: relative; padding: 0; }
    .hv-underline:hover { text-decoration: none; }
    .hv-underline:before { content: ''; display: block; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; transition: width 0s ease, background 0.25s ease; }
    .hv-underline:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 1px;
        width: 0;
        background: var(--second);
        transition: width 0.25s ease;
    }
    .hv-underline:hover:before { width: 100%; background: var(--second); transition: width 0.25s ease; }
    .hv-underline:hover:after { width: 100%; background: transparent; transition: all 0s ease; }

    /* opacity */
    .opacity-0 { opacity: 0.1; }
    .opacity-1 { opacity: 0.1; }
    .opacity-2 { opacity: 0.2; }
    .opacity-3 { opacity: 0.3; }
    .opacity-4 { opacity: 0.4; }
    .opacity-5 { opacity: 0.5; }
    .opacity-6 { opacity: 0.6; }
    .opacity-7 { opacity: 0.7; }
    .opacity-8 { opacity: 0.8; }
    .opacity-9 { opacity: 0.9; }

    /* rounded */
    .rounded { border-radius: 0.25rem !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; }
/* ------------------------------------ end general class ------------------------------------ */  


/* ------------------------------------ typografi ------------------------------------ */
    a { color: var(--color); text-decoration: none; cursor: pointer; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    a:before { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    a:focus, a:hover, a:active, *:focus,
    a:focus h1, a:hover h1, a:active h1,
    a:focus h2, a:hover h2, a:active h2,
    a:focus h3, a:hover h3, a:active h3,
    a:focus h4, a:hover h4, a:active h4,
    a:focus h5, a:hover h5, a:active h5,
    a:focus h6, a:hover h6, a:active h6 { 
        color: var(--accent); outline: none; text-decoration: none; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);; 
    }
    
    a.hover:hover { text-decoration: underline; transition-duration: 0.2s; }
    a.hover-1 { text-decoration: none; background-image: linear-gradient(#999999, #999999); background-position: 1% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size cubic-bezier(0,.5,0,1) 0.3s; }
    a.hover-2:hover { text-decoration: none; background-size: 100% 2px; }
    a.hover-2 { text-decoration: none; background-image: linear-gradient(#f1f1f1, #f1f1f1); background-position: 1% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size cubic-bezier(0,.5,0,1) 0.3s; }
    a.hover-2:hover { text-decoration: none; background-size: 100% 50px; }
    a.hover-3:hover { margin-left: 3px; transition-duration: 0.2s; }
    a.hover-4:hover { padding-bottom: 3px; transition-duration: 0.2s; }

    .more-content span { display: none; }
    .more-link { position: relative; font-weight: bold; font-size: 1.063rem; line-height: 1.2; color: var(--accent); padding-right: 1.25rem; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
    .more-link .icon { position: absolute; top: 2px; margin-left: 0.625rem; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
    .more-link:hover .icon { margin-left: 0.938rem; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

    .link { font-weight: 600; color: var(--color); }
    .link:hover, .link:focus { color: var(--accent) !important; }

    .link-arrow { position: relative; line-height: 1.2; color: var(--accent); padding-right: 1.125rem; z-index: 4; }
    .link-arrow:before { content: '\e844'; font-family: 'feather'; position: absolute; top: 50%; transform: translateY(-40%); right: 0; font-size: 0.8rem; line-height: 1; color: var(--accent); }
    .link-arrow:hover:before { right: -0.25rem; }

    .link-arrow.style-2:before { opacity: 0; visibility: hidden; }
    .link-arrow.style-2:hover:before { opacity: 1; visibility: visible; }

    .back-link { position: relative; font-weight: 700; line-height: 1.2; color: var(--accent); padding-left: 1.125rem; z-index: 4; background: none; border: 0; }
    .back-link:before { content: '\e828'; font-family: 'feather'; position: absolute; top: 50%; transform: translateY(-50%); left: 0; line-height: 1; color: var(--accent); }

    h1, h2, h3, h4, h5, h6 { color: var(--dark); }

    .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-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; }

    .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; }

    .text-accent { color: var(--accent) !important; }
    .text-second { color: var(--second) !important; }
    .text-white { color: var(--white) !important; }
    .text-black { color: var(--black) !important; }
    .text-light { color: var(--light) !important; }
    .text-dark { color: var(--dark) !important; }
    .text-red { color: #FF0000 !important; }
    .text-text { color: var(--color) !important; }
    .text-text2 { color: var(--color2) !important; }
    .text-text3 { color: var(--color3) !important; }
    .text-note { font-weight: normal; font-size: 0.75rem; letter-spacing: 0.02rem; color: #ABAFB3; }

    .color-accent { color: var(--accent) !important; }
    .color-second { color: var(--second) !important; }
    .color-white { color: var(--white) !important; }
    .color-black { color: var(--black) !important; }
    .color-light { color: var(--light) !important; }
    .color-dark { color: var(--dark) !important; }
    .color-red { color: #FF0000 !important; }
    .color-text { color: var(--color) !important; }
    .color-text2 { color: var(--color2) !important; }
    .color-text3 { color: var(--color3) !important; }
    .color-note { font-weight: normal; font-size: 0.75rem; letter-spacing: 0.02rem; color: #ABAFB3; }

    .section-subheading { font-weight: 400; font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.25rem; color: var(--color2); margin-bottom: 0.5rem; }
    .section-heading-xxl { font-weight: 500; font-size: 3.125rem; line-height: 1.3; color: var(--color2); }
    .section-heading-xl { font-weight: 500; font-size: 2.8rem; line-height: 1.3; color: var(--color2); }
    .section-heading-lg { font-weight: 500; font-size: 2.375rem; line-height: 1.3; color: var(--color2); }
    .section-heading { font-weight: 500; font-size: 2rem; line-height: 1.3; color: var(--color2); }
    .section-heading-sm { font-weight: 500; font-size: 1.75rem; line-height: 1.3; color: var(--color2); }
    .section-heading-xs { font-weight: 500; font-size: 1.5rem; line-height: 1.3; color: var(--color2); }
    .section-description-xl { font-weight: 400; font-size: 1.375rem; line-height: 160%; color: var(--color3); }
    .section-description-lg { font-weight: 400; font-size: 1.25rem; line-height: 160%; color: var(--color3); }
    .section-description { font-weight: 400; font-size: 1.125rem; line-height: 160%; color: var(--color3); }
    .section-description-md { font-weight: 400; font-size: 1rem; line-height: 160%; color: var(--color3); }
    .section-description-sm { font-weight: 400; font-size: 0.875rem; line-height: 160%; color: var(--color3); }
    .section-description-xs { font-weight: 400; font-size: 0.75rem; line-height: 150%; color: var(--color3); }
    .section-description-xxs { font-weight: 400; font-size: 0.625rem; line-height: 150%; color: var(--color3); }

    @media (max-width: 1200px) {
        .section-heading-xxl { font-size: 2.7rem; }
        .section-heading-xl { font-size: 2.5rem; }
        .section-heading-lg { font-size: 2.2rem; }
        .section-heading { font-size: 1.75rem; }
        .section-heading-sm { font-size: 1.5rem; }
        .section-heading-xs { font-size: 1.375rem; }
        .section-description-xl { font-size: 1.25rem; }
        .section-description-lg { font-size: 1.125rem; }
        .section-description { font-size: 1.063rem; }
        .section-description-md { font-size: 0.938rem; }
        .section-description-sm { font-size: 0.813rem; }
        .section-description-xs { font-size: 0.688rem; }
        .section-description-xxs { font-size: 0.5rem; }
    }
    @media (max-width: 768px) {
        .section-heading-xxl { font-size: 2.5rem; }
        .section-heading-xl { font-size: 2.3rem; }
        .section-heading-lg { font-size: 2rem; }
        .section-heading { font-size: 1.625rem; }
        .section-heading-sm { font-size: 1.375rem; }
        .section-heading-xs { font-size: 1.313rem; }
    }
/* ------------------------------------ end typografi ------------------------------------ */


/* ------------------------------------ button ------------------------------------ */
    .btn {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        outline: 0;
        -webkit-box-shadow: none; 
        box-shadow: none;
        padding: 0.625rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        line-height: 1.2; 
        letter-spacing: 0.02rem;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .btn:hover .btn:focus, .btn.focus { -webkit-box-shadow: none; box-shadow: none; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .btn[disabled], .btn.disabled, .btn:disabled { opacity: 0.7; cursor: not-allowed !important; }
    
    /* .btn .icon { transform: translateY(-1px); margin-right: 0.25rem; } */
    .btn .icon svg path { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .btn .icon:hover svg path { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .btn-padd-xs { padding-top: 0.313rem; padding-bottom: 0.313rem; }
    .btn-padd-sm { padding-top: 0.45rem; padding-bottom: 0.45rem; }
    .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-shadow { box-shadow: 0 0.625rem 2.813rem rgba(0, 0, 0, 0.0986943); }

    .btn-trigger { position: relative; z-index: 1; text-align: center; }
    .btn-trigger:focus { box-shadow: none; }
    .btn-trigger:before { position: absolute; z-index: -1; height: 20px; width: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; content: ''; background-color: #F5F5F5; border-radius: 50%; opacity: 0; transition: all .3s; }
    .btn-trigger:hover:before, .btn-trigger:focus:before, .btn-trigger.active:not(.revarse):before { opacity: 1; height: 30px; width: 30px; }
    .btn-trigger .icon { color: var(--dark); font-size: 17px; width: 2.125rem; }

    .btn-accent { color: var(--white) !important; background: var(--accent); -webkit-box-shadow: none; box-shadow: none; }
    .btn-accent:hover, .btn-accent:focus { color: var(--accent) !important; background: transparent; border-color: var(--accent); -webkit-box-shadow: none; box-shadow: none; }
    .btn-accent.fix:hover, .btn-accent.fix:focus { color: var(--white) !important; background: #cf0000; border-color: #cf0000; -webkit-box-shadow: none; box-shadow: none; }

    .btn-accent-2 { color: var(--white) !important; background: var(--accent); border: 2px solid var(--white); border-radius: 1.25rem; -webkit-box-shadow: none; box-shadow: none; }
    .btn-accent-2:hover, .btn-accent-2:focus { color: var(--accent) !important; background: var(--white); -webkit-box-shadow: none; box-shadow: none; }

    .btn-accent-3 { color: var(--accent) !important; background: var(--accent3); -webkit-box-shadow: none; box-shadow: none; }
    .btn-accent-3:hover, .btn-accent-3:focus { color: var(--accent) !important; background: transparent; border-color: var(--accent); -webkit-box-shadow: none; box-shadow: none; }

    .btn-outline-accent { color: var(--accent) !important; background: transparent; border-color: var(--accent); -webkit-box-shadow: none; box-shadow: none; }
    .btn-outline-accent:hover, .btn-outline-accent:focus { color: var(--color-white) !important; background-color: var(--accent); -webkit-box-shadow: none; box-shadow: none; }
    .btn-outline-accent:hover svg path, .btn-outline-accent:focus svg path { fill: var(--color-white); }

    .btn-second { color: var(--white) !important; background: var(--second); -webkit-box-shadow: none; box-shadow: none; }
    .btn-second:hover, .btn-second:focus { color: var(--second) !important; background: transparent; border-color: var(--second); -webkit-box-shadow: none; box-shadow: none; }

    .btn-outline-second { color: var(--second); background: transparent; border-color: var(--second); -webkit-box-shadow: none; box-shadow: none; }
    .btn-outline-second:hover, .btn-outline-second:focus { color: var(--white) !important; background-color: var(--second) !important; -webkit-box-shadow: none; box-shadow: none; }

    .btn-light { color: var(--dark) !important; background: var(--light); -webkit-box-shadow: none; box-shadow: none; }
    .btn-light:hover, .btn-light:focus { color: var(--dark) !important; background: transparent; border-color: var(--light); -webkit-box-shadow: none; box-shadow: none; }

    .btn-yellow { color: var(--dark) !important; background: #f1f250; -webkit-box-shadow: none; box-shadow: none; }
    .btn-yellow:hover, .btn-yellow:focus { color: var(--dark) !important; background: #e2e346; border-color: var(--light); -webkit-box-shadow: none; box-shadow: none; }

    .btn-blue { color: var(--white) !important; background: var(--blue); -webkit-box-shadow: none; box-shadow: none; }
    .btn-blue:hover, .btn-light:focus { color: var(--dark) !important; background: transparent; border-color: var(--light); -webkit-box-shadow: none; box-shadow: none; }

    .btn-outline-light { color: var(--light) !important; background: transparent; border-color: var(--light); -webkit-box-shadow: none; box-shadow: none; }
    .btn-outline-light:hover, .btn-outline-light:focus { color: var(--dark) !important; background-color: var(--light); -webkit-box-shadow: none; box-shadow: none; }

    .btn-dark { color: var(--white); background: var(--dark); -webkit-box-shadow: none; box-shadow: none; }
    .btn-dark:hover, .btn-dark:focus { color: var(--dark); background: transparent; border-color: var(--dark); -webkit-box-shadow: none; box-shadow: none; }

    .btn-outline-dark { color: var(--dark); background: transparent; border-color: var(--dark); -webkit-box-shadow: none; box-shadow: none; }
    .btn-outline-dark:hover, .btn-outline-dark:focus { color: #ffffff; background-color: var(--dark); -webkit-box-shadow: none; box-shadow: none; }

    .btn-outline-crimson { color: var(--crimson); background: transparent; border-color: var(--crimson); }
    .btn-outline-crimson:hover, .btn-outline-crimson:focus { color: #ffffff; background-color: var(--crimson); }
    
    .btn-white { color: var(--dark) !important; background: var(--white); -webkit-box-shadow: none; box-shadow: none; }
    .btn-white:hover, .btn-white:focus { color: var(--white) !important; background: transparent; border-color: var(--white); -webkit-box-shadow: none; box-shadow: none; }

    .btn-white-2 { color: var(--dark) !important; background: var(--white); border-radius: 1.25rem; -webkit-box-shadow: none; box-shadow: none; }
    .btn-white-2:hover, .btn-white-2:focus { color: var(--dark) !important; background: var(--white); -webkit-box-shadow: none; box-shadow: none; }

    .btn-submit-form { color: var(--white) !important; background: #131045; }
    .btn-submit-form:hover, .btn-submit-form:focus { color: #131045 !important; background: transparent; border-color: #131045; }

    .btn-disabled { padding: 0.625rem 1.25rem; cursor: default; }
    .btn-disabled:hover, .btn-disabled:focus { color: var(--crimson) !important; background: transparent !important; border-color: var(--crimson) !important; }

    @media (max-width: 580px) {
        .btn { font-size: 0.875rem; }
    }
/* ------------------------------------ end button ------------------------------------ */


/* ------------------------------------ badge ------------------------------------ */
    .badge { padding: 0.25rem 0.7rem; border-radius: 0.5rem; vertical-align: middle; }
    .badge.badge-sm { padding: 0.18rem 0.5rem !important; }
    .badge.badge-md { padding: 0.35rem 0.75rem; }

    .badge-accent { background: var(--accent); color: var(--white); }
    .badge-primary { background: #13208a; color: var(--white); }
    .badge-second { background: var(--second); 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-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: var(--light); color: var(--color); }
    .badge-white { background: var(--white); color: var(--accent) !important; }
    .badge-salmon { background: #FF586F; font-weight: 300; color: var(--white); letter-spacing: 0.02rem; padding: 0.25rem 0.625rem; }

    .badge-dot { position: relative; 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(-50%); display: inline-block; height: 6px; width: 6px; margin-top: -1px; border-radius: 50%; background: currentColor; }

    .badge-dot.badge-accent { color: var(--accent); }
    .badge-dot.badge-primary { color: #13208a; }
    .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-dark { color: #1c2b46; }
    .badge-dot.badge-gray { color: #8091a7; }
    .badge-dot.badge-light { color: #b7c2d0; }
    .badge-dot.badge-lighter { color: #e5e9f2; }
    .badge-dot.badge-accent { color: var(--accent); }


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

    .badge-style-1.badge-accent { background: var(--accent2); color: var(--accent); }
    .badge-style-1.badge-primary { background: rgba(19, 32, 138, 0.1); color: #13208a; }
    .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, 0.1); color: #f4bd0e; }
    .badge-style-1.badge-danger { background: rgba(232, 83, 71, 0.1); color: #e85347; }
    .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-accent { background: var(--accent3); color: var(--accent); border-color: var(--accent2); }
    .badge-style-2.badge-primary { background: rgba(19, 32, 138, 0.1); color: #13208a; border-color: #13208a; }
    .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 ------------------------------------ */


/* ------------------------------------ card ------------------------------------ */
    .card { position: relative; background: var(--background); border: 1px solid transparent; border-radius: 0.5rem; }
    .card .card-header { background: transparent; border: 0; padding: 0.938rem; padding-bottom: 0; }
    .card .card-header .title { font-weight: bold; font-size: 1.25rem; line-height: 1.2; margin-bottom: 0; }
    .card .card-body.padd-md { padding: 1.875rem; }

    .card.card-2 { border-color: var(--border); }

    .card-shadow { box-shadow: 0 0 6.25rem rgba(0, 0, 0, 0.0986943); }
    .card-bordered { border: 1px solid var(--light) !important; }
    .card-bordered.dashed { border-style: dashed; }

    .card-widget { border: 0; border-radius: 0.5rem; background: var(--white); }
    .card-widget .card-header {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center; 
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        background: transparent;
        border-bottom: 1px solid var(--border);
    }
    .card-widget .card-header .title-header { font-weight: bold; margin-bottom: 0; }

    .card-widget .card-body { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 1.25rem; }
    .card-widget .card-body > * { flex-grow: 1; width: 100%; }

    @media (max-width: 768px) {
        .card-widget .card-header { display: block; }
    }


    /*card widget scroll*/
    .card-widget.card-widget-scroll .card-body { height: 500px/*29.375rem*/; }

    @media (max-width: 1200px) {
        .card-widget .card-body { padding: 0.938rem; }

        .card-widget.card-widget-scroll .card-body { height: 26.875rem; }
    }

    .card-widget-2 { position: relative; height: 100%; border: 1px solid var(--light); }
    .card-widget-2 .card-body { display: flex; align-items: center; padding: 0.625rem; }
    .card-widget-2 .card-body .thumbnails { margin-right: 0.625rem; position: relative; flex-basis: 0 0 3.125rem; width: 3.125rem; height: 3.125rem; display: flex; align-items: center; justify-content: center; }
    .card-widget-2 .card-body .thumbnails .icon { font-size: 24px; line-height: 1; color: #6CCCCB; }
    .card-widget-2 .card-body .thumbnails:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(108, 204, 203, 0.1); border-radius: 50%; }
    .card-widget-2 .card-body .content { flex-basis: 60%; }
    .card-widget-2 .card-body .content .title { font-weight: 600; line-height: 1.1; margin-bottom: 0.25rem; }
    .card-widget-2 .card-body .content .text { font-size: 0.813rem; color: var(--text2); margin-bottom: 0; }
    .card-widget-2 .card-body .content .text b { font-size: 0.938rem; color: var(--dark); }

    @media (max-width: 768px) {
        .card-widget-2 .card-body .thumbnails { margin-right: 0.5rem; flex-basis: 0 0 2.813rem; width: 2.813rem; height: 2.813rem; }
    }


    .card-widget-3 { position: relative; height: 100%; border: 1px solid var(--border); }
    .card-widget-3 .card-body { padding: 0.625rem; text-align: center; }
    .card-widget-3 .card-body .value { font-weight: 800; font-size: 1.45rem; color: var(--color); margin-bottom: 0.313rem; }
    .card-widget-3 .card-body .title { font-weight: 600; font-size: 0.938rem; color: var(--second); margin-bottom: 0; }
    .card-widget-3 .card-body .title span { font-weight: normal; }


    .card-product { margin-bottom: 1.563rem; }
    .card-product:hover { border-color: transparent; box-shadow: 0 0.25rem 4.375rem rgba(0, 0, 0, 0.1); z-index: 2; }
    .card-product .card-header .img-product { display: block; width: 100%; height: 145px; border-radius: 0.375rem; }
    .card-product .card-header .img-product img { border-radius: 0.375rem; }
    .card-product .card-body .card-title { font-weight: bold; color: var(--dark); margin-bottom: 0.625rem; }
    .card-product .card-body .card-description { line-height: 1.05; }
    .card-product .card-body .wrap-price { 
        display: -ms-flexbox; 
        display: flex; 
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 0.813rem;
    }
    .card-product .card-body .wrap-price .price { font-weight: bold; font-size: 1.188rem; line-height: 1; margin-bottom: 0; }
    .card-product .card-body .wrap-price .btn { padding-left: 1.125rem; padding-right: 1.125rem; }


    .card-confirmation { padding: 1.875rem 2.5rem; text-align: center; }
    .card-confirmation .icon { margin-bottom: 1.875rem; }
    .card-confirmation .icon i { font-size: 50px; }

    .checkmark {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        display: block;
        stroke-width: 2;
        stroke: #fff;
        stroke-miterlimit: 10;
        margin: auto;
        box-shadow: inset 0px 0px 0px #7ac142;
        animation: fill_checkmark .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
        -webkit-box-shadow: 0 0.313rem 1.875rem -0.625rem rgba(0, 0, 0, 0.1);
        box-shadow: 0 0.313rem 1.875rem -0.625rem rgba(0, 0, 0, 0.1);
    }
    .checkmark_circle {
        stroke-dasharray: 166;
        stroke-dashoffset: 166;
        stroke-width: 2;
        stroke-miterlimit: 10;
        stroke: #7ac142;
        fill: none;
        animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
    }
    .checkmark_check {
        transform-origin: 50% 50%;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
    }

    .dismiss {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        display: block;
        margin: auto;
        box-shadow: inset 0px 0px 0px #D06079;
        animation: fill_dismiss .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
        -webkit-box-shadow: 0 0.313rem 1.875rem -0.625rem rgba(0, 0, 0, 0.1);
        box-shadow: 0 0.313rem 1.875rem -0.625rem rgba(0, 0, 0, 0.1);
    }
    .dismiss .path { stroke-dasharray: 1000; stroke-dashoffset: 0; stroke: #D06079; }
    .dismiss .path.circle {
        -webkit-animation: dash 0.9s ease-in-out;
        animation: dash 0.9s ease-in-out;
    }
    .dismiss .path.line {
        stroke: #fff;
        stroke-dashoffset: 1000;
        -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
        animation: dash 0.9s 0.35s ease-in-out forwards;
    }
/* ------------------------------------ end card ------------------------------------ */


/* ------------------------------------ form style ------------------------------------ */
    input::placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--color3); opacity: 0.4; z-index: 5; }
    input::-webkit-input-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--color3); opacity: 0.4; z-index: 5; }
    input::-moz-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--color3); opacity: 0.4; z-index: 5; }
    input:-ms-input-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--color3); opacity: 0.4; z-index: 5; }
    input:-moz-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--color3); opacity: 0.4; z-index: 5; }

    .form-style .form-group { width: 100%; position: relative; margin-bottom: 1rem; }

    .form-style.with-bg-light .form-control, 
    .form-style.with-bg-light .select2-selection--single { background: var(--light); }

    .control-label { font-weight: 600; font-size: 0.875rem; line-height: 1.2; color: var(--color2); margin-bottom: 0.25rem; }
    .form-control { 
        position: relative !important;
        width: 100%;
        height: calc(1.875rem + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        background: var(--background); 
        border-radius: 0.5rem;
        border: 1px solid var(--border2) !important;
        font-size: 0.875rem; 
        line-height: 1.2;
        color: var(--color); 
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .form-control.form-control-sm { height: calc(1.375rem + 0.75rem + 2px); padding: 0.25rem 0.75rem; }
    
    .form-control::placeholder { font-weight: normal; font-size: 0.813rem; letter-spacing: 0.02rem; color: var(--color3); opacity: 0.4; }
    .form-control::-webkit-input-placeholder { font-weight: normal; font-size: 0.813rem; letter-spacing: 0.02rem; color: var(--color3); opacity: 0.4; }
    .form-control::-moz-placeholder { font-weight: normal; font-size: 0.813rem; letter-spacing: 0.02rem; color: var(--color3); opacity: 0.4; }
    .form-control:-ms-input-placeholder { font-weight: normal; font-size: 0.813rem; letter-spacing: 0.02rem; color: var(--color3); opacity: 0.4; }
    .form-control:-moz-placeholder { font-weight: normal; font-size: 0.813rem; letter-spacing: 0.02rem; color: var(--color3); opacity: 0.4; }
    .form-control:disabled, .form-control[readonly] { background-color: var(--light); opacity: 1; }
    .form-control:focus,
    .select2-selection--single:focus { box-shadow: none; background: var(--background) !important; border-color: var(--color3) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    textarea.form-control { height: inherit !important; padding: 0.75rem 0.75rem; }

    .form-style.form-horizontal .control-label { vertical-align: middle; align-self: center; }
    .form-style.form-horizontal .form-group { margin-bottom: 20px; }

    @media (max-width: 1200px) {
        .form-style.form-horizontal .control-label { margin-bottom: 0; }
    }
    @media (max-width: 992px) {
        .form-style.form-horizontal .control-label { margin-bottom: 3px; }
    }

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

    /* pin code */
    .pin-code { padding: 0; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0.625rem; }
    .pin-code input { text-align: center; width: 3.125rem; height: 3.125rem; font-weight: 600; font-size: 1.875rem; line-height: 1; }
    .pin-code input:focus { box-shadow: var(--shadow-sm) !important; }
    .pin-code input::-webkit-outer-spin-button, .pin-code input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .form-style .form-group input[type=checkbox] { appearance: checkbox; -moz-appearance: checkbox; -webkit-appearance: checkbox; -o-appearance: checkbox; -ms-appearance: checkbox; }
    .form-style .form-group input[type=radio] { appearance: radio; -moz-appearance: radio; -webkit-appearance: radio; -o-appearance: radio; -ms-appearance: radio; }
    .form-style .form-group input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

    .form-style .form-group .group-inner { position: relative; }
    .form-style .form-group .group-inner .group-inner-icon { position: absolute; top: 50%; transform: translateY(-50%); width: 1.25rem; z-index: 2; }
    .form-style .form-group .group-inner .group-inner-icon i { font-size: 1rem; color: var(--color2); }
    .form-style .form-group .group-inner .group-inner-icon svg { width: 1.25rem; }
    
    .form-style .form-group .group-inner.s-icon .group-inner-icon { left: 0.75rem; }
    .form-style .form-group .group-inner.s-icon .form-control { padding-left: calc(0.95rem + 1.25rem); }

    .form-style .form-group .group-inner.e-icon .group-inner-icon { right: 0.75rem; }
    .form-style .form-group .group-inner.e-icon .form-control { padding-right: calc(0.95rem + 1.25rem); }
    
    .form-style .form-group .group-inner.se-icon .group-inner-icon { left: 0.75rem; }
    .form-style .form-group .group-inner.se-icon .group-inner-icon:not(:first-child) { left: inherit; right: 0.75rem; }
    .form-style .form-group .group-inner.se-icon .form-control { padding-left: calc(0.95rem + 1.25rem); padding-right: calc(0.95rem + 1.25rem); }

    .form-style .form-group .group-inner.input-telp .group-inner-icon { left: 0.75rem; width: 3.2rem; display: flex; align-items: center; justify-content: flex-start; gap: 0.25rem; }
    .form-style .form-group .group-inner.input-telp .group-inner-icon img.flag-ind { width: 1.125rem; border-radius: 0.2rem; }
    .form-style .form-group .group-inner.input-telp .group-inner-icon span { font-size: 0.875rem; line-height: 1; }
    .form-style .form-group .group-inner.input-telp .form-control { padding-left: calc(0.95rem + 3.2rem); }

    /*input group left icon*/
    .form-style .form-group .input-group { position: relative; width: 100%; }
    .form-style .form-group .input-group .input-group-addon { position: absolute; top: 28%; left: 0.75rem; z-index: 5; }
    .form-style .form-group .input-group .input-group-addon img.flag-ind { width: auto; height: 1.25rem; margin-top: -0.125rem; border-radius: 2px; }
    .form-style .form-group .input-group .input-group-addon span { font-weight: normal; font-size: 0.875rem; line-height: 1; }
    .form-style .form-group .input-group .form-control,
    .form-style .form-group .input-group .select2-selection--single { padding-left: 4.3rem; border-radius: 0.313rem; }
    .form-style .form-group .input-group.input-telp .form-control { padding-left: 65px; border-radius: 0.313rem; }

    /*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); }

    .search-autocomplete { background: var(--white); position: absolute; top: 40px; left: 0; width: 100%; max-height: 200px; padding: 0.625rem 0.925rem; border-radius: 0.313rem; opacity: 0; visibility: hidden; z-index: 5; }
    .search-autocomplete.open { opacity: 1; visibility: visible; }
    .search-autocomplete ul { position: relative; }
    .search-autocomplete ul li { padding: 0.25rem 0; }
    .search-autocomplete ul li a { font-weight: 500; font-size: 0.875rem; display: block; }

    /*radio button*/
    .custom-radio { align-items: center; min-height: calc(1rem + 0.75rem + 2px); margin-left: 1.25rem; margin-bottom: 0.313rem; }
    .custom-radio.form-check-inline { margin-right: 2rem; }
    .custom-radio input { position: absolute; opacity: 0; visibility: hidden; }
    .custom-radio input + label { position: relative; padding: 0; font-weight: 400; cursor: pointer; }
    .custom-radio input + label:before, .custom-radio input + label:after { content: ''; position: absolute; border-radius: 50%; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .custom-radio input + label:before { top: 0.18rem; left: -1.45rem; height: 1.13rem; width: 1.13rem; background: var(--background); border: 1px solid var(--border2); }
    .custom-radio input + label:after { top: 0.306rem; left: -1.32rem; background: var(--accent); border-color: var(--accent); width: 0.875rem; height: 0.875rem; opacity: 0; transform: scale(2); }
    .custom-radio input:checked + label:after { opacity: 1; transform: scale(1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .custom-radio.form-check-inline.has-error label { color: var(--text) !important; }

    /* radio polling */
    .radio-polling .custom-radio:not(:first-child) { margin-top: 0.35rem; }
    .radio-polling .custom-radio input { display: none !important; position: absolute; width: 0; height: 0; left: -5%; opacity: 1; visibility: visible; }
    .radio-polling .custom-radio input + label { 
        position: relative; 
        width: 100%;
        height: calc(1.875em + 0.75rem + 2px);
        padding: 0.375rem 2.2rem; 
        transform: translateX(-23px);
        cursor: pointer; 
        background: var(--white); 
        border-radius: 0.313rem; 
        border: 1px solid var(--border); 
        font-weight: 400; 
        font-size: 0.95rem; 
        line-height: 1.9; 
        letter-spacing: 0.02rem; 
        -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;
    }
    .radio-polling .custom-radio input + label:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0.5rem;
        margin: auto;
        width: 1.13rem;
        height: 1.13rem;
        border-radius: 50%;
        background: var(--white); 
        border: 1px solid var(--border);
        -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;
    }
    .radio-polling .custom-radio input + label:after {
        content: '\e83f';
        font-family: 'feather';
        font-size: 0.9rem;
        line-height: 1.2;
        color: var(--white);
        position: absolute;
        top: 0.02rem;
        bottom: 0;
        left: 0.55rem;
        margin: auto;
        padding-left: 0.05rem;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: var(--accent);
        border-color: var(--accent);
        opacity: 0;
        transform: scale(2);
        -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;
    }
    .radio-polling .custom-radio input:checked + label:after { opacity: 1; transform: scale(1); -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

    .radio-polling .custom-radio input + label:hover { background: rgba(230, 230, 230, 0.7); -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
    .radio-polling .custom-radio input + label:hover:before { background: var(--light); color: var(--light); -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

    .radio-polling .custom-radio input:checked + label:before { background: lime !important; }
    

    .custom-radio.custome-radio-icon .custom-control-input { opacity: 0; position: absolute; display: inline-block; }
    .custom-radio.custome-radio-icon .custom-control-label { position: relative; vertical-align: middle; display: inline-block; }
    .custom-radio.custome-radio-icon .custom-control-input + .custom-control-label:before {
        content: '';
        border: 0;
        background: #DEE0E2;
        display: inline-block;
        border-radius: 8px !important;
        width: 21px;
        height: 21px;
        margin-top: -5px;
        margin-left: -2px;
        margin-right: 13px;
        text-align: center;
    }
    .custom-radio.custome-radio-icon .custom-control-input:checked + .custom-control-label:before { content: "\e83f"; font-family: 'feather' !important; font-size: 1rem; line-height: 1.4; background: #70721F !important; color: var(--white); }
    .custom-radio.custome-radio-icon .custom-control-input:checked ~ .custom-control-label::after { background: none; }


    /* radio style */
    .radio-style { position: relative; width: 100%; height: 100%; }
    .radio-style .radio-tile { position: relative; text-align: center; width: 100%; height: 100%; border-radius: 0.5rem; background: var(--background); border: 1px solid var(--border); padding: 0.625rem; }
    .radio-style .radio-tile:after { 
        font-family: 'feather'; 
        content: '\e83f'; 
        position: absolute; 
        top: 0.625rem; 
        right: 0.625rem; 
        width: 1.875rem; 
        height: 1.875rem; 
        border-radius: 50%; 
        background: var(--accent); 
        font-size: 1.25rem; 
        line-height: 1;
        color: var(--color-white); 
        display: flex; 
        align-items: center; 
        justify-content: center;
        z-index: 9;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .radio-style .radio-tile .radio-image { object-fit: contain; margin: auto; width: 100%; border-radius: 0.5rem; margin-bottom: 0.625rem; }
    .radio-style .radio-tile .radio-label { font-weight: 600; font-size: 0.875rem; line-height: 1.3; margin-bottom: 0.625rem; }
    .radio-style .radio-button { z-index: 2; opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; cursor: pointer; }
    .radio-style .radio-button:checked + .radio-tile { background: rgba(255, 0, 0, 0.05); border: 1px solid var(--accent); box-shadow: 0 0.25rem 1.875rem 0 rgba(0, 0, 0, 0.1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .radio-style .radio-button:checked + .radio-tile:after { opacity: 1; visibility: visible; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .radio-style .radio-style-font { font-size: 1.75rem; }

    .radio-style.radio-style-2 .radio-tile { text-align: left; }
    .radio-style.radio-style-2 .radio-tile:before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; border-radius: 50%; background: none; border: 2px solid var(--border); }
    .radio-style.radio-style-2 .radio-tile:after { font-size: 0.875rem; right: inherit; top: 50%; transform: translateY(-50%) scale(0.95); width: 1.25rem; height: 1.25rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .radio-style.radio-style-2 .radio-tile .radio-label { padding-left: calc(1.25rem + 1rem); margin-bottom: 0; }
    .radio-style.radio-style-2 .radio-button:checked + .radio-tile:after { transform: translateY(-50%) scale(1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .radio-harga-paket .radio-tile { padding: 0.825rem; }
    .radio-harga-paket .radio-tile:after { top: 0.313rem; right: 0.313rem; width: 1.25rem; height: 1.25rem; font-size: 1rem; }
    .radio-harga-paket .radio-tile .radio-price { font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--dark); margin-bottom: 0; }
    .radio-harga-paket .radio-button:checked + .radio-tile { background: var(--second); border: 1px solid var(--second); }
    .radio-harga-paket .radio-button:checked + .radio-tile p { color: var(--white); }
    .radio-harga-paket .radio-button:checked + .radio-tile p span.text-muted { color: var(--white) !important; }

    @media (max-width: 1200px) {
        .radio-harga-paket .radio-tile .radio-price { font-size: 1.125rem; }
    }


    /* radio topup */
    .radio-topup .radio-tile { padding: 1.875rem; }
    .radio-topup .radio-tile:before { width: 1.563rem; height: 1.563rem; font-size: 1.125rem; }
    .radio-topup .radio-background { height: auto; margin-bottom: 0.925rem; }
    .radio-topup .radio-background .icon { font-size: 2.5rem; }


    /* custome checkbox */
    .custom-checkbox { align-items: center; min-height: auto; margin-bottom: 0.313rem; }
    .custom-checkbox.form-check-inline { margin-right: 2rem; }
    .custom-checkbox input { position: absolute; opacity: 0; visibility: hidden; }
    .custom-checkbox input + label { position: relative; padding: 0; font-weight: 400; font-size: 0.875rem; cursor: pointer; }
    .custom-checkbox input + label:before, .custom-checkbox input + label:after { content: ''; position: absolute; top: 0.1rem; left: -1.45rem; height: 1.13rem; width: 1.13rem; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .custom-checkbox input + label:before { background: var(--background); border: 1px solid var(--border2); }
    .custom-checkbox input + label:after { content: '\e83f'; font-family: 'feather'; color: var(--color-white); background: var(--accent); border-color: var(--accent); box-shadow: var(--shadow-accent); opacity: 0; transform: scale(2); }
    .custom-checkbox input:checked + label:after { opacity: 1; transform: scale(1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    #wrap-saldo .custom-control-label-icon { display: inline-block; width: inherit; width: 30px; height: 30px; }

    .checkbox-custome input[type="checkbox"] {
        position: relative;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 0.313rem;
        color: black;
        border: 1px solid #f0f0f0;
        background: #f0f0f0;
        appearance: none;
        outline: 0;
        cursor: pointer;
        transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        transition-duration: 250ms;
        -webkit-transition-duration: 250ms;
        transition-duration: 250ms;
    }
    .checkbox-custome input[type="checkbox"]:before {
        position: absolute;
        content: '';
        display: block;
        top: 1px;
        left: 5px;
        width: 7px;
        height: 11px;
        border-style: solid;
        border-color: var(--white);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        transition-duration: 250ms;
        -webkit-transition-duration: 250ms;
        transition-duration: 250ms;

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


    /* datepicker */
    .datepicker.dropdown-menu {
        font-family: var(--font1);
        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); }


    /* select2 custome */
    .select2-container.select2-container--open { z-index: 2060; }
    .select2-container { width: 100% !important; }
    .select2-container .select2-selection--single {
        user-select: none;
        -webkit-user-select: none;
        position: relative;
        width: 100%;
        height: calc(1.875rem + 0.75rem + 2px) !important;
        padding: 0.313rem 0.75rem !important;
        background: var(--background) !important; 
        border-radius: 0.5rem !important;
        border: 1px solid var(--border2) !important;
        font-size: 0.875rem !important;
        line-height: 1.2 !important;
        color: var(--color) !important; 
    }
    .select2-container .select2-selection__rendered { padding-left: 0 !important; font-size: 0.875rem !important; line-height: 2rem !important; color: var(--color) !important; }
    .select2-dropdown { background: var(--background) !important; border: 1px solid var(--border) !important; border-radius: 0.313rem !important; -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--default .select2-selection--single .select2-selection__placeholder { font-weight: normal; font-size: 0.813rem; letter-spacing: 0.02rem; color: var(--dark); opacity: 0.4; }

    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; right: 0.75rem !important; }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: var(--color2) transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        margin-left: -4px;
        margin-top: -2px;
        height: 0;
        width: 0;
    }

    .select2-search--dropdown { padding: 0.375rem 0.75rem !important; }
    .select2-container .select2-search--dropdown .select2-search__field { color: var(--color) !important; border: 1px solid var(--border2) !important; border-radius: 0.5rem !important; padding: 0.45rem 0.75rem !important; }
    .select2-container .select2-results__option { padding: 0.375rem 0.75rem !important; -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 { background-color: var(--light) !important; }
    .select2-container .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--second) !important; color: var(--color-white) !important; -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; }


    /* summernote */
    .note-editor.card { border: 1px solid var(--border2) !important; border-radius: 0.313rem; }
    .note-editor .card-header { background: none; padding: 0.375rem 0.75rem; }
    .note-btn-group .note-btn { border-color: transparent; background: var(--white); font-weight: normal; font-size: 0.875rem; color: var(--dark); outline: 0; -webkit-box-shadow: none; box-shadow: none; }
    .note-btn-group .note-btn:hover, .note-btn-group .note-btn:focus { color: var(--accent); }


    /*tags input*/
    div.tagsinput { border: 1px solid var(--border2); border-radius: 0.5rem; padding: 0.75rem !important; }
    div.tagsinput span.tag {
        font-family: var(--font1) !important;
        font-weight: 500 !important;
        font-size: 0.875rem !important;
        border: 1px solid transparent !important;
        border-radius: 0.45rem !important;
        -moz-border-radius: 0.45rem !important;
        -webkit-border-radius: 0.45rem !important;
        background: #D2E9CC !important;
        color: #1E4315 !important;
    }
    div.tagsinput span.tag a { font-weight: normal; color: #1E4315 !important; text-decoration: none; font-size: 0.75rem !important; line-height: 1 !important; transform: translateY(-2px) !important; }
    div.tagsinput span.tag a:hover { color: var(--white); }
    div.tagsinput input { font-family: var(--font1); 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; }


    /* date range form */
    .daterange-form { position: relative; width: 19.538rem; background: var(--background); }
    .daterange-form label { width: 100%; margin-bottom: 0; }
    .daterange-form input { 
        overflow: hidden; 
        text-overflow: ellipsis; 
        white-space: nowrap;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border: none;
        border-radius: 0.313rem;
        display: inline-block;
        width: 100%;
        padding: 0.625rem 0 0.625rem 25px;
        margin: 0;
        background: transparent !important;
        border: 1px solid var(--border) !important;
        font-weight: normal;
        font-size: 0.875rem;
        color: var(--text);
    }
    .daterange-form input:focus { background: transparent !important; }
    .daterange-form .form-icon { position: absolute; top: 50%; left: 0.313rem; transform: translateY(-50%); font-size: 1rem; color: var(--border); opacity: 1; }
    .daterange-form .submit-switch { position: absolute; right: 0.175rem; top: 50%; transform: translateY(-50%); }
    .daterange-form .submit-switch .btn { font-size: 0.938rem; line-height: 1; color: var(--white); background: var(--second); border: 0; border-radius: 0.313rem; }
    .daterange-form .submit-switch .btn:focus, .daterange-form .submit-switch .btn:hover { outline: none; box-shadow: none; background: rgba(44, 54, 141, 0.8); }

    @media (max-width: 580px) {
        .daterange-form { width: 15.938rem; }
        .daterange-form input { padding: 0.625rem 0 0.625rem 0.313rem; font-size: 0.75rem; }
        .daterange-form .form-icon { display: none; }
        .daterange-form .submit-switch .btn { font-size: 0.75rem; padding: 0.45rem 0.313rem; }
    }


    /* date range */
    .daterangepicker.dropdown-menu { border-radius: 0.5rem; border: 1px solid var(--light); box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.015555); padding: 0.625rem; }

    .daterangepicker .daterangepicker_input svg { position: absolute; top: 0.625rem; left: 0.5rem; }
    .daterangepicker .daterangepicker_input svg path { fill: var(--border); }
    .daterangepicker .daterangepicker_input input {
        border: 1px solid var(--light) !important;
        border-radius: 0.313rem;
        color: var(--text);
        height: 35px;
        line-height: 35px;
        display: block;
        vertical-align: middle;
        margin: 0 0 5px 0;
        padding: 0 6px 0 28px;
        width: 100%; 
    }
    .daterangepicker .daterangepicker_input .input-mini.active { border: 1px solid var(--text2) !important; }

    .daterangepicker .calendar.left { padding-right: 0 !important; /*border: 1px solid red;*/ }
    .daterangepicker .calendar.right { /*border: 1px solid yellow; */}

    .ranges { font-size: 11px; float: none; margin: 4px; text-align: left; }
    .ranges .range_inputs .applyBtn { border: 0; background: var(--accent); color: var(--white); border-radius: 0.313rem; padding: 0.313rem 0.625rem; margin-right: 0.313rem; }
    .ranges .range_inputs .cancelBtn { border: 0; background: var(--light); color: var(--text); border-radius: 0.313rem; padding: 0.313rem 0.625rem; }

    .daterangepicker .calendar-table { border: 0; padding: 0.313rem; border-radius: 0.5rem; background-color: none; }
    .daterangepicker .calendar-table table { width: 100%; margin: 0; }

    .daterangepicker td, .daterangepicker th {
        text-align: center;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        border: 1px solid transparent;
        white-space: nowrap;
        cursor: pointer; 
    }
    .daterangepicker td.week, .daterangepicker th.week { font-size: 80%; color: #ccc; }
    .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
        background-color: #fff;
        border-color: transparent;
        color: #999; 
    }
    .daterangepicker td.in-range { background-color: rgba(44, 54, 141, 0.1); border-color: transparent; color: var(--dark); border-radius: 0; }
    .daterangepicker td.start-date { border-radius: 0.313rem; }
    .daterangepicker td.end-date { border-radius: 0.313rem; }
    .daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--second); border-color: transparent; color: var(--white); }
    .daterangepicker th.month { width: auto; }


    /* switch style */
    .switch-style { position: relative; display: inline-block; }
    .switch-input { display: none; }
    .switch-label {
        position: relative;
        display: block;
        width: 45px;
        height: 22px;
        text-indent: -150%;
        clip: rect(0 0 0 0);
        color: transparent;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .switch-label:before, .switch-label:after { content: ''; display: block; position: absolute; cursor: pointer; }
    .switch-label:before { width: 100%; height: 100%; background-color: var(--border); border-radius: 9999em; transition: background-color 0.25s ease; }
    .switch-label:after { top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--white); box-shadow: 0 0 2px rgba(0, 0, 0, 0.45); transition: left 0.25s ease; }
    .switch-input:checked + .switch-label:before { background-color: var(--accent); }
    .switch-input:checked + .switch-label:after { left: 25px; }


    /* form filter */
    .form-filter { position: relative; max-width: 50%; }
    .form-filter .inner { display: flex; align-items: stretch; justify-content: flex-start; gap: 0.625rem; }
    .form-filter .form-group { margin-bottom: 0; }
    .form-filter .form-group.form-search { width: calc(100% - 200px); }
    .form-filter .form-group.form-search .form-control { height: 3.125rem; border-radius: 0.625rem; overflow: hidden; }
    .form-filter .form-group.form-search .group-inner .group-inner-icon i { color: var(--color4); opacity: 0.7; }
    .form-filter .form-group.form-action { width: 200px; margin: 0; }
    .form-filter .form-group.form-action .btn-submit { width: 100%; height: 3.125rem; font-weight: 600; color: var(--color); }

    @media (max-width: 1200px) {
        .form-filter { max-width: 55%; }
    }
    @media (max-width: 992px) {
        .form-filter { max-width: 100%; }
    }
    @media (max-width: 768px) {
        .form-filter .inner { flex-direction: column; }
        .form-filter .form-group.form-search { width: 100%; }
        .form-filter .form-group.form-action { width: 100%; }
        .form-filter .form-group.form-action .btn-submit { height: auto; }
    }


    /* validate */
    .has-error { color: var(--danger) !important; clear: both; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
    .has-error em, em.has-error { color: var(--danger) !important; font-size: 0.725rem !important; }
    .has-error > input { border-color: var(--danger) !important; color: var(--color) !important; }
    .has-error > select { border: 1px solid var(--accent) !important; }
    .has-error > textarea { border: 1px solid var(--accent) !important; }
    input.has-error { border: 1px solid var(--danger) !important; color: var(--danger) !important; }
    textarea.has-error { border: 1px solid var(--danger) !important; color: var(--danger) !important; }
    select.has-error { border: 1px solid var(--danger) !important; color: var(--danger) !important; }
    .input-custom-area.has-error { border: 1px solid var(--danger) !important; }
    .custom-checkbox.has-error > .custom-control-label { color: var(--danger) !important; }
    .custom-checkbox.has-error > .custom-control-label::before { border-color: var(--danger) !important; }
    .has-error > .select2-container .select2-selection--single { border: 1px solid var(--danger) !important; -webkit-transition: 0.4s; transition: 0.4s; }
    .has-error .custom-control-label { border: 1px solid var(--danger); }
    .has-error .form-check-label {  color: var(--danger) !important;  }
/* ------------------------------------ end form style ------------------------------------ */


/* ------------------------------------ table style ------------------------------------ */
    .table-style { width: 100%; font-size: 0.875rem; letter-spacing: 0.02rem; line-height: 1.2; color: var(--color); }
    .table-style tr { vertical-align: middle; }
    .table-style tr th { font-weight: 600; border: 0; padding: 0.75rem 0.313rem; border-bottom: 1px solid; }
    .table-style > :not(:last-child) > :last-child > * { border-bottom-color: var(--border2); }
    .table-style tr:first-child td { border-top: 0; }
    .table-style tr td { font-weight: normal; color: var(--text2); padding: 0.75rem 0.313rem; border-bottom: 1px solid var(--border); }
    .table-style .dropdown .dropdown-toggle { width: 1.875rem; height: 1.875rem; border-radius: 0.25rem; display: flex; align-items: center; justify-content: center; }

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

    .table-style.table-padd-lg thead tr th { padding: 0.75rem 0.313rem; }
    .table-style.table-padd-lg tbody tr td { padding: 0.75rem 0.313rem; }

    .table-style.border-none tr th, .table-style.border-none tr td { border-bottom: 0 solid transparent !important; }

    div.dataTables_wrapper div.dataTables_info { font-size: 0.813rem; color: var(--text2); }
    div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin: 2px 0; white-space: nowrap; justify-content: flex-end; }

    table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc_disabled:before,
    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_desc_disabled:after {
        font-size: 0.7rem;
        top: 50% !important;
        transform: translateY(-50%) !important;
        opacity: 0.2 !important;
    }

    @media (max-width: 768px) {
        div.dataTables_wrapper div.dataTables_paginate ul.pagination { justify-content: center; margin-top: 1.25rem; }
    }


    /*table article*/
    .table-article {  }
    .table-article thead tr th[data-field="number"] { width: 10px; }
    .table-article thead tr th[data-field="title"] { width: 235px; }
    .table-article thead tr th[data-field="status"] { width: 60px; }
    .table-article thead tr th[data-field="view"] { width: 30px; }
    .table-article thead tr th[data-field="create"] { width: 30px; }
    .table-article thead tr th[data-field="publish"] { width: 30px; }
    .table-article thead tr th[data-field="action"] { width: 30px; }

    .table-info { position: relative; overflow: hidden; }
    .table-info .label { font-weight: 400; color: var(--color3); }
    .table-info .value { font-weight: 600; color: var(--color2); }
    .table-info tbody tr td { border-bottom: 0; }
    .table-info tbody tr td:nth-child(2) { text-align: right; }

    .table-info-ads tbody tr:last-child td { padding: 0.875rem 0; border-top: 1px solid var(--border2) !important; }


    .table-detail-transaksi { position: relative; overflow: hidden; }
    .table-detail-transaksi tbody tr td:first-child { max-width: 160px !important; }
    .table-detail-transaksi tbody tr td:nth-child(2) { color: var(--dark); }
/* ------------------------------------ end table style ------------------------------------ */


/* ------------------------------------ swiper ------------------------------------ */
    .swiper-container { position: relative; height: 100%; }
    .swiper-button-next, .swiper-button-prev {
        width: calc(var(--swiper-navigation-size)/ 44 * 27);
        height: var(--swiper-navigation-size);
        margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
        z-index: 10;
        color: var(--color2);
    }
    .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0; cursor: auto; pointer-events: none; }

    .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; }
    .swiper-button-prev { left: 1.25rem; right: auto; }
    .swiper-button-prev:after { content: 'prev'; }
    .swiper-button-next { right: 1.25rem; left: auto; }
    .swiper-button-next:after { content: 'next'; }

    .swiper-button-offset.swiper-button-prev { left: -0.75rem; }
    .swiper-button-offset.swiper-button-next { right: -0.75rem; }
    
    .swiper-button-2 { background: var(--light); width: 2.313rem; height: 2.313rem; border-radius: 50%; opacity: 0.65; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-button-2:after { font-size: 1rem; color: var(--color3); }
    .swiper-button-2:hover { opacity: 0.85; box-shadow: var(--shadow-xxs); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .swiper-button-area { position: relative; display: inline-block; }
    .swiper-button-area .swiper-button { position: relative; display: inline-flex; }
    .swiper-button-area .swiper-button:not(:last-child) { margin-right: 0.625rem; }
    .swiper-button-area .swiper-button-prev { left: 0; }
    .swiper-button-area .swiper-button-next { right: 0; }

    .swiper-pagination-bullet { background: var(--color4); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--accent); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .swiper-pagination.pagination-bullet-2 .swiper-pagination-bullet { width: 0.5rem; height: 0.5rem; border: 1px solid transparent; }
    .swiper-pagination.pagination-bullet-2 .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 1.5rem; border-radius: 0.25rem; }

    .swiper-pagination.pagination-white .swiper-pagination-bullet-active { background: var(--white); }

    .swiper-pagination.bottom { bottom: 0 !important; }
    .swiper-pagination.offset-bottom { bottom: -1.5rem !important; }

/* ------------------------------------ end swiper ------------------------------------ */


/* ------------------------------------ toast ------------------------------------ */
    #toast-container > div { 
        border-radius: 0.5rem; 
        -moz-box-shadow: var(--shadow-md);
        -webkit-box-shadow: var(--shadow-md);
        box-shadow: var(--shadow-md);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    #toast-container > div:hover {
        -moz-box-shadow: var(--shadow);
        -webkit-box-shadow: var(--shadow);
        box-shadow: var(--shadow);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }

    .toast-style-notif { 
        position: fixed; 
        left: 1.25rem; 
        bottom: 1.25rem; 
        background: var(--background); 
        padding: 0.75rem; 
        border-radius: 0.5rem; 
        box-shadow: var(--shadow-xs); 
        max-width: 360px; 
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(20%);
        transform: translateX(20%);
        z-index: 99999; 
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .toast-style-notif.show { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .toast-style-notif .close { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--light2); box-shadow: none; border: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
    .toast-style-notif .close:before { content: '\e8f6'; font-family: 'feather'; font-size: 1rem; line-height: 1; color: var(--color); transform: translateY(0.03rem); }

    .toast-style-notif.top-right { top: 1.25rem; left: auto; right: 1.25rem; bottom: auto; }

    .toast-style-notif .toast-body { display: flex; align-items: center; gap: 0.625rem; padding: 0; padding-right: 1.875rem; }
    .toast-style-notif .toast-body .toast-icon { flex-shrink: 0; }
    .toast-style-notif .toast-body .toast-icon .icon { font-size: 1.875rem; color: var(--accent); }
    .toast-style-notif .toast-body .toast-content a { font-weight: 600; color: var(--accent); }

    @media (max-width: 768px) {
        .toast-style-notif { max-width: 280px; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform: translateY(20%); transform: translateY(20%); }
        .toast-style-notif.show { -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @media (max-width: 480px) {
        .toast-style-notif { top: 2.5rem; }
    }

    .remads div[class*="google-auto-placed"] { display: none !important; }
/* ------------------------------------ end toast ------------------------------------ */


/* ------------------------------------ tabs style ------------------------------------ */
    .nav-tabs-style { 
        position: relative; 
        display: -ms-inline-flexbox;
        display: inline-flex; 
        flex-wrap: nowrap; 
        -ms-flex-direction: row;
        flex-direction: row;
        overflow-y: hidden;
        overflow-x: auto;
        border: 0;
        border-bottom: 1px solid var(--border); 
        margin-bottom: 1.875rem;
    }
    .nav-tabs-style .nav-link {
        position: relative;
        cursor: pointer;
        border: 0;
        border-radius: 0;
        padding: 0.313rem 1rem 0.5rem 1rem;
        background: transparent;
        white-space: nowrap;
        font-weight: 600;
        color: var(--color3);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .nav-tabs-style .nav-link.active { color: var(--accent); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .nav-tabs-style .nav-link-indicator { position: absolute; bottom: 0; min-width: 0; width: 0; height: 2px; background: var(--accent); transition: left .7s, width .7s; }

    .nav-tabs-style.style-1 { border-bottom: 0; }
    .nav-tabs-style.style-1 .nav-link:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--accent); opacity: 0; visibility: hidden; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .nav-tabs-style.style-1 .nav-link.active:before { opacity: 1; visibility: visible; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
/* ------------------------------------ end tabs style ------------------------------------ */


/* ------------------------------------ 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%; }
    }



    @media (max-width: 992px) {
        .flex-md-2-column .flex-col { flex-basis: 50%; }
        .flex-md-3-column .flex-col { flex-basis: 33.33%; }
    }
    @media (max-width: 768px) {
        .flex-md-2-column .flex-col { flex-basis: 100%; }
        .flex-md-3-column .flex-col { flex-basis: 50%; }
    }
    @media (max-width: 480px) {
        .flex-md-2-column .flex-col { flex-basis: 100%; }
        .flex-md-3-column .flex-col { flex-basis: 100%; }
    }
    @media (max-width: 480px) {
        .flex-md-2-column .flex-col { flex-basis: 100%; }
        .flex-md-3-column .flex-col { flex-basis: 50%; }
    }
/* ------------------------------------ end flex-column ------------------------------------ */


/* ------------------------------------ dropdown ------------------------------------ */
    .dropup, .dropright, .dropdown, .dropleft { display: inline-flex; }
    .dropdown-menu { overflow: hidden; background: var(--background); border: 1px solid var(--light); border-radius: 0.625rem; box-shadow: var(--shadow-xs); padding-left: 0.313rem; padding-right: 0.313rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dropdown-menu.show { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dropdown-toggle { cursor: pointer; display: inline-flex; align-items: center; margin-bottom: 0; outline: none !important; -webkit-box-shadow: none !important; box-shadow: none; }
    .dropdown-toggle.teon { background: none; border: 0; box-shadow: none; }
    .dropdown-toggle:after { display: none; }
    .dropdown-toggle:before { margin: 0 !important; border: 0 !important; }
    .dropdown-item { 
        position: relative;
        display: flex; 
        align-items: center; 
        padding: 0.625rem; 
        line-height: 1.1;
        color: var(--color2);
        border-radius: 0.5rem;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .dropdown-item:hover { background: var(--light); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dropdown-item .icon, .dropdown-item i { font-size: 1rem; width: 28px; color: var(--color3); }
    
    .dropdown-arrow .dropdown-toggle:after { position: relative; display: inline-block; font-family: 'feather'; content: '\e842'; margin-left: 0.15rem; border: 0; line-height: 1; vertical-align: middle; }
    .dropdown-arrow .dropdown-toggle.show:after { transform: rotate(-180deg); }
/* ------------------------------------ end dropdown ------------------------------------ */


/* ------------------------------------ header ------------------------------------ */
    .navbar { position: sticky; top: 0; left: 0; right: 0; width: 100%; background: var(--background); z-index: 100; }
    .navbar .navbar-area { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; }
    
    .navbar .navbar-area .navbar-brand { position: relative; flex-shrink: 0; }
    .navbar .navbar-area .navbar-brand .brand-img { object-fit: contain; max-width: 14rem; max-height: 2.4rem; }
    .navbar .navbar-area .navbar-brand .brand-img.brand-img-mb { display: none; }

    .navbar .navbar-area .navbar-search { width: 25rem; }
    .navbar .navbar-area .navbar-search .search-form { 
        position: relative; 
        overflow: hidden; 
        width: 100%;
        display: flex; 
        align-items: stretch; 
        justify-content: space-between;
        border-radius: 1.875rem; 
        border: 1px solid var(--border2); 
        background: var(--background); 
    }
    .navbar .navbar-area .navbar-search .search-form .search-form-icon { position: absolute; top: 50%; left: 1rem; transform: translateY(-49%); font-size: 1.125rem; color: var(--color3); opacity: 0.65; }
    .navbar .navbar-area .navbar-search .search-form .search-form-input { width: 100%; white-space: nowrap; border: none; padding: 0.625rem 0.625rem 0.625rem 2.5rem; margin: 0; background: none; color: var(--color); }
    .navbar .navbar-area .navbar-search .search-form .search-form-submit { position: relative; flex-shrink: 0; padding: 0 1.25rem; border: 0; background: none; box-shadow: none; outline: 0; font-size: 0.938rem; color: var(--color3); }
    .navbar .navbar-area .navbar-search .search-form .search-form-submit:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 1px; height: 65%; background: var(--border); }
    
    .navbar .navbar-area .navbar-search .wrap-tagging { 
        position: absolute;
        top: 85%;
        left: 0;
        right: 0;
        width: 25rem;
        max-height: 100vh;
        margin: auto;
        padding: 0.75rem;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
        border-radius: 0.625rem;
        border: 1px solid var(--light);
        background: var(--background);
        box-shadow: var(--shadow);
        transform: translateY(10%);
        visibility: hidden;
        opacity: 0;
        z-index: 0;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .wrap-tagging-open .navbar .navbar-area .navbar-search .wrap-tagging { transform: translateY(0); visibility: visible; opacity: 1; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .navbar .navbar-area .navbar-action { flex-shrink: 0; display: flex; align-items: stretch; justify-content: flex-end; gap: 1rem; }
    .navbar .navbar-area .navbar-action .action-item { border: 0; background: none; font-weight: 600; }
    .navbar .navbar-area .navbar-action .action-item .btn { padding-left: 0.625rem; padding-right: 0.625rem; }
    .navbar .navbar-area .navbar-action .action-item .btn svg { position: relative; width: 1.5rem; max-height: 1.5rem; }
    .navbar .navbar-area .navbar-action .action-user img { object-fit: cover; object-position: center; overflow: hidden; border-radius: 50%; height: 2.7rem; aspect-ratio: 1/1; background: var(--light); }

    @media (max-width: 1200px) {
        .navbar .navbar-area .navbar-brand .brand-img { max-width: 11.5rem; max-height: 2rem; }

        .navbar .navbar-area .navbar-search { width: 21rem; }

        .navbar .navbar-area .navbar-action { gap: 0.313rem; }
    }
    @media (max-width: 992px) {
        .navbar .navbar-area .navbar-brand .brand-img { max-width: 5rem; }
        .navbar .navbar-area .navbar-brand .brand-img.brand-img-dt { display: none; }
        .navbar .navbar-area .navbar-brand .brand-img.brand-img-mb { display: block; }
    }
    @media (max-width: 768px) {
        .navbar .navbar-area { gap: 0.625rem; padding: 0.313rem 0; }
        .navbar .navbar-area .navbar-brand { margin-right: 0.313rem; }
        .navbar .navbar-area .navbar-search { width: 100%; }
        .navbar .navbar-area .navbar-search .search-form .search-form-icon { left: 0.625rem; }
        .navbar .navbar-area .navbar-search .search-form .search-form-input { padding: 0.4rem 0.5rem 0.4rem 2rem; }
        .navbar .navbar-area .navbar-search .search-form .search-form-submit { display: none; }

        .navbar .navbar-area .navbar-action { gap: 0.25rem; }
        .navbar .navbar-area .navbar-action .action-item .btn { padding: 0.45rem 0.313rem; }
    }
    @media (max-width: 580px) {
        .navbar .navbar-area .navbar-search .wrap-tagging { width: 100%; padding: 1.25rem 0.75rem 1.25rem 0.75rem; }
    }


    /* wrap taging */
    .wrap-tagging .kanal-area { width: 100%; display: flex; align-items: stretch; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; gap: 0.313rem; }
    .wrap-tagging .kanal-area:has(.kanal-item) { padding: 0.75rem 0; margin: 1.125rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .wrap-tagging .kanal-area .kanal-item { padding: 0 0.313rem; }
    .wrap-tagging .kanal-area .kanal-item span { font-weight: 600; font-size: 1rem; color: var(--color); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .wrap-tagging .kanal-area .kanal-item span:hover { color: var(--accent); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }


    /* mobile search */
    .mobile-search { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 600; display: none; overflow: hidden; background: var(--background); }
    .mobile-search.open { display: block; }
    .mobile-search .mobile-search-close { position: absolute; top: 1.5rem; right: 6%; width: 2.9rem; aspect-ratio: 1/1; border-radius: 0.625rem; z-index: 1005; padding: 0; background: var(--light); border: 0; font-size: 1.875rem; line-height: 1; color: var(--color2); }
    .mobile-search .inner { height: 100%; padding: 4rem 0 0 0; }
    .mobile-search .inner .wrap-tagging { height: calc(100% - 6.5rem); padding-bottom: 5rem; }

    .mobile-search .search-form { width: 100%; margin-bottom: 2.5rem; }
    .mobile-search .search-form h4 { text-align: center; font-weight: 400; color: var(--color3); margin-bottom: 1rem; }
    .mobile-search .search-form .search-area { position: relative; }
    .mobile-search .search-form .search-area .search-form-input { padding: 0.938rem 3.75rem 0.938rem 0.938rem; width: 100%; border: 0; border-radius: 3rem; border-bottom: 1px solid var(--border2); background: none; color: var(--color); font-size: 1.3rem; }
    .mobile-search .search-form .search-area .search-form-input::placeholder { font-size: 1.3rem; color: var(--color4); }
    .mobile-search .search-form .search-area .search-form-input::-webkit-input-placeholder { font-size: 1.3rem; color: var(--color4); }
    .mobile-search .search-form .search-area .search-form-input::-moz-placeholder { font-size: 1.3rem; color: var(--color4); }
    .mobile-search .search-form .search-area .search-form-input:-ms-input-placeholder { font-size: 1.3rem; color: var(--color4); }
    .mobile-search .search-form .search-area .search-form-input:-moz-placeholder { font-size: 1.3rem; color: var(--color4); }
    .mobile-search .search-form .search-area .search-form-submit { position: absolute; top: 50%; right: 0.75rem; font-size: 1.75rem; color: var(--color3); border: 0; background: none; transform: translateY(-50%); }
    .mobile-search .search-form .search-area .search-form-submit:hover, .mobile-search .search-form .search-area .search-form-submit:focus { background: none; box-shadow: none; border: 0; outline: 0; }

    @media (max-width: 580px) {
        .mobile-search .search-form h4 { font-size: 1.25rem; }
        .mobile-search .search-form .search-area .search-form-input { font-size: 1rem; }
        .mobile-search .search-form .search-area .search-form-input::placeholder { font-size: 1.3rem; color: var(--color4); }
        .mobile-search .search-form .search-area .search-form-input::-webkit-input-placeholder { font-size: 1rem; }
        .mobile-search .search-form .search-area .search-form-input::-moz-placeholder { font-size: 1rem; }
        .mobile-search .search-form .search-area .search-form-input:-ms-input-placeholder { font-size: 1rem; }
        .mobile-search .search-form .search-area .search-form-input:-moz-placeholder { font-size: 1rem; }
    }


    /* mobile menu */
    .mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 600; display: none; overflow: hidden; background: var(--background); }
    .mobile-menu.open { display: block; }
    .mobile-menu .mobile-menu-close { position: absolute; top: 2rem; right: 6%; width: 2.9rem; aspect-ratio: 1/1; border-radius: 0.625rem; z-index: 1005; padding: 0; background: var(--light); border: 0; font-size: 1.875rem; line-height: 1; color: var(--color2); }
    .mobile-menu .inner { height: 100%; padding: 2.5rem 0; display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; }
    .mobile-menu .brand-area { margin-bottom: 2.5rem; }
    .mobile-menu .brand-area .brand-img { object-fit: contain; max-width: 12.5rem; }
    .mobile-menu .menu-area { display: flex; align-items: flex-start; flex-direction: column; gap: 0.313rem; }
    .mobile-menu .menu-area .menu-item { width: 100%; padding: 0.45rem 0; }
/* ------------------------------------ end header ------------------------------------ */


/* ------------------------------------ post util ------------------------------------ */
    /* tags style */
    .tags-area { width: 100%; display: flex; align-items: stretch; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; gap: 0.313rem; }
    .tags-item { display: inline-flex; padding: 0.313rem 0.75rem; background: var(--background); border: 1px solid var(--border2); border-radius: 1.875rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .tags-item span { font-weight: 500; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .tags-item:hover { border: 1px solid var(--accent); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .tags-item:hover span { color: var(--accent); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    
    /* meta info */
    .post-meta-info { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 0.313rem 0.45rem; }
    .post-meta-info span { font-weight: 500; line-height: 1.2; color: var(--color4); }
    .post-meta-info span .icon { color: var(--color4); }
    .post-meta-info.dot-divider > *:not(:last-child) { position: relative; margin-right: 0.45rem; }
    .post-meta-info.dot-divider > *:not(:last-child):before { content: ''; position: absolute; top: 0; bottom: 0; right: -0.625rem; margin: auto; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--color4); }

    /* sponsor badge */
    .post-sponsor { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 0.25rem; }
    .post-sponsor .sponsor-img { flex-shrink: 0; object-fit: contain; max-width: 1rem; max-height: 1rem; }
    .post-sponsor .sponsor-by { font-weight: 600; font-size: 0.75rem; color: var(--color3); }

    /* post action */
    .post-act { align-self: flex-start; }
    .post-act .dropdown-toggle { border: 0; box-shadow: none; background: none; }
    .post-act .dropdown-toggle:before { font-family: 'feather'; content: '\e89a'; color: var(--color4); }
    
    /* post social share */
    .post-social-share { display: flex; align-items: center; justify-content: flex-start; gap: 0.25rem; }
    .post-social-share *[class^="post-share-"] { width: 1.875rem; height: 1.875rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--white); text-align: center; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .post-social-share *[class^="post-share-"] svg { width: 1.25rem; height: 1.25rem; }
    .post-social-share *[class^="post-share-"]:hover { transform: scale(0.95); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .post-social-share *[class^="post-share-facebook"] { background: linear-gradient(180deg, #19AEFF 0%, #0065E7 99.52%); }
    .post-social-share *[class^="post-share-twitter"] { background: var(--black); }
    .post-social-share *[class^="post-share-linkedin"] { background: #007BB5; }
    .post-social-share *[class^="post-share-telegram"] { background: #37AEE2; }
    .post-social-share *[class^="post-share-whatsapp"] { background: #25D366; }
    
    /* post favorit */
    .post-favorit { position: relative; }
    .post-favorit .icon { width: 1.4rem; height: 1.4rem; text-align: right; font-size: 1.25rem; color: var(--color4); }
    .post-favorit.active .icon { color: var(--accent); }

    .post-image { object-fit: cover; object-position: center; width: 100%; height: 100%; }
    .post-category { font-weight: 700; color: var(--accent); }
    .post-category.badge { border-radius: 1.25rem; }
    .post-title { font-weight: 700; line-height: 1.3; color: var(--color2); }
    .post-title.post-title-hgst { overflow: hidden; height: 55px; }
    .post-description { font-weight: normal; font-size: 0.875rem; color: var(--color3); }

    /* post */
    .post { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 0.4rem; }
    .post .post-head { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1/1; border-radius: 0.5rem; }
    .post .post-head.post-head-32 { aspect-ratio: 3/2; }
    .post .post-head.post-head-169 { aspect-ratio: 16/9; }
    .post .post-head.post-head-35 { aspect-ratio: 3/5; }
    .post .post-head.post-head-circle { aspect-ratio: 1/1; border-radius: 50%; }
    .post .post-head.post-head-collection { aspect-ratio: 9/13; }
    .post .post-body { position: relative; width: 100%; }
    .post .post-body:has(.post-act) { width: 100%; display: flex; align-items: stretch; gap: 0.25rem; }
    .post .post-body .post-info { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.313rem; margin-bottom: 0.313rem; }
    .post .post-body .post-title { margin-bottom: 0.313rem; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical; }
    .post .post-body .post-description { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .post .post-body .post-sponsor { margin-bottom: 0.45rem; }
    .post .post-body .post-content { width: 100%; }
    .post .post-social-share { display: none; }
    .post .post-social-share.show { display: flex; }

    @media (max-width: 580px) {
        .post .post-title { font-size: 0.875rem; }
    }

    /* post hover zoom image */
    .post.hv-zoom .post-head { position: relative; overflow: hidden; }
    .post.hv-zoom .post-head img:not(.fix) { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .post.hv-zoom:hover .post-head img:not(.fix) { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    /* post horizontal */
    .post.post-hr { flex-direction: row; gap: 0.625rem; }
    .post.post-hr .post-head { flex-shrink: 0; width: 30%; max-width: 5.5rem; }
    .post.post-hr .post-body .post-category { margin: 0; margin-bottom: 0.15rem; }

    .post.post-hr.post-hr-small .post-head { width: 4.2rem; }
    
    .post.post-hr.large .post-head { width: 40%; max-width: 10.625rem; }

    @media (max-width: 580px) {
        .post.post-hr .post-head { width: 25%; }

        .post.post-hr.large .post-head { width: 25%; max-width: 5.5rem; }
    }

    /* post md horizontal */
    .post.post-md-hr .post-body .post-category { margin: 0; margin-bottom: 0.313rem; }

    @media (min-width: 768px) {
        .post.post-md-hr { flex-direction: row; gap: 0.625rem; }
        .post.post-md-hr .post-head { flex-shrink: 0; width: 35%; max-width: 6.4rem; }
        .post.post-md-hr .post-body .post-category { margin: 0; margin-bottom: 0.15rem; }
    }

    /* post white content */
    .post.post-white .post-title { color: var(--color-white); }
    .post.post-white *:not(.post-title) { color: var(--color5); }


    /* post author */
    .post-author { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; gap: 0.625rem; }
    .post-author .author-head { flex-shrink: 0; width: 1.875rem; height: 1.875rem; border-radius: 50%; overflow: hidden; }
    .post-author .author-body { text-align: left; }
    .post-author .author-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
    .post-author .author-name { font-weight: 600; line-height: 1.2; margin-bottom: 0; }
    .post-author .author-role { font-weight: 400; color: var(--color4); }

    .post-author-2 { flex-direction: column; align-items: center; }
    .post-author-2 .author-head { width: 4.5rem; height: 4.5rem; }
    .post-author-2 .author-body { width: 100%; text-align: center; }

    @media (max-width: 992px) {
        .post-author-2 .author-head { width: 4rem; height: 4rem; }
    }
    @media (max-width: 580px) {
        .post-author-2 .author-head { width: 3.5rem; height: 3.5rem; }
    }

    
    /* post video */
    .post-video .post-head .play-button-video { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }


    /* post display 2 */
    .post-display-2 { overflow: hidden; border-radius: 0.5rem; }
    .post-display-2 .post-body { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; padding: 1rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%); }
/* ------------------------------------ end post util ------------------------------------ */


/* ------------------------------------ post article ------------------------------------ */
    /* meta author */
    .meta-author .author-img { display: inline-block; vertical-align: middle; margin-top: -0.188rem; margin-right: 0.313rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; object-position: center center; }
    .meta-author .author-info { display: inline-block; }
    .meta-author .author-info .author-name { font-weight: normal; font-size: 0.813rem; line-height: 1.3; color: var(--dark); margin-bottom: 0.313rem; }
    .meta-author .author-info .author-position { color: var(--text); margin-bottom: 0; }

    /* post share social */
    /* .post-social-share { position: absolute; right: 0; bottom: 0.938rem; float: left; overflow: hidden; padding-left: 0; margin: 0; }
    .post-social-share li { width: 100%; max-width: 0; opacity: 0; text-align: center; float: left; margin-left: 0.313rem; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
    .post-social-share li:first-child { max-width: 1.875rem; opacity: 1; pointer-events: none; z-index: 6; }
    .post-social-share li a { display: block; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--white); text-align: center; font-size: 0.813rem; line-height: 2rem; }
    .post-social-share:hover li:nth-child(1) { opacity: 0; max-width: 0; }
    .post-social-share:hover li { opacity: 1; max-width: 1.875rem; }
    .post-social-share:hover li:last-child { margin-right: 0.938rem; } */

    .social-share { position: relative; display: flex; align-items: center; justify-content: flex-start; }
    .social-share li:not(:last-child) { margin-right: 0.313rem; }
    .social-share .social-icon { 
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 1rem;
        line-height: 1;
        color: var(--white);
    }
    .social-share .social-icon:hover { background: var(--white) !important; color: var(--dark); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); }
    .social-share.social-share-lg .social-icon { width: 2.375rem; height: 2.375rem; font-size: 0.938rem; }

    .social-share.style-2 li:not(:last-child) { margin-right: 0.5rem; }
    .social-share.style-2 .social-icon { font-size: 1.25rem; color: var(--dark); fill: var(--text2); background: none !important; }
    .social-share.style-2 .social-icon:hover { color: var(--dark); box-shadow: none; }

    .social-icon.accent { background: var(--accent); }
    .social-icon.accent:hover { color: var(--accent) !important; }

    .social-icon.facebook { background: #4267B2; }
    .social-icon.facebook:hover { color: #4267B2 !important; }

    .social-icon.twitter { background: var(--dark); fill: var(--white); }
    .social-icon.twitter:hover { fill: var(--dark) !important;}

    .social-icon.instagram { background: #E1306C ; }
    .social-icon.instagram:hover { color: #E1306C !important; }

    .social-icon.pinterest { background: #E60023; }
    .social-icon.pinterest:hover { color: #E60023 !important; }

    .social-icon.whatsapp { background: #25D366; }
    .social-icon.whatsapp:hover { color: #25D366 !important; }

    .social-icon.email { background: #ff5D5D; }
    .social-icon.email:hover { color: #ff5D5D !important; }

    .social-icon.telegram { background: #0088CC; }
    .social-icon.telegram:hover { color: #0088CC !important; }

    .social-icon.linkedin { background: #2867B2; }
    .social-icon.linkedin:hover { color: #2867B2 !important; }

    .social-icon.youtube { background: #FF0000; }
    .social-icon.youtube:hover { color: #FF0000 !important; }


    .pricing-badge {
        position: absolute;
        top: 0;
        z-index: 999;
        right: 0;
        width: 100%;
        display: block;
        font-size: 15px;
        padding: 0;
        overflow: hidden;
        height: 100px;
    }
    .pricing-badge .badge {
        float: right;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        right: -67px;
        top: 17px;
        position: relative;
        text-align: center;
        width: 200px;
        font-size: 13px;
        margin: 0;
        padding: 7px 10px;
        font-weight: 500;
        color: #ffffff;
        background: #fb7179;
    }

    /*meta category*/
    .post-meta-category { font-weight: 700; font-size: 0.75rem; margin-bottom: 0.313rem; }

    @media (max-width: 768px) {
        .post-meta-category { font-size: 0.688rem; margin-bottom: 0.125rem; }
    }

    /* .post-content { position: absolute; left: 0; bottom: 0; padding: 1.25rem; z-index: 2; } */


    .post-meta-info.meta-info-white span { color: var(--white); }
    .post-meta-info.meta-info-white .dot-divider { background: var(--white); }

    .post-meta-info.meta-info-light span { color: var(--light) !important; opacity: 0.8; }
    .post-meta-info.meta-info-light .dot-divider { background: var(--light) !important; opacity: 0.8; }
    .post-meta-info.meta-info-light span .author-name { color: var(--light) !important; opacity: 0.8; }
    .post-meta-info.meta-info-light span .author-position { color: var(--light) !important; opacity: 0.8; }


    /*post thumb*/
    .post-thumb { position: relative; overflow: hidden; height: 24.375rem; border-radius: 0.5rem; }
    .post-thumb .post-thumb-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: none; z-index: 3; }
    .post-thumb .post-thumb-overlay:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        left: 0; 
        top: 0;
        z-index: 1;
        background: -webkit-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 100%);
        background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 100%);
        background: -o-linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 100%);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.4) 100%);
    }
    /* .post-thumb:before { 
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        left: 0; 
        top: 0;
        z-index: 1;
        background: -webkit-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
        background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
        background: -o-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
    } */
    .post-thumb.before-none:before, .post-thumb.overlay-bg-none:before { background: transparent !important; }

    .post-thumb .post-content { z-index: 5; }
    .post-thumb .post-content .post-title { color: var(--white); }
    .post-thumb .post-content .post-title:hover, .post-thumb .post-content .post-title:focus { color: var(--white); }
    .post-thumb .post-content .post-description { color: var(--white); }

    .post-thumb .post-social-share { height: 0; transition-duration: 0.3s; }
    .post-thumb:hover .post-social-share { height: 1.875rem; transition-duration: 0.3s; }

    .post-thumb .post-sponsor { position: absolute; top: 1rem; right: 1rem; }
    .post-thumb .post-sponsor .meta-sponsor .sponsorby { display: none; }

    .post-link-detail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: none; z-index: 3; }

    @media (max-width: 1200px) {
        .post-thumb { height: 19.375rem; }
    }


    .post-thumb-h-lg { height: 31rem; }
    .post-thumb-h-md { height: 28.125rem; }

    .post-thumb-h-sm { height: 13.625rem; }
    .post-thumb-h-sm .post-content { padding: 0.625rem; }
    .post-thumb-h-sm .post-content .post-title { font-size: 1rem; }
    .post-thumb-h-sm .post-sponsor { top: 0.313rem; right: 0.313rem; }

    @media (max-width: 1200px) {
        .post-thumb-h-lg { height: 26.875rem; }

        .post-thumb-h-sm { height: 11.875rem; }
        .post-thumb-h-sm .post-content .post-title { font-size: 0.938rem; }
    }
    @media (max-width: 768px) {
        .post-thumb-h-sm { height: 10.313rem; }
        .post-thumb-h-sm .post-content .post-title { font-size: 0.875rem; }
    }

    
    @media (max-width: 992px) {
        .list-berita-premium .flex-col { flex-basis: 33.33%; }
    }
    @media (max-width: 768px) {
        .list-berita-premium .flex-col { flex-basis: 50%; }
    }
    @media (max-width: 480px) {
        .list-berita-premium .flex-col { flex-basis: 100%; }
    }


    .post-thumb-infografis { height: 20.188rem; }
    .post-thumb-infografis .post-content { padding: 0.938rem; }
    .post-thumb-infografis .post-content .post-title { font-size: 0.968rem; }

    @media (max-width: 1200px) {
        .post-thumb-infografis { height: 19.375rem; }
        .post-thumb-infografis .post-content { padding: 0.625rem; }
    }
    @media (max-width: 768px) {
        .post-thumb-infografis .post-content .post-title { font-size: 0.875rem; }
    }


    /*post thumb 2*/
    .post-thumb-2 { position: relative; overflow: hidden; height: 100%; }
    .post-thumb-2::before { width: 0; height: 0; background: none; }
    .post-thumb-2 .post-thumb-image { position: relative; border-radius: 0.313rem; overflow: hidden; }
    .post-thumb-2 .post-thumb-image .post-image { position: relative; height: 15.625rem; margin: auto; }
    .post-thumb-2 .post-content { position: relative; padding: 0.625rem 0; }
    .post-thumb-2 .post-content .post-title { height: 63px; color: var(--dark); -webkit-line-clamp: 3; }
    .post-thumb-2 .post-content .post-title:hover, .post-thumb-2 .post-content .post-title:focus { color: var(--accent); }
    .post-thumb-2 .post-content .post-description { color: var(--dark); -webkit-line-clamp: 3; }
    .post-thumb-2 .post-sponsor { top: 0.5rem; right: 0.5rem; }

    @media (max-width: 1200px) {
        .post-thumb-2 .post-thumb-image .post-image { height: 12.5rem; }
        .post-thumb-2 .post-content .post-title { font-size: 1.063rem; }
    }
    @media (max-width: 992px) {
        .post-thumb-2 .post-thumb-image .post-image { height: 11.563rem; }
        .post-thumb-2 .post-content .post-title { font-size: 1rem; }
    }
    @media (max-width: 768px) {
        .post-thumb-2 .post-content .post-title { font-size: 0.938rem; }
    }
    @media (max-width: 480px) {
        .post-thumb-2 .post-content .post-title { font-size: 0.875rem; }
    }


    /*post thumb 3*/
    .post-thumb-3 { height: 100%; display: -ms-flexbox; display: flex; align-items: stretch; border-radius: 0; }
    .post-thumb-3::before { width: 0; height: 0; background: none; }
    .post-thumb-3 .post-thumb-image { position: relative; overflow: hidden; flex-basis: 28%; -ms-flex-order: 1; order: 1; width: 5.5vw; height: 5.5vw; border-radius: 0.5rem; }
    .post-thumb-3 .post-thumb-image .post-image { position: relative; display: block; }
    .post-thumb-3 .post-content { position: relative; flex-basis: 72%; -ms-flex-order: 0; order: 0; padding: 0; padding-right: 0.5rem; }
    .post-thumb-3 .post-content .post-title { font-size: 0.875rem; color: var(--dark); -webkit-line-clamp: 3; }
    .post-thumb-3 .post-content .post-title:hover, .post-thumb-3 .post-content .post-title:focus { color: var(--accent); }
    .post-thumb-3 .post-meta-info span { font-size: 0.688rem; }

    .post-thumb-3.reverse { position: relative; }
    .post-thumb-3.reverse .post-thumb-image { flex-basis: auto; -ms-flex-order: 0; order: 0; width: 70px; height: 70px; border-radius: 0; }
    .post-thumb-3.reverse .post-content { flex-basis: 70%; -ms-flex-order: 1; order: 1; padding-right: 0; padding-left: 0.625rem; }
    .post-thumb-3.reverse .post-content .post-title { line-height: 1.2; -webkit-line-clamp: 2; }

    .post-thumb-3 .post-sponsor { position: relative; top: 0; right: 0; margin-top: 0.313rem; }
    .post-thumb-3 .post-sponsor .badge-sponsor { max-width: 15px; max-height: 15px; }
    .post-thumb-3 .post-sponsor .meta-sponsor { margin-bottom: 0.313rem; }
    .post-thumb-3 .post-sponsor .meta-sponsor .sponsorby { display: block; }
    .post-thumb-3 .post-sponsor .meta-sponsor .sponsor-logo { width: 15px; height: 15px; }

    @media (max-width: 1200px) {
        .post-thumb-3 .post-thumb-image { width: 5rem; height: 5rem; }
        .post-thumb-3 .post-content .post-title { font-size: 0.938rem; line-height: 1.3; }
    }
    @media (max-width: 480px) {
        .post-thumb-3 .post-content .post-title { font-size: 0.813rem; }
    }

    /*post thumb 4*/
    .post-thumb-wawasan { position: relative; overflow: hidden; height: 100%; }
    .post-thumb-wawasan::before { width: 0; height: 0; background: none; }
    .post-thumb-wawasan .post-thumb-image { position: relative; border-radius: 0.313rem; overflow: hidden; }
    .post-thumb-wawasan .post-thumb-image .post-image { position: relative; height: 15.625rem; margin: auto; }
    .post-thumb-wawasan .post-content { position: relative; padding: 0.625rem 0; }
    .post-thumb-wawasan .post-content .post-title { color: var(--dark); -webkit-line-clamp: 3; }
    .post-thumb-wawasan .post-content .post-title:hover, .post-thumb-wawasan .post-content .post-title:focus { color: var(--accent); }
    .post-thumb-wawasan .post-content .post-description { color: var(--dark); -webkit-line-clamp: 3; }
    .post-thumb-wawasan .post-sponsor { top: 0.5rem; right: 0.5rem; }

    @media (max-width: 1200px) {
        .post-thumb-wawasan .post-thumb-image .post-image { height: 12.5rem; }
        .post-thumb-wawasan .post-content .post-title { font-size: 1.063rem; }
    }
    @media (max-width: 992px) {
        .post-thumb-wawasan .post-thumb-image .post-image { height: 11.563rem; }
        .post-thumb-wawasan .post-content .post-title { font-size: 1rem; }
    }
    @media (max-width: 768px) {
        .post-thumb-wawasan .post-content .post-title { font-size: 0.938rem; }
    }
    @media (max-width: 480px) {
        .post-thumb-wawasan .post-content .post-title { font-size: 0.875rem; }
    }

    .post-other-news { padding-bottom: 0.625rem; }
    .post-other-news .post-item { /*padding-right: 0;*/ margin-bottom: 0.938rem; }
    /*.post-other-news .post-item:not(:last-child) { margin-right: 0.938rem; }*/

    /*post thumb 4*/
    .post-thumb-4 { height: 100%; width: 100%/*390px*/; max-width: 93%; display: -ms-flexbox; display: flex; align-items: stretch; border-radius: 0; }
    .post-thumb-4::before { width: 0; height: 0; background: none; }
    .post-thumb-4 .post-thumb-image { position: relative; overflow: hidden; -ms-flex: 0 0 140px; flex: 0 0 140px; width: 140px; height: 120px; border-radius: 0; margin-right: 0.625rem; }
    .post-thumb-4 .post-thumb-image .post-image { position: relative; display: block; }
    .post-thumb-4 .post-content { position: relative; flex-basis: auto; padding: 0; }
    .post-thumb-4 .post-content .post-title { font-size: 0.938rem; color: var(--dark); -webkit-line-clamp: 3; }
    .post-thumb-4 .post-content .post-title:hover, .post-thumb-4 .post-content .post-title:focus { color: var(--accent); }
    .post-thumb-4 .post-meta-info span { font-size: 0.813rem; }

    @media (max-width: 1200px) {
        .post-thumb-4 .post-thumb-image { /*width: 5rem; height: 5rem;*/ -ms-flex: 0 0 120px; flex: 0 0 120px; width: 120px; height: 90px; }
        .post-thumb-4 .post-content .post-title { font-size: 0.938rem; line-height: 1.3; }
    }
    @media (max-width: 480px) {
        .post-thumb-4 .post-thumb-image { -ms-flex: 0 0 100px; flex: 0 0 100px; width: 100px; height: 75px; }
        .post-thumb-4 .post-content .post-title { font-size: 0.813rem; }
    }

    .post-thumb-other-news .post-thumb-image .post-image { object-fit: contain; width: 100%; }

    
    .post-thumb-4-sm { width: 100%; }
    .post-thumb-4-sm .post-thumb-image { -ms-flex: 0 0 80px; flex: 0 0 80px; width: 80px; height: 70px; border-radius: 0.313rem; }
    .post-thumb-4-sm .post-content .post-title { font-size: 0.813rem; -webkit-line-clamp: 3; }
    .post-thumb-4-sm .post-meta-info span { font-size: 0.688rem; }

    .post-thumb-card-hrz {
        height: 100%;
        max-height: 185px;
        background: var(--white); 
        position: relative;
        overflow: hidden;
        border-radius: 0.5rem;
        display: -ms-flexbox; 
        display: flex; 
        align-items: stretch; 
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    }
    .post-thumb-card-hrz::before { width: 0; height: 0; background: none; }
    .post-thumb-card-hrz .post-thumb-image { position: relative; overflow: hidden; flex-basis: 210px; width: 210px; height: 185px; }
    .post-thumb-card-hrz .post-thumb-image .post-image { position: relative; display: block; }
    .post-thumb-card-hrz .post-content { position: relative; width: 100%; max-width: 70.55%; padding: 0.925rem 1.25rem 0.625rem 1.25rem; }
    .post-thumb-card-hrz .post-content .post-title { color: var(--dark); -webkit-line-clamp: 2; }
    .post-thumb-card-hrz .post-content .post-title:hover, .post-thumb-3 .post-content .post-title:focus { color: var(--accent); }
    .post-thumb-card-hrz .post-content .post-description { max-height: 3.45rem; line-height: 1.35; color: var(--text); margin-bottom: 0.25rem; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical; }
    .post-thumb-card-hrz .post-content .post-meta-info span.post-meta-category a .label { font-weight: bold; } 
    .post-thumb-card-hrz .post-content .post-author { margin-bottom: 0.625rem; }
    .post-thumb-card-hrz .post-content .post-author .author-info .author-name { color: var(--text); letter-spacing: 0.01rem;; margin-bottom: 0; }
    .post-thumb-card-hrz .post-sponsor { position: relative; top: 0; right: 0; }
    .post-thumb-card-hrz .post-sponsor .badge-sponsor { max-width: 20px; max-height: 20px; }
    .post-thumb-card-hrz .post-sponsor .meta-sponsor { margin-bottom: 0.313rem; }
    .post-thumb-card-hrz .post-sponsor .meta-sponsor .sponsorby { display: block; }
    .post-thumb-card-hrz .post-sponsor .meta-sponsor .sponsor-logo { width: 20px; height: 20px; }

    .post-thumb-card-hrz .post-badge { overflow: hidden; position: absolute; top: 0.625rem; right: 0; height: 28px; display: flex; align-items: center; }
    .post-thumb-card-hrz .post-badge span:not(:last-child) { margin-right: 0.625rem; }
    .post-thumb-card-hrz .post-badge .premium-badge { display: inline-flex; }
    .post-thumb-card-hrz .post-badge .premium-badge i { font-size: 1.125rem; margin-top: 2px; color: var(--accent); }
    .post-thumb-card-hrz .post-badge .recomended-badge { display: inline-flex; }
    .post-thumb-card-hrz .post-badge .recomended-badge:before { 
        content: url('../img/badge-recomended.svg');
        height: 28px;
    }

    .post-thumb-card-hrz.post-thumb-card-hrz-2 { max-height: 100%; }
    .post-thumb-card-hrz.post-thumb-card-hrz-2 .post-thumb-image { flex-basis: 180px; width: 180px; height: 140px; }
    .post-thumb-card-hrz.post-thumb-card-hrz-2 .post-content { width: calc(100% - 180px); max-width: auto; padding: 0.925rem 1.25rem 0.925rem 1.25rem; }
    .post-thumb-card-hrz.post-thumb-card-hrz-2 .post-content .post-title { font-size: 1.125rem; -webkit-line-clamp: 100 !important; }

    @media (max-width: 1200px) {
        .post-thumb-card-hrz .post-content { max-width: 70%; }
    }
    @media (max-width: 992px) {
        .post-thumb-card-hrz .post-thumb-image { flex-basis: 190px; width: 190px; height: 185px; }
        .post-thumb-card-hrz .post-content { max-width: 60%; }
        .post-thumb-card-hrz .post-content .post-title { font-size: 0.938rem; }
        .post-thumb-card-hrz .post-content .post-author { margin-bottom: 0.313rem; }
    }
    @media (max-width: 768px) {
        .post-thumb-card-hrz .post-thumb-image { flex-basis: 135px; width: 135px; height: 115px; }
        .post-thumb-card-hrz .post-content { padding: 1rem 0.625rem 0.313rem 0.625rem; }
        .post-thumb-card-hrz .post-content .post-title { margin-top: 0.5rem; }
        .post-thumb-card-hrz .post-content .post-description { display: none !important; }

        .post-thumb-card-hrz .post-badge { right: 0.625rem; }
    }
    @media (max-width: 480px) {
        .post-thumb-card-hrz .post-content .post-title { font-size: 0.813rem; }
        .post-thumb-card-hrz .post-content .post-description { display: none !important; }

        .post-thumb-card-hrz.post-thumb-card-hrz-2 .post-thumb-image { flex-basis: 120px; width: 120px; height: 90px; }
        .post-thumb-card-hrz.post-thumb-card-hrz-2 .post-content { width: calc(100% - 120px); max-width: auto; padding: 0.3rem 1rem 0.3rem 1rem !important; }
        .post-thumb-card-hrz.post-thumb-card-hrz-2 .post-content .post-title { font-size: 0.875rem; margin-top: 0; }
    }


    .author-area { display: flex; align-items: stretch; justify-content: flex-start; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1.25rem 1.875rem; }
    .author-area .author-item { width: calc(100%/5 - 1.875rem); }

    @media (max-width: 992px) {
        .author-area { gap: 1.25rem 1.25rem; }
        .author-area .author-item { width: calc(100%/4 - 1.25rem); }
    }
    @media (max-width: 768px) {
        .author-area { gap: 1.25rem 1.25rem; }
        .author-area .author-item { width: calc(100%/3 - 1.25rem); }
    }
    @media (max-width: 580px) {
        .author-area { gap: 1.25rem 1.25rem; }
        .author-area .author-item { width: calc(100%/2 - 1.25rem); }
        .author-area .author-item .post .post-head.post-head-circle { width: 80%; }
    }


    /* post thumb 5 */
    .post-thumb-5 { position: relative; overflow: hidden; height: 100%; }
    .post-thumb-5::before { width: 0; height: 0; background: none; }
    .post-thumb-5 .post-thumb-image { position: relative; height: 13.625rem; border-radius: 0.313rem; overflow: hidden; }
    .post-thumb-5 .post-thumb-image .post-image { position: relative; object-fit: cover; object-position: center; width: 100%; height: 100%; margin: auto; }
    .post-thumb-5 .post-content { position: relative; padding: 0.625rem 0; }
    .post-thumb-5 .post-content .post-title { color: var(--dark); -webkit-line-clamp: 2; }
    .post-thumb-5 .post-content .post-title:hover, .post-thumb-5 .post-content .post-title:focus { color: var(--accent); }
    .post-thumb-5 .post-content .post-description { color: var(--dark); -webkit-line-clamp: 3; }
    .post-thumb-5 .post-content .post-bio { height: 40px; }
    .post-thumb-5 .post-content .post-meta-info span { color: var(--text2); }

    @media (max-width: 1200px) {
        .post-thumb-5 .post-thumb-image { height: 10.938rem; }
        .post-thumb-5 .post-content .post-title { font-size: 1.063rem; }
    }
    @media (max-width: 992px) {
        .post-thumb-5 { width: 10rem; }

        .post-thumb-5 .post-thumb-image { height: 10.125rem; }
        .post-thumb-5 .post-content .post-title { font-size: 1rem; }
    }
    @media (max-width: 768px) {
        .post-thumb-5 .post-thumb-image { height: 9.063rem; }
        .post-thumb-5 .post-content .post-title { font-size: 0.938rem; }
    }
    @media (max-width: 480px) {
        .post-thumb-5 .post-content .post-title { font-size: 0.875rem; }
    }


    /*post thumb video*/
    .post-thumb-video { position: relative; height: 100%; }
    .post-thumb-video .video-area { position: relative; overflow: hidden; height: 7.8rem; border-radius: 0.313rem; }
    .post-thumb-video .video-area .play-button {
        position: absolute; 
        top: 0.625rem; 
        left: 0.625rem; 
        width: 1.563rem; 
        height: 1.563rem; 
        border: 1px solid var(--white); 
        border-radius: 50%; 
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 5; 
    }
    .post-thumb-video .video-area .play-button .icon { font-size: 12px; line-height: 1; color: var(--white); margin-bottom: 0; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; }
    .post-thumb-video .video-area .play-button:hover { 
        border-color: var(--accent);
        box-shadow: 0 0 0.625rem 0.125rem rgba(255, 255, 255, 0.35); 
        background: rgba(255, 255, 255, 0.35);
        -webkit-backdrop-filter: blur(1px);
        backdrop-filter: blur(1px);
    }
    .post-thumb-video .video-area .play-button:hover .icon { color: var(--accent); -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; }
    .post-thumb-video .video-area .post-image { object-fit: cover; object-position: center; width: 100%; height: 100%; }
    .post-thumb-video .post-content { position: relative; padding: 0; padding-top: 0.625rem; }
    .post-thumb-video .post-content .post-title { font-size: 1rem; }

    @media (max-width: 1200px) {
        .post-thumb-video .video-area { height: 8.438rem; }
    }
    @media (max-width: 768px) {
        .post-thumb-video .video-area { height: 7.188rem; }
        .post-thumb-video .post-content .post-title { font-size: 0.875rem; }
    }


    .post-thumb-video-2 { position: relative; overflow: hidden; height: 100%; }
    .post-thumb-video-2::before { width: 0; height: 0; background: none; }
    .post-thumb-video-2 .post-image-video { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16/9; border-radius: 0.5rem; }
    .post-thumb-video-2 .post-image-video .post-image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .post-thumb-video-2 .post-image-video .play-button {
        position: absolute; 
        top: 0; 
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto; 
        width: 2.5rem; 
        height: 2.5rem; 
        background: var(--white);
        border: 1px solid var(--white); 
        box-shadow: 0 0 0.875rem 0.25rem rgba(0, 0, 0, 0.35); 
        border-radius: 50%; 
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 5; 
    }
    .post-thumb-video-2 .play-button .icon { font-size: 1.25rem; line-height: 1; color: var(--text1); margin-bottom: 0; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; }
    .post-thumb-video-2 .play-button:hover { width: 3.75rem; height: 3.75rem; }
    .post-thumb-video-2 .play-button:hover .icon { color: var(--accent); -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; }
    .post-thumb-video-2 .post-content { position: relative; padding: 0.625rem 0; }
    .post-thumb-video-2 .post-content .post-title { font-size: 1rem; color: var(--text1); }
    .post-thumb-video-2 .post-content .post-title:hover { color: var(--accent); }

    @media (max-width: 768px) {
        .post-thumb-video-2 .post-image-video { height: 7.813rem; }
        .post-thumb-video-2 .post-content .post-title { font-size: 0.875rem; }
    }
/* ------------------------------------ end post article ------------------------------------ */ 


    .collection-header { position: relative; overflow: hidden; width: 100%; }
    .collection-header:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); z-index: 1; }
    .collection-header .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: blur(5px) brightness(60%) saturate(60%); transform: scale(1.15); object-fit: cover; object-position: center; opacity: 0.7; }
    .collection-header .collection-area { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-start; gap: 3.2rem; }
    .collection-header .collection-area .thumb { position: relative; overflow: hidden; width: 340px; aspect-ratio: 9/13; border-radius: 0.625rem; }
    .collection-header .collection-area .thumb img { object-fit: cover; object-fit: center; width: 100%; height: 100%; }
    .collection-header .collection-area .content { width: calc(100% - 340px - 3.2rem); }
    .collection-header .collection-area .content p { text-align: justify; color: var(--white) !important; }
    .collection-banner { width:100%; border-radius: 0.625rem; margin-bottom: 20px;}

    @media (max-width: 992px) {
        .collection-header .collection-area { gap: 2.5rem; }
    }
    @media (max-width: 768px) {
        .collection-header .collection-area { flex-direction: column; align-items: center; }
        .collection-header .collection-area .thumb { width: 80%; }
        .collection-header .collection-area .content { width: 100%; }
    }
    @media (max-width: 580px) {
        .collection-header .collection-area { gap: 1.25rem; }
        .collection-banner { border-radius: 0.25rem; }
    }


/* ------------------------------------ components ------------------------------------ */
    /*title*/
    .section-title { position: relative; margin-bottom: 1rem; }
    .section-title .title { font-weight: 700; line-height: 1.3; color: var(--color2); margin-bottom: 0; }
    .section-title:has(.description) .title { margin-bottom: 0.5rem; }
    .section-title .subtitle { font-weight: normal; line-height: 1.3; }

    .section-title .title.style-1 { position: relative; padding-left: 1rem; }
    .section-title .title.style-1:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 0.25rem; height: 70%; border-radius: 0.5rem; margin: auto; background: var(--accent); }

    .section-title.between { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
    .section-title.between .filter { display: flex; align-items: center; }
    .section-title.between > div:nth-child(2) { flex-shrink: 0; }

    .section-title.white .title { color: var(--color-white); }
    .section-title.white .title.style-1:before { background: var(--background); }
    .section-title.white a { color: var(--color-white);}
    .section-title.white a:before { color: var(--color-white); }
    .section-title.white a:hover { color: var(--color-white) !important; }
    .section-title.white .description { color: var(--color-white); }

    @media (max-width: 580px) {
        .section-title .title.style-1 { padding-left: 0.625rem; }
        .section-title .title { font-size: 1rem; }
        .section-title .link { font-size: 0.75rem; }
    }


    /*title style 1*/
    .section-title.style-1 .title { position: relative; float: left; padding: 0 1.25rem; margin-bottom: 0; background: white; z-index: 2; }
    .section-title.style-1 .title:before { content: ''; position: absolute; top: 0.125rem; left: 0; width: 0.625rem; height: 75%; background: var(--second); }
    .section-title.style-1 .striped:before { 
        content: ''; 
        position: absolute;
        display: block;
        top: 28%;
        left: 0;
        right: 0;
        z-index: 0;
        width: 100%; 
        height: 12px; 
        background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, rgba(0, 0, 0, 0.05) 8px, rgba(0, 0, 0, 0.05) 12px); 
    }
    .section-title.style-1 .line:before {
        content: ''; 
        position: absolute;
        display: block;
        top: 24%;
        left: 0;
        right: 0;
        z-index: 0;
        width: 100%; 
        height: 1px; 
        margin-top: 7px;
        background: var(--dark);
    }
    .section-title.style-1 .wrap-link { position: relative; float: right; vertical-align: middle; padding-left: 1.25rem; margin-top: 3px; background: white; }
    .section-title.style-1 .wrap-link .link { line-height: 1.5; }

    @media (max-width: 768px) {
        .section-title.style-1 .title { padding: 0 0.625rem; }
        .section-title.style-1 .title:before { width: 0.4rem; }

        .section-title.style-1 .striped:before { display: none; }
        .section-title.style-1 .line:before { display: none; }
    }


    /* list post */
    .list-post { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 0.875rem; }
    .list-post .list-post-items { width: 100%; }

    .list-post.list-post-separator { gap: 1.45rem; }
    .list-post.list-post-separator .list-post-items { position: relative; }
    .list-post.list-post-separator .list-post-items:not(:last-child):before { content: ''; position: absolute; bottom: calc(-1.45rem/2); left: 0; width: 100%; height: 1px; background: var(--border); }

    /* list post number */
    .list-post.list-post-number { counter-reset: item; }
    .list-post.list-post-number .list-post-items .post-head { position: relative; counter-increment: item; }
    .list-post.list-post-number .list-post-items .post-head:before {
        content: '# ' counter(item);
        position: absolute;
        top: 0.5rem;
        left: 0;
        width: 2.3rem;
        padding: 0.313rem 0.375rem 0.313rem 0rem;
        border-radius: 0rem 1.5rem 1.5rem 0rem;
        background: rgba(0, 0, 0, 0.50);
        text-align: right;
        font-weight: bold;
        font-size: 1rem;
        line-height: 1;
        color: var(--color-white);
        z-index: 3;
    }


    /* list info */
    .list-info { display: flex; align-items: flex-start; flex-direction: column; flex-wrap: wrap; gap: 1rem; }
    .list-info .list-info-item .icon { margin-right: 0.5rem; }
    .list-info .list-info-item .label { font-weight: 400; color: var(--color3); margin-bottom: 0.25rem; }
    .list-info .list-info-item .value { font-weight: 600; color: var(--color2); margin-bottom: 0.25rem; }
    
    .list-info.list-info-hr { flex-direction: row; gap: 0.45rem 1.25rem; }
    .list-info.list-info-hr .label { margin-bottom: 0; }
    .list-info.list-info-hr .value { margin-bottom: 0; }

    .dot-divider > *:not(:last-child) { position: relative; margin-right: 0.45rem; }
    .dot-divider > *:not(:last-child):before { content: ''; position: absolute; top: 0; bottom: 0; right: -1rem; margin: auto; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--color4); }


    /* event info */
    .event-info-area { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 1.45rem; }
    .event-info-area .info-item { position: relative; width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 0.625rem; }
    .event-info-area .info-item:not(:last-child):before { content: ''; position: absolute; bottom: calc(-1.45rem/2); left: 0; width: 100%; height: 1px; background: var(--border); }
    .event-info-area .info-item .label { width: 150px; color: var(--color3); }
    .event-info-area .info-item .value { font-weight: 600; color: var(--color3); width: calc(100% - 150px - 0.625rem); }
    .event-info-area .info-item .value .post-meta-info span { font-weight: 600; color: var(--color3) !important; }

    @media (max-width: 580px) {
        .event-info-area .info-item { align-items: flex-start; flex-direction: column; gap: 0.313rem; }
        .event-info-area .info-item .label { width: 100%; }
        .event-info-area .info-item .value { width: 100%; }
    }


    /* legend */
    .wrap-legend { position: relative; border-radius: 0.313rem; padding: 1.25rem; border: 1px solid var(--border); }
    .wrap-legend .title-legend { position: absolute; top: -0.825rem; left: 1.25rem; font-weight: 600; font-size: 1.25rem; background: var(--white); padding-left: 0.625rem; padding-right: 0.625rem; }

    @media (max-width: 480px) {
        .wrap-legend .title-legend { font-size: 1.125rem; }
    }


    .wrap-search-result { border-bottom: 1px solid var(--border2); margin-bottom: 1.75rem; }
    .wrap-search-result .label { font-weight: 500; }
    .wrap-search-result .value { font-weight: 600; letter-spacing: 0.04rem; color: var(--accent); }


    .load-more-area { position: relative; text-align: center; margin-top: 1.875rem; }
    .load-more-area.hide { display: none; }
    .load-more-area.show { display: block; }


    /* pagination */
    .pagination-style { padding: 0; margin: 0; font-weight: 600; font-size: 0.875rem; line-height: 1.2; color: var(--dark); }
    .pagination-style .page-item .page-link { border-radius: 4px; background-color: transparent; color: var(--dark); border-color: transparent; margin-left: 0; }
    .pagination-style .page-item .page-link:focus { box-shadow: none; outline: none; }
    .pagination-style .page-item .page-link:hover { background: transparent; font-weight: bold; color: var(--accent) !important; border-color: var(--accent); }
    .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: 5px; }
    .pagination-style .page-item.active .page-link { color: var(--white) !important; background-color: var(--accent); border-color: var(--accent); }
    .pagination-style .page-item.disabled .page-link { color: var(--dark); opacity: 0.6; }


    /* back to top */
    .back-to-top{position:fixed;bottom:30px;right:30px;display:none;cursor:pointer;z-index:9999;font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:12px;line-height:1;background:#f90248;color:#fff;padding:0;border-radius:50%;width:50px;height:50px;line-height:50px;text-align:center;}
    .back-to-top i{font-size:12px;}
    .back-to-top span{padding-left:10px;}
    .back-to-top:hover{color:#fff!important;bottom:35px;transition-duration:0.2s;}
    .back-to-top:focus,
    .back-to-top:active{color:#fff!important;}


    /* no more result */
    .no-more-result { width: 100%; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 3.5rem; border-radius: 0.625rem; text-align: center; }
    .no-more-result .icon { width: 100%; max-width: 10rem; object-fit: contain; margin-bottom: 1.25rem; }
    .no-more-result .icon svg path { fill: var(--color3); }
    .no-more-result .text { font-weight: 600; margin-bottom: 0; }
    .no-more-result .btn { margin-top: 1rem; }

    @media (max-width: 580px) {
        .no-more-result .icon { max-width: 7.5rem; }
        .no-more-result { padding: 2.5rem 0.938rem; }
    }


    /* alert */
    .alert { display: inline-block; position: relative; padding: 0.625rem 1rem; border-radius: 0.45rem; background: var(--background); }
    .alert .btn-close { position: absolute; top: 0.313rem; right: 0.313rem; padding: 0; font-size: 0.65rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .alert .btn-close:focus { outline: 0; box-shadow: none; }
    .alert .alert-inner { display: flex; align-items: center; gap: 0.625rem; }
    .alert .alert-inner .alert-icon { position: relative; flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--light); font-size: 1.4rem; }
    .alert .alert-inner .alert-icon i { position: relative; z-index: 2; }
    .alert .alert-inner .alert-icon svg { width: 1.5rem; height: 1.5rem; }
    .alert .alert-inner .alert-text { line-height: 1.2; padding-right: 1.25rem; }
    .alert .alert-inner .alert-text p { line-height: 1.4; }
    
    .alert-style { border: 0; border-radius: 0.25rem; transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease; }
    .alert-style.alert-secondary { background: #33475B; color: var(--white); }
    .alert-style .close { color: var(--white); text-shadow: none; }

    .alert-purple-style { background: #F9F7FD; }
    .alert-purple-style .alert-icon { width: 2.3rem !important; height: 2.3rem !important; background: #e5d9fc !important; color: #F9F7FD; font-size: 1rem !important; }


    /* play button video */
    .play-button-video {
        width: 3rem; 
        height: 3rem; 
        border-radius: 50%; 
        border: 1px solid var(--color-white); 
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: rgba(0, 0, 0, 0.4);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .play-button-video:before { content: '\f04b'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1.45rem; line-height: 1; color: var(--color-white); }
    .play-button-video:hover { transform: scale(0.9); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .play-button-video.md { width: 4rem; height: 4rem; }

    @media (max-width: 580px) {
        .play-button-video { width: 2.7rem; height: 2.7rem; }
        .play-button-video.md { width: 2.7rem; height: 2.7rem; }
        .play-button-video:before { font-size: 1.25rem; }
    }


    /* social media */
    .social-media { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 1rem 2rem; }
    .social-media .social-media-item { width: 2.5rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--color3); }
    .social-media .social-media-item svg { max-width: 24px; max-height: 24px; }

    iframe { width: 100%; /* height: 100%; */ }
    
    .announce-sexuality { position: relative; padding: 1.5rem 1rem; border: 1px solid var(--border); }
    .announce-sexuality .inner { display: flex; align-items: center; justify-content: center; flex-direction: column; }
    .announce-sexuality .thumb { width: 100%; text-align: center; }
    .announce-sexuality .content { text-align: center; }
/* ------------------------------------ end components ------------------------------------ */


/* ------------------------------------ section ------------------------------------ */
    /* get apps */
    .get-apps { display: none; position: relative; width: 100%; background: var(--accent3); }
    .get-apps.show { display: block; }
    .get-apps .inner { padding: 0.75rem 0; display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
    .get-apps .inner .get-apps-close { width: 1.15rem; flex-shrink: 0; border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; }
    .get-apps .inner .content { display: flex; align-items: center; }
    .get-apps .inner .content .logo img { object-fit: contain; max-width: 55px;}
    .get-apps .inner .content .text { font-weight: 600; line-height: 1.3; }
    .get-apps .inner .action { flex-shrink: 0; }
    .get-apps .inner .action .btn { padding: 0.35rem 0.35rem; font-size: 0.75rem; letter-spacing: 0; }


    /* kanal */
    .kanal-section { position: relative; background: var(--gradient-accent-2); }
    .kanal-section .inner { position: relative; padding: 0 1.25rem; }
    .kanal-section .kanal-item { position: relative; width: auto; padding: 0.875rem 1rem; font-weight: 600; color: var(--color-white); white-space: nowrap !important; text-transform: capitalize; }
    .kanal-section .swiper-button { color: var(--light); }
    .kanal-section .swiper-button:after { font-size: 0.875rem; }
    .kanal-section .swiper-button-prev { left: -0.625rem; }
    .kanal-section .swiper-button-next { right: -0.625rem; }
    .kanal-section .kanal-menu { display: none; }
    
    .kanal-menu-area { --navbar-height: 67.33px; opacity: 0; visibility: hidden; position: fixed; top: var(--navbar-height); right: -20%; width: 80%; height: calc(100vh - var(--navbar-height)); background: var(--background); z-index: 110; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .kanal-menu-area.open { right: 0; opacity: 1; visibility: visible; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .kanal-menu-area .kanal-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; padding: 0.625rem; border-bottom: 1px solid var(--border); }
    .kanal-menu-area .kanal-menu-head .title { font-weight: 600; color: var(--color); }
    .kanal-menu-area .kanal-menu-head .close { width: 1.875rem; height: 1.875rem; border-radius: 0.313rem; background: none; box-shadow: none; border: 0; opacity: 0.8; display: flex; align-items: center; justify-content: center; text-align: center; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .kanal-menu-area .kanal-menu-head .close:before { content: '\e8f6'; font-family: 'feather'; font-size: 1.45rem; line-height: 1; color: var(--color); transform: translateY(0.03rem); }
    .kanal-menu-area .kanal-menu-head .close:hover { background: var(--light); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .kanal-menu-area .inner { height: calc(100vh - var(--navbar-height) - 51px); display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 0.25rem; padding: 0.625rem; }
    .kanal-menu-area .inner .kanal-item { width: 100%; height: auto; padding: 0.625rem 0.313rem; border-radius: 0.625rem; color: var(--color); }

    @media (max-width: 580px) {
        .kanal-section .container { padding: 0; }
        .kanal-section .kanal-item { padding: 0.875rem 0.5rem; }
        .kanal-section .swiper-button { display: none; }

        .kanal-section .inner { display: flex; align-items: stretch; justify-content: space-between; width: 100%; padding: 0; }
        .kanal-section .inner .swiper-container { width: calc(100% - 2.725rem); }
        .kanal-section .inner .kanal-menu { display: inline; width: 2.725rem; display: flex; align-items: center; justify-content: center; }
        .kanal-section .inner .kanal-menu svg { transform: translateY(-1px); }
    }


    /* header bottom */
    .header-bottom { position: relative; padding: 0.625rem 0; margin-top: 0.625rem; }
    .header-bottom .inner { display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 0.625rem; }
    .header-bottom .inner.scrollable::-webkit-scrollbar { width: 0.5rem !important; height: 0.5rem; cursor: pointer; }
    .header-bottom .inner.scrollable::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0.8); }
    .header-bottom .inner.scrollable::-webkit-scrollbar-thumb { background: rgba(195, 195, 195, 0.3); }
    .header-bottom .inner .items { position: relative; width: auto; min-width: calc(100%/6.1 - 0.625rem); display: flex; align-items: center; justify-content: flex-start; flex-direction: column; gap: 0.45rem; text-align: center; padding: 0.625rem; border-radius: 0.5rem; border: 1px solid var(--border); }
    .header-bottom .inner .items:hover { background: var(--light); }
    .header-bottom .inner .items .icon { width: 100%; height: 2.8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-align: center; }
    .header-bottom .inner .items .icon img { object-fit: contain; max-height: 2.8rem; }
    .header-bottom .inner .items .label { display: block; font-weight: 500; color: var(--color2); line-height: 1.2; margin-bottom: 0; white-space: nowrap; }
    
    @media (max-width: 1200px) {
        .header-bottom .inner .items .icon { height: 2.5rem; }
        .header-bottom .inner .items .icon img { max-height: 2.5rem; }
    }
    @media (max-width: 992px) {
        .header-bottom .inner .items { min-width: calc(100%/5.2 - 0.625rem); }
    }
    @media (max-width: 768px) {
        .header-bottom .inner { gap: 0.4rem; }
        .header-bottom .inner .items { min-width: calc(100%/4.1 - 0.4rem); }
    }
    @media (max-width: 580px) {
        .header-bottom .inner { flex-wrap: wrap; }
        .header-bottom .inner .items { width: calc(100%/3 - 0.4rem); padding: 0.313rem; min-width: none; flex-direction: row; text-align: left; }
        .header-bottom .inner .items .icon { width: 1.75rem; text-align: left; }
        .header-bottom .inner .items .label { white-space: wrap; font-size: 0.75rem; }
    }


    /* wrap ads */
    .ads-container { position: relative; text-align: center; background: var(--light); padding: 0.5rem; }
    .ads-container:has(.ads-label) { padding-top: 0.25rem; }
    .ads-container.ads-container-horizontal { min-height: 250px; }
    .ads-container.ads-container-square { min-width: 300px; min-height: 250px; }
    .ads-container:before { content: 'Advertisement'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.75rem; color: var(--color4); z-index: 0; }
    .ads-container:has(.ads-label):before { display: none; }
    .ads-container .ads-label { font-size: 0.7rem; line-height: 1; color: var(--color3); width: 100%; text-align: right; margin-bottom: 0.15rem; padding: 0 0.313rem; }
    .ads-container .ads-img { position: relative; object-fit: contain; width: 100%; max-width: 100%; z-index: 2; }
    
    .wrap-ads { position: relative; overflow: hidden; min-height: 252px; transform: translateX(0); text-align: center; border: 1px solid red; }
    .wrap-ads .img-ads { width: 100%; max-width: 100% !important; object-fit: contain; margin: auto; }
    .wrap-ads .ads-items:not(:last-child) { margin-bottom: 0.625rem; }

    .wrap-iklan { position: relative; overflow: hidden; transform: translateX(0); text-align: center; background-color: rgb(232 231 236); padding: 0px 16px 16px 16px; }
    .wrap-iklan .img-iklan { width: 100%; max-width: 100% !important; object-fit: contain; margin: auto;  }
    .wrap-iklan .ads-caption { text-align: right; margin-bottom: 2px; margin-top: 2px; color: var(--text2); font-size: 14px; font-weight: 600;}
    
    @media (max-width: 992px) {
        .ads-container.ads-container-horizontal { min-height: 200px; }
    }
    @media (max-width: 768px) {
        .ads-container.ads-container-horizontal { min-height: 160px; }
    }
    @media (max-width: 580px) {
        .ads-container.ads-container-horizontal { min-height: 80px; }

        .wrap-iklan { padding: 0px 10px 10px 10px; }
        .wrap-iklan .ads-caption { font-size: 10px !important; margin-bottom: 0px; margin-top: 0px; }
    }

    @media(min-width: 500px) { .ads_responsive { width: 468px; height: 60px; } }
    @media(min-width: 800px) { .ads_responsive { width: 728px; height: 90px; } }


    /* highlight section */
    .highlight-section .highlight-slider .pagination-area .swiper-pagination { bottom: -0.75rem !important; text-align: right; }
    .highlight-section .highlight-slider .post .post-title { -webkit-line-clamp: 2 !important; } 
    .highlight-section .highlight-list .list-post { gap: 1rem; }
    
    @media (max-width: 768px) {
        .highlight-section .highlight-list .list-post { gap: 0.75rem; flex-direction: row; flex-wrap: nowrap; overflow-y: hidden; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; }
        .highlight-section .highlight-list .list-post .list-post-items { flex-shrink: 0; width: calc(100%/3.3 - 0.75rem); }
    }
    @media (max-width: 580px) {
        .highlight-section .highlight-slider .post .post-body .post-category,
        .highlight-section .highlight-slider .post .post-body .post-meta-info span { 
            font-size: 0.75rem; 
        }
    }
    @media (max-width: 480px) {
        .highlight-section .highlight-list .list-post .list-post-items { width: calc(100%/2.3 - 0.75rem); }
    }
    @media (max-width: 340px) {
        .highlight-section .highlight-list .list-post .list-post-items { width: calc(100%/1.3 - 0.75rem); }
    }


    /* trending section */
    .trending-section { background: var(--gradient-accent); }

    @media (max-width: 768px) {
        .trending-section .list-post { flex-direction: row; flex-wrap: nowrap; overflow-y: hidden; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; }
        .trending-section .list-post .list-post-items { flex-shrink: 0; width: calc(100%/3.3 - 0.75rem); }
    }
    @media (max-width: 480px) {
        .trending-section .list-post .list-post-items { width: calc(100%/2.3 - 0.75rem); }
    }
    @media (max-width: 380px) {
        .trending-section .list-post .list-post-items { width: calc(100%/1.3 - 0.75rem); }
    }


    /* hype section */
    .hype-section { background: var(--gradient-second); }
    .hype-section .hype-body .swiper-container { margin-bottom: 2.5rem; }

    @media (max-width: 768px) {
        .hype-section .hype-body .swiper-container { margin-bottom: 0.938rem; }
        .hype-section .hype-body .swiper-container .swiper-pagination { display: none; }
    }
    @media (max-width: 580px) {
        .hype-section { background: var(--gradient-second-2); }
    }

    /* hype cta */
    .hype-cta { background: var(--background); padding: 0.75rem 1rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
    .hype-cta .cta-body { width: auto; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; }
    .hype-cta .cta-body .cta-image { flex-shrink: 0; }
    .hype-cta .cta-body .cta-image img { max-width: 3.125rem;  max-height: 3.125rem; object-fit: contain; }
    .hype-cta .cta-body .cta-content h4 { font-weight: 600; line-height: 1.3; color: var(--color); margin-bottom: 0.25rem; }
    .hype-cta .cta-action { flex-shrink: 0; }

    @media (max-width: 992px) {
        .hype-cta { flex-direction: column; align-items: flex-start; }
        .hype-cta .cta-body { align-items: flex-start; }
    }
    @media (max-width: 480px) {
        .hype-cta { padding: 1.25rem 1rem; align-items: center; gap: 0.625rem; }
        .hype-cta .cta-body { flex-direction: column; align-items: center; text-align: center; }
    }
    

    /* flash news */
    .flash-news { 
        position: fixed; 
        z-index: 55; 
        left: 1.25rem; 
        bottom: 1.25rem; 
        background: linear-gradient(135deg, #7C66D7 0%, #4A3D81 100%);
        padding: 0.75rem 0.75rem 1rem 0.75rem; 
        border-radius: 0.5rem; 
        box-shadow: var(--shadow-xs); 
        width: 100%; 
        max-width: 360px; 
        opacity: 0;
        visibility: hidden;
        display: none;
        -webkit-transform: translateX(20%);
        transform: translateX(20%);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .show .flash-news { opacity: 1; visibility: visible; display: block; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .flash-news .close { position: absolute; top: -1.75rem; right: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--dark); box-shadow: none; border: 0; opacity: 0.8; display: flex; align-items: center; justify-content: center; text-align: center; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .flash-news .close:before { content: '\e8f6'; font-family: 'feather'; font-size: 1rem; line-height: 1; color: var(--color-white); transform: translateY(0.03rem); }
    .flash-news .close:hover { opacity: 1; transform: scale(0.95); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .flash-news .lb { line-height: 1; letter-spacing: 0.04rem; color: var(--background); opacity: 0.9; margin-bottom: 0.25rem; }
    .flash-news .swiper-pagination { bottom: -1rem; }

    @media (max-width: 580px) {
        .flash-news { left: 0.625rem; bottom: 0.625rem; width: 100%; max-width: calc(100% - 0.625rem*2); padding: 0.45rem; }
    }


    /* sidebar */
    .sidebar { position: relative; }
    .sidebar .sidebar-widget:not(:last-child) { margin-bottom: 2rem; }
    .sidebar .sidebar-widget-footer > div:not(:last-child) { margin-bottom: 1rem; }
    .sidebar .sidebar-widget-footer .brand-img { object-fit: contain; max-height: 1.875rem; }
    .sidebar .sidebar-widget-footer .social-media { gap: 1rem; }


    /* auth section */
    .auth-section .inner { position: relative; width: 100%; max-width: 28.275rem; margin: auto; padding: 1.875rem; border-radius: 0.625rem; border: 1px solid var(--border); }
    .auth-section .inner .section-title { text-align: center; }
    .auth-section .inner .divider { text-align: center; position: relative; margin: 1.5rem 0; }
    .auth-section .inner .divider::before { content: ''; position: absolute; left: 0; top: 50%; right: 0; transform: translateY(-50%); border-top: 1px solid var(--border2); }
    .auth-section .inner .divider span { background: var(--white); padding: 0 0.938rem; position: relative; font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02em; }
    .auth-section .inner .login-social-media .btn { width: 100%; box-shadow: none; background: var(--light); border: 1px solid #4285F4; color: #4285F4; }
    .auth-section .inner .login-social-media .btn svg { width: 1.125rem; margin-right: 0.25rem; }

    @media (max-width: 580px) {
        .auth-section .inner { padding: 1.875rem 0.938rem; }
    }

    /* interest */
    .interest-area { display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; }
    .interest-area .interest-item { width: calc(100%/6 - 1rem); height: auto; }
    .interest-area .interest-item .radio-tile:before { top: 0.313rem; right: 0.313rem; width: 1.563rem; height: 1.563rem; font-size: 1rem; line-height: 1.4; }
    .interest-area .interest-item .radio-tile .radio-image { position: relative; width: 100%; height: 4.5rem; text-align: center; }
    .interest-area .interest-item .radio-tile .radio-image img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
    .interest-area .interest-item .radio-tile .radio-label { margin-bottom: 0; }

    @media (max-width: 992px) {
        .interest-area .interest-item { width: calc(100%/4 - 1rem); }
    }
    @media (max-width: 768px) {
        .interest-area .interest-item { width: calc(100%/3 - 1rem); }
        .interest-area .interest-item .radio-tile .radio-image { height: 3.5rem; }
    }
    @media (max-width: 580px) {
        .interest-area { gap: 0.625rem; }
        .interest-area .interest-item { width: calc(100%/2 - 0.625rem); }
        .interest-area .interest-item .radio-tile .radio-image { height: 2.5rem; }
    }


    /* author latest */
    .author-latest-area .author-latest-item { position: relative; margin-bottom: 1.875rem; width: 100%; padding-bottom: 0.625rem; }
    .author-latest-area .author-latest-item:before { content: ''; position: absolute; left: 0; bottom: calc(-1.875rem/2); width: 100%; height: 1px; border-radius: 0.5rem; background: var(--border); }
    .author-latest-area .section-title .title.style-1:before { height: 1.125rem; }
    .author-latest-area .post-author { align-items: center; }
    .author-latest-area .post-author .author-head { width: 3rem; height: 3rem; }
    .author-latest-area .post-author .author-body { min-width: 100px; }
    .author-latest-area .post-author .author-body .author-role { line-height: 1.3; } 

    @media (max-width: 580px) {
        .author-latest-area .post-author .author-head { width: 2.5rem; height: 2.5rem; }
    }


    /* author header */
    .author-header { position: relative; margin-bottom: 2.5rem; }
    .author-header:before { content: ''; position: absolute; bottom: calc(-2.5rem/2); left: 0; width: 100%; height: 1px; background: var(--accent2); }
    .author-header .post-author { width: 100%; align-items: center; margin-bottom: 1rem; }
    .author-header .post-author .author-head { width: 3rem; height: 3rem; }
    .author-header .post-author .author-body { width: 100%; }
    .author-header .author-action-area { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
    .author-header .author-action-area .author-action { flex-shrink: 0; }
    .author-header .author-action-area .author-action .btn { font-size: 0.875rem; letter-spacing: 0; }

    @media (max-width: 580px) {
        .author-header .post-author { margin-bottom: 0; }
        .author-header .post-author .author-head { width: 2.5rem; height: 2.5rem; }
        .author-header .author-action-area { align-items: flex-start; flex-direction: column; gap: 0.625rem; margin-bottom: 1rem; }
    }


    /* subscribe section */
    .subscribe { position: relative; overflow: hidden; border-radius: 0.5rem; }
    .subscribe .subscribe-content { padding: 1.6vw; }
    .subscribe .subscribe-content h2 { font-weight: bold; color: var(--white); line-height: 1.4; }
    .subscribe .subscribe-content p { font-weight: normal; color: var(--white); margin-bottom: 0; }

    @media (max-width: 1200px) {
        .subscribe .subscribe-content { padding: 2vw; }
        .subscribe .subscribe-content h2 { font-size: 1.5rem; }
    }
    @media (max-width: 991px) {
        .subscribe .subscribe-content { padding: 4vw 3vw; }
        .subscribe .subscribe-cover { object-position: 55% 50%; }
    }
    @media (max-width: 768px) {
        .subscribe .subscribe-content { padding: 6vw 4vw; }
        .subscribe .subscribe-cover { object-position: 64% 50%; }
    }
    @media (max-width: 480px) {
        .subscribe .subscribe-content { padding: 1.875rem 0.625rem; }
        .subscribe .subscribe-content h2 { font-size: 1.25rem; }
    }


    .subscribe.style-2 .logo-img { max-width: 200px; /*filter: gray; -webkit-filter: grayscale(1); filter: grayscale(1);*/ }
    .subscribe.style-2 h2 { margin-bottom: 0; }
    .subscribe.style-2 p { margin-bottom: 0; }
    .subscribe.style-2 .btn { box-shadow: 0 0.313rem 0.625rem rgba(74, 58, 255, 0.2); }
    .subscribe.style-2 .btn:hover, .subscribe.style-2 .btn:focus { box-shadow: 0 0.125rem 0.313rem rgba(74, 58, 255, 0.1); transform: scale(1.02); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

    @media (max-width: 1200px) {
        .subscribe .subscribe-content h2 { font-size: 1.3rem; }
    }
    @media (max-width: 991px) {
        .subscribe.style-2 .logo-img { max-width: 200px; margin-bottom: 1.25rem; }
        .subscribe.style-2 h2 { margin-bottom: 0.625rem; }
        .subscribe.style-2 p { margin-bottom: 0; }
    }


    .dr-list { position: relative; overflow: hidden; }
    .dr-list .dr-item { display: flex; flex-direction: row; align-items: flex-start; }
    .dr-list .dr-item:not(:last-child) { margin-bottom: 1.875rem; }
    .dr-list .dr-item div { font-weight: normal; font-size: 1rem; color: var(--text); }
    .dr-list .dr-item .dr-label { width: 40%; }
    .dr-list .dr-item .dr-name { width: 50%; font-weight: bold; }


    .list-note-article .note-item { position: relative; }
    .list-note-article .note-item:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--light); opacity: 0; visibility: hidden; }
    .list-note-article .note-item:not(:last-child) { padding-bottom: 0.925rem; margin-bottom: 0.925rem; }
    .list-note-article .note-item:not(:last-child):before { opacity: 1; visibility: visible; }
    .list-note-article .note-item .note-item-name { font-size: 1rem; line-height: 1.3; color: var(--dark); margin-bottom: 0.313rem; }
    .list-note-article .note-item .note-item-message { font-weight: normal; font-size: 0.875rem; line-height: 160%; color: var(--text2); margin-bottom: 0; }
    .list-note-article .note-item .note-item-date { font-weight: normal; font-size: 0.875rem; color: var(--text2); margin-bottom: 0.313rem; }


    .contact-area .contact-maps { position: relative; overflow: hidden; width: 100%; height: 300px; margin-bottom: 1.25rem; }
    .contact-area .contact-maps iframe { border: 0; height: 100%; width: 100%; border-radius: 0.5rem; }
    .contact-area .contact-body { padding: 1.875rem 0; }
    .contact-area .contact-info { width: 85%; }
    .contact-area .contact-info .contact-heading { margin-bottom: 1.25rem; }
    .contact-area .contact-info .media-contact { margin-bottom: 1.875rem; display: flex; align-items: flex-start; }
    .contact-area .contact-info .media-contact .icon-contact { font-size: 30px; line-height: 1; color: var(--accent); margin-right: 15px; }
    .contact-area .contact-info .media-contact h3 { font-weight: bold; margin-bottom: 0.313rem; line-height: 1; }
    .contact-area .contact-info .media-contact p { font-weight: normal; font-size: 1rem; color: var(--text1); margin-bottom: 0; }
    .contact-area .contact-info .media-contact .img-app-download { max-height: 55px; }
    .contact-area .contact-form .control-label { letter-spacing: 0.02rem; }


    /* ads section */
    .wrap-ads-step { position: relative; overflow: hidden; width: 100%; border-radius: 0.5rem; background: var(--background); margin-bottom: 1.875rem; }
    .wrap-ads-step .nav-tabs { display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; flex-direction: row; width: 100%; border: 0; }
    .wrap-ads-step .nav-tabs li { width: calc(100%/3); height: auto; }
    .wrap-ads-step .nav-tabs li a { height: 100%; opacity: 0.45; cursor: not-allowed; position: relative; overflow: hidden; border-radius: 0.5rem; background: var(--light); padding: 0.625rem; text-align: center; border: 0; }
    .wrap-ads-step .nav-tabs li a span { line-height: 1.2; }
    .wrap-ads-step .nav-tabs li a .step-icon { margin-right: 0.313rem; }
    .wrap-ads-step .nav-tabs li a.step-active { opacity: 1; background: var(--gradient-accent); }
    .wrap-ads-step .nav-tabs li a.step-active span { color: var(--color-white) !important; }
    .wrap-ads-step .nav-tabs li a.step-active .step-icon path { fill: var(--color-white) !important; }

    @media (max-width: 992px) {
        .wrap-ads-step .nav-tabs li a .step-icon { margin-right: 0; margin-bottom: 0.313rem; }
        .wrap-ads-step .nav-tabs li a span { display: block; width: 100%; }
    }
    @media (max-width: 580px) {
        .wrap-ads-step .nav-tabs li a { padding: 0.625rem 0.313rem; }
        .wrap-ads-step .nav-tabs li a .step-icon { width: 1.875rem; height: 1.875rem; }
    }

    .ads-section .ads-thumbnails { position: relative; }
    .ads-section .ads-thumbnails .img-thumbnails { max-width: 400px; }
    .ads-section .ads-thumbnails .section-title { max-width: 450px; transform: translateY(-50px); }
    .ads-section .ads-thumbnails .section-title .title { max-width: 370px; }
    .ads-section .ads-thumbnails .section-title .title span { color: var(--accent); }

    .ads-section .form-style .form-bottom { display: flex; align-items: center; justify-content: space-between; text-align: right; }
    
    .checklist-premium { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; background: var(--accent); border-radius: 50%; }
    .checklist-premium i { font-size: 1rem; color: var(--color-white); }

    @media (max-width: 992px) {
        .ads-section .ads-thumbnails .img-thumbnails { max-width: 300px; }
        .ads-section .ads-thumbnails .section-title { transform: translateY(0); }
        .ads-section .ads-thumbnails .section-title .title { max-width: 100%; }
    }
    @media (max-width: 768px) {
        .ads-section .ads-thumbnails .img-thumbnails { max-width: 80%; }
    }

    .ads-preview .wrap-preview { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.625rem; }
    .ads-preview .wrap-preview .img { width: 100%; height: 90px; margin-bottom: 0.313rem; border-radius: 0.313rem; }
    .ads-preview .wrap-preview .preview-layout { position: relative; width: 100%; display: flex; justify-content: space-between; }
    .ads-preview .wrap-preview .preview-layout-lg { width: 68%; }
    .ads-preview .wrap-preview .preview-layout-sm { width: 28%; }

    .ads-preview .wrap-preview .preview-layout.mobile { display: block; max-width: 60%; margin: auto; }


    .wrap-voucher { position: relative; overflow: hidden; width: 100%; border-radius: 0.5rem; padding: 0.625rem 0.875rem; display: inline-block; border: 1px solid var(--border2); }
    .wrap-voucher:hover { border-color: var(--accent); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
    .wrap-voucher:hover span { color: var(--dark); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
    .wrap-voucher:hover span.arrow i { color: var(--accent); }
    .wrap-voucher .icon-voucher { max-height: 18px; max-width: 65px; margin-right: 0.5rem; }
    .wrap-voucher span { line-height: 1.3; color: var(--text2); }
    .wrap-voucher span.arrow { position: absolute; top: 32%; right: 0.865rem; }
    .wrap-voucher span.arrow i { font-size: 1rem; color: var(--text1); }


    .list-voucher-item { position: relative; width: 100%; }
    .list-voucher-item .wrap-voucher { display: flex; align-items: center; justify-content: space-between; }
    .list-voucher-item .wrap-voucher .voucher { padding-right: 1.25rem; }
    .list-voucher-item .wrap-voucher .voucher .voucher-kode { font-weight: 700; font-size: 1.125rem; color: var(--color); margin-bottom: 0; }
    .list-voucher-item .wrap-voucher .voucher .voucher-disc { color: var(--color2); margin-bottom: 0; }


    /* row custome */
    .row-sidebar-custome .col-large { -ms-flex: 0 0 72%; flex: 0 0 72%; max-width: 72%; }
    .row-sidebar-custome .col-small { -ms-flex: 0 0 28%; flex: 0 0 28%; max-width: 28%; }

    @media (max-width: 991px) {
        .row-sidebar-custome .col-large { -ms-flex: 0 0 68%; flex: 0 0 68%; max-width: 68%; }
        .row-sidebar-custome .col-small { -ms-flex: 0 0 32%; flex: 0 0 32%; max-width: 32%; }
    }
    @media (max-width: 768px) {
        .row-sidebar-custome .col-large { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
        .row-sidebar-custome .col-small { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    }
    @media (max-width: 768px) {
        .row-mobi-style .col:nth-child(odd) { padding-right: 0.5rem; }
        .row-mobi-style .col:nth-child(even) { padding-left: 0.5rem; }
    }


    /* intro section */
    .intro-section { position: relative; overflow: hidden; width: 100%; height: 94vh; z-index: 1; }
    .intro-section .intro-slider .items { position: relative; width: 100%; height: 100vh; border-radius: 0.313rem; overflow: hidden; display: flex; align-items: center; box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.10); }
    .intro-section .intro-slider .items .img-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 1; }
    .intro-section .intro-slider .items:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        z-index: 3;
        background: -webkit-linear-gradient(90deg, rgba(95, 71, 193, 0.95) 65%, rgba(95, 71, 193, 0) 100%);
        background: -o-linear-gradient(90deg, rgba(95, 71, 193, 0.95) 65%, rgba(95, 71, 193, 0) 100%);
        background: linear-gradient(90deg, rgba(95, 71, 193, 0.95) 65%, rgba(95, 71, 193, 0) 100%);
    }
    .intro-section .intro-slider .items .content { position: relative; left: 6.5vw; max-width: 45vw; margin-top: -20vh; z-index: 4; }
    .intro-section .intro-slider .items .content p { color: #F2F2F2; }
    .intro-section .intro-slider .items .content h2 { font-size: 4vw; line-height: 1.3; color: #F2F2F2; }

    .intro-section .wrap-slider-nav { position: absolute; top: 70vh; right: 6.5vw; z-index: 5; }
    .intro-section .wrap-slider-nav.left { left: 6.5vw; }
    .intro-section .wrap-slider-nav.right { right: 6.5vw; }
    .intro-section .wrap-slider-nav .slider-nav-2 { position: relative; }

    @media (max-width: 1200px) {
        .intro-section .wrap-slider-nav { top: 72vh; }
    }
    @media (max-width: 768px) {
        .intro-section .intro-slider .items .content { left: 0vw; max-width: 55vw; }
        .intro-section .intro-slider .items .content h2 { font-size: 5vw; }

        .intro-section .wrap-slider-nav { top: 74vh; }
        .intro-section .wrap-slider-nav.left { left: 0vw; }
        .intro-section .wrap-slider-nav.right { right: 0vw; }
    }
    @media (max-width: 480px) {
        .intro-section { height: calc(73vh); }
        .intro-section .intro-slider .items { align-items: flex-start; }
        .intro-section .intro-slider .items .content { max-width: 85vw; margin-top: 15vh; }
        .intro-section .intro-slider .items .content h2 { font-size: 1.625rem; }

        .intro-section .wrap-slider-nav { top: 70vh; }
    }


    /* news section */
    .news-section { position: relative; overflow: hidden; padding-top: 0.625rem; }
    .news-section .col { padding-right: 0; }
    .news-section .col:first-child { margin-bottom: 1.25rem; }
    .news-section .news-ads-sidebar .ads-img { position: relative; overflow: hidden; border-radius: 0.25rem; }
    .news-section .news-ads-sidebar .ads-img:not(:last-child) { margin-bottom: 0.938rem; }

    @media (max-width: 992px) {
        .news-section .col { margin-bottom: 0.625rem; }
    }
    @media (max-width: 768px) {
        .news-section .news-ads-sidebar {
            position: relative;
            display: inline-flex; 
            -ms-flex-direction: row;
            flex-direction: row;
            flex-wrap: inherit;
            overflow-y: hidden;
            overflow-x: auto;
            width: 100%;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .news-section .news-ads-sidebar .ads-img { position: relative; display: block; }
        .news-section .news-ads-sidebar .ads-img:not(:last-child) { margin-bottom: 0.938rem; margin-right: 0.625rem; }
    }
    @media (max-width: 575px) {
        .news-section .col:nth-child(odd) { padding-right: 15px; }
        .news-section .col:nth-child(even) { padding-left: 15px; }
    }


    /* post gallery */
    .post-gallery .post-head { overflow: hidden; border-radius: 0.313rem; }
    .post-gallery .post-head .post-img { height: 14rem; background: var(--white); }
    .post-gallery .post-head .video-container { 
        position: relative; 
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--white); 
        width: 100%;
        height: 180px; 
    }
    .post-gallery .post-head .video-container .video-cover { width: 100%; height: 100%; display: block; }

    .post-gallery .post-head .video-container .play-button { 
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border-radius: 50%; 
        width: 4rem; 
        height: 4rem;
        padding: 0.25rem;
        background: var(--accent);
        z-index: 3;
    }
    .post-gallery .post-head .video-container .play-button i { font-size: 26px; margin-left: 0.125rem; color: var(--white); }


    .heading-hype { position: relative; margin-bottom: 2.5rem; }
    .heading-hype .section-heading { max-width: 410px; }

    #share-modal .post-detail-share { flex-direction: column; gap: 0.625rem; margin: 1rem; }
/* ------------------------------------ end section ------------------------------------ */


/* ------------------------------------ loader ------------------------------------ */
    .sk-light { width: 100%; background-color: #F4F4F4; border-radius: 0.5rem; }

    .cload-2 {
        width: 100%;
        background-color: #ccc;
        border-radius: 0.5rem;
        background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 80px, #F4F4F4 200px);
        background-size: 800px;
        animation: shine-avatar 1.45s infinite linear; 
    }

    @keyframes shine-avatar {
        0% { background-position: -150px; }
        60% { background-position: 150px; } 
        100% { background-position: 540px; }
    }
    
    .cload {
        width: 100%;
        border-radius: 0.5rem;
        background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) rgba(244, 244, 244, 1);
        background-size: 200% 100%;
        background-position-x: 180%;
        -webkit-animation-name: cloader;
        animation-name: cloader;
        -webkit-animation-duration: 1.45s;
        animation-duration: 1.45s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    .cload-bg-2 { 
        background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) rgba(244, 244, 244, 0.4); 
        background-size: 200% 100%;
        background-position-x: 180%;
        -webkit-animation-name: cloader;
        animation-name: cloader;
        -webkit-animation-duration: 1.45s;
        animation-duration: 1.45s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    @-webkit-keyframes cloader {
        to { background-position-x: -20%; }
    }
    @keyframes cloader {
        to { background-position-x: -20%; }
    }

    .cload-20 { width: 20%; }
    .cload-30 { width: 30%; }
    .cload-40 { width: 40%; }
    .cload-50 { width: 50%; }
    .cload-60 { width: 60%; }
    .cload-70 { width: 70%; }
    .cload-80 { width: 80%; }
    .cload-90 { width: 90%; }
    .cload-100 { width: 100%; }

    .cload-xxs { height: 0.625rem; border-radius: 0.35rem; }
    .cload-xs { height: 0.75rem; border-radius: 0.4rem; }
    .cload-sm { height: 0.875rem; border-radius: 0.45rem; }
    .cload-md { height: 1rem; }
    .cload-lg { height: 1.25rem; }
    .cload-xl { height: 2.5rem; }
    .cload-xxl { height: 3.2rem; }
    .cload-xxxl { height: 3.8rem; }

    .cload-img-lg { width: 100%; }
    .cload-img-sm { width: 65px; height: 65px; }
    .cload-img-header-ads { width: 100%; height: 200px; }
    .cload-img-vertical-ads { width: 100%; height: 120px; }

    .cload-left { left: 0; margin-left: 0; }
    .cload-center { left: 0; right: 0; margin: auto; }
    .cload-right { right: 0; margin-right: 0; }

    .cload-text-xs { width: 20%; height: 15px; margin-bottom: 5px; }
    .cload-text-sm { width: 40%; height: 15px; margin-bottom: 5px; }
    .cload-text { width: 60%; height: 15px; margin-bottom: 5px; }
    .cload-text-md { width: 70%; height: 15px; margin-bottom: 5px; }
    .cload-text-lg { width: 80%; height: 15px; margin-bottom: 5px; }
    .cload-text-xl { width: 90%; height: 15px; margin-bottom: 5px; }
    .cload-text-xxl { width: 100%; height: 15px; margin-bottom: 5px; }

    .text-h-xxs { height: 0.875rem; }
    .text-h-xs { height: 1rem; }
    .text-h-sm { height: 1.25rem; }
    .text-h-md { height: 1.563rem; }
    .text-h-lg { height: 1.875rem; }

    .img-h-xs { height: 80px; }
    .img-h-sm { height: 100px; }
    .img-h-md { height: 120px; }
    .img-h-lg { height: 150px; }
/* ------------------------------------ end loader ------------------------------------ */


/* ------------------------------------ post detail ------------------------------------ */ 
    .reset-style,
    .reset-style *:not(a),
    .reset-style p,
    .reset-style p span,
    .reset-style ul,
    .reset-style ul li,
    .reset-style ul li p,
    .reset-style ul li p span {
        font-family: 'Inter', sans-serif !important; 
        font-size: 1rem !important; 
        line-height: 1.6 !important; 
        color: var(--color3) !important; 
    }
    .reset-style a, .reset-style a * { color: var(--second) !important; }
    .reset-style iframe { width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important; border-radius: 0.5rem; position: relative; overflow: hidden; }

    .blur-text { color: transparent !important; text-shadow: 0 0 8px #000; }


    .post-detail { position: relative; overflow: hidden; width: 100%; }
    .post-detail .post-category { margin-bottom: 0.5rem; }
    .post-detail .post-title { font-weight: 800; line-height: 1.4; color: var(--color); margin-bottom: 0.625rem; }
    .post-detail .post-subtitle { font-weight: 400; font-style: italic; color: var(--color3); }
    .post-detail .post-sponsor { margin-top: 0.75rem; }

    .post-detail .post-description { margin-bottom: 1rem; }
    .post-detail .post-description, 
    .post-detail .post-description *:not(a) { 
        font-family: var(--font1) !important; 
        font-size: 1rem !important; 
        line-height: 160% !important; 
        color: var(--color) !important; 
    }
    .post-detail .post-description p { margin-bottom: 0.875rem !important; }
    .post-detail .post-description a, .post-detail .post-description a * { color: var(--second) !important; }
    .post-detail .post-description .enter { display: block; height: 0.875rem; }
    .post-detail .post-description iframe { width: 100% !important; height: auto !important; aspect-ratio: 16/9 !important; border-radius: 0.5rem; position: relative; overflow: hidden; }
    .post-detail .post-description img { width: 100% !important; }

    @media (max-width: 580px) {
        .post-detail .post-description *:not(a) { font-size: 0.938rem !important;  }
    }

    .post-detail .post-info { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.313rem; margin-bottom: 0.75rem; }

    .post-detail .post-detail-content { margin-top: 1.5rem; }

    .post-detail .post-detail-tags { margin-top: 1.25rem; margin-bottom: 0.75rem; }

    /* image */
    .post-detail .post-detail-img { margin-bottom: 1.5rem; }
    .post-detail .post-detail-img .post-img { width: 100%; height: 100%; object-fit: contain; object-fit: top center; margin-bottom: 0.313rem; border-radius: 0.5rem; overflow: hidden; }
    .post-detail .post-detail-img .post-img-info { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.45rem; }
    .post-detail .post-detail-img .post-img-info p { color: var(--color4); margin-bottom: 0; }

    /* share */
    .post-detail-share { display: flex; align-items: center; justify-content: space-between; gap: 0.313rem; margin: 1.5rem 0; }
    .post-detail-share label { font-weight: 600; }
    .post-detail-share .post-social-share { gap: 0.625rem; }

    /* author */
    .post-detail .post-detail-author { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.5rem; }
    .post-detail .post-detail-author > div { width: calc(100%/2 - 1.25rem); position: relative; }
    .post-detail .post-detail-author > div:not(:last-child):before { content: ''; position: absolute; top: 0; bottom: 0; right: -1.25rem; margin: auto; width: 1px; height: 80%; background: var(--border); }
    .post-detail .post-detail-author .post-author .author-head { width: 2.5rem; height: 2.5rem; background: var(--light); }
    .post-detail .post-detail-author .post-author .author-name { font-weight: 700; color: var(--color2); }
    .post-detail .post-detail-author .post-author .author-role { margin-bottom: 0; }

    /* text speech */
    .post-detail .post-textspeech { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1rem 1.25rem; background: #F4F7FF; border-radius: 0.5rem; }
    .post-detail .post-textspeech p { font-weight: 600; color: var(--color3); margin-bottom: 0; }
    .post-detail .post-textspeech .content { width: auto; }
    .post-detail .post-textspeech .action { flex-shrink: 0; }
    .post-detail .post-textspeech .action .btn { padding: 0.625rem 1rem; width: 8.625rem; font-size: 0.75rem; white-space: nowrap; }
    .post-detail .post-textspeech .action .btn .icon { margin-right: 0.313rem; transform: translateY(-1px); }
    .post-detail .post-textspeech .action .btn .icon path { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .post-detail .post-textspeech .action .btn:hover .icon path { fill: var(--color-white); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    
    @media (max-width: 992px) {
        .post-detail .post-textspeech { flex-direction: column; gap: 0.625rem; text-align: center; }
    }
    @media (max-width: 580px) {
        .post-detail .post-textspeech { padding: 1rem; }
    }

    /* listicle */
    .post-detail .post-detail-listicle { display: flex; align-items: flex-start; flex-direction: column; gap: 1.25rem; margin: 1rem 0; }
    .post-detail .post-detail-listicle .post-detail-listicle-item { display: block; width: 100%; }
    .post-detail .post-detail-listicle .listicle-title { font-weight: 700 !important; color: var(--color2) !important; margin-bottom: 0.625rem; }
    .post-detail .post-detail-listicle .post-detail-img { margin-bottom: 0.625rem; }

    /* read more */
    .post-detail .post-detail-readmore { background: #FAFAFA; border-radius: 0.5rem; padding: 1rem; }
    .post-detail .post-detail-readmore label { font-weight: 700; line-height: 1; color: var(--color2); margin-bottom: 0.5rem; }
    .post-detail .post-detail-readmore .readmore-item { list-style: disc outside none; display: list-item; margin-left: 1rem; padding: 0.25rem 0; }
    .post-detail .post-detail-readmore .readmore-item::marker { transform: translateY(-1px); color: var(--accent); }
    .post-detail .post-detail-readmore a { font-weight: 700; color: var(--accent); }

    /* premium article */
    .post-premium-area { position: relative; overflow: hidden; }
    .post-premium-area:after { 
        content: ''; 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; 
        height: 100%; 
        background-image: -moz-linear-gradient(0deg, var(--background) 50%, rgba(248, 248, 248, 0.1) 100%);
        background-image: -ms-linear-gradient(0deg, var(--background) 50%, rgba(248, 248, 248, 0.1) 100%);
        background-image: -webkit-linear-gradient(0deg, var(--background) 50%, rgba(248, 248, 248, 0.1) 100%);
        background-image: -o-linear-gradient(0deg, var(--background) 50%, rgba(248, 248, 248, 0.1) 100%);
        background-image: linear-gradient(0deg, var(--background) 50%, rgba(248, 248, 248, 0.1) 100%);
        z-index: 0;
        display: none;
    }
    .post-premium-area.active { height: 750px; }
    .post-premium-area.active:after { display: block; z-index: 20; }

    .post-premium-area .post-detail-premium { z-index: 25; position: absolute; left: 0; right: 0; bottom: 1.875rem; width: 100%; max-width: 480px; margin: auto; padding: 1.25rem; background: var(--background); border: 1px solid var(--border); border-radius: 0.5rem; text-align: center; }
    .post-premium-area .post-detail-premium h2 { font-weight: 600; color: var(--color2); margin-bottom: 0.625rem; }
    .post-premium-area .post-detail-premium .post-author { margin-bottom: 1rem; }
    .post-premium-area .post-detail-premium .post-author .author-name { color: var(--color2); }
    .post-premium-area .post-detail-premium .post-premium-subscribe { position: relative; padding: 0.75rem 1rem; border-radius: 0.5rem; width: 100%; max-width: 400px; margin: auto; margin: 2rem auto; display: flex; align-items: center; justify-content: space-between; border: 2px solid var(--second); gap: 1rem; }
    .post-premium-area .post-detail-premium .post-premium-subscribe .label { position: absolute; top: -13px; left: 1rem; background: var(--second); border-radius: 0.313rem; padding: 0.2rem 0.5rem; font-weight: 500; font-size: 0.75rem; color: var(--color-white); }
    .post-premium-area .post-detail-premium .post-premium-subscribe .content { text-align: left; }
    .post-premium-area .post-detail-premium .post-premium-subscribe .content .price { font-weight: 700; color: var(--second); margin-bottom: 0; }
    .post-premium-area .post-detail-premium .post-premium-subscribe .content .price span { font-weight: 500; color: var(--text); }
    .post-premium-area .post-detail-premium .post-premium-subscribe .action { flex-shrink: 0; }

    @media (max-width: 580px) {
        .post-premium-area .post-detail-premium .post-premium-subscribe { padding: 0.5rem 0.5rem;}
        .post-premium-area .post-detail-premium .post-premium-subscribe .label { padding: 0.15rem 0.4rem; }
        .post-premium-area .post-detail-premium .post-premium-subscribe .content .price { letter-spacing: -1px; }
    }

    /* reaction */
    .post-detail .post-detail-reaction { margin-top: 0.75rem; margin-bottom: 1.25rem; }
    .post-detail .post-detail-reaction .reaction-area { display: flex; align-items: stretch; justify-content: flex-start; gap: 0.313rem; }
    .post-detail .post-detail-reaction .reaction-area .reaction-item { width: calc(100%/5); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.15rem; background: var(--white); border-radius: 0.5rem; padding: 0.625rem; border: 1px solid var(--border); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .post-detail .post-detail-reaction .reaction-area .reaction-item .reaction-thumb { width: 2rem; height: 2rem; }
    .post-detail .post-detail-reaction .reaction-area .reaction-item .reaction-thumb img { object-fit: contain; width: 100%; height: 100%; }
    .post-detail .post-detail-reaction .reaction-area .reaction-item .reaction-thumb svg path { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .post-detail .post-detail-reaction .reaction-area .reaction-item .reaction-content { color: var(--color3); text-align: center; }
    .post-detail .post-detail-reaction .reaction-area .reaction-item .reaction-content .reaction-value { font-weight: 700; margin-right: 0.25rem; }
    
    .post-detail .post-detail-reaction .reaction-area .reaction-item.active { background: var(--border); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .post-detail .post-detail-reaction .reaction-area .reaction-item.active .reaction-thumb svg path { fill: var(--color2); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    /* comment */
    .post-detail .post-detail-comment { margin-top: 0.75rem; margin-bottom: 1.25rem; }
    .comment-area { position: relative; width: 100%; }
    .comment-area .comment-form { display: block; width: 100%; }
    .comment-area .comment-form .form .form-control { padding: 0.625rem; border-color: var(--border); }
    .comment-area .comment-form .submit { text-align: right; }
    .comment-area .comment-form .submit .btn { margin-top: 0.313rem; }
    .comment-area .comment-form .submit .btn svg { transform: translateY(-2px); margin-right: 0.25rem; }
    .comment-area .comment-form .submit .btn svg path { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .comment-area .comment-form .submit .btn:hover svg path, .comment-area .comment-form .btn:focus svg path { fill: var(--color-white); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .comment-area .comment-list { position: relative; overflow: hidden; width: 100%; margin-top: 0.25rem; }
    .comment-area .comment-list .comment-item { position: relative; margin: 0.875rem 0; }
    .comment-area .comment-list .comment-item.sub { margin-left: 1.875rem; }
    .comment-area .comment-list .comment-item .name { font-weight: 600; line-height: 1.2; color: var(--color2); margin-bottom: 0.25rem; }
    .comment-area .comment-list .comment-item .desc { font-weight: 400; line-height: 1.2; color: var(--color3); margin-bottom: 0.25rem; }
    .comment-area .comment-list .comment-item .desc .name { color: var(--accent); margin-bottom: 0; }
    .comment-area .comment-list .comment-item .post-meta-info { margin-top: 0.35rem; }
    .comment-area .comment-list .comment-item .post-meta-info a { font-weight: 700; color: var(--color4); }
    .comment-area .comment-list .comment-item .post-meta-info a:hover { color: var(--accent); }
    .comment-area .comment-list .comment-item .post-meta-info span:not(:last-child) { margin-right: 0.875rem; }
    .comment-area .comment-list .comment-item .post-meta-info span:not(:last-child):before { right: -0.625rem; width: 0.2rem; height: 0.2rem; }
    .comment-area .comment-list .comment-item .post-meta-info span i { margin-right: 0.1rem; }

    .comment-area .comment-list .comment-item .comment-form { margin: 0.625rem 0; }

    @media (max-width: 580px) {
        .comment-area .comment-list .comment-item .post-meta-info span:first-child { width: 100%; }
        .comment-area .comment-list .comment-item .post-meta-info span:first-child:before { display: none; }
    }

    
    .post-detail-snippet { font-family: var(--font1) !important; font-size: 1rem; line-height: 1.6; color: var(--dark); margin-bottom: 1.25rem; }
    .post-detail-description { font-family: var(--font1) !important; font-size: 1rem !important; line-height: 1.6 !important; color: var(--dark) !important; }
    .post-detail-title-listicle { font-weight: 700; font-size: 1.125rem; line-height: 160%; color: var(--dark); }

    .frads { position: relative; background: #EBEBEB; margin: 0.5rem 0; width: 100%; min-height: 650px; height: 100%; display: none; }
    .frads p { display: block; font-size: 0.625rem; color: var(--text2); position: relative; text-align: center; letter-spacing: 0.7px; margin-bottom: 0; }
    .frads p.frfoot { position: absolute; bottom: 0; left: 0; right: 0; }

    @media (max-width: 580px) {
        .frads { display: block; }
    }
/* ------------------------------------ end post detail ------------------------------------ */ 


/* ------------------------------------ experience ------------------------------------ */
    .exp-image:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        left: 0; 
        top: 0;
        z-index: 1;
        background: -webkit-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 100%);
        background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 100%);
        background: -o-linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 100%);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 100%);
    }
    .exp-content { position: relative; z-index: 3; height: 100%; margin-bottom: 3.75rem; }
    .exp-content .exp-category { font-weight: 700; font-size: 0.813rem; margin-bottom: 0.313rem; color: var(--accent); }
    .exp-content .exp-title { font-weight: bold; font-size: 1.125rem; line-height: 1.3; color: var(--white); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
/* ------------------------------------ end experience ------------------------------------ */


/* ------------------------------------ pasang iklan ------------------------------------ */
    :root {
        --pi-color-1: #034D82;
        --pi-color-2: #555555;

        --pi-bg-blue: linear-gradient(318.24deg, #3B82F6 0%, #86B4FF 94.95%);
        --pi-bg-yellow: linear-gradient(314.44deg, #F59E0B 0%, #FFD285 91.08%);
        --pi-bg-red: linear-gradient(315.55deg, #EF4444 0%, #FF8989 92.87%);
        --pi-bg-green: linear-gradient(314.44deg, #14B8A6 0%, #48DFCE 91.08%);
    }

    .pasang-iklan-1-section { position: relative; }
    .pasang-iklan-1-section .inner { display: flex; align-items: center; justify-content: space-between; gap: 4.5rem; }
    .pasang-iklan-1-section .inner .content { width: calc(100%/2); max-width: 500px; }
    .pasang-iklan-1-section .inner .content .heading { color: var(--pi-color-1); margin-bottom: 1.875rem; }
    .pasang-iklan-1-section .inner .content .description { color: var(--pi-color-2); line-height: 1.6; margin-bottom: 1.875rem; }
    .pasang-iklan-1-section .inner .content .act a { font-weight: 600; letter-spacing: 0.02rem; }
    .pasang-iklan-1-section .inner .content .act a:not(:last-child) { margin-right: 1.875rem; }
    .pasang-iklan-1-section .inner .content .act a.link { color: var(--pi-color-2) !important; }
    .pasang-iklan-1-section .inner .thumb { width: calc(100%/2); text-align: center; }

    @media (max-width: 1200px) {
        .pasang-iklan-1-section .inner { gap: 3.2rem; }
    }
    @media (max-width: 992px) {
        .pasang-iklan-1-section .inner { flex-direction: column; }
        .pasang-iklan-1-section .inner .content { width: calc(100%); max-width: 100%; }
        .pasang-iklan-1-section .inner .thumb { width: calc(100%); }
        .pasang-iklan-1-section .inner .thumb .thumb-img { max-width: 90%; }
    }
    @media (max-width: 380px) {
        .pasang-iklan-1-section .inner .content .act { display: flex; flex-direction: column; align-items: center; }
        .pasang-iklan-1-section .inner .content .act a { margin-bottom: 1.25rem; }
        .pasang-iklan-1-section .inner .content .act a:not(:last-child) { margin-right: 0; }
    }


    .pasang-iklan-2-section { position: relative; }
    .pasang-iklan-2-section .inner { display: flex; align-items: center; justify-content: space-between; gap: 4.5rem; }
    .pasang-iklan-2-section .inner .content { width: calc(100%/2); order: 1; }
    .pasang-iklan-2-section .inner .content .heading { color: var(--pi-color-1); margin-bottom: 1.875rem; }
    .pasang-iklan-2-section .inner .content .description { color: var(--pi-color-2); line-height: 1.6; margin-bottom: 1.875rem; }
    .pasang-iklan-2-section .inner .thumb { width: calc(100%/2); text-align: center; order: 0; }

    @media (max-width: 1200px) {
        .pasang-iklan-2-section .inner { gap: 3.2rem; }
    }
    @media (max-width: 992px) {
        .pasang-iklan-2-section .inner { flex-direction: column; }
        .pasang-iklan-2-section .inner .content { width: calc(100%); max-width: 100%; order: 0; }
        .pasang-iklan-2-section .inner .thumb { width: calc(100%); order: 1; }
        .pasang-iklan-2-section .inner .thumb .thumb-img { max-width: 90%; }
    }


    .pasang-iklan-3-section .inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4.5rem; }
    .pasang-iklan-3-section .inner .left { width: calc(100%/2); }
    .pasang-iklan-3-section .inner .left .heading { color: var(--pi-color-1); margin-bottom: 1.875rem; }
    .pasang-iklan-3-section .inner .left .description { color: var(--pi-color-2); line-height: 1.6; margin-bottom: 0; }
    .pasang-iklan-3-section .inner .right { width: calc(100%/2); }
    .pasang-iklan-3-section .inner .right .price-area { display: flex; align-items: stretch; justify-content: center; gap: 3.2rem; }
    .pasang-iklan-3-section .inner .right .price-area .price-item { height: 100%; padding: 1.25rem; }
    .pasang-iklan-3-section .inner .right .price-area .price-item .icon { position: relative; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; border-radius: 0.625rem; margin-bottom: 1.875rem; }
    .pasang-iklan-3-section .inner .right .price-area .price-item p.price { font-weight: 600; line-height: 1.2; color: var(--pi-color-1); }
    .pasang-iklan-3-section .inner .right .price-area .price-item p { line-height: 1.5; color: var(--pi-color-2); }
    
    @media (max-width: 1200px) {
        .pasang-iklan-3-section .inner .right .price-area { gap: 1rem; }
        .pasang-iklan-3-section .inner .left { width: 100%; text-align: center; }
        .pasang-iklan-3-section .inner .right { width: 100%; }
        .pasang-iklan-3-section .inner .right .price-area .price-item { text-align: center; }
        .pasang-iklan-3-section .inner .right .price-area .price-item .icon { margin: auto; margin-bottom: 1.875rem; }
    }
    @media (max-width: 992px) {
        .pasang-iklan-3-section .inner { flex-direction: column; }
    }
    @media (max-width: 480px) {
        .pasang-iklan-3-section .inner .right .price-area { flex-direction: column; }
        .pasang-iklan-3-section .inner .right .price-area .price-item { padding: 0; }
        .pasang-iklan-3-section .inner .right .price-area .price-item:not(:last-child) { margin-bottom: 1.25rem; }
    }

    .pasang-iklan-4-section { background: #EFF1FF; }
    .pasang-iklan-4-section .inner .section-heading { text-align: center; margin-bottom: 3.2rem; }
    .pasang-iklan-4-section .inner .section-heading .heading { color: var(--pi-color-1); margin-bottom: 1rem; }
    .pasang-iklan-4-section .inner .section-heading .description { max-width: 600px; margin: auto; line-height: 1.6; color: var(--pi-color-2); }
    .pasang-iklan-4-section .content .list-area { display: flex; align-items: stretch; justify-content: space-between; gap: 1.25rem; }
    .pasang-iklan-4-section .content .list-area .list-item { width: calc(100%/4); }
    .pasang-iklan-4-section .content .list-area .list-item .card { height: 100%; border-radius: 0.625rem; padding: 1.875rem; border: 0; }
    .pasang-iklan-4-section .content .list-area .list-item .card .icon { position: relative; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; border-radius: 0.625rem; margin-bottom: 1.875rem; }
    .pasang-iklan-4-section .content .list-area .list-item .card .heading { font-weight: 600; line-height: 1.2; color: var(--pi-color-1); margin-bottom: 1rem; }
    .pasang-iklan-4-section .content .list-area .list-item .card .description { line-height: 1.5; color: var(--pi-color-2); margin-bottom: 0; }

    @media (max-width: 1200px) {
        .pasang-iklan-4-section .content .list-area { gap: 1rem; }
        .pasang-iklan-4-section .content .list-area .list-item .card { padding: 1.875rem 1.25rem; }
    }
    @media (max-width: 992px) {
        .pasang-iklan-4-section .content .list-area { flex-wrap: wrap; gap: 1rem; }
        .pasang-iklan-4-section .content .list-area .list-item { width: calc(100%/2.08); }
    }
    @media (max-width: 580px) {
        .pasang-iklan-4-section .content .list-area .list-item { width: calc(100%); }
        .pasang-iklan-4-section .content .list-area .list-item .card { text-align: center; }
        .pasang-iklan-4-section .content .list-area .list-item .card .icon { margin: auto; margin-bottom: 1.875rem; }
    }


    .pasang-iklan-5-section { position: relative; }
    .pasang-iklan-5-section .bg-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .pasang-iklan-5-section .inner { display: flex; align-items: center; }
    .pasang-iklan-5-section .inner .left { width: calc(100%/2); }
    .pasang-iklan-5-section .inner .left .section-heading { max-width: 400px; }
    .pasang-iklan-5-section .inner .left .section-heading .heading { font-weight: 600; line-height: 1.2; color: var(--pi-color-1); margin-bottom: 1rem; }
    .pasang-iklan-5-section .inner .left .section-heading .description { line-height: 1.5; color: var(--pi-color-2); margin-bottom: 0; }
    .pasang-iklan-5-section .inner .right { width: calc(100%/2); }
    .pasang-iklan-5-section .inner .right .tm-area { padding: 0 2.5rem; }
    .pasang-iklan-5-section .inner .right .tm-area .tm-review { line-height: 1.7; color: var(--pi-color-2); }
    .pasang-iklan-5-section .inner .right .tm-area .tm-author { display: flex; align-items: center; justify-content: flex-start; gap: 1.25rem; }
    .pasang-iklan-5-section .inner .right .tm-area .tm-author .tm-thumb { width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid var(--light); }
    .pasang-iklan-5-section .inner .right .tm-area .tm-author .tm-name { font-weight: 600; color: var(--pi-color-1); margin-bottom: 0.5rem; }
    .pasang-iklan-5-section .inner .right .tm-area .tm-author .tm-position { color: var(--pi-color-2); margin-bottom: 0; }
    .pasang-iklan-5-section .inner .right .swiper-button { color: var(--pi-color-1); }
    .pasang-iklan-5-section .inner .right .swiper-button:after { font-weight: 600; font-size: 2rem; }
    .pasang-iklan-5-section .inner .right .swiper-button.swiper-button-prev { left: 0; right: auto; }
    .pasang-iklan-5-section .inner .right .swiper-button.swiper-button-next { right: 0; left: auto; }

    @media (max-width: 992px) {
        .pasang-iklan-5-section .inner { flex-direction: column; }
        .pasang-iklan-5-section .inner .left { width: calc(100%); margin-bottom: 3.2rem; }
        .pasang-iklan-5-section .inner .right { width: calc(100%); }
        .pasang-iklan-5-section .inner .right .tm-area { padding: 0; }
        .pasang-iklan-5-section .inner .right .swiper-button.swiper-button-prev { left: -1.25rem; }
        .pasang-iklan-5-section .inner .right .swiper-button.swiper-button-next { right: -1.25rem; }
    }
    @media (max-width: 580px) {
        .pasang-iklan-5-section .inner .right .swiper-button { display: none; }
    }


    .pasang-iklan-6-section { position: relative; overflow: hidden; background: linear-gradient(180deg, #5B4CB6 0%, #442CA5 100%); }
    .pasang-iklan-6-section .bg-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 5; }
    .pasang-iklan-6-section .inner { display: flex; align-items: center; }
    .pasang-iklan-6-section .inner .content { width: calc(100%/2); }
    .pasang-iklan-6-section .inner .content .section-heading { max-width: 450px; }
    .pasang-iklan-6-section .inner .content .heading { font-weight: 700; line-height: 1.3; color: var(--white); margin-bottom: 1rem; }
    .pasang-iklan-6-section .inner .content .description { line-height: 1.7; color: var(--white); }
    .pasang-iklan-6-section .inner .content .btn { margin-top: 1.25rem; }
    .pasang-iklan-6-section .inner .thumb { width: calc(100%/2); display: flex; }
    .pasang-iklan-6-section .inner .thumb .thumb-img.img-1 { transform: translateY(-100px); }
    .pasang-iklan-6-section .inner .thumb .thumb-img.img-2 { transform: translateY(100px); }

    @media (max-width: 768px) {
        .pasang-iklan-6-section { padding: 6.25rem 0; }
        .pasang-iklan-6-section .inner { flex-direction: column; }
        .pasang-iklan-6-section .inner .content { width: calc(100%); margin-bottom: 3.2rem; }
        .pasang-iklan-6-section .inner .thumb { width: calc(100%); }
        .pasang-iklan-6-section .inner .thumb .thumb-img.img-1 { transform: translateY(0); }
        .pasang-iklan-6-section .inner .thumb .thumb-img.img-2 { transform: translate(100px 20px); }
    }


    .pi-bg-blue { background: var(--pi-bg-blue); }
    .pi-bg-yellow { background: var(--pi-bg-yellow); }
    .pi-bg-red { background: var(--pi-bg-red); }
    .pi-bg-green { background: var(--pi-bg-green); }
/* ------------------------------------ end pasang iklan ------------------------------------ */


/* ------------------------------------ pricing ------------------------------------ */
    .pricing-table { width: 100%; border-collapse: collapse; border: 0 none; }
    
    .pricing-table .subheading { position: relative; }
    .pricing-table .subheading .title-subheading { font-style: normal; font-weight: 600; line-height: 1; position: absolute; bottom: 0.625rem; right: 1.5rem; }
    .pricing-table .subheading .switch-area { position: relative; display: block; }
    .pricing-table .subheading p { color: var(--text); margin-bottom: 0; }
    .pricing-table .package-name { font-weight: 900; font-size: 1.25rem; line-height: 1.4; letter-spacing: 0.313rem; color: var(--second); }
    .pricing-table .package-price { font-weight: bold; line-height: 1; }
    .pricing-table .package-period { font-style: italic; font-size: 1rem; line-height: 1.4; color: var(--dark); }

    .pricing-table tr { border-bottom: 1px solid var(--light); }
    .pricing-table tr td { border-right: 1px solid var(--light); padding: 0.625rem 1.5rem; font-size: 14px; }
    .pricing-table tr td:first-child {
        border-left: none;
        text-align: right;
        font-style: italic;
        font-weight: normal;
        font-size: 1rem;
        line-height: 1.3;
        color: var(--text);
    }
    .pricing-table tr td:not(:first-child) { text-align: center; width: 290px; }
    /*.pricing-table tr:nth-child(even) { background-color: #E0E2EA; }*/
    /*.pricing-table tr:nth-child(2n) td:nth-child(2) { background-color: #E0E2EA; }*/
    /*.pricing-table tr:nth-child(2n) td:nth-child(3) { background-color: #E0E2EA; }*/

    .pricing-table tr td .icon { font-size: 1.5rem; line-height: 1; margin-bottom: 0; }
    .pricing-table tr td .icon.check { color: var(--accent); }
    .pricing-table tr td .icon.minus { color: var(--text2); }


    .pricing-box {
        position: relative;
        overflow: hidden;
        background: var(--background);
        padding: 2.188rem 3.125rem;
        -webkit-box-shadow: 0 0.313rem 1.875rem -0.625rem rgba(0, 0, 0, 0.1);
        box-shadow: 0 0.313rem 1.875rem -0.625rem rgba(0, 0, 0, 0.1);
        border-radius: 0.5rem;
        margin-bottom: 1.25rem;
    }
    .pricing-box .pricing-name { font-weight: bold; color: var(--second); }
    .pricing-box .pricing-description { font-weight: normal; color: var(--text); }
    
    .pricing-box .pricing-plan .pricing-price { font-weight: bold; color: var(--dark); margin-bottom: 0.25rem; }
    .pricing-box .pricing-plan .pricing-price span { font-weight: normal; }
    .pricing-box .pricing-plan .pricing-period { color: var(--text2); }

    @media (max-width: 991px) {
        .pricing-box { padding: 2.188rem 2.188rem; }
    }
    @media (max-width: 767px) {
        .pricing-box { padding: 2.188rem 1.25rem; }
    }

    .pricing-badge {
        position: absolute;
        top: 0;
        z-index: 999;
        right: 0;
        width: 100%;
        display: block;
        font-size: 15px;
        padding: 0;
        overflow: hidden;
        height: 100px;
    }
    .pricing-badge .badge {
        float: right;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        right: -67px;
        top: 17px;
        position: relative;
        text-align: center;
        width: 200px;
        font-size: 13px;
        margin: 0;
        padding: 7px 10px;
        font-weight: 500;
        color: #ffffff;
        background: #fb7179;
    }
/* ------------------------------------ end pricing ------------------------------------ */


/* ------------------------------------ dashboard ------------------------------------ */
    .dash-section { position: relative; min-height: calc(80vh); }
    .dash-section .container > .inner { width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; gap: 1rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dash-section .dash-sidebar { flex-shrink: 0; position: sticky; position: -webkit-sticky; top: 85px; width: 250px; border-radius: 0.5rem; border: 1px solid var(--border); overflow: hidden; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dash-section .dash-content { width: calc(100% - 250px); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    
    .dash-section .dash-sidebar .sidebar-head { padding: 1.125rem; }
    .dash-section .dash-sidebar .sidebar-head .sidebar-shrink { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; padding: 0.313rem; font-size: 1.25rem; color: var(--accent) !important; border: 1px solid var(--accent2); background: var(--accent3); }
    .dash-section .dash-sidebar .sidebar-head .sidebar-shrink i { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dash-section .dash-sidebar .sidebar-head .sidebar-title { font-weight: 600; display: none; }

    .dash-section .dash-sidebar .dash-menu { 
        position: sticky; 
        position: -webkit-sticky; 
        top: 0; 
        left: 0;
        background: var(--background); 
        border-radius: 0.5rem; 
        padding: 0.625rem 1.125rem; 
    }
    .dash-section .dash-sidebar .dash-menu .close { position: absolute; top: 0.625rem; right: -2.5rem; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--dark); opacity: 0.8; display: flex; align-items: center; justify-content: center; text-align: center; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dash-section .dash-sidebar .dash-menu .close:before { content: '\e8f6'; font-family: 'feather'; font-size: 1rem; line-height: 1; color: var(--color-white); transform: translateY(0.03rem); }
    .dash-section .dash-sidebar .dash-menu .close:hover { opacity: 1; transform: scale(0.95); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dash-section .dash-sidebar .dash-menu > .inner { width: 100%; display: -ms-flexbox; display: flex; align-items: stretch; justify-content: flex-start; -ms-flex-direction: column; flex-direction: column; flex-wrap: nowrap; gap: 0.313rem; }
    .dash-section .dash-sidebar .dash-menu .dash-menu-label { position: relative; margin-bottom: 0.313rem; }
    .dash-section .dash-sidebar .dash-menu .dash-menu-label:before { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 100%; height: 1px; background: var(--border); z-index: 0; }
    .dash-section .dash-sidebar .dash-menu .dash-menu-label span { font-weight: 400; position: relative; z-index: 1; background: var(--background); padding-right: 0.625rem; }
    .dash-section .dash-sidebar .dash-menu .nav-item .nav-link { position: relative; overflow: hidden; width: auto; border-radius: 0.5rem; padding: 0.5rem 0.45rem; font-weight: 600; color: var(--color3); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dash-section .dash-sidebar .dash-menu .nav-item .nav-link .nav-icon { font-size: 1.125rem; line-height: 1; }
    .dash-section .dash-sidebar .dash-menu .nav-item .nav-link .nav-text { margin-left: 0.625rem; }
    .dash-section .dash-sidebar .dash-menu .nav-item:not(.wbg) .nav-link:hover { color: var(--color3); background: var(--light); }
    .dash-section .dash-sidebar .dash-menu .nav-item .nav-link.active { color: var(--color-white); background: var(--accent); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dash-section .dash-sidebar .dash-menu .nav-item .nav-link.active svg path { fill: var(--color-white); }
    .dash-section .dash-sidebar .dash-menu .nav-item.wbg { background: var(--accent); }
    .dash-section .dash-sidebar .dash-menu .nav-item.wbg .nav-link { color: var(--white); }

    .dash-section .nav-item-user { display: block; text-align: center; padding-bottom: 0.875rem; }
    .dash-section .nav-item-user .img-user { margin-bottom: 0.313rem; }
    .dash-section .nav-item-user .name-user { font-weight: 600; margin-bottom: 0; }
    .dash-section .nav-item-user.mobile { display: none; }

    @media (max-width: 1200px) {
        .dash-section .dash-sidebar { width: 220px; }
        .dash-section .dash-content { width: calc(100% - 220px); }
    }
    @media (max-width: 992px) {
        .dash-section .container > .inner { flex-direction: column; }
        .dash-section .dash-sidebar { width: 100%; height: auto; border-color: transparent; top: 67px; z-index: 5; }
        .dash-section .dash-sidebar .sidebar-head { display: flex; align-items: center; justify-content: flex-start; gap: 0.625rem; padding: 0.625rem 1rem; width: 100%; margin-bottom: 0.625rem; border: 1px solid var(--border); background: var(--background); }
        .dash-section .dash-sidebar .sidebar-head .sidebar-title { display: block; }
        .dash-section .dash-sidebar .sidebar-head .sidebar-shrink { position: relative; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 1.25rem; color: var(--accent) !important; border: 1px solid transparent; background: transparent; }
        .dash-section .dash-sidebar .sidebar-head .sidebar-shrink:before { content: ''; position: absolute; top: auto; left: auto; right: auto; bottom: auto; margin: auto; width: 20%; height: 20%; opacity: 0; visibility: hidden; border-radius: 0.6rem; background: var(--light); z-index: 0; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
        .dash-section .dash-sidebar .sidebar-head .sidebar-shrink:hover:before, .dash-section .dash-sidebar .sidebar-head .sidebar-shrink:focus:before { width: 100%; height: 100%; opacity: 1; visibility: visible; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
        .dash-section .dash-sidebar .sidebar-head .sidebar-shrink i { position: relative; font-size: 1.75rem; color: var(--color2); }

        .dash-section .dash-sidebar .dash-menu { 
            position: fixed; 
            top: 5rem;
            left: -100%;
            visibility: hidden;
            opacity: 0;
            width: 85%; 
            max-width: 250px;
            border-radius: 0 0.5rem 0.5rem 0;
            box-shadow: var(--shadow-md);
            z-index: 105; 
            -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
        }
        .dash-section .dash-sidebar .dash-menu > .inner { width: 100%; height: calc(100vh - 5rem); overflow-y: auto; }

        .dash-section.shrink .dash-sidebar { width: 100%; }
        .dash-section.shrink .dash-sidebar .dash-menu { left: 0; visibility: visible; opacity: 1; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }


        .dash-section .dash-content { width: calc(100%); }
    }
    @media (max-width: 768px) {
        .dash-section .dash-sidebar .dash-menu { top: 4.375rem }
    }

    @media (min-width: 993px) {
        /* shrink mode */
        .dash-section.shrink .dash-sidebar { width: auto; }
        .dash-section.shrink .dash-content { width: calc(100%); }
        .dash-section.shrink .dash-sidebar .dash-menu .dash-menu-label { text-align: center; }
        .dash-section.shrink .dash-sidebar .dash-menu .dash-menu-label span { padding-right: 0; }
        .dash-section.shrink .dash-sidebar .sidebar-head .sidebar-shrink i { transform: scaleX(-1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
        .dash-section.shrink .dash-sidebar .dash-menu .nav-item .nav-link { text-align: center; }
        .dash-section.shrink .dash-sidebar .dash-menu .nav-item .nav-link .nav-text { display: none; }
    }

    /* @media (max-width: 768px) {
        .dash-section .nav-item-user { display: none; }
        .dash-section .nav-item-user.mobile { display: flex !important; align-items: center; flex-direction: column; padding: 1.25rem; }
    }
    @media (max-width: 991px) {
        .dash-section .dash-sidebar { 
            width: 100%;
            height: 75px;
            margin-bottom: 1.25rem;
            white-space: nowrap;
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            overflow-y: hidden;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: none;
            scrollbar-width: none;
            border-bottom: 1px solid var(--light);
        }
        .dash-section .dash-sidebar::-webkit-scrollbar { display: none; }
        .dash-section .dash-sidebar .nav-item:not(:last-child) { border-bottom: 0; }
        .dash-section .dash-sidebar .nav-item .nav-link { padding: 0.625rem 1.25rem }
    }
    @media (max-width: 768px) {
        .dash-section .dash-sidebar .nav-item .nav-link { display: flex; align-items: center; padding: 0.313rem 0.625rem; width: 3.125rem; -webkit-transition: width .3s ease-in-out; -moz-transition: width .3s ease-in-out; -o-transition: width .3s ease-in-out; transition: width .3s ease-in-out; }
        .dash-section .dash-sidebar .nav-item .nav-link.active { width: 100%; -webkit-transition: width .3s ease-in-out; -moz-transition: width .3s ease-in-out; -o-transition: width .3s ease-in-out; transition: width .3s ease-in-out; }
        .dash-section .dash-sidebar .nav-item .nav-link .nav-text { opacity: 0; font-size: 0.875rem; }
        .dash-section .dash-sidebar .nav-item .nav-link.active .nav-text { opacity: 1; }
        .dash-section .dash-sidebar .nav-item .nav-link .nav-icon { margin-right: 0.313rem; font-size: 1.5rem; }
    } */

    .card-dash-1 .inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
    .card-dash-1 .inner .post-author { gap: 1rem; }
    .card-dash-1 .inner .post-author .author-head { width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); }
    .card-dash-1 .inner .post-author .author-body .badge { letter-spacing: 0.025rem; margin-top: 0.313rem; }
    .card-dash-1 .inner .action { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; }

    @media (max-width: 768px) {
        .card-dash-1 .inner { align-items: flex-start; flex-direction: column; }
        .card-dash-1 .inner .action { justify-content: center; gap: 0.45rem; }
    }
    @media (max-width: 580px) {
        .card-dash-1 .inner .action .btn { padding: 0.45rem 1rem; }
    }

    .card-widget.card-widget-post-scroll .card-body {
        position: relative;
        height: 23.75rem;
        display: -ms-flexbox; 
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .card-widget.card-widget-post-scroll .card-body::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; cursor: pointer; }
    .card-widget.card-widget-post-scroll .card-body::-webkit-scrollbar-track { background: transparent; }
    .card-widget.card-widget-post-scroll .card-body::-webkit-scrollbar-thumb { background: rgba(28, 104, 163, 0); opacity: 0; border-radius: 1.25rem; -webkit-box-shadow: inset 0 0.313rem 0.5rem rgba(0, 0, 0, 0.12); -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; }
    .card-widget.card-widget-post-scroll .card-body:hover::-webkit-scrollbar-thumb { background: rgba(28, 104, 163, 1); opacity: 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; }
    .card-widget.card-widget-post-scroll .card-body::-webkit-scrollbar-thumb:horizontal:hover,
    .card-widget.card-widget-post-scroll .card-body::-webkit-scrollbar-thumb:vertical:hover { background: rgba(28, 104, 163, 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; }
/* ------------------------------------ end dashboard ------------------------------------ */


/* ------------------------------------ registration ------------------------------------ */
    .registration .container-fluid { margin: 0 auto; }
    
    .registration .wrap-registration { position: relative; overflow: hidden; height: calc(100vh); }
    .registration .wrap-registration .bg-cover { z-index: 1; }
    .registration .wrap-registration .thumbnails-1 { z-index: 3; position: absolute; right: 0; bottom: 0; width: auto; height: 95%; }
    .registration .wrap-registration .thumbnails-2 { z-index: 2; position: absolute; left: 0; bottom: -5%; width: 90%; }

    .registration .wrap-registration .intro-registration { width: 90%; position: relative; z-index: 3; }
    .registration .wrap-registration .wrap-logo { 
        position: absolute; 
        left: 0; 
        top: 0; 
        background: #FFF7C0; 
        padding: 0.938rem 1.25rem; 
        border-bottom-left-radius: 1.25rem; 
        border-bottom-right-radius: 1.25rem; 
        display: -ms-flexbox; 
        display: flex; 
        -ms-flex-align: center;
        align-items: center;
        justify-content: flex-start;
    }
    .registration .wrap-registration .wrap-logo img.logo { max-height: 4.063rem; object-fit: contain; width: auto; }
    .registration .wrap-registration .wrap-logo img.logo:not(:last-child) { margin-right: 15px; }
    .registration .wrap-registration .wrap-text { width: 60%; display: flex; align-items: center; height: 100%; }
    .registration .wrap-registration .wrap-text h2 { font-size: 26px; }
    .registration .wrap-registration .wrap-contact { position: absolute; left: 0; bottom: 0; width: 100%; background: #5E5626; z-index: 3; }
    .registration .wrap-registration .wrap-contact p { width: 90%; font-weight: 700; padding-top: 0.75rem; padding-bottom: 0.75rem; color: var(--white); margin-bottom: 0; }
    .registration .wrap-registration .wrap-contact p svg { margin-right: 0.625rem; }

    .registration .wrap-registration .form-registration {
        position: relative;
        height: calc(100vh); 
        display: -ms-flexbox; 
        display: flex; 
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        background: #D0CDB5;
        z-index: 5;
    }
    .registration .wrap-registration .form-registration .form-style { width: 80%; margin: auto; }

    .registration .wrap-category { position: relative; overflow: hidden; }
    .registration .wrap-category .wrap-service { display: -ms-flexbox; display: flex; width: 100%; }
    .registration .wrap-category .wrap-service .media { opacity: 0.35; }
    .registration .wrap-category .wrap-service .media:not(:last-child) { margin-right: 1.563rem; }
    .registration .wrap-category .wrap-service .media:hover, .registration .wrap-category .wrap-service .media:focus, .registration .wrap-category .wrap-service .media.active { opacity: 1; z-index: 5; box-shadow: 1.875rem 1.875rem 4.375rem rgba(0, 0, 0, 0.42); }

    @media (max-width: 1280px) {
        .registration .wrap-registration .thumbnails-1 { right: -2%; height: 95%; }

        .registration .wrap-registration .wrap-text { width: 63%; }
        .registration .wrap-registration .wrap-text .section-heading { font-size: 28px; line-height: 1.3; }
    }

    @media (max-width: 1200px) {
        .registration .wrap-registration .thumbnails-1 { right: -7%; height: 90%; }
        .registration .wrap-registration .thumbnails-2 { left: 0; bottom: 0; width: 90%; }

        .registration .wrap-registration .wrap-text { width: 67%; }
    }

    @media (max-width: 1020px) {
        .registration .wrap-registration .thumbnails-1 { right: -10%; height: 85%; }

        .registration .wrap-registration .wrap-text { width: 65%; }
    }

    @media (max-width: 992px) {
        .registration .wrap-registration .thumbnails-1 { right: -12%; height: 80%; }

        .registration .wrap-registration .intro-registration { width: 95%; }

        .registration .wrap-registration .wrap-text { width: 70%; }
        .registration .wrap-registration .wrap-text .section-subheading { font-size: 1.063rem; }

        .registration .wrap-registration .wrap-contact p { width: 95%; }

        .registration .wrap-category { height: 100% !important; }
        .registration .wrap-category .wrap-service { margin-right: 0; display: block; padding-left: 0; padding-right: 0; }
        .registration .wrap-category .wrap-service .media { width: 100%; }
        .registration .wrap-category .wrap-service .media:not(:last-child) { margin-right: 0; margin-bottom: 1.25rem; }
        .registration .wrap-category .wrap-service .media:hover, .registration .wrap-category .wrap-service .media:focus, .registration .wrap-category .wrap-service .media.active { box-shadow: 0.625rem 0.625rem 1.875rem rgba(0, 0, 0, 0.42); }
        .registration .wrap-category .wrap-service .media .media-body { width: 100%; display: block; }
        .registration .wrap-category .wrap-service .media .media-img { width: 125px; height: 145px; }
    }

    @media (max-width: 768px) {
        .registration .wrap-registration { min-height: 100vh !important; height: 100%; overflow: hidden; }
        .registration .wrap-registration .intro-registration { width: 95%; margin: auto; padding-top: 100px; padding-bottom: 100px; }
        .registration .wrap-registration .thumbnails-1 { right: 0; height: 85%; }
        .registration .wrap-registration .thumbnails-2 { left: 0; bottom: -5%; width: 90%; }
        .registration .wrap-registration .wrap-logo { /*width: 15.625rem;*/ padding: 0.75rem; }
        .registration .wrap-registration .wrap-logo img.logo { max-height: 3.75rem; }
        .registration .wrap-registration .wrap-text { width: 80%; }
        .registration .wrap-registration .wrap-text .section-heading { font-size: 20px; }

        .registration .wrap-registration .wrap-contact p { width: 90%; margin: auto; }

        .registration .wrap-registration .form-registration { display: block; height: 100%; padding-top: 2.5rem; padding-bottom: 40px; }
        .registration .wrap-registration .form-registration .form-style { width: 80%; margin: auto; }

        .registration .wrap-category .wrap-service .media .media-img { width: 100px; height: 125px; }
    }

    @media only screen and (max-width: 480px) {
        .registration .wrap-registration .intro-registration { padding-top: 130px; padding-bottom: 130px; }
        .registration .wrap-registration .thumbnails-1 { right: -8%; height: 85%; opacity: 0.6; }
        .registration .wrap-registration .thumbnails-2 { bottom: 5%; opacity: 0.6; }
        .registration .wrap-registration .wrap-logo { width: auto; padding: 0.75rem; }
        .registration .wrap-registration .wrap-logo img.logo { max-height: 2.5rem; }
        .registration .wrap-registration .wrap-text { width: 100%; }
        .registration .wrap-registration .wrap-text .section-heading { font-size: 18px; }

        .registration .wrap-registration .form-registration .form-style { width: 100%; }
    }


    .registration .wrap-identity { position: relative; overflow: hidden; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }

    @media (max-width: 768px) {
        .registration .wrap-identity.vh-100 { height: 100% !important; }
    }
/* ------------------------------------ end registration ------------------------------------ */


/* ------------------------------------ media ------------------------------------ */
    .media-style { padding: 0.938rem; border-radius: 0.375rem; background: rgba(255, 255, 255, 1); }
    .media-style .media-img { width: 100px; height: 120px; overflow: hidden; border-radius: 0.375rem; margin-right: 0.938rem; }
    .media-style .media-img img { width: 100%; height: 100%; border-radius: 0.375rem; }
    .media-style .media-body .media-title { font-weight: bold; color: var(--dark); margin-bottom: 0.625rem; }
    .media-style .media-body .link { font-weight: 600; color: var(--accent); }
    .media-style .media-body .link:hover .icon-arrow, .intro .wrap-service .media .media-body .link:focus .icon-arrow { margin-left: 0.5rem; }

    @media (max-width: 992px) {
        .media-style .media-img { width: 110px; height: 120px; }
        .media-style .media-body .media-title { margin-bottom: 0.313rem; }
        .media-style .media-body .link { font-size: 0.875rem; }
    }

    @media (max-width: 768px) {
        .media-style .media-body .link { font-size: 0.813rem; }
    }


    .media-style.style-1 { background: #F4FCFD; margin-bottom: 0.938rem; }
    .media-style.style-1:hover { background: #E1F8FB; }
    .media-style.style-1 .wrap-description { 
        display: -ms-flexbox; 
        display: flex; 
        -ms-flex-pack: center;
        justify-content: space-between;
        -ms-flex-align: center;
        align-items: center;
    }
    .media-style.style-1 .wrap-description .media-description { margin-bottom: 0; width: 75%; }
    .media-style.style-1 .wrap-price { 
        display: -ms-flexbox; 
        display: flex; 
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 0.813rem;
    }
    .media-style.style-1 .wrap-price .price { font-weight: 600; font-size: 1.75rem; line-height: 1; margin-bottom: 0; }

    .media-style.style-1.media-large { padding: 1.875rem; height: 100%; }
    .media-style.style-1.media-large .media-description { margin-bottom: 0; width: 100%; -webkit-line-clamp: 5 !important; }
    .media-style.style-1.media-large .media-img { width: 150px; height: 100%; margin-left: 1.875rem; margin-right: 0; }
    .media-style.style-1.media-large .media-body {  }

    @media (max-width: 1200px) {
        .media-style.style-1 .wrap-price .price { font-size: 1.5rem; }

        .media-style.style-1.media-large { padding: 1.563rem; }
        .media-style.style-1.media-large .media-img { width: 135px; height: 100%; margin-left: 1.25rem; }
    }

    @media (max-width: 992px) {
        .media-style.style-1.media-large { margin-bottom: 0.938rem; height: auto; }
        .media-style.style-1.media-large .media-img { width: 135px; height: 175px; }
    }

    @media (max-width: 768px) {
        .media-style.style-1.media-large .media-img { width: 135px; height: 185px; margin-left: 0; margin-right: 0.938rem; }
    }

    @media only screen and (max-width: 480px) {
        .media-style.style-1 { display: block; margin-bottom: 1.25rem; }
        .media-style.style-1 .wrap-description { display: block; } 
        .media-style.style-1 .wrap-description .media-description { margin-bottom: 1.25rem; width: 100%; }
        .media-style.style-1 .wrap-description .wrap-btn .btn { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
        .media-style.style-1 .wrap-price { display: block; }
        .media-style.style-1 .wrap-price .price { margin-bottom: 1.25rem; }
        .media-style.style-1 .wrap-price .wrap-btn .btn { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }

        .media-style.style-1 .media-img { display: block; width: 100%; height: 240px; }
        .media-style.style-1 .media-body { margin-top: 1.25rem; }

        .media-style.style-1.media-large { padding: 0.938rem; height: auto; }
        .media-style.style-1.media-large .media-img { display: block; width: 100%; height: 240px; }
    }
/* ------------------------------------ end media ------------------------------------ */


/* ------------------------------------ streaming ------------------------------------ */
    .streaming-area { position: relative; }
    .streaming-area .streaming-media-video { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16/9; border-radius: 0.625rem; }
    .ratiobox { position: relative; display: block; height: 0; overflow: hidden; padding-bottom: 100%; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .ratiobox iframe { position: absolute; width: 100%; height: 100%; }
    .ratiobox--9-16 { /*padding-bottom: 156.25%;*/ }

    .streaming-item-area { height: 450px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; gap: 0.625rem; }
    .streaming-item-area .streaming-item { width: 100%; position: relative; overflow: hidden; border: 1px solid var(--border); background: var(--light); border-radius: 0.625rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .streaming-item-area .streaming-item .streaming-link { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; }
    .streaming-item-area .streaming-item .streaming-img { object-fit: contain; width: 100%; max-height: 100%; max-width: 155px; }
    .streaming-item-area .streaming-item:hover { border-color: var(--accent); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    @media (max-width: 1200px) {
        .streaming-item-area { height: 400px; }
        .streaming-item-area .streaming-item .streaming-link { height: 90px; }
        .streaming-item-area .streaming-item .streaming-img { max-width: 145px; }
    }
    @media (max-width: 992px) {
        .streaming-item-area.scrollable { height: 100px; -ms-flex-direction: row; flex-direction: row; overflow-y: hidden !important; overflow-x: auto !important; }
        .streaming-item-area .streaming-item { width: 175px !important; height: 90px; margin-bottom: 0; }
        .streaming-item-area .streaming-item .streaming-link { width: 100%; height: auto; padding: 0.625rem; }
    }

    @media (max-width: 768px) {
        .streaming-area .streaming-media-video { height: 55vw; }
        .streaming-item-area.scrollable { height: 75px; }
        .streaming-item-area .streaming-item { width: 90px !important; height: 45px; }
    }
/* ------------------------------------ end streaming ------------------------------------ */


/* ------------------------------------ modal ------------------------------------ */
    .modal-style .modal-content { border: 0; background: none; }
    .modal-style .modal-body { position: relative; overflow: hidden; border: none; background: var(--background); box-shadow: var(--shadow); border-radius: 0.625rem; }
    .modal-style .modal-body .close { position: absolute; top: 0.625rem; right: 0.625rem; z-index: 10; font-size: 1.625rem; border: 0; background: transparent; width: 2rem; height: 2rem; border-radius: 0.625rem; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .modal-style .modal-body .close:after { content: '\e8f6'; font-family: 'feather'; font-size: 1.45rem; line-height: 1; color: var(--color2); transform: translateY(0.03rem); }
    .modal-style .modal-body .close:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--light); transform: scale(0.85); visibility: hidden; opacity: 0; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .modal-style .modal-body .close:hover:before { transform: scale(1); visibility: visible; opacity: 1; border-radius: 0.625rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .modal-style .modal-title { font-weight: 700; font-size: 1.125rem; line-height: 1.4 !important; color: var(--color); margin-bottom: 0.625rem; }

    .modal-style .modal-body.padd-md { padding: 1.25rem; }
    .modal-style .modal-body.padd-md .close { top: 0.725rem; right: 0.938rem; }
    .modal-style .modal-body.padd-lg { padding: 1.875rem; }

    #modal-nnchype .form-action .btn { min-width: 187px; }
    #modal-nnchype .term-nnchype { max-height: 150px; margin-bottom: 0; }
    #modal-nnchype fieldset { display: none; }
/* ------------------------------------ end modal ------------------------------------ */


/* ------------------------------------ wrap input image ------------------------------------ */
    .modal-gallery-gambar .btn-add-picture { outline: 0; box-shadow: none; background: none; font-size: 14px; color: var(--text); padding: 0; display: inline-flex; align-items: center; }
    .modal-gallery-gambar .btn-add-picture .icon-add {
        display: flex;
        font-size: 22px; 
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 100%;
        border: 1px dashed var(--second);
        background: #d8daf2;
        color: var(--second);
        margin-right: 12px; 
    }

    .modal-gallery-gambar .header-action { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; } 
    .modal-gallery-gambar .filter-group { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
    .modal-gallery-gambar .filter-group .filter-item:not(:last-child) { margin-right: 0.313rem; }

    @media (max-width: 992px) {
        .modal-gallery-gambar .modal-dialog { max-width: 650px; margin-top: 8%; }
        .modal-gallery-gambar .btn-add-picture { margin-bottom: 0.625rem; }
        .modal-gallery-gambar .header-action { flex-wrap: wrap; }
        .modal-gallery-gambar .header-action .wrap-action-top { width: 100%; display: flex; justify-content: space-between; margin-bottom: 0.313rem; }
        .modal-gallery-gambar .filter-group { width: 100%; justify-content: flex-end; flex-wrap: wrap-reverse; }
    }

    @media (max-width: 580px) {
        .modal-gallery-gambar .modal-dialog { margin-top: 15%; }
    }


    .wrap-load-data-gambar { height: 65vh; }
    .wrap-load-data-gambar.scrollable::-webkit-scrollbar { width: 0.25rem; height: 0.5rem; cursor: pointer; }

    .wrap-item-image { position: relative; overflow: hidden; margin-bottom: 0.938rem; padding-left: 1.75rem; }
    .wrap-item-image .wrap-checkbox-custome { position: absolute; top: 0; left: 0; width: 1.25rem; height: 1.25rem; }
    .wrap-item-image .item-image-header { width: 100%; height: 6.875rem; overflow: hidden; border-radius: 0.313rem; margin-bottom: 0.313rem; }
    .wrap-item-image .item-image-header img { /*max-height: 6.875rem;*/ width: 100%; height: 6.875rem; object-fit: cover; object-position: center; margin: auto; border-radius: 0.5rem; }
    .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(--text); margin-bottom: 0.25rem;  }
    .wrap-item-image .item-image-body .description { font-weight: normal; font-size: 0.813rem; line-height: 1.2; color: var(--text2); margin-bottom: 0; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical; }
/* ------------------------------------ end wrap input image ------------------------------------ */


/* ------------------------------------ footer ------------------------------------ */
    .footer { background: var(--dark); }
    .footer .list-info .value { color: var(--color5) !important; }
    .footer .separator { border-color: var(--color2); }
    .footer .footer-column { position: relative; }
    .footer .footer-column .footer-title { font-size: 0.75rem; color: var(--color4) !important; margin-bottom: 0.313rem; }
    .footer .footer-column .dropdown-toggle { color: var(--color5); }

    .footer .footer-brand .brand-img { object-fit: contain; max-height: 2rem; }

    .footer .copyright { color: var(--color4); }
    .footer .copyright a { color: var(--color4); }
/* ------------------------------------ end footer ------------------------------------ */


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

    /*upload image*/
    .upload-image-area { border: 2px dotted var(--border2); border-radius: 0.5rem; 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: 5rem; max-height: 5rem; }
/* ------------------------------------ end cropper image ------------------------------------ */


/* ------------------------------------ listicle ------------------------------------ */
    .btn-add-listicle { width: 100%; max-width: 200px; padding: 0.475rem 1.375rem; color: var(--color-white) !important; background: var(--second); -webkit-box-shadow: none; box-shadow: none; }
    .btn-add-listicle:hover, .btn-add-listicle:focus { color: var(--second) !important; background: transparent; border-color: var(--second); -webkit-box-shadow: none; box-shadow: none; }

    .btn-delete-listicle { padding: 0.475rem 0.625rem; color: var(--color-white) !important; background: var(--danger); -webkit-box-shadow: none; box-shadow: none; }
    .btn-delete-listicle:hover, .btn-add-listicle:focus { opacity: 0.8; -webkit-box-shadow: none; box-shadow: none; }

    .btn-save { width: 100%; padding: 0.75rem 1.875rem; font-weight: 600; color: var(--accent) !important; background: var(--white); box-shadow: 0 0.625rem 2.813rem rgba(0, 0, 0, 0.10); }
    .btn-save .icon { margin-right: 0.313rem; }
    .btn-save:hover, .btn-save:focus { color: var(--white) !important; background: var(--accent); border-color: var(--accent); }

    .btn-draft { width: 100%; max-width: 150px; padding: 0.75rem 1.875rem; font-weight: 600; color: var(--yellow) !important; background: var(--white); box-shadow: 0 0.625rem 2.813rem rgba(0, 0, 0, 0.10); }
    .btn-draft .icon { margin-right: 0.313rem; }
    .btn-draft:hover, .btn-draft:focus { color: var(--yellow) !important; background: rgba(252, 200, 23, 0.05); border-color: var(--yellow); }

    .listicle-item { position: relative; margin-bottom: 1.25rem; border: 1px solid var(--border2); border-radius: 0.5rem; box-shadow: 0 0.125rem 0.313rem rgba(0, 0, 0, 0.015555); }
    .listicle-item .listicle-header { position: relative; display: block; border-color: transparent; padding: 1rem 0.625rem; -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; }
    .listicle-item .listicle-header .listicle-title { font-weight: 600; font-size: 1.063rem; line-height: 1; color: var(--text); margin-bottom: 0; }
    .listicle-item .listicle-header.collapsed { border-bottom: 1px solid var(--light); }
    .listicle-item .listicle-header::before { font-family: 'feather'; content: "\e842"; position: absolute; right: 5px; font-weight: 900; font-size: 22px; line-height: 1; color: var(--text); }
    .listicle-item .listicle-header.collapsed::before { content: "\e844"; }
    .listicle-item .listicle-body { overflow: hidden; border-top: 1px solid var(--light); padding: 0.625rem; }
    .listicle-item .listicle-body .form-style .form-action { justify-content: flex-end; }

    .separator-listicle { border-top: 1px solid var(--light); }
/* ------------------------------------ end listicle ------------------------------------ */


.quiz-box {
    position: relative;
    overflow: hidden;
    background: var(--white);
    padding: 1.875rem;
    -webkit-box-shadow: 0 0.313rem 1.875rem -0.625rem rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.313rem 1.875rem -0.625rem rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    margin-top: 1.875rem;
}

.quiz-box .text-soal { border-bottom: 1px solid var(--light); padding-bottom: 0.75rem; }
.icon-score { max-width: 120px; margin-top: 10px; margin-bottom: 5px; }


/* ------------------------------------ transition animate ------------------------------------ */
    @-webkit-keyframes check {
        0% { height: 0; width: 0; }
        25% { height: 0; width: 10px; }
        50% { height: 20px; width: 10px; }
    }
    @-moz-keyframes check {
        0% { height: 0; width: 0; }
        25% { height: 0; width: 10px; }
        50% { height: 20px; width: 10px; }
    }
    @-ms-keyframes check {
        0% { height: 0; width: 0; }
        25% { height: 0; width: 10px; }
        50% { height: 20px; width: 10px; }
    }
    @keyframes check {
        0% { height: 0; width: 0; }
        25% { height: 0; width: 10px; }
        50% { height: 20px; width: 10px; }
    }


    @-webkit-keyframes slide-down { 
        from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
        to { -webkit-transform: translateY(0%); transform: translateY(0%); }
    }
    @keyframes slide-down { 
        from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
        to { -webkit-transform: translateY(0%); transform: translateY(0%); }
    }
    @-webkit-keyframes slide-up { 
        from { -webkit-transform: translateY(0%); transform: translateY(0%); }
        to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
    }
    @keyframes slide-up { 
        from { -webkit-transform: translateY(0%); transform: translateY(0%); }
        to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
    }


    @keyframes shadow-pulse {
        0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.2); }
        100% { box-shadow: 0 0 0 35px rgba(0,0,0,0); }
    }
    @keyframes shadow-pulse-big {
        0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.1); }
        100% { box-shadow: 0 0 0 70px rgba(0,0,0,0); }
    }


    @keyframes shine-lines {
        0% { background-position: -100px; }
        40%, 100% { background-position: 140px; }
    }


    @keyframes stroke {
        100% { stroke-dashoffset: 0; }
    }

    @keyframes scale {
        0%, 100% { transform: none; }
        50% { transform: scale3d(1.1, 1.1, 1); }
    }

    @keyframes fill_checkmark {
        100% { box-shadow: inset 0px 0px 0px 40px #7ac142; }
    }

    @keyframes fill_dismiss {
        100% { box-shadow: inset 0px 0px 0px 40px #D06079; }
    }

    @-webkit-keyframes dash {
        0% { stroke-dashoffset: 1000; }
        100% { stroke-dashoffset: 0; }
    }
    @keyframes dash {
        0% { stroke-dashoffset: 1000; }
        100% { stroke-dashoffset: 0; }
    }
/* ------------------------------------ end transition animate ------------------------------------ */


/* ------------------------------------ whatsapp ------------------------------------ */
    .widget-whatsapp {
        position: fixed;
        bottom: 0;
        right: 10px;
        width: 50px;
        text-align: center;
        overflow: hidden;
        z-index: 100;
        cursor: pointer;
        bottom: calc(11% + 60px);
        background: transparent;
    }

    .widget-whatsapp .avatar{
        width: 50px;
        overflow: hidden;
    }
   
    .whatsapp-box{
        position: fixed;
        bottom: calc(23% + 60px);
        right:15px;
        z-index: 999999;
        background: #fff;
        width: 350px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0px 1px 10px rgba(0,0,0,0.1);
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
        transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .whatsapp-box.active{
        transform: translateY(0);
        visibility: visible;
        opacity: 1;
    }
    .whatsapp-box .welcome-text svg { width: 20px; height: auto; }
    .whatsapp-box .welcome-text svg { height: 18px; width: auto; fill:#aaa; vertical-align: middle; }
    .whatsapp-box .welcome-text .time { font-size: 12px; color:#aaa; }
    .whatsapp-box .whatsapp-form svg { height: 20px; width: auto; fill:#aaa; }
    .whatsapp-box .heading{
        background: var(--accent);
        padding:15px;
        color:#fff;
        display: flex;
        align-items: center;
    }
    .whatsapp-box .heading .btn-close{
        background: none;
        border:none;
        outline: none;
        box-shadow: none;
        position: absolute;
        top:0;
        left:0;
        color:#fff;
        padding:15px 30px;
        font-size: 20px;
    }
    .whatsapp-box .heading .avatar{
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 50%;
        overflow: hidden;
    }
    .whatsapp-box .heading .avatar img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .whatsapp-box .name{
        padding-left: 10px;
        font-weight: 700;
    }

    .whatsapp-box .chatbox{
        padding:15px;
        background: #eee;
    }
    .whatsapp-box .whatsapp-form{
        display: flex;
        flex-direction: row;
        flex:1;
        padding:10px;
    }
    .whatsapp-box .whatsapp-form .form-control{
        width: 100%;
        border:none;
        box-shadow: none;
        background: none;
    }
    .whatsapp-box .whatsapp-form .btn-send{
        width: auto;
        background: none;
        border:none;
        outline: none;
    }
    .whatsapp-box .welcome-text{
        background: #E4FDC7;
        font-size: 14px;
        position: relative;
        padding:15px;
        box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
        border-radius: 5px;
        font-family: "roboto", sans-serif;
        margin-left:15px;
        line-height: 120%;
        transform: translateY(50px);
        opacity: 0;
        visibility: hidden;
        transition: .3s ease;
        transition-delay: .6s;
    }
    .whatsapp-box.active .welcome-text{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .whatsapp-box .welcome-text:before{
        content: "";
        position: absolute;
        top:0;
        left:-16px;
        border:8px solid transparent;
        border-right: 8px solid #E4FDC7;
        border-top: 8px solid #E4FDC7;
    }
    .whatsapp-box .welcome-text .notice{
        float: right;
        margin:-7px 0 0;
        margin-bottom: 10px;
    }
/* ------------------------------------ end whatsapp ------------------------------------ */

/* ------------------------------------ breadcrumb ------------------------------------ */
    .breadcrumb { 
        list-style: none;           
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0px;
    }

    .breadcrumb-item {
        display: inline-block;
        margin-right: 0.5rem;
        font-size: 14px;
        font-weight: 600;
    }

    .breadcrumb-item a {
        color: var(--color3);
    }

    .breadcrumb-item.active {
        color: var(--accent) !important;  
        text-decoration: none;
        pointer-events: none;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        content: ">";
        color: var(--color3);
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }

    .breadcrumb-item a:hover {
        color: var(--accent);
    }

    @media (max-width: 580px) {
        .breadcrumb-item { font-size: 12px; margin-right: 0rem; }
        .breadcrumb-item + .breadcrumb-item::before { margin-right: 0rem; margin-left: 0rem; }
        .breadcrumb-item.active {
            width: 155px;               
            white-space: nowrap;         
            overflow: hidden;            
            text-overflow: ellipsis;       
        }
    }

/* ------------------------------------ end breadcrumb ------------------------------------ */