/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// 
 *
 *  ShaadiCouple.com
 *  Custom colors, styles, backgrounds etc
 *
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// 
 *****************************************Background Colors - Line: 27**************************************
 # Background Colors (Blue, Slate, Red, Green, Orange, Cyan, Pink, Purple, Indigo, Teal, Yellow, Gray)   

 *****************************************Custom Pagination - Line: 474**************************************
 *****************************************Drop Area (File Upload) - Line: 603********************************   
************************************************************************************************************/


/* 1. imported styles */
/*@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css");*/
/*@import url("font-awesome.min.css");*/




/*********************************************************************************/
/*******************************Animate Icon (Moving Heart)***********************/
/*********************************************************************************/
.moving-section-1 .moving-heart {
    top: 15%;
    left: 10%;
}

.moving-section-2 .moving-double-heart {
    top: 15%;
    right: 13%;
}

.moving-section-3 .moving-heart {
    top: 90%;
    left: 10%;
}

.moving-section-4 .moving-heart {
    top: 90%;
    right: 13%;
}

.moving-section-5 .moving-heart {
    position: relative;
    bottom: 50%;
    left: 10%;
}

.moving-section-6 .moving-heart {
    position: relative;
    bottom: 20%;
    right: 13%;
}

.moving-heart {
    position: absolute;
    -webkit-animation-name: movingheart;
    animation-name: movingheart;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    -webkit-perspective: 400px;
    perspective: 400px;
}

.moving-double-heart {
    position: absolute;
    -webkit-animation-name: movingheart;
    animation-name: movingheart;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    -webkit-perspective: 400px;
    perspective: 400px;
}

@-webkit-keyframes movingheart {
    0% {
        -webkit-transform: rotate3d(0, 1, 0, 15deg) translateY(0px) translateX(0px);
        transform: rotate3d(0, 1, 0, 15deg) translateY(0px) translateX(0px);
    }

    30% {
        -webkit-transform: rotate3d(0, 0, 1, 20deg) translateY(10px) translateX(10px);
        transform: rotate3d(0, 0, 1, 20deg) translateY(10px) translateX(10px);
    }

    60% {
        -webkit-transform: rotate3d(1, 0, 0, 15deg) translateY(20px) translateX(20px);
        transform: rotate3d(1, 0, 0, 15deg) translateY(20px) translateX(20px);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, 20deg) translateY(10px) translateX(10px);
        transform: rotate3d(0, 0, 1, 20deg) translateY(10px) translateX(10px);
    }

    100% {
        -webkit-transform: rotate3d(0, 1, 0, 15deg) translateY(0px) translateX(0px);
        transform: rotate3d(0, 1, 0, 15deg) translateY(0px) translateX(0px);
    }
}

@keyframes movingheart {
    0% {
        -webkit-transform: rotate3d(0, 1, 0, 15deg) translateY(0px) translateX(0px);
        transform: rotate3d(0, 1, 0, 15deg) translateY(0px) translateX(0px);
    }

    30% {
        -webkit-transform: rotate3d(0, 0, 1, 20deg) translateY(10px) translateX(10px);
        transform: rotate3d(0, 0, 1, 20deg) translateY(10px) translateX(10px);
    }

    60% {
        -webkit-transform: rotate3d(1, 0, 0, 15deg) translateY(20px) translateX(20px);
        transform: rotate3d(1, 0, 0, 15deg) translateY(20px) translateX(20px);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, 20deg) translateY(10px) translateX(10px);
        transform: rotate3d(0, 0, 1, 20deg) translateY(10px) translateX(10px);
    }

    100% {
        -webkit-transform: rotate3d(0, 1, 0, 15deg) translateY(0px) translateX(0px);
        transform: rotate3d(0, 1, 0, 15deg) translateY(0px) translateX(0px);
    }
}


.validation-message{
    color:red;
}


/*********************************************************************************/
/*******************************Site Colors***************************************/
/*********************************************************************************/

