/* Font Weights */

.font-thin {
    font-weight: 100;
}

.font-lighter {
    font-weight: 200;
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-semibold {
    font-weight: 500;
}

.font-bold {
    font-weight: 600;
}




/* Titles */

.title-thin h1,
.title-thin h2,
.title-thin h3 {
    font-weight: 100;
}

.title-light h1,
.title-light h2,
.title-light h3 {
    font-weight: 300;
}

.title-normal h1,
.title-normal h2,
.title-normal h3 {
    font-weight: 400;
}

.title-semibold h1,
.title-semibold h2,
.title-semibold h3 {
    font-weight: 500;
}

.title-bold h1,
.title-bold h2,
.title-bold h3 {
    font-weight: 600;
}




/* Containers */

.container,
.container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding, 15px);
    padding-right: var(--container-padding, 15px);
}

@media (min-width: 576px) {
    .container {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: var(--container-md);
    }
}

@media (min-width: 992px) {
    .container {
        max-width: var(--container-lg);
    }
}

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

@media (min-width: 1400px) {
    .container {
        max-width: var(--container-xxl);
    }
}



/* Z-Index */

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-60 { z-index: 60; }
.z-70 { z-index: 70; }
.z-80 { z-index: 80; }
.z-90 { z-index: 90; }
.z-100 { z-index: 100; }

.-z-10 { z-index: 10 !important; }
.-z-20 { z-index: 20 !important; }
.-z-30 { z-index: 30 !important; }
.-z-40 { z-index: 40 !important; }
.-z-50 { z-index: 50 !important; }
.-z-60 { z-index: 60 !important; }
.-z-70 { z-index: 70 !important; }
.-z-80 { z-index: 80 !important; }
.-z-90 { z-index: 90 !important; }
.-z-100 { z-index: 100 !important; }




/* Wrappers */

.wrapper.fullscreen,
.wrapper.h-100dvh { height: 100dvh; }
.wrapper.min-h-100dvh { min-height: 100dvh; }

.wrapper.h-100svh { height: 100svh; }
.wrapper.min-h-100svh { min-height: 100svh; }

.wrapper.h-100lvh { height: 100lvh; }
.wrapper.min-h-100lvh { min-height: 100lvh; }

.wrapper.h-100vh { height: 100vh; }
.wrapper.min-h-100vh { min-height: 100vh; }

.wrapper.h-50dvh { height: 50dvh; }
.wrapper.min-h-50dvh { min-height: 50dvh; }

