.background-default {
    /*background: url("../Style/Img/bg.webp") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
}
.background-page {
    background: var(--bs-page-bg) !important;
    color: var(--bs-body-color);
}
select { resize: auto; }
.d-flex li{
    list-style: none;
}


.loader_msg {
    max-width: 120px;
    position: relative;
    border-style: solid;
    box-sizing: border-box;
    border-width: 40px 60px 30px 60px;
    border-color: var(--bs-primary-bg) var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-secondary-bg);
    animation: envFloating 1s ease-in infinite alternate;
}

.loader_msg:after {
    content: "";
    position: absolute;
    right: 62px;
    top: -40px;
    height: 70px;
    width: 50px;
    background-image: linear-gradient(var(--bs-body-color) 45px, transparent 0),
    linear-gradient(var(--bs-body-color) 45px, transparent 0),
    linear-gradient(var(--bs-body-color) 45px, transparent 0);
    background-repeat: no-repeat;
    background-size: 30px 4px;
    background-position: 0 11px , 8px 35px, 0 60px;
    animation: envDropping 0.75s linear infinite;
}

@keyframes envFloating {
    0% {
        transform: translate(-2px, -5px)
    }

    100% {
        transform: translate(0, 5px)
    }
}

@keyframes envDropping {
    0% {
        background-position: 100px 11px , 115px 35px, 105px 60px;
        opacity: 1;
    }

    50% {
        background-position: 0 11px , 20px 35px, 5px 60px;
    }

    60% {
        background-position: -30px 11px , 0 35px, -10px 60px;
    }

    75%, 100% {
        background-position: -30px 11px , -30px 35px, -30px 60px;
        opacity: 0;
    }
}


.card_qr {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #f5f5f5;
    position: relative;
    padding: 1.8rem;
    border: 2px solid #c3c6ce;
    transition: 0.5s ease-out;
    overflow: visible;
}

.card-details {
    color: black;
    height: 100%;
    gap: .5em;
    display: grid;
    place-content: center;
}

.card-button {
    transform: translate(-50%, 125%);
    width: 60%;
    border-radius: 1rem;
    border: none;
    background-color: var(--bs-primary-bg);
    color: var(--bs-primary-text);
    font-size: 1rem;
    padding: .5rem 1rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    opacity: 0;
    transition: 0.3s ease-out;
}
.card-button:hover {
    color: var(--bs-primary-text)  ;
}
.text-body {
    color: rgb(134, 134, 134);
}

/*Text*/
.text-title {
    font-size: 1.5em;
    font-weight: bold;
}

/*Hover*/
.card_qr:hover {
    border-color:  var(--bs-primary-bg);
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.card_qr:hover .card-button {
    transform: translate(-50%, 50%);
    opacity: 1;
}


select { resize: auto; }
.d-flex li{
    list-style: none;
}
.img-contain{
    object-fit: contain !important;
}
.img-cover{
    object-fit: cover !important;
}
.img-scale-down{
    object-fit: scale-down !important;
}
.img-fill{
    object-fit: fill !important;
}
.pull-right{
    float: right !important;
}
.pull-left{
    float: left !important;
}
.dropdown-menu-right {
    right: 0;
    left: auto;
}
.height-auto{
    height: auto !important;
}

.img-contain{
    object-fit: contain !important;
}
.img-cover{
    object-fit: cover !important;
}
.img-scale-down{
    object-fit: scale-down !important;
}
.img-fill{
    object-fit: fill !important;
}
.pull-right{
    float: right !important;
}
.pull-left{
    float: left !important;
}
.dropdown-menu-right {
    right: 0;
    left: auto;
}
.pagination li{
    padding: 0!important;

}
.height-auto{
    height: auto !important;
}
.emojionearea .emojionearea-editor {
    height: auto !important;
    max-height: fit-content !important;

}
/*region Inputs*/

.input-group .form-floating{
    width: 100%;
}
.input-group .form-floating .form-control{
    padding-right: 55px;
}
.input-group .input-group-btn{
    position: absolute;
    right: 5px;
    top:10px;
}
.input-group-btn .btn{
    height: 100%;
}
/*endregion*/

/*region Send Button*/
.btn-send {
    font-family: inherit;
    background: royalblue;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: inline-flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
}

.btn-send span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
}

.btn-send svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
}

.btn-send:hover .svg-wrapper {
    animation: fly-1 0.6s ease-in-out infinite alternate;
}

.btn-send:hover svg {
    transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

.btn-send:hover span {
    transform: translateX(5em);
}

.btn-send:active {
    transform: scale(0.95);
}

@keyframes fly-1 {
    from {
        transform: translateY(0.1em);
    }

    to {
        transform: translateY(-0.1em);
    }
}


/*endregion*/

.chat-list li a {
    padding: 5px 10px !important;
}

.nav.nav-pills .nav-link.active {
    color: var(--bs-primary-text);
    background-color: var(--bs-primary);
}
.nav-item .nav-link,.nav-link.active,.nav-item .nav-link.active
{
    color: var(--bs-primary);
}
.nav.nav-pills .nav-link:hover, .nav.nav-pills .nav-link:focus{
    color: var(--bs-primary-text);
}

.side-menu-nav .nav-item {
     margin: 0 !important;
}
.center-body-vertical{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex !important;
    align-items: center ;
    justify-content: center !important;
}

.center-body{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center !important;
    justify-content: center !important;
}
.center-body2{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: center !important;
}
@media only screen and (max-height: 400px) {
    .center-body{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        align-items: normal !important;
        justify-content: center !important;
    }

}
@media only screen and (max-height: 300px) {
    .center-body2{
        display: unset;
        justify-content: unset !important;
    }
}

.top-overlay {
    position: absolute;
    display: none;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

/*region BTN*/

.btn-app-special {
    border-radius: 10px; !important;
    margin:  5px !important;
    padding: 5px !important;
}

.btn-app-mini {
    border-radius: 3px;
    border: 1px solid var(--bs-primary-bg);
    font-size: 7pt !important;
    height: 60px ;
    margin: 0 0 5px 5px ;
    min-width: 50px !important;
    padding: 5px 2px;
    position: relative;
    text-align: center;
}

.btn-app {
    border-radius: 3px;
    border: 1px solid var(--bs-primary-bg);
    font-size: 9pt !important;
    height: 65px;
    margin: 0 0 10px 10px;
    min-width: 80px;
    padding: 15px 5px;
    position: relative;
    text-align: center;
    text-wrap: inherit;
    word-wrap: break-word;
    word-break: break-all;
}
.btn{
    text-wrap: inherit;
    word-wrap: break-word;
    word-break: break-all;
}


.btn-app-mini > .fa,
.btn-app-mini > .fas,
.btn-app-mini > .far,
.btn-app-mini > .fab,
.btn-app-mini > .fal,
.btn-app-mini > .fad,
.btn-app-mini> .svg-inline--fa,
.btn-app-mini > .ion {
    display: block;
    font-size: 15px;
}
.btn-app > .icon {
    display:block;
    text-align: center;
    width: 100%;
    height: 20px;
}
.icon20 {
    width: 20px;
    height: 20px;
}
.btn-app > .fa,
.btn-app > .fas,
.btn-app > .far,
.btn-app > .fab,
.btn-app > .fal,
.btn-app > .fad,
.btn-app > .svg-inline--fa,
.btn-app > .ion {
    display: block;
    font-size: 20px;
}

.btn-app > .svg-inline--fa {
    margin: 0 auto;
}
.btn{
    text-wrap: inherit;
    word-wrap: break-word;
    word-break: break-all;
}

.btn-app:hover {
    background-color: #f8f9fa;
    border-color: #aaaaaa;
    color: #444;
}

.btn-app:active, .btn-app:focus {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-app > .badge {
    font-size: 10px;
    font-weight: 400;
    position: absolute;
    right: -10px;
    top: -3px;
}

/*endregion*/


/*region Upload*/
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.Bold-Upload {
    opacity: 0;
}

.Bold-Upload-Label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.image-area {
    border: 2px dashed rgba(255, 255, 255, 0.7);
    padding: 1rem;
    position: relative;
}

.image-area::before {
    content: '';
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    z-index: 1;
}

.image-area img {
    z-index: 2;
    position: relative;
}
/*endregion*/

/*region Location Loader*/
.location_loader {
    width: 44.8px;
    height: 44.8px;
    position: relative;
    transform: rotate(45deg);
}

.location_loader:before,
.location_loader:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50% 50% 0 50%;
    background: #0000;
    background-image: radial-gradient(circle 11.2px at 50% 50%,#0000 94%, #ff4747);
}

.location_loader:after {
    animation: pulse-ytk0dhmd 1s infinite;
    transform: perspective(336px) translateZ(0px);
}

@keyframes pulse-ytk0dhmd {
    to {
        transform: perspective(336px) translateZ(168px);
        opacity: 0;
    }
}


/*endregion*/

/*region Flip Card*/
.flip-card {
    background-color: transparent;
    min-width: 245px;
    min-height: 270px;
    perspective: 1000px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 5px;
    border-radius: 2em;
    backface-visibility: hidden;
}

.flip-card-front {

}

.profile-image {
    background-color: transparent;
    border: none;
    margin-top: 15px;
    border-radius: 5em;
    width: 120px;
    height: 120px;
    margin-left: 50px;
}

.pfp {
    border-radius: 35em;
    fill: #c143da;
}

.name {
    margin-top: 15px;
    font-size: 27px;
    color: #c143da;
    font-weight: bold;
}

.flip-card-back {

}

.description {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: 1px;
    color: white
}

.socialbar {
    background-color: transparent;
    border-radius: 3em;
    width: 90%;
    padding: 14px;
    margin-top: 11px;
    margin-left: 10px;
    word-spacing: 24px;
    color: white;
}

.socialbar svg {
    transition: 0.4s;
    width: 20px;
    height: 20px;
    color: #c143da
}

.socialbar svg:hover {
    color: white;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/*endregion*/

/*region User Card*/
.user-card {
    width: 100%;
    border-radius: 2em;
    padding: 10px;
    background-color: #191919;
    box-shadow: 5px 5px 30px rgb(4, 4, 4),
    -5px -5px 30px rgb(57, 57, 57);
}

.profileimage {
    background-color: transparent;
    border: none;
    margin-top: 20px;
    border-radius: 5em;
    width: 100px;
    height: 100px;
}

.pfp {
    border-radius: 35em;
    fill: white;
}

.user-card .Name {
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 15px;
    font-size: 20px;
    margin-top: 10px;
}

.user-card a {
    transition: 0.4s;
    color: white
}

/*endregion*/

/*region Multiple Select*/

.multi-select-container {
    display: inline-block;
    position: relative;
}

.multi-select-menu {
    z-index: 9;
    position: absolute;
    left: 0;
    top: 0.8em;
    float: left;
    min-width: 100%;
    background: #fff;
    margin: 1em 0;
    padding: 0.4em 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: none;
}

.multi-select-menu input {
    margin-right: 0.3em;
    vertical-align: 0.1em;
}


.multi-select-button {
    display: inline-block;
    font-size: 0.875em;
    padding: 0.2em 0.6em;
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: -0.5em;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: default;
}

.multi-select-button:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.4em 0.4em 0 0.4em;
    border-color: #999 transparent transparent transparent;
    margin-left: 0.4em;
    vertical-align: 0.1em;
}

.multi-select-container--open .multi-select-menu { display: block; }

.multi-select-container--open .multi-select-button:after {
    border-width: 0 0.4em 0.4em 0.4em;
    border-color: transparent transparent #999 transparent;
}
/*endregion*/

/*region Card*/
.profile-card {
    max-width: 100%;
    padding: 1rem;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #999999;
    box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
}

.profile-card .title {
    font-weight: 600;
    color: rgb(31 41 55);
}

.profile-card .description {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(75 85 99);
}


.profile-card .description a:hover {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
}

.profile-card .actions {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 0.5rem;
    flex-shrink: 0;
}


/*region Blink*/
.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite; /* For older browsers */
}

@keyframes blink-animation {
    to { visibility: hidden; }
}

@-webkit-keyframes blink-animation {
    to { visibility: hidden; }
}
/*endregion*/

.profile-card .btn {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    margin: 0.5em;
    border-radius: 0.5em;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
}


.profile-card .btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}


.social-card {
    display: flex;
    flex-direction: column;
    max-height: 330px;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0px 10px 12px rgba(0, 0, 0, 0.08),
    -4px -4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
    box-sizing: border-box;
    padding: 10px;
}

.social-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1),
    -4px -4px 12px rgba(0, 0, 0, 0.08);
}