.bg-drawer-header {
    background: linear-gradient(90deg, #31a79a 0%, #75d5b5 100%);
}


/*******************************UTouch Template*******************************/
/*------------- #SKEW-ROWS --------------*/
.section-bg-skew {
    position: relative;
    background-size: cover;
}

    .section-bg-skew > .container {
        position: relative;
        z-index: 2;
    }

    .section-bg-skew:before, .section-bg-skew:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        max-width: 100%;
        left: 0;
    }

    .section-bg-skew:before {
        height: 170px;
        background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, #fff), color-stop(50%, transparent));
        background: -o-linear-gradient(left top, #fff 50%, transparent 50%);
        background: linear-gradient(to right bottom, #fff 50%, transparent 50%);
        top: -1px;
    }

    .section-bg-skew:after {
        height: 170px;
        background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, transparent), color-stop(50%, #fff));
        background: -o-linear-gradient(left top, transparent 50%, #fff 50%);
        background: linear-gradient(to right bottom, transparent 50%, #fff 50%);
        bottom: -1px;
    }

.bg-01 {
    background-image: url(../media/bg/bg-01.png);
}

.bg-02 {
    background-image: url(../media/bg/bg-02.png);
}

.bg-03 {
    background-image: url(../media/bg/bg-03.png);    
}

.bg-04 {
    background-image: url(../media/bg/bg-04.png);
    background-color: #121921;
    padding: 120px 0 0;
    position: relative;
    -webkit-box-shadow: 10px 0 30px 0 rgba(18, 25, 33, 0.4);
    box-shadow: 10px 0 30px 0 rgba(18, 25, 33, 0.4);
}

.landing-dark-color {
    color: #121921;
}


.bg-blue-lighteen {
    background-color: #ecf5fe;
}

.pt180 {
    padding-top: 180px;
}


/*********************************************************************************/
/*******************************Site Background Themes Colors*********************/
/*********************************************************************************/

[data-sc-mode=light] {
    --sc-color-scheme: light;
    --sc-color-background-page: #fff;
    --sc-color-background-page-inverted: #0f141a;
    --sc-color-background-object: #f3f3f7;
    --sc-color-background-object-inverted: #232b37;
    --sc-color-background-invertedlowcontrast: #656871;
    --sc-color-background-glass: hsla(0,0%,100%,.7490196078);
    --sc-color-background-positive: #d9ffd6;
    --sc-color-background-neutral: #d1f1ff;
    --sc-color-background-notice: #ffe8bd;
    --sc-color-background-negative: #ffe0e0;
    --sc-color-border-lowcontrast: #ccccd1;
    --sc-color-border-mediumcontrast: #72747e;
    --sc-color-border-highcontrast: #161d26;
    --sc-color-border-highcontrast-inverted: #fff;
    --sc-color-status-success: #00802f;
    --sc-color-status-warn: #d14600;
    --sc-color-status-error: #db0000;
    --sc-color-status-info: #006ce0;
    --sc-color-text-primary: #161d26;
    --sc-color-text-primary-inverted: #fff;
    --sc-color-text-secondary: #232b37;
    --sc-color-text-heading: #161d26;
    --sc-color-text-title: #161d26;
    --sc-color-text-title-inverted: #fff;
    --sc-color-text-subheading: #232b37;
    --sc-color-text-body: #232b37;
    --sc-color-text-utility: #161d26;
    --sc-color-text-utility-inverted: #fff;
    --sc-color-text-eyebrow: #161d26;
    --sc-color-text-faded: #72747e;
    --sc-color-text-disabled: #b4b4bb;
    --sc-color-link-default: #006ce0;
    --sc-color-link-alternate: #161d26;
    --sc-color-link-hover: #003b8f;
    --sc-color-link-hover-inverted: #75cfff;
    --sc-color-link-focus: #006ce0;
    --sc-color-link-pressed: #006ce0;
    --sc-color-link-selected: #006ce0;
    --sc-color-link-visited: #6842ff;
    --sc-color-link-inactive: #b4b4bb;
    --sc-color-code-window: #f6f6f9;
    --sc-shadow-gray-elevation-1: 1px 1px 20px rgba(0,0,0,.1);
    --sc-shadow-gray-elevation-2: 1px 1px 24px rgba(0,0,0,.25);
    --sc-shadow-gradient-fuchsia: linear-gradient( 123deg, #d14600 0%, #c300e0 50%, #6842ff 100%);
    --sc-shadow-gradient-indigo: linear-gradient( 123deg, #006ce0 0%, #295eff 50%, #6842ff 100%);
    --sc-shadow-gradient-orange: linear-gradient( 123deg, #d600ba 0%, #eb003b 50%, #d14600 100%);
    --sc-shadow-gradient-teal: linear-gradient( 123deg, #008559 0%, #007e94 50%, #006ce0 100%);
    --sc-shadow-gradient-blue: linear-gradient( 123deg, #008559 0%, #006ce0 50%, #6842ff 100%);
    --sc-shadow-gradient-violet: linear-gradient( 123deg, #962eff 0%, #006ce0 50%, #007e94 100%);
    --sc-shadow-gradient-purple: linear-gradient( 123deg, #d600ba 0%, #6842ff 50%, #007e94 100%)
}

    [data-sc-theme=fuchsia][data-sc-mode=light] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #ffc0ad 0%, #f8c7ff 37.79%, #d2ccff 75.81%, #c2d1ff 100%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #ffc0ad 0%, #f8c7ff 59.42%, #d2ccff 100%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #f8c7ff 20.08%, #d2ccff 75.81%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .75) 0%, rgba(248, 199, 255, .75) 37.79%, rgba(210, 204, 255, .75) 75.81%, rgba(194, 209, 255, .75) 100%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .75) 0%, rgba(248, 199, 255, .75) 59.42%, rgba(210, 204, 255, .75) 100%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(248, 199, 255, .75) 20.08%, rgba(210, 204, 255, .75) 75.81%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .5) 0%, rgba(248, 199, 255, .5) 37.79%, rgba(210, 204, 255, .5) 75.81%, rgba(194, 209, 255, .5) 100%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .5) 0%, rgba(248, 199, 255, .5) 59.42%, rgba(210, 204, 255, .5) 100%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(248, 199, 255, .5) 20.08%, rgba(210, 204, 255, .5) 75.81%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .25) 0%, rgba(248, 199, 255, .25) 37.79%, rgba(210, 204, 255, .25) 75.81%, rgba(194, 209, 255, .25) 100%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .5) 0%, rgba(248, 199, 255, .67) 37.79%, rgba(210, 204, 255, .83) 75.81%, #c2d1ff 100%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .25) 0%, rgba(248, 199, 255, .25) 59.42%, rgba(210, 204, 255, .25) 100%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .5) 0%, rgba(248, 199, 255, .75) 59.42%, #d2ccff 100%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(248, 199, 255, .25) 20.08%, rgba(210, 204, 255, .25) 75.81%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(248, 199, 255, .5) 20.08%, #d2ccff 75.81%)
    }

[data-sc-theme=indigo][data-sc-mode=light] {
    --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #d9ffee 0%, #b8e7ff 26.85%, #c2d1ff 59.66%, #d2ccff 100%);
    --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #d9ffee 0%, #c2d1ff 70.6%, #d2ccff 100%);
    --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #b8e7ff 26.85%, #d2ccff 70.08%);
    --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .75) 0%, rgba(184, 231, 255, .75) 26.85%, rgba(194, 209, 255, .75) 59.66%, rgba(210, 204, 255, .75) 100%);
    --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .75) 0%, rgba(194, 209, 255, .75) 70.6%, rgba(210, 204, 255, .75) 100%);
    --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(184, 231, 255, .75) 26.85%, rgba(210, 204, 255, .75) 70.08%);
    --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .5) 0%, rgba(184, 231, 255, .5) 26.85%, rgba(194, 209, 255, .5) 59.66%, rgba(210, 204, 255, .5) 100%);
    --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .5) 0%, rgba(194, 209, 255, .5) 70.6%, rgba(210, 204, 255, .5) 100%);
    --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(184, 231, 255, .5) 26.85%, rgba(210, 204, 255, .5) 70.08%);
    --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .25) 0%, rgba(184, 231, 255, .25) 26.85%, rgba(194, 209, 255, .25) 59.66%, rgba(210, 204, 255, .25) 100%);
    --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .5) 0%, rgba(184, 231, 255, .67) 26.85%, rgba(194, 209, 255, .83) 59.66%, #d2ccff 100%);
    --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .25) 0%, rgba(194, 209, 255, .25) 70.6%, rgba(210, 204, 255, .25) 100%);
    --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .5) 0%, rgba(194, 209, 255, .75) 70.6%, #d2ccff 100%);
    --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(184, 231, 255, .25) 26.85%, rgba(210, 204, 255, .25) 70.08%);
    --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(184, 231, 255, .5) 26.85%, #d2ccff 70.08%)
}

    [data-sc-theme=orange][data-sc-mode=light] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #ffccf8 0%, #ffc0ad 26.85%, #ffd78a 59.66%, #fef571 100%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #ffccf8 0%, #ffc0ad 63.83%, #ffd78a 100%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #ffc0ad 26.85%, #ffd78a 71.64%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 204, 248, .75) 0%, rgba(255, 192, 173, .75) 26.85%, rgba(255, 215, 138, .75) 59.66%, rgba(254, 245, 113, .75) 100%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 204, 248, .75) 0%, rgba(255, 192, 173, .75) 63.83%, rgba(255, 215, 138, .75) 100%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .75) 26.85%, rgba(255, 215, 138, .75) 71.64%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 204, 248, .5) 0%, rgba(255, 192, 173, .5) 26.85%, rgba(255, 215, 138, .5) 59.66%, rgba(254, 245, 113, .5) 100%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 204, 248, .5) 0%, rgba(255, 192, 173, .5) 63.83%, rgba(255, 215, 138, .5) 100%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .5) 26.85%, rgba(255, 215, 138, .5) 71.64%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 204, 248, .25) 0%, rgba(255, 192, 173, .25) 26.85%, rgba(255, 215, 138, .25) 59.66%, rgba(254, 245, 113, .25) 100%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 204, 248, .5) 0%, rgba(255, 192, 173, .67) 26.85%, rgba(255, 215, 138, .83) 59.66%, #fef571 100%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 204, 248, .25) 0%, rgba(255, 192, 173, .25) 63.83%, rgba(255, 215, 138, .25) 100%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 204, 248, .5) 0%, rgba(255, 192, 173, .75) 63.83%, #ffd78a 100%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .25) 26.85%, rgba(255, 215, 138, .25) 71.64%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 192, 173, .5) 26.85%, #ffd78a 71.64%)
    }

    [data-sc-theme=teal][data-sc-mode=light] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #fef571 0%, #aeffa8 29.94%, #8fffce 66.98%, #99f7ff 100%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #fef571 0%, #8fffce 51.33%, #99f7ff 87.79%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #8fffce 28.41%, #99f7ff 69.04%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(254, 245, 113, .75) 0%, rgba(174, 255, 168, .75) 29.94%, rgba(143, 255, 206, .75) 66.98%, rgba(153, 247, 255, .75) 100%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(254, 245, 113, .75) 0%, rgba(143, 255, 206, .75) 51.33%, rgba(153, 247, 255, .75) 87.79%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .75) 28.41%, rgba(153, 247, 255, .75) 69.04%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(254, 245, 113, .5) 0%, rgba(174, 255, 168, .5) 29.94%, rgba(143, 255, 206, .5) 66.98%, rgba(153, 247, 255, .5) 100%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(254, 245, 113, .5) 0%, rgba(143, 255, 206, .5) 51.33%, rgba(153, 247, 255, .5) 87.79%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .5) 28.41%, rgba(153, 247, 255, .5) 69.04%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(254, 245, 113, .25) 0%, rgba(174, 255, 168, .25) 29.94%, rgba(143, 255, 206, .25) 66.98%, rgba(153, 247, 255, .25) 100%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(254, 245, 113, .5) 0%, rgba(174, 255, 168, .67) 29.94%, rgba(143, 255, 206, .83) 66.98%, #99f7ff 100%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(254, 245, 113, .25) 0%, rgba(143, 255, 206, .25) 51.33%, rgba(153, 247, 255, .25) 87.79%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(254, 245, 113, .5) 0%, rgba(143, 255, 206, .75) 51.33%, #99f7ff 87.79%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .25) 28.41%, rgba(153, 247, 255, .25) 69.04%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(143, 255, 206, .5) 28.41%, #99f7ff 69.04%)
    }

    [data-sc-theme=blue][data-sc-mode=light] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #d1fbff 0%, #75cfff 29.13%, #978aff 70.56%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #d1fbff 0%, #75cfff 29.13%, #978aff 70.56%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #d1fbff 0%, #75cfff 29.13%, #978aff 70.56%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .75) 0%, rgba(117, 207, 255, .75) 29.13%, rgba(151, 138, 255, .75) 70.56%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .75) 0%, rgba(117, 207, 255, .75) 29.13%, rgba(151, 138, 255, .75) 70.56%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .75) 0%, rgba(117, 207, 255, .75) 29.13%, rgba(151, 138, 255, .75) 70.56%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .5) 29.13%, rgba(151, 138, 255, .5) 70.56%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .5) 29.13%, rgba(151, 138, 255, .5) 70.56%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .5) 29.13%, rgba(151, 138, 255, .5) 70.56%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .25) 0%, rgba(117, 207, 255, .25) 29.13%, rgba(151, 138, 255, .25) 70.56%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .75) 29.13%, #978aff 70.56%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .25) 0%, rgba(117, 207, 255, .25) 29.13%, rgba(151, 138, 255, .25) 70.56%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .75) 29.13%, #978aff 70.56%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .25) 0%, rgba(117, 207, 255, .25) 29.13%, rgba(151, 138, 255, .25) 70.56%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .75) 29.13%, #978aff 70.56%)
    }

    [data-sc-theme=violet][data-sc-mode=light] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #ad5cff 0%, #0099ff 48.96%, #99f7ff 100%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #ad5cff 0%, #0099ff 48.96%, #99f7ff 100%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #ad5cff 0%, #0099ff 48.96%, #99f7ff 100%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .75) 0%, rgba(0, 153, 255, .75) 48.96%, rgba(153, 247, 255, .75) 100%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .75) 0%, rgba(0, 153, 255, .75) 48.96%, rgba(153, 247, 255, .75) 100%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .75) 0%, rgba(0, 153, 255, .75) 48.96%, rgba(153, 247, 255, .75) 100%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .5) 48.96%, rgba(153, 247, 255, .5) 100%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .5) 48.96%, rgba(153, 247, 255, .5) 100%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .5) 48.96%, rgba(153, 247, 255, .5) 100%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .25) 0%, rgba(0, 153, 255, .25) 48.96%, rgba(153, 247, 255, .25) 100%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .75) 48.96%, #99f7ff 100%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .25) 0%, rgba(0, 153, 255, .25) 48.96%, rgba(153, 247, 255, .25) 100%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .75) 48.96%, #99f7ff 100%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .25) 0%, rgba(0, 153, 255, .25) 48.96%, rgba(153, 247, 255, .25) 100%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .75) 48.96%, #99f7ff 100%)
    }

    [data-sc-theme=purple][data-sc-mode=light] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #ff94f1 7.63%, #978aff 37.94%, #00d2e5 65.23%, #8ffff8 92.12%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #ff94f1 7.63%, #978aff 37.94%, #00d2e5 65.23%, #8ffff8 92.12%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #ff94f1 7.63%, #978aff 37.94%, #00d2e5 65.23%, #8ffff8 92.12%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .75) 7.63%, rgba(151, 138, 255, .75) 37.94%, rgba(0, 210, 229, .75) 65.23%, rgba(143, 255, 248, .75) 92.12%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .75) 7.63%, rgba(151, 138, 255, .75) 37.94%, rgba(0, 210, 229, .75) 65.23%, rgba(143, 255, 248, .75) 92.12%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .75) 7.63%, rgba(151, 138, 255, .75) 37.94%, rgba(0, 210, 229, .75) 65.23%, rgba(143, 255, 248, .75) 92.12%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .5) 37.94%, rgba(0, 210, 229, .5) 65.23%, rgba(143, 255, 248, .5) 92.12%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .5) 37.94%, rgba(0, 210, 229, .5) 65.23%, rgba(143, 255, 248, .5) 92.12%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .5) 37.94%, rgba(0, 210, 229, .5) 65.23%, rgba(143, 255, 248, .5) 92.12%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .25) 7.63%, rgba(151, 138, 255, .25) 37.94%, rgba(0, 210, 229, .25) 65.23%, rgba(143, 255, 248, .25) 92.12%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .67) 37.94%, rgba(0, 210, 229, .83) 65.23%, #8ffff8 92.12%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .25) 7.63%, rgba(151, 138, 255, .25) 37.94%, rgba(0, 210, 229, .25) 65.23%, rgba(143, 255, 248, .25) 92.12%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .67) 37.94%, rgba(0, 210, 229, .83) 65.23%, #8ffff8 92.12%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .25) 7.63%, rgba(151, 138, 255, .25) 37.94%, rgba(0, 210, 229, .25) 65.23%, rgba(143, 255, 248, .25) 92.12%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .67) 37.94%, rgba(0, 210, 229, .83) 65.23%, #8ffff8 92.12%)
    }

    [data-sc-mode=dark] {
        --sc-color-scheme: dark;
        --sc-color-background-page: #0f141a;
        --sc-color-background-page-inverted: #fff;
        --sc-color-background-object: #1b232d;
        --sc-color-background-object-inverted: #f6f6f9;
        --sc-color-background-invertedlowcontrast: #ccccd1;
        --sc-color-background-glass: rgba(15,20,26,.7490196078);
        --sc-color-background-positive: #00471e;
        --sc-color-background-neutral: #002a66;
        --sc-color-background-notice: #5c1b00;
        --sc-color-background-negative: #700000;
        --sc-color-border-lowcontrast: #424650;
        --sc-color-border-mediumcontrast: #72747e;
        --sc-color-border-highcontrast: #fff;
        --sc-color-border-highcontrast-inverted: #161d26;
        --sc-color-status-success: #00e500;
        --sc-color-status-warn: #f90;
        --sc-color-status-error: #ff7a7a;
        --sc-color-status-info: #42b4ff;
        --sc-color-text-primary: #fff;
        --sc-color-text-primary-inverted: #161d26;
        --sc-color-text-secondary: #f9f9fb;
        --sc-color-text-heading: #fff;
        --sc-color-text-title: #fff;
        --sc-color-text-title-inverted: #161d26;
        --sc-color-text-subheading: #f9f9fb;
        --sc-color-text-body: #f9f9fb;
        --sc-color-text-utility: #fff;
        --sc-color-text-utility-inverted: #161d26;
        --sc-color-text-eyebrow: #fff;
        --sc-color-text-faded: #a4a4ad;
        --sc-color-text-disabled: #656871;
        --sc-color-link-default: #09f;
        --sc-color-link-alternate: #fff;
        --sc-color-link-hover: #75cfff;
        --sc-color-link-hover-inverted: #003b8f;
        --sc-color-link-focus: #09f;
        --sc-color-link-pressed: #09f;
        --sc-color-link-selected: #09f;
        --sc-color-link-visited: #978aff;
        --sc-color-link-inactive: #8c8c94;
        --sc-color-code-window: #333843;
        --sc-shadow-gray-elevation-1: 1px 1px 20px rgba(0,0,0,.1);
        --sc-shadow-gray-elevation-2: 1px 1px 24px rgba(0,0,0,.25);
        --sc-shadow-gradient-fuchsia: linear-gradient( 123deg, #fa6f00 0%, #e433ff 50%, #8575ff 100%);
        --sc-shadow-gradient-indigo: linear-gradient( 123deg, #0099ff 0%, #5c7fff 50%, #8575ff 100%);
        --sc-shadow-gradient-orange: linear-gradient( 123deg, #ff1ae0 0%, #ff386a 50%, #fa6f00 100%);
        --sc-shadow-gradient-teal: linear-gradient( 123deg, #00bd6b 0%, #00a4bd 50%, #0099ff 100%);
        --sc-shadow-gradient-blue: linear-gradient( 123deg, #00bd6b 0%, #0099ff 50%, #8575ff 100%);
        --sc-shadow-gradient-violet: linear-gradient( 123deg, #ad5cff 0%, #0099ff 50%, #00a4bd 100%);
        --sc-shadow-gradient-purple: linear-gradient( 123deg, #ff1ae0 0%, #8575ff 50%, #00a4bd 100%)
    }

    [data-sc-theme=fuchsia][data-sc-mode=dark] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #00627a 0%, #003b8f 23.21%, #78008a 63.31%, #b2008f 100%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #003b8f 0%, #78008a 38.63%, #b2008f 85.71%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #78008a 24.25%, #b2008f 69.56%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 98, 122, .75) 0%, rgba(0, 59, 143, .75) 23.21%, rgba(120, 0, 138, .75) 63.31%, rgba(178, 0, 143, .75) 100%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 59, 143, .75) 0%, rgba(120, 0, 138, .75) 38.63%, rgba(178, 0, 143, .75) 85.71%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(120, 0, 138, .75) 24.25%, rgba(178, 0, 143, .75) 69.56%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 98, 122, .5) 0%, rgba(0, 59, 143, .5) 23.21%, rgba(120, 0, 138, .5) 63.31%, rgba(178, 0, 143, .5) 100%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 59, 143, .5) 0%, rgba(120, 0, 138, .5) 38.63%, rgba(178, 0, 143, .5) 85.71%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(120, 0, 138, .5) 24.25%, rgba(178, 0, 143, .5) 69.56%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 98, 122, .25) 0%, rgba(0, 59, 143, .25) 23.21%, rgba(120, 0, 138, .25) 63.31%, rgba(178, 0, 143, .25) 100%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 98, 122, .5) 0%, rgba(0, 59, 143, .67) 23.21%, rgba(120, 0, 138, .83) 63.31%, #b2008f 100%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 59, 143, .25) 0%, rgba(120, 0, 138, .25) 38.63%, rgba(178, 0, 143, .25) 85.71%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 59, 143, .5) 0%, rgba(120, 0, 138, .75) 38.63%, #b2008f 85.71%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(120, 0, 138, .25) 24.25%, rgba(178, 0, 143, .25) 69.56%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(120, 0, 138, .5) 24.25%, #b2008f 69.56%)
    }

    [data-sc-theme=indigo][data-sc-mode=dark] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #00665f 0%, #003b8f 26.85%, #0033cc 44.56%, #7300e5 100%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #003b8f 7.61%, #0033cc 29.46%, #7300e5 91.96%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #0033cc 27.37%, #7300e5 100%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 102, 95, .75) 0%, rgba(0, 59, 143, .75) 26.85%, rgba(0, 51, 204, .75) 44.56%, rgba(115, 0, 229, .75) 100%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 59, 143, .75) 7.61%, rgba(0, 51, 204, .75) 29.46%, rgba(115, 0, 229, .75) 91.96%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 51, 204, .75) 27.37%, rgba(115, 0, 229, .75) 100%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 102, 95, .5) 0%, rgba(0, 59, 143, .5) 26.85%, rgba(0, 51, 204, .5) 44.56%, rgba(115, 0, 229, .5) 100%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 59, 143, .5) 7.61%, rgba(0, 51, 204, .5) 29.46%, rgba(115, 0, 229, .5) 91.96%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 51, 204, .5) 27.37%, rgba(115, 0, 229, .5) 100%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 102, 95, .25) 0%, rgba(0, 59, 143, .25) 26.85%, rgba(0, 51, 204, .25) 44.56%, rgba(115, 0, 229, .25) 100%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 102, 95, .5) 0%, rgba(0, 59, 143, .67) 26.85%, rgba(0, 51, 204, .83) 44.56%, #7300e5 100%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 59, 143, .25) 7.61%, rgba(0, 51, 204, .25) 29.46%, rgba(115, 0, 229, .25) 91.96%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 59, 143, .5) 7.61%, rgba(0, 51, 204, .75) 29.46%, #7300e5 91.96%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 51, 204, .25) 27.37%, rgba(115, 0, 229, .25) 100%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 51, 204, .5) 27.37%, #7300e5 100%)
    }

    [data-sc-theme=orange][data-sc-mode=dark] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #7300e5 0%, #940025 37.85%, #a82700 73.32%, #d14600 100%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #940025 39.87%, #a82700 76.33%, #d14600 100%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #940025 0%, #d14600 58.1%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(115, 0, 229, .75) 0%, rgba(148, 0, 37, .75) 37.85%, rgba(168, 39, 0, .75) 73.32%, rgba(209, 70, 0, .75) 100%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(148, 0, 37, .75) 39.87%, rgba(168, 39, 0, .75) 76.33%, rgba(209, 70, 0, .75) 100%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(148, 0, 37, .75) 0%, rgba(209, 70, 0, .75) 58.1%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(115, 0, 229, .5) 0%, rgba(148, 0, 37, .5) 37.85%, rgba(168, 39, 0, .5) 73.32%, rgba(209, 70, 0, .5) 100%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(148, 0, 37, .5) 39.87%, rgba(168, 39, 0, .5) 76.33%, rgba(209, 70, 0, .5) 100%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(148, 0, 37, .5) 0%, rgba(209, 70, 0, .5) 58.1%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(115, 0, 229, .25) 0%, rgba(148, 0, 37, .25) 37.85%, rgba(168, 39, 0, .25) 73.32%, rgba(209, 70, 0, .25) 100%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(115, 0, 229, .5) 0%, rgba(148, 0, 37, .67) 37.85%, rgba(168, 39, 0, .83) 73.32%, #d14600 100%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(148, 0, 37, .25) 39.87%, rgba(168, 39, 0, .25) 76.33%, rgba(209, 70, 0, .25) 100%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(148, 0, 37, .5) 39.87%, rgba(168, 39, 0, .75) 76.33%, #d14600 100%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(148, 0, 37, .25) 0%, rgba(209, 70, 0, .25) 58.1%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(148, 0, 37, .5) 0%, #d14600 58.1%)
    }

    [data-sc-theme=teal][data-sc-mode=dark] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #006b48 0%, #00627a 28.7%, #004a9e 56.3%, #5724ff 86.75%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #006b48 0%, #00627a 60.19%, #004a9e 100%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #006b48 31.54%, #00627a 74.25%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .75) 0%, rgba(0, 98, 122, .75) 28.7%, rgba(0, 74, 158, .75) 56.3%, rgba(87, 36, 255, .75) 86.75%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .75) 0%, rgba(0, 98, 122, .75) 60.19%, rgba(0, 74, 158, .75) 100%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .75) 31.54%, rgba(0, 98, 122, .75) 74.25%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .5) 0%, rgba(0, 98, 122, .5) 28.7%, rgba(0, 74, 158, .5) 56.3%, rgba(87, 36, 255, .5) 86.75%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .5) 0%, rgba(0, 98, 122, .5) 60.19%, rgba(0, 74, 158, .5) 100%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .5) 31.54%, rgba(0, 98, 122, .5) 74.25%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .25) 0%, rgba(0, 98, 122, .25) 28.7%, rgba(0, 74, 158, .25) 56.3%, rgba(87, 36, 255, .25) 86.75%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .5) 0%, rgba(0, 98, 122, .67) 28.7%, rgba(0, 74, 158, .83) 56.3%, #5724ff 86.75%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .25) 0%, rgba(0, 98, 122, .25) 60.19%, rgba(0, 74, 158, .25) 100%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .5) 0%, rgba(0, 98, 122, .75) 60.19%, #004a9e 100%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .25) 31.54%, rgba(0, 98, 122, .25) 74.25%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(0, 107, 72, .5) 31.54%, #00627a 74.25%)
    }

    [data-sc-theme=blue][data-sc-mode=dark] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #d1fbff 0%, #75cfff 29.13%, #978aff 70.56%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #d1fbff 0%, #75cfff 29.13%, #978aff 70.56%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #d1fbff 0%, #75cfff 29.13%, #978aff 70.56%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .75) 0%, rgba(117, 207, 255, .75) 29.13%, rgba(151, 138, 255, .75) 70.56%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .75) 0%, rgba(117, 207, 255, .75) 29.13%, rgba(151, 138, 255, .75) 70.56%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .75) 0%, rgba(117, 207, 255, .75) 29.13%, rgba(151, 138, 255, .75) 70.56%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .5) 29.13%, rgba(151, 138, 255, .5) 70.56%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .5) 29.13%, rgba(151, 138, 255, .5) 70.56%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .5) 29.13%, rgba(151, 138, 255, .5) 70.56%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .25) 0%, rgba(117, 207, 255, .25) 29.13%, rgba(151, 138, 255, .25) 70.56%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .75) 29.13%, #978aff 70.56%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .25) 0%, rgba(117, 207, 255, .25) 29.13%, rgba(151, 138, 255, .25) 70.56%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .75) 29.13%, #978aff 70.56%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .25) 0%, rgba(117, 207, 255, .25) 29.13%, rgba(151, 138, 255, .25) 70.56%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(209, 251, 255, .5) 0%, rgba(117, 207, 255, .75) 29.13%, #978aff 70.56%)
    }

    [data-sc-theme=violet][data-sc-mode=dark] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #ad5cff 0%, #0099ff 48.96%, #99f7ff 100%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #ad5cff 0%, #0099ff 48.96%, #99f7ff 100%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #ad5cff 0%, #0099ff 48.96%, #99f7ff 100%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .75) 0%, rgba(0, 153, 255, .75) 48.96%, rgba(153, 247, 255, .75) 100%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .75) 0%, rgba(0, 153, 255, .75) 48.96%, rgba(153, 247, 255, .75) 100%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .75) 0%, rgba(0, 153, 255, .75) 48.96%, rgba(153, 247, 255, .75) 100%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .5) 48.96%, rgba(153, 247, 255, .5) 100%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .5) 48.96%, rgba(153, 247, 255, .5) 100%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .5) 48.96%, rgba(153, 247, 255, .5) 100%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .25) 0%, rgba(0, 153, 255, .25) 48.96%, rgba(153, 247, 255, .25) 100%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .75) 48.96%, #99f7ff 100%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .25) 0%, rgba(0, 153, 255, .25) 48.96%, rgba(153, 247, 255, .25) 100%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .75) 48.96%, #99f7ff 100%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .25) 0%, rgba(0, 153, 255, .25) 48.96%, rgba(153, 247, 255, .25) 100%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(173, 92, 255, .5) 0%, rgba(0, 153, 255, .75) 48.96%, #99f7ff 100%)
    }

    [data-sc-theme=purple][data-sc-mode=dark] {
        --sc-gradient-a: linear-gradient( var(--sc-gradient-angle, 96deg), #ff94f1 7.63%, #978aff 37.94%, #00d2e5 65.23%, #8ffff8 92.12%);
        --sc-gradient-b: linear-gradient( var(--sc-gradient-angle, 96deg), #ff94f1 7.63%, #978aff 37.94%, #00d2e5 65.23%, #8ffff8 92.12%);
        --sc-gradient-c: linear-gradient( var(--sc-gradient-angle, 96deg), #ff94f1 7.63%, #978aff 37.94%, #00d2e5 65.23%, #8ffff8 92.12%);
        --sc-gradient-a-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .75) 7.63%, rgba(151, 138, 255, .75) 37.94%, rgba(0, 210, 229, .75) 65.23%, rgba(143, 255, 248, .75) 92.12%);
        --sc-gradient-b-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .75) 7.63%, rgba(151, 138, 255, .75) 37.94%, rgba(0, 210, 229, .75) 65.23%, rgba(143, 255, 248, .75) 92.12%);
        --sc-gradient-c-75: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .75) 7.63%, rgba(151, 138, 255, .75) 37.94%, rgba(0, 210, 229, .75) 65.23%, rgba(143, 255, 248, .75) 92.12%);
        --sc-gradient-a-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .5) 37.94%, rgba(0, 210, 229, .5) 65.23%, rgba(143, 255, 248, .5) 92.12%);
        --sc-gradient-b-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .5) 37.94%, rgba(0, 210, 229, .5) 65.23%, rgba(143, 255, 248, .5) 92.12%);
        --sc-gradient-c-50: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .5) 37.94%, rgba(0, 210, 229, .5) 65.23%, rgba(143, 255, 248, .5) 92.12%);
        --sc-gradient-a-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .25) 7.63%, rgba(151, 138, 255, .25) 37.94%, rgba(0, 210, 229, .25) 65.23%, rgba(143, 255, 248, .25) 92.12%);
        --sc-gradient-a-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .67) 37.94%, rgba(0, 210, 229, .83) 65.23%, #8ffff8 92.12%);
        --sc-gradient-b-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .25) 7.63%, rgba(151, 138, 255, .25) 37.94%, rgba(0, 210, 229, .25) 65.23%, rgba(143, 255, 248, .25) 92.12%);
        --sc-gradient-b-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .67) 37.94%, rgba(0, 210, 229, .83) 65.23%, #8ffff8 92.12%);
        --sc-gradient-c-25: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .25) 7.63%, rgba(151, 138, 255, .25) 37.94%, rgba(0, 210, 229, .25) 65.23%, rgba(143, 255, 248, .25) 92.12%);
        --sc-gradient-c-pressed: linear-gradient( var(--sc-gradient-angle, 96deg), rgba(255, 148, 241, .5) 7.63%, rgba(151, 138, 255, .67) 37.94%, rgba(0, 210, 229, .83) 65.23%, #8ffff8 92.12%)
    }


