/*#region RegionName*/

/*#endregion RegionName*/


/*#region fonts*/

@font-face {
    font-display: swap;
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../../font/iransansweb_light.eot') format('embedded-opentype'), url('../../font/iransansweb_light.ttf') format('truetype'), url('../../font/iransansweb_light.woff') format('woff'), url('../../font/iransansweb_light.woff2') format('woff2');
}

/*#endregion fonts*/

.drag-horizontal {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

    .drag-horizontal:active {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
    }


/*#region default Scrollbar*/
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    cursor: pointer;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg, var(--PrimaryDark), var(--PrimaryLight));
    border-radius: 1px;
    cursor: grab;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--PrimaryDark)
    }



/* width */
.smallscroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/*#endregion default Scrollbar*/

div:where(.swal2-container) .swal2-html-container {
    font-size: 14px !important;
    font-weight: bold !important;
}

/*#region loader*/
.AjaxLoader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-image: linear-gradient(180deg, #2c17556b, #000000a8);
    /*z-index: -1;*/
    backdrop-filter: blur(10px);
    display: none;
    z-index: 999999999999;
}

    .AjaxLoader.ShowLoader {
        z-index: 999999999999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .AjaxLoader > .AjaxLoaderInner {
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .AjaxLoader > .AjaxLoaderInner label {
            background-color: var(--PrimaryLight);
            padding: 4px 10px;
            color: white;
            border-radius: 3px;
            margin-top: 10px;
        }

#AjaxLoader-particles {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    z-index: 0;
}

.AjaxLoader svg {
    font-family: IRANSans;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 1;
}

    .AjaxLoader svg text {
        animation: stroke 5s infinite alternate;
        stroke-width: 2;
        stroke: #8C8DA0;
        font-size: 50px;
    }

@media only screen and (max-width: 767px) {
    svg text {
        font-size: 30px;
    }
}

@keyframes stroke {
    0% {
        fill: rgba(255,255,255,0);
        stroke: rgba(230,230,230,1);
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        stroke-width: 2;
    }

    70% {
        fill: rgba(255,255,255,0);
        stroke: rgba(230,230,230,1);
    }

    80% {
        fill: rgba(255,255,255,0);
        stroke: rgba(230,230,230,1);
        stroke-width: 3;
    }

    100% {
        fill: rgba(255,255,255,1);
        stroke: rgba(230,230,230,0);
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 0;
    }
}



.custom-loader {
    width: 60px;
    height: 60px;
    color: #766DF4;
    --c: linear-gradient(currentColor 0 0);
    background: var(--c) 0 38px, var(--c) right 18px bottom 18px, var(--c) right 18px top 18px, var(--c) 18px 18px, var(--c) 18px 100%, var(--c) 100% 100%, var(--c) 100% 0, var(--c) 0 0;
    background-repeat: no-repeat;
    animation: l8-1 4s infinite, l8-2 4s infinite;
}

@keyframes l8-1 {
    0% {
        background-size: 0 4px,4px 0,0 4px,4px 0,0 4px,4px 0,0 4px,4px 0
    }

    6.25% {
        background-size: 40px 4px,4px 0,0 4px,4px 0,0 4px,4px 0,0 4px,4px 0
    }

    12.5% {
        background-size: 40px 4px,4px 20px,0 4px,4px 0,0 4px,4px 0,0 4px,4px 0
    }

    18.75% {
        background-size: 40px 4px,4px 20px,20px 4px,4px 0,0 4px,4px 0,0 4px,4px 0
    }

    25% {
        background-size: 40px 4px,4px 20px,20px 4px,4px 40px,0 4px,4px 0,0 4px,4px 0
    }

    31.25% {
        background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 0,0 4px,4px 0
    }

    37.5% {
        background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 100%,0 4px,4px 0
    }

    43.75% {
        background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 0
    }

    48%, 52% {
        background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 40px
    }

    56.25% {
        background-size: 0 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 40px
    }

    62.5% {
        background-size: 0 4px,4px 0,20px 4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 40px
    }

    68.75% {
        background-size: 0 4px,4px 0,0 4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 40px
    }

    75% {
        background-size: 0 4px,4px 0,0 4px,4px 0,40px 4px,4px 100%,100% 4px,4px 40px
    }

    81.25% {
        background-size: 0 4px,4px 0,0 4px,4px 0,0 4px,4px 100%,100% 4px,4px 40px
    }

    87.5% {
        background-size: 0 4px,4px 0,0 4px,4px 0,0 4px,4px 0,100% 4px,4px 40px
    }

    93.75% {
        background-size: 0 4px,4px 0,0 4px,4px 0,0 4px,4px 0,0 4px,4px 40px
    }

    100% {
        background-size: 0 4px,4px 0,0 4px,4px 0,0 4px,4px 0,0 4px,4px 0
    }
}

@keyframes l8-2 {
    0%,49.9% {
        background-position: 0 38px, right 18px bottom 18px, right 18px top 18px,18px 18px,18px 100%,100% 100%,100% 0,0 0
    }

    50%,100% {
        background-position: right 18px bottom 18px, right 18px top 18px, 18px 18px,18px 100%,100% 100%,100% 0,0 0,bottom 18px left 0
    }
}



.ChartContainer {
    direction: ltr;
    box-shadow: 0px 0px 6px #00000057;
    margin: 12px 0;
    border-radius: 5px;
}

    .ChartContainer * {
        direction: ltr;
    }

.highcharts-credits {
    display: none;
}


.InputAjaxLoader {
    /*display: block;*/
    width: 100%;
    height: 100%;
    background-color: #87878791;
    backdrop-filter: blur(1px);
    border-radius: 3px;
    position: absolute;
    z-index: 2;
    box-shadow: inset 0px 0px 7px 1px #a7a7a7;
    display: none
}

    .InputAjaxLoader .loading-text {
        direction: ltr !important;
        text-align: center;
    }
/*#endregion loader*/


/*#region keyframes*/
@keyframes FancyBorderRadus {
    0% {
        border-radius: 51% 49% 63% 37% / 54% 36% 64% 46%;
    }

    25% {
        border-radius: 63% 37% 48% 52% / 59% 56% 44% 41%;
    }

    50% {
        border-radius: 26% 74% 68% 32% / 35% 28% 72% 65%;
    }

    75% {
        border-radius: 63% 37% 48% 52% / 59% 56% 44% 41%;
    }

    100% {
        border-radius: 51% 49% 63% 37% / 54% 36% 64% 46%;
    }
}

@keyframes Rotate {
    0% {
        transform: rotateY(0deg)
    }

    100% {
        transform: rotateY(360deg)
    }
}

@-webkit-keyframes bubble-size {
    0%, 75% {
        width: var(--size, 4rem);
        height: var(--size, 4rem);
    }

    100% {
        width: 0rem;
        height: 0rem;
    }
}

@keyframes bubble-size {
    0%, 75% {
        width: var(--size, 4rem);
        height: var(--size, 4rem);
    }

    100% {
        width: 0rem;
        height: 0rem;
    }
}

@-webkit-keyframes bubble-move {
    0% {
        bottom: -4rem;
    }

    100% {
        bottom: var(--distance, 10rem);
    }
}

@keyframes bubble-move {
    0% {
        bottom: -4rem;
    }

    100% {
        bottom: var(--distance, 10rem);
    }
}

@-webkit-keyframes Hanging {
    0% {
        transform: rotateY(0deg)
    }

    25% {
        transform: rotateY(5deg)
    }

    50% {
        transform: rotateY(0deg)
    }

    75% {
        transform: rotateY(-5deg)
    }

    100% {
        transform: rotateY(0deg)
    }
}




/*#endregion keyframes*/


/*#region defaults*/

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    direction: rtl;
    /*font-family: IRANSans;*/
}


body {
    font-size: 1rem;
    font-weight: 400;
}


.mobile-hide {
    display: block;
}

.mobile-show {
    display: none;
}

@media only screen and (max-width: 767px) {
    .mobile-hide {
        display: none;
    }

    .mobile-show {
        display: block;
    }
}


i.fi {
    display: inline-flex;
}

i.closeBtn {
    font-size: 22px;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0px 0px 7px #0000003b;
    color: var(--PrimaryDark);
    transition-duration: 0.3s;
    cursor: pointer;
}

    i.closeBtn:hover {
        box-shadow: none;
        transform: scale(0.95)
    }

.InputGroup {
    border: 1px dashed #00000042;
    border-radius: 5px;
    padding: 4px 10px 0px 10px;
}

    .InputGroup > label {
        font-size: 15px;
        padding-bottom: 5px;
        display: block;
        text-align: center;
        text-decoration: underline;
    }

.InputWrapper {
    margin: 0 0 15px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .InputWrapper.InputRange {
        display: block;
        flex-direction: unset;
        align-items: unset;
    }

    .InputWrapper > label {
        font-size: 13px;
        padding-bottom: 5px;
    }

    .InputWrapper > p {
        font-size: 12px;
        /*padding-bottom: 5px;*/
        color: darkgray;
        text-align: justify;
    }

    .InputWrapper > span.invalid-feedback {
        color: #ff0018;
        font-size: 12px;
        text-align: justify;
    }

.InputBox {
    position: relative;
    width: 100%;
    height: 40px;
}

    .InputBox input {
        width: 100%;
        height: 100%;
        padding: 0px 45px 0 0;
        border: 1px solid var(--Grey);
        border-radius: 4px;
        transition-duration: .3s;
        font-size: 14px;
    }

    .InputBox i {
        position: absolute;
        top: 0;
        right: 0px;
        font-size: 20px;
        height: 100%;
        padding: 9px 9px;
        border-left: 1px dashed var(--PrimaryDark);
        color: var(--PrimaryDark);
    }

    .InputBox input:focus {
        border: 1px solid var(--PrimaryDark) !important;
        box-shadow: var(--Shadow) !important;
    }





.InputBox-KeyValue {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    margin: 6px 0;
}

    .InputBox-KeyValue:nth-of-type(1) {
        margin: 0 0;
    }

    .InputBox-KeyValue i {
        position: absolute;
        top: 0;
        right: 0px;
        font-size: 20px;
        height: 100%;
        padding: 9px 9px;
        border-left: 1px dashed var(--PrimaryDark);
        color: var(--PrimaryDark);
    }


    .InputBox-KeyValue input:nth-of-type(1) {
        width: calc(50%);
        height: 100%;
        padding: 0px 10px 0 0;
        border: 1px solid var(--Grey);
        border-left: none;
        border-radius: 0px 4px 4px 0;
        transition-duration: .3s;
        font-size: 14px;
    }

    .InputBox-KeyValue input:nth-of-type(2) {
        width: calc(50%);
        height: 100%;
        padding: 0px 10px 0 0;
        border: 1px solid var(--Grey);
        border-right: 1px dashed var(--Grey);
        border-radius: 4px 0 0 4px;
        transition-duration: .3s;
        font-size: 14px;
    }


    .InputBox-KeyValue:nth-of-type(1) input:nth-of-type(1) {
        width: calc(50% + 20px);
        padding: 0px 45px 0 0;
    }

    .InputBox-KeyValue:nth-of-type(1) input:nth-of-type(2) {
        width: calc(50% - 20px);
        padding: 0px 45px 0 0;
    }

    .InputBox-KeyValue input:focus {
        border: 1px solid var(--PrimaryDark) !important;
        box-shadow: var(--Shadow) !important;
    }
















.InputBox-KeyMultiValue {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    margin: 6px 0;
}

    .InputBox-KeyMultiValue:nth-of-type(1) {
        margin: 0 0;
    }




    .InputBox-KeyMultiValue input {
        width: calc(33.33%);
        height: 100%;
        padding: 0px 5px 0 0;
        border: 1px solid var(--Grey);
        transition-duration: .3s;
        font-size: 14px;
    }

        .InputBox-KeyMultiValue input:nth-of-type(1) {
            border: 1px solid var(--Grey);
            border-left: none;
            border-radius: 0px 4px 4px 0;
        }

        .InputBox-KeyMultiValue input:nth-of-type(2) {
            border: 1px solid var(--Grey);
            border-left: none;
            border-radius: 0 0 0 0;
            border-right: 1px dashed var(--Grey);
        }

        .InputBox-KeyMultiValue input:nth-of-type(3) {
            border: 1px solid var(--Grey);
            /*border-left: none;*/
            border-radius: 4px 0 0 4px;
            border-right: 1px dashed var(--Grey);
        }


        .InputBox-KeyMultiValue input:focus {
            border: 1px solid var(--PrimaryDark) !important;
            box-shadow: var(--Shadow) !important;
        }






















.TextareaBox {
    position: relative;
    width: 100%;
}

    .TextareaBox textarea {
        width: 100%;
        min-height: 150px;
        padding: 7px 45px 6px 6px;
        border: 1px solid var(--Grey);
        border-radius: 4px;
        transition-duration: .3s;
        font-size: 14px;
    }

        .TextareaBox textarea::-webkit-scrollbar {
            width: 5px;
        }

    .TextareaBox i {
        position: absolute;
        top: 0;
        right: 0px;
        font-size: 20px;
        height: calc(100% - 8px);
        padding: 9px 9px;
        border-left: 1px dashed var(--PrimaryDark);
        color: var(--PrimaryDark);
    }

    .TextareaBox textarea:focus {
        border: 1px solid var(--PrimaryDark) !important;
        box-shadow: var(--Shadow) !important;
    }









.selectBox {
    position: relative;
    position: relative;
    width: 100%;
    height: 40px;
}

    .selectBox select {
        width: 100%;
        height: 100%;
        padding: 0px 45px 0 0;
        border: 1px solid var(--Grey);
        border-radius: 4px;
        transition-duration: .3s;
        font-size: 14px;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        outline: none;
    }

        .selectBox select option {
            font-size: 14px;
            line-height: 25px;
        }


    .selectBox i {
        position: absolute;
        top: 0;
        right: 0px;
        font-size: 20px;
        height: 100%;
        padding: 9px 9px;
        border-left: 1px dashed var(--PrimaryDark);
        color: var(--PrimaryDark);
    }

    .selectBox select:focus {
        border: 1px solid var(--PrimaryDark) !important;
        box-shadow: var(--Shadow) !important;
    }




.CheckBox {
    display: block;
    width: 100%;
    min-height: 40px;
    position: relative;
    padding: 0px 45px 0px 9px;
    border: 1px solid var(--Grey);
    border-radius: 4px;
}

    .CheckBox > label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;
        height: 40px;
        border-bottom: 1px dashed var(--Grey);
        transition-duration: .3s;
        font-size: 14px;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        outline: none;
        font-size: 13px;
        font-weight: bold;
    }

        .CheckBox > label:last-child {
            border-bottom: none;
        }


    .CheckBox > i {
        position: absolute;
        top: 0;
        right: 0px;
        font-size: 20px;
        height: 100%;
        padding: 9px 9px;
        border-left: 1px dashed var(--PrimaryDark);
        color: var(--PrimaryDark);
    }