.wrapper {
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.wrapper.relative {
    position: relative;
    z-index: 50;
}

.hide-overflow,
.wrapper.overflow {
    overflow: hidden;
}





/* Background Colors */

.bg-white {
    background-color: var(--theme-white);
}
.bg-light {
    background-color: var(--theme-light);
}
.bg-lighter {
    background-color: var(--theme-lighter);
}





/* Border Radius */

.rounded,
.rounded-t,
.rounded-tl { border-top-left-radius: 20px; }

.rounded,
.rounded-t,
.rounded-tr { border-top-right-radius: 20px; }

.rounded,
.rounded-b,
.rounded-bl { border-bottom-left-radius: 20px; }

.rounded,
.rounded-b,
.rounded-br { border-bottom-right-radius: 20px; }

.rounded.has-before::before,
.rounded.has-after::after { border-radius: 20px; }

.rounded-sm,
.rounded-sm-t,
.rounded-sm-tl { border-top-left-radius: 10px; }

.rounded-sm,
.rounded-sm-t,
.rounded-sm-tr { border-top-right-radius: 10px; }

.rounded-sm,
.rounded-sm-b,
.rounded-sm-bl { border-bottom-left-radius: 10px; }

.rounded-sm,
.rounded-sm-b,
.rounded-sm-br { border-bottom-right-radius: 10px; }

.rounded-sm.has-before::before,
.rounded-sm.has-after::after { border-radius: 10px; }

.rounded-xs,
.rounded-xs.has-before::before,
.rounded-xs.has-after::after { border-radius: 6px; }






/* Whitespace */

.whitespace-normal {
    white-space: normal;
}

.whitespace-wrap {
    white-space: wrap;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.whitespace-pre {
    white-space: pre;
}




/* Flex */

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-col {
    display: flex;
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}




/* Aspect Ratio */

.aspect-0\.5  { aspect-ratio: 0.5; }
.aspect-0\.65 { aspect-ratio: 0.65; }
.aspect-0\.75 { aspect-ratio: 0.75; }
.aspect-0\.85 { aspect-ratio: 0.85; }
.aspect-1     { aspect-ratio: 1.0; }
.aspect-1\.5  { aspect-ratio: 1.5; }
.aspect-2     { aspect-ratio: 2.0; }
.aspect-2\.5  { aspect-ratio: 2.5; }
.aspect-3     { aspect-ratio: 3.0; }
.aspect-3\.5  { aspect-ratio: 3.5; }




/* Scaling */

.scale-10, .svg-0\.1  > svg { transform: scale(0.1); }
.scale-20, .svg-0\.2  > svg { transform: scale(0.2); }
.scale-30, .svg-0\.3  > svg { transform: scale(0.3); }
.scale-40, .svg-0\.4  > svg { transform: scale(0.4); }
.scale-50, .svg-0\.5  > svg { transform: scale(0.5); }
.scale-60, .svg-0\.6  > svg { transform: scale(0.6); }
.scale-70, .svg-0\.7  > svg { transform: scale(0.7); }
.scale-80, .svg-0\.8  > svg { transform: scale(0.8); }
.scale-90, .svg-0\.9  > svg { transform: scale(0.9); }

.scale-5,   .svg-0\.05 > svg { transform: scale(0.05); }
.scale-15,  .svg-0\.15 > svg { transform: scale(0.15); }
.scale-25,  .svg-0\.25 > svg { transform: scale(0.25); }
.scale-35,  .svg-0\.35 > svg { transform: scale(0.35); }
.scale-45,  .svg-0\.45 > svg { transform: scale(0.45); }
.scale-55,  .svg-0\.55 > svg { transform: scale(0.55); }
.scale-65,  .svg-0\.65 > svg { transform: scale(0.65); }
.scale-75,  .svg-0\.75 > svg { transform: scale(0.75); }
.scale-85,  .svg-0\.85 > svg { transform: scale(0.85); }
.scale-95,  .svg-0\.95 > svg { transform: scale(0.95); }

.scale-100, .svg-1\.0  > svg { transform: scale(1.00); }
.scale-125, .svg-1\.25 > svg { transform: scale(1.25); }
.scale-135, .svg-1\.35 > svg { transform: scale(1.35); }
.scale-150, .svg-1\.5  > svg { transform: scale(1.50); }
.scale-165, .svg-1\.65 > svg { transform: scale(1.65); }
.scale-175, .svg-1\.75 > svg { transform: scale(1.75); }
.scale-200, .svg-2\.0  > svg { transform: scale(2.00); }




/* Margin X */

.-mx-0\.5 { margin: 0 -0.125rem !important; }
.-mx-1 { margin: 0 -0.25rem !important; }
.-mx-2 { margin: 0 -0.50rem !important; }
.-mx-3 { margin: 0 -0.75rem !important; }
.-mx-4 { margin: 0 -1.00rem !important; }




/* Margin Left */

.-ml-0\.5 { margin-left: -0.125rem !important; }
.-ml-1 { margin-left: -0.25rem !important; }
.-ml-2 { margin-left: -0.50rem !important; }
.-ml-3 { margin-left: -0.75rem !important; }
.-ml-4 { margin-left: -1.00rem !important; }




/* Margin Right */

.-mr-0\.5 { margin-right: -0.125rem !important; }
.-mr-1 { margin-right: -0.25rem !important; }
.-mr-2 { margin-right: -0.50rem !important; }
.-mr-3 { margin-right: -0.75rem !important; }
.-mr-4 { margin-right: -1.00rem !important; }




/* Margin Bottom  */

.mb-0\.25 { margin-bottom: 0.0625rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-0\.75 { margin-bottom: 0.1875rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.50rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1.00rem; }

.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.50rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-8 { margin-bottom: 2.00rem; }

.mb-9 { margin-bottom: 2.25rem; }
.mb-10 { margin-bottom: 2.50rem; }
.mb-11 { margin-bottom: 2.75rem; }
.mb-12 { margin-bottom: 3.00rem; }




/* Margin Top  */

.mt-0\.25 { margin-top: 0.0625rem; }
.mt-0\.5  { margin-top: 0.125rem;  }
.mt-0\.75 { margin-top: 0.1875rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.50rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1.00rem; }

.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.50rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2.00rem; }

.mt-9 { margin-top: 2.25rem; }
.mt-10 { margin-top: 2.50rem; }
.mt-11 { margin-top: 2.75rem; }
.mt-12 { margin-top: 3.00rem; }



/* Pull Margin  */

.-mt-x { margin-top: -1.00rem !important; }
.-mb-x { margin-bottom: -1.00rem !important; }

@media all and (max-width: 575px) {

    .-mt-x { margin-top: -0.5rem !important; }
    .-mb-x { margin-bottom: -0.5rem !important; }

}



.-mt-1 { margin-top: -0.25rem !important; }
.-mt-2 { margin-top: -0.50rem !important; }
.-mt-3 { margin-top: -0.75rem !important; }
.-mt-4 { margin-top: -1.00rem !important; }
.-mt-5 { margin-top: -1.25rem !important; }
.-mt-6 { margin-top: -1.50rem !important; }
.-mt-7 { margin-top: -1.75rem !important; }
.-mt-8 { margin-top: -2.00rem !important; }
.-mt-9 { margin-top: -2.25rem !important; }
.-mt-10 { margin-top: -2.50rem !important; }
.-mt-11 { margin-top: -2.75rem !important; }
.-mt-12 { margin-top: -3.00rem !important; }

.-mb-1 { margin-bottom: -0.25rem !important; }
.-mb-2 { margin-bottom: -0.50rem !important; }
.-mb-3 { margin-bottom: -0.75rem !important; }
.-mb-4 { margin-bottom: -1.00rem !important; }
.-mb-5 { margin-bottom: -1.25rem !important; }
.-mb-6 { margin-bottom: -1.50rem !important; }
.-mb-7 { margin-bottom: -1.75rem !important; }
.-mb-8 { margin-bottom: -2.00rem !important; }
.-mb-9 { margin-bottom: -2.25rem !important; }
.-mb-10 { margin-bottom: -2.50rem !important; }
.-mb-11 { margin-bottom: -2.75rem !important; }
.-mb-12 { margin-bottom: -3.00rem !important; }




.py-mini,
.pt-mini,
.wrapper.mini,
.wrapper.mini-top {
    padding-top: var(--size-mini);
}

.py-mini,
.pb-mini,
.wrapper.mini,
.wrapper.mini-bottom {
    padding-bottom: var(--size-mini);
}

.py-tiny,
.pt-tiny,
.wrapper.tiny,
.wrapper.tiny-top {
    padding-top: var(--size-tiny);
}

.py-tiny,
.pb-tiny,
.wrapper.tiny,
.wrapper.tiny-bottom {
    padding-bottom: var(--size-tiny);
}


.py-small,
.pt-small,
.wrapper.small,
.wrapper.small-top {
    padding-top: var(--size-small);
}

.py-small,
.pb-small,
.wrapper.small,
.wrapper.small-bottom {
    padding-bottom: var(--size-small);
}

.py-medium,
.pt-medium,
.wrapper.medium,
.wrapper.medium-top {
    padding-top: var(--size-medium);
}

.py-medium,
.pb-medium,
.wrapper.medium,
.wrapper.medium-bottom {
    padding-bottom: var(--size-medium);
}

.py-normal,
.pt-normal,
.wrapper.normal,
.wrapper.normal-top {
    padding-top: var(--size-normal);
}

.py-normal,
.pb-normal,
.wrapper.normal,
.wrapper.normal-bottom {
    padding-bottom: var(--size-normal);
}

.py-large,
.pt-large,
.wrapper.large,
.wrapper.large-top {
    padding-top: var(--size-large);
}

.py-large,
.pb-large,
.wrapper.large,
.wrapper.large-bottom {
    padding-bottom: var(--size-large);
}

.py-huge,
.pt-huge,
.wrapper.huge,
.wrapper.huge-top {
    padding-top: var(--size-huge);
}

.py-huge,
.pb-huge,
.wrapper.huge,
.wrapper.huge-bottom {
    padding-bottom: var(--size-huge);
}


.pt-none, .pt-none.wrapper { padding-top: 0; }
.pl-none, .pl-none.wrapper { padding-left: 0; }
.pr-none, .pr-none.wrapper { padding-right: 0; }
.pb-none, .pb-none.wrapper { padding-bottom: 0; }

.pt-mini, .pt-mini.wrapper { padding-top: var(--size-mini); }
.pl-mini, .pl-mini.wrapper { padding-left: var(--size-mini); }
.pr-mini, .pr-mini.wrapper { padding-right: var(--size-mini); }
.pb-mini, .pb-mini.wrapper { padding-bottom: var(--size-mini); }

.pt-tiny, .pt-tiny.wrapper { padding-top: var(--size-tiny); }
.pl-tiny, .pl-tiny.wrapper { padding-left: var(--size-tiny); }
.pr-tiny, .pr-tiny.wrapper { padding-right: var(--size-tiny); }
.pb-tiny, .pb-tiny.wrapper { padding-bottom: var(--size-tiny); }





/* Bootstrap */

.row.outline > div {
    min-height: 2em;
    outline: 1px solid red;
}

.row.outline > div::before {
    content: ' ';
    display: block;
    width: 100%;
    height: 100%;
    outline: 1px solid red;
    opacity: 0.5;
}

.row.static,
.row.static > div {
    position: static;
}

.row.row-center {
    justify-content: center;
}

.row {
    margin-left: calc(-1 * var(--row-px));
    margin-right: calc(-1 * var(--row-px));
    & > div {
        padding-left: calc(1 * var(--row-px));
        padding-right: calc(1 * var(--row-px));
    }
    &.x-pull > div {
        padding-bottom: calc(2 * var(--row-px));
    }
    &.x-bottom > div {
        margin-bottom: calc(-2 * var(--row-px));
    }

    --row-px: var(--container-row, 15px);

    &.x-0 { --row-px: 0px; }
    &.x-5 { --row-px: 5px; }
    &.x-10 { --row-px: 10px; }
    &.x-15 { --row-px: 15px; }
    &.x-20 { --row-px: 20px; }
    &.x-25 { --row-px: 25px; }
    &.x-30 { --row-px: 30px; }
    &.x-40 { --row-px: 40px; }
    &.x-50 { --row-px: 50px; }

    @media all and (min-width: 576px) {
        &.sm-0 { --row-px: 0px; }
        &.sm-5 { --row-px: 5px; }
        &.sm-10 { --row-px: 10px; }
        &.sm-15 { --row-px: 15px; }
        &.sm-20 { --row-px: 20px; }
        &.sm-25 { --row-px: 25px; }
        &.sm-30 { --row-px: 30px; }
        &.sm-40 { --row-px: 40px; }
        &.sm-50 { --row-px: 50px; }
    }

    @media all and (min-width: 768px) {
        &.md-0 { --row-px: 0px; }
        &.md-5 { --row-px: 5px; }
        &.md-10 { --row-px: 10px; }
        &.md-15 { --row-px: 15px; }
        &.md-20 { --row-px: 20px; }
        &.md-25 { --row-px: 25px; }
        &.md-30 { --row-px: 30px; }
        &.md-40 { --row-px: 40px; }
        &.md-50 { --row-px: 50px; }
    }

    @media all and (min-width: 992px) {
        &.lg-0 { --row-px: 0px; }
        &.lg-5 { --row-px: 5px; }
        &.lg-10 { --row-px: 10px; }
        &.lg-15 { --row-px: 15px; }
        &.lg-20 { --row-px: 20px; }
        &.lg-25 { --row-px: 25px; }
        &.lg-30 { --row-px: 30px; }
        &.lg-40 { --row-px: 40px; }
        &.lg-50 { --row-px: 50px; }
    }

    @media all and (min-width: 1200px) {
        &.xl-0 { --row-px: 0px; }
        &.xl-5 { --row-px: 5px; }
        &.xl-10 { --row-px: 10px; }
        &.xl-15 { --row-px: 15px; }
        &.xl-20 { --row-px: 20px; }
        &.xl-25 { --row-px: 25px; }
        &.xl-30 { --row-px: 30px; }
        &.xl-40 { --row-px: 40px; }
        &.xl-50 { --row-px: 50px; }
    }

    @media all and (min-width: 1400px) {
        &.xxl-0 { --row-px: 0px; }
        &.xxl-5 { --row-px: 5px; }
        &.xxl-10 { --row-px: 10px; }
        &.xxl-15 { --row-px: 15px; }
        &.xxl-20 { --row-px: 20px; }
        &.xxl-25 { --row-px: 25px; }
        &.xxl-30 { --row-px: 30px; }
        &.xxl-40 { --row-px: 40px; }
        &.xxl-50 { --row-px: 50px; }
    }

}



@media all and (max-width: 400px) {

    .row.responsive > div:not([class*="col-xxs"]) {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

}


@media all and (min-width: 400px) {

    .row.x-res { margin: 0 -1.25vw; }
    .row.x-res > div { padding: 0 1.25vw; }
    .row.x-res.x-bottom > div { padding-bottom: 2.5vw; }

}

@media all and (min-width: 575px) {

    .row.x-res { margin: 0 -1vw; }
    .row.x-res > div { padding: 0 1vw; }
    .row.x-res.x-bottom > div { padding-bottom: 2vw; }

}

@media all and (min-width: 992px) {

    .row.x-res { margin: 0 -10px; }
    .row.x-res > div { padding: 0 10px; }
    .row.x-res.x-bottom > div { padding-bottom: 20px; }

}







/* Bootstrap Extended */

.width-1 { width: 8.333%; }
.width-2 { width: 16.666%; }
.width-3 { width: 25%; }
.width-4 { width: 33.333%; }
.width-5 { width: 41.666%; }
.width-6 { width: 50%; }
.width-7 { width: 58.333%; }
.width-8 { width: 66.666%; }
.width-9 { width: 75%; }
.width-10 { width: 83.333%; }
.width-11 { width: 91.666%; }
.width-12 { width: 100%; }

@media all and (max-width: 575px) {
    .width-xs-1 { width: 8.333%; }
    .width-xs-2 { width: 16.666%; }
    .width-xs-3 { width: 25%; }
    .width-xs-4 { width: 33.333%; }
    .width-xs-5 { width: 41.666%; }
    .width-xs-6 { width: 50%; }
    .width-xs-7 { width: 58.333%; }
    .width-xs-8 { width: 66.666%; }
    .width-xs-9 { width: 75%; }
    .width-xs-10 { width: 83.333%; }
    .width-xs-11 { width: 91.666%; }
    .width-xs-12 { width: 100%; }
}

@media all and (min-width: 576px) and (max-width: 767px) {
    .width-sm-1 { width: 8.333%; }
    .width-sm-2 { width: 16.666%; }
    .width-sm-3 { width: 25%; }
    .width-sm-4 { width: 33.333%; }
    .width-sm-5 { width: 41.666%; }
    .width-sm-6 { width: 50%; }
    .width-sm-7 { width: 58.333%; }
    .width-sm-8 { width: 66.666%; }
    .width-sm-9 { width: 75%; }
    .width-sm-10 { width: 83.333%; }
    .width-sm-11 { width: 91.666%; }
    .width-sm-12 { width: 100%; }
}

@media all and (min-width: 768px) and (max-width: 991px) {
    .width-md-1 { width: 8.333%; }
    .width-md-2 { width: 16.666%; }
    .width-md-3 { width: 25%; }
    .width-md-4 { width: 33.333%; }
    .width-md-5 { width: 41.666%; }
    .width-md-6 { width: 50%; }
    .width-md-7 { width: 58.333%; }
    .width-md-8 { width: 66.666%; }
    .width-md-9 { width: 75%; }
    .width-md-10 { width: 83.333%; }
    .width-md-11 { width: 91.666%; }
    .width-md-12 { width: 100%; }
}

@media all and (min-width: 992px) and (max-width: 1199px) {
    .width-lg-1 { width: 8.333%; }
    .width-lg-2 { width: 16.666%; }
    .width-lg-3 { width: 25%; }
    .width-lg-4 { width: 33.333%; }
    .width-lg-5 { width: 41.666%; }
    .width-lg-6 { width: 50%; }
    .width-lg-7 { width: 58.333%; }
    .width-lg-8 { width: 66.666%; }
    .width-lg-9 { width: 75%; }
    .width-lg-10 { width: 83.333%; }
    .width-lg-11 { width: 91.666%; }
    .width-lg-12 { width: 100%; }
}

@media all and (min-width: 1200px) and (max-width: 1399px) {
    .width-xl-1 { width: 8.333%; }
    .width-xl-2 { width: 16.666%; }
    .width-xl-3 { width: 25%; }
    .width-xl-4 { width: 33.333%; }
    .width-xl-5 { width: 41.666%; }
    .width-xl-6 { width: 50%; }
    .width-xl-7 { width: 58.333%; }
    .width-xl-8 { width: 66.666%; }
    .width-xl-9 { width: 75%; }
    .width-xl-10 { width: 83.333%; }
    .width-xl-11 { width: 91.666%; }
    .width-xl-12 { width: 100%; }
}





.width-64 { width: 64px; }
.width-96 { width: 96px; }
.width-128 { width: 128px; }
.width-192 { width: 192px; }
.width-256 { width: 256px; }

@media all and (min-width: 400px) and (max-width: 575px) {

    .col-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xs-2 { flex: 0 0 16.666666%; max-width: 16.666666%; }
    .col-xs-3 { flex: 0 0 25%; max-width: 25%; }

    .col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xs-6 { flex: 0 0 50%; max-width: 50%; }

    .col-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xs-8 { flex: 0 0 66.666666%; max-width: 66.666666%; }
    .col-xs-9 { flex: 0 0 75%; max-width: 75%; }

    .col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xs-12 { flex: 0 0 100%; max-width: 100%; }

}





/* Responsive */

@media all and (max-width: 575px) {

    .hidden-xs,
    .hidden:not(.visible-xs) { display:none !important; }

}
@media all and (min-width: 576px) and (max-width: 767px) {

    .hidden-sm,
    .hidden:not(.visible-sm) { display:none !important; }

}
@media all and (min-width: 768px) and (max-width: 991px) {

    .hidden-md,
    .hidden:not(.visible-md) { display:none !important; }

}
@media all and (min-width: 992px) and (max-width: 1199px) {

    .hidden-lg,
    .hidden:not(.visible-lg) { display:none !important; }

}
@media all and (min-width: 1200px) and (max-width: 1399px) {

    .hidden-xl,
    .hidden:not(.visible-xl) { display:none !important; }

}
@media all and (min-width: 1400px) {

    .hidden-xxl,
    .hidden:not(.visible-xxl) { display:none !important; }

}


@media all and (max-width: 575px) {
    [data-hidden^="xs"] { display: none !important; }
}
@media all and (min-width: 576px) and (max-width: 767px) {
    [data-hidden*="sm"] { display: none !important; }
}
@media all and (min-width: 768px) and (max-width: 991px) {
    [data-hidden*="md"] { display: none !important; }
}
@media all and (min-width: 992px) and (max-width: 1199px) {
    [data-hidden*="lg"] { display: none !important; }
}
@media all and (min-width: 1200px) and (max-width: 1399px) {
    [data-hidden*="xl"] { display: none !important; }
}
@media all and (min-width: 1400px) {
    [data-hidden$="xxl"] { display: none !important; }
}





/* Responsive Custom */

@media all and (max-width: 991px) {

    .hidden-mobile { display: none !important; }
    .visible-desktop { display: none !important; }

}

@media all and (min-width: 992px) {

    .hidden-desktop { display: none !important; }
    .visible-mobile { display: none !important; }

}





/* Others */

.relative {
    position: relative;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.sr-hidden {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

.filter-invert {
    filter: invert(1);
}





/* Cursors */

.cursor-auto {
    cursor: auto;
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-wait {
    cursor: wait;
}

.cursor-text {
    cursor: text;
}

.cursor-move {
    cursor: move;
}

.cursor-help {
    cursor: help;
}

.cursor-not-allowed {
    cursor: not-allowed;
}





/* Pointer Events */

.pointer-events,
.pointer-events-auto {
    pointer-events: auto;
}

.no-pointer-events,
.pointer-events-none {
    pointer-events: none;
}





/* Transition */

.transition {
    transition: var(--transition);
}

.transition-opacity {
    transition: opacity var(--transition-duration) var(--transition-timing-function);
}

.transition-transform {
    transition: transform var(--transition-duration) var(--transition-timing-function);
}




/* Truncate */

[data-text-ellipsis] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
}

[data-text-ellipsis="2"] { -webkit-line-clamp: 2; }
[data-text-ellipsis="3"] { -webkit-line-clamp: 3; }
[data-text-ellipsis="4"] { -webkit-line-clamp: 4; }
[data-text-ellipsis="5"] { -webkit-line-clamp: 5; }




/* Scrollbar */

[data-scrollbar]::-webkit-scrollbar-track {
    background: transparent;
}

[data-scrollbar*="bg-black"]::-webkit-scrollbar-track {
    background: var(--theme-black);
}

[data-scrollbar*="bg-white"]::-webkit-scrollbar-track {
    background: var(--theme-white);
}

[data-scrollbar]::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px var(--theme-gray);
}

[data-scrollbar*="is-white"]::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px var(--theme-white);
}

[data-scrollbar*="is-black"]::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px var(--theme-black);
}

[data-scrollbar*="is-gray"]::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px var(--theme-gray);
}

[data-scrollbar*="opacity-black"]::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px rgba( 0, 0, 0, 0.15 );
}