.page-background {
    background: var(--sc-gradient-a) !important;
}

.header-background {
    background: linear-gradient(96deg, rgb(217, 255, 238) 0%, rgb(184, 231, 255) 26.85%, rgb(194, 209, 255) 59.66%, rgb(210, 204, 255) 100%);
}

.image-input-placeholder {
    background-image: url('../media/svg/avatars/blank.svg');
}

[data-bs-theme="dark"] .image-input-placeholder {
    background-image: url('../media/svg/avatars/blank-dark.svg');
}

.layout-auth-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/*********************************************************************************/
/*******************************Profile Header Background Image*******************/
/*********************************************************************************/
.bg-header-md-image {
    background-size: auto calc(30% + 10rem);
    background-position-x: 100%;
    background-image: url('assets/media/illustrations/Jolly/png/wedding_couple.png')
}

@media (max-width: 768px) {
    .bg-header-md-image {
        background-image: none !important;
    }
}

.bg-header {
    background: linear-gradient(90deg, #31a79a 0%, #75d5b5 100%);
}

/*********************************************************************************/
/*******************************Righ to Left (RTL) Direction**********************/
/*********************************************************************************/
.bg-header-image {
    background-size: auto calc(30% + 10rem);
    background-repeat: no-repeat;
    background-position-y: center;
    transition: background-position 0.3s ease;
}

    /* LTR (default) */
    .bg-header-image.ltr {
        background-position-x: 100%; /* image on right */
    }

    /* RTL */
    .bg-header-image.rtl {
        background-position-x: 0%; /* image on left */
    }

/*********************************************************************************/
/*******************************Chips Controls************************************/
/*********************************************************************************/
.sc-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.125rem;
    padding-inline: 0.75rem 0.125rem;
    color: #1b1d20;
    background-color: #e3eaf2;
    border-radius: calc(4px * 4);
}

