@font-face {
    font-family: 'iranianSans';
    /*src: url('../font/iransansweb(fanum).eot') format('embedded-opentype');*/
    src: url('../font/iransansweb(fanum).eot') format('embedded-opentype');
    src: url('../font/iransansweb(fanum).ttf') format('truetype');
}

@font-face {
    font-family: 'goldeneye';
    src: url('../font/007 goldeneye.ttf') format('truetype');
}

@font-face {
    font-family: 'marker';
    src: url('../font/123marker.ttf') format('truetype');
}

@font-face {
    font-family: 'TitrFont';
    src: url('../font/b titr bold_0.ttf') format('truetype');
}

@font-face {
    font-family: 'Nastaligh';
    src: url('../font/persian-khat-khati-02.ttf') format('truetype');
}

.alertify-notifier {
    z-index: 999999999 !important;
}

.swal2-popup .swal2-title {
    font-size: 1.375em;
}

.highcharts-credits {
    display: none !important;
}

.badge {
    color: white !important;
    /*padding: 0.6em 0.6em !important;*/
    text-shadow: 1px 1px 4px #00000059;
}

.bg-success {
    background-color: #3eb557;
}

.bg-blue {
    background-color: #5d94cc;
}

.bg-pink {
    background-color: hotpink;
}

.bg-silver {
    background-color: silver;
}

.bg-brown {
    background-color: #ce6c27;
}

.btn-dark {
    color: #fff;
    background-color: #606060;
    border-color: #4c4c4c;
}

    .btn-dark:hover, .btn-dark:focus {
        color: white !important;
        background-color: #4B4B4B !important;
        border-color: #3E3E3E !important;
    }

.btn {
    cursor: pointer !important;
}

.btn-blue {
    background-color: #007bff;
    transition: .3s all ease-in-out;
    color: white !important;
}

    .btn-blue:hover, .btn-blue:active, .btn-blue:focus {
        background-color: #006DE1 !important;
        transition: .25s all ease-in-out;
    }

.btn-silver {
    background-color: #a2a2a2;
    border-color: #939393;
    color: #fff !important;
    transition: .3s all ease-in-out;
}

    .btn-silver:hover {
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
        background-color: #7c7c7c;
        transition: .25s all ease-in-out;
    }

.btnWithIcon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px 15px !important;
}

    .btnWithIcon i {
        color: white;
        font-size: 22px;
        margin-left: 10px !important;
    }

.ScrollToTop {
    position: fixed;
    bottom: 25px;
    left: 25px;
    background: rgb(3 78 162 / 70%);
    cursor: pointer;
    color: white;
    z-index: 99999;
    padding: 6px 12px;
    border-radius: 50px;
    box-shadow: 0 0 10px rgb(0 0 0 / 26%);
    display: none;
}

    .ScrollToTop:hover {
        background: rgb(3 78 162 / 100%);
    }

    .ScrollToTop i {
        font-size: 18px;
    }

.dir-rtl {
    direction: rtl;
}

.dir-ltr {
    direction: ltr;
}

/* ===================== (Start) Change Scrollbar ===================== */
.Scroll-Customization::-webkit-scrollbar {
    width: 6px;
    height: 7px;
}

/* Track */
.Scroll-Customization::-webkit-scrollbar-track {
    background: #5d5d5d21;
}