.form-switch {
    padding-left: 0;
}










@media only screen and (min-width: 576px) and (max-width: 768px) {
    .container-sm, .container {
        max-width: 100%;
    }
}

.form-switch .form-check-input {
    width: 2.5em;
    margin-left: 5px;
    height: 1.25em;
}

.form-check-input:checked {
    background-color: var(--Primary);
    border-color: var(--Primary);
}

.form-check-label {
    font-size: 14px;
    color: var(--Primary);
}

.form-switch * {
    cursor: pointer;
}


.form-title {
    font-weight: bold;
    font-size: 15px;
    font-family: IRANSans;
    display: block;
    padding-top: 10px;
    margin-bottom: 8px;
    text-decoration: underline;
}

.Input-title {
    font-weight: bold;
    font-family: IRANSans;
    display: flex;
    width: 100%;
    padding-top: 5px;
    padding-left: 3px;
    margin-bottom: 0px;
    justify-content: space-between;
    align-items: flex-start;
}

    .Input-title i {
        font-size: 18px;
        cursor: pointer;
        margin-bottom: 10px;
    }

.form-description {
    font-size: 12px;
    color: darkgray;
    text-align: justify;
    margin: 3px 0 8px 0;
}




.haveError {
    border: 1px solid #ff6c6c !important;
}
/*#endregion defaults*/

/*#region toast message Custom*/
.toast-message {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
    color: black;
    font-size: 12px;
}

.toast {
    --bs-toast-zindex: 1095;
    --bs-toast-padding-x: 0.75rem;
    --bs-toast-padding-y: 0.406rem;
    --bs-toast-spacing: 1rem;
    --bs-toast-max-width: 350px;
    --bs-toast-font-size: 0.9375rem;
    --bs-toast-color: #6f6b7d;
    --bs-toast-bg: rgba(255, 255, 255, 0.85);
    --bs-toast-border-width: 0px;
    --bs-toast-border-color: var(--bs-border-color-translucent);
    --bs-toast-border-radius: 0.375rem;
    --bs-toast-box-shadow: 0 0.25rem 1rem rgba(165, 163, 174, 0.45);
    --bs-toast-header-color: #5d596c;
    --bs-toast-header-bg: #fff;
    --bs-toast-header-border-color: rgba(219, 218, 222, 0.3);
    width: var(--bs-toast-max-width);
    max-width: 100%;
    font-size: var(--bs-toast-font-size);
    color: var(--bs-toast-color);
    pointer-events: auto;
    background-color: var(--bs-toast-bg);
    background-clip: padding-box;
    border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
    box-shadow: var(--bs-toast-box-shadow);
    border-radius: var(--bs-toast-border-radius);
}

    .toast.toast-success {
        background-color: #e1edff;
    }

    .toast.toast-error {
        background-color: #ffeaea;
    }

    .toast.showing {
        opacity: 0;
    }

    .toast:not(.show) {
        display: none;
    }

.toast-container {
    --bs-toast-zindex: 1095;
    position: absolute;
    z-index: var(--bs-toast-zindex);
    width: max-content;
    max-width: 100%;
    pointer-events: none;
    background-color: red;
}

    .toast-container > :not(:last-child) {
        margin-bottom: var(--bs-toast-spacing);
    }

.toast-header {
    display: flex;
    align-items: center;
    padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
    color: var(--bs-toast-header-color);
    background-color: var(--bs-toast-header-bg);
    background-clip: padding-box;
    border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
    border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
    border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
}

    .toast-header .btn-close {
        margin-right: calc(-0.5 * var(--bs-toast-padding-x));
        margin-left: var(--bs-toast-padding-x);
    }

.toast-body {
    padding: var(--bs-toast-padding-x);
    word-wrap: break-word;
}
/*#endregion toast message Custom*/





/*#region Header*/




.header-style-01 {
    position: sticky;
    top: 0px;
    background-color: white;
    z-index: 1000;
    box-shadow: var(--Shadow)
}


    .header-style-01 > .navbar {
        padding: 10px;
        background-color: white;
    }

    .header-style-01 > .navbar-area .nav-container {
        padding: 0px 0px;
    }



.sideBar {
    width: auto;
    margin-left: 0;
    margin-right: 0;
}

.sibeBar-location-Wrapper {
    width: auto;
    margin-left: 10px;
    margin-right: 20px;
}

.sibeBar-Wrapper {
    margin-left: 10px;
}

.sideBar .sidebarBtn {
    padding: 0 3px 0 6px;
    height: 35px;
}


    .sideBar .sidebarBtn .iconLeft {
        margin-left: 5px;
        font-size: 20px;
    }

.NavWrapper > .navbar-search-wrapper {
    width: calc(100% - 300px);
    max-width: 700px;
    position: relative;
}

@media screen and (max-width: 991px) {
    .NavWrapper > .navbar-search-wrapper {
        max-width: 100%;
    }
}

.NavWrapper > .navbar-search-wrapper > input {
    width: 100%;
    border-radius: 5px;
    border: none;
    color: var(--BlackLight);
    font-family: var(--heading-font);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #EAECF0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    padding: 0 5px 0 11px;
    height: 35px;
}

    .NavWrapper > .navbar-search-wrapper > input::placeholder {
        color: var(--Grey);
    }

@media screen and (max-width: 991px) {
    .NavWrapper > .navbar-search-wrapper > input {
        text-align: center;
    }
}





.NavWrapper > .navbar-search-wrapper > i {
    position: absolute;
    left: 7px;
    top: 10px;
    font-size: 16px;
}

.NavWrapper > .navbar-search-wrapper > button {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: white;
    border: none;
    border-radius: 0 8px 8px 0;
    border: 1px solid #EAECF0;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0 3px 0 6px;
    color: #344054;
}

    .NavWrapper > .navbar-search-wrapper > button i {
        font-size: 16px;
        margin-left: 5px;
    }



.NavWrapper > .navbar-search-wrapper > .navbar-search-result {
    width: 100%;
    min-height: 140px;
    max-height: 400px;
    overflow-y: auto;
    position: absolute;
    top: 40px;
    left: 0;
    background-color: white;
    box-shadow: var(--ShadowUltraLight);
    border-radius: 5px;
    padding: 0 7px;
}

@media screen and (max-width: 991px) {
    .NavWrapper > .navbar-search-wrapper > .navbar-search-result {
        max-height: 280px;
        width: 94%;
        left: 3%;
    }
}

.NavWrapper > .navbar-search-wrapper > .navbar-search-result .navbar-search-result-inner {
    min-height: 70px;
    border-bottom: 1px solid #dcdcdcc7;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    cursor: pointer;
    padding: 0 5px
}

    .NavWrapper > .navbar-search-wrapper > .navbar-search-result .navbar-search-result-inner:hover {
        background-color: #f4f4f4;
    }

    .NavWrapper > .navbar-search-wrapper > .navbar-search-result .navbar-search-result-inner * {
        cursor: pointer;
    }

    .NavWrapper > .navbar-search-wrapper > .navbar-search-result .navbar-search-result-inner:last-of-type {
        border-bottom: none;
    }

    .NavWrapper > .navbar-search-wrapper > .navbar-search-result .navbar-search-result-inner label {
        font-weight: bold;
        color: #515151;
        font-size: 14px;
    }

    .NavWrapper > .navbar-search-wrapper > .navbar-search-result .navbar-search-result-inner span {
        font-size: 12px;
        color: #6d6d6d;
    }

        .NavWrapper > .navbar-search-wrapper > .navbar-search-result .navbar-search-result-inner span.rightNote {
            position: absolute;
            left: 0;
            top: 10px;
            color: #a7a7a7;
        }

@media screen and (max-width: 991px) {
    .NavWrapper > .navbar-search-wrapper > .navbar-search-result .navbar-search-result-inner {
        min-height: 60px;
    }

        .NavWrapper > .navbar-search-wrapper > .navbar-search-result .navbar-search-result-inner label {
            font-size: 13px;
        }

        .NavWrapper > .navbar-search-wrapper > .navbar-search-result .navbar-search-result-inner span.rightNote {
            top: 5px;
        }
}








header .navbar-area .header-cart .single {
    margin-left: 20px;
    margin-bottom: 0;
}

header .single .cmn-btn1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: 5px 5px 5px 5px !important;
}

    header .single .cmn-btn1 i {
        margin-right: 0;
        font-size: 22px;
        position: unset;
        line-height: 1;
        display: flex;
    }


.navbar-area .header-cart {
    width: max-content;
}

    .navbar-area .header-cart .single .chat i {
        margin-right: 4px;
        font-size: 17px;
        line-height: 1;
    }

@media screen and (max-width: 450px) {
    .NavWrapper > .navbar-search-wrapper > input::placeholder {
        font-size: 12px;
    }
}

@media screen and (max-width: 991px) {
    .header-style-01 {
        position: sticky;
        top: -45px;
        /*overflow: auto*/
    }

    .sibeBar-location-Wrapper {
        display: none;
    }

    .sibeBar-Wrapper {
        display: none;
    }

    .NavWrapper > .navbar-search-wrapper {
        width: 100%;
        position: relative;
        margin-right: 10px;
    }

    .navbar-area .nav-container .responsive-mobile-menu {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
    }

        .navbar-area .nav-container .responsive-mobile-menu img {
            margin-bottom: 10px
        }
}

.header-style-01 .header-megamenu-wrapper {
    width: 100%;
    height: calc(100vh - 95%);
    background-color: rgba(0,0,0,.5);
    backdrop-filter: blur(3px);
    position: absolute;
    top: 100%;
    display: none;
}

    .header-style-01 .header-megamenu-wrapper.megamenu-open {
        display: block;
    }