.sc-chip-text {
    font-size: 0.875rem;
}

.sc-chips-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-inline-end: 3rem;
}

.sc-chip .sc-button {
    border-radius: calc(4px * 4);
    box-shadow: none;
    align-self: stretch;
}

.sc-button {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    color: #ffffff;
    background-color: #e9eff5;
    background-size: auto;
    background-repeat: no-repeat;
    border: none;
    border-radius: 2rem;
    outline: none;
    box-shadow: var(--rz-button-shadow);
    font-size: 1.0625rem;
    font-family: inherit;
    line-height: var(--rz-button-line-height);
    text-decoration: none;
    transition: var(--rz-button-transition);
    -webkit-appearance: none;
}

.sc-button, .sc-button-sm {
    padding: .375rem .50rem;
    height: auto;
    line-height: 1rem;
    min-height: 1.75rem;
    min-width: 1.75rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: normal;
}

/*********************************************************************************/
/*******************************Images DropZone***********************************/
/*********************************************************************************/
.uploadArea {
    border: 2px dashed #069ff5;
    border-radius: 0.475rem !important;
}

.dropArea {
    background-color: #f4f7fb;
    padding: 1.5rem 1.75rem;
    display: flex;
    /* align-items: center;*/
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    position: relative;
    min-height: auto;
    text-align: center;
}

    .dropArea:hover {
        background-color: antiquewhite;
        color: #333;
    }

    .dropArea input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.dropAreaDrug {
    background-color: darkgray;
}