/* Handle */
.Scroll-Customization::-webkit-scrollbar-thumb {
    background: #00000038;
    border-radius: 50px;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

    /* Handle on hover */
    .Scroll-Customization::-webkit-scrollbar-thumb:hover {
        background: rgb(239 81 125 / 0.40);
    }

.white-scroll::-webkit-scrollbar-track {
    background: #00000021;
}

.white-scroll::-webkit-scrollbar-thumb {
    background: #9f9f9f;
}

    .white-scroll::-webkit-scrollbar-thumb:hover {
        background: #b3b3b3;
    }
/* ====================== (END) Change Scrollbar ====================== */
.rounded-img {
    border-radius: 8px;
}

.accordion-collapse .accordion-content .badge {
    color: white !important;
    padding: 0.6em 1.8em 0.6em 0.7em !important;
    position: relative;
    border-radius: 15px 30px 30px 15px;
}

    .accordion-collapse .accordion-content .badge::before {
        content: '';
        background: #ffffffeb;
        width: 5px;
        height: 5px;
        z-index: 999;
        display: inline-block;
        border-radius: 50px;
        position: absolute;
        right: 7px;
        top: 9px;
    }

/*============================================ Key Frames ============================================*/
@keyframes Spiner {
    from {
        transform: rotateZ(0deg)
    }

    to {
        transform: rotateZ(360deg)
    }
}

.Spiner {
    animation-name: Spiner;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: linear;
    animation-duration: 6s;
}




@keyframes SpinerRevers {
    from {
        transform: rotateZ(0deg)
    }

    to {
        transform: rotateZ(-360deg)
    }
}

.ReversSpiner {
    animation-name: SpinerRevers;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: linear;
    animation-duration: 6s;
}

@keyframes Puls {
    0% {
        transform: scale(1)
    }


    50% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

.PulsAnimate {
    animation-name: Puls;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: linear;
    animation-duration: 1s;
}
/*============================================ PreLoader ============================================*/



/*============================================ Styles ============================================*/
* {
    box-sizing: border-box;
    padding: 0;
    font-family: 'iranianSans';
    /*line-height: 1.5;*/
    font-weight: normal;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.fc {
    clear: both;
}


@media only screen and (max-width: 991px) {
    .MobileOff {
        display: none;
    }

    .MobileOn {
        display: block;
    }
}

@media only screen and (min-width: 991px) {
    .displayOff {
        display: none;
    }

    .MobileOn {
        display: none;
    }
}





.checkbox_animated {
    cursor: pointer;
    position: relative;
    margin: 0 1rem 0 0
}

    .checkbox_animated:before {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75), -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        -webkit-transform: rotate(-45deg) scale(0, 0);
        transform: rotate(-45deg) scale(0, 0);
        content: "";
        position: absolute;
        left: 0.25rem;
        top: 0.225rem;
        z-index: 1;
        width: 0.75rem;
        height: 0.375rem;
        border: 2px solid #4551e2;
        border-top-style: none;
        border-right-style: none
    }

    .checkbox_animated:after {
        content: "";
        position: absolute;
        top: -0.125rem;
        left: 0;
        width: 1.3rem;
        height: 1.3rem;
        background: #fff;
        border: 2px solid #a8aaa6;
        cursor: pointer
    }

    .checkbox_animated:checked:before {
        -webkit-transform: rotate(-45deg) scale(1, 1);
        transform: rotate(-45deg) scale(1, 1)
    }

.Danger_Hint {
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #950a02;
    background-image: linear-gradient(to bottom right, #fee7bc, #ffd7d2);
    margin-bottom: 10px;
    margin-top: 10px;
}

    .Danger_Hint p {
        text-align: center;
        font-size: 13px;
        font-weight: bold !important;
    }

.link {
    cursor: pointer;
}

    .link * {
        cursor: pointer;
    }

.radio_animated {
    position: relative;
    margin: 0 1rem 0 0;
    cursor: pointer
}

    .radio_animated:before {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75), -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
        content: "";
        position: absolute;
        top: 0;
        left: 0.125rem;
        z-index: 1;
        width: 0.75rem;
        height: 0.75rem;
        background: #4466f2;
        border-radius: 50%
    }

    .radio_animated:after {
        content: "";
        position: absolute;
        top: -0.25rem;
        left: -0.125rem;
        width: 1.25rem;
        height: 1.25rem;
        background: #fff;
        border: 2px solid #afbad1;
        border-radius: 50%
    }

    .radio_animated:checked:before {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

/*===========================================================Kartiam Modal====================================================*/

.FM-Wrapper {
    z-index: 999;
    background-color: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
}

.FM {
    width: 80%;
    min-height: 300px;
    max-height: 80vh;
    position: relative;
    top: 10%;
    margin: auto;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0px 4px 20px 1px #221527;
}

.FM-Header {
    width: 100%;
    height: 50px;
    background-color: #f29f05;
    border-radius: 8px 8px 0 0;
    border-top: 3px #f29f05 solid;
    border-left: 3px #f29f05 solid;
    border-right: 3px #f29f05 solid;
    padding: 0 15px 0 15px;
}

    .FM-Header h3 {
        position: relative;
        top: 10px;
        color: white;
        font-size: 18px;
    }

    .FM-Header i {
        color: white;
        font-size: 18px;
        position: relative;
        top: 11px;
        cursor: pointer;
    }

.FM-Body {
    width: 100%;
    position: relative;
    min-height: 225px;
    max-height: calc(80vh - 75px);
    background-color: white;
    border-left: 5px #f29f05 solid;
    border-right: 5px #f29f05 solid;
    overflow: auto;
    padding: 25px;
}

.FM-Footer {
    width: 100%;
    height: 25px;
    background-color: #f29f05;
    border-radius: 0 0 8px 8px;
    border-bottom: 3px #f29f05 solid;
    border-left: 3px #f29f05 solid;
    border-right: 3px #f29f05 solid;
}

    .FM-Footer p {
        color: #cacaca;
        text-align: center
    }

@media only screen and (max-width: 991px) {
    .FM {
        width: 90%;
        min-height: 250px;
        max-height: 80vh;
    }

    .FM-Body {
        min-height: 175px;
        max-height: calc(80vh - 75px);
    }
}



/*===========================================================Styles====================================================*/
body {
    direction: rtl;
    /*background-color: #eae8ff;*/
}


.DashboardFildset {
    width: 90%;
    margin: auto;
    border: solid 2px black;
    border-radius: 10px;
    padding: 25px;
    transition-duration: .5s;
    margin-bottom: 25px;
}

.Red_Gradiant {
    background-image: linear-gradient(to bottom right, #ff2b2b, #f98675)
}

.Green_Gradiant {
    background-image: linear-gradient(to bottom right, #1c8e0f, #78ef6b)
}

.LightGreen_Gradiant {
    background-image: linear-gradient(to bottom right, #61fc58, #a3fd9d)
}

.Purple_Gradiant {
    background-image: linear-gradient(to bottom right, #750491, #a927ef)
}

.Yellow_Gradiant {
    background-image: linear-gradient(to bottom right, #ffec06, #f7fb60)
}

.Gold_Gradiant {
    background-image: linear-gradient(to bottom right, #caa202, #ffcd35)
}

.Blue_Gradiant {
    background-image: linear-gradient(to bottom right, #0640c6, #0aa7fc)
}

.LightBlue_Gradiant {
    background-image: linear-gradient(to bottom right, #07ede8, #84fbf8)
}

.CustomRed_Gradiant {
    background: linear-gradient(-135deg, #87325a 0, #b66365 100%) !important;
}


.Golden_Gradiant_cart {
    background: linear-gradient(-135deg, #e3b704 0, #c89c06 100%) !important;
    color: #fff;
}

.Fartak_Gradiant {
    background: linear-gradient(-135deg, #380d3c 0, #f29f05 100%) !important;
}

.Fartak_Gradiant_revers {
    background: linear-gradient(-135deg, #f29f05 0, #380d3c 100%) !important;
}

.Kartiam-responsive-table {
    overflow-x: auto;
}

@media all and (max-width: 768px) {
    table.FartakTable {
        width: max-content;
    }
}

table.FartakTable {
    text-align: center;
    vertical-align: middle;
    border: unset;
}

    table.FartakTable > thead > tr > th {
        background-color: #710d80d6 !important;
        color: white !important;
        border: 1px solid #f29f05 !important;
        font-size: 12px;
        height: 36px !important;
        min-height: min-content !important;
        padding: 0px 10px !important;
    }

    table.FartakTable > tbody > tr > td {
        height: unset !important;
        min-height: max-content !important;
        padding: 8px !important;
        border: 1px solid #f3c9fa !important;
        font-size: 16px;
    }

    table.FartakTable > tbody > tr {
        transition-duration: .2s;
    }

        table.FartakTable > tbody > tr:hover {
            background-color: rgb(113 13 128 / 18%);
        }

@media only screen and (max-width: 800px) {
    table.FartakTable > thead > tr > th {
        font-size: 15px;
    }

    table.FartakTable > tbody > tr > td {
        font-size: 15px;
    }
}


.sticky-table {
    overflow-x: auto;
    max-height: 700px
}

    .sticky-table > table {
        width: max-content;
    }

        .sticky-table > table > thead {
            position: sticky;
            top: 0;
            background: #883494;
        }

            .sticky-table > table > thead > tr > th {
                background-color: #883494 !important;
                color: white !important;
                border: 1px solid #f3c9fa !important;
                font-size: 12px;
                height: 36px !important;
                min-height: min-content !important;
                padding: 0px 10px !important;
            }




fieldset {
    border: 2px solid #f29f05;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    /*overflow-x: auto;*/
}

    fieldset > legend {
        max-width: 50%;
        /*margin-right: 25px;*/
        /*font-size: 20px;*/
        font-size: 15px;
        transition-duration: .5s;
        text-align: center;
    }

    fieldset:hover > legend {
        padding-right: 35px;
    }

.DashboardCarts {
    max-height: unset;
}

.card-body {
    max-height: unset;
}

.Headericon {
    position: absolute;
    left: 25px;
    font-size: 35px;
    animation-name: Puls;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: linear;
    animation-duration: 2s;
}




.hintWrapper {
    padding: 25px;
}

    .hintWrapper p {
        font-size: 15px;
    }

    .hintWrapper .HeaderHint {
        font-size: 20px;
        font-weight: bold;
        margin-right: -10px;
    }

.hintPanel_Success {
    border: 2px solid #094e01;
    background-color: #a5fb9b;
    border-radius: 8px;
    padding: 20px;
    margin: auto;
}

.hintPanel_Warning {
    border: 2px solid #b46d05;
    background-color: #fbc779;
    border-radius: 8px;
    padding: 20px;
    margin: auto;
    margin-bottom: 30px;
}

    .hintPanel_Warning p {
        font-size: 15px;
        font-weight: bold !important;
        text-align: justify;
        margin-bottom: 3px;
    }

.hintPanel_Danger {
    border: 2px solid #830707;
    background-color: #fbaaaa;
    border-radius: 8px;
    padding: 20px;
    margin: auto;
}


.hintCenter {
    text-align: center;
}

.hintJustify {
    text-align: justify;
}


.ShadowHover-Black {
    transition-duration: .3s;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
}

    .ShadowHover-Black:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.45);
    }


.ClubCardImg {
    height: 196.5px !important;
    width: 100% !important;
}

.Separator-Left {
    border-left: 1px solid silver;
}

.Separator-Right {
    border-right: 1px solid silver;
}

@media only screen and (max-width: 991px) {
    .Separator-Right {
        border-right: none;
        border-bottom: 1px solid silver;
    }

    .Separator-Left {
        border-left: none;
        border-bottom: 1px solid silver;
    }
}



.Fixed_PlaceHolder {
    position: relative;
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

    .Fixed_PlaceHolder > label {
        position: absolute;
        top: 8px;
        left: 22px;
        /*color: #6b6b6b;*/
        color: darkred;
        background-color: white;
        transition-duration: .3s;
    }

    .Fixed_PlaceHolder p.TextPrice {
        font-size: 14px;
        font-weight: bold;
        text-align: center
    }

        .Fixed_PlaceHolder p.TextPrice > span {
            font-size: 19px;
            font-weight: bold;
            color: darkred;
        }

.PlaceHolderMove {
    top: -15px !important;
    left: 8px !important;
    font-size: 20px !important;
}

.PriceValue {
    font-size: 16px !important;
}
/*================================== glowing Border =======================================*/
.GlowAnimateBorder-5s {
    padding: 20px 40px;
    transition: all 0.3s linear;
    position: relative;
    text-decoration: none;
    box-shadow: -3px 3px 15px 0px rgba(0,0,0,0.5);
    overflow: hidden;
}

    .GlowAnimateBorder-5s:before {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        bottom: 2px;
        width: 50%;
        background-color: rgba(255,255,255,0.05);
    }

    .GlowAnimateBorder-5s > span:nth-child(1) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: -moz-linear-gradient( left, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
        background: -webkit-linear-gradient( left, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
        background: linear-gradient( to right, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#007db9e8", endColorstr="#1e5799", GradientType=1 );
        animation: Glowanimate1 5s cubic-bezier(0, 0.15, 0, 1.05) infinite;
    }

@keyframes Glowanimate1 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.GlowAnimateBorder-5s > span:nth-child(2) {
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: -moz-linear-gradient( top, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
    background: -webkit-linear-gradient( top, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
    background: linear-gradient( to bottom, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#007db9e8", endColorstr="#1e5799", GradientType=0 );
    animation: Glowanimate2 5s linear infinite 0.5s;
}

@keyframes Glowanimate2 {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

.GlowAnimateBorder-5s > span:nth-child(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -moz-linear-gradient( left, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
    background: -webkit-linear-gradient( left, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
    background: linear-gradient( to right, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799", endColorstr="#007db9e8", GradientType=1 );
    animation: Glowanimate3 5s cubic-bezier(0, 0.15, 0, 1.05) infinite;
}

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

    100% {
        transform: translateX(-100%);
    }
}

.GlowAnimateBorder-5s > span:nth-child(4) {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: -moz-linear-gradient( top, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
    background: -webkit-linear-gradient( top, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
    background: linear-gradient( to bottom, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799", endColorstr="#007db9e8", GradientType=0 );
    animation: Glowanimate4 5s linear infinite 0.5s;
}

@keyframes Glowanimate4 {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(-100%);
    }
}





.GlowAnimateBorder-1s {
    padding: 20px 40px;
    transition: all 0.3s linear;
    position: relative;
    text-decoration: none;
    box-shadow: -3px 3px 15px 0px rgba(0,0,0,0.5);
    overflow: hidden;
}

    .GlowAnimateBorder-1s:before {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        bottom: 2px;
        width: 50%;
        background-color: rgba(255,255,255,0.05);
    }

    .GlowAnimateBorder-1s > span:nth-child(1) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: -moz-linear-gradient( left, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
        background: -webkit-linear-gradient( left, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
        background: linear-gradient( to right, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#007db9e8", endColorstr="#1e5799", GradientType=1 );
        animation: Glowanimate1 1s linear infinite;
    }


    .GlowAnimateBorder-1s > span:nth-child(2) {
        position: absolute;
        right: 0;
        top: 0;
        width: 2px;
        height: 100%;
        background: -moz-linear-gradient( top, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
        background: -webkit-linear-gradient( top, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
        background: linear-gradient( to bottom, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100% );
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#007db9e8", endColorstr="#1e5799", GradientType=0 );
        animation: Glowanimate2 1s linear infinite 0.5s;
    }


    .GlowAnimateBorder-1s > span:nth-child(3) {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: -moz-linear-gradient( left, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
        background: -webkit-linear-gradient( left, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
        background: linear-gradient( to right, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799", endColorstr="#007db9e8", GradientType=1 );
        animation: Glowanimate3 1s linear infinite;
    }


    .GlowAnimateBorder-1s > span:nth-child(4) {
        position: absolute;
        left: 0;
        top: 0;
        width: 2px;
        height: 100%;
        background: -moz-linear-gradient( top, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
        background: -webkit-linear-gradient( top, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
        background: linear-gradient( to bottom, rgba(30, 87, 153, 1) 0%, rgba(125, 185, 232, 0) 100% );
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799", endColorstr="#007db9e8", GradientType=0 );
        animation: Glowanimate4 1s linear infinite 0.5s;
    }





.GlowBorder-Green {
    background: -moz-linear-gradient( top, rgba(49, 139, 44, 1) 0%, rgba(115, 250, 107, 0) 100% ) !important;
    background: -webkit-linear-gradient( top, rgba(49, 139, 44, 1) 0%, rgba(115, 250, 107, 0) 100% ) !important;
    background: linear-gradient( to bottom, rgba(49, 139, 44, 1) 0%, rgba(115, 250, 107, 0) 100% ) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#318b2c", endColorstr="#73fa6b", GradientType=0 ) !important;
}






/*================================== Message Popup =======================================*/


.PublicMsg_page, .TargetedMSG_page {
    z-index: 100000;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.PublicMsg_wrapper {
    border-radius: 8px;
    padding: 5px;
    display: flex;
    margin: auto;
    /* background-color: #f29f05; */
    background-color: #881e91a8;
    /* min-height: 40vh; */
    width: 60vw;
    max-height: 95vh;
    backdrop-filter: blur(1.5px);
}

    .PublicMsg_wrapper .MessageImg {
        max-width: 90%;
        margin: auto;
        height: auto;
        border: 2px solid #b3b0ae;
        margin-bottom: 25px;
        border-radius: 5px;
        box-shadow: -3px 7px 20px 0px #7d7875;
    }

.message-main-content {
    background-color: white;
    border: 3px solid transparent;
    /*height: 100%;*/
    width: 100%;
    padding: 10px;
    overflow-y: auto;
    border-radius: 8px;
}

.PublicMsg_wrapper .message-main-content .row {
    margin: 0;
}

.PublicMsg_wrapper .item p span {
    font-family: 'iranianSans' !important;
}

.PublicHeader {
    margin: auto;
    font-size: 1.1rem;
}

.Msg_title {
    margin-bottom: 15px;
    position: relative;
    right: 15px;
}

.Msg_Body {
    margin-bottom: 5px;
    font-size: 14px;
    text-align: justify;
}

.InnerPublicMsgs {
    height: calc(100% - 52px)
}

.Signature {
    margin-top: 15px;
    font-size: 12px;
    color: silver;
}


@keyframes alertSpan {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}



.alertSpan {
    font-size: 28px !important;
    animation-name: alertSpan;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}








@media only screen and (max-width: 991px) {
    .PublicMsg_wrapper {
        max-height: 95vh;
        width: 95vw;
    }

        .PublicMsg_wrapper .MessageImg {
            max-width: 95%;
            margin: auto;
            height: auto;
            border: 2px solid #b3b0ae;
            margin-bottom: 25px;
            border-radius: 5px;
            box-shadow: -3px 7px 20px 0px #7d7875;
        }

    .message-main-content {
        overflow-y: auto;
        padding-bottom: 20px !important;
    }

    .InnerMount {
        width: 95% !important;
        float: right;
    }

    .InnerDays {
        width: 95% !important;
        float: right;
    }
}




/*#region Send ticket */
.TicketAnswer_MainContainer textarea {
    height: 180px !important;
}

.send-ticket__uploader .uploder-wrapper {
    margin: 10px;
}

.send-ticket__uploader .file-upload {
    display: none;
}

.ticket-uploaded-files {
    margin: 25px 10px 0;
}

    .ticket-uploaded-files .title {
        margin-bottom: 10px;
        border-right: 3px solid #2397cf;
        padding-right: 8px;
    }

    .ticket-uploaded-files .image-box {
        border-radius: 15px !important;
        overflow: hidden;
        width: 100px;
        height: 100px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        background: white;
        box-shadow: 2px 2px 15px rgb(0 0 0 / 25%);
        display: inline-block;
    }

.send-ticket__uploader.ticket-uploaded-files .image-box {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ticket-uploaded-files .image-box .icon {
    width: 40px;
    height: 40px;
    fill: #898989;
}

.ticket-uploaded-files .image-box .image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.send-ticket__uploader .upload-box {
    color: #666666;
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
    width: fit-content;
    display: inline-block;
    position: absolute;
    right: 31px;
    bottom: 15px;
}

    .send-ticket__uploader .upload-box:hover {
        transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
    }

.send-ticket__uploader .upload-button {
    background: #2297cf;
    padding: 6px 7px;
    border-radius: 50px;
    font-size: 13px;
    color: white;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 25%);
    cursor: pointer;
}
/*#endregion */


.InnerWrapper {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.Innerticket {
    width: 60%;
    border: 2px solid black;
    padding: 10px;
    border-radius: 8px;
}

    .Innerticket > p {
        margin-bottom: 5px;
        text-align: justify;
        font-size: 14px;
    }

.InnerHeader {
    /*border-radius: 8px;*/
    position: relative;
    padding: 10px 10px 0 10px;
    background: linear-gradient(-135deg, #380d3c 0, #f29f05 100%) !important;
    /*margin-bottom:8px;*/
    margin: -10px -10px 8px -10px;
}

    .InnerHeader > label.InnerName {
        color: white;
        font-size: 17px;
    }

    .InnerHeader > label.InnerRole {
        color: white;
        font-size: 13px;
    }

.QueueTicket {
    position: absolute;
    top: 20px;
    left: 10px;
    color: white
}

.MyTicket {
    background-color: #b0b0fd;
}

.OtherTicket {
    background-color: #b3fbb8;
}


.InnerFooter {
    border-top: 1px solid silver;
    padding-top: 4px;
}

    .InnerFooter > label {
        font-size: 10px;
        margin-bottom: 0;
    }


@media only screen and (max-width: 991px) {
    .Innerticket {
        width: 100%;
        clear: both;
    }
}

/*======================================BILLBOARD===============================*/
.Kartiam-billboard {
    border: 2px solid #c9c9c9;
    border-radius: 8px;
    padding: 10px;
    background-color: #efefef;
    min-height: 90px;
    margin-bottom: 15px;
    margin-top: 10px;
}

    .Kartiam-billboard label {
        font-size: 13px;
        font-weight: bold;
    }

    .Kartiam-billboard div {
        min-height: unset;
    }

    .Kartiam-billboard h6 {
        margin-bottom: 8px;
    }

    .Kartiam-billboard p {
        font-size: 12px;
        margin-bottom: 0px;
    }

        .Kartiam-billboard p > i {
            font-size: 16px;
            color: #711181;
        }

    .Kartiam-billboard hr {
        margin-top: 0;
        margin-bottom: 0;
    }

    .Kartiam-billboard .sepratorHR {
        max-height: 5px;
        margin-bottom: 10px;
    }



.HiddenPanel_Header {
    background-image: linear-gradient(to bottom, #59038d, #140789);
    min-height: 45px;
    border-radius: 8px;
    position: relative;
    margin-top: 10px;
    transition-duration: .2s;
}

    .HiddenPanel_Header .Title1 {
        color: white;
        position: absolute;
        top: 10px;
        right: 20px;
    }

    .HiddenPanel_Header .Title2 {
        color: white;
        position: absolute;
        top: 10px;
        left: 20px;
    }

.HiddenPanel_Body {
    max-height: 0px;
    transition-duration: 1s;
    overflow: hidden;
    padding: 0px;
}

    .HiddenPanel_Body label {
        font-size: 13px;
        font-weight: bold;
    }

.HiddenPanel_Body_show {
    max-height: 2000px !important;
    overflow-y: auto;
    padding: 15px;
    border: 2px solid #140789;
}

.HiddenPanel_Header_show {
    border-radius: 8px 8px 0 0 !important;
}

.TwoBTNInput {
    width: 100%;
    /*height: 100%;*/
    position: relative;
    display: flex
}

    .TwoBTNInput > label {
        position: absolute;
        top: 8px;
        font-size: 14px
    }

    .TwoBTNInput > div {
        display: inline-block;
        margin: auto;
    }

        .TwoBTNInput > div > .Btn1 {
            margin: 0;
            width: 40px;
            height: 40px;
            border-radius: 0 8px 8px 0;
            border: 1px solid #4b0953;
            position: relative;
            right: 5px;
            top: -1px;
            border-left: 0;
            color: white;
            background-color: #4b0953;
            cursor: pointer;
        }

        .TwoBTNInput > div > input {
            margin: 0;
            width: 85px;
            height: 39px;
            text-align: center;
            border-top: 1px solid #4b0953;
            border-bottom: 1px solid #4b0953;
            border-left: 0;
            border-right: 0;
        }

        .TwoBTNInput > div > .Btn2 {
            margin: 0;
            width: 40px;
            height: 40px;
            border-radius: 8px 0 0 8px;
            border: 1px solid #4b0953;
            position: relative;
            left: 5px;
            top: -1px;
            border-right: 0;
            color: white;
            background-color: #4b0953;
            cursor: pointer;
        }




        .TwoBTNInput > div > .Btn1_25 {
            margin: 0;
            width: 40px;
            height: 40px;
            border-radius: 0 8px 8px 0;
            border: 1px solid #4b0953;
            position: relative;
            right: 5px;
            top: -1px;
            border-left: 0;
            color: white;
            background-color: #4b0953;
            cursor: pointer;
        }


        .TwoBTNInput > div > .Btn2_25 {
            margin: 0;
            width: 40px;
            height: 40px;
            border-radius: 8px 0 0 8px;
            border: 1px solid #4b0953;
            position: relative;
            left: 5px;
            top: -1px;
            border-right: 0;
            color: white;
            background-color: #4b0953;
            cursor: pointer;
        }

@keyframes PulsElement {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.RadioCardDashbord {
    display: flex;
}

    .RadioCardDashbord > .RadioLayer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 2;
    }

    .RadioCardDashbord > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .RadioCardDashbord > h6 {
        position: absolute;
        top: 15px;
        left: 20px;
        z-index: 5;
        font-family: "Nastaligh";
        color: white;
        font-size: 35px;
    }

    .RadioCardDashbord > i#DashboradRadioPlay {
        z-index: 3;
        margin: auto;
        color: #c5c5c5;
        font-size: 45px;
        cursor: pointer;
    }

        .RadioCardDashbord > i#DashboradRadioPlay:hover {
            animation-name: PulsElement;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-play-state: running;
            animation-duration: .7s;
        }

    .RadioCardDashbord > i#DashboradRadioPause {
        z-index: 3;
        margin: auto;
        color: #c5c5c5;
        font-size: 45px;
        cursor: pointer;
    }

        .RadioCardDashbord > i#DashboradRadioPause:hover {
            animation-name: PulsElement;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-play-state: running;
            animation-duration: .7s;
        }

.DashboardRadioPlayer {
    width: calc(100% - 300px);
    /*background-color:black;*/
    z-index: 1000;
    position: fixed;
    top: calc(100vh - 50px);
    left: 0;
    height: 50px;
}

    .DashboardRadioPlayer > audio {
        width: 100%;
    }

@media only screen and (max-width: 991px) {
    .DashboardRadioPlayer {
        width: 100%;
        /*background-color:black;*/
        z-index: 1000;
        position: fixed;
        top: calc(100vh - 50px);
        left: 0;
        height: 50px;
    }
}


.RowEntity {
    background: linear-gradient(-135deg, #5c015a 0, #b836fe 100%) !important;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: -1px 3px 7px 1px black;
    transition-duration: .5s;
}

    .RowEntity h6 {
        color: white;
        margin-bottom: 30px;
    }

.RowEntity-Txt > label {
    color: white;
    font-size: 13px;
}

.RowEntity-Txt > p {
    font-size: 13px;
    color: white;
    text-align: justify;
}

.RowEntity-Control {
    text-align: center;
    border-radius: 8px;
    border: 1px solid white;
    padding: 10px;
}

.entityImage {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 2px solid black;
    margin-bottom: 6px;
}


/*======================Ebrahimi=====================================*/
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text {
    border-radius: 0 5px 5px 0 !important;
}

.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) {
    border-radius: 5px 0 0 5px !important;
}
/*============================start Paging==Ebrahimi=========================*/

.paging-center {
    margin: auto;
    width: 50%;
    padding: 10px;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

    .pagination a.active {
        background-color: dodgerblue;
        color: white;
    }

    .pagination a:hover:not(.active) {
        background-color: #ddd;
    }
/*============================End Paging===========================*/



/* ============================================================== */
/* =========================== Avatar =========================== */
/* ============================================================== */
.cursor-p {
    cursor: pointer;
}

.avatar-box .showProfileUploaded {
    /*background: linear-gradient( 90deg, #00d669e0 0%, #68d770bf 90%);*/
    width: 240px;
    margin: 0 auto 20px;
    display: flex;
    padding: 10px 15px 50px;
    border: 1px solid #d6d6d6;
    border-radius: 15px;
    box-shadow: 0 0 17px rgb(0 0 0 / 20%), 10px 11px 11px 2px rgb(255 255 255 / 100%);
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .avatar-box .showProfileUploaded img#avatar-img-view {
        width: 120px;
        border: 2px solid #bdbdbd;
        padding: 2px;
        border-radius: 100%;
    }

    .avatar-box .showProfileUploaded p {
        font-size: 13px;
        margin: 12px auto 0;
        padding: 5px;
        background: #e4e4e4;
        width: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        text-align: center;
    }

        .avatar-box .showProfileUploaded p span {
            color: darkorange;
            background: #e0e0e0;
            padding: 2px 10px;
            border-radius: 3px;
        }

.AvatarMain_Btn {
    display: flex;
    justify-content: center;
    margin: 20px auto;
}

    .AvatarMain_Btn .AvatarMain_Btn--item {
        display: inline-block;
        margin: 5px;
    }

.input-group-text, select.form-control:not([size]):not([multiple]), .form-control:not(.form-control-sm):not(.form-control-lg) {
    padding: 7px !important;
}

.avatar-box .DetailsForUpload {
    font-size: 13px;
    margin: 5px auto 10px;
    line-height: 2.2;
    background: #e3e9ef;
    padding: 4px 6px;
    border-radius: 8px;
    box-shadow: inset 0 0 6px 0px #00000024;
}

/* ==================== آواتار دلخواه ==================== */
#UploadAvatar .UploadAvatar__uploader--box {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

    #UploadAvatar .UploadAvatar__uploader--box label {
        position: relative;
        cursor: pointer;
    }

        #UploadAvatar .UploadAvatar__uploader--box label img.upload-box {
            width: 120px;
            opacity: 0.5;
            transition: .3s;
        }

            #UploadAvatar .UploadAvatar__uploader--box label img.upload-box:hover {
                opacity: 1;
            }

    #UploadAvatar .UploadAvatar__uploader--box i {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 20px;
    }

#imagePreview {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#UploadAvatar #imagePreview .imagePreview_main {
    width: 120px;
    height: 120px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    border-radius: 110px;
    box-shadow: 0 0 20px 1px rgb(0 0 0 / 35%);
    margin-top: 15px;
    margin-bottom: 15px;
    align-items: center;
}

    #UploadAvatar #imagePreview .imagePreview_main img {
        width: inherit;
        height: auto;
    }

#imagePreview .file-details {
    background: #e0e0e0;
    border-radius: 3px;
    border-right: 2px solid #28a745;
    padding-right: 5px;
    padding-left: 5px;
    display: inline-block;
    margin-top: 10px;
    color: black;
}


/* ==================== آواتارهای پیشفرض ==================== */
#SystemAvatar {
    width: 100%;
    margin: 20px auto;
    text-align: center;
}

.AvatarSelected {
    width: 96px !important;
    height: 96px !important;
    border: 2px solid #3e75f1;
    padding: 2px;
}

#SystemAvatar .image-item img {
    border-radius: 100%;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    width: 96px;
    height: 96px;
}

#SystemAvatar .image-item {
    position: relative;
    margin: 10px;
    cursor: pointer !important;
    border-radius: 100%;
}

    #SystemAvatar .image-item input[type=radio] {
        position: absolute;
        opacity: 0;
    }




.sidebar_Header .sidebar-img .avatar-option {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
}

.sidebar-img .avatar-option img {
    width: 85px;
    height: 85px;
    border-radius: 20%;
}

.sidebar-img .avatar-option .edit-link {
    position: absolute;
    margin: auto;
    color: white;
    opacity: 0;
    transition: 0.2s cubic-bezier(0.23, 0.05, 0.46, 0.96);
}

.sidebar-img .avatar-option:hover a.edit-link {
    text-decoration: none;
    color: white;
    background: #0000006b;
    padding: 30.6px 18px;
    border-radius: 17px;
    opacity: 1;
}

.sidebar-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 576px) {
    .AvatarMain_Btn {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
/* ============================================================== */
/* ======================== (End) Avatar ======================== */
/* ============================================================== */



/*======================================= Lock Panel =======================================*/

#LockPanel_Wrapper {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999999;
    background-color: rgba(0,0,0,.5);
    backdrop-filter: blur(5px);
    display: flex;
}

#LockPanel_Popup {
    max-width: 80%;
    max-height: 80%;
    background-color: white;
    border-radius: 5px;
    margin: auto;
    overflow-y: auto;
    padding: 7px;
    border: 2px solid #f29f05;
    text-align: center;
}

#LockPanel_Message {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    border: 2px solid #f29f05;
    padding: 10px;
}

    #LockPanel_Message > h4 {
        font-family: "Nastaligh";
        font-weight: bold;
        font-size: 30px;
    }

    #LockPanel_Message > p {
        text-align: center;
        font-weight: bold;
    }

    #LockPanel_Message > img {
        width: 150px;
        margin-bottom: 25px;
    }

@media only screen and (max-width: 776px) {
    #LockPanel_Popup {
        max-width: 90%;
    }
}
/*#region ColorSelector*/
.color-container {
    border: 1px solid rgb(163, 163, 163);
    border-radius: 8px;
    padding: 15px;
}

.product-color-item {
    width: 30px;
    height: 30px;
    background-color: aqua;
    margin: 3px;
    transition-duration: .25s;
    cursor: pointer;
    border: 2.5px solid rgb(208 208 208);
    display: inline-block;
    border-radius: 50px;
}

.product-color-item-selected {
    border: 3px solid #4b9df3;
    box-shadow: 0 0 10px 1px #00000052;
}

.SelectColor {
    color: rgb(125, 125, 125);
}

    .SelectColor label {
        font-weight: bold;
    }

.custom-switch span {
    margin-right: 12px;
    margin-top: -13px;
}

.custom-switch {
    padding: unset !important;
}
/*#endregion ColorSelector*/
/*#region FixPlaceHolder2*/
.Fixed_PlaceHolder_2 {
    width: 100%;
    position: relative;
    margin-bottom: 15px;
}

    .Fixed_PlaceHolder_2 input {
        width: 100%;
        border-radius: 3px;
        border: 1px solid rgb(195, 195, 195);
        text-align: center;
    }

        .Fixed_PlaceHolder_2 input:focus {
            outline: unset;
            border: 1px solid rgb(0, 203, 209);
        }

    .Fixed_PlaceHolder_2 label {
        position: absolute;
        font-size: 10px;
        font-weight: bold;
        color: rgb(0, 128, 177);
        background-color: white;
        left: 50%;
        top: -10px;
        transform: translateX(-50%);
        transition-duration: .3s;
        z-index: 2;
        padding: 0 2px;
    }
/*#endregion FixPlaceHolder2*/
/*#region BankCarts*/

/* (Start) Bank account cart */
.bank-carts__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.bank-cart {
    height: 220px;
    width: 370px;
    position: relative;
    background: #f5f5f5;
    border-radius: 10px;
    color: #fff;
    direction: ltr;
    /*padding: 10px;*/
    box-shadow: 2px 2px 5px 1px rgb(163, 163, 163);
    margin-bottom: 10px;
    overflow: hidden;
}

.bank-cart__front {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 17px;
    height: 100%;
}

    .bank-cart__front .bank-cart-btn {
        position: absolute;
        top: 10px;
        right: 60px;
        display: inline-block;
        width: max-content;
        font-size: 14px;
        padding: 5px 8px;
        text-shadow: var(--t-shadow-m1);
        transition: .25s all ease-in-out;
    }


        .bank-cart__front .bank-cart-btn.bank-cart-save-btn {
            display: none;
            background-color: #efcf1a;
            border-color: #f0d226;
            transition: .25s all ease-in-out;
        }

            .bank-cart__front .bank-cart-btn.bank-cart-save-btn:hover {
                background-color: #E1C41D !important;
                transition: .2s all ease-in-out;
            }

        .bank-cart__front .bank-cart-btn.bank-cart-edit-btn {
            background-color: #18bb5d;
            border-color: #49ad4e;
            transition: .25s all ease-in-out;
        }

            .bank-cart__front .bank-cart-btn.bank-cart-edit-btn:hover {
                background-color: #1DB85F !important;
                transition: .2s all ease-in-out;
            }

        .bank-cart__front .bank-cart-btn.bank-cart-cancel-btn {
            display: none;
        }

    .bank-cart__front .banklocked {
        background-color: rgb(233 64 64);
        color: white;
        border-radius: 5px;
        padding: 5px;
        width: fit-content;
        cursor: default;
    }

.bank-cart__front--bankType {
    width: 100%;
    height: 50px;
    text-align: left;
}

    .bank-cart__front--bankType .bank-logo {
        width: 40px;
        height: auto;
    }

    .bank-cart__front--bankType .bank-label {
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        margin-left: 10px;
    }


.bank-cart__front--content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .bank-cart__front--content .bank-cart-input-box {
        margin: 5px 10px 0 5px;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .bank-cart__front--content .bank-cart-input-box .input-label {
            font-size: 11px;
            font-weight: bold;
            color: #303030;
            padding: 0;
            margin: 0;
            z-index: 0;
        }

        .bank-cart__front--content .bank-cart-input-box.available-edit .input-label {
            position: absolute;
            font-size: 10px;
            font-weight: bold;
            color: rgb(0, 128, 177);
            background-color: #ebebeb;
            left: 8px;
            top: -4px;
            padding: 0 6px;
            border-radius: 50px;
            transform: unset;
        }

        .bank-cart__front--content .bank-cart-input-box input {
            font-family: system-ui;
            font-weight: 500;
        }

    .bank-cart__front--content .bank-cartnumber .cartNumber {
        color: var(--gray-dark);
        text-align: center;
        display: block;
        margin: 15px auto;
        font-size: 18px;
        font-weight: 500;
        font-weight: 700;
        letter-spacing: 1px;
        font-family: system-ui;
    }

.bank-cart__setting--menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 32px;
}

.bank-cart__setting--menu-item {
    display: flex;
    align-items: center;
    background: #ffffff12;
    padding: 0 13px 0 0;
    border-radius: 10px;
    cursor: pointer;
}

    .bank-cart__setting--menu-item.custome-btn {
        box-shadow: 1px 2px 2px rgb(0 0 0 / 25%);
        transition: .25s all ease-in-out;
    }

        .bank-cart__setting--menu-item.custome-btn:hover {
            box-shadow: none;
            transition: .2s all ease-in-out;
        }


.bank-cart__setting--menu-item-icon {
    display: flex;
    padding: 6px 11px;
    background: #5f6ff6;
    border-radius: 10px;
    margin-right: 15px;
}

.bank-cart__setting--bar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

    .bank-cart__setting--bar .icon {
        fill: #fff;
    }



.bank-cart .bank-cart__detail {
    /*position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    background-color: #4c5be8;*/ /*#606060 */

    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 100px;
    box-shadow: 0 0 28px 0 rgb(0 0 0 / 30%);
}

}

.bank-cart .bank-cart__detail .daapApp-logo {
    padding: 6px;
    /*background-color: white;*/
    border-radius: 100px;
    margin: -2px;
}

    .bank-cart .bank-cart__detail .daapApp-logo img {
        /*width: 16px;
            height: auto;
            max-width: fit-content;*/
        padding: 9px 16px;
    }


.bank-cart__settings {
    width: 100%;
    height: 100%;
    background: #4c5be8;
    border-radius: 10px;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
    padding: 22px 13px;
    clip-path: path("M387.118151,-12.6493894 L387.118151,228.834835 L320.261415,228.834835 C320.261415,219.284137 320.261415,209.299312 320.261415,198.880359 C320.261415,186.645109 320.261415,149.508543 320.261415,110 C320.261415,70.4914571 320.261415,43.8454079 320.261415,21.9752985 C320.261415,3.85122438 320.261415,-7.69033824 320.261415,-12.6493894 L387.118151,-12.6493894 Z");
}

.bank-cart__settings--active {
    animation: showSettings 2s ease-in-out forwards;
    z-index: 9;
}

.bank-cart__settings--hidden {
    clip-path: path("M387.118151,0.160365095 L387.118151,221.215264 L316.529346,221.215264 C117.007895,237.0198 17.2471697,237.0198 17.2471697,221.215264 C17.2471697,181.988409 17.2471697,133.22115 17.2471697,110 C17.2471697,86.7788496 17.2471697,27.7576259 17.2471697,-6.39488462e-14 C17.2471697,-16.3318577 117.007895,-16.2784027 316.529346,0.160365095 L387.118151,0.160365095 Z");
    animation: hideSettings 2s ease-in-out forwards;
    z-index: 9;
}




.apple-pay-icon {
    transform: rotate(-90deg);
}

.gear-icon {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 1.5s;
}

    .gear-icon.active {
        opacity: 1;
    }

@keyframes showSettings {
    25% {
        clip-path: path("M387.118151,-12.6493894 L387.118151,228.834835 L326.156587,228.834835 C316.225565,222.276395 309.894513,217.352564 307.16343,214.063341 C298.576801,203.721899 122.1888,208.462135 122.1888,108.204535 C122.1888,7.94693437 294.206316,25.6769042 315.855488,6.20473783 C320.120314,2.36877547 323.554014,-3.91593359 326.156587,-12.6493894 L387.118151,-12.6493894 Z");
    }

    50% {
        clip-path: path("M387.118151,-12.6493894 L387.118151,228.834835 L48.4642624,238.145348 C18.8858367,241.43457 2.73108257,241.43457 6.66133815e-15,238.145348 C-8.58662882,227.803906 18.4317885,204.651574 18.4317885,104.393974 C18.4317885,4.13637332 -13.6376238,0.776583538 8.01154821,-18.6955828 C12.2763746,-22.5315451 25.7606127,-20.5161473 48.4642624,-12.6493894 L387.118151,-12.6493894 Z");
    }

    65%, 100% {
        clip-path: path("M387.118151,0.160365095 L387.118151,221.215264 L316.529346,221.215264 C117.007895,237.0198 17.2471697,237.0198 17.2471697,221.215264 C17.2471697,181.988409 17.2471697,133.22115 17.2471697,110 C17.2471697,86.7788496 17.2471697,27.7576259 17.2471697,-6.39488462e-14 C17.2471697,-16.3318577 117.007895,-16.2784027 316.529346,0.160365095 L387.118151,0.160365095 Z");
    }
}

@keyframes hideSettings {
    25% {
        clip-path: path("M387.118151,0.160365095 L387.118151,221.215264 L316.529346,221.215264 C100.704923,235.24635 -4.80485907,234.841262 1.15518706e-13,220 C12.4189217,181.640401 18.8873389,174.136909 17.2471697,110 C15.6070006,45.8630911 13.7675117,26.4098973 1.04860565e-13,0.160365095 C-6.27713368,-11.8077978 99.2326483,-11.8077978 316.529346,0.160365095 L387.118151,0.160365095 Z");
    }

    55% {
        clip-path: path("M387.118151,-12.6493894 L387.118151,228.834835 L243.77087,228.834835 C216.843505,221.535077 202.014282,216.240588 199.283199,212.951365 C190.69657,202.609923 14.0082036,210.2576 14.0082036,110 C14.0082036,9.74239964 184.417555,28.4484097 208.443623,13.7028253 C213.730293,10.4582224 224.482747,1.6741509 240.700984,-12.6493894 L387.118151,-12.6493894 Z");
    }

    80% {
        clip-path: path("M387.118151,-12.6493894 L387.118151,228.834835 L315.554768,228.834835 C317.523992,218.414953 319.092875,208.430128 320.261415,198.880359 C321.744382,186.760968 330.890906,150.167879 333.898886,110 C336.906867,69.8321206 320.261415,43.8454079 320.261415,21.9752985 C320.261415,3.85122438 318.692532,-7.69033824 315.554768,-12.6493894 L387.118151,-12.6493894 Z");
    }

    100% {
        clip-path: path("M387.118151,-12.6493894 L387.118151,228.834835 L320.261415,228.834835 C320.261415,219.284137 320.261415,209.299312 320.261415,198.880359 C320.261415,186.645109 320.261415,149.508543 320.261415,110 C320.261415,70.4914571 320.261415,43.8454079 320.261415,21.9752985 C320.261415,3.85122438 320.261415,-7.69033824 320.261415,-12.6493894 L387.118151,-12.6493894 Z");
    }
}


.bank-cart__front--content .bank-cart-input-box.not-edit .input-label {
    padding: 2px 0;
}

.bank-cart__front--content .not-edit input {
    background: transparent;
    border: none;
    height: 30px;
    color: #5c5c5c;
}

.bank-cart__front--content input {
    text-align: left;
    color: #3c3c3c;
    outline: none;
    width: 82%;
    padding: 0 12px;
    height: 33px;
    margin: 6px 0px;
    z-index: 5;
}


.bank-cart__front--content .available-edit input {
    background: transparent;
    border: 0;
    margin-top: 8px;
    transition: .2s all ease-in-out;
}

    .bank-cart__front--content .available-edit input.selected {
        border: 1px solid rgb(195, 195, 195);
        transition: .2s all ease-in-out;
        background-color: white;
    }


.daapApp-logo .tooltip-option {
    top: 10px !important;
    right: 53px !important;
    width: max-content;
    max-width: 200px;
    z-index: 99 !important;
}


@media all and (max-width: 410px) {
    .bank-cart__setting--bar {
        margin-right: -8px;
    }
}


.register-bankAccount-header {
    text-align: center;
}

.register-bankAccount-btn {
    background-color: #17bb4a;
    width: fit-content;
    padding: 4px 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 9px 5px #00000038;
    display: inline-block;
    color: white;
    text-shadow: var(--t-shadow-m1);
    cursor: pointer;
}


.register-bankAccount-container--modal .Body_Wrraper .form-control {
    min-width: 100%;
}

.bank-cart.registerInDaapApp .bank-cart__front .bank-cart-btn.bank-cart-save-btn, .bank-cart.registerInDaapApp .bank-cart__front .bank-cart-btn.bank-cart-edit-btn {
    right: 10px !important;
}

.bank-cart.registerInDaapApp .bank-cart__front .bank-cart-btn.bank-cart-cancel-btn {
    right: 115px !important;
}

/* (End) Bank account cart */
/*#endregion ColorSelector*/
/* ======================================================= */
/* =================== Style For Event =================== */
/* ======================================================= */
.EventMsg_wrapper .event-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.EventMsg_wrapper, .EventPrevMsg_wrapper {
    border-radius: 8px;
    display: flex;
    margin: auto;
    width: 60vw;
    max-height: 95vh;
}

#EventMsg, #EventPrevMsg {
    width: 30%;
    height: 85%;
}

.EventMsg_wrapper .MessageImg, .EventPrevMsg_wrapper .MessageImg {
    width: 100%;
    border-radius: 5px;
    max-height: 100%;
}

.EventMsg_wrapper .MessageImg, .EventPrevMsg_wrapper #ShowEventImg {
    /*height: 100%;*/
    height: fit-content;
}

.EventMsg_wrapper, .EventPrevMsg_wrapper {
    border-radius: 8px;
    position: relative;
    /*display: flex;
    align-items: center;
    margin: auto;
    width: 55vw;
    height: 100vh;*/
}

#EventMsg_page {
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    /*background: radial-gradient(#00000094, #0808087a);*/
    background-color: #0808087a;
    z-index: 999999;
    display: flex;
    backdrop-filter: blur(8px);
}

#EventPrevMsg_page {
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: radial-gradient(#00000094, #0808087a);
    z-index: -1;
    opacity: 0;
    display: flex;
    backdrop-filter: blur(8px);
}

    #EventMsg_page .close-event_btn, #EventPrevMsg_page .close-event_btn {
        background: #0000004f;
        border: none;
        color: white;
        padding: 3px 9px 1px;
        border-radius: 50px;
        position: absolute;
        top: -30px;
        right: -30px;
        outline: none;
    }

.DetailsForUpload {
    font-size: 13px;
    margin: 5px auto 10px;
    line-height: 2.2;
    background: #e3e9ef;
    padding: 4px 6px;
    border-radius: 8px;
    box-shadow: inset 0 0 6px 0px #00000024;
}

    .DetailsForUpload i {
        font-size: 16px;
    }

/* ========== Event List Style ========== */
.ExpiredEvent {
    color: red;
}

.event-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.event-box {
    width: 300px;
    height: 230px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 2px 4px 10px rgb(0 0 0 / 30%);
    display: inline-block;
    margin: 8px;
    background-color: white;
}

.event-box__detail {
    height: 100%;
    width: 100%;
    background: white;
    position: relative;
}

.event-box__detail-header {
    background-color: #ebebeb;
    text-align: center;
}

.event-box__detail-event-count {
    background-color: #e7e7e7;
    padding: 4px 9px 1px 10px;
    border-radius: 100px;
    position: absolute;
    top: 44px;
    right: 8px;
    font-size: 13px;
    color: #565656;
}

.event-box__detail-state {
    position: absolute;
    top: 44px;
    left: 8px;
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 100px;
    color: white;
    font-weight: 100 !important;
}

    .event-box__detail-state.active-event {
        background-color: #21c16c;
    }

    .event-box__detail-state.disable-event {
        background-color: #707070;
    }

    .event-box__detail-state.expired-event {
        background-color: #eb4f4f;
    }


.event-box__detail-header-createDate {
    color: #3a3a3a !important;
    margin: 0;
    padding: 4px;
}

    .event-box__detail-header-createDate span {
        direction: ltr;
        display: inline-block;
    }

.event-box__detail-mainContent {
    /*padding-top: 8px;*/
}

.event-box__detail-mainContent-img {
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 80px;
    margin: 18px auto;
    display: flex;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #00000014;
}

    .event-box__detail-mainContent-img img {
        object-fit: cover;
        width: max-content;
        height: 100%;
        margin: auto;
    }

.event-box__detail-mainContent-date {
    width: 100%;
    padding-top: 3px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

    .event-box__detail-mainContent-date p {
        margin: 0;
        display: block;
        font-size: 13px;
    }

    .event-box__detail-mainContent-date b {
        color: #3c3c3c;
        display: inline-flex;
        align-items: stretch;
    }

        .event-box__detail-mainContent-date b i {
            font-size: 16px;
            margin-left: 5px;
        }

    .event-box__detail-mainContent-date span {
        color: #616161;
        margin-right: 1px;
    }

    .event-box__detail-mainContent-date .devider {
        color: #dbdbdb;
    }

.event-box__detail-action {
    margin: auto;
    display: flex;
    background-color: white;
    border-top: 1.255px solid #e9e9e9;
    padding-top: 9px;
    padding-bottom: 9px;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

    .event-box__detail-action span {
        font-size: 14px;
        cursor: pointer !important;
        width: 45%;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ededed;
        border-radius: 100px;
    }

        .event-box__detail-action span i {
            font-size: 20px;
        }

    .event-box__detail-action .disable-event_btn {
        color: #6594ff;
        background-color: #6594ff1a;
    }

    .event-box__detail-action .delete-event_btn {
        color: darkorange;
        background: #ff8c0017;
        transition: .2s;
    }

    .event-box__detail-action .disable-event_btn:hover, .event-box__detail-action .disable-event_btn:active {
        color: white;
        background-color: #6594ff;
        transition: .3s;
    }

    .event-box__detail-action .delete-event_btn:hover, .event-box__detail-action .delete-event_btn:active {
        color: white;
        background-color: darkorange;
        transition: .3s;
    }

    .event-box__detail-action span.disable-btn {
        cursor: not-allowed !important;
        color: #adadad;
    }


.event_sortby-wrapper {
    text-align: center;
    margin-top: 7px;
}

    .event_sortby-wrapper .filter_sortby b {
        font-size: 15px;
    }

    .event_sortby-wrapper .filter_sortby .filter_sortby--btn {
        border: none;
        outline: none;
        padding: 1px 5px;
        color: white;
        border-radius: 5px;
    }

        .event_sortby-wrapper .filter_sortby .filter_sortby--btn.all-event {
            background-color: #618beb;
        }

        .event_sortby-wrapper .filter_sortby .filter_sortby--btn.active-event {
            background-color: #21c16c;
        }

        .event_sortby-wrapper .filter_sortby .filter_sortby--btn.disable-event {
            background-color: #707070;
        }

        .event_sortby-wrapper .filter_sortby .filter_sortby--btn.expire-event {
            background-color: #eb4f4f;
        }


        .event_sortby-wrapper .filter_sortby .filter_sortby--btn.all-event:hover {
            background-color: #4E7BE4;
        }

        .event_sortby-wrapper .filter_sortby .filter_sortby--btn.active-event:hover {
            background-color: #12AB59;
        }

        .event_sortby-wrapper .filter_sortby .filter_sortby--btn.disable-event:hover {
            background-color: #565656;
        }

        .event_sortby-wrapper .filter_sortby .filter_sortby--btn.expire-event:hover {
            background-color: #E14343;
        }

@media only screen and (max-width: 768px) {
    .event_sortby-wrapper {
        margin-top: 20px;
    }
}

@media only screen and (max-width: 370px) {
    .event-box__detail-mainContent-date {
        flex-direction: column;
        align-items: center;
    }

    .event-box {
        height: 250px;
    }

    .event-box__detail-mainContent-date p {
        font-size: 12px;
    }

    .event-box__detail-mainContent-date .devider {
        display: none;
    }
}

/* ========== Style For (AddEvent) page ========== */
.errorUploadEvent {
    background: #ff8c8c;
    color: white !important;
    padding: 0 10px;
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
    box-shadow: 0 0 10px rgb(0 0 0 / 35%);
    border-radius: 5px;
    font-size: 13px;
    text-shadow: 2px 2px 13px #000000b8;
}

.successUploadEvent {
    background: #1ebb23;
    color: white !important;
    padding: 0 10px;
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
    box-shadow: 0 0 10px rgb(0 0 0 / 35%);
    border-radius: 5px;
    font-size: 13px;
}

.ui-datepicker {
    width: 18em;
    position: absolute !important;
    top: 265px !important;
}

.image-uploader__preview {
    width: auto;
    height: 170px;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 24%);
    border-radius: 8px;
    border: 1.255px solid silver;
}

.event-input__file {
    border: 1px solid silver;
    padding: 10px 3px;
}

.section-box {
    margin: 10px auto;
}

.submit-btn {
    margin: 10px auto;
    display: flex;
    flex-direction: column;
}

/* ====================== Msg Style ====================== */
.SuccessResult {
    color: #24ca57;
    border-right: 2px solid;
    margin-top: 10px;
    padding: 5px 10px;
    background: #63cc6326;
}

.RegisterErr {
    color: red;
    border-right: 2px solid;
    margin-top: 10px;
    padding: 5px 10px;
    background: #ff000017;
}

.FailInput {
    border-color: #e63321;
    box-shadow: 0 0 7px 0 #e63b2a6b;
}

.SuccessInput {
    border-color: #24ca57;
    box-shadow: 0 0 7px 0 #63cc6326;
}

.disabledBtn {
    background-color: #a7a7a7 !important;
    border: 1.5px solid #717171 !important;
    color: black !important;
}

.error-text {
    color: red !important;
}
/* ==================== Event Responsive ==================== */
@media screen and (max-width: 1140px) {
    #EventPrevMsg, #EventMsg {
        width: 35%;
    }
}

@media screen and (max-width: 930px) {
    #EventPrevMsg, #EventMsg {
        width: 40%;
    }
}

@media screen and (max-width: 820px) {
    #EventPrevMsg, #EventMsg {
        width: 50%;
    }
}

@media screen and (max-width: 670px) {
    #EventPrevMsg, #EventMsg {
        width: 60%;
    }

    .errorUploadEvent {
        width: 405px;
    }
}

@media screen and (max-width: 600px) {
    #EventPrevMsg, #EventMsg {
        width: 80%;
    }
}
/* ===================== (End) Event Responsive ==================== */

/* ================================================================= */
/* ===================== (End) Style For Event ===================== */
/* ================================================================= */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++*/
.progress-tracker {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 40px auto;
    padding: 0;
    list-style: none;
}

.progress-step {
    display: block;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    margin: 0;
    padding: 0;
    min-width: 28px;
}

    .progress-step:last-child {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
    }

    .progress-step:not(:last-child)::after {
        content: '';
        display: block;
        position: absolute;
        z-index: -10;
        top: 12px;
        bottom: 12px;
        right: -14px;
        width: 100%;
        height: 4px;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }

    .progress-step.is-active .progress-title {
        font-weight: 400;
    }

    .progress-step > a {
        display: block;
        text-decoration: none !important;
    }

.progress-marker {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 20;
    width: 28px;
    height: 28px;
    padding-bottom: 2px;
    color: #fff;
    font-weight: 400;
    border: 2px solid transparent;
    border-radius: 50%;
    -webkit-transition: background-color, border-color;
    transition: background-color, border-color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.progress-text {
    display: block;
    padding: 14px 9.3333333333px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-title {
    margin-top: 0;
}

.progress-step .progress-marker {
    color: #fff;
    background-color: #b6b6b6;
}

.progress-step::after {
    background-color: #b6b6b6;
}

.progress-step .progress-text, .progress-step .progress-step > a .progress-text {
    color: #333333;
}

.progress-step.is-active .progress-marker {
    background-color: #2cab02c7;
}

.progress-step.is-complete .progress-marker {
    background-color: #1976D2;
}

.progress-step.is-complete::after {
    background-color: #868686;
}

.progress-step:hover .progress-marker {
    background-color: #3fd80cc7;
    cursor: pointer;
}

.progress-tracker--center .progress-step {
    text-align: center;
}

    .progress-tracker--center .progress-step:last-child {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .progress-tracker--center .progress-step::after {
        right: -50%;
    }

.progress-tracker--center .progress-marker {
    margin-left: auto;
    margin-right: auto;
}

.progress-tracker--right .progress-step {
    text-align: right;
}

    .progress-tracker--right .progress-step:last-child {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .progress-tracker--right .progress-step::after {
        right: calc(-100% + 14px);
    }

.progress-tracker--right .progress-marker {
    margin-left: auto;
}

.progress-tracker--border {
    padding: 5px;
    border: 2px solid #868686;
    border-radius: 38px;
}

.progress-tracker--spaced .progress-step::after {
    width: calc(100% - 48px);
    margin-right: 24px;
}

.progress-tracker--word {
    padding-right: 38.6666666667px;
    overflow: hidden;
}

    .progress-tracker--word .progress-text {
        display: inline-block;
        white-space: nowrap;
    }

    .progress-tracker--word .progress-title {
        margin: 0;
    }

.progress-tracker--word-center {
    padding-right: 38.6666666667px;
    padding-left: 38.6666666667px;
}

    .progress-tracker--word-center .progress-text {
        padding-right: 0;
        padding-left: 0;
        -webkit-transform: translateX(calc(-50% + 14px));
        transform: translateX(calc(-50% + 14px));
    }

.progress-tracker--word-right {
    padding-right: 0;
    padding-left: 38.6666666667px;
}

    .progress-tracker--word-right .progress-text {
        padding-left: 0;
        -webkit-transform: translateX(calc(-100% + 28px));
        transform: translateX(calc(-100% + 28px));
    }

.progress-tracker--text .progress-step:last-child {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.progress-tracker--text-top .progress-step::after {
    top: auto;
}

.progress-tracker--text-top .progress-text {
    height: 100%;
}

.progress-tracker--text-top .progress-marker {
    bottom: 28px;
}

.progress-tracker--text-inline .progress-step {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.progress-tracker--text-inline .progress-text {
    position: relative;
    z-index: 30;
    max-width: 70%;
    white-space: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #fff;
}

.progress-tracker--text-inline .progress-title {
    margin: 0;
}

.progress-tracker--square .progress-step {
    padding-top: 0;
}

.progress-tracker--square .progress-marker {
    -webkit-transform: scaleX(0.33) translateY(-12px);
    transform: scaleX(0.33) translateY(-12px);
    border-radius: 0;
}

@media (max-width: 399px) {
    .progress-tracker-mobile {
        overflow-x: auto;
    }

        .progress-tracker-mobile .progress-tracker {
            min-width: 200%;
        }
}

.progress-tracker--vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

    .progress-tracker--vertical .progress-step {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

        .progress-tracker--vertical .progress-step::after {
            right: auto;
            top: 14px;
            left: 12px;
            width: 4px;
            height: 100%;
        }

    .progress-tracker--vertical .progress-marker {
        position: absolute;
        left: 0;
    }

    .progress-tracker--vertical .progress-text {
        padding-top: 7px;
        padding-left: 42px;
    }

    .progress-tracker--vertical .progress-step:not(:last-child) .progress-text {
        padding-bottom: 42px;
    }

@-webkit-keyframes scale-up {
    from {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes scale-up {
    from {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}

.anim-ripple .progress-marker::before, .anim-ripple-large .progress-marker::before, .anim-ripple-splash .progress-marker::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 30;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    visibility: hidden;
}

.anim-ripple :not(:active) .progress-marker::before, .anim-ripple-large :not(:active) .progress-marker::before, .anim-ripple-splash :not(:active) .progress-marker::before {
    -webkit-animation: scale-up 0.3s ease-out;
    animation: scale-up 0.3s ease-out;
}

.anim-ripple :focus .progress-marker::before, .anim-ripple-large :focus .progress-marker::before, .anim-ripple-splash :focus .progress-marker::before {
    visibility: visible;
}

.anim-ripple-large .progress-marker::before {
    width: 200%;
    height: 200%;
}

.anim-ripple-splash .progress-marker::before {
    width: 200%;
    height: 200%;
    box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.35);
}

.anim-ripple-double .progress-marker::before, .anim-ripple-double .progress-marker::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 30;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    visibility: hidden;
    background: none;
    border: 3px solid rgba(0, 0, 0, 0.3);
}

.anim-ripple-double :not(:active) .progress-marker::before, .anim-ripple-double :not(:active) .progress-marker::after {
    -webkit-animation: scale-up 0.3s ease-out 0s;
    animation: scale-up 0.3s ease-out 0s;
}

.anim-ripple-double :not(:active) .progress-marker::after {
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.anim-ripple-double :focus .progress-marker::before, .anim-ripple-double :focus .progress-marker::after {
    visibility: visible;
}

.anim-path .progress-step::after {
    background-image: -webkit-linear-gradient(left, #b6b6b6 50%, #868686 50%);
    background-image: linear-gradient(to right, #b6b6b6 50%, #868686 50%);
    background-size: 200% 100%;
    background-position: 0% 100%;
    -webkit-transition: background-position 0.3s ease-out;
    transition: background-position 0.3s ease-out;
}

.anim-path .progress-step.is-complete::after {
    background-position: -100% 100%;
}

/********************************************************************************/
/* RTL */
/********************************************************************************/

[dir="rtl"] .progress-step:not(:last-child)::after {
    display: none;
}

[dir="rtl"] .progress-step:not(:first-child)::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -10;
    top: 12px;
    bottom: 12px;
    right: -14px;
    width: 100%;
    height: 4px;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

[dir="rtl"] .progress-tracker--center .progress-step::after {
    right: -50%
}


/*===================================== ColapsePanel =====================================*/

.ColapsePanel {
    margin-bottom: 15px;
    /*padding:0;*/
}

.ColapsePanel-Header {
    border-top: 1px solid #f29f05;
    border-right: 1px solid #f29f05;
    border-left: 1px solid #f29f05;
    /*border-radius: 8px 8px 0 0;*/
    border-radius: 8px;
    background-image: linear-gradient(to bottom right, #f29f05, #520a5c);
    padding: 5px;
    position: relative;
    text-align: center;
}

.ColapsePanel-Header-ShowBody {
    border-radius: 8px 8px 0 0 !important;
}

.ColapsePanel-Header * {
    text-align: center;
    color: white;
}

.ColapsePanel-Header-Icon {
    transition-duration: .3s;
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 30px;
}

.ColapsePanel-Header-Icon_Close {
    transform: rotateZ(180deg);
}

.ColapsePanel-Body {
    display: none;
    padding: 10px;
    border-bottom: 1px solid #f29f05;
    border-right: 1px solid #f29f05;
    border-left: 1px solid #f29f05;
    border-radius: 0 0 8px 8px;
}

    .ColapsePanel-Body label {
        font-size: 13px;
        font-weight: 600;
    }

#imgcontainerforticket {
    width: 100px;
    height: 100px;
    margin: 10px 15px 20px 0;
}

    #imgcontainerforticket img {
        max-width: 100px;
        max-height: 100px;
    }

.PartialViewContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    /*backdrop-filter: blur(5px);*/
    background-color: #ffffe0;
}
/*#region TicketingAnswer*/
body {
    padding: unset;
    margin: unset;
    direction: rtl;
    text-align: right;
}

.fc {
    clear: both;
}

.TicketAnswer_MainContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fbf7d7;
    background-image: url(/img/SupportBack.png);
    background-size: cover;
}

.TicketAnswer_Header {
    position: relative;
    width: auto;
    padding: 10px 15px 0 15px;
}

.TicketAnswer_Header_CloseButton {
    width: 30px;
    height: 30px;
    float: right;
    color: red;
    cursor: pointer;
    font-size: 20px;
    margin-top: 5px;
}

.TicketAnswer_Header_Details {
    position: relative;
    width: calc(100% - 30px);
    min-height: 30px;
    float: right;
}

.TicketAnswer_Header_ShowDetailsButton {
    border: 2px solid;
    padding-left: 3px;
    width: 30px;
    height: 30px;
    float: left;
    color: rgb(250, 122, 0);
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    margin: 5px 0 0 5px;
    text-align: left;
    animation-name: infornotice;
    animation-duration: .5s;
    animation-iteration-count: infinite;
}

@keyframes infornotice {
    0% {
        padding-top: 5px;
    }

    60% {
        padding-top: 0;
    }

    80% {
        padding-top: 1px;
    }

    100% {
        padding-top: 5px;
    }
}

.TicketAnswer_Header_ShowDetails {
    position: absolute;
    width: calc(100% - 10px);
    right: 0;
    overflow: hidden;
    transition-duration: 5s;
    background-color: white;
    z-index: 1000;
    font-weight: bold;
    font-size: 12px;
    border-radius: 5px;
}

    .TicketAnswer_Header_ShowDetails p {
        text-align: center;
        margin: unset;
    }

    .TicketAnswer_Header_ShowDetails p {
        text-align: center;
        margin: unset;
    }

.TicketAnswer_Body {
    position: relative;
    width: auto;
    padding: 5px 5% 30px 5%;
    height: calc(100vh - 50px);
    overflow-y: auto;
    transition-duration: .5s;
}

    .TicketAnswer_Body::-webkit-scrollbar {
        width: 8px;
        border-radius: 20px;
    }

    .TicketAnswer_Body::-webkit-scrollbar-track {
        background: #d54aff;
    }

    .TicketAnswer_Body::-webkit-scrollbar-thumb {
        background: rgb(176, 0, 199);
        border-radius: 20px;
    }

        .TicketAnswer_Body::-webkit-scrollbar-thumb:hover {
            background: rgb(89, 0, 107);
        }

.TicketAnswer_Body_Inner_Self {
    float: right;
    width: calc(100% - 85px);
    margin-bottom: 10px;
}

.TicketAnswer_Body_Inner_Self_image {
    float: right;
    width: 80px;
    overflow: hidden;
}

    .TicketAnswer_Body_Inner_Self_image img {
        max-width: 80px;
        max-height: 80px;
        border-radius: 0 15px 0 15px;
    }

.TicketAnswer_Self_Role {
    padding-top: 12px;
    padding-right: 43px;
    font-size: 10px;
    font-weight: bold;
    height: 50px;
    width: 132px;
    transform: rotateZ( 270deg);
}

.TicketAnswer_Body_Inner_Self_TextContainer {
    float: right;
    margin: 0 5px 0 0;
    width: calc(100% - 85px);
    color: white;
    background-color: rgb(2, 5, 121);
    border-radius: 15px 0 15px 0;
    box-shadow: -2px 2px 5px 1px rgb(200, 200, 200);
}

.TicketAnswer_Body_Inner_Self_TextContainer_header {
    width: 100%;
    font-weight: bold;
    font-size: 11px;
    padding: 5px;
    border-bottom: 1px solid rgb(0, 5, 255);
}

    .TicketAnswer_Body_Inner_Self_TextContainer_header p {
        margin: unset;
        text-align: right;
        font-weight: bold;
        line-height: 1.5;
    }

.TicketAnswer_Body_Inner_Self_TextContainer_body {
    position: relative;
    width: 100%;
    min-height: 115px;
    padding: 5px 10px 15px 10px;
    background-color: white;
    color: black;
    font-size: 13px;
}

    .TicketAnswer_Body_Inner_Self_TextContainer_body p {
        line-height: 1.3;
        margin: unset;
        font-weight: bold;
    }

.TicketAnswer_Body_Inner_Self_TextContainer_footer {
    width: 100%;
    height: 25px;
    font-weight: bold;
    font-size: 10px;
    text-align: left;
    padding: 5px 20px;
    border-top: 1px solid rgb(0, 13, 255);
    color: rgba(255, 255, 255, 0.75);
}


.TicketAnswer_Body_Inner_Other {
    float: left;
    width: calc(100% - 85px);
    margin-bottom: 10px;
}

.TicketAnswer_Body_Inner_Other_image {
    float: left;
    width: 80px;
    overflow: hidden;
}

    .TicketAnswer_Body_Inner_Other_image img {
        max-width: 80px;
        max-height: 80px;
        border-radius: 15px 0 15px 0;
    }

.TicketAnswer_Other_Role {
    padding-right: 30px;
    font-size: 10px;
    font-weight: bold;
    transform: rotateZ( 270deg);
    width: 116px;
    margin-top: -26px;
    padding-top: 84px;
    margin-bottom: 0;
}

.TicketAnswer_Body_Inner_Other_TextContainer {
    float: left;
    margin: 0 0 0 5px;
    width: calc(100% - 85px);
    background-color: rgb(119, 0, 116);
    border-radius: 0 15px 0 15px;
    color: white;
    box-shadow: 2px 2px 5px 1px rgb(200, 200, 200);
}

.TicketAnswer_Body_Inner_Other_TextContainer_header {
    width: 100%;
    font-weight: bold;
    font-size: 11px;
    padding: 5px;
    border-bottom: 1px solid rgb(198, 0, 255);
}

    .TicketAnswer_Body_Inner_Other_TextContainer_header p {
        margin: unset;
        text-align: left;
        font-weight: bold;
        line-height: 1.5;
    }

.TicketAnswer_Body_Inner_Other_TextContainer_body {
    position: relative;
    width: 100%;
    min-height: 115px;
    padding: 5px 10px 15px 10px;
    background-color: white;
    font-weight: bold;
    font-size: 13px;
    color: black;
}

    .TicketAnswer_Body_Inner_Other_TextContainer_body p {
        line-height: 1.3;
        margin: unset;
        color: black;
        font-weight: bold;
    }

.TicketAnswer_Body_Inner_Other_TextContainer_footer {
    width: 100%;
    height: 25px;
    font-weight: bold;
    font-size: 10px;
    text-align: right;
    padding: 5px 20px;
    border-top: 1px solid rgb(190, 0, 255);
    color: rgba(255, 255, 255, 0.77);
}


.TicketAnswer_Footer {
    position: relative;
    width: auto;
    height: 0;
    transition-duration: .5s;
}

.TicketAnswer_Footer_heightIncrease {
    height: 65vh !important;
    background-color: white;
}

.TicketAnswer_Body_heightDecrease {
    height: calc(100% - 65vh - 40px) !important;
}

.heightToggleButton {
    position: absolute;
    font-size: 11px;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(3 78 162 );
    cursor: pointer;
    border-bottom: 30px solid rgb(113, 13, 128);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    width: 215px;
    line-height: 2;
    text-align: center;
    filter: drop-shadow(2px 4px 6px black);
    border-bottom-left-radius: 3px 5px;
    border-top-left-radius: 14px 20px;
    border-top-right-radius: 15px 25px;
    border-bottom-right-radius: 3px 5px;
}

    .heightToggleButton p {
        font-weight: bold;
    }

.left__span {
    float: left;
    color: white;
    padding-left: 10px;
    padding-top: 10px;
}

.right__span {
    float: right;
    color: white;
    padding-right: 10px;
    padding-top: 10px;
}

.jumphide {
    animation-name: jumphide;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.33, 0.04, 0, 0.69);
}

#TicketAnswer_footercontent {
    overflow: auto;
    height: 100%;
    padding: 5px;
}

    #TicketAnswer_footercontent::-webkit-scrollbar {
        width: 8px;
        border-radius: 20px;
    }

    #TicketAnswer_footercontent::-webkit-scrollbar-track {
        background: #d54aff;
    }

    #TicketAnswer_footercontent::-webkit-scrollbar-thumb {
        background: rgb(176, 0, 199);
        border-radius: 20px;
    }

        #TicketAnswer_footercontent::-webkit-scrollbar-thumb:hover {
            background: rgb(89, 0, 107);
        }

.hideelement {
    display: none;
}

.imagelink {
    font-size: 10px;
    font-weight: bold;
    color: rgb(14, 99, 191) !important;
    cursor: pointer;
    position: absolute;
    bottom: 5px;
    left: 10px;
}

.cke_toolbar_break {
    clear: none !important;
}

.ticketrefertext {
    width: calc(100% - 170px);
    margin: 10px auto;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(251, 2, 186, 0.24);
    backdrop-filter: invert(1);
    color: white;
}

    .ticketrefertext p {
        font-weight: bold;
    }

#AddPreparedAnswers {
    padding: 25px;
}

#PreparedAnswers {
    padding: 0 25px 25px 25px;
}

.PreparedAnswerContainer {
    border: 1px dashed rgb(151, 151, 151);
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}

    .PreparedAnswerContainer p {
        margin-bottom: 0;
        font-size: 12px;
    }

@media only screen and (max-width:600px) {
    .TicketAnswer_Body {
        padding: 5px 5px 30px 5px;
    }

    .TicketAnswer_Body_Inner_Self {
        width: calc(100% - 65px);
    }

    .TicketAnswer_Body_Inner_Self_image {
        width: 60px;
    }

        .TicketAnswer_Body_Inner_Self_image img {
            max-width: 60px;
            max-height: 60px;
        }

    .TicketAnswer_Body_Inner_Self_TextContainer {
        width: calc(100% - 65px);
    }

    .TicketAnswer_Body_Inner_Self_TextContainer_header {
        width: 100%;
        font-weight: bold;
        font-size: 9px;
    }

    .TicketAnswer_Self_Role {
        padding-top: 30px;
    }

    .TicketAnswer_Body_Inner_Other {
        width: calc(100% - 65px);
    }

    .TicketAnswer_Body_Inner_Other_image {
        width: 60px;
    }

        .TicketAnswer_Body_Inner_Other_image img {
            max-width: 60px;
            max-height: 60px;
        }

    .TicketAnswer_Body_Inner_Other_TextContainer {
        width: calc(100% - 65px);
    }

    .TicketAnswer_Body_Inner_Other_TextContainer_header {
        width: 100%;
        font-weight: bold;
        font-size: 9px;
    }

    .ticketrefertext {
        width: calc(100% - 130px);
    }

        .ticketrefertext p {
            font-size: 12px;
        }

    .TicketAnswer_Footer_heightIncrease {
        height: 88vh !important;
        background-color: white;
    }

    .TicketAnswer_Body_heightDecrease {
        height: calc(100% - 88vh - 40px) !important;
    }
}

@keyframes jumphide {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-13px);
        opacity: .2;
    }
}
/*#endregion TicketingAnswer*/
.ckContainer {
    width: 100%;
}

    .ckContainer p {
        width: 100%;
    }




/* ==================== (Start) FRTK CV Page ==================== */
.FRTK-CV-Container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.FRTK-CV-Container__TopLogo {
    width: 180px;
    filter: drop-shadow(4px 5px 8px rgba(0,0,0,0.25));
}

.FRTK-CV-Wrapper {
    overflow: hidden;
    width: 560px;
    height: 100%;
    position: relative;
    box-shadow: 2px 3px 30px rgb(0 0 0 / 14%);
}

    .FRTK-CV-Wrapper .bg-shape {
        background-color: #f29f05;
        width: 1100px;
        height: 400px;
        display: inline-block;
        position: absolute;
        z-index: -1;
        top: -334px;
        left: -163px;
        transform: rotate(-28deg);
    }

        .FRTK-CV-Wrapper .bg-shape:nth-child(1) {
            background-color: #8000802e;
            width: 1125px;
        }

        .FRTK-CV-Wrapper .bg-shape:nth-child(2) {
            background-color: #8000802e;
            width: 1150px;
        }

.FRTK-CV-Wrapper__header {
    text-align: center;
    margin: 13px;
}

.FRTK-CV-Wrapper__body--UserProfile {
    text-align: center;
    margin: 20px;
}

    .FRTK-CV-Wrapper__body--UserProfile img {
        width: 120px;
        border-radius: 100px;
    }

.FRTK-CV-Wrapper__body--UserDetails {
    text-align: center;
}

    .FRTK-CV-Wrapper__body--UserDetails .RoleName {
        background-color: #eaeaea;
        border-radius: 20px;
        display: inline;
        padding: 0 10px;
    }

    .FRTK-CV-Wrapper__body--UserDetails h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .FRTK-CV-Wrapper__body--UserDetails p {
        font-size: 15px;
        margin: 6px 4px;
    }

    .FRTK-CV-Wrapper__body--UserDetails .FRTK-CV-Wrapper__body--UserDetails-viaIcon {
        text-align: right;
        margin: 20px;
    }

        .FRTK-CV-Wrapper__body--UserDetails .FRTK-CV-Wrapper__body--UserDetails-viaIcon p span {
            color: #888888;
        }

        .FRTK-CV-Wrapper__body--UserDetails .FRTK-CV-Wrapper__body--UserDetails-viaIcon p i {
            margin-left: 10px;
            font-size: 19px;
        }

.FRTK-CV-Wrapper__body--main {
    margin: 20px;
    border-top: 1.255px solid #d8d8d8;
    padding-top: 15px;
}

    .FRTK-CV-Wrapper__body--main h2 {
        font-size: 1.1em;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .FRTK-CV-Wrapper__body--main p {
        line-height: 2;
    }

.FRTK-CV-Wrapper__footer {
    background: gainsboro;
    padding: 10px;
    text-align: center;
}

.FRTK-CV-Container .UserNotExist {
    height: 95vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .FRTK-CV-Container .UserNotExist span {
        border-right: 3px solid #e85050;
        padding-right: 8px;
    }
/* ===================== (End) FRTK CV Page ===================== */




/* ==================== (Start) Happy BirthDay ==================== */
.HappyBirthDay_Button {
    display: none;
    position: fixed;
    left: -333px;
    bottom: 85px;
    z-index: 999;
    cursor: pointer;
    transition: .2s all cubic-bezier(0.75, 0.07, 0.46, 0.98);
    width: 400px;
    border-radius: 0 50px 50px 0;
    overflow: hidden;
    box-shadow: 0 0 10px rgb(0 0 0 / 25%);
}

    .HappyBirthDay_Button:hover {
        left: -30px;
        transition: .3s all ease-in-out;
    }

    .HappyBirthDay_Button p {
        margin: 0;
        background: white;
        padding: 0 0 0 10px;
    }

        .HappyBirthDay_Button p span {
            font-weight: 600;
        }

    .HappyBirthDay_Button i img {
        width: 75px;
    }
/* ===================== (End) Happy BirthDay ===================== */

.filepond--credits {
    display: none;
}
/*#region News*/
.News_MainImage {
    width: 350px;
    height: 175px;
}

    .News_MainImage img {
        max-height: 175px;
        max-width: 350px;
        margin-right: 50%;
        transform: translateX(50%);
    }

.News_Gallery_Image {
    padding: 5px;
    position: relative;
    transition-duration: .5s;
    cursor: pointer;
    float: right;
}

    .News_Gallery_Image img {
        max-height: 150px;
    }

    .News_Gallery_Image:hover {
        transform: scale(.95);
    }

.News_Gallery_Image_hover {
    width: 97%;
    height: 94%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.27);
    z-index: 2;
    backdrop-filter: blur(2px);
}

#NewsGalleryContainer img {
    max-width: 170px;
    transition-duration: .5s;
    cursor: pointer;
}

    #NewsGalleryContainer img:hover {
        transform: scale(.95);
    }
/*#endregion News*/

.selectablecard {
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 25px;
    box-shadow: 3px 3px 10px 0px #b5b5b5;
    transition-duration: .5s;
}

    .selectablecard:hover {
        transform: scale(.95);
        box-shadow: 1px 1px 3px 0px #b5b5b5;
    }

.selectablecardselected {
    border: 1px solid rgb(6, 124, 48);
    transform: scale(.95);
    box-shadow: 1px 1px 3px 0px #b5b5b5;
}

.HappyBirthDay_Button i img {
    width: 75px;
}

/*#region rowReport*/
.ReportRow {
    margin-bottom: 15px;
    /*padding:0;*/
}

.TransInfo {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-radius: 8px 8px 0 0;
    background-image: linear-gradient(to bottom right, #323858, #332851);
    padding-top: 5px;
    position: relative;
}

    .TransInfo label {
        color: white;
    }

.headerDate {
    position: absolute;
    top: 7px;
    left: 8px;
    font-size: 11px;
}

.TransReport {
    display: none;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-radius: 0 0 8px 8px;
}

    .TransReport label {
        font-size: 13px;
        font-weight: 600;
    }

/*#endregion*/
/*#region Uploader*/
.MainProgressContainer {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: #6e6e6e6e;
    z-index: 1000;
    top: 0;
}

.progressContainer {
    position: relative;
    z-index: 10000;
    width: 300px;
    height: 130px;
    border-radius: 5px;
    box-shadow: 2px 2px 20px #0000002e;
    background-color: #ffffffba;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
    backdrop-filter: blur(5px);
}

.progressOuter {
    position: relative;
    width: 90%;
    height: 20px;
    background-color: #7d007f0a;
    box-shadow: inset 1px 1px 13px #00000030;
    top: 23%;
    right: 50%;
    transform: translate(50%,-50%);
    border-radius: 100px;
    overflow: hidden;
}

.progressInner {
    position: relative;
    right: 0;
    top: 0;
    height: 20px;
    width: 0;
    background-color: #710d81;
    filter: url(#blob);
}

.progresscircle1, .progresscircle2, .progresscircle3 {
    position: absolute;
    z-index: 10001;
    width: 20px;
    height: 20px;
    background-color: #710d81;
    border-radius: 20px;
    left: -10px;
    transform: translateY(-50%);
}

.progresscircle1 {
    top: 10%;
    animation-name: progresscircle;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

.progresscircle2 {
    top: 90%;
    animation-name: progresscircle;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-delay: .5s;
}

.progresscircle3 {
    top: 50%;
    animation-name: progresscircle;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

.progresspercent {
    margin-right: 45%;
    font-weight: bold;
    color: white;
}

#progressbarLogo {
    height: 30px;
    margin-right: 50%;
    transform: translateX(50%);
    margin-top: 10px;
}

@keyframes progresscircle {
    0% {
        left: -10px;
        width: 20px;
        height: 20px;
    }

    100% {
        left: -80px;
        width: 0;
        height: 0;
    }
}
/*#endregion*/




@media (min-width: 776px) {
    .modal-alert-box {
        width: 60%;
        display: block;
        margin: auto;
    }
}

@media (min-width: 576px) {
    .modal-full-width {
        max-width: 90% !important;
    }
}


.SupplierCategorydocuments-img {
    width: 80px;
    height: 80px;
    overflow: hidden;
    margin: 10px auto;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: var(--l-radius) !important;
}

    .SupplierCategorydocuments-img img {
        height: 100%;
        width: 100%;
        margin: 10px 0;
        object-fit: cover;
    }
/*#region Search*/
.Smallhint {
    border: 1px solid silver;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 20px;
    margin-top: 10px;
}

    .Smallhint > p {
        text-align: center;
        margin-bottom: 3px;
        font-size: 12px;
        font-weight: bold;
    }

#PreResult {
    width: 100%;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    border: 2px solid black;
    position: absolute;
    top: 42px;
    background-color: white;
    z-index: 10000;
}

.PreSearchEntity {
    width: 95%;
    height: auto;
    margin: auto;
    margin-bottom: 6px;
    margin-top: 6px;
    border: dashed 1px black;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
}

    .PreSearchEntity > label {
        font-size: 14px !important;
        color: #555555;
        cursor: pointer;
    }

.image__container {
    border: 1px solid black;
    background-color: #e9e9e9;
    box-shadow: 2px 2px 9px 0px #0000003d;
    border-radius: 10px;
    padding: 10px 10px;
    margin-bottom: 10px;
}

    .image__container > span {
        position: absolute;
        top: -7px;
        right: 11px;
        color: red;
        background-color: aliceblue;
        box-shadow: 1px 1px 11px #747474;
        border-radius: 5px;
        border: 1px solid black;
        font-size: 32px;
        line-height: 0;
        height: 32px;
        cursor: pointer;
    }
/*#endregion*/
.centerElement {
    margin-right: 50%;
    margin-bottom: 5px;
    transform: translateX(50%);
}



.PanelPagination {
    margin: 10px 0;
}

.PanelPaginationETC {
    margin-left: 5px;
    margin-bottom: 5px;
    width: 20px;
    height: 35px;
    position: relative;
}

    .PanelPaginationETC > label {
        margin: auto;
        position: absolute;
        bottom: 0px;
        right: 4px;
    }

.PanelPagination-Inner {
    margin-left: 5px;
    margin-bottom: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    border: 1px solid #f29f05;
    border-radius: 3px;
    cursor: pointer;
    transition-duration: .2s;
}

.PanelPagination-Label {
    margin: auto;
    transition-duration: .2s;
}

.PanelPagination-Inner > i {
    margin: auto;
    transition-duration: .2s;
    font-size: 20px;
}

.PanelPagination-Inner.activePage {
    background-color: #f29f05;
}

    .PanelPagination-Inner.activePage .PanelPagination-Label {
        color: white;
    }

    .PanelPagination-Inner.activePage i {
        color: white;
    }

.PanelPagination-Inner:hover {
    background-color: #f29f05;
}

    .PanelPagination-Inner:hover .PanelPagination-Label {
        color: white;
    }

    .PanelPagination-Inner:hover i {
        color: white;
    }


/* #region Search */
.step-form-container .step-progress-bar .step .bullet.active {
    border-color: #00a94e !important;
    background: #01b956 !important;
}

    .step-form-container .step-progress-bar .step .bullet.active:after {
        border-color: #00a94e !important;
        background: #01b956 !important;
    }

.step-form-container .step-progress-bar .step .check {
    top: 0% !important;
    transform: translate(-50%, 37%) !important;
}

.step-form-container .page .field.btns {
    height: 45px !important;
    margin: 25px 0 40px !important;
    display: flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center;
}

    .step-form-container .page .field.btns button {
        font-size: 15px !important;
        width: 30% !important;
        height: calc(100% + 0px) !important;
        margin-top: 0 !important;
        letter-spacing: unset !important;
        margin-left: 20px !important;
    }

.step-form-container .page .field button.firstNext {
    width: 45% !important;
    letter-spacing: unset !important;
    font-size: 15px !important;
    margin: auto;
}


.step-form-container .identity-information .identity-information__box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

    .step-form-container .identity-information .identity-information__box img {
        max-width: 100%;
        margin: auto;
        border-radius: 8px;
    }

        .step-form-container .identity-information .identity-information__box img.selected {
            width: 100%;
            height: 130px;
            object-fit: contain;
        }

.step-form-container .identity-information input {
    background: #ededed;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 2px 2px 3px 1px rgb(0 0 0 / 20%);
}

.document-uploader-box {
    height: fit-content;
    width: 100%;
    margin-bottom: 20px !important;
}

    .document-uploader-box .document-image {
        height: 100px;
        width: 100px;
        margin: 10px auto;
        display: block;
        border-radius: 8px;
        object-fit: cover;
        cursor: pointer;
    }
/* #endregion */


/* #region Preview Image */
#PreviewImageModal {
    display: none;
    position: fixed;
    top: 0;
    z-index: 1005 !important;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

    #PreviewImageModal .prevImage_wrapper {
        width: 100%;
        height: 100%;
        background: #0000002b;
        backdrop-filter: blur(4px);
        padding: 50px;
    }

        #PreviewImageModal .prevImage_wrapper .close-prev-btn {
            outline: 0;
            border: 0;
            background: #939393;
            padding: 4px 11px 0px;
            margin: 10px;
            position: absolute;
            top: 10px;
            right: 10px;
            border-radius: 100px;
            font-size: 19px;
            color: white;
            box-shadow: 0 0 20px rgb(0 0 0 / 20%);
        }

        #PreviewImageModal .prevImage_wrapper #PrevtImgContent {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            #PreviewImageModal .prevImage_wrapper #PrevtImgContent .PreviewImg {
                width: inherit;
                min-width: 70%;
                max-width: fit-content;
                height: max-content;
                min-height: fit-content;
                max-height: 70%;
                object-fit: contain;
                border-radius: 8px;
                cursor: pointer;
                /*box-shadow: 0 0 20px rgb(0 0 0 / 20%);*/
            }
/* #endregion */


/* #region seller authentication pictures */
.posInfo-container .document-uploader-box .document-uploader-text {
    font-size: 12px;
    letter-spacing: -0.5px;
    width: 100%;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.posInfo-container .posInfo-content-header {
    margin-top: 20px;
}

    .posInfo-container .posInfo-content-header .posInfo-title {
        margin: auto;
        text-align: center;
        font-size: 19px;
        font-weight: 600;
        position: relative;
    }

        .posInfo-container .posInfo-content-header .posInfo-title::before {
            content: '';
            background: #534adf;
            width: 30%;
            height: 3px;
            display: inline-block;
            position: absolute;
            bottom: -18px;
            left: 0;
            right: 0;
            margin: auto;
        }

    .posInfo-container .posInfo-content-header .posInfo-content-title {
        color: #534adf;
        border-right: 3px solid;
        padding-right: 5px;
        margin-bottom: 15px;
    }


.posInfo-container .posInfo-content-wrapper {
    border: 2px solid #4e48d9a3;
    border-radius: 8px;
    margin-bottom: 25px;
    position: relative;
}

.footer-wrapper .footer-btns {
    text-align: center;
    width: 100%;
}

/* ----- More option dropdown ----- */
.posInfo-more-option {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}

    .posInfo-more-option .posInfo-more-option__btn {
        cursor: pointer;
        background: #4e48d7;
        color: white;
        border-radius: 8px;
        box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
    }

        .posInfo-more-option .posInfo-more-option__btn .icon {
            padding: 2px 6px 0;
            display: inline-block;
        }

.posInfo-more-option__items {
    position: absolute;
    top: 0px;
    left: 35px;
    width: 160px;
    height: max-content;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 25%);
    z-index: 2;
}

    .posInfo-more-option__items .option-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-radius: 8px;
        padding: 4px 6px;
        cursor: pointer;
        color: #686868;
        transition: .25s all ease-in-out;
        margin-bottom: 5px;
    }

        .posInfo-more-option__items .option-item:last-child {
            margin-bottom: 0;
        }

        .posInfo-more-option__items .option-item .icon {
            margin-left: 6px;
            font-size: 18px;
        }

        .posInfo-more-option__items .option-item .text {
            font-size: 14px;
        }

        .posInfo-more-option__items .option-item .text, .posInfo-more-option__items .option-item .icon {
            font-weight: bolder;
        }

        .posInfo-more-option__items .option-item.rejection-pos:hover {
            color: #bd2828 !important;
            background: #f1424224;
            transition: .2s all ease-in-out;
        }

        .posInfo-more-option__items .option-item.delete-pos:hover {
            color: #3B3B3B !important;
            background: #ebebeb;
            transition: .2s all ease-in-out;
        }

.rejection-pos-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    background: #00000047;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rejection-pos-container {
    background: white;
    border-radius: 8px;
    box-shadow: 2px 2px 25px rgb(0 0 0 / 10%);
    max-height: 100%;
    overflow: auto;
    padding-bottom: 12px;
}

    .rejection-pos-container .rejection-pos__header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .rejection-pos-container .rejection-pos__header, .rejection-pos-container .rejection-pos__footer {
        padding: 10px 22px;
    }

        .rejection-pos-container .rejection-pos__header .title {
            font-size: 15px;
            font-weight: 600;
            text-shadow: 2px 2px 6px #00000038;
        }

        .rejection-pos-container .rejection-pos__header .close-btn {
            cursor: pointer;
            transition: .25s all ease-in-out;
        }

            .rejection-pos-container .rejection-pos__header .close-btn:hover {
                transition: .2s all ease-in-out;
            }

    .rejection-pos-container .rejection-pos__main {
        margin: 15px 25px;
    }

    .rejection-pos-container .reasons-rejecting-item {
        display: flex;
        margin: 20px 10px;
        align-items: center;
        justify-content: flex-start;
    }

        .rejection-pos-container .reasons-rejecting-item input[type=radio] {
            margin: 0;
            margin-left: 10px;
        }

        .rejection-pos-container .reasons-rejecting-item .rejection-reason-text, .rejection-pos-container .rejection-pos__header .close-btn {
            margin: 0;
        }

    .rejection-pos-container .rejection-pos__footer .btn {
        margin: auto;
        display: block;
    }

/* ----- Pos content ----- */
.posInfo-container .posInfo-content-wrapper .posInfo-content-title-box {
    background: #e5e5e5;
    padding: 8px 35px;
    border-radius: 8px;
    position: relative;
    margin-top: 20px;
    margin-bottom: 8px;
}

    .posInfo-container .posInfo-content-wrapper .posInfo-content-title-box .posInfo-content-title {
        font-size: 16px;
        text-shadow: 2px 2px 6px #00000038;
        margin: 0;
    }

    .posInfo-container .posInfo-content-wrapper .posInfo-content-title-box .shapes-box {
        display: flex;
        align-items: center;
        width: 22px;
        height: 22px;
        flex-wrap: wrap;
        position: absolute;
        top: 0;
        right: 5px;
        bottom: 0;
        margin: auto;
    }

        .posInfo-container .posInfo-content-wrapper .posInfo-content-title-box .shapes-box .shape {
            background: #534adf;
            width: 8px;
            height: 8px;
            display: inline-block;
            /*border-radius: 3px;*/
            box-shadow: 2px 2px 10px rgb(0 0 0 / 25%);
            margin: 1.5px;
        }

            .posInfo-container .posInfo-content-wrapper .posInfo-content-title-box .shapes-box .shape:nth-child(1) {
                border-top-right-radius: 3px;
                border-bottom-left-radius: 5px;
            }

            .posInfo-container .posInfo-content-wrapper .posInfo-content-title-box .shapes-box .shape:nth-child(2) {
                border-top-left-radius: 3px;
            }

            .posInfo-container .posInfo-content-wrapper .posInfo-content-title-box .shapes-box .shape:nth-child(3) {
                border-bottom-right-radius: 3px;
            }

            .posInfo-container .posInfo-content-wrapper .posInfo-content-title-box .shapes-box .shape:nth-child(4) {
                border-bottom-left-radius: 3px;
                border-top-right-radius: 5px;
            }

.posInfo-container .posInfo-content-wrapper .posInfo-content-text {
    margin: 0;
    margin-bottom: 8px;
    background: #f3f3f3;
    padding: 3px 10px;
    border-radius: 5px;
    border-bottom: 2px solid #e9e9e9;
}
/* #endregion */


/* #region bank card */
.registerNewUser-form .bankCart-list {
    max-height: 290px;
    overflow: auto;
    padding-top: 15px;
}

.bankcard-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    width: 100%;
    height: fit-content;
}