.header-style-01 .header-megamenu {
    position: absolute;
    background-color: white;
    border-radius: 0 0 5px 5px;
    width: 94%;
    right: 3%;
    display: flex;
    padding: 10px;
    box-shadow: var(--Shadow);
    max-height: 70vh;
    overflow: hidden;
}



    .header-style-01 .header-megamenu .megamenu-maincategories {
        max-height: 100%;
        overflow-y: auto;
        direction: ltr;
        min-width: 215px;
        border-left: 1px solid silver;
        padding-left: 5px;
    }



        .header-style-01 .header-megamenu .megamenu-maincategories > ul > li {
            color: var(--BlackLight);
            position: relative;
            display: flex;
            width: -webkit-fill-available;
            justify-content: space-between;
            cursor: pointer;
            padding: 9px 30px 9px 5px;
            border-bottom: 1px solid #c0c0c042;
            transition-duration: .3s;
            align-items: center;
        }

            .header-style-01 .header-megamenu .megamenu-maincategories > ul > li:hover {
                background-color: #c0c0c042;
            }

            .header-style-01 .header-megamenu .megamenu-maincategories > ul > li.active-maincategory {
                background-color: var(--SecondaryLight) !important;
                border-radius: 5px
            }



            .header-style-01 .header-megamenu .megamenu-maincategories > ul > li .rightIcon {
                font-size: 17px;
                right: 5px;
                position: absolute;
                color: var(--GreyDark);
                cursor: pointer;
            }

            .header-style-01 .header-megamenu .megamenu-maincategories > ul > li label {
                font-size: 12px;
                /*margin-bottom: 15px;*/
                cursor: pointer;
            }

            .header-style-01 .header-megamenu .megamenu-maincategories > ul > li .dirIcon {
                cursor: pointer;
            }






    .header-style-01 .header-megamenu .megamenu-maincategories-detail {
        /*background-color: yellow;*/
        min-height: 20px;
        width: -webkit-fill-available;
        padding: 0 10px;
        justify-content: space-between;
        display: none;
    }

        .header-style-01 .header-megamenu .megamenu-maincategories-detail.megamenu-detail-Active {
            display: flex;
        }


        .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategories {
            width: 100%;
            max-height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0 10px 0 20px;
        }

            .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategories .megamenu-subcategory-AllMainAnnouncementsLink {
                width: 90%;
                position: relative;
                right: 5%;
                text-align: center;
                display: block;
                border: 2px solid var(--PrimaryDark);
                padding: 5px 0;
                border-radius: 5px;
                font-weight: normal;
                color: white;
                transition-duration: .3s;
                background-color: var(--PrimaryDark);
                font-size: 14px;
            }

                .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategories .megamenu-subcategory-AllMainAnnouncementsLink > span {
                    font-weight: bold;
                    color: var(--SecondaryLight);
                    transition-duration: .3s;
                }



                .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategories .megamenu-subcategory-AllMainAnnouncementsLink:hover {
                    color: var(--BlackLight);
                    background-color: white;
                    box-shadow: var(--ShadowLight);
                    transform: scale(1.01)
                }

                    .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategories .megamenu-subcategory-AllMainAnnouncementsLink:hover > span {
                        color: var(--PrimaryDark);
                    }



            .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategories .megamenu-subcategory-lists .megamenu-subcategory-AllSubAnnouncementsLink {
                font-weight: bold;
                font-size: 13px;
                padding: 3px 10px 3px 5px;
                border-radius: 5px 0 5px 0;
                display: flex;
                justify-content: space-between;
                box-shadow: var(--ShadowUltraLight);
                align-items: center;
                background-color: #562ba812;
            }

                .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategories .megamenu-subcategory-lists .megamenu-subcategory-AllSubAnnouncementsLink:hover {
                    background-color: var(--PrimaryDark);
                    color: white
                }



            .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategories .megamenu-subcategory-lists ul {
                font-weight: normal;
                font-size: 13px;
                padding: 10px 8px 0 8px;
                border: 1px solid #562ba80f;
            }


                .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategories .megamenu-subcategory-lists ul a {
                    display: block;
                    padding: 5px 2px;
                    border-radius: 3px;
                }

                    .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategories .megamenu-subcategory-lists ul a:hover {
                        background-color: var(--SecondaryLight)
                    }

        .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategoryImage {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: center;
            perspective: 500px;
        }

            .header-style-01 .header-megamenu .megamenu-maincategories-detail .megamenu-subcategoryImage > img {
                box-shadow: var(--ShadowLight);
                /*           animation-name: Hanging;
                animation-play-state: running;
                animation-timing-function: linear;
                animation-duration: 5s;
                animation-iteration-count: infinite;*/
            }




/*#endregion Header*/


/*#region main Section*/

body main {
    min-height: calc(100vh - 78px);
    padding: 10px 10px 100px 10px;
}

/*#endregion main Section*/


/*#region footer*/




body .footer {
    z-index: 1;
    --footer-background: #ED5565;
    display: grid;
    position: relative;
    grid-area: footer;
    min-height: 12rem;
}



body .smallfooter {
    z-index: 1;
    background-image: linear-gradient(180deg, var(--PrimaryDark), var(--PrimaryLight));
    position: relative;
    min-height: 4rem;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 5px 10px
}

    body .smallfooter > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        border-bottom: 1px solid silver
    }

        body .smallfooter > div > a {
            color: white;
            font-size: 11px;
            padding: 10px;
        }

    body .smallfooter > p {
        color: white;
        text-align: center;
        font-size: 13px;
        padding: 5px 0
    }

body .footer .bubbles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1rem;
    background: var(--PrimaryDark);
    filter: url("#blob");
}

    body .footer .bubbles .bubble {
        position: absolute;
        left: var(--position, 50%);
        background: var(--PrimaryDark);
        border-radius: 100%;
        -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
        animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
        transform: translate(-50%, 100%);
    }



body .footer .content {
    z-index: 2;
    grid-gap: 4rem;
    padding: 2rem;
    padding-bottom: 5px;
    background: var(--PrimaryDark);
    background-image: linear-gradient(180deg, var(--PrimaryDark), var(--PrimaryLight));
}



    body .footer .content .top-content-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        align-content: center;
    }

        body .footer .content .top-content-wrapper > div {
            max-width: calc(33% - 20px);
            width: -webkit-fill-available;
            padding: 0 10px;
        }

            body .footer .content .top-content-wrapper > div:nth-child(2) {
                border-right: 1px solid #ffffff1a;
                border-left: 1px solid #ffffff1a;
            }

        body .footer .content .top-content-wrapper .AboutPlatform {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            flex-wrap: nowrap;
        }

            body .footer .content .top-content-wrapper .AboutPlatform > img {
                max-width: 200px;
                margin-bottom: 15px;
            }

            body .footer .content .top-content-wrapper .AboutPlatform > h4 {
                color: white;
                font-size: 20px;
                margin-bottom: 25px;
            }

            body .footer .content .top-content-wrapper .AboutPlatform > p {
                color: white;
                font-size: 14px;
            }


        body .footer .content .top-content-wrapper .UsefullLinks {
            text-align: center
        }

            body .footer .content .top-content-wrapper .UsefullLinks > label {
                color: white;
                margin-bottom: 15px;
                font-size: 18px;
                text-decoration: underline;
            }

            body .footer .content .top-content-wrapper .UsefullLinks > ul > li {
                text-align: center;
            }

                body .footer .content .top-content-wrapper .UsefullLinks > ul > li a {
                    color: white;
                    width: 80%;
                    display: flex;
                    margin: auto;
                    flex-direction: row-reverse;
                    justify-content: space-between;
                    align-items: center;
                    padding: 7px 2px;
                    position: relative;
                }

                    body .footer .content .top-content-wrapper .UsefullLinks > ul > li a > span {
                        position: absolute;
                        height: 2px;
                        bottom: 0;
                        right: 50%;
                        width: 0%;
                        transition-duration: .3s;
                    }

                    body .footer .content .top-content-wrapper .UsefullLinks > ul > li a:hover {
                        color: var(--Secondary);
                    }

                        body .footer .content .top-content-wrapper .UsefullLinks > ul > li a:hover > span {
                            background-color: var(--Secondary);
                            width: 100%;
                            right: 0;
                        }

                body .footer .content .top-content-wrapper .UsefullLinks > ul > li i {
                    display: inline-flex;
                }

                body .footer .content .top-content-wrapper .UsefullLinks > ul > li label {
                    text-align: left;
                    font-size: 13px;
                }


        body .footer .content .top-content-wrapper .Licenses {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: center;
        }

            body .footer .content .top-content-wrapper .Licenses > img {
                max-width: 35%;
                background-color: white;
                border: 2px solid var(--Secondary);
                padding: 10px 3px;
                border-radius: 5px;
                transition-duration: .3s;
                cursor: pointer;
            }

                body .footer .content .top-content-wrapper .Licenses > img:hover {
                    box-shadow: var(--Shadow);
                    transform: scale(1.05)
                }


    body .footer .content hr {
        border-bottom: 1px solid white;
        margin: 15px 0;
        opacity: .8
    }

    body .footer .content .bottom-content-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        body .footer .content .bottom-content-wrapper .SocialMedia {
        }

        body .footer .content .bottom-content-wrapper .CopyRight p {
            color: white;
            font-size: 12px;
        }

        body .footer .content .bottom-content-wrapper .SocialMedia {
            perspective: 150px;
        }



            body .footer .content .bottom-content-wrapper .SocialMedia i {
                display: inline-flex;
                color: white;
                margin-left: 15px;
                margin-bottom: 15px;
                font-size: 15px;
                cursor: pointer;
                padding: 8px;
                border-radius: 40%;
                transition-duration: .5s;
                width: 40px;
                height: 40px;
                justify-content: center;
                align-items: center;
                box-shadow: var(--Shadow);
            }



                body .footer .content .bottom-content-wrapper .SocialMedia i:hover {
                    animation-play-state: paused;
                    transform: rotateY(0deg) !important;
                    border-radius: 50%;
                    background-color: var(--SecondaryDark);
                    box-shadow: none;
                }

@media screen and (min-width: 1440px) {

    body .footer .content .top-content-wrapper .Licenses > img {
        max-width: 25%;
    }
}

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

    body .footer {
        padding-bottom: 45px;
    }

    body .smallfooter {
        padding-bottom: 75px;
    }

    body .footer .content {
        padding-bottom: 35px;
    }

        body .footer .content .top-content-wrapper .AboutPlatform > img {
            max-width: 160px;
        }
}

@media screen and (max-width: 660px) {

    body .footer .content {
        padding-bottom: 70px;
    }

        body .footer .content .top-content-wrapper {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-evenly;
            flex-direction: column;
        }


            body .footer .content .top-content-wrapper > div {
                max-width: 100%;
                padding: 30px 10px;
                border-bottom: 1px solid white;
            }

                body .footer .content .top-content-wrapper > div:last-child {
                    border-bottom: none;
                }

                body .footer .content .top-content-wrapper > div:nth-child(2) {
                    border-left: none;
                    border-right: none;
                }


            body .footer .content .top-content-wrapper .AboutPlatform > img {
                max-width: 250px;
            }

            body .footer .content .top-content-wrapper .Licenses > img {
                max-width: 30%;
            }

        body .footer .content .bottom-content-wrapper {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
        }

            body .footer .content .bottom-content-wrapper .CopyRight p {
                text-align: center;
                font-size: 13px;
            }
}



/*#endregion footer*/


/*#region mobile bottom nav*/
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    background-color: white;
    z-index: 2000;
    border-radius: 15px 15px 0 0;
    box-shadow: 0px -1px 5px 0px #00000033;
}

    .mobile-bottom-nav div.mobile-bottom-nav-Btn {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: -webkit-fill-available;
        height: 100%;
        padding: 0 5px;
        transition-duration: .3s;
        z-index: 1;
        width: auto;
    }

        .mobile-bottom-nav div.mobile-bottom-nav-Btn:first-child {
            border-radius: 0 15px 0 0;
        }

        .mobile-bottom-nav div.mobile-bottom-nav-Btn:last-child {
            border-radius: 15px 0 0 0;
        }



        .mobile-bottom-nav div.mobile-bottom-nav-Btn > label {
            color: var(--GreyDark);
            cursor: pointer;
            font-size: 13px;
            transition-duration: .3s;
        }

        .mobile-bottom-nav div.mobile-bottom-nav-Btn > i {
            color: var(--GreyDark);
            cursor: pointer;
            font-size: 20px;
            transition-duration: .3s;
            top: 0;
        }

        .mobile-bottom-nav div.mobile-bottom-nav-Btn > lord-icon {
            display: none
        }

    .mobile-bottom-nav > .indicatorLayer {
        position: absolute;
        width: 70px;
        height: 55px;
        top: 0px;
        background-image: linear-gradient(180deg, var(--PrimaryDark), var(--PrimaryLight));
        z-index: 0;
        box-shadow: var(--Shadow);
        transition: 300ms cubic-bezier(0, 0, 0.57, 1.22);
        left: 50%;
        transform: translateX(-50%);
        animation-name: FancyBorderRadus;
        animation-play-state: running;
        animation-timing-function: linear;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }




    .mobile-bottom-nav div.mobile-bottom-nav-Btn.Activeindicator {
    }

        .mobile-bottom-nav div.mobile-bottom-nav-Btn.Activeindicator * {
            color: white
        }

        .mobile-bottom-nav div.mobile-bottom-nav-Btn.Activeindicator i {
            display: none;
        }

        .mobile-bottom-nav div.mobile-bottom-nav-Btn.Activeindicator lord-icon {
            display: block;
        }



@media screen and (max-width: 370px) {
    .mobile-bottom-nav div.mobile-bottom-nav-Btn > label {
        font-size: 11px;
    }

    .mobile-bottom-nav div.mobile-bottom-nav-Btn > i {
        font-size: 17px;
    }

    .mobile-bottom-nav > .indicatorLayer {
        width: 65px;
        height: 50px;
        top: 2px;
    }
}