/*********************************************************************************/
/*******************************Radzen Controls***********************************/
/*********************************************************************************/
.rz-grid-table thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-gray-700);
    font-size: 1.075rem !important;
}

.rz-grid-table thead th .rz-column-title-content {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data {
    color: var(--rz-grid-cell-color);
    font-size: 1.075rem !important;
    line-height: var(--rz-grid-cell-line-height);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rz-grid-filter-icon {
    justify-self: flex-end;
    color: #ffffff;
    margin: var(--rz-grid-header-filter-icon-margin);
    font-size: var(--rz-grid-header-filter-icon-font-size);
    transition: var(--rz-grid-state-transition);
}


/*.rz-grid-table-fixed .rz-frozen-cell-left.rz-frozen-cell-left-end {
    box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12);
    border-right: var(--rz-grid-frozen-cell-border) !important;
    background-color: #03A9F4;
    z-index: 1;
}*/

.rz-grid-table-fixed .rz-frozen-cell-left, .rz-grid-table-fixed .rz-frozen-cell-right, .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner {
    box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.12);
    background: #03A9F4;
    z-index: 1;
}

.rz-accordion-header {
    background-color: var(--rz-accordion-item-background-color);
    margin: var(--rz-accordion-item-margin);
    cursor: pointer;
    font-size: 1.075rem !important;
    font-weight: 700 !important;
}


.rz-series-data-label {
    fill: #607D8B;
}

.rz-scheme-pastel .rz-series-1 {
    fill: #86c868;
    stroke: #86c868;
}

.rz-scheme-pastel .rz-series-2 {
    fill: #ed07b5;
    stroke: #ed07b5;
}

.rz-chart svg {
    overflow: visible;
}

.rz-group-row td {
    background-color: #e6f5f0 !important;
}

    .rz-group-row td .rz-cell-data span {
        color: var(--bs-text-dark) !important;
        font-size: 1.2rem !important;
    }


.rz-datepicker > .rz-inputtext {
    width: 100%;
    height: 45px;
    border-radius: 0.5rem;
}

.rz-security-code {
    box-sizing: border-box;
    display: inline-flex;
    border-radius: var(--rz-input-border-radius);
    height: 40px;
}


/* Hide RadzenDropDownDataGrid Default Paging */
/*.rz-pager {
    display: none;    
}*/

/* Hide RadzenDropDownDataGrid Default Search */
.rz-lookup-search {
    display: none;
}

.image-responsive {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.image-full-width {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    display: block;
}
    

.rdz-dropdown {
        width: 100%;
        padding-left: 1.5rem;
        font-size: 1.15rem;
        border-radius: 0.5rem;
        min-height: calc(1.5em + 1.65rem + 2px);
        padding: 0.825rem 1.5rem;
    }

    .rdz-dropdown_with_image {
        width: 100%;
        padding-left: 1.5rem;
        font-size: 1.15rem;
        border-radius: 0.5rem;
        min-height: calc(2rem + 1.6rem + 2px);
        padding: 0.5rem 1.5rem;
    }

    .rdz-date {
        width: 100%;
        font-size: 1.15rem;
        border-radius: 0.5rem;
        min-height: calc(1.5em + 1.65rem + 2px);
    }
        /* Increase height of the input field */
        .rdz-date .rz-inputtext {
            height: 45px !important;
            font-size: 1.05rem;
        }
        /* Increase height of the calendar button */
        .rdz-date .rz-datepicker-trigger {
            height: 45px !important;
            width: 45px;
        }
    /* Increase Radzen calendar icon size */
    .rz-datepicker-trigger .rzi-calendar {
        font-size: 1.6rem !important; /* Increase number to make bigger */
    }


    .rdz-numeric {
        height: 45px !important; /* overall height */
        font-size: 1.05rem; /* font size */
    }

        .rdz-numeric input {
            height: 45px !important; /* input height */
            padding: 6px 10px !important; /* optional padding */
        }


.rz-rating.rz-state-readonly .rz-rating-icon {
    color: #ff6200 !important; /* red */
}

.rz-pager-summary {
    font-size: 1.05rem;
}


/********************************RadzenScheduler (Calendar)**********************************/
.rz-event-content,
.rz-event {
    overflow: visible !important;
}

.booking-item {
    position: relative;
    background: #2d9df7;
}

/* tooltip hidden state */
.booking-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    padding: 10px;
    background: #29292a;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: 0.15s ease-in-out;
    pointer-events: none; /* IMPORTANT */
}

.tooltip-title {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.3;
}

/* KEY FIX: attach hover to Radzen container */
.rz-event:hover .booking-tooltip {
    opacity: 1;
    visibility: visible;
}


/**************************************************************************/
/********************************Skeleton**********************************/
/**************************************************************************/
.skeleton-box {
    display: inline-block;
    height: 1em;
    position: relative;
    overflow: hidden;
    /*background-color: #EEEEEE;*/
    background-color: #FBFBFB;
    border-radius: 5px;
}

    .skeleton-box::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        /*background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));*/
        background-image: linear-gradient(90deg, rgba(103, 127, 212, 0) 0, rgba(103, 127, 212, 0.2) 20%, rgba(103, 127, 212, 0.4) 60%, rgba(103, 127, 212, 0));
        *animation: shimmer 2s infinite;
        -webkit-animation: shimmer 2s infinite;
        content: "";
    }