.card-image-container {
    width: 100%;
    padding-bottom: 12px;
    object-fit: scale-down;
    overflow: hidden;
    background-color: rgb(165, 165, 165);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-icon {
    font-size: 40px;
}

.social-card-title {
    margin: 0;
    font-size: 17px;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    font-weight: 600;
    color: #1797b8;
    cursor: default;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.social-card-des {
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin: 0;
    font-size: 13px;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    color: #1797b8;
    cursor: default;
}

/*endregion*/

/*region Chat Card*/
.chat-header{
    font-weight: bolder;
    font-size: 120%;
}
.chat-body{
    margin-bottom: 1em;
}
.chat-footer{
    font-weight: bold;
    font-size: 80%;
    border-top: 1px solid;
}

.chat-conversation .conversation-list .ctext-wrap-content:before, .chat-preview .conversation-list .ctext-wrap-content:before{
    bottom: -8px !important;
}
/*endregion*/

/*region Splash*/
.splash{
    cursor : pointer;
    position : fixed;
    z-index: 9999999;
    top : 50%;
    left : 50%;
    height : 100%;
    width : 100%;
    transform : translate(-50%,-50%);
    transition : all ease-in-out 600ms;
}
.hidden{
    transition : 0.5s;
    display : none;
}
.splash-header {
    height : 90%;
    font-family : consolas;
    font-size : 30px;
    display : flex;
    padding: 2rem;
    text-align: center;
    justify-content: center;
    align-items : center;
}
/*endregion*/

/*region Login*/
.pop-sign-form{
    width: 350px;
    border-radius: .25rem;
}
@media (max-width:400px) {
    .pop-sign-form {
        width: 100%;
        margin: 1em;
    }
}
/*endregion*/


.modal-header {
    border-bottom: 0 solid;
}

.no-footer .modal-body {
    bottom: 0 !important;
    border-radius: 0;
}


.wrap-text{
    white-space: normal !important;
    word-wrap: break-word !important;
}

/*region Timeline*/
/* The actual timeline (the vertical ruler) */
.timelineX {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timelineX::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top: 0;
    bottom: 0;
    /*left: 50%;*/
    margin-left: -3px;
}

/* Container around content */
.timelineX-container {
    padding: 10px 20px;
    position: relative;
    background-color: inherit;
    width: 100%;
}

/* The circles on the timeline */
.timelineX-container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #FF9F55;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

/* Place the container to the left */
.timelineX-left {
    left: 0;
}

/* Place the container to the right */
.timelineX-right {
    left: 50%;
}

/* Add arrows to the left container (pointing right) */
.timelineX-left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.timelineX-right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.timelineX-right::after {
    left: -16px;
}

/* The actual content */
.timeline-contentX {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .timelineX::after {
        left: 31px;
    }

    /* Full-width containers */
    .timelineX-container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .timelineX-container::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    /* Make sure all circles are at the same spot */
    .timelineX-left::after, .timelineX-right::after {
        left: 15px;
    }

    /* Make all right containers behave like the left ones */
    .timelineX-right {
        left: 0%;
    }
}
/*endregion*/

/*region Ribbon*/
.ribbon-1 {
    position: fixed;
    background: #08769b;
    box-shadow: 0 0 0 999px #08769b;
    clip-path: inset(0 -100%);
}
.ribbon-left {
    inset: 0 auto auto 0;
    transform-origin: 100% 0;
    transform: translate(-29.3%) rotate(-45deg);
}
.ribbon-right {
    inset: 0 0 auto auto;
    transform-origin: 0 0;
    transform: translate(29.3%) rotate(45deg);
}

.ribbon-2 {
    --f: 5px; /* control the folded part*/
    --r: 10px; /* control the ribbon shape */
    --t: 5px; /* the top offset */

    position: absolute;
    inset: var(--t) calc(-1*var(--f)) auto auto;
    padding: 0 5px var(--f) calc(5px + var(--r));
    clip-path:
            polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
            calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
            var(--r) calc(50% - var(--f)/2));
    background: #BD1550;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
    font-size: 8pt;
}


.box {
    position:relative;
}
/*endregion*/

.high-priority{
    z-index: 99999 !important;
}
.high-priority-l2{
    z-index: 999992 !important;
}
.high-priority-l3{
    z-index: 999993 !important;
}
.high-priority-l4{
    z-index: 999994 !important;
}
.high-priority-l5{
    z-index: 999995 !important;
}
.high-priority-l9{
    z-index: 999998 !important;
}
.center-panel{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: center;
}
iframe{
    border-style: none;
    width: 100%;
    height: 100%;
}
.center-full{

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

.list_grid {
    display: grid;
    padding: 0 !important;
    grid-template-columns:1fr 1fr 1fr 1fr ;
    list-style-type: none;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 600px) {
    .list_grid {
        grid-template-columns:1fr 1fr
    }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
    .list_grid {
        grid-template-columns:1fr 1fr
    }
}
@media screen and (min-width: 1400px) {
    .list_grid {
        grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr
    }
}

.list::-webkit-scrollbar {
    display: none
}

.list_grid .item_body {
    width: 100%;
    margin: .5em;

}

.item {
    flex-shrink: 0;
    text-align: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;

}

.item:last-child {
    position: relative
}

.item:last-child::after {
    position: absolute;
    left: 100%;
    height: 1px;
    width: 20px;
    display: block;
    content: ""
}

.list {
    list-style: none;

    padding: 10px;
    border-radius: 12px
}

.item_body  span{
    font-size: 6pt;
}

.itemspecial_body{
    position: relative;
    height: 100px;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    padding: 0;

}
.itemspecial_body span {
    position: absolute;
    bottom: 0;
    background: #fff;
    color: #000;
    width: 100%;
    padding: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center
}
.itemspecial_body img {
    position: absolute;

}
.item_body {
    position: relative;
    display: flex;
    height: 100px;
    width: 85px;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    padding: 0;
    font-size: 6pt;
}

.list .item:not(:last-child) {
    margin-right: 10px
}

.item a {
    text-align: center
}

.item span {
    position: absolute;
    bottom: 0;
    background: #fff;
    color: #000;
    width: 100%;
    padding: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center
}

.viewport {
    max-width: 100%;
    width: calc(100% - 20px);
    margin-left: 5px;
    margin-right: 5px
}
.no-wrap {
    white-space: nowrap;
    overflow: hidden; /* Optionally hide overflow */
    text-overflow: ellipsis; /* Optionally add ellipsis if overflowed */
}
.quantity {
    display: inline-block;
    border-radius: .5em;
    border: 1px solid
}

.quantity .input-text.qty {
    width: 60px;
    height: 39px;
    padding: 0 5px;
    text-align: center;
    background-color: transparent;
    border: 0 solid #efefef
}

.quantity.buttons_added {
    text-align: left;
    position: relative;
    white-space: nowrap;
    vertical-align: top
}

.quantity.buttons_added input {
    display: inline-block;
    margin: 0;
    vertical-align: top;
    box-shadow: none
}

.quantity.buttons_added .minus, .quantity.buttons_added .plus {
    padding: 7px 10px 8px;
    height: 41px;
    background-color: #fff;
    border: 0 solid #efefef;
    border-radius: .5em;
    cursor: pointer
}

.quantity.buttons_added .minus {
    border-right: 0
}

.quantity.buttons_added .plus {
    border-left: 0
}

.quantity.buttons_added .minus:hover, .quantity.buttons_added .plus:hover {
    background: #eee
}

.quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0
}

.quantity.buttons_added .minus:focus, .quantity.buttons_added .plus:focus {
    outline: none
}

.product__images {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.product__main-image {
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    cursor: pointer
}

.product__slider-wrap {
    max-width: 500px;
    min-height: 100px;
    display: flex;
    align-items: center
}

.product__slider {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto
}

.product__image {
    max-width: 180px;
    max-height: 100px;
    object-fit: cover;
    cursor: pointer;
    opacity: .5;
    margin: .25rem;
    border: 1px solid #070707
}

.product__image:first-child {
    margin-left: 0
}

.product__image:last-child {
    margin-right: 0
}

.product__image:hover {
    opacity: 1
}

.product__image--active {
    opacity: 1
}

.product__slider::-webkit-scrollbar {
    height: 10px
}

.product__slider::-webkit-scrollbar-thumb {
    background-color: #f9564f;
    border-radius: 50px
}

.emojionearea,.emoji-picker-container{
    height: 100% !important;
}

    /*region Spinner*/

.spinner {
    background-image: linear-gradient(var(--bs-primary) 35%,var(--bs-secondary));
    width: 100px;
    height: 100px;
    animation: spinning82341 1.7s linear infinite;
    text-align: center;
    border-radius: 50px;
    filter: blur(1px);
    box-shadow: 0 -5px 20px 0 var(--bs-primary), 0 5px 20px 0 var(--bs-secondary);
}

.spinner1 {
    background-color: rgb(36, 36, 36);
    width: 100px;
    height: 100px;
    border-radius: 50px;
    filter: blur(10px);
}

@keyframes spinning82341 {
    to {
        transform: rotate(360deg);
    }
}
/*endregion*/

/*region fly loader*/
.fly_loader {
    position: absolute;
    top: 2em;
    min-height: 5em;
    margin-left: -50px;
    left: 50%;
    animation: fly_speeder 0.4s linear infinite;
}
.fly_loader > span {
    height: 5px;
    width: 35px;
    background: var(--bs-primary);
    position: absolute;
    top: -19px;
    left: 60px;
    border-radius: 2px 10px 1px 0;
}
.fly_base span {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 100px solid var(--bs-primary);;
    border-bottom: 6px solid transparent;
}
.fly_base span:before {
    content: "";
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: var(--bs-primary);;
    position: absolute;
    right: -110px;
    top: -16px;
}
.fly_base span:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-right: 55px solid var(--bs-primary);;
    border-bottom: 16px solid transparent;
    top: -16px;
    right: -98px;
}
.fly_face {
    position: absolute;
    height: 12px;
    width: 20px;
    background: var(--bs-primary);;
    border-radius: 20px 20px 0 0;
    transform: rotate(-40deg);
    right: -125px;
    top: -15px;
}
.fly_face:after {
    content: "";
    height: 12px;
    width: 12px;
    background: var(--bs-primary);;
    right: 4px;
    top: 7px;
    position: absolute;
    transform: rotate(40deg);
    transform-origin: 50% 50%;
    border-radius: 0 0 0 2px;
}
.fly_loader > span > span:nth-child(1),
.fly_loader > span > span:nth-child(2),
.fly_loader > span > span:nth-child(3),
.fly_loader > span > span:nth-child(4) {
    width: 30px;
    height: 1px;
    background: var(--bs-primary);;
    position: absolute;
    animation: fly_fazer1 0.2s linear infinite;
}
.fly_loader > span > span:nth-child(2) {
    top: 3px;
    animation: fly_fazer2 0.4s linear infinite;
}
.fly_loader > span > span:nth-child(3) {
    top: 1px;
    animation: fly_fazer3 0.4s linear infinite;
    animation-delay: -1s;
}
.fly_loader > span > span:nth-child(4) {
    top: 4px;
    animation: fly_fazer4 1s linear infinite;
    animation-delay: -1s;
}
@keyframes fly_fazer1 {
    0% {
        left: 0;
    }
    100% {
        left: -80px;
        opacity: 0;
    }
}
@keyframes fly_fazer2 {
    0% {
        left: 0;
    }
    100% {
        left: -100px;
        opacity: 0;
    }
}
@keyframes fly_fazer3 {
    0% {
        left: 0;
    }
    100% {
        left: -50px;
        opacity: 0;
    }
}
@keyframes fly_fazer4 {
    0% {
        left: 0;
    }
    100% {
        left: -150px;
        opacity: 0;
    }
}
@keyframes fly_speeder {
    0% {
        transform: translate(2px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -3px) rotate(-1deg);
    }
    20% {
        transform: translate(-2px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 3px) rotate(-1deg);
    }
    60% {
        transform: translate(-1px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-2px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(2px, 1px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}
.fly_longfazers {
    position: absolute;
    width: 100%;
    height: 100%;
}
.fly_longfazers span {
    position: absolute;
    height: 2px;
    width: 20%;
    background: var(--bs-primary);;
}
.fly_longfazers span:nth-child(1) {
    top: 20%;
    animation: fly_lf 0.6s linear infinite;
    animation-delay: -5s;
}
.fly_longfazers span:nth-child(2) {
    top: 40%;
    animation: fly_lf2 0.8s linear infinite;
    animation-delay: -1s;
}
.fly_longfazers span:nth-child(3) {
    top: 60%;
    animation: fly_lf3 0.6s linear infinite;
}
.fly_longfazers span:nth-child(4) {
    top: 80%;
    animation: fly_lf4 0.5s linear infinite;
    animation-delay: -3s;
}
@keyframes fly_lf {
    0% {
        left: 200%;
    }
    100% {
        left: -200%;
        opacity: 0;
    }
}
@keyframes fly_lf2 {
    0% {
        left: 200%;
    }
    100% {
        left: -200%;
        opacity: 0;
    }
}
@keyframes fly_lf3 {
    0% {
        left: 200%;
    }
    100% {
        left: -100%;
        opacity: 0;
    }
}
@keyframes fly_lf4 {
    0% {
        left: 200%;
    }
    100% {
        left: -100%;
        opacity: 0;
    }
}

/*endregion*/


.bar-line{
    height: 1em;
    width: 100%;
    background: var(--bs-gray);
    border-radius: 0.5em;
}
.active-bar{
    background: var(--bs-primary);
}

/*region Blink*/
.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite; /* For older browsers */
}

@keyframes blink-animation {
    to { visibility: hidden; }
}

@-webkit-keyframes blink-animation {
    to { visibility: hidden; }
}
/*endregion*/

@media screen and (max-width: 300px) {
    .price-box,.product-title,.product-details {
        font-size: 10px;
        line-height: 12pt;
    }

}

/*region Step Progress*/
.wrapper {

    padding: 0 2em;
    font-size: 17pt;
    line-height: 17pt;

}
.StepProgress {
    position: relative;
    padding-left: 20px;
    list-style: none;
}
.StepProgress::before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    border-left: 10px solid #ccc;
}
.StepProgress-item {
    position: relative;
    counter-increment: list;
    padding: 0.5em 2em;
}
.StepProgress-item:not(:last-child) {
    padding-bottom: 80px;
}
.StepProgress-item::before {
    display: inline-block;
    content: "";
    position: absolute;
    left: -20px;
    height: 100%;
    width: 10px;
}
.StepProgress-item::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: -40px;
    width: 12px;
    height: 12px;
    border: 25px solid #ccc;
    border-radius: 50%;
    background-color: #fff;
}
.StepProgress-item.is-done::before {
    border-left: 10px solid #fff000;
}
.StepProgress-item.is-done::after {
    content: "";
    font-size: 15pt;
    position: absolute;
    color: #fff;
    text-align: center;
    border: 25px solid #fff000;
    background-color: #fff000;
}
.StepProgress-item.current::before {
    border-left: 10px solid #fff000;
}
.StepProgress-item.current::after {
    content: counter(list);
    padding-top: 1px;
    width: 19px;
    height: 18px;
    top: -4px;
    left: -40px;
    font-size: 14px;
    text-align: center;
    color: #fff000;
    border: 10px solid #fff000;
    background-color: white;
}
.StepProgress strong {
    display: block;
}

.StepProgress-header {
    position: relative;
    counter-increment: list;
    padding: 0.5em 2em;
}
.StepProgress-header h2{
    padding: 20px;
    margin-left: -65px;
    margin-bottom: 0;
    margin-right: -50px;
    background: #ccc;
    z-index: 9;
}
.StepProgress-header h2.is-done {
    background: #fff000;
}
.StepProgress-header {
    padding-bottom: 0;
}
.StepProgress-header::before {
    display: inline-block;
    content: "";
    position: absolute;
    left: -20px;
    height: 100%;
    width: 10px;
    top: -0px;
}

.StepProgress-header.is-done::before {
    border-left: 10px solid #fff000;
}
.StepProgress-header.is-done::after {
    content: "";
    font-size: 15pt;
    position: absolute;
    color: #fff;
    text-align: center;
    border: 0 solid #fff000;
    background-color: #fff000;
}
.StepProgress-header.current::before {
    border-left: 10px solid #fff000;
}
.StepProgress-header.current::after {
    content: counter(list);
    padding-top: 1px;
    width: 19px;
    height: 18px;
    top: -4px;
    left: -40px;
    font-size: 14px;
    text-align: center;
    color: #fff000;
    border: 10px solid #fff000;
    background-color: white;
}

/*endregion*/

/*region Progress Step
 */
.bar_container {
    width: 100%;
}

.progressbar {
    counter-reset: step;
}
.progressbar li {
    list-style: none;

    counter-increment: list;
    width: 30.33%;
    position: relative;
    text-align: center;
    cursor: pointer;
}
.progressbar li:before {
    content: "";
    counter-increment: step;
    width: 30px;
    height: 30px;
    line-height : 30px;
    border: 1px solid #ddd;
    border-radius: 100%;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    background-color: #fff;
}
.progressbar li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index : -1;
}
.progressbar li:first-child:after {
    content: none;
}
.progressbar li.active {
    color: green;
}
.progressbar li.active:before {
    border-color: green;
}
.progressbar li.active + li:after {
    background-color: green;
}
/*endregion*/