@media screen and (max-width: 991px) {
    .mobile-bottom-nav {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
    }
}



/*#endregion mobile bottom nav*/


/*#region Mobile Profile Menu*/

.mobile-profile-menu-wrapper {
    width: 100vw;
    height: calc(100vh - 45px);
    max-height: calc(100dvh - 45px);
    position: fixed;
    background-color: white;
    z-index: 1500;
    padding: 10px 20px 30px 10px;
    transition-duration: .3s;
    bottom: -100vh;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

    .mobile-profile-menu-wrapper ul li {
        font-weight: bold;
        font-size: 15px;
        padding: 5px;
    }

        .mobile-profile-menu-wrapper ul li.active {
            background-color: var(--PrimaryDark);
            border-radius: 10px;
        }

            .mobile-profile-menu-wrapper ul li.active a {
                color: white;
            }

        .mobile-profile-menu-wrapper ul li a {
            display: flex;
            align-items: center;
        }

            .mobile-profile-menu-wrapper ul li a i {
                margin-left: 10px;
            }

    .mobile-profile-menu-wrapper.mobile-profile-menu-IsActive {
        bottom: 45px;
    }

    .mobile-profile-menu-wrapper #profile-menu-CloseBtn {
        position: sticky;
        right: 97%;
        top: 15px;
        margin-left: 15px;
        font-size: 25px;
        cursor: pointer;
    }

    .mobile-profile-menu-wrapper .mobile-profile-menu-Grouping {
        border-bottom: 1px solid #dad9d9;
        padding: 20px 0;
    }

        .mobile-profile-menu-wrapper .mobile-profile-menu-Grouping:last-child {
            border-bottom: none;
        }

        .mobile-profile-menu-wrapper .mobile-profile-menu-Grouping .mobile-profile-menu-link {
        }

            .mobile-profile-menu-wrapper .mobile-profile-menu-Grouping .mobile-profile-menu-link a {
                display: flex;
                width: 100%;
                cursor: pointer;
                transition-duration: .3s;
                padding: 10px 5px;
                border-radius: 5px;
                flex-wrap: nowrap;
                align-items: center;
            }

                .mobile-profile-menu-wrapper .mobile-profile-menu-Grouping .mobile-profile-menu-link a * {
                    cursor: pointer;
                    transition-duration: .3s;
                }

                .mobile-profile-menu-wrapper .mobile-profile-menu-Grouping .mobile-profile-menu-link a i {
                    font-size: 20px;
                    margin-left: 15px;
                    color: var(--BlackLighter)
                }

                .mobile-profile-menu-wrapper .mobile-profile-menu-Grouping .mobile-profile-menu-link a label {
                    color: var(--Black);
                    font-size: 14px;
                }


                .mobile-profile-menu-wrapper .mobile-profile-menu-Grouping .mobile-profile-menu-link a:hover {
                    background-color: var(--SecondaryLight)
                }
/*#endregion Mobile Profile Menu*/


/*#region Mobile Category List*/

.mobile-category-list-wrapper {
    width: 100vw;
    height: calc(100dvh - 45px);
    max-height: calc(100dvh - 45px);
    overflow: hidden;
    position: fixed;
    background-color: white;
    z-index: 1500;
    padding: 0px 0px 10px 0px;
    transition-duration: .3s;
    bottom: -100vh;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
}

    .mobile-category-list-wrapper.mobile-category-list-IsActive {
        bottom: 45px;
    }


    .mobile-category-list-wrapper .mobile-category-mainCategory-wrapper {
        height: 100%;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        width: 100px;
        background-color: var(--Primary);
        direction: ltr;
    }

.mobile-category-mainCategory-wrapper .mobile-mainCategory {
    /*min-height: 100%;*/
    background-color: white
}

    .mobile-category-mainCategory-wrapper .mobile-mainCategory li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        padding: 5px;
        border-bottom: 1px solid silver;
        min-height: 80px;
        cursor: pointer;
        transition-duration: .3s;
        background-color: var(--Primary);
    }

        .mobile-category-mainCategory-wrapper .mobile-mainCategory li:last-child {
            border-bottom: none;
        }

        .mobile-category-mainCategory-wrapper .mobile-mainCategory li label {
            text-align: center;
            font-size: 10px;
            color: white;
            cursor: pointer;
        }

        .mobile-category-mainCategory-wrapper .mobile-mainCategory li i {
            font-size: 12px;
            margin-bottom: 5px;
            color: white;
            cursor: pointer;
        }

        .mobile-category-mainCategory-wrapper .mobile-mainCategory li.Active-mainCategory {
            background-color: white;
            border-bottom: none;
        }

            .mobile-category-mainCategory-wrapper .mobile-mainCategory li.Active-mainCategory * {
                color: var(--PrimaryDark)
            }




.mobile-category-list-wrapper .mobile-category-subCategory-wrapper {
    height: 100%;
    width: -webkit-fill-available;
}

.mobile-category-subCategory-wrapper .mobile-category-subCategory {
    height: 100%;
    padding: 10px 5px;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
}

    .mobile-category-subCategory-wrapper .mobile-category-subCategory > a {
        display: block;
        width: 96%;
        position: relative;
        right: 2%;
        font-size: 12px;
        border: 2px solid var(--PrimaryDark);
        text-align: center;
        padding: 5px 0;
        border-radius: 5px;
        font-weight: normal;
        color: white;
        transition-duration: .3s;
        background-color: var(--PrimaryDark);
    }

        .mobile-category-subCategory-wrapper .mobile-category-subCategory > a > span {
            font-weight: bold;
            color: var(--SecondaryLight);
            transition-duration: .3s;
        }

        .mobile-category-subCategory-wrapper .mobile-category-subCategory > a:hover {
            color: var(--BlackLight);
            background-color: white;
            box-shadow: var(--ShadowLight);
            transform: scale(1.01)
        }

            .mobile-category-subCategory-wrapper .mobile-category-subCategory > a:hover > span {
                color: var(--PrimaryDark);
            }





    .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list {
        margin-top: 20px;
    }

        .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li {
            padding: 5px 0;
            border-bottom: 1px solid silver;
            font-size: 12px;
            position: relative;
            cursor: pointer;
        }



            .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li > label {
                display: block;
                border-radius: 5px;
                padding: 5px 5px;
                cursor: pointer;
            }

            .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li:hover > label {
                background-color: var(--SecondaryLight)
            }

            .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li.uncollapsed > label {
                background-color: var(--SecondaryLight)
            }

            .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li.uncollapsed:after {
                transform: rotateZ(-90deg)
            }



            .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li.haveSubCategory:after {
                content: "\f152";
                font-family: uicons-regular-straight !important;
                font-style: normal;
                font-weight: normal !important;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                position: absolute;
                left: 5px;
                top: 13px;
                transition-duration: .3s;
            }

            .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li ul {
                background-color: #f6f6f6;
                padding: 0 10px 0 0;
                border-right: 1px dashed var(--PrimaryDark);
                transition-duration: .3s;
                overflow: hidden;
                max-height: 0;
            }

            .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li ul {
                background-color: #f6f6f6;
                padding: 0 10px 0 0;
                border-right: 1px dashed var(--PrimaryDark);
                transition-duration: .3s;
                overflow: hidden;
                max-height: 0;
            }

                .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li ul .MobileSubCategoryBtn {
                    color: var(--PrimaryDark);
                    width: 100%;
                    display: block;
                    text-align: center;
                    /*text-decoration:underline;*/
                    font-weight: bold;
                }
            /*.mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li ul.ActiveMobileSubCategory{

                }*/
            .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li.uncollapsed ul {
                max-height: 500px;
                margin-top: 10px;
            }

            .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li ul > li {
                padding: 5px 0px;
                border-radius: 5px;
            }

                .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li ul > li:before {
                    font-family: uicons-regular-straight !important;
                    font-style: normal;
                    font-weight: normal !important;
                    font-variant: normal;
                    text-transform: none;
                    line-height: 1;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    /*content: "\fb7e";*/
                }

                .mobile-category-subCategory-wrapper .mobile-category-subCategory .category-subCategory-list > li ul > li:hover {
                    background-color: var(--SecondaryLight)
                }

/*#endregion Mobile Category List*/


/*#region User Login Modal*/

.user-login-Modal-wrapper {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 1500;
    background-color: rgba(0,0,0,.3);
    backdrop-filter: blur(2px);
    overflow: hidden;
    display: none;
}

.user-login-Modal-wrapper-Active {
    display: flex;
}