@-webkit-keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}


/**************************************************************************/
/****************** Gallery Images (Image Left - Content Right) ***********/
/**************************************************************************/

.gallery {
    display: flex;
    /*border: 1px solid #ccc;*/
    border-radius: 0.625rem;
    overflow: hidden;
    margin-bottom: 0px;
    background: #fff;
    transition: all 0.3s ease;
}

    /*.gallery:hover {
        border: 1px solid #0083ff;
        box-shadow: 5px 15px 20px rgba(0, 131, 255, 0.2);
    }*/

    /* Image side */
    .gallery img {
        width: 130px;
        height: 130px;
        object-fit: fill;
        border-radius: 0; /* remove top round corners */
        padding: 5px;
        background-color: #f9f9f9;
    }

/* Content side */
.gallery-content {
    padding: 15px;
    flex: 1; /* take remaining width */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Responsive */
@media only screen and (max-width: 700px) {
    .gallery {
        flex-direction: column;
        align-items: center;
    }
    .gallery img {
        width: 130px; /* fill full width */
        height: 130px; /* maintain aspect ratio */
        padding-top: 5px; /* remove extra padding */
        border-radius: 0;
    }
    .gallery-content {
        text-align: center; /* center content text */
        padding: 10px 10px;
    }
}

/**************************************************************************/
/**** Gallery Images with Feature Image (Vendors and Applicants)***********/
/**************************************************************************/
.featured-main-image {
    height: 510px;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: all 0.3s ease;
}

    .featured-main-image:hover {
        transform: scale(1.01);
    }

.featured-side-image {
    height: 250px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
}

    .featured-side-image:hover,
    .gallery-image:hover {
        transform: scale(1.02);
    }

.gallery-image {
    height: 220px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    transition: all 0.3s ease;
}

.image-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
}