@media (max-width: 62.22rem) {
    .bankcard-item {
        width: 100%;
        flex-direction: column;
    }
}

@media (max-width: 30rem) {
    .bankcard-item {
        margin-top: 0.5rem;
    }
}

@media (max-width: 457px) {
    .bankcard-item .card-top > .logo {
        width: 30px !important;
        height: 30px !important;
        top: 12px !important;
    }

    .bankcard-item .card-top .card-chip {
        width: 37px !important;
        top: 8px !important;
    }

    .bankcard-item .card-top .bank-name {
        font-size: 14px;
    }

    .bankcard-item .card-number.card-digits .card-number-field {
        font-size: 15px;
        width: 54px !important;
        height: 35px;
    }


    .bankcard-item .card-top {
        width: 20rem !important;
        height: 11rem !important;
    }
}

@media (max-width: 400px) {
    .bankcard-item .card-top {
        width: 19rem !important;
        height: 10.6rem !important;
    }
}

.bankcard-item .card-top {
    position: relative;
    width: 22rem;
    height: 12.5rem;
    margin-bottom: 1.6rem;
    border-radius: 0.6rem;
    background: #ebdece;
    box-shadow: 0.5rem 0.5rem 1.5rem #00000024;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

    .bankcard-item .card-top .card-chip {
        width: 42px;
        border-radius: 5px;
        position: absolute;
        top: 6px;
        left: 12px;
    }

    .bankcard-item .card-top .bank-name {
        position: absolute;
        top: 16px;
        font-family: 'iranianSans';
        color: var(--gray);
    }

    .bankcard-item .card-top, .bankcard-item .card-top * {
        color: white;
        font-family: "Odibee Sans", "Montserrat", sans-serif;
    }

        /*  .bankcard-item .card-top::before {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("http://cdn.flaticon.com/svg/44/44386.svg") no-repeat center;
            background-size: cover;
            opacity: 0.04;
        }*/

        .bankcard-item .card-top .back {
            width: 100%;
            height: 70%;
            position: absolute;
            border-radius: 0 0 0.6rem 0.6rem;
            position: absolute;
            bottom: 0;
        }


        .bankcard-item .card-top > .logo {
            position: absolute;
            top: 9px;
            right: 10px;
            width: 35px;
            height: 35px;
        }

            .bankcard-item .card-top > .logo > img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

        .bankcard-item .card-top > .card-number {
            width: 100%;
            opacity: 0.75;
            font-size: 1.25rem;
            text-align: center;
            margin-bottom: 45px;
        }


.bankcard-item .card-back {
    position: absolute;
    content: "";
    top: 1.5rem;
    left: 1.5rem;
    background: #EFF1F4;
    box-shadow: 0.5rem 0.5rem 1.5rem #ada9ab;
}

    .bankcard-item .card-back::after {
        position: absolute;
        content: "";
        top: 2.55rem;
        width: 100%;
        height: 2.55rem;
        background: #E2E0E1;
    }

.bankcard-item .card-number.card-digits {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

    .bankcard-item .card-number.card-digits .card-number-field {
        border: none;
        border-bottom: solid 1px #A9A9A9;
        background: transparent;
        text-align: center;
        direction: ltr;
        width: 65px;
        padding: 5px;
        margin: 5px;
        outline: none;
        letter-spacing: 1px;
        color: black;
    }



.registerNewUser-form .form-btn .btn {
    width: 40%;
    margin-bottom: 20px;
}


.form-note {
    background: #ebebeb;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 15px;
}

    .form-note .note-item .icon {
        color: var(--gray-dark);
    }

    .form-note .note-item .text {
        font-size: 12px;
    }

/* #endregion */




/* =========== (Start) Add fast new user =========== */
.registerNewUser-form .form-data {
    padding-top: 30px;
}

.registerNewUser-form .title {
    margin: 0px auto 25px;
    color: red;
}

.registerNewUser-form .form-data.hide {
    display: none;
}

.registerNewUser-form .form-box {
    margin: auto;
    margin-bottom: 17px;
}

    .registerNewUser-form .form-box label {
        position: relative;
        margin: auto;
        display: table;
    }

    .registerNewUser-form .form-box .mobileNumber.error, .registerNewUser-form .bankCart-list .input.error {
        -webkit-animation-name: ErrorAnimation;
        animation-name: ErrorAnimation;
        animation-duration: 1s;
    }

@keyframes ErrorAnimation {
    0% {
        border-bottom: 2px solid #F41F1F;
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

    100% {
        border-bottom: 2px solid transparent;
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
}


.registerNewUser-form .form-box .mobileNumber .icon {
    position: absolute;
    top: 6px;
    right: 5px;
    font-size: 20px;
    color: #747474;
}

.registerNewUser-form .form-box .mobileNumber .input {
    width: 100%;
    padding: 20px 30px !important;
    font-size: 14px;
    text-align: center !important;
}

.registerNewUser-form .form-btn {
    text-align: center;
}

.registerNewUser-container .confirm-code-page {
    display: none;
}

    .registerNewUser-container .confirm-code-page.show {
        display: block;
    }

.registerNewUser-container .verification {
    background-color: transparent;
    margin: auto;
}

/* ============ (End) Add fast new user ============ */


/* =========== (Start) Add bank account after register =========== */
.add-card.add-card-container {
    width: 450px;
    height: 100vh;
    margin: auto;
    background: #f9f9f9;
}

.add-card-container .add-card__header {
    background: var(--company-color);
    color: white;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    max-width: 100%;
    z-index: 3;
}

    .add-card-container .add-card__header .add-card__header--nav .icon {
        font-size: 20px;
        cursor: pointer;
    }


.add-card-container .add-card__main-content {
    padding: 15px;
}

.add-card-container .add-card__main-content--title {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    width: 70%;
    margin: 0 auto 14px;
}

.add-card-container .add-card__main-content--submit-btn {
    text-align: center;
}

    .add-card-container .add-card__main-content--submit-btn .btn {
        width: 90%;
    }

.add-card-container .add-card__footer {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dbdbdb;
}

    .add-card-container .add-card__footer .add-card__footer--copyright {
        font-size: 15px;
        font-weight: 600;
        color: var(--gray);
    }


.add-card__main-content .bankcards-list-registered .callback-btn {
    text-align: center;
    margin: 10px auto;
}

    .add-card__main-content .bankcards-list-registered .callback-btn .link {
        background: #3966e7;
        color: white;
        padding: 3px 12px;
        border-radius: 100px;
    }

.add-card__main-content .bankcards-list-registered {
    width: 100%;
    margin: 40px auto;
}

    .add-card__main-content .bankcards-list-registered .bankcards-list__items {
        width: 100%;
        max-height: 265px;
        padding: 15px;
        overflow: auto;
    }

    .add-card__main-content .bankcards-list-registered .bankcards-list__box:first-child {
        margin: 0 !important;
    }

    .add-card__main-content .bankcards-list-registered .bankcards-list__box {
        width: 100%;
        height: 80px;
        padding: 10px;
        background: #4caf5029;
        margin: 12px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
    }

        .add-card__main-content .bankcards-list-registered .bankcards-list__box .bank-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
        }

            .add-card__main-content .bankcards-list-registered .bankcards-list__box .bank-info .logo {
                width: 50px;
                height: 50px;
                border-radius: 10px;
                padding: 5px;
            }

                .add-card__main-content .bankcards-list-registered .bankcards-list__box .bank-info .logo .image {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

            .add-card__main-content .bankcards-list-registered .bankcards-list__box .bank-info .name {
                font-size: 14px;
                font-weight: 600;
            }

        .add-card__main-content .bankcards-list-registered .bankcards-list__box .cardnumber {
            color: var(--gray-dark);
        }



@media all and (max-width: 475px) {
    .add-card.add-card-container {
        width: 100% !important;
    }
}

/* ============ (End) Add bank account after register ============ */


.form-validatin-result {
    margin: 5px;
}

    .form-validatin-result .validation-item:first-child {
        border-top: 0 !important;
    }

    .form-validatin-result .validation-item {
        border-top: 1.255px solid silver;
        margin: 10px 15px 5px;
        padding-top: 5px;
    }