/*region Drag Drop*/
li.drag-sort-active {
    background: transparent;
    color: transparent;
    border: 1px solid #4ca1af;
}

span.drag-sort-active {
    background: transparent;
    color: transparent;
}


.set-overlayer,
.set-glass,
.set-sticky {
    cursor: pointer;
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    color: #333;
    font-size: 16px;
}
.set-overlayer:after,
.set-glass:after,
.to-active:after,
.set-sticky:after {
    font-family: FontAwesome;
    font-size: 18pt;
    position: relative;
    float: right;
}
.set-overlayer:after,
.set-glass:after,
.set-sticky:after {
    content: "\f204";
    transition: .6s;
}

.to-active:after {
    content: "\f205";
    color: #008080;
    transition: .6s;
}
.set-overlayer,
.set-glass,
.set-sticky,
.source,
.theme-tray {
    margin: 10px;
    background: #f2f2f2;
    border-radius: 5px;
    border: 2px solid #f1f1f1;
    box-sizing: border-box;
}
/* Syntax Highlighter*/

pre.prettyprint {
    padding: 15px !important;
    margin: 10px;
    border: 0 !important;
    background: #f2f2f2;
    overflow: auto;
}

.source {
    white-space: pre;
    overflow: auto;
    max-height: 400px;
}
code{
    border:1px solid #ddd;
    padding: 2px;
    border-radius: 2px;
}
/*endregion*/