.delete-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    z-index: 10;
}

    .delete-icon:hover {
        background: #dc3545;
    }

.visibility-icon {
    position: absolute;
    top: 10px;
    right: 50px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    z-index: 10;
}

    .visibility-icon:hover {
        background: #ffffff;
    }


/**************************************************************************/
/****************************** Tooltip ***********************************/
/**************************************************************************/

.sc-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip text */
    .sc-tooltip .sc-tooltip-text {
        display: none; /* hidden by default */
        position: absolute; /* FIX: position relative to viewport */
        z-index: 99999; /* FIX: above everything */
        background-color: #fff;
        color: #6B7280;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 12px;
        line-height: 1.4;
        white-space: normal;
        word-wrap: break-word;
        width: 300px;
        max-width: 300px;
        text-align: start;
        opacity: 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    }

/* Show tooltip on hover */
.sc-tooltip:hover .sc-tooltip-text {
    display: block;
    opacity: 1;
}

@media (max-width: 768px) {
    .sc-tooltip .sc-tooltip-text {
        word-wrap: break-word;
        width: 150px;
        max-width: 150px;
    }
}



/**************************************************************************/
/****************************** Text Colors *******************************/
/**************************************************************************/

/*******************************Blue*******************************/
.text-blue-100 {
    color: #e7f3ff;
}

.text-blue-200 {
    color: #9ecdff;
}

.text-blue-300 {
    color: #6db5ff;
}

.text-blue-400 {
    color: #3d9cff;
}

.text-blue-500 {
    color: #0c83ff;
}

.text-blue-600 {
    color: #0a69cc;
}

.text-blue-700 {
    color: #074f99;
}

.text-blue-800 {
    color: #053466;
}

.text-blue-900 {
    color: #010d1a;
}

/*******************************Slate*******************************/

.text-slate-100 {
    color: #e9f1f5;
}

.text-slate-200 {
    color: #a7c7d5;
}

.text-slate-300 {
    color: #7caac1;
}

.text-slate-400 {
    color: #508eac;
}

.text-slate-500 {
    color: #247297;
}

.text-slate-600 {
    color: #1d5b79;
}

.text-slate-700 {
    color: #16445b;
}

.text-slate-800 {
    color: #0e2e3c;
}

.text-slate-900 {
    color: #07171e;
}

/*******************************Red*******************************/

.text-red-100 {
    color: #fdecec;
}

.text-red-200 {
    color: #f9b4b4;
}

.text-red-300 {
    color: #f58f8f;
}

.text-red-400 {
    color: #f26969;
}

.text-red-500 {
    color: #EF4444;
}

.text-red-600 {
    color: #bf3636;
}

.text-red-700 {
    color: #8f2929;
}

.text-red-800 {
    color: #601b1b;
}

.text-red-900 {
    color: #180707;
}

/*******************************Green*******************************/

.text-green-100 {
    color: #e6f5f0;
}

.text-green-200 {
    color: #9bd5c3;
}

.text-green-300 {
    color: #69c0a5;
}

.text-green-400 {
    color: #37ab87;
}

.text-green-500 {
    color: #059669;
}

.text-green-600 {
    color: #047854;
}

.text-green-700 {
    color: #035a3f;
}

.text-green-800 {
    color: #023c2a;
}

.text-green-900 {
    color: #010f0b;
}

/*******************************Orange*******************************/

.text-orange-100 {
    color: #fef3ed;
}

.text-orange-200 {
    color: #fbcfb5;
}

.text-orange-300 {
    color: #f9b690;
}

.text-orange-400 {
    color: #f79e6b;
}

.text-orange-500 {
    color: #f58646;
}

.text-orange-600 {
    color: #c46b38;
}

.text-orange-700 {
    color: #93502a;
}