[data-scrollbar*="opacity-white"]::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px rgba( 255, 255, 255, 0.25 );
}

[data-scrollbar]::-webkit-scrollbar { width: 2px; }

[data-scrollbar*="size-0"]::-webkit-scrollbar { width: 0; height: 0; }
[data-scrollbar*="size-1"]::-webkit-scrollbar { width: 1px; height: 1px; }
[data-scrollbar*="size-2"]::-webkit-scrollbar { width: 2px; height: 2px; }
[data-scrollbar*="size-3"]::-webkit-scrollbar { width: 3px; height: 3px; }
[data-scrollbar*="size-4"]::-webkit-scrollbar { width: 4px; height: 4px; }
[data-scrollbar*="size-6"]::-webkit-scrollbar { width: 6px; height: 6px; }
[data-scrollbar*="size-8"]::-webkit-scrollbar { width: 8px; height: 8px; }

[data-scrollbar*="size-10"]::-webkit-scrollbar { width: 10px; height: 10px; }
[data-scrollbar*="size-12"]::-webkit-scrollbar { width: 12px; height: 12px; }
[data-scrollbar*="size-15"]::-webkit-scrollbar { width: 15px; height: 15px; }
[data-scrollbar*="size-20"]::-webkit-scrollbar { width: 20px; height: 20px; }

[data-scrollbar*="gap-1"]::-webkit-scrollbar-thumb { border-left: solid 1px transparent; }
[data-scrollbar*="gap-2"]::-webkit-scrollbar-thumb { border-left: solid 2px transparent; }
[data-scrollbar*="gap-3"]::-webkit-scrollbar-thumb { border-left: solid 3px transparent; }
[data-scrollbar*="gap-4"]::-webkit-scrollbar-thumb { border-left: solid 4px transparent; }
[data-scrollbar*="gap-6"]::-webkit-scrollbar-thumb { border-left: solid 6px transparent; }
[data-scrollbar*="gap-8"]::-webkit-scrollbar-thumb { border-left: solid 8px transparent; }
[data-scrollbar*="gap-10"]::-webkit-scrollbar-thumb { border-left: solid 10px transparent; }
[data-scrollbar*="gap-15"]::-webkit-scrollbar-thumb { border-left: solid 15px transparent; }