/*region Package Widget*/
.widget-totals{
    max-height: 200px !important;
    overflow: hidden;
    border-radius: 1em;
}
.widget-package .btn {
    font-size: 0.7rem;
    width: 100%;
    margin: 0.5em 0;
    display: block;
}
.widget-package .badge {
    font-size: 0.5rem;
    margin: 0;
    display: block;
}

.users-list {
    padding-left: 0;
    list-style: none;
}

.users-list > li {
    float: left;
    padding: 10px;
    text-align: center;
    width: 25%;
}

.users-list > li img {
    border-radius: 50%;
    height: auto;
    max-width: 100%;
}

.users-list > li > a:hover,
.users-list > li > a:hover .users-list-name {
    color: #999;
}

.users-list-name,
.users-list-date {
    display: block;
}

.users-list-name {
    color: #495057;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-list-date {
    color: #748290;
    font-size: 12px;
}

.dark-mode .users-list-name {
    color: #ced4da;
}

.dark-mode .users-list-date {
    color: #adb5bd;
}

/*endregion*/

.vw-overflow-auto{
    overflow: auto;
}


.chat-list {
    margin: 0;
}
.chat-list li.active a {
    background-color: var(--bs-light);
}
.chat-list li a {
    position: relative;
    display: block;
    padding: 15px 20px;
    color: var(--bs-gray-600);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    border-top: 1px solid var(--bs-sidebar-sub-bg);
    border-radius: 4px;
}
.chat-list li a:hover {
    background-color: var(--bs-light);
}
.chat-list li .chat-user-message {
    font-size: 14px;
}
.chat-list li.typing .chat-user-message {
    color: #7269ef;
    font-weight: 500;
}
.chat-list li.typing .chat-user-message .dot {
    background-color: #7269ef;
}
.chat-list li .unread-message {
    position: absolute;
    display: inline-block;
    left: auto;
    right: 24px;
    top: 33px;
}
.chat-list li .unread-message .badge {
    line-height: 16px;
    font-weight: 600;
    font-size: 10px;
}

.chat-user-img {
    position: relative;
}
.chat-user-img .user-status {
    width: 10px;
    height: 10px;
    background-color: #adb5bd;
    border-radius: 50%;
    border: 2px solid var(--bs-card-bg);
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0;
}
.chat-user-img.online .user-status {
    background-color: #06D6A0;
}
.chat-user-img.away .user-status {
    background-color: #FFD166;
}

.dataTables_paginate,.dataTables_filter{
    float: right !important;
}

.pull-menu-right{
    position: absolute;
    right: 2.5em;
}
.hide-sum-menu-icon .sub-menu .menu-icon{
    font-size: 60%;
    color: var(--bs-secondary) !important;

}

/*region Labels*/

.responsive-font-40px{
    font-size: clamp(40px,8vw,105px) !important;
}
.responsive-font-30px{
    font-size: clamp(30px,7vw,90px) !important;
}
.responsive-font-16px{
    font-size: clamp(8px,7vw,16px) !important;
}
.responsive-font-12px{
    font-size: clamp(6px,7vw,12px) !important;
}

.responsive-font-20px{
    font-size: clamp(20px,8vw,45px) !important;
}