.text-orange-800 {
    color: #62361c;
}

.text-orange-900 {
    color: #190d07;
}

/*******************************Cyan*******************************/

.text-cyan-100 {
    color: #e6f5f7;
}

.text-cyan-200 {
    color: #9bd7de;
}

.text-cyan-300 {
    color: #68c2ce;
}

.text-cyan-400 {
    color: #36aebd;
}

.text-cyan-500 {
    color: #049aad;
}

.text-cyan-600 {
    color: #037b8a;
}

.text-cyan-700 {
    color: #025c68;
}

.text-cyan-800 {
    color: #023e45;
}

.text-cyan-900 {
    color: #000f11;
}


/*******************************Pink*******************************/

.text-pink-100 {
    color: #feeff3;
}

.text-pink-200 {
    color: #fabecf;
}

.text-pink-300 {
    color: #f89db6;
}

.text-pink-400 {
    color: #f57d9e;
}

.text-pink-500 {
    color: #f35c86;
}

.text-pink-600 {
    color: #c24a6b;
}

.text-pink-700 {
    color: #923750;
}

.text-pink-800 {
    color: #612536;
}

.text-pink-900 {
    color: #18090d;
}


/*******************************Purple*******************************/

.text-purple-100 {
    color: #f4f1f9;
}

.text-purple-200 {
    color: #d2c6e6;
}

.text-purple-300 {
    color: #bba9da;
}

.text-purple-400 {
    color: #a58dcd;
}

.text-purple-500 {
    color: #8e70c1;
}

.text-purple-600 {
    color: #725a9a;
}

.text-purple-700 {
    color: #554374;
}

.text-purple-800 {
    color: #392d4d;
}

.text-purple-900 {
    color: #0e0b13;
}

/*******************************Indigo*******************************/

.text-indigo-100 {
    color: #eff0f9;
}

.text-indigo-200 {
    color: #bec4e6;
}

.text-indigo-300 {
    color: #9da6d9;
}

.text-indigo-400 {
    color: #7d89cd;
}

.text-indigo-500 {
    color: #5C6BC0;
}

.text-indigo-600 {
    color: #4a569a;
}

.text-indigo-700 {
    color: #374073;
}

.text-indigo-800 {
    color: #252b4d;
}

.text-indigo-900 {
    color: #090b13;
}

/*******************************Teal*******************************/

.text-teal-100 {
    color: #e9f6f5;
}

.text-teal-200 {
    color: #a8dbd7;
}

.text-teal-300 {
    color: #7dcac2;
}

.text-teal-400 {
    color: #51b8ae;
}

.text-teal-500 {
    color: #26A69A;
}

.text-teal-600 {
    color: #1e857b;
}

.text-teal-700 {
    color: #17645c;
}

.text-teal-800 {
    color: #0f423e;
}

.text-teal-900 {
    color: #04110f;
}

/*******************************Yellow*******************************/

.text-yellow-100 {
    color: #fffbed;
}

.text-yellow-200 {
    color: #ffefb6;
}

.text-yellow-300 {
    color: #ffe691;
}

.text-yellow-400 {
    color: #ffde6d;
}

.text-yellow-500 {
    color: #ffd648;
}

.text-yellow-600 {
    color: #ccab3a;
}

.text-yellow-700 {
    color: #99802b;
}

.text-yellow-800 {
    color: #66561d;
}

.text-yellow-900 {
    color: #1a1507;
}

/*******************************Gray*******************************/

.text-gray-100 {
    color: #F9FAFB;
}

.text-gray-200 {
    color: #F3F4F6;
}

.text-gray-300 {
    color: #E5E7EB;
}

.text-gray-400 {
    color: #D1D5DB;
}

.text-gray-500 {
    color: #9CA3AF;
}

.text-gray-600 {
    color: #6B7280;
}

.text-gray-700 {
    color: #4B5563;
}

.text-gray-800 {
    color: #374151;
}

.text-gray-900 {
    color: #1F2937;
}





/**************************************************************************/
/********************************Image Gallery*****************************/
/**************************************************************************/

div.gallery {
    border: 1px solid #ccc;
}

    div.gallery:hover {
        border: 1px solid #0083ff;
        -webkit-box-shadow: 5px 15px 20px rgba(0, 131, 255, 0.1);
        box-shadow: 5px 15px 20px rgba(0, 131, 255, 0.2);
    }

    div.gallery img {
        width: 100%;
        height: 180px;
        border-top-left-radius: 0.625rem;
        border-top-right-radius: 0.625rem;
    }

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.gallery-responsive {
    padding: 0 6px;
    float: left;
    width: 33.33333%;
    border-radius: 0.625rem;
}

.gallery4-responsive {
    padding: 0 6px;
    float: left;
    width: 25%;
    border-radius: 0.625rem;
}

@media only screen and (max-width: 700px) {
    .gallery-responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 700px) {
    .gallery4-responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .gallery-responsive {
        width: 100%;
    }
}

@media only screen and (max-width: 500px) {
    .gallery4-responsive {
        width: 100%;
    }
}

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


/**************************************************************************/
/********************************Ratings***********************************/
/**************************************************************************/
.rating-box {
    min-width: 100%;
}

@media (min-width: 992px) {
    .rating-box {
        min-width: 260px;
        max-width: 260px;
    }
}

.rating-bars {
    width: 100%;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.star-label {
    width: 20px;
    font-size: 12px;
    color: #6c757d;
    font-weight: 600;
}

.percent-label {
    width: 30px;
    text-align: right;
    font-size: 12px;
    color: #6c757d;
    font-weight: 600;
}

.bar {
    flex: 1;
    height: 8px;
    background-color: #edf1f7;
    border-radius: 20px;
    overflow: hidden;
}

.fill {
    height: 100%;
    background: linear-gradient(90deg, #50cd89 0%, #009ef7 100%);
    border-radius: 20px;
    transition: width 0.4s ease;
}


.guest-list-container {
    height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.guest-card {
    border-radius: 16px;
    transition: all 0.2s ease;
}

    .guest-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important;
    }

.story-page-container {
    padding: 24px 40px;
    background-color: #f8f9fb;
    min-height: 100vh;
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* smooth rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* Optional page header area inside container */
    .story-page-container .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .story-page-container .page-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
    }

    .story-page-container .page-subtitle {
        font-size: 0.875rem;
        color: #6b7280;
        margin-top: 4px;
    }

    /* Card layout consistency */
    .story-page-container .card {
        border: 0;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
    }

    /* Story content cards */
    .story-page-container .story-card {
        padding: 18px;
        transition: all 0.2s ease-in-out;
    }

        .story-page-container .story-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10);
        }

    /* Typography */
    .story-page-container .story-title {
        font-weight: 600;
        font-size: 1.1rem;
        color: #111827;
    }

    .story-page-container .story-meta {
        font-size: 0.85rem;
        color: #6b7280;
    }

    /* Content preview */
    .story-page-container .story-preview {
        margin-top: 10px;
        color: #4b5563;
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Badge styles */
    .story-page-container .badge-soft {
        background-color: #eef2ff;
        color: #4f46e5;
        font-weight: 500;
        padding: 4px 10px;
        border-radius: 999px;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .story-page-container {
        padding: 16px;
        gap: 16px;
    }

        .story-page-container .page-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
}

.position-relative .action-buttons {
    opacity: 0;
    transition: 0.2s;
}

.position-relative:hover .action-buttons {
    opacity: 1;
}


.text-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* adjust lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}