@charset "UTF-8";
/*!
* animate.css - https://animate.style/
* Version - 4.1.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2020 Animate.css
*/
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animate__animated.animate__infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animate__animated.animate__repeat-1 {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: var(--animate-repeat);
    animation-iteration-count: var(--animate-repeat)
}

.animate__animated.animate__repeat-2 {
    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
    animation-iteration-count: calc(var(--animate-repeat) * 2)
}

.animate__animated.animate__repeat-3 {
    -webkit-animation-iteration-count: 3;
    animation-iteration-count: 3;
    -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
    animation-iteration-count: calc(var(--animate-repeat) * 3)
}

.animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay)
}

.animate__animated.animate__delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-delay: calc(var(--animate-delay) * 2);
    animation-delay: calc(var(--animate-delay) * 2)
}

.animate__animated.animate__delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-delay: calc(var(--animate-delay) * 3);
    animation-delay: calc(var(--animate-delay) * 3)
}

.animate__animated.animate__delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-delay: calc(var(--animate-delay) * 4);
    animation-delay: calc(var(--animate-delay) * 4)
}

.animate__animated.animate__delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-delay: calc(var(--animate-delay) * 5);
    animation-delay: calc(var(--animate-delay) * 5)
}

.animate__animated.animate__faster {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-duration: calc(var(--animate-duration) / 2);
    animation-duration: calc(var(--animate-duration) / 2)
}

.animate__animated.animate__fast {
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-duration: calc(var(--animate-duration) * .8);
    animation-duration: calc(var(--animate-duration) * .8)
}

.animate__animated.animate__slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2)
}

.animate__animated.animate__slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-duration: calc(var(--animate-duration) * 3);
    animation-duration: calc(var(--animate-duration) * 3)
}

@media print,(prefers-reduced-motion: reduce) {
    .animate__animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important
    }

    .animate__animated[class*=Out] {
        opacity: 0
    }
}

@-webkit-keyframes bounce {
    0%, 20%, 53%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
        transform: translate3d(0, -30px, 0) scaleY(1.1)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
        transform: translate3d(0, -15px, 0) scaleY(1.05)
    }
    80% {
        -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0) scaleY(.95);
        transform: translateZ(0) scaleY(.95)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
        transform: translate3d(0, -4px, 0) scaleY(1.02)
    }
}

@keyframes bounce {
    0%, 20%, 53%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
        transform: translate3d(0, -30px, 0) scaleY(1.1)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
        transform: translate3d(0, -15px, 0) scaleY(1.05)
    }
    80% {
        -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translate3d(0, 0, 0) scaleY(.95);
        transform: translateZ(0) scaleY(.95)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
        transform: translate3d(0, -4px, 0) scaleY(1.02)
    }
}

.animate__bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

@-webkit-keyframes flash {
    0%, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

@keyframes flash {
    0%, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

.animate__flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
}

.animate__pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
}

.animate__rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

@-webkit-keyframes shakeX {
    0%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shakeX {
    0%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

.animate__shakeX {
    -webkit-animation-name: shakeX;
    animation-name: shakeX
}

@-webkit-keyframes shakeY {
    0%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
}

@keyframes shakeY {
    0%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
}

.animate__shakeY {
    -webkit-animation-name: shakeY;
    animation-name: shakeY
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translate(0)
    }
    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translate(-6px) rotateY(-9deg)
    }
    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translate(5px) rotateY(7deg)
    }
    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translate(-3px) rotateY(-5deg)
    }
    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translate(2px) rotateY(3deg)
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translate(0)
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translate(0)
    }
    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translate(-6px) rotateY(-9deg)
    }
    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translate(5px) rotateY(7deg)
    }
    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translate(-3px) rotateY(-5deg)
    }
    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translate(2px) rotateY(3deg)
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translate(0)
    }
}

.animate__headShake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0)
    }
}

.animate__swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
}

.animate__tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes jello {
    0%, 11.1%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skew(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skew(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skew(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skew(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skew(-.78125deg) skewY(-.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skew(.390625deg) skewY(.390625deg)
    }
    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skew(-.1953125deg) skewY(-.1953125deg)
    }
}

@keyframes jello {
    0%, 11.1%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skew(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skew(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skew(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skew(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skew(-.78125deg) skewY(-.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skew(.390625deg) skewY(.390625deg)
    }
    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skew(-.1953125deg) skewY(-.1953125deg)
    }
}

.animate__jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center
}

@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.animate__heartBeat {
    -webkit-animation-name: heartBeat;
    animation-name: heartBeat;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
    animation-duration: calc(var(--animate-duration) * 1.3);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes backInDown {
    0% {
        -webkit-transform: translateY(-1200px) scale(.7);
        transform: translateY(-1200px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateY(0px) scale(.7);
        transform: translateY(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInDown {
    0% {
        -webkit-transform: translateY(-1200px) scale(.7);
        transform: translateY(-1200px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateY(0px) scale(.7);
        transform: translateY(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInDown {
    -webkit-animation-name: backInDown;
    animation-name: backInDown
}

@-webkit-keyframes backInLeft {
    0% {
        -webkit-transform: translateX(-2000px) scale(.7);
        transform: translate(-2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0px) scale(.7);
        transform: translate(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInLeft {
    0% {
        -webkit-transform: translateX(-2000px) scale(.7);
        transform: translate(-2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0px) scale(.7);
        transform: translate(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInLeft {
    -webkit-animation-name: backInLeft;
    animation-name: backInLeft
}

@-webkit-keyframes backInRight {
    0% {
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translate(2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0px) scale(.7);
        transform: translate(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInRight {
    0% {
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translate(2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0px) scale(.7);
        transform: translate(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInRight {
    -webkit-animation-name: backInRight;
    animation-name: backInRight
}

@-webkit-keyframes backInUp {
    0% {
        -webkit-transform: translateY(1200px) scale(.7);
        transform: translateY(1200px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateY(0px) scale(.7);
        transform: translateY(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInUp {
    0% {
        -webkit-transform: translateY(1200px) scale(.7);
        transform: translateY(1200px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateY(0px) scale(.7);
        transform: translateY(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInUp {
    -webkit-animation-name: backInUp;
    animation-name: backInUp
}

@-webkit-keyframes backOutDown {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    20% {
        -webkit-transform: translateY(0px) scale(.7);
        transform: translateY(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: translateY(700px) scale(.7);
        transform: translateY(700px) scale(.7);
        opacity: .7
    }
}

@keyframes backOutDown {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    20% {
        -webkit-transform: translateY(0px) scale(.7);
        transform: translateY(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: translateY(700px) scale(.7);
        transform: translateY(700px) scale(.7);
        opacity: .7
    }
}

.animate__backOutDown {
    -webkit-animation-name: backOutDown;
    animation-name: backOutDown
}

@-webkit-keyframes backOutLeft {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    20% {
        -webkit-transform: translateX(0px) scale(.7);
        transform: translate(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: translateX(-2000px) scale(.7);
        transform: translate(-2000px) scale(.7);
        opacity: .7
    }
}

@keyframes backOutLeft {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    20% {
        -webkit-transform: translateX(0px) scale(.7);
        transform: translate(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: translateX(-2000px) scale(.7);
        transform: translate(-2000px) scale(.7);
        opacity: .7
    }
}

.animate__backOutLeft {
    -webkit-animation-name: backOutLeft;
    animation-name: backOutLeft
}

@-webkit-keyframes backOutRight {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    20% {
        -webkit-transform: translateX(0px) scale(.7);
        transform: translate(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translate(2000px) scale(.7);
        opacity: .7
    }
}

@keyframes backOutRight {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    20% {
        -webkit-transform: translateX(0px) scale(.7);
        transform: translate(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translate(2000px) scale(.7);
        opacity: .7
    }
}

.animate__backOutRight {
    -webkit-animation-name: backOutRight;
    animation-name: backOutRight
}

@-webkit-keyframes backOutUp {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    20% {
        -webkit-transform: translateY(0px) scale(.7);
        transform: translateY(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: translateY(-700px) scale(.7);
        transform: translateY(-700px) scale(.7);
        opacity: .7
    }
}

@keyframes backOutUp {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    20% {
        -webkit-transform: translateY(0px) scale(.7);
        transform: translateY(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: translateY(-700px) scale(.7);
        transform: translateY(-700px) scale(.7);
        opacity: .7
    }
}

.animate__backOutUp {
    -webkit-animation-name: backOutUp;
    animation-name: backOutUp
}

@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
}

@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scaleZ(1)
    }
}

.animate__bounceIn {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: calc(var(--animate-duration) * .75);
    animation-duration: calc(var(--animate-duration) * .75);
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
        transform: translate3d(0, -3000px, 0) scaleY(3)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0) scaleY(.9);
        transform: translate3d(0, 25px, 0) scaleY(.9)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0) scaleY(.95);
        transform: translate3d(0, -10px, 0) scaleY(.95)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0) scaleY(.985);
        transform: translate3d(0, 5px, 0) scaleY(.985)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes bounceInDown {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
        transform: translate3d(0, -3000px, 0) scaleY(3)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0) scaleY(.9);
        transform: translate3d(0, 25px, 0) scaleY(.9)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0) scaleY(.95);
        transform: translate3d(0, -10px, 0) scaleY(.95)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0) scaleY(.985);
        transform: translate3d(0, 5px, 0) scaleY(.985)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
        transform: translate3d(-3000px, 0, 0) scaleX(3)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
        transform: translate3d(25px, 0, 0) scaleX(1)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0) scaleX(.98);
        transform: translate3d(-10px, 0, 0) scaleX(.98)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0) scaleX(.995);
        transform: translate3d(5px, 0, 0) scaleX(.995)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes bounceInLeft {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
        transform: translate3d(-3000px, 0, 0) scaleX(3)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
        transform: translate3d(25px, 0, 0) scaleX(1)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0) scaleX(.98);
        transform: translate3d(-10px, 0, 0) scaleX(.98)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0) scaleX(.995);
        transform: translate3d(5px, 0, 0) scaleX(.995)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
        transform: translate3d(3000px, 0, 0) scaleX(3)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
        transform: translate3d(-25px, 0, 0) scaleX(1)
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0) scaleX(.98);
        transform: translate3d(10px, 0, 0) scaleX(.98)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0) scaleX(.995);
        transform: translate3d(-5px, 0, 0) scaleX(.995)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes bounceInRight {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
        transform: translate3d(3000px, 0, 0) scaleX(3)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
        transform: translate3d(-25px, 0, 0) scaleX(1)
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0) scaleX(.98);
        transform: translate3d(10px, 0, 0) scaleX(.98)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0) scaleX(.995);
        transform: translate3d(-5px, 0, 0) scaleX(.995)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
        transform: translate3d(0, 3000px, 0) scaleY(5)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(.9);
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(.95);
        transform: translate3d(0, 10px, 0) scaleY(.95)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0) scaleY(.985);
        transform: translate3d(0, -5px, 0) scaleY(.985)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes bounceInUp {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
        transform: translate3d(0, 3000px, 0) scaleY(5)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(.9);
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(.95);
        transform: translate3d(0, 10px, 0) scaleY(.95)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0) scaleY(.985);
        transform: translate3d(0, -5px, 0) scaleY(.985)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

.animate__bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: calc(var(--animate-duration) * .75);
    animation-duration: calc(var(--animate-duration) * .75);
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(.985);
        transform: translate3d(0, 10px, 0) scaleY(.985)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(.9);
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
        transform: translate3d(0, 2000px, 0) scaleY(3)
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0) scaleY(.985);
        transform: translate3d(0, 10px, 0) scaleY(.985)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0) scaleY(.9);
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
        transform: translate3d(0, 2000px, 0) scaleY(3)
    }
}

.animate__bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0) scaleX(.9);
        transform: translate3d(20px, 0, 0) scaleX(.9)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
        transform: translate3d(-2000px, 0, 0) scaleX(2)
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0) scaleX(.9);
        transform: translate3d(20px, 0, 0) scaleX(.9)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
        transform: translate3d(-2000px, 0, 0) scaleX(2)
    }
}

.animate__bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0) scaleX(.9);
        transform: translate3d(-20px, 0, 0) scaleX(.9)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
        transform: translate3d(2000px, 0, 0) scaleX(2)
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0) scaleX(.9);
        transform: translate3d(-20px, 0, 0) scaleX(.9)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
        transform: translate3d(2000px, 0, 0) scaleX(2)
    }
}

.animate__bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0) scaleY(.985);
        transform: translate3d(0, -10px, 0) scaleY(.985)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0) scaleY(.9);
        transform: translate3d(0, 20px, 0) scaleY(.9)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
        transform: translate3d(0, -2000px, 0) scaleY(3)
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0) scaleY(.985);
        transform: translate3d(0, -10px, 0) scaleY(.985)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0) scaleY(.9);
        transform: translate3d(0, 20px, 0) scaleY(.9)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
        transform: translate3d(0, -2000px, 0) scaleY(3)
    }
}

.animate__bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}

@-webkit-keyframes fadeInTopLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, -100%, 0);
        transform: translate3d(-100%, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInTopLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, -100%, 0);
        transform: translate3d(-100%, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInTopLeft {
    -webkit-animation-name: fadeInTopLeft;
    animation-name: fadeInTopLeft
}

@-webkit-keyframes fadeInTopRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, -100%, 0);
        transform: translate3d(100%, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInTopRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, -100%, 0);
        transform: translate3d(100%, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInTopRight {
    -webkit-animation-name: fadeInTopRight;
    animation-name: fadeInTopRight
}

@-webkit-keyframes fadeInBottomLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 100%, 0);
        transform: translate3d(-100%, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInBottomLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 100%, 0);
        transform: translate3d(-100%, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInBottomLeft {
    -webkit-animation-name: fadeInBottomLeft;
    animation-name: fadeInBottomLeft
}

@-webkit-keyframes fadeInBottomRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes fadeInBottomRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__fadeInBottomRight {
    -webkit-animation-name: fadeInBottomRight;
    animation-name: fadeInBottomRight
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.animate__fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.animate__fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

.animate__fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

.animate__fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

.animate__fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.animate__fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

.animate__fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.animate__fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

.animate__fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig
}

@-webkit-keyframes fadeOutTopLeft {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, -100%, 0);
        transform: translate3d(-100%, -100%, 0)
    }
}

@keyframes fadeOutTopLeft {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, -100%, 0);
        transform: translate3d(-100%, -100%, 0)
    }
}

.animate__fadeOutTopLeft {
    -webkit-animation-name: fadeOutTopLeft;
    animation-name: fadeOutTopLeft
}

@-webkit-keyframes fadeOutTopRight {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, -100%, 0);
        transform: translate3d(100%, -100%, 0)
    }
}

@keyframes fadeOutTopRight {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, -100%, 0);
        transform: translate3d(100%, -100%, 0)
    }
}

.animate__fadeOutTopRight {
    -webkit-animation-name: fadeOutTopRight;
    animation-name: fadeOutTopRight
}

@-webkit-keyframes fadeOutBottomRight {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0)
    }
}

@keyframes fadeOutBottomRight {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 100%, 0);
        transform: translate3d(100%, 100%, 0)
    }
}

.animate__fadeOutBottomRight {
    -webkit-animation-name: fadeOutBottomRight;
    animation-name: fadeOutBottomRight
}

@-webkit-keyframes fadeOutBottomLeft {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 100%, 0);
        transform: translate3d(-100%, 100%, 0)
    }
}

@keyframes fadeOutBottomLeft {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 100%, 0);
        transform: translate3d(-100%, 100%, 0)
    }
}

.animate__fadeOutBottomLeft {
    -webkit-animation-name: fadeOutBottomLeft;
    animation-name: fadeOutBottomLeft
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scaleZ(1) translateZ(0) rotateY(-360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scaleZ(1) translateZ(150px) rotateY(-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scaleZ(1) translateZ(150px) rotateY(-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scaleZ(1) translateZ(0) rotateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scaleZ(1) translateZ(0) rotateY(-360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scaleZ(1) translateZ(150px) rotateY(-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scaleZ(1) translateZ(150px) rotateY(-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scaleZ(1) translateZ(0) rotateY(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.animate__animated.animate__flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotateX(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotateX(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.animate__flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotateY(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotateY(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.animate__flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.animate__flipOutX {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: calc(var(--animate-duration) * .75);
    animation-duration: calc(var(--animate-duration) * .75);
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.animate__flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: calc(var(--animate-duration) * .75);
    animation-duration: calc(var(--animate-duration) * .75);
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY
}

@-webkit-keyframes lightSpeedInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skew(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skew(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skew(-5deg)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes lightSpeedInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skew(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skew(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skew(-5deg)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__lightSpeedInRight {
    -webkit-animation-name: lightSpeedInRight;
    animation-name: lightSpeedInRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
        transform: translate3d(-100%, 0, 0) skew(30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(-20deg);
        transform: skew(-20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(5deg);
        transform: skew(5deg)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes lightSpeedInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
        transform: translate3d(-100%, 0, 0) skew(30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(-20deg);
        transform: skew(-20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(5deg);
        transform: skew(5deg)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__lightSpeedInLeft {
    -webkit-animation-name: lightSpeedInLeft;
    animation-name: lightSpeedInLeft;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOutRight {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skew(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutRight {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skew(30deg);
        opacity: 0
    }
}

.animate__lightSpeedOutRight {
    -webkit-animation-name: lightSpeedOutRight;
    animation-name: lightSpeedOutRight;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutLeft {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
        transform: translate3d(-100%, 0, 0) skew(-30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutLeft {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
        transform: translate3d(-100%, 0, 0) skew(-30deg);
        opacity: 0
    }
}

.animate__lightSpeedOutLeft {
    -webkit-animation-name: lightSpeedOutLeft;
    animation-name: lightSpeedOutLeft;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0);
        opacity: 1
    }
}

.animate__rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
    -webkit-transform-origin: center;
    transform-origin: center
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0);
        opacity: 1
    }
}

.animate__rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom
}

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0);
        opacity: 1
    }
}

.animate__rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom
}

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0);
        opacity: 1
    }
}

.animate__rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom
}

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0);
        opacity: 1
    }
}

.animate__rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom
}

@-webkit-keyframes rotateOut {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

@keyframes rotateOut {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

.animate__rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
    -webkit-transform-origin: center;
    transform-origin: center
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownLeft {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
}

.animate__rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownRight {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

.animate__rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

@keyframes rotateOutUpLeft {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

.animate__rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpRight {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
    }
}

.animate__rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom
}

@-webkit-keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

@keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

.animate__hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2);
    -webkit-animation-name: hinge;
    animation-name: hinge;
    -webkit-transform-origin: top left;
    transform-origin: top left
}

@-webkit-keyframes jackInTheBox {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes jackInTheBox {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.animate__jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox
}

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes rollOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
    }
}

@keyframes rollOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
    }
}

.animate__rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

.animate__zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown
}

@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft
}

@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight
}

@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

.animate__zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0)
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0)
    }
}

.animate__zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft;
    -webkit-transform-origin: left center;
    transform-origin: left center
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0)
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0)
    }
}

.animate__zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight;
    -webkit-transform-origin: right center;
    transform-origin: right center
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
}

.animate__slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes slideOutDown {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.animate__slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

.animate__slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.animate__slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.animate__slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

/*!
 * Bootstrap  v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root, [data-bs-theme=light] {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, .75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-color: rgba(33, 37, 41, .5);
    --bs-tertiary-color-rgb: 33, 37, 41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13, 110, 253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10, 88, 202;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, .175);
    --bs-border-radius: .375rem;
    --bs-border-radius-sm: .25rem;
    --bs-border-radius-lg: .5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);
    --bs-focus-ring-width: .25rem;
    --bs-focus-ring-opacity: .25;
    --bs-focus-ring-color: rgba(13, 110, 253, .25);
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545
}

[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, .75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, .5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, .15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f
}

*, :after, :before {
    box-sizing: border-box
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color)
}

.h1, h1 {
    font-size: calc(1.375rem + 1.5vw)
}

@media (min-width: 1200px) {
    .h1, h1 {
        font-size: 2.5rem
    }
}

.h2, h2 {
    font-size: calc(1.325rem + .9vw)
}

@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 2rem
    }
}

.h3, h3 {
    font-size: calc(1.3rem + .6vw)
}

@media (min-width: 1200px) {
    .h3, h3 {
        font-size: 1.75rem
    }
}

.h4, h4 {
    font-size: calc(1.275rem + .3vw)
}

@media (min-width: 1200px) {
    .h4, h4 {
        font-size: 1.5rem
    }
}

.h5, h5 {
    font-size: 1.25rem
}

.h6, h6 {
    font-size: 1rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

ol, ul {
    padding-left: 2rem
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem
}

ol ol, ol ul, ul ol, ul ul {
    margin-bottom: 0
}

dt {
    font-weight: 700
}

dd {
    margin-bottom: .5rem;
    margin-left: 0
}

blockquote {
    margin: 0 0 1rem
}

b, strong {
    font-weight: bolder
}

.small, small {
    font-size: .875em
}

.mark, mark {
    padding: .1875em;
    color: var(--bs-highlight-color);
    background-color: var(--bs-highlight-bg)
}

sub, sup {
    position: relative;
    font-size: .75em;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

a {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline
}

a:hover {
    --bs-link-color-rgb: var(--bs-link-hover-color-rgb)
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none
}

code, kbd, pre, samp {
    font-family: var(--bs-font-monospace);
    font-size: 1em
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: .875em
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal
}

code {
    font-size: .875em;
    color: var(--bs-code-color);
    word-wrap: break-word
}

a > code {
    color: inherit
}

kbd {
    padding: .1875rem .375rem;
    font-size: .875em;
    color: var(--bs-body-bg);
    background-color: var(--bs-body-color);
    border-radius: .25rem
}

kbd kbd {
    padding: 0;
    font-size: 1em
}

figure {
    margin: 0 0 1rem
}

img, svg {
    vertical-align: middle
}

table {
    caption-side: bottom;
    border-collapse: collapse
}

caption {
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: var(--bs-secondary-color);
    text-align: left
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0
}

label {
    display: inline-block
}

button {
    border-radius: 0
}

button:focus:not(:focus-visible) {
    outline: 0
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button, select {
    text-transform: none
}

[role=button] {
    cursor: pointer
}

select {
    word-wrap: normal
}

select:disabled {
    opacity: 1
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
    display: none !important
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer
}

::-moz-focus-inner {
    padding: 0;
    border-style: none
}

textarea {
    resize: vertical
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0
}

legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    line-height: inherit;
    font-size: calc(1.275rem + .3vw)
}

@media (min-width: 1200px) {
    legend {
        font-size: 1.5rem
    }
}

legend + * {
    clear: left
}

::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-year-field {
    padding: 0
}

::-webkit-inner-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button {
    cursor: pointer;
    filter: grayscale(1)
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-color-swatch-wrapper {
    padding: 0
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

::file-selector-button {
    font: inherit;
    -webkit-appearance: button
}

output {
    display: inline-block
}

iframe {
    border: 0
}

summary {
    display: list-item;
    cursor: pointer
}

progress {
    vertical-align: baseline
}

[hidden] {
    display: none !important
}

.lead {
    font-size: 1.25rem;
    font-weight: 300
}

.display-1 {
    font-weight: 300;
    line-height: 1.2;
    font-size: calc(1.625rem + 4.5vw)
}

@media (min-width: 1200px) {
    .display-1 {
        font-size: 5rem
    }
}

.display-2 {
    font-weight: 300;
    line-height: 1.2;
    font-size: calc(1.575rem + 3.9vw)
}

@media (min-width: 1200px) {
    .display-2 {
        font-size: 4.5rem
    }
}

.display-3 {
    font-weight: 300;
    line-height: 1.2;
    font-size: calc(1.525rem + 3.3vw)
}

@media (min-width: 1200px) {
    .display-3 {
        font-size: 4rem
    }
}

.display-4 {
    font-weight: 300;
    line-height: 1.2;
    font-size: calc(1.475rem + 2.7vw)
}

@media (min-width: 1200px) {
    .display-4 {
        font-size: 3.5rem
    }
}

.display-5 {
    font-weight: 300;
    line-height: 1.2;
    font-size: calc(1.425rem + 2.1vw)
}

@media (min-width: 1200px) {
    .display-5 {
        font-size: 3rem
    }
}

.display-6 {
    font-weight: 300;
    line-height: 1.2;
    font-size: calc(1.375rem + 1.5vw)
}

@media (min-width: 1200px) {
    .display-6 {
        font-size: 2.5rem
    }
}

.list-unstyled, .list-inline {
    padding-left: 0;
    list-style: none
}

.list-inline-item {
    display: inline-block
}

.list-inline-item:not(:last-child) {
    margin-right: .5rem
}

.initialism {
    font-size: .875em;
    text-transform: uppercase
}

.blockquote {
    margin-bottom: 1rem;
    font-size: 1.25rem
}

.blockquote > :last-child {
    margin-bottom: 0
}

.blockquote-footer {
    margin-top: -1rem;
    margin-bottom: 1rem;
    font-size: .875em;
    color: #6c757d
}

.blockquote-footer:before {
    content: "— "
}

.img-fluid {
    max-width: 100%;
    height: auto
}

.img-thumbnail {
    padding: .25rem;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    max-width: 100%;
    height: auto
}

.figure {
    display: inline-block
}

.figure-img {
    margin-bottom: .5rem;
    line-height: 1
}

.figure-caption {
    font-size: .875em;
    color: var(--bs-secondary-color)
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto
}

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

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 720px
    }
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px
    }
}

:root {
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x))
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y)
}

.col {
    flex: 1 0 0
}

.row-cols-auto > * {
    flex: 0 0 auto;
    width: auto
}

.row-cols-1 > * {
    flex: 0 0 auto;
    width: 100%
}

.row-cols-2 > * {
    flex: 0 0 auto;
    width: 50%
}

.row-cols-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%
}

.row-cols-4 > * {
    flex: 0 0 auto;
    width: 25%
}

.row-cols-5 > * {
    flex: 0 0 auto;
    width: 20%
}

.row-cols-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%
}

.col-auto {
    flex: 0 0 auto;
    width: auto
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%
}

.col-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%
}

.col-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%
}

.col-9 {
    flex: 0 0 auto;
    width: 75%
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%
}

.col-12 {
    flex: 0 0 auto;
    width: 100%
}

.offset-1 {
    margin-left: 8.33333333%
}

.offset-2 {
    margin-left: 16.66666667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.33333333%
}

.offset-5 {
    margin-left: 41.66666667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.33333333%
}

.offset-8 {
    margin-left: 66.66666667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.33333333%
}

.offset-11 {
    margin-left: 91.66666667%
}

.g-0, .gx-0 {
    --bs-gutter-x: 0
}

.g-0, .gy-0 {
    --bs-gutter-y: 0
}

.g-1, .gx-1 {
    --bs-gutter-x: .25rem
}

.g-1, .gy-1 {
    --bs-gutter-y: .25rem
}

.g-2, .gx-2 {
    --bs-gutter-x: .5rem
}

.g-2, .gy-2 {
    --bs-gutter-y: .5rem
}

.g-3, .gx-3 {
    --bs-gutter-x: 1rem
}

.g-3, .gy-3 {
    --bs-gutter-y: 1rem
}

.g-4, .gx-4 {
    --bs-gutter-x: 1.5rem
}

.g-4, .gy-4 {
    --bs-gutter-y: 1.5rem
}

.g-5, .gx-5 {
    --bs-gutter-x: 3rem
}

.g-5, .gy-5 {
    --bs-gutter-y: 3rem
}

@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0
    }

    .row-cols-sm-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-sm-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-sm-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-sm-3 > * {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .row-cols-sm-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-sm-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-sm-6 > * {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-sm-0 {
        margin-left: 0
    }

    .offset-sm-1 {
        margin-left: 8.33333333%
    }

    .offset-sm-2 {
        margin-left: 16.66666667%
    }

    .offset-sm-3 {
        margin-left: 25%
    }

    .offset-sm-4 {
        margin-left: 33.33333333%
    }

    .offset-sm-5 {
        margin-left: 41.66666667%
    }

    .offset-sm-6 {
        margin-left: 50%
    }

    .offset-sm-7 {
        margin-left: 58.33333333%
    }

    .offset-sm-8 {
        margin-left: 66.66666667%
    }

    .offset-sm-9 {
        margin-left: 75%
    }

    .offset-sm-10 {
        margin-left: 83.33333333%
    }

    .offset-sm-11 {
        margin-left: 91.66666667%
    }

    .g-sm-0, .gx-sm-0 {
        --bs-gutter-x: 0
    }

    .g-sm-0, .gy-sm-0 {
        --bs-gutter-y: 0
    }

    .g-sm-1, .gx-sm-1 {
        --bs-gutter-x: .25rem
    }

    .g-sm-1, .gy-sm-1 {
        --bs-gutter-y: .25rem
    }

    .g-sm-2, .gx-sm-2 {
        --bs-gutter-x: .5rem
    }

    .g-sm-2, .gy-sm-2 {
        --bs-gutter-y: .5rem
    }

    .g-sm-3, .gx-sm-3 {
        --bs-gutter-x: 1rem
    }

    .g-sm-3, .gy-sm-3 {
        --bs-gutter-y: 1rem
    }

    .g-sm-4, .gx-sm-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-sm-4, .gy-sm-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-sm-5, .gx-sm-5 {
        --bs-gutter-x: 3rem
    }

    .g-sm-5, .gy-sm-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0
    }

    .row-cols-md-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-md-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-md-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-md-3 > * {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .row-cols-md-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-md-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-md-6 > * {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-md-0 {
        margin-left: 0
    }

    .offset-md-1 {
        margin-left: 8.33333333%
    }

    .offset-md-2 {
        margin-left: 16.66666667%
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .offset-md-4 {
        margin-left: 33.33333333%
    }

    .offset-md-5 {
        margin-left: 41.66666667%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .offset-md-7 {
        margin-left: 58.33333333%
    }

    .offset-md-8 {
        margin-left: 66.66666667%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .offset-md-10 {
        margin-left: 83.33333333%
    }

    .offset-md-11 {
        margin-left: 91.66666667%
    }

    .g-md-0, .gx-md-0 {
        --bs-gutter-x: 0
    }

    .g-md-0, .gy-md-0 {
        --bs-gutter-y: 0
    }

    .g-md-1, .gx-md-1 {
        --bs-gutter-x: .25rem
    }

    .g-md-1, .gy-md-1 {
        --bs-gutter-y: .25rem
    }

    .g-md-2, .gx-md-2 {
        --bs-gutter-x: .5rem
    }

    .g-md-2, .gy-md-2 {
        --bs-gutter-y: .5rem
    }

    .g-md-3, .gx-md-3 {
        --bs-gutter-x: 1rem
    }

    .g-md-3, .gy-md-3 {
        --bs-gutter-y: 1rem
    }

    .g-md-4, .gx-md-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-md-4, .gy-md-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-md-5, .gx-md-5 {
        --bs-gutter-x: 3rem
    }

    .g-md-5, .gy-md-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width: 992px) {
    .col-lg {
        flex: 1 0 0
    }

    .row-cols-lg-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-lg-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-lg-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-lg-3 > * {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .row-cols-lg-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-lg-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-lg-6 > * {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.33333333%
    }

    .offset-lg-2 {
        margin-left: 16.66666667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.33333333%
    }

    .offset-lg-5 {
        margin-left: 41.66666667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.33333333%
    }

    .offset-lg-8 {
        margin-left: 66.66666667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.33333333%
    }

    .offset-lg-11 {
        margin-left: 91.66666667%
    }

    .g-lg-0, .gx-lg-0 {
        --bs-gutter-x: 0
    }

    .g-lg-0, .gy-lg-0 {
        --bs-gutter-y: 0
    }

    .g-lg-1, .gx-lg-1 {
        --bs-gutter-x: .25rem
    }

    .g-lg-1, .gy-lg-1 {
        --bs-gutter-y: .25rem
    }

    .g-lg-2, .gx-lg-2 {
        --bs-gutter-x: .5rem
    }

    .g-lg-2, .gy-lg-2 {
        --bs-gutter-y: .5rem
    }

    .g-lg-3, .gx-lg-3 {
        --bs-gutter-x: 1rem
    }

    .g-lg-3, .gy-lg-3 {
        --bs-gutter-y: 1rem
    }

    .g-lg-4, .gx-lg-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-lg-4, .gy-lg-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-lg-5, .gx-lg-5 {
        --bs-gutter-x: 3rem
    }

    .g-lg-5, .gy-lg-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0
    }

    .row-cols-xl-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-xl-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-xl-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-xl-3 > * {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .row-cols-xl-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-xl-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-xl-6 > * {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xl-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-xl-0 {
        margin-left: 0
    }

    .offset-xl-1 {
        margin-left: 8.33333333%
    }

    .offset-xl-2 {
        margin-left: 16.66666667%
    }

    .offset-xl-3 {
        margin-left: 25%
    }

    .offset-xl-4 {
        margin-left: 33.33333333%
    }

    .offset-xl-5 {
        margin-left: 41.66666667%
    }

    .offset-xl-6 {
        margin-left: 50%
    }

    .offset-xl-7 {
        margin-left: 58.33333333%
    }

    .offset-xl-8 {
        margin-left: 66.66666667%
    }

    .offset-xl-9 {
        margin-left: 75%
    }

    .offset-xl-10 {
        margin-left: 83.33333333%
    }

    .offset-xl-11 {
        margin-left: 91.66666667%
    }

    .g-xl-0, .gx-xl-0 {
        --bs-gutter-x: 0
    }

    .g-xl-0, .gy-xl-0 {
        --bs-gutter-y: 0
    }

    .g-xl-1, .gx-xl-1 {
        --bs-gutter-x: .25rem
    }

    .g-xl-1, .gy-xl-1 {
        --bs-gutter-y: .25rem
    }

    .g-xl-2, .gx-xl-2 {
        --bs-gutter-x: .5rem
    }

    .g-xl-2, .gy-xl-2 {
        --bs-gutter-y: .5rem
    }

    .g-xl-3, .gx-xl-3 {
        --bs-gutter-x: 1rem
    }

    .g-xl-3, .gy-xl-3 {
        --bs-gutter-y: 1rem
    }

    .g-xl-4, .gx-xl-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-xl-4, .gy-xl-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-xl-5, .gx-xl-5 {
        --bs-gutter-x: 3rem
    }

    .g-xl-5, .gy-xl-5 {
        --bs-gutter-y: 3rem
    }
}

@media (min-width: 1400px) {
    .col-xxl {
        flex: 1 0 0
    }

    .row-cols-xxl-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-xxl-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-xxl-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-xxl-3 > * {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .row-cols-xxl-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-xxl-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-xxl-6 > * {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-xxl-0 {
        margin-left: 0
    }

    .offset-xxl-1 {
        margin-left: 8.33333333%
    }

    .offset-xxl-2 {
        margin-left: 16.66666667%
    }

    .offset-xxl-3 {
        margin-left: 25%
    }

    .offset-xxl-4 {
        margin-left: 33.33333333%
    }

    .offset-xxl-5 {
        margin-left: 41.66666667%
    }

    .offset-xxl-6 {
        margin-left: 50%
    }

    .offset-xxl-7 {
        margin-left: 58.33333333%
    }

    .offset-xxl-8 {
        margin-left: 66.66666667%
    }

    .offset-xxl-9 {
        margin-left: 75%
    }

    .offset-xxl-10 {
        margin-left: 83.33333333%
    }

    .offset-xxl-11 {
        margin-left: 91.66666667%
    }

    .g-xxl-0, .gx-xxl-0 {
        --bs-gutter-x: 0
    }

    .g-xxl-0, .gy-xxl-0 {
        --bs-gutter-y: 0
    }

    .g-xxl-1, .gx-xxl-1 {
        --bs-gutter-x: .25rem
    }

    .g-xxl-1, .gy-xxl-1 {
        --bs-gutter-y: .25rem
    }

    .g-xxl-2, .gx-xxl-2 {
        --bs-gutter-x: .5rem
    }

    .g-xxl-2, .gy-xxl-2 {
        --bs-gutter-y: .5rem
    }

    .g-xxl-3, .gx-xxl-3 {
        --bs-gutter-x: 1rem
    }

    .g-xxl-3, .gy-xxl-3 {
        --bs-gutter-y: 1rem
    }

    .g-xxl-4, .gx-xxl-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-xxl-4, .gy-xxl-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-xxl-5, .gx-xxl-5 {
        --bs-gutter-x: 3rem
    }

    .g-xxl-5, .gy-xxl-5 {
        --bs-gutter-y: 3rem
    }
}

.table {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: var(--bs-body-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-emphasis-color);
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), .05);
    --bs-table-active-color: var(--bs-emphasis-color);
    --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), .1);
    --bs-table-hover-color: var(--bs-emphasis-color);
    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), .075);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--bs-table-border-color)
}

.table > :not(caption) > * > * {
    padding: .5rem;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
    background-color: var(--bs-table-bg);
    border-bottom-width: var(--bs-border-width);
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)))
}

.table > tbody {
    vertical-align: inherit
}

.table > thead {
    vertical-align: bottom
}

.table-group-divider {
    border-top: calc(var(--bs-border-width) * 2) solid currentcolor
}

.caption-top {
    caption-side: top
}

.table-sm > :not(caption) > * > * {
    padding: .25rem
}

.table-bordered > :not(caption) > * {
    border-width: var(--bs-border-width) 0
}

.table-bordered > :not(caption) > * > * {
    border-width: 0 var(--bs-border-width)
}

.table-borderless > :not(caption) > * > * {
    border-bottom-width: 0
}

.table-borderless > :not(:first-child) {
    border-top-width: 0
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg)
}

.table-striped-columns > :not(caption) > tr > :nth-child(2n) {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg)
}

.table-active {
    --bs-table-color-state: var(--bs-table-active-color);
    --bs-table-bg-state: var(--bs-table-active-bg)
}

.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: var(--bs-table-hover-color);
    --bs-table-bg-state: var(--bs-table-hover-bg)
}

.table-primary {
    --bs-table-color: #000;
    --bs-table-bg: #cfe2ff;
    --bs-table-border-color: #a6b5cc;
    --bs-table-striped-bg: #c5d7f2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bacbe6;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfd1ec;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color)
}

.table-secondary {
    --bs-table-color: #000;
    --bs-table-bg: #e2e3e5;
    --bs-table-border-color: #b5b6b7;
    --bs-table-striped-bg: #d7d8da;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #cbccce;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #d1d2d4;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color)
}

.table-success {
    --bs-table-color: #000;
    --bs-table-bg: #d1e7dd;
    --bs-table-border-color: #a7b9b1;
    --bs-table-striped-bg: #c7dbd2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bcd0c7;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #c1d6cc;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color)
}

.table-info {
    --bs-table-color: #000;
    --bs-table-bg: #cff4fc;
    --bs-table-border-color: #a6c3ca;
    --bs-table-striped-bg: #c5e8ef;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #badce3;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfe2e9;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color)
}

.table-warning {
    --bs-table-color: #000;
    --bs-table-bg: #fff3cd;
    --bs-table-border-color: #ccc2a4;
    --bs-table-striped-bg: #f2e7c3;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #e6dbb9;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #ece1be;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color)
}

.table-danger {
    --bs-table-color: #000;
    --bs-table-bg: #f8d7da;
    --bs-table-border-color: #c6acae;
    --bs-table-striped-bg: #eccccf;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dfc2c4;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e5c7ca;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color)
}

.table-light {
    --bs-table-color: #000;
    --bs-table-bg: #f8f9fa;
    --bs-table-border-color: #c6c7c8;
    --bs-table-striped-bg: #ecedee;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dfe0e1;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e5e6e7;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color)
}

.table-dark {
    --bs-table-color: #fff;
    --bs-table-bg: #212529;
    --bs-table-border-color: #4d5154;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color)
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

@media (max-width: 575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width: 767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width: 991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width: 1199.98px) {
    .table-responsive-xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width: 1399.98px) {
    .table-responsive-xxl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

.form-label {
    margin-bottom: .5rem
}

.col-form-label {
    padding-top: calc(.375rem + var(--bs-border-width));
    padding-bottom: calc(.375rem + var(--bs-border-width));
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5
}

.col-form-label-lg {
    padding-top: calc(.5rem + var(--bs-border-width));
    padding-bottom: calc(.5rem + var(--bs-border-width));
    font-size: 1.25rem
}

.col-form-label-sm {
    padding-top: calc(.25rem + var(--bs-border-width));
    padding-bottom: calc(.25rem + var(--bs-border-width));
    font-size: .875rem
}

.form-text {
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-secondary-color)
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .form-control {
        transition: none
    }
}

.form-control[type=file] {
    overflow: hidden
}

.form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem #0d6efd40
}

.form-control::-webkit-date-and-time-value {
    min-width: 85px;
    height: 1.5em;
    margin: 0
}

.form-control::-webkit-datetime-edit {
    display: block;
    padding: 0
}

.form-control::placeholder {
    color: var(--bs-secondary-color);
    opacity: 1
}

.form-control:disabled {
    background-color: var(--bs-secondary-bg);
    opacity: 1
}

.form-control::-webkit-file-upload-button {
    padding: .375rem .75rem;
    margin: -.375rem -.75rem;
    -webkit-margin-end: .75rem;
    margin-inline-end: .75rem;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: var(--bs-border-width);
    border-radius: 0;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.form-control::file-selector-button {
    padding: .375rem .75rem;
    margin: -.375rem -.75rem;
    -webkit-margin-end: .75rem;
    margin-inline-end: .75rem;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: var(--bs-border-width);
    border-radius: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .form-control::-webkit-file-upload-button {
        -webkit-transition: none;
        transition: none
    }

    .form-control::file-selector-button {
        transition: none
    }
}

.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: var(--bs-secondary-bg)
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--bs-secondary-bg)
}

.form-control-plaintext {
    display: block;
    width: 100%;
    padding: .375rem 0;
    margin-bottom: 0;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: transparent;
    border: solid transparent;
    border-width: var(--bs-border-width) 0
}

.form-control-plaintext:focus {
    outline: 0
}

.form-control-plaintext.form-control-lg, .form-control-plaintext.form-control-sm {
    padding-right: 0;
    padding-left: 0
}

.form-control-sm {
    min-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: var(--bs-border-radius-sm)
}

.form-control-sm::-webkit-file-upload-button {
    padding: .25rem .5rem;
    margin: -.25rem -.5rem;
    -webkit-margin-end: .5rem;
    margin-inline-end: .5rem
}

.form-control-sm::file-selector-button {
    padding: .25rem .5rem;
    margin: -.25rem -.5rem;
    -webkit-margin-end: .5rem;
    margin-inline-end: .5rem
}

.form-control-lg {
    min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: var(--bs-border-radius-lg)
}

.form-control-lg::-webkit-file-upload-button {
    padding: .5rem 1rem;
    margin: -.5rem -1rem;
    -webkit-margin-end: 1rem;
    margin-inline-end: 1rem
}

.form-control-lg::file-selector-button {
    padding: .5rem 1rem;
    margin: -.5rem -1rem;
    -webkit-margin-end: 1rem;
    margin-inline-end: 1rem
}

textarea.form-control {
    min-height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2))
}

textarea.form-control-sm {
    min-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))
}

textarea.form-control-lg {
    min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))
}

.form-control-color {
    width: 3rem;
    height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));
    padding: .375rem
}

.form-control-color:not(:disabled):not([readonly]) {
    cursor: pointer
}

.form-control-color::-moz-color-swatch {
    border: 0 !important;
    border-radius: var(--bs-border-radius)
}

.form-control-color::-webkit-color-swatch {
    border: 0 !important;
    border-radius: var(--bs-border-radius)
}

.form-control-color.form-control-sm {
    height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))
}

.form-control-color.form-control-lg {
    height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .form-select {
        transition: none
    }
}

.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem #0d6efd40
}

.form-select[multiple], .form-select[size]:not([size="1"]) {
    padding-right: .75rem;
    background-image: none
}

.form-select:disabled {
    background-color: var(--bs-secondary-bg)
}

.form-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--bs-body-color)
}

.form-select-sm {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    font-size: .875rem;
    border-radius: var(--bs-border-radius-sm)
}

.form-select-lg {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    font-size: 1.25rem;
    border-radius: var(--bs-border-radius-lg)
}

[data-bs-theme=dark] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}

.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125rem
}

.form-check .form-check-input {
    float: left;
    margin-left: -1.5em
}

.form-check-reverse {
    padding-right: 1.5em;
    padding-left: 0;
    text-align: right
}

.form-check-reverse .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0
}

.form-check-input {
    --bs-form-check-bg: var(--bs-body-bg);
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-form-check-bg);
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact
}

.form-check-input[type=checkbox] {
    border-radius: .25em
}

.form-check-input[type=radio] {
    border-radius: 50%
}

.form-check-input:active {
    filter: brightness(90%)
}

.form-check-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem #0d6efd40
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}

.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: #0d6efd;
    border-color: #0d6efd;
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}

.form-check-input:disabled {
    pointer-events: none;
    filter: none;
    opacity: .5
}

.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
    cursor: default;
    opacity: .5
}

.form-switch {
    padding-left: 2.5em
}

.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    width: 2em;
    margin-left: -2.5em;
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .form-switch .form-check-input {
        transition: none
    }
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")
}

.form-switch .form-check-input:checked {
    background-position: right center;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
}

.form-switch.form-check-reverse {
    padding-right: 2.5em;
    padding-left: 0
}

.form-switch.form-check-reverse .form-check-input {
    margin-right: -2.5em;
    margin-left: 0
}

.form-check-inline {
    display: inline-block;
    margin-right: 1rem
}

.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none
}

.btn-check:disabled + .btn, .btn-check[disabled] + .btn {
    pointer-events: none;
    filter: none;
    opacity: .65
}

[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")
}

.form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent
}

.form-range:focus {
    outline: 0
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem #0d6efd40
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem #0d6efd40
}

.form-range::-moz-focus-outer {
    border: 0
}

.form-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #0d6efd;
    border: 0;
    border-radius: 1rem;
    -webkit-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .form-range::-webkit-slider-thumb {
        -webkit-transition: none;
        transition: none
    }
}

.form-range::-webkit-slider-thumb:active {
    background-color: #b6d4fe
}

.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: .5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--bs-secondary-bg);
    border-color: transparent;
    border-radius: 1rem
}

.form-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #0d6efd;
    border: 0;
    border-radius: 1rem;
    -moz-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .form-range::-moz-range-thumb {
        -moz-transition: none;
        transition: none
    }
}

.form-range::-moz-range-thumb:active {
    background-color: #b6d4fe
}

.form-range::-moz-range-track {
    width: 100%;
    height: .5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--bs-secondary-bg);
    border-color: transparent;
    border-radius: 1rem
}

.form-range:disabled {
    pointer-events: none
}

.form-range:disabled::-webkit-slider-thumb {
    background-color: var(--bs-secondary-color)
}

.form-range:disabled::-moz-range-thumb {
    background-color: var(--bs-secondary-color)
}

.form-floating {
    position: relative
}

.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
    height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    line-height: 1.25
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    max-width: 100%;
    height: 100%;
    padding: 1rem .75rem;
    overflow: hidden;
    color: rgba(var(--bs-body-color-rgb), .65);
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: var(--bs-border-width) solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .form-floating > label {
        transition: none
    }
}

.form-floating > .form-control, .form-floating > .form-control-plaintext {
    padding: 1rem .75rem
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: transparent
}

.form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown), .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .625rem
}

.form-floating > .form-control-plaintext:-webkit-autofill, .form-floating > .form-control:-webkit-autofill {
    padding-top: 1.625rem;
    padding-bottom: .625rem
}

.form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
    padding-left: .75rem
}

.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    transform: scale(.85) translateY(-.5rem) translate(.15rem)
}

.form-floating > .form-control:-webkit-autofill ~ label {
    transform: scale(.85) translateY(-.5rem) translate(.15rem)
}

.form-floating > textarea:focus ~ label:after, .form-floating > textarea:not(:placeholder-shown) ~ label:after {
    position: absolute;
    top: 1rem;
    right: .375rem;
    bottom: 1rem;
    left: .375rem;
    z-index: -1;
    height: 1.5em;
    content: "";
    background-color: var(--bs-body-bg);
    border-radius: var(--bs-border-radius)
}

.form-floating > textarea:disabled ~ label:after {
    background-color: var(--bs-secondary-bg)
}

.form-floating > .form-control-plaintext ~ label {
    border-width: var(--bs-border-width) 0
}

.form-floating > .form-control:disabled ~ label, .form-floating > :disabled ~ label {
    color: #6c757d
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%
}

.input-group > .form-control, .input-group > .form-floating, .input-group > .form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0
}

.input-group > .form-control:focus, .input-group > .form-floating:focus-within, .input-group > .form-select:focus {
    z-index: 5
}

.input-group .btn {
    position: relative;
    z-index: 2
}

.input-group .btn:focus {
    z-index: 5
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius)
}

.input-group-lg > .btn, .input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    border-radius: var(--bs-border-radius-lg)
}

.input-group-sm > .btn, .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: var(--bs-border-radius-sm)
}

.input-group-lg > .form-select, .input-group-sm > .form-select {
    padding-right: 3rem
}

.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select, .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4), .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control, .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select, .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: calc(-1 * var(--bs-border-width));
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.input-group > .form-floating:not(:first-child) > .form-control, .input-group > .form-floating:not(:first-child) > .form-select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.valid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-form-valid-color)
}

.valid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .25rem .5rem;
    margin-top: .1rem;
    font-size: .875rem;
    color: #fff;
    background-color: var(--bs-success);
    border-radius: var(--bs-border-radius)
}

.is-valid ~ .valid-feedback, .is-valid ~ .valid-tooltip, .was-validated :valid ~ .valid-feedback, .was-validated :valid ~ .valid-tooltip {
    display: block
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: var(--bs-form-valid-border-color);
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem)
}

.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
    border-color: var(--bs-form-valid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25)
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
    padding-right: calc(1.5em + .75rem);
    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem)
}

.form-select.is-valid, .was-validated .form-select:valid {
    border-color: var(--bs-form-valid-border-color)
}

.form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"], .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
    padding-right: 4.125rem;
    background-position: right .75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem)
}

.form-select.is-valid:focus, .was-validated .form-select:valid:focus {
    border-color: var(--bs-form-valid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25)
}

.form-control-color.is-valid, .was-validated .form-control-color:valid {
    width: calc(3.75rem + 1.5em)
}

.form-check-input.is-valid, .was-validated .form-check-input:valid {
    border-color: var(--bs-form-valid-border-color)
}

.form-check-input.is-valid:checked, .was-validated .form-check-input:valid:checked {
    background-color: var(--bs-form-valid-color)
}

.form-check-input.is-valid:focus, .was-validated .form-check-input:valid:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25)
}

.form-check-input.is-valid ~ .form-check-label, .was-validated .form-check-input:valid ~ .form-check-label {
    color: var(--bs-form-valid-color)
}

.form-check-inline .form-check-input ~ .valid-feedback {
    margin-left: .5em
}

.input-group > .form-control:not(:focus).is-valid, .input-group > .form-floating:not(:focus-within).is-valid, .input-group > .form-select:not(:focus).is-valid, .was-validated .input-group > .form-control:not(:focus):valid, .was-validated .input-group > .form-floating:not(:focus-within):valid, .was-validated .input-group > .form-select:not(:focus):valid {
    z-index: 3
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-form-invalid-color)
}

.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .25rem .5rem;
    margin-top: .1rem;
    font-size: .875rem;
    color: #fff;
    background-color: var(--bs-danger);
    border-radius: var(--bs-border-radius)
}

.is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip, .was-validated :invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-tooltip {
    display: block
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--bs-form-invalid-border-color);
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem)
}

.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25)
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
    padding-right: calc(1.5em + .75rem);
    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem)
}

.form-select.is-invalid, .was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color)
}

.form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"], .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    padding-right: 4.125rem;
    background-position: right .75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem)
}

.form-select.is-invalid:focus, .was-validated .form-select:invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25)
}

.form-control-color.is-invalid, .was-validated .form-control-color:invalid {
    width: calc(3.75rem + 1.5em)
}

.form-check-input.is-invalid, .was-validated .form-check-input:invalid {
    border-color: var(--bs-form-invalid-border-color)
}

.form-check-input.is-invalid:checked, .was-validated .form-check-input:invalid:checked {
    background-color: var(--bs-form-invalid-color)
}

.form-check-input.is-invalid:focus, .was-validated .form-check-input:invalid:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25)
}

.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label {
    color: var(--bs-form-invalid-color)
}

.form-check-inline .form-check-input ~ .invalid-feedback {
    margin-left: .5em
}

.input-group > .form-control:not(:focus).is-invalid, .input-group > .form-floating:not(:focus-within).is-invalid, .input-group > .form-select:not(:focus).is-invalid, .was-validated .input-group > .form-control:not(:focus):invalid, .was-validated .input-group > .form-floating:not(:focus-within):invalid, .was-validated .input-group > .form-select:not(:focus):invalid {
    z-index: 4
}

.btn {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    --bs-btn-disabled-opacity: .65;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none
    }
}

.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color)
}

.btn-check + .btn:hover {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color)
}

.btn:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow)
}

.btn-check:focus-visible + .btn {
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow)
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color)
}

.btn-check:checked + .btn:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible, .btn:first-child:active:focus-visible, :not(.btn-check) + .btn:active:focus-visible {
    box-shadow: var(--bs-btn-focus-box-shadow)
}

.btn-check:checked:focus-visible + .btn {
    box-shadow: var(--bs-btn-focus-box-shadow)
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    color: var(--bs-btn-disabled-color);
    pointer-events: none;
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity)
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754
}

.btn-info {
    --bs-btn-color: #000;
    --bs-btn-bg: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #31d2f2;
    --bs-btn-hover-border-color: #25cff2;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #3dd5f3;
    --bs-btn-active-border-color: #25cff2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #0dcaf0;
    --bs-btn-disabled-border-color: #0dcaf0
}

.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #ffc720;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545
}

.btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #424649;
    --bs-btn-hover-border-color: #373b3e;
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d5154;
    --bs-btn-active-border-color: #373b3e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #212529;
    --bs-btn-disabled-border-color: #212529
}

.btn-outline-primary {
    --bs-btn-color: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none
}

.btn-outline-secondary {
    --bs-btn-color: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none
}

.btn-outline-success {
    --bs-btn-color: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #198754;
    --bs-btn-hover-border-color: #198754;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #198754;
    --bs-btn-active-border-color: #198754;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #198754;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #198754;
    --bs-gradient: none
}

.btn-outline-info {
    --bs-btn-color: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #0dcaf0;
    --bs-btn-hover-border-color: #0dcaf0;
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #0dcaf0;
    --bs-btn-active-border-color: #0dcaf0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #0dcaf0;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0dcaf0;
    --bs-gradient: none
}

.btn-outline-warning {
    --bs-btn-color: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffc107;
    --bs-btn-hover-border-color: #ffc107;
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffc107;
    --bs-btn-active-border-color: #ffc107;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #ffc107;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ffc107;
    --bs-gradient: none
}

.btn-outline-danger {
    --bs-btn-color: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-hover-border-color: #dc3545;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dc3545;
    --bs-btn-active-border-color: #dc3545;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #dc3545;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #dc3545;
    --bs-gradient: none
}

.btn-outline-light {
    --bs-btn-color: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f8f9fa;
    --bs-btn-active-border-color: #f8f9fa;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none
}

.btn-outline-dark {
    --bs-btn-color: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #212529;
    --bs-btn-hover-border-color: #212529;
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #212529;
    --bs-btn-active-border-color: #212529;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #212529;
    --bs-gradient: none
}

.btn-link {
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-link-hover-color);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: 0 0 0 #000;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    text-decoration: underline
}

.btn-link:focus-visible {
    color: var(--bs-btn-color)
}

.btn-link:hover {
    color: var(--bs-btn-hover-color)
}

.btn-group-lg > .btn, .btn-lg {
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg)
}

.btn-group-sm > .btn, .btn-sm {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm)
}

.fade {
    transition: opacity .15s linear
}

@media (prefers-reduced-motion: reduce) {
    .fade {
        transition: none
    }
}

.fade:not(.show) {
    opacity: 0
}

.collapse:not(.show) {
    display: none
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .35s ease
}

@media (prefers-reduced-motion: reduce) {
    .collapsing {
        transition: none
    }
}

.collapsing.collapse-horizontal {
    width: 0;
    height: auto;
    transition: width .35s ease
}

@media (prefers-reduced-motion: reduce) {
    .collapsing.collapse-horizontal {
        transition: none
    }
}

.dropdown, .dropdown-center, .dropend, .dropstart, .dropup, .dropup-center {
    position: relative
}

.dropdown-toggle {
    white-space: nowrap
}

.dropdown-toggle:after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent
}

.dropdown-toggle:empty:after {
    margin-left: 0
}

.dropdown-menu {
    --bs-dropdown-zindex: 1000;
    --bs-dropdown-min-width: 10rem;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: .5rem;
    --bs-dropdown-spacer: .125rem;
    --bs-dropdown-font-size: 1rem;
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-border-width: var(--bs-border-width);
    --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-divider-margin-y: .5rem;
    --bs-dropdown-box-shadow: var(--bs-box-shadow);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #0d6efd;
    --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: .25rem;
    --bs-dropdown-header-color: #6c757d;
    --bs-dropdown-header-padding-x: 1rem;
    --bs-dropdown-header-padding-y: .5rem;
    position: absolute;
    z-index: var(--bs-dropdown-zindex);
    display: none;
    min-width: var(--bs-dropdown-min-width);
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    margin: 0;
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius)
}

.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: 0;
    margin-top: var(--bs-dropdown-spacer)
}

.dropdown-menu-start {
    --bs-position: start
}

.dropdown-menu-start[data-bs-popper] {
    right: auto;
    left: 0
}

.dropdown-menu-end {
    --bs-position: end
}

.dropdown-menu-end[data-bs-popper] {
    right: 0;
    left: auto
}

@media (min-width: 576px) {
    .dropdown-menu-sm-start {
        --bs-position: start
    }

    .dropdown-menu-sm-start[data-bs-popper] {
        right: auto;
        left: 0
    }

    .dropdown-menu-sm-end {
        --bs-position: end
    }

    .dropdown-menu-sm-end[data-bs-popper] {
        right: 0;
        left: auto
    }
}

@media (min-width: 768px) {
    .dropdown-menu-md-start {
        --bs-position: start
    }

    .dropdown-menu-md-start[data-bs-popper] {
        right: auto;
        left: 0
    }

    .dropdown-menu-md-end {
        --bs-position: end
    }

    .dropdown-menu-md-end[data-bs-popper] {
        right: 0;
        left: auto
    }
}

@media (min-width: 992px) {
    .dropdown-menu-lg-start {
        --bs-position: start
    }

    .dropdown-menu-lg-start[data-bs-popper] {
        right: auto;
        left: 0
    }

    .dropdown-menu-lg-end {
        --bs-position: end
    }

    .dropdown-menu-lg-end[data-bs-popper] {
        right: 0;
        left: auto
    }
}

@media (min-width: 1200px) {
    .dropdown-menu-xl-start {
        --bs-position: start
    }

    .dropdown-menu-xl-start[data-bs-popper] {
        right: auto;
        left: 0
    }

    .dropdown-menu-xl-end {
        --bs-position: end
    }

    .dropdown-menu-xl-end[data-bs-popper] {
        right: 0;
        left: auto
    }
}

@media (min-width: 1400px) {
    .dropdown-menu-xxl-start {
        --bs-position: start
    }

    .dropdown-menu-xxl-start[data-bs-popper] {
        right: auto;
        left: 0
    }

    .dropdown-menu-xxl-end {
        --bs-position: end
    }

    .dropdown-menu-xxl-end[data-bs-popper] {
        right: 0;
        left: auto
    }
}

.dropup .dropdown-menu[data-bs-popper] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--bs-dropdown-spacer)
}

.dropup .dropdown-toggle:after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: 0;
    border-right: .3em solid transparent;
    border-bottom: .3em solid;
    border-left: .3em solid transparent
}

.dropup .dropdown-toggle:empty:after {
    margin-left: 0
}

.dropend .dropdown-menu[data-bs-popper] {
    top: 0;
    right: auto;
    left: 100%;
    margin-top: 0;
    margin-left: var(--bs-dropdown-spacer)
}

.dropend .dropdown-toggle:after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .3em solid
}

.dropend .dropdown-toggle:empty:after {
    margin-left: 0
}

.dropend .dropdown-toggle:after {
    vertical-align: 0
}

.dropstart .dropdown-menu[data-bs-popper] {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: var(--bs-dropdown-spacer)
}

.dropstart .dropdown-toggle:after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: ""
}

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

.dropstart .dropdown-toggle:before {
    display: inline-block;
    margin-right: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid transparent;
    border-right: .3em solid;
    border-bottom: .3em solid transparent
}

.dropstart .dropdown-toggle:empty:after {
    margin-left: 0
}

.dropstart .dropdown-toggle:before {
    vertical-align: 0
}

.dropdown-divider {
    height: 0;
    margin: var(--bs-dropdown-divider-margin-y) 0;
    overflow: hidden;
    border-top: 1px solid var(--bs-dropdown-divider-bg);
    opacity: 1
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--bs-dropdown-item-border-radius, 0)
}

.dropdown-item:focus, .dropdown-item:hover {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg)
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--bs-dropdown-link-active-bg)
}

.dropdown-item.disabled, .dropdown-item:disabled {
    color: var(--bs-dropdown-link-disabled-color);
    pointer-events: none;
    background-color: transparent
}

.dropdown-menu.show {
    display: block
}

.dropdown-header {
    display: block;
    padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
    margin-bottom: 0;
    font-size: .875rem;
    color: var(--bs-dropdown-header-color);
    white-space: nowrap
}

.dropdown-item-text {
    display: block;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    color: var(--bs-dropdown-link-color)
}

.dropdown-menu-dark {
    --bs-dropdown-color: #dee2e6;
    --bs-dropdown-bg: #343a40;
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-box-shadow: ;
    --bs-dropdown-link-color: #dee2e6;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .15);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #0d6efd;
    --bs-dropdown-link-disabled-color: #adb5bd;
    --bs-dropdown-header-color: #adb5bd
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-flex;
    vertical-align: middle
}

.btn-group-vertical > .btn, .btn-group > .btn {
    position: relative;
    flex: 1 1 auto
}

.btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:hover, .btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus, .btn-group > .btn:hover {
    z-index: 1
}

.btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start
}

.btn-toolbar .input-group {
    width: auto
}

.btn-group {
    border-radius: var(--bs-border-radius)
}

.btn-group > .btn-group:not(:first-child), .btn-group > :not(.btn-check:first-child) + .btn {
    margin-left: calc(-1 * var(--bs-border-width))
}

.btn-group > .btn-group:not(:last-child) > .btn, .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.btn-group > .btn-group:not(:first-child) > .btn, .btn-group > .btn:nth-child(n+3), .btn-group > :not(.btn-check) + .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.dropdown-toggle-split {
    padding-right: .5625rem;
    padding-left: .5625rem
}

.dropdown-toggle-split:after, .dropend .dropdown-toggle-split:after, .dropup .dropdown-toggle-split:after {
    margin-left: 0
}

.dropstart .dropdown-toggle-split:before {
    margin-right: 0
}

.btn-group-sm > .btn + .dropdown-toggle-split, .btn-sm + .dropdown-toggle-split {
    padding-right: .375rem;
    padding-left: .375rem
}

.btn-group-lg > .btn + .dropdown-toggle-split, .btn-lg + .dropdown-toggle-split {
    padding-right: .75rem;
    padding-left: .75rem
}

.btn-group-vertical {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.btn-group-vertical > .btn, .btn-group-vertical > .btn-group {
    width: 100%
}

.btn-group-vertical > .btn-group:not(:first-child), .btn-group-vertical > .btn:not(:first-child) {
    margin-top: calc(-1 * var(--bs-border-width))
}

.btn-group-vertical > .btn-group:not(:last-child) > .btn, .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.btn-group-vertical > .btn-group:not(:first-child) > .btn, .btn-group-vertical > .btn:nth-child(n+3), .btn-group-vertical > :not(.btn-check) + .btn {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: .5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .nav-link {
        transition: none
    }
}

.nav-link:focus, .nav-link:hover {
    color: var(--bs-nav-link-hover-color)
}

.nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem #0d6efd40
}

.nav-link.disabled, .nav-link:disabled {
    color: var(--bs-nav-link-disabled-color);
    pointer-events: none;
    cursor: default
}

.nav-tabs {
    --bs-nav-tabs-border-width: var(--bs-border-width);
    --bs-nav-tabs-border-color: var(--bs-border-color);
    --bs-nav-tabs-border-radius: var(--bs-border-radius);
    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
    --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
    --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)
}

.nav-tabs .nav-link {
    margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
    border: var(--bs-nav-tabs-border-width) solid transparent;
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
    border-top-right-radius: var(--bs-nav-tabs-border-radius)
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    isolation: isolate;
    border-color: var(--bs-nav-tabs-link-hover-border-color)
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: var(--bs-nav-tabs-link-active-bg);
    border-color: var(--bs-nav-tabs-link-active-border-color)
}

.nav-tabs .dropdown-menu {
    margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #0d6efd
}

.nav-pills .nav-link {
    border-radius: var(--bs-nav-pills-border-radius)
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--bs-nav-pills-link-active-bg)
}

.nav-underline {
    --bs-nav-underline-gap: 1rem;
    --bs-nav-underline-border-width: .125rem;
    --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
    gap: var(--bs-nav-underline-gap)
}

.nav-underline .nav-link {
    padding-right: 0;
    padding-left: 0;
    border-bottom: var(--bs-nav-underline-border-width) solid transparent
}

.nav-underline .nav-link:focus, .nav-underline .nav-link:hover {
    border-bottom-color: currentcolor
}

.nav-underline .nav-link.active, .nav-underline .show > .nav-link {
    font-weight: 700;
    color: var(--bs-nav-underline-link-active-color);
    border-bottom-color: currentcolor
}

.nav-fill .nav-item, .nav-fill > .nav-link {
    flex: 1 1 auto;
    text-align: center
}

.nav-justified .nav-item, .nav-justified > .nav-link {
    flex-grow: 1;
    flex-basis: 0;
    text-align: center
}

.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link {
    width: 100%
}

.tab-content > .tab-pane {
    display: none
}

.tab-content > .active {
    display: block
}

.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: .5rem;
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), .65);
    --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), .8);
    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), .3);
    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-padding-y: .3125rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1.25rem;
    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-nav-link-padding-x: .5rem;
    --bs-navbar-toggler-padding-y: .25rem;
    --bs-navbar-toggler-padding-x: .75rem;
    --bs-navbar-toggler-font-size: 1.25rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), .15);
    --bs-navbar-toggler-border-radius: var(--bs-border-radius);
    --bs-navbar-toggler-focus-width: .25rem;
    --bs-navbar-toggler-transition: box-shadow .15s ease-in-out;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)
}

.navbar > .container, .navbar > .container-fluid, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container-xl, .navbar > .container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between
}

.navbar-brand {
    padding-top: var(--bs-navbar-brand-padding-y);
    padding-bottom: var(--bs-navbar-brand-padding-y);
    margin-right: var(--bs-navbar-brand-margin-end);
    font-size: var(--bs-navbar-brand-font-size);
    color: var(--bs-navbar-brand-color);
    text-decoration: none;
    white-space: nowrap
}

.navbar-brand:focus, .navbar-brand:hover {
    color: var(--bs-navbar-brand-hover-color)
}

.navbar-nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: .5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-navbar-color);
    --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
    --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--bs-navbar-active-color)
}

.navbar-nav .dropdown-menu {
    position: static
}

.navbar-text {
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: var(--bs-navbar-color)
}

.navbar-text a, .navbar-text a:focus, .navbar-text a:hover {
    color: var(--bs-navbar-active-color)
}

.navbar-collapse {
    flex-grow: 1;
    flex-basis: 100%;
    align-items: center
}

.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: transparent;
    border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition)
}

@media (prefers-reduced-motion: reduce) {
    .navbar-toggler {
        transition: none
    }
}

.navbar-toggler:hover {
    text-decoration: none
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width)
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--bs-navbar-toggler-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.navbar-nav-scroll {
    max-height: var(--bs-scroll-height, 75vh);
    overflow-y: auto
}

@media (min-width: 576px) {
    .navbar-expand-sm {
        flex-wrap: nowrap;
        justify-content: flex-start
    }

    .navbar-expand-sm .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-sm .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-sm .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-sm .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-sm .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }

    .navbar-expand-sm .navbar-toggler {
        display: none
    }

    .navbar-expand-sm .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        transform: none !important;
        transition: none
    }

    .navbar-expand-sm .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-sm .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 768px) {
    .navbar-expand-md {
        flex-wrap: nowrap;
        justify-content: flex-start
    }

    .navbar-expand-md .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-md .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-md .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-md .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }

    .navbar-expand-md .navbar-toggler {
        display: none
    }

    .navbar-expand-md .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        transform: none !important;
        transition: none
    }

    .navbar-expand-md .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-md .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-lg .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }

    .navbar-expand-lg .navbar-toggler {
        display: none
    }

    .navbar-expand-lg .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        transform: none !important;
        transition: none
    }

    .navbar-expand-lg .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-lg .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 1200px) {
    .navbar-expand-xl {
        flex-wrap: nowrap;
        justify-content: flex-start
    }

    .navbar-expand-xl .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-xl .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-xl .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-xl .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }

    .navbar-expand-xl .navbar-toggler {
        display: none
    }

    .navbar-expand-xl .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        transform: none !important;
        transition: none
    }

    .navbar-expand-xl .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-xl .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

@media (min-width: 1400px) {
    .navbar-expand-xxl {
        flex-wrap: nowrap;
        justify-content: flex-start
    }

    .navbar-expand-xxl .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-xxl .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-xxl .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        padding-left: var(--bs-navbar-nav-link-padding-x)
    }

    .navbar-expand-xxl .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-xxl .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }

    .navbar-expand-xxl .navbar-toggler {
        display: none
    }

    .navbar-expand-xxl .offcanvas {
        position: static;
        z-index: auto;
        flex-grow: 1;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: 0 !important;
        transform: none !important;
        transition: none
    }

    .navbar-expand-xxl .offcanvas .offcanvas-header {
        display: none
    }

    .navbar-expand-xxl .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible
    }
}

.navbar-expand {
    flex-wrap: nowrap;
    justify-content: flex-start
}

.navbar-expand .navbar-nav {
    flex-direction: row
}

.navbar-expand .navbar-nav .dropdown-menu {
    position: absolute
}

.navbar-expand .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x)
}

.navbar-expand .navbar-nav-scroll {
    overflow: visible
}

.navbar-expand .navbar-collapse {
    display: flex !important;
    flex-basis: auto
}

.navbar-expand .navbar-toggler {
    display: none
}

.navbar-expand .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none
}

.navbar-expand .offcanvas .offcanvas-header {
    display: none
}

.navbar-expand .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible
}

.navbar-dark, .navbar[data-bs-theme=dark] {
    --bs-navbar-color: rgba(255, 255, 255, .55);
    --bs-navbar-hover-color: rgba(255, 255, 255, .75);
    --bs-navbar-disabled-color: rgba(255, 255, 255, .25);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, .1);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

[data-bs-theme=dark] .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: .5rem;
    --bs-card-title-color: ;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-cap-padding-y: .5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), .03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: .75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius)
}

.card > hr {
    margin-right: 0;
    margin-left: 0
}

.card > .list-group {
    border-top: inherit;
    border-bottom: inherit
}

.card > .list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius)
}

.card > .list-group:last-child {
    border-bottom-width: 0;
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius)
}

.card > .card-header + .list-group, .card > .list-group + .card-footer {
    border-top: 0
}

.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color)
}

.card-title {
    margin-bottom: var(--bs-card-title-spacer-y);
    color: var(--bs-card-title-color)
}

.card-subtitle {
    margin-top: calc(-.5 * var(--bs-card-title-spacer-y));
    margin-bottom: 0;
    color: var(--bs-card-subtitle-color)
}

.card-text:last-child {
    margin-bottom: 0
}

.card-link + .card-link {
    margin-left: var(--bs-card-spacer-x)
}

.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color)
}

.card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0
}

.card-footer {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color)
}

.card-footer:last-child {
    border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)
}

.card-header-tabs {
    margin-right: calc(-.5 * var(--bs-card-cap-padding-x));
    margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
    margin-left: calc(-.5 * var(--bs-card-cap-padding-x));
    border-bottom: 0
}

.card-header-tabs .nav-link.active {
    background-color: var(--bs-card-bg);
    border-bottom-color: var(--bs-card-bg)
}

.card-header-pills {
    margin-right: calc(-.5 * var(--bs-card-cap-padding-x));
    margin-left: calc(-.5 * var(--bs-card-cap-padding-x))
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--bs-card-img-overlay-padding);
    border-radius: var(--bs-card-inner-border-radius)
}

.card-img, .card-img-bottom, .card-img-top {
    width: 100%
}

.card-img, .card-img-top {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius)
}

.card-img, .card-img-bottom {
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius)
}

.card-group > .card {
    margin-bottom: var(--bs-card-group-margin)
}

@media (min-width: 576px) {
    .card-group {
        display: flex;
        flex-flow: row wrap
    }

    .card-group > .card {
        flex: 1 0 0;
        margin-bottom: 0
    }

    .card-group > .card + .card {
        margin-left: 0;
        border-left: 0
    }

    .card-group > .card:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .card-group > .card:not(:last-child) > .card-header, .card-group > .card:not(:last-child) > .card-img-top {
        border-top-right-radius: 0
    }

    .card-group > .card:not(:last-child) > .card-footer, .card-group > .card:not(:last-child) > .card-img-bottom {
        border-bottom-right-radius: 0
    }

    .card-group > .card:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .card-group > .card:not(:first-child) > .card-header, .card-group > .card:not(:first-child) > .card-img-top {
        border-top-left-radius: 0
    }

    .card-group > .card:not(:first-child) > .card-footer, .card-group > .card:not(:first-child) > .card-img-bottom {
        border-bottom-left-radius: 0
    }
}

.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-body-bg);
    --bs-accordion-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-width: var(--bs-border-width);
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform .2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle)
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition)
}

@media (prefers-reduced-motion: reduce) {
    .accordion-button {
        transition: none
    }
}

.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)
}

.accordion-button:not(.collapsed):after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: var(--bs-accordion-btn-icon-transform)
}

.accordion-button:after {
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition)
}

@media (prefers-reduced-motion: reduce) {
    .accordion-button:after {
        transition: none
    }
}

.accordion-button:hover {
    z-index: 2
}

.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: var(--bs-accordion-btn-focus-box-shadow)
}

.accordion-header {
    margin-bottom: 0
}

.accordion-item {
    color: var(--bs-accordion-color);
    background-color: var(--bs-accordion-bg);
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)
}

.accordion-item:first-of-type {
    border-top-left-radius: var(--bs-accordion-border-radius);
    border-top-right-radius: var(--bs-accordion-border-radius)
}

.accordion-item:first-of-type > .accordion-header .accordion-button {
    border-top-left-radius: var(--bs-accordion-inner-border-radius);
    border-top-right-radius: var(--bs-accordion-inner-border-radius)
}

.accordion-item:not(:first-of-type) {
    border-top: 0
}

.accordion-item:last-of-type {
    border-bottom-right-radius: var(--bs-accordion-border-radius);
    border-bottom-left-radius: var(--bs-accordion-border-radius)
}

.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
    border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
    border-bottom-left-radius: var(--bs-accordion-inner-border-radius)
}

.accordion-item:last-of-type > .accordion-collapse {
    border-bottom-right-radius: var(--bs-accordion-border-radius);
    border-bottom-left-radius: var(--bs-accordion-border-radius)
}

.accordion-body {
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)
}

.accordion-flush > .accordion-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0
}

.accordion-flush > .accordion-item:first-child {
    border-top: 0
}

.accordion-flush > .accordion-item:last-child {
    border-bottom: 0
}

.accordion-flush > .accordion-item > .accordion-collapse, .accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
    border-radius: 0
}

[data-bs-theme=dark] .accordion-button:after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")
}

.breadcrumb {
    --bs-breadcrumb-padding-x: 0;
    --bs-breadcrumb-padding-y: 0;
    --bs-breadcrumb-margin-bottom: 1rem;
    --bs-breadcrumb-bg: ;
    --bs-breadcrumb-border-radius: ;
    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
    --bs-breadcrumb-item-padding-x: .5rem;
    --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
    margin-bottom: var(--bs-breadcrumb-margin-bottom);
    font-size: var(--bs-breadcrumb-font-size);
    list-style: none;
    background-color: var(--bs-breadcrumb-bg);
    border-radius: var(--bs-breadcrumb-border-radius)
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: var(--bs-breadcrumb-item-padding-x)
}

.breadcrumb-item + .breadcrumb-item:before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: var(--bs-breadcrumb-divider-color);
    content: var(--bs-breadcrumb-divider, "/")
}

.breadcrumb-item.active {
    color: var(--bs-breadcrumb-item-active-color)
}

.pagination {
    --bs-pagination-padding-x: .75rem;
    --bs-pagination-padding-y: .375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: var(--bs-tertiary-bg);
    --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #0d6efd;
    --bs-pagination-active-border-color: #0d6efd;
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-secondary-bg);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    display: flex;
    padding-left: 0;
    list-style: none
}

.page-link {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: var(--bs-pagination-color);
    text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .page-link {
        transition: none
    }
}

.page-link:hover {
    z-index: 2;
    color: var(--bs-pagination-hover-color);
    background-color: var(--bs-pagination-hover-bg);
    border-color: var(--bs-pagination-hover-border-color)
}

.page-link:focus {
    z-index: 3;
    color: var(--bs-pagination-focus-color);
    background-color: var(--bs-pagination-focus-bg);
    outline: 0;
    box-shadow: var(--bs-pagination-focus-box-shadow)
}

.active > .page-link, .page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color)
}

.disabled > .page-link, .page-link.disabled {
    color: var(--bs-pagination-disabled-color);
    pointer-events: none;
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color)
}

.page-item:not(:first-child) .page-link {
    margin-left: calc(-1 * var(--bs-border-width))
}

.page-item:first-child .page-link {
    border-top-left-radius: var(--bs-pagination-border-radius);
    border-bottom-left-radius: var(--bs-pagination-border-radius)
}

.page-item:last-child .page-link {
    border-top-right-radius: var(--bs-pagination-border-radius);
    border-bottom-right-radius: var(--bs-pagination-border-radius)
}

.pagination-lg {
    --bs-pagination-padding-x: 1.5rem;
    --bs-pagination-padding-y: .75rem;
    --bs-pagination-font-size: 1.25rem;
    --bs-pagination-border-radius: var(--bs-border-radius-lg)
}

.pagination-sm {
    --bs-pagination-padding-x: .5rem;
    --bs-pagination-padding-y: .25rem;
    --bs-pagination-font-size: .875rem;
    --bs-pagination-border-radius: var(--bs-border-radius-sm)
}

.badge {
    --bs-badge-padding-x: .65em;
    --bs-badge-padding-y: .35em;
    --bs-badge-font-size: .75em;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: var(--bs-border-radius);
    display: inline-block;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    font-size: var(--bs-badge-font-size);
    font-weight: var(--bs-badge-font-weight);
    line-height: 1;
    color: var(--bs-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--bs-badge-border-radius)
}

.badge:empty {
    display: none
}

.btn .badge {
    position: relative;
    top: -1px
}

.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
    --bs-alert-border-radius: var(--bs-border-radius);
    --bs-alert-link-color: inherit;
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius)
}

.alert-heading {
    color: inherit
}

.alert-link {
    font-weight: 700;
    color: var(--bs-alert-link-color)
}

.alert-dismissible {
    padding-right: 3rem
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem
}

.alert-primary {
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
    --bs-alert-link-color: var(--bs-primary-text-emphasis)
}

.alert-secondary {
    --bs-alert-color: var(--bs-secondary-text-emphasis);
    --bs-alert-bg: var(--bs-secondary-bg-subtle);
    --bs-alert-border-color: var(--bs-secondary-border-subtle);
    --bs-alert-link-color: var(--bs-secondary-text-emphasis)
}

.alert-success {
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-border-color: var(--bs-success-border-subtle);
    --bs-alert-link-color: var(--bs-success-text-emphasis)
}

.alert-info {
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
    --bs-alert-link-color: var(--bs-info-text-emphasis)
}

.alert-warning {
    --bs-alert-color: var(--bs-warning-text-emphasis);
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
    --bs-alert-link-color: var(--bs-warning-text-emphasis)
}

.alert-danger {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-link-color: var(--bs-danger-text-emphasis)
}

.alert-light {
    --bs-alert-color: var(--bs-light-text-emphasis);
    --bs-alert-bg: var(--bs-light-bg-subtle);
    --bs-alert-border-color: var(--bs-light-border-subtle);
    --bs-alert-link-color: var(--bs-light-text-emphasis)
}

.alert-dark {
    --bs-alert-color: var(--bs-dark-text-emphasis);
    --bs-alert-bg: var(--bs-dark-bg-subtle);
    --bs-alert-border-color: var(--bs-dark-border-subtle);
    --bs-alert-link-color: var(--bs-dark-text-emphasis)
}

@keyframes progress-bar-stripes {
    0% {
        background-position-x: var(--bs-progress-height)
    }
}

.progress, .progress-stacked {
    --bs-progress-height: 1rem;
    --bs-progress-font-size: .75rem;
    --bs-progress-bg: var(--bs-secondary-bg);
    --bs-progress-border-radius: var(--bs-border-radius);
    --bs-progress-box-shadow: var(--bs-box-shadow-inset);
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: #0d6efd;
    --bs-progress-bar-transition: width .6s ease;
    display: flex;
    height: var(--bs-progress-height);
    overflow: hidden;
    font-size: var(--bs-progress-font-size);
    background-color: var(--bs-progress-bg);
    border-radius: var(--bs-progress-border-radius)
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bs-progress-bar-bg);
    transition: var(--bs-progress-bar-transition)
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none
    }
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: var(--bs-progress-height) var(--bs-progress-height)
}

.progress-stacked > .progress {
    overflow: visible
}

.progress-stacked > .progress > .progress-bar {
    width: 100%
}

.progress-bar-animated {
    animation: 1s linear infinite progress-bar-stripes
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar-animated {
        animation: none
    }
}

.list-group {
    --bs-list-group-color: var(--bs-body-color);
    --bs-list-group-bg: var(--bs-body-bg);
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-list-group-border-width: var(--bs-border-width);
    --bs-list-group-border-radius: var(--bs-border-radius);
    --bs-list-group-item-padding-x: 1rem;
    --bs-list-group-item-padding-y: .5rem;
    --bs-list-group-action-color: var(--bs-secondary-color);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
    --bs-list-group-action-active-color: var(--bs-body-color);
    --bs-list-group-action-active-bg: var(--bs-secondary-bg);
    --bs-list-group-disabled-color: var(--bs-secondary-color);
    --bs-list-group-disabled-bg: var(--bs-body-bg);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #0d6efd;
    --bs-list-group-active-border-color: #0d6efd;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--bs-list-group-border-radius)
}

.list-group-numbered {
    list-style-type: none;
    counter-reset: section
}

.list-group-numbered > .list-group-item:before {
    content: counters(section, ".") ". ";
    counter-increment: section
}

.list-group-item {
    position: relative;
    display: block;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
    color: var(--bs-list-group-color);
    text-decoration: none;
    background-color: var(--bs-list-group-bg);
    border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color)
}

.list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

.list-group-item:last-child {
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit
}

.list-group-item.disabled, .list-group-item:disabled {
    color: var(--bs-list-group-disabled-color);
    pointer-events: none;
    background-color: var(--bs-list-group-disabled-bg)
}

.list-group-item.active {
    z-index: 2;
    color: var(--bs-list-group-active-color);
    background-color: var(--bs-list-group-active-bg);
    border-color: var(--bs-list-group-active-border-color)
}

.list-group-item + .list-group-item {
    border-top-width: 0
}

.list-group-item + .list-group-item.active {
    margin-top: calc(-1 * var(--bs-list-group-border-width));
    border-top-width: var(--bs-list-group-border-width)
}

.list-group-item-action {
    width: 100%;
    color: var(--bs-list-group-action-color);
    text-align: inherit
}

.list-group-item-action:not(.active):focus, .list-group-item-action:not(.active):hover {
    z-index: 1;
    color: var(--bs-list-group-action-hover-color);
    text-decoration: none;
    background-color: var(--bs-list-group-action-hover-bg)
}

.list-group-item-action:not(.active):active {
    color: var(--bs-list-group-action-active-color);
    background-color: var(--bs-list-group-action-active-bg)
}

.list-group-horizontal {
    flex-direction: row
}

.list-group-horizontal > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0
}

.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0
}

.list-group-horizontal > .list-group-item.active {
    margin-top: 0
}

.list-group-horizontal > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0
}

.list-group-horizontal > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width)
}

@media (min-width: 576px) {
    .list-group-horizontal-sm {
        flex-direction: row
    }

    .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: var(--bs-list-group-border-radius);
        border-top-right-radius: 0
    }

    .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
        border-top-right-radius: var(--bs-list-group-border-radius);
        border-bottom-left-radius: 0
    }

    .list-group-horizontal-sm > .list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-sm > .list-group-item + .list-group-item {
        border-top-width: var(--bs-list-group-border-width);
        border-left-width: 0
    }

    .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
        margin-left: calc(-1 * var(--bs-list-group-border-width));
        border-left-width: var(--bs-list-group-border-width)
    }
}

@media (min-width: 768px) {
    .list-group-horizontal-md {
        flex-direction: row
    }

    .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: var(--bs-list-group-border-radius);
        border-top-right-radius: 0
    }

    .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
        border-top-right-radius: var(--bs-list-group-border-radius);
        border-bottom-left-radius: 0
    }

    .list-group-horizontal-md > .list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-md > .list-group-item + .list-group-item {
        border-top-width: var(--bs-list-group-border-width);
        border-left-width: 0
    }

    .list-group-horizontal-md > .list-group-item + .list-group-item.active {
        margin-left: calc(-1 * var(--bs-list-group-border-width));
        border-left-width: var(--bs-list-group-border-width)
    }
}

@media (min-width: 992px) {
    .list-group-horizontal-lg {
        flex-direction: row
    }

    .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: var(--bs-list-group-border-radius);
        border-top-right-radius: 0
    }

    .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
        border-top-right-radius: var(--bs-list-group-border-radius);
        border-bottom-left-radius: 0
    }

    .list-group-horizontal-lg > .list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-lg > .list-group-item + .list-group-item {
        border-top-width: var(--bs-list-group-border-width);
        border-left-width: 0
    }

    .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
        margin-left: calc(-1 * var(--bs-list-group-border-width));
        border-left-width: var(--bs-list-group-border-width)
    }
}

@media (min-width: 1200px) {
    .list-group-horizontal-xl {
        flex-direction: row
    }

    .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: var(--bs-list-group-border-radius);
        border-top-right-radius: 0
    }

    .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
        border-top-right-radius: var(--bs-list-group-border-radius);
        border-bottom-left-radius: 0
    }

    .list-group-horizontal-xl > .list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-xl > .list-group-item + .list-group-item {
        border-top-width: var(--bs-list-group-border-width);
        border-left-width: 0
    }

    .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
        margin-left: calc(-1 * var(--bs-list-group-border-width));
        border-left-width: var(--bs-list-group-border-width)
    }
}

@media (min-width: 1400px) {
    .list-group-horizontal-xxl {
        flex-direction: row
    }

    .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: var(--bs-list-group-border-radius);
        border-top-right-radius: 0
    }

    .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
        border-top-right-radius: var(--bs-list-group-border-radius);
        border-bottom-left-radius: 0
    }

    .list-group-horizontal-xxl > .list-group-item.active {
        margin-top: 0
    }

    .list-group-horizontal-xxl > .list-group-item + .list-group-item {
        border-top-width: var(--bs-list-group-border-width);
        border-left-width: 0
    }

    .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
        margin-left: calc(-1 * var(--bs-list-group-border-width));
        border-left-width: var(--bs-list-group-border-width)
    }
}

.list-group-flush {
    border-radius: 0
}

.list-group-flush > .list-group-item {
    border-width: 0 0 var(--bs-list-group-border-width)
}

.list-group-flush > .list-group-item:last-child {
    border-bottom-width: 0
}

.list-group-item-primary {
    --bs-list-group-color: var(--bs-primary-text-emphasis);
    --bs-list-group-bg: var(--bs-primary-bg-subtle);
    --bs-list-group-border-color: var(--bs-primary-border-subtle);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--bs-primary-border-subtle);
    --bs-list-group-active-color: var(--bs-primary-bg-subtle);
    --bs-list-group-active-bg: var(--bs-primary-text-emphasis);
    --bs-list-group-active-border-color: var(--bs-primary-text-emphasis)
}

.list-group-item-secondary {
    --bs-list-group-color: var(--bs-secondary-text-emphasis);
    --bs-list-group-bg: var(--bs-secondary-bg-subtle);
    --bs-list-group-border-color: var(--bs-secondary-border-subtle);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle);
    --bs-list-group-active-color: var(--bs-secondary-bg-subtle);
    --bs-list-group-active-bg: var(--bs-secondary-text-emphasis);
    --bs-list-group-active-border-color: var(--bs-secondary-text-emphasis)
}

.list-group-item-success {
    --bs-list-group-color: var(--bs-success-text-emphasis);
    --bs-list-group-bg: var(--bs-success-bg-subtle);
    --bs-list-group-border-color: var(--bs-success-border-subtle);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--bs-success-border-subtle);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--bs-success-border-subtle);
    --bs-list-group-active-color: var(--bs-success-bg-subtle);
    --bs-list-group-active-bg: var(--bs-success-text-emphasis);
    --bs-list-group-active-border-color: var(--bs-success-text-emphasis)
}

.list-group-item-info {
    --bs-list-group-color: var(--bs-info-text-emphasis);
    --bs-list-group-bg: var(--bs-info-bg-subtle);
    --bs-list-group-border-color: var(--bs-info-border-subtle);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--bs-info-border-subtle);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--bs-info-border-subtle);
    --bs-list-group-active-color: var(--bs-info-bg-subtle);
    --bs-list-group-active-bg: var(--bs-info-text-emphasis);
    --bs-list-group-active-border-color: var(--bs-info-text-emphasis)
}

.list-group-item-warning {
    --bs-list-group-color: var(--bs-warning-text-emphasis);
    --bs-list-group-bg: var(--bs-warning-bg-subtle);
    --bs-list-group-border-color: var(--bs-warning-border-subtle);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--bs-warning-border-subtle);
    --bs-list-group-active-color: var(--bs-warning-bg-subtle);
    --bs-list-group-active-bg: var(--bs-warning-text-emphasis);
    --bs-list-group-active-border-color: var(--bs-warning-text-emphasis)
}

.list-group-item-danger {
    --bs-list-group-color: var(--bs-danger-text-emphasis);
    --bs-list-group-bg: var(--bs-danger-bg-subtle);
    --bs-list-group-border-color: var(--bs-danger-border-subtle);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--bs-danger-border-subtle);
    --bs-list-group-active-color: var(--bs-danger-bg-subtle);
    --bs-list-group-active-bg: var(--bs-danger-text-emphasis);
    --bs-list-group-active-border-color: var(--bs-danger-text-emphasis)
}

.list-group-item-light {
    --bs-list-group-color: var(--bs-light-text-emphasis);
    --bs-list-group-bg: var(--bs-light-bg-subtle);
    --bs-list-group-border-color: var(--bs-light-border-subtle);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--bs-light-border-subtle);
    --bs-list-group-active-color: var(--bs-light-bg-subtle);
    --bs-list-group-active-bg: var(--bs-light-text-emphasis);
    --bs-list-group-active-border-color: var(--bs-light-text-emphasis)
}

.list-group-item-dark {
    --bs-list-group-color: var(--bs-dark-text-emphasis);
    --bs-list-group-bg: var(--bs-dark-bg-subtle);
    --bs-list-group-border-color: var(--bs-dark-border-subtle);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--bs-dark-border-subtle);
    --bs-list-group-active-color: var(--bs-dark-bg-subtle);
    --bs-list-group-active-bg: var(--bs-dark-text-emphasis);
    --bs-list-group-active-border-color: var(--bs-dark-text-emphasis)
}

.btn-close {
    --bs-btn-close-color: #000;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: .5;
    --bs-btn-close-hover-opacity: .75;
    --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: .25;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em;
    color: var(--bs-btn-close-color);
    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
    filter: var(--bs-btn-close-filter);
    border: 0;
    border-radius: .375rem;
    opacity: var(--bs-btn-close-opacity)
}

.btn-close:hover {
    color: var(--bs-btn-close-color);
    text-decoration: none;
    opacity: var(--bs-btn-close-hover-opacity)
}

.btn-close:focus {
    outline: 0;
    box-shadow: var(--bs-btn-close-focus-shadow);
    opacity: var(--bs-btn-close-focus-opacity)
}

.btn-close.disabled, .btn-close:disabled {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: var(--bs-btn-close-disabled-opacity)
}

.btn-close-white {
    --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%)
}

:root, [data-bs-theme=light] {
    --bs-btn-close-filter:
}

[data-bs-theme=dark] {
    --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%)
}

.toast {
    --bs-toast-zindex: 1090;
    --bs-toast-padding-x: .75rem;
    --bs-toast-padding-y: .5rem;
    --bs-toast-spacing: 1.5rem;
    --bs-toast-max-width: 350px;
    --bs-toast-font-size: .875rem;
    --bs-toast-color: ;
    --bs-toast-bg: rgba(var(--bs-body-bg-rgb), .85);
    --bs-toast-border-width: var(--bs-border-width);
    --bs-toast-border-color: var(--bs-border-color-translucent);
    --bs-toast-border-radius: var(--bs-border-radius);
    --bs-toast-box-shadow: var(--bs-box-shadow);
    --bs-toast-header-color: var(--bs-secondary-color);
    --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), .85);
    --bs-toast-header-border-color: var(--bs-border-color-translucent);
    width: var(--bs-toast-max-width);
    max-width: 100%;
    font-size: var(--bs-toast-font-size);
    color: var(--bs-toast-color);
    pointer-events: auto;
    background-color: var(--bs-toast-bg);
    background-clip: padding-box;
    border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
    box-shadow: var(--bs-toast-box-shadow);
    border-radius: var(--bs-toast-border-radius)
}

.toast.showing {
    opacity: 0
}

.toast:not(.show) {
    display: none
}

.toast-container {
    --bs-toast-zindex: 1090;
    position: absolute;
    z-index: var(--bs-toast-zindex);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    pointer-events: none
}

.toast-container > :not(:last-child) {
    margin-bottom: var(--bs-toast-spacing)
}

.toast-header {
    display: flex;
    align-items: center;
    padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
    color: var(--bs-toast-header-color);
    background-color: var(--bs-toast-header-bg);
    background-clip: padding-box;
    border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
    border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
    border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width))
}

.toast-header .btn-close {
    margin-right: calc(-.5 * var(--bs-toast-padding-x));
    margin-left: var(--bs-toast-padding-x)
}

.toast-body {
    padding: var(--bs-toast-padding-x);
    word-wrap: break-word
}

.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: .5rem;
    --bs-modal-color: var(--bs-body-color);
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: var(--bs-box-shadow-sm);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: .5rem;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-modal-zindex);
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: var(--bs-modal-margin);
    pointer-events: none
}

.modal.fade .modal-dialog {
    transform: translateY(-50px);
    transition: transform .3s ease-out
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none
    }
}

.modal.show .modal-dialog {
    transform: none
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02)
}

.modal-dialog-scrollable {
    height: calc(100% - var(--bs-modal-margin) * 2)
}

.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2)
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0
}

.modal-backdrop {
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: .5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-backdrop-bg)
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.show {
    opacity: var(--bs-backdrop-opacity)
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: var(--bs-modal-header-padding);
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius)
}

.modal-header .btn-close {
    padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
    margin-top: calc(-.5 * var(--bs-modal-header-padding-y));
    margin-right: calc(-.5 * var(--bs-modal-header-padding-x));
    margin-bottom: calc(-.5 * var(--bs-modal-header-padding-y));
    margin-left: auto
}

.modal-title {
    margin-bottom: 0;
    line-height: var(--bs-modal-title-line-height)
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--bs-modal-padding)
}

.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
    background-color: var(--bs-modal-footer-bg);
    border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius)
}

.modal-footer > * {
    margin: calc(var(--bs-modal-footer-gap) * .5)
}

@media (min-width: 576px) {
    .modal {
        --bs-modal-margin: 1.75rem;
        --bs-modal-box-shadow: var(--bs-box-shadow)
    }

    .modal-dialog {
        max-width: var(--bs-modal-width);
        margin-right: auto;
        margin-left: auto
    }

    .modal-sm {
        --bs-modal-width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        --bs-modal-width: 800px
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 1140px
    }
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
}

.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
}

.modal-fullscreen .modal-footer, .modal-fullscreen .modal-header {
    border-radius: 0
}

.modal-fullscreen .modal-body {
    overflow-y: auto
}

@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-sm-down .modal-footer, .modal-fullscreen-sm-down .modal-header {
        border-radius: 0
    }

    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto
    }
}

@media (max-width: 767.98px) {
    .modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-md-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-md-down .modal-footer, .modal-fullscreen-md-down .modal-header {
        border-radius: 0
    }

    .modal-fullscreen-md-down .modal-body {
        overflow-y: auto
    }
}

@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-lg-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-lg-down .modal-footer, .modal-fullscreen-lg-down .modal-header {
        border-radius: 0
    }

    .modal-fullscreen-lg-down .modal-body {
        overflow-y: auto
    }
}

@media (max-width: 1199.98px) {
    .modal-fullscreen-xl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-xl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-xl-down .modal-footer, .modal-fullscreen-xl-down .modal-header {
        border-radius: 0
    }

    .modal-fullscreen-xl-down .modal-body {
        overflow-y: auto
    }
}

@media (max-width: 1399.98px) {
    .modal-fullscreen-xxl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-xxl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-xxl-down .modal-footer, .modal-fullscreen-xxl-down .modal-header {
        border-radius: 0
    }

    .modal-fullscreen-xxl-down .modal-body {
        overflow-y: auto
    }
}

.tooltip {
    --bs-tooltip-zindex: 1080;
    --bs-tooltip-max-width: 200px;
    --bs-tooltip-padding-x: .5rem;
    --bs-tooltip-padding-y: .25rem;
    --bs-tooltip-margin: ;
    --bs-tooltip-font-size: .875rem;
    --bs-tooltip-color: var(--bs-body-bg);
    --bs-tooltip-bg: var(--bs-emphasis-color);
    --bs-tooltip-border-radius: var(--bs-border-radius);
    --bs-tooltip-opacity: .9;
    --bs-tooltip-arrow-width: .8rem;
    --bs-tooltip-arrow-height: .4rem;
    z-index: var(--bs-tooltip-zindex);
    display: block;
    margin: var(--bs-tooltip-margin);
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: var(--bs-tooltip-font-size);
    word-wrap: break-word;
    opacity: 0
}

.tooltip.show {
    opacity: var(--bs-tooltip-opacity)
}

.tooltip .tooltip-arrow {
    display: block;
    width: var(--bs-tooltip-arrow-width);
    height: var(--bs-tooltip-arrow-height)
}

.tooltip .tooltip-arrow:before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow, .bs-tooltip-top .tooltip-arrow {
    bottom: calc(-1 * var(--bs-tooltip-arrow-height))
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow:before, .bs-tooltip-top .tooltip-arrow:before {
    top: -1px;
    border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
    border-top-color: var(--bs-tooltip-bg)
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow, .bs-tooltip-end .tooltip-arrow {
    left: calc(-1 * var(--bs-tooltip-arrow-height));
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width)
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow:before, .bs-tooltip-end .tooltip-arrow:before {
    right: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
    border-right-color: var(--bs-tooltip-bg)
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow, .bs-tooltip-bottom .tooltip-arrow {
    top: calc(-1 * var(--bs-tooltip-arrow-height))
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow:before, .bs-tooltip-bottom .tooltip-arrow:before {
    bottom: -1px;
    border-width: 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
    border-bottom-color: var(--bs-tooltip-bg)
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow, .bs-tooltip-start .tooltip-arrow {
    right: calc(-1 * var(--bs-tooltip-arrow-height));
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width)
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow:before, .bs-tooltip-start .tooltip-arrow:before {
    left: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
    border-left-color: var(--bs-tooltip-bg)
}

.tooltip-inner {
    max-width: var(--bs-tooltip-max-width);
    padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
    color: var(--bs-tooltip-color);
    text-align: center;
    background-color: var(--bs-tooltip-bg);
    border-radius: var(--bs-tooltip-border-radius)
}

.popover {
    --bs-popover-zindex: 1070;
    --bs-popover-max-width: 276px;
    --bs-popover-font-size: .875rem;
    --bs-popover-bg: var(--bs-body-bg);
    --bs-popover-border-width: var(--bs-border-width);
    --bs-popover-border-color: var(--bs-border-color-translucent);
    --bs-popover-border-radius: var(--bs-border-radius-lg);
    --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
    --bs-popover-box-shadow: var(--bs-box-shadow);
    --bs-popover-header-padding-x: 1rem;
    --bs-popover-header-padding-y: .5rem;
    --bs-popover-header-font-size: 1rem;
    --bs-popover-header-color: inherit;
    --bs-popover-header-bg: var(--bs-secondary-bg);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
    --bs-popover-body-color: var(--bs-body-color);
    --bs-popover-arrow-width: 1rem;
    --bs-popover-arrow-height: .5rem;
    --bs-popover-arrow-border: var(--bs-popover-border-color);
    z-index: var(--bs-popover-zindex);
    display: block;
    max-width: var(--bs-popover-max-width);
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: var(--bs-popover-font-size);
    word-wrap: break-word;
    background-color: var(--bs-popover-bg);
    background-clip: padding-box;
    border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
    border-radius: var(--bs-popover-border-radius)
}

.popover .popover-arrow {
    display: block;
    width: var(--bs-popover-arrow-width);
    height: var(--bs-popover-arrow-height)
}

.popover .popover-arrow:after, .popover .popover-arrow:before {
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 0
}

.bs-popover-auto[data-popper-placement^=top] > .popover-arrow, .bs-popover-top > .popover-arrow {
    bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))
}

.bs-popover-auto[data-popper-placement^=top] > .popover-arrow:after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow:before, .bs-popover-top > .popover-arrow:after, .bs-popover-top > .popover-arrow:before {
    border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0
}

.bs-popover-auto[data-popper-placement^=top] > .popover-arrow:before, .bs-popover-top > .popover-arrow:before {
    bottom: 0;
    border-top-color: var(--bs-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=top] > .popover-arrow:after, .bs-popover-top > .popover-arrow:after {
    bottom: var(--bs-popover-border-width);
    border-top-color: var(--bs-popover-bg)
}

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow, .bs-popover-end > .popover-arrow {
    left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
    width: var(--bs-popover-arrow-height);
    height: var(--bs-popover-arrow-width)
}

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow:after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow:before, .bs-popover-end > .popover-arrow:after, .bs-popover-end > .popover-arrow:before {
    border-width: calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0
}

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow:before, .bs-popover-end > .popover-arrow:before {
    left: 0;
    border-right-color: var(--bs-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow:after, .bs-popover-end > .popover-arrow:after {
    left: var(--bs-popover-border-width);
    border-right-color: var(--bs-popover-bg)
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow, .bs-popover-bottom > .popover-arrow {
    top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow:after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow:before, .bs-popover-bottom > .popover-arrow:after, .bs-popover-bottom > .popover-arrow:before {
    border-width: 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow:before, .bs-popover-bottom > .popover-arrow:before {
    top: 0;
    border-bottom-color: var(--bs-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow:after, .bs-popover-bottom > .popover-arrow:after {
    top: var(--bs-popover-border-width);
    border-bottom-color: var(--bs-popover-bg)
}

.bs-popover-auto[data-popper-placement^=bottom] .popover-header:before, .bs-popover-bottom .popover-header:before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: var(--bs-popover-arrow-width);
    margin-left: calc(-.5 * var(--bs-popover-arrow-width));
    content: "";
    border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg)
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow, .bs-popover-start > .popover-arrow {
    right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
    width: var(--bs-popover-arrow-height);
    height: var(--bs-popover-arrow-width)
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow:after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow:before, .bs-popover-start > .popover-arrow:after, .bs-popover-start > .popover-arrow:before {
    border-width: calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow:before, .bs-popover-start > .popover-arrow:before {
    right: 0;
    border-left-color: var(--bs-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow:after, .bs-popover-start > .popover-arrow:after {
    right: var(--bs-popover-border-width);
    border-left-color: var(--bs-popover-bg)
}

.popover-header {
    padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
    margin-bottom: 0;
    font-size: var(--bs-popover-header-font-size);
    color: var(--bs-popover-header-color);
    background-color: var(--bs-popover-header-bg);
    border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
    border-top-left-radius: var(--bs-popover-inner-border-radius);
    border-top-right-radius: var(--bs-popover-inner-border-radius)
}

.popover-header:empty {
    display: none
}

.popover-body {
    padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
    color: var(--bs-popover-body-color)
}

.carousel {
    position: relative
}

.carousel.pointer-event {
    touch-action: pan-y
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden
}

.carousel-inner:after {
    display: block;
    clear: both;
    content: ""
}

.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .carousel-item {
        transition: none
    }
}

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: block
}

.active.carousel-item-end, .carousel-item-next:not(.carousel-item-start) {
    transform: translate(100%)
}

.active.carousel-item-start, .carousel-item-prev:not(.carousel-item-end) {
    transform: translate(-100%)
}

.carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transform: none
}

.carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end, .carousel-fade .carousel-item.active {
    z-index: 1;
    opacity: 1
}

.carousel-fade .active.carousel-item-end, .carousel-fade .active.carousel-item-start {
    z-index: 0;
    opacity: 0;
    transition: opacity 0s .6s
}

@media (prefers-reduced-motion: reduce) {
    .carousel-fade .active.carousel-item-end, .carousel-fade .active.carousel-item-start {
        transition: none
    }
}

.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    filter: var(--bs-carousel-control-icon-filter);
    border: 0;
    opacity: .5;
    transition: opacity .15s ease
}

@media (prefers-reduced-motion: reduce) {
    .carousel-control-next, .carousel-control-prev {
        transition: none
    }
}

.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9
}

.carousel-control-prev {
    left: 0
}

.carousel-control-next {
    right: 0
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e")
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 15%;
    margin-bottom: 1rem;
    margin-left: 15%
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: var(--bs-carousel-indicator-active-bg);
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease
}

@media (prefers-reduced-motion: reduce) {
    .carousel-indicators [data-bs-target] {
        transition: none
    }
}

.carousel-indicators .active {
    opacity: 1
}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 1.25rem;
    left: 15%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: var(--bs-carousel-caption-color);
    text-align: center
}

.carousel-dark {
    --bs-carousel-indicator-active-bg: #000;
    --bs-carousel-caption-color: #000;
    --bs-carousel-control-icon-filter: invert(1) grayscale(100)
}

:root, [data-bs-theme=light] {
    --bs-carousel-indicator-active-bg: #fff;
    --bs-carousel-caption-color: #fff;
    --bs-carousel-control-icon-filter:
}

[data-bs-theme=dark] {
    --bs-carousel-indicator-active-bg: #000;
    --bs-carousel-caption-color: #000;
    --bs-carousel-control-icon-filter: invert(1) grayscale(100)
}

.spinner-border, .spinner-grow {
    display: inline-block;
    flex-shrink: 0;
    width: var(--bs-spinner-width);
    height: var(--bs-spinner-height);
    vertical-align: var(--bs-spinner-vertical-align);
    border-radius: 50%;
    animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg)
    }
}

.spinner-border {
    --bs-spinner-width: 2rem;
    --bs-spinner-height: 2rem;
    --bs-spinner-vertical-align: -.125em;
    --bs-spinner-border-width: .25em;
    --bs-spinner-animation-speed: .75s;
    --bs-spinner-animation-name: spinner-border;
    border: var(--bs-spinner-border-width) solid currentcolor;
    border-right-color: transparent
}

.spinner-border-sm {
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem;
    --bs-spinner-border-width: .2em
}

@keyframes spinner-grow {
    0% {
        transform: scale(0)
    }
    50% {
        opacity: 1;
        transform: none
    }
}

.spinner-grow {
    --bs-spinner-width: 2rem;
    --bs-spinner-height: 2rem;
    --bs-spinner-vertical-align: -.125em;
    --bs-spinner-animation-speed: .75s;
    --bs-spinner-animation-name: spinner-grow;
    background-color: currentcolor;
    opacity: 0
}

.spinner-grow-sm {
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem
}

@media (prefers-reduced-motion: reduce) {
    .spinner-border, .spinner-grow {
        --bs-spinner-animation-speed: 1.5s
    }
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
    --bs-offcanvas-zindex: 1045;
    --bs-offcanvas-width: 400px;
    --bs-offcanvas-height: 30vh;
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-offcanvas-color: var(--bs-body-color);
    --bs-offcanvas-bg: var(--bs-body-bg);
    --bs-offcanvas-border-width: var(--bs-border-width);
    --bs-offcanvas-border-color: var(--bs-border-color-translucent);
    --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
    --bs-offcanvas-transition: transform .3s ease-in-out;
    --bs-offcanvas-title-line-height: 1.5
}

@media (max-width: 575.98px) {
    .offcanvas-sm {
        position: fixed;
        bottom: 0;
        z-index: var(--bs-offcanvas-zindex);
        display: flex;
        flex-direction: column;
        max-width: 100%;
        color: var(--bs-offcanvas-color);
        visibility: hidden;
        background-color: var(--bs-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        transition: var(--bs-offcanvas-transition)
    }
}

@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
    .offcanvas-sm {
        transition: none
    }
}

@media (max-width: 575.98px) {
    .offcanvas-sm.offcanvas-start {
        top: 0;
        left: 0;
        width: var(--bs-offcanvas-width);
        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translate(-100%)
    }

    .offcanvas-sm.offcanvas-end {
        top: 0;
        right: 0;
        width: var(--bs-offcanvas-width);
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translate(100%)
    }

    .offcanvas-sm.offcanvas-top {
        top: 0;
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(-100%)
    }

    .offcanvas-sm.offcanvas-bottom {
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(100%)
    }

    .offcanvas-sm.show:not(.hiding), .offcanvas-sm.showing {
        transform: none
    }

    .offcanvas-sm.hiding, .offcanvas-sm.show, .offcanvas-sm.showing {
        visibility: visible
    }
}

@media (min-width: 576px) {
    .offcanvas-sm {
        --bs-offcanvas-height: auto;
        --bs-offcanvas-border-width: 0;
        background-color: transparent !important
    }

    .offcanvas-sm .offcanvas-header {
        display: none
    }

    .offcanvas-sm .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        background-color: transparent !important
    }
}

@media (max-width: 767.98px) {
    .offcanvas-md {
        position: fixed;
        bottom: 0;
        z-index: var(--bs-offcanvas-zindex);
        display: flex;
        flex-direction: column;
        max-width: 100%;
        color: var(--bs-offcanvas-color);
        visibility: hidden;
        background-color: var(--bs-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        transition: var(--bs-offcanvas-transition)
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .offcanvas-md {
        transition: none
    }
}

@media (max-width: 767.98px) {
    .offcanvas-md.offcanvas-start {
        top: 0;
        left: 0;
        width: var(--bs-offcanvas-width);
        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translate(-100%)
    }

    .offcanvas-md.offcanvas-end {
        top: 0;
        right: 0;
        width: var(--bs-offcanvas-width);
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translate(100%)
    }

    .offcanvas-md.offcanvas-top {
        top: 0;
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(-100%)
    }

    .offcanvas-md.offcanvas-bottom {
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(100%)
    }

    .offcanvas-md.show:not(.hiding), .offcanvas-md.showing {
        transform: none
    }

    .offcanvas-md.hiding, .offcanvas-md.show, .offcanvas-md.showing {
        visibility: visible
    }
}

@media (min-width: 768px) {
    .offcanvas-md {
        --bs-offcanvas-height: auto;
        --bs-offcanvas-border-width: 0;
        background-color: transparent !important
    }

    .offcanvas-md .offcanvas-header {
        display: none
    }

    .offcanvas-md .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        background-color: transparent !important
    }
}

@media (max-width: 991.98px) {
    .offcanvas-lg {
        position: fixed;
        bottom: 0;
        z-index: var(--bs-offcanvas-zindex);
        display: flex;
        flex-direction: column;
        max-width: 100%;
        color: var(--bs-offcanvas-color);
        visibility: hidden;
        background-color: var(--bs-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        transition: var(--bs-offcanvas-transition)
    }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .offcanvas-lg {
        transition: none
    }
}

@media (max-width: 991.98px) {
    .offcanvas-lg.offcanvas-start {
        top: 0;
        left: 0;
        width: var(--bs-offcanvas-width);
        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translate(-100%)
    }

    .offcanvas-lg.offcanvas-end {
        top: 0;
        right: 0;
        width: var(--bs-offcanvas-width);
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translate(100%)
    }

    .offcanvas-lg.offcanvas-top {
        top: 0;
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(-100%)
    }

    .offcanvas-lg.offcanvas-bottom {
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(100%)
    }

    .offcanvas-lg.show:not(.hiding), .offcanvas-lg.showing {
        transform: none
    }

    .offcanvas-lg.hiding, .offcanvas-lg.show, .offcanvas-lg.showing {
        visibility: visible
    }
}

@media (min-width: 992px) {
    .offcanvas-lg {
        --bs-offcanvas-height: auto;
        --bs-offcanvas-border-width: 0;
        background-color: transparent !important
    }

    .offcanvas-lg .offcanvas-header {
        display: none
    }

    .offcanvas-lg .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        background-color: transparent !important
    }
}

@media (max-width: 1199.98px) {
    .offcanvas-xl {
        position: fixed;
        bottom: 0;
        z-index: var(--bs-offcanvas-zindex);
        display: flex;
        flex-direction: column;
        max-width: 100%;
        color: var(--bs-offcanvas-color);
        visibility: hidden;
        background-color: var(--bs-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        transition: var(--bs-offcanvas-transition)
    }
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
    .offcanvas-xl {
        transition: none
    }
}

@media (max-width: 1199.98px) {
    .offcanvas-xl.offcanvas-start {
        top: 0;
        left: 0;
        width: var(--bs-offcanvas-width);
        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translate(-100%)
    }

    .offcanvas-xl.offcanvas-end {
        top: 0;
        right: 0;
        width: var(--bs-offcanvas-width);
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translate(100%)
    }

    .offcanvas-xl.offcanvas-top {
        top: 0;
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(-100%)
    }

    .offcanvas-xl.offcanvas-bottom {
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(100%)
    }

    .offcanvas-xl.show:not(.hiding), .offcanvas-xl.showing {
        transform: none
    }

    .offcanvas-xl.hiding, .offcanvas-xl.show, .offcanvas-xl.showing {
        visibility: visible
    }
}

@media (min-width: 1200px) {
    .offcanvas-xl {
        --bs-offcanvas-height: auto;
        --bs-offcanvas-border-width: 0;
        background-color: transparent !important
    }

    .offcanvas-xl .offcanvas-header {
        display: none
    }

    .offcanvas-xl .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        background-color: transparent !important
    }
}

@media (max-width: 1399.98px) {
    .offcanvas-xxl {
        position: fixed;
        bottom: 0;
        z-index: var(--bs-offcanvas-zindex);
        display: flex;
        flex-direction: column;
        max-width: 100%;
        color: var(--bs-offcanvas-color);
        visibility: hidden;
        background-color: var(--bs-offcanvas-bg);
        background-clip: padding-box;
        outline: 0;
        transition: var(--bs-offcanvas-transition)
    }
}

@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
    .offcanvas-xxl {
        transition: none
    }
}

@media (max-width: 1399.98px) {
    .offcanvas-xxl.offcanvas-start {
        top: 0;
        left: 0;
        width: var(--bs-offcanvas-width);
        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translate(-100%)
    }

    .offcanvas-xxl.offcanvas-end {
        top: 0;
        right: 0;
        width: var(--bs-offcanvas-width);
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translate(100%)
    }

    .offcanvas-xxl.offcanvas-top {
        top: 0;
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(-100%)
    }

    .offcanvas-xxl.offcanvas-bottom {
        right: 0;
        left: 0;
        height: var(--bs-offcanvas-height);
        max-height: 100%;
        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(100%)
    }

    .offcanvas-xxl.show:not(.hiding), .offcanvas-xxl.showing {
        transform: none
    }

    .offcanvas-xxl.hiding, .offcanvas-xxl.show, .offcanvas-xxl.showing {
        visibility: visible
    }
}

@media (min-width: 1400px) {
    .offcanvas-xxl {
        --bs-offcanvas-height: auto;
        --bs-offcanvas-border-width: 0;
        background-color: transparent !important
    }

    .offcanvas-xxl .offcanvas-header {
        display: none
    }

    .offcanvas-xxl .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        background-color: transparent !important
    }
}

.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition)
}

@media (prefers-reduced-motion: reduce) {
    .offcanvas {
        transition: none
    }
}

.offcanvas.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translate(-100%)
}

.offcanvas.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translate(100%)
}

.offcanvas.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%)
}

.offcanvas.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%)
}

.offcanvas.show:not(.hiding), .offcanvas.showing {
    transform: none
}

.offcanvas.hiding, .offcanvas.show, .offcanvas.showing {
    visibility: visible
}

.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000
}

.offcanvas-backdrop.fade {
    opacity: 0
}

.offcanvas-backdrop.show {
    opacity: .5
}

.offcanvas-header {
    display: flex;
    align-items: center;
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)
}

.offcanvas-header .btn-close {
    padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);
    margin-top: calc(-.5 * var(--bs-offcanvas-padding-y));
    margin-right: calc(-.5 * var(--bs-offcanvas-padding-x));
    margin-bottom: calc(-.5 * var(--bs-offcanvas-padding-y));
    margin-left: auto
}

.offcanvas-title {
    margin-bottom: 0;
    line-height: var(--bs-offcanvas-title-line-height)
}

.offcanvas-body {
    flex-grow: 1;
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
    overflow-y: auto
}

.placeholder {
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentcolor;
    opacity: .5
}

.placeholder.btn:before {
    display: inline-block;
    content: ""
}

.placeholder-xs {
    min-height: .6em
}

.placeholder-sm {
    min-height: .8em
}

.placeholder-lg {
    min-height: 1.2em
}

.placeholder-glow .placeholder {
    animation: placeholder-glow 2s ease-in-out infinite
}

@keyframes placeholder-glow {
    50% {
        opacity: .2
    }
}

.placeholder-wave {
    -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, .8) 75%, #000 95%);
    mask-image: linear-gradient(130deg, #000 55%, #000c, #000 95%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    animation: placeholder-wave 2s linear infinite
}

@keyframes placeholder-wave {
    to {
        -webkit-mask-position: -200% 0%;
        mask-position: -200% 0%
    }
}

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

.text-bg-primary {
    color: #fff !important;
    background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-secondary {
    color: #fff !important;
    background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-success {
    color: #fff !important;
    background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-info {
    color: #000 !important;
    background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-warning {
    color: #000 !important;
    background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-danger {
    color: #fff !important;
    background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-light {
    color: #000 !important;
    background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important
}

.text-bg-dark {
    color: #fff !important;
    background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important
}

.link-primary {
    color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important
}

.link-primary:focus, .link-primary:hover {
    color: RGBA(10, 88, 202, var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(10, 88, 202, var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(10, 88, 202, var(--bs-link-underline-opacity, 1)) !important
}

.link-secondary {
    color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important
}

.link-secondary:focus, .link-secondary:hover {
    color: RGBA(86, 94, 100, var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important
}

.link-success {
    color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important
}

.link-success:focus, .link-success:hover {
    color: RGBA(20, 108, 67, var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important
}

.link-info {
    color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important
}

.link-info:focus, .link-info:hover {
    color: RGBA(61, 213, 243, var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important
}

.link-warning {
    color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important
}

.link-warning:focus, .link-warning:hover {
    color: RGBA(255, 205, 57, var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important
}

.link-danger {
    color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important
}

.link-danger:focus, .link-danger:hover {
    color: RGBA(176, 42, 55, var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important
}

.link-light {
    color: RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important
}

.link-light:focus, .link-light:hover {
    color: RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important
}

.link-dark {
    color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important
}

.link-dark:focus, .link-dark:hover {
    color: RGBA(26, 30, 33, var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important
}

.link-body-emphasis {
    color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important
}

.link-body-emphasis:focus, .link-body-emphasis:hover {
    color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, .75)) !important;
    -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, .75)) !important;
    text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, .75)) !important
}

.focus-ring:focus {
    outline: 0;
    box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)
}

.icon-link {
    display: inline-flex;
    gap: .375rem;
    align-items: center;
    -webkit-text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, .5));
    text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, .5));
    text-underline-offset: .25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.icon-link > .bi {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    fill: currentcolor;
    transition: .2s ease-in-out transform
}

@media (prefers-reduced-motion: reduce) {
    .icon-link > .bi {
        transition: none
    }
}

.icon-link-hover:focus-visible > .bi, .icon-link-hover:hover > .bi {
    transform: var(--bs-icon-link-transform, translate3d(.25em, 0, 0))
}

.ratio {
    position: relative;
    width: 100%
}

.ratio:before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: ""
}

.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ratio-1x1 {
    --bs-aspect-ratio: 100%
}

.ratio-4x3 {
    --bs-aspect-ratio: 75%
}

.ratio-16x9 {
    --bs-aspect-ratio: 56.25%
}

.ratio-21x9 {
    --bs-aspect-ratio: 42.8571428571%
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030
}

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020
}

.sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020
}

@media (min-width: 576px) {
    .sticky-sm-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020
    }

    .sticky-sm-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}

@media (min-width: 768px) {
    .sticky-md-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020
    }

    .sticky-md-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}

@media (min-width: 992px) {
    .sticky-lg-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020
    }

    .sticky-lg-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}

@media (min-width: 1200px) {
    .sticky-xl-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020
    }

    .sticky-xl-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}

@media (min-width: 1400px) {
    .sticky-xxl-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020
    }

    .sticky-xxl-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 1020
    }
}

.hstack {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch
}

.vstack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch
}

.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption), .visually-hidden:not(caption) {
    position: absolute !important
}

.visually-hidden *, .visually-hidden-focusable:not(:focus):not(:focus-within) * {
    overflow: hidden !important
}

.stretched-link:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: ""
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.vr {
    display: inline-block;
    align-self: stretch;
    width: var(--bs-border-width);
    min-height: 1em;
    background-color: currentcolor;
    opacity: .25
}

.align-baseline {
    vertical-align: baseline !important
}

.align-top {
    vertical-align: top !important
}

.align-middle {
    vertical-align: middle !important
}

.align-bottom {
    vertical-align: bottom !important
}

.align-text-bottom {
    vertical-align: text-bottom !important
}

.align-text-top {
    vertical-align: text-top !important
}

.float-start {
    float: left !important
}

.float-end {
    float: right !important
}

.float-none {
    float: none !important
}

.object-fit-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important
}

.object-fit-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important
}

.object-fit-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important
}

.object-fit-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important
}

.object-fit-none {
    -o-object-fit: none !important;
    object-fit: none !important
}

.opacity-0 {
    opacity: 0 !important
}

.opacity-25 {
    opacity: .25 !important
}

.opacity-50 {
    opacity: .5 !important
}

.opacity-75 {
    opacity: .75 !important
}

.opacity-100 {
    opacity: 1 !important
}

.overflow-auto {
    overflow: auto !important
}

.overflow-hidden {
    overflow: hidden !important
}

.overflow-visible {
    overflow: visible !important
}

.overflow-scroll {
    overflow: scroll !important
}

.overflow-x-auto {
    overflow-x: auto !important
}

.overflow-x-hidden {
    overflow-x: hidden !important
}

.overflow-x-visible {
    overflow-x: visible !important
}

.overflow-x-scroll {
    overflow-x: scroll !important
}

.overflow-y-auto {
    overflow-y: auto !important
}

.overflow-y-hidden {
    overflow-y: hidden !important
}

.overflow-y-visible {
    overflow-y: visible !important
}

.overflow-y-scroll {
    overflow-y: scroll !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-block {
    display: block !important
}

.d-grid {
    display: grid !important
}

.d-inline-grid {
    display: inline-grid !important
}

.d-table {
    display: table !important
}

.d-table-row {
    display: table-row !important
}

.d-table-cell {
    display: table-cell !important
}

.d-flex {
    display: flex !important
}

.d-inline-flex {
    display: inline-flex !important
}

.d-none {
    display: none !important
}

.shadow {
    box-shadow: var(--bs-box-shadow) !important
}

.shadow-sm {
    box-shadow: var(--bs-box-shadow-sm) !important
}

.shadow-lg {
    box-shadow: var(--bs-box-shadow-lg) !important
}

.shadow-none {
    box-shadow: none !important
}

.focus-ring-primary {
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity))
}

.focus-ring-secondary {
    --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity))
}

.focus-ring-success {
    --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity))
}

.focus-ring-info {
    --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity))
}

.focus-ring-warning {
    --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity))
}

.focus-ring-danger {
    --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity))
}

.focus-ring-light {
    --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity))
}

.focus-ring-dark {
    --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity))
}

.position-static {
    position: static !important
}

.position-relative {
    position: relative !important
}

.position-absolute {
    position: absolute !important
}

.position-fixed {
    position: fixed !important
}

.position-sticky {
    position: -webkit-sticky !important;
    position: sticky !important
}

.top-0 {
    top: 0 !important
}

.top-50 {
    top: 50% !important
}

.top-100 {
    top: 100% !important
}

.bottom-0 {
    bottom: 0 !important
}

.bottom-50 {
    bottom: 50% !important
}

.bottom-100 {
    bottom: 100% !important
}

.start-0 {
    left: 0 !important
}

.start-50 {
    left: 50% !important
}

.start-100 {
    left: 100% !important
}

.end-0 {
    right: 0 !important
}

.end-50 {
    right: 50% !important
}

.end-100 {
    right: 100% !important
}

.translate-middle {
    transform: translate(-50%, -50%) !important
}

.translate-middle-x {
    transform: translate(-50%) !important
}

.translate-middle-y {
    transform: translateY(-50%) !important
}

.border {
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
}

.border-0 {
    border: 0 !important
}

.border-top {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
}

.border-top-0 {
    border-top: 0 !important
}

.border-end {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
}

.border-end-0 {
    border-right: 0 !important
}

.border-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
}

.border-bottom-0 {
    border-bottom: 0 !important
}

.border-start {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important
}

.border-start-0 {
    border-left: 0 !important
}

.border-primary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important
}

.border-secondary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important
}

.border-success {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important
}

.border-info {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important
}

.border-warning {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important
}

.border-danger {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important
}

.border-light {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important
}

.border-dark {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important
}

.border-black {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important
}

.border-white {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important
}

.border-primary-subtle {
    border-color: var(--bs-primary-border-subtle) !important
}

.border-secondary-subtle {
    border-color: var(--bs-secondary-border-subtle) !important
}

.border-success-subtle {
    border-color: var(--bs-success-border-subtle) !important
}

.border-info-subtle {
    border-color: var(--bs-info-border-subtle) !important
}

.border-warning-subtle {
    border-color: var(--bs-warning-border-subtle) !important
}

.border-danger-subtle {
    border-color: var(--bs-danger-border-subtle) !important
}

.border-light-subtle {
    border-color: var(--bs-light-border-subtle) !important
}

.border-dark-subtle {
    border-color: var(--bs-dark-border-subtle) !important
}

.border-1 {
    border-width: 1px !important
}

.border-2 {
    border-width: 2px !important
}

.border-3 {
    border-width: 3px !important
}

.border-4 {
    border-width: 4px !important
}

.border-5 {
    border-width: 5px !important
}

.border-opacity-10 {
    --bs-border-opacity: .1
}

.border-opacity-25 {
    --bs-border-opacity: .25
}

.border-opacity-50 {
    --bs-border-opacity: .5
}

.border-opacity-75 {
    --bs-border-opacity: .75
}

.border-opacity-100 {
    --bs-border-opacity: 1
}

.w-25 {
    width: 25% !important
}

.w-50 {
    width: 50% !important
}

.w-75 {
    width: 75% !important
}

.w-100 {
    width: 100% !important
}

.w-auto {
    width: auto !important
}

.mw-100 {
    max-width: 100% !important
}

.vw-100 {
    width: 100vw !important
}

.min-vw-100 {
    min-width: 100vw !important
}

.h-25 {
    height: 25% !important
}

.h-50 {
    height: 50% !important
}

.h-75 {
    height: 75% !important
}

.h-100 {
    height: 100% !important
}

.h-auto {
    height: auto !important
}

.mh-100 {
    max-height: 100% !important
}

.vh-100 {
    height: 100vh !important
}

.min-vh-100 {
    min-height: 100vh !important
}

.flex-fill {
    flex: 1 1 auto !important
}

.flex-row {
    flex-direction: row !important
}

.flex-column {
    flex-direction: column !important
}

.flex-row-reverse {
    flex-direction: row-reverse !important
}

.flex-column-reverse {
    flex-direction: column-reverse !important
}

.flex-grow-0 {
    flex-grow: 0 !important
}

.flex-grow-1 {
    flex-grow: 1 !important
}

.flex-shrink-0 {
    flex-shrink: 0 !important
}

.flex-shrink-1 {
    flex-shrink: 1 !important
}

.flex-wrap {
    flex-wrap: wrap !important
}

.flex-nowrap {
    flex-wrap: nowrap !important
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important
}

.justify-content-start {
    justify-content: flex-start !important
}

.justify-content-end {
    justify-content: flex-end !important
}

.justify-content-center {
    justify-content: center !important
}

.justify-content-between {
    justify-content: space-between !important
}

.justify-content-around {
    justify-content: space-around !important
}

.justify-content-evenly {
    justify-content: space-evenly !important
}

.align-items-start {
    align-items: flex-start !important
}

.align-items-end {
    align-items: flex-end !important
}

.align-items-center {
    align-items: center !important
}

.align-items-baseline {
    align-items: baseline !important
}

.align-items-stretch {
    align-items: stretch !important
}

.align-content-start {
    align-content: flex-start !important
}

.align-content-end {
    align-content: flex-end !important
}

.align-content-center {
    align-content: center !important
}

.align-content-between {
    align-content: space-between !important
}

.align-content-around {
    align-content: space-around !important
}

.align-content-stretch {
    align-content: stretch !important
}

.align-self-auto {
    align-self: auto !important
}

.align-self-start {
    align-self: flex-start !important
}

.align-self-end {
    align-self: flex-end !important
}

.align-self-center {
    align-self: center !important
}

.align-self-baseline {
    align-self: baseline !important
}

.align-self-stretch {
    align-self: stretch !important
}

.order-first {
    order: -1 !important
}

.order-0 {
    order: 0 !important
}

.order-1 {
    order: 1 !important
}

.order-2 {
    order: 2 !important
}

.order-3 {
    order: 3 !important
}

.order-4 {
    order: 4 !important
}

.order-5 {
    order: 5 !important
}

.order-last {
    order: 6 !important
}

.m-0 {
    margin: 0 !important
}

.m-1 {
    margin: .25rem !important
}

.m-2 {
    margin: .5rem !important
}

.m-3 {
    margin: 1rem !important
}

.m-4 {
    margin: 1.5rem !important
}

.m-5 {
    margin: 3rem !important
}

.m-auto {
    margin: auto !important
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important
}

.mx-1 {
    margin-right: .25rem !important;
    margin-left: .25rem !important
}

.mx-2 {
    margin-right: .5rem !important;
    margin-left: .5rem !important
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important
}

.mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important
}

.mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important
}

.my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important
}

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

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.mt-4 {
    margin-top: 1.5rem !important
}

.mt-5 {
    margin-top: 3rem !important
}

.mt-auto {
    margin-top: auto !important
}

.me-0 {
    margin-right: 0 !important
}

.me-1 {
    margin-right: .25rem !important
}

.me-2 {
    margin-right: .5rem !important
}

.me-3 {
    margin-right: 1rem !important
}

.me-4 {
    margin-right: 1.5rem !important
}

.me-5 {
    margin-right: 3rem !important
}

.me-auto {
    margin-right: auto !important
}

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

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.mb-4 {
    margin-bottom: 1.5rem !important
}

.mb-5 {
    margin-bottom: 3rem !important
}

.mb-auto {
    margin-bottom: auto !important
}

.ms-0 {
    margin-left: 0 !important
}

.ms-1 {
    margin-left: .25rem !important
}

.ms-2 {
    margin-left: .5rem !important
}

.ms-3 {
    margin-left: 1rem !important
}

.ms-4 {
    margin-left: 1.5rem !important
}

.ms-5 {
    margin-left: 3rem !important
}

.ms-auto {
    margin-left: auto !important
}

.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: .25rem !important
}

.p-2 {
    padding: .5rem !important
}

.p-3 {
    padding: 1rem !important
}

.p-4 {
    padding: 1.5rem !important
}

.p-5 {
    padding: 3rem !important
}

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

.px-1 {
    padding-right: .25rem !important;
    padding-left: .25rem !important
}

.px-2 {
    padding-right: .5rem !important;
    padding-left: .5rem !important
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important
}

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

.pt-1 {
    padding-top: .25rem !important
}

.pt-2 {
    padding-top: .5rem !important
}

.pt-3 {
    padding-top: 1rem !important
}

.pt-4 {
    padding-top: 1.5rem !important
}

.pt-5 {
    padding-top: 3rem !important
}

.pe-0 {
    padding-right: 0 !important
}

.pe-1 {
    padding-right: .25rem !important
}

.pe-2 {
    padding-right: .5rem !important
}

.pe-3 {
    padding-right: 1rem !important
}

.pe-4 {
    padding-right: 1.5rem !important
}

.pe-5 {
    padding-right: 3rem !important
}

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

.pb-1 {
    padding-bottom: .25rem !important
}

.pb-2 {
    padding-bottom: .5rem !important
}

.pb-3 {
    padding-bottom: 1rem !important
}

.pb-4 {
    padding-bottom: 1.5rem !important
}

.pb-5 {
    padding-bottom: 3rem !important
}

.ps-0 {
    padding-left: 0 !important
}

.ps-1 {
    padding-left: .25rem !important
}

.ps-2 {
    padding-left: .5rem !important
}

.ps-3 {
    padding-left: 1rem !important
}

.ps-4 {
    padding-left: 1.5rem !important
}

.ps-5 {
    padding-left: 3rem !important
}

.gap-0 {
    gap: 0 !important
}

.gap-1 {
    gap: .25rem !important
}

.gap-2 {
    gap: .5rem !important
}

.gap-3 {
    gap: 1rem !important
}

.gap-4 {
    gap: 1.5rem !important
}

.gap-5 {
    gap: 3rem !important
}

.row-gap-0 {
    row-gap: 0 !important
}

.row-gap-1 {
    row-gap: .25rem !important
}

.row-gap-2 {
    row-gap: .5rem !important
}

.row-gap-3 {
    row-gap: 1rem !important
}

.row-gap-4 {
    row-gap: 1.5rem !important
}

.row-gap-5 {
    row-gap: 3rem !important
}

.column-gap-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important
}

.column-gap-1 {
    -moz-column-gap: .25rem !important;
    column-gap: .25rem !important
}

.column-gap-2 {
    -moz-column-gap: .5rem !important;
    column-gap: .5rem !important
}

.column-gap-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important
}

.column-gap-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important
}

.column-gap-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important
}

.font-monospace {
    font-family: var(--bs-font-monospace) !important
}

.fs-1 {
    font-size: calc(1.375rem + 1.5vw) !important
}

.fs-2 {
    font-size: calc(1.325rem + .9vw) !important
}

.fs-3 {
    font-size: calc(1.3rem + .6vw) !important
}

.fs-4 {
    font-size: calc(1.275rem + .3vw) !important
}

.fs-5 {
    font-size: 1.25rem !important
}

.fs-6 {
    font-size: 1rem !important
}

.fst-italic {
    font-style: italic !important
}

.fst-normal {
    font-style: normal !important
}

.fw-lighter {
    font-weight: lighter !important
}

.fw-light {
    font-weight: 300 !important
}

.fw-normal {
    font-weight: 400 !important
}

.fw-medium {
    font-weight: 500 !important
}

.fw-semibold {
    font-weight: 600 !important
}

.fw-bold {
    font-weight: 700 !important
}

.fw-bolder {
    font-weight: bolder !important
}

.lh-1 {
    line-height: 1 !important
}

.lh-sm {
    line-height: 1.25 !important
}

.lh-base {
    line-height: 1.5 !important
}

.lh-lg {
    line-height: 2 !important
}

.text-start {
    text-align: left !important
}

.text-end {
    text-align: right !important
}

.text-center {
    text-align: center !important
}

.text-decoration-none {
    text-decoration: none !important
}

.text-decoration-underline {
    text-decoration: underline !important
}

.text-decoration-line-through {
    text-decoration: line-through !important
}

.text-lowercase {
    text-transform: lowercase !important
}

.text-uppercase {
    text-transform: uppercase !important
}

.text-capitalize {
    text-transform: capitalize !important
}

.text-wrap {
    white-space: normal !important
}

.text-nowrap {
    white-space: nowrap !important
}

.text-break {
    word-wrap: break-word !important;
    word-break: break-word !important
}

.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important
}

.text-secondary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important
}

.text-success {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important
}

.text-info {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important
}

.text-warning {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important
}

.text-danger {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important
}

.text-light {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important
}

.text-dark {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important
}

.text-black {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important
}

.text-white {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important
}

.text-body {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important
}

.text-muted {
    --bs-text-opacity: 1;
    color: var(--bs-secondary-color) !important
}

.text-black-50 {
    --bs-text-opacity: 1;
    color: #00000080 !important
}

.text-white-50 {
    --bs-text-opacity: 1;
    color: #ffffff80 !important
}

.text-body-secondary {
    --bs-text-opacity: 1;
    color: var(--bs-secondary-color) !important
}

.text-body-tertiary {
    --bs-text-opacity: 1;
    color: var(--bs-tertiary-color) !important
}

.text-body-emphasis {
    --bs-text-opacity: 1;
    color: var(--bs-emphasis-color) !important
}

.text-reset {
    --bs-text-opacity: 1;
    color: inherit !important
}

.text-opacity-25 {
    --bs-text-opacity: .25
}

.text-opacity-50 {
    --bs-text-opacity: .5
}

.text-opacity-75 {
    --bs-text-opacity: .75
}

.text-opacity-100 {
    --bs-text-opacity: 1
}

.text-primary-emphasis {
    color: var(--bs-primary-text-emphasis) !important
}

.text-secondary-emphasis {
    color: var(--bs-secondary-text-emphasis) !important
}

.text-success-emphasis {
    color: var(--bs-success-text-emphasis) !important
}

.text-info-emphasis {
    color: var(--bs-info-text-emphasis) !important
}

.text-warning-emphasis {
    color: var(--bs-warning-text-emphasis) !important
}

.text-danger-emphasis {
    color: var(--bs-danger-text-emphasis) !important
}

.text-light-emphasis {
    color: var(--bs-light-text-emphasis) !important
}

.text-dark-emphasis {
    color: var(--bs-dark-text-emphasis) !important
}

.link-opacity-10, .link-opacity-10-hover:hover {
    --bs-link-opacity: .1
}

.link-opacity-25, .link-opacity-25-hover:hover {
    --bs-link-opacity: .25
}

.link-opacity-50, .link-opacity-50-hover:hover {
    --bs-link-opacity: .5
}

.link-opacity-75, .link-opacity-75-hover:hover {
    --bs-link-opacity: .75
}

.link-opacity-100, .link-opacity-100-hover:hover {
    --bs-link-opacity: 1
}

.link-offset-1, .link-offset-1-hover:hover {
    text-underline-offset: .125em !important
}

.link-offset-2, .link-offset-2-hover:hover {
    text-underline-offset: .25em !important
}

.link-offset-3, .link-offset-3-hover:hover {
    text-underline-offset: .375em !important
}

.link-underline-primary {
    --bs-link-underline-opacity: 1;
    -webkit-text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important;
    text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important
}

.link-underline-secondary {
    --bs-link-underline-opacity: 1;
    -webkit-text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important;
    text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important
}

.link-underline-success {
    --bs-link-underline-opacity: 1;
    -webkit-text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important;
    text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important
}

.link-underline-info {
    --bs-link-underline-opacity: 1;
    -webkit-text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important;
    text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important
}

.link-underline-warning {
    --bs-link-underline-opacity: 1;
    -webkit-text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important;
    text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important
}

.link-underline-danger {
    --bs-link-underline-opacity: 1;
    -webkit-text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important;
    text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important
}

.link-underline-light {
    --bs-link-underline-opacity: 1;
    -webkit-text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important;
    text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important
}

.link-underline-dark {
    --bs-link-underline-opacity: 1;
    -webkit-text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important;
    text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important
}

.link-underline {
    --bs-link-underline-opacity: 1;
    -webkit-text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important
}

.link-underline-opacity-0, .link-underline-opacity-0-hover:hover {
    --bs-link-underline-opacity: 0
}

.link-underline-opacity-10, .link-underline-opacity-10-hover:hover {
    --bs-link-underline-opacity: .1
}

.link-underline-opacity-25, .link-underline-opacity-25-hover:hover {
    --bs-link-underline-opacity: .25
}

.link-underline-opacity-50, .link-underline-opacity-50-hover:hover {
    --bs-link-underline-opacity: .5
}

.link-underline-opacity-75, .link-underline-opacity-75-hover:hover {
    --bs-link-underline-opacity: .75
}

.link-underline-opacity-100, .link-underline-opacity-100-hover:hover {
    --bs-link-underline-opacity: 1
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important
}

.bg-success {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important
}

.bg-info {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important
}

.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important
}

.bg-danger {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important
}

.bg-light {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important
}

.bg-black {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important
}

.bg-white {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important
}

.bg-body {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important
}

.bg-transparent {
    --bs-bg-opacity: 1;
    background-color: transparent !important
}

.bg-body-secondary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important
}

.bg-body-tertiary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important
}

.bg-opacity-10 {
    --bs-bg-opacity: .1
}

.bg-opacity-25 {
    --bs-bg-opacity: .25
}

.bg-opacity-50 {
    --bs-bg-opacity: .5
}

.bg-opacity-75 {
    --bs-bg-opacity: .75
}

.bg-opacity-100 {
    --bs-bg-opacity: 1
}

.bg-primary-subtle {
    background-color: var(--bs-primary-bg-subtle) !important
}

.bg-secondary-subtle {
    background-color: var(--bs-secondary-bg-subtle) !important
}

.bg-success-subtle {
    background-color: var(--bs-success-bg-subtle) !important
}

.bg-info-subtle {
    background-color: var(--bs-info-bg-subtle) !important
}

.bg-warning-subtle {
    background-color: var(--bs-warning-bg-subtle) !important
}

.bg-danger-subtle {
    background-color: var(--bs-danger-bg-subtle) !important
}

.bg-light-subtle {
    background-color: var(--bs-light-bg-subtle) !important
}

.bg-dark-subtle {
    background-color: var(--bs-dark-bg-subtle) !important
}

.bg-gradient {
    background-image: var(--bs-gradient) !important
}

.user-select-all {
    -webkit-user-select: all !important;
    -moz-user-select: all !important;
    user-select: all !important
}

.user-select-auto {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    user-select: auto !important
}

.user-select-none {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important
}

.pe-none {
    pointer-events: none !important
}

.pe-auto {
    pointer-events: auto !important
}

.rounded {
    border-radius: var(--bs-border-radius) !important
}

.rounded-0 {
    border-radius: 0 !important
}

.rounded-1 {
    border-radius: var(--bs-border-radius-sm) !important
}

.rounded-2 {
    border-radius: var(--bs-border-radius) !important
}

.rounded-3 {
    border-radius: var(--bs-border-radius-lg) !important
}

.rounded-4 {
    border-radius: var(--bs-border-radius-xl) !important
}

.rounded-5 {
    border-radius: var(--bs-border-radius-xxl) !important
}

.rounded-circle {
    border-radius: 50% !important
}

.rounded-pill {
    border-radius: var(--bs-border-radius-pill) !important
}

.rounded-top {
    border-top-left-radius: var(--bs-border-radius) !important;
    border-top-right-radius: var(--bs-border-radius) !important
}

.rounded-top-0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important
}

.rounded-top-1 {
    border-top-left-radius: var(--bs-border-radius-sm) !important;
    border-top-right-radius: var(--bs-border-radius-sm) !important
}

.rounded-top-2 {
    border-top-left-radius: var(--bs-border-radius) !important;
    border-top-right-radius: var(--bs-border-radius) !important
}

.rounded-top-3 {
    border-top-left-radius: var(--bs-border-radius-lg) !important;
    border-top-right-radius: var(--bs-border-radius-lg) !important
}

.rounded-top-4 {
    border-top-left-radius: var(--bs-border-radius-xl) !important;
    border-top-right-radius: var(--bs-border-radius-xl) !important
}

.rounded-top-5 {
    border-top-left-radius: var(--bs-border-radius-xxl) !important;
    border-top-right-radius: var(--bs-border-radius-xxl) !important
}

.rounded-top-circle {
    border-top-left-radius: 50% !important;
    border-top-right-radius: 50% !important
}

.rounded-top-pill {
    border-top-left-radius: var(--bs-border-radius-pill) !important;
    border-top-right-radius: var(--bs-border-radius-pill) !important
}

.rounded-end {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important
}

.rounded-end-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.rounded-end-1 {
    border-top-right-radius: var(--bs-border-radius-sm) !important;
    border-bottom-right-radius: var(--bs-border-radius-sm) !important
}

.rounded-end-2 {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important
}

.rounded-end-3 {
    border-top-right-radius: var(--bs-border-radius-lg) !important;
    border-bottom-right-radius: var(--bs-border-radius-lg) !important
}

.rounded-end-4 {
    border-top-right-radius: var(--bs-border-radius-xl) !important;
    border-bottom-right-radius: var(--bs-border-radius-xl) !important
}

.rounded-end-5 {
    border-top-right-radius: var(--bs-border-radius-xxl) !important;
    border-bottom-right-radius: var(--bs-border-radius-xxl) !important
}

.rounded-end-circle {
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important
}

.rounded-end-pill {
    border-top-right-radius: var(--bs-border-radius-pill) !important;
    border-bottom-right-radius: var(--bs-border-radius-pill) !important
}

.rounded-bottom {
    border-bottom-right-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important
}

.rounded-bottom-0 {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important
}

.rounded-bottom-1 {
    border-bottom-right-radius: var(--bs-border-radius-sm) !important;
    border-bottom-left-radius: var(--bs-border-radius-sm) !important
}

.rounded-bottom-2 {
    border-bottom-right-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important
}

.rounded-bottom-3 {
    border-bottom-right-radius: var(--bs-border-radius-lg) !important;
    border-bottom-left-radius: var(--bs-border-radius-lg) !important
}

.rounded-bottom-4 {
    border-bottom-right-radius: var(--bs-border-radius-xl) !important;
    border-bottom-left-radius: var(--bs-border-radius-xl) !important
}

.rounded-bottom-5 {
    border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
    border-bottom-left-radius: var(--bs-border-radius-xxl) !important
}

.rounded-bottom-circle {
    border-bottom-right-radius: 50% !important;
    border-bottom-left-radius: 50% !important
}

.rounded-bottom-pill {
    border-bottom-right-radius: var(--bs-border-radius-pill) !important;
    border-bottom-left-radius: var(--bs-border-radius-pill) !important
}

.rounded-start {
    border-bottom-left-radius: var(--bs-border-radius) !important;
    border-top-left-radius: var(--bs-border-radius) !important
}

.rounded-start-0 {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important
}

.rounded-start-1 {
    border-bottom-left-radius: var(--bs-border-radius-sm) !important;
    border-top-left-radius: var(--bs-border-radius-sm) !important
}

.rounded-start-2 {
    border-bottom-left-radius: var(--bs-border-radius) !important;
    border-top-left-radius: var(--bs-border-radius) !important
}

.rounded-start-3 {
    border-bottom-left-radius: var(--bs-border-radius-lg) !important;
    border-top-left-radius: var(--bs-border-radius-lg) !important
}

.rounded-start-4 {
    border-bottom-left-radius: var(--bs-border-radius-xl) !important;
    border-top-left-radius: var(--bs-border-radius-xl) !important
}

.rounded-start-5 {
    border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
    border-top-left-radius: var(--bs-border-radius-xxl) !important
}

.rounded-start-circle {
    border-bottom-left-radius: 50% !important;
    border-top-left-radius: 50% !important
}

.rounded-start-pill {
    border-bottom-left-radius: var(--bs-border-radius-pill) !important;
    border-top-left-radius: var(--bs-border-radius-pill) !important
}

.visible {
    visibility: visible !important
}

.invisible {
    visibility: hidden !important
}

.z-n1 {
    z-index: -1 !important
}

.z-0 {
    z-index: 0 !important
}

.z-1 {
    z-index: 1 !important
}

.z-2 {
    z-index: 2 !important
}

.z-3 {
    z-index: 3 !important
}

@media (min-width: 576px) {
    .float-sm-start {
        float: left !important
    }

    .float-sm-end {
        float: right !important
    }

    .float-sm-none {
        float: none !important
    }

    .object-fit-sm-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }

    .object-fit-sm-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }

    .object-fit-sm-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }

    .object-fit-sm-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }

    .object-fit-sm-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }

    .d-sm-inline {
        display: inline !important
    }

    .d-sm-inline-block {
        display: inline-block !important
    }

    .d-sm-block {
        display: block !important
    }

    .d-sm-grid {
        display: grid !important
    }

    .d-sm-inline-grid {
        display: inline-grid !important
    }

    .d-sm-table {
        display: table !important
    }

    .d-sm-table-row {
        display: table-row !important
    }

    .d-sm-table-cell {
        display: table-cell !important
    }

    .d-sm-flex {
        display: flex !important
    }

    .d-sm-inline-flex {
        display: inline-flex !important
    }

    .d-sm-none {
        display: none !important
    }

    .flex-sm-fill {
        flex: 1 1 auto !important
    }

    .flex-sm-row {
        flex-direction: row !important
    }

    .flex-sm-column {
        flex-direction: column !important
    }

    .flex-sm-row-reverse {
        flex-direction: row-reverse !important
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse !important
    }

    .flex-sm-grow-0 {
        flex-grow: 0 !important
    }

    .flex-sm-grow-1 {
        flex-grow: 1 !important
    }

    .flex-sm-shrink-0 {
        flex-shrink: 0 !important
    }

    .flex-sm-shrink-1 {
        flex-shrink: 1 !important
    }

    .flex-sm-wrap {
        flex-wrap: wrap !important
    }

    .flex-sm-nowrap {
        flex-wrap: nowrap !important
    }

    .flex-sm-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }

    .justify-content-sm-start {
        justify-content: flex-start !important
    }

    .justify-content-sm-end {
        justify-content: flex-end !important
    }

    .justify-content-sm-center {
        justify-content: center !important
    }

    .justify-content-sm-between {
        justify-content: space-between !important
    }

    .justify-content-sm-around {
        justify-content: space-around !important
    }

    .justify-content-sm-evenly {
        justify-content: space-evenly !important
    }

    .align-items-sm-start {
        align-items: flex-start !important
    }

    .align-items-sm-end {
        align-items: flex-end !important
    }

    .align-items-sm-center {
        align-items: center !important
    }

    .align-items-sm-baseline {
        align-items: baseline !important
    }

    .align-items-sm-stretch {
        align-items: stretch !important
    }

    .align-content-sm-start {
        align-content: flex-start !important
    }

    .align-content-sm-end {
        align-content: flex-end !important
    }

    .align-content-sm-center {
        align-content: center !important
    }

    .align-content-sm-between {
        align-content: space-between !important
    }

    .align-content-sm-around {
        align-content: space-around !important
    }

    .align-content-sm-stretch {
        align-content: stretch !important
    }

    .align-self-sm-auto {
        align-self: auto !important
    }

    .align-self-sm-start {
        align-self: flex-start !important
    }

    .align-self-sm-end {
        align-self: flex-end !important
    }

    .align-self-sm-center {
        align-self: center !important
    }

    .align-self-sm-baseline {
        align-self: baseline !important
    }

    .align-self-sm-stretch {
        align-self: stretch !important
    }

    .order-sm-first {
        order: -1 !important
    }

    .order-sm-0 {
        order: 0 !important
    }

    .order-sm-1 {
        order: 1 !important
    }

    .order-sm-2 {
        order: 2 !important
    }

    .order-sm-3 {
        order: 3 !important
    }

    .order-sm-4 {
        order: 4 !important
    }

    .order-sm-5 {
        order: 5 !important
    }

    .order-sm-last {
        order: 6 !important
    }

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

    .m-sm-1 {
        margin: .25rem !important
    }

    .m-sm-2 {
        margin: .5rem !important
    }

    .m-sm-3 {
        margin: 1rem !important
    }

    .m-sm-4 {
        margin: 1.5rem !important
    }

    .m-sm-5 {
        margin: 3rem !important
    }

    .m-sm-auto {
        margin: auto !important
    }

    .mx-sm-0 {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .mx-sm-1 {
        margin-right: .25rem !important;
        margin-left: .25rem !important
    }

    .mx-sm-2 {
        margin-right: .5rem !important;
        margin-left: .5rem !important
    }

    .mx-sm-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important
    }

    .mx-sm-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important
    }

    .mx-sm-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important
    }

    .mx-sm-auto {
        margin-right: auto !important;
        margin-left: auto !important
    }

    .my-sm-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-sm-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-sm-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-sm-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-sm-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-sm-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-sm-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

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

    .mt-sm-1 {
        margin-top: .25rem !important
    }

    .mt-sm-2 {
        margin-top: .5rem !important
    }

    .mt-sm-3 {
        margin-top: 1rem !important
    }

    .mt-sm-4 {
        margin-top: 1.5rem !important
    }

    .mt-sm-5 {
        margin-top: 3rem !important
    }

    .mt-sm-auto {
        margin-top: auto !important
    }

    .me-sm-0 {
        margin-right: 0 !important
    }

    .me-sm-1 {
        margin-right: .25rem !important
    }

    .me-sm-2 {
        margin-right: .5rem !important
    }

    .me-sm-3 {
        margin-right: 1rem !important
    }

    .me-sm-4 {
        margin-right: 1.5rem !important
    }

    .me-sm-5 {
        margin-right: 3rem !important
    }

    .me-sm-auto {
        margin-right: auto !important
    }

    .mb-sm-0 {
        margin-bottom: 0 !important
    }

    .mb-sm-1 {
        margin-bottom: .25rem !important
    }

    .mb-sm-2 {
        margin-bottom: .5rem !important
    }

    .mb-sm-3 {
        margin-bottom: 1rem !important
    }

    .mb-sm-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-sm-5 {
        margin-bottom: 3rem !important
    }

    .mb-sm-auto {
        margin-bottom: auto !important
    }

    .ms-sm-0 {
        margin-left: 0 !important
    }

    .ms-sm-1 {
        margin-left: .25rem !important
    }

    .ms-sm-2 {
        margin-left: .5rem !important
    }

    .ms-sm-3 {
        margin-left: 1rem !important
    }

    .ms-sm-4 {
        margin-left: 1.5rem !important
    }

    .ms-sm-5 {
        margin-left: 3rem !important
    }

    .ms-sm-auto {
        margin-left: auto !important
    }

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

    .p-sm-1 {
        padding: .25rem !important
    }

    .p-sm-2 {
        padding: .5rem !important
    }

    .p-sm-3 {
        padding: 1rem !important
    }

    .p-sm-4 {
        padding: 1.5rem !important
    }

    .p-sm-5 {
        padding: 3rem !important
    }

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

    .px-sm-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important
    }

    .px-sm-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important
    }

    .px-sm-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .px-sm-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important
    }

    .px-sm-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important
    }

    .py-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-sm-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-sm-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-sm-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-sm-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-sm-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    .pt-sm-0 {
        padding-top: 0 !important
    }

    .pt-sm-1 {
        padding-top: .25rem !important
    }

    .pt-sm-2 {
        padding-top: .5rem !important
    }

    .pt-sm-3 {
        padding-top: 1rem !important
    }

    .pt-sm-4 {
        padding-top: 1.5rem !important
    }

    .pt-sm-5 {
        padding-top: 3rem !important
    }

    .pe-sm-0 {
        padding-right: 0 !important
    }

    .pe-sm-1 {
        padding-right: .25rem !important
    }

    .pe-sm-2 {
        padding-right: .5rem !important
    }

    .pe-sm-3 {
        padding-right: 1rem !important
    }

    .pe-sm-4 {
        padding-right: 1.5rem !important
    }

    .pe-sm-5 {
        padding-right: 3rem !important
    }

    .pb-sm-0 {
        padding-bottom: 0 !important
    }

    .pb-sm-1 {
        padding-bottom: .25rem !important
    }

    .pb-sm-2 {
        padding-bottom: .5rem !important
    }

    .pb-sm-3 {
        padding-bottom: 1rem !important
    }

    .pb-sm-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-sm-5 {
        padding-bottom: 3rem !important
    }

    .ps-sm-0 {
        padding-left: 0 !important
    }

    .ps-sm-1 {
        padding-left: .25rem !important
    }

    .ps-sm-2 {
        padding-left: .5rem !important
    }

    .ps-sm-3 {
        padding-left: 1rem !important
    }

    .ps-sm-4 {
        padding-left: 1.5rem !important
    }

    .ps-sm-5 {
        padding-left: 3rem !important
    }

    .gap-sm-0 {
        gap: 0 !important
    }

    .gap-sm-1 {
        gap: .25rem !important
    }

    .gap-sm-2 {
        gap: .5rem !important
    }

    .gap-sm-3 {
        gap: 1rem !important
    }

    .gap-sm-4 {
        gap: 1.5rem !important
    }

    .gap-sm-5 {
        gap: 3rem !important
    }

    .row-gap-sm-0 {
        row-gap: 0 !important
    }

    .row-gap-sm-1 {
        row-gap: .25rem !important
    }

    .row-gap-sm-2 {
        row-gap: .5rem !important
    }

    .row-gap-sm-3 {
        row-gap: 1rem !important
    }

    .row-gap-sm-4 {
        row-gap: 1.5rem !important
    }

    .row-gap-sm-5 {
        row-gap: 3rem !important
    }

    .column-gap-sm-0 {
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }

    .column-gap-sm-1 {
        -moz-column-gap: .25rem !important;
        column-gap: .25rem !important
    }

    .column-gap-sm-2 {
        -moz-column-gap: .5rem !important;
        column-gap: .5rem !important
    }

    .column-gap-sm-3 {
        -moz-column-gap: 1rem !important;
        column-gap: 1rem !important
    }

    .column-gap-sm-4 {
        -moz-column-gap: 1.5rem !important;
        column-gap: 1.5rem !important
    }

    .column-gap-sm-5 {
        -moz-column-gap: 3rem !important;
        column-gap: 3rem !important
    }

    .text-sm-start {
        text-align: left !important
    }

    .text-sm-end {
        text-align: right !important
    }

    .text-sm-center {
        text-align: center !important
    }
}

@media (min-width: 768px) {
    .float-md-start {
        float: left !important
    }

    .float-md-end {
        float: right !important
    }

    .float-md-none {
        float: none !important
    }

    .object-fit-md-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }

    .object-fit-md-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }

    .object-fit-md-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }

    .object-fit-md-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }

    .object-fit-md-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }

    .d-md-inline {
        display: inline !important
    }

    .d-md-inline-block {
        display: inline-block !important
    }

    .d-md-block {
        display: block !important
    }

    .d-md-grid {
        display: grid !important
    }

    .d-md-inline-grid {
        display: inline-grid !important
    }

    .d-md-table {
        display: table !important
    }

    .d-md-table-row {
        display: table-row !important
    }

    .d-md-table-cell {
        display: table-cell !important
    }

    .d-md-flex {
        display: flex !important
    }

    .d-md-inline-flex {
        display: inline-flex !important
    }

    .d-md-none {
        display: none !important
    }

    .flex-md-fill {
        flex: 1 1 auto !important
    }

    .flex-md-row {
        flex-direction: row !important
    }

    .flex-md-column {
        flex-direction: column !important
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse !important
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse !important
    }

    .flex-md-grow-0 {
        flex-grow: 0 !important
    }

    .flex-md-grow-1 {
        flex-grow: 1 !important
    }

    .flex-md-shrink-0 {
        flex-shrink: 0 !important
    }

    .flex-md-shrink-1 {
        flex-shrink: 1 !important
    }

    .flex-md-wrap {
        flex-wrap: wrap !important
    }

    .flex-md-nowrap {
        flex-wrap: nowrap !important
    }

    .flex-md-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }

    .justify-content-md-start {
        justify-content: flex-start !important
    }

    .justify-content-md-end {
        justify-content: flex-end !important
    }

    .justify-content-md-center {
        justify-content: center !important
    }

    .justify-content-md-between {
        justify-content: space-between !important
    }

    .justify-content-md-around {
        justify-content: space-around !important
    }

    .justify-content-md-evenly {
        justify-content: space-evenly !important
    }

    .align-items-md-start {
        align-items: flex-start !important
    }

    .align-items-md-end {
        align-items: flex-end !important
    }

    .align-items-md-center {
        align-items: center !important
    }

    .align-items-md-baseline {
        align-items: baseline !important
    }

    .align-items-md-stretch {
        align-items: stretch !important
    }

    .align-content-md-start {
        align-content: flex-start !important
    }

    .align-content-md-end {
        align-content: flex-end !important
    }

    .align-content-md-center {
        align-content: center !important
    }

    .align-content-md-between {
        align-content: space-between !important
    }

    .align-content-md-around {
        align-content: space-around !important
    }

    .align-content-md-stretch {
        align-content: stretch !important
    }

    .align-self-md-auto {
        align-self: auto !important
    }

    .align-self-md-start {
        align-self: flex-start !important
    }

    .align-self-md-end {
        align-self: flex-end !important
    }

    .align-self-md-center {
        align-self: center !important
    }

    .align-self-md-baseline {
        align-self: baseline !important
    }

    .align-self-md-stretch {
        align-self: stretch !important
    }

    .order-md-first {
        order: -1 !important
    }

    .order-md-0 {
        order: 0 !important
    }

    .order-md-1 {
        order: 1 !important
    }

    .order-md-2 {
        order: 2 !important
    }

    .order-md-3 {
        order: 3 !important
    }

    .order-md-4 {
        order: 4 !important
    }

    .order-md-5 {
        order: 5 !important
    }

    .order-md-last {
        order: 6 !important
    }

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

    .m-md-1 {
        margin: .25rem !important
    }

    .m-md-2 {
        margin: .5rem !important
    }

    .m-md-3 {
        margin: 1rem !important
    }

    .m-md-4 {
        margin: 1.5rem !important
    }

    .m-md-5 {
        margin: 3rem !important
    }

    .m-md-auto {
        margin: auto !important
    }

    .mx-md-0 {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .mx-md-1 {
        margin-right: .25rem !important;
        margin-left: .25rem !important
    }

    .mx-md-2 {
        margin-right: .5rem !important;
        margin-left: .5rem !important
    }

    .mx-md-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important
    }

    .mx-md-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important
    }

    .mx-md-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important
    }

    .mx-md-auto {
        margin-right: auto !important;
        margin-left: auto !important
    }

    .my-md-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-md-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-md-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-md-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-md-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-md-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-md-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

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

    .mt-md-1 {
        margin-top: .25rem !important
    }

    .mt-md-2 {
        margin-top: .5rem !important
    }

    .mt-md-3 {
        margin-top: 1rem !important
    }

    .mt-md-4 {
        margin-top: 1.5rem !important
    }

    .mt-md-5 {
        margin-top: 3rem !important
    }

    .mt-md-auto {
        margin-top: auto !important
    }

    .me-md-0 {
        margin-right: 0 !important
    }

    .me-md-1 {
        margin-right: .25rem !important
    }

    .me-md-2 {
        margin-right: .5rem !important
    }

    .me-md-3 {
        margin-right: 1rem !important
    }

    .me-md-4 {
        margin-right: 1.5rem !important
    }

    .me-md-5 {
        margin-right: 3rem !important
    }

    .me-md-auto {
        margin-right: auto !important
    }

    .mb-md-0 {
        margin-bottom: 0 !important
    }

    .mb-md-1 {
        margin-bottom: .25rem !important
    }

    .mb-md-2 {
        margin-bottom: .5rem !important
    }

    .mb-md-3 {
        margin-bottom: 1rem !important
    }

    .mb-md-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-md-5 {
        margin-bottom: 3rem !important
    }

    .mb-md-auto {
        margin-bottom: auto !important
    }

    .ms-md-0 {
        margin-left: 0 !important
    }

    .ms-md-1 {
        margin-left: .25rem !important
    }

    .ms-md-2 {
        margin-left: .5rem !important
    }

    .ms-md-3 {
        margin-left: 1rem !important
    }

    .ms-md-4 {
        margin-left: 1.5rem !important
    }

    .ms-md-5 {
        margin-left: 3rem !important
    }

    .ms-md-auto {
        margin-left: auto !important
    }

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

    .p-md-1 {
        padding: .25rem !important
    }

    .p-md-2 {
        padding: .5rem !important
    }

    .p-md-3 {
        padding: 1rem !important
    }

    .p-md-4 {
        padding: 1.5rem !important
    }

    .p-md-5 {
        padding: 3rem !important
    }

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

    .px-md-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important
    }

    .px-md-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important
    }

    .px-md-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .px-md-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important
    }

    .px-md-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important
    }

    .py-md-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-md-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-md-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-md-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-md-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-md-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    .pt-md-0 {
        padding-top: 0 !important
    }

    .pt-md-1 {
        padding-top: .25rem !important
    }

    .pt-md-2 {
        padding-top: .5rem !important
    }

    .pt-md-3 {
        padding-top: 1rem !important
    }

    .pt-md-4 {
        padding-top: 1.5rem !important
    }

    .pt-md-5 {
        padding-top: 3rem !important
    }

    .pe-md-0 {
        padding-right: 0 !important
    }

    .pe-md-1 {
        padding-right: .25rem !important
    }

    .pe-md-2 {
        padding-right: .5rem !important
    }

    .pe-md-3 {
        padding-right: 1rem !important
    }

    .pe-md-4 {
        padding-right: 1.5rem !important
    }

    .pe-md-5 {
        padding-right: 3rem !important
    }

    .pb-md-0 {
        padding-bottom: 0 !important
    }

    .pb-md-1 {
        padding-bottom: .25rem !important
    }

    .pb-md-2 {
        padding-bottom: .5rem !important
    }

    .pb-md-3 {
        padding-bottom: 1rem !important
    }

    .pb-md-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-md-5 {
        padding-bottom: 3rem !important
    }

    .ps-md-0 {
        padding-left: 0 !important
    }

    .ps-md-1 {
        padding-left: .25rem !important
    }

    .ps-md-2 {
        padding-left: .5rem !important
    }

    .ps-md-3 {
        padding-left: 1rem !important
    }

    .ps-md-4 {
        padding-left: 1.5rem !important
    }

    .ps-md-5 {
        padding-left: 3rem !important
    }

    .gap-md-0 {
        gap: 0 !important
    }

    .gap-md-1 {
        gap: .25rem !important
    }

    .gap-md-2 {
        gap: .5rem !important
    }

    .gap-md-3 {
        gap: 1rem !important
    }

    .gap-md-4 {
        gap: 1.5rem !important
    }

    .gap-md-5 {
        gap: 3rem !important
    }

    .row-gap-md-0 {
        row-gap: 0 !important
    }

    .row-gap-md-1 {
        row-gap: .25rem !important
    }

    .row-gap-md-2 {
        row-gap: .5rem !important
    }

    .row-gap-md-3 {
        row-gap: 1rem !important
    }

    .row-gap-md-4 {
        row-gap: 1.5rem !important
    }

    .row-gap-md-5 {
        row-gap: 3rem !important
    }

    .column-gap-md-0 {
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }

    .column-gap-md-1 {
        -moz-column-gap: .25rem !important;
        column-gap: .25rem !important
    }

    .column-gap-md-2 {
        -moz-column-gap: .5rem !important;
        column-gap: .5rem !important
    }

    .column-gap-md-3 {
        -moz-column-gap: 1rem !important;
        column-gap: 1rem !important
    }

    .column-gap-md-4 {
        -moz-column-gap: 1.5rem !important;
        column-gap: 1.5rem !important
    }

    .column-gap-md-5 {
        -moz-column-gap: 3rem !important;
        column-gap: 3rem !important
    }

    .text-md-start {
        text-align: left !important
    }

    .text-md-end {
        text-align: right !important
    }

    .text-md-center {
        text-align: center !important
    }
}

@media (min-width: 992px) {
    .float-lg-start {
        float: left !important
    }

    .float-lg-end {
        float: right !important
    }

    .float-lg-none {
        float: none !important
    }

    .object-fit-lg-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }

    .object-fit-lg-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }

    .object-fit-lg-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }

    .object-fit-lg-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }

    .object-fit-lg-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }

    .d-lg-inline {
        display: inline !important
    }

    .d-lg-inline-block {
        display: inline-block !important
    }

    .d-lg-block {
        display: block !important
    }

    .d-lg-grid {
        display: grid !important
    }

    .d-lg-inline-grid {
        display: inline-grid !important
    }

    .d-lg-table {
        display: table !important
    }

    .d-lg-table-row {
        display: table-row !important
    }

    .d-lg-table-cell {
        display: table-cell !important
    }

    .d-lg-flex {
        display: flex !important
    }

    .d-lg-inline-flex {
        display: inline-flex !important
    }

    .d-lg-none {
        display: none !important
    }

    .flex-lg-fill {
        flex: 1 1 auto !important
    }

    .flex-lg-row {
        flex-direction: row !important
    }

    .flex-lg-column {
        flex-direction: column !important
    }

    .flex-lg-row-reverse {
        flex-direction: row-reverse !important
    }

    .flex-lg-column-reverse {
        flex-direction: column-reverse !important
    }

    .flex-lg-grow-0 {
        flex-grow: 0 !important
    }

    .flex-lg-grow-1 {
        flex-grow: 1 !important
    }

    .flex-lg-shrink-0 {
        flex-shrink: 0 !important
    }

    .flex-lg-shrink-1 {
        flex-shrink: 1 !important
    }

    .flex-lg-wrap {
        flex-wrap: wrap !important
    }

    .flex-lg-nowrap {
        flex-wrap: nowrap !important
    }

    .flex-lg-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }

    .justify-content-lg-start {
        justify-content: flex-start !important
    }

    .justify-content-lg-end {
        justify-content: flex-end !important
    }

    .justify-content-lg-center {
        justify-content: center !important
    }

    .justify-content-lg-between {
        justify-content: space-between !important
    }

    .justify-content-lg-around {
        justify-content: space-around !important
    }

    .justify-content-lg-evenly {
        justify-content: space-evenly !important
    }

    .align-items-lg-start {
        align-items: flex-start !important
    }

    .align-items-lg-end {
        align-items: flex-end !important
    }

    .align-items-lg-center {
        align-items: center !important
    }

    .align-items-lg-baseline {
        align-items: baseline !important
    }

    .align-items-lg-stretch {
        align-items: stretch !important
    }

    .align-content-lg-start {
        align-content: flex-start !important
    }

    .align-content-lg-end {
        align-content: flex-end !important
    }

    .align-content-lg-center {
        align-content: center !important
    }

    .align-content-lg-between {
        align-content: space-between !important
    }

    .align-content-lg-around {
        align-content: space-around !important
    }

    .align-content-lg-stretch {
        align-content: stretch !important
    }

    .align-self-lg-auto {
        align-self: auto !important
    }

    .align-self-lg-start {
        align-self: flex-start !important
    }

    .align-self-lg-end {
        align-self: flex-end !important
    }

    .align-self-lg-center {
        align-self: center !important
    }

    .align-self-lg-baseline {
        align-self: baseline !important
    }

    .align-self-lg-stretch {
        align-self: stretch !important
    }

    .order-lg-first {
        order: -1 !important
    }

    .order-lg-0 {
        order: 0 !important
    }

    .order-lg-1 {
        order: 1 !important
    }

    .order-lg-2 {
        order: 2 !important
    }

    .order-lg-3 {
        order: 3 !important
    }

    .order-lg-4 {
        order: 4 !important
    }

    .order-lg-5 {
        order: 5 !important
    }

    .order-lg-last {
        order: 6 !important
    }

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

    .m-lg-1 {
        margin: .25rem !important
    }

    .m-lg-2 {
        margin: .5rem !important
    }

    .m-lg-3 {
        margin: 1rem !important
    }

    .m-lg-4 {
        margin: 1.5rem !important
    }

    .m-lg-5 {
        margin: 3rem !important
    }

    .m-lg-auto {
        margin: auto !important
    }

    .mx-lg-0 {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .mx-lg-1 {
        margin-right: .25rem !important;
        margin-left: .25rem !important
    }

    .mx-lg-2 {
        margin-right: .5rem !important;
        margin-left: .5rem !important
    }

    .mx-lg-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important
    }

    .mx-lg-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important
    }

    .mx-lg-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important
    }

    .mx-lg-auto {
        margin-right: auto !important;
        margin-left: auto !important
    }

    .my-lg-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-lg-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-lg-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-lg-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-lg-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-lg-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-lg-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

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

    .mt-lg-1 {
        margin-top: .25rem !important
    }

    .mt-lg-2 {
        margin-top: .5rem !important
    }

    .mt-lg-3 {
        margin-top: 1rem !important
    }

    .mt-lg-4 {
        margin-top: 1.5rem !important
    }

    .mt-lg-5 {
        margin-top: 3rem !important
    }

    .mt-lg-auto {
        margin-top: auto !important
    }

    .me-lg-0 {
        margin-right: 0 !important
    }

    .me-lg-1 {
        margin-right: .25rem !important
    }

    .me-lg-2 {
        margin-right: .5rem !important
    }

    .me-lg-3 {
        margin-right: 1rem !important
    }

    .me-lg-4 {
        margin-right: 1.5rem !important
    }

    .me-lg-5 {
        margin-right: 3rem !important
    }

    .me-lg-auto {
        margin-right: auto !important
    }

    .mb-lg-0 {
        margin-bottom: 0 !important
    }

    .mb-lg-1 {
        margin-bottom: .25rem !important
    }

    .mb-lg-2 {
        margin-bottom: .5rem !important
    }

    .mb-lg-3 {
        margin-bottom: 1rem !important
    }

    .mb-lg-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-lg-5 {
        margin-bottom: 3rem !important
    }

    .mb-lg-auto {
        margin-bottom: auto !important
    }

    .ms-lg-0 {
        margin-left: 0 !important
    }

    .ms-lg-1 {
        margin-left: .25rem !important
    }

    .ms-lg-2 {
        margin-left: .5rem !important
    }

    .ms-lg-3 {
        margin-left: 1rem !important
    }

    .ms-lg-4 {
        margin-left: 1.5rem !important
    }

    .ms-lg-5 {
        margin-left: 3rem !important
    }

    .ms-lg-auto {
        margin-left: auto !important
    }

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

    .p-lg-1 {
        padding: .25rem !important
    }

    .p-lg-2 {
        padding: .5rem !important
    }

    .p-lg-3 {
        padding: 1rem !important
    }

    .p-lg-4 {
        padding: 1.5rem !important
    }

    .p-lg-5 {
        padding: 3rem !important
    }

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

    .px-lg-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important
    }

    .px-lg-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important
    }

    .px-lg-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .px-lg-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important
    }

    .px-lg-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important
    }

    .py-lg-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-lg-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-lg-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-lg-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-lg-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-lg-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    .pt-lg-0 {
        padding-top: 0 !important
    }

    .pt-lg-1 {
        padding-top: .25rem !important
    }

    .pt-lg-2 {
        padding-top: .5rem !important
    }

    .pt-lg-3 {
        padding-top: 1rem !important
    }

    .pt-lg-4 {
        padding-top: 1.5rem !important
    }

    .pt-lg-5 {
        padding-top: 3rem !important
    }

    .pe-lg-0 {
        padding-right: 0 !important
    }

    .pe-lg-1 {
        padding-right: .25rem !important
    }

    .pe-lg-2 {
        padding-right: .5rem !important
    }

    .pe-lg-3 {
        padding-right: 1rem !important
    }

    .pe-lg-4 {
        padding-right: 1.5rem !important
    }

    .pe-lg-5 {
        padding-right: 3rem !important
    }

    .pb-lg-0 {
        padding-bottom: 0 !important
    }

    .pb-lg-1 {
        padding-bottom: .25rem !important
    }

    .pb-lg-2 {
        padding-bottom: .5rem !important
    }

    .pb-lg-3 {
        padding-bottom: 1rem !important
    }

    .pb-lg-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-lg-5 {
        padding-bottom: 3rem !important
    }

    .ps-lg-0 {
        padding-left: 0 !important
    }

    .ps-lg-1 {
        padding-left: .25rem !important
    }

    .ps-lg-2 {
        padding-left: .5rem !important
    }

    .ps-lg-3 {
        padding-left: 1rem !important
    }

    .ps-lg-4 {
        padding-left: 1.5rem !important
    }

    .ps-lg-5 {
        padding-left: 3rem !important
    }

    .gap-lg-0 {
        gap: 0 !important
    }

    .gap-lg-1 {
        gap: .25rem !important
    }

    .gap-lg-2 {
        gap: .5rem !important
    }

    .gap-lg-3 {
        gap: 1rem !important
    }

    .gap-lg-4 {
        gap: 1.5rem !important
    }

    .gap-lg-5 {
        gap: 3rem !important
    }

    .row-gap-lg-0 {
        row-gap: 0 !important
    }

    .row-gap-lg-1 {
        row-gap: .25rem !important
    }

    .row-gap-lg-2 {
        row-gap: .5rem !important
    }

    .row-gap-lg-3 {
        row-gap: 1rem !important
    }

    .row-gap-lg-4 {
        row-gap: 1.5rem !important
    }

    .row-gap-lg-5 {
        row-gap: 3rem !important
    }

    .column-gap-lg-0 {
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }

    .column-gap-lg-1 {
        -moz-column-gap: .25rem !important;
        column-gap: .25rem !important
    }

    .column-gap-lg-2 {
        -moz-column-gap: .5rem !important;
        column-gap: .5rem !important
    }

    .column-gap-lg-3 {
        -moz-column-gap: 1rem !important;
        column-gap: 1rem !important
    }

    .column-gap-lg-4 {
        -moz-column-gap: 1.5rem !important;
        column-gap: 1.5rem !important
    }

    .column-gap-lg-5 {
        -moz-column-gap: 3rem !important;
        column-gap: 3rem !important
    }

    .text-lg-start {
        text-align: left !important
    }

    .text-lg-end {
        text-align: right !important
    }

    .text-lg-center {
        text-align: center !important
    }
}

@media (min-width: 1200px) {
    .float-xl-start {
        float: left !important
    }

    .float-xl-end {
        float: right !important
    }

    .float-xl-none {
        float: none !important
    }

    .object-fit-xl-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }

    .object-fit-xl-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }

    .object-fit-xl-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }

    .object-fit-xl-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }

    .object-fit-xl-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }

    .d-xl-inline {
        display: inline !important
    }

    .d-xl-inline-block {
        display: inline-block !important
    }

    .d-xl-block {
        display: block !important
    }

    .d-xl-grid {
        display: grid !important
    }

    .d-xl-inline-grid {
        display: inline-grid !important
    }

    .d-xl-table {
        display: table !important
    }

    .d-xl-table-row {
        display: table-row !important
    }

    .d-xl-table-cell {
        display: table-cell !important
    }

    .d-xl-flex {
        display: flex !important
    }

    .d-xl-inline-flex {
        display: inline-flex !important
    }

    .d-xl-none {
        display: none !important
    }

    .flex-xl-fill {
        flex: 1 1 auto !important
    }

    .flex-xl-row {
        flex-direction: row !important
    }

    .flex-xl-column {
        flex-direction: column !important
    }

    .flex-xl-row-reverse {
        flex-direction: row-reverse !important
    }

    .flex-xl-column-reverse {
        flex-direction: column-reverse !important
    }

    .flex-xl-grow-0 {
        flex-grow: 0 !important
    }

    .flex-xl-grow-1 {
        flex-grow: 1 !important
    }

    .flex-xl-shrink-0 {
        flex-shrink: 0 !important
    }

    .flex-xl-shrink-1 {
        flex-shrink: 1 !important
    }

    .flex-xl-wrap {
        flex-wrap: wrap !important
    }

    .flex-xl-nowrap {
        flex-wrap: nowrap !important
    }

    .flex-xl-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }

    .justify-content-xl-start {
        justify-content: flex-start !important
    }

    .justify-content-xl-end {
        justify-content: flex-end !important
    }

    .justify-content-xl-center {
        justify-content: center !important
    }

    .justify-content-xl-between {
        justify-content: space-between !important
    }

    .justify-content-xl-around {
        justify-content: space-around !important
    }

    .justify-content-xl-evenly {
        justify-content: space-evenly !important
    }

    .align-items-xl-start {
        align-items: flex-start !important
    }

    .align-items-xl-end {
        align-items: flex-end !important
    }

    .align-items-xl-center {
        align-items: center !important
    }

    .align-items-xl-baseline {
        align-items: baseline !important
    }

    .align-items-xl-stretch {
        align-items: stretch !important
    }

    .align-content-xl-start {
        align-content: flex-start !important
    }

    .align-content-xl-end {
        align-content: flex-end !important
    }

    .align-content-xl-center {
        align-content: center !important
    }

    .align-content-xl-between {
        align-content: space-between !important
    }

    .align-content-xl-around {
        align-content: space-around !important
    }

    .align-content-xl-stretch {
        align-content: stretch !important
    }

    .align-self-xl-auto {
        align-self: auto !important
    }

    .align-self-xl-start {
        align-self: flex-start !important
    }

    .align-self-xl-end {
        align-self: flex-end !important
    }

    .align-self-xl-center {
        align-self: center !important
    }

    .align-self-xl-baseline {
        align-self: baseline !important
    }

    .align-self-xl-stretch {
        align-self: stretch !important
    }

    .order-xl-first {
        order: -1 !important
    }

    .order-xl-0 {
        order: 0 !important
    }

    .order-xl-1 {
        order: 1 !important
    }

    .order-xl-2 {
        order: 2 !important
    }

    .order-xl-3 {
        order: 3 !important
    }

    .order-xl-4 {
        order: 4 !important
    }

    .order-xl-5 {
        order: 5 !important
    }

    .order-xl-last {
        order: 6 !important
    }

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

    .m-xl-1 {
        margin: .25rem !important
    }

    .m-xl-2 {
        margin: .5rem !important
    }

    .m-xl-3 {
        margin: 1rem !important
    }

    .m-xl-4 {
        margin: 1.5rem !important
    }

    .m-xl-5 {
        margin: 3rem !important
    }

    .m-xl-auto {
        margin: auto !important
    }

    .mx-xl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .mx-xl-1 {
        margin-right: .25rem !important;
        margin-left: .25rem !important
    }

    .mx-xl-2 {
        margin-right: .5rem !important;
        margin-left: .5rem !important
    }

    .mx-xl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important
    }

    .mx-xl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important
    }

    .mx-xl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important
    }

    .mx-xl-auto {
        margin-right: auto !important;
        margin-left: auto !important
    }

    .my-xl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-xl-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-xl-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-xl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-xl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-xl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-xl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

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

    .mt-xl-1 {
        margin-top: .25rem !important
    }

    .mt-xl-2 {
        margin-top: .5rem !important
    }

    .mt-xl-3 {
        margin-top: 1rem !important
    }

    .mt-xl-4 {
        margin-top: 1.5rem !important
    }

    .mt-xl-5 {
        margin-top: 3rem !important
    }

    .mt-xl-auto {
        margin-top: auto !important
    }

    .me-xl-0 {
        margin-right: 0 !important
    }

    .me-xl-1 {
        margin-right: .25rem !important
    }

    .me-xl-2 {
        margin-right: .5rem !important
    }

    .me-xl-3 {
        margin-right: 1rem !important
    }

    .me-xl-4 {
        margin-right: 1.5rem !important
    }

    .me-xl-5 {
        margin-right: 3rem !important
    }

    .me-xl-auto {
        margin-right: auto !important
    }

    .mb-xl-0 {
        margin-bottom: 0 !important
    }

    .mb-xl-1 {
        margin-bottom: .25rem !important
    }

    .mb-xl-2 {
        margin-bottom: .5rem !important
    }

    .mb-xl-3 {
        margin-bottom: 1rem !important
    }

    .mb-xl-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-xl-5 {
        margin-bottom: 3rem !important
    }

    .mb-xl-auto {
        margin-bottom: auto !important
    }

    .ms-xl-0 {
        margin-left: 0 !important
    }

    .ms-xl-1 {
        margin-left: .25rem !important
    }

    .ms-xl-2 {
        margin-left: .5rem !important
    }

    .ms-xl-3 {
        margin-left: 1rem !important
    }

    .ms-xl-4 {
        margin-left: 1.5rem !important
    }

    .ms-xl-5 {
        margin-left: 3rem !important
    }

    .ms-xl-auto {
        margin-left: auto !important
    }

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

    .p-xl-1 {
        padding: .25rem !important
    }

    .p-xl-2 {
        padding: .5rem !important
    }

    .p-xl-3 {
        padding: 1rem !important
    }

    .p-xl-4 {
        padding: 1.5rem !important
    }

    .p-xl-5 {
        padding: 3rem !important
    }

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

    .px-xl-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important
    }

    .px-xl-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important
    }

    .px-xl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .px-xl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important
    }

    .px-xl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important
    }

    .py-xl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-xl-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-xl-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-xl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-xl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-xl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    .pt-xl-0 {
        padding-top: 0 !important
    }

    .pt-xl-1 {
        padding-top: .25rem !important
    }

    .pt-xl-2 {
        padding-top: .5rem !important
    }

    .pt-xl-3 {
        padding-top: 1rem !important
    }

    .pt-xl-4 {
        padding-top: 1.5rem !important
    }

    .pt-xl-5 {
        padding-top: 3rem !important
    }

    .pe-xl-0 {
        padding-right: 0 !important
    }

    .pe-xl-1 {
        padding-right: .25rem !important
    }

    .pe-xl-2 {
        padding-right: .5rem !important
    }

    .pe-xl-3 {
        padding-right: 1rem !important
    }

    .pe-xl-4 {
        padding-right: 1.5rem !important
    }

    .pe-xl-5 {
        padding-right: 3rem !important
    }

    .pb-xl-0 {
        padding-bottom: 0 !important
    }

    .pb-xl-1 {
        padding-bottom: .25rem !important
    }

    .pb-xl-2 {
        padding-bottom: .5rem !important
    }

    .pb-xl-3 {
        padding-bottom: 1rem !important
    }

    .pb-xl-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-xl-5 {
        padding-bottom: 3rem !important
    }

    .ps-xl-0 {
        padding-left: 0 !important
    }

    .ps-xl-1 {
        padding-left: .25rem !important
    }

    .ps-xl-2 {
        padding-left: .5rem !important
    }

    .ps-xl-3 {
        padding-left: 1rem !important
    }

    .ps-xl-4 {
        padding-left: 1.5rem !important
    }

    .ps-xl-5 {
        padding-left: 3rem !important
    }

    .gap-xl-0 {
        gap: 0 !important
    }

    .gap-xl-1 {
        gap: .25rem !important
    }

    .gap-xl-2 {
        gap: .5rem !important
    }

    .gap-xl-3 {
        gap: 1rem !important
    }

    .gap-xl-4 {
        gap: 1.5rem !important
    }

    .gap-xl-5 {
        gap: 3rem !important
    }

    .row-gap-xl-0 {
        row-gap: 0 !important
    }

    .row-gap-xl-1 {
        row-gap: .25rem !important
    }

    .row-gap-xl-2 {
        row-gap: .5rem !important
    }

    .row-gap-xl-3 {
        row-gap: 1rem !important
    }

    .row-gap-xl-4 {
        row-gap: 1.5rem !important
    }

    .row-gap-xl-5 {
        row-gap: 3rem !important
    }

    .column-gap-xl-0 {
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }

    .column-gap-xl-1 {
        -moz-column-gap: .25rem !important;
        column-gap: .25rem !important
    }

    .column-gap-xl-2 {
        -moz-column-gap: .5rem !important;
        column-gap: .5rem !important
    }

    .column-gap-xl-3 {
        -moz-column-gap: 1rem !important;
        column-gap: 1rem !important
    }

    .column-gap-xl-4 {
        -moz-column-gap: 1.5rem !important;
        column-gap: 1.5rem !important
    }

    .column-gap-xl-5 {
        -moz-column-gap: 3rem !important;
        column-gap: 3rem !important
    }

    .text-xl-start {
        text-align: left !important
    }

    .text-xl-end {
        text-align: right !important
    }

    .text-xl-center {
        text-align: center !important
    }
}

@media (min-width: 1400px) {
    .float-xxl-start {
        float: left !important
    }

    .float-xxl-end {
        float: right !important
    }

    .float-xxl-none {
        float: none !important
    }

    .object-fit-xxl-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }

    .object-fit-xxl-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }

    .object-fit-xxl-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }

    .object-fit-xxl-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }

    .object-fit-xxl-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }

    .d-xxl-inline {
        display: inline !important
    }

    .d-xxl-inline-block {
        display: inline-block !important
    }

    .d-xxl-block {
        display: block !important
    }

    .d-xxl-grid {
        display: grid !important
    }

    .d-xxl-inline-grid {
        display: inline-grid !important
    }

    .d-xxl-table {
        display: table !important
    }

    .d-xxl-table-row {
        display: table-row !important
    }

    .d-xxl-table-cell {
        display: table-cell !important
    }

    .d-xxl-flex {
        display: flex !important
    }

    .d-xxl-inline-flex {
        display: inline-flex !important
    }

    .d-xxl-none {
        display: none !important
    }

    .flex-xxl-fill {
        flex: 1 1 auto !important
    }

    .flex-xxl-row {
        flex-direction: row !important
    }

    .flex-xxl-column {
        flex-direction: column !important
    }

    .flex-xxl-row-reverse {
        flex-direction: row-reverse !important
    }

    .flex-xxl-column-reverse {
        flex-direction: column-reverse !important
    }

    .flex-xxl-grow-0 {
        flex-grow: 0 !important
    }

    .flex-xxl-grow-1 {
        flex-grow: 1 !important
    }

    .flex-xxl-shrink-0 {
        flex-shrink: 0 !important
    }

    .flex-xxl-shrink-1 {
        flex-shrink: 1 !important
    }

    .flex-xxl-wrap {
        flex-wrap: wrap !important
    }

    .flex-xxl-nowrap {
        flex-wrap: nowrap !important
    }

    .flex-xxl-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }

    .justify-content-xxl-start {
        justify-content: flex-start !important
    }

    .justify-content-xxl-end {
        justify-content: flex-end !important
    }

    .justify-content-xxl-center {
        justify-content: center !important
    }

    .justify-content-xxl-between {
        justify-content: space-between !important
    }

    .justify-content-xxl-around {
        justify-content: space-around !important
    }

    .justify-content-xxl-evenly {
        justify-content: space-evenly !important
    }

    .align-items-xxl-start {
        align-items: flex-start !important
    }

    .align-items-xxl-end {
        align-items: flex-end !important
    }

    .align-items-xxl-center {
        align-items: center !important
    }

    .align-items-xxl-baseline {
        align-items: baseline !important
    }

    .align-items-xxl-stretch {
        align-items: stretch !important
    }

    .align-content-xxl-start {
        align-content: flex-start !important
    }

    .align-content-xxl-end {
        align-content: flex-end !important
    }

    .align-content-xxl-center {
        align-content: center !important
    }

    .align-content-xxl-between {
        align-content: space-between !important
    }

    .align-content-xxl-around {
        align-content: space-around !important
    }

    .align-content-xxl-stretch {
        align-content: stretch !important
    }

    .align-self-xxl-auto {
        align-self: auto !important
    }

    .align-self-xxl-start {
        align-self: flex-start !important
    }

    .align-self-xxl-end {
        align-self: flex-end !important
    }

    .align-self-xxl-center {
        align-self: center !important
    }

    .align-self-xxl-baseline {
        align-self: baseline !important
    }

    .align-self-xxl-stretch {
        align-self: stretch !important
    }

    .order-xxl-first {
        order: -1 !important
    }

    .order-xxl-0 {
        order: 0 !important
    }

    .order-xxl-1 {
        order: 1 !important
    }

    .order-xxl-2 {
        order: 2 !important
    }

    .order-xxl-3 {
        order: 3 !important
    }

    .order-xxl-4 {
        order: 4 !important
    }

    .order-xxl-5 {
        order: 5 !important
    }

    .order-xxl-last {
        order: 6 !important
    }

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

    .m-xxl-1 {
        margin: .25rem !important
    }

    .m-xxl-2 {
        margin: .5rem !important
    }

    .m-xxl-3 {
        margin: 1rem !important
    }

    .m-xxl-4 {
        margin: 1.5rem !important
    }

    .m-xxl-5 {
        margin: 3rem !important
    }

    .m-xxl-auto {
        margin: auto !important
    }

    .mx-xxl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .mx-xxl-1 {
        margin-right: .25rem !important;
        margin-left: .25rem !important
    }

    .mx-xxl-2 {
        margin-right: .5rem !important;
        margin-left: .5rem !important
    }

    .mx-xxl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important
    }

    .mx-xxl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important
    }

    .mx-xxl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important
    }

    .mx-xxl-auto {
        margin-right: auto !important;
        margin-left: auto !important
    }

    .my-xxl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-xxl-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-xxl-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-xxl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-xxl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-xxl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-xxl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

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

    .mt-xxl-1 {
        margin-top: .25rem !important
    }

    .mt-xxl-2 {
        margin-top: .5rem !important
    }

    .mt-xxl-3 {
        margin-top: 1rem !important
    }

    .mt-xxl-4 {
        margin-top: 1.5rem !important
    }

    .mt-xxl-5 {
        margin-top: 3rem !important
    }

    .mt-xxl-auto {
        margin-top: auto !important
    }

    .me-xxl-0 {
        margin-right: 0 !important
    }

    .me-xxl-1 {
        margin-right: .25rem !important
    }

    .me-xxl-2 {
        margin-right: .5rem !important
    }

    .me-xxl-3 {
        margin-right: 1rem !important
    }

    .me-xxl-4 {
        margin-right: 1.5rem !important
    }

    .me-xxl-5 {
        margin-right: 3rem !important
    }

    .me-xxl-auto {
        margin-right: auto !important
    }

    .mb-xxl-0 {
        margin-bottom: 0 !important
    }

    .mb-xxl-1 {
        margin-bottom: .25rem !important
    }

    .mb-xxl-2 {
        margin-bottom: .5rem !important
    }

    .mb-xxl-3 {
        margin-bottom: 1rem !important
    }

    .mb-xxl-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-xxl-5 {
        margin-bottom: 3rem !important
    }

    .mb-xxl-auto {
        margin-bottom: auto !important
    }

    .ms-xxl-0 {
        margin-left: 0 !important
    }

    .ms-xxl-1 {
        margin-left: .25rem !important
    }

    .ms-xxl-2 {
        margin-left: .5rem !important
    }

    .ms-xxl-3 {
        margin-left: 1rem !important
    }

    .ms-xxl-4 {
        margin-left: 1.5rem !important
    }

    .ms-xxl-5 {
        margin-left: 3rem !important
    }

    .ms-xxl-auto {
        margin-left: auto !important
    }

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

    .p-xxl-1 {
        padding: .25rem !important
    }

    .p-xxl-2 {
        padding: .5rem !important
    }

    .p-xxl-3 {
        padding: 1rem !important
    }

    .p-xxl-4 {
        padding: 1.5rem !important
    }

    .p-xxl-5 {
        padding: 3rem !important
    }

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

    .px-xxl-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important
    }

    .px-xxl-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important
    }

    .px-xxl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .px-xxl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important
    }

    .px-xxl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important
    }

    .py-xxl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-xxl-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-xxl-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-xxl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-xxl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-xxl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    .pt-xxl-0 {
        padding-top: 0 !important
    }

    .pt-xxl-1 {
        padding-top: .25rem !important
    }

    .pt-xxl-2 {
        padding-top: .5rem !important
    }

    .pt-xxl-3 {
        padding-top: 1rem !important
    }

    .pt-xxl-4 {
        padding-top: 1.5rem !important
    }

    .pt-xxl-5 {
        padding-top: 3rem !important
    }

    .pe-xxl-0 {
        padding-right: 0 !important
    }

    .pe-xxl-1 {
        padding-right: .25rem !important
    }

    .pe-xxl-2 {
        padding-right: .5rem !important
    }

    .pe-xxl-3 {
        padding-right: 1rem !important
    }

    .pe-xxl-4 {
        padding-right: 1.5rem !important
    }

    .pe-xxl-5 {
        padding-right: 3rem !important
    }

    .pb-xxl-0 {
        padding-bottom: 0 !important
    }

    .pb-xxl-1 {
        padding-bottom: .25rem !important
    }

    .pb-xxl-2 {
        padding-bottom: .5rem !important
    }

    .pb-xxl-3 {
        padding-bottom: 1rem !important
    }

    .pb-xxl-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-xxl-5 {
        padding-bottom: 3rem !important
    }

    .ps-xxl-0 {
        padding-left: 0 !important
    }

    .ps-xxl-1 {
        padding-left: .25rem !important
    }

    .ps-xxl-2 {
        padding-left: .5rem !important
    }

    .ps-xxl-3 {
        padding-left: 1rem !important
    }

    .ps-xxl-4 {
        padding-left: 1.5rem !important
    }

    .ps-xxl-5 {
        padding-left: 3rem !important
    }

    .gap-xxl-0 {
        gap: 0 !important
    }

    .gap-xxl-1 {
        gap: .25rem !important
    }

    .gap-xxl-2 {
        gap: .5rem !important
    }

    .gap-xxl-3 {
        gap: 1rem !important
    }

    .gap-xxl-4 {
        gap: 1.5rem !important
    }

    .gap-xxl-5 {
        gap: 3rem !important
    }

    .row-gap-xxl-0 {
        row-gap: 0 !important
    }

    .row-gap-xxl-1 {
        row-gap: .25rem !important
    }

    .row-gap-xxl-2 {
        row-gap: .5rem !important
    }

    .row-gap-xxl-3 {
        row-gap: 1rem !important
    }

    .row-gap-xxl-4 {
        row-gap: 1.5rem !important
    }

    .row-gap-xxl-5 {
        row-gap: 3rem !important
    }

    .column-gap-xxl-0 {
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }

    .column-gap-xxl-1 {
        -moz-column-gap: .25rem !important;
        column-gap: .25rem !important
    }

    .column-gap-xxl-2 {
        -moz-column-gap: .5rem !important;
        column-gap: .5rem !important
    }

    .column-gap-xxl-3 {
        -moz-column-gap: 1rem !important;
        column-gap: 1rem !important
    }

    .column-gap-xxl-4 {
        -moz-column-gap: 1.5rem !important;
        column-gap: 1.5rem !important
    }

    .column-gap-xxl-5 {
        -moz-column-gap: 3rem !important;
        column-gap: 3rem !important
    }

    .text-xxl-start {
        text-align: left !important
    }

    .text-xxl-end {
        text-align: right !important
    }

    .text-xxl-center {
        text-align: center !important
    }
}

@media (min-width: 1200px) {
    .fs-1 {
        font-size: 2.5rem !important
    }

    .fs-2 {
        font-size: 2rem !important
    }

    .fs-3 {
        font-size: 1.75rem !important
    }

    .fs-4 {
        font-size: 1.5rem !important
    }
}

@media print {
    .d-print-inline {
        display: inline !important
    }

    .d-print-inline-block {
        display: inline-block !important
    }

    .d-print-block {
        display: block !important
    }

    .d-print-grid {
        display: grid !important
    }

    .d-print-inline-grid {
        display: inline-grid !important
    }

    .d-print-table {
        display: table !important
    }

    .d-print-table-row {
        display: table-row !important
    }

    .d-print-table-cell {
        display: table-cell !important
    }

    .d-print-flex {
        display: flex !important
    }

    .d-print-inline-flex {
        display: inline-flex !important
    }

    .d-print-none {
        display: none !important
    }
}

.mosha__toast {
    touch-action: none;
    display: flex;
    justify-content: space-between;
    position: fixed;
    min-height: 64px;
    max-height: 800px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 12px 8px;
    word-break: break-word;
    min-width: 312px;
    max-width: 480px;
    z-index: 9999;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    transition: top .3s ease-out .5s, bottom .3s ease-out .5s;
    border-radius: 8px;
    box-shadow: 0 1px 10px #0000001a, 0 2px 15px #0000000d;
    margin: 0 16px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mosha__toast__content-wrapper {
    display: flex;
    align-items: center
}

.mosha__toast__content {
    font-family: sans-serif;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    color: #fff
}

.mosha__toast__content__text {
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: 700
}

.mosha__toast__content__description {
    font-size: 14px;
    font-weight: 400
}

.mosha__toast__slot-wrapper {
    width: 100%
}

.mosha__toast__close-icon:before {
    font-size: 20px;
    cursor: pointer;
    content: "×";
    color: #fff;
    transition: color .3s;
    font-weight: 600;
    margin-left: 10px;
    position: relative;
    top: -12px
}

.mosha__toast__close-icon:hover:before {
    color: gray
}

.mosha__toast__progress {
    transition: all linear .2s;
    position: absolute;
    z-index: 9999;
    height: 8px;
    background-color: #fff9;
    bottom: 0;
    margin-left: -8px
}

.mosha__toast.success {
    background-color: #06d6a0
}

.mosha__toast.warning {
    background-color: #ffc43d
}

.mosha__toast.info {
    background-color: #1b9aaa
}

.mosha__toast.danger {
    background-color: #ef476f
}

.mosha__toast.default {
    background-color: #fff
}

.mosha__toast.default .mosha__toast__content {
    color: #616161
}

.mosha__toast.default .mosha__toast__close-icon:before {
    color: #616161
}

.mosha__toast.default .mosha__toast__close-icon:hover:before {
    color: #d0d4d4
}

.mosha__toast.default .mosha__toast__progress {
    background-image: linear-gradient(-225deg, #69eacb 0, #eaccf8 48%, #6654f1)
}

@media only screen and (max-width: 475px) {
    .mosha__toast {
        max-width: 95.2%;
        left: 0;
        right: 0;
        margin: 0 auto
    }
}

.mosha__icon {
    margin-right: 16px
}

.mosha__bounceInRight-enter-active {
    -webkit-animation: bounceInRight .7s;
    animation: bounceInRight .7s
}

.mosha__bounceInRight-leave-active {
    -webkit-animation: bounceOutLeft .7s;
    animation: bounceOutLeft .7s
}

.mosha__bounceInLeft-enter-active {
    -webkit-animation: bounceInLeft .7s;
    animation: bounceInLeft .7s
}

.mosha__bounceInLeft-leave-active {
    -webkit-animation: bounceOutRight .7s;
    animation: bounceOutRight .7s
}

.mosha__bounceInDown-enter-active {
    -webkit-animation: bounceInDown .7s;
    animation: bounceInDown .7s
}

.mosha__bounceInDown-leave-active {
    -webkit-animation: bounceOutUp .7s;
    animation: bounceOutUp .7s
}

.mosha__bounceInUp-enter-active {
    -webkit-animation: bounceInUp .7s;
    animation: bounceInUp .7s
}

.mosha__bounceInUp-leave-active {
    -webkit-animation: bounceOutDown .7s;
    animation: bounceOutDown .7s
}

@-webkit-keyframes bounceInRight {
    60%, 75%, 90%, 0%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        transform: translate3d(10px, 0, 0)
    }
    90% {
        transform: translate3d(-5px, 0, 0)
    }
    to {
        transform: none
    }
}

@keyframes bounceInRight {
    60%, 75%, 90%, 0%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        transform: translate3d(10px, 0, 0)
    }
    90% {
        transform: translate3d(-5px, 0, 0)
    }
    to {
        transform: none
    }
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

@-webkit-keyframes bounceInLeft {
    60%, 75%, 90%, 0%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        transform: translate3d(5px, 0, 0)
    }
    to {
        transform: none
    }
}

@keyframes bounceInLeft {
    60%, 75%, 90%, 0%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        transform: translate3d(5px, 0, 0)
    }
    to {
        transform: none
    }
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

@-webkit-keyframes bounceInUp {
    60%, 75%, 90%, 0%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    75% {
        transform: translate3d(0, 10px, 0)
    }
    90% {
        transform: translate3d(0, -5px, 0)
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes bounceInUp {
    60%, 75%, 90%, 0%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    75% {
        transform: translate3d(0, 10px, 0)
    }
    90% {
        transform: translate3d(0, -5px, 0)
    }
    to {
        transform: translateZ(0)
    }
}

@-webkit-keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@-webkit-keyframes bounceInDown {
    60%, 75%, 90%, 0%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }
    75% {
        transform: translate3d(0, -10px, 0)
    }
    90% {
        transform: translate3d(0, 5px, 0)
    }
    to {
        transform: none
    }
}

@keyframes bounceInDown {
    60%, 75%, 90%, 0%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }
    75% {
        transform: translate3d(0, -10px, 0)
    }
    90% {
        transform: translate3d(0, 5px, 0)
    }
    to {
        transform: none
    }
}

@-webkit-keyframes bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0)
    }
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0)
    }
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.mosha__slideInRight-enter-active {
    -webkit-animation: slideInRight .5s;
    animation: slideInRight .5s
}

.mosha__slideInRight-leave-active {
    -webkit-animation: slideOutRight .5s;
    animation: slideOutRight .5s
}

.mosha__slideInLeft-enter-active {
    -webkit-animation: slideInLeft .5s;
    animation: slideInLeft .5s
}

.mosha__slideInLeft-leave-active {
    -webkit-animation: slideOutLeft .5s;
    animation: slideOutLeft .5s
}

.mosha__slideInDown-enter-active {
    -webkit-animation: slideInDown .5s;
    animation: slideInDown .5s
}

.mosha__slideInDown-leave-active {
    -webkit-animation: slideOutUp .5s;
    animation: slideOutUp .5s
}

.mosha__slideInUp-enter-active {
    -webkit-animation: slideInUp .5s;
    animation: slideInUp .5s
}

.mosha__slideInUp-leave-active {
    -webkit-animation: slideOutDown .5s;
    animation: slideOutDown .5s
}

@-webkit-keyframes slideInRight {
    0% {
        transform: translate3d(110%, 0, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes slideInRight {
    0% {
        transform: translate3d(110%, 0, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@-webkit-keyframes slideOutLeft {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(-110%, 0, 0)
    }
}

@keyframes slideOutLeft {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(-110%, 0, 0)
    }
}

@-webkit-keyframes slideInLeft {
    0% {
        transform: translate3d(-110%, 0, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes slideInLeft {
    0% {
        transform: translate3d(-110%, 0, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@-webkit-keyframes slideOutRight {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(110%, 0, 0)
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(110%, 0, 0)
    }
}

@-webkit-keyframes slideInUp {
    0% {
        transform: translate3d(0, 110%, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes slideInUp {
    0% {
        transform: translate3d(0, 110%, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0)
    }
}

@-webkit-keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -120%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -120%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@-webkit-keyframes slideOutDown {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(0, 500px, 0)
    }
}

@keyframes slideOutDown {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(0, 500px, 0)
    }
}

@-webkit-keyframes slideOutUp {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(0, -500px, 0)
    }
}

@keyframes slideOutUp {
    0% {
        transform: translateZ(0)
    }
    to {
        visibility: hidden;
        transform: translate3d(0, -500px, 0)
    }
}

.mosha__zoomIn-enter-active {
    -webkit-animation: zoomIn .5s;
    animation: zoomIn .5s
}

.mosha__zoomIn-leave-active {
    -webkit-animation: zoomOut .5s;
    animation: zoomOut .5s
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

.mosha__fadeOutRight-leave-active {
    -webkit-animation: fadeOutRight .5s;
    animation: fadeOutRight .5s
}

.mosha__fadeOutLeft-leave-active {
    -webkit-animation: fadeOutLeft .5s;
    animation: fadeOutLeft .5s
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

.swal2-popup.swal2-toast {
    box-sizing: border-box;
    grid-column: 1/4 !important;
    grid-row: 1/4 !important;
    grid-template-columns:1fr 99fr 1fr;
    padding: 1em;
    overflow-y: hidden;
    background: #fff;
    box-shadow: 0 0 1px #00000013, 0 1px 2px #00000013, 1px 2px 4px #00000013, 1px 3px 8px #00000013, 2px 4px 16px #00000013;
    pointer-events: all
}

.swal2-popup.swal2-toast > * {
    grid-column: 2
}

.swal2-popup.swal2-toast .swal2-title {
    margin: .5em 1em;
    padding: 0;
    font-size: 1em;
    text-align: initial
}

.swal2-popup.swal2-toast .swal2-loading {
    justify-content: center
}

.swal2-popup.swal2-toast .swal2-input {
    height: 2em;
    margin: .5em;
    font-size: 1em
}

.swal2-popup.swal2-toast .swal2-validation-message {
    font-size: 1em
}

.swal2-popup.swal2-toast .swal2-footer {
    margin: .5em 0 0;
    padding: .5em 0 0;
    font-size: .8em
}

.swal2-popup.swal2-toast .swal2-close {
    grid-column: 3/3;
    grid-row: 1/99;
    align-self: center;
    width: .8em;
    height: .8em;
    margin: 0;
    font-size: 2em
}

.swal2-popup.swal2-toast .swal2-html-container {
    margin: .5em 1em;
    padding: 0;
    font-size: 1em;
    text-align: initial
}

.swal2-popup.swal2-toast .swal2-html-container:empty {
    padding: 0
}

.swal2-popup.swal2-toast .swal2-loader {
    grid-column: 1;
    grid-row: 1/99;
    align-self: center;
    width: 2em;
    height: 2em;
    margin: .25em
}

.swal2-popup.swal2-toast .swal2-icon {
    grid-column: 1;
    grid-row: 1/99;
    align-self: center;
    width: 2em;
    min-width: 2em;
    height: 2em;
    margin: 0 .5em 0 0
}

.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 1.8em;
    font-weight: 700
}

.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
    width: 2em;
    height: 2em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    top: .875em;
    width: 1.375em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
    left: .3125em
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
    right: .3125em
}

.swal2-popup.swal2-toast .swal2-actions {
    justify-content: flex-start;
    height: auto;
    margin: .5em 0 0;
    padding: 0 .5em
}

.swal2-popup.swal2-toast .swal2-styled {
    margin: .25em .5em;
    padding: .4em .6em;
    font-size: 1em
}

.swal2-popup.swal2-toast .swal2-success {
    border-color: #a5dc86
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
    position: absolute;
    width: 1.6em;
    height: 3em;
    transform: rotate(45deg);
    border-radius: 50%
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
    top: -.8em;
    left: -.5em;
    transform: rotate(-45deg);
    transform-origin: 2em 2em;
    border-radius: 4em 0 0 4em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
    top: -.25em;
    left: .9375em;
    transform-origin: 0 1.5em;
    border-radius: 0 4em 4em 0
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
    width: 2em;
    height: 2em
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
    top: 0;
    left: .4375em;
    width: .4375em;
    height: 2.6875em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
    height: .3125em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
    top: 1.125em;
    left: .1875em;
    width: .75em
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
    top: .9375em;
    right: .1875em;
    width: 1.375em
}

.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
    -webkit-animation: swal2-toast-animate-success-line-tip .75s;
    animation: swal2-toast-animate-success-line-tip .75s
}

.swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
    -webkit-animation: swal2-toast-animate-success-line-long .75s;
    animation: swal2-toast-animate-success-line-long .75s
}

.swal2-popup.swal2-toast.swal2-show {
    -webkit-animation: swal2-toast-show .5s;
    animation: swal2-toast-show .5s
}

.swal2-popup.swal2-toast.swal2-hide {
    -webkit-animation: swal2-toast-hide .1s forwards;
    animation: swal2-toast-hide .1s forwards
}

.swal2-container {
    display: grid;
    position: fixed;
    z-index: 1060;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    grid-template-areas:"top-start     top            top-end" "center-start  center         center-end" "bottom-start  bottom-center  bottom-end";
    grid-template-rows:minmax(-webkit-min-content, auto) minmax(-webkit-min-content, auto) minmax(-webkit-min-content, auto);
    grid-template-rows:minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
    height: 100%;
    padding: .625em;
    overflow-x: hidden;
    transition: background-color .1s;
    -webkit-overflow-scrolling: touch
}

.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
    background: #0006
}

.swal2-container.swal2-backdrop-hide {
    background: 0 0 !important
}

.swal2-container.swal2-bottom-start, .swal2-container.swal2-center-start, .swal2-container.swal2-top-start {
    grid-template-columns:minmax(0, 1fr) auto auto
}

.swal2-container.swal2-bottom, .swal2-container.swal2-center, .swal2-container.swal2-top {
    grid-template-columns:auto minmax(0, 1fr) auto
}

.swal2-container.swal2-bottom-end, .swal2-container.swal2-center-end, .swal2-container.swal2-top-end {
    grid-template-columns:auto auto minmax(0, 1fr)
}

.swal2-container.swal2-top-start > .swal2-popup {
    align-self: start
}

.swal2-container.swal2-top > .swal2-popup {
    grid-column: 2;
    align-self: start;
    justify-self: center
}

.swal2-container.swal2-top-end > .swal2-popup, .swal2-container.swal2-top-right > .swal2-popup {
    grid-column: 3;
    align-self: start;
    justify-self: end
}

.swal2-container.swal2-center-left > .swal2-popup, .swal2-container.swal2-center-start > .swal2-popup {
    grid-row: 2;
    align-self: center
}

.swal2-container.swal2-center > .swal2-popup {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: center
}

.swal2-container.swal2-center-end > .swal2-popup, .swal2-container.swal2-center-right > .swal2-popup {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-self: end
}

.swal2-container.swal2-bottom-left > .swal2-popup, .swal2-container.swal2-bottom-start > .swal2-popup {
    grid-column: 1;
    grid-row: 3;
    align-self: end
}

.swal2-container.swal2-bottom > .swal2-popup {
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
    align-self: end
}

.swal2-container.swal2-bottom-end > .swal2-popup, .swal2-container.swal2-bottom-right > .swal2-popup {
    grid-column: 3;
    grid-row: 3;
    align-self: end;
    justify-self: end
}

.swal2-container.swal2-grow-fullscreen > .swal2-popup, .swal2-container.swal2-grow-row > .swal2-popup {
    grid-column: 1/4;
    width: 100%
}

.swal2-container.swal2-grow-column > .swal2-popup, .swal2-container.swal2-grow-fullscreen > .swal2-popup {
    grid-row: 1/4;
    align-self: stretch
}

.swal2-container.swal2-no-transition {
    transition: none !important
}

.swal2-popup {
    display: none;
    position: relative;
    box-sizing: border-box;
    grid-template-columns:minmax(0, 100%);
    width: 32em;
    max-width: 100%;
    padding: 0 0 1.25em;
    border: none;
    border-radius: 5px;
    background: #fff;
    color: #545454;
    font-family: inherit;
    font-size: 1rem
}

.swal2-popup:focus {
    outline: 0
}

.swal2-popup.swal2-loading {
    overflow-y: hidden
}

.swal2-title {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: .8em 1em 0;
    color: inherit;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word
}

.swal2-actions {
    display: flex;
    z-index: 1;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 1.25em auto 0;
    padding: 0
}

.swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
    opacity: .4
}

.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
    background-image: linear-gradient(#0000001a, #0000001a)
}

.swal2-actions:not(.swal2-loading) .swal2-styled:active {
    background-image: linear-gradient(#0003, #0003)
}

.swal2-loader {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    margin: 0 1.875em;
    -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    border-width: .25em;
    border-style: solid;
    border-radius: 100%;
    border-color: #2778c4 transparent #2778c4 transparent
}

.swal2-styled {
    margin: .3125em;
    padding: .625em 1.1em;
    transition: box-shadow .1s;
    box-shadow: 0 0 0 3px transparent;
    font-weight: 500
}

.swal2-styled:not([disabled]) {
    cursor: pointer
}

.swal2-styled.swal2-confirm {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #7066e0;
    color: #fff;
    font-size: 1em
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px #7066e080
}

.swal2-styled.swal2-deny {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #dc3741;
    color: #fff;
    font-size: 1em
}

.swal2-styled.swal2-deny:focus {
    box-shadow: 0 0 0 3px #dc374180
}

.swal2-styled.swal2-cancel {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #6e7881;
    color: #fff;
    font-size: 1em
}

.swal2-styled.swal2-cancel:focus {
    box-shadow: 0 0 0 3px #6e788180
}

.swal2-styled.swal2-default-outline:focus {
    box-shadow: 0 0 0 3px #6496c880
}

.swal2-styled:focus {
    outline: 0
}

.swal2-styled::-moz-focus-inner {
    border: 0
}

.swal2-footer {
    justify-content: center;
    margin: 1em 0 0;
    padding: 1em 1em 0;
    border-top: 1px solid #eee;
    color: inherit;
    font-size: 1em
}

.swal2-timer-progress-bar-container {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    grid-column: auto !important;
    overflow: hidden;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px
}

.swal2-timer-progress-bar {
    width: 100%;
    height: .25em;
    background: #0003
}

.swal2-image {
    max-width: 100%;
    margin: 2em auto 1em
}

.swal2-close {
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: -1.2em;
    padding: 0;
    overflow: hidden;
    transition: color .1s, box-shadow .1s;
    border: none;
    border-radius: 5px;
    background: 0 0;
    color: #ccc;
    font-family: serif;
    font-family: monospace;
    font-size: 2.5em;
    cursor: pointer;
    justify-self: end
}

.swal2-close:hover {
    transform: none;
    background: 0 0;
    color: #f27474
}

.swal2-close:focus {
    outline: 0;
    box-shadow: inset 0 0 0 3px #6496c880
}

.swal2-close::-moz-focus-inner {
    border: 0
}

.swal2-html-container {
    z-index: 1;
    justify-content: center;
    margin: 1em 1.6em .3em;
    padding: 0;
    overflow: auto;
    color: inherit;
    font-size: 1.125em;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    word-wrap: break-word;
    word-break: break-word
}

.swal2-checkbox, .swal2-file, .swal2-input, .swal2-radio, .swal2-select, .swal2-textarea {
    margin: 1em 2em 3px
}

.swal2-file, .swal2-input, .swal2-textarea {
    box-sizing: border-box;
    width: auto;
    transition: border-color .1s, box-shadow .1s;
    border: 1px solid #d9d9d9;
    border-radius: .1875em;
    background: inherit;
    box-shadow: inset 0 1px 1px #0000000f, 0 0 0 3px transparent;
    color: inherit;
    font-size: 1.125em
}

.swal2-file.swal2-inputerror, .swal2-input.swal2-inputerror, .swal2-textarea.swal2-inputerror {
    border-color: #f27474 !important;
    box-shadow: 0 0 2px #f27474 !important
}

.swal2-file:focus, .swal2-input:focus, .swal2-textarea:focus {
    border: 1px solid #b4dbed;
    outline: 0;
    box-shadow: inset 0 1px 1px #0000000f, 0 0 0 3px #6496c880
}

.swal2-file::-moz-placeholder, .swal2-input::-moz-placeholder, .swal2-textarea::-moz-placeholder {
    color: #ccc
}

.swal2-file:-ms-input-placeholder, .swal2-input:-ms-input-placeholder, .swal2-textarea:-ms-input-placeholder {
    color: #ccc
}

.swal2-file::placeholder, .swal2-input::placeholder, .swal2-textarea::placeholder {
    color: #ccc
}

.swal2-range {
    margin: 1em 2em 3px;
    background: #fff
}

.swal2-range input {
    width: 80%
}

.swal2-range output {
    width: 20%;
    color: inherit;
    font-weight: 600;
    text-align: center
}

.swal2-range input, .swal2-range output {
    height: 2.625em;
    padding: 0;
    font-size: 1.125em;
    line-height: 2.625em
}

.swal2-input {
    height: 2.625em;
    padding: 0 .75em
}

.swal2-file {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    background: inherit;
    font-size: 1.125em
}

.swal2-textarea {
    height: 6.75em;
    padding: .75em
}

.swal2-select {
    min-width: 50%;
    max-width: 100%;
    padding: .375em .625em;
    background: inherit;
    color: inherit;
    font-size: 1.125em
}

.swal2-checkbox, .swal2-radio {
    align-items: center;
    justify-content: center;
    background: #fff;
    color: inherit
}

.swal2-checkbox label, .swal2-radio label {
    margin: 0 .6em;
    font-size: 1.125em
}

.swal2-checkbox input, .swal2-radio input {
    flex-shrink: 0;
    margin: 0 .4em
}

.swal2-input-label {
    display: flex;
    justify-content: center;
    margin: 1em auto 0
}

.swal2-validation-message {
    align-items: center;
    justify-content: center;
    margin: 1em 0 0;
    padding: .625em;
    overflow: hidden;
    background: #f0f0f0;
    color: #666;
    font-size: 1em;
    font-weight: 300
}

.swal2-validation-message:before {
    content: "!";
    display: inline-block;
    width: 1.5em;
    min-width: 1.5em;
    height: 1.5em;
    margin: 0 .625em;
    border-radius: 50%;
    background-color: #f27474;
    color: #fff;
    font-weight: 600;
    line-height: 1.5em;
    text-align: center
}

.swal2-icon {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 2.5em auto .6em;
    border: .25em solid transparent;
    border-radius: 50%;
    border-color: #000;
    font-family: inherit;
    line-height: 5em;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.swal2-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 3.75em
}

.swal2-icon.swal2-error {
    border-color: #f27474;
    color: #f27474
}

.swal2-icon.swal2-error .swal2-x-mark {
    position: relative;
    flex-grow: 1
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    display: block;
    position: absolute;
    top: 2.3125em;
    width: 2.9375em;
    height: .3125em;
    border-radius: .125em;
    background-color: #f27474
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
    left: 1.0625em;
    transform: rotate(45deg)
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
    right: 1em;
    transform: rotate(-45deg)
}

.swal2-icon.swal2-error.swal2-icon-show {
    -webkit-animation: swal2-animate-error-icon .5s;
    animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-error.swal2-icon-show .swal2-x-mark {
    -webkit-animation: swal2-animate-error-x-mark .5s;
    animation: swal2-animate-error-x-mark .5s
}

.swal2-icon.swal2-warning {
    border-color: #facea8;
    color: #f8bb86
}

.swal2-icon.swal2-warning.swal2-icon-show {
    -webkit-animation: swal2-animate-error-icon .5s;
    animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-warning.swal2-icon-show .swal2-icon-content {
    -webkit-animation: swal2-animate-i-mark .5s;
    animation: swal2-animate-i-mark .5s
}

.swal2-icon.swal2-info {
    border-color: #9de0f6;
    color: #3fc3ee
}

.swal2-icon.swal2-info.swal2-icon-show {
    -webkit-animation: swal2-animate-error-icon .5s;
    animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-info.swal2-icon-show .swal2-icon-content {
    -webkit-animation: swal2-animate-i-mark .8s;
    animation: swal2-animate-i-mark .8s
}

.swal2-icon.swal2-question {
    border-color: #c9dae1;
    color: #87adbd
}

.swal2-icon.swal2-question.swal2-icon-show {
    -webkit-animation: swal2-animate-error-icon .5s;
    animation: swal2-animate-error-icon .5s
}

.swal2-icon.swal2-question.swal2-icon-show .swal2-icon-content {
    -webkit-animation: swal2-animate-question-mark .8s;
    animation: swal2-animate-question-mark .8s
}

.swal2-icon.swal2-success {
    border-color: #a5dc86;
    color: #a5dc86
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line] {
    position: absolute;
    width: 3.75em;
    height: 7.5em;
    transform: rotate(45deg);
    border-radius: 50%
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left] {
    top: -.4375em;
    left: -2.0635em;
    transform: rotate(-45deg);
    transform-origin: 3.75em 3.75em;
    border-radius: 7.5em 0 0 7.5em
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right] {
    top: -.6875em;
    left: 1.875em;
    transform: rotate(-45deg);
    transform-origin: 0 3.75em;
    border-radius: 0 7.5em 7.5em 0
}

.swal2-icon.swal2-success .swal2-success-ring {
    position: absolute;
    z-index: 2;
    top: -.25em;
    left: -.25em;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    border: .25em solid rgba(165, 220, 134, .3);
    border-radius: 50%
}

.swal2-icon.swal2-success .swal2-success-fix {
    position: absolute;
    z-index: 1;
    top: .5em;
    left: 1.625em;
    width: .4375em;
    height: 5.625em;
    transform: rotate(-45deg)
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    display: block;
    position: absolute;
    z-index: 2;
    height: .3125em;
    border-radius: .125em;
    background-color: #a5dc86
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
    top: 2.875em;
    left: .8125em;
    width: 1.5625em;
    transform: rotate(45deg)
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
    top: 2.375em;
    right: .5em;
    width: 2.9375em;
    transform: rotate(-45deg)
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-tip {
    -webkit-animation: swal2-animate-success-line-tip .75s;
    animation: swal2-animate-success-line-tip .75s
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long {
    -webkit-animation: swal2-animate-success-line-long .75s;
    animation: swal2-animate-success-line-long .75s
}

.swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right {
    -webkit-animation: swal2-rotate-success-circular-line 4.25s ease-in;
    animation: swal2-rotate-success-circular-line 4.25s ease-in
}

.swal2-progress-steps {
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    margin: 1.25em auto;
    padding: 0;
    background: inherit;
    font-weight: 600
}

.swal2-progress-steps li {
    display: inline-block;
    position: relative
}

.swal2-progress-steps .swal2-progress-step {
    z-index: 20;
    flex-shrink: 0;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background: #2778c4;
    color: #fff;
    line-height: 2em;
    text-align: center
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
    background: #2778c4
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step {
    background: #add8e6;
    color: #fff
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
    background: #add8e6
}

.swal2-progress-steps .swal2-progress-step-line {
    z-index: 10;
    flex-shrink: 0;
    width: 2.5em;
    height: .4em;
    margin: 0 -1px;
    background: #2778c4
}

[class^=swal2] {
    -webkit-tap-highlight-color: transparent
}

.swal2-show {
    -webkit-animation: swal2-show .3s;
    animation: swal2-show .3s
}

.swal2-hide {
    -webkit-animation: swal2-hide .15s forwards;
    animation: swal2-hide .15s forwards
}

.swal2-noanimation {
    transition: none
}

.swal2-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

.swal2-rtl .swal2-close {
    margin-right: initial;
    margin-left: 0
}

.swal2-rtl .swal2-timer-progress-bar {
    right: 0;
    left: auto
}

@-webkit-keyframes swal2-toast-show {
    0% {
        transform: translateY(-.625em) rotate(2deg)
    }
    33% {
        transform: translateY(0) rotate(-2deg)
    }
    66% {
        transform: translateY(.3125em) rotate(2deg)
    }
    to {
        transform: translateY(0) rotate(0)
    }
}

@keyframes swal2-toast-show {
    0% {
        transform: translateY(-.625em) rotate(2deg)
    }
    33% {
        transform: translateY(0) rotate(-2deg)
    }
    66% {
        transform: translateY(.3125em) rotate(2deg)
    }
    to {
        transform: translateY(0) rotate(0)
    }
}

@-webkit-keyframes swal2-toast-hide {
    to {
        transform: rotate(1deg);
        opacity: 0
    }
}

@keyframes swal2-toast-hide {
    to {
        transform: rotate(1deg);
        opacity: 0
    }
}

@-webkit-keyframes swal2-toast-animate-success-line-tip {
    0% {
        top: .5625em;
        left: .0625em;
        width: 0
    }
    54% {
        top: .125em;
        left: .125em;
        width: 0
    }
    70% {
        top: .625em;
        left: -.25em;
        width: 1.625em
    }
    84% {
        top: 1.0625em;
        left: .75em;
        width: .5em
    }
    to {
        top: 1.125em;
        left: .1875em;
        width: .75em
    }
}

@keyframes swal2-toast-animate-success-line-tip {
    0% {
        top: .5625em;
        left: .0625em;
        width: 0
    }
    54% {
        top: .125em;
        left: .125em;
        width: 0
    }
    70% {
        top: .625em;
        left: -.25em;
        width: 1.625em
    }
    84% {
        top: 1.0625em;
        left: .75em;
        width: .5em
    }
    to {
        top: 1.125em;
        left: .1875em;
        width: .75em
    }
}

@-webkit-keyframes swal2-toast-animate-success-line-long {
    0% {
        top: 1.625em;
        right: 1.375em;
        width: 0
    }
    65% {
        top: 1.25em;
        right: .9375em;
        width: 0
    }
    84% {
        top: .9375em;
        right: 0;
        width: 1.125em
    }
    to {
        top: .9375em;
        right: .1875em;
        width: 1.375em
    }
}

@keyframes swal2-toast-animate-success-line-long {
    0% {
        top: 1.625em;
        right: 1.375em;
        width: 0
    }
    65% {
        top: 1.25em;
        right: .9375em;
        width: 0
    }
    84% {
        top: .9375em;
        right: 0;
        width: 1.125em
    }
    to {
        top: .9375em;
        right: .1875em;
        width: 1.375em
    }
}

@-webkit-keyframes swal2-show {
    0% {
        transform: scale(.7)
    }
    45% {
        transform: scale(1.05)
    }
    80% {
        transform: scale(.95)
    }
    to {
        transform: scale(1)
    }
}

@keyframes swal2-show {
    0% {
        transform: scale(.7)
    }
    45% {
        transform: scale(1.05)
    }
    80% {
        transform: scale(.95)
    }
    to {
        transform: scale(1)
    }
}

@-webkit-keyframes swal2-hide {
    0% {
        transform: scale(1);
        opacity: 1
    }
    to {
        transform: scale(.5);
        opacity: 0
    }
}

@keyframes swal2-hide {
    0% {
        transform: scale(1);
        opacity: 1
    }
    to {
        transform: scale(.5);
        opacity: 0
    }
}

@-webkit-keyframes swal2-animate-success-line-tip {
    0% {
        top: 1.1875em;
        left: .0625em;
        width: 0
    }
    54% {
        top: 1.0625em;
        left: .125em;
        width: 0
    }
    70% {
        top: 2.1875em;
        left: -.375em;
        width: 3.125em
    }
    84% {
        top: 3em;
        left: 1.3125em;
        width: 1.0625em
    }
    to {
        top: 2.8125em;
        left: .8125em;
        width: 1.5625em
    }
}

@keyframes swal2-animate-success-line-tip {
    0% {
        top: 1.1875em;
        left: .0625em;
        width: 0
    }
    54% {
        top: 1.0625em;
        left: .125em;
        width: 0
    }
    70% {
        top: 2.1875em;
        left: -.375em;
        width: 3.125em
    }
    84% {
        top: 3em;
        left: 1.3125em;
        width: 1.0625em
    }
    to {
        top: 2.8125em;
        left: .8125em;
        width: 1.5625em
    }
}

@-webkit-keyframes swal2-animate-success-line-long {
    0% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }
    65% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }
    84% {
        top: 2.1875em;
        right: 0;
        width: 3.4375em
    }
    to {
        top: 2.375em;
        right: .5em;
        width: 2.9375em
    }
}

@keyframes swal2-animate-success-line-long {
    0% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }
    65% {
        top: 3.375em;
        right: 2.875em;
        width: 0
    }
    84% {
        top: 2.1875em;
        right: 0;
        width: 3.4375em
    }
    to {
        top: 2.375em;
        right: .5em;
        width: 2.9375em
    }
}

@-webkit-keyframes swal2-rotate-success-circular-line {
    0% {
        transform: rotate(-45deg)
    }
    5% {
        transform: rotate(-45deg)
    }
    12% {
        transform: rotate(-405deg)
    }
    to {
        transform: rotate(-405deg)
    }
}

@keyframes swal2-rotate-success-circular-line {
    0% {
        transform: rotate(-45deg)
    }
    5% {
        transform: rotate(-45deg)
    }
    12% {
        transform: rotate(-405deg)
    }
    to {
        transform: rotate(-405deg)
    }
}

@-webkit-keyframes swal2-animate-error-x-mark {
    0% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }
    50% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }
    80% {
        margin-top: -.375em;
        transform: scale(1.15)
    }
    to {
        margin-top: 0;
        transform: scale(1);
        opacity: 1
    }
}

@keyframes swal2-animate-error-x-mark {
    0% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }
    50% {
        margin-top: 1.625em;
        transform: scale(.4);
        opacity: 0
    }
    80% {
        margin-top: -.375em;
        transform: scale(1.15)
    }
    to {
        margin-top: 0;
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes swal2-animate-error-icon {
    0% {
        transform: rotateX(100deg);
        opacity: 0
    }
    to {
        transform: rotateX(0);
        opacity: 1
    }
}

@keyframes swal2-animate-error-icon {
    0% {
        transform: rotateX(100deg);
        opacity: 0
    }
    to {
        transform: rotateX(0);
        opacity: 1
    }
}

@-webkit-keyframes swal2-rotate-loading {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes swal2-rotate-loading {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes swal2-animate-question-mark {
    0% {
        transform: rotateY(-360deg)
    }
    to {
        transform: rotateY(0)
    }
}

@keyframes swal2-animate-question-mark {
    0% {
        transform: rotateY(-360deg)
    }
    to {
        transform: rotateY(0)
    }
}

@-webkit-keyframes swal2-animate-i-mark {
    0% {
        transform: rotate(45deg);
        opacity: 0
    }
    25% {
        transform: rotate(-25deg);
        opacity: .4
    }
    50% {
        transform: rotate(15deg);
        opacity: .8
    }
    75% {
        transform: rotate(-5deg);
        opacity: 1
    }
    to {
        transform: rotateX(0);
        opacity: 1
    }
}

@keyframes swal2-animate-i-mark {
    0% {
        transform: rotate(45deg);
        opacity: 0
    }
    25% {
        transform: rotate(-25deg);
        opacity: .4
    }
    50% {
        transform: rotate(15deg);
        opacity: .8
    }
    75% {
        transform: rotate(-5deg);
        opacity: 1
    }
    to {
        transform: rotateX(0);
        opacity: 1
    }
}

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow: hidden
}

body.swal2-height-auto {
    height: auto !important
}

body.swal2-no-backdrop .swal2-container {
    background-color: transparent !important;
    pointer-events: none
}

body.swal2-no-backdrop .swal2-container .swal2-popup {
    pointer-events: all
}

body.swal2-no-backdrop .swal2-container .swal2-modal {
    box-shadow: 0 0 10px #0006
}

@media print {
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
        overflow-y: scroll !important
    }

    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) > [aria-hidden=true] {
        display: none
    }

    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
        position: static !important
    }
}

body.swal2-toast-shown .swal2-container {
    box-sizing: border-box;
    width: 360px;
    max-width: 100%;
    background-color: transparent;
    pointer-events: none
}

body.swal2-toast-shown .swal2-container.swal2-top {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto
}

body.swal2-toast-shown .swal2-container.swal2-top-left, body.swal2-toast-shown .swal2-container.swal2-top-start {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0
}

body.swal2-toast-shown .swal2-container.swal2-center-left, body.swal2-toast-shown .swal2-container.swal2-center-start {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    transform: translateY(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-center {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%)
}

body.swal2-toast-shown .swal2-container.swal2-center-end, body.swal2-toast-shown .swal2-container.swal2-center-right {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-bottom-left, body.swal2-toast-shown .swal2-container.swal2-bottom-start {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0
}

body.swal2-toast-shown .swal2-container.swal2-bottom {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

body.swal2-toast-shown .swal2-container.swal2-bottom-end, body.swal2-toast-shown .swal2-container.swal2-bottom-right {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto
}

/*!
* Viewer.js v1.11.7
* https://fengyuanchen.github.io/viewerjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2024-11-24T04:32:14.526Z
*/
.viewer-zoom-in:before, .viewer-zoom-out:before, .viewer-one-to-one:before, .viewer-reset:before, .viewer-prev:before, .viewer-play:before, .viewer-next:before, .viewer-rotate-left:before, .viewer-rotate-right:before, .viewer-flip-horizontal:before, .viewer-flip-vertical:before, .viewer-fullscreen:before, .viewer-fullscreen-exit:before, .viewer-close:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 560 40%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M49.6 17.9h20.2v3.9H49.6zm123.1 2 10.9-11 2.7 2.8-8.2 8.2 8.2 8.2-2.7 2.7-10.9-10.9zm94 0-10.8-11-2.7 2.8 8.1 8.2-8.1 8.2 2.7 2.7 10.8-10.9zM212 9.3l20.1 10.6L212 30.5V9.3zm161.5 4.6-7.2 6 7.2 5.9v-4h12.4v4l7.3-5.9-7.3-6v4h-12.4v-4zm40.2 12.3 5.9 7.2 5.9-7.2h-4V13.6h4l-5.9-7.3-5.9 7.3h4v12.6h-4zm35.9-16.5h6.3v2h-4.3V16h-2V9.7Zm14 0h6.2V16h-2v-4.3h-4.2v-2Zm6.2 14V30h-6.2v-2h4.2v-4.3h2Zm-14 6.3h-6.2v-6.3h2v4.4h4.3v2Zm-438 .1v-8.3H9.6v-3.9h8.2V9.7h3.9v8.2h8.1v3.9h-8.1v8.3h-3.9zM93.6 9.7h-5.8v3.9h2V30h3.8V9.7zm16.1 0h-5.8v3.9h1.9V30h3.9V9.7zm-11.9 4.1h3.9v3.9h-3.9zm0 8.2h3.9v3.9h-3.9zm244.6-11.7 7.2 5.9-7.2 6v-3.6c-5.4-.4-7.8.8-8.7 2.8-.8 1.7-1.8 4.9 2.8 8.2-6.3-2-7.5-6.9-6-11.3 1.6-4.4 8-5 11.9-4.9v-3.1Zm147.2 13.4h6.3V30h-2v-4.3h-4.3v-2zm14 6.3v-6.3h6.2v2h-4.3V30h-1.9zm6.2-14h-6.2V9.7h1.9V14h4.3v2zm-13.9 0h-6.3v-2h4.3V9.7h2V16zm33.3 12.5 8.6-8.6-8.6-8.7 1.9-1.9 8.6 8.7 8.6-8.7 1.9 1.9-8.6 8.7 8.6 8.6-1.9 2-8.6-8.7-8.6 8.7-1.9-2zM297 10.3l-7.1 5.9 7.2 6v-3.6c5.3-.4 7.7.8 8.7 2.8.8 1.7 1.7 4.9-2.9 8.2 6.3-2 7.5-6.9 6-11.3-1.6-4.4-7.9-5-11.8-4.9v-3.1Zm-157.3-.6c2.3 0 4.4.7 6 2l2.5-3 1.9 9.2h-9.3l2.6-3.1a6.2 6.2 0 0 0-9.9 5.1c0 3.4 2.8 6.3 6.2 6.3 2.8 0 5.1-1.9 6-4.4h4c-1 4.7-5 8.3-10 8.3a10 10 0 0 1-10-10.2 10 10 0 0 1 10-10.2Z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 280px;
    color: transparent;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    width: 20px
}

.viewer-zoom-in:before {
    background-position: 0 0;
    content: "Zoom In"
}

.viewer-zoom-out:before {
    background-position: -20px 0;
    content: "Zoom Out"
}

.viewer-one-to-one:before {
    background-position: -40px 0;
    content: "One to One"
}

.viewer-reset:before {
    background-position: -60px 0;
    content: "Reset"
}

.viewer-prev:before {
    background-position: -80px 0;
    content: "Previous"
}

.viewer-play:before {
    background-position: -100px 0;
    content: "Play"
}

.viewer-next:before {
    background-position: -120px 0;
    content: "Next"
}

.viewer-rotate-left:before {
    background-position: -140px 0;
    content: "Rotate Left"
}

.viewer-rotate-right:before {
    background-position: -160px 0;
    content: "Rotate Right"
}

.viewer-flip-horizontal:before {
    background-position: -180px 0;
    content: "Flip Horizontal"
}

.viewer-flip-vertical:before {
    background-position: -200px 0;
    content: "Flip Vertical"
}

.viewer-fullscreen:before {
    background-position: -220px 0;
    content: "Enter Full Screen"
}

.viewer-fullscreen-exit:before {
    background-position: -240px 0;
    content: "Exit Full Screen"
}

.viewer-close:before {
    background-position: -260px 0;
    content: "Close"
}

.viewer-container {
    bottom: 0;
    direction: ltr;
    font-size: 0;
    left: 0;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    -webkit-tap-highlight-color: transparent;
    top: 0;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.viewer-container::-moz-selection, .viewer-container *::-moz-selection {
    background-color: transparent
}

.viewer-container::selection, .viewer-container *::selection {
    background-color: transparent
}

.viewer-container:focus {
    outline: 0
}

.viewer-container img {
    display: block;
    height: auto;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%
}

.viewer-canvas {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0
}

.viewer-canvas > img {
    height: auto;
    margin: 15px auto;
    max-width: 90% !important;
    width: auto
}

.viewer-footer {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: center
}

.viewer-navbar {
    background-color: #00000080;
    overflow: hidden
}

.viewer-list {
    box-sizing: content-box;
    height: 50px;
    margin: 0;
    overflow: hidden;
    padding: 1px 0
}

.viewer-list > li {
    color: transparent;
    cursor: pointer;
    float: left;
    font-size: 0;
    height: 50px;
    line-height: 0;
    opacity: .5;
    overflow: hidden;
    transition: opacity .15s;
    width: 30px
}

.viewer-list > li:focus, .viewer-list > li:hover {
    opacity: .75
}

.viewer-list > li:focus {
    outline: 0
}

.viewer-list > li + li {
    margin-left: 1px
}

.viewer-list > .viewer-loading {
    position: relative
}

.viewer-list > .viewer-loading:after {
    border-width: 2px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    width: 20px
}

.viewer-list > .viewer-active, .viewer-list > .viewer-active:focus, .viewer-list > .viewer-active:hover {
    opacity: 1
}

.viewer-player {
    background-color: #000;
    bottom: 0;
    cursor: none;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.viewer-player > img {
    left: 0;
    position: absolute;
    top: 0
}

.viewer-toolbar > ul {
    display: inline-block;
    margin: 0 auto 5px;
    overflow: hidden;
    padding: 6px 3px
}

.viewer-toolbar > ul > li {
    background-color: #00000080;
    border-radius: 50%;
    cursor: pointer;
    float: left;
    height: 24px;
    overflow: hidden;
    transition: background-color .15s;
    width: 24px
}

.viewer-toolbar > ul > li:focus, .viewer-toolbar > ul > li:hover {
    background-color: #000c
}

.viewer-toolbar > ul > li:focus {
    box-shadow: 0 0 3px #fff;
    outline: 0;
    position: relative;
    z-index: 1
}

.viewer-toolbar > ul > li:before {
    margin: 2px
}

.viewer-toolbar > ul > li + li {
    margin-left: 1px
}

.viewer-toolbar > ul > .viewer-small {
    height: 18px;
    margin-bottom: 3px;
    margin-top: 3px;
    width: 18px
}

.viewer-toolbar > ul > .viewer-small:before {
    margin: -1px
}

.viewer-toolbar > ul > .viewer-large {
    height: 30px;
    margin-bottom: -3px;
    margin-top: -3px;
    width: 30px
}

.viewer-toolbar > ul > .viewer-large:before {
    margin: 5px
}

.viewer-tooltip {
    background-color: #000c;
    border-radius: 10px;
    color: #fff;
    display: none;
    font-size: 12px;
    height: 20px;
    left: 50%;
    line-height: 20px;
    margin-left: -25px;
    margin-top: -10px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 50px
}

.viewer-title {
    color: #ccc;
    display: inline-block;
    font-size: 12px;
    line-height: 1.2;
    margin: 5px 5%;
    max-width: 90%;
    min-height: 14px;
    opacity: .8;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .15s;
    white-space: nowrap
}

.viewer-title:hover {
    opacity: 1
}

.viewer-button {
    -webkit-app-region: no-drag;
    background-color: #00000080;
    border-radius: 50%;
    cursor: pointer;
    height: 80px;
    overflow: hidden;
    position: absolute;
    right: -40px;
    top: -40px;
    transition: background-color .15s;
    width: 80px
}

.viewer-button:focus, .viewer-button:hover {
    background-color: #000c
}

.viewer-button:focus {
    box-shadow: 0 0 3px #fff;
    outline: 0
}

.viewer-button:before {
    bottom: 15px;
    left: 15px;
    position: absolute
}

.viewer-fixed {
    position: fixed
}

.viewer-open {
    overflow: hidden
}

.viewer-show {
    display: block
}

.viewer-hide {
    display: none
}

.viewer-backdrop {
    background-color: #00000080
}

.viewer-invisible {
    visibility: hidden
}

.viewer-move {
    cursor: move;
    cursor: grab
}

.viewer-fade {
    opacity: 0
}

.viewer-in {
    opacity: 1
}

.viewer-transition {
    transition: all .3s
}

@keyframes viewer-spinner {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.viewer-loading:after {
    animation: viewer-spinner 1s linear infinite;
    border: 4px solid rgba(255, 255, 255, .1);
    border-left-color: #ffffff80;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 40px;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    width: 40px;
    z-index: 1
}

@media (max-width: 767px) {
    .viewer-hide-xs-down {
        display: none
    }
}

@media (max-width: 991px) {
    .viewer-hide-sm-down {
        display: none
    }
}

@media (max-width: 1199px) {
    .viewer-hide-md-down {
        display: none
    }
}

.slider-target, .slider-target * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.slider-target {
    position: relative
}

.slider-base, .slider-connects {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1
}

.slider-connects {
    overflow: hidden;
    z-index: 0
}

.slider-connect, .slider-origin {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    transform-style: flat;
    width: 100%;
    will-change: transform;
    z-index: 1
}

.slider-txt-dir-rtl.slider-horizontal .slider-origin {
    left: 0;
    right: auto
}

.slider-vertical .slider-origin {
    top: -100%;
    width: 0
}

.slider-horizontal .slider-origin {
    height: 0
}

.slider-handle {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute
}

.slider-touch-area {
    height: 100%;
    width: 100%
}

.slider-state-tap .slider-connect, .slider-state-tap .slider-origin {
    transition: transform .3s
}

.slider-state-drag * {
    cursor: inherit !important
}

.slider-tooltip-drag .slider-tooltip, .slider-tooltip-focus .slider-tooltip {
    display: none !important
}

.slider-tooltip-drag .slider-active .slider-tooltip, .slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden), .slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden) {
    display: block !important
}

.slider-horizontal {
    height: var(--slider-height, 6px)
}

.slider-horizontal .slider-handle {
    height: var(--slider-handle-height, 16px);
    right: calc(var(--slider-handle-width, 16px) / 2 * -1);
    top: calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 * -1 + -1px);
    width: var(--slider-handle-width, 16px)
}

.slider-vertical {
    height: var(--slider-vertical-height, 300px);
    width: var(--slider-height, 6px)
}

.slider-vertical .slider-handle {
    bottom: calc(var(--slider-handle-width, 16px) / 2 * -1);
    height: var(--slider-handle-width, 16px);
    right: calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 * -1 + -1px);
    width: var(--slider-handle-height, 16px)
}

.slider-txt-dir-rtl.slider-horizontal .slider-handle {
    left: calc(var(--slider-handle-width, 16px) / 2 * -1);
    right: auto
}

.slider-base {
    background-color: var(--slider-bg, #d1d5db)
}

.slider-base, .slider-connects {
    border-radius: var(--slider-radius, 9999px)
}

.slider-connect {
    background: var(--slider-connect-bg, #10b981);
    cursor: pointer
}

.slider-draggable {
    cursor: ew-resize
}

.slider-vertical .slider-draggable {
    cursor: ns-resize
}

.slider-handle {
    background: var(--slider-handle-bg, #fff);
    border: var(--slider-handle-border, 0);
    border-radius: var(--slider-handle-radius, 9999px);
    box-shadow: var(--slider-handle-shadow, .5px .5px 2px 1px rgba(0, 0, 0, .32));
    cursor: -webkit-grab;
    cursor: grab;
    height: var(--slider-handle-height, 16px);
    width: var(--slider-handle-width, 16px)
}

.slider-handle:focus {
    box-shadow: 0 0 0 var(--slider-handle-ring-width, 3px) var(--slider-handle-ring-color, rgba(16, 185, 129, .188)), var(--slider-handle-shadow, .5px .5px 2px 1px rgba(0, 0, 0, .32));
    outline: none
}

.slider-active {
    box-shadow: var(--slider-handle-shadow-active, .5px .5px 2px 1px rgba(0, 0, 0, .42));
    cursor: -webkit-grabbing;
    cursor: grabbing
}

[disabled] .slider-connect {
    background: var(--slider-connect-bg-disabled, #9ca3af)
}

[disabled] .slider-handle, [disabled].slider-handle, [disabled].slider-target {
    cursor: not-allowed
}

[disabled] .slider-tooltip {
    background: var(--slider-tooltip-bg-disabled, #9ca3af);
    border-color: var(--slider-tooltip-bg-disabled, #9ca3af)
}

.slider-tooltip {
    background: var(--slider-tooltip-bg, #10b981);
    border: 1px solid var(--slider-tooltip-bg, #10b981);
    border-radius: var(--slider-tooltip-radius, 5px);
    color: var(--slider-tooltip-color, #fff);
    display: block;
    font-size: var(--slider-tooltip-font-size, .875rem);
    font-weight: var(--slider-tooltip-font-weight, 600);
    line-height: var(--slider-tooltip-line-height, 1.25rem);
    min-width: var(--slider-tooltip-min-width, 20px);
    padding: var(--slider-tooltip-py, 2px) var(--slider-tooltip-px, 6px);
    position: absolute;
    text-align: center;
    white-space: nowrap
}

.slider-horizontal .slider-tooltip-top {
    bottom: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
    left: 50%;
    transform: translate(-50%)
}

.slider-horizontal .slider-tooltip-top:before {
    border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
    border-top-color: inherit;
    bottom: calc(var(--slider-tooltip-arrow-size, 5px) * -2);
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    width: 0
}

.slider-horizontal .slider-tooltip-bottom {
    left: 50%;
    top: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
    transform: translate(-50%)
}

.slider-horizontal .slider-tooltip-bottom:before {
    border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
    border-bottom-color: inherit;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: calc(var(--slider-tooltip-arrow-size, 5px) * -2);
    transform: translate(-50%);
    width: 0
}

.slider-vertical .slider-tooltip-left {
    right: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
    top: 50%;
    transform: translateY(-50%)
}

.slider-vertical .slider-tooltip-left:before {
    border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
    border-left-color: inherit;
    content: "";
    height: 0;
    position: absolute;
    right: calc(var(--slider-tooltip-arrow-size, 5px) * -2);
    top: 50%;
    transform: translateY(-50%);
    width: 0
}

.slider-vertical .slider-tooltip-right {
    left: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
    top: 50%;
    transform: translateY(-50%)
}

.slider-vertical .slider-tooltip-right:before {
    border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
    border-right-color: inherit;
    content: "";
    height: 0;
    left: calc(var(--slider-tooltip-arrow-size, 5px) * -2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0
}

.slider-horizontal .slider-origin > .slider-tooltip {
    left: auto;
    transform: translate(50%)
}

.slider-horizontal .slider-origin > .slider-tooltip-top {
    bottom: calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 + var(--slider-tooltip-distance, 3px) + 1px)
}

.slider-horizontal .slider-origin > .slider-tooltip-bottom {
    top: calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px)
}

.slider-vertical .slider-origin > .slider-tooltip {
    top: auto;
    transform: translateY(calc((var(--slider-tooltip-line-height, 1.25rem) - var(--slider-tooltip-py, 2px)) * -1 + 1px))
}

.slider-vertical .slider-origin > .slider-tooltip-left {
    right: calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 + var(--slider-tooltip-distance, 3px) - 1px)
}

.slider-vertical .slider-origin > .slider-tooltip-right {
    left: calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px)) / 2 + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px)
}

@font-face {
    font-family: Pelak;
    font-style: normal;
    font-weight: 100;
    src: url(fonts/PelakFA-Thin.woff2) format("woff2"), url(fonts/PelakFA-Thin.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family: Pelak;
    font-style: normal;
    font-weight: 500;
    src: url(fonts/PelakFA-SemiBold.woff2) format("woff2"), url(fonts/PelakFA-SemiBold.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family: Pelak;
    font-style: normal;
    font-weight: 300;
    src: url(fonts/PelakFA-Regular.woff2) format("woff2"), url(fonts/PelakFA-Regular.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family: Pelak;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/PelakFA-Medium.woff2) format("woff2"), url(fonts/PelakFA-Medium.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family: Pelak;
    font-style: normal;
    font-weight: 200;
    src: url(fonts/PelakFA-light.woff2) format("woff2"), url(fonts/PelakFA-light.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family: Pelak;
    font-style: normal;
    font-weight: 700;
    src: url(fonts/PelakFA-ExtraBold.woff2) format("woff2"), url(fonts/PelakFA-ExtraBold.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family: Pelak;
    font-style: normal;
    font-weight: 600;
    src: url(fonts/PelakFA-Bold.woff2) format("woff2"), url(fonts/PelakFA-Bold.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family: Pelak;
    font-style: normal;
    font-weight: 800;
    src: url(fonts/PelakFA-Black.woff2) format("woff2"), url(fonts/PelakFA-Black.woff) format("woff");
    font-display: swap
}

html {
    height: 100vh;
    overflow-x: hidden;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

html * {
    font-family: Pelak, sans-serif
}

html::-webkit-scrollbar {
    width: 5px
}

html::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

html::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 10px;
    height: 80%
}

html::-webkit-scrollbar-thumb:hover {
    background-color: #30357c
}

.noscrollbar {
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.noscrollbar::-webkit-scrollbar {
    width: 0
}

.noscrollbar::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.noscrollbar::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.noscrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.font-initial, .font-initial * {
    font-family: Arial, Helvetica, sans-serif
}

.rtl {
    direction: rtl !important
}

.ltr {
    direction: ltr !important
}

.fullpage {
    height: 100vh !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important
}

.center-all {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center
}

.text-justify {
    text-align: justify !important
}

.text-disable {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.h-80 {
    height: 80%
}

.h-100v {
    height: 100vh
}

.h-99v {
    height: 99vh
}

.h-95v {
    height: 95vh
}

.h-90v {
    height: 90vh
}

.h-75v {
    height: 75vh
}

.h-50v {
    height: 50vh
}

.w-100v {
    height: 100vw
}

a {
    text-decoration: none
}

.font-sm, .font-smaller, .fs-7 {
    font-size: smaller
}

.font-xs, .font-small, .fs-7 {
    font-size: small
}

.font-bold {
    font-weight: 500 !important
}

.pointer, .pointer * {
    cursor: pointer
}

.scroll-x {
    overflow-x: scroll
}

.scroll-y {
    overflow-y: scroll
}

.border-rad-4 {
    border-radius: 4px
}

.border-rad-8 {
    border-radius: 8px
}

.border-rad-12 {
    border-radius: 12px
}

.border-rad-16 {
    border-radius: 16px
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

.structure {
    justify-content: space-around
}

#app {
    display: flex;
    text-align: center;
    background-color: #fff;
    height: -webkit-fill-available
}

@media screen and (max-width: 1360px) {
    #app {
        min-height: unset;
        height: unset
    }

    #RightSidebar{
        display:none!important;
    }

    .TabletSidebar{
        display:flex!important;
    }
}

#app .navbar--hidden {
    box-shadow: none;
    transform: translate3d(0, -100%, 0);
    display: none !important
}

#app .header {
    height: 201px;
    display: flex;
    border-radius: 0 0 24px 24px;
    position: absolute;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 0 7px 50px #00569fa3;
    background-image: url(../images/header3.svg);
    background-size: cover;
    background-position: center
}

#app .header .header-logo img {
    width: 146px !important;
}

@media screen and (max-width: 1360px) {
    #app .header {
        background-color: #fff;
        background-image: none;
        border-radius: 0;
        height: 80px;
        transform: translateZ(0);
        transition: .1s all ease-out;
        z-index: 33;
        justify-content: start;
        filter: none;
        position: absolute;
        box-shadow: none;
        border-bottom: 1px solid #f2f3f6
    }

    #app .header .header-logo {
        display: none !important
    }

    #app .header .header-icone, #app .header .header-icone .notfication, #app .header .header-icone .signout {
        margin-top: 0 !important
    }

    #app .header .divider {
        display: flex !important;
        background-color: #f2f3f6;
        border-radius: 24px 24px 0 0;
        height: 1px;
        position: absolute;
        bottom: 0
    }
}

@media screen and (max-width: 768px) {
    #app .header {
        position: fixed;
        height: 60px !important;
        justify-content: space-between;
        align-items: center;
        box-shadow: -14px 9px 40px 1px #30357c0a
    }
}

#app .header-icone {
    justify-content: center;
    align-items: center;
    display: none !important;
    height: 100%
}

@media screen and (max-width: 1360px) {
    #app .header-icone {
        display: flex !important;
        justify-content: space-between
    }
}

@media screen and (max-width: 768px) {
    #app .header-icone {
        justify-content: space-between;
        width: 100% !important;
        margin-bottom: 0 !important;
        padding-right: 0
    }

    #app .header-icone .notfication img {
        width: 100%;
        height: 100%
    }
}

#app .header-icone .notification {
    justify-content: center;
    align-items: center;
    background-color: #ffffff14;
    border: 2px solid rgba(255, 255, 255, .08);
    box-sizing: border-box;
    border-radius: 32px;
    padding: 8px !important
}

#app .header-icone .notification .hambergerFilterIcon {
    border: none;
    background-color: transparent
}

#app .header-icone .notification .closed {
    display: flex
}

#app .header-icone .notification .open {
    display: none
}

#app .header-icone .notification .collapsed .open {
    display: flex
}

#app .header-icone .notification .collapsed .closed {
    display: none
}

@media screen and (max-width: 1360px) {
    #app .header-icone .notification {
        margin-right: 0 !important
    }
}

@media screen and (max-width: 1360px) {
    #app .header-icone .notification svg {
        filter: invert(100%) sepia(53%) saturate(13%) hue-rotate(99deg) brightness(150%) contrast(88%)
    }
}

@media screen and (max-width: 480px) {
    #app .header-icone .notification {
        background-color: unset;
        border: none;
        margin-right: 0 !important
    }
}

#app .header-icone .signout {
    justify-content: center;
    align-items: center;
    background-color: #ffffff14;
    border: 2px solid rgba(255, 255, 255, .08);
    box-sizing: border-box;
    border-radius: 32px;
    padding: 8px !important;
    width: 55px;
    height: 55px
}

@media screen and (max-width: 1360px) {
    #app .header-icone .signout {
        margin-left: 0 !important
    }
}

@media screen and (max-width: 1360px) {
    #app .header-icone .signout img {
        filter: invert(100%) sepia(53%) saturate(13%) hue-rotate(99deg) brightness(150%) contrast(88%)
    }
}

@media screen and (max-width: 480px) {
    #app .header-icone .signout {
        background-color: unset;
        border: none;
        width: 45px;
        height: 45px;
        margin-left: 0 !important
    }
}

.NiceButton {
    position: relative
}

.NiceButton button, .NiceButton a {
    background: inherit;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    border: 2px solid #3d3d3d;
    z-index: 1
}

.NiceButton div {
    position: absolute;
    height: 64px;
    background: #028bff;
    border-radius: 24px;
    z-index: 0;
    top: 5px;
    left: 6px
}

#deviceTopBar {
    height: 100%;
    min-height: inherit
}

.sidebar .shadowDivider {
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.sidebar .shadowDivider::-webkit-scrollbar {
    width: 0px
}

.sidebar .shadowDivider::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.sidebar .shadowDivider::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.sidebar .shadowDivider::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

#desktop #RightSidebar, #desktop #MainContent, #desktop #LeftSidebar {
    margin-top: 97px !important;
    height: fit-content;
    min-height: calc(100vh - 97px)
}

#desktop #LeftSidebar {
    overflow-y: scroll;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

#desktop #LeftSidebar::-webkit-scrollbar {
    width: 0px
}

#desktop #LeftSidebar::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

#desktop #LeftSidebar::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

#desktop #LeftSidebar::-webkit-scrollbar {
    width: 5px
}

#desktop #LeftSidebar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

#desktop #LeftSidebar::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

#desktop #LeftSidebar::-webkit-scrollbar-thumb:hover {
    background-color: #4fc3f7
}

#desktop #MainContent .centercontent, #desktop .sidebar, #desktop .orderstatus {
    border-radius: 24px
}

#tablet #RightSidebar, #tablet #MainContent, #tablet #LeftSidebar {
    margin-top: 97px !important;
    height: fit-content;
    min-height: 100vh
}

@media screen and (max-width: 1360px) {
    #tablet #MainContent .centercontent {
        border-radius: 0;
        height: fit-content;
        justify-content: start
    }

    #tablet #MainContent .sidebar, #tablet #MainContent .sidebar .status {
        border-radius: 0
    }
}

#mobile #MainContent {
    margin-top: 60px;
    height: 85vh
}

#mobile .dividerMobile {
    display: flex !important;
    height: 1px;
    background: #f2f3f6
}

@media screen and (max-width: 414px) {
    #mobile #MainContent {
        height: 81vh
    }
}

#MobileMenu {
    justify-content: space-evenly
}

#MobileMenu .menu-item-title {
    font-size: small;
    padding-top: 6px;
    color: #3f607c
}

#MobileMenu .router-link-exact-active .menu-item-title {
    color: unset
}

.userPanelPage #MainContent {
    margin-top: 0 !important
}

@media screen and (max-width: 1360px) {
    .userPanelPage .centercontent .LeftsideGhestacard {
        display: none !important
    }

    .userPanelPage .centercontent .modal-body .LeftsideGhestacard {
        display: flex !important
    }

    .userPanelPage #MainContent {
        width: 88%
    }
}

@media screen and (max-width: 768px) {
    .userPanelPage #MainContent {
        width: 100%
    }

    .userPanelPage .header {
        display: none !important
    }
}

@media screen and (max-width: 414px) {
    .userPanelPage #MainContent,#desktop #MainContent {
        margin-top: 17px !important;
        height: calc(100vh - 73px) !important
    }
}

.divider {
    background: #f7f7f7;
    border-radius: 8px;
    height: 1px
}

.sidebar {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    position: relative;
    flex-direction: column;
    height: fit-content;
    min-height: inherit
}

@media screen and (max-width: 1360px) {
    .sidebar {
        width: 18vw !important
    }
}

.sidebar .status {
    align-items: center;
    height: 104px;
    background: linear-gradient(92.86deg, #fff9ef -36.94%, #e9f1f5 -3.17%, #c6e5ff 34.45%, #fff9ef 153.42%);
    border-radius: 24px 24px 0 0
}

.sidebar .status .Main {
    background: linear-gradient(97.16deg, #e8f5ff -10.55%, #fff 56.12%, #fff 84.25%, #fff 106.88%);
    border: 1px solid #c6e5ff;
    border-radius: 24px;
    direction: rtl
}

.sidebar .status .Main .ProfilePic {
    position: relative
}

.sidebar .status .Main .ProfilePic .Status {
    position: absolute;
    left: -5px;
    bottom: 0
}

.sidebar .status .Main .Description .statustext {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    text-align: right;
    color: #00569f
}

.sidebar .status .Main .Description .userstatus {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #00569f
}

.sidebar .status .Main button {
    border: none;
    background: #028bff;
    box-shadow: -1px 7px 24px 1px #028bff47;
    border-radius: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width: 1600px) {
    .sidebar .status .Main {
        width: 100% !important
    }

    .sidebar .status .Main .ProfilePic img {
        width: 95%
    }

    .sidebar .status .Main .ProfilePic .Status {
        width: 50%
    }

    .sidebar .status .Main .Description .statustext {
        font-size: 14px
    }

    .sidebar .status .Main .Description .userstatus {
        font-size: 10px
    }

    .sidebar .status .Main button {
        width: 35px;
        height: 35px;
        border-radius: 13px
    }
}

.sidebar .divider {
    background: #f2f3f6;
    border-radius: 24px;
    transform: scaleY(-1);
    height: 1px;
    align-items: center;
    box-shadow: 0 -3px 36px 1px #30357c0f
}

.sidebar .shadowDivider {
    background-color: #fff;
    border-radius: 0 0 24px 24px;
    justify-content: flex-start !important
}

.sidebar .sidebar-item {
    align-items: center;
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    line-height: 30px;
    text-align: right;
    color: #00569f;
    border-radius: 24px;
    margin: 10px 5px !important;
    padding: 10px !important;
    text-decoration: none
}

.sidebar .sidebar-item svg {
    padding: .1vw
}

.sidebar .sidebar-item p {
    -webkit-user-select: none;
    user-select: none
}

.sidebar .sidebar-contactus {
    align-items: center
}

.sidebar .sidebar-contactus p {
    font-style: normal;
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 30px;
    text-align: right;
    color: #002c51
}

@media screen and (max-width: 1360px) {
    .sidebar .sidebar-contactus p {
        font-size: 1.3vw
    }
}

.sidebar .router-link-exact-active {
    background: #edf7ff;
    border: 1px solid #c6e5ff;
    box-sizing: border-box;
    border-radius: 24px;
    align-items: center;
    font-style: normal;
    font-weight: 500;
    text-align: right;
    color: #028bff;
    font-size: 1rem;
    line-height: 30px;
    margin: 10px 5px !important;
    padding: 10px !important;
    text-decoration: none
}

.sidebar .router-link-exact-active p {
    -webkit-user-select: none;
    user-select: none
}

@media screen and (max-width: 1360px) {
    .sidebar .router-link-exact-active svg {
        margin-left: 1vw !important;
        padding-right: .5vw !important
    }
}

@media screen and (max-width: 1360px) {
    .sidebar .router-link-exact-active {
        font-size: 1.3vw
    }

    .sidebar .router-link-exact-active svg {
        padding: .3vw !important
    }
}

@media screen and (max-width: 992px) {
    .sidebar .router-link-exact-active {
        font-size: 1.5vw
    }
}

@media screen and (max-width: 768px) {
    .sidebar .router-link-exact-active {
        font-size: 1.8vw
    }
}

.sidebar .LogOut {
    background-color: unset;
    border: none
}

.sidebar .LogOut p {
    color: #ff6f5e !important
}

.AdminSidebar .shadowDivider .sidebar-item {
    font-weight: 400;
    font-size: .9rem;
    margin: 0 !important;
    padding: 10px !important;
    text-decoration: none
}

.AdminSidebar .shadowDivider .sidebar-item p {
    color: #002c51
}

.AdminSidebar .shadowDivider .sidebar-item svg {
    padding: 8px !important;
    width: 40px;
    height: 40px;
    background: #f7f7f7;
    border: 1px solid #f7f7f7;
    border-radius: 16px
}

.AdminSidebar .shadowDivider .admin_dropdown_item .down {
    background-color: transparent;
    padding: 0;
    border: none;
    transition: transform .35s ease
}

.AdminSidebar .shadowDivider .admin_dropdown_item .collapsing {
    width: 100% !important
}

.AdminSidebar .shadowDivider .admin_dropdown_item .collapsed .down {
    transform: none !important;
    transition: transform .35s ease
}

.AdminSidebar .shadowDivider .admin_dropdown_item .dropdown {
    border-right: 1px solid #e4e4e4;
    width: 80%;
    margin-right: 30px
}

.AdminSidebar .shadowDivider .admin_dropdown_item .dropdown svg {
    display: none
}

.AdminSidebar .shadowDivider .router-link-exact-active {
    font-weight: 400;
    font-size: .9rem;
    border: none;
    background-color: unset
}

.AdminSidebar .shadowDivider .router-link-exact-active p {
    color: #028bff
}

.AdminSidebar .shadowDivider .router-link-exact-active svg {
    padding: 8px !important;
    width: 40px;
    height: 40px;
    background: #edf7ff;
    border: 1px solid #b3dcff;
    border-radius: 16px
}

.AdminSidebar .shadowDivider::-webkit-scrollbar {
    width: 5px
}

.AdminSidebar .shadowDivider::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

.AdminSidebar .shadowDivider::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.AdminSidebar .shadowDivider::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.AdminSidebar::-webkit-scrollbar {
    width: 0
}

.AdminSidebar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

.AdminSidebar::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.AdminSidebar::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.TabletSidebar {
    display:none;
    right: 0;
    z-index: 34;
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    width: 11vw !important;
    min-height: 600px !important;
    height: 100vh;
    overflow-y: scroll;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.TabletSidebar::-webkit-scrollbar {
    width: 0px
}

.TabletSidebar::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.TabletSidebar .logo {
    min-height: 80px
}

.TabletSidebar .divider {
    background-color: #f2f3f6;
    border-radius: 24px 24px 0 0;
    height: 1px
}

.TabletSidebar .user {
    background-color: #f0fdfa;
    border-radius: 100%
}

.TabletSidebar button {
    border: none;
    background-color: unset;
    max-width: 60px;
    min-width: 60px;
    max-height: 60px;
    min-height: 60px
}

.TabletSidebar button .img {
    max-width: 30px;
    min-width: 30px;
    max-height: 30px;
    min-height: 30px
}

.TabletSidebar .router-link-exact-active {
    border-right: 5px solid #028bff;
    border-radius: 0 5px 5px 0;
    padding: 5px 0
}

.TabletSidebar .activeDiv {
    background-color: #028bff;
    box-shadow: -5px 0 16px 1px #028bff3d;
    border-radius: 0 55px 55px 0;
    transform: rotate(180deg);
    width: 6% !important;
    height: 40px
}

.TabletSidebar::-webkit-scrollbar {
    width: 0
}

.TabletSidebar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

.TabletSidebar::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.TabletSidebar::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.mobile-sidebar
{
    display: none !important
}

.collapsing {
    width: fit-content !important
}

.collapsing, .collapse-horizontal {
    -webkit-transition: width .1s ease !important;
    -o-transition: width .1s ease !important;
    transition: width .1s ease !important
}

.HambergerLeftside {
    position: absolute;
    left: 0;
    top: 80px;
    height: calc(100vh - 80px);
    max-width: 360px;
    min-width: 360px;
    box-shadow: 0 -3px 36px 1px #30357c12;
    background-color: #fff;
    border-radius: 0 24px 24px 0
}

.HambergerLeftside .Tablet {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.HambergerLeftside .Tablet::-webkit-scrollbar {
    width: 0px
}

.HambergerLeftside .Tablet::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.HambergerLeftside .Tablet::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.HambergerLeftside .Tablet::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.HambergerLeftside .Tablet {
    border-radius: 0 24px 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center
}

.HambergerLeftside .Tablet form {
    height: 100%;
    width: 100%
}

.HambergerLeftside .shadowDivider {
    display: none
}

.HambergerLeftside .under {
    border: none !important
}

.HambergerMenu {
    position: absolute;
    right: 0;
    top: 80px;
    max-width: 360px;
    min-width: 360px;
    box-shadow: 0 -3px 36px 1px #30357c12;
    background-color: #fff;
    border-radius: 24px 0 0 24px;
    z-index: 1;
    height: calc(100vh - 80px)
}

.HambergerMenu .boot {
    height: 100%
}

.HambergerMenu .sidebar {
    display: flex !important;
    width: 100% !important;
    height: 100%;
    box-shadow: none
}

.HambergerMenu .sidebar .status {
    border-radius: 24px 0 0
}

.HambergerMenu .sidebar .divider {
    display: none !important
}

.HambergerMenu .sidebar .shadowDivider {
    height: 100%;
    max-height: calc(100vh - 190px)
}

@media screen and (max-width: 1360px) {
    .boot {
        width: 100%
    }
}


@media screen and (max-width: 768px) {
    #RightSidebar,.TabletSidebar {
        display:none!important;
    }

    .sidebar {
        display: none !important
    }

    .mobile-sidebar {
        display: flex !important;
        background: #fff;
        border: 1px solid #f2f3f6;
        box-sizing: border-box;
        box-shadow: -14px -8px 32px 1px #30357c08;
        border-radius: 24px 24px 0 0;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 24px;
        z-index: 5;
        color: #00569f;
        position: fixed;
        bottom: 0
    }

    .mobile-sidebar p {
        opacity: .55
    }

    .mobile-sidebar .neworder {
        border-radius: 100%;
        background-color: #fff;
        box-shadow: -14px 9px 40px 1px #30357c0a
    }

    .mobile-sidebar img {
        width: 24px;
        height: 30px
    }

    .mobile-sidebar .item-selected p {
        opacity: 1;
        font-weight: 600
    }

    .mobile-sidebar .LogOut {
        background-color: unset;
        border: none
    }

    .mobile-sidebar .LogOut p {
        color: #ff6f5e
    }

    .HambergerLeftside, .HambergerMenu {
        top: 60px
    }
}

@media screen and (max-width: 480px) {
    .mobile-sidebar {
        font-size: 3.3vw;
        line-height: 24px
    }
}

@media screen and (max-width: 414px) {
    .HambergerMenu, .HambergerLeftside {
        height: calc(100vh - 120px)
    }

    .HambergerMenu .sidebar .shadowDivider, .HambergerLeftside .sidebar .shadowDivider {
        max-height: calc(100vh - 225px)
    }
}

.Faq {
    background-image: url(../images/Sidebar/Bottom/Background.svg);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    min-height: 200px;
    border-radius: 24px;
    direction: rtl;
    margin-top: 60px !important;
    max-width: fit-content
}

.Faq .question {
    position: absolute;
    top: -25px
}

.Faq .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: right;
    color: #3d3d3d
}

.Faq .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #8b8b8b;
    max-width: 280px
}

.Faq button {
    background: #fff;
    box-shadow: 0 15px 20px #0000000f;
    border-radius: 16px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d
}

.Faq .CALL {
    background: #fff;
    box-shadow: 0 15px 20px #0000000f;
    border-radius: 16px;
    border: none
}

.Faq .CALL a {
    direction: ltr;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d;
    display: flex;
    align-items: center;
    justify-content: center
}

.centercontent {
    background: #fff;
    border-radius: 24px;
    position: relative;
    align-items: center;
    height: fit-content;
    min-height: inherit
}

@media screen and (min-width: 1360px) {
    .centercontent {
        height: fit-content;
        padding: 0 !important
    }
}

.centercontent .CenterUpBar {
    background: #fff;
    height: 104px;
    min-height: 104px;
    border-radius: 24px 24px 0 0;
    border-bottom: 1px solid #f2f3f6
}

.centercontent .CenterUpBar .notif {
    width: 40px;
    height: 40px;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 20px
}

@media screen and (max-width: 1360px) {
    .centercontent .CenterUpBar {
        display: none !important
    }
}

.centercontent .upshadow {
    box-shadow: 0 -33px 36px 1px #30357c0f;
    width: 100%;
    height: fit-content;
    background-color: #fff;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.centercontent .upshadow::-webkit-scrollbar {
    width: 0px
}

.centercontent .upshadow::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.centercontent .upshadow::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.centercontent .upshadow::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

@media screen and (max-width: 1360px) {
    .centercontent .upshadow {
        box-shadow: none;
        background-color: #fff;
        width: 100%
    }
}

@media screen and (max-width: 1360px) {
    .centercontent .upshadow {
        height: 100%
    }
}

.centercontent #upshadow::-webkit-scrollbar {
    width: 3px
}

.centercontent #upshadow::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

.centercontent #upshadow::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.centercontent #upshadow::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.centercontent #contain {
    height: fit-content;
    margin-top: 1px
}

@media screen and (min-width: 1360px) {
    .centercontent #contain {
        height: 100%
    }
}

@media screen and (max-width: 1360px) {
    .centercontent #contain {
        max-height: fit-content;
        min-height: 615px;
        margin-top: 15px;
        height: fit-content;
        top: 0
    }
}

@media screen and (max-width: 768px) {
    .centercontent #contain {
        height: fit-content;
        padding: 0 0 80px !important;
        margin: 0;
        min-height: fit-content
    }
}

@media screen and (max-width: 1360px) {
    .centercontent {
        justify-content: flex-start
    }
}

@media screen and (max-width: 768px) {
    .centercontent {
        position: relative;
        padding: 0 !important;
        height: 100%;
        width: 100% !important
    }

    .centercontent #contain::-webkit-scrollbar-track {
        display: none
    }

    .centercontent #contain::-webkit-scrollbar-thumb {
        display: none
    }

    .centercontent .orderstate {
        flex-direction: row !important;
        background: #fff;
        box-sizing: border-box;
        border-radius: 24px;
        justify-content: center;
        align-items: center;
        text-align: start
    }

    .centercontent .orderstate img {
        max-width: 75px
    }

    .centercontent .orderstate .text1 {
        font-style: normal;
        font-weight: 200;
        font-size: 15px;
        line-height: 24px;
        align-items: center;
        text-align: right !important;
        color: #028bff
    }

    .centercontent .orderstate .orderstate-text {
        padding-right: unset !important
    }

    .centercontent .text2 {
        font-style: normal;
        font-weight: 400;
        font-size: 17px;
        line-height: 28px;
        align-items: center;
        text-align: right !important;
        color: #028bff
    }
}

.orderstatus {
    height: max-content;
    position: relative;
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    border: 1px solid #f2f3f6;
    flex-direction: column
}

@media screen and (max-width: 768px) {
    .orderstatus {
        position: unset;
        z-index: 22;
        margin-top: 0 !important
    }
}

.orderstatus .orderstatus-state {
    align-items: center
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-state {
        position: relative
    }

    .orderstatus .orderstatus-state .state-image {
        background: #fff !important;
        box-shadow: -5px 9px 20px 1px #028bff0d;
        border-radius: 24px
    }

    .orderstatus .orderstatus-state .state-image img {
        padding: 3vw !important
    }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
    .orderstatus .orderstatus-state .state-image {
        width: 55px
    }

    .orderstatus .orderstatus-state .state-image img {
        padding: 13px !important
    }
}

@media screen and (max-width: 768px) and (max-width: 480px) {
    .orderstatus .orderstatus-state .state-image {
        width: 45px
    }

    .orderstatus .orderstatus-state .state-image img {
        padding: 10px !important
    }
}

.orderstatus .orderstatus-state .orderstatus-state-cta {
    z-index: 0;
    background: #fff !important;
    position: absolute;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c14;
    border-radius: 24px;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    height: fit-content;
    text-align: start
}

.orderstatus .orderstatus-state .orderstatus-state-cta .detail {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    background: #fff !important
}

.orderstatus .orderstatus-state .orderstatus-state-cta .detail img {
    background: #fff !important
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-state .orderstatus-state-cta .detail {
        font-size: 3.5vw
    }
}

.orderstatus .orderstatus-state .orderstatus-state-cta .mypay {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    background: #fff !important
}

.orderstatus .orderstatus-state .orderstatus-state-cta .mypay img {
    background: #fff !important
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-state .orderstatus-state-cta .mypay {
        font-size: 3.5vw
    }
}

.orderstatus .orderstatus-state .orderstatus-state-cta .cancell {
    display: flex;
    border: none;
    justify-content: start;
    align-items: center;
    font-size: .8rem;
    color: #ff6f5e;
    background: #fff !important
}

.orderstatus .orderstatus-state .orderstatus-state-cta .cancell img {
    background: #fff !important
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-state .orderstatus-state-cta .cancell {
        font-size: 3.5vw
    }
}

.orderstatus .orderstatus-state .orderstatus-state-cta .divider {
    background: #3d3d3d;
    opacity: .1;
    border-radius: 24px;
    height: 1px !important;
    margin: auto
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-state .orderstatus-state-cta img {
        width: 60px !important
    }

    .orderstatus .orderstatus-state .orderstatus-state-cta p {
        font-size: 16px
    }
}

@media screen and (max-width: 480px) {
    .orderstatus .orderstatus-state .orderstatus-state-cta img {
        width: 33.33% !important
    }

    .orderstatus .orderstatus-state .orderstatus-state-cta p {
        font-size: 3.5vw
    }
}

.orderstatus .orderstatus-state .state {
    align-items: center;
    justify-content: center;
    height: 102px;
    padding-top: 10px !important
}

.orderstatus .orderstatus-state .state .p {
    font-style: normal;
    font-weight: 700;
    font-size: 18px
}

.orderstatus .orderstatus-state .state .t1 {
    text-align: start;
    font-weight: 300;
    font-size: 14px;
    color: #8b8b8b;
    -webkit-user-select: none;
    user-select: none;
    direction: rtl
}

.orderstatus .orderstatus-state .state .t2 {
    text-align: start;
    font-weight: 400;
    font-size: 16px;
    color: #3d3d3d;
    -webkit-user-select: none;
    user-select: none
}

.orderstatus .orderstatus-state .state .orderstatus-state-cta-button {
    border: none
}

.orderstatus .orderstatus-state .state .orderstatus-state-cta-button svg {
    display: none !important
}

.orderstatus .orderstatus-state .state .orderstatus-state-cta-button {
    background-size: 100% 100%;
    background: url(../images/neworder/orderstatus-state-cta-close.svg) no-repeat;
    width: 32px;
    height: 32px
}

.orderstatus .orderstatus-state .state .orderstatus-state-cta-button p {
    display: none
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-state .state .orderstatus-state-cta-button {
        background-color: unset !important;
        box-sizing: border-box;
        border-radius: 12px
    }
}

.orderstatus .orderstatus-state .state .collapsed {
    background-image: none;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    width: fit-content;
    height: fit-content;
    border: 1px solid #3d3d3d
}

.orderstatus .orderstatus-state .state .collapsed p {
    display: block;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px
}

.orderstatus .orderstatus-state .state .collapsed svg {
    display: flex !important
}

.orderstatus .orderstatus-state .less-detail {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    font-weight: 600;
    box-shadow: 0 -100px 36px 1px #30357c08
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-state .less-detail {
        box-shadow: none
    }
}

.orderstatus .orderstatus-state .less-detail .t3 {
    font-size: 24px;
    line-height: 44px;
    -webkit-user-select: none;
    user-select: none
}

@media screen and (max-width: 1600px) {
    .orderstatus .orderstatus-state .less-detail .t3 {
        font-size: 1.3vw
    }
}

@media screen and (max-width: 1360px) {
    .orderstatus .orderstatus-state .less-detail .t3 {
        font-size: 1.7vw
    }
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-state .less-detail .t3 {
        font-size: 28px;
        line-height: 75px
    }
}

@media screen and (max-width: 480px) {
    .orderstatus .orderstatus-state .less-detail .t3 {
        font-size: 6vw;
        line-height: 44px
    }
}

.orderstatus .orderstatus-state .less-detail .t4 {
    font-weight: 400;
    font-size: .7vw;
    line-height: 24px
}

@media screen and (max-width: 1600px) {
    .orderstatus .orderstatus-state .less-detail .t4 {
        font-size: .9vw
    }
}

@media screen and (max-width: 1360px) {
    .orderstatus .orderstatus-state .less-detail .t4 {
        font-size: 1.1vw
    }
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-state .less-detail .t4 {
        font-size: 3vw;
        margin-right: -3vw !important
    }
}

@media screen and (max-width: 480px) {
    .orderstatus .orderstatus-state .less-detail .t4 {
        font-size: 3.5vw
    }
}

.orderstatus .orderstatus-state .less-detail .money {
    background: #f2f3f6;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    user-select: none
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-state .less-detail .money {
        background-color: #3d3d3d14
    }
}

.orderstatus .orderstatus-state .less-detail .tags div {
    background: #f7f7f7;
    border-radius: 16px;
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d;
    min-width: fit-content;
    margin: 5px !important
}

.orderstatus .orderstatus-divider {
    justify-content: center;
    align-items: center;
    border-radius: 0 0 24px 24px
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-divider {
        height: max-content;
        position: relative
    }
}

.orderstatus .orderstatus-divider button {
    border-style: none;
    background-color: unset;
    background-image: none;
    background-size: 100%;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center
}

.orderstatus .orderstatus-divider button .up {
    display: none
}

.orderstatus .orderstatus-divider button .down {
    display: flex
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-divider button {
        height: 66px
    }

    .orderstatus .orderstatus-divider button .detail-icone {
        width: 70px
    }

    .orderstatus .orderstatus-divider button .detail-open, .orderstatus .orderstatus-divider button .detail-close {
        width: 33%
    }
}

@media screen and (max-width: 480px) {
    .orderstatus .orderstatus-divider button {
        height: fit-content
    }

    .orderstatus .orderstatus-divider button .detail-icone {
        width: auto
    }

    .orderstatus .orderstatus-divider button .detail-open, .orderstatus .orderstatus-divider button .detail-close {
        width: 50%
    }
}

.orderstatus .orderstatus-divider .collapsed {
    background-image: url(../images/neworder/orderstatus-divider.svg)
}

.orderstatus .orderstatus-divider .collapsed .up {
    display: flex
}

.orderstatus .orderstatus-divider .collapsed .down {
    display: none
}

.orderstatus .shadowDivider {
    box-shadow: 0 -3px 36px 1px #30357c12;
    background-color: #f2f3f6;
    height: 1px
}

.orderstatus .orderstatus-detail {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #fff;
    border-radius: 0 0 24px 24px
}

.orderstatus .orderstatus-detail .orderstatus-lite-text {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    color: #8b8b8b;
    -webkit-user-select: none;
    user-select: none;
    direction: rtl;
    min-width: fit-content
}

.orderstatus .orderstatus-detail .orderstatus-bold-text {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 28px;
    color: #3d3d3d
}

.orderstatus .orderstatus-detail .orderstatus-divider2 {
    margin: auto;
    border: 1px solid #f2f3f6
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-detail .orderstatus-divider2 {
        border: .5px solid #dfe1f3
    }
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-detail .orderstatus-zigzag {
        display: flex !important;
        margin-bottom: -1vw !important;
        background-color: inherit
    }
}

.orderstatus .collapse:not(.show) {
    display: none
}

.orderstatus .collapsing {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .1s ease;
    -o-transition: height .1s ease;
    transition: height .1s ease
}

.orderstatus .orderstatus-code {
    justify-content: center;
    align-items: center;
    background-color: #fafcfe;
    border-radius: 0 0 24px 24px
}

.orderstatus .orderstatus-code .ordercode {
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    color: #8b8b8b
}

.orderstatus .orderstatus-code .ordercode2 {
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #3d3d3d
}

@media screen and (max-width: 768px) {
    .orderstatus .orderstatus-code img {
        width: 65px
    }
}

@media screen and (max-width: 480px) {
    .orderstatus .orderstatus-code img {
        width: 100%
    }
}

.mobile-select {
    position: fixed !important;
    height: 100% !important;
    background: #3d3d3d3d;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.orderstatus-tablet {
    background-image: url(../images/neworder/orderstatus_tablet_back.svg);
    height: fit-content;
    border-radius: 24px 24px 0 0;
    direction: rtl
}

.orderstatus-tablet button {
    background-image: url(../images/header3.svg);
    border: none;
    border-radius: 24px 24px 0 0;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #fff
}

#orderstatus-modal .modal-dialog {
    max-width: 415px;
    margin: 10vw auto
}

#orderstatus-modal .modal-dialog .modal-content {
    border: none !important;
    background-color: unset !important
}

#orderstatus-modal .orderstatus-state {
    align-items: center;
    flex-direction: column
}

#orderstatus-modal .orderstatus-state .orderstatus-state-cta {
    z-index: 0;
    background: #fff !important;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c14;
    border-radius: 24px;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    height: fit-content;
    text-align: start;
    max-width: 280px;
    left: 70px
}

#orderstatus-modal .orderstatus-state .orderstatus-state-cta .detail {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    background: #fff !important
}

#orderstatus-modal .orderstatus-state .orderstatus-state-cta .detail img {
    background: #fff !important;
    width: 75px;
    height: 75px
}

@media screen and (max-width: 768px) {
    #orderstatus-modal .orderstatus-state .orderstatus-state-cta .detail {
        font-size: 3.5vw
    }
}

#orderstatus-modal .orderstatus-state .orderstatus-state-cta .mypay {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 1rem;
    background: #fff !important
}

#orderstatus-modal .orderstatus-state .orderstatus-state-cta .mypay img {
    background: #fff !important;
    width: 75px;
    height: 75px
}

@media screen and (max-width: 768px) {
    #orderstatus-modal .orderstatus-state .orderstatus-state-cta .mypay {
        font-size: 3.5vw
    }
}

#orderstatus-modal .orderstatus-state .orderstatus-state-cta .cancell {
    display: flex;
    border: none;
    justify-content: start;
    align-items: center;
    font-size: 1rem;
    color: #ff6f5e;
    background: #fff !important
}

#orderstatus-modal .orderstatus-state .orderstatus-state-cta .cancell img {
    background: #fff !important;
    width: 75px;
    height: 75px
}

@media screen and (max-width: 768px) {
    #orderstatus-modal .orderstatus-state .orderstatus-state-cta .cancell {
        font-size: 3.5vw
    }
}

#orderstatus-modal .orderstatus-state .orderstatus-state-cta .divider {
    background: #3d3d3d;
    opacity: .1;
    border-radius: 24px;
    height: 1px !important;
    margin: auto
}

@media screen and (max-width: 768px) {
    #orderstatus-modal .orderstatus-state .orderstatus-state-cta img {
        width: 85px !important
    }

    #orderstatus-modal .orderstatus-state .orderstatus-state-cta p {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    #orderstatus-modal .orderstatus-state .orderstatus-state-cta img {
        width: 33.33% !important
    }

    #orderstatus-modal .orderstatus-state .orderstatus-state-cta p {
        font-size: 3.5vw
    }
}

#orderstatus-modal .orderstatus-state .state {
    align-items: center;
    justify-content: center
}

#orderstatus-modal .orderstatus-state .state .divpic {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -5px 9px 20px 1px #028bff0d
}

#orderstatus-modal .orderstatus-state .state .p {
    font-style: normal;
    font-weight: 700;
    font-size: 18px
}

#orderstatus-modal .orderstatus-state .state .t1 {
    text-align: start;
    font-weight: 300;
    font-size: 18px;
    color: #8b8b8b
}

#orderstatus-modal .orderstatus-state .state .t2 {
    text-align: start;
    font-weight: 400;
    font-size: 20px;
    color: #3d3d3d
}

#orderstatus-modal .orderstatus-state .state .orderstatus-state-cta-button {
    background: #fff;
    border: none
}

#orderstatus-modal .orderstatus-state .state .orderstatus-state-cta-button svg {
    display: none !important
}

#orderstatus-modal .orderstatus-state .state .orderstatus-state-cta-button {
    background-image: url(../images/neworder/orderstatus-state-cta-close.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 32px !important;
    height: 32px !important
}

#orderstatus-modal .orderstatus-state .state .orderstatus-state-cta-button p {
    display: none
}

#orderstatus-modal .orderstatus-state .state .collapsed {
    background-image: none;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    width: fit-content !important;
    height: fit-content !important;
    border: 1px solid #3d3d3d
}

#orderstatus-modal .orderstatus-state .state .collapsed p {
    display: block;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px
}

#orderstatus-modal .orderstatus-state .state .collapsed svg {
    display: flex !important
}

#orderstatus-modal .orderstatus-state .less-detail {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    font-weight: 600
}

#orderstatus-modal .orderstatus-state .less-detail .t3 {
    font-size: 22px;
    line-height: 44px;
    color: #3d3d3d
}

#orderstatus-modal .orderstatus-state .less-detail .t4 {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #3d3d3d
}

#orderstatus-modal .orderstatus-state .less-detail .money {
    background: #f2f3f6;
    border-radius: 24px;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 768px) {
    #orderstatus-modal .orderstatus-state .less-detail .money {
        background-color: #3d3d3d14
    }
}

#orderstatus-modal .orderstatus-state .less-detail img {
    width: 30px;
    height: 30px
}

#orderstatus-modal .orderstatus-divider {
    justify-content: center;
    align-items: center;
    border-radius: 0 0 24px 24px
}

@media screen and (max-width: 768px) {
    #orderstatus-modal .orderstatus-divider {
        height: max-content;
        position: relative
    }
}

#orderstatus-modal .orderstatus-divider button {
    border-style: none;
    background-color: unset;
    background-image: url(../images/neworder/orderstatus-divider.svg);
    background-size: 100%;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center
}

#orderstatus-modal .orderstatus-divider button .up {
    display: flex
}

#orderstatus-modal .orderstatus-divider button .down {
    display: none
}

#orderstatus-modal .orderstatus-divider .collapsed {
    background-image: none
}

#orderstatus-modal .orderstatus-divider .collapsed .up {
    display: none
}

#orderstatus-modal .orderstatus-divider .collapsed .down {
    display: flex
}

#orderstatus-modal .orderstatus-detail {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #fff;
    border-radius: 0 0 24px 24px
}

#orderstatus-modal .orderstatus-detail .orderstatus-lite-text {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #8b8b8b
}

#orderstatus-modal .orderstatus-detail .orderstatus-bold-text {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #3d3d3d
}

#orderstatus-modal .orderstatus-detail .orderstatus-divider2 {
    margin: auto;
    border: 1px solid #f2f3f6
}

#orderstatus-modal .orderstatus-detail .details img {
    width: 60px;
    height: 30px
}

#orderstatus-modal .orderstatus-detail .details .texts {
    margin-left: -10px !important;
    margin-right: 10px !important
}

@media screen and (max-width: 768px) {
    #orderstatus-modal .orderstatus-detail .orderstatus-zigzag {
        display: flex !important;
        margin-bottom: -1vw !important
    }
}

#orderstatus-modal .orderstatus-detail .orderstatus-code img {
    width: 60px;
    height: 60px
}

#orderstatus-modal .orderstatus-detail .orderstatus-code div {
    display: flex;
    justify-content: center;
    align-items: center
}

#orderstatus-modal .orderstatus-detail .orderstatus-code .ordercode {
    color: #8b8b8b;
    font-size: 20px
}

#orderstatus-modal .orderstatus-detail .orderstatus-code .ordercode2 {
    color: #8b8b8b;
    font-size: 22px;
    font-weight: 500
}

#orderstatus-modal .orderstate {
    flex-direction: column;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: flex-end;
    text-align: start
}

@media screen and (max-width: 768px) {
    #orderstatus-modal .orderstate {
        flex-direction: row !important;
        border: none;
        margin-top: .25rem !important
    }

    #orderstatus-modal .orderstate .orderstate-text {
        justify-content: start !important;
        align-items: flex-end !important
    }

    #orderstatus-modal .orderstate img {
        height: 75px
    }
}

#orderstatus-modal .orderstate .text1 {
    font-style: normal;
    font-weight: 200;
    font-size: 18px;
    line-height: 24px;
    align-items: center;
    text-align: right !important;
    color: #028bff
}

#orderstatus-modal .orderstate .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 28px;
    align-items: center;
    text-align: right !important;
    color: #028bff
}

@media screen and (max-width: 1360px) {
    #orderstatus-modal .orderstatus-state .state .t1, #orderstatus-modal .orderstatus-state .state .t2 {
        font-size: 16px
    }

    #orderstatus-modal .orderstatus-state .orderstatus-state-cta p {
        font-size: 14px
    }

    #orderstatus-modal .orderstatus-detail .orderstatus-bold-text, #orderstatus-modal .orderstatus-detail .orderstatus-code .ordercode, #orderstatus-modal .orderstatus-detail .orderstatus-code .ordercode2 {
        font-size: 16px
    }
}

@media screen and (max-width: 768px) {
    .leftside {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        border-style: none;
        width: 100% !important
    }

    .leftside .orderstatus .orderstatus-detail {
        background: #f2f3f6
    }

    .leftside .orderstatus .orderstatus-detail .orderstatus-divider2 {
        background-color: #3d3d3d
    }

    .leftside .orderstatus .orderstatus-divider button {
        border-radius: 0;
        background: linear-gradient(270deg, #00569f .2%, #006bc6 47.2%, #0081ed 78.2%, #028bff 100.2%);
        box-shadow: -14px 9px 40px #30357c3d
    }

    .leftside .orderstatus .orderstatus-divider button .up, .leftside .orderstatus .orderstatus-divider button .down {
        display: none
    }

    .leftside .orderstatus .orderstatus-divider button .detail-icone {
        display: flex !important
    }

    .leftside .orderstatus .orderstatus-divider button .detail-close {
        display: none !important
    }

    .leftside .orderstatus .orderstatus-divider button .detail-open {
        display: inline-block !important
    }

    .leftside .orderstatus .orderstatus-divider .collapsed .detail-open {
        display: none !important
    }

    .leftside .orderstatus .orderstatus-divider .collapsed .detail-close {
        display: inline-block !important
    }
}

.leftside .orderstate {
    flex-direction: column;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    text-align: start;
    margin: 9px 0 !important
}

@media screen and (max-width: 768px) {
    .leftside .orderstate {
        display: none !important
    }
}

.leftside .orderstate .text1 {
    font-style: normal;
    font-weight: 200;
    font-size: .7vw;
    line-height: 24px;
    align-items: center;
    text-align: right !important;
    color: #028bff
}

@media screen and (max-width: 1360px) {
    .leftside .orderstate .text1 {
        font-size: .9vw
    }
}

@media screen and (max-width: 768px) {
    .leftside .orderstate .text1 {
        font-size: 2.5vw;
        line-height: 28px
    }
}

@media screen and (max-width: 480px) {
    .leftside .orderstate .text1 {
        line-height: 24px
    }
}

.leftside .orderstate .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: .9vw;
    line-height: 28px;
    align-items: center;
    text-align: right !important;
    color: #028bff
}

@media screen and (max-width: 1360px) {
    .leftside .orderstate .text2 {
        font-size: 1.1vw
    }
}

@media screen and (max-width: 768px) {
    .leftside .orderstate .text2 {
        font-size: 3vw
    }
}

@media screen and (max-width: 768px) {
    .leftside .orderstatus-code {
        background: #f2f3f6;
        border-radius: 0
    }
}

.leftside .pad-down {
    width: 1.2rem;
    height: 1.2rem
}

.leftside .pad-up {
    padding-top: 0 !important
}

@media screen and (min-width: 1600px) {
    .leftside .pad-up {
        padding: .45rem !important;
        padding-top: 0 !important
    }
}

@media screen and (min-width: 1400px) {
    .leftside .pad-up {
        margin-right: -.5vw !important;
        padding-top: 0 !important
    }
}

.leftside .neworder-button-box .confirmNeworder {
    border: none;
    background: #16d8a4;
    border-radius: 24px;
    outline: none;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 14px 0 !important
}

.leftside .neworder-button-box .neworder-moreguide {
    border: 1px solid #16d8a4;
    box-sizing: border-box;
    border-radius: 24px;
    background-color: unset;
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    padding: 14px 0 !important;
    align-items: center;
    text-align: center;
    color: #16d8a4
}

.detail_notif {
    direction: rtl
}

.detail_notif svg {
    background-color: #fff;
    z-index: 1;
    border-radius: 24px
}

.detail_notif div {
    margin-top: -20px;
    background: #f2f3f6;
    border-radius: 24px
}

.detail_notif p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.detail_notif_inquiry {
    max-width: 600px
}

@media screen and (max-width: 768px) {
    .detail_notif_inquiry {
        width: 80% !important
    }

    .detail_notif_inquiry .topImage {
        margin-bottom: -20px
    }
}

@media screen and (max-width: 480px) {
    .detail_notif_inquiry {
        width: 100% !important
    }
}

.detail_notif_inquiry .topImage {
    margin-bottom: -20px;
    background-color: #fff;
    z-index: 1;
    border-radius: 24px
}

.detail_notif_inquiry p {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    direction: rtl
}

.detail_notif_inquiry p ul {
    padding: 0 5px
}

.detail_notif_inquiry .main {
    background: #f2f3f6;
    border-radius: 24px;
    direction: ltr;
    align-items: center
}

.detail_notif_inquiry .main .StateDiv {
    direction: rtl
}

.detail_notif_inquiry .main .StateDiv .tit {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #c3c6e8
}

.detail_notif_inquiry .main .StateDiv .dis {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #30357c
}

.detail_notif_inquiry .main .StateDiv .st1 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #c3c6e8
}

.detail_notif_inquiry .main .StateDiv .st2 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    color: #30357c
}

.detail_notif_inquiry .main .detail {
    background: #f2f3f6;
    border-radius: 24px;
    border-bottom: 4px solid #ffffff
}

.detail_notif_inquiry .main .inquiryDiv {
    border-radius: 0 0 24px 24px;
    background: #f2f3f6
}

.detail_notif_inquiry .main .inquiryDiv .t1 {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #3d3d3d
}

.detail_notif_inquiry .main .inquiryDiv .t2 {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.detail_notif_inquiry .main .inquiryDiv .icone {
    background: unset;
    border-radius: 0;
    padding: 0 !important
}

.detail_notif_inquiry .main .inquiryDiv button {
    background: #16d8a4;
    border: 1px solid #16d8a4;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #fff
}

.detail_notif_inquiry .main .inquiryDiv .toman {
    background-color: unset;
    z-index: unset;
    border-radius: unset
}

.detail_notif_inquiry .main .inquiryDiv .text1 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #30357c
}

.detail_notif_inquiry .main .inquiryDiv .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #30357c
}

@media screen and (max-width: 568px) {
    .detail_notif_inquiry .main .pending {
        direction: rtl
    }
}

.detail_notif_inquiry .main .divider {
    background: #dfe1f3;
    border-radius: 24px;
    z-index: 1;
    height: 1px;
    margin: auto
}

.detail_notif_inquiry .main .discont {
    direction: rtl
}

.detail_notif_inquiry .main .discont button {
    background-color: #3d3d3d;
    color: #fff;
    border-radius: 12px
}

.detail_notif_inquiry .dotDivider {
    background-color: unset;
    border-radius: unset
}

@media screen and (max-width: 480px) {
    .detail_notif_inquiry .dotDivider {
        display: none !important
    }
}

.detail_notif_inquiry button img {
    background-color: unset;
    border-radius: unset;
    margin-bottom: 0 !important;
    margin-top: 0 !important
}

.initialInquiriesPay {
    background: #f0fdfa;
    border: 1px solid #baf8e7;
    border-radius: 24px
}

@media screen and (max-width: 1850px) {
    .initialInquiriesPay {
        width: 22vw !important
    }
}

@media screen and (max-width: 1600px) {
    .initialInquiriesPay {
        width: 25vw !important
    }
}

@media screen and (max-width: 1360px) {
    .initialInquiriesPay {
        width: 30vw !important
    }
}

@media screen and (max-width: 1360px) {
    .initialInquiriesPay {
        width: 350px !important
    }
}

@media screen and (max-width: 768px) {
    .initialInquiriesPay {
        width: 80% !important
    }
}

@media screen and (max-width: 480px) {
    .initialInquiriesPay {
        width: 100% !important
    }
}

.initialInquiriesPay .t1 {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #3d3d3d
}

.initialInquiriesPay .t2 {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.initialInquiriesPay .icone {
    background: #fff;
    border-radius: 24px;
    padding: 12px !important
}

.initialInquiriesPay button {
    background: #16d8a4;
    border: 1px solid #16d8a4;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #fff
}

.uploadextradoc {
    position: relative
}

.uploadextradoc input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.uploadextradoc input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

@media screen and (max-width: 1850px) {
    .uploadextradoc {
        width: 22vw !important
    }
}

@media screen and (max-width: 1600px) {
    .uploadextradoc {
        width: 25vw !important
    }
}

@media screen and (max-width: 1360px) {
    .uploadextradoc {
        width: 30vw !important
    }
}

@media screen and (max-width: 1360px) {
    .uploadextradoc {
        width: 350px !important
    }
}

@media screen and (max-width: 768px) {
    .uploadextradoc {
        width: 80% !important
    }
}

@media screen and (max-width: 480px) {
    .uploadextradoc {
        width: 100% !important
    }
}

.uploadextradoc #whitediv {
    align-items: center !important;
    justify-content: center !important
}

.uploadextradoc #whitediv .down {
    display: none
}

.uploadextradoc #whitediv .up {
    display: flex
}

.uploadextradoc #whitediv .collapsed {
    width: 101% !important;
    border-bottom: 9px solid #dfe1f3 !important
}

.uploadextradoc #whitediv .collapsed .up {
    display: none
}

.uploadextradoc #whitediv .collapsed .down {
    display: flex
}

@media screen and (max-width: 768px) {
    .uploadextradoc #whitediv .collapsed {
        width: 100% !important
    }
}

.uploadextradoc button {
    background: #fafcfe;
    border: 1px solid #dfe1f3;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    flex-direction: row
}

.uploadextradoc button .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #30357c
}

.uploadextradoc button .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.uploadextradoc button .text1-pending {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadextradoc button .text2-pending {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadextradoc button .pendingIcone {
    background: #f7f7f7;
    border-radius: 100%
}

.uploadextradoc button .text1-complete {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadextradoc button .text2-complete {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadextradoc .maindiv {
    box-sizing: border-box;
    border-radius: 0 0 24px 24px
}

.uploadextradoc .maindiv .send {
    background: #028bff;
    border: 1px solid #c6e5ff;
    border-top: 0;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center
}

.uploadextradoc .maindiv .send .SendButtonDiv {
    margin: auto;
    background-color: inherit;
    border: none
}

.uploadextradoc .maindiv .send .SendButtonDiv .text7 {
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadextradoc .maindiv .send .SendButtonDiv-deactive {
    opacity: .3;
    margin: auto
}

.uploadextradoc .maindiv .send .SendButtonDiv-deactive .text7 {
    color: #028bff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadextradoc .extradoc-detail {
    background: #fff;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border: none;
    border-radius: 0 0 24px 24px;
    justify-content: center !important;
    align-items: center !important
}

.uploadextradoc .extradoc-detail P {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    direction: rtl
}

.uploadextradoc .extradoc-detail .extradoc-active {
    background: #f0fdfa;
    border-radius: 24px;
    border: 1px solid #baf8e7;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadextradoc .extradoc-detail .extradoc-active .collapsed {
    display: unset !important
}

.uploadextradoc .extradoc-detail .extradoc-active p {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadextradoc .extradoc-detail .extradoc-active div {
    background-image: url(../images/UploadDocuments/complete.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadextradoc .extradoc-detail .extradoc-defult {
    border: 1px dashed #028bff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadextradoc .extradoc-detail .extradoc-defult p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadextradoc .extradoc-detail .extradoc-defult div {
    background-image: url(../images/UploadDocuments/ExteraDocFile.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadextradoc .extradoc-detail .filemanagerDiv {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    color: #028bff;
    text-align: center
}

.uploadextradoc .extradoc-detail .filemanagerDiv .DetailIcone {
    background: #edf7ff;
    border-radius: 100%;
    margin-right: -1vw
}

.uploadextradoc .extradoc-detail .filemanagerDiv .DeleteIcone {
    background: none
}

@media screen and (max-width: 768px) {
    .uploadextradoc .extradoc-detail .filemanagerDiv .DeleteIcone {
        padding: 2vw !important
    }
}

.uploadextradoc .extradoc-detail .filemanagerDiv .progressbar {
    justify-content: center;
    align-items: center
}

.uploadextradoc .extradoc-detail .filemanagerDiv .progressbar img {
    z-index: 1;
    position: absolute;
    padding: .3vw !important;
    border-radius: 19.2px;
    background-color: #e6f3ff
}

@media screen and (max-width: 768px) {
    .uploadextradoc .extradoc-detail .filemanagerDiv .progressbar img {
        padding: .5vw !important
    }
}

.uploadextradoc .extradoc-detail .filemanagerDiv .progressbar .loader {
    position: relative;
    display: inline-block;
    width: 2.1vw;
    height: 2.1vw;
    border: 4px solid white;
    border-radius: 50%;
    animation: spin .1s infinite linear;
    background-color: #fafcfe
}

@media screen and (max-width: 1600px) {
    .uploadextradoc .extradoc-detail .filemanagerDiv .progressbar .loader {
        width: 2.5vw;
        height: 2.5vw
    }
}

@media screen and (max-width: 1360px) {
    .uploadextradoc .extradoc-detail .filemanagerDiv .progressbar .loader {
        width: 2.8vw;
        height: 2.8vw
    }
}

@media screen and (max-width: 1360px) {
    .uploadextradoc .extradoc-detail .filemanagerDiv .progressbar .loader {
        width: 35px;
        height: 35px
    }
}

@media screen and (max-width: 768px) {
    .uploadextradoc .extradoc-detail .filemanagerDiv .progressbar .loader {
        width: 9vw;
        height: 9vw
    }
}

.uploadextradoc .extradoc-detail .filemanagerDiv .progressbar .loader:before, .uploadextradoc .extradoc-detail .filemanagerDiv .progressbar .loader:after {
    left: -3px;
    top: -3px;
    display: none;
    position: relative;
    content: "";
    width: inherit;
    height: inherit;
    border: inherit;
    border-radius: inherit
}

.uploadextradoc .extradoc-detail .filemanagerDiv .progressbar .spinner {
    border-color: transparent;
    border-top-color: #c6e5ff;
    animation-duration: 2s
}

.uploadextradoc .extradoc-detail .filemanagerDiv .progressbar .spinner:after {
    display: block;
    border-color: transparent;
    border-top-color: #028bff;
    animation: spin 1s infinite ease-in-out
}

.uploadextradoc .extradoc-detail .filemanagerDiv .progressbar .icon {
    width: 29px;
    height: 20px;
    position: absolute;
    top: 490px;
    left: 307px;
    background-image: url(https://dl.dropboxusercontent.com/u/43783651/Mozilla/cloud.svg);
    background-repeat: no-repeat;
    animation: pulsate 1.5s infinite ease-in-out
}

.uploadextradoc .extradoc-detail .filemanagerDiv .collapsing {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .1s ease;
    -o-transition: height .1s ease;
    transition: height .1s ease
}

.uploadextradoc .extradoc-detail .filemanagerDiv .downImg {
    transform: rotate(180deg);
    max-width: 50px
}

.uploadextradoc .extradoc-detail .filemanagerDiv .collapsed .downImg {
    transform: none
}

.uploadextradoc .extradoc-detail .filemanager {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.uploadextradoc .extradoc-detail .filemanager .text5 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadextradoc .extradoc-detail #extradocfilemanagerDetail p {
    color: #028bff !important
}

.uploadextradoc .extradoc-error-open-button {
    display: flex !important
}

.uploadextradoc .extradoc-error-image {
    box-shadow: -14px 9px 40px 1px #ff6f5e66;
    border-radius: 16px
}

.uploadextradoc .text-error1 {
    color: #ff6f5e;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right
}

.uploadextradoc .text-error2 {
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    color: #ff6f5e;
    text-align: right
}

.error-popup {
    display: flex;
    border-radius: 24px;
    max-width: 415px;
    margin: 10vw auto
}

@media screen and (max-width: 768px) {
    .error-popup {
        width: 70%;
        margin-top: 60%
    }
}

.error-popup .modal-content {
    border-radius: 24px
}

.error-popup .modal-body {
    background-color: #002c51;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff
}

.error-popup .modal-body .text1 {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #fff;
    direction: ltr
}

.error-popup .modal-body .text2 {
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    color: #fff !important
}

.error-popup .modal-body .popup-content-button {
    background-color: #028bff;
    border: none !important;
    color: #fff;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px
}

.uploadContainer-report .maindiv {
    box-sizing: border-box;
    border-radius: 0 0 24px 24px
}

.uploadContainer-report .maindiv .send {
    border: 1px solid #c6e5ff;
    border-top: 0;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center
}

.uploadContainer-report {
    border-radius: 24px;
    background-color: #fff
}

.uploadContainer-report .hint {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer-report .accountprint-detail {
    background: #fafcfe;
    box-sizing: border-box;
    border: 1px solid #f2f3f6;
    border-bottom: 1px solid #dfe1f3;
    border-top: 0;
    border-radius: 0 0 24px 24px;
    justify-content: center !important;
    align-items: center !important
}

.uploadContainer-report .accountprint-detail P {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    direction: rtl
}

.uploadContainer-report .accountprint-detail a {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    text-decoration: none
}

.uploadContainer-report .accountprint-detail .accountprint-active {
    background: #f0fdfa;
    border-radius: 24px;
    border: 1px solid #baf8e7;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-report .accountprint-detail .accountprint-active .collapsed {
    display: unset !important
}

.uploadContainer-report .accountprint-detail .accountprint-active p {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer-report .accountprint-detail .accountprint-active div {
    background-image: url(../images/UploadDocuments/complete.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer-report .accountprint-detail .validtext {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.uploadContainer-report .accountprint-detail .validation {
    align-items: center;
    justify-content: center
}

.uploadContainer-report .accountprint-detail .validation .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-report .accountprint-detail .validation .smartnumber {
    justify-content: flex-start;
    direction: ltr
}

.uploadContainer-report .accountprint-detail .validation .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    align-items: center;
    color: #3d3d3d
}

.uploadContainer-report .accountprint-detail .text3 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    color: #3d3d3d
}

.uploadContainer-report .accountprint-detail .text4 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    color: #8b8b8b
}

.uploadContainer-report .accountprint-detail .form-check-input {
    width: 36px;
    height: 36px
}

.uploadContainer-report .accountprint-detail label div {
    justify-content: start;
    align-items: center
}

.uploadContainer-report .accountprint-detail .form-check-input:checked[type=radio] {
    background-image: url(../images/tick.svg);
    background-color: #3d3d3d;
    background-size: inherit;
    outline: none;
    box-shadow: none
}

.uploadContainer-report .accountprint-detail .checked {
    background-image: url(../images/tick.svg);
    background-color: #3d3d3d;
    background-size: inherit;
    outline: none;
    box-shadow: none
}

.uploadContainer-report .accountprint-defult {
    border: 1px dashed #028bff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-report .accountprint-defult p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer-report .accountprint-defult div {
    background-image: url(../images/UploadDocuments/ExteraDocFile.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer-report #extradocfilemanagerDetail p {
    color: #028bff !important
}

.uploadContainer-report .accountprint-error-open-button {
    display: flex !important
}

.uploadContainer-report .accountprint-error-image {
    box-shadow: -14px 9px 40px 1px #ff6f5e66;
    border-radius: 16px
}

.uploadContainer-report .text-error1 {
    color: #ff6f5e;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right
}

.uploadContainer-report .text-error2 {
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    color: #ff6f5e;
    text-align: right
}

.uploadContainer-report .validation_table {
    display: none
}

.uploadContainer-report p {
    direction: rtl
}

.uploadContainer-backup {
    position: relative
}

.uploadContainer-backup input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.uploadContainer-backup input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

.uploadContainer-backup .maindiv {
    box-sizing: border-box;
    border-radius: 0 0 24px 24px
}

.uploadContainer-backup .maindiv .send {
    border: 1px solid #c6e5ff;
    border-top: 0;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center
}

.uploadContainer-backup .backupaccount-detail {
    background: #fff;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-top: 0;
    border-radius: 0 0 24px 24px;
    justify-content: center !important;
    align-items: center !important
}

.uploadContainer-backup .backupaccount-detail P {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    direction: rtl
}

.uploadContainer-backup .backupaccount-detail a {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    text-decoration: none
}

.uploadContainer-backup .backupaccount-detail details {
    display: flex
}

.uploadContainer-backup .backupaccount-detail details {
    position: relative
}

.uploadContainer-backup .backupaccount-detail details summary {
    display: flex;
    cursor: pointer;
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    direction: ltr;
    position: absolute;
    align-items: center;
    color: #028bff
}

.uploadContainer-backup .backupaccount-detail details summary:focus {
    outline: none
}

.uploadContainer-backup .backupaccount-detail details[open] {
    display: block;
    animation: open .2s linear
}

.uploadContainer-backup .backupaccount-detail details[open] summary {
    position: absolute;
    bottom: 0;
    left: 0
}

.uploadContainer-backup .backupaccount-detail details #open {
    position: absolute;
    text-align: center;
    margin-top: -1.3vw;
    margin-left: -.5vw
}

@media screen and (max-width: 1850px) {
    .uploadContainer-backup .backupaccount-detail details #open {
        margin-left: 3vw
    }
}

@media screen and (max-width: 1785px) {
    .uploadContainer-backup .backupaccount-detail details #open {
        margin-left: -.5vw
    }
}

@media screen and (max-width: 1360px) {
    .uploadContainer-backup .backupaccount-detail details #open {
        margin-left: 2vw
    }
}

@media screen and (max-width: 1280px) {
    .uploadContainer-backup .backupaccount-detail details #open {
        margin-left: 0vw
    }
}

@media screen and (max-width: 768px) {
    .uploadContainer-backup .backupaccount-detail details #open {
        margin-left: -22vw;
        margin-top: -6vw
    }
}

.uploadContainer-backup .backupaccount-detail details[open] #open {
    display: none
}

.uploadContainer-backup .backupaccount-detail details #close {
    display: none
}

.uploadContainer-backup .backupaccount-detail details[open] #close {
    display: block
}

.uploadContainer-backup .backupaccount-detail ::-webkit-details-marker {
    display: none
}

.uploadContainer-backup .backupaccount-detail .backupaccount-active {
    background: #f0fdfa;
    border-radius: 24px;
    border: 1px solid #baf8e7;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-backup .backupaccount-detail .backupaccount-active .collapsed {
    display: unset !important
}

.uploadContainer-backup .backupaccount-detail .backupaccount-active p {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer-backup .backupaccount-detail .backupaccount-active div {
    background-image: url(../images/UploadDocuments/complete.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer-backup .backupaccount-detail .backupaccount-defult {
    border: 1px dashed #028bff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-backup .backupaccount-detail .backupaccount-defult p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer-backup .backupaccount-detail .backupaccount-defult div {
    background-image: url(../images/UploadDocuments/idcard-front.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer-backup .backupaccount-detail .backupaccount-defult .form-control {
    -webkit-appearance: unset;
    -moz-appearance: unset;
    appearance: unset;
    border-radius: 1vw;
    border-style: none;
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer-backup .backupaccount-detail .backupaccount-defult .form-control .option {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-backup .backupaccount-detail .backupaccount-defult .form-control .option:focus {
    background-color: #c6e5ff;
    color: #3d3d3d
}

.uploadContainer-backup .backupaccount-detail .backupaccount-defult .form-control:focus {
    outline: none !important;
    border: none
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    color: #028bff;
    text-align: center
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .DetailIcone {
    background: #edf7ff;
    border-radius: 100%;
    margin-right: -1vw
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .DeleteIcone {
    background: none
}

@media screen and (max-width: 768px) {
    .uploadContainer-backup .backupaccount-detail .filemanagerDiv .DeleteIcone {
        padding: 2vw !important
    }
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar {
    justify-content: center;
    align-items: center
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar img {
    z-index: 1;
    position: absolute;
    padding: .3vw !important;
    border-radius: 19.2px;
    background-color: #e6f3ff
}

@media screen and (max-width: 768px) {
    .uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar img {
        padding: .5vw !important
    }
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar .loader {
    position: relative;
    display: inline-block;
    width: 2.1vw;
    height: 2.1vw;
    border: 4px solid white;
    border-radius: 50%;
    animation: spin .1s infinite linear;
    background-color: #fafcfe
}

@media screen and (max-width: 1600px) {
    .uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar .loader {
        width: 2.5vw;
        height: 2.5vw
    }
}

@media screen and (max-width: 1360px) {
    .uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar .loader {
        width: 2.8vw;
        height: 2.8vw
    }
}

@media screen and (max-width: 1360px) {
    .uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar .loader {
        width: 35px;
        height: 35px
    }
}

@media screen and (max-width: 768px) {
    .uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar .loader {
        width: 9vw;
        height: 9vw
    }
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar .loader:before, .uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar .loader:after {
    left: -3px;
    top: -3px;
    display: none;
    position: relative;
    content: "";
    width: inherit;
    height: inherit;
    border: inherit;
    border-radius: inherit
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar .spinner {
    border-color: transparent;
    border-top-color: #c6e5ff;
    animation-duration: 2s
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar .spinner:after {
    display: block;
    border-color: transparent;
    border-top-color: #028bff;
    animation: spin 1s infinite ease-in-out
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .progressbar .icon {
    width: 29px;
    height: 20px;
    position: absolute;
    top: 490px;
    left: 307px;
    background-image: url(https://dl.dropboxusercontent.com/u/43783651/Mozilla/cloud.svg);
    background-repeat: no-repeat;
    animation: pulsate 1.5s infinite ease-in-out
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .collapsing {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .1s ease;
    -o-transition: height .1s ease;
    transition: height .1s ease
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .downImg {
    transform: rotate(180deg);
    max-width: 50px
}

.uploadContainer-backup .backupaccount-detail .filemanagerDiv .collapsed .downImg {
    transform: none
}

.uploadContainer-backup .backupaccount-detail .filemanager {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.uploadContainer-backup .backupaccount-detail .filemanager .text5 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer-backup .backupaccount-detail .switchdiv {
    background: #fafcfe;
    border-bottom: 1px solid #dfe1f3;
    box-sizing: border-box;
    border-radius: 24px
}

.uploadContainer-backup .backupaccount-detail .switchdiv .form-check-input {
    width: 3vw;
    height: 1.5vw
}

@media screen and (max-width: 1600px) {
    .uploadContainer-backup .backupaccount-detail .switchdiv .form-check-input {
        width: 4vw;
        height: 2vw
    }
}

@media screen and (max-width: 768px) {
    .uploadContainer-backup .backupaccount-detail .switchdiv .form-check-input {
        width: 14vw;
        height: 7vw
    }
}

.uploadContainer-backup .backupaccount-detail .switchdiv .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    margin-right: 10px !important;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-backup .backupaccount-detail .switchdiv .text2 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    padding: 0 15px !important;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer-backup .backupaccount-error-open-button {
    display: flex !important
}

.uploadContainer-backup .backupaccount-error-image {
    box-shadow: -14px 9px 40px 1px #ff6f5e66;
    border-radius: 16px
}

.uploadContainer-backup .text-error1 {
    color: #ff6f5e;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right
}

.uploadContainer-backup .text-error2 {
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    color: #ff6f5e;
    text-align: right
}

.ayandehaccount {
    position: relative;
    max-width: 550px
}

.ayandehaccount #whitediv {
    align-items: center !important;
    justify-content: center !important
}

.ayandehaccount #whitediv .down {
    display: none
}

.ayandehaccount #whitediv .up {
    display: flex
}

.ayandehaccount #whitediv .collapsed {
    width: 101% !important;
    border-bottom: 9px solid #dfe1f3 !important
}

.ayandehaccount #whitediv .collapsed .up {
    display: none
}

.ayandehaccount #whitediv .collapsed .down {
    display: flex
}

@media screen and (max-width: 768px) {
    .ayandehaccount #whitediv .collapsed {
        width: 100% !important
    }
}

.ayandehaccount button {
    background: #fafcfe;
    border: 1px solid #dfe1f3;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    flex-direction: row
}

.ayandehaccount button .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 28px;
    text-align: right;
    color: #30357c
}

.ayandehaccount button .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

@media screen and (max-width: 480px) {
    .ayandehaccount button .text1 {
        font-size: 14px
    }
}

.ayandehaccount .maindiv {
    background: #fafcfe;
    border: 1px solid #dfe1f3;
    border-radius: 24px
}

.ayandehaccount .maindiv .send {
    background: #f2f3f6;
    border-top: 0;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center
}

.ayandehaccount .maindiv .send .up {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.ayandehaccount .maindiv .send .up .rowdivider {
    background: #f2f3f6;
    border-radius: 24px;
    height: 1px
}

.ayandehaccount .maindiv .send .up .descrip {
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ayandehaccount .maindiv .send .up .video {
    direction: rtl;
    border: none;
    background-color: inherit
}

.ayandehaccount .maindiv .send .up .video .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ayandehaccount .maindiv .send .up .video .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ayandehaccount .maindiv .send .up .video .play {
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    border-radius: 16px;
    padding: 8px
}

.ayandehaccount .maindiv .send .up .head {
    direction: rtl
}

.ayandehaccount .maindiv .send .SendButtonDiv {
    border-radius: 24px
}

.ayandehaccount .maindiv .send .SendButtonDiv img {
    width: 24px;
    height: 24px
}

.ayandehaccount .maindiv .send .SendButtonDiv button {
    outline: none;
    border: none;
    background: none
}

.ayandehaccount .maindiv .send .SendButtonDiv .collapsed {
    display: flex !important
}

.ayandehaccount .maindiv .send .downloadBox div {
    direction: rtl
}

.ayandehaccount .maindiv .send .downloadBox div p {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ayandehaccount .maindiv .send .downloadBox .dev {
    background: #fff;
    width: 40px;
    height: 40px;
    border: 1px solid #f2f3f6;
    border-radius: 16px;
    padding: 5px
}

@media screen and (max-width: 480px) {
    .ayandehaccount .maindiv .send .downloadBox .dotes {
        display: none
    }
}

.ayandehaccount .modal button {
    color: #3d3d3d
}

.ayandehaccount .modal iframe {
    border-radius: 10px;
    height: 250px
}

.haveayandehaccount {
    position: relative;
    max-width: 550px
}

.haveayandehaccount .maindiv {
    background: #edf7ff;
    border: 1px solid #dfe1f3;
    border-radius: 24px
}

.haveayandehaccount .maindiv .Top {
    direction: rtl;
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px 24px 0 0
}

.haveayandehaccount .maindiv .Top .divider {
    background: #e4e4e4;
    border-radius: 24px;
    height: 1px
}

.haveayandehaccount .maindiv .Top .t1 {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.haveayandehaccount .maindiv .Top .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.haveayandehaccount .maindiv .up {
    background: #fff;
    border-radius: 0 0 24px 24px
}

.haveayandehaccount .maindiv .up .descrip {
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.haveayandehaccount .maindiv .up .video {
    direction: rtl
}

.haveayandehaccount .maindiv .up .video .play {
    width: 40px;
    height: 40px;
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    border-radius: 16px;
    padding: 7px
}

.haveayandehaccount .maindiv .up .video p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.haveayandehaccount .maindiv .SendButtonDiv {
    border-radius: 24px
}

.haveayandehaccount .maindiv .SendButtonDiv img {
    width: 24px;
    height: 24px
}

.haveayandehaccount .maindiv .SendButtonDiv {
    outline: none;
    border: none;
    background: none;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #028bff
}

.UserDeposit {
    max-width: 372px !important;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.UserDeposit p {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.UserDeposit button {
    border: none;
    background: #16d8a4;
    box-shadow: -2px 9px 32px #16d8a41f;
    border-radius: 0 0 24px 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    padding: 0 15px;
    width: 100%;
    height: 65px
}

.UserDeposit .zigzag {
    margin-bottom: -4px;
    margin-top: 25px
}

.UserDeposit .deposited {
    background: #b9f6ca;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px
}

.UserDeposit .deposited p {
    font-weight: 400;
    font-size: 13px
}

.UserDeposit .top {
    border-bottom: 1px solid #e4e4e4
}

.UserDeposit .top p {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: right;
    color: #bdbdbd
}

@media screen and (max-width: 1360px) {
    .AyandehRegisterAccount .centercontent {
        align-items: center;
        max-height: fit-content
    }
}

@media screen and (max-width: 1360px) {
    .AyandehRegisterAccount .centercontent {
        align-items: center
    }
}

@media screen and (max-width: 768px) {
    .AyandehRegisterAccount .centercontent {
        height: fit-content;
        margin: 0 0 65px !important
    }
}

.AyandehRegisterAccount .centercontent .upshadow {
    overflow-y: hidden
}

@media screen and (max-width: 768px) {
    .AyandehRegisterAccount .centercontent #contain {
        position: relative !important;
        height: fit-content !important;
        max-height: unset !important
    }
}

.digitalsign {
    position: relative
}

@media screen and (max-width: 1850px) {
    .digitalsign {
        width: 22vw !important
    }
}

@media screen and (max-width: 1600px) {
    .digitalsign {
        width: 25vw !important
    }
}

@media screen and (max-width: 1360px) {
    .digitalsign {
        width: 30vw !important
    }
}

@media screen and (max-width: 1360px) {
    .digitalsign {
        width: 350px !important
    }
}

@media screen and (max-width: 768px) {
    .digitalsign {
        width: 80% !important
    }
}

@media screen and (max-width: 480px) {
    .digitalsign {
        width: 100% !important;
        margin-bottom: 20%
    }
}

.digitalsign .maindiv {
    background: #fafcfe;
    border: 1px solid #dfe1f3;
    border-radius: 24px
}

.digitalsign .maindiv .up {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.digitalsign .maindiv .up .head {
    direction: rtl
}

.digitalsign .maindiv .up .head .divider {
    background: #f2f3f6;
    border-radius: 8px;
    height: 1px;
    transform: rotate(90deg)
}

.digitalsign .maindiv .up .head p {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.digitalsign .maindiv .up .rowdivider {
    background: #f2f3f6;
    border-radius: 24px;
    height: 1px
}

.digitalsign .maindiv .up .descrip {
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.digitalsign .maindiv .up .video {
    direction: rtl
}

.digitalsign .maindiv .up .video .play {
    width: 40px;
    height: 40px;
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    border-radius: 16px;
    padding: 7px
}

.digitalsign .maindiv .up .video .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.digitalsign .maindiv .up .video .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.digitalsign .maindiv .SendButtonDiv {
    border-radius: 24px
}

.digitalsign .maindiv .SendButtonDiv img {
    width: 24px;
    height: 24px
}

.digitalsign .maindiv .SendButtonDiv button {
    outline: none;
    border: none;
    background: none
}

.uploadContainer-hd input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.uploadContainer-hd input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

.uploadContainer-hd {
    position: relative
}

.uploadContainer-hd #whitediv {
    align-items: center !important;
    justify-content: center !important
}

.uploadContainer-hd #whitediv .down {
    display: none
}

.uploadContainer-hd #whitediv .up {
    display: flex
}

.uploadContainer-hd #whitediv .collapsed {
    width: 101% !important;
    border-bottom: 9px solid #dfe1f3 !important
}

.uploadContainer-hd #whitediv .collapsed .up {
    display: none
}

.uploadContainer-hd #whitediv .collapsed .down {
    display: flex
}

@media screen and (max-width: 768px) {
    .uploadContainer-hd #whitediv .collapsed {
        width: 100% !important
    }
}

.uploadContainer-hd #sendhd .collapsing {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .1s ease;
    -o-transition: height .1s ease;
    transition: height .1s ease
}

.uploadContainer-hd #sendhd .show .hideen {
    display: flex !important;
    min-height: 56px
}

.uploadContainer-hd #sendhd .show .hideen textarea, .uploadContainer-hd #sendhd .show .hideen textarea:focus {
    border: none;
    background: inherit;
    direction: rtl;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2;
    outline: none
}

.uploadContainer-hd .saveAddressBtn {
    border: 1px solid #dfe1f3;
    background: #028bff !important;
    color: #fff !important
}

.uploadContainer-hd button {
    background: #fafcfe;
    border: 1px solid #dfe1f3;
    box-sizing: border-box;
    border-radius: 24px;
    z-index: 1;
    justify-content: center;
    align-items: center;
    flex-direction: row
}

.uploadContainer-hd button .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #30357c
}

.uploadContainer-hd button .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.uploadContainer-hd button .text1-pending {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer-hd button .text2-pending {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer-hd button .pendingIcone {
    background: #f7f7f7;
    border-radius: 100%
}

.uploadContainer-hd button .text1-complete {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer-hd button .text2-complete {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer-hd .maindiv {
    box-sizing: border-box;
    border-radius: 0 0 24px 24px
}

.uploadContainer-hd .maindiv .send {
    border: 1px solid #c6e5ff;
    border-top: 0;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center
}

.uploadContainer-hd .maindiv .send .SendButtonDiv {
    margin: auto;
    background-color: inherit;
    border: none
}

.uploadContainer-hd .maindiv .send .SendButtonDiv .text7 {
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadContainer-hd .maindiv .send .SendButtonDiv-deactive {
    opacity: .3;
    margin: auto
}

.uploadContainer-hd .maindiv .send .SendButtonDiv-deactive .text7 {
    color: #028bff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadContainer-hd .hd-detail {
    background: #fff;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border: none;
    border-top: 0;
    border-radius: 0 0 24px 24px;
    justify-content: center !important;
    align-items: center !important
}

.uploadContainer-hd .hd-detail p {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-hd .hd-detail .form-control {
    background: #fafcfe;
    border: 1px solid #c6e5ff;
    box-sizing: border-box;
    border-radius: 24px;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    text-align: right;
    color: #8a90d2;
    min-height: 56px
}

.uploadContainer-hd .hd-detail .hd-active {
    background: #f0fdfa;
    border-radius: 24px;
    border: 1px solid #baf8e7;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-hd .hd-detail .hd-active .collapsed {
    display: unset !important
}

.uploadContainer-hd .hd-detail .hd-active p {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer-hd .hd-detail .hd-active div {
    background-image: url(../images/UploadDocuments/complete.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer-hd .hd-detail .hd-defult {
    border: 1px solid #c6e5ff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-hd .hd-detail .hd-defult ::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.uploadContainer-hd .hd-detail .hd-defult input {
    border: none;
    text-align: right;
    background: #fafcfe;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    color: #8a90d2
}

.uploadContainer-hd .hd-detail .hd-defult input:focus {
    outline: none
}

.uploadContainer-hd .hd-detail .hd-input {
    border: 1px dashed #028bff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-hd .hd-detail .hd-input p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer-hd .hd-detail .hd-input div {
    background-image: url(../images/UploadDocuments/idcard-front.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer-hd .hd-detail .validtext {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #30357c;
    direction: rtl
}

.uploadContainer-hd .hd-detail .validation {
    align-items: center;
    justify-content: center
}

.uploadContainer-hd .hd-detail .validation .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-hd .hd-detail .validation .smartnumber {
    justify-content: flex-end
}

.uploadContainer-hd .hd-detail .validation .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    align-items: center;
    color: #3d3d3d
}

.uploadContainer-hd .hd-detail .form-check-input {
    width: 32px;
    height: 32px
}

.uploadContainer-hd .hd-detail .form-check-input:checked[type=radio] {
    background-image: url(../images/tick.svg);
    background-color: #3d3d3d;
    background-size: inherit;
    outline: none;
    box-shadow: none
}

.uploadContainer-hd .hd-detail .edit {
    direction: rtl;
    flex-direction: column
}

.uploadContainer-hd .hd-detail .edit .openEdit {
    justify-content: space-around;
    border: 1px solid #c6e5ff;
    border-radius: 24px;
    background: #edf7ff;
    margin-top: -53px
}

.uploadContainer-hd .hd-detail .edit .openEdit img {
    width: 24px;
    height: 24px
}

.uploadContainer-hd .hd-detail .edit .openEdit p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer-hd .hd-detail .edit .openEdit .img1 {
    opacity: 1
}

.uploadContainer-hd .hd-detail .edit .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-hd .hd-detail .edit .selfornot .title1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-hd .hd-detail .edit .selfornot .divider {
    background: #dfe1f3;
    height: 1px
}

.uploadContainer-hd .hd-detail .edit .selfornot .choiceDiv .title2 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-hd .hd-detail .edit .selfornot .choiceDiv .title2 .form-check-input {
    width: 48px;
    height: 24px
}

.uploadContainer-hd .hd-detail .edit .selfornot .choiceDiv .form-check-input {
    width: 3vw;
    height: 1.5vw
}

@media screen and (max-width: 1920px) {
    .uploadContainer-hd .hd-detail .edit .selfornot .choiceDiv .form-check-input {
        width: 48px;
        height: 24px
    }
}

.uploadContainer-hd .hd-detail .edit .selfornot .choiceDiv .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-hd .hd-detail .edit .selfornot .choiceDiv .text2 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer-hd .hd-detail .edit .littleAlert p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-hd .hd-error-open-button {
    display: flex !important
}

.uploadContainer-hd .hd-error-image {
    box-shadow: -14px 9px 40px 1px #ff6f5e66;
    border-radius: 16px
}

.uploadContainer-hd .text-error1 {
    color: #ff6f5e;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right
}

.uploadContainer-hd .text-error2 {
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    color: #ff6f5e;
    text-align: right
}

.uploadWorkAddress input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

.uploadWorkAddress {
    position: relative
}

@media screen and (max-width: 1850px) {
    .uploadWorkAddress {
        width: 22vw !important
    }
}

@media screen and (max-width: 1600px) {
    .uploadWorkAddress {
        width: 25vw !important
    }
}

@media screen and (max-width: 1360px) {
    .uploadWorkAddress {
        width: 30vw !important
    }
}

@media screen and (max-width: 1360px) {
    .uploadWorkAddress {
        width: 350px !important
    }
}

@media screen and (max-width: 768px) {
    .uploadWorkAddress {
        width: 80% !important
    }
}

@media screen and (max-width: 480px) {
    .uploadWorkAddress {
        width: 100% !important
    }
}

.uploadWorkAddress #whitediv {
    align-items: center !important;
    justify-content: center !important
}

.uploadWorkAddress #whitediv .down {
    display: none
}

.uploadWorkAddress #whitediv .up {
    display: flex
}

.uploadWorkAddress #whitediv .collapsed {
    width: 101% !important;
    border-bottom: 9px solid #dfe1f3 !important
}

.uploadWorkAddress #whitediv .collapsed .up {
    display: none
}

.uploadWorkAddress #whitediv .collapsed .down {
    display: flex
}

@media screen and (max-width: 768px) {
    .uploadWorkAddress #whitediv .collapsed {
        width: 100% !important
    }
}

.uploadWorkAddress button {
    background: #fafcfe;
    border: 1px solid #dfe1f3;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    flex-direction: row
}

.uploadWorkAddress button .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #30357c
}

.uploadWorkAddress button .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.uploadWorkAddress button .text1-pending {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadWorkAddress button .text2-pending {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadWorkAddress button .pendingIcone {
    background: #f7f7f7;
    border-radius: 100%
}

.uploadWorkAddress button .text1-complete {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadWorkAddress button .text2-complete {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadWorkAddress .maindiv {
    box-sizing: border-box;
    border-radius: 0 0 24px 24px
}

.uploadWorkAddress .maindiv .send {
    background: #028bff;
    border: 1px solid #c6e5ff;
    border-top: 0;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center
}

.uploadWorkAddress .maindiv .send .SendButtonDiv {
    margin: auto;
    background-color: inherit;
    border: none
}

.uploadWorkAddress .maindiv .send .SendButtonDiv .text7 {
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadWorkAddress .maindiv .send .SendButtonDiv-deactive {
    opacity: .3;
    margin: auto
}

.uploadWorkAddress .maindiv .send .SendButtonDiv-deactive .text7 {
    color: #028bff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadWorkAddress .WorkAddress-detail {
    background: #fff;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border: 1px solid #f2f3f6;
    border-top: 0;
    border-radius: 0 0 24px 24px;
    justify-content: center !important;
    align-items: center !important
}

.uploadWorkAddress .WorkAddress-detail p {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadWorkAddress .WorkAddress-detail .form-control {
    background: #fafcfe;
    border: 1px solid #c6e5ff;
    box-sizing: border-box;
    border-radius: 24px;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    text-align: right;
    color: #8a90d2;
    min-height: 56px
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-active {
    background: #f0fdfa;
    border-radius: 24px;
    border: 1px solid #baf8e7;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-active .collapsed {
    display: unset !important
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-active p {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-active div {
    background-image: url(../images/UploadDocuments/complete.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-defult {
    border: 1px solid #c6e5ff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-defult ::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-defult input {
    border: none;
    text-align: right;
    background: #fafcfe;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    color: #8a90d2
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-defult input:focus {
    outline: none
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-defult {
    min-height: 56px
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-defult textarea, .uploadWorkAddress .WorkAddress-detail .WorkAddress-defult textarea:focus {
    border: none;
    background: inherit;
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2;
    outline: none
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-input {
    border: 1px dashed #028bff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-input p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadWorkAddress .WorkAddress-detail .WorkAddress-input div {
    background-image: url(../images/UploadDocuments/idcard-front.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadWorkAddress .WorkAddress-error-open-button {
    display: flex !important
}

.uploadWorkAddress .WorkAddress-error-image {
    box-shadow: -14px 9px 40px 1px #ff6f5e66;
    border-radius: 16px
}

.uploadWorkAddress .text-error1 {
    color: #ff6f5e;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right
}

.uploadWorkAddress .text-error2 {
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    color: #ff6f5e;
    text-align: right
}

.uploadContainer-job {
    position: relative
}

.uploadContainer-job input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.uploadContainer-job input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

.uploadContainer-job #whitediv {
    align-items: center !important;
    justify-content: center !important
}

.uploadContainer-job #whitediv .down {
    display: none
}

.uploadContainer-job #whitediv .up {
    display: flex
}

.uploadContainer-job #whitediv .collapsed {
    width: 101% !important;
    border-bottom: 9px solid #dfe1f3 !important
}

.uploadContainer-job #whitediv .collapsed .up {
    display: none
}

.uploadContainer-job #whitediv .collapsed .down {
    display: flex
}

@media screen and (max-width: 768px) {
    .uploadContainer-job #whitediv .collapsed {
        width: 100% !important
    }
}

.uploadContainer-job button {
    background: #fafcfe;
    border: 1px solid #dfe1f3;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    z-index: 1
}

.uploadContainer-job button .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #30357c
}

.uploadContainer-job button .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.uploadContainer-job button .text1-pending {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer-job button .text2-pending {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer-job button .pendingIcone {
    background: #f7f7f7;
    border-radius: 100%
}

.uploadContainer-job button .text1-complete {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer-job button .text2-complete {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer-job #sendjob .collapse .edit {
    display: flex !important
}

.uploadContainer-job #sendjob .collapse .hideen {
    display: none !important
}

.uploadContainer-job #sendjob .collapsing {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .1s ease;
    -o-transition: height .1s ease;
    transition: height .1s ease
}

.uploadContainer-job #sendjob .show .edit {
    display: none !important
}

.uploadContainer-job #sendjob .show .hideen {
    display: flex !important;
    min-height: 56px
}

.uploadContainer-job #sendjob .show .hideen textarea, .uploadContainer-job #sendjob .show .hideen textarea:focus {
    border: none;
    background: inherit;
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2;
    outline: none
}

.uploadContainer-job .maindiv {
    box-sizing: border-box;
    border-radius: 0 0 24px 24px
}

.uploadContainer-job .maindiv .send {
    border: 1px solid #c6e5ff;
    border-top: 0;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center
}

.uploadContainer-job .maindiv .send .SendButtonDiv {
    margin: auto;
    background-color: inherit;
    border: none
}

.uploadContainer-job .maindiv .send .SendButtonDiv .text7 {
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadContainer-job .maindiv .send .SendButtonDiv-deactive {
    opacity: .3;
    margin: auto
}

.uploadContainer-job .maindiv .send .SendButtonDiv-deactive .text7 {
    color: #028bff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadContainer-job .maindiv .send #whitediv {
    background-color: #fafcfe !important
}

.uploadContainer-job .job-detail {
    background: #fafcfe;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border: none;
    border-top: 0;
    border-radius: 0 0 24px 24px;
    justify-content: center !important;
    align-items: center !important;
    position: relative
}

.uploadContainer-job .job-detail P {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    direction: rtl
}

.uploadContainer-job .job-detail a {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    text-decoration: none
}

.uploadContainer-job .job-detail details {
    display: flex
}

.uploadContainer-job .job-detail details {
    position: relative
}

.uploadContainer-job .job-detail details summary {
    display: flex;
    cursor: pointer;
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    direction: ltr;
    position: absolute;
    align-items: center;
    color: #028bff
}

.uploadContainer-job .job-detail details summary:focus {
    outline: none
}

.uploadContainer-job .job-detail details[open] {
    display: block;
    animation: open .2s linear
}

.uploadContainer-job .job-detail details[open] summary {
    position: absolute;
    bottom: 0;
    left: 0
}

.uploadContainer-job .job-detail details #open {
    position: absolute;
    text-align: center;
    margin-top: -1.3vw;
    margin-left: 2vw
}

@media screen and (max-width: 1850px) {
    .uploadContainer-job .job-detail details #open {
        margin-left: 6vw
    }
}

@media screen and (max-width: 1785px) {
    .uploadContainer-job .job-detail details #open {
        margin-left: 3vw
    }
}

@media screen and (max-width: 1360px) {
    .uploadContainer-job .job-detail details #open {
        margin-left: 3vw
    }
}

@media screen and (max-width: 768px) {
    .uploadContainer-job .job-detail details #open {
        margin-left: -2vw;
        margin-top: -5vw
    }
}

.uploadContainer-job .job-detail details[open] #open {
    display: none
}

.uploadContainer-job .job-detail details #close {
    display: none
}

.uploadContainer-job .job-detail details[open] #close {
    display: block
}

.uploadContainer-job .job-detail ::-webkit-details-marker {
    display: none
}

.uploadContainer-job .job-detail .job-active {
    background: #f0fdfa;
    border-radius: 24px;
    border: 1px solid #baf8e7;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-job .job-detail .job-active .collapsed {
    display: unset !important
}

.uploadContainer-job .job-detail .job-active p {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer-job .job-detail .job-active div {
    background-image: url(../images/UploadDocuments/complete.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer-job .job-detail .form-control {
    background: #fafcfe;
    border: 1px solid #c6e5ff;
    box-sizing: border-box;
    border-radius: 24px;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    text-align: right;
    color: #8a90d2;
    min-height: 56px
}

.uploadContainer-job .job-detail .job-defult {
    border: 1px solid #c6e5ff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-job .job-detail .job-defult ::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.uploadContainer-job .job-detail .job-defult input {
    border: none;
    text-align: right;
    background: #fafcfe;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    color: #8a90d2
}

.uploadContainer-job .job-detail .job-defult input:focus {
    outline: none
}

.uploadContainer-job .job-detail .job-defult {
    min-height: 56px
}

.uploadContainer-job .job-detail .job-defult textarea, .uploadContainer-job .job-detail .job-defult textarea:focus {
    border: none;
    background: inherit;
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2;
    outline: none
}

.uploadContainer-job .job-detail .job-input {
    border: 1px dashed #028bff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-job .job-detail .job-input p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer-job .job-detail .job-input div {
    background-image: url(../images/UploadDocuments/idcard-front.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer-job .job-detail .validtext {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.uploadContainer-job .job-detail .validation {
    align-items: center;
    justify-content: center
}

.uploadContainer-job .job-detail .validation .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-job .job-detail .validation .smartnumber {
    justify-content: flex-end
}

.uploadContainer-job .job-detail .validation .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    align-items: center;
    color: #3d3d3d
}

.uploadContainer-job .job-detail .validation img {
    width: 24px
}

.uploadContainer-job .job-detail .text3 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    color: #3d3d3d
}

.uploadContainer-job .job-detail .text4 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    color: #8b8b8b
}

.uploadContainer-job .job-detail .form-check-input {
    width: 32px;
    height: 32px;
    background-image: none;
    background-color: unset
}

.uploadContainer-job .job-detail .form-check-input:checked[type=radio] {
    background-image: url(../images/tick.svg);
    background-color: #3d3d3d;
    background-size: inherit;
    outline: none;
    box-shadow: none
}

.uploadContainer-job .job-detail .checked {
    background-image: url(../images/tick.svg);
    background-color: #3d3d3d;
    background-size: inherit;
    outline: none;
    box-shadow: none
}

.uploadContainer-job .job-detail .edit {
    direction: rtl;
    flex-direction: column
}

.uploadContainer-job .job-detail .edit .openEdit {
    justify-content: space-around;
    border: 1px solid #c6e5ff;
    border-radius: 24px;
    background: #edf7ff;
    margin-top: -63px
}

.uploadContainer-job .job-detail .edit .openEdit img {
    width: 24px;
    height: 24px
}

.uploadContainer-job .job-detail .edit .openEdit p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer-job .job-detail .edit .openEdit .img1 {
    opacity: 1
}

.uploadContainer-job .job-detail .edit .selfornot .title1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-job .job-detail .edit .selfornot .divider {
    background: #dfe1f3;
    height: 1px
}

.uploadContainer-job .job-detail .edit .selfornot .choiceDiv .title2 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-job .job-detail .edit .selfornot .choiceDiv .title2 .form-check-input {
    width: 48px;
    height: 24px
}

.uploadContainer-job .job-detail .edit .selfornot .choiceDiv .form-check-input {
    width: 3vw;
    height: 1.5vw
}

@media screen and (max-width: 1920px) {
    .uploadContainer-job .job-detail .edit .selfornot .choiceDiv .form-check-input {
        width: 48px;
        height: 24px
    }
}

.uploadContainer-job .job-detail .edit .selfornot .choiceDiv .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-job .job-detail .edit .selfornot .choiceDiv .text2 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer-job .job-detail .edit .littleAlert p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-job .certificate {
    border: none;
    box-sizing: border-box;
    background-color: #fafcfe;
    border-radius: 0 0 24px 24px;
    margin-top: -20px;
    flex-wrap: wrap
}

.uploadContainer-job .certificate .customer {
    height: 50px
}

.uploadContainer-job .certificate .customer label {
    background: #fff;
    border: 1px solid #e4e4e4;
    box-sizing: border-box;
    border-radius: 16px;
    color: #3d3d3d
}

.uploadContainer-job .certificate .customer .gds-btn-check:active + .btnn, .uploadContainer-job .certificate .customer .gds-btn-check:checked + .btnn, .uploadContainer-job .certificate .customer .btnn.active, .uploadContainer-job .certificate .customer .btnn.dropdown-toggle.show, .uploadContainer-job .certificate .customer .btnn:active {
    background: #3d3d3d;
    border-radius: 16px;
    box-shadow: -14px 9px 40px 1px #3d3d3d47;
    outline: none !important;
    color: #fff
}

.uploadContainer-job .certificate .customer .text1 {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    text-align: right
}

.uploadContainer-job .certificate .title {
    direction: rtl;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-job .certificate .extradoc-defult {
    border: 1px dashed #028bff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-job .certificate .extradoc-defult p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer-job .certificate .extradoc-defult div {
    background-image: url(../images/UploadDocuments/ExteraDocFile.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer-job .certificate .filemanagerDiv {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    color: #028bff;
    text-align: center
}

.uploadContainer-job .certificate .filemanagerDiv .DetailIcone {
    background: #edf7ff;
    border-radius: 100%;
    margin-right: -1vw
}

.uploadContainer-job .certificate .filemanagerDiv .DeleteIcone {
    background: none
}

@media screen and (max-width: 768px) {
    .uploadContainer-job .certificate .filemanagerDiv .DeleteIcone {
        padding: 2vw !important
    }
}

.uploadContainer-job .certificate .filemanagerDiv .progressbar {
    justify-content: center;
    align-items: center
}

.uploadContainer-job .certificate .filemanagerDiv .progressbar img {
    z-index: 1;
    position: absolute;
    padding: .3vw !important;
    border-radius: 19.2px;
    background-color: #e6f3ff
}

@media screen and (max-width: 768px) {
    .uploadContainer-job .certificate .filemanagerDiv .progressbar img {
        padding: .5vw !important
    }
}

.uploadContainer-job .certificate .filemanagerDiv .progressbar .loader {
    position: relative;
    display: inline-block;
    width: 2.1vw;
    height: 2.1vw;
    border: 4px solid white;
    border-radius: 50%;
    animation: spin .1s infinite linear;
    background-color: #fafcfe
}

@media screen and (max-width: 1600px) {
    .uploadContainer-job .certificate .filemanagerDiv .progressbar .loader {
        width: 2.5vw;
        height: 2.5vw
    }
}

@media screen and (max-width: 1360px) {
    .uploadContainer-job .certificate .filemanagerDiv .progressbar .loader {
        width: 2.8vw;
        height: 2.8vw
    }
}

@media screen and (max-width: 1360px) {
    .uploadContainer-job .certificate .filemanagerDiv .progressbar .loader {
        width: 35px;
        height: 35px
    }
}

@media screen and (max-width: 768px) {
    .uploadContainer-job .certificate .filemanagerDiv .progressbar .loader {
        width: 9vw;
        height: 9vw
    }
}

.uploadContainer-job .certificate .filemanagerDiv .progressbar .loader:before, .uploadContainer-job .certificate .filemanagerDiv .progressbar .loader:after {
    left: -3px;
    top: -3px;
    display: none;
    position: relative;
    content: "";
    width: inherit;
    height: inherit;
    border: inherit;
    border-radius: inherit
}

.uploadContainer-job .certificate .filemanagerDiv .progressbar .spinner {
    border-color: transparent;
    border-top-color: #c6e5ff;
    animation-duration: 2s
}

.uploadContainer-job .certificate .filemanagerDiv .progressbar .spinner:after {
    display: block;
    border-color: transparent;
    border-top-color: #028bff;
    animation: spin 1s infinite ease-in-out
}

.uploadContainer-job .certificate .filemanagerDiv .progressbar .icon {
    width: 29px;
    height: 20px;
    position: absolute;
    top: 490px;
    left: 307px;
    background-image: url(https://dl.dropboxusercontent.com/u/43783651/Mozilla/cloud.svg);
    background-repeat: no-repeat;
    animation: pulsate 1.5s infinite ease-in-out
}

.uploadContainer-job .certificate .filemanagerDiv .collapsing {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .1s ease;
    -o-transition: height .1s ease;
    transition: height .1s ease
}

.uploadContainer-job .certificate .filemanagerDiv .downImg {
    transform: rotate(180deg);
    max-width: 50px
}

.uploadContainer-job .certificate .filemanagerDiv .collapsed .downImg {
    transform: none
}

.uploadContainer-job .certificate .filemanager {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.uploadContainer-job .certificate .filemanager .text5 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer-job .certificate div {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    direction: rtl
}

.uploadContainer-job .certificate .dz-message {
    color: #028bff
}

.uploadContainer-ShopDetail input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.uploadContainer-ShopDetail input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

.uploadContainer-ShopDetail {
    position: relative
}

.uploadContainer-ShopDetail #whitediv {
    align-items: center !important;
    justify-content: center !important
}

.uploadContainer-ShopDetail #whitediv .down {
    display: none
}

.uploadContainer-ShopDetail #whitediv .up {
    display: flex
}

.uploadContainer-ShopDetail #whitediv .collapsed {
    width: 101% !important;
    border-bottom: 9px solid #dfe1f3 !important
}

.uploadContainer-ShopDetail #whitediv .collapsed .up {
    display: none
}

.uploadContainer-ShopDetail #whitediv .collapsed .down {
    display: flex
}

@media screen and (max-width: 768px) {
    .uploadContainer-ShopDetail #whitediv .collapsed {
        width: 100% !important
    }
}

.uploadContainer-ShopDetail #sendhd .collapsing {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .1s ease;
    -o-transition: height .1s ease;
    transition: height .1s ease
}

.uploadContainer-ShopDetail #sendhd .show .hideen {
    display: flex !important;
    min-height: 56px
}

.uploadContainer-ShopDetail #sendhd .show .hideen textarea, .uploadContainer-ShopDetail #sendhd .show .hideen textarea:focus {
    border: none;
    background: inherit;
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2;
    outline: none
}

.uploadContainer-ShopDetail button {
    background: #fafcfe;
    border: 1px solid #dfe1f3;
    box-sizing: border-box;
    border-radius: 24px;
    z-index: 1;
    justify-content: center;
    align-items: center;
    flex-direction: row
}

.uploadContainer-ShopDetail button .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #30357c
}

.uploadContainer-ShopDetail button .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.uploadContainer-ShopDetail button .text1-pending {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer-ShopDetail button .text2-pending {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer-ShopDetail button .pendingIcone {
    background: #f7f7f7;
    border-radius: 100%
}

.uploadContainer-ShopDetail button .text1-complete {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer-ShopDetail button .text2-complete {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer-ShopDetail .maindiv {
    box-sizing: border-box;
    border-radius: 0 0 24px 24px
}

.uploadContainer-ShopDetail .maindiv .send {
    border: 1px solid #c6e5ff;
    border-top: 0;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center
}

.uploadContainer-ShopDetail .maindiv .send .SendButtonDiv {
    margin: auto;
    background-color: inherit;
    border: none
}

.uploadContainer-ShopDetail .maindiv .send .SendButtonDiv .text7 {
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadContainer-ShopDetail .maindiv .send .SendButtonDiv-deactive {
    opacity: .3;
    margin: auto
}

.uploadContainer-ShopDetail .maindiv .send .SendButtonDiv-deactive .text7 {
    color: #028bff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadContainer-ShopDetail .hd-detail {
    background: #fff;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border: none;
    border-top: 0;
    border-radius: 0 0 24px 24px;
    justify-content: center !important;
    align-items: center !important
}

.uploadContainer-ShopDetail .hd-detail p {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-ShopDetail .hd-detail .hd-active {
    background: #f0fdfa;
    border-radius: 24px;
    border: 1px solid #baf8e7;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer-ShopDetail .hd-detail .hd-active .collapsed {
    display: unset !important
}

.uploadContainer-ShopDetail .hd-detail .hd-active p {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer-ShopDetail .hd-detail .hd-active div {
    background-image: url(../images/UploadDocuments/complete.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer-ShopDetail .hd-detail .validtext {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #30357c;
    direction: rtl
}

.uploadContainer-ShopDetail .hd-detail .validation {
    align-items: center;
    justify-content: center
}

.uploadContainer-ShopDetail .hd-detail .validation .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-ShopDetail .hd-detail .validation .smartnumber {
    justify-content: flex-end
}

.uploadContainer-ShopDetail .hd-detail .validation .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    align-items: center;
    color: #3d3d3d
}

.uploadContainer-ShopDetail .hd-detail .form-check-input {
    width: 32px;
    height: 32px
}

.uploadContainer-ShopDetail .hd-detail .form-check-input:checked[type=radio] {
    background-image: url(../images/tick.svg);
    background-color: #3d3d3d;
    background-size: inherit;
    outline: none;
    box-shadow: none
}

.uploadContainer-ShopDetail .hd-detail .edit {
    direction: rtl;
    flex-direction: column
}

.uploadContainer-ShopDetail .hd-detail .edit .openEdit {
    justify-content: space-around;
    border: 1px solid #c6e5ff;
    border-radius: 24px;
    background: #edf7ff;
    margin-top: -53px
}

.uploadContainer-ShopDetail .hd-detail .edit .openEdit img {
    width: 24px;
    height: 24px
}

.uploadContainer-ShopDetail .hd-detail .edit .openEdit p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer-ShopDetail .hd-detail .edit .openEdit .img1 {
    opacity: 1
}

.uploadContainer-ShopDetail .hd-detail .edit .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-ShopDetail .hd-detail .edit .selfornot .title1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-ShopDetail .hd-detail .edit .selfornot .divider {
    background: #dfe1f3;
    height: 1px
}

.uploadContainer-ShopDetail .hd-detail .edit .selfornot .choiceDiv .title2 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-ShopDetail .hd-detail .edit .selfornot .choiceDiv .title2 .form-check-input {
    width: 48px;
    height: 24px
}

.uploadContainer-ShopDetail .hd-detail .edit .selfornot .choiceDiv .form-check-input {
    width: 3vw;
    height: 1.5vw
}

@media screen and (max-width: 1920px) {
    .uploadContainer-ShopDetail .hd-detail .edit .selfornot .choiceDiv .form-check-input {
        width: 48px;
        height: 24px
    }
}

.uploadContainer-ShopDetail .hd-detail .edit .selfornot .choiceDiv .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-ShopDetail .hd-detail .edit .selfornot .choiceDiv .text2 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer-ShopDetail .hd-detail .edit .littleAlert p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.uploadContainer-ShopDetail .hd-detail .submitReal {
    border-radius: 24px;
    border: 1px solid #028bff;
    background-color: transparent;
    color: #028bff;
    text-align: right;
    font-size: 16px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center
}

.uploadContainer-ShopDetail .hd-error-open-button {
    display: flex !important
}

.uploadContainer-ShopDetail .hd-error-image {
    box-shadow: -14px 9px 40px 1px #ff6f5e66;
    border-radius: 16px
}

.uploadContainer-ShopDetail .text-error1 {
    color: #ff6f5e;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right
}

.uploadContainer-ShopDetail .text-error2 {
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    color: #ff6f5e;
    text-align: right
}

.job-error-open-button {
    display: flex !important
}

.job-error-image {
    box-shadow: -14px 9px 40px 1px #ff6f5e66;
    border-radius: 16px
}

.text-error1 {
    color: #ff6f5e;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right
}

.text-error2 {
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    color: #ff6f5e;
    text-align: right
}

.uploadContainer {
    position: relative
}

.uploadContainer .collapsing {
    width: 100% !important
}

.uploadContainer input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.uploadContainer input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

.uploadContainer #whitediv {
    align-items: center !important;
    justify-content: center !important
}

.uploadContainer #whitediv .down {
    display: flex;
    transition: transform .35s ease;
    transform: rotate(180deg)
}

.uploadContainer #whitediv .up {
    display: flex
}

.uploadContainer #whitediv .collapsed {
    width: 101% !important;
    border-bottom: 9px solid #dfe1f3 !important
}

.uploadContainer #whitediv .collapsed .down {
    transition: transform .35s ease;
    transform: rotate(360deg)
}

@media screen and (max-width: 768px) {
    .uploadContainer #whitediv .collapsed {
        width: 100% !important
    }
}

.uploadContainer button {
    background: #fafcfe;
    border: 1px solid #dfe1f3;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    color: #3d3d3d
}

.uploadContainer button:disabled {
    background: #f5f5f5;
    opacity: .4;
    border: 1px solid #d3cece;
    color: #8b8b8b
}

.uploadContainer .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #30357c
}

.uploadContainer .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.uploadContainer .text1-pending {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer .text2-pending {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.uploadContainer .pendingIcone {
    background: #f7f7f7;
    border-radius: 100%
}

.uploadContainer .text1-verified {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer .text2-verified {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer .maindiv {
    box-sizing: border-box;
    border-radius: 0 0 24px 24px
}

.uploadContainer .maindiv .send {
    border: 1px solid #c6e5ff;
    border-top: 0;
    box-sizing: border-box;
    border-radius: 24px;
    justify-content: center;
    align-items: center
}

.uploadContainer .maindiv .send .SendButtonDiv {
    margin: auto;
    background-color: inherit;
    border: none
}

.uploadContainer .maindiv .send .SendButtonDiv .text7 {
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadContainer .maindiv .send .SendButtonDiv-deactive {
    opacity: .3;
    margin: auto
}

.uploadContainer .maindiv .send .SendButtonDiv-deactive .text7 {
    color: #028bff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center
}

.uploadContainer .idcard-detail {
    background: #fff;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border: none;
    border-top: 0;
    border-radius: 0 0 24px 24px;
    justify-content: center !important;
    align-items: center !important
}

.uploadContainer .idcard-detail p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    direction: rtl
}

.uploadContainer .idcard-detail .idcard-active {
    background: #f0fdfa;
    border-radius: 24px;
    border: 1px solid #baf8e7;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer .idcard-detail .idcard-active .collapsed {
    display: unset !important
}

.uploadContainer .idcard-detail .idcard-active p {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.uploadContainer .idcard-detail .idcard-active div {
    background-image: url(../images/UploadDocuments/complete.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer .idcard-detail .idcard-defult {
    border: 1px dashed #028bff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.uploadContainer .idcard-detail .idcard-defult p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer .idcard-detail .idcard-defult div {
    background-image: url(../images/UploadDocuments/idcard-front.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.uploadContainer .idcard-detail .filemanagerDiv {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    color: #028bff;
    text-align: center
}

.uploadContainer .idcard-detail .filemanagerDiv .DetailIcone {
    background: #edf7ff;
    border-radius: 100%;
    margin-right: -1vw
}

.uploadContainer .idcard-detail .filemanagerDiv .DeleteIcone {
    background: none
}

@media screen and (max-width: 768px) {
    .uploadContainer .idcard-detail .filemanagerDiv .DeleteIcone {
        padding: 2vw !important
    }
}

.uploadContainer .idcard-detail .filemanagerDiv .progressbar {
    justify-content: center;
    align-items: center
}

.uploadContainer .idcard-detail .filemanagerDiv .progressbar img {
    z-index: 1;
    position: absolute;
    padding: .3vw !important;
    border-radius: 19.2px;
    background-color: #e6f3ff
}

@media screen and (max-width: 768px) {
    .uploadContainer .idcard-detail .filemanagerDiv .progressbar img {
        padding: .5vw !important
    }
}

.uploadContainer .idcard-detail .filemanagerDiv .progressbar .loader {
    position: relative;
    display: inline-block;
    width: 2.1vw;
    height: 2.1vw;
    border: 4px solid white;
    border-radius: 50%;
    animation: spin .1s infinite linear;
    background-color: #fafcfe
}

@media screen and (max-width: 1600px) {
    .uploadContainer .idcard-detail .filemanagerDiv .progressbar .loader {
        width: 2.5vw;
        height: 2.5vw
    }
}

@media screen and (max-width: 1360px) {
    .uploadContainer .idcard-detail .filemanagerDiv .progressbar .loader {
        width: 2.8vw;
        height: 2.8vw
    }
}

@media screen and (max-width: 1360px) {
    .uploadContainer .idcard-detail .filemanagerDiv .progressbar .loader {
        width: 35px;
        height: 35px
    }
}

@media screen and (max-width: 768px) {
    .uploadContainer .idcard-detail .filemanagerDiv .progressbar .loader {
        width: 9vw;
        height: 9vw
    }
}

.uploadContainer .idcard-detail .filemanagerDiv .progressbar .loader:before, .uploadContainer .idcard-detail .filemanagerDiv .progressbar .loader:after {
    left: -3px;
    top: -3px;
    display: none;
    position: relative;
    content: "";
    width: inherit;
    height: inherit;
    border: inherit;
    border-radius: inherit
}

.uploadContainer .idcard-detail .filemanagerDiv .progressbar .spinner {
    border-color: transparent;
    border-top-color: #c6e5ff;
    animation-duration: 2s
}

.uploadContainer .idcard-detail .filemanagerDiv .progressbar .spinner:after {
    display: block;
    border-color: transparent;
    border-top-color: #028bff;
    animation: spin 1s infinite ease-in-out
}

.uploadContainer .idcard-detail .filemanagerDiv .progressbar .icon {
    width: 29px;
    height: 20px;
    position: absolute;
    top: 490px;
    left: 307px;
    background-image: url(https://dl.dropboxusercontent.com/u/43783651/Mozilla/cloud.svg);
    background-repeat: no-repeat;
    animation: pulsate 1.5s infinite ease-in-out
}

@keyframes pulsate {
    0%, to {
        opacity: 1
    }
    50% {
        opacity: .75
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.uploadContainer .idcard-detail .filemanagerDiv .collapsing {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .1s ease;
    -o-transition: height .1s ease;
    transition: height .1s ease
}

.uploadContainer .idcard-detail .filemanagerDiv .downImg {
    transform: rotate(180deg);
    max-width: 50px
}

.uploadContainer .idcard-detail .filemanagerDiv .collapsed .downImg {
    transform: none
}

.uploadContainer .idcard-detail .filemanager {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: auto;
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.uploadContainer .idcard-detail .filemanager .text5 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.uploadContainer .idcard-error-open-button {
    display: flex !important
}

.uploadContainer .idcard-error-image {
    box-shadow: -14px 9px 40px 1px #ff6f5e66;
    border-radius: 16px
}

.uploadContainer .text1-error {
    color: #ff6f5e;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right
}

.uploadContainer .text2-error {
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    color: #ff6f5e;
    text-align: right
}

.FixState {
    position: absolute;
    top: 100px;
    right: 0;
    margin-right: 20px;
    margin-top: 20px;
    height: 87%
}

.FixState .div1 {
    background: #30357c1a;
    border: 1.5px solid #30357c;
    box-sizing: border-box;
    border-radius: 48px;
    width: 50px;
    height: 50px
}

.FixState .div1 .div2 {
    background: #30357c;
    box-shadow: -14px 9px 40px 1px #30357c52;
    border-radius: 48px;
    width: 32px;
    height: 32px
}

.FixState .div1 .div2 img {
    width: 19px;
    height: 19px
}

.FixState .text {
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #30357c
}

.FixState .dot {
    background-image: url(../images/State/1dot.svg);
    height: 50%;
    width: 3px;
    background-size: contain;
    margin-right: 35px !important
}

.FixState .dot3 {
    display: flex
}

.FixState .StateDiv {
    background: #fff;
    border: 1px solid #30357c;
    border-radius: 24px;
    width: 128px;
    height: 128px;
    position: relative
}

.FixState .StateDiv .topImage {
    width: 35px;
    height: 35px;
    position: absolute;
    top: -20px;
    right: 20px;
    background-color: #fff;
    padding: 6px;
    border: 2px solid #f7f7f7;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 12px
}

.FixState .StateDiv .t1 {
    font-style: normal;
    font-weight: 200;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.FixState .StateDiv .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.FixState .StateDiv .bottomImage {
    position: absolute;
    bottom: -15px;
    right: 20px;
    width: 32px;
    height: 32px;
    background: #30357c;
    box-shadow: -6px 9px 24px 1px #30357c2e;
    border-radius: 12px
}

.FixState .NextStateDiv {
    background: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    width: 128px;
    height: 128px;
    position: relative
}

.FixState .NextStateDiv .topImage {
    width: 35px;
    height: 35px;
    position: absolute;
    top: -20px;
    right: 20px;
    background-color: #fff;
    padding: 6px;
    border: 2px solid #f7f7f7;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 12px
}

.FixState .NextStateDiv .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #30357c
}

.FixState .NextStateDiv .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.FixState .dash {
    background-color: #dfe1f3;
    height: 15px;
    width: 2px;
    margin-right: 40px !important
}

.StateMobile {
    position: initial;
    margin-right: unset;
    height: fit-content;
    margin-bottom: 50px;
    direction: rtl
}

.StateMobile .StateDiv {
    width: 40% !important;
    height: 100px;
    max-width: 200px;
    min-width: 182px
}

.StateMobile .NextStateDiv {
    width: 40% !important;
    height: 100px;
    max-width: fit-content
}

.StateMobile .bottomImage {
    position: relative !important;
    right: unset !important;
    bottom: unset !important
}

@media screen and (max-width: 768px) {
    .StateMobile {
        width: 100%;
        position: unset;
        margin-bottom: 0
    }
}

#LoginPage {
    background: #fafcfe;
    border-radius: 40px 40px 0 0
}

#LoginPage .HeaderAuthPage {
    height: fit-content
}

#LoginPage .HeaderAuthPage .MobileIcone {
    display: none !important
}

@media screen and (max-width: 480px) {
    #LoginPage .HeaderAuthPage img {
        margin-right: 20px !important;
        width: 100px
    }

    #LoginPage .HeaderAuthPage .MobileIcone {
        display: flex !important
    }

    #LoginPage .HeaderAuthPage .MobileIcone img {
        width: 35px !important
    }

    #LoginPage .HeaderAuthPage .defIcone img {
        margin: 0 !important
    }
}

#LoginPage .LoginContent {
    height: fit-content;
    min-height: calc(100vh - 74px)
}

#LoginPage .LoginContent:before {
    content: "";
    width: 20%;
    height: 65%;
    position: absolute;
    background-image: url(../images/login/BeforVector.svg);
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: right;
    z-index: 0;
    right: 0
}

@media screen and (max-width: 768px) {
    #LoginPage .LoginContent:before {
        width: 50%
    }
}

@media screen and (max-width: 480px) {
    #LoginPage .LoginContent:before {
        display: none !important
    }
}

#LoginPage .LoginContent:after {
    content: "";
    width: 20%;
    height: 65%;
    position: absolute;
    left: 0;
    background-image: url(../images/login/AfterVector.svg);
    background-repeat: no-repeat;
    z-index: 0
}

@media screen and (max-width: 768px) {
    #LoginPage .LoginContent:after {
        width: 50%
    }
}

@media screen and (max-width: 480px) {
    #LoginPage .LoginContent:after {
        display: none !important
    }
}

#LoginPage .LoginContent .MainDiv {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    position: relative;
    max-height: fit-content;
    margin: auto;
    z-index: 1
}

#LoginPage .LoginContent .MainDiv .Left {
    height: 100%
}

#LoginPage .LoginContent .MainDiv .Left .NiceButton {
    min-width: 240px;
    max-width: 245px
}

@media screen and (max-width: 850px) {
    #LoginPage .LoginContent .MainDiv .NiceButton {
        min-width: 200px
    }
}

@media screen and (max-width: 850px) {
    #LoginPage .LoginContent .NewUser {
        max-width: 400px
    }

    #LoginPage .LoginContent .NewUser .des {
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 28px;
        text-align: center;
        color: #16d8a4
    }

    #LoginPage .LoginContent .NewUser .NiceButton {
        margin-bottom: 35px !important
    }
}

@media screen and (max-width: 1360px) {
    #LoginPage .LoginContent {
        width: 100%
    }
}

@media screen and (max-width: 768px) {
    #LoginPage .LoginContent {
        width: 100%;
        height: fit-content
    }
}

#LoginNavbar .text1 {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    text-align: right;
    color: #00569f;
    text-decoration: none
}

@media screen and (max-width: 1360px) {
    #LoginNavbar .text1 {
        font-size: 16px
    }
}

#LoginNavbar .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #3d3d3d
}

@media screen and (max-width: 1360px) {
    #LoginNavbar .text2 {
        font-size: 16px
    }
}

#LoginNavbar .text3 {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #00569f;
    text-decoration: none
}

@media screen and (max-width: 1360px) {
    #LoginNavbar .text3 {
        font-size: 16px
    }
}

#LoginRegister {
    height: fit-content;
    background: unset;
    border-radius: 24px;
    z-index: 1;
    width: 400px
}

@media screen and (max-width: 850px) {
    #LoginRegister {
        width: 100%;
        max-width: 400px !important;
        margin-top: 0 !important
    }
}

@media screen and (max-width: 568px) {
    #LoginRegister {
        min-width: 90vw
    }
}

#LoginRegister .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    color: #3d3d3d;
    padding-left: 85px
}

@media screen and (max-width: 1360px) {
    #LoginRegister .text1 {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    #LoginRegister .text1 {
        text-align: right;
        padding-right: 15%;
        font-size: 18px;
        line-height: unset
    }
}

#LoginRegister .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    text-align: right;
    color: #3d3d3d
}

#LoginRegister .text3 {
    border-style: none;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    color: #8b8b8b
}

@media screen and (max-width: 1600px) {
    #LoginRegister .text3 {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    #LoginRegister .text3 {
        border-radius: 24px
    }
}

#LoginRegister .text3:focus {
    border-style: none;
    outline-offset: 0;
    outline: none;
    box-shadow: none
}

#LoginRegister .text3::placeholder {
    font-size: 17px;
    text-align: right;
    font-weight: 300;
    color: #8b8b8b;
    background-color: unset;
    direction: rtl
}

@media screen and (max-width: 1600px) {
    #LoginRegister .text3::placeholder {
        font-size: 15px
    }
}

@media screen and (max-width: 480px) {
    #LoginRegister .text3::placeholder {
        background-color: #fff;
        color: #8b8b8b;
        text-align: right;
        font-size: .81rem;
        padding-right: 5px;
        margin-bottom: 130px
    }
}

#LoginRegister .phoneInput {
    background: #fff
}

#LoginRegister .phoneInput .gds-input {
    min-height: 100%
}

#LoginRegister .phoneInput {
    box-sizing: border-box;
    border-radius: 12px;
    text-align: center;
    height: 64px
}

#LoginRegister .phoneInput input {
    height: 90%
}

@media screen and (max-width: 480px) {
    #LoginRegister .phoneInput input {
        height: 90%
    }
}

@media screen and (max-width: 480px) {
    #LoginRegister .phoneInput input {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }
}

#LoginRegister .phoneInput img {
    border-left: 1px solid #e4e4e4;
    margin-left: 12px
}

@media screen and (max-width: 480px) {
    #LoginRegister .phoneInput img {
        margin-left: 7px
    }
}

#LoginRegister .captchaButton {
    background-color: unset;
    border: none
}

#ForgotPassword {
    background-color: #fff;
    height: fit-content;
    background: #fff;
    box-shadow: 3px 9px 50px 1px #028bff0a;
    border-radius: 24px;
    z-index: 1;
    width: 31vw
}

@media screen and (max-width: 1850px) {
    #ForgotPassword {
        width: 33vw !important
    }
}

@media screen and (max-width: 1600px) {
    #ForgotPassword {
        width: 34vw !important
    }
}

@media screen and (max-width: 1360px) {
    #ForgotPassword {
        width: 38vw !important
    }
}

@media screen and (max-width: 992px) {
    #ForgotPassword {
        width: 52vw !important
    }
}

@media screen and (max-width: 768px) {
    #ForgotPassword {
        width: 100% !important
    }
}

@media screen and (max-width: 480px) {
    #ForgotPassword {
        background: #fafcfe;
        border: 2px solid #edf7ff;
        box-shadow: inset 0 4px 16px #028bff12;
        border-radius: 32px;
        width: 100vw !important;
        margin-top: 0 !important;
        height: fit-content
    }
}

#ForgotPassword .nav {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

@media screen and (max-width: 480px) {
    #ForgotPassword .nav {
        background: #fafcfe;
        box-shadow: unset;
        width: 90%;
        margin-top: 13px;
        padding-top: 10px !important
    }
}

@media screen and (max-width: 480px) {
    #ForgotPassword .contents {
        background: #fafcfe;
        border: 2px solid #edf7ff;
        box-shadow: inset 0 4px 16px #028bff12;
        border-radius: 32px
    }
}

#ForgotPassword .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    color: #3d3d3d;
    padding-left: 85px
}

@media screen and (max-width: 1360px) {
    #ForgotPassword .text1 {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    #ForgotPassword .text1 {
        text-align: right;
        padding-right: 15%;
        font-size: 18px;
        line-height: unset;
        padding-left: 0
    }
}

#ForgotPassword .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    text-align: right;
    color: #3d3d3d
}

#ForgotPassword .text3 {
    border-style: none;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    color: #8b8b8b
}

@media screen and (max-width: 1600px) {
    #ForgotPassword .text3 {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    #ForgotPassword .text3 {
        border-radius: 24px
    }
}

#ForgotPassword .text3:focus {
    border-style: none;
    outline-offset: 0;
    outline: none;
    box-shadow: none
}

#ForgotPassword .text3::placeholder {
    font-size: 17px;
    text-align: right;
    font-weight: 300;
    color: #8b8b8b;
    background-color: #fff;
    direction: rtl
}

@media screen and (max-width: 1600px) {
    #ForgotPassword .text3::placeholder {
        font-size: 15px
    }
}

@media screen and (max-width: 480px) {
    #ForgotPassword .text3::placeholder {
        background-color: #fff;
        color: #8b8b8b;
        text-align: right;
        font-size: .81rem;
        padding-right: 5px;
        margin-bottom: 130px
    }
}

#ForgotPassword .phoneInput {
    background: #fff
}

#ForgotPassword .phoneInput .gds-input {
    min-height: 100%
}

#ForgotPassword .phoneInput {
    box-sizing: border-box;
    border-radius: 24px;
    text-align: center;
    height: 64px
}

#ForgotPassword .phoneInput input {
    height: 90%
}

@media screen and (max-width: 480px) {
    #ForgotPassword .phoneInput input {
        height: 90%
    }
}

@media screen and (max-width: 480px) {
    #ForgotPassword .phoneInput input {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }
}

#ForgotPassword button {
    background-color: #028bff;
    box-shadow: -5px 9px 24px 1px #028bff3d;
    border-radius: 24px;
    border-style: none;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
    color: #fff
}

@media screen and (max-width: 480px) {
    #ForgotPassword button {
        font-size: 18px;
        height: 64px !important;
        padding: 0 !important
    }
}

#NewPassword {
    background-color: #fff;
    height: fit-content;
    background: #fff;
    box-shadow: 3px 9px 50px 1px #028bff0a;
    border-radius: 24px;
    z-index: 1;
    width: 31vw
}

@media screen and (max-width: 1850px) {
    #NewPassword {
        width: 33vw !important
    }
}

@media screen and (max-width: 1600px) {
    #NewPassword {
        width: 34vw !important
    }
}

@media screen and (max-width: 1360px) {
    #NewPassword {
        width: 38vw !important
    }
}

@media screen and (max-width: 992px) {
    #NewPassword {
        width: 52vw !important
    }
}

@media screen and (max-width: 768px) {
    #NewPassword {
        width: 100% !important
    }
}

@media screen and (max-width: 480px) {
    #NewPassword {
        background: #fafcfe;
        border: 2px solid #edf7ff;
        box-shadow: inset 0 4px 16px #028bff12;
        border-radius: 32px;
        width: 100vw !important;
        margin-top: 0 !important;
        height: fit-content
    }
}

#NewPassword .nav {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

@media screen and (max-width: 480px) {
    #NewPassword .nav {
        background: #fafcfe;
        box-shadow: unset;
        width: 90%;
        margin-top: 13px;
        padding-top: 10px !important
    }
}

@media screen and (max-width: 480px) {
    #NewPassword .contents {
        background: #fafcfe;
        border: 2px solid #edf7ff;
        box-shadow: inset 0 4px 16px #028bff12;
        border-radius: 32px
    }
}

#NewPassword .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    color: #3d3d3d;
    padding-left: 85px
}

@media screen and (max-width: 1360px) {
    #NewPassword .text1 {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    #NewPassword .text1 {
        text-align: right;
        padding-right: 30%;
        font-size: 18px;
        line-height: unset
    }
}

#NewPassword .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    text-align: right;
    color: #3d3d3d
}

#NewPassword .text3 {
    border-style: none;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    color: #8b8b8b
}

@media screen and (max-width: 1600px) {
    #NewPassword .text3 {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    #NewPassword .text3 {
        border-radius: 24px
    }
}

#NewPassword .text3:focus {
    border-style: none;
    outline-offset: 0;
    outline: none;
    box-shadow: none
}

#NewPassword .text3::placeholder {
    font-size: 17px;
    text-align: right;
    font-weight: 300;
    color: #8b8b8b;
    background-color: #fff;
    direction: rtl
}

@media screen and (max-width: 1600px) {
    #NewPassword .text3::placeholder {
        font-size: 15px
    }
}

@media screen and (max-width: 480px) {
    #NewPassword .text3::placeholder {
        background-color: #fff;
        color: #8b8b8b;
        text-align: right;
        font-size: .81rem;
        padding-right: 5px;
        margin-bottom: 130px
    }
}

#NewPassword .passInput {
    background: #fff
}

#NewPassword .passInput .gds-input {
    min-height: 100%
}

#NewPassword .passInput {
    box-sizing: border-box;
    border-radius: 24px;
    text-align: center;
    height: 64px
}

#NewPassword .passInput input {
    height: 90%
}

@media screen and (min-width: 568px) {
    #NewPassword .passInput input {
        padding-right: 15px !important
    }
}

@media screen and (max-width: 480px) {
    #NewPassword .passInput input {
        height: 90%;
        margin-top: .5rem !important;
        margin-bottom: .5rem !important;
        width: 66.6%
    }
}

#NewPassword button {
    background-color: #028bff;
    box-shadow: -5px 9px 24px 1px #028bff3d;
    border-radius: 24px;
    border-style: none;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
    color: #fff
}

@media screen and (max-width: 480px) {
    #NewPassword button {
        font-size: 18px;
        height: 64px !important;
        padding: 0 !important
    }
}

#CompleteInformation {
    height: fit-content;
    background: unset;
    border-radius: 24px;
    z-index: 1;
    width: 400px
}

@media screen and (max-width: 850px) {
    #CompleteInformation {
        width: 100%;
        max-width: 400px !important;
        margin-top: 0 !important
    }
}

@media screen and (max-width: 568px) {
    #CompleteInformation {
        min-width: 90vw
    }
}

#CompleteInformation .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    color: #3d3d3d;
    padding-left: 85px
}

@media screen and (max-width: 1360px) {
    #CompleteInformation .text1 {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    #CompleteInformation .text1 {
        text-align: right;
        padding-right: 15%;
        font-size: 18px;
        line-height: unset
    }
}

#CompleteInformation .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    text-align: right;
    color: #3d3d3d
}

#CompleteInformation .text3 {
    border-style: none;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    color: #8b8b8b
}

@media screen and (max-width: 1600px) {
    #CompleteInformation .text3 {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    #CompleteInformation .text3 {
        border-radius: 24px
    }
}

#CompleteInformation .text3:focus {
    border-style: none;
    outline-offset: 0;
    outline: none;
    box-shadow: none
}

#CompleteInformation .text3::placeholder {
    font-size: 17px;
    text-align: right;
    font-weight: 300;
    color: #8b8b8b;
    background-color: #fff;
    direction: rtl
}

@media screen and (max-width: 1600px) {
    #CompleteInformation .text3::placeholder {
        font-size: 15px
    }
}

@media screen and (max-width: 480px) {
    #CompleteInformation .text3::placeholder {
        background-color: #fff;
        color: #8b8b8b;
        text-align: right;
        font-size: .81rem;
        padding-right: 5px;
        margin-bottom: 130px
    }
}

#CompleteInformation .phoneInput {
    background: #fff
}

#CompleteInformation .phoneInput .gds-input {
    min-height: 100%
}

#CompleteInformation .phoneInput {
    box-sizing: border-box;
    border-radius: 12px;
    text-align: center;
    height: 64px
}

#CompleteInformation .phoneInput input {
    height: 90%
}

@media screen and (max-width: 480px) {
    #CompleteInformation .phoneInput input {
        height: 90%
    }
}

@media screen and (max-width: 480px) {
    #CompleteInformation .phoneInput input {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }
}

#ConfirmPhoneComponent {
    background-color: #fff;
    height: fit-content;
    background: unset;
    border-radius: 24px;
    z-index: 1;
    width: 400px
}

@media screen and (max-width: 850px) {
    #ConfirmPhoneComponent {
        width: 100%;
        max-width: 400px !important;
        margin-top: 0 !important
    }
}

@media screen and (max-width: 568px) {
    #ConfirmPhoneComponent {
        min-width: 90vw
    }
}

#ConfirmPhoneComponent .text1 {
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 28px;
    text-align: right;
    color: #8b8b8b;
    direction: rtl
}

#ConfirmPhoneComponent .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    text-align: right;
    color: #3d3d3d
}

#ConfirmPhoneComponent .text3 {
    border-style: none;
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    color: #8b8b8b
}

@media screen and (max-width: 1600px) {
    #ConfirmPhoneComponent .text3 {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    #ConfirmPhoneComponent .text3 {
        border-radius: 24px
    }
}

#ConfirmPhoneComponent .text3:focus {
    border-style: none;
    outline-offset: 0;
    outline: none;
    box-shadow: none
}

#ConfirmPhoneComponent .text3::placeholder {
    font-size: 17px;
    text-align: right;
    font-weight: 300;
    color: #8b8b8b;
    background-color: #fff;
    direction: rtl
}

@media screen and (max-width: 1600px) {
    #ConfirmPhoneComponent .text3::placeholder {
        font-size: 15px
    }
}

@media screen and (max-width: 480px) {
    #ConfirmPhoneComponent .text3::placeholder {
        background-color: #fff;
        color: #8b8b8b;
        text-align: right;
        font-size: .81rem;
        padding-right: 5px;
        margin-bottom: 130px
    }
}

#ConfirmPhoneComponent .userphone {
    background: #f7f7f7;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    height: 64px
}

#ConfirmPhoneComponent .userphone .usernumber {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #3d3d3d
}

#ConfirmPhoneComponent .userphone .backButton {
    border: none;
    background: unset;
    border-left: 1px solid #e4e4e4;
    justify-content: center;
    align-items: center
}

#ConfirmPhoneComponent .passInput .gds-input {
    min-height: 100%
}

#ConfirmPhoneComponent .passInput {
    border-radius: 8px;
    height: 64px
}

#ConfirmPhoneComponent .passInput input {
    height: 90%
}

#ConfirmPhoneComponent .passInput img {
    border-left: 1px solid #e4e4e4;
    margin-left: 12px
}

@media screen and (max-width: 480px) {
    #ConfirmPhoneComponent .passInput img {
        margin-left: 7px;
        padding: 0 5px !important
    }
}

#ConfirmPhoneComponent .smscode {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    text-align: right;
    color: #028bff
}

#ConfirmPhoneComponent .smscode .light {
    color: #8b8b8b;
    font-weight: 300;
    margin: 0;
    padding: 0
}

#ConfirmPhoneComponent .smscode .link {
    color: #06489d;
    font-weight: 300;
    margin: 0;
    padding: 0;
    text-decoration: underline
}

.Nodata .vector {
    max-width: 500px
}

.Nodata .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #3d3d3d
}

.Nodata .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #8b8b8b;
    max-width: 364px
}

.Nodata .NiceButton {
    position: relative;
    direction: rtl
}

.Nodata .NiceButton button, .Nodata .NiceButton a {
    background: inherit;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #3d3d3d;
    border: 2px solid #3d3d3d;
    z-index: 1
}

.Nodata .NiceButton div {
    position: absolute;
    height: 64px;
    background: #16d8a4;
    border-radius: 24px;
    z-index: 0;
    top: 5px;
    left: 6px
}

.ordersPage .upshadow {
    overflow-y: hidden
}

.ordersPage .upshadow #contain {
    padding-bottom: 50px
}

@media screen and (max-width: 768px) {
    .ordersPage .upshadow #contain {
        max-height: fit-content !important;
        height: fit-content !important;
        padding: 0 !important
    }
}

@media screen and (max-width: 1360px) {
    .Contract {
        margin-top: 50px
    }
}

@media screen and (max-width: 768px) {
    .Contract {
        margin-bottom: 100px !important;
        margin-top: 0 !important
    }
}

@media screen and (max-width: 480px) {
    .Contract {
        margin-top: 30px !important
    }
}

.Contract .downloadDiv {
    background: #fff;
    max-width: 384px;
    height: 328px;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.Contract .downloadDiv .fileimage {
    background: #f7f7f7;
    border-radius: 16px;
    width: 48px;
    height: 48px
}

.Contract .downloadDiv .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    direction: rtl
}

.Contract .downloadDiv .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b;
    direction: rtl
}

.Contract .downloadDiv .text3 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    direction: rtl
}

.Contract .downloadDiv button {
    background: #028bff;
    border-radius: 24px;
    border: none;
    outline: none;
    height: 56px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: #fff
}

.Contract .addressDiv {
    background: #fff;
    max-width: 384px;
    height: 208px;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.Contract .addressDiv .text1 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #00569f;
    direction: rtl
}

.Contract .addressDiv .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4;
    direction: rtl
}

.Contract .addressDiv .divider {
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 24px;
    height: 1px
}

.Contract .addressDiv img {
    width: 48px;
    height: 48px
}

.Contract .addressDiv .location {
    background-color: #edf7ff;
    border-radius: 24px
}

.Contract .addressDiv .sms {
    background-color: #f0fdfa;
    border-radius: 24px
}

.Contract .addressDiv .dot {
    height: 35px
}

.BankGuarantee .gds-btn-check {
    position: absolute
}

@media screen and (max-width: 1360px) {
    .BankGuarantee {
        align-items: start;
        max-height: fit-content
    }
}

@media screen and (max-width: 1360px) {
    .BankGuarantee {
        align-items: center
    }
}

@media screen and (max-width: 768px) {
    .BankGuarantee {
        height: fit-content;
        margin: 0 0 65px !important
    }
}

.BankGuarantee .cheque-error-popup {
    display: flex;
    max-width: 352px;
    margin: 15% auto 0
}

@media screen and (max-width: 480px) {
    .BankGuarantee .cheque-error-popup {
        width: 90%
    }
}

.BankGuarantee .cheque-error-popup .popup-content {
    background-color: #002c51;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    direction: ltr
}

.BankGuarantee .cheque-error-popup .popup-content img {
    border: none;
    background-color: unset;
    border-radius: unset
}

.BankGuarantee .cheque-error-popup .popup-content .text1 {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px
}

.BankGuarantee .cheque-error-popup .popup-content .text2 {
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    color: #fff !important
}

.BankGuarantee .cheque-error-popup .popup-content .popup-content-button {
    background-color: #028bff;
    border: none !important;
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    border-radius: 24px
}

.BankGuarantee .Upload-popup {
    display: flex;
    max-width: 400px;
    margin: 5% auto
}

@media screen and (max-width: 480px) {
    .BankGuarantee .Upload-popup {
        width: 90%
    }
}

.BankGuarantee .Upload-popup .popup-content {
    background-color: #fff;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    direction: ltr
}

.BankGuarantee .Upload-popup .popup-content .upDiv {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.BankGuarantee .Upload-popup .popup-content .upDiv .notif {
    background-color: #edf7ff;
    border-radius: 24px;
    font-style: normal;
    align-items: center;
    text-align: right;
    direction: rtl
}

.BankGuarantee .Upload-popup .popup-content .upDiv .notif .text1 {
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    color: #028bff
}

.BankGuarantee .Upload-popup .popup-content .upDiv .notif .text2 {
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d;
    text-decoration: underline;
    text-decoration-style: dotted
}

.BankGuarantee .Upload-popup .popup-content .upDiv .upload-cheque-picture {
    background: #fafcfe;
    border: 1px dashed #028bff;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #028bff;
    height: 56px
}

.BankGuarantee .Upload-popup .popup-content .upDiv .upload-cheque-picture img {
    padding: 0;
    width: 18px;
    height: 20px;
    border: none;
    border-radius: unset
}

.BankGuarantee .Upload-popup .popup-content .upDiv .cheque-code input {
    background: #fafcfe;
    border: 1px solid #c6e5ff;
    box-sizing: border-box;
    border-radius: 24px;
    height: 56px;
    color: #3d3d3d;
    pointer-events: none
}

.BankGuarantee .Upload-popup .popup-content .upDiv .cheque-code input::placeholder {
    color: #8a90d2;
    text-align: center;
    font-weight: 400;
    font-size: 16px
}

.BankGuarantee .Upload-popup .popup-content .upDiv button {
    background: #028bff;
    box-shadow: -7px 9px 16px 1px #028bff33;
    border-radius: 24px;
    outline: none;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: #fff
}

.BankGuarantee .Upload-popup .popup-content .sayyadDiv p {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right
}

.BankGuarantee .Upload-popup .popup-content .sayyadDiv .blue {
    color: #028bff
}

.BankGuarantee .Upload-popup .popup-content .sayyadDiv .dark {
    color: #8b8b8b
}

.BankGuarantee .Upload-popup .popup-content .sayyadDiv .form-switch .form-check-input {
    width: 48px;
    height: 24px
}

.BankGuarantee .Upload-popup .popup-content .detail {
    direction: rtl
}

.BankGuarantee .Upload-popup .popup-content .detail p {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.BankGuarantee .Upload-popup .popup-content .detail img {
    border: none;
    width: 24px;
    height: 24px;
    border-radius: unset;
    padding: 0
}

.BankGuarantee #contain {
    height: fit-content;
    overflow-y: scroll;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.BankGuarantee #contain::-webkit-scrollbar {
    width: 0px
}

.BankGuarantee #contain::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.BankGuarantee #contain::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.BankGuarantee #contain::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.BankGuarantee #contain {
    margin-top: 65px;
    scrollbar-width: none
}

@media screen and (max-width: 1360px) {
    .BankGuarantee #contain {
        position: absolute;
        height: 91vh;
        max-height: unset;
        margin-top: 15px;
        top: 0
    }
}

@media screen and (max-width: 768px) {
    .BankGuarantee #contain {
        position: relative;
        height: 100%
    }
}

.howsendcheque {
    max-width: 680px;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 24px 24px 32px 40px
}

@media screen and (min-width: 1201px) and (max-width: 1267px) {
    .howsendcheque {
        margin-top: 450px !important;
        max-width: 540px;
        z-index: 2
    }
}

.howsendcheque .uperDiv {
    background: #f2f3f6;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 24px 24px 32px 40px;
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    z-index: 1
}

.howsendcheque .uperDiv .notifalert {
    background-color: #fff;
    max-width: 56px;
    border-radius: 34px;
    padding: 5px;
    position: absolute;
    margin-top: -150px
}

@media screen and (min-width: 1360px) {
    .howsendcheque .uperDiv .notifalert {
        position: relative;
        margin-top: -30px
    }
}

@media screen and (max-width: 480px) {
    .howsendcheque .uperDiv .notifalert {
        margin-top: -175px
    }
}

@media screen and (max-width: 768px) {
    .howsendcheque .uperDiv {
        border: 4px solid #ffffff;
        border-radius: 24px
    }
}

.howsendcheque .underDiv {
    background: #fff;
    border: 4px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 24px;
    margin-top: -50px;
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.howsendcheque .underDiv img {
    width: 32px;
    height: 32px;
    padding: 5px
}

.howsendcheque .underDiv .text2 {
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

@media screen and (max-width: 768px) {
    .howsendcheque .underDiv .text2 {
        font-size: 16px;
        line-height: 28px;
        color: #30357c
    }
}

.howsendcheque .underDiv button {
    background: #fff;
    border: 1px solid #028bff;
    border-radius: 24px;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #028bff;
    width: 96px;
    padding: 7px 15px
}

.howsendcheque .underDiv .form-check-input {
    background-color: #30357c;
    border-radius: 24px;
    border: none;
    width: 64px;
    height: 32px
}

.howsendcheque .underDiv .form-switch .form-check-input {
    background-image: url(../images/neworder/bank_guarantee/circle_white.svg);
    background-size: 24px 24px
}

@media screen and (max-width: 768px) {
    .howsendcheque .underDiv {
        background-color: #dfe1f3;
        border: 4px solid #ffffff
    }
}

.howsendcheque .modal-dialog {
    width: 368px;
    border-radius: 24px;
    top: 35%
}

.howsendcheque .modal-dialog .modal-content {
    border-radius: 24px;
    box-shadow: -14px 9px 40px 1px #30357c0a
}

.howsendcheque .modal-dialog .modal-content .upDiv .div1 {
    direction: rtl;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.howsendcheque .modal-dialog .modal-content .upDiv .div1 .text {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.howsendcheque .modal-dialog .modal-content .upDiv .div2 {
    direction: rtl
}

.howsendcheque .modal-dialog .modal-content .upDiv .div2 img {
    width: 40px;
    height: 40px;
    background: #f7f7f7;
    box-shadow: -3px 4px 16px 1px #028bff33;
    border-radius: 16px;
    padding: 5px
}

.howsendcheque .modal-dialog .modal-content .upDiv .div2 .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.howsendcheque .modal-dialog .modal-content .upDiv .div2 .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 19px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn .defult {
    display: flex
}

.howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn .active {
    display: none
}

.howsendcheque .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:active + .btnn, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:checked + .btnn, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn.active, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn.dropdown-toggle.show, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn:active {
    outline: none !important
}

.howsendcheque .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:active + .btnn .defult, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:checked + .btnn .defult, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn.active .defult, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn.dropdown-toggle.show .defult, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn:active .defult {
    display: none
}

.howsendcheque .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:active + .btnn .active, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:checked + .btnn .active, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn.active .active, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn.dropdown-toggle.show .active, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn:active .active {
    display: flex
}

.howsendcheque .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:active + .btnn img, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:checked + .btnn img, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn.active img, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn.dropdown-toggle.show img, .howsendcheque .modal-dialog .modal-content .upDiv .div2 .btnn:active img {
    background-color: #028bff;
    box-shadow: -3px 4px 16px 1px #028bff33;
    border-radius: 16px
}

.howsendcheque .modal-dialog .modal-content .upDiv .div3 {
    direction: rtl
}

.howsendcheque .modal-dialog .modal-content .upDiv .div3 img {
    width: 40px;
    height: 40px;
    padding: 5px;
    background: #f7f7f7;
    box-shadow: -3px 4px 16px 1px #028bff33;
    border-radius: 16px
}

.howsendcheque .modal-dialog .modal-content .upDiv .div3 .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.howsendcheque .modal-dialog .modal-content .upDiv .div3 .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 19px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn .defult {
    display: flex
}

.howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn .active {
    display: none
}

.howsendcheque .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:active + .btnn, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:checked + .btnn, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn.active, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn.dropdown-toggle.show, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn:active {
    outline: none !important
}

.howsendcheque .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:active + .btnn .defult, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:checked + .btnn .defult, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn.active .defult, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn.dropdown-toggle.show .defult, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn:active .defult {
    display: none
}

.howsendcheque .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:active + .btnn .active, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:checked + .btnn .active, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn.active .active, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn.dropdown-toggle.show .active, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn:active .active {
    display: flex
}

.howsendcheque .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:active + .btnn img, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:checked + .btnn img, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn.active img, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn.dropdown-toggle.show img, .howsendcheque .modal-dialog .modal-content .upDiv .div3 .btnn:active img {
    background-color: #028bff;
    box-shadow: -3px 4px 16px 1px #028bff33;
    border-radius: 16px
}

.howsendcheque .modal-dialog .modal-content .downDiv {
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c1a;
    border-radius: 0 0 24px 24px
}

.howsendcheque .modal-dialog .modal-content .downDiv button {
    border: none;
    outline: none;
    background-color: unset;
    height: 100%;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #028bff;
    direction: rtl;
    justify-content: center;
    align-items: center
}

.howsendcheque .modal-dialog .modal-content .downDiv button img {
    width: 24px;
    height: 24px
}

.ChequeStyle {
    direction: rtl;
    max-width: 680px
}

.ChequeStyle img {
    width: 24px;
    height: 24px
}

@media screen and (max-width: 768px) {
    .ChequeStyle .titleImg {
        width: 40px;
        height: 40px;
        background: #f2f3f6;
        border: 1px dashed #30357c;
        border-radius: 16px;
        padding: 5px
    }
}

.ChequeStyle .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

@media screen and (max-width: 768px) {
    .ChequeStyle .text1 {
        color: #30357c
    }
}

.ChequeStyle .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

@media screen and (max-width: 768px) {
    .ChequeStyle .text2 {
        color: #30357c
    }
}

.ChequeStyle .chegueDiv {
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    border-radius: 24px
}

@media screen and (max-width: 768px) {
    .ChequeStyle .chegueDiv {
        background: #fff;
        border: 1px solid #f2f3f6;
        box-shadow: -14px 9px 40px 1px #30357c0a;
        border-radius: 24px
    }
}

.ChequeStyle .chegueDiv img {
    width: 48px;
    height: 48px;
    padding: 5px;
    background: #3d3d3d0d;
    border: 1px solid rgba(61, 61, 61, .05);
    border-radius: 12px
}

.ChequeStyle .chegueDiv .underLine {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    margin-right: 12px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.ChequeStyle .chegueDiv .underLine1 {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.ChequeStyle .chegueDiv .underLine2 {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    margin-right: 7px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.ChequeStyle .chegueDiv .underLine3, .ChequeStyle .chegueDiv .underLine4 {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

@media screen and (max-width: 768px) {
    .ChequeStyle .chegueDiv .rial {
        display: none
    }
}

.ChequeStyle .chegueDiv .texts {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #30357c
}

@media screen and (min-width: 1201px) and (max-width: 1267px) {
    .ChequeStyle {
        margin-top: 0 !important;
        background-color: #fff;
        z-index: 2;
        max-width: 540px;
        padding-top: 20px !important
    }
}

.ChequeStyleNew {
    direction: rtl;
    max-width: 680px;
    background: #edf7ff;
    border-radius: 24px;
    min-width: 355px
}

.ChequeStyleNew img {
    width: 24px;
    height: 24px
}

.ChequeStyleNew .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: #30357c
}

.ChequeStyleNew .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.ChequeStyleNew .chegueDiv {
    background: #fff;
    border: 8px solid #edf7ff;
    border-radius: 24px
}

@media screen and (max-width: 768px) {
    .ChequeStyleNew .chegueDiv {
        background: #fff;
        border-radius: 24px
    }
}

.ChequeStyleNew .chegueDiv img {
    width: 48px;
    height: 48px;
    padding: 5px;
    background: #3d3d3d0d;
    border: 1px solid rgba(61, 61, 61, .05);
    border-radius: 12px
}

.ChequeStyleNew .chegueDiv .underLine {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    margin-right: 12px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.ChequeStyleNew .chegueDiv .underLine1 {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.ChequeStyleNew .chegueDiv .underLine2 {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    margin-right: 7px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.ChequeStyleNew .chegueDiv .underLine3, .ChequeStyleNew .chegueDiv .underLine4 {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

@media screen and (max-width: 768px) {
    .ChequeStyleNew .chegueDiv .rial {
        display: none
    }
}

.ChequeStyleNew .chegueDiv .texts {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.ChequeStyleNew .area .orgImg {
    background: #fafcfe;
    border-radius: 16px;
    width: 48px;
    height: 48px;
    padding: 10px
}

.ChequeStyleNew .area .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ChequeStyleNew .area .t2 {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ChequeStyleNew .area .rial {
    font-weight: 300
}

.ChequeStyleNew .area button {
    background: #028bff;
    box-shadow: -2.57px 6.85714px 21.14px 2.86px #028bff45;
    border-radius: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #fff;
    outline: none;
    border: none
}

@media screen and (max-width: 768px) {
    .ChequeStyleNew .area {
        justify-content: space-around !important
    }
}

@media screen and (min-width: 1201px) and (max-width: 1267px) {
    .ChequeStyleNew {
        margin-top: 0 !important;
        max-width: 540px
    }
}

.ChequeStyleNew .des {
    background: #e3f2fd;
    border-radius: 24px;
    padding: 25px !important
}

.ChequeStyleNew .des .text {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #028bff
}

.ChequeStyleNew .des .link {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d;
    border-bottom: 1px dashed black;
    text-decoration: none
}

.ChequeStyleNew .modal .modal-content {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    max-width: 400px
}

.ChequeStyleNew .titles {
    text-align: right;
    font-weight: 400;
    color: #0288d1
}

.ChequeStyleNew input {
    background: transparent;
    border: 1px solid #c6e5ff;
    box-sizing: border-box;
    border-radius: 24px;
    font-weight: 400;
    font-size: 1rem;
    line-height: 28px;
    text-align: center !important;
    color: #8a90d2;
    min-height: 46px
}

.ChequeStyleNew input::placeholder {
    color: #8a90d2
}

.ChequeStyleNew input:focus {
    outline: none
}

.ChequeStyleNew .divider {
    background: #e4e4e4;
    border-radius: 24px;
    height: 1px
}

.ChequeStyleNew .def-cheques {
    direction: ltr;
    justify-content: center;
    align-items: start
}

.ChequeStyleNew .def-cheques .slash {
    line-height: 45px;
    color: #b3dcff;
    font-size: 24px
}

.ChequeStyleNew .post-cheques {
    justify-content: center;
    align-items: start
}

.ChequeStyleNew .post-cheques .slash {
    line-height: 45px;
    color: #8a90d2;
    font-size: 17px
}

.ChequeStyleNew .mellat-cheques, .ChequeStyleNew .melli-cheques {
    justify-content: center;
    align-items: start
}

.ChequeStyleNew .sayyadDiv p {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right
}

.ChequeStyleNew .sayyadDiv .blue {
    color: #028bff
}

.ChequeStyleNew .sayyadDiv .dark {
    color: #8b8b8b
}

.ChequeStyleNew .sayyadDiv .form-switch .form-check-input {
    width: 50px !important;
    min-height: 24px !important;
    background-repeat: no-repeat;
    background-size: 50%
}

.ChequeStyleNew .detail {
    direction: rtl
}

.ChequeStyleNew .detail p {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.ChequeStyleNew .detail img {
    border: none;
    width: 24px;
    height: 24px;
    border-radius: unset;
    padding: 0
}

.ChequeStyleNew .SendButton {
    background: #028bff;
    box-shadow: -7px 9px 16px 1px #028bff33;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #fff
}

.ChequeStyleNew .SendButton:disabled, .ChequeStyleNew .SendButton[disabled] {
    opacity: .2
}

.Sefte {
    direction: rtl;
    max-width: 680px;
    background: #edf7ff;
    border-radius: 24px;
    min-width: 355px
}

.Sefte .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: #30357c
}

.Sefte .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.Sefte .chegueDiv {
    background: #fff;
    border: 8px solid #edf7ff;
    border-radius: 24px
}

@media screen and (max-width: 768px) {
    .Sefte .chegueDiv {
        background: #fff;
        border-radius: 24px
    }
}

.Sefte .chegueDiv .div1 {
    background: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    height: 100%
}

@media screen and (max-width: 768px) {
    .Sefte .chegueDiv .div1 {
        height: 55px
    }
}

.Sefte .chegueDiv .underLine {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    margin-right: 12px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.Sefte .chegueDiv .underLine1 {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #ff6f5e
}

.Sefte .chegueDiv .underLine2 {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    margin-right: 7px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.Sefte .chegueDiv .underLine3, .Sefte .chegueDiv .underLine4 {
    border-bottom: 1px solid #dfe1f3;
    height: fit-content;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

@media screen and (max-width: 768px) {
    .Sefte .chegueDiv .rial {
        display: none
    }
}

.Sefte .chegueDiv .sign {
    flex-wrap: wrap;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    padding-right: 10px
}

.Sefte .chegueDiv .texts {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.Sefte .area .orgImg {
    background: #fafcfe;
    border-radius: 16px;
    width: 48px;
    height: 48px;
    padding: 10px
}

.Sefte .area .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.Sefte .area .t2 {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.Sefte .area .rial {
    font-weight: 300
}

.Sefte .area button {
    background: #028bff;
    box-shadow: -2.57px 6.85714px 21.14px 2.86px #028bff45;
    border-radius: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #fff;
    outline: none;
    border: none
}

@media screen and (max-width: 768px) {
    .Sefte .area {
        justify-content: space-around !important
    }
}

@media screen and (min-width: 1201px) and (max-width: 1267px) {
    .Sefte {
        margin-top: 0 !important;
        max-width: 540px
    }
}

.Sefte_pending {
    direction: rtl;
    max-width: 680px;
    border: 8px solid #edf7ff;
    background-color: #f7f7f7;
    border-radius: 24px;
    min-width: 355px
}

.Sefte_pending .chegueDiv {
    background: #fff;
    border-bottom: 8px solid #edf7ff;
    border-radius: 24px
}

@media screen and (max-width: 768px) {
    .Sefte_pending .chegueDiv {
        background: #fff;
        border-radius: 24px
    }
}

.Sefte_pending .chegueDiv p {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.Sefte_pending .area .orgImg {
    background: #fafcfe;
    border-radius: 16px;
    width: 48px;
    height: 48px;
    padding: 10px
}

.Sefte_pending .area .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.Sefte_pending .area .t2 {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.Sefte_pending .area .rial {
    font-weight: 300
}

.Sefte_pending .area .pending {
    background: #e4e4e4;
    border-radius: 24px;
    width: 48px;
    height: 48px;
    padding: 11px
}

@media screen and (max-width: 768px) {
    .Sefte_pending .area {
        justify-content: space-around !important
    }
}

@media screen and (min-width: 1201px) and (max-width: 1267px) {
    .Sefte_pending {
        margin-top: 0 !important;
        max-width: 540px
    }
}

.Sefte_complete {
    direction: rtl;
    max-width: 680px;
    border: 8px solid #edf7ff;
    background-color: #f0fdfa;
    border-radius: 24px;
    min-width: 355px
}

.Sefte_complete .chegueDiv {
    background: #fff;
    border-bottom: 8px solid #edf7ff;
    border-radius: 24px
}

@media screen and (max-width: 768px) {
    .Sefte_complete .chegueDiv {
        background: #fff;
        border-radius: 24px
    }
}

.Sefte_complete .chegueDiv p {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.Sefte_complete .area .orgImg {
    background: #fafcfe;
    border-radius: 16px;
    width: 48px;
    height: 48px;
    padding: 10px
}

.Sefte_complete .area .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.Sefte_complete .area .t2 {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.Sefte_complete .area .rial {
    font-weight: 300
}

.Sefte_complete .area .pending {
    background: #f0fdfa;
    border-radius: 24px;
    width: 48px;
    height: 48px;
    padding: 11px
}

@media screen and (max-width: 768px) {
    .Sefte_complete .area {
        justify-content: space-around !important
    }
}

@media screen and (min-width: 1201px) and (max-width: 1267px) {
    .Sefte_complete {
        margin-top: 0 !important;
        max-width: 540px
    }
}

.Sefte_error {
    direction: rtl;
    max-width: 680px;
    border: 8px solid #edf7ff;
    background-color: #fffbfb;
    border-radius: 24px;
    min-width: 355px
}

.Sefte_error .chegueDiv {
    background: #fff;
    border-bottom: 8px solid #edf7ff;
    border-radius: 24px
}

@media screen and (max-width: 768px) {
    .Sefte_error .chegueDiv {
        background: #fff;
        border-radius: 24px
    }
}

.Sefte_error .chegueDiv p {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.Sefte_error .area .orgImg {
    background: #fafcfe;
    border-radius: 16px;
    width: 48px;
    height: 48px;
    padding: 10px
}

.Sefte_error .area .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.Sefte_error .area .t2 {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.Sefte_error .area .rial {
    font-weight: 300
}

.Sefte_error .area .pending {
    background: #f0fdfa;
    border-radius: 24px;
    width: 48px;
    height: 48px;
    padding: 11px
}

.Sefte_error .area button {
    background-color: #ff6f5e;
    box-shadow: -2.57px 6.85714px 21.14px 2.86px #ff6f5e3d;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #fff
}

@media screen and (max-width: 768px) {
    .Sefte_error .area {
        justify-content: space-around !important
    }
}

@media screen and (min-width: 1201px) and (max-width: 1267px) {
    .Sefte_error {
        margin-top: 0 !important;
        max-width: 540px
    }
}

.Cheques_Single_Div {
    flex-wrap: wrap;
    direction: rtl;
    max-width: 680px;
    justify-content: space-around
}

@media screen and (max-width: 768px) {
    .Cheques_Single_Div {
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }
}

.Cheques_Single_Div .cheques {
    max-width: 324px;
    background: #fff;
    border: 1px dashed #028bff;
    border-radius: 24px;
    height: 80px;
    justify-content: space-around
}

.Cheques_Single_Div .cheques img {
    width: 48px;
    height: 48px;
    padding: 10px;
    background: #fff;
    border: 1px solid rgba(2, 139, 255, .1);
    border-radius: 12px
}

.Cheques_Single_Div .cheques .t1 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #028bff
}

.Cheques_Single_Div .cheques .t2 {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #028bff
}

.Cheques_Single_Div .cheques-error {
    background: #fff;
    border: 1px dashed #ff6f5e;
    max-width: 324px;
    border-radius: 24px;
    height: 80px;
    justify-content: space-around
}

.Cheques_Single_Div .cheques-error img {
    width: 48px;
    height: 48px;
    padding: 10px;
    background: #ff6f5e1a;
    border: 1px solid rgba(255, 111, 94, .16);
    border-radius: 12px
}

.Cheques_Single_Div .cheques-error .t1 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #ff6f5e
}

.Cheques_Single_Div .cheques-error .t2 {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #ff6f5e
}

.Cheques_Single_Div .cheques-pending {
    background: #fff;
    border: 1px solid #f2f3f6;
    max-width: 324px;
    border-radius: 24px;
    height: 80px;
    justify-content: space-around
}

.Cheques_Single_Div .cheques-pending img {
    width: 48px;
    height: 48px;
    padding: 10px;
    background: #f7f7f7;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    border-radius: 12px
}

.Cheques_Single_Div .cheques-pending .t1 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #8b8b8b
}

.Cheques_Single_Div .cheques-pending .t2 {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.Cheques_Single_Div .cheques-complete {
    background: #fff;
    border: 1px solid rgba(22, 216, 164, .1);
    max-width: 324px;
    border-radius: 24px;
    height: 80px;
    justify-content: space-around
}

.Cheques_Single_Div .cheques-complete img {
    width: 48px;
    height: 48px;
    padding: 10px;
    background: #f7f7f7;
    background: #16d8a40d;
    border: 1px solid rgba(22, 216, 164, .1);
    border-radius: 12px
}

.Cheques_Single_Div .cheques-complete .t1 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #16d8a4
}

.Cheques_Single_Div .cheques-complete .t2 {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #16d8a4
}

.Cheques_Single_Div .item {
    width: 324px
}

.SendDownloadContract .centercontent {
    max-height: fit-content
}

@media screen and (max-width: 768px) {
    .SendDownloadContract .centercontent {
        height: fit-content;
        margin: 0 !important
    }
}

@media screen and (max-width: 1360px) {
    .InitialInquiries {
        align-items: start;
        max-height: fit-content
    }

    .InitialInquiries #upshadow {
        align-items: center !important;
        justify-content: center !important
    }
}

@media screen and (max-width: 1360px) {
    .InitialInquiries {
        align-items: center
    }

    .InitialInquiries .upshadow {
        flex-direction: column !important
    }

    .InitialInquiries .upshadow .detail_notif {
        margin-top: 80px
    }
}

@media screen and (max-width: 768px) {
    .InitialInquiries {
        height: fit-content;
        margin: 0 0 65px !important
    }

    .InitialInquiries .upshadow {
        flex-direction: column !important
    }

    .InitialInquiries .upshadow .detail_notif {
        margin-top: 0
    }
}

.InitialInquiries .FixState {
    height: 83%
}

.InitialInquiries .orderstate {
    margin: 20px 0 !important
}

.InitialInquiries .orderstate img {
    margin-top: 10px !important
}

.InitialInquiries .orderstate .text1 {
    margin-top: 0 !important
}

.InitialInquiries .orderstate .text2 {
    margin-top: 0 !important;
    margin-bottom: 10px !important
}

.InitialInquiries .LeftContent {
    height: 95%;
    margin: 20px
}

@media screen and (max-width: 1360px) {
    .InitialInquiries .LeftContent {
        display: none !important
    }
}

.GetCard {
    border-radius: 24px;
    border: 1px solid #f2f3f6;
    background: #f2f3f6;
    background-image: url(../images/GetCard/map.png)
}

.GetCard .top {
    border-radius: 24px;
    background: #fff
}

.GetCard .top .t1 {
    color: #30357c;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px
}

.GetCard .top .t2 {
    color: var(--blue-soft, #8a90d2);
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.GetCard .top .item .main .titr {
    color: #3d3d3d;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px
}

.GetCard .top .item .main .description {
    color: #8b8b8b;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.GetCard .top .item .another .titr {
    color: #3d3d3d;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px
}

.GetCard .top .item .another .description {
    color: #8b8b8b;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.GetCard .top .item .another .addNewAddress {
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--black, #3d3d3d);
    box-shadow: -2px 7px 11px 1px #3d3d3d29;
    color: #3d3d3d;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    display: none;
    width: fit-content
}

.GetCard .top .item .another .collapsed {
    display: flex
}

.GetCard .top .item svg {
    min-width: 48px;
    min-height: 48px
}

.GetCard .top .item .active {
    background-color: #f2f3f6;
    border-radius: 12px;
    border: 1px solid #e4e4e4
}

.GetCard .top .item .active svg {
    background-color: #028bff;
    border-radius: 16px;
    padding: 8px
}

.GetCard .top .confirm {
    border-radius: 0 0 24px 24px;
    background: #028bff;
    border: none;
    color: #fff;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px
}

.GetCard .NewAddressDiv .addNewAddress {
    border-radius: 16px;
    border: none;
    background: #3d3d3d;
    box-shadow: -2px 7px 11px 1px #3d3d3d29;
    color: #f2f3f6;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.GetCard .NewAddressDiv .cancel {
    border-radius: 16px;
    border: none;
    background: #fff;
    box-shadow: -2px 7px 11px 1px #3d3d3d29;
    color: #3d3d3d;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.GetCard .NewAddressDiv textarea {
    display: flex;
    justify-content: start;
    align-items: center;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 16px;
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    font-size: 14px;
    position: relative
}

.GetCard .NewAddressDiv .error-padding .input-error {
    bottom: -20px
}

@media screen and (min-width: 1360px) {
    .PrePayment .upshadow {
        overflow-y: hidden;
        overflow-x: hidden
    }
}

@media screen and (max-width: 1360px) {
    .PrePayment {
        align-items: start;
        max-height: fit-content
    }
}

@media screen and (max-width: 1360px) {
    .PrePayment {
        align-items: center
    }
}

@media screen and (max-width: 768px) {
    .PrePayment {
        height: fit-content;
        margin: 0 0 65px !important
    }
}

.PrePayment .PaymentFactor {
    direction: rtl;
    max-width: 384px
}

.PrePayment .PaymentFactor .upDiv {
    background: #f2f3f6;
    border-radius: 24px 24px 0 0;
    justify-content: space-between;
    height: 72px
}

.PrePayment .PaymentFactor .upDiv p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.PrePayment .PaymentFactor .upDiv img {
    width: 40px;
    height: 40px;
    padding: 7px;
    background-color: #fff;
    border-radius: 16px
}

.PrePayment .PaymentFactor .downDiv {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 0 0 24px 24px
}

.PrePayment .PaymentFactor .downDiv .lite {
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #8b8b8b
}

.PrePayment .PaymentFactor .downDiv .num {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    color: #8b8b8b
}

.PrePayment .PaymentFactor .downDiv .divider {
    border: 1px solid #f2f3f6;
    height: 1px
}

.PrePayment .PaymentFactor .downDiv .total {
    background: #f2f3f6;
    border-radius: 16px
}

.PrePayment .PaymentFactor .downDiv .total .lite {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.PrePayment .PaymentFactor .downDiv .total .num {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 44px;
    color: #3d3d3d
}

.PrePayment .PaymentFactor .downDiv .discont {
    border: 1px solid #bdbdbd;
    box-sizing: border-box;
    border-radius: 24px;
    height: 56px
}

.PrePayment .PaymentFactor .downDiv .discont img {
    width: 32px;
    height: 32px
}

.PrePayment .PaymentFactor .downDiv .discont .img {
    width: 40px;
    height: 40px
}

.PrePayment .PaymentFactor .downDiv .discont input {
    border: none;
    height: 100%;
    text-align: center
}

.PrePayment .PaymentFactor .downDiv .discont input::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #bdbdbd
}

.PrePayment .PaymentFactor .downDiv .discont input:focus {
    outline: none
}

.PrePayment .PaymentFactor .downDiv .discont .code {
    max-width: 70%
}

.PrePayment .PaymentFactor .downDiv .zigzag {
    background-image: url(../images/neworder/orderstatus-divider.svg);
    height: 16px;
    background-size: cover
}

.PrePayment .PaymentFactor .downDiv button {
    background: #16d8a4;
    box-shadow: -7px 9px 16px 1px #16d8a429;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    align-items: center;
    text-align: center;
    color: #fff
}

.PaymentFactor {
    direction: rtl;
    max-width: 384px
}

.PaymentFactor .upDiv {
    background: #f2f3f6;
    border-radius: 24px 24px 0 0;
    justify-content: space-between;
    height: 72px
}

.PaymentFactor .upDiv p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.PaymentFactor .upDiv img {
    width: 40px;
    height: 40px;
    padding: 7px;
    background-color: #fff;
    border-radius: 16px
}

.PaymentFactor .downDiv {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 0 0 24px 24px
}

.PaymentFactor .downDiv .lite {
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 28px;
    text-align: right;
    color: #8b8b8b
}

.PaymentFactor .downDiv .num {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 30px;
    color: #8b8b8b
}

.PaymentFactor .downDiv .divider {
    border: 1px solid #f2f3f6;
    height: 1px
}

.PaymentFactor .downDiv .total {
    background: #f2f3f6;
    border-radius: 16px
}

.PaymentFactor .downDiv .total .lite {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.PaymentFactor .downDiv .total .num {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 44px;
    color: #3d3d3d
}

.PaymentFactor .downDiv .discont {
    border: 1px solid #bdbdbd;
    box-sizing: border-box;
    border-radius: 24px;
    height: 56px
}

.PaymentFactor .downDiv .discont svg {
    width: 32px;
    height: 32px
}

.PaymentFactor .downDiv .discont .img {
    width: 40px;
    height: 40px
}

.PaymentFactor .downDiv .discont .code {
    max-width: 65%
}

.PaymentFactor .downDiv .discont .code .gds-input {
    border: none
}

.PaymentFactor .downDiv .discont input {
    border: none;
    height: 100%;
    text-align: center
}

.PaymentFactor .downDiv .discont input::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #bdbdbd
}

.PaymentFactor .downDiv .discont input:focus {
    outline: none
}

.PaymentFactor .downDiv .discont button {
    background-color: #3d3d3d;
    color: #fff;
    font-size: 14px;
    font-weight: 300
}

.PaymentFactor .downDiv .zigzag {
    background-image: url(../images/neworder/orderstatus-divider.svg);
    height: 16px;
    background-size: cover
}

.PaymentFactor .downDiv .payButton {
    background: #16d8a4;
    box-shadow: -7px 9px 16px 1px #16d8a429;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    align-items: center;
    text-align: center;
    color: #fff
}

@media screen and (max-width: 1360px) {
    .InitialInquiriesOTP {
        align-items: start;
        max-height: fit-content
    }
}

@media screen and (max-width: 1360px) {
    .InitialInquiriesOTP {
        align-items: center
    }
}

@media screen and (max-width: 768px) {
    .InitialInquiriesOTP {
        height: fit-content;
        margin: 0 0 65px !important
    }
}

.ReciveCodeDiv {
    max-width: 600px;
    direction: rtl;
    background: #f2f3f6;
    border-radius: 24px
}

.ReciveCodeDiv .phoneText {
    background: #e4e4e4;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #8b8b8b
}

.ReciveCodeDiv button {
    background: #3d3d3d;
    box-shadow: -14px 9px 24px 1px #3d3d3d29;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #fff
}

@media screen and (max-width: 568px) {
    .ReciveCodeDiv .phoneLogo {
        display: none !important
    }

    .ReciveCodeDiv button {
        width: 42% !important
    }
}

.InterCodeDiv {
    max-width: 600px;
    direction: rtl;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

@media screen and (min-width: 768px) {
    .InterCodeDiv {
        min-width: 600px
    }
}

.InterCodeDiv .ReciveCode {
    background: #f2f3f6;
    border-radius: 24px
}

.InterCodeDiv .ReciveCode .text1 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #bdbdbd
}

.InterCodeDiv .ReciveCode .text1 span {
    color: #8b8b8b;
    margin: 0 5px;
    font-size: 15px
}

.InterCodeDiv .ReciveCode .countdown {
    color: #8b8b8b;
    direction: ltr
}

@media screen and (max-width: 568px) {
    .InterCodeDiv .ReciveCode {
        padding-right: 1rem
    }

    .InterCodeDiv .ReciveCode div {
        flex-direction: column !important
    }

    .InterCodeDiv .ReciveCode div .text1 {
        min-width: 95px
    }
}

.InterCodeDiv .inputDiv {
    justify-content: space-around;
    align-items: center;
    direction: rtl
}

.InterCodeDiv .inputDiv .input {
    width: auto !important
}

.InterCodeDiv .inputDiv input {
    background: #fff;
    border-radius: 24px;
    text-transform: uppercase;
    text-align: center
}

.InterCodeDiv .inputDiv input::-webkit-input-placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #8b8b8b
}

.InterCodeDiv .inputDiv button {
    background: #3d3d3d;
    box-shadow: -14px 9px 24px 1px #3d3d3d29;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #fff
}

@media screen and (max-width: 568px) {
    .InterCodeDiv .inputDiv {
        flex-wrap: wrap
    }

    .InterCodeDiv .inputDiv input {
        min-width: 180px
    }

    .InterCodeDiv .inputDiv button {
        min-width: 250px;
        margin-top: 20px
    }
}

@media screen and (max-width: 480px) {
    .InterCodeDiv .inputDiv .intercodeIMG {
        display: none
    }
}

.LeftsideGhestacard {
    direction: rtl;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: 0 16px 36px 1px #30357c0f;
    border-radius: 24px;
    max-width: 350px
}

.LeftsideGhestacard .right {
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-shadow: 0 16px 36px 1px #30357c08;
    border-radius: 0 0 24px 24px;
    padding: 20px !important
}

.LeftsideGhestacard .right .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.LeftsideGhestacard .right .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    color: #30357c
}

.LeftsideGhestacard .left {
    background: #fff;
    box-shadow: 0 16px 36px 1px #30357c0f;
    border-radius: 24px 24px 0 0;
    padding: 20px 20px 0 !important
}

.LeftsideGhestacard .left .div2 .num {
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 30px;
    text-align: center;
    color: #3d3d3d
}

.LeftsideGhestacard .left .div2 .blur {
    filter: blur(3px)
}

.LeftsideGhestacard .img1 {
    width: 108px;
    height: 32px
}

.LeftsideGhestacard .img2 {
    width: 45px;
    height: 32px
}

@media screen and (max-width: 768px) {
    .ChargingCenterContent {
        height: unset;
        padding-top: 65px
    }
}

.ChargingCenterContent .orderstatus-tablet {
    margin-top: 35px !important;
    width: 91.66666667% !important;
    margin-right: 3rem !important
}

@media screen and (max-width: 1360px) {
    .chargingQueue {
        align-items: start;
        max-height: fit-content
    }
}

@media screen and (max-width: 1360px) {
    .chargingQueue {
        align-items: center
    }
}

@media screen and (max-width: 768px) {
    .chargingQueue {
        height: fit-content;
        margin: 0 0 65px !important
    }
}

.chargingQueue .ghestqueue {
    direction: rtl
}

@media screen and (max-width: 768px) {
    .chargingQueue .ghestqueue {
        margin-top: 10px !important
    }
}

.chargingQueue .ghestqueue .buttonDiv {
    justify-content: space-around !important;
    flex-wrap: wrap
}

.chargingQueue .ghestqueue .buttonDiv button {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0d;
    border-radius: 24px;
    outline: none;
    min-width: 280px
}

.chargingQueue .ghestqueue .buttonDiv button label .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.chargingQueue .ghestqueue .buttonDiv button label .t2 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.chargingQueue .ghestqueue .buttonDiv button label .title {
    text-align: right
}

.chargingQueue .ghestqueue .buttonDiv button input {
    width: 24px;
    height: 24px
}

.chargingQueue .ghestqueue .buttonDiv button .form-check-input {
    width: 32px;
    height: 32px
}

.chargingQueue .ghestqueue .buttonDiv button .form-check-input:checked[type=radio] {
    background-image: url(../images/tick.svg);
    background-color: #3d3d3d;
    background-size: inherit;
    outline: none;
    border: none;
    box-shadow: none
}

.chargingQueue .ghestqueue .buttonDiv button .checked {
    background-image: url(../images/tick.svg);
    background-color: #3d3d3d;
    background-size: inherit;
    outline: none;
    border: none;
    box-shadow: none
}

.chargingQueue .ghestqueue .buttonDiv button .tickImg {
    background-color: unset !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important
}

.chargingQueue .ghestqueue .buttonDiv .pendingButton img {
    background: #ff6f5e;
    box-shadow: -2.5px 3.33333px 13.3333px .833333px #ff6f5e29;
    border-radius: 24px;
    width: 40px;
    height: 40px;
    padding: 7px
}

.chargingQueue .ghestqueue .buttonDiv .futureButton img {
    background: #028bff;
    box-shadow: -2.5px 3.33333px 13.3333px .833333px #ff6f5e29;
    border-radius: 24px;
    width: 40px;
    height: 40px;
    padding: 7px
}

.chargingQueue .ghestqueue .buttonDiv .passedButton img {
    background: #16d8a4;
    box-shadow: -2.5px 3.33333px 13.3333px .833333px #ff6f5e29;
    border-radius: 24px;
    width: 40px;
    height: 40px;
    padding: 7px
}

.chargingQueue .ghestqueue .MobilebuttonDiv {
    justify-content: space-between !important
}

.chargingQueue .ghestqueue .MobilebuttonDiv .total {
    padding: 10px;
    background: #f7f7f7;
    border-radius: 16px;
    width: 50px;
    height: 50px
}

.chargingQueue .ghestqueue .MobilebuttonDiv button {
    background-color: #3d3d3d;
    border-radius: 16px;
    width: 50px;
    height: 50px;
    outline: none;
    border: none
}

.chargingQueue .ghestqueue .MobilebuttonDiv button img {
    width: 21px;
    height: 21px
}

.chargingQueue .ghestqueue .MobilebuttonDiv .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.chargingQueue .ghestqueue .MobilebuttonDiv .t2 {
    background: #f7f7f7;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #8b8b8b
}

.chargingQueue .ghestqueue .pending {
    justify-content: space-around !important;
    flex-wrap: wrap
}

.chargingQueue .ghestqueue .card {
    width: 280px;
    height: 220px;
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    border: 1px solid #f2f3f6;
    margin-top: 25px !important
}

.chargingQueue .ghestqueue .card img {
    width: 32px;
    height: 32px
}

.chargingQueue .ghestqueue .card .up .toman {
    width: 14px;
    height: 15px
}

.chargingQueue .ghestqueue .card .up .totaltext {
    font-style: normal;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 44px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.chargingQueue .ghestqueue .card .up .status {
    background: #fff6f6;
    border-radius: 24px
}

.chargingQueue .ghestqueue .card .up .status p {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #ff6f5e
}

.chargingQueue .ghestqueue .card .up .oid {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.chargingQueue .ghestqueue .card .up .discrip {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #8b8b8b
}

.chargingQueue .ghestqueue .card .up .total, .chargingQueue .ghestqueue .card .up .qrcode {
    position: absolute;
    top: 10px
}

.chargingQueue .ghestqueue .card .maindivider {
    border: 1px solid #f2f3f6;
    border-radius: 24px;
    height: 50%;
    width: 1px !important
}

.chargingQueue .ghestqueue .card .divider {
    background-image: url(../images/chargingQueue/zigzag.svg);
    height: 15px;
    background-size: 105%;
    background-position: center
}

.chargingQueue .ghestqueue .card .down {
    direction: rtl;
    justify-content: space-around !important
}

.chargingQueue .ghestqueue .card .down .date {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.chargingQueue .ghestqueue .card .down .discrip {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.chargingQueue .ghestqueue .card .down button {
    background: #028bff;
    box-shadow: -3px 4px 16px 1px #028bff33;
    border-radius: 24px;
    border: none;
    outline: none;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #fff
}

.chargingQueue .ghestqueue .future {
    justify-content: space-around !important;
    flex-wrap: wrap
}

.chargingQueue .ghestqueue .future .status {
    background: #edf7ff !important;
    border-radius: 24px
}

.chargingQueue .ghestqueue .future .status p {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #028bff !important
}

.chargingQueue .ghestqueue .passed {
    justify-content: space-around !important;
    flex-wrap: wrap
}

.chargingQueue .ghestqueue .passed .status {
    background: #f0fdfa !important;
    border-radius: 24px
}

.chargingQueue .ghestqueue .passed .status p {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #16d8a4 !important
}

.chargingQueue .ghestqueue .modal-content {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    width: 302px;
    margin: auto
}

.chargingQueue .ghestqueue .modal-content div label {
    justify-content: space-around !important
}

.chargingQueue .ghestqueue .modal-content div label .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.chargingQueue .ghestqueue .modal-content div label .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b;
    background: #f7f7f7;
    border-radius: 24px;
    padding: 4px 10px !important
}

.chargingQueue .ghestqueue .modal-content div label img {
    background-color: #f7f7f7;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    padding: 9px
}

.chargingQueue .ghestqueue .modal-content div input {
    opacity: 0
}

.chargingQueue .ghestqueue .modal-content .div1 {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.chargingQueue .ghestqueue .modal-content .div1 .text {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.chargingQueue .ghestqueue .modal-content .selected {
    background: #3d3d3d;
    box-shadow: -3px 4px 16px 1px #3d3d3d3d;
    border-radius: 16px
}

@media screen and (max-width: 1360px) {
    .chargingQueue .ghestqueue .dividerMobile {
        display: flex !important;
        height: 1px;
        background: #f2f3f6
    }
}

.chargingQueue .ExtraChargeDesktop {
    direction: rtl
}

.chargingQueue .ExtraChargeDesktop .right {
    height: unset;
    min-height: 152px;
    width: 40px;
    background: #30357c;
    box-shadow: -5px 0 #30357c33;
    border-radius: 0 24px 24px 0;
    z-index: 1
}

.chargingQueue .ExtraChargeDesktop .left {
    background: #fff;
    box-shadow: 0 16px 36px 1px #30357c08;
    border-radius: 24px
}

.chargingQueue .ExtraChargeDesktop .left .up {
    background: #fff;
    box-shadow: 0 -3px 36px 1px #30357c12;
    border-radius: 24px 0 0 16px
}

.chargingQueue .ExtraChargeDesktop .left .up .div1 {
    justify-content: space-around !important
}

.chargingQueue .ExtraChargeDesktop .left .up .div1 p {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.chargingQueue .ExtraChargeDesktop .left .up .div1 img {
    width: 28px;
    height: 28px
}

.chargingQueue .ExtraChargeDesktop .left .up .div2 p {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #8b8b8b
}

.chargingQueue .ExtraChargeDesktop .left .up button {
    background: #fff;
    border: none
}

.chargingQueue .ExtraChargeDesktop .left .up .dokme {
    background: #fff;
    width: 32px;
    height: 32px;
    border: 1px solid #dfe1f3;
    padding: 10px;
    border-radius: 50%
}

.chargingQueue .ExtraChargeDesktop .left .up .collapsed .dokme {
    transform: rotate(180deg)
}

.chargingQueue .ExtraChargeDesktop .left .div3 button {
    background: #fff;
    border: 1px solid #30357c;
    border-radius: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    color: #30357c
}

.chargingQueue .ExtraChargeDesktop .left .history div {
    direction: rtl;
    justify-content: space-between !important
}

.chargingQueue .ExtraChargeDesktop .left .history .cost {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #16d8a4
}

.chargingQueue .ExtraChargeDesktop .left .history .date {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    color: #bdbdbd
}

.chargingQueue .ExtraChargeMobile {
    z-index: 2;
    direction: rtl
}

@media screen and (min-width: 1360px) {
    .chargingQueue .ExtraChargeMobile {
        display: none !important
    }
}

.chargingQueue .ExtraChargeMobile button {
    background: #fff;
    z-index: 2;
    border: 1px solid #dfe1f3;
    border-radius: 24px
}

.chargingQueue .ExtraChargeMobile button img {
    width: 14px;
    height: 14px
}

.chargingQueue .ExtraChargeMobile button div {
    align-items: center
}

.chargingQueue .ExtraChargeMobile button div img {
    background: #f7f7f7;
    border-radius: 24px;
    padding: 10px;
    width: unset;
    height: unset
}

.chargingQueue .ExtraChargeMobile .collapsed .down {
    transform: rotate(180deg)
}

.chargingQueue .ExtraChargeMobile .blue {
    background: #f2f3f6;
    border-radius: 24px;
    border: 1px solid #dfe1f3;
    border-top: none;
    margin-top: -50px
}

.chargingQueue .ExtraChargeMobile .blue .white {
    background: #fff
}

.chargingQueue .ExtraChargeMobile .blue .white .detail {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.chargingQueue .ExtraChargeMobile .blue .white .zig {
    margin-bottom: -5px
}

.chargingQueue .ExtraChargeMobile .blue .t2 {
    background: #f2f3f6;
    border: 1px solid #30357c;
    border-radius: 24px;
    outline: none;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: #30357c
}

.chargingQueue .ExtraChargeTablet {
    background: #fafcfe;
    border: 3px solid #f2f3f6;
    border-radius: 24px;
    direction: rtl;
    justify-content: space-around !important;
    margin-top: 80px !important
}

.chargingQueue .ExtraChargeTablet button {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #fff;
    background: #30357c;
    border-radius: 24px;
    outline: none;
    border: none
}

.chargingQueue .ExtraChargeTablet .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 32px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.chargingQueue .ExtraChargeTablet .dot {
    width: 160px !important
}

.ExtraChargeMobile {
    z-index: 2;
    direction: rtl
}

@media screen and (min-width: 1360px) {
    .ExtraChargeMobile {
        display: none !important
    }
}

.ExtraChargeMobile button {
    background: #fff;
    z-index: 2;
    border: 1px solid #dfe1f3;
    border-radius: 24px
}

.ExtraChargeMobile button img {
    width: 14px;
    height: 14px
}

.ExtraChargeMobile button div {
    align-items: center
}

.ExtraChargeMobile button div img {
    background: #f7f7f7;
    border-radius: 24px;
    padding: 10px;
    width: unset;
    height: unset
}

.ExtraChargeMobile .collapsed .down {
    transform: rotate(180deg)
}

.ExtraChargeMobile .blue {
    background: #f2f3f6;
    border-radius: 24px;
    border: 1px solid #dfe1f3;
    border-top: none;
    margin-top: -50px
}

.ExtraChargeMobile .blue .white {
    background: #fff
}

.ExtraChargeMobile .blue .white .detail {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.ExtraChargeMobile .blue .white .zig {
    margin-bottom: -5px
}

.ExtraChargeMobile .blue .t2 {
    background: #f2f3f6;
    border: 1px solid #30357c;
    border-radius: 24px;
    outline: none;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: #30357c
}

.ExtraChargeTablet {
    background: #fafcfe;
    border: 3px solid #f2f3f6;
    border-radius: 24px;
    direction: rtl;
    justify-content: space-around !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important
}

@media screen and (min-width: 1360px) {
    .ExtraChargeTablet {
        margin-top: 0 !important;
        width: 425px !important
    }
}

@media screen and (max-width: 768px) {
    .ExtraChargeTablet {
        margin: 30px 0 20px !important
    }
}

.ExtraChargeTablet button {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #fff;
    background: #30357c;
    border-radius: 24px;
    outline: none;
    border: none
}

.ExtraChargeTablet .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 32px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.ExtraChargeTablet .dot {
    width: 160px !important
}

.ghestqueue {
    direction: rtl
}

@media screen and (max-width: 768px) {
    .ghestqueue {
        margin-top: 10px !important
    }
}

.ghestqueue .buttonDiv {
    justify-content: space-around !important;
    flex-wrap: wrap
}

.ghestqueue .buttonDiv button {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0d;
    border-radius: 24px;
    outline: none;
    min-width: 280px
}

.ghestqueue .buttonDiv button label .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ghestqueue .buttonDiv button label .t2 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.ghestqueue .buttonDiv button label .title {
    text-align: right
}

.ghestqueue .buttonDiv button input {
    width: 24px;
    height: 24px
}

.ghestqueue .buttonDiv button .form-check-input {
    width: 32px;
    height: 32px
}

.ghestqueue .buttonDiv button .form-check-input:checked[type=radio] {
    background-image: url(../images/tick.svg);
    background-color: #3d3d3d;
    background-size: inherit;
    outline: none;
    border: none;
    box-shadow: none
}

.ghestqueue .buttonDiv button .checked {
    background-image: url(../images/tick.svg);
    background-color: #3d3d3d;
    background-size: inherit;
    outline: none;
    border: none;
    box-shadow: none
}

.ghestqueue .buttonDiv button .tickImg {
    background-color: unset !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important
}

.ghestqueue .buttonDiv .pendingButton img {
    background: #ff6f5e;
    box-shadow: -2.5px 3.33333px 13.3333px .833333px #ff6f5e29;
    border-radius: 24px;
    width: 40px;
    height: 40px;
    padding: 7px
}

.ghestqueue .buttonDiv .futureButton img {
    background: #028bff;
    box-shadow: -2.5px 3.33333px 13.3333px .833333px #ff6f5e29;
    border-radius: 24px;
    width: 40px;
    height: 40px;
    padding: 7px
}

.ghestqueue .buttonDiv .passedButton img {
    background: #16d8a4;
    box-shadow: -2.5px 3.33333px 13.3333px .833333px #ff6f5e29;
    border-radius: 24px;
    width: 40px;
    height: 40px;
    padding: 7px
}

.ghestqueue .MobilebuttonDiv {
    justify-content: space-between !important
}

.ghestqueue .MobilebuttonDiv .total {
    padding: 10px;
    background: #f7f7f7;
    border-radius: 16px;
    width: 50px;
    height: 50px
}

.ghestqueue .MobilebuttonDiv button {
    background-color: #3d3d3d;
    border-radius: 16px;
    width: 50px;
    height: 50px;
    outline: none;
    border: none
}

.ghestqueue .MobilebuttonDiv button img {
    width: 21px;
    height: 21px
}

.ghestqueue .MobilebuttonDiv .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ghestqueue .MobilebuttonDiv .t2 {
    background: #f7f7f7;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #8b8b8b
}

.ghestqueue .pending {
    justify-content: space-around !important;
    flex-wrap: wrap
}

.ghestqueue .card {
    width: 300px;
    height: 300px;
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    border: 1px solid #e4e4e4;
    margin-top: 25px !important
}

.ghestqueue .card img {
    width: 32px;
    height: 32px
}

.ghestqueue .card .up .titr {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    color: #3d3d3d
}

.ghestqueue .card .up .toman {
    width: 14px;
    height: 15px
}

.ghestqueue .card .up .totaltext {
    font-style: normal;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 44px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ghestqueue .card .up .status {
    background: #fff6f6;
    border-radius: 24px
}

.ghestqueue .card .up .status p {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #ff6f5e
}

.ghestqueue .card .up .oid {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ghestqueue .card .up .discrip {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #8b8b8b
}

.ghestqueue .card .up .total {
    position: absolute;
    top: -26px;
    width: 48px;
    height: 48px;
    border-bottom: 4px solid #e4e4e4;
    padding: 10px;
    background-color: #fafcfe;
    border-radius: 50%
}

.ghestqueue .card .up .qrcode {
    position: absolute;
    top: 10px
}

.ghestqueue .card .up .dark {
    background: #f7f7f7;
    border-radius: 16px
}

.ghestqueue .card .up .dark .orginal {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.ghestqueue .card .up .dark .totaltext {
    text-decoration-line: line-through;
    text-decoration-thickness: .1rem
}

.ghestqueue .card .up .dark .totalpay {
    background: #e4e4e4;
    border-radius: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d
}

.ghestqueue .card .up .dark .pay {
    font-style: normal;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 44px;
    color: #3d3d3d
}

.ghestqueue .card .maindivider {
    border: 1px solid #f2f3f6;
    border-radius: 24px;
    height: 50%;
    width: 1px !important
}

.ghestqueue .card .divider {
    background-image: url(../images/chargingQueue/zigzag.svg);
    height: 15px;
    background-size: 100%;
    background-position: center;
    width: 80%;
    background-color: unset;
    z-index: 3
}

.ghestqueue .card .down {
    direction: rtl;
    justify-content: space-around !important
}

.ghestqueue .card .down .date {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ghestqueue .card .down .discrip {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.ghestqueue .card .down button {
    background: #028bff;
    box-shadow: -3px 4px 16px 1px #028bff33;
    border-radius: 24px;
    border: none;
    outline: none;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #fff
}

.ghestqueue .future {
    justify-content: space-around !important;
    flex-wrap: wrap
}

.ghestqueue .future .status {
    background: #edf7ff !important;
    border-radius: 24px
}

.ghestqueue .future .status p {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #028bff !important
}

.ghestqueue .passed {
    justify-content: space-around !important
}

.ghestqueue .passed .status {
    background: #f0fdfa !important;
    border-radius: 24px
}

.ghestqueue .passed .status p {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #16d8a4 !important
}

.ghestqueue .modal-content {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    width: 302px;
    margin: auto
}

.ghestqueue .modal-content div label {
    justify-content: space-around !important
}

.ghestqueue .modal-content div label .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ghestqueue .modal-content div label .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b !important;
    background: #f7f7f7;
    border-radius: 24px;
    padding: 4px 10px !important
}

.ghestqueue .modal-content div label img {
    background-color: #f7f7f7;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    padding: 9px
}

.ghestqueue .modal-content div input {
    opacity: 0
}

.ghestqueue .modal-content .div1 {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.ghestqueue .modal-content .div1 .text {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.ghestqueue .modal-content .selected {
    background: #3d3d3d;
    box-shadow: -3px 4px 16px 1px #3d3d3d3d;
    border-radius: 16px
}

.ghestqueue .warning {
    background-color: #fff59d !important;
    color: #3d3d3d !important
}

.ghestqueue .warning p {
    color: #3d3d3d !important
}

.ghestqueue .danger {
    background: #fff6f6 !important;
    color: #3d3d3d !important
}

.ghestqueue .danger p {
    color: #ff6f5e !important
}

@media screen and (max-width: 1360px) {
    .ghestqueue .dividerMobile {
        display: flex !important;
        height: 1px;
        background: #f2f3f6
    }
}

.extrachargemodal {
    display: flex;
    justify-content: center;
    align-items: center
}

.extrachargemodal .modal-content {
    margin-top: 15%;
    max-width: 384px;
    box-shadow: -14px 9px 40px 1px #30357c14;
    border-radius: 24px
}

.extrachargemodal .modal-content .close {
    position: absolute;
    top: -75px;
    right: 0;
    background-color: inherit;
    border-radius: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid #e4e4e4
}

.extrachargemodal .modal-content .main {
    background: #fff;
    border-radius: 24px;
    z-index: 1
}

.extrachargemodal .modal-content .notif {
    margin-top: -50px;
    background: #fff;
    border-radius: 100%;
    padding: 2px
}

.extrachargemodal .modal-content .title {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.extrachargemodal .modal-content .discrip {
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.extrachargemodal .modal-content button {
    background: #16d8a4;
    border-radius: 0 0 24px 24px;
    border: none;
    outline: none;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 44px;
    direction: rtl;
    align-items: center;
    text-align: center;
    color: #fff
}

.extrachargemodal .modal-content .zigzag {
    margin-bottom: -5px
}

.extrachargemodal .modal-content .custom {
    background: #f2f3f6;
    border-radius: 24px;
    border: none;
    outline: none;
    direction: ltr;
    text-align: center;
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 44px;
    align-items: center;
    color: #30357c;
    justify-content: space-around !important
}

.extrachargemodal .modal-content .custom .math {
    background: #dfe1f3;
    border-radius: 8px;
    padding: 10px;
    width: 32px;
    height: 32px
}

.extrachargemodal .modal-content .custom input {
    text-align: left
}

.extrachargemodal .modal-content .MoneyRange p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #c3c6e8
}

.extrachargemodal .modal-content .box .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    background: #f2f3f6;
    border-radius: 24px;
    color: #30357c
}

.extrachargemodal .modal-content .box .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 44px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.extrachargemodal .modal-content .box .text3 {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 44px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.extrachargemodal .modal-content .box .divider {
    background: #f2f3f6;
    border-radius: 24px;
    transform: rotate(90deg);
    height: 4px
}

.extrachargemodal .modal-content .back {
    width: 345px;
    position: absolute;
    background: #e0e0e0;
    border-radius: 24px;
    height: 200px;
    top: -15px
}

.extrachargemodal .modal-content .back .circle {
    width: 104px;
    height: 104px;
    border-radius: 100%;
    margin-top: -48px;
    background: #e0e0e0
}

.promissorynote, .esefteModal {
    direction: rtl
}

.promissorynote .title, .esefteModal .title {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 24px
}

.promissorynote .title .text1, .esefteModal .title .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.promissorynote .title .text2, .esefteModal .title .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.promissorynote .main .electronic, .esefteModal .main .electronic {
    background: #edf7ff;
    border: 1px solid #edf7ff;
    border-radius: 24px
}

@media screen and (min-width: 1400px) {
    .promissorynote .main .electronic, .esefteModal .main .electronic {
        min-width: 680px
    }
}

@media screen and (min-width: 1360px) {
    .promissorynote .main .electronic, .esefteModal .main .electronic {
        min-width: 565px
    }
}

@media screen and (max-width: 768px) {
    .promissorynote .main .electronic, .esefteModal .main .electronic {
        min-width: 355px
    }
}

.promissorynote .main .electronic .up, .esefteModal .main .electronic .up {
    background: #fff;
    border: 8px solid #edf7ff;
    border-radius: 24px
}

.promissorynote .main .electronic .up .mainImg, .esefteModal .main .electronic .up .mainImg {
    background: #f7f7f7;
    border-radius: 12px;
    padding: 5px
}

.promissorynote .main .electronic .up .div1 p, .esefteModal .main .electronic .up .div1 p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.promissorynote .main .electronic .up .div1 .t1, .esefteModal .main .electronic .up .div1 .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.promissorynote .main .electronic .up .div1 button, .esefteModal .main .electronic .up .div1 button {
    background: #028bff;
    border: 1px solid #028bff;
    box-shadow: 3px 5px 24px 1px #028bff1f;
    border-radius: 16px;
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    color: #fff
}

.promissorynote .main .electronic .up .divider, .esefteModal .main .electronic .up .divider {
    background: #edf7ff;
    border-radius: 24px;
    height: 1px;
    margin: auto
}

.promissorynote .main .electronic .up .div2 .t1, .esefteModal .main .electronic .up .div2 .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.promissorynote .main .electronic .up .div2 .t2, .esefteModal .main .electronic .up .div2 .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.promissorynote .main .electronic .up .div2 .t3, .esefteModal .main .electronic .up .div2 .t3 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.promissorynote .main .electronic .up button, .esefteModal .main .electronic .up button {
    border: none;
    background-color: unset
}

.promissorynote .main .electronic .down, .esefteModal .main .electronic .down {
    justify-content: space-around !important
}

@media screen and (max-width: 768px) {
    .promissorynote .main .electronic .down, .esefteModal .main .electronic .down {
        flex-direction: column !important
    }
}

@media screen and (max-width: 992px) {
    .promissorynote .main .electronic .down .dots, .esefteModal .main .electronic .down .dots {
        display: none !important
    }
}

.promissorynote .modal-dialog, .promissorynote.modal-dialog, .esefteModal .modal-dialog, .esefteModal.modal-dialog {
    max-width: 45%;
    width: 550px
}

@media screen and (max-width: 1360px) {
    .promissorynote .modal-dialog, .promissorynote.modal-dialog, .esefteModal .modal-dialog, .esefteModal.modal-dialog {
        max-width: 60%
    }
}

@media screen and (max-width: 768px) {
    .promissorynote .modal-dialog, .promissorynote.modal-dialog, .esefteModal .modal-dialog, .esefteModal.modal-dialog {
        max-width: 90%
    }
}

.promissorynote .modal-dialog .modal-content, .promissorynote.modal-dialog .modal-content, .esefteModal .modal-dialog .modal-content, .esefteModal.modal-dialog .modal-content {
    border-radius: 24px;
    background-color: #fafcfe;
    border: 8px solid rgba(255, 255, 255, .32)
}

.promissorynote .modal-dialog .modal-content .modal-body, .promissorynote.modal-dialog .modal-content .modal-body, .esefteModal .modal-dialog .modal-content .modal-body, .esefteModal.modal-dialog .modal-content .modal-body {
    border-radius: 24px;
    background-color: #fafcfe;
    direction: rtl
}

.promissorynote .modal-dialog .modal-content .modal-body .title, .promissorynote.modal-dialog .modal-content .modal-body .title, .esefteModal .modal-dialog .modal-content .modal-body .title, .esefteModal.modal-dialog .modal-content .modal-body .title {
    background: #fff;
    border: 1px solid #f7f7f7;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.promissorynote .modal-dialog .modal-content .modal-body .title .title1, .promissorynote.modal-dialog .modal-content .modal-body .title .title1, .esefteModal .modal-dialog .modal-content .modal-body .title .title1, .esefteModal.modal-dialog .modal-content .modal-body .title .title1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.promissorynote .modal-dialog .modal-content .modal-body .title .title2, .promissorynote.modal-dialog .modal-content .modal-body .title .title2, .esefteModal .modal-dialog .modal-content .modal-body .title .title2, .esefteModal.modal-dialog .modal-content .modal-body .title .title2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.promissorynote .modal-dialog .modal-content .modal-body .title .close, .promissorynote.modal-dialog .modal-content .modal-body .title .close, .esefteModal .modal-dialog .modal-content .modal-body .title .close, .esefteModal.modal-dialog .modal-content .modal-body .title .close {
    width: 32px;
    height: 32px;
    padding: 10px;
    background-color: #30357c;
    box-shadow: -7px 9px 16px 1px #30357c1a;
    border-radius: 12px
}

.promissorynote .modal-dialog .modal-content .modal-body .dv, .promissorynote.modal-dialog .modal-content .modal-body .dv, .esefteModal .modal-dialog .modal-content .modal-body .dv, .esefteModal.modal-dialog .modal-content .modal-body .dv {
    background-color: #fff;
    border: 1px dashed #c3c6e8;
    border-radius: 16px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.promissorynote .modal-dialog .modal-content .modal-body .dv button, .promissorynote.modal-dialog .modal-content .modal-body .dv button, .esefteModal .modal-dialog .modal-content .modal-body .dv button, .esefteModal.modal-dialog .modal-content .modal-body .dv button {
    background-color: #f2f3f6;
    border: 1px solid #dfe1f3;
    border-radius: 16px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.promissorynote .modal-dialog .modal-content .modal-body .te, .promissorynote.modal-dialog .modal-content .modal-body .te, .esefteModal .modal-dialog .modal-content .modal-body .te, .esefteModal.modal-dialog .modal-content .modal-body .te {
    width: 45% !important;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.promissorynote .Cheque-detail, .esefteModal .Cheque-detail {
    background: #fff;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border: 1px solid #f2f3f6;
    border-radius: 24px;
    justify-content: center !important;
    align-items: center !important
}

.promissorynote .Cheque-detail p, .esefteModal .Cheque-detail p {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.promissorynote .Cheque-detail .form-check p, .esefteModal .Cheque-detail .form-check p {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.promissorynote .Cheque-detail .form-check input, .esefteModal .Cheque-detail .form-check input {
    width: 48px;
    height: 24px
}

.promissorynote .Cheque-detail .des, .esefteModal .Cheque-detail .des {
    direction: rtl
}

.promissorynote .Cheque-detail .des p, .esefteModal .Cheque-detail .des p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.promissorynote .Cheque-detail .Cheque-active, .esefteModal .Cheque-detail .Cheque-active {
    background: #f0fdfa;
    border-radius: 24px;
    border: 1px solid #baf8e7;
    justify-content: center;
    align-items: center;
    margin: auto
}

.promissorynote .Cheque-detail .Cheque-active .collapsed, .esefteModal .Cheque-detail .Cheque-active .collapsed {
    display: unset !important
}

.promissorynote .Cheque-detail .Cheque-active p, .esefteModal .Cheque-detail .Cheque-active p {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.promissorynote .Cheque-detail .Cheque-active div, .esefteModal .Cheque-detail .Cheque-active div {
    background-image: url(../images/UploadDocuments/complete.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.promissorynote .Cheque-detail .sheba, .esefteModal .Cheque-detail .sheba {
    direction: ltr;
    text-align: left
}

.promissorynote .Cheque-detail .Cheque-defult, .esefteModal .Cheque-detail .Cheque-defult {
    border: 1px solid #c6e5ff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.promissorynote .Cheque-detail .Cheque-defult ::placeholder, .esefteModal .Cheque-detail .Cheque-defult ::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.promissorynote .Cheque-detail .Cheque-defult input, .esefteModal .Cheque-detail .Cheque-defult input {
    border: none;
    text-align: right;
    background: #fafcfe;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    color: #8a90d2
}

.promissorynote .Cheque-detail .Cheque-defult .sheba, .esefteModal .Cheque-detail .Cheque-defult .sheba {
    direction: ltr;
    text-align: left
}

.promissorynote .Cheque-detail .Cheque-defult input:focus, .esefteModal .Cheque-detail .Cheque-defult input:focus {
    outline: none
}

.promissorynote .Cheque-detail .SendButton, .esefteModal .Cheque-detail .SendButton {
    background: #30357c;
    box-shadow: -8px 8px 16px 1px #30357c29;
    border-radius: 16px;
    max-width: 220px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    text-align: right;
    color: #fff
}

.HowsendChequenew {
    direction: rtl
}

.HowsendChequenew .title .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.HowsendChequenew .title .text2 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.HowsendChequenew .main {
    border-right: 1px solid #e4e4e4;
    width: 80% !important
}

@media screen and (max-width: 480px) {
    .HowsendChequenew .main {
        border: none
    }
}

.HowsendChequenew .main .howsendchequeNew {
    max-width: unset;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 24px;
    background-color: #edf7ff
}

@media screen and (min-width: 1360px) {
    .HowsendChequenew .main .howsendchequeNew {
        min-width: 565px
    }
}

@media screen and (min-width: 1400px) {
    .HowsendChequenew .main .howsendchequeNew {
        min-width: 680px
    }
}

@media screen and (max-width: 768px) {
    .HowsendChequenew .main .howsendchequeNew {
        min-width: 355px
    }
}

.HowsendChequenew .main .howsendchequeNew .uperDiv {
    background: #fff;
    border: 8px solid #edf7ff;
    box-sizing: border-box;
    border-radius: 24px 24px 32px 40px;
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d;
    z-index: 1
}

@media screen and (max-width: 768px) {
    .HowsendChequenew .main .howsendchequeNew .uperDiv {
        border: 4px solid #edf7ff;
        border-radius: 24px
    }
}

.HowsendChequenew .main .howsendchequeNew .underDiv {
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    background-color: unset;
    text-align: right;
    color: #3d3d3d;
    border: none
}

.HowsendChequenew .main .howsendchequeNew .underDiv img {
    width: 32px;
    height: 32px;
    padding: 5px
}

.HowsendChequenew .main .howsendchequeNew .underDiv .detail {
    justify-content: space-around !important
}

.HowsendChequenew .main .howsendchequeNew .underDiv .text2 {
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

@media screen and (max-width: 768px) {
    .HowsendChequenew .main .howsendchequeNew .underDiv .text2 {
        font-size: 16px;
        line-height: 28px;
        color: #30357c
    }
}

.HowsendChequenew .main .howsendchequeNew .underDiv .verticalDiv {
    height: 1px;
    background: #c6e5ff;
    border-radius: 24px;
    transform: rotate(90deg);
    width: 15px !important
}

.HowsendChequenew .main .howsendchequeNew .underDiv .dots {
    width: 45%;
    height: auto
}

.HowsendChequenew .main .howsendchequeNew .underDiv button {
    background: #fff;
    border: 1px solid #028bff;
    border-radius: 24px;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #028bff;
    width: 96px;
    padding: 7px 15px
}

.HowsendChequenew .main .howsendchequeNew .underDiv .form-check-input {
    background-color: #30357c;
    border-radius: 24px;
    border: none;
    width: 64px;
    height: 32px
}

.HowsendChequenew .main .howsendchequeNew .underDiv .form-switch .form-check-input {
    background-image: url(../images/neworder/bank_guarantee/circle_white.svg);
    background-size: 24px 24px
}

@media screen and (max-width: 768px) {
    .HowsendChequenew .main .howsendchequeNew .underDiv .title {
        font-style: normal;
        font-weight: 500;
        font-size: .81rem;
        line-height: 24px;
        align-items: center;
        text-align: right;
        color: #3d3d3d
    }

    .HowsendChequenew .main .howsendchequeNew .underDiv .text2 {
        font-style: normal;
        font-weight: 400;
        font-size: .81rem;
        line-height: 24px;
        align-items: center;
        text-align: right;
        color: #028bff
    }

    .HowsendChequenew .main .howsendchequeNew .underDiv .dot3 {
        background-image: url(../images/neworder/bank_guarantee/new/23dot.svg);
        background-repeat: no-repeat;
        background-size: auto;
        height: 5px
    }

    .HowsendChequenew .main .howsendchequeNew .underDiv .form-check {
        justify-content: space-around;
        align-items: center
    }
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog {
    width: 368px;
    border-radius: 24px;
    top: 35%;
    margin: auto
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content {
    border-radius: 24px;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    background-color: #fff
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv {
    border-radius: 24px
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .gds-btn-check {
    opacity: 0
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div1 {
    direction: rtl;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div1 .text {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 {
    direction: rtl
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 img {
    width: 40px;
    height: 40px;
    background: #f7f7f7;
    box-shadow: -3px 4px 16px 1px #028bff33;
    border-radius: 16px;
    padding: 5px
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 19px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn .defult {
    display: flex
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn .active {
    display: none
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:active + .btnn, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:checked + .btnn, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn.active, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn.dropdown-toggle.show, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn:active {
    outline: none !important
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:active + .btnn .defult, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:checked + .btnn .defult, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn.active .defult, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn.dropdown-toggle.show .defult, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn:active .defult {
    display: none
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:active + .btnn .active, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:checked + .btnn .active, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn.active .active, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn.dropdown-toggle.show .active, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn:active .active {
    display: flex
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:active + .btnn img, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .gds-btn-check:checked + .btnn img, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn.active img, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn.dropdown-toggle.show img, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div2 .btnn:active img {
    background-color: #028bff;
    box-shadow: -3px 4px 16px 1px #028bff33;
    border-radius: 16px
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 {
    direction: rtl
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 img {
    width: 40px;
    height: 40px;
    padding: 5px;
    background: #f7f7f7;
    box-shadow: -3px 4px 16px 1px #028bff33;
    border-radius: 16px
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 19px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn .defult {
    display: flex
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn .active {
    display: none
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:active + .btnn, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:checked + .btnn, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn.active, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn.dropdown-toggle.show, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn:active {
    outline: none !important
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:active + .btnn .defult, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:checked + .btnn .defult, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn.active .defult, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn.dropdown-toggle.show .defult, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn:active .defult {
    display: none
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:active + .btnn .active, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:checked + .btnn .active, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn.active .active, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn.dropdown-toggle.show .active, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn:active .active {
    display: flex
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:active + .btnn img, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .gds-btn-check:checked + .btnn img, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn.active img, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn.dropdown-toggle.show img, .HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .upDiv .div3 .btnn:active img {
    background-color: #028bff;
    box-shadow: -3px 4px 16px 1px #028bff33;
    border-radius: 16px
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .downDiv {
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c1a;
    border-radius: 0 0 24px 24px
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .downDiv button {
    border: none;
    outline: none;
    background-color: unset;
    height: 100%;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #028bff;
    direction: rtl;
    justify-content: center;
    align-items: center
}

.HowsendChequenew .main .howsendchequeNew .modal-dialog .modal-content .downDiv button img {
    width: 24px;
    height: 24px
}

.ayandehbanknumber {
    direction: rtl
}

.ayandehbanknumber .title .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ayandehbanknumber .title .text2 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.ayandehbanknumber .main {
    border-right: 1px solid #e4e4e4;
    width: 80% !important
}

@media screen and (max-width: 480px) {
    .ayandehbanknumber .main {
        border: none
    }
}

.ayandehbanknumber .main .numberdiv {
    max-width: 680px;
    min-width: 355px;
    border: 8px solid #edf7ff;
    border-radius: 24px
}

.ayandehbanknumber .main .numberdiv .up .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ayandehbanknumber .main .numberdiv .up .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.ayandehbanknumber .main .numberdiv .up button {
    outline: none;
    background: #fff;
    border: 1px solid #028bff;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #028bff
}

@media screen and (max-width: 768px) {
    .ayandehbanknumber .main .numberdiv .up .dotfade {
        display: none
    }
}

.ayandehbanknumber .main .numberdiv .up .banknumberimg {
    background: #f7f7f7;
    border-radius: 16px;
    padding: 13px;
    width: 48px;
    height: 48px
}

.banknumberdetail {
    display: flex;
    justify-content: center;
    align-items: center
}

.banknumberdetail .modal-content {
    margin-top: 15%;
    max-width: 384px;
    box-shadow: -14px 9px 40px 1px #30357c14;
    border-radius: 24px
}

.banknumberdetail .modal-content .main {
    background: #fff;
    border-radius: 24px;
    z-index: 1
}

.banknumberdetail .modal-content .notif {
    margin-top: -50px;
    background: #fff;
    border-radius: 100%;
    padding: 2px
}

.banknumberdetail .modal-content .title {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.banknumberdetail .modal-content .discrip {
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.banknumberdetail .modal-content .Cheque-defult {
    border: 1px solid #c6e5ff;
    background: #fafcfe;
    border-radius: 24px;
    height: 48px;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: right
}

.banknumberdetail .modal-content .Cheque-defult ::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.banknumberdetail .modal-content .Cheque-defult input {
    border: none;
    text-align: right;
    background: #fafcfe;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    color: #8a90d2
}

.banknumberdetail .modal-content .Cheque-defult input:focus {
    outline: none
}

.banknumberdetail .modal-content button {
    background: #3d3d3d;
    border-radius: 0 0 22px 22px;
    border: none;
    outline: none;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 44px;
    direction: rtl;
    align-items: center;
    text-align: center;
    color: #fff
}

.banknumberdetail .modal-content .zigzag {
    margin-bottom: -5px
}

.banknumberdetail .modal-content .backupaccount-defult {
    border: 1px dashed #028bff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.banknumberdetail .modal-content .backupaccount-defult p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.banknumberdetail .modal-content .backupaccount-defult div {
    background-image: url(../images/UploadDocuments/idcard-front.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.banknumberdetail .modal-content .backupaccount-defult .form-control {
    -webkit-appearance: unset;
    -moz-appearance: unset;
    appearance: unset;
    border-radius: 1vw;
    border-style: none;
    height: 48px
}

.banknumberdetail .modal-content .backupaccount-defult .form-control .option {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.banknumberdetail .modal-content .backupaccount-defult .form-control .option:focus {
    background-color: #c6e5ff;
    color: #3d3d3d
}

.banknumberdetail .modal-content .backupaccount-defult .form-control:focus {
    outline: none !important;
    border: none
}

.banknumberdetail .modal-content .back {
    width: 345px;
    position: absolute;
    background: #e0e0e0;
    border-radius: 24px;
    height: 200px;
    margin-top: -220px
}

.banknumberdetail .modal-content .back .circle {
    width: 104px;
    height: 104px;
    border-radius: 100%;
    margin-top: -48px;
    background: #e0e0e0
}

.shopssigncontract .centercontent {
    max-height: fit-content
}

@media screen and (min-width: 1360px) {
    .shopssigncontract .centercontent {
        width: 79% !important;
        padding: 0
    }

    .shopssigncontract .centercontent .upshadow {
        width: 100% !important
    }

    .shopssigncontract .centercontent #contain {
        height: 95%
    }
}

@media screen and (max-width: 768px) {
    .shopssigncontract .centercontent {
        height: unset;
        margin: 50px 0 0 !important
    }
}

@media screen and (max-width: 1360px) {
    .shopssigncontract .centercontent .upshadow {
        justify-content: start !important
    }
}

@media screen and (max-width: 768px) {
    .shopssigncontract .centercontent .upshadow {
        justify-content: center !important
    }
}

.shopssigncontract .centercontent #contain {
    overflow-y: scroll;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.shopssigncontract .centercontent #contain::-webkit-scrollbar {
    width: 0px
}

.shopssigncontract .centercontent #contain::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.shopssigncontract .centercontent #contain::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.shopssigncontract .centercontent #contain::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

@media screen and (max-width: 1360px) {
    .shopssigncontract .centercontent #contain {
        margin-left: 1rem !important
    }
}

@media screen and (max-width: 768px) {
    .shopssigncontract .centercontent #contain {
        margin-left: unset !important;
        position: relative;
        height: unset;
        max-height: unset
    }
}

.shopssigncontract .centercontent .Contract {
    background-color: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    direction: rtl
}

.shopssigncontract .centercontent .Contract .up {
    background-color: #fff;
    border: 1px solid #f7f7f7;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.shopssigncontract .centercontent .Contract .up p {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: right;
    color: #3d3d3d
}

@media screen and (max-width: 768px) {
    .shopssigncontract .centercontent .Contract .up p {
        font-size: 16px
    }
}

.shopssigncontract .centercontent .Contract .down {
    overflow-y: scroll;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.shopssigncontract .centercontent .Contract .down::-webkit-scrollbar {
    width: 0px
}

.shopssigncontract .centercontent .Contract .down::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.shopssigncontract .centercontent .Contract .down::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.shopssigncontract .centercontent .Contract .down::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.shopssigncontract .centercontent .Contract .down ::-webkit-scrollbar {
    width: 0
}

@media screen and (max-width: 768px) {
    .shopssigncontract .centercontent .Contract .down {
        padding-top: 55px !important
    }
}

.shopssigncontract .centercontent .Contract .down .t1 {
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.shopssigncontract .centercontent .Contract .down .title {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.shopssigncontract .centercontent .Contract .down .dis {
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.shopssigncontract .centercontent .Contract .down::-webkit-scrollbar {
    width: 0
}

.shopssigncontract .centercontent .Contract .confirmDiv {
    background-color: #f0fdfa;
    border-radius: 24px;
    max-width: 680px;
    min-width: 680px
}

@media screen and (min-width: 1600px) {
    .shopssigncontract .centercontent .Contract .confirmDiv {
        width: 50%;
        max-width: unset
    }
}

@media screen and (max-width: 850px) {
    .shopssigncontract .centercontent .Contract .confirmDiv {
        min-width: unset
    }
}

.shopssigncontract .centercontent .Contract .confirmDiv button {
    background-color: #16d8a4;
    box-shadow: -2px 9px 32px #16d8a41f;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
    color: #fff
}

.shopssigncontract .centercontent .Contract .confirmDiv p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: #16d8a4
}

@media screen and (max-width: 768px) {
    .TablePage {
        margin: 0 !important;
        justify-content: start !important;
        height: fit-content
    }
}

@media screen and (min-width: 769px) and (max-width: 1360px) {
    .TablePage {
        width: 90% !important;
        margin-top: 0 !important
    }

    .TablePage .upshadow {
        overflow-y: scroll;
        scrollbar-color: #ffffff #ffffff;
        scrollbar-width: none
    }

    .TablePage .upshadow::-webkit-scrollbar {
        width: 0px
    }

    .TablePage .upshadow::-webkit-scrollbar-track {
        border-radius: 24px;
        height: 80%
    }

    .TablePage .upshadow::-webkit-scrollbar-thumb {
        background: #fff;
        border-radius: 10px;
        height: 80%
    }

    .TablePage .upshadow::-webkit-scrollbar-thumb:hover {
        background-color: #fff
    }

    .TablePage .upshadow {
        height: 91vh
    }
}

.tableView {
    overflow-x: scroll;
    overflow-y: hidden;
    border-radius: 6px;
    min-height: 50%;
    scrollbar-color: #30357c #ffffff;
    scrollbar-width: thin;
    scrollbar-gutter: stable both-edges
}

.tableView .customTable {
    border-collapse: separate !important;
    border-spacing: 0;
    direction: rtl;
    width: 100%
}

.tableView .customTable thead {
    border-radius: 12px !important;
    background-color: #3d3d3d;
    color: #fff
}

.tableView .customTable thead tr {
    height: 40px !important
}

.tableView .customTable thead tr th {
    font-style: normal;
    font-weight: 300 !important;
    font-size: .81rem;
    line-height: 24px;
    border-bottom: 1px solid white;
    padding: 13px !important
}

.tableView .customTable thead tr td {
    padding-right: 15px
}

.tableView .customTable thead tr :last-child {
    border-radius: 12px 0 0 12px
}

@media screen and (max-width: 768px) {
    .tableView .customTable thead tr :last-child {
        border-radius: 12px 0 0;
        padding: 8px 0
    }
}

.tableView .customTable thead tr :first-child {
    border-radius: 0 12px 12px 0;
    padding-right: 15px
}

@media screen and (max-width: 768px) {
    .tableView .customTable thead tr :first-child {
        border-radius: 0 12px 0 0;
        padding: 8px 0
    }
}

@media screen and (max-width: 768px) {
    .tableView .customTable thead tr :first-child {
        width: 40px;
        box-shadow: -14px 0 40px 1px #00000029
    }
}

.tableView .customTable thead .tick button {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid black
}

.tableView .customTable tbody tr {
    border: none;
    z-index: -1
}

.tableView .customTable tbody tr :last-child {
    border-radius: 16px 0 0 16px;
    text-decoration: none
}

.tableView .customTable tbody tr td:first-of-type {
    border-radius: 0 16px 16px 0
}

.tableView .customTable tbody tr td, .tableView .customTable tbody tr th {
    border: none;
    padding: 3px 7px !important;
    display: table-cell !important;
    border-bottom: 1px solid white
}

.tableView .customTable tbody tr td .tick .button, .tableView .customTable tbody tr th .tick .button {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid black
}

.tableView .customTable tbody tr td .title, .tableView .customTable tbody tr th .title {
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: .81rem !important;
    line-height: 24px !important;
    text-align: right !important
}

.tableView .customTable tbody tr td .title :first-child, .tableView .customTable tbody tr th .title :first-child {
    border-radius: 24px;
    font-weight: 400
}

.tableView .customTable tbody tr td .discript, .tableView .customTable tbody tr th .discript {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.tableView .customTable tbody tr td .status, .tableView .customTable tbody tr th .status {
    min-width: 48px;
    max-width: fit-content
}

.tableView .customTable tbody tr td .tomanImage, .tableView .customTable tbody tr th .tomanImage {
    width: 17px;
    height: 17px;
    margin-bottom: .3rem
}

.tableView .customTable tbody tr td .moneyImage, .tableView .customTable tbody tr th .moneyImage {
    width: 20px;
    height: 20px;
    margin-bottom: .3rem
}

.tableView .customTable tbody tr td .shopImage, .tableView .customTable tbody tr th .shopImage {
    width: 16px;
    height: 16px
}

@media screen and (max-width: 768px) {
    .tableView .customTable tbody tr td .shoptypeImg, .tableView .customTable tbody tr th .shoptypeImg {
        display: none
    }
}

.tableView .customTable tbody tr td .operation button, .tableView .customTable tbody tr th .operation button {
    border: none;
    background-color: #f7f7f7;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: fit-content;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.tableView .customTable tbody tr td .operation .more, .tableView .customTable tbody tr th .operation .more {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid lightgray;
    font-size: 14px;
    padding: 0
}

.tableView .customTable tbody tr td .operation .more:before, .tableView .customTable tbody tr th .operation .more:before {
    content: "⁝";
    position: absolute;
    font-weight: 700;
    font-family: fantasy;
    color: #000
}

.tableView .customTable tbody tr td .operation .more.show:before, .tableView .customTable tbody tr th .operation .more.show:before {
    content: "❖";
    position: absolute;
    color: #3d3d3d
}

.tableView .customTable tbody tr td .operation .preButton, .tableView .customTable tbody tr th .operation .preButton {
    border: 1px solid #3d3d3d
}

.tableView .customTable tbody tr td .operation .MoreList, .tableView .customTable tbody tr th .operation .MoreList {
    z-index: 100;
    border-radius: 24px;
    list-style-type: none;
    position: absolute !important;
    left: 50px !important;
    bottom: 0 !important;
    margin: 4px 0 !important;
    transform: none !important;
    background-color: #3d3d3d;
    overflow-y: scroll;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.tableView .customTable tbody tr td .operation .MoreList::-webkit-scrollbar, .tableView .customTable tbody tr th .operation .MoreList::-webkit-scrollbar {
    width: 0px
}

.tableView .customTable tbody tr td .operation .MoreList::-webkit-scrollbar-track, .tableView .customTable tbody tr th .operation .MoreList::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.tableView .customTable tbody tr td .operation .MoreList::-webkit-scrollbar-thumb, .tableView .customTable tbody tr th .operation .MoreList::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.tableView .customTable tbody tr td .operation .MoreList::-webkit-scrollbar-thumb:hover, .tableView .customTable tbody tr th .operation .MoreList::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.tableView .customTable tbody tr td .operation .MoreList, .tableView .customTable tbody tr th .operation .MoreList {
    inset: 0 auto 0 50px !important;
    max-height: 100%
}

.tableView .customTable tbody tr td .operation .MoreList li, .tableView .customTable tbody tr th .operation .MoreList li {
    padding: 5px 10px;
    border-left: 2px solid rgba(255, 255, 255, .05);
    min-width: fit-content
}

.tableView .customTable tbody tr td .operation .MoreList li:last-child, .tableView .customTable tbody tr th .operation .MoreList li:last-child {
    border-left: none
}

.tableView .customTable tbody tr td .operation .MoreList a, .tableView .customTable tbody tr th .operation .MoreList a {
    color: #fff
}

.tableView .customTable tbody tr td .operation .MoreList button, .tableView .customTable tbody tr th .operation .MoreList button {
    margin: 0;
    background-color: inherit;
    font-size: 13px;
    color: #fff;
    font-weight: 500
}

.tableView .customTable tbody tr td .operation .show, .tableView .customTable tbody tr th .operation .show {
    display: flex;
    align-items: center
}

.tableView .customTable tbody tr td .operation .collapsing, .tableView .customTable tbody tr th .operation .collapsing {
    height: 0 !important;
    width: 0 !important;
    transition: none !important
}

.tableView .customTable tbody tr .button {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 16px;
    padding: 7px;
    color: #3d3d3d;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    text-align: center
}

.tableView .customTable tbody tr .button :link {
    text-decoration: none
}

@media screen and (max-width: 768px) {
    .tableView .customTable tbody tr th {
        border-radius: unset !important;
        width: 40px;
        box-shadow: -4px 0 50px 1px #00569f0f
    }

    .tableView .customTable tbody tr .mtd {
        position: relative
    }
}

.tableView .customTable tbody tr:nth-of-type(2n) {
    background-color: #f8f8f8
}

.tableView .customTable tbody .selected {
    background-color: #3d3d3d !important;
    border: 2px solid #3d3d3d;
    border-radius: 16px
}

.tableView .customTable tbody .selected .title {
    color: #fff
}

.tableView .customTable tbody .selected .status {
    background: #ffffff1a;
    border-radius: 24px;
    color: #fff;
    font-weight: 400;
    min-width: 48px
}

.tableView .customTable tbody .selected .discript {
    color: #bdbdbd
}

.tableView .customTable tbody .selected .tomanImage, .tableView .customTable tbody .selected .shoptypeImg, .tableView .customTable tbody .selected .shopImage, .tableView .customTable tbody .selected .moneyImage {
    filter: invert(82%) sepia(58%) saturate(0%) hue-rotate(69deg) brightness(105%) contrast(110%)
}

.tableView .customTable tbody .selected .operation button {
    background-color: unset;
    padding: 0
}

.tableView .customTable tbody .selected .operation button img {
    filter: invert(82%) sepia(58%) saturate(0%) hue-rotate(69deg) brightness(105%) contrast(110%)
}

.tableView .customTable tbody .selected .operation button {
    color: #fff
}

.tableView .customTable tbody .selected .preButton {
    border: 1px solid #ffffff !important
}

@media screen and (max-width: 768px) {
    .tableView .customTable tbody .selected th {
        border-radius: unset !important;
        width: 40px;
        box-shadow: -14px 0 40px 1px #00000029
    }

    .tableView .customTable tbody .selected :last-child {
        border-radius: 16px 0 0 16px !important
    }

    .tableView .customTable tbody .selected .tick button {
        border-radius: 5px !important
    }

    .tableView .customTable tbody .selected .status {
        border-radius: 24px !important
    }
}

@media screen and (max-width: 768px) {
    .tableView {
        height: fit-content
    }
}

.tableView::-webkit-scrollbar {
    width: 5px;
    border-radius: 24px
}

.tableView::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

.tableView::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 10px;
    height: 80%
}

.tableView::-webkit-scrollbar-thumb:hover {
    background-color: #30357c
}

.pagination {
    direction: rtl
}

.pagination .Right {
    background: #028bff;
    box-shadow: -3px 6px 12px 1px #028bff29;
    border-radius: 100%;
    border: none;
    font-size: 14px;
    line-height: 28px;
    font-weight: 400;
    color: #fff
}

.pagination .Right:disabled {
    opacity: .2
}

.pagination .Current {
    background: #edf7ff;
    border-radius: 10px;
    border: none;
    padding: 7px 17px !important;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #028bff
}

.pagination .Other {
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d;
    border-radius: 100%;
    margin: 0 20px !important;
    background-color: unset
}

.pagination .Other:disabled {
    opacity: .2
}

.cardView {
    display: flex;
    flex-wrap: wrap;
    direction: rtl;
    align-items: center;
    justify-content: center
}

.cardView .item {
    background-color: #fff;
    border: 1px solid #f2f3f6;
    border-radius: 24px;
    min-width: 358px;
    -webkit-user-select: none;
    user-select: none
}

@media screen and (max-width: 768px) {
    .cardView .item {
        max-width: 320px
    }
}

.cardView .item .uper {
    background-color: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    position: relative
}

.cardView .item .uper .title, .cardView .item .uper .title2 {
    font-style: normal;
    font-weight: 400;
    font-size: .8rem;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b;
    height: 25px;
    -webkit-user-select: none;
    user-select: none
}

.cardView .item .uper .title3 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: right;
    color: #616161;
    height: 25px;
    -webkit-user-select: none;
    user-select: none
}

.cardView .item .uper .confirm {
    background-color: #fff;
    border: 1px solid #30357c;
    border-radius: 20px;
    font-style: normal;
    font-weight: 600;
    font-size: .7rem;
    line-height: 24px;
    text-align: center;
    color: #30357c
}

.cardView .item .uper .operation {
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    padding: 3px 5px !important;
    font-size: 13px;
    font-weight: 400;
    font-family: Pelak, sans-serif
}

.cardView .item .uper .collapsed .close {
    display: none !important
}

.cardView .item .uper .collapsed {
    display: flex
}

.cardView .item .uper .collapsed .open {
    display: flex !important
}

.cardView .item .uper input {
    background-color: #f2f3f6;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #dfe1f3;
    border-radius: 6px
}

.cardView .item .uper input:checked {
    background-image: url(../images/Table/Cards/tick.svg);
    background-size: 50% 100%;
    background-position: center;
    background-color: #30357c;
    box-shadow: 3px 5px 20px 1px #30357c42;
    width: 20px;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    border-radius: 6px;
    border: none
}

.cardView .item .uper .columndivider {
    height: 1px;
    background-color: #dfe1f3;
    border-radius: 16px;
    transform: rotate(90deg)
}

.cardView .item .uper .divider {
    background: #f2f3f6;
    height: 1px
}

.cardView .item .uper .text1 {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 24px;
    text-align: right;
    color: #bdbdbd;
    min-height: 24px
}

.cardView .item .uper .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d;
    min-height: 24px
}

.cardView .item .uper .headSelected {
    background-color: #dfe1f3;
    border-radius: 24px 24px 0 0
}

.cardView .item .uper .headSelected .title {
    color: #30357c
}

.cardView .item .uper .itemDiv {
    min-height: 28px;
    max-height: 28px
}

.cardView .item .ViewFullDetail {
    background-color: unset;
    border: none
}

.cardView .item .ViewFullDetail p {
    font-style: normal;
    font-weight: 400;
    font-size: .9rem;
    line-height: 24px;
    text-align: right;
    color: #30357c
}

.cardView .item .MoreOperation {
    background-color: #fff;
    max-width: 200px;
    direction: rtl;
    position: absolute;
    top: 12px;
    left: 12px;
    border: 1px solid #f2f3f6;
    box-shadow: -3px 6px 16px 1px #30357c0a;
    border-radius: 24px
}

.cardView .item .MoreOperation .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 30%
}

.cardView .item .MoreOperation .reject, .cardView .item .MoreOperation .boncard {
    background-color: unset;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d
}

.cardView .item .MoreOperation .cancel {
    background-color: unset;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #ff6f5e
}

.cardView .item .collapsing {
    width: 100% !important
}

.TableDivider {
    height: 1px;
    background-color: #f2f3f6;
    border-radius: 22.583px
}

.cardORtable {
    direction: rtl
}

@media screen and (max-width: 768px) {
    .cardORtable {
        flex-direction: column !important
    }

    .cardORtable div {
        margin: 10px 0
    }
}

.cardORtable button {
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 12px
}

.cardORtable .downloadExcell, .cardORtable .operationHeader {
    font-style: normal;
    font-weight: 500;
    font-size: .8rem;
    line-height: 24px;
    color: #3d3d3d
}

.cardORtable .wide {
    color: #3d3d3d
}

.cardORtable .active {
    background-color: #3d3d3d
}

.cardORtable .active svg {
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(85deg) brightness(104%) contrast(102%)
}

.MobileMoreModal {
    background: #3d3d3d3d;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.MobileMoreModal .closeModal {
    border: none;
    background-color: unset;
    outline: none
}

.MobileMoreModal .modal-dialog .modal-content {
    border-radius: 16px;
    background-color: unset;
    border: none
}

.MobileMoreModal .modal-dialog .modal-content .modal-body {
    border: none
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main {
    background-color: #fff;
    position: relative;
    border-radius: 16px;
    direction: rtl;
    height: 100%
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .up {
    background: linear-gradient(180deg, #028bff, #1282e0);
    box-shadow: 0 12px 40px 1px #028bff3d;
    border-radius: 16px;
    z-index: 1
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .up .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #fff
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .up .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    color: #fff
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .up img {
    margin-bottom: -36px
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .down {
    background-color: #f2f3f6;
    border-radius: 0 0 16px 16px;
    padding-bottom: 80px
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .down .fixRowDiv {
    border-radius: 0 0 16px 16px;
    background-color: #fff !important
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .down .fixRowDiv div {
    background-color: #fff !important
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .down .rowDiv {
    border-radius: 0 0 16px 16px;
    background-color: #fff
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .down :nth-of-type(2n) {
    background-color: unset
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .down .title {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .down .info {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    text-align: left;
    color: #3d3d3d
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .down .info button {
    border: none;
    background-color: #f0fdfa;
    border-radius: 24px;
    color: #16d8a4
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .preset {
    background-color: #fff;
    box-shadow: 0 -6px 24px 1px #00000009;
    border-radius: 16px;
    margin-top: 5px;
    position: absolute;
    bottom: 0;
    flex-wrap: wrap
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .preset button {
    background: #fff;
    border: 1px solid #028bff;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    color: #028bff
}

.MobileMoreModal .modal-dialog .modal-content .modal-body .Main .preset .active {
    background-color: #028bff;
    border: 1px solid #028bff;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    color: #fff
}

.MobileEditeDetail .modal-dialog .modal-content {
    border-radius: 16px;
    background-color: unset;
    border: none
}

.MobileEditeDetail .modal-dialog .modal-content .modal-body {
    border: none
}

.MobileEditeDetail .modal-dialog .modal-content .modal-body .main {
    background-color: #fff;
    position: relative;
    border-radius: 16px;
    direction: rtl;
    height: 100%
}

.MobileEditeDetail .modal-dialog .modal-content .modal-body .main .head p {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.MobileEditeDetail .modal-dialog .modal-content .modal-body .main .head button {
    border: none;
    background-color: unset
}

.MobileEditeDetail .modal-dialog .modal-content .modal-body .main .center {
    background: #fafcfe;
    box-shadow: inset 0 4px 16px #028bff12;
    border-radius: 24px 24px 0 0
}

.MobileEditeDetail .modal-dialog .modal-content .modal-body .main .center .lable {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.MobileEditeDetail .modal-dialog .modal-content .modal-body .main .center input {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 24px
}

.MobileEditeDetail .modal-dialog .modal-content .modal-body .main .center input::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.MobileEditeDetail .modal-dialog .modal-content .modal-body .main .footer {
    background-color: #fff;
    border-radius: 0 0 16px 16px;
    direction: rtl
}

.MobileEditeDetail .modal-dialog .modal-content .modal-body .main .footer .SaveChanges {
    background-color: #028bff;
    border-radius: 16px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    direction: rtl
}

.MobileEditeDetail .modal-dialog .modal-content .modal-body .main .footer .Cancell {
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid #028bff;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #028bff
}

.TableFilter_leftside {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    border: 1px solid #f2f3f6;
    flex-direction: column;
    position: relative;
    direction: rtl
}

.TableFilter_leftside .up {
    height: 104px;
    background-color: #fff;
    border-radius: 24px 24px 0 0;
    z-index: 1
}

.TableFilter_leftside .up .Presets {
    background: #fff;
    border-radius: 24px;
    z-index: 2
}

.TableFilter_leftside .up .Presets button {
    background: #30357c;
    border: 1px solid #30357c;
    border-radius: 16px;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    text-align: center;
    color: #fff;
    direction: ltr
}

.TableFilter_leftside .up .Presets .t1 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    color: #8a90d2
}

.TableFilter_leftside .up .Presets .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    color: #30357c
}

.TableFilter_leftside .up .Presets .divider {
    background: #f2f3f6;
    border-radius: 1px;
    height: 40px;
    width: 1px !important
}

.TableFilter_leftside .up .Presets .delete {
    background-color: unset;
    border: none;
    direction: rtl
}

@media screen and (max-width: 768px) {
    .TableFilter_leftside .up .Presets {
        border-radius: 12px
    }

    .TableFilter_leftside .up .Presets .divider {
        display: none !important
    }
}

.TableFilter_leftside .up .title {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d;
    -webkit-user-select: none;
    user-select: none
}

.TableFilter_leftside .up .discription {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b;
    -webkit-user-select: none;
    user-select: none
}

.TableFilter_leftside .up .TitleFilter {
    width: 32px;
    height: 32px
}

.TableFilter_leftside .shadowDivider {
    box-shadow: 0 -3px 36px 1px #30357c12;
    background-color: #f2f3f6
}

.TableFilter_leftside .under {
    background-color: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: 0 -3px 36px 1px #30357c12;
    border-radius: 0 0 24px 24px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.TableFilter_leftside .under::-webkit-scrollbar {
    width: 0px
}

.TableFilter_leftside .under::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.TableFilter_leftside .under::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.TableFilter_leftside .under::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.TableFilter_leftside .under {
    height: fit-content
}

.TableFilter_leftside .under .imgButtons {
    height: 100%;
    margin-right: -31px
}

@media screen and (max-width: 768px) {
    .TableFilter_leftside .under .imgButtons {
        height: 104px
    }
}

.TableFilter_leftside .under .imgButtons img {
    width: 24px;
    height: 24px
}

.TableFilter_leftside .under .imgButtons button {
    background-color: unset;
    border: none
}

.TableFilter_leftside .under .FilterAmountRange .vue-slider-process {
    background-color: #30357c;
    border-radius: 15px;
    transition: background-color .3s
}

.TableFilter_leftside .under .FilterAmountRange .vue-slider-dot-handle {
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin-top: -3px;
    border-radius: 50%;
    background-color: #30357c;
    border: 5px solid #fafcfe;
    box-sizing: border-box;
    transition: box-shadow .3s, border-color .3s
}

.TableFilter_leftside .under .FilterAmountRange .vue-slider-dot-tooltip {
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    display: none !important
}

.TableFilter_leftside .under .FilterAmountRange .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    color: #8a90d2
}

.TableFilter_leftside .under .FilterAmountRange .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    color: #30357c
}

.TableFilter_leftside .under .FilterInput input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.TableFilter_leftside .under::-webkit-scrollbar {
    width: 5px
}

.TableFilter_leftside .under::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

.TableFilter_leftside .under::-webkit-scrollbar-thumb:hover {
    background-color: #30357c
}

.TableFilter_leftside .TabletFilters .TabeletFilterButton {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: 0 8px 32px #30357c0a;
    border-radius: 24px
}

.TableFilter_leftside .TabletFilters .TabeletFilterButton .divider {
    background: #e4e4e4;
    height: 1px;
    transform: rotate(90deg)
}

.TableFilter_leftside .TabletFilters .TabeletFilterButton p {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.TableFilter_leftside .TabletFilters .collapsed .felesh {
    transform: rotate(180deg)
}

.TableFilter_leftside .TabletFilters .Filters .Main {
    border-bottom: 1px solid #f2f3f6
}

.TableFilter_leftside .TabletFilters .Filters .Main .titleButton {
    background-color: unset;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #8b8b8b;
    position: relative
}

.TableFilter_leftside .TabletFilters .Filters .Main .select {
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #3d3d3d
}

.TableFilter_leftside .TabletFilters .Filters .Main .select img {
    display: flex !important;
    position: absolute;
    bottom: -6px
}

.TableFilter_leftside .TabletFilters .Filters .Amountrange .vue-slider-process {
    background-color: #30357c;
    border-radius: 15px;
    transition: background-color .3s
}

.TableFilter_leftside .TabletFilters .Filters .Amountrange .vue-slider-dot-handle {
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin-top: -3px;
    border-radius: 50%;
    background-color: #30357c;
    border: 5px solid #fafcfe;
    box-sizing: border-box;
    transition: box-shadow .3s, border-color .3s
}

.TableFilter_leftside .TabletFilters .Filters .Amountrange .vue-slider-dot-tooltip {
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    display: none !important
}

.TableFilter_leftside .TabletFilters .Filters .Amountrange .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    color: #8a90d2
}

.TableFilter_leftside .TabletFilters .Filters .Amountrange .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    color: #30357c
}

.TableFilter_leftside .TabletFilters .Filters .Shopdetail {
    flex-wrap: wrap
}

.TableFilter_leftside .TabletFilters .Filters .Shopdetail input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.TableFilter_leftside .TabletFilters .Filters .oprationDiv {
    background: #f2f3f6;
    border: 1px solid #f2f3f6;
    border-radius: 0 0 24px 24px
}

.TableFilter_leftside .TabletFilters .Filters .oprationDiv .divider {
    background: #dfe1f3;
    border-radius: 100px;
    height: 1px;
    transform: rotate(90deg);
    width: 24px !important
}

.TableFilter_leftside .TabletFilters .Filters .oprationDiv button {
    font-style: normal;
    font-weight: 400;
    background-color: unset;
    border: none
}

.TableFilter_leftside .TabletFilters .Filters .oprationDiv .applyFilters {
    font-size: 16px;
    line-height: 28px;
    color: #30357c
}

.TableFilter_leftside .TabletFilters .Filters .oprationDiv .deleteFilters {
    font-size: 13px;
    line-height: 24px;
    color: #ff6f5e
}

@media screen and (max-width: 1360px) {
    .TableFilter_leftside {
        border-radius: 0 24px 24px 0;
        height: 100%;
        box-shadow: 0 -3px 36px 1px #30357c12;
        justify-content: start !important;
        padding: 15px 0
    }

    .TableFilter_leftside .up {
        border-radius: 0 24px 0 0
    }

    .TableFilter_leftside .up .Presets {
        flex-direction: column-reverse
    }

    .TableFilter_leftside .up .Presets .divider {
        display: none !important
    }

    .TableFilter_leftside .up .Presets .delete {
        border: 1px solid #e4e4e4;
        padding: 5px 10px;
        margin-bottom: 10px
    }

    .TableFilter_leftside .under {
        height: fit-content;
        box-shadow: none
    }
}

.AdminPanelPage .leftside {
    direction: rtl;
    overflow-y: scroll;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.AdminPanelPage .leftside::-webkit-scrollbar {
    width: 0px
}

.AdminPanelPage .leftside::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.AdminPanelPage .leftside::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.AdminPanelPage .leftside::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.AdminPanelPage .leftside {
    overflow-x: hidden;
    height: 944px
}

.AdminPanelPage .leftside .AdminUserOrderStatus {
    margin-top: 0 !important
}

.AdminPanelPage .leftside .AdminConfirmState {
    width: 100% !important
}

.AdminPanelPage .leftside::-webkit-scrollbar {
    width: 0
}

.AdminPanelPage .leftside::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

.AdminPanelPage .leftside::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 10px;
    height: 80%
}

.AdminPanelPage .leftside::-webkit-scrollbar-thumb:hover {
    background-color: #30357c
}

.AdminPanelPage #contain .ghestqueue button {
    direction: rtl
}

@media screen and (max-width: 1360px) {
    .AdminPanelPage .CenterUpBar {
        display: flex !important;
        height: fit-content;
        min-height: fit-content;
        padding: 0 0 15px
    }
}

@media screen and (max-width: 768px) {
    .AdminPanelPage .upshadow {
        overflow: unset
    }
}

.AdminUserOrderStatus {
    z-index: 22;
    background-color: #fff;
    border-radius: 24px
}

.AdminUserOrderStatus .up {
    height: 102px;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding-top: 10px !important;
    -webkit-user-select: none;
    user-select: none
}

.AdminUserOrderStatus .up .t1 {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #bdbdbd
}

.AdminUserOrderStatus .up .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: right;
    color: #3d3d3d;
    max-height: 24px;
    max-width: 100%
}

.AdminUserOrderStatus .up .t3 {
    background: #f2f3f6;
    border-radius: 24px;
    padding: 5px 10px;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    color: #30357c
}

.AdminUserOrderStatus .up .linkProfile {
    background-color: unset;
    border: none
}

.AdminUserOrderStatus .shadowDivider {
    box-shadow: 0 -3px 36px 1px #30357c12;
    background-color: #f2f3f6;
    height: 1px
}

.AdminUserOrderStatus .down {
    background: #fff;
    box-shadow: 0 -3px 36px 1px #30357c12;
    border-radius: 0 0 8px 8px
}

.AdminUserOrderStatus .down .text {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b;
    -webkit-user-select: none;
    user-select: none
}

.AdminUserOrderStatus .zig {
    z-index: 1
}

.AdminUserOrderStatus .footer {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px #30357c0a;
    border-radius: 0 0 24px 24px;
    margin-top: -11px;
    border-top: 0
}

.AdminUserOrderStatus .footer .text {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b;
    -webkit-user-select: none;
    user-select: none
}

.AdminUserOrderStatus .footer .textBold {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #3d3d3d
}

.AdminUserOrderStatus .orderstatus-code {
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px #30357c0a;
    border-radius: 0 0 24px 24px;
    margin-top: -11px;
    border-top: 0;
    direction: ltr;
    -webkit-user-select: none;
    user-select: none
}

.AdminUserOrderStatus .orderstatus-code .ordercode {
    font-weight: 300;
    font-size: .8vw;
    line-height: 28px;
    color: #8b8b8b
}

@media screen and (max-width: 1360px) {
    .AdminUserOrderStatus .orderstatus-code .ordercode {
        font-size: 1.1vw
    }
}

@media screen and (max-width: 768px) {
    .AdminUserOrderStatus .orderstatus-code .ordercode {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    .AdminUserOrderStatus .orderstatus-code .ordercode {
        font-size: 4.5vw
    }
}

.AdminUserOrderStatus .orderstatus-code .ordercode2 {
    font-weight: 500;
    font-size: .75vw;
    line-height: 28px;
    text-align: center;
    color: #8b8b8b
}

@media screen and (max-width: 1360px) {
    .AdminUserOrderStatus .orderstatus-code .ordercode2 {
        font-size: 1vw
    }
}

@media screen and (max-width: 768px) {
    .AdminUserOrderStatus .orderstatus-code .ordercode2 {
        font-size: 20px
    }
}

@media screen and (max-width: 480px) {
    .AdminUserOrderStatus .orderstatus-code .ordercode2 {
        font-size: 4.5vw
    }
}

@media screen and (max-width: 768px) {
    .AdminUserOrderStatus .orderstatus-code img {
        width: 65px
    }
}

@media screen and (max-width: 480px) {
    .AdminUserOrderStatus .orderstatus-code img {
        width: 100%
    }
}

.AdminUserDetail {
    background: #fff;
    border: 1px solid #f2f3f6;
    border-radius: 24px;
    position: relative
}

.AdminUserDetail .title {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b;
    padding-right: 5px;
    -webkit-user-select: none;
    user-select: none
}

.AdminUserDetail .text {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d;
    padding-right: 5px
}

.AdminUserDetail .dotDiv {
    background: #fff;
    box-shadow: -4px 5px 20px 1px #3d3d3d0f;
    border-radius: 10px;
    transform: rotate(90deg);
    width: 48px;
    height: 16px;
    position: absolute;
    left: -24px;
    border: none
}

.AdminUserDetail .dotDiv svg {
    transform: rotate(90deg)
}

.AdminUserDetail .items {
    flex-wrap: wrap
}

.AdminUserDetail .top {
    border-radius: 24px;
    border: 1px solid var(--tmp, #f2f3f6);
    background: var(--white, #fff);
    box-shadow: 0 -3px 36px 1px #30357c12
}

.AdminUserDetail .bottom button {
    background: transparent;
    border: none
}

.AdminUserDetail .bottom button p, .AdminUserDetail .bottom button a, .AdminUserDetail .bottom button div {
    color: var(--titr, #30357c);
    text-align: right;
    font-size: 13px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 24px
}

.AdminNotes {
    background: #fff;
    border: 1px solid #f2f3f6;
    border-radius: 24px;
    position: relative;
    direction: rtl
}

.AdminNotes .up {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: 0 -3px 36px 1px #30357c12;
    border-radius: 24px
}

.AdminNotes .up .title {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.AdminNotes .up .text {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 21px;
    text-align: right;
    color: #8b8b8b
}

.AdminNotes .up .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.AdminNotes .up .divider {
    background: #f2f3f6;
    border-radius: 24px;
    height: 1px
}

.AdminNotes .down {
    margin-top: 177px
}

.AdminNotes .down button {
    background-color: unset;
    border: none;
    padding: 0;
    width: 47% !important
}

.AdminNotes .down .divider {
    background: #fff;
    border: 1px solid #f2f3f6;
    border-radius: 24px;
    transform: rotate(90deg);
    height: 1px;
    width: 24px
}

.AdminNotes .down .seeAll {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.AdminNotes .down .addNote {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #30357c
}

.DocumentStatus {
    background: #edf7ff;
    border: 4px solid #edf7ff;
    border-radius: 24px;
    direction: rtl
}

@media screen and (max-width: 1850px) {
    .DocumentStatus {
        width: 22vw !important
    }
}

@media screen and (max-width: 1600px) {
    .DocumentStatus {
        width: 25vw !important
    }
}

@media screen and (max-width: 1360px) {
    .DocumentStatus {
        width: 30vw !important
    }
}

@media screen and (max-width: 1360px) {
    .DocumentStatus {
        width: 350px !important
    }
}

@media screen and (max-width: 768px) {
    .DocumentStatus {
        width: 80% !important
    }
}

@media screen and (max-width: 480px) {
    .DocumentStatus {
        width: 100% !important
    }
}

.DocumentStatus .white {
    background: #fff;
    border: 4px solid #edf7ff;
    border-radius: 24px
}

.DocumentStatus .white .title {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.DocumentStatus .white .title_light {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.DocumentStatus .white .items {
    flex-wrap: wrap
}

.DocumentStatus .white .items .itemDiv {
    border-radius: 24px;
    width: 30% !important;
    height: 85px !important
}

.DocumentStatus .white .items .itemDiv p {
    font-style: normal;
    font-weight: 400;
    font-size: 9px;
    line-height: 14px;
    text-align: center
}

.DocumentStatus .white .items .verified {
    background: #f0fdfa;
    border: 1px solid #baf8e7;
    color: #16d8a4
}

.DocumentStatus .white .items .rejected {
    background: #fffbfb;
    border: 1px solid #ffd8d4;
    color: #ff6f5e
}

.DocumentStatus .white .items .pending {
    background: #eceff1;
    color: #30357c
}

.DocumentStatus .white .items .void {
    background: #30357c;
    color: #fff
}

.DocumentStatus .white .items .void p {
    font-weight: 300
}

.DocumentStatus .descript p {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 28px;
    text-align: right;
    color: #8b8b8b
}

.AdminConfirmState {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    direction: rtl;
    position: relative;
    z-index: 1
}

.AdminConfirmState .title {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.AdminConfirmState .descript {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 20px;
    text-align: right;
    color: #3d3d3d
}

.AdminConfirmState .confirm {
    background: #30357c;
    box-shadow: -14px 9px 24px 1px #30357c1f;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    border: none
}

.AdminConfirmState .return {
    background: #fff;
    border: 1px solid #30357c;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    color: #30357c
}

.AdminConfirmState .gds-input-text {
    direction: ltr
}

.RejectedOrder {
    border-radius: 24px;
    border: 1px solid orangered;
    direction: rtl
}

.AdminRejectedOrder {
    border-radius: 24px;
    direction: rtl
}

.AdminRejectedOrder .modal-content {
    border-radius: 24px
}

.AdminRejectedOrder .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center
}

.AdminRejectedOrder .modal-body .NoteTitle {
    background: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 24px
}

.AdminRejectedOrder .modal-body textarea {
    background: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    margin-top: 50px
}

.AdminRejectedOrder .modal-body .send {
    background: #30357c;
    box-shadow: -14px 9px 24px 1px #30357c1f;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    border: none
}

.AdminRejectedOrder .modal-body .cancell {
    background: #fff;
    border: 1px solid #30357c;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #30357c
}

.CenterUpBar .LastOperation {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 0 24px 0 0;
    height: 100%;
    min-width: 220px
}

.CenterUpBar .LastOperation .text1 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #30357c
}

.CenterUpBar .LastOperation .text2 {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #30357c
}

.CenterUpBar .ButtonDiv {
    height: 100%;
    width: 80%;
    flex-wrap: wrap
}

.CenterUpBar .upButton {
    background: #fff;
    border: 1px solid #f7f7f7;
    box-shadow: -12px 0 16px #00569f0f;
    border-radius: 24px;
    position: relative;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.CenterUpBar .upButton .orderstatus-state-cta {
    position: absolute;
    left: -163px;
    border: 1px solid rgb(242, 243, 246);
    box-sizing: border-box;
    box-shadow: #30357c14 -14px 9px 40px 1px;
    border-radius: 24px;
    width: fit-content;
    background: #fff !important;
    z-index: 1
}

.CenterUpBar .upButton .orderstatus-state-cta button {
    width: fit-content
}

.CenterUpBar .upButton .orderstatus-state-cta button p {
    min-width: fit-content
}

.CenterUpBar .upButton .orderstatus-state-cta button svg {
    min-width: fit-content
}

.CenterUpBar .upButton .collapsing {
    width: fit-content !important
}

@media screen and (max-width: 1360px) {
    .CenterUpBar .upButton .orderstatus-state-cta {
        left: 0;
        top: 30px;
        z-index: 2
    }
}

.CenterUpBar .ayandehBackbutton {
    color: #028bff
}

.CenterUpBar a {
    color: #3d3d3d
}

.CenterUpBar .blue {
    color: #028bff;
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    background-color: unset
}

.CenterUpBar .white {
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    background-color: unset
}

.CenterUpBar .red {
    background: #ff6f5e;
    box-shadow: -12px 0 16px #ff6f5e3d;
    border-radius: 24px;
    color: #fff;
    border: none
}

.AdminCheckDocButton {
    font-size: 14px;
    border: none;
    border-radius: 24px;
    background: #03a9f4;
    margin-top: 3px;
    margin-bottom: 25px;
    color: #fff;
    padding: 5px 10px !important
}

.AdminCheckDocButton:hover {
    background-color: #00569f;
    color: #fff
}

.AllDocs {
    width: 100%;
    background-color: #fff
}

.AllDocs::-webkit-scrollbar {
    width: 5px
}

.AllDocs::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 10px
}

.AllDocs::-webkit-scrollbar-thumb {
    background: #e4e4e4;
    border-radius: 10px;
    height: 10px
}

.AllDocs::-webkit-scrollbar-thumb:hover {
    background-color: #90a4ae
}

.AllDocs .uploadContainer {
    width: 100% !important
}

.AllDocs .closeModal {
    border-radius: 18px;
    border: none;
    outline: none;
    background: linear-gradient(90deg, #090f64, #2a2e65 43.75%, #30357c);
    color: #fff;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    font-size: 14px
}

.AllDocs .NiceButton {
    position: relative
}

.AllDocs .NiceButton button, .AllDocs .NiceButton a {
    background: inherit;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    border: 2px solid #3d3d3d;
    z-index: 1
}

.AllDocs .NiceButton div {
    position: absolute;
    height: 64px;
    background: #028bff;
    border-radius: 24px;
    z-index: 0;
    top: 5px;
    left: 6px
}

.AllDocs .tabs {
    border-bottom: 1px solid #e4e4e4
}

.AllDocs .tabs button {
    background-color: unset;
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    padding: 10px 20px;
    font-family: Pelak, sans-serif;
    font-size: 14px;
    font-weight: 400
}

.AllDocs .tabs .active {
    border: 1px solid #bdbdbd;
    background-color: #e4e4e4
}

.AllDocs .FormsCard {
    flex-wrap: wrap
}

.AllDocs .FormsCard .item {
    background: #f2f3f6;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    min-width: 330px;
    position: relative
}

.AllDocs .FormsCard .item .corner {
    position: absolute;
    top: -1px;
    right: -2px
}

.AllDocs .FormsCard .item .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.AllDocs .FormsCard .item .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.AllDocs .FormsCard .disable {
    opacity: .4
}

@media screen and (max-width: 768px) {
    .AllDocs {
        width: 365px
    }
}

.AdminSendMessageModal {
    border-radius: 24px;
    border: none
}

.AdminSendMessageModal .modal-content {
    border-radius: 24px
}

.AdminSendMessageModal .modal-body .uperDiv {
    background: linear-gradient(90deg, #090f64, #2a2e65 43.75%, #30357c);
    box-shadow: 0 12px 40px 1px #30357c4d;
    border-radius: 24px;
    position: relative
}

.AdminSendMessageModal .modal-body .uperDiv .close {
    background-color: unset;
    border: none
}

.AdminSendMessageModal .modal-body .uperDiv p {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff
}

.AdminSendMessageModal .modal-body textarea {
    background: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    margin-top: 50px
}

.AdminSendMessageModal .modal-body .send {
    background: #30357c;
    box-shadow: -14px 9px 24px 1px #30357c1f;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    border: none
}

.AdminSendMessageModal .modal-body .cancell {
    background: #fff;
    border: 1px solid #30357c;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #30357c
}

.AdminTransActionModal {
    border-radius: 24px;
    border: none
}

.AdminTransActionModal .modal-content {
    border-radius: 24px
}

.AdminTransActionModal .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center
}

.AdminTransActionModal .modal-body .uperDiv {
    background: linear-gradient(90deg, #090f64, #2a2e65 43.75%, #30357c);
    box-shadow: 0 12px 40px 1px #30357c4d;
    border-radius: 24px;
    position: relative
}

.AdminTransActionModal .modal-body .uperDiv .close {
    background-color: unset;
    border: none
}

.AdminTransActionModal .modal-body .uperDiv p {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff
}

.AdminTransActionModal .modal-body .itemsDiv .item {
    background: #fff;
    border: 1px solid #f2f3f6;
    border-radius: 24px
}

.AdminTransActionModal .modal-body .itemsDiv .item .divider {
    height: 80px;
    justify-content: center;
    align-items: center;
    display: flex
}

.AdminTransActionModal .modal-body .itemsDiv .item .divider img {
    z-index: 4;
    position: absolute;
    width: 20px;
    height: 83px;
    margin-top: -1px
}

.AdminTransActionModal .modal-body .itemsDiv .item .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.AdminTransActionModal .modal-body .itemsDiv .item .success {
    background: #f0fdfa;
    border: 1px solid #baf8e7;
    border-radius: 12px;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #16d8a4
}

.AdminTransActionModal .modal-body .itemsDiv .item .error {
    background: #fffbfb;
    border: 1px solid #ffd8d4;
    border-radius: 12px;
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #ff6f5e
}

.AdminTransActionModal .modal-body .itemsDiv .item .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.AdminTransActionModal .modal-body .itemsDiv .item .text3 {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 24px;
    color: #8b8b8b
}

.AdminTransActionModal .modal-body .itemsDiv .item .text4 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #3d3d3d
}

.AdminTransActionModal .modal-body .itemsDiv .item .text5 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    color: #3d3d3d
}

.AdminTransActionModal .modal-body .nothing p {
    font-weight: 400
}

.AdminPromiseModal {
    border-radius: 24px;
    border: none;
    direction: rtl;
    align-items: flex-start
}

.AdminPromiseModal .modal-content {
    border-radius: 24px
}

.AdminPromiseModal .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center
}

.AdminPromiseModal .modal-body textarea {
    background: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    margin-top: 50px;
    font-size: 14px;
    font-weight: 300
}

.AdminPromiseModal .modal-body textarea:focus {
    border: 1px solid #8a90d2;
    outline: none
}

.AdminPromiseModal .modal-body .Pomiseitem {
    background: #fff;
    border: 1px solid #f2f3f6;
    border-radius: 24px
}

.AdminPromiseModal .modal-body .Pomiseitem .title {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.AdminPromiseModal .modal-body .Pomiseitem .descript {
    font-style: normal;
    font-weight: 300;
    line-height: 21px;
    text-align: right;
    color: #313131;
    font-size: 13px
}

.AdminPromiseModal .modal-body .Pomiseitem .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    color: #8b8b8b
}

.AdminPromiseModal .modal-body .Pomiseitem .divider {
    background: #f2f3f6;
    border-radius: 24px;
    height: 1px
}

.AdminPromiseModal .modal-body .Pomiseitem .User .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.AdminNotesModal, .AdminSendMessageModal {
    border-radius: 24px;
    border: none;
    direction: rtl;
    align-items: flex-start
}

.AdminNotesModal .modal-content, .AdminSendMessageModal .modal-content {
    border-radius: 24px
}

.AdminNotesModal .modal-body, .AdminSendMessageModal .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center
}

.AdminNotesModal .modal-body .uperDiv, .AdminSendMessageModal .modal-body .uperDiv {
    background: linear-gradient(90deg, #090f64, #2a2e65 43.75%, #30357c);
    box-shadow: 0 12px 40px 1px #30357c4d;
    border-radius: 24px;
    position: relative
}

.AdminNotesModal .modal-body .uperDiv .close, .AdminSendMessageModal .modal-body .uperDiv .close {
    background-color: unset;
    border: none
}

.AdminNotesModal .modal-body .uperDiv p, .AdminSendMessageModal .modal-body .uperDiv p {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff
}

.AdminNotesModal .modal-body .itemsDiv .tabs .divider, .AdminSendMessageModal .modal-body .itemsDiv .tabs .divider {
    width: 1px;
    height: 48px;
    background-color: #e4e4e4
}

.AdminNotesModal .modal-body .itemsDiv .tabs .tab, .AdminSendMessageModal .modal-body .itemsDiv .tabs .tab {
    border: none;
    background-color: transparent
}

.AdminNotesModal .modal-body .itemsDiv .tabs .active, .AdminSendMessageModal .modal-body .itemsDiv .tabs .active {
    border-bottom: 3px solid #3d3d3d
}

.AdminNotesModal .modal-body .itemsDiv .item, .AdminSendMessageModal .modal-body .itemsDiv .item {
    background: #fff;
    border: 1px solid #f2f3f6;
    border-radius: 24px
}

.AdminNotesModal .modal-body .itemsDiv .item .actions button, .AdminSendMessageModal .modal-body .itemsDiv .item .actions button {
    width: 60px;
    background-color: #fff9c4;
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    font-weight: 400;
    font-size: 12px;
    color: #616161;
    letter-spacing: 1px
}

.AdminNotesModal .modal-body .itemsDiv .item .actions .delete, .AdminSendMessageModal .modal-body .itemsDiv .item .actions .delete {
    color: #ff6f5e;
    background-color: #ffebee;
    text-align: center
}

.AdminNotesModal .modal-body .itemsDiv .item .title, .AdminSendMessageModal .modal-body .itemsDiv .item .title {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.AdminNotesModal .modal-body .itemsDiv .item .descript, .AdminSendMessageModal .modal-body .itemsDiv .item .descript {
    font-style: normal;
    font-weight: 300;
    line-height: 21px;
    text-align: right;
    color: #313131;
    font-size: 13px
}

.AdminNotesModal .modal-body .itemsDiv .item .edited, .AdminSendMessageModal .modal-body .itemsDiv .item .edited {
    background: #f7f7f7;
    border-radius: 12px
}

.AdminNotesModal .modal-body .itemsDiv .item .edited .t1, .AdminSendMessageModal .modal-body .itemsDiv .item .edited .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    color: #8b8b8b
}

.AdminNotesModal .modal-body .itemsDiv .item .divider, .AdminSendMessageModal .modal-body .itemsDiv .item .divider {
    background: #f2f3f6;
    border-radius: 24px;
    height: 1px
}

.AdminNotesModal .modal-body .itemsDiv .item .User .t1, .AdminSendMessageModal .modal-body .itemsDiv .item .User .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.AdminAddNoteModal {
    border-radius: 24px;
    border: none;
    direction: rtl
}

.AdminAddNoteModal .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center
}

.AdminAddNoteModal .modal-body .uperDiv {
    background: linear-gradient(90deg, #090f64, #2a2e65 43.75%, #30357c);
    box-shadow: 0 12px 40px 1px #30357c4d;
    border-radius: 24px;
    position: relative
}

.AdminAddNoteModal .modal-body .uperDiv .close {
    background-color: unset;
    border: none
}

.AdminAddNoteModal .modal-body .uperDiv p {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff
}

.AdminAddNoteModal .modal-body .NoteTitle {
    background: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 24px
}

.AdminAddNoteModal .modal-body textarea {
    background: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    margin-top: 50px
}

.AdminAddNoteModal .modal-body .send {
    background: #30357c;
    box-shadow: -14px 9px 24px 1px #30357c1f;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    border: none
}

.AdminAddNoteModal .modal-body .cancell {
    background: #fff;
    border: 1px solid #30357c;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #30357c
}

.AdminOrderTimeLineModal {
    border-radius: 24px;
    border: none;
    direction: rtl
}

.AdminOrderTimeLineModal .modal-content {
    border-radius: 24px
}

.AdminOrderTimeLineModal .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center
}

.AdminOrderTimeLineModal .modal-body .uperDiv {
    background: linear-gradient(90deg, #090f64, #2a2e65 43.75%, #30357c);
    box-shadow: 0 12px 40px 1px #30357c4d;
    border-radius: 24px;
    position: relative
}

.AdminOrderTimeLineModal .modal-body .uperDiv .close {
    background-color: unset;
    border: none
}

.AdminOrderTimeLineModal .modal-body .uperDiv p {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff
}

.AdminOrderTimeLineModal .modal-body .main {
    z-index: 1;
    position: relative
}

.AdminOrderTimeLineModal .modal-body .main .centerline {
    position: absolute;
    right: 0;
    border-left: 3px solid #f2f3f6;
    height: 100%;
    z-index: 2
}

.AdminOrderTimeLineModal .modal-body .main .item {
    z-index: 3;
    -webkit-user-select: none;
    user-select: none
}

.AdminOrderTimeLineModal .modal-body .main .item .TitleDiv {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0d;
    border-radius: 16px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    text-align: right;
    color: #30357c
}

.AdminOrderTimeLineModal .modal-body .main .item .date {
    background: #f2f3f6;
    border: 3px solid #fafcfe;
    border-radius: 12px;
    width: 32px;
    height: 32px;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d
}

.AdminOrderTimeLineModal .modal-body .main .item .fullTime .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.AdminOrderTimeLineModal .modal-body .main .item .fullTime .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #bdbdbd;
    letter-spacing: 2px
}

.AdminOrderTimeLineModal .modal-body .main .oddItem {
    flex-direction: row-reverse !important
}

.AdminOrderTimeLineModal .modal-body .main .oddItem .desDiv {
    margin-left: .25rem !important;
    flex-direction: row-reverse !important
}

.FromUserView {
    background: #f2f3f6;
    border: 1px solid #f2f3f6;
    border-radius: 24px;
    margin-top: -55px;
    right: 1%;
    position: absolute;
    direction: rtl !important
}

.FromUserView .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #8a90d2
}

.FromUserView .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #30357c
}

.CardSkeleton {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    height: fit-content
}

.CardSkeleton .circle {
    background: linear-gradient(270deg, #f7f7f7, #e4e4e4);
    border-radius: 16px;
    width: 40px;
    height: 40px;
    background-size: 400% 400%;
    animation: gradient 2s ease infinite
}

.CardSkeleton .line {
    border-radius: 16px;
    height: 16px;
    background: linear-gradient(to right, #fff0, #ffffff80 50%, #fff0 80%), #d3d3d3;
    background-repeat: repeat-y;
    background-size: 50px 500px;
    background-position: 0 0;
    animation: shine 1s infinite;
    opacity: .5
}

.TableSkeleton {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    height: fit-content;
    direction: rtl
}

.TableSkeleton .lines {
    border-radius: 16px;
    height: 16px;
    background: linear-gradient(to right, #fff0, #ffffff80 50%, #fff0 80%), #d3d3d3;
    background-repeat: repeat-y;
    background-size: 50px 500px;
    background-position: 0 0;
    animation: shine 1s infinite;
    opacity: .5;
    margin: 10px 0
}

@keyframes shine {
    to {
        background-position: 100% 0
    }
}

.TableSkeleton .circleDiv {
    height: 100%;
    justify-content: space-around;
    align-items: center
}

.TableSkeleton .circleDiv .circle {
    width: 16px;
    height: 16px;
    background: linear-gradient(270deg, #f7f7f7, #e4e4e4);
    border-radius: 16px;
    background-size: 400% 400%;
    animation: gradient 2s ease infinite
}

@keyframes gradient {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
    to {
        background-position: 0 50%
    }
}

.horizonal {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important
}

.vertical {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important
}

.AdminRedirect h1 {
    font-style: normal;
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 52px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #1b5b9b
}

.AdminRedirect h6 {
    font-style: normal;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 44px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #8b8b8b
}

@media screen and (max-width: 768px) {
    .AdminRedirect svg {
        max-width: 100%
    }
}

#AdminMoreDetailModal .AdminMoreDetailModal {
    border-radius: 24px;
    border: none;
    direction: rtl
}

#AdminMoreDetailModal .AdminMoreDetailModal .uperDiv {
    background: linear-gradient(90deg, #090f64, #2a2e65 43.75%, #30357c);
    box-shadow: 0 12px 40px 1px #30357c4d;
    border-radius: 24px;
    position: relative
}

#AdminMoreDetailModal .AdminMoreDetailModal .uperDiv .close {
    background-color: unset;
    border: none
}

#AdminMoreDetailModal .AdminMoreDetailModal .uperDiv p {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff
}

#AdminMoreDetailModal .AdminMoreDetailModal .Tab label {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #bdbdbd
}

#AdminMoreDetailModal .AdminMoreDetailModal .Tab .active {
    border-bottom: 2px solid #30357c;
    color: #30357c
}

#AdminMoreDetailModal .AdminMoreDetailModal .divider {
    background-color: #f2f3f6;
    height: 8px;
    border-top: 1px solid #e4e4e4
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .title {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    z-index: 1
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .title .shopImg {
    margin-top: -25px;
    background: #16d8a4;
    box-shadow: -3px 5px 14px 1px #16d8a447;
    border-radius: 16px;
    padding: 8px
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .title .bg_red {
    background: #ff6f5e
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .titleText .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .titleText .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    color: #8b8b8b
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .titleText .bagesDiv {
    flex-wrap: wrap
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .titleText .bagesDiv .badge {
    background: #30357c;
    box-shadow: -7px 5px 14px 1px #30357c29;
    border-radius: 10px
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .titleText .bagesDiv .badge img {
    position: absolute;
    right: 0
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .titleText .bagesDiv .badge p {
    font-style: normal;
    font-weight: 300;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #fff
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .titleText .bagesDiv .bg_green {
    background: #16d8a4;
    box-shadow: -7px 5px 14px 1px #16d8a429;
    border-radius: 10px;
    color: #fff
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .titleText .bagesDiv .bg_red {
    background: #ff6f5e
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .AddressDetail {
    margin-top: -100px
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .AddressDetail .div1 {
    background: #fff;
    border-bottom: 1px solid #f2f3f6;
    box-shadow: 3px 9px 50px 1px #00569f0f;
    border-radius: 24px
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .AddressDetail {
    background: #fff;
    border: 1px solid #f2f3f6;
    border-radius: 24px
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .AddressDetail .titr {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #028bff
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .AddressDetail .lightText {
    font-style: normal;
    font-weight: 300;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

#AdminMoreDetailModal .AdminMoreDetailModal .ShopDown .AddressDetail .boldText {
    padding: 0 !important;
    border-radius: 16px;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.CreditGuidePage {
    direction: rtl
}

.CreditGuidePage .titleDiv .imgDiv {
    background-image: url(../images/CreditGuidePage/topCricle.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.CreditGuidePage .titleDiv p {
    font-style: normal;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 44px;
    text-align: right;
    color: #30357c
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .titleDiv .detail {
        flex-wrap: wrap
    }
}

@media screen and (max-width: 480px) {
    .CreditGuidePage .titleDiv .detail {
        margin-top: 20px
    }

    .CreditGuidePage .titleDiv .detail div {
        width: 100% !important;
        margin-top: 15px !important
    }
}

.CreditGuidePage .divider {
    background: #f2f3f6;
    height: 1px
}

.CreditGuidePage .flowDiv {
    position: relative
}

.CreditGuidePage .flowDiv .left {
    border: 2px dashed #8a90d2;
    border-right: 2px dashed #ffffff !important;
    border-top-left-radius: 131px;
    border-bottom-left-radius: 131px;
    border-right: 0;
    z-index: 1;
    height: 224px
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .left .des {
        width: 254px;
        margin-left: 5px !important
    }
}

.CreditGuidePage .flowDiv .left .imgDiv {
    background: linear-gradient(90deg, #16222a, #3a6073);
    border-radius: 100%
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .left .imgDiv {
        width: 64px;
        height: 64px;
        min-width: 64px;
        min-height: 64px;
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .CreditGuidePage .flowDiv .left .imgDiv img {
        width: 48px;
        height: 48px
    }
}

.CreditGuidePage .flowDiv .left .t1 {
    font-style: normal;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 44px;
    color: #3d3d3d;
    text-align: right
}

@media screen and (max-width: 1360px) {
    .CreditGuidePage .flowDiv .left .t1 {
        font-size: 1.2rem
    }
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .left .t1 {
        font-size: 16px
    }
}

.CreditGuidePage .flowDiv .left .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 28px;
    color: #8b8b8b;
    text-align: right
}

@media screen and (max-width: 1360px) {
    .CreditGuidePage .flowDiv .left .t2 {
        font-size: .9rem
    }
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .left .t2 {
        font-size: 13px
    }
}

.CreditGuidePage .flowDiv .right {
    border: 2px dashed #8a90d2;
    border-left: 2px dashed #ffffff !important;
    border-top-right-radius: 131px;
    border-bottom-right-radius: 131px;
    border-left: 0;
    z-index: 1;
    margin-left: 30px;
    height: 224px
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .right .des {
        width: 254px;
        margin-right: 25px !important
    }
}

.CreditGuidePage .flowDiv .right .imgDiv {
    background: linear-gradient(90deg, #16222a, #3a6073);
    border-radius: 100%
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .right .imgDiv {
        width: 64px;
        height: 64px;
        min-width: 64px;
        min-height: 64px;
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .CreditGuidePage .flowDiv .right .imgDiv img {
        width: 48px;
        height: 48px
    }
}

.CreditGuidePage .flowDiv .right .t1 {
    font-style: normal;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 44px;
    color: #3d3d3d;
    text-align: right
}

@media screen and (max-width: 1360px) {
    .CreditGuidePage .flowDiv .right .t1 {
        font-size: 1.2rem
    }
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .right .t1 {
        font-size: 16px
    }
}

.CreditGuidePage .flowDiv .right .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 28px;
    color: #8b8b8b;
    text-align: right
}

@media screen and (max-width: 1360px) {
    .CreditGuidePage .flowDiv .right .t2 {
        font-size: .9rem
    }
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .right .t2 {
        font-size: 13px
    }
}

.CreditGuidePage .flowDiv .free {
    position: absolute
}

.CreditGuidePage .flowDiv .free .t3 {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    background: linear-gradient(90deg, #514a9d, #24c6dc 65.1%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .free .t3 {
        font-size: 16px;
        line-height: 28px
    }
}

.CreditGuidePage .flowDiv .free .t4 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 31px;
    text-align: center;
    color: #30357c
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .free .t4 {
        display: none
    }
}

.CreditGuidePage .flowDiv .numbers {
    position: absolute;
    max-width: 81px
}

.CreditGuidePage .flowDiv .numbers div {
    z-index: 2;
    background-color: #fafcfe;
    margin: 0 0 143px !important;
    border-radius: 100%
}

.CreditGuidePage .flowDiv .numbers div p {
    font-style: normal;
    font-weight: 700;
    font-size: 56px;
    line-height: 81px;
    text-align: center;
    background: linear-gradient(90deg, #514a9d, #24c6dc 65.1%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

@media screen and (max-width: 1360px) {
    .CreditGuidePage .flowDiv .numbers div p {
        font-size: 46px
    }
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .numbers div {
        width: 66px;
        margin: 0 0 159px !important;
        min-height: 66px
    }

    .CreditGuidePage .flowDiv .numbers div p {
        font-size: 26px;
        line-height: 44px
    }

    .CreditGuidePage .flowDiv .numbers div img {
        margin-top: -20px
    }
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .numbers {
        min-width: 66px
    }
}

.CreditGuidePage .flowDiv .littleDiv {
    height: 224px;
    border-top: 2px dashed #8a90d2
}

@media screen and (max-width: 850px) {
    .CreditGuidePage .flowDiv .littleDiv {
        display: none
    }
}

.CreditGuidePage .flowDiv .miniDiv {
    border-left: 1px dashed #c3c6e8;
    height: 120px;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -20px;
    z-index: 2
}

.CreditGuidePage .flowDiv .miniDiv img {
    position: absolute;
    left: 20%;
    bottom: 5px
}

.CreditGuidePage .flowDiv .miniDiv p {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 44px;
    text-align: right;
    color: #30357c
}

@media screen and (max-width: 1360px) {
    .CreditGuidePage .flowDiv .miniDiv p {
        font-size: 1.2rem
    }
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .miniDiv p {
        font-size: 14px;
        font-weight: 700
    }
}

@media screen and (max-width: 1360px) {
    .CreditGuidePage .flowDiv .miniDiv {
        margin-left: 20px
    }
}

@media screen and (max-width: 768px) {
    .CreditGuidePage .flowDiv .miniDiv {
        height: 100px
    }
}

.CreditGuidePage .flowDiv .flesh {
    width: 65px;
    position: absolute;
    bottom: 0;
    margin-bottom: -48px;
    right: 50%
}

@media screen and (min-width: 1360px) {
    .mosha__toast {
        max-width: 40% !important
    }
}

.mosha__toast__content__text {
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 44px;
    text-align: center;
    color: #fff;
    direction: rtl
}

.calculator_packages .plan-card {
    border-radius: 20px;
    transition: all .3s ease;
    cursor: pointer;
    max-width: 320px;
    box-shadow: 0 8px 18px #00000014 !important
}

.calculator_packages .icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    transition: all .3s ease
}

.calculator_packages .plan-icon {
    width: 32px;
    height: 32px;
    stroke-width: 2;
    transition: all .3s ease
}

.calculator_packages .active {
    background: linear-gradient(180deg, #a7d5ff -27%, #fff);
    z-index: 1;
    border: 1px solid #e4e4e4 !important
}

.calculator_packages .title {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.calculator_packages .detail {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.calculator_packages .NiceButton {
    max-width: 300px
}

.Calculator-landing {
    background: linear-gradient(188.53deg, #fcefb4 31.25%, #fceb9700 107.29%);
    border: 1px solid #f2f3f6;
    box-shadow: inset 8px 0 56px #fbc76b99;
    border-radius: 40px;
    direction: rtl
}

.Calculator-landing .checkCode {
    border-radius: 24px;
    max-width: 300px
}

.Calculator-landing .checkCode button {
    border: none;
    border-radius: 16px;
    background: var(--Black, #3d3d3d);
    color: var(--White, #fff);
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    height: fit-content
}

.Calculator-landing .UP {
    min-height: 400px;
    background: linear-gradient(152.88deg, #514a9d 15.99%, #24c6dc 84.93%);
    border: 4px solid #fdf4d6;
    box-shadow: 0 16px 1px #4e86bc1a;
    border-radius: 40px;
    position: relative
}

.Calculator-landing .UP .Mode {
    border-radius: 24px;
    border: 1px solid var(--Tmp, #f2f3f6);
    background: var(--White, #fff);
    box-shadow: 0 8px 16px 1px #30357c12;
    color: var(--Placeholder, #bdbdbd);
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px
}

.Calculator-landing .UP .Mode .gds-btn-check {
    display: none
}

.Calculator-landing .UP .Mode .active {
    border-radius: 24px;
    background: var(--primary-tint-light, #028bff);
    color: #fff
}

.Calculator-landing .UP .banks {
    border-radius: 12px;
    border: 1px solid var(--Tmp, #f2f3f6);
    background: var(--White, #fff);
    box-shadow: 0 8px 16px 1px #30357c12;
    color: var(--Placeholder, #bdbdbd);
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px
}

.Calculator-landing .UP .banks label {
    border: 1px solid white;
    border-radius: 12px
}

.Calculator-landing .UP .banks img {
    width: 32px;
    height: 32px
}

.Calculator-landing .UP .banks .gds-btn-check {
    display: none
}

.Calculator-landing .UP .banks .active {
    background: var(--primary-tint-light, rgb(189, 212, 235));
    color: #475c72;
    border: 1px solid #bdbdbd
}

.Calculator-landing .UP .step {
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 28px;
    color: #fff
}

@media screen and (max-width: 768px) {
    .Calculator-landing .UP .step {
        width: 83.3% !important
    }
}

.Calculator-landing .UP .step p {
    font-size: 14px;
    font-weight: 500
}

.Calculator-landing .UP .step .big {
    font-size: 24px;
    font-weight: 500
}

.Calculator-landing .UP .wave {
    position: absolute;
    bottom: 0
}

.Calculator-landing .UP .Status {
    background: #fafcfecc;
    box-shadow: 2px 4px 48px #4861a81f;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 40px;
    z-index: 1;
    min-width: 328px;
    margin-bottom: -100px
}

.Calculator-landing .UP .Status .uperDiv {
    background: #fafcfeb3;
    border: 1px solid #f2f3f6;
    box-shadow: 0 0 90px #00569f14;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 40px;
    -webkit-user-select: none;
    user-select: none
}

.Calculator-landing .UP .Status .uperDiv .title {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.Calculator-landing .UP .Status .uperDiv .descript {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 44px;
    color: #3d3d3d
}

.Calculator-landing .UP .Status .uperDiv .descript2 {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.Calculator-landing .UP .Status .uperDiv .toman {
    width: 17px
}

.Calculator-landing .UP .Status .uperDiv .NiceButton {
    position: relative
}

.Calculator-landing .UP .Status .uperDiv .NiceButton button, .Calculator-landing .UP .Status .uperDiv .NiceButton a {
    background: inherit;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    border: 2px solid #3d3d3d;
    z-index: 1
}

.Calculator-landing .UP .Status .uperDiv .NiceButton div {
    position: absolute;
    height: 64px;
    background: #028bff;
    border-radius: 24px;
    z-index: 0;
    top: 5px;
    left: 6px
}

.Calculator-landing .UP .Status .custom {
    border-radius: 24px;
    border: none;
    outline: none;
    direction: rtl;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 44px;
    color: #3d3d3d
}

.Calculator-landing .UP .Status div {
    position: relative;
    -webkit-user-select: none;
    user-select: none
}

@media screen and (max-width: 1360px) {
    .Calculator-landing .UP .big {
        font-size: 16px !important;
        font-weight: 500
    }
}

.Calculator-landing .DOWN {
    position: relative;
    min-height: 180px;
    -webkit-user-select: none;
    user-select: none
}

@media screen and (max-width: 1360px) {
    .Calculator-landing .DOWN {
        padding-top: 150px
    }
}

@media screen and (max-width: 768px) {
    .Calculator-landing .DOWN {
        padding-top: 7rem
    }
}

.Calculator-landing .DOWN .RightCoin {
    position: absolute;
    right: 0;
    bottom: 0
}

@media screen and (max-width: 768px) {
    .Calculator-landing .DOWN .RightCoin {
        display: none
    }
}

.Calculator-landing .DOWN .LeftCoin {
    position: absolute;
    left: 0;
    bottom: 0
}

@media screen and (max-width: 768px) {
    .Calculator-landing .DOWN .LeftCoin {
        display: none
    }
}

.Calculator-landing .DOWN p {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #3d3d3d
}

@media screen and (max-width: 1400px) {
    .Calculator-landing .DOWN p {
        max-width: 360px
    }
}

@media screen and (max-width: 992px) {
    .Calculator-landing .DOWN p {
        padding: 0 60px !important
    }
}

@media screen and (max-width: 768px) {
    .Calculator-landing .DOWN p {
        padding: 20px 0 0 !important
    }
}

@media screen and (max-width: 768px) {
    .Calculator-landing .DOWN .MobileCoinRight {
        display: flex !important;
        position: absolute;
        right: 0;
        top: 15px
    }
}

@media screen and (max-width: 768px) {
    .Calculator-landing .DOWN .MobileCoinLeft {
        display: flex !important;
        position: absolute;
        left: 0;
        top: 35px
    }
}

@media screen and (max-width: 768px) {
    .Calculator-landing {
        margin: 0 0 80px !important
    }
}

.RangeMoney {
    position: relative;
    left: unset;
    right: unset;
    top: unset
}

.RangeMoney .slider-base {
    height: 10px;
    background-color: inherit
}

.RangeMoney .slider-handle, .RangeMoney .slider-handle-lower {
    width: 45px;
    height: 45px;
    margin-top: -13px;
    border-radius: 50%;
    background-color: #16d8a4;
    border: 5px solid #16d8a4;
    box-sizing: border-box;
    background-image: url(../images/neworder/range_dot3.svg);
    background-repeat: no-repeat;
    background-size: 69% 60%;
    background-position: center;
    box-shadow: 0 3.5px 46.6667px 1.16667px #16d8a4e6;
    right: -20px !important
}

.RangeMoney .slider-connects {
    background-color: inherit;
    background-image: url(../images/CalculatorLanding/dot.svg);
    background-size: contain;
    background-repeat: repeat-x;
    border-radius: 15px;
    height: 10px
}

.RangeMoney .slider-connects .slider-connect {
    background-color: #16d8a4;
    border-radius: 24px
}

.input-headnote {
    position: absolute;
    right: 15px;
    top: -15px;
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    color: #a9a9a9
}

.input-footnote {
    position: absolute;
    left: 5px;
    bottom: -18px;
    font-style: normal;
    font-weight: 300;
    font-size: 11px;
    line-height: 28px;
    text-align: center;
    color: gray
}

.input-error {
    position: absolute;
    right: 5px;
    bottom: -25px;
    font-style: normal;
    font-weight: 300;
    font-size: 11px;
    line-height: 28px;
    text-align: center;
    color: #f44336
}

.landing_card {
    position: relative;
    height: fit-content;
    width: fit-content
}

.landing_card .play {
    position: absolute;
    top: 3%;
    left: 48.5%;
    width: fit-content;
    height: fit-content;
    background-color: unset;
    border: none;
    outline: none
}

.HomePage {
    direction: rtl;
    background: #fafcfe
}

.HomePage .titletitr2 {
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 52px;
    text-align: center;
    color: #00569f;
    background-image: url(../images/HomePage/titr2.svg);
    background-repeat: no-repeat;
    background-size: 100%
}

.HomePage .HeroSection .Right {
    background-image: url(../images/HomePage/Circle.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative
}

.HomePage .HeroSection .Right .HandMobile {
    display: none
}

.HomePage .HeroSection .Right .Hand {
    height: 90vh;
    aspect-ratio: 3.2;
    object-fit: contain;
    margin-right: -40px
}

.HomePage .HeroSection .Left {
    height: 100%;
    direction: rtl
}

.HomePage .HeroSection .Left .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: right;
    color: #3d3d3d
}

.HomePage .HeroSection .Left .t2 {
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    text-align: right;
    color: #3d3d3d
}

.HomePage .HeroSection .Left .des {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #8b8b8b
}

@media screen and (min-width: 768px) {
    .HomePage .HeroSection .Left .des {
        width: 490px !important
    }
}

.HomePage .HeroSection .Left .register {
    background: radial-gradient(68.16% 905.6% at 78.09% 44.53%, #3280c1, #028bff 19.27%, #028bff);
    box-shadow: -5px 19px 40px #028bff1f;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    position: relative;
    min-width: 240px !important;
    height: 64px !important
}

.HomePage .HeroSection .Left .register img {
    position: absolute;
    right: -30px;
    top: 0
}

.HomePage .HeroSection .Left .calc {
    background: #fff;
    border: 1px solid #028bff;
    border-radius: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: right;
    color: #028bff;
    min-width: 190px !important
}

.HomePage .HeroSection .Left .divider {
    background: #e2ebf0;
    height: 1px
}

.HomePage .HeroSection .Left .Movie button {
    border: none;
    background-color: unset;
    background-image: url(../images/HomePage/tavasoli.png);
    background-repeat: no-repeat;
    width: 168px;
    height: 195px
}

.HomePage .HeroSection .Left .Movie button:hover {
    background-image: url(../images/HomePage/tavasoli2.png)
}

.HomePage .HeroSection .Left .Movie .title {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 44px;
    text-align: right;
    color: #3d3d3d
}

.HomePage .HeroSection .Left .Movie .descript {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #8b8b8b
}

.HomePage .HeroSection .Left .Movie .descript .blue {
    color: #028bff
}

@media screen and (min-width: 767px) and (max-width: 1199px) {
    .HomePage .HeroSection .Right {
        background-size: cover;
        height: 850px
    }

    .HomePage .HeroSection .Right .Hand {
        height: 100%;
        margin-top: -70px !important
    }

    .HomePage .HeroSection .Left {
        position: relative
    }

    .HomePage .HeroSection .Left .t1 {
        font-size: 16px;
        line-height: 24px
    }

    .HomePage .HeroSection .Left .t2 {
        font-size: 18px;
        line-height: 24px
    }

    .HomePage .HeroSection .Left .des {
        width: 80% !important
    }

    .HomePage .HeroSection .Left .CTA {
        flex-direction: column !important
    }

    .HomePage .HeroSection .Left .CTA .register {
        min-width: 206px !important
    }

    .HomePage .HeroSection .Left .CTA .register img {
        width: 25% !important;
        top: auto
    }

    .HomePage .HeroSection .Left .CTA .calc {
        margin: 10px 0 !important;
        min-width: 206px !important
    }

    .HomePage .HeroSection .Left .divider {
        width: 80%
    }

    .HomePage .HeroSection .Left .Movie {
        position: absolute;
        bottom: -220px;
        right: -112px
    }

    .HomePage .HeroSection .Left .Movie .title {
        font-size: 20px
    }
}

@media screen and (max-width: 768px) {
    .HomePage .HeroSection {
        flex-direction: column
    }

    .HomePage .HeroSection .Right {
        width: 90% !important;
        background-image: url(../images/HomePage/Circle_mobile.svg);
        background-size: 100%
    }

    .HomePage .HeroSection .Right .Hand {
        display: none
    }

    .HomePage .HeroSection .Right .HandMobile {
        display: flex;
        max-width: 75vw
    }

    .HomePage .HeroSection .Left {
        width: 100% !important;
        padding-top: 0 !important;
        margin-top: -120px
    }

    .HomePage .HeroSection .Left .t1 {
        font-size: 16px;
        line-height: 28px;
        margin-top: 5px !important
    }

    .HomePage .HeroSection .Left .t2 {
        font-size: 22px;
        line-height: 44px;
        margin-top: 0 !important
    }

    .HomePage .HeroSection .Left .des {
        width: 100% !important;
        padding: 0 90px !important;
        position: relative
    }

    .HomePage .HeroSection .Left .CTA {
        width: 100% !important;
        flex-direction: column
    }

    .HomePage .HeroSection .Left .CTA .calc {
        margin: 20px 0 !important;
        width: 240px !important;
        text-align: center
    }

    .HomePage .HeroSection .Left .divider {
        width: 90% !important;
        margin: auto
    }

    .HomePage .HeroSection .Left .Movie {
        position: relative;
        justify-content: center !important
    }

    .HomePage .HeroSection .Left .Movie button {
        padding: 0 !important;
        width: 153px
    }

    .HomePage .HeroSection .Left .Movie .title {
        font-size: 22px
    }

    .HomePage .HeroSection .Left .Movie .descript {
        display: none !important
    }

    .HomePage .HeroSection .Left .Movie .mobile {
        display: flex !important;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 28px;
        text-align: right;
        color: #8b8b8b
    }

    .HomePage .HeroSection .Left .Movie .mobile .blue {
        color: #028bff
    }

    .HomePage .HeroSection .Left .Movie div {
        padding-right: 15px
    }

    .HomePage .HeroSection .Left .des:before {
        background-image: url(../images/HomePage/RightVector.svg);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        content: "";
        height: 265%;
        position: absolute;
        top: -45px;
        right: 0;
        width: 20%
    }

    .HomePage .HeroSection .Left .Movie:after {
        background-image: url(../images/HomePage/LeftVector.svg);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: 100% 122%;
        content: "";
        height: 112%;
        position: absolute;
        bottom: -11px;
        left: 0;
        width: 20%
    }
}

@media screen and (max-width: 568px) {
    .HomePage .HeroSection .Right {
        width: 100% !important
    }

    .HomePage .HeroSection .Right .HandMobile {
        max-width: 100% !important
    }

    .HomePage .HeroSection .Left .des {
        padding: 0 20px !important
    }

    .HomePage .HeroSection .Left .des:before {
        background-image: url(../images/HomePage/RightVector.svg);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        content: "";
        height: 210%;
        position: absolute;
        top: -50px;
        right: 0;
        width: 45%
    }

    .HomePage .HeroSection .Movie:after {
        width: 40% !important
    }
}

.HomePage .Services {
    position: relative;
    background: linear-gradient(90.05deg, #d5e2ea .04%, #e2ebf0 5.25%, #f7f7f7 44.28%, #ecf2f5 60.94%, #e2ebf0 93.32%, #d5e2ea 99.97%);
    border: 1px solid #d1dfe9;
    border-right: 0;
    border-left: 0
}

.HomePage .Services .Items {
    background-image: url(../images/HomePage/Feature_dots.svg);
    background-repeat: no-repeat;
    height: 100%;
    background-size: 100%
}

.HomePage .Services .Items p {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 34px;
    text-align: right;
    color: #00569f
}

.HomePage .Services :after {
    background-image: url(../images/HomePage/Feature_after.svg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 6%;
    opacity: .1
}

.HomePage .Services :before {
    background-image: url(../images/HomePage/Feature_befor.svg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6%;
    opacity: .1
}

@media screen and (max-width: 768px) {
    .HomePage .Services {
        border: none
    }

    .HomePage .Services .Items {
        display: none !important
    }

    .HomePage .Services .ItemsMobile {
        display: flex !important;
        flex-direction: column !important;
        background-image: url(../images/HomePage/Feature_dots.svg);
        background-repeat: no-repeat;
        height: 100%;
        background-size: 100%
    }

    .HomePage .Services .ItemsMobile p {
        font-style: normal;
        font-weight: 600;
        font-size: 1.1rem;
        line-height: 34px;
        text-align: right;
        color: #00569f
    }

    .HomePage .Services .ItemsMobile img {
        width: 64px
    }

    .HomePage .Services .ItemsMobile .green {
        color: #16d8a4
    }

    .HomePage .Services :after {
        background-image: url(../images/HomePage/Feature_after_mobile.svg);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        content: "";
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 20%;
        opacity: .1
    }

    .HomePage .Services :before {
        background-image: url(../images/HomePage/Feature_befor_mobile.svg);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        content: "";
        height: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 31%;
        opacity: .1
    }
}

.HomePage .Features {
    flex-wrap: wrap
}

.HomePage .Features .titr1 {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    color: #c3c6e8
}

.HomePage .Features .titr2 {
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 52px;
    text-align: center;
    color: #00569f;
    background-image: url(../images/HomePage/titr2.svg);
    background-repeat: no-repeat;
    background-size: 100%
}

.HomePage .Features .FeatureItem {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    justify-content: start;
    align-items: flex-start;
    width: 22%;
    min-width: 400px;
    height: 260px
}

.HomePage .Features .FeatureItem .FeatureItemDeatil {
    padding: 0 9px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start
}

.HomePage .Features .FeatureItem .FeatureItemDeatil .t2 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 44px;
    text-align: right;
    color: #3d3d3d
}

.HomePage .Features .FeatureItem .FeatureItemDeatil .divider {
    background: #f2f3f6;
    height: 1px
}

.HomePage .Features .FeatureItem .FeatureItemDeatil .t3 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #8b8b8b
}

.HomePage .Features .collapsed {
    justify-content: start;
    align-items: center;
    padding: 0 !important;
    width: fit-content;
    min-width: fit-content
}

.HomePage .Features .collapsed .t1 {
    display: flex !important;
    writing-mode: vertical-rl;
    text-align: center;
    transform: rotate(180deg);
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 28px;
    color: #3d3d3d
}

.HomePage .Features .collapsed:hover {
    position: relative;
    filter: blur(.6px);
    background-color: transparent
}

.HomePage .Features .collapsed:hover .hover {
    display: flex !important;
    position: absolute;
    bottom: 0;
    right: 0
}

@media screen and (max-width: 1360px) {
    .HomePage .Features {
        flex-direction: column !important
    }

    .HomePage .Features .FeatureItemDiv {
        flex-wrap: wrap
    }

    .HomePage .Features .FeatureItemDiv .FeatureItem {
        width: 424px
    }

    .HomePage .Features .FeatureItemDiv .collapsed {
        width: 96px
    }
}

@media screen and (max-width: 768px) {
    .HomePage .Features .titr2 {
        font-size: 24px
    }

    .HomePage .Features .FeatureItemDiv {
        flex-wrap: nowrap;
        flex-direction: column !important
    }

    .HomePage .Features .FeatureItemDiv .FeatureItem {
        width: 90%;
        min-width: 334px;
        max-width: 424px
    }

    .HomePage .Features .FeatureItemDiv .FeatureItem .t1 {
        transform: none;
        writing-mode: unset
    }

    .HomePage .Features .FeatureItemDiv .FeatureItem .FeatureItemDeatil .t2 {
        font-size: 17px
    }

    .HomePage .Features .FeatureItemDiv .collapsed {
        height: fit-content
    }

    .HomePage .Features .FeatureItemDiv .collapsed .ItemImg {
        position: unset
    }

    .HomePage .Features .FeatureItemDiv .collapsed .t2 {
        padding-right: 0 !important
    }
}

.HomePage .Steps .titr1 {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    color: #c3c6e8;
    margin-right: 34% !important
}

.HomePage .Steps .titr2 {
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 52px;
    text-align: center;
    color: #00569f;
    background-image: url(../images/HomePage/titr2.svg);
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 20% !important
}

.HomePage .Steps .des {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d;
    margin-right: 20% !important;
    margin-bottom: 3% !important
}

.HomePage .Steps .NiceButton {
    position: relative;
    max-width: 206px;
    margin-right: 20% !important
}

.HomePage .Steps .NiceButton button, .HomePage .Steps .NiceButton a {
    background: inherit;
    border-radius: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #3d3d3d;
    border: 2px solid #3d3d3d;
    z-index: 1
}

.HomePage .Steps .NiceButton div {
    position: absolute;
    height: 64px;
    background: #16d8a4;
    border-radius: 24px;
    z-index: 0;
    top: 5px;
    left: 6px
}

@media screen and (max-width: 992px) {
    .HomePage .Steps .titr1 {
        margin-right: 25% !important
    }

    .HomePage .Steps .titr2, .HomePage .Steps .des, .HomePage .Steps .NiceButton {
        margin-right: 10% !important
    }
}

@media screen and (max-width: 768px) {
    .HomePage .Steps {
        flex-direction: column !important
    }

    .HomePage .Steps .mobile {
        display: flex !important
    }

    .HomePage .Steps .desktop {
        width: 100%;
        display: none !important
    }

    .HomePage .Steps .titr1 {
        margin-right: 0 !important
    }

    .HomePage .Steps .titr2 {
        font-size: 24px;
        margin-bottom: 40px !important;
        margin-right: 0 !important
    }

    .HomePage .Steps .des {
        width: 80%;
        margin-top: 25px !important;
        font-weight: 400;
        max-width: 365px;
        margin-right: 0 !important
    }

    .HomePage .Steps .NiceButton {
        position: relative;
        max-width: 244px;
        margin-right: 0 !important
    }

    .HomePage .Steps .NiceButton button, .HomePage .Steps .NiceButton a {
        background: inherit;
        border-radius: 24px;
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 30px;
        text-align: center;
        color: #3d3d3d;
        border: 2px solid #3d3d3d;
        z-index: 1
    }

    .HomePage .Steps .NiceButton div {
        position: absolute;
        height: 64px;
        background: #16d8a4;
        border-radius: 24px;
        z-index: 0;
        top: 5px;
        left: 6px
    }

    .HomePage .Steps .stepImg {
        width: 100%;
        max-width: 238px
    }
}

.HomePage .Comments {
    position: relative
}

.HomePage .Comments .beforShadow {
    width: 156px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(270deg, #fafcfe, #fafcfe 67.71%, #fafcfe00);
    border-radius: 32px 0 0 32px;
    z-index: 10
}

.HomePage .Comments .afterShadow {
    width: 156px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(270deg, #fafcfe, #fafcfe 67.71%, #fafcfe00);
    border-radius: 32px 0 0 32px;
    transform: rotate(180deg);
    z-index: 10
}

.HomePage .Comments .HomePageSwiper {
    padding: 100px 0;
    position: relative
}

.HomePage .Comments .HomePageSwiper .swiper-slide-active {
    transform: scale(1.3) !important;
    z-index: 2;
    margin-left: -60px !important;
    animation: fadeIn ease .8s;
    -webkit-animation: fadeIn ease .8s;
    -moz-animation: fadeIn ease .8s;
    -o-animation: fadeIn ease .8s;
    -ms-animation: fadeIn ease .8s;
    display: flex;
    justify-content: center;
    align-items: center
}

.HomePage .Comments .HomePageSwiper .swiper-slide-active .item {
    max-width: 250px;
    min-width: 230px;
    background: #00569f;
    box-shadow: 2px 20px 32px 1px #00569f29;
    padding: 4px !important
}

.HomePage .Comments .HomePageSwiper .swiper-slide-active .item .whiteDiv {
    background-color: #fff;
    border-radius: 40px;
    padding: 20px 0;
    border-bottom: 10px solid #003a6c;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.HomePage .Comments .HomePageSwiper .swiper-slide-active .item .play {
    display: flex !important
}

.HomePage .Comments .HomePageSwiper .swiper-slide-active .item .play button {
    background: none;
    border: none
}

.HomePage .Comments .HomePageSwiper .swiper-slide-active .testimonial {
    display: flex !important;
    position: absolute;
    width: 100%
}

@media screen and (max-width: 768px) {
    .HomePage .Comments .HomePageSwiper .swiper-slide-active .item {
        width: 240px !important
    }
}

.HomePage .Comments .HomePageSwiper .item {
    background: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 40px;
    min-width: 250px
}

.HomePage .Comments .HomePageSwiper .item .whiteDiv {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.HomePage .Comments .HomePageSwiper .item .profile {
    border: 4px solid #f2f3f6;
    border-radius: 100%
}

.HomePage .Comments .HomePageSwiper .item .shopname {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #3d3d3d
}

.HomePage .Comments .HomePageSwiper .item .detail {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d
}

.HomePage .Comments .titletitr2 {
    background-size: contain;
    width: fit-content;
    background-position: center
}

.HomePage .Comments .CommentVideo .modal-content {
    background-color: #3d3d3d
}

.HomePage .Comments .CommentVideo .modal-content .modal-header {
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.HomePage .Comments .CommentVideo .modal-content .modal-header .modal-title {
    font-size: 20px;
    font-weight: 500;
    color: #fff
}

.HomePage .Comments .CommentVideo .modal-content .modal-body iframe {
    border-radius: 10px;
    height: 250px
}

.HomePage .Comments .CommentVideo .modal-content .modal-footer {
    border: none
}

@media screen and (max-width: 992px) {
    .HomePage .Comments .beforShadow, .HomePage .Comments .afterShadow {
        width: 15%
    }
}

@media screen and (max-width: 768px) {
    .HomePage .Comments {
        width: 100% !important
    }

    .HomePage .Comments .beforShadow, .HomePage .Comments .afterShadow {
        width: 10%
    }
}

@media screen and (max-width: 480px) {
    .HomePage .Comments .beforShadow, .HomePage .Comments .afterShadow {
        display: none
    }

    .HomePage .Comments .modal-body iframe {
        height: auto !important;
        width: auto !important
    }
}

@media screen and (max-width: 768px) {
    .HomePage .titletitr2 {
        font-size: 24px
    }
}

@media screen and (max-width: 768px) {
    .OrganPage .HeroSection .Right {
        background-size: contain;
        background-position: right
    }

    .OrganPage .HeroSection .Left {
        margin-top: 0
    }
}

.MultiSelect {
    direction: rtl
}

.MultiSelect .collapsing {
    width: 100% !important
}

.MultiSelect .OpenButton {
    background: transparent;
    border: none;
    color: #8b8b8b;
    font-size: 13px;
    font-weight: 400
}

.MultiSelect .collapsed {
    border-radius: 16px
}

.MultiSelect .collapsed .Arrow {
    transition: transform .3s ease;
    transform: rotate(180deg)
}

.MultiSelect .Arrow {
    width: 12px;
    height: 12px;
    transform: none;
    transition: transform .3s ease
}

.MultiSelect .rotated {
    transform: rotate(360deg)
}

.MultiSelect .preDiv {
    background: #f7f7f7;
    border-bottom: 1px solid #e4e4e4
}

.MultiSelect .preDiv .selectAll {
    background: inherit;
    border: none
}

.MultiSelect .preDiv .Search {
    background: inherit;
    border: none;
    font-size: 12px
}

.MultiSelect .preDiv .Search :focus {
    outline: none;
    border: none
}

.MultiSelect .preDiv input:focus {
    outline: none;
    border: none
}

.MultiSelect .Tag {
    background: #f7f7f7;
    border: 1px solid #e4e4e4;
    border-radius: 0 0 8px 8px;
    flex-wrap: wrap
}

.MultiSelect .Tag button {
    background: #e4e4e4;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.MultiSelect .Items {
    max-height: 280px;
    overflow-y: scroll;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.MultiSelect .Items::-webkit-scrollbar {
    width: 0px
}

.MultiSelect .Items::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.MultiSelect .Items::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.MultiSelect .Items::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.MultiSelect .Items {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;
    text-align: right;
    color: #3d3d3d
}

.MultiSelect .Items .checkBox {
    width: 28px;
    height: 28px;
    background: #fff;
    border: 1px solid #8b8b8b;
    border-radius: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.MultiSelect .Items .checkBox:checked {
    background: #1e88e5;
    background-image: url(../images/Multiselect/tick.svg);
    background-repeat: no-repeat;
    background-size: 40% 40%;
    background-position: center;
    border: none
}

.MultiSelect .Items::-webkit-scrollbar {
    width: 5px
}

.MultiSelect .Items::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

.MultiSelect .Items::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 10px;
    height: 80%
}

.MultiSelect .Items::-webkit-scrollbar-thumb:hover {
    background-color: #90a4ae
}

.MultiSelect .DetailDiv {
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-top: 0
}

.paymentResultPage {
    background-color: #00579f
}

.paymentResultPage:after {
    transform: rotate(180deg);
    content: "" !important;
    width: 20% !important;
    height: 65% !important;
    position: absolute !important;
    background-image: url(../images/BeforVector.svg) !important;
    background-size: 65% !important;
    background-repeat: no-repeat !important;
    background-position: right !important;
    z-index: 0 !important;
    left: 0 !important
}

@media screen and (max-width: 768px) {
    .paymentResultPage:after {
        width: 50% !important
    }
}

@media screen and (max-width: 480px) {
    .paymentResultPage:after {
        display: none !important
    }
}

.paymentResultPage:before {
    content: "";
    width: 20%;
    height: 65%;
    position: absolute;
    background-image: url(../images/BeforVector.svg);
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: right;
    z-index: 0;
    right: 0
}

@media screen and (max-width: 768px) {
    .paymentResultPage:before {
        width: 50% !important
    }
}

@media screen and (max-width: 480px) {
    .paymentResultPage:before {
        display: none !important
    }
}

.paymentResultPage .MainDiv {
    border-radius: 24px;
    background-color: #57cb97;
    direction: rtl;
    max-width: 400px;
    border: 1px solid #f2f3f6
}

.paymentResultPage .MainDiv img {
    width: 80px
}

.paymentResultPage .MainDiv .title {
    font-size: 20px;
    font-weight: 400;
    color: #fff
}

.paymentResultPage .MainDiv .t1 {
    font-size: 18px;
    font-weight: 400;
    color: #fff
}

.paymentResultPage .MainDiv .t2 {
    font-size: 18px;
    font-weight: 600;
    color: #313131
}

.paymentResultPage .MainDiv .toman {
    width: 20px
}

.paymentResultPage .error {
    background-color: #ffcdd2
}

.paymentResultPage .error .title {
    color: #b71c1c
}

.paymentResultPage .error .t1 {
    color: #8b8b8b
}

.paymentResultPage .cta {
    border: none;
    background-color: #028bff;
    border-radius: 24px;
    color: #fff;
    font-weight: 300;
    font-size: 16px
}

.paymentResultPage .information {
    background-color: #fafcfe;
    border-radius: 12px;
    font-size: 14px;
    border: 1px dashed rgb(94, 90, 90);
    color: #ff6f5e;
    max-width: 310px
}

.UploaderComponent {
    min-width: 300px;
    background: transparent;
    border-radius: 12px;
    direction: rtl;
    cursor: pointer
}

.UploaderComponent .filepond--drip {
    border: 1px dashed #028bff;
    background: #fff;
    opacity: 1
}

.UploaderComponent .filepond--drop-label label {
    color: #028bff;
    font-size: 14px
}

.vue-dropzone {
    line-height: 10px;
    background: inherit !important;
    border: none !important;
    border-radius: 24px !important
}

.vue-dropzone :hover {
    background-color: inherit
}

.vue-dropzone .dz-message {
    font-style: normal;
    display: flex !important;
    flex-direction: column;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.vue-dropzone .dz-preview {
    min-width: 120px;
    min-height: 120px;
    border-radius: 24px;
    padding: 15px
}

.vue-dropzone .dz-preview .dz-remove {
    cursor: pointer !important;
    opacity: 1;
    right: 80% !important;
    bottom: 50% !important;
    background-color: #ffcdd2 !important;
    border: 1px dashed red !important;
    border-radius: 50%;
    position: relative;
    padding: 0;
    margin: 20px
}

.vue-dropzone .dz-preview .trash {
    width: 20px;
    height: 20px
}

.vue-dropzone .dz-preview .StatusText {
    display: flex !important;
    font-size: 14px;
    line-height: 24px;
    margin-top: 20px !important;
    direction: rtl;
    color: #01579b
}

.vue-dropzone .previewError {
    background-color: #ffcdd2 !important
}

.vue-dropzone .previewError .progress {
    background-color: #ef5350
}

.vue-dropzone .previewError {
    pointer-events: visible
}

.vue-dropzone .previewSuccess {
    background-color: #90caf9 !important
}

.vue-dropzone .previewSuccess .progress, .vue-dropzone .previewSuccess .progress-bar {
    background-color: #26a69a;
    display: none !important
}

.vue-dropzone .previewSuccess .footer-dz {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

.vue-dropzone .previewSuccess .footer-dz .tick {
    display: flex !important;
    max-width: 40px
}

.vue-dropzone .previewSuccess .footer-dz .dz-remove, .vue-dropzone .previewSuccess .size {
    display: none !important
}

.vue-dropzone .file-details .size {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    direction: ltr
}

.vue-dropzone .file-details .size strong {
    margin: 0 4px
}

.vue-dropzone .onError {
    border-radius: 12px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    font-size: 12px
}

.vue-dropzone .onError .title {
    color: #3d3d3d
}

.vue-dropzone .onError li {
    color: #3d3d3d;
    border: 1px solid #ff6f5e;
    border-radius: 12px;
    background-color: #ffebee;
    margin: 10px 0
}

.dz-max-files-reached {
    pointer-events: none;
    cursor: default
}

.dz-max-files-reached .add {
    display: none
}

.vue-dropzone:hover {
    background-color: inherit
}

.form-builder {
    direction: rtl
}

.form-builder ._row {
    border-bottom: 1px solid rgba(0, 87, 159, .15);
    padding: 2rem;
    margin: 0
}

.form-builder ._row:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0
}

.form-builder ._section-title {
    position: sticky;
    top: 25px
}

.form-builder ._range-min-max {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -8px;
    font-size: 12px;
    width: 100%
}

.form-builder ._form-builder-checks {
    display: flex;
    flex-wrap: wrap
}

.form-builder ._form-builder-checks ._check-itself {
    box-shadow: 0 1px 1px #00579f17;
    border: 1px solid rgba(0, 87, 159, .15);
    padding: .4em .6em .4em 1em;
    margin: 0 0 .5em .5em;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 300;
    color: #3d3d3d
}

.form-builder ._form-builder-checks ._check-itself:before {
    content: "";
    min-width: 17px;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(0, 87, 159, .15);
    margin-left: .5em
}

.form-builder ._form-builder-checks ._check-itself._box {
    border-radius: .5em
}

.form-builder ._form-builder-checks ._check-itself._box:before {
    border-radius: .1em
}

.form-builder ._form-builder-checks ._check-itself._radio {
    border-radius: 50px
}

.form-builder ._form-builder-checks ._check-itself._radio:before {
    border-radius: 100%
}

.form-builder ._form-builder-checks input {
    display: none
}

.form-builder ._form-builder-checks input:checked + ._check-itself {
    border-color: #028bff;
    color: #028bff;
    font-weight: 400
}

.form-builder ._form-builder-checks input:checked + ._check-itself:before {
    background-image: url(../images/tick.svg);
    background-repeat: no-repeat;
    background-size: 60% 60%;
    background-position: center;
    border: none;
    background-color: #028bff
}

.form-builder .Form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.form-builder .Form .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

.form-builder .Form .main .n-opt {
    margin: 30px 0 !important;
    font-weight: 600;
    font-size: 16px
}

.form-builder .Form .main .aic {
    align-items: center;
    justify-content: center
}

.form-builder .Form .main .aic .price-style {
    margin: 0 20px 0 0
}

.form-builder .Form ._section-title {
    font-weight: 500;
    color: #8b8b8b
}

.form-builder .Form .SubmitButton {
    background-color: #028bff;
    border: none;
    outline: none;
    color: #fff;
    font-weight: 400;
    border-radius: 24px;
    margin-top: 20px
}

.FormBuilderComponent .orgDiv {
    margin-top: -20px;
    background: #e1f5fe;
    border-radius: 24px;
    border-bottom: 7px solid #81d4fa
}

.FormBuilderComponent .orgDiv .title {
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #0277bd
}

.FormBuilderComponent .orgDiv button {
    background: #81d4fa;
    border: none;
    border-radius: 24px;
    font-weight: 400;
    color: #01579b
}

.FormBuilderComponent .completedDiv {
    margin-top: -20px;
    background: #fafcfe;
    border-radius: 24px;
    border: 1px solid #dfe1f3;
    border-bottom: 7px solid #16d8a4
}

.FormBuilderComponent .completedDiv .title {
    direction: rtl;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.FormBuilderComponent .completedDiv button {
    background: #03a9f4;
    border: none;
    border-radius: 24px;
    font-weight: 400;
    color: #fff
}

.FormBuilderComponent .modal-dialog {
    max-width: 1000px;
    margin: 5vw auto
}

.FormBuilderComponent .modal-dialog .modal-content {
    border-radius: 24px;
    background-color: #fafcfe;
    border: 8px solid rgba(255, 255, 255, .32);
    min-width: 600px
}

@media screen and (max-width: 768px) {
    .FormBuilderComponent .modal-dialog {
        width: 100% !important;
        margin: 0 0 40px !important
    }

    .FormBuilderComponent .modal-dialog .modal-content {
        border-radius: 24px;
        background-color: #fafcfe;
        border: 8px solid rgba(255, 255, 255, .32);
        min-width: 100%
    }
}

.SignContract {
    direction: rtl
}

@media screen and (max-width: 480px) {
    .SignContract .main {
        border: none
    }
}

.SignContract .main .electronic {
    background: #edf7ff;
    border-radius: 24px;
    position: relative
}

@media screen and (min-width: 1360px) {
    .SignContract .main .electronic {
        min-width: 565px
    }
}

@media screen and (min-width: 1400px) {
    .SignContract .main .electronic {
        min-width: 680px
    }
}

@media screen and (max-width: 768px) {
    .SignContract .main .electronic {
        min-width: 355px
    }
}

.SignContract .main .electronic .titleDiv {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 16px;
    position: absolute;
    top: 8px;
    width: 97.5%;
    padding: 15px 25px !important
}

.SignContract .main .electronic .titleDiv p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #8b8b8b
}

.SignContract .main .electronic .titleDiv .doted {
    background-image: url(../images/neworder/bank_guarantee/new/SignContract/dot.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 26%;
    height: 4px
}

.SignContract .main .electronic .titleDiv .status {
    background: #e4e4e4;
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

@media screen and (max-width: 768px) {
    .SignContract .main .electronic .titleDiv {
        width: 96%;
        padding: 15px 20px !important
    }

    .SignContract .main .electronic .titleDiv p {
        font-size: 13px
    }

    .SignContract .main .electronic .titleDiv .doted {
        display: none !important
    }

    .SignContract .main .electronic .titleDiv .status {
        padding: 10px !important
    }
}

.SignContract .main .electronic .up {
    background: #fff;
    border: 8px solid #edf7ff;
    border-radius: 24px;
    min-height: 90px
}

.SignContract .main .electronic .up .mainImg {
    background: #f7f7f7;
    border-radius: 12px;
    padding: 5px
}

.SignContract .main .electronic .up .div1 {
    margin-top: 91px
}

.SignContract .main .electronic .up .div1 p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.SignContract .main .electronic .up .div1 .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.SignContract .main .electronic .up .div1 button {
    background: #fff;
    border: 1px solid #028bff;
    border-radius: 24px;
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    color: #028bff
}

.SignContract .main .electronic .up .divider {
    background: #edf7ff;
    border-radius: 24px;
    height: 1px;
    margin: auto
}

.SignContract .main .electronic .up .div2 button {
    background: #028bff;
    border: 1px solid #028bff;
    box-shadow: 3px 5px 24px 1px #028bff1f;
    border-radius: 24px;
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    min-width: 160px;
    color: #fff;
    margin-right: 0 !important
}

.SignContract .main .electronic .up .div2 .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.SignContract .main .electronic .up .div2 .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.SignContract .main .electronic .up .div2 .t3 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.SignContract .main .electronic .down {
    justify-content: space-between !important;
    padding: 15px 30px !important
}

@media screen and (max-width: 768px) {
    .SignContract .main .electronic .down {
        flex-direction: column !important
    }
}

.SignContract .main .electronic .down .div1 {
    height: 100%;
    align-items: flex-start;
    display: flex;
    justify-content: start
}

.SignContract .main .electronic .down .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

@media screen and (max-width: 768px) {
    .SignContract .main .electronic .down .t1 {
        margin: 10px !important
    }
}

.SignContract .main .electronic .down .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

@media screen and (max-width: 768px) {
    .SignContract .main .electronic .down .t2 {
        margin: 0 10px 20px 0 !important
    }
}

.SignContract .main .electronic .down button {
    background: #fff;
    border: 1px solid #3d3d3d;
    border-radius: 24px;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d;
    min-width: 130px
}

@media screen and (max-width: 992px) {
    .SignContract .main .electronic .down .dots {
        display: none !important
    }
}

.SignContract .main .verified .titleDiv .status {
    background: #f0fdfa;
    border: 1px solid #baf8e7;
    border-radius: 24px;
    color: #16d8a4
}

.SignContract .main .pending .titleDiv .status {
    background: #e4e4e4;
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.swal2-container {
    direction: rtl !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.swal2-container .swal2-popup {
    border-radius: 24px;
    border: 2px dashed #7d99c1;
    font-weight: 400;
    font-size: 16px
}

.swal2-container .swal2-popup .swal2-title {
    font-size: 20px
}

.swal2-container .swal2-popup .swal2-html-container {
    font-weight: 300;
    font-size: 16px;
    text-align: center;
    margin: 10px 0 0 !important;
    padding: 5px 20px !important;
    color: #8b8b8b
}

.swal2-container .swal2-popup button {
    border-radius: 8px
}

.swal2-container .swal2-popup button:focus {
    outline: none;
    border: none
}

.swal2-container .swal2-popup button:hover {
    outline: none !important
}

.swal2-container .swal2-popup .swal2-confirm {
    display: none !important
}

.swal2-container .swal2-popup .swal2-footer {
    margin: 0 !important
}

.SendChequePost {
    max-width: 400px;
    min-width: 340px;
    direction: rtl;
    background: #f2f3f6;
    border-radius: 24px
}

.SendChequePost .title .divider {
    width: 1px;
    height: 80%;
    background-color: #e4e4e4
}

.SendChequePost .title p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.SendChequePost .description {
    background-image: url(../images/neworder/bank_guarantee/new/SendChequePost/map.svg)
}

.SendChequePost .description .div1 .location {
    background: #f7f7f7;
    border-radius: 16px;
    padding: 10px
}

.SendChequePost .description .div2 {
    align-items: flex-start;
    justify-content: space-between;
    height: 100%
}

.SendChequePost .description .div2 button {
    background-color: #3d3d3d;
    box-shadow: -2px 7px 11px 1px #3d3d3d29;
    border-radius: 16px;
    border: none;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #f2f3f6
}

.SendChequePost .description .div2 p {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.ghestacardRecived .up {
    direction: rtl;
    max-width: 366px;
    height: 224px;
    border-radius: 24px
}

.ghestacardRecived .up .right {
    max-width: 32px;
    height: 224px;
    background-color: #8a90d2;
    border-radius: 0 24px 24px 0
}

.ghestacardRecived .up .left {
    max-width: 334px;
    height: 224px;
    background-color: #dfe1f3;
    border-radius: 24px 0 0 24px
}

.ghestacardRecived .up .left .div1 {
    justify-content: space-around
}

.ghestacardRecived .up .left .div1 .img1 {
    width: 108px;
    height: 24px
}

.ghestacardRecived .up .left .div1 .img2 {
    width: 45.17px;
    height: 32px
}

.ghestacardRecived .up .left .div2 {
    justify-content: space-around
}

.ghestacardRecived .up .left .div2 input {
    width: 86px;
    height: 48px;
    background: #fff;
    border: 1px dashed #30357c;
    border-radius: 24px;
    text-align: center
}

.ghestacardRecived .up .left .div2 input::placeholder {
    color: #30357c;
    text-align: center
}

.ghestacardRecived .up .left .div2 pre {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    align-items: center;
    text-align: center;
    color: #30357c
}

.ghestacardRecived .up .left .div3 {
    justify-content: space-around;
    direction: rtl
}

.ghestacardRecived .up .left .div3 .lite {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.ghestacardRecived .up .left .div3 .bold {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.ghestacardRecived .down {
    max-width: 334px;
    margin-top: -25px;
    background: #ffffff3d;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    border-radius: 24px;
    direction: rtl
}

.ghestacardRecived .down .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.ghestacardRecived .down .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.ghestacardRecived .down img {
    width: 18px;
    height: 14px
}

.loaderSpinner {
    display: flex;
    position: absolute;
    opacity: 1;
    top: 50px
}

.ayandehPanelPage .AyandehAdminDetail {
    position: relative
}

.ayandehPanelPage .AyandehAdminDetail .Tabs {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1
}

.ayandehPanelPage .AyandehAdminDetail .Tabs .gds-btn-check {
    opacity: 0
}

.ayandehPanelPage .AyandehAdminDetail .Tabs .labels {
    background: #f7f7f7;
    border-radius: 0 0 8px 8px;
    border: none;
    width: 160px
}

.ayandehPanelPage .AyandehAdminDetail .Tabs .labels p {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.ayandehPanelPage .AyandehAdminDetail .Tabs .labels img {
    padding: 5px;
    background: #fff;
    border-radius: 12px;
    width: 32px;
    height: 32px
}

.ayandehPanelPage .AyandehAdminDetail .Tabs .checked {
    background: #edf7ff;
    border: 1px solid #dfe1f3;
    border-top: 0
}

.ayandehPanelPage .AyandehAdminDetail .Tabs .checked p {
    color: #028bff
}

.ayandehPanelPage .AyandehAdminDetail .Detail .UserInfoCard {
    border-radius: 24px;
    min-width: 366px;
    max-width: 380px;
    background-image: url(../images/Ayandeh/UserDetail/userinfo/map.svg);
    box-shadow: inset 0 0 48px 40px #fff;
    border: 1px solid #f2f3f6
}

.ayandehPanelPage .AyandehAdminDetail .Detail .UserInfoCard .item .dot5 {
    height: 70px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .UserInfoCard .item .dot7 {
    height: 100px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .UserInfoCard .item .dot2 {
    height: 20px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .UserInfoCard .item .title {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.ayandehPanelPage .AyandehAdminDetail .Detail .UserInfoCard .item .des {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    color: #3d3d3d
}

.ayandehPanelPage .AyandehAdminDetail .Detail .UserInfoCard .up {
    background: #fff;
    border: 1px solid #f2f3f6;
    border-bottom: 2px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #0000000a;
    border-radius: 24px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .UserInfoCard .up .divider {
    background: #f2f3f6;
    height: 1px
}

@media screen and (max-width: 480px) {
    .ayandehPanelPage .AyandehAdminDetail .Detail .UserInfoCard {
        width: 100%;
        max-width: 100%;
        min-width: 100%
    }
}

.ayandehPanelPage .AyandehAdminDetail .Detail .OrderInfoCard {
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    border-radius: 24px;
    min-width: 366px;
    max-width: 380px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .OrderInfoCard .top p {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #30357c
}

.ayandehPanelPage .AyandehAdminDetail .Detail .OrderInfoCard .white {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: 0 -3px 40px #0000000a;
    border-radius: 24px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .OrderInfoCard .white .uper {
    background: #fff;
    border-bottom: 1px solid #f2f3f6;
    width: 102%;
    border-radius: 24px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .OrderInfoCard .white .uper p {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.ayandehPanelPage .AyandehAdminDetail .Detail .OrderInfoCard .white .zigzag {
    margin-top: -6px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .OrderInfoCard .white .under .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.ayandehPanelPage .AyandehAdminDetail .Detail .OrderInfoCard .white .under .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #3d3d3d
}

.ayandehPanelPage .AyandehAdminDetail .Detail .OrderInfoCard .white .under .toman {
    margin-top: -5px
}

@media screen and (max-width: 480px) {
    .ayandehPanelPage .AyandehAdminDetail .Detail .OrderInfoCard {
        width: 100%;
        max-width: 100%;
        min-width: 100%
    }
}

.ayandehPanelPage .AyandehAdminDetail .Detail .InquiriesCard {
    flex-wrap: wrap
}

.ayandehPanelPage .AyandehAdminDetail .Detail .InquiriesCard .item {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: 0 -3px 24px 1px #00000008;
    border-radius: 24px;
    width: 480px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .InquiriesCard .item .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.ayandehPanelPage .AyandehAdminDetail .Detail .InquiriesCard .item .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #8b8b8b
}

.ayandehPanelPage .AyandehAdminDetail .Detail .InquiriesCard .item .yes {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #16d8a4
}

.ayandehPanelPage .AyandehAdminDetail .Detail .InquiriesCard .item .no {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #ff6f5e
}

.ayandehPanelPage .AyandehAdminDetail .Detail .FormsCard {
    flex-wrap: wrap
}

.ayandehPanelPage .AyandehAdminDetail .Detail .FormsCard .item {
    background: #f2f3f6;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    width: 480px;
    position: relative
}

.ayandehPanelPage .AyandehAdminDetail .Detail .FormsCard .item .corner {
    position: absolute;
    top: -1px;
    right: -2px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .FormsCard .item .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.ayandehPanelPage .AyandehAdminDetail .Detail .FormsCard .item .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

@media screen and (max-width: 480px) {
    .ayandehPanelPage .AyandehAdminDetail .Detail .FormsCard .item {
        max-width: 100%
    }
}

.ayandehPanelPage .AyandehAdminDetail .Detail .FormsCard .disable {
    opacity: .4
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard {
    flex-wrap: wrap
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item {
    width: 390px;
    height: 370px;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item .DocPreview {
    border-radius: 24px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item .zip {
    background: #fff;
    border-radius: 24px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item .zip button {
    border: none;
    border-radius: 24px;
    background-color: unset
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item .zip .des {
    height: fit-content;
    min-height: 85px;
    min-width: fit-content
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item .zip .des p {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item iframe {
    min-width: 1000px !important;
    min-height: 800px !important
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item .PdfButton {
    background-color: unset;
    border: none
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item .btmDes .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item .customerInfo .main {
    width: fit-content !important
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item .customerInfo .main .title {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item .customerInfo .main .des {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    color: #3d3d3d
}

@media screen and (max-width: 480px) {
    .ayandehPanelPage .AyandehAdminDetail .Detail .DocsCard .item {
        width: 100%;
        max-width: 100%;
        min-width: 100%
    }
}

.ayandehPanelPage .AyandehAdminDetail .Detail .download {
    background: #30357c;
    box-shadow: -7px 9px 16px 1px #16d8a43d;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #fff;
    padding: 5px 20px
}

.ayandehPanelPage .AyandehAdminDetail .Detail .download a {
    color: #fff
}

.badge-warning {
    background: #e99717;
    font-weight: 300
}

.badge-success {
    background: #16d8a4;
    font-weight: 300
}

.badge-danger {
    background: #ff6f5e !important;
    font-weight: 300
}

.badge-danger p {
    color: #fff !important
}

.badge-primary {
    background: #00569f;
    font-weight: 300
}

.badge-info {
    background: #028bff;
    font-weight: 300
}

.Landing_shops {
    direction: rtl
}

.Landing_shops .banner {
    background-image: url(../images/landings/shops/banner_background.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom
}

.Landing_shops .banner .coin {
    max-width: 100%;
    max-height: 100%
}

.Landing_shops .banner .t1 {
    font-style: normal;
    font-weight: 600;
    font-size: 47px;
    line-height: 68px;
    text-align: right;
    color: #3d3d3d
}

.Landing_shops .banner .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 44px;
    text-align: right;
    color: #f80
}

.Landing_shops .banner .t3 {
    font-style: normal;
    font-weight: 300;
    font-size: 19px;
    line-height: 32px;
    text-align: justify;
    color: #3d3d3d;
    max-width: 600px
}

.Landing_shops .banner .t4 {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 44px;
    text-align: right;
    color: #3d3d3d
}

.Landing_shops .banner b {
    font-weight: 600
}

.Landing_shops .banner .titr {
    position: relative
}

.Landing_shops .banner .titr .v {
    position: absolute;
    top: 0;
    padding-right: 125px
}

.Landing_shops .banner .titr .v svg {
    margin: auto
}

@media screen and (max-width: 1360px) {
    .Landing_shops .banner {
        flex-direction: column !important;
        background-image: url(../images/landings/shops/banner_background_mobile.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 100% -200%
    }

    .Landing_shops .banner div {
        align-items: center !important;
        justify-content: center !important
    }

    .Landing_shops .banner .t1 {
        font-size: 36px
    }

    .Landing_shops .banner .titr .v {
        margin-right: -105px;
        padding: 0
    }
}

@media screen and (max-width: 850px) {
    .Landing_shops .banner {
        background-position: 100% -7%
    }
}

@media screen and (max-width: 768px) {
    .Landing_shops .banner {
        background-position: 100% -7%
    }

    .Landing_shops .banner div {
        flex-direction: column;
        justify-content: center;
        align-items: self-start !important
    }

    .Landing_shops .banner .titr .v {
        margin-right: 35px
    }
}

.Landing_shops .divider {
    height: 1px;
    background: #e4e4e4;
    transform: rotate(-8deg)
}

.Landing_shops .sellersCards:before {
    content: "";
    width: 20%;
    height: 53%;
    position: absolute;
    background-image: url(../images/landings/shops/befor.svg);
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: right;
    z-index: 0;
    right: 0
}

@media screen and (max-width: 768px) {
    .Landing_shops .sellersCards:before {
        width: 50%
    }
}

@media screen and (max-width: 480px) {
    .Landing_shops .sellersCards:before {
        display: none !important
    }
}

.Landing_shops .sellersCards .titletitr1 {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    color: #c3c6e8
}

.Landing_shops .sellersCards .titletitr2 {
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 52px;
    text-align: center;
    color: #00569f;
    background-image: url(../images/HomePage/titr2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center
}

.Landing_shops .sellersCards .main {
    background: #f2f3f6;
    border-radius: 48px
}

@media screen and (max-width: 1600px) {
    .Landing_shops .sellersCards .main {
        z-index: 1
    }
}

.Landing_shops .sellersCards .vendorTab {
    border-radius: 48px;
    border: none;
    min-width: 140px;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.Landing_shops .sellersCards .vendorTab p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #c3c6e8
}

.Landing_shops .sellersCards .vendorTab button {
    border-radius: 48px;
    width: 80px;
    height: 80px;
    border: 1px solid #fafcfe;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    background-color: inherit
}

.Landing_shops .sellersCards .digital button {
    background-color: #fafcfe;
    background-image: url(../images/landings/shops/vendors/digital.svg)
}

.Landing_shops .sellersCards .digital .active {
    background-color: #ff6f5e;
    background-image: url(../images/landings/shops/vendors/digital_mobile.svg)
}

.Landing_shops .sellersCards .clothes button {
    background-color: #fafcfe;
    background-image: url(../images/landings/shops/vendors/clothes.svg)
}

.Landing_shops .sellersCards .clothes .active {
    background-color: #ff6f5e;
    background-image: url(../images/landings/shops/vendors/clothes_mobile.svg)
}

.Landing_shops .sellersCards .kitchen button {
    background-color: #fafcfe;
    background-image: url(../images/landings/shops/vendors/kitchen.svg)
}

.Landing_shops .sellersCards .kitchen .active {
    background-color: #ff6f5e;
    background-image: url(../images/landings/shops/vendors/kitchen_mobile.svg)
}

.Landing_shops .sellersCards .gold button {
    background-color: #fafcfe;
    background-image: url(../images/landings/shops/vendors/gold.svg)
}

.Landing_shops .sellersCards .gold .active {
    background-color: #ff6f5e;
    background-image: url(../images/landings/shops/vendors/gold_mobile.svg)
}

.Landing_shops .sellersCards .tourism button {
    background-color: #fafcfe;
    background-image: url(../images/landings/shops/vendors/tourism.svg)
}

.Landing_shops .sellersCards .tourism .active {
    background-color: #ff6f5e;
    background-image: url(../images/landings/shops/vendors/tourism_mobile.svg)
}

.Landing_shops .sellersCards .health button {
    background-color: #fafcfe;
    background-image: url(../images/landings/shops/vendors/health.svg)
}

.Landing_shops .sellersCards .health .active {
    background-color: #ff6f5e;
    background-image: url(../images/landings/shops/vendors/health_mobile.svg)
}

.Landing_shops .sellersCards .tools button {
    background-color: #fafcfe;
    background-image: url(../images/landings/shops/vendors/tools.svg)
}

.Landing_shops .sellersCards .tools .active {
    background-color: #ff6f5e;
    background-image: url(../images/landings/shops/vendors/tools_mobile.svg)
}

.Landing_shops .sellersCards .others button {
    background-color: #fafcfe;
    background-image: url(../images/landings/shops/vendors/others.svg)
}

.Landing_shops .sellersCards .others .active {
    background-color: #ff6f5e;
    background-image: url(../images/landings/shops/vendors/others_mobile.svg)
}

.Landing_shops .sellersCards .nav-tabs {
    border-bottom: 1px solid #dfe1f3;
    padding-bottom: 25px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.Landing_shops .sellersCards .nav-tabs::-webkit-scrollbar {
    width: 0px
}

.Landing_shops .sellersCards .nav-tabs::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.Landing_shops .sellersCards .nav-tabs::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.Landing_shops .sellersCards .nav-tabs::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

.Landing_shops .sellersCards .nav-tabs {
    height: fit-content;
    justify-content: start;
    align-items: start;
    margin-top: -55px
}

@media screen and (max-width: 1360px) {
    .Landing_shops .sellersCards .nav-tabs {
        border: none
    }
}

.Landing_shops .sellersCards .nav-tabs::-webkit-scrollbar {
    display: none
}

.Landing_shops .sellersCards .vendors {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap
}

.Landing_shops .sellersCards .vendors .sellerGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard {
    position: relative;
    max-width: 308px;
    max-height: 308px;
    min-width: 208px;
    min-height: 208px;
    display: flex
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .seller {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 34px;
    margin-top: 25px;
    background-color: #fff;
    height: 100%;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    min-width: 208px;
    min-height: 208px
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .seller .sellerdivlogo {
    background: #fff;
    border: 6px solid #fafcfe;
    border-radius: 50%;
    margin-top: -30px;
    top: 0;
    position: absolute;
    width: 70px;
    height: 70px
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .seller .sellerdivlogo .sellerImg1 {
    aspect-ratio: 1.1;
    object-fit: contain
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .seller .sellerText1 {
    font-size: 18px;
    font-weight: 600;
    text-align: center
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .seller .sellerurltext {
    text-align: center;
    font-size: 13px;
    font-weight: 500
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .seller .sellerdetaildiv .sellerdivimg {
    background-color: #30357c;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    height: 24px
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .seller .sellerdetaildiv .sellerdivimg img {
    width: 16px;
    height: 16px;
    aspect-ratio: 1.1
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .seller .sellerdetaildiv .sellerdivcategory {
    background: #dfe1f3;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    height: 100%
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .seller .sellerdetaildiv .sellerdivcategory .sellerText2 {
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    color: #30357c
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .sellerHover {
    display: none
}

@media screen and (max-width: 480px) {
    .Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .sellerHover {
        display: none
    }
}

@media screen and (max-width: 568px) {
    .Landing_shops .sellersCards .vendors .sellerGroup .sellerCard {
        min-width: unset;
        width: 160px;
        margin: 15px 3px !important
    }

    .Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .seller {
        min-width: unset;
        width: 160px
    }

    .Landing_shops .sellersCards .vendors .sellerGroup .sellerCard .seller .sellerText1 {
        font-size: 15px
    }
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard:hover {
    min-width: 160px;
    min-height: 208px
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard:hover .sellerHover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 24px;
    min-width: 160px;
    min-height: 208px
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard:hover .sellerHoverButton {
    background: #16d8a4;
    border-radius: 2vw;
    font-style: normal;
    font-size: 16px;
    line-height: 40px;
    display: flex;
    justify-content: center;
    text-align: center;
    color: #fff;
    border-style: none;
    min-height: 40px
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard:hover .seller {
    background: #ffffff29;
    filter: blur(6px);
    border-radius: 24px;
    min-width: 160px;
    min-height: 208px
}

.Landing_shops .sellersCards .vendors .sellerGroup .sellerCard:hover img {
    width: 40px
}

.Landing_shops .sellersCards .vendors .sellerGroup .AllSellers {
    position: relative;
    max-width: 308px;
    max-height: 308px;
    min-width: 208px;
    min-height: 208px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    border-radius: 34px;
    margin-top: 40px !important;
    background-color: #fff;
    height: 100%;
    box-shadow: -14px 9px 40px 1px #30357c0a
}

.Landing_shops .sellersCards .vendors .sellerGroup .AllSellers p {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #8b8b8b
}

@media screen and (max-width: 568px) {
    .Landing_shops .sellersCards .vendors .sellerGroup .AllSellers {
        min-width: unset;
        width: 160px;
        margin: 25px 3px 0 0 !important
    }
}

.Landing_shops .Features {
    flex-wrap: wrap
}

.Landing_shops .Features .titr1 {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    color: #c3c6e8
}

.Landing_shops .Features .titr2 {
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 52px;
    text-align: center;
    color: #00569f;
    background-image: url(../images/HomePage/titr2.svg);
    background-repeat: no-repeat;
    background-size: 100%
}

.Landing_shops .Features .FeatureItem {
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    justify-content: start;
    align-items: flex-start;
    min-width: 344px;
    min-height: 344px
}

.Landing_shops .Features .FeatureItem .FeatureItemDeatil {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start
}

.Landing_shops .Features .FeatureItem .FeatureItemDeatil .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 44px;
    text-align: right;
    color: #00569f
}

.Landing_shops .Features .FeatureItem .FeatureItemDeatil .t3 {
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    text-align: justify;
    color: #8b8b8b
}

.Landing_shops .Features .collapsed {
    justify-content: start;
    align-items: center;
    padding: 0 !important;
    width: fit-content;
    min-width: fit-content
}

.Landing_shops .Features .collapsed .t1 {
    display: flex !important;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.Landing_shops .Features .collapsed:hover {
    position: relative;
    filter: blur(.6px);
    background-color: transparent
}

.Landing_shops .Features .collapsed:hover .hover {
    display: flex !important;
    position: absolute;
    bottom: 0;
    right: 0
}

@media screen and (max-width: 768px) {
    .Landing_shops .Features .titr2 {
        font-size: 24px
    }

    .Landing_shops .Features .FeatureItemDiv {
        flex-wrap: nowrap;
        flex-direction: column !important
    }

    .Landing_shops .Features .FeatureItemDiv .FeatureItem {
        height: fit-content;
        width: 90%;
        min-width: 334px;
        max-width: 424px
    }

    .Landing_shops .Features .FeatureItemDiv .FeatureItem .t1 {
        transform: none;
        writing-mode: unset
    }

    .Landing_shops .Features .FeatureItemDiv .FeatureItem .FeatureItemDeatil {
        justify-content: space-around !important
    }

    .Landing_shops .Features .FeatureItemDiv .FeatureItem .FeatureItemDeatil .t2 {
        font-size: 17px
    }

    .Landing_shops .Features .FeatureItemDiv .FeatureItem .FeatureItemDeatil .divider {
        display: none
    }

    .Landing_shops .Features .FeatureItemDiv .collapsed {
        height: fit-content
    }

    .Landing_shops .Features .FeatureItemDiv .collapsed .ItemImg {
        position: unset
    }

    .Landing_shops .Features .FeatureItemDiv .collapsed .t2 {
        padding-right: 0 !important
    }
}

.Landing_shops .titletitr2 {
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 52px;
    text-align: center;
    color: #00569f;
    background-image: url(../images/HomePage/titr2.svg);
    background-repeat: no-repeat;
    background-size: 100%
}

.Landing_shops .Comments {
    position: relative
}

.Landing_shops .Comments .beforShadow {
    width: 156px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(270deg, #fafcfe, #fafcfe 67.71%, #fafcfe00);
    border-radius: 32px 0 0 32px;
    z-index: 10
}

.Landing_shops .Comments .afterShadow {
    width: 156px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(270deg, #fafcfe, #fafcfe 67.71%, #fafcfe00);
    border-radius: 32px 0 0 32px;
    transform: rotate(180deg);
    z-index: 10
}

.Landing_shops .Comments .HomePageSwiper {
    padding: 100px 0;
    position: relative
}

.Landing_shops .Comments .HomePageSwiper .swiper-slide-active {
    transform: scale(1.3) !important;
    z-index: 2;
    margin-left: -60px !important;
    animation: fadeIn ease .8s;
    -webkit-animation: fadeIn ease .8s;
    -moz-animation: fadeIn ease .8s;
    -o-animation: fadeIn ease .8s;
    -ms-animation: fadeIn ease .8s;
    display: flex;
    justify-content: center;
    align-items: center
}

.Landing_shops .Comments .HomePageSwiper .swiper-slide-active .item {
    max-width: 250px;
    min-width: 230px;
    background: #00569f;
    box-shadow: 2px 20px 32px 1px #00569f29;
    padding: 4px !important
}

.Landing_shops .Comments .HomePageSwiper .swiper-slide-active .item .whiteDiv {
    background-color: #fff;
    border-radius: 40px;
    padding: 20px 0;
    border-bottom: 10px solid #003a6c;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.Landing_shops .Comments .HomePageSwiper .swiper-slide-active .item .play {
    display: flex !important
}

.Landing_shops .Comments .HomePageSwiper .swiper-slide-active .item .play button {
    background: none;
    border: none
}

.Landing_shops .Comments .HomePageSwiper .swiper-slide-active .testimonial {
    display: flex !important;
    position: absolute;
    width: 100%
}

@media screen and (max-width: 768px) {
    .Landing_shops .Comments .HomePageSwiper .swiper-slide-active .item {
        width: 240px !important
    }
}

.Landing_shops .Comments .HomePageSwiper .item {
    background: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 40px;
    min-width: 250px
}

.Landing_shops .Comments .HomePageSwiper .item .whiteDiv {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.Landing_shops .Comments .HomePageSwiper .item .profile {
    border: 4px solid #f2f3f6;
    border-radius: 100%
}

.Landing_shops .Comments .HomePageSwiper .item .shopname {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #3d3d3d
}

.Landing_shops .Comments .HomePageSwiper .item .detail {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d
}

.Landing_shops .Comments .titletitr2 {
    background-size: contain;
    width: fit-content;
    background-position: center
}

.Landing_shops .Comments .CommentVideo .modal-content {
    background-color: #3d3d3d
}

.Landing_shops .Comments .CommentVideo .modal-content .modal-header {
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.Landing_shops .Comments .CommentVideo .modal-content .modal-header .modal-title {
    font-size: 20px;
    font-weight: 500;
    color: #fff
}

.Landing_shops .Comments .CommentVideo .modal-content .modal-body iframe {
    border-radius: 10px;
    height: 250px
}

.Landing_shops .Comments .CommentVideo .modal-content .modal-footer {
    border: none
}

@media screen and (max-width: 992px) {
    .Landing_shops .Comments .beforShadow, .Landing_shops .Comments .afterShadow {
        width: 15%
    }
}

@media screen and (max-width: 768px) {
    .Landing_shops .Comments {
        width: 100% !important
    }

    .Landing_shops .Comments .beforShadow, .Landing_shops .Comments .afterShadow {
        width: 10%
    }
}

@media screen and (max-width: 480px) {
    .Landing_shops .Comments .beforShadow, .Landing_shops .Comments .afterShadow {
        display: none
    }

    .Landing_shops .Comments .modal-body iframe {
        height: auto !important;
        width: auto !important
    }
}

@media screen and (max-width: 768px) {
    .Landing_shops .titletitr2 {
        font-size: 24px
    }
}

.Landing_shops .ctaBanner {
    background-image: url(../images/landings/ctaBanner/bg.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top
}

.Landing_shops .ctaBanner .main .title {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 44px;
    text-align: right;
    color: #3d3d3d
}

.Landing_shops .ctaBanner .main .des {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    text-align: justify;
    max-width: 524px
}

.Landing_shops .ctaBanner .main .buttons .question {
    border: 2px solid #3d3d3d;
    border-radius: 24px
}

.Landing_shops .ctaBanner .rightImage {
    max-height: 100%;
    max-width: 100%
}

@media screen and (max-width: 1360px) {
    .Landing_shops .ctaBanner {
        flex-direction: column;
        justify-content: start;
        align-items: center;
        background-size: cover
    }

    .Landing_shops .ctaBanner .main {
        margin-top: 30px
    }

    .Landing_shops .ctaBanner .main .buttons {
        margin-bottom: 40px
    }
}

@media screen and (max-width: 768px) {
    .Landing_shops .ctaBanner {
        padding: 30px
    }
}

.sellerPage .banner .coin {
    aspect-ratio: unset
}

@media screen and (max-width: 1360px) {
    .sellerPage .banner {
        background-size: cover;
        background-position: top
    }
}

@media screen and (max-width: 850px) {
    .sellerPage .banner {
        background-size: contain;
        background-position: 100% -7%
    }
}

.localBox {
    background-color: #eceff1;
    border: 2px dashed #90a4ae;
    border-radius: 16px;
    width: 100%;
    padding: 1.5rem .5rem;
    flex-basis: 100%;
    margin: 1.5rem 0;
    position: relative
}

.localBox .localsign {
    position: absolute;
    opacity: .25;
    font-size: small
}

.localBox .localsign.top-left {
    top: 3px;
    left: 8px
}

.localBox .localsign.top-right {
    top: 3px;
    right: 8px
}

.localBox .localsign.bottom-left {
    bottom: 3px;
    left: 8px
}

.localBox .localsign.bottom-right {
    bottom: 3px;
    right: 8px
}

.debugBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    text-align: left;
    z-index: -100
}

.debugBox.show {
    z-index: 1000 !important
}

.jv-code {
    height: 100%;
    overflow-y: scroll !important
}

.ayandehReject {
    z-index: 0
}

.ayandehReject .modal-head {
    padding: 19px !important
}

.ayandehReject .title {
    font-style: normal;
    font-weight: 500;
    font-size: 16px
}

.ayandehReject input {
    background: #fff;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    text-align: center
}

.ayandehReject .gds-button {
    background: #30357c;
    box-shadow: -8px 8px 16px 1px #30357c29;
    border-radius: 16px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    border: none
}

.DocCheckModal {
    background: #fff;
    min-width: 95vw
}

.DocCheckModal .modal-content {
    padding: 0 !important;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 0 !important
}

.DocCheckModal .modal-content .close {
    border-radius: 16px;
    background-color: #30357c
}

.DocCheckModal .modal-content .right {
    background: #fafcfe;
    box-shadow: -14px 0 40px 1px #0000000d;
    border-radius: 0;
    height: 100%
}

.DocCheckModal .modal-content .right .top {
    background: #fff;
    border: 1px solid #f7f7f7;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.DocCheckModal .modal-content .right .reasonSelect .typeLabel {
    background-color: #f2f3f6;
    border-radius: 12px;
    font-size: 14px
}

.DocCheckModal .modal-content .right {
    overflow-y: scroll;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

.DocCheckModal .modal-content .right::-webkit-scrollbar {
    width: 0px
}

.DocCheckModal .modal-content .right::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

.DocCheckModal .modal-content .right::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

.DocCheckModal .modal-content .right::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

@media screen and (max-width: 1360px) {
    .DocCheckModal .modal-content .right {
        height: fit-content;
        min-height: 55px
    }
}

.DocCheckModal .modal-content .left {
    height: 100%
}

.DocCheckModal .modal-content .left div {
    width: 100%
}

@media screen and (min-width: 1360px) {
    .DocCheckModal .modal-content .left div {
        height: 95vh
    }
}

@media screen and (max-width: 1360px) {
    .DocCheckModal .modal-content .left {
        height: fit-content
    }

    .DocCheckModal .modal-content .left div {
        min-width: unset
    }
}

.DocCheckModal .modal-content .title {
    text-align: right;
    color: #30357c;
    font-weight: 600;
    font-size: 14px;
    padding: 0;
    margin: 0
}

.DocCheckModal .modal-content .DocPreview {
    border-radius: 24px
}

.DocCheckModal .modal-content .rejectTitle {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.DocCheckModal .modal-content .RejectReason {
    border: 1px solid #bdbdbd;
    border-radius: 12px;
    padding: 10px
}

.DocCheckModal .modal-content .RejectReason::placeholder {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.DocCheckModal .modal-content .accept {
    background: #16d8a4;
    box-shadow: -7px 9px 16px 1px #16d8a43d;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #fff;
    padding: 5px 20px
}

.DocCheckModal .modal-content .reject {
    background: #ff6f5e;
    box-shadow: -7px 9px 16px 1px #ff6f5e3d;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #fff;
    padding: 5px 12px
}

.DocCheckModal .modal-content .download {
    background: #30357c;
    box-shadow: -7px 9px 16px 1px #16d8a43d;
    border-radius: 24px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #fff;
    padding: 5px 20px
}

.DocCheckModal .modal-content .download a {
    color: #fff
}

.DocCheckModal .modal-content .Note {
    background: #f2f3f6;
    border-radius: 24px;
    position: relative;
    padding: 25px !important;
    direction: rtl;
    flex-wrap: wrap
}

.DocCheckModal .modal-content .Note .bold {
    font-weight: 700
}

.DocCheckModal .modal-content .Note img {
    position: absolute;
    top: -20px;
    right: 20px
}

.DocCheckModal .modal-content .Note p {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b;
    margin: 0 1px !important
}

.DocCheckModal .modal-content .confirmNote p {
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.DocCheckModal .modal-content .zip {
    max-width: 370px !important;
    min-width: 370px !important;
    max-height: 350px !important;
    min-height: 370px !important;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

.DocCheckModal .modal-content .zip button {
    border: none;
    border-radius: 24px;
    background-color: unset
}

.DocCheckModal .modal-content .zip .des {
    height: fit-content;
    min-height: 85px;
    min-width: fit-content
}

.DocCheckModal .modal-content .zip .des p {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.simpleList td:first-child {
    font-size: small;
    text-align: right
}

.simpleList td:last-child {
    font-size: smaller;
    text-align: right
}

.tableActionModals .modal-head {
    padding: 19px !important
}

.tableActionModals button[type=submit] {
    background: #30357c;
    box-shadow: -8px 8px 16px 1px #30357c29;
    border-radius: 16px;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    border: none
}

::placeholder {
    opacity: .6 !important
}

.opa-10 {
    opacity: 1 !important
}

.opa-1 {
    opacity: .1 !important
}

.fw-100 {
    font-weight: 100 !important
}

.opa-20 {
    opacity: 2 !important
}

.opa-2 {
    opacity: .2 !important
}

.fw-200 {
    font-weight: 200 !important
}

.opa-30 {
    opacity: 3 !important
}

.opa-3 {
    opacity: .3 !important
}

.fw-300 {
    font-weight: 300 !important
}

.opa-40 {
    opacity: 4 !important
}

.opa-4 {
    opacity: .4 !important
}

.fw-400 {
    font-weight: 400 !important
}

.opa-50 {
    opacity: 5 !important
}

.opa-5 {
    opacity: .5 !important
}

.fw-500 {
    font-weight: 500 !important
}

.opa-60 {
    opacity: 6 !important
}

.opa-6 {
    opacity: .6 !important
}

.fw-600 {
    font-weight: 600 !important
}

.opa-70 {
    opacity: 7 !important
}

.opa-7 {
    opacity: .7 !important
}

.fw-700 {
    font-weight: 700 !important
}

.opa-80 {
    opacity: 8 !important
}

.opa-8 {
    opacity: .8 !important
}

.fw-800 {
    font-weight: 800 !important
}

.whp-1 {
    width: 1px;
    height: 1px;
    max-width: 1px;
    max-height: 1px;
    min-width: 1px;
    min-height: 1px
}

.whp-2 {
    width: 2px;
    height: 2px;
    max-width: 2px;
    max-height: 2px;
    min-width: 2px;
    min-height: 2px
}

.whp-3 {
    width: 3px;
    height: 3px;
    max-width: 3px;
    max-height: 3px;
    min-width: 3px;
    min-height: 3px
}

.whp-4 {
    width: 4px;
    height: 4px;
    max-width: 4px;
    max-height: 4px;
    min-width: 4px;
    min-height: 4px
}

.whp-5 {
    width: 5px;
    height: 5px;
    max-width: 5px;
    max-height: 5px;
    min-width: 5px;
    min-height: 5px
}

.whp-6 {
    width: 6px;
    height: 6px;
    max-width: 6px;
    max-height: 6px;
    min-width: 6px;
    min-height: 6px
}

.whp-7 {
    width: 7px;
    height: 7px;
    max-width: 7px;
    max-height: 7px;
    min-width: 7px;
    min-height: 7px
}

.whp-8 {
    width: 8px;
    height: 8px;
    max-width: 8px;
    max-height: 8px;
    min-width: 8px;
    min-height: 8px
}

.whp-9 {
    width: 9px;
    height: 9px;
    max-width: 9px;
    max-height: 9px;
    min-width: 9px;
    min-height: 9px
}

.whp-10 {
    width: 10px;
    height: 10px;
    max-width: 10px;
    max-height: 10px;
    min-width: 10px;
    min-height: 10px
}

.whp-11 {
    width: 11px;
    height: 11px;
    max-width: 11px;
    max-height: 11px;
    min-width: 11px;
    min-height: 11px
}

.whp-12 {
    width: 12px;
    height: 12px;
    max-width: 12px;
    max-height: 12px;
    min-width: 12px;
    min-height: 12px
}

.whp-13 {
    width: 13px;
    height: 13px;
    max-width: 13px;
    max-height: 13px;
    min-width: 13px;
    min-height: 13px
}

.whp-14 {
    width: 14px;
    height: 14px;
    max-width: 14px;
    max-height: 14px;
    min-width: 14px;
    min-height: 14px
}

.whp-15 {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    min-width: 15px;
    min-height: 15px
}

.whp-16 {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    min-width: 16px;
    min-height: 16px
}

.whp-17 {
    width: 17px;
    height: 17px;
    max-width: 17px;
    max-height: 17px;
    min-width: 17px;
    min-height: 17px
}

.whp-18 {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    min-width: 18px;
    min-height: 18px
}

.whp-19 {
    width: 19px;
    height: 19px;
    max-width: 19px;
    max-height: 19px;
    min-width: 19px;
    min-height: 19px
}

.whp-20 {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    min-width: 20px;
    min-height: 20px
}

.whp-21 {
    width: 21px;
    height: 21px;
    max-width: 21px;
    max-height: 21px;
    min-width: 21px;
    min-height: 21px
}

.whp-22 {
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
    min-width: 22px;
    min-height: 22px
}

.whp-23 {
    width: 23px;
    height: 23px;
    max-width: 23px;
    max-height: 23px;
    min-width: 23px;
    min-height: 23px
}

.whp-24 {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    min-width: 24px;
    min-height: 24px
}

.whp-25 {
    width: 25px;
    height: 25px;
    max-width: 25px;
    max-height: 25px;
    min-width: 25px;
    min-height: 25px
}

.whp-26 {
    width: 26px;
    height: 26px;
    max-width: 26px;
    max-height: 26px;
    min-width: 26px;
    min-height: 26px
}

.whp-27 {
    width: 27px;
    height: 27px;
    max-width: 27px;
    max-height: 27px;
    min-width: 27px;
    min-height: 27px
}

.whp-28 {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    min-width: 28px;
    min-height: 28px
}

.whp-29 {
    width: 29px;
    height: 29px;
    max-width: 29px;
    max-height: 29px;
    min-width: 29px;
    min-height: 29px
}

.whp-30 {
    width: 30px;
    height: 30px;
    max-width: 30px;
    max-height: 30px;
    min-width: 30px;
    min-height: 30px
}

.whp-31 {
    width: 31px;
    height: 31px;
    max-width: 31px;
    max-height: 31px;
    min-width: 31px;
    min-height: 31px
}

.whp-32 {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    min-width: 32px;
    min-height: 32px
}

.whp-33 {
    width: 33px;
    height: 33px;
    max-width: 33px;
    max-height: 33px;
    min-width: 33px;
    min-height: 33px
}

.whp-34 {
    width: 34px;
    height: 34px;
    max-width: 34px;
    max-height: 34px;
    min-width: 34px;
    min-height: 34px
}

.whp-35 {
    width: 35px;
    height: 35px;
    max-width: 35px;
    max-height: 35px;
    min-width: 35px;
    min-height: 35px
}

.whp-36 {
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
    min-width: 36px;
    min-height: 36px
}

.whp-37 {
    width: 37px;
    height: 37px;
    max-width: 37px;
    max-height: 37px;
    min-width: 37px;
    min-height: 37px
}

.whp-38 {
    width: 38px;
    height: 38px;
    max-width: 38px;
    max-height: 38px;
    min-width: 38px;
    min-height: 38px
}

.whp-39 {
    width: 39px;
    height: 39px;
    max-width: 39px;
    max-height: 39px;
    min-width: 39px;
    min-height: 39px
}

.whp-40 {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    min-width: 40px;
    min-height: 40px
}

.whp-41 {
    width: 41px;
    height: 41px;
    max-width: 41px;
    max-height: 41px;
    min-width: 41px;
    min-height: 41px
}

.whp-42 {
    width: 42px;
    height: 42px;
    max-width: 42px;
    max-height: 42px;
    min-width: 42px;
    min-height: 42px
}

.whp-43 {
    width: 43px;
    height: 43px;
    max-width: 43px;
    max-height: 43px;
    min-width: 43px;
    min-height: 43px
}

.whp-44 {
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    min-width: 44px;
    min-height: 44px
}

.whp-45 {
    width: 45px;
    height: 45px;
    max-width: 45px;
    max-height: 45px;
    min-width: 45px;
    min-height: 45px
}

.whp-46 {
    width: 46px;
    height: 46px;
    max-width: 46px;
    max-height: 46px;
    min-width: 46px;
    min-height: 46px
}

.whp-47 {
    width: 47px;
    height: 47px;
    max-width: 47px;
    max-height: 47px;
    min-width: 47px;
    min-height: 47px
}

.whp-48 {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
    min-width: 48px;
    min-height: 48px
}

.whp-49 {
    width: 49px;
    height: 49px;
    max-width: 49px;
    max-height: 49px;
    min-width: 49px;
    min-height: 49px
}

.whp-50 {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    min-width: 50px;
    min-height: 50px
}

.whp-51 {
    width: 51px;
    height: 51px;
    max-width: 51px;
    max-height: 51px;
    min-width: 51px;
    min-height: 51px
}

.whp-52 {
    width: 52px;
    height: 52px;
    max-width: 52px;
    max-height: 52px;
    min-width: 52px;
    min-height: 52px
}

.whp-53 {
    width: 53px;
    height: 53px;
    max-width: 53px;
    max-height: 53px;
    min-width: 53px;
    min-height: 53px
}

.whp-54 {
    width: 54px;
    height: 54px;
    max-width: 54px;
    max-height: 54px;
    min-width: 54px;
    min-height: 54px
}

.whp-55 {
    width: 55px;
    height: 55px;
    max-width: 55px;
    max-height: 55px;
    min-width: 55px;
    min-height: 55px
}

.whp-56 {
    width: 56px;
    height: 56px;
    max-width: 56px;
    max-height: 56px;
    min-width: 56px;
    min-height: 56px
}

.whp-57 {
    width: 57px;
    height: 57px;
    max-width: 57px;
    max-height: 57px;
    min-width: 57px;
    min-height: 57px
}

.whp-58 {
    width: 58px;
    height: 58px;
    max-width: 58px;
    max-height: 58px;
    min-width: 58px;
    min-height: 58px
}

.whp-59 {
    width: 59px;
    height: 59px;
    max-width: 59px;
    max-height: 59px;
    min-width: 59px;
    min-height: 59px
}

.whp-60 {
    width: 60px;
    height: 60px;
    max-width: 60px;
    max-height: 60px;
    min-width: 60px;
    min-height: 60px
}

.whp-61 {
    width: 61px;
    height: 61px;
    max-width: 61px;
    max-height: 61px;
    min-width: 61px;
    min-height: 61px
}

.whp-62 {
    width: 62px;
    height: 62px;
    max-width: 62px;
    max-height: 62px;
    min-width: 62px;
    min-height: 62px
}

.whp-63 {
    width: 63px;
    height: 63px;
    max-width: 63px;
    max-height: 63px;
    min-width: 63px;
    min-height: 63px
}

.whp-64 {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    min-width: 64px;
    min-height: 64px
}

.whp-65 {
    width: 65px;
    height: 65px;
    max-width: 65px;
    max-height: 65px;
    min-width: 65px;
    min-height: 65px
}

.whp-66 {
    width: 66px;
    height: 66px;
    max-width: 66px;
    max-height: 66px;
    min-width: 66px;
    min-height: 66px
}

.whp-67 {
    width: 67px;
    height: 67px;
    max-width: 67px;
    max-height: 67px;
    min-width: 67px;
    min-height: 67px
}

.whp-68 {
    width: 68px;
    height: 68px;
    max-width: 68px;
    max-height: 68px;
    min-width: 68px;
    min-height: 68px
}

.whp-69 {
    width: 69px;
    height: 69px;
    max-width: 69px;
    max-height: 69px;
    min-width: 69px;
    min-height: 69px
}

.whp-70 {
    width: 70px;
    height: 70px;
    max-width: 70px;
    max-height: 70px;
    min-width: 70px;
    min-height: 70px
}

.whp-71 {
    width: 71px;
    height: 71px;
    max-width: 71px;
    max-height: 71px;
    min-width: 71px;
    min-height: 71px
}

.whp-72 {
    width: 72px;
    height: 72px;
    max-width: 72px;
    max-height: 72px;
    min-width: 72px;
    min-height: 72px
}

.whp-73 {
    width: 73px;
    height: 73px;
    max-width: 73px;
    max-height: 73px;
    min-width: 73px;
    min-height: 73px
}

.whp-74 {
    width: 74px;
    height: 74px;
    max-width: 74px;
    max-height: 74px;
    min-width: 74px;
    min-height: 74px
}

.whp-75 {
    width: 75px;
    height: 75px;
    max-width: 75px;
    max-height: 75px;
    min-width: 75px;
    min-height: 75px
}

.whp-76 {
    width: 76px;
    height: 76px;
    max-width: 76px;
    max-height: 76px;
    min-width: 76px;
    min-height: 76px
}

.whp-77 {
    width: 77px;
    height: 77px;
    max-width: 77px;
    max-height: 77px;
    min-width: 77px;
    min-height: 77px
}

.whp-78 {
    width: 78px;
    height: 78px;
    max-width: 78px;
    max-height: 78px;
    min-width: 78px;
    min-height: 78px
}

.whp-79 {
    width: 79px;
    height: 79px;
    max-width: 79px;
    max-height: 79px;
    min-width: 79px;
    min-height: 79px
}

.whp-80 {
    width: 80px;
    height: 80px;
    max-width: 80px;
    max-height: 80px;
    min-width: 80px;
    min-height: 80px
}

.whp-81 {
    width: 81px;
    height: 81px;
    max-width: 81px;
    max-height: 81px;
    min-width: 81px;
    min-height: 81px
}

.whp-82 {
    width: 82px;
    height: 82px;
    max-width: 82px;
    max-height: 82px;
    min-width: 82px;
    min-height: 82px
}

.whp-83 {
    width: 83px;
    height: 83px;
    max-width: 83px;
    max-height: 83px;
    min-width: 83px;
    min-height: 83px
}

.whp-84 {
    width: 84px;
    height: 84px;
    max-width: 84px;
    max-height: 84px;
    min-width: 84px;
    min-height: 84px
}

.whp-85 {
    width: 85px;
    height: 85px;
    max-width: 85px;
    max-height: 85px;
    min-width: 85px;
    min-height: 85px
}

.whp-86 {
    width: 86px;
    height: 86px;
    max-width: 86px;
    max-height: 86px;
    min-width: 86px;
    min-height: 86px
}

.whp-87 {
    width: 87px;
    height: 87px;
    max-width: 87px;
    max-height: 87px;
    min-width: 87px;
    min-height: 87px
}

.whp-88 {
    width: 88px;
    height: 88px;
    max-width: 88px;
    max-height: 88px;
    min-width: 88px;
    min-height: 88px
}

.whp-89 {
    width: 89px;
    height: 89px;
    max-width: 89px;
    max-height: 89px;
    min-width: 89px;
    min-height: 89px
}

.whp-90 {
    width: 90px;
    height: 90px;
    max-width: 90px;
    max-height: 90px;
    min-width: 90px;
    min-height: 90px
}

.whp-91 {
    width: 91px;
    height: 91px;
    max-width: 91px;
    max-height: 91px;
    min-width: 91px;
    min-height: 91px
}

.whp-92 {
    width: 92px;
    height: 92px;
    max-width: 92px;
    max-height: 92px;
    min-width: 92px;
    min-height: 92px
}

.whp-93 {
    width: 93px;
    height: 93px;
    max-width: 93px;
    max-height: 93px;
    min-width: 93px;
    min-height: 93px
}

.whp-94 {
    width: 94px;
    height: 94px;
    max-width: 94px;
    max-height: 94px;
    min-width: 94px;
    min-height: 94px
}

.whp-95 {
    width: 95px;
    height: 95px;
    max-width: 95px;
    max-height: 95px;
    min-width: 95px;
    min-height: 95px
}

.whp-96 {
    width: 96px;
    height: 96px;
    max-width: 96px;
    max-height: 96px;
    min-width: 96px;
    min-height: 96px
}

.whp-97 {
    width: 97px;
    height: 97px;
    max-width: 97px;
    max-height: 97px;
    min-width: 97px;
    min-height: 97px
}

.whp-98 {
    width: 98px;
    height: 98px;
    max-width: 98px;
    max-height: 98px;
    min-width: 98px;
    min-height: 98px
}

.whp-99 {
    width: 99px;
    height: 99px;
    max-width: 99px;
    max-height: 99px;
    min-width: 99px;
    min-height: 99px
}

.lh-150 {
    line-height: 1.5rem
}

.lh-175 {
    line-height: 1.75rem
}

.lh-200 {
    line-height: 2rem
}

.SellerTopbarLink {
    direction: ltr
}

.SellerTopbarLink .qrDiv {
    background: #f2f3f6;
    box-shadow: 14px 9px 40px 1px #30357c0a;
    border-radius: 24px 0 0;
    width: 105px;
    height: 104px
}

.SellerTopbarLink .linkDiv {
    background: #f2f3f6;
    border-radius: 40px
}

.SellerTopbarLink .linkDiv .dash {
    transform: rotate(90deg);
    color: #8b8b8b
}

.SellerTopbarLink .linkDiv .link {
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    color: #8b8b8b
}

.AddUser {
    background: #f2f3f6;
    border: 1px solid #dfe1f3;
    border-radius: 24px;
    position: relative;
    min-height: 120px
}

.AddUser .userPng {
    margin-top: -6%;
    margin-right: -6%
}

@media screen and (max-width: 850px) {
    .AddUser .userPng {
        margin: 0
    }
}

.AddUser .t1 {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    text-align: right;
    color: #3d3d3d
}

.AddUser .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #bdbdbd
}

@media screen and (max-width: 568px) {
    .AddUser .NiceButton {
        margin: 15px 0
    }
}

.SalesSummary .totalOrder {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    min-width: 248px
}

.SalesSummary .Orders {
    background: #c3c6e829;
    border: 1px solid rgba(195, 198, 232, .32);
    border-radius: 24px;
    min-width: 248px
}

.SalesSummary .register {
    background: #c6e5ff29;
    border: 1px solid rgba(198, 229, 255, .32);
    border-radius: 24px;
    min-width: 248px
}

.SalesSummary .unfinished {
    background: #ffd8d429;
    border: 1px solid rgba(255, 216, 212, .32);
    border-radius: 24px;
    min-width: 248px
}

.SalesSummary .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.SalesSummary .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 44px;
    text-align: right;
    color: #3d3d3d
}

.SalesSummary .SellerTopbarLink {
    direction: ltr
}

.SalesSummary .SellerTopbarLink .qrDiv {
    background: #f2f3f6;
    box-shadow: 14px 9px 40px 1px #30357c0a;
    border-radius: 24px 0 0;
    width: 105px;
    height: 104px
}

.SalesSummary .SellerTopbarLink .linkDiv {
    background: #f2f3f6;
    border-radius: 40px
}

.SalesSummary .SellerTopbarLink .linkDiv .dash {
    transform: rotate(90deg);
    color: #8b8b8b
}

.SalesSummary .SellerTopbarLink .linkDiv .link {
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
    color: #8b8b8b
}

.SalesSummary .SalesSummary .totalOrder {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    min-width: 248px
}

.SalesSummary .SalesSummary .Orders {
    background: #c3c6e829;
    border: 1px solid rgba(195, 198, 232, .32);
    border-radius: 24px;
    min-width: 248px
}

.SalesSummary .SalesSummary .register {
    background: #c6e5ff29;
    border: 1px solid rgba(198, 229, 255, .32);
    border-radius: 24px;
    min-width: 248px
}

.SalesSummary .SalesSummary .unfinished {
    background: #ffd8d429;
    border: 1px solid rgba(255, 216, 212, .32);
    border-radius: 24px;
    min-width: 248px
}

.SalesSummary .SalesSummary .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.SalesSummary .SalesSummary .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 44px;
    text-align: right;
    color: #3d3d3d
}

.SalesSummary .SalesSummaryBox {
    direction: rtl;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    height: 361px;
    min-width: 345px
}

.SalesSummary .SalesSummaryBox .top .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.SalesSummary .SalesSummaryBox .top a {
    background-color: unset;
    border: none;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    color: #30357c
}

.SalesSummary .SalesSummaryBox .divider {
    background: #f2f3f6;
    box-shadow: -14px 9px 40px 1px #0000000a;
    border-radius: 24px;
    height: 1px
}

.SalesSummary .SalesSummaryBox .details .item {
    border-bottom: 1px solid #f2f3f6
}

.SalesSummary .SalesSummaryBox .details .item .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.SalesSummary .SalesSummaryBox .details .item .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    color: #3d3d3d
}

.SalesSummary .SalesSummaryBox .discont {
    border: 1px solid #bdbdbd;
    box-sizing: border-box;
    border-radius: 24px;
    height: 56px;
    background-color: #fff;
    direction: rtl;
    min-width: 265px;
    max-width: 285px
}

.SalesSummary .SalesSummaryBox .discont svg {
    width: 32px;
    height: 32px
}

.SalesSummary .SalesSummaryBox .discont .img {
    width: 40px;
    height: 40px
}

.SalesSummary .SalesSummaryBox .discont .code {
    max-width: 60%
}

.SalesSummary .SalesSummaryBox .discont .code .gds-input {
    border: none
}

.SalesSummary .SalesSummaryBox .discont input {
    border: none;
    height: 100%;
    text-align: center
}

.SalesSummary .SalesSummaryBox .discont input::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 28px;
    text-align: right;
    color: #bdbdbd
}

.SalesSummary .SalesSummaryBox .discont input:focus {
    outline: none
}

.SalesSummary .SalesSummaryBox .discont button {
    background-color: #3d3d3d;
    color: #fff;
    border-radius: 24px;
    font-size: 13px
}

#FormModal .modal-dialog {
    margin: auto
}

#FormModal .modal-dialog .modal-content {
    height: 100vh;
    overflow-y: scroll;
    scrollbar-color: #ffffff #ffffff;
    scrollbar-width: none
}

#FormModal .modal-dialog .modal-content::-webkit-scrollbar {
    width: 0px
}

#FormModal .modal-dialog .modal-content::-webkit-scrollbar-track {
    border-radius: 24px;
    height: 80%
}

#FormModal .modal-dialog .modal-content::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 10px;
    height: 80%
}

#FormModal .modal-dialog .modal-content::-webkit-scrollbar-thumb:hover {
    background-color: #fff
}

#FormModal .modal-dialog .modal-content {
    align-items: start !important;
    justify-content: start !important
}

#FormModal .modal-dialog .modal-content::-webkit-scrollbar {
    width: 5px
}

#FormModal .modal-dialog .modal-content::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

#FormModal .modal-dialog .modal-content::-webkit-scrollbar-thumb {
    background: #30357c;
    border-radius: 10px;
    height: 10%
}

#FormModal .modal-dialog .modal-content::-webkit-scrollbar-thumb:hover {
    background-color: #30357c
}

#eseftehPlayModal .modal-dialog {
    margin: auto;
    max-width: 100%;
    width: 100%
}

#eseftehPlayModal .eseftehPlayModal .modal-content {
    width: 100%;
    height: 100%
}

#eseftehPlayModal .eseftehPlayModal .modal-content .eseftehPlay {
    border-radius: 12px
}

@media screen and (min-width: 1360px) {
    #eseftehPlayModal .modal-dialog {
        max-width: 600px
    }
}

#esignPlayModal .modal-dialog {
    margin: auto;
    max-width: 100%;
    width: 100%
}

#esignPlayModal .esignPlayModal .modal-content {
    width: 100%;
    height: 100%
}

#esignPlayModal .esignPlayModal .modal-content .esignPlay {
    border-radius: 12px
}

@media screen and (min-width: 1360px) {
    #esignPlayModal .modal-dialog {
        max-width: 600px
    }
}

.LandingInfo input, .LandingInfo textarea {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    color: #8a90d2
}

.LandingInfo input:focus {
    outline: none
}

.UserInquiryLock .main {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    max-width: 858px;
    margin: auto !important
}

.UserInquiryLock .main .title p {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 44px;
    text-align: right;
    color: #3d3d3d
}

.UserInquiryLock .main .t1 {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    text-align: justify;
    color: #8b8b8b
}

.UserInquiryLock .main .box {
    background: #f2f3f6;
    border: 4px solid #ffffff;
    border-radius: 24px
}

.UserInquiryLock .main .box .titr {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    text-align: right;
    color: #bdbdbd
}

.UserInquiryLock .main .box .des {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    text-align: right;
    color: #8b8b8b
}

.UserInquiryLock .main .downloadDiv {
    background: #edf7ff;
    border-radius: 24px
}

.UserInquiryLock .main .downloadDiv button {
    background: #fff;
    border: 1px solid #edf7ff;
    border-radius: 16px;
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    text-align: center;
    color: #028bff
}

.UserInquiryLock .main .downloadDiv .t2 {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 44px;
    text-align: right;
    color: #028bff
}

@media screen and (max-width: 480px) {
    .UserInquiryLock .main .downloadDiv .t2 {
        font-size: 15px
    }
}

@media screen and (max-width: 850px) {
    .UserInquiryLock .main .downloadDiv .dot {
        display: none !important
    }
}

.UserInquiryLock .main .discont {
    border: 1px solid #bdbdbd;
    box-sizing: border-box;
    border-radius: 24px;
    height: 56px;
    background-color: #fff;
    direction: rtl
}

.UserInquiryLock .main .discont svg {
    width: 32px;
    height: 32px
}

.UserInquiryLock .main .discont .img {
    width: 40px;
    height: 40px
}

.UserInquiryLock .main .discont .code {
    max-width: 60%
}

.UserInquiryLock .main .discont .code .gds-input {
    border: none
}

.UserInquiryLock .main .discont input {
    border: none;
    height: 100%;
    text-align: center
}

.UserInquiryLock .main .discont input::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #bdbdbd
}

.UserInquiryLock .main .discont input:focus {
    outline: none
}

.UserInquiryLock .main .discont button {
    background-color: #3d3d3d;
    color: #fff;
    border-radius: 24px
}

.userInquiryPage .DocsCard {
    flex-wrap: wrap
}

.userInquiryPage .DocsCard .item {
    width: 390px;
    height: 370px;
    background: #fff;
    border: 1px solid #f2f3f6;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px
}

@media screen and (max-width: 768px) {
    .userInquiryPage .DocsCard .item {
        width: 300px;
        height: fit-content
    }
}

.userInquiryPage .DocsCard .item .DocPreview {
    border-radius: 24px
}

.userInquiryPage .DocsCard .item .zip {
    background: #fff;
    border-radius: 24px
}

.userInquiryPage .DocsCard .item .zip button {
    border: none;
    border-radius: 24px;
    background-color: unset
}

.userInquiryPage .DocsCard .item .zip .des {
    height: fit-content;
    min-height: 85px;
    min-width: fit-content
}

.userInquiryPage .DocsCard .item .zip .des p {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.userInquiryPage .DocsCard .item .modal-dialog {
    height: 100%;
    max-width: 95%;
    justify-content: center
}

.userInquiryPage .DocsCard .item .PdfButton {
    background-color: unset;
    border: none
}

.userInquiryPage .DocsCard .item .btmDes .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.userInquiryPage .DocsCard .item .customerInfo .main {
    width: fit-content !important
}

.userInquiryPage .DocsCard .item .customerInfo .main .title {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.userInquiryPage .DocsCard .item .customerInfo .main .des {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    color: #3d3d3d
}

.userInquiryPage .DocsCard .item .modal-content {
    background: inherit;
    height: 100%;
    max-width: 90%;
    border: none
}

.userInquiryPage .DocsCard .item .closeModal {
    border-radius: 18px;
    border: none;
    outline: none;
    background: linear-gradient(90deg, #090f64, #2a2e65 43.75%, #30357c);
    color: #fff;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    font-size: 14px
}

.userInquiryPage .DocsCard .item div {
    width: 100%;
    min-width: unset
}

.custom-select {
    font-family: Pelak, sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    margin: 10px 0;
    background-color: #fff;
    outline: none;
    border-radius: 24px
}

.custom-select .option {
    font-family: Pelak, sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    border: none;
    margin: 10px 0;
    background-color: #fff;
    outline: none;
    border-radius: 24px
}

.bulk-actions-nav {
    border-radius: 24px;
    margin-top: 10px;
    z-index: 2
}

.bulk-actions-nav .main {
    background-color: #e4e4e4 !important;
    border-radius: 24px
}

.PayDivCycle {
    background: #028bff;
    box-shadow: -2.57px 6.85714px 21.14px 2.86px #028bff45;
    border-radius: 24px;
    min-height: 144px
}

.PayDivCycle .titr1 {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff
}

.PayDivCycle .titr2 {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    color: #fff
}

.PayDivCycle .tiny {
    background: #ffffff1a;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 24px;
    height: 100%;
    min-height: 112px
}

@media screen and (max-width: 568px) {
    .PayDivCycle .tiny {
        align-items: center !important;
        justify-content: center !important
    }
}

.PayDivCycle .itemsDiv {
    max-width: 412px;
    min-height: 112px
}

.PayDivCycle .itemsDiv .item {
    height: 100%;
    min-height: 125px;
    background: #fff;
    border: 1px solid #f2f3f6;
    border-radius: 24px
}

.PayDivCycle .itemsDiv .item .divider {
    height: 80px;
    justify-content: center;
    align-items: center;
    display: flex
}

.PayDivCycle .itemsDiv .item .divider img {
    z-index: 4;
    position: absolute;
    width: 20px;
    height: 83px;
    margin-top: -1px
}

.PayDivCycle .itemsDiv .item .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #3d3d3d
}

.PayDivCycle .itemsDiv .item .text2 {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d
}

.PayDivCycle .itemsDiv .item .discrip {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    color: #8b8b8b
}

.PayDivCycle .itemsDiv .item .date {
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d
}

.PayDivCycle .itemsDiv .item .payButton {
    border: none;
    background: #028bff;
    box-shadow: -3px 4px 16px 1px #028bff33;
    border-radius: 24px;
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    color: #fff
}

.PayDivCycle .discont {
    border: 1px solid #bdbdbd;
    box-sizing: border-box;
    border-radius: 24px;
    height: 56px;
    background-color: #fff;
    direction: rtl;
    min-width: 265px;
    max-width: 285px
}

.PayDivCycle .discont svg {
    width: 32px;
    height: 32px
}

.PayDivCycle .discont .img {
    width: 40px;
    height: 40px
}

.PayDivCycle .discont .code {
    max-width: 60%
}

.PayDivCycle .discont .code .gds-input {
    border: none
}

.PayDivCycle .discont input {
    border: none;
    height: 100%;
    text-align: center
}

.PayDivCycle .discont input::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 28px;
    text-align: right;
    color: #bdbdbd
}

.PayDivCycle .discont input:focus {
    outline: none
}

.PayDivCycle .discont button {
    background-color: #3d3d3d;
    color: #fff;
    border-radius: 24px;
    font-size: 13px
}

.SellersAddShop .ShopRegister {
    border-radius: 24px;
    border: 8px solid #edf7ff;
    background: #edf7ff;
    max-width: 480px;
    min-width: 480px
}

.SellersAddShop .ShopRegister .top {
    border-radius: 24px;
    background: #fff
}

.SellersAddShop .ShopRegister .top .t1 {
    color: #3d3d3d;
    text-align: center;
    font-size: 16px;
    font-family: Pelak, sans-serif;
    font-weight: 500;
    line-height: 28px
}

.SellersAddShop .ShopRegister .top .t2 {
    color: #8b8b8b;
    text-align: center;
    font-size: 16px;
    font-family: Pelak, sans-serif;
    font-weight: 300;
    line-height: 28px
}

.SellersAddShop .ShopRegister .top ul {
    color: #3d3d3d;
    text-align: justify;
    font-size: 13px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 24px
}

.SellersAddShop .ShopRegister .top .t3 {
    color: #8b8b8b;
    text-align: right;
    font-size: 15px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 28px
}

.SellersAddShop .ShopRegister .top .download {
    border-radius: 24px;
    border: 1px solid #3d3d3d;
    background: #fff;
    color: #3d3d3d;
    text-align: right;
    font-size: 15px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 28px
}

.SellersAddShop .ShopRegister .t4 {
    color: #028bff;
    text-align: right;
    font-size: 15px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 28px
}

.SellersAddShop .ShopRegister .sign {
    border-radius: 24px;
    background: #028bff;
    border: none;
    color: #fff;
    text-align: right;
    font-size: 16px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 28px
}

@media screen and (max-width: 480px) {
    .SellersAddShop .ShopRegister {
        min-width: 360px
    }

    .SellersAddShop .ShopRegister .signDiv {
        justify-content: center !important
    }

    .SellersAddShop .ShopRegister .signDiv .sign {
        margin-right: 15px !important
    }
}

.error-padding .input-error {
    bottom: -36px
}

.uploadContainer-Sd {
    direction: ltr
}

.viewer-toolbar {
    transform: scale(1.25)
}

.viewer-toolbar .viewer-prev, .viewer-toolbar .viewer-next, .viewer-toolbar .viewer-play, .viewer-toolbar .viewer-one-to-one {
    display: none !important
}

.viewer-toolbar li {
    margin: 0 5px
}

.VerifyDomain {
    border-radius: 24px;
    border: 4px solid var(--tmp, #f2f3f6);
    background: var(--white, #fff);
    max-width: 500px;
    min-height: 479px
}

.VerifyDomain .Top {
    border-radius: 24px 24px 0 0;
    background: var(--primary, #00569f);
    box-shadow: 0 15px 28px #00569f12
}

.VerifyDomain .Top .dot {
    background-image: url(../images/seller/verifyDomain/dot.svg);
    height: 2px
}

.VerifyDomain .Top .site {
    color: #fff;
    font-size: 13px;
    font-family: Pelak, sans-serif;
    font-weight: 600;
    line-height: 24px
}

.VerifyDomain .Top .titr {
    color: #fff;
    text-align: right;
    font-size: 13px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 24px
}

.VerifyDomain .bottom .tabs button {
    background: unset;
    border: none;
    border-bottom: 4px solid #f2f3f6;
    padding: 15px 0
}

.VerifyDomain .bottom .tabs .active {
    border-bottom: 4px solid #3d3d3d
}

.VerifyDomain .bottom .defult .t1 {
    color: var(--placeholder, #bdbdbd);
    text-align: right;
    font-size: 13px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 24px
}

.VerifyDomain .bottom .defult .t2 {
    color: var(--black, #3d3d3d);
    text-align: center;
    font-size: 18px;
    font-family: Pelak, sans-serif;
    font-weight: 500;
    line-height: 30px
}

.VerifyDomain .bottom .defult .t3 {
    color: var(--black-tint-2, #8b8b8b);
    text-align: justify;
    font-size: 13px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 24px
}

.VerifyDomain .bottom .byemail {
    border-radius: 24px
}

.VerifyDomain .bottom .byemail .receiveMail {
    background: var(--primary-tint-1, #edf7ff);
    border-radius: 24px
}

.VerifyDomain .bottom .byemail .receiveMail .white {
    border-radius: 24px;
    border: 1px solid var(--primary-tint-2, #c6e5ff);
    background: var(--white, #fff)
}

.VerifyDomain .bottom .byemail .receiveMail .white .t1 {
    color: var(--black, #3d3d3d);
    text-align: right;
    font-size: 13px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 24px
}

.VerifyDomain .bottom .byemail .receiveMail .white .t2 {
    color: var(--black-tint-2, #8b8b8b);
    text-align: right;
    font-size: 13px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 19px
}

.VerifyDomain .bottom .byemail .receiveMail .receiveButton {
    background: unset;
    border: none;
    color: var(--primary-tint-light, #028bff);
    text-align: right;
    font-size: 13px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 24px
}

.VerifyDomain .bottom .byemail .interEmailCode {
    background-color: #fff;
    border-radius: 24px
}

.VerifyDomain .bottom .byemail .interEmailCode .message {
    border-radius: 24px;
    background: var(--primary-tint-1, #edf7ff)
}

.VerifyDomain .bottom .byemail .interEmailCode .message .t1 {
    color: var(--black, #3d3d3d);
    text-align: right;
    font-size: 13px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 24px
}

.VerifyDomain .bottom .byemail .interEmailCode .message .t2 {
    color: var(--black-tint-2, #8b8b8b);
    text-align: right;
    font-size: 13px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 19px
}

.VerifyDomain .bottom .byemail .interEmailCode .resend {
    border-radius: 24px;
    border: 1px solid var(--primary-tint-light, #028bff);
    color: var(--primary-tint-light, #028bff);
    text-align: center;
    font-size: 16px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 28px;
    background: unset
}

.VerifyDomain .bottom .byemail .interEmailCode .confirm {
    border-radius: 24px;
    background: var(--primary-tint-light, #028bff);
    box-shadow: -7px 9px 16px 1px #028bff1a;
    color: var(--white, #fff);
    text-align: center;
    font-size: 16px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 28px;
    border: none
}

.VerifyDomain .bottom .bydns {
    direction: ltr
}

.VerifyDomain .bottom .bydns .titr {
    color: var(--black-tint-2, #8b8b8b);
    text-align: justify;
    font-size: 14px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 24px;
    direction: rtl
}

.VerifyDomain .bottom .bydns .main {
    border-radius: 40px;
    background: var(--tmp, #f2f3f6)
}

.VerifyDomain .bottom .bydns .confirm {
    border-radius: 24px;
    background: var(--primary-tint-light, #028bff);
    box-shadow: -7px 9px 16px 1px #028bff1a;
    color: var(--white, #fff);
    text-align: center;
    font-size: 16px;
    font-family: Pelak, sans-serif;
    font-weight: 400;
    line-height: 28px;
    border: none
}

.specific-doc .detail p {
    font-family: Pelak, sans-serif;
    font-size: 14px;
    text-align: right;
    font-weight: 400
}

.specific-doc .hd-detail {
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border: none;
    border-top: 0;
    border-radius: 0 0 24px 24px;
    justify-content: center !important;
    align-items: center !important
}

.specific-doc .hd-detail p {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.specific-doc .hd-detail .form-control {
    background: #fafcfe;
    border: 1px solid #c6e5ff;
    box-sizing: border-box;
    border-radius: 24px;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    text-align: right;
    color: #8a90d2;
    min-height: 56px
}

.specific-doc .hd-detail .hd-active {
    background: #f0fdfa;
    border-radius: 24px;
    border: 1px solid #baf8e7;
    justify-content: center;
    align-items: center;
    margin: auto
}

.specific-doc .hd-detail .hd-active .collapsed {
    display: unset !important
}

.specific-doc .hd-detail .hd-active p {
    font-style: normal;
    font-weight: 600;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #16d8a4
}

.specific-doc .hd-detail .hd-active div {
    background-image: url(../images/UploadDocuments/complete.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.specific-doc .hd-detail .hd-defult {
    border: 1px solid #c6e5ff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.specific-doc .hd-detail .hd-defult ::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.specific-doc .hd-detail .hd-defult input, .specific-doc .hd-detail .hd-defult textarea {
    border: none;
    text-align: right;
    background: #fafcfe;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    align-items: center;
    color: #8a90d2
}

.specific-doc .hd-detail .hd-defult input, .specific-doc .hd-detail .hd-defult textarea:focus {
    outline: none
}

.specific-doc .hd-detail .hd-defult textarea {
    background: transparent;
    border: none
}

.specific-doc .hd-detail .hd-input {
    border: 1px dashed #028bff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.specific-doc .hd-detail .hd-input p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.specific-doc .hd-detail .hd-input div {
    background-image: url(../images/UploadDocuments/idcard-front.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.specific-doc .editAddress {
    max-width: fit-content
}

.img-fluid {
    max-height: 100% !important
}

.modal {
    position: fixed;
    z-index: 100;
    height: 100vh;
    width: 100vw;
    background-color: #0006;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.modal::-webkit-scrollbar {
    cursor: pointer;
    width: 10px
}

.modal::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #eee;
    border-radius: 24px;
    height: 10px
}

.modal::-webkit-scrollbar-thumb {
    background: #e4e4e4;
    border-radius: 10px;
    height: 10px
}

.modal::-webkit-scrollbar-thumb:hover {
    background-color: #90a4ae
}

.modal .modal-dialog {
    margin: 25px auto
}

.modal .modal-head {
    background: linear-gradient(90deg, #090f64, #2a2e65 43.75%, #30357c);
    box-shadow: 0 12px 40px 1px #30357c4d;
    border-radius: 24px;
    position: relative
}

.modal .modal-head .close {
    background-color: unset;
    border: none;
    position: absolute;
    top: 22px;
    right: 10px
}

.modal .modal-head p {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff
}

.modal .modal-head .headIcon {
    position: absolute;
    width: 100%;
    padding-top: 10px
}

.modal .modal-head .headIcon img {
    margin: 0;
    padding: 15px;
    background: #fafcfe;
    border: 3px solid #f2f3f6;
    box-shadow: 0 12px 40px #30357c12;
    border-radius: 24px
}

.modal .modal-content {
    overflow: hidden;
    border-radius: 24px
}

.activeModal {
    display: block
}

.gmodalBackdrop {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 99;
    background-color: #0006
}

.flexWrapper {
    display: flex;
    justify-content: center;
    align-items: center
}

.t-mw-700p span {
    max-width: 700px
}

.copyBtn {
    background-color: #f2f3f6;
    border: 1px solid #dfe1f3;
    border-radius: 16px;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.sticky-top {
    z-index: 100 !important
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center
}

.flex-col {
    flex-direction: column
}

.sellerRegister .mode {
    border: 1px solid #e4e4e4;
    width: fit-content;
    border-radius: 24px
}

.sellerRegister .mode .item {
    font-family: Pelak, sans-serif;
    font-size: 16px;
    text-align: center;
    direction: rtl;
    border-radius: 24px;
    min-width: 80px
}

.sellerRegister .mode .active {
    background: gray;
    color: #fff
}

.sellerRegister .hd-detail {
    background: #fff;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border: 1px solid #e4e4e4;
    border-radius: 24px;
    justify-content: center !important;
    align-items: center !important
}

.sellerRegister .hd-detail .form-control {
    background: #fafcfe;
    border: 1px solid #c6e5ff;
    box-sizing: border-box;
    border-radius: 24px;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    text-align: right;
    color: #8a90d2;
    min-height: 56px
}

.sellerRegister .hd-detail .hd-defult {
    border: 1px solid #c6e5ff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.sellerRegister .hd-detail .hd-defult ::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.sellerRegister .hd-detail .hd-defult input, .sellerRegister .hd-detail .hd-defult textarea {
    border: none;
    text-align: right;
    background: #fafcfe;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    color: #8a90d2
}

.sellerRegister .hd-detail .hd-defult input, .sellerRegister .hd-detail .hd-defult textarea:focus {
    outline: none
}

.sellerRegister .hd-detail .hd-defult .gds-input, .sellerRegister .hd-detail .hd-defult .gds-textarea {
    background: transparent;
    border: none
}

.sellerRegister .hd-detail .hd-input {
    border: 1px dashed #028bff;
    background: #fafcfe;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    margin: auto
}

.sellerRegister .hd-detail .hd-input p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.sellerRegister .hd-detail .hd-input div {
    background-image: url(../images/UploadDocuments/idcard-front.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.sellerRegister .hd-detail .edit {
    direction: rtl;
    flex-direction: column
}

.sellerRegister .hd-detail .edit .openEdit {
    justify-content: space-around;
    border: 1px solid #c6e5ff;
    border-radius: 24px;
    background: #edf7ff;
    margin-top: -53px
}

.sellerRegister .hd-detail .edit .openEdit img {
    width: 24px;
    height: 24px
}

.sellerRegister .hd-detail .edit .openEdit p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #028bff
}

.sellerRegister .hd-detail .edit .openEdit .img1 {
    opacity: 1
}

.sellerRegister .hd-detail .edit .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.sellerRegister .hd-detail .edit .selfornot .title1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.sellerRegister .hd-detail .edit .selfornot .divider {
    background: #dfe1f3;
    height: 1px
}

.sellerRegister .hd-detail .edit .selfornot .choiceDiv .title2 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.sellerRegister .hd-detail .edit .selfornot .choiceDiv .title2 .form-check-input {
    width: 48px;
    height: 24px
}

.sellerRegister .hd-detail .edit .selfornot .choiceDiv .form-check-input {
    width: 3vw;
    height: 1.5vw
}

@media screen and (max-width: 1920px) {
    .sellerRegister .hd-detail .edit .selfornot .choiceDiv .form-check-input {
        width: 48px;
        height: 24px
    }
}

.sellerRegister .hd-detail .edit .selfornot .choiceDiv .text1 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.sellerRegister .hd-detail .edit .selfornot .choiceDiv .text2 {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.sellerRegister .hd-detail .edit .littleAlert p {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #3d3d3d
}

.sellerRegister .hd-detail .submitReal {
    border: 1px solid #028bff;
    border-radius: 24px;
    background-color: transparent;
    color: #028bff;
    font-size: 13px;
    font-family: Pelak, sans-serif
}

.SellerRegister {
    border-radius: 24px;
    border: 1px solid var(--titr-low, #dfe1f3);
    background: var(--bg-color, #fafcfe)
}

.SellerRegister .main {
    border-radius: 24px;
    border-bottom: 1px solid var(--titr-low, #dfe1f3);
    background: var(--white, #fff);
    box-shadow: -8px 32px 40px 1px #30357c14
}

.SellerRegister .main .shopType .title {
    color: var(--black, #3d3d3d);
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px
}

.SellerRegister .main .shopType .item {
    border-radius: 16px;
    border: 1px solid var(--primary-tint-2, #c6e5ff);
    background: var(--white, #fff);
    position: relative
}

.SellerRegister .main .shopType .item .doted {
    position: absolute;
    left: 34%
}

.SellerRegister .main .shopType .item p {
    color: var(--primary-tint-light, #028bff);
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px
}

.SellerRegister .main .shopType .active {
    border-radius: 16px;
    border: 1px solid var(--primary-tint-light, #028bff);
    background: var(--primary-tint-light, #028bff);
    box-shadow: -2.5699999332px 6.8571429253px 21.1399993896px 2.8599998951px #028bff45
}

.SellerRegister .main .shopType .active p {
    color: #fff
}

.SellerRegister .main .shopType .divider {
    height: 1px;
    background: var(--titr-low, #dfe1f3)
}

.SellerRegister .main .shopType .notif {
    color: var(--black-tint-2, #8b8b8b);
    text-align: justify;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.SellerRegister .main .fields .titr {
    color: var(--black, #3d3d3d);
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px
}

.SellerRegister .main .fields .gds-input, .SellerRegister .main .fields .gds-textarea {
    border-radius: 8px;
    border: 1px solid #e0e0e0
}

.SellerRegister .down {
    display: flex;
    justify-content: space-around
}

.SellerRegister .down .next {
    border-radius: 16px;
    background: var(--titr, #30357c);
    box-shadow: -8px 8px 16px 1px #30357c29;
    color: var(--white, #fff);
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    border: none
}

.SellerRegister .down .back {
    color: var(--titr, #30357c);
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    border: none;
    background-color: transparent
}

.SellerRegister .down .back:disabled {
    opacity: .2
}

.sellerHome .cards .item {
    border-radius: 24px;
    border: 1px solid #f2f3f6;
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    min-width: 265px;
    min-height: 295px
}

.sellerHome .cards .item .title {
    color: #3d3d3d;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px
}

.sellerHome .cards .item .type {
    border-radius: 24px;
    background: #f7f7f7;
    color: #3d3d3d;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px
}

.sellerHome .cards .item .link {
    overflow-x: hidden;
    color: #3d3d3d;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    border-right: 1px solid #e4e4e4;
    padding-right: 6px
}

.sellerHome .cards .item .t1 {
    color: #8b8b8b;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.sellerHome .cards .item .t2 {
    color: #3d3d3d;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.sellerHome .cards .item .dot {
    background-image: url(../images/seller/3dot.svg);
    background-repeat: repeat-x;
    height: 5px
}

.sellerHome .cards .addShop {
    border-radius: 24px;
    border: 1px dashed #c3c6e8;
    background: #fafcfe;
    min-width: 265px;
    min-height: 295px
}

.sellerHome .cards .addShop .titr {
    color: #30357c;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px
}

.sellerHome .cards .addShop .des {
    color: #8a90d2;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.userBnplPage .agreement {
    font-size: 14px;
    line-height: 35px
}

.userBnplPage .agreement li {
    text-align: right
}

.userBnplPage .form-check {
    padding: 0
}

.userBnplPage .form-check .form-check-input {
    margin-left: 10px;
    margin-top: 6px
}

.userBnplPage .cardView .item {
    max-width: 300px
}

.userBnplPage .discont {
    border: 1px solid #bdbdbd;
    box-sizing: border-box;
    border-radius: 24px;
    height: 56px
}

.userBnplPage .discont svg {
    width: 32px;
    height: 32px
}

.userBnplPage .discont .img {
    width: 40px;
    height: 40px
}

.userBnplPage .discont .code {
    max-width: 65%
}

.userBnplPage .discont .code .gds-input {
    border: none
}

.userBnplPage .discont input {
    border: none;
    height: 100%;
    text-align: center
}

.userBnplPage .discont input::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: right;
    color: #bdbdbd
}

.userBnplPage .discont input:focus {
    outline: none
}

.userBnplPage .discont button {
    background-color: #3d3d3d;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    border-radius: 30px
}

.userBnplPage .Tabs {
    top: 0;
    background-color: #fff;
    z-index: 1
}

.userBnplPage .Tabs .gds-btn-check {
    opacity: 0
}

.userBnplPage .Tabs .labels {
    background: #f7f7f7;
    border-radius: 0 0 8px 8px;
    border: none;
    width: 155px;
    margin: 5px
}

.userBnplPage .Tabs .labels input {
    display: none
}

@media screen and (max-width: 480px) {
    .userBnplPage .Tabs .labels {
        justify-content: center !important;
        width: fit-content;
        height: 63px;
        width: 80px;
        margin: 0 2px
    }

    .userBnplPage .Tabs .labels p, .userBnplPage .Tabs .labels input {
        display: none
    }
}

.userBnplPage .Tabs .labels p {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.userBnplPage .Tabs .labels img {
    padding: 5px;
    background: #fff;
    border-radius: 12px;
    width: 32px;
    height: 32px
}

.userBnplPage .Tabs .checked {
    background: #edf7ff;
    border: 1px solid #dfe1f3;
    border-top: 0;
    box-shadow: 0 6px 24px #2c3e501a
}

.userBnplPage .Tabs .checked p {
    color: #028bff
}

.userBnplPage .ghestCardsDiv .cardBody {
    max-width: 400px
}

.userBnplPage .ghestCardsDiv .cardBody label img {
    max-width: 80px;
    max-height: 80px;
    border-radius: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 3px solid #e4e4e4
}

.userBnplPage .ghestCardsDiv .cardBody {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 8px #2c3e500f;
    border: 2px solid #f3f3f3;
    transition: border-color .2s, box-shadow .2s;
    align-items: center;
    min-height: 110px;
    padding: 1.5rem 1.2rem 1.2rem;
    margin-bottom: 24px;
    direction: rtl
}

.userBnplPage .ghestCardsDiv .cardBody.selectedCard {
    border: 1px solid #10b981 !important;
    box-shadow: 0 4px 16px #10b98114;
    background-color: #f7fffb
}

.userBnplPage .ghestCardsDiv .cardBody:hover {
    box-shadow: 0 6px 24px #2c3e501a;
    border-color: #b2dfdb
}

.userBnplPage .ghestCardsDiv .ghestLabel {
    width: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: row-reverse;
    align-items: center
}

.userBnplPage .ghestCardsDiv .custom-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    width: 36px
}

.userBnplPage .ghestCardsDiv .custom-checkbox input[type=checkbox] {
    opacity: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index: 2
}

.userBnplPage .ghestCardsDiv .custom-checkbox .checkmark {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2.5px solid #2563eb;
    background: #fff;
    transition: border-color .2s, background .2s;
    position: relative;
    z-index: 1
}

.userBnplPage .ghestCardsDiv .custom-checkbox .checkmark.checked {
    border-color: #10b981;
    background: #10b981
}

.userBnplPage .ghestCardsDiv .custom-checkbox .checkmark.checked:after {
    content: "";
    display: block;
    position: absolute;
    left: 9px;
    top: 6px;
    width: 8px;
    height: 14px;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    border-radius: 2px;
    transform: rotate(45deg)
}

.userBnplPage .ghestCardsDiv .cardContent {
    padding-right: .5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between
}

.userBnplPage .ghestCardsDiv .amount-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: #222;
    display: flex;
    align-items: center
}

.userBnplPage .ghestCardsDiv .main-amount {
    color: #10b981 !important;
    font-weight: 600;
    font-size: 16px
}

.userBnplPage .ghestCardsDiv .strikethrough-amount {
    color: #b0b0b0 !important;
    text-decoration: line-through;
    font-size: 13px;
    margin-right: .5rem
}

.userBnplPage .ghestCardsDiv .date-text {
    font-size: 15px;
    color: #878787;
    margin-left: .5rem;
    font-weight: 300
}

.userBnplPage .ghestCardsDiv .shop-title {
    font-weight: 700;
    font-size: 15px;
    color: #222;
    text-align: right
}

.userBnplPage .ghestCardsDiv .shop-desc {
    color: #878787;
    font-size: 14px;
    font-weight: 300;
    text-align: right
}

@media (max-width: 600px) {
    .userBnplPage .ghestCardsDiv .cardBody {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem .5rem
    }

    .userBnplPage .ghestCardsDiv .ghestLabel {
        flex-direction: column;
        align-items: flex-start
    }

    .userBnplPage .ghestCardsDiv .cardContent {
        padding-right: 0;
        align-items: flex-start
    }
}

.userBnplPage .ghestCardsDiv .bulk-actions {
    border: 1px solid #f3f3f3;
    border-radius: 14px;
    padding: 10px;
    margin: 10px 0;
    background-color: #fff;
    max-width: 500px;
    box-shadow: 0 6px 24px #2c3e501a
}

.userBnplPage .ghestCardsDiv #headerPayButton {
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    padding: .7rem 0;
    width: 100%;
    max-width: 420px;
    background: #10b981;
    border: none
}

.userBnplPage .ghestCardsDiv #headerPayButton:disabled {
    background: #b0b0b0;
    color: #fff;
    opacity: .7
}

.GAlert {
    border-radius: 8px;
    max-width: 680px
}

.GAlert .icon {
    border-radius: 0 8px 8px 0;
    z-index: 1
}

.GAlert .title {
    border-radius: 8px 0 0 8px;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    position: relative
}

.GAlert .closeBtn {
    position: absolute;
    top: 10px;
    left: 10px;
    width: fit-content;
    height: fit-content
}

.GAlert .warning .icon {
    background: #e99717;
    box-shadow: -4px 0 #e997173b
}

.GAlert .warning .title {
    border: 1px solid #fff3e0;
    background: #fae7ca;
    color: #3d3d3d
}

.GAlert .danger .icon {
    background: #ff6f5e;
    box-shadow: -4px 0 #ff6f5e61
}

.GAlert .danger .title {
    background: #ffd8d4;
    color: #3d3d3d
}

.GAlert .success .icon {
    background: #16d8a4;
    box-shadow: -4px 0 #baf8e7
}

.GAlert .success .title {
    border: 1px solid #e8f5e9;
    background: #f0fdfa;
    color: #3d3d3d
}

.GAlert .info .icon {
    background: #028bff;
    box-shadow: -4px 0 #b3dcff
}

.GAlert .info .title {
    border: 1px solid #e1f5fe;
    background: #edf7ff;
    color: #3d3d3d
}

.numberBadge {
    background: #ff5900;
    color: #fff;
    padding: 1px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    text-align: center;
    position: absolute;
    right: -5px;
    top: -5px
}

.p-rel {
    position: relative
}

.p-abs {
    position: absolute
}

.p-fix {
    position: fixed
}

.btn-light {
    border: 1px solid #e4e4e4
}

.word-wrap, .long-text {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word
}

@media screen and (max-width: 1024px) {
    .long-text {
        width: 750px
    }
}

@media screen and (max-width: 768px) {
    .long-text {
        width: 600px
    }
}

@media screen and (max-width: 640px) {
    .long-text {
        width: 500px
    }
}

@media screen and (max-width: 480px) {
    .long-text {
        width: 300px
    }
}

@media screen and (min-width: 1024px) {
    .long-text {
        max-width: 1000px
    }
}

#ghest-delay-apexchart .apexcharts-tooltip-series-group {
    display: none !important
}

#ghest-delay-apexchart .apexcharts-tooltip-series-group:nth-child(4) {
    display: flex !important
}

.theme_yalda {
    background: #38135f;
    padding: 0;
    min-height: 100vh
}

.theme_yalda #LoginPage {
    background: transparent
}

.theme_yalda #LoginPage .melon_TOP {
    background-image: url(../images/landings/yalda/melon_top.svg);
    background-size: cover;
    background-position: bottom;
    height: 100px
}

.theme_yalda #LoginPage .LoginContent {
    height: fit-content
}

.theme_yalda #LoginPage .LoginContent .MainDiv {
    background-repeat: no-repeat;
    background-size: cover;
    background: #ff066a;
    margin: 60px 10px 10px !important;
    flex-wrap: wrap-reverse;
    max-height: fit-content
}

.theme_yalda #LoginPage .LoginContent .MainDiv .t1 {
    color: #fff;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: normal
}

.theme_yalda #LoginPage .LoginContent .MainDiv .t2 {
    color: #ffde00;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

@media screen and (max-width: 1280px) {
    .theme_yalda #LoginPage .LoginContent .MainDiv {
        max-width: 600px
    }
}

@media screen and (max-width: 850px) {
    .theme_yalda #LoginPage .LoginContent .MainDiv {
        width: 95%;
        max-width: 400px
    }
}

.theme_yalda #LoginPage .LoginContent #LoginRegister {
    margin: 0 !important
}

.theme_yalda #LoginPage .LoginContent #LoginRegister .text2 {
    color: #fff
}

@media screen and (min-width: 850px) and (max-width: 1360px) {
    .theme_yalda #LoginPage .LoginContent #LoginRegister {
        width: 400px
    }
}

.theme_yalda #LoginPage .LoginContent #LoginRegister .captchaButton img {
    border-radius: 6px
}

.theme_yalda #LoginPage .LoginContent #ConfirmPhoneComponent .text1, .theme_yalda #LoginPage .LoginContent #ConfirmPhoneComponent .text2, .theme_yalda #LoginPage .LoginContent #ConfirmPhoneComponent .smscode .light {
    color: #fff
}

.theme_yalda #LoginPage .LoginContent:before {
    display: none
}

.theme_yalda #LoginPage .LoginContent:after {
    display: none
}

.theme_yalda #LoginPage .auth_yalda {
    max-width: 840px;
    margin-top: -10% !important
}

.theme_yalda_panel {
    background: #38135f;
    background-image: url(../images/landings/yalda/single_patern_gray.svg)
}

@media screen and (max-width: 1360px) {
    .theme_yalda_panel #MainContent {
        margin-top: 80px !important;
        width: 88%
    }
}

@media screen and (max-width: 768px) {
    .theme_yalda_panel #MainContent {
        margin-top: 0 !important;
        width: 100%
    }
}

.theme_yalda_panel .centercontent .upshadow {
    border-radius: 0 0 24px 24px
}

@media screen and (max-width: 1360px) {
    .theme_yalda_panel .centercontent .CenterUpBar {
        height: fit-content;
        min-height: fit-content;
        border-radius: 0 0 24px 24px
    }
}

.theme_yalda_panel .centercontent .CenterUpBar .banner_cta {
    background: linear-gradient(0deg, #4d4078, #4d4078);
    height: 108px;
    position: relative;
    border-radius: 24px 24px 0 0;
    border: none
}

.theme_yalda_panel .centercontent .CenterUpBar .banner_cta img {
    min-height: 130px;
    max-height: 190px
}

.theme_yalda_panel .centercontent .CenterUpBar .banner_cta .bannerButton {
    background-image: url(../images/landings/yalda/banner_cta_button.svg);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: Pelak, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    z-index: 1;
    min-height: 55px
}

@media screen and (min-width: 768px) {
    .theme_yalda_panel .centercontent .CenterUpBar .banner_cta .titr {
        min-width: 331px
    }
}

.theme_yalda_panel .centercontent .CenterUpBar .banner_cta .titr .t1 {
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    color: #fff
}

.theme_yalda_panel .centercontent .CenterUpBar .banner_cta .titr .t2 {
    color: #96c887;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

@media screen and (max-width: 1360px) {
    .theme_yalda_panel .centercontent .CenterUpBar .banner_cta {
        border-radius: 0 0 24px 24px;
        flex-wrap: wrap;
        height: fit-content
    }

    .theme_yalda_panel .centercontent .CenterUpBar .banner_cta img {
        height: 100%;
        min-width: 300px
    }

    .theme_yalda_panel .centercontent .CenterUpBar .banner_cta .t1, .theme_yalda_panel .centercontent .CenterUpBar .banner_cta .t2 {
        margin: 10px 0 !important
    }
}

@media screen and (max-width: 768px) {
    .theme_yalda_panel .centercontent .CenterUpBar .banner_cta img {
        height: 100px;
        min-width: 250px;
        margin-top: -20px
    }

    .theme_yalda_panel .centercontent .CenterUpBar .banner_cta .t1 {
        margin: -20px 0 10px !important
    }

    .theme_yalda_panel .centercontent .CenterUpBar .banner_cta .t2 {
        font-size: 13px !important;
        margin-bottom: 10px !important
    }
}

.theme_yalda_panel .centercontent .CenterUpBar .banner_cta:after {
    content: "";
    width: 33%;
    height: 100%;
    position: absolute;
    background-image: url(../images/landings/yalda/banner_cta_star.png);
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: right;
    z-index: 0;
    right: 0
}

.theme_yalda_panel .centercontent .CenterUpBar .banner_cta:before {
    content: "";
    width: 33%;
    height: 100%;
    position: absolute;
    background-image: url(../images/landings/yalda/banner_cta_star.png);
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: right;
    z-index: 0;
    left: 0
}

@media screen and (max-width: 1360px) {
    .theme_yalda_panel {
        background: #fff
    }

    .theme_yalda_panel .centercontent .CenterUpBar {
        display: flex !important
    }

    .theme_yalda_panel .InitialInquiries #upshadow {
        justify-content: start !important;
        margin-top: 0 !important
    }
}

.theme_yalda_panel #header {
    background: #ff066a;
    background-image: url(../images/landings/yalda/single_patern.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    border-radius: 0 0 12px 12px
}

.theme_yalda_panel #header .titr {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 49px
}

.theme_yalda_panel #header .titr p {
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    color: #fff;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.theme_yalda_panel #header .header-icone .notification {
    background-color: #fff
}

@media screen and (max-width: 1360px) {
    .theme_yalda_panel #header .titr {
        height: fit-content
    }

    .theme_yalda_panel #header .titr p {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 79px
    }
}

@media screen and (max-width: 768px) {
    .theme_yalda_panel #header {
        display: flex !important;
        position: relative;
        background-size: cover
    }

    .theme_yalda_panel #header .titr p {
        height: 59px;
        font-size: 20px
    }
}

.theme_yalda_panel .showReward {
    margin-top: -3px;
    background: linear-gradient(0deg, #4d4078, #4d4078);
    border-radius: 0 0 30px 30px
}

.theme_yalda_panel .showReward .t1 {
    color: #ff9071;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.theme_yalda_panel .showReward .t2 {
    color: #ff9071;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.Landing_yalda {
    background: #38135f
}

.Landing_yalda .banner {
    background-image: url(../images/landings/yalda/melon_top.svg);
    height: 116px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

@media screen and (max-width: 568px) {
    .Landing_yalda .banner {
        height: 100px
    }
}

.Landing_yalda .footer {
    background-image: url(../images/landings/yalda/melon_bottom.svg);
    height: 116px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

@media screen and (max-width: 568px) {
    .Landing_yalda .footer {
        height: 100px
    }
}

.Landing_yalda .title1 .t1 {
    color: #96c887;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: normal
}

.Landing_yalda .title1 .t2 {
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 29px;
    font-style: normal;
    font-weight: 800;
    background: radial-gradient(50% 50% at 50% 50%, #ff9071, #ff066a);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media screen and (max-width: 768px) {
    .Landing_yalda .title1 .melon {
        max-width: 200px
    }
}

.Landing_yalda .spin .spinners {
    position: relative
}

.Landing_yalda .spin .spinners .backSpinner {
    max-height: 700px;
    margin-top: -100px
}

@media screen and (max-width: 768px) {
    .Landing_yalda .spin .spinners .backSpinner {
        max-height: 500px;
        margin-top: -60px
    }
}

@media screen and (max-width: 568px) {
    .Landing_yalda .spin .spinners .backSpinner {
        max-height: 300px;
        margin-top: -20px;
        width: 100vw;
        overflow: hidden
    }
}

.Landing_yalda .spin .spn #big {
    animation-name: ckw;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    transform-origin: 52% 47%;
    display: inline-block
}

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

.Landing_yalda .spin .spin_btn {
    border-radius: 40px;
    background: linear-gradient(270deg, #fbd02b 2.2%, #eaa104 99.82%);
    box-shadow: 0 4px 44px #efb12b75;
    border: none;
    color: #000;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    margin-top: -100px;
    z-index: 1
}

@media screen and (max-width: 768px) {
    .Landing_yalda .spin .spin_btn {
        font-size: 20px;
        margin-top: -80px
    }

    .Landing_yalda .spin .spin_btn svg {
        width: 48px;
        height: 48px
    }
}

@media screen and (max-width: 568px) {
    .Landing_yalda .spin .spin_btn {
        margin-top: -20px
    }
}

.Landing_yalda .spin .reward {
    width: 300px;
    height: 200px;
    background-image: url(../images/landings/yalda/reward.gif);
    margin-top: -100px
}

.Landing_yalda .spin .reward .t1 {
    color: #fff;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background: #38135f;
    border-radius: 100%;
    padding: 5px 0
}

.Landing_yalda .spin .reward .t2 {
    color: #ff066a;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: #38135f;
    border-radius: 24px;
    padding: 5px 0
}

@media screen and (max-width: 768px) {
    .Landing_yalda .spin .reward {
        margin-top: -50px
    }
}

.Landing_yalda .cta {
    background-image: url(../images/landings/yalda/cta_back.png);
    background-size: 100% 100%;
    min-height: 626px;
    background-repeat: no-repeat;
    background-position: center
}

@media screen and (max-width: 1280px) {
    .Landing_yalda .cta .logo {
        max-width: 200px
    }
}

@media screen and (max-width: 768px) {
    .Landing_yalda .cta .logo {
        max-width: 120px
    }
}

.Landing_yalda .cta .des .t1 {
    color: #c3c6e8;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px
}

.Landing_yalda .cta .des .t2 {
    color: #fff;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.Landing_yalda .cta .des .t3 {
    color: var(--White, #fff);
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    max-width: 576px
}

.Landing_yalda .cta .des .NiceButton {
    max-width: fit-content
}

.Landing_yalda .cta .des .gocalc {
    border-radius: 24px;
    background: radial-gradient(50% 50% at 50% 50%, #ff9071, #ff066a);
    color: var(--White, #fff);
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    height: 64px
}

@media screen and (max-width: 768px) {
    .Landing_yalda .cta .des .t1 {
        font-size: 20px
    }

    .Landing_yalda .cta .des .t2 {
        font-size: 28px
    }

    .Landing_yalda .cta .des .t3 {
        font-size: 14px;
        max-width: 400px
    }
}

.Landing_yalda .players {
    background-image: url(../images/landings/yalda/players_back.png);
    background-size: 100% 100%;
    min-height: 626px;
    background-repeat: no-repeat;
    background-position: center
}

.Landing_yalda .players .t1 {
    color: #c3c6e8;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px
}

.Landing_yalda .players .t2 {
    color: #fff;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.Landing_yalda .players .main .mainCard {
    width: 260px;
    height: 170px;
    position: relative
}

.Landing_yalda .players .main .mainCard .cart {
    border-radius: 30px;
    background: #420484;
    box-shadow: 2px 0 #16d8a4;
    width: 230px;
    height: 120px
}

.Landing_yalda .players .main .mainCard .cart .t1 {
    color: var(--White, #fff);
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.Landing_yalda .players .main .mainCard .cart .t2 {
    color: #7e8fb8;
    text-align: right;
    font-family: Pelak, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.Landing_yalda .players .main .mainCard .cart .logo {
    border-radius: 12px
}

.Landing_yalda .players .main .mainCard .discount {
    position: absolute;
    width: 70px;
    height: 70px;
    background: #fff;
    top: 0;
    left: 0;
    border-radius: 50% 50% 0;
    color: #420484;
    text-align: center;
    font-family: Pelak, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    align-items: center;
    justify-content: center
}

.Landing_yalda .players .main .HomePageSwiper {
    min-height: 300px
}

@media screen and (max-width: 768px) {
    .Landing_yalda .players .t1 {
        font-size: 20px
    }

    .Landing_yalda .players .t2 {
        font-size: 28px
    }
}

.Landing_yalda .Calculator-landing {
    background: #f2f3f6
}

.Landing_yalda .Calculator-landing .UP {
    background: #ff066a;
    background-image: url(../images/landings/yalda/single_patern_white.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top
}

.Landing_yalda .Calculator-landing .UP #CalculatorLanding-wave {
    display: none
}

.Landing_yalda .Calculator-landing .UP .Status .uperDiv {
    fill: #fafcfeb3;
    filter: drop-shadow(0px 0 90px rgba(0, 0, 0, .18));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px)
}

.Landing_yalda .Calculator-landing .UP .Status .uperDiv .toman {
    width: 20px;
    height: 20px
}

.otpValidator {
    background: #fff;
    box-shadow: -14px 9px 40px 1px #30357c0a;
    border-radius: 24px;
    position: relative;
    max-height: fit-content;
    z-index: 1
}

@media screen and (max-width: 850px) {
    .otpValidator {
        align-items: center;
        justify-content: center;
        width: fit-content
    }

    .otpValidator .NiceButton {
        min-width: 200px
    }
}

.GatewayPages .LoginContent {
    height: fit-content !important;
    min-height: 100vh !important;
    background-color: #fafcfe
}

.GatewayPages .LoginContent:after {
    transform: rotate(180deg);
    content: "" !important;
    width: 20% !important;
    height: 65% !important;
    position: absolute !important;
    background-image: url(../images/BeforVector.svg) !important;
    background-size: 65% !important;
    background-repeat: no-repeat !important;
    background-position: right !important;
    z-index: 0 !important;
    left: 0 !important
}

@media screen and (max-width: 768px) {
    .GatewayPages .LoginContent:after {
        width: 50% !important
    }
}

@media screen and (max-width: 480px) {
    .GatewayPages .LoginContent:after {
        display: none !important
    }
}

.GatewayPages .LoginContent #MainDiv {
    margin: auto !important
}

.GatewayPages .LoginContent #LoginRegister, .GatewayPages .LoginContent #ConfirmPhoneComponent {
    margin: 0 !important
}

.BnplCard {
    direction: rtl;
    background: transparent;
    border: 1px solid #f2f3f6;
    border-radius: 24px;
    max-width: 350px
}

.BnplCard .right {
    background: #fafcfe;
    border: 1px solid #f2f3f6;
    box-shadow: 0 16px 36px 1px #30357c08;
    border-radius: 0 0 24px 24px;
    padding: 20px !important
}

.BnplCard .right .t1 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8a90d2
}

.BnplCard .right .t2 {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    color: #30357c
}

.BnplCard .left {
    background: #003461;
    box-shadow: 0 16px 36px 1px #30357c0f;
    border-radius: 24px 24px 0 0;
    padding: 20px 20px 0 !important
}

.BnplCard .left .div2 .num {
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 30px;
    text-align: center;
    color: #3d3d3d
}

.BnplCard .left .div2 .blur {
    filter: blur(3px)
}

.BnplCard .img1 {
    width: 108px;
    height: 32px
}

.BnplCard .img2 {
    width: 45px;
    height: 32px
}

.home_page .banner .bannerItems {
    background-color: #fff;
    color: #686868;
    border-radius: 24px;
    border: none;
    font-size: 15px;
    font-weight: 400
}

.home_page .banner .bannerItems img {
    max-width: 180px;
    border-radius: 100%;
    border: 4px solid #f3f0f0;
    aspect-ratio: 1.1
}

@media screen and (max-width: 1360px) {
    .home_page .banner .bannerItems img {
        max-width: 140px
    }
}

@media screen and (max-width: 768px) {
    .home_page .banner .bannerItems img {
        max-width: 100px;
        aspect-ratio: 1.1;
        width: 90px;
        height: 90px
    }
}

.userCardAddressDetail {
    max-width: 500px
}

.userCardAddressDetail .div1 {
    background: #fff;
    border-bottom: 1px solid #f2f3f6;
    box-shadow: 3px 9px 50px 1px #00569f0f;
    border-radius: 24px
}

.userCardAddressDetail {
    background: #fff;
    border: 1px solid #f2f3f6;
    border-radius: 24px
}

.userCardAddressDetail .titr {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #028bff
}

.userCardAddressDetail .lightText {
    font-style: normal;
    font-weight: 300;
    font-size: 11px;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b
}

.userCardAddressDetail .boldText {
    padding: 0 !important;
    border-radius: 16px;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d
}

.manageCards_page #LeftsideGhestacard {
    height: fit-content
}

@media screen and (max-width: 1360px) {
    .manageCards_page #LeftsideGhestacard {
        display: flex !important
    }
}

.withdrawCashPage .withdrawImage {
    max-width: 400px
}

.withdrawCashPage .shebaDiv {
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 4px 8px #0000001a
}

.withdrawCashPage .shebaDiv button {
    font-size: 15px
}

.withdrawCashPage .shebaDiv input::-webkit-outer-spin-button, .withdrawCashPage .shebaDiv input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.withdrawCashPage .shebaDiv input[type=number] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield
}

.withdrawCashPage .shebaDiv .card {
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 4px 8px #0000001a;
    padding: 20px;
    display: inline-block
}

.withdrawCashPage .shebaDiv input {
    font-size: 13px !important;
    margin: 5px;
    text-align: center;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    padding: 10px
}

.withdrawCashPage .shebaDiv .IR {
    background-color: #b8a9a9;
    border-radius: 6px;
    height: 40px
}

.withdrawCashPage .shebaDiv .table-responsive {
    border-radius: 8px
}

.bnplToCard .title {
    max-width: 600px;
    font-size: 15px;
    font-weight: 400;
    text-align: justify
}

.bnplToCard .CounterDiv {
    border: 1px solid #bdbdbd;
    border-radius: 12px
}

.bnplToCard #LeftsideGhestacard {
    display: flex !important
}

.noButton {
    padding: 0;
    border: none;
    background: transparent
}

.confirmPayment {
    border: none;
    border-radius: 12px;
    background-color: #6bb66e;
    font-size: 14px;
    padding: 12px 16px;
    margin: 12px 32px 12px 0 !important;
    color: #fff
}

.confirmPayment:hover {
    background-color: #4e923e;
    color: #fff
}

.information {
    background-color: #fafcfe;
    border-radius: 12px;
    font-size: 14px;
    border: 1px dashed rgb(94, 90, 90);
    color: #575757
}

.cancellPaymentButton {
    border: none;
    border-radius: 12px;
    background-color: #ff7158;
    font-size: 14px;
    padding: 12px 16px;
    margin: 12px 32px 12px 0 !important;
    color: #fff
}

.cancellPaymentButton:hover {
    background-color: #f84a33;
    color: #fff
}

.choose {
    background-color: #fff;
    position: relative;
    z-index: 2;
    border-radius: 24px;
    border: 1px solid #e3e3e3
}

.credit_card_mode {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 280px;
    height: 154px;
    background-color: #0040ff;
    border-radius: 16px;
    background-image: url(../images/Bnpl/credit_card_pattern_dark.svg);
    background-size: cover;
    color: #fff;
    font-size: 14px;
    padding: 15px
}

.selected {
    filter: none;
    color: #fff
}

.confirmModeButton {
    border: none;
    border-radius: 12px;
    background-color: #12af66;
    color: #fff;
    font-size: 14px;
    max-width: 280px;
    padding: 12px 16px;
    width: 100%;
    margin: 12px 32px 12px 0 !important
}

.confirmModeButton:hover {
    background-color: #1a8b4d;
    color: #fff
}

.confirmModeButton:disabled {
    opacity: .5
}

.wallet_radio {
    width: 32px;
    height: 32px;
    background-image: none;
    background-color: unset
}

.wallet_radio:checked[type=radio] {
    background-image: url(../images/tick.svg);
    background-color: #00579f;
    background-size: 70%;
    outline: none;
    box-shadow: none;
    border: none
}

.chooseWalletInfoDiv {
    background-color: #dfdfdf;
    border-radius: 0 0 24px 24px;
    z-index: 1;
    margin-top: -20px
}

.detailwallet {
    font-size: 15px;
    max-width: 280px;
    text-align: justify;
    font-weight: 300;
    padding: 35px 15px 20px;
    color: #504646
}

.disable {
    opacity: .4
}

.UserFactorDetail {
    max-width: 600px;
    margin: auto;
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px #0000000f;
    font-family: Pelak;
    font-size: 15px
}

.UserFactorDetail .accordion-header {
    cursor: pointer;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0f0f0;
    border-radius: 12px;
    position: relative
}

.UserFactorDetail .accordion-header button {
    background: transparent;
    border: none;
    box-shadow: none
}

.UserFactorDetail .accordion-header button:after {
    margin-left: 0;
    position: absolute;
    left: 0
}

.UserFactorDetail .collapsing {
    width: 100% !important;
    -webkit-transition: height 2s ease;
    -o-transition: height 2s ease;
    transition: height 2s ease
}

.UserFactorDetail .label {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    color: #8b8b8b;
    -webkit-user-select: none;
    user-select: none;
    direction: rtl;
    min-width: fit-content
}

.UserFactorDetail .value {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 28px;
    color: #3d3d3d
}

.UserFactorDetail .quantity .arrow {
    background: #8d8d8d
}

.UserFactorDetail .quantity .arrow:hover {
    background-color: #000
}

.UserFactorDetail .returnDiv {
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    padding: 5px 10px
}

.UserFactorDetail .returnDescription p {
    margin: 2px 0 5px;
    padding: 0 3px 0 0;
    font-size: 13px;
    color: red
}

.UserInformationVerify {
    max-width: 340px;
    border-radius: 24px;
    border-color: #dfe1f3;
    background-color: #f2f3f6
}

.UserInformationVerify .discont button {
    background-color: #3d3d3d;
    color: #fff;
    border-radius: 12px
}

.postal-code-inquiry .input-form {
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 16px;
    height: 48px;
    padding: 0 10px;
    margin: 5px 0;
    font-size: 14px
}

.postal-code-inquiry .input-form .input-error {
    bottom: -33px
}

.postal-code-inquiry .input-form .gds-input-wrapper {
    width: 80%
}

.postal-code-inquiry .input-form .gds-input-wrapper .input-field {
    border: none
}

.postal-code-inquiry .input-form .gds-input-wrapper .input-field:focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    inset: unset
}

.postal-code-inquiry .input-form #postalCodeInquiry {
    font-size: 13px;
    border-radius: 10px
}

.postal-code-inquiry .address-inquiry {
    background: #ecf0f3;
    border-radius: 16px
}

.loan-questionnaire .review-section .list-group-item {
    border-color: #f1f1f1
}

.loan-questionnaire .progress-bar {
    background: linear-gradient(90deg, #50cd89, #14b8a6)
}

.loan-questionnaire .loan-questionnaire {
    direction: rtl;
    font-family: IRANSans, Vazir, sans-serif
}

.loan-questionnaire .selected-option {
    background-color: #0199845c;
    color: #000
}

.loan-questionnaire .option {
    background-color: #fff;
    border-color: #d9d9d9;
    color: #666;
    font-weight: 300
}

.loan-questionnaire .option:hover {
    background-color: #aad6cb5c;
    color: #000
}

.loan-questionnaire .next-button {
    background-color: #007bab;
    color: #fff
}

#pdfmodal .modal-content {
    height: 100%
}

.install-pwa-modal-body {
    max-width: 100%;
    padding: 0 1rem 1.5rem
}

.install-pwa-modal-divider {
    height: 1px;
    background: #e4e4e4;
    margin: 0 0 1.25rem
}

.install-pwa-modal-desc {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    color: #666
}

.install-pwa-modal-actions {
    gap: .75rem !important
}

.install-pwa-btn {
    padding: .6rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    min-width: 120px
}

.install-pwa-btn--primary {
    background: #c41e3a;
    color: #fff
}

.install-pwa-btn--primary:hover:not(:disabled) {
    background: #a31930;
    color: #fff
}

.install-pwa-btn--secondary {
    background: #fff;
    color: #c41e3a;
    border: 1.5px solid #c41e3a
}

.install-pwa-btn--secondary:hover {
    background: #fff5f6;
    color: #a31930;
    border-color: #a31930
}

.install-pwa-modal-box.modal-content {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px #0000001f
}

.install-pwa-modal-box .modal-head p {
    font-weight: 700;
    color: #313131
}

.permission-modal-body {
    max-width: 100%;
    padding: 0 1rem 1.5rem
}

.permission-modal-divider {
    height: 1px;
    background: #e4e4e4;
    margin: 0 0 1.25rem
}

.permission-modal-desc {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    color: #666
}

.permission-modal-actions {
    gap: .75rem !important
}

.permission-modal-btn {
    padding: .6rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    min-width: 120px
}

.permission-modal-btn--primary {
    background: #c41e3a;
    color: #fff
}

.permission-modal-btn--primary:hover:not(:disabled) {
    background: #a31930;
    color: #fff
}

.permission-modal-btn--secondary {
    background: #fff;
    color: #c41e3a;
    border: 1.5px solid #c41e3a
}

.permission-modal-btn--secondary:hover {
    background: #fff5f6;
    color: #a31930;
    border-color: #a31930
}

.permission-modal-box.modal-content {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px #0000001f
}

.permission-modal-box .modal-head p {
    font-weight: 700;
    color: #313131
}

.consulting-feedback-modal__body {
    max-width: 520px;
    margin: 0 auto
}

.consulting-feedback-modal__question {
    font-size: .95rem;
    color: #2c3e50;
    line-height: 1.7
}

.consulting-feedback-modal__ratings {
    flex-wrap: wrap;
    justify-content: center
}

.consulting-feedback-modal__rating {
    flex: 1 1 60px;
    min-width: 60px;
    max-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .75rem .35rem;
    border: 1.5px solid #e3e8ef;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease
}

.consulting-feedback-modal__rating.is-selected {
    border-color: #3dbda8;
    box-shadow: 0 0 0 1px #3dbda8
}

.consulting-feedback-modal__emoji {
    font-size: 1.75rem;
    line-height: 1
}

.consulting-feedback-modal__label {
    font-size: .78rem;
    color: #4a5568;
    white-space: nowrap
}

.consulting-feedback-modal__sorry {
    font-size: .9rem;
    color: #777a81;
    font-weight: 300
}

.consulting-feedback-modal__field {
    position: relative
}

.consulting-feedback-modal__field-label {
    position: absolute;
    top: -.65rem;
    right: 1rem;
    background: #fff;
    padding: 0 .35rem;
    font-size: .82rem;
    color: #6b7280;
    z-index: 1
}

.consulting-feedback-modal__textarea {
    border-radius: 14px;
    border: 1.5px solid #e3e8ef;
    padding: 1rem .85rem 1.75rem;
    resize: none;
    font-size: .9rem
}

.consulting-feedback-modal__textarea:focus {
    border-color: #3dbda8;
    box-shadow: none
}

.consulting-feedback-modal__counter {
    position: absolute;
    left: .85rem;
    bottom: .55rem;
    font-size: .75rem;
    color: #9ca3af
}

.consulting-feedback-modal__actions {
    margin-top: .5rem
}

.consulting-feedback-modal__btn {
    border-radius: 14px;
    padding: .75rem 1rem;
    font-size: .95rem;
    font-weight: 500;
    border: none
}

.consulting-feedback-modal__btn--outline {
    background: #fff;
    color: #3dbda8;
    border: 1.5px solid #3dbda8
}

.consulting-feedback-modal__btn--primary {
    background: #3dbda8;
    color: #fff
}

.consulting-feedback-modal__btn--primary:disabled {
    opacity: .55
}

.consulting-feedback-modal__content.modal-content {
    border-radius: 18px;
    overflow: hidden
}

.consulting-feedback-modal .modal-head p {
    font-weight: 700;
    color: #1f2937
}

.closeButton .close {
    position: absolute;
    top: 2px;
    right: 2px;
    border-radius: 24px;
    border: none
}

.input-select-dropdown-wrapper {
    position: relative
}

.input-select-dropdown {
    width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px #00000026;
    margin-top: 4px
}

.input-select-dropdown.dropdown-enter-active {
    transition: all .3s ease-out;
    animation: inputSelectDropdownSlideDown .3s ease-out
}

.input-select-dropdown.dropdown-leave-active {
    transition: all .25s ease-in;
    animation: inputSelectDropdownSlideUp .25s ease-in
}

.input-select-dropdown.dropdown-enter-from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0
}

.input-select-dropdown.dropdown-enter-to, .input-select-dropdown.dropdown-leave-from {
    opacity: 1;
    transform: translateY(0);
    max-height: 300px
}

.input-select-dropdown.dropdown-leave-to {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0
}

.input-select-dropdown .MultiSelect {
    background: #fff;
    height: 100%;
    border-radius: 16px
}

@keyframes inputSelectDropdownSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(.95)
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes inputSelectDropdownSlideUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(.95)
    }
}

.input-toggle {
    cursor: pointer;
    display: flex;
    align-items: center
}

.input-toggle .label {
    margin-left: 12px;
    color: #1a202c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.input-toggle .input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.input-toggle .switch {
    --switch-container-width: 50px;
    --switch-size: calc(var(--switch-container-width) / 2);
    --light-gray: #e2e8f0;
    --gray: #cbd5e0;
    --dark-gray: #a0aec0;
    --teal: #16d8a4;
    --dark-teal: #319795;
    display: flex;
    align-items: center;
    position: relative;
    height: var(--switch-size);
    flex-basis: var(--switch-container-width);
    border-radius: var(--switch-size);
    background-color: var(--light-gray);
    flex-shrink: 0;
    transition: background-color .25s ease-in-out
}

.input-toggle .switch:before {
    content: "";
    position: absolute;
    left: 1px;
    height: calc(var(--switch-size) - 4px);
    width: calc(var(--switch-size) - 4px);
    border-radius: 9999px;
    background-color: #fff;
    border: 2px solid var(--light-gray);
    transition: transform .375s ease-in-out
}

.input-toggle .input:checked + .switch {
    background-color: var(--teal)
}

.input-toggle .input:checked + .switch:before {
    border-color: var(--teal);
    transform: translate(calc(var(--switch-container-width) - var(--switch-size)))
}

.input-toggle .input:focus + .switch:before {
    border-color: var(--gray)
}

.input-toggle .input:focus:checked + .switch:before {
    border-color: var(--dark-teal)
}

.input-toggle .input:disabled + .switch {
    background-color: var(--gray)
}

.input-toggle .input:disabled + .switch:before {
    background-color: var(--dark-gray);
    border-color: var(--dark-gray)
}

.color-picker-wrapper {
    width: 100%;
    touch-action: none;
    display: flex;
    justify-content: center;
    align-items: center
}

.color-picker-wrapper * {
    touch-action: none
}

.wallet-cards-panel .choose {
    background-color: #fff;
    position: relative;
    border-radius: 24px
}

.wallet-cards-panel .credit_card_modes {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 280px;
    height: 160px;
    background: transparent;
    border-radius: 16px;
    -webkit-user-select: none;
    user-select: none;
    color: #fff;
    font-size: 14px;
    padding: 15px;
    font-weight: 400;
    box-shadow: 0 14px 45px 25px #2f39441f;
    margin: 5px;
    background-image: url(../images/Bnpl/credit_card_pattern_dark.svg);
    background-size: cover
}

.wallet-cards-panel .selected {
    filter: none;
    color: #fff
}

.wallet-cards-panel .disable {
    opacity: .4
}

.wallet-cards-panel .ctaButtons {
    border: none;
    background-color: #fff;
    border-radius: 8px;
    width: fit-content;
    padding: 2px 5px;
    font-size: 14px
}

.wallet-cards-panel .amount {
    font-size: 20px
}

.wallet-cards-panel .card-blue {
    background-color: #2571cf
}

.wallet-cards-panel .card-green {
    background-color: #25c7a1
}

.wallet-cards-panel .card-red {
    background-color: #e35353
}

.wallet-cards-panel .card-purple {
    background-color: #d575c9
}

.wallet-cards-panel .card-indigo {
    background-color: #908be9
}

.closeLoop .cls-1 {
    fill: #fff
}

.closeLoop .cls-1, .closeLoop .cls-2 {
    stroke-width: 0px
}

.closeLoop .cls-2 {
    fill: #028bff
}

.closeLoop .cls-3, .openLoop .cls-1 {
    fill: #028bff;
    stroke-width: 0px
}

.openLoop .st0 {
    fill: #028bff
}

.openLoop .st1 {
    fill: #fff
}

.openLoop .st2 {
    display: none
}

.openLoop .st3 {
    display: inline
}

.BaamGuide .up {
    background: #1f1f1f !important;
    color: #fff
}

.BaamGuide .headerLogoWrapper {
    display: inline-block;
    padding: 15px 12px;
    background: #f49020;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    pointer-events: all
}

.BaamGuide .descrip {
    color: #ffeeeead !important;
    font-weight: 300 !important
}

.BaamGuide .headerLogo {
    display: inline-block;
    height: 45px
}

.BaamGuide .headerLogoType {
    height: 15px;
    display: block
}

.width-100 {
    width: 100px !important
}

.icsChart {
    max-width: 400px
}

.icsChart .card {
    border: 1px solid #d6d7db;
    border-radius: 12px;
    box-shadow: -20px 40px 40px 1px #30357c0a
}

.icsChart .card-header {
    background-color: #004887;
    color: #fff;
    border-radius: 12px 12px 0 0
}

.icsChart .chart {
    min-height: 250px
}

.icsChart .ag-charts-canvas-center, .icsChart .ag-charts-series-area {
    width: 366px !important;
    height: 250px !important;
    max-width: 366px;
    max-height: 250px;
    aspect-ratio: 1.1
}

.icsChart .ag-charts-canvas-container canvas {
    width: 366px !important;
    height: 250px !important;
    max-width: 366px;
    max-height: 250px;
    aspect-ratio: 1.1
}

.icsChart .ag-chart-overlay {
    left: 20px;
    top: 20px;
    width: 326px;
    height: 210px
}

.icsChart .t1 {
    font-size: 20px;
    font-weight: 600;
    border: 1px solid #e4e4e4;
    width: 50px;
    height: 50px;
    border-radius: 100%
}

.icsChart .t2 {
    font-size: 16px;
    font-weight: 500
}

.consulting-container {
    border: 1px solid #d6d7db;
    border-radius: 12px;
    box-shadow: -20px 40px 40px 1px #30357c0a
}

.consulting-container .consulting-title {
    background-color: #004887;
    color: #fff;
    border-radius: 12px 12px 0 0;
    height: 45px
}

.global-settings-page {
    min-height: calc(100vh - 120px)
}

.global-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .35rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e8edf3;
    box-shadow: 0 2px 12px #0f172a0a
}

.global-settings-tabs__btn {
    flex: 1 1 auto;
    min-width: 140px;
    padding: .85rem 1.25rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease
}

.global-settings-tabs__btn:hover:not(.global-settings-tabs__btn--active) {
    background: #eef4ff;
    color: #2563eb
}

.global-settings-tabs__btn--active {
    background: linear-gradient(135deg, #0d6efd, #3b82f6);
    color: #fff;
    box-shadow: 0 4px 14px #0d6efd59
}

.global-settings-tabs__btn--active:hover {
    background: linear-gradient(135deg, #0b5ed7, #2563eb);
    color: #fff;
    box-shadow: 0 6px 16px #0d6efd66
}

.global-settings-panel {
    overflow: hidden;
    border: 1px solid #e8edf3
}

.global-settings-panel__content--padded {
    padding: 1.75rem
}

.global-settings-panel__column + .global-settings-panel__column {
    border-top: 1px solid #edf0f2
}

.global-settings-panel__footer {
    display: flex;
    justify-content: center;
    padding: 1.25rem 1.5rem 1.75rem;
    border-top: 1px solid #edf0f2;
    background: #fafbfc
}

@media screen and (min-width: 992px) {
    .global-settings-panel__column + .global-settings-panel__column {
        border-top: none;
        border-right: 1px solid #edf0f2
    }
}

.settings-section {
    padding: 1.5rem 2rem
}

.settings-section__title {
    font-weight: 600;
    color: #212529
}

.settings-section__label {
    font-size: .95rem;
    color: #666;
    margin: 0
}

.settings-section__grades {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    justify-content: start;
    align-items: center;
    gap: .75rem 1rem;
    direction: ltr
}

.settings-section__grade {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: 0;
    cursor: pointer;
    font-size: .95rem;
    padding: .5rem .65rem;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    transition: all .15s ease
}

.settings-section__grade:has(.form-check-input:checked) {
    background: #e7f1ff;
    border-color: #0d6efd;
    color: #0d6efd;
    font-weight: 600
}

.settings-section__grade:hover:not(:has(.form-check-input:checked)) {
    background: #f8fbff;
    border-color: #93c5fd;
    color: #2563eb
}

.settings-section__row {
    display: grid;
    grid-template-columns:1fr 72px 48px;
    align-items: center;
    gap: 1rem;
    padding: .85rem 0;
    border-top: 1px solid #edf0f2
}

.settings-section__row-label {
    font-size: .92rem;
    color: #666
}

.settings-section__input {
    max-width: 72px;
    text-align: center;
    padding: .35rem .5rem
}

.settings-section__unit {
    font-size: .85rem;
    color: #8b8b8b;
    text-align: start
}

@media screen and (max-width: 992px) {
    .settings-section {
        padding: 1rem
    }

    .settings-section__grades {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

.setting-item-field + .setting-item-field {
    margin-top: .25rem
}

.setting-item-field__label {
    font-size: .95rem;
    color: #666;
    margin: 0 0 .75rem
}

.setting-item-field__grades {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    justify-content: start;
    align-items: center;
    gap: .75rem 1rem;
    direction: ltr;
    margin-bottom: 1rem
}

.setting-item-field__grade {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: 0;
    cursor: pointer;
    font-size: .95rem;
    padding: .5rem .65rem;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    transition: all .15s ease
}

.setting-item-field__grade:has(.form-check-input:checked) {
    background: #e7f1ff;
    border-color: #0d6efd;
    color: #0d6efd;
    font-weight: 600
}

.setting-item-field__row {
    display: grid;
    grid-template-columns:1fr 120px;
    align-items: center;
    gap: 1rem;
    padding: .85rem 0;
    border-top: 1px solid #edf0f2
}

.setting-item-field__row-label {
    font-size: .92rem;
    color: #666
}

.setting-item-field__input {
    max-width: 120px;
    text-align: center;
    padding: .35rem .5rem;
    justify-self: end
}

.setting-item-field__number-input {
    max-width: 180px;
    justify-self: end
}

.setting-item-field__select-card {
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    padding: 1.25rem 1rem;
    min-height: 180px;
    display: flex;
    flex-direction: column
}

.setting-item-field__select-card--grid {
    min-height: 220px
}

.setting-item-field__select-title {
    text-align: center;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #e2e8f0
}

.setting-item-field__select-options {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    flex: 1
}

.setting-item-field__select-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    border-radius: 10px;
    border: 1.5px solid #e8edf3;
    background: #fff;
    cursor: pointer;
    margin: 0;
    transition: background .15s ease, border-color .15s ease
}

.setting-item-field__select-option--selected {
    background: #e7f1ff;
    border-color: #0d6efd;
    color: #0d6efd;
    font-weight: 600
}

.setting-item-field__radio {
    width: 1rem;
    height: 1rem;
    accent-color: #0d6efd;
    flex-shrink: 0
}

.settings-category-panel__items {
    display: grid;
    gap: 1.25rem
}

.settings-category-panel__items--inquiry_services, .settings-category-panel__items--service_prices {
    grid-template-columns:repeat(3, minmax(0, 1fr))
}

@media screen and (max-width: 992px) {
    .setting-item-field__grades {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .settings-category-panel__items--inquiry_services, .settings-category-panel__items--service_prices {
        grid-template-columns:1fr
    }
}

.inquiry-services__grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 1.25rem
}

.inquiry-services__card {
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    padding: 1.25rem 1rem;
    min-height: 220px;
    display: flex;
    flex-direction: column
}

.inquiry-services__card-title {
    text-align: center;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #e2e8f0
}

.inquiry-services__options {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    flex: 1
}

.inquiry-services__option {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    border-radius: 10px;
    border: 1.5px solid #e8edf3;
    background: #fff;
    cursor: pointer;
    margin: 0;
    transition: background .15s ease, border-color .15s ease, color .15s ease
}

.inquiry-services__option:hover:not(.inquiry-services__option--selected) {
    background: #eef4ff;
    border-color: #93c5fd
}

.inquiry-services__option:hover:not(.inquiry-services__option--selected) .inquiry-services__option-label {
    color: #2563eb
}

.inquiry-services__option--selected {
    background: #e7f1ff;
    border-color: #0d6efd
}

.inquiry-services__radio {
    width: 1rem;
    height: 1rem;
    accent-color: #0d6efd;
    cursor: pointer;
    flex-shrink: 0
}

.inquiry-services__option-label {
    font-size: .92rem;
    color: #334155;
    transition: color .15s ease
}

.inquiry-services__option--selected .inquiry-services__option-label {
    color: #0d6efd;
    font-weight: 600
}

@media screen and (max-width: 992px) {
    .inquiry-services__grid {
        grid-template-columns:1fr
    }
}

.service-prices__grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 1.25rem
}

.service-prices__card {
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-height: 200px
}

.service-prices__title {
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    text-align: center
}

.service-prices__input-wrap {
    width: 100%;
    max-width: 180px
}

.service-prices__save {
    min-width: 88px;
    border-radius: 10px;
    background: #64748b;
    color: #fff;
    border: none;
    padding: .45rem 1.25rem;
    transition: background .15s ease
}

.service-prices__save:hover {
    background: #1e293b;
    color: #fff
}

@media screen and (max-width: 992px) {
    .service-prices__grid {
        grid-template-columns:1fr
    }
}

.admin-accounting-page .category-section {
    min-height: 400px
}

.admin-accounting-page .category-section.animate__fadeIn {
    animation-duration: .4s
}

.admin-accounting-page .category-header h4 {
    font-size: 1.5rem
}

.accounting-tabs {
    border-bottom: 2px solid #e4e4e4;
    padding-bottom: 0
}

.accounting-tabs .tab-button {
    padding: 12px 24px;
    border: none;
    background: transparent;
    color: #8b8b8b;
    font-weight: 500;
    font-size: 15px;
    border-radius: 8px 8px 0 0;
    transition: all .3s ease;
    position: relative;
    cursor: pointer;
    border-bottom: 3px solid transparent
}

.accounting-tabs .tab-button:hover {
    background: #f7f7f7;
    color: #666
}

.accounting-tabs .tab-button.active {
    color: #0d6efd;
    background: #e7f1ff;
    border-bottom-color: #0d6efd
}

.accounting-tabs .tab-button i {
    font-size: 16px
}

.tableActionModals .item.active {
    background-color: #124a72;
    color: #fff;
    border-radius: 12px
}

.push-details {
    color: #3d3d3d;
    font-weight: 400
}

.push-details__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    color: #8b8b8b;
    font-weight: 300
}

.push-details__muted {
    color: #8b8b8b;
    font-weight: 300
}

.push-label {
    display: block;
    font-size: .72rem;
    font-weight: 300;
    letter-spacing: .03em;
    color: #8b8b8b;
    margin-bottom: .2rem
}

.push-value {
    display: block;
    font-size: .95rem;
    font-weight: 400;
    color: #3d3d3d;
    line-height: 1.5
}

.push-subtle {
    display: block;
    margin-top: .15rem;
    font-size: .75rem;
    font-weight: 300;
    color: #bdbdbd
}

.push-link {
    color: #00569f;
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 86, 159, .35);
    transition: color .2s ease, border-color .2s ease
}

.push-link:hover {
    color: #002c51;
    border-bottom-color: #002c51
}

.push-hero {
    display: grid;
    grid-template-columns:minmax(180px, 270px) 1fr;
    gap: 0;
    overflow: hidden;
    border-radius: 1.75rem .65rem;
    background: radial-gradient(circle at 90% 10%, rgba(2, 139, 255, .1), transparent 30%), linear-gradient(135deg, #fff, #edf7ff 55%, #fafcfe);
    border: 1px solid rgba(0, 86, 159, .12);
    border-bottom-width: 2px;
    border-bottom-color: #00569f33;
    box-shadow: 0 .125rem .25rem #00000013;
    animation: push-rise .45s ease both
}

.push-hero__media {
    position: relative;
    min-height: 240px;
    overflow: hidden;
    background: radial-gradient(circle at 28% 18%, rgba(2, 139, 255, .35), transparent 42%), linear-gradient(155deg, #002c51, #00569f 55%, #028bff);
    border-inline-end: 1px solid rgba(0, 86, 159, .15)
}

.push-hero__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.push-hero__veil {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(195deg, #002c510d, #002c5159)
}

.push-hero__open {
    position: absolute;
    bottom: 1rem;
    inset-inline-start: 1rem;
    z-index: 2;
    padding: .4rem .85rem;
    border-radius: .35rem .9rem;
    background: #fffffff0;
    color: #00569f;
    font-size: .72rem;
    font-weight: 300;
    text-decoration: none;
    border: 1px solid rgba(0, 86, 159, .15);
    box-shadow: 0 .125rem .25rem #00000013;
    transition: transform .2s ease, background .2s ease
}

.push-hero__open:hover {
    transform: translateY(-2px);
    background: #fff
}

.push-hero__content {
    padding: 1.55rem 1.7rem 1.45rem;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.push-hero__topline {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .9rem
}

.push-hero__title {
    margin: 0 0 .55rem;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 500;
    line-height: 1.45;
    color: #3d3d3d
}

.push-hero__desc {
    margin: 0 0 1.25rem;
    max-width: 42rem;
    color: #666;
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.9;
    white-space: pre-wrap
}

.push-hero__timeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding-top: .95rem;
    border-top: 1px dashed #e4e4e4
}

.push-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: .55rem
}

.push-timeline-item__mark {
    width: 9px;
    height: 9px;
    margin-top: .4rem;
    border-radius: 2px;
    background: #00569f;
    box-shadow: 0 0 0 3px #00569f1f;
    flex-shrink: 0;
    transform: rotate(45deg)
}

.push-timeline-item__mark--end {
    background: #028bff;
    box-shadow: 0 0 0 3px #028bff24
}

.push-timeline-rail {
    width: 42px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #00569f 0 6px, transparent 6px 10px);
    opacity: .4
}

.push-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .72rem;
    border-radius: .35rem .85rem;
    font-size: .75rem;
    font-weight: 400;
    border: 1px solid transparent
}

.push-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: currentColor;
    opacity: .8;
    transform: rotate(45deg)
}

.push-chip--ghost {
    background: #f7f7f7;
    color: #8b8b8b;
    border-color: #e4e4e4;
    font-weight: 300
}

.push-chip--soft {
    background: #edf7ff;
    color: #00569f;
    border-color: #c6e5ff
}

.push-chip--warn {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa
}

.push-chip--ok {
    background: #f0fdfa;
    color: #0f766e;
    border-color: #baf8e7
}

.push-chip--danger {
    background: #fffbfb;
    color: #ff6f5e;
    border-color: #ffd8d4
}

.push-chip--muted {
    background: #f7f7f7;
    color: #666;
    border-color: #e4e4e4
}

.push-chip--info {
    background: #edf7ff;
    color: #00569f;
    border-color: #c6e5ff
}

.push-grid {
    display: grid;
    grid-template-columns:1.2fr .9fr;
    gap: 1.05rem
}

.push-panel {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 86, 159, .12);
    border-radius: 1.1rem .4rem;
    padding: 1.25rem 1.35rem;
    box-shadow: 0 .125rem .25rem #00000013;
    animation: push-rise .5s ease both
}

.push-panel--info {
    animation-delay: .05s;
    border-inline-start: 3px solid #00569f
}

.push-panel--creator {
    animation-delay: .1s;
    background: linear-gradient(165deg, #fff, #edf7ff);
    border-inline-start: 3px solid #028bff
}

.push-panel--recipients {
    grid-column: 1/-1;
    animation-delay: .15s;
    border-inline-start: 3px solid #bdbdbd;
    background: radial-gradient(circle at 100% 0%, rgba(0, 86, 159, .06), transparent 35%), #fff
}

.push-panel__head {
    margin: 0 0 1.1rem
}

.push-panel__head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem
}

.push-panel__kicker {
    display: block;
    margin-bottom: .25rem;
    font-size: .7rem;
    font-weight: 300;
    letter-spacing: .06em;
    color: #8b8b8b
}

.push-panel__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: #3d3d3d
}

.push-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem
}

.push-fact {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .8rem .9rem;
    border-radius: .85rem .3rem;
    background: #f7f7f7;
    border: 1px solid #e4e4e4;
    border-bottom-width: 2px;
    border-bottom-color: #bdbdbd;
    transition: border-color .2s ease, transform .2s ease, background .2s ease
}

.push-fact:hover {
    background: #edf7ff;
    border-color: #c6e5ff;
    transform: translateY(-1px)
}

.push-fact__icon {
    width: 34px;
    height: 34px;
    border-radius: .55rem .2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 500;
    flex-shrink: 0;
    border: 1px solid transparent
}

.push-fact__icon--ember {
    background: #edf7ff;
    color: #00569f;
    border-color: #c6e5ff
}

.push-fact__icon--ink {
    background: #f2f3f6;
    color: #30357c;
    border-color: #dfe1f3
}

.push-fact__icon--olive {
    background: #edf7ff;
    color: #028bff;
    border-color: #c6e5ff
}

.push-creator {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem
}

.push-creator__avatar {
    width: 52px;
    height: 52px;
    border-radius: 1.15rem .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #002c51, #00569f);
    border: 1px solid rgba(0, 86, 159, .2);
    color: #edf7ff;
    font-size: .95rem;
    font-weight: 500;
    flex-shrink: 0;
    box-shadow: 0 .125rem .25rem #00000013
}

.push-creator__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #3d3d3d;
    line-height: 1.5
}

.push-creator__rows {
    display: grid;
    gap: .55rem
}

.push-creator__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .9rem;
    border-radius: .7rem .25rem;
    background: #ffffffb3;
    border: 1px dashed #e4e4e4
}

.push-creator__row .push-label {
    margin-bottom: 0
}

.push-count {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .4rem .85rem;
    border-radius: .35rem .85rem;
    background: #edf7ff;
    color: #00569f;
    font-size: .78rem;
    font-weight: 300;
    border: 1px solid #c6e5ff
}

.push-count strong {
    font-size: 1rem;
    font-weight: 500;
    color: #00569f
}

.push-numbers {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap: .7rem
}

.push-number {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .72rem .85rem;
    border-radius: .85rem .3rem;
    background: #fafcfe;
    border: 1px solid #e4e4e4;
    border-inline-start: 3px solid #00569f;
    transition: transform .2s ease, border-color .2s ease, background .2s ease
}

.push-number:hover {
    transform: translateY(-2px);
    background: #edf7ff;
    border-color: #c6e5ff
}

.push-number__index {
    font-size: .7rem;
    font-weight: 300;
    color: #8b8b8b;
    font-variant-numeric: tabular-nums
}

.push-number__value {
    font-size: .92rem;
    font-weight: 400;
    color: #3d3d3d;
    letter-spacing: .02em
}

@keyframes push-rise {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (max-width: 991.98px) {
    .push-grid {
        grid-template-columns:1fr
    }
}

@media (max-width: 767.98px) {
    .push-hero {
        grid-template-columns:1fr;
        border-radius: 1.2rem .5rem
    }

    .push-hero__media {
        min-height: 180px;
        border-inline-end: 0;
        border-bottom: 1px solid rgba(0, 86, 159, .15)
    }

    .push-timeline-rail {
        display: none
    }
}

.cpg-bnpl-invoice-page .title {
    font-size: 13px;
    font-weight: 500;
    color: #00005c
}

.cpg-bnpl-invoice-page .value {
    font-size: 13px;
    font-weight: 400;
    color: #8f8f8f
}

.cpg-bnpl-invoice-page .shopIcon {
    width: 210px;
    height: 210px;
    aspect-ratio: 1.1;
    border-radius: 12px
}

.cpg-bnpl-invoice-page .payButton {
    border-radius: 12px
}

.cpg-invoice-page .invoiceShopIcon {
    width: 210px;
    height: 210px;
    aspect-ratio: 1.1;
    border-radius: 12px
}

.cpg-invoice-page .invoiceItemTable {
    font-size: 15px
}

.cpgTitr {
    font-size: 14px;
    font-weight: 400;
    max-width: 300px;
    text-align: justify;
    direction: rtl
}

.userServices .accordion-button:focus {
    outline: 0 !important;
    box-shadow: none
}

.userServices .accordion-button:not(.collapsed) {
    background-color: #f9f9f9;
    cursor: pointer;
    outline: 0 !important;
    box-shadow: none
}

.userServices .collapsing {
    width: 100% !important;
    overflow: hidden !important;
    transition: height .35s ease !important
}

.user-service-panel {
    background-color: #e4e4e4;
    border-radius: 10px;
    box-shadow: 0 4px 8px #0000001a;
    padding: 20px;
    display: inline-block
}

.user-service-panel input {
    font-size: 13px !important;
    margin: 5px;
    text-align: center;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    font-size: 16px;
    padding: 10px
}

.user-service-panel input::-webkit-outer-spin-button, .user-service-panel input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.user-service-panel input[type=number] {
    -moz-appearance: textfield
}

.user-service-panel.user-service-panel--segmented input {
    width: 60px
}

.user-service-panel .IR {
    background-color: #b8a9a9;
    border-radius: 6px;
    height: 40px
}

.user-service-panel .table-responsive {
    border-radius: 8px
}

.typewriter-text .TypeWriterText {
    text-align: right;
    line-height: 28px;
    position: relative
}

.typewriter-text .TypeWriterText h1 {
    font-size: 21px !important
}

.typewriter-text .TypeWriterText h2 {
    font-size: 19px !important
}

.typewriter-text .TypeWriterText h3 {
    font-size: 17px !important
}

.typewriter-text .TypeWriterText h4 {
    font-size: 15px !important
}

.typewriter-text .TypeWriterText li {
    font-size: 14px !important;
    font-weight: 300 !important
}

.typewriter-text .TypeWriterText strong {
    font-size: 15px !important;
    font-weight: 500 !important
}

@media (max-width: 768px) {
    .typewriter-text .TypeWriterText dl, .typewriter-text .TypeWriterText ol, .typewriter-text .TypeWriterText ul {
        padding: 0
    }
}

:root {
    --bs-body-line-height: 1.75
}

.gds-input-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative
}

.gds-input-wrapper:has(.input-error) .gds-input, .gds-input-wrapper:has(.input-error) .gds-input-text, .gds-input-wrapper:has(.input-error) .gds-input-select {
    border-color: #f44336
}

.gds-input-wrapper:has(.input-error) .input-field {
    color: #f44336
}

.gds-input {
    display: flex;
    justify-content: start;
    align-items: center;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 16px;
    height: 48px;
    width: 100%;
    padding: 0 10px;
    margin: 5px 0;
    font-size: 14px;
    position: relative
}

.gds-input .input-icon {
    height: 65%;
    border-left: 1.5px solid #f3f3f3;
    padding: 0 .5rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.gds-input .input-field {
    margin: 0;
    padding: 0 5px
}

.gds-input .input-remove {
    background: #fff;
    border: 1px solid #E4E4E4;
    border-radius: 50%;
    position: absolute;
    left: -8px;
    bottom: 5px
}

.gds-input input {
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    direction: rtl
}

.gds-input input :focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    inset: unset
}

.gds-input input:focus {
    outline: none
}

.gds-input input::placeholder {
    font-style: normal;
    font-weight: 300;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.gds-input input:disabled {
    background-color: transparent
}

.gds-input select {
    width: 100%;
    border: none !important;
    outline: none !important;
    font-weight: 300;
    font-size: smaller;
    line-height: 3em
}

.gds-input.gds-input-date .FromDateButton {
    background-color: unset;
    border: none
}

.gds-input.gds-input-date .FromDateButton .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    text-align: right;
    color: #30357c
}

.gds-input.gds-input-date .FromDateButton .t2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    color: #8a90d2
}

.gds-input.gds-input-date .DatesDivider {
    background: #f2f3f6;
    border-radius: 1px;
    transform: rotate(90deg);
    height: 1px;
    width: 64px !important;
    margin-right: -34px
}

.gds-input.gds-input-date .PickDates .imgButtons {
    height: 104px;
    margin-right: -31px;
    direction: ltr
}

.gds-input.gds-input-date .PickDates .imgButtons img {
    width: 24px;
    height: 24px
}

.gds-input.gds-input-date .PickDates .imgButtons button {
    background-color: unset;
    border: none
}

.gds-input.gds-input-date .PickDates .imgButtons button .t1 {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    text-align: right;
    color: #30357c
}

.gds-input.gds-input-date .PickDates .imgButtons button .divider {
    height: 1px;
    background: #dfe1f3;
    border-radius: 24px;
    width: 16px;
    transform: rotate(90deg)
}

.gds-textarea {
    border-radius: 24px;
    border: 1px solid #BDBDBD;
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 28px;
    align-items: center
}

.gds-textarea input:focus {
    outline: none
}

.gds-datepicker .modal-content {
    background: #fff;
    border-radius: 24px;
    border: 1px solid #e4e4e4;
    direction: rtl;
    min-width: 286px;
    max-width: 300px;
    padding: 0 10px
}

.gds-datepicker .modal-content .gds-btn-check {
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

@media screen and (min-width: 1200px) {
    .gds-datepicker .modal-content {
        box-shadow: 0 0 100px 71px #30357c1f;
        position: absolute;
        top: 18%;
        z-index: 22
    }
}

@media screen and (max-width: 768px) {
    .gds-datepicker .modal-content {
        padding: 0
    }

    .gds-datepicker .modal-content ._dates {
        width: 90%
    }
}

.gds-datepicker .modal-content tr, .gds-datepicker .modal-content td {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.gds-datepicker .modal-content .up {
    background-color: unset !important
}

.gds-datepicker .modal-content .up button {
    border: 1px solid #3d3d3d !important;
    border-radius: 24px;
    background-color: unset !important;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    background-color: #f2f3f6 !important;
    border: none !important;
    width: 130px !important;
    position: unset !important
}

.gds-datepicker .modal-content .up svg {
    position: absolute
}

.gds-datepicker .modal-content .up .yearsButton {
    border-radius: 0 12px 12px 0
}

.gds-datepicker .modal-content .up .yearsButton .text {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.gds-datepicker .modal-content .up .yearsButton .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    color: #3d3d3d
}

.gds-datepicker .modal-content .up .monthButton {
    border-radius: 12px 0 0 12px;
    margin-right: 4px
}

.gds-datepicker .modal-content .up .monthButton .text {
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #30357c
}

.gds-datepicker .modal-content .up .monthButton .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    color: #3d3d3d
}

.gds-datepicker .modal-content ._down::-webkit-scrollbar {
    width: 1px
}

.gds-datepicker .modal-content ._years::-webkit-scrollbar {
    width: 1px
}

.gds-datepicker .modal-content .down {
    height: fit-content
}

.gds-datepicker .modal-content .down ._months .item {
    flex-direction: column;
    width: 65px
}

.gds-datepicker .modal-content .down ._months .item .btn-selected {
    background: #3d3d3d;
    border-radius: 50%;
    box-shadow: -14px 9px 40px 1px #3d3d3d47;
    outline: none !important;
    outline-style: none !important;
    font-size: 12px;
    color: #fff;
    width: 65px;
    height: 65px;
    justify-content: center;
    background-image: url(../images/DatePicker/dateBack.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 28% 39%
}

.gds-datepicker .modal-content .down ._months .item label {
    width: 65px;
    height: 65px;
    justify-content: center;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    align-items: center;
    text-align: center;
    color: #3d3d3d
}

.gds-datepicker .modal-content .down ._years {
    scrollbar-width: none
}

.gds-datepicker .modal-content .down ._years .item {
    flex-direction: column;
    width: 58px;
    height: 58px;
    flex-wrap: wrap
}

.gds-datepicker .modal-content .down ._years .item .btn-selected {
    background: #3d3d3d;
    border-radius: 50%;
    box-shadow: -14px 9px 40px 1px #3d3d3d47;
    outline: none !important;
    outline-style: none !important;
    font-size: .81rem;
    color: #fff;
    width: 55px;
    height: 55px;
    justify-content: center;
    background-image: url(../images/DatePicker/dateBack.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 31% 38%
}

.gds-datepicker .modal-content .down ._years .item label {
    width: 58px;
    height: 55px;
    justify-content: center;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d
}

.gds-datepicker .modal-content .down ._months {
    scrollbar-width: none
}

.gds-datepicker .modal-content .down ._months .item {
    flex-direction: column;
    flex-wrap: wrap
}

.gds-datepicker .modal-content .down ._months .item .btn-selected {
    background: #3d3d3d;
    border-radius: 50%;
    box-shadow: -14px 9px 40px 1px #3d3d3d47;
    outline: none !important;
    outline-style: none !important;
    font-size: .81rem;
    color: #fff;
    width: 55px;
    height: 55px;
    justify-content: center;
    background-image: url(../images/DatePicker/dateBack.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 31% 38%
}

.gds-datepicker .modal-content .down ._months .item label {
    width: 58px;
    height: 55px;
    justify-content: center;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d
}

.gds-datepicker .modal-content .down ._dates td {
    flex-direction: column;
    width: 32px;
    height: 42px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.gds-datepicker .modal-content .down ._dates td .btn-selected {
    background: #3d3d3d;
    border-radius: 50%;
    outline: none !important;
    outline-style: none !important;
    font-size: .81rem;
    color: #fff;
    width: 100%;
    height: 32px;
    margin-top: 3px;
    justify-content: center;
    text-align: center;
    background-image: url(../images/DatePicker/dateBack.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 34% 34%
}

.gds-datepicker .modal-content .down ._dates td label {
    width: 100%;
    height: 42px;
    justify-content: center;
    font-style: normal;
    font-weight: 500;
    font-size: .81rem;
    line-height: 24px;
    text-align: center;
    color: #3d3d3d
}

.gds-datepicker .modal-content .down .week {
    font-style: normal;
    font-weight: 400;
    font-size: .81rem;
    line-height: 24px;
    text-align: center;
    color: #bdbdbd
}

.gds-datepicker .modal-content .down .week td {
    width: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    height: 32px !important
}

.gds-datepicker .modal-content .down .divider {
    border: 1px solid #f7f7f7;
    border-radius: 24px
}

.gds-datepicker .modal-content .down .preset {
    justify-content: space-around;
    align-items: center
}

.gds-datepicker .modal-content .down .preset button {
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    color: #8b8b8b;
    background-color: unset
}

.gds-datepicker .modal-content .down .preset .active {
    background: #f2f3f6;
    border: 1px solid #30357c;
    border-radius: 12px;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    color: #30357c;
    padding: 0 6px
}

.gds-datepicker .modal-content .down .preset .active button {
    color: #30357c
}

.gds-datepicker .modal-content .down .preset .more {
    font-weight: 500;
    font-size: 17px;
    background-image: url(../images/neworder/orderstatus-state-cta-close.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 23px;
    height: 23px
}

.gds-datepicker .modal-content .down .preset .collapsed {
    background-image: url(../images/DatePicker/more.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 23px;
    height: 23px
}

.gds-datepicker .modal-content .down ._more {
    position: absolute;
    background: #fff !important;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c14;
    border-radius: 24px;
    left: 30px;
    bottom: 0
}

.gds-card ._wrapper {
    width: 100%;
    background-color: #fff;
    border: 1px solid #f2f3f6;
    border-radius: 24px;
    box-shadow: -14px 9px 40px 1px #30357c0a
}

.gds-card ._wrapper ._header {
    width: 100%;
    padding: 16px
}

.gds-card ._wrapper ._body {
    width: 100%;
    border-radius: 24px
}

.gds-card ._wrapper ._body .title {
    font-style: normal;
    font-weight: 400;
    font-size: .8rem;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b;
    height: 25px;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none
}

.gds-card ._wrapper ._body .title2 {
    font-style: normal;
    font-weight: 400;
    font-size: .8rem;
    line-height: 24px;
    text-align: right;
    color: #8b8b8b;
    height: 25px;
    -webkit-user-select: none;
    user-select: none
}

.gds-card ._wrapper ._body .title3 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: right;
    color: #616161;
    height: 25px;
    -webkit-user-select: none;
    user-select: none
}

.gds-card ._wrapper ._body .confirm {
    background-color: #fff;
    border: 1px solid #30357c;
    border-radius: 20px;
    font-style: normal;
    font-weight: 600;
    font-size: .7rem;
    line-height: 24px;
    text-align: center;
    color: #30357c
}

.gds-card ._wrapper ._body .operation {
    background-color: unset;
    border: none
}

.gds-card ._wrapper ._body .collapsed .close {
    display: none !important
}

.gds-card ._wrapper ._body .collapsed .open {
    display: flex !important
}

.gds-card ._wrapper ._body .columndivider {
    height: 1px;
    background-color: #dfe1f3;
    border-radius: 16px;
    transform: rotate(90deg)
}

.gds-card ._wrapper ._body .divider {
    background: #f2f3f6;
    height: 1px
}

.gds-card ._wrapper ._body .text1 {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 24px;
    text-align: right;
    color: #bdbdbd;
    min-height: 24px
}

.gds-card ._wrapper ._body .text2 {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    text-align: right;
    color: #3d3d3d;
    min-height: 24px
}

.gds-card ._wrapper ._body .headSelected {
    background-color: #dfe1f3;
    border-radius: 24px 24px 0 0
}

.gds-card ._wrapper ._body .headSelected .title {
    color: #30357c
}

.gds-card ._wrapper ._body .itemDiv {
    min-height: 28px;
    max-height: 28px
}

.gds-card ._wrapper ._footer {
    width: 100%;
    padding: 16px 8px
}

.gds-table-flex {
    display: flex;
    flex-direction: column;
    direction: rtl;
    width: 100%;
    overflow: auto;
    border-radius: 6px;
    min-height: 50%
}

.gds-table-flex.table-striped ._tr:nth-child(2n) {
    background-color: #f8f8f8
}

.gds-table-flex ._thead {
    display: flex;
    flex-direction: column;
    background-color: #3d3d3d;
    color: #fff;
    border-radius: 12px !important
}

.gds-table-flex ._thead ._tr {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px !important
}

.gds-table-flex ._thead ._tr ._th {
    flex: 1;
    font-style: normal;
    font-weight: 300 !important;
    font-size: .81rem;
    line-height: 24px;
    padding: 13px !important
}

.gds-table-flex ._thead ._tr ._td {
    padding-right: 15px
}

.gds-table-flex ._thead ._tr :last-child {
    border-radius: 12px 0 0 12px
}

@media screen and (max-width: 768px) {
    .gds-table-flex ._thead ._tr :last-child {
        border-radius: 12px 0 0;
        padding: 8px 0
    }
}

.gds-table-flex ._thead ._tr :first-child {
    border-radius: 0 12px 12px 0;
    padding-right: 15px
}

@media screen and (max-width: 768px) {
    .gds-table-flex ._thead ._tr :first-child {
        border-radius: 0 12px 0 0;
        padding: 8px 0
    }
}

@media screen and (max-width: 768px) {
    .gds-table-flex ._thead ._tr :first-child {
        width: 40px;
        box-shadow: -14px 0 40px 1px #00000029
    }
}

.gds-table-flex ._thead .tick button {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid black
}

.gds-table-flex ._tbody {
    display: flex;
    flex-direction: column
}

.gds-table-flex ._tbody ._tr {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: none
}

.gds-table-flex ._tbody ._tr :last-child {
    border-radius: 16px 0 0 16px;
    text-decoration: none
}

.gds-table-flex ._tbody ._tr ._td:first-of-type {
    padding-right: 15px !important;
    border-radius: 0 16px 16px 0
}

.gds-table-flex ._tbody ._tr ._td {
    flex: 1;
    border: none;
    padding: 13px 15px !important
}

.gds-table-flex ._tbody ._tr ._td .tick .button {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid black
}

.gds-table-flex ._tbody ._tr ._td .title {
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: .81rem !important;
    line-height: 24px !important;
    text-align: right !important
}

.gds-table-flex ._tbody ._tr ._td .title :first-child {
    border-radius: unset;
    border-radius: 24px;
    font-weight: 400
}

.gds-table-flex ._tbody ._tr ._td .discript {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 24px;
    align-items: center;
    text-align: right;
    color: #8b8b8b
}

.gds-table-flex ._tbody ._tr ._td .status {
    min-width: 48px;
    max-width: fit-content
}

.gds-table-flex ._tbody ._tr ._td .tomanImage {
    width: 17px;
    height: 17px;
    margin-bottom: .3rem
}

.gds-table-flex ._tbody ._tr ._td .moneyImage {
    width: 20px;
    height: 20px;
    margin-bottom: .3rem
}

.gds-table-flex ._tbody ._tr ._td .shopImage {
    width: 16px;
    height: 16px
}

@media screen and (max-width: 768px) {
    .gds-table-flex ._tbody ._tr ._td .shoptypeImg {
        display: none
    }
}

.gds-table-flex ._tbody ._tr ._td .operation button {
    background-color: unset;
    border: none;
    background-color: #f7f7f7;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: fit-content;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 28px;
    text-align: right
}

.gds-table-flex ._tbody ._tr ._td .operation .more {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid lightgray;
    font-size: 14px
}

.gds-table-flex ._tbody ._tr ._td .operation .more:before {
    content: "⁝";
    position: absolute;
    font-weight: 700;
    font-family: fantasy
}

.gds-table-flex ._tbody ._tr ._td .operation .more.show:before {
    content: "❖";
    position: absolute
}

.gds-table-flex ._tbody ._tr ._td .operation .preButton {
    border: 1px solid #3d3d3d
}

.gds-table-flex ._tbody ._tr ._td .operation .MoreList {
    z-index: 100;
    border-radius: 24px;
    list-style-type: none;
    position: absolute !important;
    left: 50px !important;
    bottom: 0 !important;
    margin: 4px 0 !important;
    transform: none !important;
    background-color: #3d3d3d;
    overflow-y: scroll
}

.gds-table-flex ._tbody ._tr ._td .operation .MoreList li {
    padding: 5px 10px;
    border-left: 2px solid rgba(255, 255, 255, .05)
}

.gds-table-flex ._tbody ._tr ._td .operation .MoreList li:last-child {
    border-left: none
}

.gds-table-flex ._tbody ._tr ._td .operation .MoreList a {
    color: #fff
}

.gds-table-flex ._tbody ._tr ._td .operation .MoreList button {
    margin: 0;
    background-color: inherit;
    font-size: 13px;
    color: #fff;
    font-weight: 500
}

.gds-table-flex ._tbody ._tr ._td .operation .MoreList::-webkit-scrollbar {
    width: 0px
}

.gds-table-flex ._tbody ._tr ._td .operation .MoreList::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 24px;
    height: 80%
}

.gds-table-flex ._tbody ._tr ._td .operation .MoreList::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 10px;
    height: 80%
}

.gds-table-flex ._tbody ._tr ._td .operation .MoreList::-webkit-scrollbar-thumb:hover {
    background-color: #30357c
}

.gds-table-flex ._tbody ._tr ._td .operation .show {
    display: flex;
    align-items: center
}

.gds-table-flex ._tbody ._tr ._td .operation .collapsing {
    height: 0 !important;
    width: 0 !important;
    transition: none !important
}

.gds-table-flex ._tbody ._tr .button {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 16px;
    padding: 7px;
    color: #3d3d3d;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    text-align: center
}

.gds-table-flex ._tbody ._tr .button :link {
    text-decoration: none
}

@media screen and (max-width: 768px) {
    .gds-table-flex ._tbody ._tr ._th {
        border-radius: unset !important;
        width: 40px;
        box-shadow: -4px 0 50px 1px #00569f0f
    }
}

.gds-table-flex ._tbody .selected {
    background-color: #3d3d3d !important;
    border: 2px solid #3d3d3d;
    border-radius: 16px
}

.gds-table-flex ._tbody .selected .title {
    color: #fff
}

.gds-table-flex ._tbody .selected .status {
    background: #ffffff1a;
    border-radius: 24px;
    color: #fff;
    font-weight: 400;
    min-width: 48px
}

.gds-table-flex ._tbody .selected .discript {
    color: #bdbdbd
}

.gds-table-flex ._tbody .selected .tomanImage, .gds-table-flex ._tbody .selected .shoptypeImg, .gds-table-flex ._tbody .selected .shopImage, .gds-table-flex ._tbody .selected .moneyImage {
    filter: invert(82%) sepia(58%) saturate(0%) hue-rotate(69deg) brightness(105%) contrast(110%)
}

.gds-table-flex ._tbody .selected .operation button {
    background-color: unset;
    padding: 0
}

.gds-table-flex ._tbody .selected .operation button img {
    filter: invert(82%) sepia(58%) saturate(0%) hue-rotate(69deg) brightness(105%) contrast(110%)
}

.gds-table-flex ._tbody .selected .operation button {
    color: #fff
}

.gds-table-flex ._tbody .selected .preButton {
    border: 1px solid #ffffff !important
}

@media screen and (max-width: 768px) {
    .gds-table-flex ._tbody .selected ._th {
        border-radius: unset !important;
        width: 40px;
        box-shadow: -14px 0 40px 1px #00000029
    }

    .gds-table-flex ._tbody .selected :last-child {
        border-radius: 16px 0 0 16px !important
    }

    .gds-table-flex ._tbody .selected .tick button {
        border-radius: 5px !important
    }

    .gds-table-flex ._tbody .selected .status {
        border-radius: 24px !important
    }
}

@media screen and (max-width: 768px) {
    .gds-table-flex {
        height: fit-content
    }
}

.popper {
    background-color: #313131 !important;
    border: 1px solid #f7f7f7 !important;
    border-radius: 12px !important;
    padding: 10px !important;
    font-family: Pelak !important;
    font-size: 12px !important;
    text-align: justify !important;
    color: #fff !important;
    font-weight: 300 !important;
    left: 5px !important
}

.gds-input-date-twin .topPreset {
    justify-content: space-around;
    align-items: center;
    position: relative;
    flex-wrap: wrap
}

.gds-input-date-twin .topPreset .item {
    border: none;
    background-color: #e4e4e4;
    border-radius: 11px;
    font-family: Pelak;
    font-weight: 300;
    font-size: 13px;
    min-width: fit-content
}

.gds-input-date-twin .topPreset button {
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    color: #8b8b8b;
    background-color: unset
}

.gds-input-date-twin .topPreset .active {
    background: #f2f3f6;
    border: 1px solid #30357c;
    border-radius: 12px;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 24px;
    text-align: center;
    color: #30357c;
    padding: 0 6px
}

.gds-input-date-twin .topPreset .active button {
    color: #30357c
}

.gds-input-date-twin .topPreset .more {
    font-weight: 500;
    font-size: 17px;
    background-image: url(../images/neworder/orderstatus-state-cta-close.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 23px;
    height: 23px
}

.gds-input-date-twin .topPreset .collapsed {
    background-image: url(../images/DatePicker/more.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 23px;
    height: 23px
}

.gds-input-date-twin .topPreset ._more {
    position: absolute;
    background: #fff !important;
    border: 1px solid #f2f3f6;
    box-sizing: border-box;
    box-shadow: -14px 9px 40px 1px #30357c14;
    border-radius: 24px;
    left: 50px;
    top: 0;
    z-index: 1
}

:root {
    --cp-gray-100: #f9f9f9;
    --cp-gray-200: #f1f1f4;
    --cp-gray-300: #dbdfe9;
    --cp-gray-400: #c4cada;
    --cp-gray-500: #99a1b7;
    --cp-gray-600: #78829d;
    --cp-gray-700: #4b5675;
    --cp-gray-800: #252f4a;
    --cp-gray-900: #071437;
    --cp-inverse-dark: #57575723;
    --cp-inverse-white: #9292920d;
    --cp-container-bg: #fff;
    --cp-primary: #5983fc;
    --cp-select-color: #2c5ae6af;
    --cp-range-border: #f7f7f7;
    --cp-range-shadow: #4c86f3;
    --cp-container-shadow: #58585881;
    --padding: 0px 10px;
    --margin-top: 10px
}

.ck-cp-container[cp-theme=dark] {
    --cp-gray-100: #1b1c22;
    --cp-gray-200: #26272f;
    --cp-gray-300: #363843;
    --cp-gray-400: #464852;
    --cp-gray-500: #636674;
    --cp-gray-600: #808290;
    --cp-gray-700: #9a9cae;
    --cp-gray-800: #b5b7c8;
    --cp-gray-900: #f5f5f5;
    --cp-inverse-dark: #6b6b6b56;
    --cp-inverse-white: #92929256;
    --cp-container-bg: #131314;
    --cp-container-shadow: #2b262696
}

.ck-cp-container {
    left: 0;
    background-color: var(--cp-container-bg);
    border-radius: .5rem;
    padding: 0;
    width: 270px;
    height: auto;
    box-shadow: 0 0 34px 1px var(--cp-container-shadow);
    padding-bottom: calc(var(--margin-top) * 1.5);
    padding-top: var(--margin-top)
}

.ck-cp-container * {
    outline: none;
    font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
    -webkit-user-select: none;
    user-select: none
}

.ck-cp-controller-bar {
    border-radius: .475rem;
    display: flex;
    align-items: center;
    gap: 15px
}

.ck-cp-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding)
}

.cp-btn {
    border: 0;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    padding: 0;
    background-color: var(--cp-container-bg);
    color: var(--cp-gray-700)
}

.cp-btn svg {
    fill: var(--cp-gray-700)
}

.cp-picker-wrap {
    height: 145px;
    position: relative;
    overflow: hidden;
    margin: var(--padding)
}

.picker-saturation {
    cursor: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.colour-area-point-circle {
    pointer-events: none;
    cursor: pointer;
    position: absolute;
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 1.5px var(--cp-container-bg), inset 0 0 1px 1px var(--cp-gray-900), 0 0 1px 2px var(--cp-gray-900);
    border-radius: 50%
}

.colour-area-mask {
    border-radius: .5rem;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: inset #00000013 0 0 0 1px
}

.colour-area {
    width: 100%;
    height: 100%;
    border-radius: .5rem
}

.picker-hue {
    width: 100%;
    height: 8px
}

.picker-hue-range-slider {
    margin: 0;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 100%;
    width: 100%;
    display: block;
    outline: none;
    transition: color .05s linear;
    background: linear-gradient(to right, red, #ff0 17%, #0f0 33%, #0ff, #00f 67%, #f0f 83%, red)
}

.picker-hue-range-slider:focus {
    outline: none
}

.picker-hue-range-slider:active, .picker-hue-range-slider:hover:active {
    cursor: grabbing;
    cursor: -webkit-grabbing
}

.picker-hue-range-slider::-moz-range-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0;
    outline: none
}

.picker-hue-range-slider::-ms-track {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0
}

.picker-hue-range-slider::-webkit-slider-thumb {
    box-shadow: 0 -0px 6px 0 var(--cp-range-shadow);
    border: 1px solid var(--cp-range-border);
    background-color: var(--cp-primary);
    height: 14px;
    width: 14px;
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab
}

.picker-hue-range-slider::-moz-range-thumb {
    box-shadow: 0 -0px 6px 0 var(--cp-range-shadow);
    border: 1px solid var(--cp-range-border);
    background-color: var(--cp-primary);
    height: 14px;
    width: 14px;
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab
}

.picker-opacity-slider {
    top: 0;
    position: absolute;
    left: 0;
    width: 100%;
    height: 8px
}

.opacity_slider {
    margin: 0;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 8px;
    width: 100%;
    display: block;
    outline: none;
    transition: color .05s linear
}

.opacity_slider:focus {
    outline: none
}

.opacity_slider:active, .opacity_slider:hover:active {
    cursor: grabbing;
    cursor: -webkit-grabbing
}

.opacity_slider::-moz-range-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0;
    outline: none
}

.opacity_slider::-ms-track {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0
}

.opacity_slider::-webkit-slider-thumb {
    box-shadow: 0 -0px 6px 0 var(--cp-range-shadow);
    border: 1px solid var(--cp-range-border);
    background-color: var(--cp-primary);
    height: 14px;
    width: 14px;
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab
}

.opacity_slider::-moz-range-thumb {
    box-shadow: 0 -0px 6px 0 var(--cp-range-shadow);
    border: 1px solid var(--cp-range-border);
    background-color: var(--cp-primary);
    height: 14px;
    width: 14px;
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab
}

.gradient-bar {
    width: 100%;
    position: relative;
    box-sizing: border-box
}

.gradient-container {
    width: 100%;
    height: 8px;
    border-radius: 10px
}

.gradient-handle {
    position: absolute;
    z-index: 1;
    top: -3px;
    outline: none
}

.gradient-handle .gradient-handle-content {
    cursor: ew-resize;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -0px 6px 0 var(--cp-range-shadow);
    border: 1px solid var(--cp-range-border);
    background-color: var(--cp-primary);
    height: 14px;
    width: 14px;
    border-radius: 50%
}

.gradient-handle.select .gradient-handle-content {
    background-color: var(--cp-primary);
    border: 2px solid var(--cp-range-border)
}

.gradient-handle.select {
    z-index: 2
}

.opacity-bar {
    position: relative;
    height: 8px;
    overflow: visible;
    border-radius: 16px;
    display: flex;
    align-items: center;
    background: linear-gradient(45deg, var(--cp-inverse-dark) 25%, transparent 25%, transparent 75%, var(--cp-inverse-dark) 75%, var(--cp-inverse-dark) 0px) 0px 0px / 16px 16px repeat padding-box border-box, linear-gradient(45deg, var(--cp-inverse-dark) 25%, transparent 25%, transparent 75%, var(--cp-inverse-dark) 75%, var(--cp-inverse-dark) 0px) 8px 8px / 16px 16px repeat padding-box border-box, var(--cp-inverse-white)
}

.ck-cp-linear-angle-container {
    padding: var(--padding);
    margin-bottom: calc(var(--margin-top) * 1.75)
}

.ck-cp-linear-angle-container input[type=range] {
    margin: 0;
    border-radius: 10px;
    z-index: 10;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--cp-gray-200);
    height: 8px;
    width: 100%;
    display: block;
    outline: none;
    transition: color .05s linear
}

.ck-cp-linear-angle-container input[type=range]:focus {
    outline: none
}

.ck-cp-linear-angle-container input[type=range]:active, .ck-cp-linear-angle-container input[type=range]:hover:active {
    cursor: grabbing;
    cursor: -webkit-grabbing
}

.ck-cp-linear-angle-container input[type=range]::-moz-range-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0;
    outline: none
}

.ck-cp-linear-angle-container input[type=range]::-ms-track {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0
}

.ck-cp-linear-angle-container input[type=range]::-webkit-slider-thumb {
    box-shadow: 0 -0px 6px 0 var(--cp-range-shadow);
    border: 1px solid var(--cp-range-border);
    background-color: var(--cp-primary);
    height: 14px;
    width: 14px;
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab
}

.ck-cp-linear-angle-container input[type=range]::-moz-range-thumb {
    box-shadow: 0 -0px 6px 0 var(--cp-range-shadow);
    border: 1px solid var(--cp-range-border);
    background-color: var(--cp-primary);
    height: 14px;
    width: 14px;
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab
}

.ck-cp-linear-angle-container .ck-gradient-set-label {
    text-align: start;
    font-size: 12px;
    color: var(--cp-gray-700);
    margin: 0;
    margin-top: var(--margin-top);
    margin-bottom: calc(var(--margin-top) / 2)
}

.ck-cp-linear-angle-container .ck-gradient-set-label span {
    color: var(--cp-primary);
    font-weight: 700
}

.ck-cp-linear-angle-container p span:before {
    content: "→ "
}

.ck-cp-input-container {
    display: flex;
    gap: 8px;
    margin: 0 10px;
    margin-top: calc(var(--margin-top) * 2.5)
}

.ck-cp-input-container input {
    background-color: var(--cp-container-bg);
    border: 1px solid var(--cp-gray-300);
    color: var(--cp-gray-900);
    border-radius: 5px
}

.ck-cp-input-container input[type=text] {
    padding: 0;
    width: 100%;
    text-align: center;
    height: 30px;
    flex-shrink: 0;
    outline: none;
    font-size: 14px
}

.ck-cp-input-container input[type=number] {
    padding: 0;
    appearance: textfield;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    border-radius: 5px;
    text-align: center;
    flex-shrink: 0;
    outline: none;
    height: 100%;
    width: 100%;
    font-size: 14px
}

.ck-cp-input-container input:focus-visible {
    border: 1px solid var(--cp-primary)
}

.ck-cp-input-container input[type=number]::-webkit-inner-spin-button, .ck-cp-input-container input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    display: none;
    margin: 0
}

.ck-cp-input-container .ck-cp-input-content:not(.color-hex) {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 34px;
    height: 30px
}

.ck-cp-input-container .color-hex {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%
}

.ck-cp-input-container .ck-cp-input-content .ck-cp-input-label {
    position: absolute;
    background-color: var(--cp-container-bg);
    font-size: 10px;
    top: -6px;
    left: -6px;
    color: var(--cp-gray-700);
    padding: 0 4px;
    z-index: 1
}

.ck-cp-local-color-conatiner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 10px;
    border-top: 1px solid var(--cp-gray-200);
    padding-top: calc(var(--margin-top) * 1.25);
    margin-top: calc(var(--margin-top) * 2)
}

.ck-cp-local-color-conatiner .ck-cp-color-item {
    cursor: pointer;
    width: 25px;
    height: 25px;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 5px
}

.ck-cp-local-color-conatiner .ck-cp-color-item.ck-select {
    border: 2px solid var(--cp-select-color)
}

.ck-cp-disabled * {
    pointer-events: none !important;
    opacity: .75
}

.cp-main-btn {
    border: 0;
    height: 20px !important;
    width: 20px !important;
    display: flex;
    align-items: center;
    font-size: 14px;
    background-color: var(--cp-container-bg);
    padding: 0;
    justify-content: center
}

.cp-main-btn svg {
    transform: scale(.9);
    fill: var(--cp-gray-700)
}

.cp-btn-save-color {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 25px;
    height: 25px;
    border: 1px solid var(--cp-gray-500);
    border-radius: 5px
}

.cp-btn-save-color svg {
    fill: var(--cp-gray-700)
}

.ck-cp-color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.ck-cp-color-list-label {
    font-size: 12px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--cp-gray-700)
}

.ck-cp-color-list-label svg {
    fill: var(--cp-gray-700)
}

.ck-cp-buttons {
    padding: 20px 10px 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    column-gap: 4px
}

.ck-cp-buttons__button {
    font-size: 12px;
    padding: 5px 15px;
    background-color: var(--cp-container-bg);
    border: none;
    color: var(--cp-gray-800);
    border-radius: 5px
}

.ck-cp-buttons__button:hover {
    cursor: pointer;
    background-color: var(--cp-gray-100)
}

.ck-cp-buttons__button:active {
    background-color: var(--cp-gray-100)
}

/*!
 * FilePondPluginImagePreview 4.6.12
 * Licensed under MIT, https://opensource.org/licenses/MIT/
 * Please visit https://pqina.nl/filepond/ for details.
 */
.filepond--image-preview-markup {
    position: absolute;
    left: 0;
    top: 0
}

.filepond--image-preview-wrapper {
    z-index: 2
}

.filepond--image-preview-overlay {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 5rem;
    max-height: 7rem;
    margin: 0;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.filepond--image-preview-overlay svg {
    width: 100%;
    height: auto;
    color: inherit;
    max-height: inherit
}

.filepond--image-preview-overlay-idle {
    mix-blend-mode: multiply;
    color: #282828d9
}

.filepond--image-preview-overlay-success {
    mix-blend-mode: normal;
    color: #369763
}

.filepond--image-preview-overlay-failure {
    mix-blend-mode: normal;
    color: #c44e47
}

@supports (-webkit-marquee-repetition:infinite) and ((-o-object-fit:fill) or (object-fit:fill)) {
    .filepond--image-preview-overlay-idle {
        mix-blend-mode: normal
    }
}

.filepond--image-preview-wrapper {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    margin: 0;
    border-radius: .45em;
    overflow: hidden;
    background: #00000003
}

.filepond--image-preview {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    pointer-events: none;
    background: #222;
    will-change: transform, opacity
}

.filepond--image-clip {
    position: relative;
    overflow: hidden;
    margin: 0 auto
}

.filepond--image-clip[data-transparency-indicator=grid] canvas, .filepond--image-clip[data-transparency-indicator=grid] img {
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='M0 0h50v50H0M50 50h50v50H50'/%3E%3C/svg%3E");
    background-size: 1.25em 1.25em
}

.filepond--image-bitmap, .filepond--image-vector {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform
}

.filepond--root[data-style-panel-layout~=integrated] .filepond--image-preview-wrapper {
    border-radius: 0
}

.filepond--root[data-style-panel-layout~=integrated] .filepond--image-preview {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.filepond--root[data-style-panel-layout~=circle] .filepond--image-preview-wrapper {
    border-radius: 99999rem
}

.filepond--root[data-style-panel-layout~=circle] .filepond--image-preview-overlay {
    top: auto;
    bottom: 0;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1)
}

.filepond--root[data-style-panel-layout~=circle] .filepond--file .filepond--file-action-button[data-align*=bottom]:not([data-align*=center]) {
    margin-bottom: .325em
}

.filepond--root[data-style-panel-layout~=circle] .filepond--file [data-align*=left] {
    left: calc(50% - 3em)
}

.filepond--root[data-style-panel-layout~=circle] .filepond--file [data-align*=right] {
    right: calc(50% - 3em)
}

.filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=left], .filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=right] {
    margin-bottom: .5125em
}

.filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=center] {
    margin-top: 0;
    margin-bottom: .1875em;
    margin-left: .1875em
}

/*!
* FilePond 4.32.12
* Licensed under MIT, https://opensource.org/licenses/MIT/
* Please visit https://pqina.nl/filepond/ for details.
*/
.filepond--assistant {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap
}

.filepond--browser.filepond--browser {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 1em;
    top: 1.75em;
    width: calc(100% - 2em);
    opacity: 0;
    font-size: 0
}

.filepond--data {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    visibility: hidden;
    pointer-events: none;
    contain: strict
}

.filepond--drip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: .1;
    pointer-events: none;
    border-radius: .5em;
    background: #00000003
}

.filepond--drip-blob {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 8em;
    height: 8em;
    margin-left: -4em;
    margin-top: -4em;
    background: #292625;
    border-radius: 50%
}

.filepond--drip-blob, .filepond--drop-label {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform, opacity
}

.filepond--drop-label {
    right: 0;
    margin: 0;
    color: #4f4f4f;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.filepond--drop-label.filepond--drop-label label {
    display: block;
    margin: 0;
    padding: .5em
}

.filepond--drop-label label {
    cursor: default;
    font-size: .875em;
    font-weight: 400;
    text-align: center;
    line-height: 1.5
}

.filepond--label-action {
    text-decoration: underline;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
    -webkit-text-decoration-color: #a7a4a4;
    text-decoration-color: #a7a4a4;
    cursor: pointer
}

.filepond--root[data-disabled] .filepond--drop-label label {
    opacity: .5
}

.filepond--file-action-button.filepond--file-action-button {
    font-size: 1em;
    width: 1.625em;
    height: 1.625em;
    font-family: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    will-change: transform, opacity
}

.filepond--file-action-button.filepond--file-action-button span {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap
}

.filepond--file-action-button.filepond--file-action-button svg {
    width: 100%;
    height: 100%
}

.filepond--file-action-button.filepond--file-action-button:after {
    position: absolute;
    left: -.75em;
    right: -.75em;
    top: -.75em;
    bottom: -.75em;
    content: ""
}

.filepond--file-action-button {
    cursor: auto;
    color: #fff;
    border-radius: 50%;
    background-color: #00000080;
    background-image: none;
    box-shadow: 0 0 #fff0;
    transition: box-shadow .25s ease-in
}

.filepond--file-action-button:focus, .filepond--file-action-button:hover {
    box-shadow: 0 0 0 .125em #ffffffe6
}

.filepond--file-action-button[disabled] {
    color: #ffffff80;
    background-color: #00000040
}

.filepond--file-action-button[hidden] {
    display: none
}

.filepond--action-edit-item.filepond--action-edit-item {
    width: 2em;
    height: 2em;
    padding: .1875em
}

.filepond--action-edit-item.filepond--action-edit-item[data-align*=center] {
    margin-left: -.1875em
}

.filepond--action-edit-item.filepond--action-edit-item[data-align*=bottom] {
    margin-bottom: -.1875em
}

.filepond--action-edit-item-alt {
    border: none;
    line-height: inherit;
    background: transparent;
    font-family: inherit;
    color: inherit;
    outline: none;
    padding: 0;
    margin: 0 0 0 .25em;
    pointer-events: all;
    position: absolute
}

.filepond--action-edit-item-alt svg {
    width: 1.3125em;
    height: 1.3125em
}

.filepond--action-edit-item-alt span {
    font-size: 0;
    opacity: 0
}

.filepond--file-info {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    margin: 0 .5em 0 0;
    min-width: 0;
    will-change: transform, opacity;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.filepond--file-info * {
    margin: 0
}

.filepond--file-info .filepond--file-info-main {
    font-size: .75em;
    line-height: 1.2;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%
}

.filepond--file-info .filepond--file-info-sub {
    font-size: .625em;
    opacity: .5;
    transition: opacity .25s ease-in-out;
    white-space: nowrap
}

.filepond--file-info .filepond--file-info-sub:empty {
    display: none
}

.filepond--file-status {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0;
    min-width: 2.25em;
    text-align: right;
    will-change: transform, opacity;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.filepond--file-status * {
    margin: 0;
    white-space: nowrap
}

.filepond--file-status .filepond--file-status-main {
    font-size: .75em;
    line-height: 1.2
}

.filepond--file-status .filepond--file-status-sub {
    font-size: .625em;
    opacity: .5;
    transition: opacity .25s ease-in-out
}

.filepond--file-wrapper.filepond--file-wrapper {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    height: 100%
}

.filepond--file-wrapper.filepond--file-wrapper > legend {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap
}

.filepond--file {
    position: static;
    display: flex;
    height: 100%;
    align-items: flex-start;
    padding: .5625em;
    color: #fff;
    border-radius: .5em
}

.filepond--file .filepond--file-status {
    margin-left: auto;
    margin-right: 2.25em
}

.filepond--file .filepond--processing-complete-indicator {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 3
}

.filepond--file .filepond--file-action-button, .filepond--file .filepond--processing-complete-indicator, .filepond--file .filepond--progress-indicator {
    position: absolute
}

.filepond--file [data-align*=left] {
    left: .5625em
}

.filepond--file [data-align*=right] {
    right: .5625em
}

.filepond--file [data-align*=center] {
    left: calc(50% - .8125em)
}

.filepond--file [data-align*=bottom] {
    bottom: 1.125em
}

.filepond--file [data-align=center] {
    top: calc(50% - .8125em)
}

.filepond--file .filepond--progress-indicator {
    margin-top: .1875em
}

.filepond--file .filepond--progress-indicator[data-align*=right] {
    margin-right: .1875em
}

.filepond--file .filepond--progress-indicator[data-align*=left] {
    margin-left: .1875em
}

[data-filepond-item-state*=error] .filepond--file-info, [data-filepond-item-state*=invalid] .filepond--file-info, [data-filepond-item-state=cancelled] .filepond--file-info {
    margin-right: 2.25em
}

[data-filepond-item-state~=processing] .filepond--file-status-sub {
    opacity: 0
}

[data-filepond-item-state~=processing] .filepond--action-abort-item-processing ~ .filepond--file-status .filepond--file-status-sub {
    opacity: .5
}

[data-filepond-item-state=processing-error] .filepond--file-status-sub {
    opacity: 0
}

[data-filepond-item-state=processing-error] .filepond--action-retry-item-processing ~ .filepond--file-status .filepond--file-status-sub {
    opacity: .5
}

[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing svg {
    -webkit-animation: fall .5s linear .125s both;
    animation: fall .5s linear .125s both
}

[data-filepond-item-state=processing-complete] .filepond--file-status-sub {
    opacity: .5
}

[data-filepond-item-state=processing-complete] .filepond--file-info-sub, [data-filepond-item-state=processing-complete] .filepond--processing-complete-indicator:not([style*=hidden]) ~ .filepond--file-status .filepond--file-status-sub {
    opacity: 0
}

[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing ~ .filepond--file-info .filepond--file-info-sub {
    opacity: .5
}

[data-filepond-item-state*=error] .filepond--file-wrapper, [data-filepond-item-state*=error] .filepond--panel, [data-filepond-item-state*=invalid] .filepond--file-wrapper, [data-filepond-item-state*=invalid] .filepond--panel {
    -webkit-animation: shake .65s linear both;
    animation: shake .65s linear both
}

[data-filepond-item-state*=busy] .filepond--progress-indicator svg {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes shake {
    10%, 90% {
        -webkit-transform: translateX(-.0625em);
        transform: translate(-.0625em)
    }
    20%, 80% {
        -webkit-transform: translateX(.125em);
        transform: translate(.125em)
    }
    30%, 50%, 70% {
        -webkit-transform: translateX(-.25em);
        transform: translate(-.25em)
    }
    40%, 60% {
        -webkit-transform: translateX(.25em);
        transform: translate(.25em)
    }
}

@keyframes shake {
    10%, 90% {
        -webkit-transform: translateX(-.0625em);
        transform: translate(-.0625em)
    }
    20%, 80% {
        -webkit-transform: translateX(.125em);
        transform: translate(.125em)
    }
    30%, 50%, 70% {
        -webkit-transform: translateX(-.25em);
        transform: translate(-.25em)
    }
    40%, 60% {
        -webkit-transform: translateX(.25em);
        transform: translate(.25em)
    }
}

@-webkit-keyframes fall {
    0% {
        opacity: 0;
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    70% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes fall {
    0% {
        opacity: 0;
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    70% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.filepond--hopper[data-hopper-state=drag-over] > * {
    pointer-events: none
}

.filepond--hopper[data-hopper-state=drag-over]:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100
}

.filepond--progress-indicator {
    z-index: 103
}

.filepond--file-action-button {
    z-index: 102
}

.filepond--file-status {
    z-index: 101
}

.filepond--file-info {
    z-index: 100
}

.filepond--item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 0;
    margin: .25em;
    will-change: transform, opacity;
    touch-action: auto
}

.filepond--item > .filepond--panel {
    z-index: -1
}

.filepond--item > .filepond--panel .filepond--panel-bottom {
    box-shadow: 0 .0625em .125em -.0625em #00000040
}

.filepond--item > .filepond--file-wrapper, .filepond--item > .filepond--panel {
    transition: opacity .15s ease-out
}

.filepond--item[data-drag-state] {
    cursor: -webkit-grab;
    cursor: grab
}

.filepond--item[data-drag-state] > .filepond--panel {
    transition: box-shadow .125s ease-in-out;
    box-shadow: 0 0 0 transparent
}

.filepond--item[data-drag-state=drag] {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.filepond--item[data-drag-state=drag] > .filepond--panel {
    box-shadow: 0 .125em .3125em #00000053
}

.filepond--item[data-drag-state]:not([data-drag-state=idle]) {
    z-index: 2
}

.filepond--item-panel {
    background-color: #64605e
}

[data-filepond-item-state=processing-complete] .filepond--item-panel {
    background-color: #369763
}

[data-filepond-item-state*=error] .filepond--item-panel, [data-filepond-item-state*=invalid] .filepond--item-panel {
    background-color: #c44e47
}

.filepond--item-panel {
    border-radius: .5em;
    transition: background-color .25s
}

.filepond--list-scroller {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    will-change: transform
}

.filepond--list-scroller[data-state=overflow] .filepond--list {
    bottom: 0;
    right: 0
}

.filepond--list-scroller[data-state=overflow] {
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-mask: linear-gradient(180deg, #000 calc(100% - .5em), transparent);
    mask: linear-gradient(180deg, #000 calc(100% - .5em), transparent)
}

.filepond--list-scroller::-webkit-scrollbar {
    background: transparent
}

.filepond--list-scroller::-webkit-scrollbar:vertical {
    width: 1em
}

.filepond--list-scroller::-webkit-scrollbar:horizontal {
    height: 0
}

.filepond--list-scroller::-webkit-scrollbar-thumb {
    background-color: #0000004d;
    border-radius: 99999px;
    border: .3125em solid transparent;
    background-clip: content-box
}

.filepond--list.filepond--list {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    will-change: transform
}

.filepond--list {
    left: .75em;
    right: .75em
}

.filepond--root[data-style-panel-layout~=integrated] {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0
}

.filepond--root[data-style-panel-layout~=circle] .filepond--panel-root, .filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root {
    border-radius: 0
}

.filepond--root[data-style-panel-layout~=circle] .filepond--panel-root > *, .filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root > * {
    display: none
}

.filepond--root[data-style-panel-layout~=circle] .filepond--drop-label, .filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label {
    bottom: 0;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 7
}

.filepond--root[data-style-panel-layout~=circle] .filepond--item-panel, .filepond--root[data-style-panel-layout~=integrated] .filepond--item-panel {
    display: none
}

.filepond--root[data-style-panel-layout~=compact] .filepond--list-scroller, .filepond--root[data-style-panel-layout~=integrated] .filepond--list-scroller {
    overflow: hidden;
    height: 100%;
    margin-top: 0;
    margin-bottom: 0
}

.filepond--root[data-style-panel-layout~=compact] .filepond--list, .filepond--root[data-style-panel-layout~=integrated] .filepond--list {
    left: 0;
    right: 0;
    height: 100%
}

.filepond--root[data-style-panel-layout~=compact] .filepond--item, .filepond--root[data-style-panel-layout~=integrated] .filepond--item {
    margin: 0
}

.filepond--root[data-style-panel-layout~=compact] .filepond--file-wrapper, .filepond--root[data-style-panel-layout~=integrated] .filepond--file-wrapper {
    height: 100%
}

.filepond--root[data-style-panel-layout~=compact] .filepond--drop-label, .filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label {
    z-index: 7
}

.filepond--root[data-style-panel-layout~=circle] {
    border-radius: 99999rem;
    overflow: hidden
}

.filepond--root[data-style-panel-layout~=circle] > .filepond--panel {
    border-radius: inherit
}

.filepond--root[data-style-panel-layout~=circle] > .filepond--panel > * {
    display: none
}

.filepond--root[data-style-panel-layout~=circle] .filepond--file-info, .filepond--root[data-style-panel-layout~=circle] .filepond--file-status {
    display: none
}

.filepond--root[data-style-panel-layout~=circle] .filepond--action-edit-item {
    opacity: 1 !important;
    visibility: visible !important
}

@media not all and (min-resolution: .001dpcm) {
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {
        .filepond--root[data-style-panel-layout~=circle] {
            will-change: transform
        }
    }
}

.filepond--panel-root {
    border-radius: .5em;
    background-color: #f1f0ef
}

.filepond--panel {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: 0;
    height: 100% !important;
    pointer-events: none
}

.filepond-panel:not([data-scalable=false]) {
    height: auto !important
}

.filepond--panel[data-scalable=false] > div {
    display: none
}

.filepond--panel[data-scalable=true] {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background-color: transparent !important;
    border: none !important
}

.filepond--panel-bottom, .filepond--panel-center, .filepond--panel-top {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0
}

.filepond--panel-bottom, .filepond--panel-top {
    height: .5em
}

.filepond--panel-top {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important
}

.filepond--panel-top:after {
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    bottom: -1px;
    background-color: inherit
}

.filepond--panel-bottom, .filepond--panel-center {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: translate3d(0, .5em, 0);
    transform: translate3d(0, .5em, 0)
}

.filepond--panel-bottom {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important
}

.filepond--panel-bottom:before {
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    top: -1px;
    background-color: inherit
}

.filepond--panel-center {
    height: 100px !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important
}

.filepond--panel-center:not([style]) {
    visibility: hidden
}

.filepond--progress-indicator {
    position: static;
    width: 1.25em;
    height: 1.25em;
    color: #fff;
    margin: 0;
    pointer-events: none;
    will-change: transform, opacity
}

.filepond--progress-indicator svg {
    width: 100%;
    height: 100%;
    vertical-align: top;
    transform-box: fill-box
}

.filepond--progress-indicator path {
    fill: none;
    stroke: currentColor
}

.filepond--list-scroller {
    z-index: 6
}

.filepond--drop-label {
    z-index: 5
}

.filepond--drip {
    z-index: 3
}

.filepond--root > .filepond--panel {
    z-index: 2
}

.filepond--browser {
    z-index: 1
}

.filepond--root {
    box-sizing: border-box;
    position: relative;
    margin-bottom: 1em;
    font-size: 1rem;
    line-height: normal;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: 450;
    text-align: left;
    text-rendering: optimizeLegibility;
    direction: ltr;
    contain: layout style size
}

.filepond--root * {
    box-sizing: inherit;
    line-height: inherit
}

.filepond--root :not(text) {
    font-size: inherit
}

.filepond--root[data-disabled] {
    pointer-events: none
}

.filepond--root[data-disabled] .filepond--list-scroller {
    pointer-events: all
}

.filepond--root[data-disabled] .filepond--list {
    pointer-events: none
}

.filepond--root .filepond--drop-label {
    min-height: 4.75em
}

.filepond--root .filepond--list-scroller {
    margin-top: 1em;
    margin-bottom: 1em
}

.filepond--root .filepond--credits {
    position: absolute;
    right: 0;
    opacity: .4;
    line-height: .85;
    font-size: 11px;
    color: inherit;
    text-decoration: none;
    z-index: 3;
    bottom: -14px
}

.filepond--root .filepond--credits[style] {
    top: 0;
    bottom: auto;
    margin-top: 14px
}

div[data-v-6c1f8d48] {
    width: 50%;
    height: 79vh;
    min-width: 400px
}

.push-field-error[data-v-dcdfb4af] {
    position: static;
    display: block;
    margin: .35rem 0 0;
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.4;
    text-align: right;
    color: #f44336
}

@font-face {
    font-family: PelakFA;
    src: url(fonts/PelakFA-Medium.woff2)
}

#forbidden[data-v-29d7ebce] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: PelakFA;
    padding: 50px 0
}

.number[data-v-29d7ebce] {
    font-family: PelakFA;
    font-style: normal;
    font-weight: 700;
    font-size: 112px;
    line-height: 162px;
    display: flex;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, #00569f, #00569fb8 39.81%, #00569f00 70.91%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: -14px 9px 40px rgba(48, 53, 124, .04);
    margin: 0 0 -80px
}

h1[data-v-29d7ebce] {
    font-family: PelakFA;
    font-style: normal;
    font-weight: 800;
    font-size: 36px;
    line-height: 52px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #8b8b8b
}

h6[data-v-29d7ebce] {
    font-family: PelakFA;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 44px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #8b8b8b
}

.bnpl-demo-page #LoginPage {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 0 12px 24px
}

.bnpl-demo-page .col-md-8, .bnpl-demo-page .col-xl-6, .bnpl-demo-page .col-xl-10, .bnpl-demo-page .col-xxl-9, .bnpl-demo-page .col-11 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important
}

.bnpl-demo-page .detail_notif {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
    align-self: stretch !important
}

.bnpl-demo-page .InterCodeDiv {
    min-width: unset !important;
    width: 100% !important;
    max-width: 100% !important
}

.bnpl-demo-page .InterCodeDiv .ReciveCode {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px
}

.bnpl-demo-page .InterCodeDiv .ReciveCode > div {
    flex-direction: row !important;
    justify-content: center !important
}

.bnpl-demo-page .InterCodeDiv .inputDiv {
    flex-wrap: wrap;
    gap: 12px
}

.bnpl-demo-page .InterCodeDiv .inputDiv .intercodeIMG {
    display: none
}

.bnpl-demo-page .InterCodeDiv .inputDiv .input {
    width: 100% !important;
    flex: 1 1 100%
}

.bnpl-demo-page .InterCodeDiv .inputDiv input {
    min-width: unset !important;
    width: 100%
}

.bnpl-demo-page .InterCodeDiv .inputDiv .btn, .bnpl-demo-page .InterCodeDiv .inputDiv button {
    width: 100% !important;
    min-width: unset !important;
    margin-top: 0 !important;
    flex: 1 1 100%
}

.bnpl-demo-page .ReciveCodeDiv {
    width: 100% !important;
    max-width: 100% !important
}

.bnpl-demo-page .ReciveCodeDiv .phoneLogo {
    display: none !important
}

.bnpl-demo-page .ReciveCodeDiv .phoneText {
    flex: 1 1 auto;
    min-width: 0
}

.bnpl-demo-page .ReciveCodeDiv .btn, .bnpl-demo-page .ReciveCodeDiv button {
    flex-shrink: 0;
    white-space: nowrap
}

.bnpl-demo-page .UserInquiryLock {
    width: 100% !important;
    max-width: 100% !important
}

.bnpl-demo-page .UserInquiryLock .main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important
}

.bnpl-demo-page .UserInquiryLock .t1, .bnpl-demo-page .UserInquiryLock .des {
    width: 100%
}

.bnpl-demo-page .promissorynote, .bnpl-demo-page .MainDiv, .bnpl-demo-page .cpg-bnpl-invoice-page {
    width: 100% !important;
    max-width: 100% !important
}

#layer12, #layer14 {
    animation: rotateGear 3s linear infinite;
    transform-origin: center;
    transform-box: fill-box
}

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