.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    vertical-align: baseline;
    border-radius: .25em;
    /* white-space: nowrap ;
     word-wrap: break-word;*/
}
.alert-danger, .alert-error, .alert-info, .alert-success, .alert-warning, .bg-aqua, .bg-aqua-active, .bg-black, .bg-black-active, .bg-blue, .bg-blue-active, .bg-fuchsia, .bg-fuchsia-active, .bg-green, .bg-green-active, .bg-light-blue, .bg-light-blue-active, .bg-lime, .bg-lime-active, .bg-maroon, .bg-maroon-active, .bg-navy, .bg-navy-active, .bg-olive, .bg-olive-active, .bg-orange, .bg-orange-active, .bg-purple, .bg-purple-active, .bg-red, .bg-red-active, .bg-teal, .bg-teal-active, .bg-yellow, .bg-yellow-active, .callout.callout-danger, .callout.callout-info, .callout.callout-success, .callout.callout-warning, .label-danger, .label-info, .label-primary, .label-success, .label-warning, .modal-danger .modal-body, .modal-danger .modal-footer, .modal-danger .modal-header, .modal-info .modal-body, .modal-info .modal-footer, .modal-info .modal-header, .modal-primary .modal-body, .modal-primary .modal-footer, .modal-primary .modal-header, .modal-success .modal-body, .modal-success .modal-footer, .modal-success .modal-header, .modal-warning .modal-body, .modal-warning .modal-footer, .modal-warning .modal-header {
    color: #fff !important
}
.pop-up-page .modal-footer .alert{
    width: 100%;
}
.bg-default, .label-default {
    background-color: #444444 !important
}
.bg-dim-black, .label-dim-black {
    background-color: rgba(0,0,0,0.075);
}
.bg-light-blue, .label-primary {
    background-color: #3c8dbc !important
}
.alert-danger, .alert-error, .bg-red, .callout.callout-danger, .label-danger {
    background-color: #dd4b39 !important
}
.alert-warning, .bg-yellow, .callout.callout-warning, .label-warning {
    background-color: #f39c12 !important
}
.alert-info, .bg-aqua, .callout.callout-info, .label-info{
    background-color: #00c0ef !important
}
.alert-success, .bg-green, .callout.callout-success, .label-success {
    background-color: #00a65a !important
}
.color-primary{
    color: #3c8dbc !important
}
.color-danger{
    color: #dd4b39 !important
}
.color-warning{
    color: #f39c12 !important
}
.color-success{
    color: #00a65a !important
}
.color-info{
    color: #00c0ef !important
}
.form-floating>label {
    padding: 0.75rem 0.5rem !important;
}
/*endregion*/
/*region Background Colors*/
.bg-sky-light-5 {
    background-color: #edf9fe !important; }

.bg-sky-light-4 {
    background-color: #b2e6fa !important; }

.bg-sky-light-3 {
    background-color: #7fd5f7 !important; }

.bg-sky-light-2 {
    background-color: #52c7f5 !important; }

.bg-sky-light-1 {
    background-color: #21b7f2 !important; }

.bg-sky,
.bg-primary {
    background-color: #00acf0 !important; }

.bg-sky-dark-5 {
    background-color: #075875 !important; }

.bg-sky-dark-4 {
    background-color: #02729a !important; }

.bg-sky-dark-3 {
background-color: #0285b4 !important; }

.bg-sky-dark-2 {
    background-color: #0293c9 !important; }

.bg-sky-dark-1 {
    background-color: #00a0df !important; }

.bg-green-light-5 {
    background-color: #eff9f2 !important; }

.bg-green-light-4 {
    background-color: #bce7c7 !important; }

.bg-green-light-3 {
    background-color: #90d7a3 !important; }

.bg-green-light-2 {
    background-color: #69c982 !important; }

.bg-green-light-1 {
    background-color: #3fb95f !important; }

.bg-green,
.bg-success {
    background-color: #22af47 !important; }

.bg-green-dark-5 {
    background-color: #05592b !important; }

.bg-green-dark-4 {
    background-color: #056b33 !important; }

.bg-green-dark-3 {
    background-color: #138431 !important; }

.bg-green-dark-2 {
    background-color: #179237 !important; }

.bg-green-dark-1 {
    background-color: #1aa23e !important; }

.bg-yellow-light-5 {
    background-color: #fff8eb !important; }

.bg-yellow-light-4 {
    background-color: #ffecc2 !important; }

.bg-yellow-light-3 {
    background-color: #ffdf9a !important; }

.bg-yellow-light-2 {
    background-color: #ffd477 !important; }

.bg-yellow-light-1 {
    background-color: #ffc750 !important; }

.bg-yellow,
.bg-warning {
    background-color: #ffbf36 !important; }

.bg-yellow-dark-5 {
    background-color: #cb7e03 !important; }

.bg-yellow-dark-4 {
    background-color: #eb9000 !important; }

.bg-yellow-dark-3 {
    background-color: #faa000 !important; }

.bg-yellow-dark-2 {
    background-color: #ffac19 !important; }

.bg-yellow-dark-1 {
    background-color: #ffb71d !important; }

.bg-red-light-5 {
    background-color: #fff1f1 !important; }

.bg-red-light-4 {
    background-color: #fdc5c3 !important; }

.bg-red-light-3 {
    background-color: #fb9f9b !important; }

.bg-red-light-2 {
    background-color: #fa7d77 !important; }

.bg-red-light-1 {
    background-color: #f95851 !important; }

.bg-red,
.bg-danger {
    background-color: #f83f37 !important; }

.bg-red-dark-5 {
    background-color: #8b0c12 !important; }

.bg-red-dark-4 {
    background-color: #b10911 !important; }

.bg-red-dark-3 {
    background-color: #cf020d !important; }

.bg-red-dark-2 {
    background-color: #ed1622 !important; }

.bg-red-dark-1 {
    background-color: #ff2f26 !important; }

.bg-blue-light-5 {
    background-color: #edf7fe !important; }

.bg-blue-light-4 {
    background-color: #b2defa !important; }

.bg-blue-light-3 {
    background-color: #7fc8f6 !important; }

.bg-blue-light-2 {
    background-color: #52b5f3 !important; }

.bg-blue-light-1 {
    background-color: #21a0f0 !important; }

.bg-blue {
    background-color: #0092ee !important; }

.bg-blue-dark-5 {
    background-color: #044067 !important; }

.bg-blue-dark-4 {
    background-color: #004f82 !important; }

.bg-blue-dark-3 {
    background-color: #0768a5 !important; }

.bg-blue-dark-2 {
    background-color: #007fd0 !important; }

.bg-blue-dark-1 {
    background-color: #0089e0 !important; }

.bg-cyan-light-5 {
    background-color: #effafb !important; }

.bg-cyan-light-4 {
    background-color: #bbebf0 !important; }

.bg-cyan-light-3 {
    background-color: #8edde6 !important; }

.bg-cyan-light-2 {
    background-color: #66d2dd !important; }

.bg-cyan-light-1 {
    background-color: #3bc5d3 !important; }

.bg-cyan,
.bg-info {
    background-color: #1ebccd !important; }

.bg-cyan-dark-5 {
    background-color: #065459 !important; }

.bg-cyan-dark-4 {
    background-color: #046b73 !important; }

.bg-cyan-dark-3 {
    background-color: #0b858f !important; }

.bg-cyan-dark-2 {
    background-color: #0e949f !important; }

.bg-cyan-dark-1 {
    background-color: #16a9b9 !important; }

.bg-grey-light-5,
.bg-secondary-light-5 {
    background-color: #f5f5f5 !important; }

.bg-grey-light-4,
.bg-secondary-light-4 {
    background-color: #e2e2e2 !important; }

.bg-grey-light-3,
.bg-secondary-light-3 {
    background-color: #cecece !important; }

.bg-grey-light-2,
.bg-secondary-light-2 {
    background-color: #bdbdbd !important; }

.bg-grey-light-1,
.bg-secondary-light-1 {
    background-color: #ababab !important; }

.bg-secondary,
.bg-grey {
    background-color: #9e9e9e !important; }

.bg-grey-dark-1,
.bg-secondary-dark-1 {
    background-color: #919191 !important; }

.bg-grey-dark-2,
.bg-secondary-dark-2 {
    background-color: #858484 !important; }

.bg-grey-dark-3,
.bg-secondary-dark-3 {
    background-color: #777474 !important; }

.bg-grey-dark-4,
.bg-secondary-dark-4 {
    background-color: #666161 !important; }

.bg-grey-dark-5,
.bg-secondary-dark-5 {
    background-color: #524c4c !important; }

.bg-pink-light-5 {
    background-color: #feeff4 !important; }

.bg-pink-light-4 {
    background-color: #fabacf !important; }

.bg-pink-light-3 {
    background-color: #f68daf !important; }

.bg-pink-light-2 {
    background-color: #f36493 !important; }

.bg-pink-light-1 {
    background-color: #ef3975 !important; }

.bg-pink {
    background-color: #ed1b60 !important; }

.bg-pink-dark-5 {
    background-color: #6f1333 !important; }

.bg-pink-dark-4 {
    background-color: #90143f !important; }

.bg-pink-dark-3 {
    background-color: #a7194b !important; }

.bg-pink-dark-2 {
    background-color: #be1b54 !important; }

.bg-pink-dark-1 {
    background-color: #df195f !important; }

.bg-purple-light-5 {
    background-color: #f9f0f9 !important; }

.bg-purple-light-4 {
    background-color: #e6bde5 !important; }

.bg-purple-light-3 {
    background-color: #d592d4 !important; }

.bg-purple-light-2 {
    background-color: #c66cc5 !important; }

.bg-purple-light-1 {
    background-color: #b642b5 !important; }

.bg-purple {
    background-color: #ab26aa !important; }

.bg-purple-dark-5 {
    background-color: #5d1864 !important; }

.bg-purple-dark-4 {
    background-color: #701b76 !important; }

.bg-purple-dark-3 {
    background-color: #7c2181 !important; }

.bg-purple-dark-2 {
    background-color: #882787 !important; }

.bg-purple-dark-1 {
    background-color: #9a3092 !important; }

.bg-violet-light-5 {
    background-color: #f4f2fa !important; }

.bg-violet-light-4 {
    background-color: #d1c5e8 !important; }

.bg-violet-light-3 {
    background-color: #b29fd8 !important; }

.bg-violet-light-2 {
    background-color: #977dcb !important; }

.bg-violet-light-1 {
    background-color: #7a59bc !important; }

.bg-violet {
    background-color: #6640b2 !important; }

.bg-violet-dark-5 {
    background-color: #2d1453 !important; }

.bg-violet-dark-4 {
    background-color: #3a196c !important; }

.bg-violet-dark-3 {
    background-color: #482e7e !important; }

.bg-violet-dark-2 {
    background-color: #5935a3 !important; }

.bg-violet-dark-1 {
    background-color: #603bab !important; }

.bg-indigo-light-5 {
    background-color: #f1f3f9 !important; }

.bg-indigo-light-4 {
    background-color: #c4cce7 !important; }

.bg-indigo-light-3 {
    background-color: #9caad8 !important; }

.bg-indigo-light-2 {
    background-color: #798cca !important; }

.bg-indigo-light-1 {
    background-color: #536bbb !important; }

.bg-indigo {
    background-color: #3a55b1 !important; }

.bg-indigo-dark-5 {
    background-color: #0a2042 !important; }

.bg-indigo-dark-4 {
    background-color: #002663 !important; }

.bg-indigo-dark-3 {
    background-color: #273c87 !important; }

.bg-indigo-dark-2 {
    background-color: #2f4595 !important; }

.bg-indigo-dark-1 {
    background-color: #3650ab !important; }

.bg-teal-light-5 {
    background-color: #edf8f6 !important; }

.bg-teal-light-4 {
    background-color: #b2e1da !important; }

.bg-teal-light-3 {
    background-color: #7fcdc1 !important; }

.bg-teal-light-2 {
    background-color: #52bbac !important; }

.bg-teal-light-1 {
    background-color: #21a894 !important; }

.bg-teal {
    background-color: #009b84 !important; }

.bg-teal-dark-5 {
    background-color: #044b3b !important; }

.bg-teal-dark-4 {
    background-color: #02624f !important; }

.bg-teal-dark-3 {
    background-color: #026f58 !important; }

.bg-teal-dark-2 {
    background-color: #028068 !important; }

.bg-teal-dark-1 {
    background-color: #018975 !important; }

.bg-neon-light-5 {
    background-color: #f3f9ec !important; }

.bg-neon-light-4 {
    background-color: #dbedc6 !important; }

.bg-neon-light-3 {
    background-color: #c3e0a0 !important; }

.bg-neon-light-2 {
    background-color: #aed67e !important; }

.bg-neon-light-1 {
    background-color: #97ca5a !important; }

.bg-neon {
    background-color: #88c241 !important; }

.bg-neon-dark-5 {
    background-color: #3d680f !important; }

.bg-neon-dark-4 {
    background-color: #4c7f16 !important; }

.bg-neon-dark-3 {
    background-color: #59970e !important; }

.bg-neon-dark-2 {
    background-color: #67a41c !important; }

.bg-neon-dark-1 {
    background-color: #79b62f !important; }

.bg-lime-light-5 {
    background-color: #f9faeb !important; }

.bg-lime-light-4 {
    background-color: #f1f4d0 !important; }

.bg-lime-light-3 {
    background-color: #e7ecb0 !important; }

.bg-lime-light-2 {
    background-color: #dfe594 !important; }

.bg-lime-light-1 {
    background-color: #d6de76 !important; }

.bg-lime {
    background-color: #d0d962 !important; }

.bg-lime-dark-5 {
    background-color: #6f7208 !important; }

.bg-lime-dark-4 {
    background-color: #878b09 !important; }

.bg-lime-dark-3 {
    background-color: #9ea809 !important; }

.bg-lime-dark-2 {
    background-color: #b7c11a !important; }

.bg-lime-dark-1 {
    background-color: #c3cc34 !important; }

.bg-sun-light-5 {
    background-color: #fffbe5 !important; }

.bg-sun-light-4 {
    background-color: #fef7c2 !important; }

.bg-sun-light-3 {
    background-color: #fef19a !important; }

.bg-sun-light-2 {
    background-color: #feec76 !important; }

.bg-sun-light-1 {
    background-color: #fde74f !important; }

.bg-sun {
    background-color: #fde335 !important; }

.bg-sun-dark-5 {
    background-color: #a48f03 !important; }

.bg-sun-dark-4 {
    background-color: #bca300 !important; }

.bg-sun-dark-3 {
    background-color: #cdb308 !important; }

.bg-sun-dark-2 {
    background-color: #dfc414 !important; }

.bg-sun-dark-1 {
    background-color: #ecd11e !important; }

.bg-orange-light-5 {
    background-color: #fff4e9 !important; }

.bg-orange-light-4 {
    background-color: #ffdfbe !important; }

.bg-orange-light-3 {
    background-color: #ffca93 !important; }

.bg-orange-light-2 {
    background-color: #ffb76d !important; }

.bg-orange-light-1 {
    background-color: #ffa344 !important; }

.bg-orange {
    background-color: #ff9528 !important; }

.bg-orange-dark-5 {
    background-color: #c74c00 !important; }

.bg-orange-dark-4 {
    background-color: #e05602 !important; }

.bg-orange-dark-3 {
    background-color: #f16611 !important; }

.bg-orange-dark-2 {
    background-color: #ff7800 !important; }

.bg-orange-dark-1 {
    background-color: #ff880e !important; }

.bg-pumpkin-light-5 {
    background-color: #fff4f0 !important; }

.bg-pumpkin-light-4 {
    background-color: #ffcfbe !important; }

.bg-pumpkin-light-3 {
    background-color: #ffaf93 !important; }

.bg-pumpkin-light-2 {
    background-color: #ff936d !important; }

.bg-pumpkin-light-1 {
    background-color: #ff7544 !important; }

.bg-pumpkin {
    background-color: #ff6028 !important; }

.bg-pumpkin-dark-5 {
    background-color: #ac2c00 !important; }

.bg-pumpkin-dark-4 {
    background-color: #c63300 !important; }

.bg-pumpkin-dark-3 {
    background-color: #dd3f08 !important; }

.bg-pumpkin-dark-2 {
    background-color: #e8470f !important; }

.bg-pumpkin-dark-1 {
    background-color: #fb551c !important; }

.bg-brown-light-5 {
    background-color: #f6f3f2 !important; }

.bg-brown-light-4 {
    background-color: #d7cbc8 !important; }

.bg-brown-light-3 {
    background-color: #bca9a4 !important; }

.bg-brown-light-2 {
    background-color: #a58b84 !important; }

.bg-brown-light-1 {
    background-color: #8b6a61 !important; }

.bg-brown {
    background-color: #7a5449 !important; }

.bg-brown-dark-5 {
    background-color: #301811 !important; }

.bg-brown-dark-4 {
    background-color: #44241b !important; }

.bg-brown-dark-3 {
    background-color: #502f25 !important; }

.bg-brown-dark-2 {
    background-color: #633d32 !important; }

.bg-brown-dark-1 {
    background-color: #6f483d !important; }

.bg-gold-light-5 {
    background-color: #fbf8f1 !important; }

.bg-gold-light-4 {
    background-color: #ece0c5 !important; }

.bg-gold-light-3 {
    background-color: #e0cc9f !important; }

.bg-gold-light-2 {
    background-color: #d5ba7d !important; }

.bg-gold-light-1 {
    background-color: #c9a658 !important; }

.bg-gold {
    background-color: #c1993f !important; }

.bg-gold-dark-5 {
    background-color: #6d4d05 !important; }

.bg-gold-dark-4 {
    background-color: #85600d !important; }

.bg-gold-dark-3 {
    background-color: #98731e !important; }

.bg-gold-dark-2 {
    background-color: #a27b25 !important; }

.bg-gold-dark-1 {
    background-color: #b48c32 !important; }

.bg-smoke-light-5 {
    background-color: #f4f6f7 !important; }

.bg-smoke-light-4 {
    background-color: #ced8dc !important; }

.bg-smoke-light-3 {
    background-color: #aebec4 !important; }

.bg-smoke-light-2 {
    background-color: #92a7b0 !important; }

.bg-smoke-light-1 {
    background-color: #738e99 !important; }

.bg-smoke {
    background-color: #5e7d8a !important; }

.bg-smoke-dark-5 {
    background-color: #172a32 !important; }

.bg-smoke-dark-4 {
    background-color: #233c46 !important; }

.bg-smoke-dark-3 {
    background-color: #304e5a !important; }

.bg-smoke-dark-2 {
    background-color: #40606d !important; }

.bg-smoke-dark-1 {
    background-color: #4a6b78 !important; }

.bg-white {
    background-color: #fff !important; }

.bg-light {
    background-color: #f5f5f6 !important; }

.bg-light-10 {
    background-color: #eaecec !important; }

.bg-light-15 {
    background-color: #e0e3e4 !important; }

.bg-light-20 {
    background-color: #d6d9da !important; }

.bg-light-30 {
    background-color: #c1c6c8 !important; }

.bg-light-40 {
    background-color: #adb3b6 !important; }

.bg-light-50 {
    background-color: #98a0a3 !important; }

.bg-light-60 {
    background-color: #848d91 !important; }

.bg-light-70 {
    background-color: #6f7a7f !important; }

.bg-light-80 {
    background-color: #5b676d !important; }

.bg-light-90 {
    background-color: #46545a !important; }

.bg-dark {
    background-color: #324148 !important; }

.bg-dark-20 {
    background-color: #2b383e !important; }

.bg-dark-40 {
    background-color: #273238 !important; }

.bg-dark-60 {
    background-color: #212a2f !important; }

.bg-dark-80 {
    background-color: #1a2225 !important; }

.bg-dark-100 {
    background-color: #0d1113 !important; }

.bg-twitter {
    background-color: #00aced !important; }
/*endregion*/
/*region Overlay*/
.pull-right{
    float: right !important;
}
.pull-left{
    float: left !important;
}

.no-height{
    height: auto !important;
}
.no-scroll{
    overflow: hidden;
    -ms-overflow: hidden;
}
.no-scroll-y{
    overflow-y: hidden;
    -ms-overflow-y: hidden;
    overflow-x: visible;
    -ms-overflow-x: visible;
}
.no-scroll-x{
    overflow-x: hidden;
    -ms-overflow-x: hidden;
    overflow-y: visible;
    -ms-overflow-y: visible;
}
.wrap-text{
    white-space: normal !important;
    word-wrap: break-word !important;
}
.overlay {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}
.overlay_fill {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

.overlay_fill_class {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .20);
    backdrop-filter: blur(10px);
    z-index: 99999;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}
.widget-circle{
    text-align: center;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    margin: 1em;
}
/*endregion*/
/*region Chats*/
.small-box {
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
    display: block;
    margin-bottom: 20px;
    position: relative;
}

.small-box > .inner {
    padding: 10px;
}

.small-box > .small-box-footer {
    background-color: rgba(0, 0, 0, 0.1);
    color: rgba(255, 255, 255, 0.8);
    display: block;
    padding: 3px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 10;
}

.small-box > .small-box-footer:hover {
    background-color: rgba(0, 0, 0, 0.15);
    color: #fff;
}

.small-box h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 10px;
    padding: 0;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .col-xl-2 .small-box h3,
    .col-lg-2 .small-box h3,
    .col-md-2 .small-box h3 {
        font-size: 1.6rem;
    }
    .col-xl-3 .small-box h3,
    .col-lg-3 .small-box h3,
    .col-md-3 .small-box h3 {
        font-size: 1.6rem;
    }
}

@media (min-width: 1200px) {
    .col-xl-2 .small-box h3,
    .col-lg-2 .small-box h3,
    .col-md-2 .small-box h3 {
        font-size: 2.2rem;
    }
    .col-xl-3 .small-box h3,
    .col-lg-3 .small-box h3,
    .col-md-3 .small-box h3 {
        font-size: 2.2rem;
    }
}

.small-box p {
    font-size: 1rem;
}

.small-box p > small {
    color: #f8f9fa;
    display: block;
    font-size: .9rem;
    margin-top: 5px;
}

.small-box h3,
.small-box p {
    z-index: 5;
}

.small-box .icon {
    color: rgba(0, 0, 0, 0.15);
    z-index: 0;
}

.small-box .icon > i {
    font-size: 90px;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
    transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}

.small-box .icon > i.fa, .small-box .icon > i.fas, .small-box .icon > i.far, .small-box .icon > i.fab, .small-box .icon > i.fal, .small-box .icon > i.fad, .small-box .icon > i.ion {
    font-size: 70px;
    top: 20px;
}

.small-box .icon svg {
    font-size: 70px;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: -webkit-transform 0.3s linear;
    transition: transform 0.3s linear;
    transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}
.center-body {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center !important;
    justify-content: center !important;
}
.small-box:hover {
    text-decoration: none;
}

.small-box:hover .icon > i, .small-box:hover .icon > i.fa, .small-box:hover .icon > i.fas, .small-box:hover .icon > i.far, .small-box:hover .icon > i.fab, .small-box:hover .icon > i.fal, .small-box:hover .icon > i.fad, .small-box:hover .icon > i.ion {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.small-box:hover .icon > svg {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

@media (max-width: 767.98px) {
    .small-box {
        text-align: center;
    }
    .small-box .icon {
        display: none;
    }
    .small-box p {
        font-size: 12px;
    }
}

.topbar .nav-item .nav-link {
    /*height: 4.375rem;*/
    display: flex;
    align-items: center;
    padding: 0 .75rem;
}

.user-chat {
    background-color: var(--bs-card-bg);
    -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
    box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}
@media (max-width: 991.98px) {
    .user-chat {
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        z-index: 99;
    }
    .user-chat.user-chat-show {
        visibility: visible;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.user-chat-topbar {
    height: 100px;
}
@media (max-width: 991.98px) {
    .user-chat-topbar {
        /*position: fixed;*/
        height: 120px;
        right: 0;
        left: 0;
        top: 0;
        z-index: 1;
    }
}

.user-chat-nav .nav-btn {
    height: 40px;
    width: 40px;
    line-height: 40px;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    font-size: 20px;
    color: var(--bs-gray-600);
}
@media (max-width: 575.98px) {
    .user-chat-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
}
.chat-conversation ul,.chat-preview ul{
    position: relative;
}
.chat-conversation li,.chat-preview li {
    clear: both;
    width: 100%;
}
.chat-conversation .chat-avatar ,.chat-preview .chat-avatar {
    margin: 0 0 0 16px;
}
.chat-conversation .chat-avatar img,.chat-preview .chat-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.chat-conversation .chat-day-title,.chat-preview .chat-day-title {
    position: relative;
    text-align: center;
    margin-bottom: 24px;
    margin-top: 12px;
}
.chat-conversation .chat-day-title .title,.chat-preview .chat-day-title .title {
    background-color: var(--bs-border-color);
    position: relative;
    font-size: 13px;
    z-index: 1;
    padding: 6px 12px;
    border-radius: 5px;
}
.chat-conversation .chat-day-title:before,.chat-preview .chat-day-title:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    right: 0;
    left: 0;
    background-color: var(--bs-border-color);
    top: 10px;
}
.chat-conversation .chat-day-title .badge ,.chat-preview .chat-day-title .badge {
    font-size: 12px;
}
.chat-conversation .conversation-list,.chat-preview .conversation-list {
    /*margin-bottom: 24px;*/
    padding-bottom: 1em;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.chat-conversation .conversation-list .ctext-wrap,.chat-preview .conversation-list .ctext-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px;
}
.chat-conversation .conversation-list .ctext-wrap-content,.chat-preview .conversation-list .ctext-wrap-content {
    padding: 12px 20px;
    background-color: var(--bs-chat-secondary-bg);
    border-radius: 8px 8px 8px 0;
    color: var(--bs-chat-secondary-text);
    position: relative;
}
.chat-conversation .conversation-list .ctext-wrap-content:before,.chat-preview .conversation-list .ctext-wrap-content:before {
    content: "";
    position: absolute;
    border: 5px solid transparent;
    border-left-color: var(--bs-chat-secondary-bg);
    border-top-color: var(--bs-chat-secondary-bg);
    right: auto;
    left: 0;
    bottom: -10px;
}
@media (max-width: 575.98px) {
    .chat-conversation .conversation-list .ctext-wrap-content .attached-file .attached-file-avatar, .chat-preview .conversation-list .ctext-wrap-content .attached-file .attached-file-avatar {
        display: none;
    }
}
.chat-conversation .conversation-list .conversation-name ,.chat-preview .conversation-list .conversation-name {
    font-weight: 500;
    font-size: 14px;
}
.chat-conversation .conversation-list .dropdown .dropdown-toggle ,.chat-preview .conversation-list .dropdown .dropdown-toggle {
    font-size: 18px;
    padding: 4px;
    color: var(--bs-gray-600);
}
@media (max-width: 575.98px) {
    .chat-conversation .conversation-list .dropdown .dropdown-toggle,  .chat-preview .conversation-list .dropdown .dropdown-toggle {
        display: none;
    }
}
.chat-conversation .conversation-list .chat-time,.chat-preview .conversation-list .chat-time {
    font-size: 12px;
    margin-top: 4px;
    text-align: left;
}
.chat-conversation .conversation-list .message-img ,.chat-preview .conversation-list .message-img {
    border-radius: 0.2rem;
    position: relative;
}
.chat-conversation .conversation-list .message-img .message-img-list ,.chat-preview .conversation-list .message-img .message-img-list {
    position: relative;
}
.chat-conversation .conversation-list .message-img img,.chat-preview .conversation-list .message-img img {
    max-width: 150px;
}
.chat-conversation .conversation-list .message-img .message-img-link ,.chat-preview .conversation-list .message-img .message-img-link {
    position: absolute;
    left: 10px;
    right: auto;
    bottom: 10px;
}
.chat-conversation .conversation-list .message-img .message-img-link li > a,.chat-preview .conversation-list .message-img .message-img-link li > a {
    font-size: 18px;
    color: #fff;
    display: inline-block;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.chat-conversation .right .chat-avatar,.chat-preview .right .chat-avatar {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    margin-left: 0px;
    margin-right: 16px;
}
.chat-conversation .right .chat-time ,.chat-preview .right .chat-time {
    text-align: right;
}
.chat-conversation .right .conversation-list,.chat-preview .right .conversation-list {
    float: right;
    text-align: right;

}
.chat-conversation .right .conversation-list .ctext-wrap ,.chat-preview .right .conversation-list .ctext-wrap {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.chat-conversation .right .conversation-list .ctext-wrap .ctext-wrap-content,.chat-preview .right .conversation-list .ctext-wrap .ctext-wrap-content {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    background-color: var(--bs-chat-primary-bg);
    color: var(--bs-chat-primary-text);
    text-align: left;
    border-radius: 8px 8px 0px 8px;
}
.chat-conversation .right .conversation-list .ctext-wrap .ctext-wrap-content:before,.chat-preview .right .conversation-list .ctext-wrap .ctext-wrap-content:before {
    border: 5px solid transparent;
    border-top-color: var(--bs-chat-primary-bg);
    border-right-color: var(--bs-chat-primary-bg);
    right: 0px;
    left: auto;
}
.chat-conversation .right .conversation-list .dropdown,.chat-preview .right .conversation-list .dropdown {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}
.chat-conversation .right .conversation-list .dropdown .dropdown-menu[style] ,.chat-preview .right .conversation-list .dropdown .dropdown-menu[style] {
    left: 0 !important;
    right: auto !important;
}
.chat-conversation .right .dot,.chat-preview .right .dot {
    background-color: #343a40;
}

.chat-conversation {
    height: calc(100vh - 160px);
}
.chat-conversation-full {
    height: auto !important;
}
/*endregion*/
/*region Alerts*/
.alert {
    border-radius: 3px; }
.alert i {
    font-size: 24px; }
.alert .alert-link {
    font-weight: normal;
    font-weight: 500;
    color: inherit;
    filter: brightness(120%) contrast(100%); }
.alert.alert-dismissible .close {
    padding: .60rem 1.25rem;
    text-shadow: none; }
.alert.alert-primary {
    color: #075875;
    background: #edf9fe;
    border-color: rgba(178, 230, 250, 0.3); }
.alert.alert-success {
    color: #05592b;
    background: #eff9f2;
    border-color: rgba(188, 231, 199, 0.3); }
.alert.alert-info {
    color: #065459;
    background: #effafb;
    border-color: rgba(187, 235, 240, 0.3); }
.alert.alert-danger {
    color: #8b0c12;
    background: #fff1f1;
    border-color: rgba(253, 197, 195, 0.3); }
.alert.alert-warning {
    color: #cb7e03;
    background: #fff8eb;
    border-color: rgba(255, 236, 194, 0.3); }
.alert.alert-secondary {
    color: #524c4c;
    background: #f5f5f5;
    border-color: rgba(226, 226, 226, 0.3); }
.alert.alert-light {
    color: #5b676d;
    background: #f5f5f6;
    border-color: #eaecec; }
.alert.alert-dark {
    color: #fff;
    background: #324148;
    border-color: #2b383e; }
.alert.alert-dark.alert-dismissible .close:not(:disabled):not(.disabled):focus, .alert.alert-dark.alert-dismissible .close:not(:disabled):not(.disabled):hover {
    color: #fff;
    text-decoration: none;
    opacity: 1; }
.alert.alert-inv.alert-inv-primary {
    background: #00acf0;
    color: #edf9fe; }
.alert.alert-inv.alert-inv-primary.alert-dismissible .close:not(:disabled):not(.disabled):focus, .alert.alert-inv.alert-inv-primary.alert-dismissible .close:not(:disabled):not(.disabled):hover {
    color: #fff;
    text-decoration: none;
    opacity: 1; }
.alert.alert-inv.alert-inv-info {
    background: #1ebccd;
    color: #effafb; }
.alert.alert-inv.alert-inv-info.alert-dismissible .close:not(:disabled):not(.disabled):focus, .alert.alert-inv.alert-inv-info.alert-dismissible .close:not(:disabled):not(.disabled):hover {
    color: #fff;
    text-decoration: none;
    opacity: 1; }
.alert.alert-inv.alert-inv-success {
    background: #22af47;
    color: #eff9f2; }
.alert.alert-inv.alert-inv-success.alert-dismissible .close:not(:disabled):not(.disabled):focus, .alert.alert-inv.alert-inv-success.alert-dismissible .close:not(:disabled):not(.disabled):hover {
    color: #fff;
    text-decoration: none;
    opacity: 1; }
.alert.alert-inv.alert-inv-warning {
    background: #ffbf36;
    color: #fff8eb; }
.alert.alert-inv.alert-inv-warning.alert-dismissible .close:not(:disabled):not(.disabled):focus, .alert.alert-inv.alert-inv-warning.alert-dismissible .close:not(:disabled):not(.disabled):hover {
    color: #fff;
    text-decoration: none;
    opacity: 1; }
.alert.alert-inv.alert-inv-danger {
    background: #f83f37;
    color: #fff1f1; }
.alert.alert-inv.alert-inv-danger.alert-dismissible .close:not(:disabled):not(.disabled):focus, .alert.alert-inv.alert-inv-danger.alert-dismissible .close:not(:disabled):not(.disabled):hover {
    color: #fff;
    text-decoration: none;
    opacity: 1; }
.alert.alert-inv.alert-inv-secondary {
    background: #9e9e9e;
    color: #f5f5f5; }
.alert.alert-inv.alert-inv-secondary.alert-dismissible .close:not(:disabled):not(.disabled):focus, .alert.alert-inv.alert-inv-secondary.alert-dismissible .close:not(:disabled):not(.disabled):hover {
    color: #fff;
    text-decoration: none;
    opacity: 1; }
.alert.alert-wth-icon {
    padding-left: 54px;
    position: relative; }
.alert.alert-wth-icon .alert-icon-wrap {
    display: block;
    text-align: center;
    padding-top: 12px;
    height: 100%;
    width: 54px;
    left: 0;
    top: 0;
    position: absolute; }

.alert-dismissable .close, .alert-dismissible .close {
    top: 0; }
/*endregion*/

/*region Scan Loader*/
/* From Uiverse.io by kat_2522 */
.scan_loader {
    max-width: fit-content;
    color:var(--bs-body-color);
    font-size: 18px;
    position: relative;
    font-style: italic;
    font-weight: 600;
}
.scan_loader span {
    animation: cut 2s infinite;
    transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.scan_loader:hover {
    color: var(--bs-secondary);
}
.scan_loader::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background-color: var(--bs-primary);
    top: 0;
    filter: blur(10px);
    animation: scan 2s infinite;
    left: 0;
    z-index: 0;
    transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.scan_loader::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 5px;
    border-radius: 4px;
    background-color: var(--bs-primary);
    top: 0;
    animation: scan 2s infinite;
    left: 0;
    z-index: 1;
    filter: opacity(0.9);
    transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes scan {
    0% {
        top: 0px;
    }
    25% {
        top: 54px;
    }
    50% {
        top: 0px;
    }
    75% {
        top: 54px;
    }
}
@keyframes cut {
    0% {
        clip-path: inset(0 0 0 0);
    }
    25% {
        clip-path: inset(100% 0 0 0);
    }
    50% {
        clip-path: inset(0 0 100% 0);
    }
    75% {
        clip-path: inset(0 0 0 0);
    }
}

/*endregion