.user-login-Modal-wrapper .user-login-Modal-inner {
    background-color: white;
    width: auto;
    height: auto;
    margin: auto;
    border-radius: 5px;
    padding: 0 40px;
    display: flex;
}

    .user-login-Modal-wrapper .user-login-Modal-inner .user-login-Modal {
        margin: auto;
    }

    .user-login-Modal-wrapper .user-login-Modal-inner .login-Modal-header {
        padding: 20px 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        border-bottom: 1px solid silver
    }

        .user-login-Modal-wrapper .user-login-Modal-inner .login-Modal-header label {
            font-size: 20px
        }


    .user-login-Modal-wrapper .user-login-Modal-inner .login-Modal-content {
        padding: 20px 0;
        /*border-bottom: 1px solid silver*/
    }

        .user-login-Modal-wrapper .user-login-Modal-inner .login-Modal-content .content-title {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .user-login-Modal-wrapper .user-login-Modal-inner .login-Modal-content .content-disc {
            font-size: 12px;
            padding: 5px 0;
            color: var(--Grey)
        }

            .user-login-Modal-wrapper .user-login-Modal-inner .login-Modal-content .content-disc a {
                font-size: 12px;
                font-weight: bold;
                padding: 0 3px;
                color: var(--PrimaryDark)
            }


    .user-login-Modal-wrapper .user-login-Modal-inner .login-Modal-footer {
        padding: 20px 0;
    }

        .user-login-Modal-wrapper .user-login-Modal-inner .login-Modal-footer button {
            display: block;
            width: 100%;
            font-size: 14px;
            border: 2px solid var(--PrimaryDark);
            text-align: center;
            padding: 5px 0;
            border-radius: 5px;
            font-weight: normal;
            color: white;
            transition-duration: .3s;
            background-color: var(--PrimaryDark);
        }




            .user-login-Modal-wrapper .user-login-Modal-inner .login-Modal-footer button:hover {
                color: var(--PrimaryDark);
                background-color: white;
                box-shadow: var(--ShadowLight);
                transform: scale(1.01);
                font-weight: bold;
            }


@media screen and (max-width: 991px) {
    .user-login-Modal-wrapper .user-login-Modal-inner {
        width: 100vw;
        height: 100vh;
        overflow: auto;
        padding: 0 10px;
        padding-bottom: 45px;
    }

        .user-login-Modal-wrapper .user-login-Modal-inner .login-Modal-header {
            padding: 40px 0;
        }

        .user-login-Modal-wrapper .user-login-Modal-inner .login-Modal-content {
            padding: 40px 0;
            /*border-bottom: 1px solid silver*/
        }
}
/*#endregion User Login Modal*/


/*#region Content*/
.Index-Content-box {
    margin: 20px 0;
}

    .Index-Content-box:first-child {
        margin: 15px 0px;
    }

    .Index-Content-box .SectionTitle {
        display: flex;
        width: 100%;
        border-bottom: 2px solid;
        justify-content: space-between;
    }

        .Index-Content-box .SectionTitle > h5 {
            display: inline-block;
            font-size: 16px;
            color: var(--BlackLighter);
            font-weight: bold;
            padding: 5px 0;
            display: flex;
            align-items: center;
        }

            .Index-Content-box .SectionTitle > h5 > i {
                font-size: 26px;
                margin-left: 10px;
            }

        .Index-Content-box .SectionTitle > a {
            display: flex;
            align-items: center;
            font-size: 13px;
            border-radius: 5px;
            padding: 3px 8px;
            color: var(--PrimaryDark);
        }

            .Index-Content-box .SectionTitle > a i {
                font-size: 16px;
            }

            .Index-Content-box .SectionTitle > a:hover {
                background-color: var(--Secondary);
            }

@media screen and (max-width: 772px) {
    .Index-Content-box .SectionTitle > h5 {
        font-size: 12px
    }

    .Index-Content-box .SectionTitle > a {
        font-size: 11px;
    }
}


.ads-banner-wrapper {
    margin-top: 5px;
    perspective: 500px;
}

.HideJustLoaded {
    opacity: 0 !important;
    height: 0 !important;
}

.ads-banner-wrapper img {
    box-shadow: 0px 0px 11px #9d9d9d6b;
    margin: 5px;
    border-radius: 3px;
    border: 2px solid var(--SecondaryDark);
    aspect-ratio: 6 / 1;
}

@media screen and (max-width: 767px) {
    .ads-banner-wrapper img {
        aspect-ratio: 3 / 1;
    }
}
/*#endregion Content*/


/*#region Content Top category*/
.Content-Top-category-wrapper {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    padding: 7px 0 0 0;
    perspective: 500px;
    -webkit-box-reflect: below -5px linear-gradient(transparent, transparent, transparent, transparent, rgb(255 255 255 / 17%));
}

    .Content-Top-category-wrapper .Content-Top-category {
        width: 150px;
        height: 150px;
        position: relative;
        border-radius: 20% 10%;
        margin: 6px;
        overflow: hidden;
        box-shadow: var(--Shadow), inset 0px 0px 20px 1px white;
        border: 1px solid var(--BlackLighter);
        cursor: pointer;
        transition-duration: .3s;
        top: 0;
    }

        .Content-Top-category-wrapper .Content-Top-category > img {
            width: 100%;
            height: 100%;
            image-rendering: -webkit-optimize-contrast;
            object-fit: cover;
            position: absolute;
            z-index: -1;
            transition-duration: 0.3s;
        }

        .Content-Top-category-wrapper .Content-Top-category > span {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 0;
            transition-duration: 0.3s;
            background-color: #00000030;
            backdrop-filter: contrast(1.2);
        }

        .Content-Top-category-wrapper .Content-Top-category > label {
            transition-duration: .3s;
            font-size: 13px;
            cursor: pointer;
            display: block;
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 5px;
            color: white;
            z-index: 1;
            transition-duration: 0.3s;
            padding: 3px 0;
            background-color: #000000b0;
        }




        .Content-Top-category-wrapper .Content-Top-category:hover {
            top: -5px;
        }


            .Content-Top-category-wrapper .Content-Top-category:hover > img {
                transform: scale(1.2)
            }

            .Content-Top-category-wrapper .Content-Top-category:hover > label {
                opacity: 1;
            }



@media screen and (max-width: 772px) {
    .Content-Top-category-wrapper .Content-Top-category {
        width: 100px;
        height: 100px;
    }

        .Content-Top-category-wrapper .Content-Top-category > label {
            font-size: 12px;
        }
}

@media screen and (max-width: 512px) {
    .Content-Top-category-wrapper .Content-Top-category {
        width: 80px;
        height: 80px;
        margin: 3px;
    }

        .Content-Top-category-wrapper .Content-Top-category > label {
            font-size: 10px;
        }
}
/*#endregion  Content Top category*/


/*#region Announcement*/
.Announcement-wrapper {
    padding-left: 10px;
    padding-bottom: 25px;
    position: relative;
    margin: 8px 0;
}

.Announcement-Inner {
    position: relative;
    border: 1px solid #e4e2e2;
    width: 100%;
    padding: 5px 5px 5px 126px;
    height: 160px;
    border-radius: 5px;
    box-shadow: 0px 0px 11px #9d9d9d6b;
}

    .Announcement-Inner.UrgentCard {
        border: 1px solid var(--PrimaryDark);
        box-shadow: 0px 0px 6px var(--PrimaryLight);
    }


    .Announcement-Inner .Announcement-Info {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .Announcement-Inner .Announcement-Info .Announcement-title {
            display: block;
            font-size: 13px;
            font-weight: bold;
            color: black;
        }

        .Announcement-Inner .Announcement-Info .Announcement-boost-icon {
            padding: 5px 0;
        }

            .Announcement-Inner .Announcement-Info .Announcement-boost-icon i {
                font-size: 14px;
                padding: 3px 8px;
                border: 1px dotted var(--RedDark);
                align-items: center;
                justify-content: center;
                color: var(--RedDark);
                border-radius: 5px;
            }

        .Announcement-Inner .Announcement-Info .Announcement-ExtraInfo {
            display: block;
            font-size: 11px;
            color: black;
            opacity: .7;
            font-weight: bold;
        }

            .Announcement-Inner .Announcement-Info .Announcement-ExtraInfo > span {
                color: var(--PrimaryDark);
                font-weight: bold;
                font-size: 11px;
                margin: 0 3px;
                text-decoration: underline;
            }


    .Announcement-Inner .Announcement-Image-Wrapper {
        width: 135px;
        height: 135px;
        position: absolute;
        left: -12px;
        top: 12px;
        display: flex;
        flex-direction: row;
    }

        .Announcement-Inner .Announcement-Image-Wrapper .Announcement-Image {
            width: 135px;
            height: 135px;
            position: absolute;
            left: 0;
            overflow: hidden;
            border: 1px solid var(--SecondaryLight);
            box-shadow: var(--ShadowLight);
            border-radius: 5px;
        }


    .Announcement-Inner .Announcement-Image > img {
        width: 100%;
        height: 100%;
        image-rendering: -webkit-optimize-contrast;
        object-fit: cover;
        transition-duration: .3s;
    }

    .Announcement-Inner:hover .Announcement-Image > img {
        transform: scale(1.1)
    }

    .Announcement-Inner .Announcement-Image > span {
        position: absolute;
        background-color: var(--PrimaryDark);
        color: white;
        left: -35px;
        top: 8px;
        padding: 0 40px;
        transform: rotateZ(-45deg);
        border-top: 2px solid white;
        border-bottom: 2px solid white;
    }

    .Announcement-Inner .Announcement-Image div.AnnouncementBannerCount {
        position: absolute;
        left: 5px;
        bottom: 5px;
        background-color: black;
        display: flex;
        width: 20px;
        border-radius: 5px;
        aspect-ratio: 1;
        justify-content: center;
        align-items: center;
        padding: 2px 0 0 0;
    }

        .Announcement-Inner .Announcement-Image div.AnnouncementBannerCount > i {
            color: white;
            display: flex;
            position: absolute;
            top: 2px;
            left: 0px;
            font-size: 16px;
        }

        .Announcement-Inner .Announcement-Image div.AnnouncementBannerCount > span {
            font-size: 10px;
            color: white;
            height: 0;
            line-height: 0;
        }

.Announcement-Image .CardBusinessLogo {
    width: 35px;
    height: 35px;
    position: absolute;
    z-index: 2;
    bottom: 3px;
    right: 3px;
    background-color: #00000042;
    background-size: contain;
    border-radius: 3px;
    backdrop-filter: blur(3px);
}

.Announcement-wrapper .Announcement-TimeLocation {
    background-color: var(--PrimaryDark);
    position: absolute;
    display: flex;
    height: 25px;
    width: fit-content;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    border-radius: 0 0 5px 5px;
    bottom: 0;
    left: 17px;
}

    .Announcement-wrapper .Announcement-TimeLocation label {
        color: white;
        font-size: 11px;
        cursor: pointer;
        transition-duration: .3s;
        padding: 0px 6px;
    }


/*    .Announcement-wrapper .Announcement-Options i {
        color: white;
        font-size: 15px;
        cursor: pointer;
        transition-duration: .3s;
        padding: 0 15px;
    }

        .Announcement-wrapper .Announcement-Options i:hover {
            color: var(--Secondary);
            transform: scale(1.5);
        }*/


@media only screen and (max-width: 768px) {



    .Announcement-Inner {
        padding: 5px 5px 5px 108px;
        height: 145px;
    }

        .Announcement-Inner .Announcement-Info .Announcement-title {
            font-size: 12px;
        }

        .Announcement-Inner .Announcement-Info .Announcement-ExtraInfo {
            font-size: 10px;
        }


        .Announcement-Inner .Announcement-Image-Wrapper .Announcement-Image {
            width: 120px;
            height: 120px;
            /*top: 6px;*/
        }
}

/*#endregion Announcement*/


/*#region New Announcement*/
.newAnnouncement-selectCategory-topTitle {
    text-align: center;
    margin: 1rem 0 2rem 0;
}

.newAnnouncement-selectCategory-description {
    font-size: 13px;
    margin: 1rem 0;
    color: #9e9e9e;
}

.newAnnouncement-selectCategory {
    display: none
}

    .newAnnouncement-selectCategory.newAnnouncement-selectCategory-active {
        display: block;
    }

    .newAnnouncement-selectCategory > button {
        width: 100%;
        padding: 7px 0;
        margin-bottom: 10px;
        border-radius: 5px;
        border: none;
        font-size: 13px;
        background-color: var(--Primary);
        color: white;
        transition-duration: .1s;
        position: relative;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .newAnnouncement-selectCategory > button > i {
            position: absolute;
            right: 8px;
            font-size: 18px;
        }

        .newAnnouncement-selectCategory > button > span {
            color: var(--Secondary);
            margin-right: 5px;
            font-weight: bold
        }

        .newAnnouncement-selectCategory > button:hover {
            background-color: var(--PrimaryDark);
            color: var(--SecondaryLight);
        }

.newAnnouncement-Category {
    display: flex;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid #e5e5e5;
    align-items: center;
    cursor: pointer;
}

    .newAnnouncement-Category * {
        cursor: pointer;
    }

    .newAnnouncement-Category:last-child {
        border-bottom: none;
    }

    .newAnnouncement-Category > a {
        display: flex;
        align-items: center;
    }

        .newAnnouncement-Category > a i {
            font-size: 18px;
            font-size: 1.3rem;
            margin-left: 16px;
        }

    .newAnnouncement-Category > i {
    }

/*.newAnnouncement-selectCategory-wrapper > div {
    margin: 1rem 0 3rem 0;
}


@media only screen and (max-width: 767px) {
    .newAnnouncement-selectCategory-wrapper > div {
        margin: 1rem 0 2rem 0;
    }
}*/

.submitAnnouncement-Category {
    border: 1px solid lightgrey;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .submitAnnouncement-Category > .submitAnnouncement-Category-info {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: -webkit-fill-available;
    }

        .submitAnnouncement-Category > .submitAnnouncement-Category-info > label {
            font-size: 25px;
            margin-bottom: 12px;
        }

        .submitAnnouncement-Category > .submitAnnouncement-Category-info > a {
            padding: 7px 12px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: none;
            font-size: 15px;
            background-color: var(--Primary);
            color: white;
            transition-duration: .3s;
            position: relative;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .submitAnnouncement-Category > .submitAnnouncement-Category-info > a:hover {
                background-color: var(--PrimaryDark);
                color: var(--SecondaryLight);
            }



.submitAnnouncement-Category-img {
    width: 30%;
}

    .submitAnnouncement-Category-img > img {
        border-radius: 3px;
        box-shadow: var(--ShadowLight)
    }

@media only screen and (max-width: 767px) {
    .submitAnnouncement-Category-img {
        width: 50%;
    }

    .submitAnnouncement-Category > .submitAnnouncement-Category-info > label {
        font-size: 15px;
        font-weight: bold;
    }

    .submitAnnouncement-Category > .submitAnnouncement-Category-info > a {
        padding: 4px 7px;
        font-size: 12px;
    }
}


.newAnnouncement-selectLocation-City {
    position: relative;
}

.newAnnouncement-searchCity-result {
    background-color: white;
    border-radius: 5px;
    border: 1px solid lightgray;
    padding: 3px 8px;
    position: absolute;
    width: calc(100% - 24px);
    z-index: 10;
    top: 70px;
    max-height: 250px;
    overflow-y: auto;
    background-color: #f8f8f8;
    display: none;
}


    .newAnnouncement-searchCity-result > div {
        padding: 6px 8px;
        border-bottom: 1px dashed lightgray;
        cursor: pointer;
        border-radius: 3px;
        transition-duration: .3s;
    }

        .newAnnouncement-searchCity-result > div:last-child {
            border-bottom: none;
        }

        .newAnnouncement-searchCity-result > div.newAnnouncement-searchCity:hover {
            background-color: var(--SecondaryLight);
        }



        .newAnnouncement-searchCity-result > div.newAnnouncement-searchCity > label {
            font-size: 13px;
            cursor: pointer;
        }

        .newAnnouncement-searchCity-result > div > p {
            font-size: 13px;
            cursor: pointer;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            color: darkred
        }

            .newAnnouncement-searchCity-result > div > p > i {
                font-size: 25px;
                margin-left: 8px;
            }







/*#endregion  New Announcement*/

/*#region NS Buttons*/
.ns-btn {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    transition-duration: .3s;
    text-decoration: none;
}

    .ns-btn > i {
        margin: 0 8px;
        font-size: 120%;
    }

.ns-sm-btn {
    padding: 4px 7px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    transition-duration: .3s;
}

.ns-xsm-btn {
    padding: 3px 6px;
    border: none;
    border-radius: 5px;
    font-size: 11px;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    transition-duration: .3s;
}

.ns-sm-btn > i {
    margin: 0 4px;
    font-size: 15px;
}

.ns-btn-outline-primery {
    background-color: white;
    color: var(--Primary);
    border: 2px solid var(--Primary);
}

.ns-btn-outline-secondary {
    background-color: white;
    color: var(--SecondaryDark);
    border: 2px solid var(--Secondary);
}


.ns-btn-primery {
    background-color: var(--Primary);
    border: 2px solid var(--Primary);
    color: white;
}

    .ns-btn-primery:hover {
        background-color: white;
        color: var(--Primary);
    }

.ns-btn-info {
    background-color: #00d9d9;
    border: 2px solid #00d9d9;
    color: white;
}

    .ns-btn-info:hover {
        background-color: white;
        color: #00d9d9;
    }

.ns-btn-success {
    background-color: #198754;
    border: 2px solid #198754;
    color: white;
}

    .ns-btn-success:hover {
        background-color: white;
        color: #198754;
    }


.ns-btn-warning {
    background-color: var(--Red);
    border: 2px solid var(--Red);
    color: white;
}

    .ns-btn-warning:hover {
        background-color: white;
        color: var(--Red);
    }

.ns-btn-secondary {
    background-color: var(--Secondary);
    border: 2px solid var(--Secondary);
}

    .ns-btn-secondary:hover {
        background-color: transparent;
    }

/*#endregion  NS Buttons*/

/*#region customRadio*/
.custom-option {
    padding-left: 0;
    border: 1px solid #434968;
    border-radius: 0.375rem;
}

    .custom-option:hover {
        border: 1px solid #7983bb;
    }

    .custom-option.custom-option-image {
        border-width: 1px !important;
    }

        .custom-option.custom-option-image .custom-option-body img {
            border-radius: 0.375rem;
        }

    .custom-option .custom-option-content {
        cursor: pointer;
        width: 100%;
        margin: unset;
    }

.custom-option-basic .custom-option-content {
    padding: 1.07em;
    padding-left: 2.77em;
}

.custom-option-basic .custom-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.25rem;
}

.custom-option-icon.checked i,
.custom-option-icon.checked svg {
    color: #7367f0;
}

.custom-option-icon {
    transition-duration: .5s;
}

    .custom-option-icon.checked {
        border-color: var(--PrimaryDark);
        background-color: #562ba817;
    }

    .custom-option-icon .custom-option-content {
        text-align: center;
        padding: 1.07em;
    }

    .custom-option-icon .custom-option-body {
        display: block;
        margin-bottom: 0.5rem;
    }

        .custom-option-icon .custom-option-body i {
            font-size: 1.75rem;
            margin-bottom: 0.5rem;
            display: block;
        }

        .custom-option-icon .custom-option-body svg {
            height: 38px;
            width: 38px;
            margin-bottom: 0.25rem;
        }

        .custom-option-icon .custom-option-body .custom-option-title {
            display: block;
            font-size: 0.9375rem;
            font-weight: 600;
            color: #635c5c;
        }

    .custom-option-icon .form-check-input {
        float: none !important;
        margin: 0 !important;
    }

/*#endregion customRadio*/


/*#region Category Filter Box*/
.CategoryFilter {
    box-shadow: var(--ShadowLight);
    position: sticky;
    top: 70px;
    margin-top: 10px;
}

    .CategoryFilter .CategoryFilterTriggerBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--PrimaryDark);
        color: white;
        padding: 8px 5px;
        border-radius: 5px;
        cursor: pointer;
        transition-duration: .5s;
    }

        .CategoryFilter .CategoryFilterTriggerBox * {
            cursor: pointer;
        }

        .CategoryFilter .CategoryFilterTriggerBox label span {
            font-size: 12px;
        }

    .CategoryFilter .CategoryFilterBox {
        padding: 0 6px;
        border-radius: 2px;
        max-height: 0;
        overflow: hidden;
        transition-duration: .5s;
    }

    .CategoryFilter.uncollapse .CategoryFilterBox {
        max-height: calc(100vh - 130px);
        overflow: auto;
        padding: 3px 6px 0 6px;
    }

    .CategoryFilter.uncollapse .CategoryFilterTriggerBox {
        border-radius: 5px 5px 0 0;
    }


    .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #d5d5d5;
    }

        .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop:last-of-type {
            border-bottom: none;
        }

        .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop .CategoryFilterBox-PropLabel {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            cursor: pointer;
        }

            .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop .CategoryFilterBox-PropLabel label {
                display: inline-flex;
                font-size: 13px;
                align-items: center;
                cursor: pointer;
            }

                .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop .CategoryFilterBox-PropLabel label.ActiveFilter:after {
                    content: "";
                    display: block;
                    position: relative;
                    right: 5px;
                    width: 7px;
                    aspect-ratio: 1;
                    background-color: var(--SecondaryDark);
                    border-radius: 50%;
                }



        .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop label i {
            margin-left: 10px;
        }

        .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop .CategoryFilterBox-PropInput {
            max-height: 0;
            overflow: hidden;
            transition-duration: .5s;
        }

        .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop.uncollapse .CategoryFilterBox-PropInput {
            max-height: 370px;
            overflow: auto;
            padding: 5px 0 10px 0;
        }

        /*   .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop .CategoryFilterBox-PropInput select, .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop .CategoryFilterBox-PropInput input[type=range], .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop .CategoryFilterBox-PropInput input[type=text] {
            width: 100%;
            height: 35px;
            border: 1px solid #cfcfcf;
            border-radius: 5px;
            box-shadow: none;
            font-size: 12px;
            margin: 3px 0;
            text-align: center;
        }*/


        .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop .CategoryFilterBox-PropInput :where(select, input[type=range], input[type=text]) {
            width: 100%;
            height: 35px;
            border: 1px solid #cfcfcf;
            border-radius: 5px;
            box-shadow: none;
            font-size: 12px;
            margin: 3px 0;
            text-align: center;
        }

        .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop .CategoryFilterBox-PropInput .CheckBox {
            width: 100%;
            border: 1px solid #cfcfcf;
            padding: 0 5px;
            min-height: 30px;
            margin: 4px 0;
        }

            .CategoryFilter .CategoryFilterBox .CategoryFilterBox-Prop .CategoryFilterBox-PropInput .CheckBox label {
                height: 30px;
            }

.CategoryFilterBox-Btnbox {
    padding: 10px 5px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    bottom: 0;
}

    .CategoryFilterBox-Btnbox button {
        margin: 0 4px;
        width: -webkit-fill-available;
    }

@media only screen and (max-width: 991px) {
    .CategoryFilter {
        box-shadow: none;
        position: sticky;
        top: 70px;
        margin: 10px 0;
    }

        .CategoryFilter.uncollapse .CategoryFilterTriggerBox {
            border-radius: 5px;
        }

        .CategoryFilter .CategoryFilterBox {
            max-height: 100vh;
            overflow-y: auto;
            padding: 110px 17px 55px 10px;
            display: block;
            position: fixed;
            width: 100vw;
            height: 100vh;
            background-color: white;
            z-index: 10;
            top: 0;
            left: 0;
        }

        .CategoryFilter.uncollapse .CategoryFilterBox {
            display: none;
        }

        .CategoryFilter .CategoryFilterBox .CloseFilterBtn {
            align-items: center;
            justify-content: flex-end;
        }

        .CategoryFilter .CategoryFilterBox .CloseFilterBtn {
            margin: 0 0 13px 0;
            max-width: 30px;
            padding: 3px 5px;
            border-radius: 9px;
            border: 1px solid #dddddd;
            display: flex;
            align-items: center;
            font-size: 14px;
            cursor: pointer;
            transition-duration: .3s;
            overflow: hidden;
        }

            .CategoryFilter .CategoryFilterBox .CloseFilterBtn i {
                margin-right: 8px;
                font-size: 18px;
            }

            .CategoryFilter .CategoryFilterBox .CloseFilterBtn:hover {
                background-color: var(--PrimaryDark);
                color: white;
                max-width: 75px;
            }

    .CategoryFilterBox-Btnbox {
        margin-top: 50px;
    }
}






/*#endregion Category Filter Box*/
.sticky-Top {
    position: sticky;
    top: 80px;
    z-index: 3;
}

.sticky-Top-80 {
    position: sticky;
    top: 80px;
    z-index: 3;
}

@media only screen and (max-width: 991px) {
    .sticky-Top {
        top: 30px;
    }
}


@media only screen and (max-width: 767px) {
    .md-fixed-top-70 {
        position: fixed;
        top: 70px;
        width: 100%;
        z-index: 555;
    }
}


.top-breadcrumb {
    margin: 20px 0 35px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

    .top-breadcrumb > a {
        font-size: 12px;
        padding: 0 5px;
        color: var(--GreyDark);
        font-weight: bold;
    }



.SlickSlider {
    direction: ltr
}

    .SlickSlider * {
        direction: ltr
    }
/*#region View Announcement*/

.AnnounceView-left-section {
    box-shadow: var(--ShadowLight);
    background-color: white;
    padding: 10px;
    border-radius: 5px;
}

@media only screen and (max-width: 767px) {
    .AnnounceView-left-section {
        position: relative;
        top: 0;
        box-shadow: none;
        padding: 0;
    }
}

.AnnounceView-image img {
    width: 100%;
    aspect-ratio: 1;
    filter: contrast(1.1);
    border-radius: 5px;
    object-fit: cover;
    cursor: pointer;
    max-height: 500px;
}

.AnnounceView-thumbnail {
}

    .AnnounceView-thumbnail .slick-slide {
        position: relative;
        margin: 5px;
    }

    .AnnounceView-thumbnail img {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 5px;
        object-fit: cover;
        cursor: pointer;
    }

    .AnnounceView-thumbnail .slick-slide:before {
        content: "";
        width: 100%;
        height: 100%;
        background-color: #00000047;
        z-index: 2;
        position: absolute;
        top: 0;
        left: 0;
        transition-duration: .5s;
        backdrop-filter: blur(1px);
        border-radius: 5px;
        cursor: pointer;
    }

    .AnnounceView-thumbnail .slick-slide.slick-current:before {
        background-color: #00000000;
        backdrop-filter: blur(0px);
        cursor: unset;
    }




.AnnounceView-title {
    font-size: 24px;
    margin: 0 0 10px 0;
}

@media only screen and (max-width: 767px) {
    .AnnounceView-title {
        font-size: 24px;
        margin: 30px 0 10px 0;
    }
}

.AnnounceView-location {
    font-size: 13px;
    color: gray;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .AnnounceView-location i {
        font-size: 19px;
        margin-right: 14px;
        cursor: pointer;
    }



.AnnounceView-Warning {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


    .AnnounceView-Warning > label {
        display: flex;
        align-items: center;
    }



.AnnounceView-ContactInfo-Wrapper {
    max-height: 0;
    overflow: hidden;
    transition-duration: .5s;
}

    .AnnounceView-ContactInfo-Wrapper.ShowContactInfo {
        max-height: 500px;
    }

    .AnnounceView-ContactInfo-Wrapper p {
        background-color: darkred;
        font-size: 13px;
        padding: 10px 5px;
        border-radius: 5px;
        color: white;
        text-align: center;
    }

    .AnnounceView-ContactInfo-Wrapper div.AnnounceView-ContactInfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 18px 0;
    }

        .AnnounceView-ContactInfo-Wrapper div.AnnounceView-ContactInfo label {
            font-size: 13px;
            text-wrap: nowrap;
            display: flex;
            align-items: center;
        }

            .AnnounceView-ContactInfo-Wrapper div.AnnounceView-ContactInfo label i {
                font-size: 17px;
                margin-left: 5px;
            }

        .AnnounceView-ContactInfo-Wrapper div.AnnounceView-ContactInfo span {
            display: inline-block;
            width: -webkit-fill-available;
            height: 1px;
            border-bottom: 1px dashed var(--FadePrimary);
            margin: 0 5px;
        }

        .AnnounceView-ContactInfo-Wrapper div.AnnounceView-ContactInfo a {
            color: var(--PrimaryDark);
            font-weight: bold;
            font-size: 14px;
            text-wrap: nowrap;
        }






@media only screen and (max-width: 768px) {
    .AnnounceView-ContactInfo-Wrapper {
        position: fixed;
        display: none;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #0000008f;
        z-index: 556;
        backdrop-filter: blur(1px);
        align-items: flex-end;
        overflow: hidden;
    }

        .AnnounceView-ContactInfo-Wrapper.ShowContactInfo {
            max-height: unset;
            display: flex;
        }

        .AnnounceView-ContactInfo-Wrapper .AnnounceView-ContactInfo-Inner {
            padding: 20px 15px 100px 15px;
            background-color: white;
            border-radius: 20px 20px 0 0;
            position: relative;
            width: 100%;
        }

        .AnnounceView-ContactInfo-Wrapper p {
            position: absolute;
            bottom: 105%;
            width: 94%;
            background-color: darkred;
            color: white;
            text-align: center;
            left: 3%;
            padding: 10px;
            border-radius: 5px;
            font-size: 14px;
        }
}





.AnnounceView-prop-wrapper {
    display: flex;
    justify-content: space-between;
    /*height: 150px;*/
}

    .AnnounceView-prop-wrapper .AnnounceView-prop-name {
        text-wrap: nowrap;
        font-size: 14px;
        /* position: relative;
        padding: 0 27px 0 10px;*/
    }

        .AnnounceView-prop-wrapper .AnnounceView-prop-name i {
            font-size: 20px;
            /* position: absolute;
            right: 0;*/
        }

    .AnnounceView-prop-wrapper .AnnounceView-prop-value {
        text-align: center;
        font-size: 13px;
        color: black;
        font-weight: bold;
    }


    .AnnounceView-prop-wrapper .AnnounceView-prop-KeyValue {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 5px 0;
    }

        .AnnounceView-prop-wrapper .AnnounceView-prop-KeyValue label {
            text-align: center;
            text-wrap: nowrap;
            margin: 0 10px;
            font-size: 13px;
            color: black;
            font-weight: bold;
        }
        /*.AnnounceView-prop-wrapper .AnnounceView-prop-KeyValue label:nth-of-type(1) {
                
            }
            .AnnounceView-prop-wrapper .AnnounceView-prop-KeyValue label:nth-of-type(2) {
                font-size: 13px;
                color: black;
                font-weight: bold;
            }*/


        .AnnounceView-prop-wrapper .AnnounceView-prop-KeyValue span {
            width: -webkit-fill-available;
            border-bottom: 1px dotted #dddddd;
        }


.AnnounceView-prop-bl {
    border-left: 1px solid var(--Grey);
}

.AnnounceView-prop-bb {
    border-bottom: 1px solid var(--Grey);
}

.AnnounceView-prop-NoIR {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 85px;
}

    .AnnounceView-prop-NoIR .AnnounceView-prop-name {
        font-size: 13px;
        color: black;
        margin-bottom: 7px;
    }

    .AnnounceView-prop-NoIR .AnnounceView-prop-value {
        font-weight: bold;
        color: black;
        font-size: 15px;
    }



.AnnounceView-prop-HI {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 85px;
}

.AnnounceView-prop-HI {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 100px;
    padding: 10px 0;
}

    .AnnounceView-prop-HI i {
        color: black;
        font-size: 25px
    }

    .AnnounceView-prop-HI span {
        color: #919191;
        font-size: 12px;
        margin-bottom: 5px
    }

    .AnnounceView-prop-HI label {
        color: black;
        font-size: 17px;
        font-weight: bold;
    }

.MortageAndRentWrapper > label {
    display: flex;
    font-weight: bold;
    font-size: 15px;
    align-items: center;
}

    .MortageAndRentWrapper > label > i {
        margin-left: 6px;
        background: green;
        font-size: 15px;
        color: white;
        padding: 4px;
        border-radius: 6px;
    }

.MortageAndRentWrapper .AnnounceView-prop-HI span {
    font-size: 14px;
}

.MortageAndRentExchangeInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .MortageAndRentExchangeInfo > div {
        display: flex;
        flex-direction: column;
    }

        .MortageAndRentExchangeInfo > div:first-of-type {
            align-items: flex-start;
        }

        .MortageAndRentExchangeInfo > div:last-of-type {
            align-items: flex-end;
        }

        .MortageAndRentExchangeInfo > div > span {
            font-size: 12px;
            font-weight: bold;
            color: #0000008a;
        }




.AnnounceView-prop-wrapper .AnnounceView-prop-value span {
    text-wrap: nowrap;
    background-color: white;
    color: var(--Primary);
    border: 1px dashed var(--Primary);
    border-radius: 3px;
    display: inline-block;
    margin: 0px 3px 10px 3px;
    padding: 1px 8px;
    font-size: 13px;
}

.AnnounceView-BussinessCard {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 5px;
    /* border: 1px solid #e5e2e2; */
    box-shadow: 0px 0px 9px #00000036;
}

    .AnnounceView-BussinessCard .RightSection {
        max-width: 50%;
    }

        .AnnounceView-BussinessCard .RightSection img {
            max-width: 90px;
        }

    .AnnounceView-BussinessCard .leftSection {
        display: flex;
        width: -webkit-fill-available;
        align-items: center;
        flex-direction: column;
    }

        .AnnounceView-BussinessCard .leftSection label {
            font-size: 18px;
            font-weight: bold;
        }

        .AnnounceView-BussinessCard .leftSection span {
            font-size: 13px;
            display: flex;
            margin-top: 6px;
            align-items: center;
        }

            .AnnounceView-BussinessCard .leftSection span i {
                margin-right: 5px;
            }









.AnnounceView-Desctiption {
    padding-top: 35px;
}


    .AnnounceView-Desctiption > label {
        color: black;
        margin-bottom: 10px;
    }

    .AnnounceView-Desctiption > p {
        color: black;
        font-size: 15px
    }


.ViewWarningWrapper p {
    font-size: 14px;
    margin-bottom: 10px;
}

    .ViewWarningWrapper p:before {
        content: "";
        width: 6px;
        aspect-ratio: 1;
        display: inline-block;
        border-radius: 50%;
        background-color: var(--Primary);
        margin: 0 0 0 10px;
    }
/*#endregion View Announcement*/
/*#region PresentationCard*/
.presentationCard {
    width: 308px;
    border: 1px solid #0000001f;
    overflow: hidden;
    padding: 5px;
    margin: 10px 0;
    border-radius: 10px;
    box-shadow: inset 0 0 4px #00000033;
    position: relative;
}

    .presentationCard .PC-head {
        background-size: cover;
        background-position: center;
        height: 115px;
        min-width: 100%;
    }

    .presentationCard .PC-body {
        position: relative;
        padding: 50px 10px 10px 10px;
    }

        .presentationCard .PC-body h5 {
            text-align: center;
        }

        .presentationCard .PC-body img {
            position: absolute;
            left: 50%;
            transform: translate(-50%, -100px);
            aspect-ratio: 1 / 1;
            border-radius: 5px;
            width: 80px;
            box-shadow: 0 0 6px black;
            backdrop-filter: blur(10px);
            background-color: white;
            padding: 2px;
        }

        .presentationCard .PC-body .tag {
            border: 1px solid #0000001c;
            padding: 0 5px;
            border-radius: 5px;
            background-color: #f9f9f9;
            font-size: 12px;
        }

    .presentationCard .PC-modal {
        position: absolute;
        bottom: -100%;
        right: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(5px);
        background-color: #ffffff78;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        align-content: center;
        transition-duration: .5s;
        transition-timing-function: cubic-bezier(0.2, 1.01, 0.2, 1);
    }

        .presentationCard .PC-modal.show {
            bottom: 0 !important;
        }

        .presentationCard .PC-modal .delbtn {
            position: absolute;
            top: 5px;
            left: 5px;
            line-height: 1;
            aspect-ratio: 1;
            width: 25px;
            padding: 1px;
        }

        .presentationCard .PC-modal a, .presentationCard .PC-modal .PC-Btn {
            border: 1px solid var(--Primary);
            display: flex;
            flex-direction: column;
            width: 75px;
            align-items: center;
            justify-content: space-evenly;
            aspect-ratio: 1;
            border-radius: 5px;
            margin: 5px;
            color: black;
            transition-duration: .5s;
            cursor: pointer;
        }

            .presentationCard .PC-modal a:hover, .presentationCard .PC-modal .PC-Btn:hover {
                background: var(--Primary);
                color: var(--Secondary);
            }

            .presentationCard .PC-modal a i, .presentationCard .PC-modal .PC-Btn i {
                font-size: 30px;
            }
/*#endregion PresentationCard*/
/*#region breadCrumb*/
.breadcrumb {
    background: var(--PrimaryDark);
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: var(--ShadowLight);
    margin-top: 10px !important;
}

    .breadcrumb * {
        color: white !important;
        font-size: 10px;
    }

.breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding: 0 10px;
    color: rgb(255 255 255 / 75%);
    content: var(--bs-breadcrumb-divider, "/");
}
/*#endregion*/



.customCard .card-header {
    background-color: var(--Primary);
}

    .customCard .card-header * {
        color: white;
    }





/*#region My Announcement Cart*/

.MyAnnounceCardWrapper {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid darkgray;
}

@media only screen and (max-width: 768px) {
    .MyAnnounceCardWrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.MyAnnounceCardWrapper .MyAnnounceCard_ImageWrapper {
    width: 80px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 5px;
}

@media only screen and (max-width: 768px) {
    .MyAnnounceCardWrapper .MyAnnounceCard_ImageWrapper {
        width: 100px;
    }
}

.MyAnnounceCardWrapper .MyAnnounceCard_ImageWrapper img {
    width: 100%;
    height: 100%;
    image-rendering: -webkit-optimize-contrast;
    object-fit: cover;
}


.MyAnnounceCardWrapper .MyAnnounceCard_InfoWrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: -webkit-fill-available;
    justify-content: space-between;
}

    .MyAnnounceCardWrapper .MyAnnounceCard_InfoWrapper .MyAnnounceCard_InfoRight {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        height: 100%;
        padding-right: 10px;
    }

    .MyAnnounceCardWrapper .MyAnnounceCard_InfoWrapper .MyAnnounceCard_InfoLeft {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        height: 100%;
    }

@media only screen and (max-width: 768px) {
    .MyAnnounceCardWrapper .MyAnnounceCard_InfoWrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .MyAnnounceCardWrapper .MyAnnounceCard_InfoWrapper label {
            margin: 5px 0;
        }

        .MyAnnounceCardWrapper .MyAnnounceCard_InfoWrapper .MyAnnounceCard_InfoRight {
            display: flex;
            align-items: center;
        }

        .MyAnnounceCardWrapper .MyAnnounceCard_InfoWrapper .MyAnnounceCard_InfoLeft {
            display: flex;
            align-items: center;
        }
}

/*#endregion*/




.AnounceBoostCard {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 1.5px solid #c1c1c1;
    margin: 12px 0;
    border-radius: 3px;
    transition-duration: .3s;
    cursor: pointer;
}

    .AnounceBoostCard * {
        cursor: pointer;
    }

    .AnounceBoostCard .AnounceBoostCheckboxWrapper {
        padding: 0px 18px;
    }

    .AnounceBoostCard .AnounceBoostInfoWrapper {
        padding: 15px 10px;
        border-right: 1px solid #c1c1c1;
        width: -webkit-fill-available;
        transition-duration: .3s;
    }


    .AnounceBoostCard.Selected {
        border: 1.5px solid var(--Primary);
        box-shadow: var(--ShadowLight);
    }

        .AnounceBoostCard.Selected .AnounceBoostInfoWrapper {
            border-right: 1px solid var(--Primary);
        }



    .AnounceBoostCard .AnounceBoostInfoWrapper .AnounceBoostInfoTop {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }

        .AnounceBoostCard .AnounceBoostInfoWrapper .AnounceBoostInfoTop label {
            font-size: 16px;
            font-weight: bold;
            color: black;
        }

        .AnounceBoostCard .AnounceBoostInfoWrapper .AnounceBoostInfoTop span {
            color: var(--Primary);
            font-size: 14px;
            font-weight: bold;
        }

    .AnounceBoostCard .AnounceBoostInfoWrapper .AnounceBoostInfoBot p {
        color: #606060;
        font-size: 13px;
    }



.BoostTempFactor {
    display: flex;
    margin: 12px 0;
    padding: 10px;
    box-shadow: var(--ShadowLight);
    border-radius: 3px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .BoostTempFactor i {
        display: inline-flex;
        padding: 12px;
        font-size: 34px;
        background-color: var(--Primary);
        color: white;
        border-radius: 50%;
        margin: 5px 0 15px 0;
    }

    .BoostTempFactor p {
        font-size: 11px;
        text-align: center;
        margin: 15px 0;
    }

    .BoostTempFactor button {
        width: 90%;
        margin-top: 15px;
    }










/*#region SelectCityModal*/

.user-Selectcity-Modal {
    width: 100vw;
    height: 100dvh;
    position: fixed;
    top: 0;
    z-index: 1500;
    background-color: rgba(0, 0, 0, .3);
    backdrop-filter: blur(2px);
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center;
}

    .user-Selectcity-Modal .user-Selectcity-Modal-inner {
        height: 560px;
        width: 490px;
        background-color: white;
        padding: 0 25px;
        border-radius: 5px;
    }



        .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-Header {
            padding: 20px 0 10px 0;
            border-bottom: 1px solid silver;
        }



            .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-Header .Selectcity-Modal-Header-title {
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
            }

                .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-Header .Selectcity-Modal-Header-title label {
                    font-size: 17px;
                    font-weight: bold;
                }






            .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-Header .Selectcity-Modal-Header-SearchControl {
                margin-top: 15px;
            }

                .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-Header .Selectcity-Modal-Header-SearchControl .Selectcity-Modal-Header-SelectedCity {
                    display: flex;
                    flex-wrap: nowrap;
                    align-items: center;
                    justify-content: flex-start;
                    overflow-x: auto;
                }

                    .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-Header .Selectcity-Modal-Header-SearchControl .Selectcity-Modal-Header-SelectedCity::-webkit-scrollbar {
                        display: none;
                    }




                    .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-Header .Selectcity-Modal-Header-SearchControl .Selectcity-Modal-Header-SelectedCity span {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        border: 1px solid var(--PrimaryDark);
                        color: var(--PrimaryDark);
                        border-radius: 50px;
                        margin: 3px;
                        font-size: 13px;
                        padding: 2px 6px;
                        text-wrap: nowrap;
                        user-select: none;
                    }

                        .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-Header .Selectcity-Modal-Header-SearchControl .Selectcity-Modal-Header-SelectedCity span i {
                            margin-right: 5px;
                            font-size: 15px;
                            cursor: pointer;
                        }


                    .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-Header .Selectcity-Modal-Header-SearchControl .Selectcity-Modal-Header-SelectedCity p {
                        font-size: 12px;
                        margin: 0;
                        height: 31px;
                    }










        .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-body {
            height: calc(100% - 220px);
            overflow-y: auto;
        }

            .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-body li {
                border-bottom: 1px solid #e8e3e3;
            }

                .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-body li * {
                    cursor: pointer;
                }

                .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-body li label {
                    font-size: 12px;
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: -webkit-fill-available;
                    padding: 12px;
                }

                .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-body li i {
                    font-size: 12px;
                }

            .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-body .Selectcity-StateList {
            }




            .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-body .Selectcity-CityList {
                display: none;
            }

                .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-body .Selectcity-CityList li:first-of-type i {
                    font-size: 15px;
                }




        .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-footer {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding: 10px 0;
            border-top: 1px solid silver;
        }

            .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-footer button {
                width: 48%
            }



@media only screen and (max-width: 768px) {
    .user-Selectcity-Modal .user-Selectcity-Modal-inner {
        height: 100dvh;
        width: 100%;
        padding: 0 25px 60px 25px;
    }

        .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-Header .Selectcity-Modal-Header-title {
            display: none;
        }

        .user-Selectcity-Modal .user-Selectcity-Modal-inner .user-Selectcity-Modal-body {
            height: calc(100% - 190px);
            overflow-y: auto;
        }
}


/*#endregion SelectCityModal*/

/*#region business*/
.BusinessBanner {
    position: relative;
    margin-bottom: 75px;
}

    .BusinessBanner .statistic {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
    }

    .BusinessBanner .bannerContainer {
        height: 250px;
        position: relative;
        overflow: hidden;
        box-shadow: var(--ShadowUltraLight);
        border-radius: 5px;
        background-position: center;
        background-size: cover;
    }

        .BusinessBanner .bannerContainer img {
            width: 100%;
            position: absolute;
            bottom: 0;
        }

    .BusinessBanner .info {
        width: 350px;
        height: 125px;
        position: absolute;
        bottom: -50px;
        backdrop-filter: blur(8px);
        display: flex;
        flex-direction: row;
        right: 50%;
        transform: translateX(50%);
        padding: 25px 5px 5px 5px;
        border-radius: 4px;
        box-shadow: var(--ShadowUltraLight);
        background-color: #ffffffb3;
    }

        .BusinessBanner .info h1 {
            color: black;
        }

        .BusinessBanner .info .logo {
            width: 95px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

            .BusinessBanner .info .logo img {
                max-width: 100%;
                max-height: 100%;
            }

#businessDate {
    position: absolute;
    top: 0;
    left: 5px;
    color: black;
    font-size: 11px;
    font-weight: bold;
}

#businessLocation {
    position: absolute;
    top: 0;
    font-size: 11px;
    color: black;
    font-weight: bold;
}

#buisenesspopulation {
    position: absolute;
    bottom: 0;
    left: 5px;
    font-size: 10px;
}

.BusinessBanner .info div:not(.logo) {
    padding: 0 5px;
    width: calc(100% - 95px);
    width: 100%;
    overflow: hidden;
    max-height: 60px;
}

.BusinessBanner .info .fieldOfActivity {
    width: 100%;
    max-height: 60px;
    overflow-y: auto;
}

    .BusinessBanner .info .fieldOfActivity span {
        font-size: 10px;
        font-weight: bold;
        border-left: 1px solid #0000002e;
        padding-left: 5px;
        color: #000000bf;
    }

        .BusinessBanner .info .fieldOfActivity span:last-child {
            border: unset;
        }

.businessDesc {
    display: flex;
}

.businessDescFile {
    position: relative;
    border: 1px solid #00000038;
    box-shadow: var(--ShadowUltraLight);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00000038;
}

    .businessDescFile div {
        width: 100%;
    }

    .businessDescFile .filedescText {
        position: absolute;
        bottom: 0;
        background-color: #0000004f;
        backdrop-filter: blur(8px);
        width: 100%;
        color: white;
        padding: 10px;
        font-size: 13px;
    }

    .businessDescFile:hover .filedescText {
        display: none;
    }
/*#endregion*/
/*#region customNav*/
.customTabContainer {
    display: flex;
}

.businessDescText {
    padding: 10px;
}

    .businessDescText p {
        font-size: 13px;
    }

.customTab {
    margin: 5px 10px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

    .customTab.active {
        border-bottom: 1px solid var(--Primary);
        color: var(--Primary);
    }

.customTabcontent {
    padding: 20px;
    box-shadow: var(--ShadowUltraLight);
    border-radius: 5px;
}
/*#endregion*/
/*#region BusinessCard*/
.businessCardShowcase div:not(.logo) {
    padding: 0 5px;
    width: calc(100% - 95px);
    width: 100%;
    overflow: hidden;
    max-height: 60px;
}

.businessCardShowcase .fieldOfActivity {
    width: 100%;
    max-height: 60px;
    overflow-y: auto;
}

    .businessCardShowcase .fieldOfActivity span {
        font-size: 10px;
        font-weight: bold;
        border-left: 1px solid #0000002e;
        padding-left: 5px;
    }

        .businessCardShowcase .fieldOfActivity span:last-child {
            border: unset;
        }

.businessCardShowcase {
    height: 90px;
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: row;
    padding: 25px 5px 5px 5px;
    border-radius: 4px;
    box-shadow: var(--ShadowUltraLight);
    background-color: #ffffff54;
    margin: 10px;
}

    .businessCardShowcase h1 {
        color: black;
    }

    .businessCardShowcase .logo {
        width: 45px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

        .businessCardShowcase .logo img {
            max-width: 100%;
            max-height: 100%;
        }

    .businessCardShowcase .businessLocation {
        position: absolute;
        top: 2px;
        display: block;
        font-size: 11px;
        opacity: .7;
        font-weight: bold;
    }

.showCaseContainer {
    overflow-x: auto;
}

    .showCaseContainer::-webkit-scrollbar {
        display: none;
    }
/*#endregion*/
/*#region sidebarFilter*/
.sideBarFilter {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    box-shadow: var(--ShadowUltraLight);
    overflow: hidden;
    position: sticky;
    top: 75px;
}

    .sideBarFilter .sideHeader {
        border-bottom: 1px solid var(--Primary);
        background-color: var(--Primary);
        padding: 5px 10px;
        color: white;
        font-size: 17px;
    }

    .sideBarFilter .sideBody {
        display: flex;
        flex-direction: column;
        padding: 5px 10px;
    }

        .sideBarFilter .sideBody a {
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid #00000017;
            padding: 3px 0;
            position: relative;
        }

            .sideBarFilter .sideBody a:before {
                content: '';
                position: absolute;
                width: 0px;
                height: 2px;
                background-color: var(--Primary);
                bottom: -2px;
                right: 50%;
                transform: translateX(50%);
                transition-duration: .3s;
            }

            .sideBarFilter .sideBody a:hover:before {
                width: 100%;
            }

            .sideBarFilter .sideBody a span {
                background-color: #d9d9d9;
                padding: 0 4px;
                font-size: 12px;
                display: flex;
                align-items: center;
                border-radius: 3px;
            }
/*#endregion*/
.cvRequestCard {
    box-shadow: var(--Shadow);
    width: 300px;
    overflow: hidden;
    border: 1px solid var(--Primary);
}

    .cvRequestCard .cvRImage {
        background-size: cover;
        background-position: center;
        width: 50px;
        height: 50px;
        border-radius: 0 3px 0 3px;
    }





.accordion-button:not(.collapsed) {
    color: var(--SecondaryLight);
    background-color: var(--PrimaryDark);
}

    .accordion-button:not(.collapsed)::after {
        background-image: var(--SecondaryLight);
        transform: var(--bs-accordion-btn-icon-transform);
        color: var(--SecondaryLight);
    }

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button {
    justify-content: space-between;
}

    .accordion-button::after {
        display: none;
    }

    .accordion-button i {
        flex-shrink: 0;
        font-size: 20px;
        margin-left: 0;
        transition: var(--bs-accordion-btn-icon-transition);
    }

    .accordion-button:not(.collapsed) i {
        transform: var(--bs-accordion-btn-icon-transform);
    }

.cvRecord {
    width: 100%;
    display: flex;
    position: relative;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .cvRecord .cvRecordImage {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        margin: auto;
    }

    .cvRecord span {
        padding: 0 5px;
        border: 1px solid gray;
        border-radius: 3px;
        font-size: 12px;
        font-weight: bold;
        color: gray;
    }

    .cvRecord .cvSummary {
        position: absolute;
        top: 0;
        left: 0;
    }

.cvRecordInfo {
    width: calc(100% - 138px);
}

.cvRecordProfile {
    width: 70px;
    margin-left: .5rem;
}

.cvRecordbuttons {
    width: 60px;
}

@media (max-width: 576px) {
    .cvRecordInfo {
        width: 100%;
    }

    .cvRecordProfile {
        width: 100%;
        margin-left: 0;
    }

    .cvRecordbuttons {
        width: 100%;
    }
}









.RecentViewsWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #d7d7d7;
}


    .RecentViewsWrapper .RecentViews-image {
        width: 115px;
        aspect-ratio: 1;
        overflow: hidden;
        border: 1px solid var(--SecondaryLight);
        box-shadow: var(--ShadowLight);
        border-radius: 5px;
    }

        .RecentViewsWrapper .RecentViews-image img {
            width: 100%;
            height: 100%;
            image-rendering: -webkit-optimize-contrast;
            object-fit: cover;
        }



    .RecentViewsWrapper .RecentViews-info {
        width: -webkit-fill-available;
        min-height: 100px;
        display: flex;
        justify-content: space-between;
        padding: 5px 15px;
    }

        .RecentViewsWrapper .RecentViews-info .RecentViews-info-right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

            .RecentViewsWrapper .RecentViews-info .RecentViews-info-right label {
                font-weight: bold;
                font-size: 14px;
            }

            .RecentViewsWrapper .RecentViews-info .RecentViews-info-right .RecentViews-boost-icon {
                display: flex;
                justify-content: flex-start;
                flex-direction: row;
            }

                .RecentViewsWrapper .RecentViews-info .RecentViews-info-right .RecentViews-boost-icon i {
                    margin: 0 5px;
                    padding: 2px 5px;
                    border: 1px solid var(--PrimaryLight);
                    border-radius: 3px;
                }

            .RecentViewsWrapper .RecentViews-info .RecentViews-info-right span {
                font-size: 11px;
                padding: 3px 5px;
                background-color: var(--Primary);
                color: white;
                border-radius: 5px;
            }




        .RecentViewsWrapper .RecentViews-info .RecentViews-info-left {
        }

            .RecentViewsWrapper .RecentViews-info .RecentViews-info-left label {
                font-size: 10px;
            }




@media only screen and (max-width: 768px) {
    .RecentViewsWrapper .RecentViews-image {
        width: 160px;
    }

    .RecentViewsWrapper .RecentViews-info {
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        min-height: 110px;
    }

        .RecentViewsWrapper .RecentViews-info .RecentViews-info-right {
            align-items: center;
        }

            .RecentViewsWrapper .RecentViews-info .RecentViews-info-right label {
                margin-bottom: 8px;
            }

            .RecentViewsWrapper .RecentViews-info .RecentViews-info-right .RecentViews-boost-icon {
                margin-bottom: 8px;
            }

        .RecentViewsWrapper .RecentViews-info .RecentViews-info-left label {
            margin-top: 20px;
        }
}

.ml-0 {
    margin-left: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.br-r-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.br-l-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.chatNewCounter, .eelan {
    position: absolute;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 50%;
    background-color: #c000ff;
    box-shadow: inset 0 0 4px 1px #562ba8;
    color: white;
    top: 0;
    right: 0;
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.squareImage {
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.glowBorder {
    border: 1px solid var(--Primary);
    box-shadow: 0 0 6px var(--Primary)
}

.rounded-bottom-left-1 {
    border-bottom-left-radius: .25rem;
}

.rounded-bottom-right-1 {
    border-bottom-right-radius: .25rem;
}

.rounded-top-left-1 {
    border-top-left-radius: .25rem;
}

.rounded-top-right-1 {
    border-top-right-radius: .25rem;
}