html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: myfont;
    src: url("../fonts/URW\ DIN\ Arabic\ Medium.ttf");
}

:root {
    --secondColor: rgb(191 211 231);
    --main-bg: #f5f5f5;
    --danger: rgb(241 79 79);
    --orange: rgb(255 183 43);
    --sec-main: rgb(128 209 206);
    --main: #4880ff;
    --gray: #2D303699;
    --color-white: #fff;
    --main-gridiant: linear-gradient(to right, #2f71b3, #aaaaaa);


    --dark: #131722;
    --dark-ligth: #273142;
    --dark-ligth2: #273142 !important;
    --dark-ligth3: #323d4e !important;
}

body {
    direction: rtl;
    text-align: right;
    /* font-family: "myfont", sans-serif; */
    font-family: "Cairo", sans-serif;
    overflow-x: hidden;
    background-color: #f5f6fa;
    font-size: 16px !important;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ddd;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--main);
    border-radius: 5px;
}

/* general classes */
.color-main {
    color: var(--main) !important;
}

.bg-main {
    background-color: var(--main-bg) !important;
}

.bg-blue {
    background-color: var(--main) !important;
}

.color-white {
    color: var(--color-white) !important;
}

.color-orange {
    color: var(--orange) !important;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.m-top-20 {
    margin: 20px 0;
}

a,
a:hover {
    text-decoration: none;
}

a {
    color: black;
    transition: all 0.3s ease-in-out;
}

a:hover {
    color: var(--main);
}

.up:hover {
    /* -webkit-box-shadow: inset 0 -4.25em 0 0 var(--color-white);
    box-shadow: inset 0 -4.25em 0 0 var(--color-white); */
    /* color: var(--main) !important; */
    background-color: #2b66ee !important;
}

/* .up2:hover {
    -webkit-box-shadow: inset 0 -4.25em 0 0 var(--main);
    box-shadow: inset 0 -4.25em 0 0 var(--main);
    color: var(--color-white) !important;
} */

.lang {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang img {
    width: 44px;
}

.flex-lang {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
}

.main-btn {
    line-height: 23px;
    display: block;
    text-align: center;
    min-width: 160px;
    padding: 10px 0;
    background-color: var(--main);
    color: var(--color-white);
    border: 1px solid transparent;
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
}

.main-btn.lg {
    width: 230px;
    padding: 12px 0;
}

.main-btn.xl {
    width: 320px;
    padding: 12px 0;
}

.main-btn2 {
    display: block;
    text-align: center;
    width: 140px;
    padding: 10px 0;
    background-color: transparent;
    color: var(--main);
    border: 1px solid var(--main);
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

.header-flex {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-main .main-input {
    border-color: #f5f5f5;
}

.drop-down-lang {
    /* position: absolute;
    top: 32px;
    left: 10px; */
    position: fixed;
    top: 58px;
    left: 65px;
    width: 100px;
    background-color: var(--color-white);
    box-shadow: 0px 1px 4px 1px rgb(0 0 0 / 12%);
    text-align: center;
    z-index: 2;
    border-radius: 5px;
    transition: all 0.4s ease-in-out;
    opacity: 0;
    transform: translateY(8px);
    visibility: hidden;
}

.drop-header {
    padding: 8px 2px;
}

.drop-header:hover .drop-down-lang {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.drop-down-lang li {
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.drop-down-order {
    position: absolute;
    top: 50px;
    left: -180px;
    width: 240px;
    background-color: var(--color-white);
    box-shadow: 0px 1px 4px 1px rgb(0 0 0 / 12%);
    text-align: center;
    z-index: 2;
    border-radius: 5px;
    transition: all 0.4s ease-in-out;
    opacity: 0;
    transform: translateY(8px);
    visibility: hidden;
    pointer-events: none;
}

.flex-li:hover .drop-down-order {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.drop-down-order li {
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.flex-a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease-in-out;
}

.flex-a:hover {
    padding-right: 12px;
}

.loader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    z-index: 99999999;
    flex-direction: column;
    gap: 20px;
}

.loader img {
    width: 17%;
}

@keyframes progress-bar {
    0% {
        left: -100%;
    }

    100% {
        left: 55%;
    }
}

#progressbar {
    background-color: #f8f8f8;
    height: 5px;
    border-radius: 30px;
    /* position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%); */
    overflow: hidden;
    width: 140px;
}

#progressbar::before {
    width: 5vw;
    position: relative;
    left: -100%;
    background-color: var(--main);
    content: " ";
    display: block;
    height: 5px;
    border-radius: 30px;
    animation: 1s progress-bar 0.6s infinite alternate ease-in-out;
}

label {
    margin-bottom: 0;
}

.header-language,
.header-mode {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    width: 45px;
}

.header-mode {
    color: var(--orange);
    font-size: 22px;
}

.header-language img {
    width: 30px;
}

.font14 {
    font-size: 14px;
}

.font12 {
    font-size: 12px;
}

.font13 {
    font-size: 13px;
}

.font15 {
    font-size: 15px;
}

.gray-col {
    color: var(--gray);
}

.flex-group-me {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.flex-bet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.reqired-label {
    position: relative;
    width: fit-content;
}

.reqired-label::after {
    content: "*";
    position: absolute;
    color: red;
    left: -14px;
}

.main-input {
    width: 100%;
    height: 54px;
    border: 2px solid transparent;
    border-radius: 15px;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease-in-out;
}

.main-input.contact {
    width: 100%;
    height: 52px;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
}

.main-input::placeholder {
    color: var(--gray);
    transition: all 0.3s ease;
    font-size: 13px;
}

.main-input.contact::placeholder {
    color: #b3adad;
    transition: all 0.3s ease;
    font-size: 13px;
}

.contact-color {
    color: #b3adad;
}

.main-input:focus {
    border-color: var(--main);
}

.main-input:focus::placeholder {
    opacity: 0;
}

.iti {
    width: 100%;
}

/*iti*/
.iti__country-list {
    position: absolute;
    left: 0 !important;
    z-index: 2;
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0 0 0 -1px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
    background-color: #fff;
    border: 1px solid #ccc;
    white-space: nowrap;
    max-height: 200px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
}

.tele-edit-read-only .iti__country-list {
    display: none;
}

@media (max-width: 400px) {
    .iti__country-list {
        width: 275px !important;
        overflow: auto;
    }
}

#telephone {
    padding-right: 12px;
    padding-left: 100px;
    /* padding-left: 0 !important; */
}

#telephone-left {
    padding-right: 40px;
    padding-left: 100px;
}

#telephone2 {
    padding-right: 12px;
    padding-right: 100px;
    padding-left: 0 !important;
}

#telephone3 {
    padding-right: 12px;
    padding-right: 100px;
}

.iti--allow-dropdown .iti__flag-container,
.iti--separate-dial-code .iti__flag-container {
    left: 0;
    right: auto;
}

.tele-edit-read-only .iti--allow-dropdown .iti__flag-container,
.tele-edit-read-only .iti--separate-dial-code .iti__flag-container {
    right: 0;
    left: auto;
}

.main-textarea {
    width: 100%;
    border: 1px solid #ddd;
    padding: 10px 12px;
    color: var(--gray);
    border-radius: 4px;
    resize: none;
    outline: none;
    font-size: 14px;
}

.main-textarea.contact {
    width: 100%;
    border: 2px solid #ddd;
    padding: 10px 12px;
    color: var(--gray);
    border-radius: 8px;
    resize: none;
    outline: none;
    font-size: 14px;
}

.main-textarea:focus {
    outline: 2px solid var(--main);
}

.main-textarea::placeholder {
    color: var(--gray);
    transition: all 0.3s ease;
    font-size: 13px;
}

.main-textarea.contact::placeholder {
    color: #b3adad;
    transition: all 0.3s ease;
}

.main-textarea:focus::placeholder {
    opacity: 0;
}

.select2-selection .select2-selection--single {
    height: 48px;
}

.select2-container {
    width: 100% !important;
}

.select2-selection__arrow {
    display: none;
}

.select2-container--default .select2-selection--single {
    height: 54px;
    border: 2px solid #f5f5f5;
    border-radius: 15px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 54px;
    color: var(--gray);
    font-size: 14px;
    padding-right: 12px;
}

.main-input-cont {
    position: relative;
}

.main-float {
    position: absolute;
    top: 41px;
    left: 15px;
    pointer-events: none;
    opacity: 0.8;
}


.select2-container .select2-selection--multiple {
    min-height: 48px;
    border: 1px solid #ddd;
}

.select2-container--default .select2-search--inline .select2-search__field {
    font-size: 14px;
    position: absolute;
    top: 9px;
    right: 16px;
    font-family: "myfont", sans-serif;
    color: var(--gray) !important;
    text-align: right;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #ddd;
    min-height: 48px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 10px 30px;
    background-color: #ecf5f6;
    color: #000;
    border: none;
    border-radius: 15px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    width: 20px;
    height: 20px;
    background-color: red;
    color: var(--color-white);
    border-radius: 50% !important;
    margin-right: 5px;
    transition: all 0.3s ease-in-out !important;
    position: absolute;
    z-index: 2;
    top: 2px;
    left: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: var(--color-white);
    color: red;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--main);
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

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

.pointer-click {
    cursor: pointer;
    pointer-events: auto;
}

.dont-have a {
    color: var(--main) !important;
}

.margin-auto {
    margin-inline: auto;
}

.logo-co-p {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: var(--main);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.logo-co-p img {
    width: 100%;
}

.card-white {
    padding: 26px;
    margin: 20px 0;
    border-radius: 8px;
    background-color: var(--color-white);
}

.small-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

.felex-small {
    display: flex;
    align-items: center;
    gap: 25px;
}

.right-felex {
    display: flex;
    align-items: center;
    gap: 6px;
}

.left-felex {
    width: 180px;
    height: 3px;
    background-color: #e9e9e9;
    transition: all 0.3s ease-in-out;
}

.left-felex.active {
    background-color: var(--main);
}

.circle-spe {
    width: 25px;
    height: 25px;
    border: 1px solid #e9e9e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activate-me {
    background-color: #d5e3f0;
    border-color: var(--main);
}

.activate-spe {
    background-color: var(--main);
    color: var(--color-white);
}

.color-hide {
    color: #e9e9e9;
}

.card-reg-white {
    border-radius: 8px;
    background-color: var(--color-white);
}

.card-reg-title {
    padding: 14px;
    border-bottom: 1px solid #ddd;
}

.flex-sm-bet {
    display: flex;
    align-items: center;
    gap: 20px;
}

.right-go-up {
    background-color: #ececec;
    width: 70px;
    border-radius: 50%;
    border: 4px solid #ddd;
    height: 70px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-product-upload-spe {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #ffb72b;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.new-product-upload-spe .fa-camera {
    font-size: 11px;
}

.right-go-up > img {
    opacity: 0.2;
    width: 26px;
}

.img-new-style {
    width: 100% !important;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    opacity: 1 !important;
}

.inner-reg {
    padding: 5px 20px;
}

.bg-white {
    background-color: var(--color-white);
    color: var(--main);
}

.completed {
    background-color: var(--main);
    color: var(--color-white);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--main);
    color: var(--color-white);
    padding: 8px 25px;
}

.upload-main {
    width: 100%;
    height: 48px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--gray);
}

.uploaded__area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.uploaded__area .file_ {
    width: 90px;
    height: 90px;
    border-radius: 5px;
    margin: 7px;
    position: relative;
}

.uploaded__area .file_ img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.uploaded__area .file_ video {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.uploaded__area .file_ .docs_file {
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #eee;
    color: crimson;
    font-size: 30px;
    position: relative;
}

.uploaded__area .file_ .play-button {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
}

.uploaded__area .file_ .play-button img {
    width: 100%;
    height: 100%;
}

.uploaded__area .file_ .remove_media {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0;
    text-align: center;
    line-height: 22px;
    background-color: crimson;
    color: #fff;
    position: absolute;
    right: 4px;
    top: 4px;
    -webkit-transition: 0.3s all cubic-bezier(0, 0.11, 0.4, 1.29);
    transition: 0.3s all cubic-bezier(0, 0.11, 0.4, 1.29);
}

.uploaded__area .file_ .remove_media:hover {
    background-color: #fff;
    color: crimson;
}

.container-map {
    display: none;
}

.pac-target-input {
    width: 50%;
    position: absolute;
    margin-top: 8px;
    right: 62px;
    z-index: 9;
}

/***************** SiderBar ******************/
/* sidebar */
.logo-dash {
    width: 170px;
}

.sidebar {
    position: fixed;
    width: 240px;
    padding-top: 10px;
    height: 100vh;
    box-shadow: 0 0 1px #f0ecec;
    transition: all 0.8s cubic-bezier(0.68, -0.3, 0.265, 1.3);
    z-index: 1010;
    box-shadow: 0px 1px 4px 1px rgb(0 0 0 / 5%);
    background-color: var(--color-white);
}

.sidebar .close {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--main);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    cursor: pointer;
    display: none;
}

@media (max-width: 991px) {
    .sidebar .close {
        display: flex;
    }
}

.sidebar .content .logo {
    flex-shrink: 0;
}

.sidebar .content .logo img {
    max-height: 110px;
}

.sidebar .links {
    padding: 0px 10px 10px 10px;
    height: calc(100vh - 120px);
    overflow-y: auto;
}

.sidebar .links::-webkit-scrollbar {
    width: 4px;
    max-height: 10%;
    height: 10%;
}

.sidebar .links::-webkit-scrollbar-thumb {
    background-color: var(--main);
    border-radius: 25px;
}

.sidebar .links::-webkit-scrollbar-track {
    border-radius: 25px;
    background-color: #f9f9f9;
    max-height: 10%;
    height: 10%;
    width: 9px;
    max-width: 9px;
}

.sidebar .links > li > a {
    width: 92%;
    margin-inline: auto;
    padding: 8px 10px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    color: #2D303699;
    background: transparent;
    transition: all 0.2s ease;
    position: relative;
    /* z-index: 1; */
}

.sidebar .links > li > a:hover {
    color: #000;
}
.sidebar .links > li > a:hover img{
     transform: scale(1.1);
     transition: all 0.3s ease;

}
.sidebar .links > li > a > .icon-co {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    width: 35px;
    height: 35px;
    transition: all 0.3s ease;
    border-radius: 5px;
    background-color: transparent !important;
}

.sidebar .links > li > a > .icon-co img {
    max-width: 22px;
}

.sidebar .links > li > a.active {
    color: var(--color-white);
}

.col-spe.active img {
    /* filter: grayscale(100%) brightness(45%) sepia(65%) hue-rotate(160deg) saturate(1000%) contrast(0.8); */
    filter: brightness(0) invert(1) !important;


    transition: all 0.4s ease-in-out;
}

a.active img {
    /* filter: grayscale(100%) brightness(45%) sepia(65%) hue-rotate(160deg) saturate(1000%) contrast(0.8); */
    /* filter: brightness(0) invert(1) !important; */

    transition: all 0.4s ease-in-out;
}
a.active .img-active{
    display: block !important;
}
a.active .no-active{
    display: none !important;
}

.item-click.active img {
    /* filter: grayscale(100%) brightness(45%) sepia(65%) hue-rotate(160deg) saturate(1000%) contrast(0.8); */
    filter: brightness(0) invert(1) !important;

    transition: all 0.4s ease-in-out;
}

.spe-link-spe.active .icon-co img {
    /* filter: grayscale(100%) brightness(45%) sepia(65%) hue-rotate(160deg) saturate(1000%) contrast(0.8); */
    filter: brightness(0) invert(1) !important;

    transition: all 0.4s ease-in-out;
}

.sidebar .links > li > a.active:hover {
    color: var(--color-white);
}

.sidebar .links > li > a::before {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background-color: var(--main);
    border-radius: 9px;
    transition: all 0.4s ease;
}

/* .sidebar .links > li > a:hover::before {
    width: 100%;
} */

.sidebar .links > li > a.active::before {
    width: 100%;
}

.sidebar .links > li > a > .icon-right {
    margin-right: auto;
    font-weight: 600;
    font-size: 13px;
}

.sidebar .links .collapse-content {
    overflow: hidden;
    padding: 8px 15px;
    position: relative;
    display: none;
}

.sidebar .links .collapse-content .coll {
    padding: 10px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sec-color);
    font-size: 15px;
    border-radius: 10px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.sidebar .links .collapse-content .coll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    z-index: -1;
    background-color: #f0f0f0;
    transition: all 0.3s ease;
}

.sidebar .links .collapse-content .coll:hover::after {
    width: 100%;
}

.sidebar .links .collapse-content .coll.active {
    background-color: #f0f0f0;
}

.sidebar .links .collapse-content .coll img {
    max-width: 18px;
    /* object-fit: cover; */
}

.sidebar .links .collapse-content .coll .icon-right {
    margin-right: auto;
    font-size: 12px;
}

.sidebar.active-side {
    transform: translateX(330px);
    overflow: hidden;
}

/********************* Navbar *********************/
.navbar-me {
    width: calc(100% - 240px);
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(-240px);
    padding: 14px 0;
    transition: all 0.8s cubic-bezier(0.68, -0.3, 0.265, 1.3);
    z-index: 1000;
    box-shadow: 0px 1px 4px 1px rgb(0 0 0 / 6%);
    background-color: var(--color-white);
}

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

.navbar-me .content .menu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    /* background-color: #f9f9f9; */
    font-size: 17px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* pointer-events: none;
    opacity: 0; */
}

.navbar-me .content .left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.navbar-me .left .not {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    position: relative;
    border-radius: 10px;
    background: transparent !important;
    position: relative;
}

.navbar-me .left .not i {
    font-size: 20px;
}

.navbar-me .left .not a {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: pointer;
}

.navbar-me .left .not .number {
    position: absolute;
    top: 13px;
    right: 3px;
    background-color: red;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
}

.navbar-me .content .left .account {
    display: flex;
    /* align-items: unset; */
    gap: 20px;
    position: relative;
    cursor: pointer;
}

.navbar-me .left .account .profile-img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.navbar-me.active-nav {
    transform: translateX(0px);
    width: calc(100% - 0px);
}

.dot-name {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #0cb70c;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

@media (max-width: 991px) {
    .navbar-me .content .menu {
        opacity: 1;
        pointer-events: auto;
    }
}

/******************** Main Section ********************/

.main-sec {
    transform: translateX(-240px);
    width: calc(100% - 240px);
    padding-top: 100px;
    transition: all 0.8s cubic-bezier(0.68, -0.3, 0.265, 1.3);
    /* transition: all 0.3s ease-in-out; */
    padding-bottom: 50px;
}

.main-sec.active-main {
    width: calc(100%);
    transform: translateX(0px);
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(330px);
        overflow: hidden;
    }

    .sidebar.active-side {
        transform: translateX(0px);
        width: 240px;
    }

    .navbar-me {
        transform: translateX(0px);
        width: calc(100% - 0px);
    }

    .main-sec {
        width: calc(100%);
        transform: translateX(0px);
    }
}

@media screen and (max-width: 330px) {
    .sidebar.active-side {
        width: 240px;
    }
}

.foot-spe {
    color: var(--gray);
    font-size: 12px !important;
    margin-top: 80px;
    padding: 20px;
}

.bottom-t {
    letter-spacing: 1px;
}

.foot-spe a {
    color: #000;
    text-decoration: underline;
    transition: all 0.3s ease-in-out;
}

.foot-spe a:hover {
    color: var(--main);
}

/*edits*/
.logo {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    background-color: var(--main);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    width: 100%;
}

.spe-lo-pad {
    padding: 5px 30px;
}

.flex-sm-gap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.relative-parent {
    position: relative;
}

.search-main {
    width: 340px;
}

.fl-bt {
    background: transparent;
    border: none;
    color: var(--main);
    position: absolute;
    top: 12px;
    left: 10px;
}


/****** drop search *****/
.between-divs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
}

a.between-divs {
    color: black;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
}

a.between-divs:hover {
    color: var(--main);
}

.my-drop-search li:last-child .between-divs {
    border-bottom: none;
}

.my-drop-search {
    position: absolute;
    top: 60px;
    right: 0px;
    z-index: 1;
    /* padding: 6px 14px; */
    border: 1px solid #ddd;
    background-color: var(--color-white);
    border-radius: 7px;
    opacity: 0;
    transition: 0.3s all cubic-bezier(0, 0.11, 0.4, 1.29);
    visibility: hidden;
    transform: scale(0);
    pointer-events: none;
    width: 100%;
    max-height: 300px;
    overflow: auto;
}

.my-drop-search.show-drop {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: scale(1);
}

.my-drop-search .flex-in-drop {
    border-bottom: none;
}

.search-img-sm {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.font-white {
    color: var(--color-white);
}

.flex-in-drop {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #ddd;
}

.my-drop-now li:last-child, 
.my-drop-now-lang li:last-child 
.flex-in-drop {
    border-bottom: none;
}

.flex-in-drop.active {
    background-color: var(--main);
    color: var(--color-white);
}

.red-drop {
    /* color: #9c0b0b; */
    transition: all 0.3s ease-in-out;
}

.red-drop:hover {
    color: red;
}

.navbar-me .left .not {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 12px; */
    width: 48px;
    height: 45px;
    position: relative;
    /* margin-left: 20px; */
    border-radius: 8px;
    background-color: #f5f5f5;
    /* cursor: pointer; */
    position: relative;
}

.navbar-me .left .not img {
    width: 21px;
    height: 21px;
}

.navbar-me .left .not a {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: pointer;
}

.navbar-me .left .not .number {
    position: absolute;
    top: 0px;
    right: 2px;
    background-color: var(--main);
    width: 20px;
    height: 20px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
}

.navbar-me .content .left .account {
    display: flex;

    /* align-items: center; */
}

.navbar-me .left .account img {
    border-radius: 8px;
    width: 45px;
    height: 45px;
}

.navbar-me .left .account .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
}

.navbar-me .left .account .info h3 {
    font-size: 14px;
    color: #202020;
    font-weight: 700;
}

.navbar-me .left .account .info span {
    color: #949494;
    font-size: 11px;
}

.navbar-me.active-nav {
    transform: translateX(0px);
    width: calc(100% - 0px);
}

.sidebar .links > li > .item-click.active::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 0;
    width: 5px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    height: 100%;
    background-color: var(--main);
    display: none;
}

.sidebar .links > li > a.active::after {
    display: none;
    content: "";
    position: absolute;
    right: -10px;
    top: 0;
    width: 5px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    height: 100%;
    background-color: var(--main);
}

.drop-header {
    color: #000;
}

.sidebar .links > li > .item-click {
    width: 92% !important;
    margin-inline: auto !important;
    padding: 8px 10px;
    /* margin-bottom: 8px; */
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px !important;
    color: #2D303699;
    background: transparent;
    transition: all 0.2s ease;
    position: relative;
    /* z-index: 1; */
}

.sidebar .links > li > .item-click:hover {
    color: #000;
    /* transform: scale(1.1); */
}

.sidebar .links > li > .item-click > .icon-co {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    width: 35px;
    height: 35px;
    transition: all 0.3s ease;
    border-radius: 5px;
    background-color: #f5f5f5;
}

.sidebar .links > li > .item-click > .icon-co img {
    max-width: 22px;
}

.sidebar .links > li > .item-click.active {
    color: var(--color-white);
}

.sidebar .links > li > .item-click {
    width: 92% !important;
    margin-inline: auto !important;
    padding: 8px 10px;
    /* margin-bottom: 8px; */
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px !important;
    color: #2D303699;
    background: transparent;
    transition: all 0.2s ease;
    position: relative;
    /* z-index: 1; */
}

.sidebar .links > li > .item-click:hover {
    color: #000;
}
.sidebar .links > li > .item-click:hover img{
    transform: scale(1.1);

}

.sidebar .links > li > .item-click > .icon-co {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    width: 35px;
    height: 35px;
    transition: all 0.3s ease;
    border-radius: 5px;
    background-color: transparent;
}

.sidebar .links > li > .item-click > .icon-co img {
    width: 20px;
    height: 20px;
}

.sidebar .links > li > .item-click.active {
    color: var(--color-white);
}

.sidebar .links > li > .item-click > .icon-right {
    margin-right: auto;
    font-weight: 600;
    font-size: 13px;
}

.sidebar .links > li > .item-click::before {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background-color: var(--main);
    border-radius: 9px;
    transition: all 0.4s ease;
}

/* .sidebar .links > li > .item-click:hover::before {
    width: 100%;
} */

.sidebar .links > li > .item-click.active::before {
    width: 100%;
}

.item-click {
    cursor: pointer;
}

/* spe drop collapse */
.orders-show {
    padding: 5px 20px;
}

.right-vsm {
    display: flex;
    align-items: center;
    gap: 7px;
}

.flex-v-sm {
    width: 100%;
    display: block;
    padding: 6px 8px;

    color: var(--gray);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    font-size: 14px;
}

.flex-v-sm.active {
    background-color: #e7ecf5;
}

.right-vsm img {
    max-width: 16px;
}

.orders-show,
.setting-show {
    display: none;
    padding: 4px 20px;
}

.font-bold {
    font-weight: 700;
}

.reset-btn {
    border: none;
    outline: none;
}

.light-b {
    background-color: transparent;
    border: 1px solid var(--main);
    color: var(--main);
}

.modal-body {
    padding: 1.6rem;
}

.main-redious {
    border-radius: 24px !important;
}

/*start notification page*/
.noti-box {
    display: flex;
    gap: 15px;
    padding: 15px 25px;
    border-radius: 8px;
    background-color: var(--color-white);
    transition: all 0.3s ease-in-out;
    border: 1px solid transparent;
}

.noti-box-right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid #f5f5f5;
    color: var(--color-white);
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--main);
}

.noti-box-right .fa-bell {
    font-size: 24px;
}

.flex-noti {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

.noti-text {
    font-size: 16px;
}

/* add animation to notification bell */
.notification.active .fa-bell {
    -webkit-animation: bell-animation 4s infinite ease-in-out;
    animation: bell-animation 4s infinite ease-in-out;
}

@-webkit-keyframes bell-animation {

    0%,
    100% {
        transform: rotate(30deg);
    }

    50% {
        transform: rotate(-30deg);
    }
}

@keyframes bell-animation {

    0%,
    100% {
        transform: rotate(30deg);
    }

    50% {
        transform: rotate(-30deg);
    }
}

.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*end  notification page*/
.pointer-click {
    cursor: pointer;
}

a.noti-box:hover {
    color: #000;
    border: 1px solid var(--main);
}

.abs-remove {
    color: red;
    position: absolute;
    top: 8px;
    left: 12px;
    z-index: 2;
}

.loop-noti {
    position: relative;
}

/* start tabele .......................................................... */
.table thead th {
    font-weight: normal;
    background: #FCFDFD;

}

.table td {
    border-top: none !important;
}

.length_seclcet {
    display: none !important;
}

.dataTables_length {
    display: none !important;
}

table {
    white-space: nowrap !important;
}

.delete-tb {
    border: 1px solid #dc3545 !important;
    border-radius: 5px !important;
}

.table-head {
    background-color: var(--color-white) !important;
    color: #000 !important;
    border-bottom: 1px solid #ddd !important;
}

table.dataTable td,
table.dataTable th {
    vertical-align: middle;
}


.overflowx_auto {
    overflow-x: auto;
    overflow-y: clip;
    /* padding: 10px 0; */
}

.table td,
.table th {
    vertical-align: middle !important;
}

thead {
    background-color: #eee;
}

.table-condensed thead {
    background-color: unset;
}

.table-btn-spe {
    padding: 12px 0;
    display: block;
    width: 80%;
    margin-right: auto;
    min-width: 100px;
    border-radius: 7px;
    color: var(--color-white);
    border: none;
    outline: none;
    font-size: 14px;
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
}

.danger-h:hover {
    color: red !important;
}

.table-btn-spe.danger-bg {
    background-color: red;
}

.table-btn-spe.main-bg {
    background-color: var(--main);
}

tbody {
    background: #fff;
    border-radius: 20px;
}

tbody tr:nth-child(even) {
    background: #fff;
}

tbody,
thead {
    border-radius: 6px;
}

.drop-links-m {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 10px;
    gap: 8px;
    border-bottom: 1px solid #ddd;
    width: 100%;
}

.drop-links-m:last-child {
    border-bottom: none;
}

.drop-links-m .ico-drop-l {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*edits*/
.drop-icon {
    cursor: pointer;
}

table tbody .drop-co {
    position: relative;
}

.drop-down {
    position: absolute;
    /* bottom: -70px; */
    left: 20px;
    padding: 0 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1), -3px -3px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(15px);
    transition: all 0.2s linear;
    z-index: 100;
    transform-origin: top left;
    transform: scale(0);
}

table tbody .drop-co {
    position: relative;
}

.show-drop-res {
    transform: scale(1);
}

.table td,
.table th {
    padding: 13px;
}
.table th {
    color: #2D3036;
}

.table td {
    padding: 18px 5px;
    color: #2D3036;
}
.table td .gray-col{
    color: #2D3036;

}

.shadow-table {
    box-shadow: 0px 1px 4px 1px rgb(0 0 0 / 5%);
    border-radius: 6px;
    background-color: var(--color-white);
}

.drop-links-m.green {
    color: #45d44f;
}

.drop-links-m.green .ico-drop-l {
    background-color: #e9faea;
}

.drop-links-m.red {
    color: #ed3838;
}

.drop-links-m.red .ico-drop-l {
    background-color: #fef0f0;
}

.over-table {
    overflow: auto;
    border-radius: 10px;
}

tr {
    border-bottom: 1px solid #f5f5f5 !important;
}

tbody,
td,
tfoot,
th,
thead,
tr:last-child {
    border-bottom: none !important;
}

.action-needed {
    width: 100px;
    margin-inline: auto;
    padding: 8px;
    display: block;
    border-radius: 5px;
    font-size: 13px;
}

.success-b {
    background-color: #ccf0eb;
    color: #33c4af;
}

.danger-b {
    background-color: #fcd7d4;
    color: #f04231;
}

.warning-b {
    background-color: #ffeddd;
    color: #ffc189;
}

.primary-b {
    background-color: #e1ecfb;
    color: #83b1ec;
}

.nodata-founded {
    /* min-height: 240px; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


/* start login page */
.login-page {
    width: 100%;
    height: 100vh;
    min-height: 550px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    box-shadow: 0px 4px 24px 0px #00000014;

    backdrop-filter: blur(27px);
    border-radius: 45px;
    background: #FFFFFF99;
    padding: 70px 60px;
    /* font-size: 14px !important; */
}

.logo-login img {
    max-width: 250px;
}

/* end login page */
.search-form .main-input {
    border: 1px solid #ddd;
    height: 48px;
}


.no-search .select2-search {
    display: none;
}

.flex-main-filter {
    display: flex;
    font-size: 14px;
}

.filter-main .select2-container--default .select2-selection--single .select2-selection__rendered,
.filter-main .select2-container--default .select2-selection--single {
    min-width: 120px;
    max-width: 250px;
    border-radius: 0 !important;
    border: none !important;
    height: 50px;
    line-height: 50px;
    direction: rtl;
    padding-left: 30px;
}

.select2-search__field {
    border: 1px solid #ddd;
    outline: none !important;
    direction: rtl;
    padding: 3px;
}

.filter-main .main-float {
    top: 15px;
}

.style-div {
    padding: 10px 15px;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray) !important;

}

.flex-main-filter > div:not(:last-child) {
    max-height: 50px;
    border-left: 1px solid #ddd;

}

.filter-btn {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    height: 50px;
    min-width: 100px;
    transition: all 0.3s ease-in-out;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.icon-filter {
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    /* line-height: 54px; */
}

.filter-input input {
    border-radius: 0 !important;
    height: 50px;
    border: none !important;
    max-width: 150px;
}

.flatpickr-input:disabled {
    background-color: #fff;
    cursor: not-allowed;
    opacity: 0.9;
}

.plus-b {
    background-color: var(--color-white);
    color: var(--main);
    padding: 4px;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.g-1 {
    gap: 12px !important;
}

.card-main {
    border-radius: 40px;
    background-color: #fdfdfd;
    box-shadow: 5px 10px 20px 0px #D1D8D72E;
    overflow: hidden;

}

.card-title {
    text-align: center;
    padding: 15px;
    border-bottom: 1px solid #D5D5D5;
    background: #FCFDFD;
    font-size: 20px;
    font-weight: 600;

    /* border: 0.6px solid #D5D5D5 */
}

.card-body-main {
    padding: 40px 30px;
}

.font14 {
    font-size: 14px;
}

.modal-img-m {
    max-width: 200px;
}

/* wallet */
.pay-sm-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    color: #000;
    cursor: pointer;
    height: 100%;
}

.pay-sm-card:has(input:checked) {
    border-color: var(--main);
    background-color: #edf2ff;
}

.payment-img img {
    max-width: 60px;
}

.g-sm {
    gap: 6px;
}

.sm-image {
    max-width: 28px;
}

.modal-qr #my-qr-reader {
    width: 100%;
}

.html5-qrcode-element {
    line-height: 23px;
    display: block;
    text-align: center;
    min-width: 160px;
    padding: 10px 6px;
    margin-top: 10px;
    background-color: var(--main);
    color: var(--color-white);
    border: 1px solid transparent;
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
}

.modal-qr #my-qr-reader video {
    width: 100%;
}

/* #html5-qrcode-anchor-scan-type-change{
    display: none !important;
} */
#my-qr-reader {
    display: none;
}


.orange-b {
    background-color: #ffeddd;
    color: #ffa756;
}

.color-or {
    color: #ffa756;

}

.left .action-needed {
    border-radius: 15px;
}

.flex-bet-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 40px;
    border-bottom: 2px solid #f5f5f5;
}

.flex-bet-card > div {
    flex-shrink: 0;
}

.dots {
    flex-grow: 1;
    border-bottom: 1px dashed #ddd;
}

.flex-bet-card.color-or {
    border-bottom: none;
    border-top: 1px solid #ddd;
}

.font16 {
    font-size: 16px;
}

.code-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    gap: 20px;
    direction: ltr;
}

.code {
    caret-color: var(--orange);
    border-radius: 5px;
    font-size: 19px;
    height: 50px;
    width: 50px;
    border: 1px solid #eee;
    margin: 1%;
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
    transition: all 0.3s ease-in-out;
    outline: none;
}

.code:focus {
    border: 1px solid var(--main);
}

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

.trans-button {
    background: transparent;
    border: none;
}

:disabled {
    cursor: not-allowed !important;
}

.flex-sm-bet {
    display: flex;
    align-items: center;
    gap: 20px;
}

.right-go-up {
    background-color: #ececec;
    width: 122px;
    border-radius: 50%;
    border: 4px solid #ddd;
    height: 122px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-product-upload-spe {
    position: absolute;
    bottom: -21px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: var(--main);
    border: 4px solid var(--color-white);
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.new-product-upload-spe .fa-camera {
    font-size: 19px;
}

.right-go-up > img {
    opacity: 0.2;
    width: 26px;
}

.img-new-style {
    width: 100% !important;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    opacity: 1 !important;
}

.inner-reg {
    padding: 12px 40px;
}

.bg-white {
    background-color: var(--color-white);
    color: var(--main);
}

.completed {
    background-color: var(--main);
    color: var(--color-white);
}

/*switch*/
.switch {
    width: 50px;
    cursor: pointer;
}

.switch .main-div {
    width: 50px;
    padding: 5px 6px;
    background-color: #ddd;
    border-radius: 25px;
}

.switch .main-div span {
    display: block;
    width: 15px;
    height: 15px;
    background-color: #f8f8f8;
    border-radius: 50%;
    transition: all 0.3s ease;
    transform: translateX(-22px);
}

.switch-con input:checked ~ .switch .main-div span {
    transform: translateX(0px);
    background-color: #fff;
}

.switch-con input:checked ~ .switch .main-div {
    background-color: var(--main);
}

.card-boreder {
    padding: 15px 14px;
    border-radius: 15px;
    border: 2px solid #f5f5f5;
    font-size: 13px !important;
}

.my-lab {
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    #my-qr-reader {
        display: block;
    }

    /* .modal-qr .modal-img-m{
        display: none;
    } */
    .card-boreder .row > div {
        margin-bottom: 10px;
    }
}

.main-card-home {
    padding: 16px;
    border-radius: 15px;
    background-color: var(--color-white);
    box-shadow: 0px 4px 24px 0px #00000014;
    height: 100%;
}

.flex-bet-card-main {
    display: flex;
    justify-content: space-between;
    gap: 5px;

}

.num-bigger {
    font-size: 25px;
    font-weight: 600;
}

.flex-bet-card-btm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.green-col {
    color: #2ac670;
}

.red-col {
    color: #EF3826;
}
.not-paid{
    font-weight: 700;
    min-width: 110px;
    text-align: center;
}

.only-style-img {
    width: 60px;
    height: 60px;
    padding: 4px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-chart {
    padding: 16px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0px 4px 24px 0px #00000014;
}

.flex-charts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-inline: 20px;
}

.flex-charts select {
    width: 160px;
    padding: 8px;
    border-radius: 8px;
    outline: none;
    background: #FCFDFD;
    border: 0.6px solid #D5D5D5;
    color: #2B303466;
    font-size: 14px;
}

.custom-tool {
    padding: 5px;
    width: 120px;
    background-color: var(--main);
    color: #fff;
    text-align: center;
}

.flex--inputs-check {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 10px;
    background: #F4F7F9;
    padding: 8px;
}

.flex--inputs-check label {
    border-radius: 8px;
    min-width: 60px;
    padding: 6px;
    text-align: center;
    margin-bottom: 0 !important;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.flex--inputs-check label:has(input:checked) {
    background-color: #fff;
}

tspan {
    font-family: "myfont", sans-serif !important;
    color: var(--gray) !important;
}

.card-title-def {
    padding: 25px 20px;
    border-bottom: 1px solid #ddd;
}

.card-last {
    background-color: var(--color-white);
    position: relative;
    border-radius: 20px;
    box-shadow: 0px 4px 24px 0px #00000014;
    /* height: 100%; */
    overflow: hidden;
}

.card-last .flex-charts {
    padding: 14px 20px;
}
.card-last .flex-charts:not(.all-money) {
    color: #2D3036;

}
.all-money {
    border-top: 1px solid #ddd;
    font-weight: bold;
}

.abs-img-top {
    position: absolute;
    top: -20px;
    left: -20px;
}

.abs-img-top img {
    max-width: 120px;
    padding: 20px;
    background-color: #fbf9fc;
    border-radius: 50%;
    padding-bottom: 10px;
}
.name-trance{
    transform: translateY(-5px);
}
.dot-pro{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--main);
    /* display: inline-block; */
    border: 2px solid #fff;
    position: absolute;
    bottom: 5px;
    right: 2px;
    z-index: 1;
}
html[lang="en"] {
    .dot-pro {
        right: auto;
        left: 2px;
    }
}
.flex-bet-card-btm > div {
 font-size: 13px;
 font-weight: 600;
}
.icon-pro {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    border: 1px solid #ddd;
    color: #ddd;
    transform: translateY(5px);
}

.my-drop-now,.my-drop-now-lang {
    position: absolute;
    top: 60px;
    /* right: -40px; */
    right: 0;
    z-index: 1;
    /* padding: 6px 14px; */
    border: 1px solid #ddd;
    background-color: var(--color-white);
    border-radius: 7px;
    opacity: 0;
    transition: 0.3s all cubic-bezier(0, 0.11, 0.4, 1.29);
    visibility: hidden;
    transform: translateY(14px);
    pointer-events: none;
    width: 200px;
}

.my-drop-now.show-drop,.my-drop-now-lang.show-drop {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0px);
}

.flex-in-drop {
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid #ddd;
}

.my-drop-now li:last-child,.my-drop-now-lang li:last-child .flex-in-drop {
    border-bottom: none;
}

.flex-in-drop.active {
    background-color: var(--main);
    color: var(--color-white);
}

.red-drop {
    /* color: #9c0b0b; */
    transition: all 0.3s ease-in-out;
}

.red-drop:hover {
    color: red;
}

@media (max-width: 767px) {
    .logo-login img {
        max-width: 180px;
    }

    .noti-box-right .fa-bell {
        font-size: 14px;
    }

    .noti-box-right {
        width: 44px;
        height: 44px;
    }

    .my-drop-now ,.my-drop-now-lang{
        top: 54px;
        width: 180px;
        right: -90px;
    }
}

.flex-in-drop img {
    object-fit: unset !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}

.navbar-me .left .not.search-mmain {
    display: none;
}

@media screen and (max-width: 1024px) {
    .search-form {
        position: fixed;
        top: 0;
        z-index: 333;
        margin-bottom: 0;
        transition: all 0.8s cubic-bezier(0.68, -0.3, 0.265, 1.3);
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        left: 0;
        width: 100%;
        transform: translatey(-100%);
        background-color: #273142;
        padding: 10px 45px;
    }

    .search-form.active {
        top: 100%;
        margin-inline: auto;
    }

    .navbar-me .left .not {
        width: 38px;
        height: 38px;
    }

    .navbar-me .left .not i {
        font-size: 16px;
    }

    .navbar-me .content .left .account {
        gap: 8px;
    }

    .navbar-me .left .not.search-mmain {
        display: flex;
    }

    .search-main {
        width: 90%;
    }

    .flex-main-filter {
        flex-wrap: wrap;
        gap: 5px;
    }
}

.search-mmain {
    cursor: pointer;
}

@media screen and (max-width: 767px) {
    .iti__country {
        white-space: break-spaces;
    }

    .iti__country-list {
        left: 50px !important;
    }

    .header-language, .header-mode {
        width: auto;
    }

    .navbar-me .content .left {
        gap: 12px;
    }

    .navbar-me .left .account .profile-img {

        width: 40px;
        height: 40px;

    }

    .icon-pro {
        display: none;
    }

    .navbar-me .left .account .info h3 {
        font-size: 12px;
    }

    .card-chart {
        padding: 6px;
    }

    h5 {
        font-size: 12px;
    }

    .noti-box {
        padding: 10px 6px;
    }

    .search-form {
        border-radius: 15px;
    }

    .card-body-main {
        padding: 12px;
    }

    .main-btn {
        min-width: 135px;
    }

    .login-card {
        padding: 14px;
    }

    .message-single {
        width: 100% !important;
    }

    audio {
        width: 220px;
    }

    .chat-body {
        padding: 10px !important;
    }

    .chat-header {
        flex-wrap: wrap;
    }

    .chat-messages {
        padding-inline: 0 !important;
        margin-bottom: 40px;
    }
}

.pay-sm-card {
    min-height: 56px;
    border-radius: 12px;
}

.header-mode, .header-language {
    cursor: pointer;
}

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999999;
    background-color: white;
    overflow: hidden;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

.loader-container .loader {
    width: 70px;
    height: 70px;
    margin: auto;
    position: relative;
}

.loader-container .loader:before {
    content: "";
    width: 70px;
    height: 5px;
    background: #000;
    opacity: 0.25;
    position: absolute;
    top: 83px;
    left: 0;
    border-radius: 50%;
    animation: shadow 0.5s linear infinite;
}

.loader-container .loader:after {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--main);
    animation: bxSpin 0.5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
}

@keyframes bxSpin {
    17% {
        border-bottom-right-radius: 3px;
    }
    25% {
        transform: translateY(9px) rotate(22.5deg);
    }
    50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }
    75% {
        transform: translateY(9px) rotate(67.5deg);
    }
    100% {
        transform: translateY(0) rotate(90deg);
    }
}

@keyframes shadow {
    0%, 100% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.2, 1);
    }
}

@media screen and (max-width: 350px) {
    .navbar-me .left .account .info {
        display: none;
    }

    .my-drop-now,.my-drop-now-lang {
        right: -140px;
    }
}

.choose-main {
    padding: 14px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    box-shadow: 0px 4px 45px 0px #0000000A;
    background-color: #fff;
    color: var(--gray);
    font-size: 13px;

}

.iti--separate-dial-code .iti__selected-flag::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 15px;
    background-color: #ddd;
    z-index: 99;
    right: -10px;
}

.iti__selected-flag {
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    gap: 5px;
}

.flex-table-btns {
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    margin-inline: auto;
    justify-content: center;
    background: #fff;
    border: 1px solid #ddd;

}

.flex-table-btns button, .flex-table-btns a {
    padding: 10px;
    width: 100%;
    display: block;
    background: #FAFBFD;

}

.single-btn {
    width: 100%;
}

.single-btn:first-child {
    border-left: 1px solid #ddd;
}

.flex-table-btns img {
    max-width: 20px;
}

.img-table {
    width: 70px;
    height: 70px;
    border-radius: 5px;
}

.single-btn-main, .single-btn-main a {
    width: 70px;
    border: 1px solid #f5f5f5;
    border-radius: 6px;
}

.flex-table-btns:has(.single-btn-main) {
    border: none;
}

.pointer-none {
    pointer-events: none;
}

.flex-input-shape {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
    padding: 14px;
    border: 2px solid #f5f5f5;
    border-radius: 15px;
}

.flex-input-shape img {
    max-width: 40px;
}

.under-dec {
    text-decoration: underline;
    color: var(--main);
    font-size: 13px;
}

.pad-main {
    padding: 22px;
}

/* chat style */

.chat-user {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gray-6 {
    color: #666666;
}

.chats-top {
    padding: 20px;
}

.single-chat {
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.chat-time {
    flex-shrink: 0;
}

.chats-show {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* .all-chats {
  border-left: 1px solid #ddd;
} */
.single-chat p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-single {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 60%;
}

.chat-body {
    padding: 30px 15px;
}

.chat-date {
    font-size: 12px;
    color: #666666;
    padding: 6px 14px;
    background-color: #f5f5f6;
    border-radius: 25px;
}

.message-contain {
    padding: 20px;
    background-color: var(--main);
    color: #fff;
    border-radius: 12px;
    border-bottom-right-radius: 0px;
    width: 100%;
}

.reciever {
    direction: ltr;
    margin-right: auto;
}

.reciever .message-contain {
    background-color: #ddd;
    color: #000;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 0px;
    text-align: left;
}

.font10 {
    font-size: 10px !important;
}

.font-10 {
    font-size: 10px !important;
}

.un-styled-btn {
    border: none;
    outline: none;
    background: transparent;
}

.chat-senders {
    display: flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    bottom: 5px !important;
    width: 95%;
    padding: 6px;
    /* background-color: #fff; */
}

.chat-body {
    position: relative;
    padding-bottom: 70px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 5px 10px 20px 0px #D1D8D72E;
}

.chat-senders .input-chat-m {
    width: 100%;
    border: 1px solid #f5f5f5;
    background-color: #fff;
}

.chat-messages {
    min-height: 500px;
    height: calc(100vh - 365px);
    overflow-y: auto;
    padding: 12px;
}

.un-styled-btn, .label-chat {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    outline: none;
    background: var(--main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
    font-size: 18px;
}

.label-chat {
    background-color: #ddd;
    color: #000;

}

.label-chat.voice-main {
    background: transparent;
    color: var(--gray);
}

.send-message {
    display: none;
}

/* end style for all */
.message-contain img {
    width: 120px;
    height: 120px;
    border-radius: 8px;
}

.pdf-style {
    width: 120px !important;
    height: 120px !important;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #f5f5f5;
    border: 1px solid red;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    overflow: hidden;
}

.flex-row-sett {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0px 1px 4px 1px rgb(0 0 0 / 8%);
}

.user-main-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-header {
    padding: 10px;
    border-bottom: 2px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.voice-m {
    display: none;
}
.icon-co i{
    color: #2D303699 !important;
}
.sidebar a.active i{
    color: var(--color-white) !important;
}

.img-active{
    display: none !important;
}



.filter-main .select2-container--default .select2-selection--single .select2-selection__rendered, .filter-main .select2-container--default .select2-selection--single{
    color: #2D3036 !important;
    font-weight: 600;
}
.filter-input input::placeholder , .style-div{
    color: #2D3036 !important;
    font-weight: 600 !important;
    font-size: 14px;
}
.bigger-im{
    width: 100px;
    height: 67px;
    max-width: 100% !important;
}
.main-show-in input{
   height: 70px;
}

/* add dark mode */
body.dark-layout {
    background-color: var(--dark);
    color: #fff !important;
}

body.dark-layout .sidebar, body.dark-layout .navbar-me {
    background-color: var(--dark-ligth);
}

body.dark-layout a, body.dark-layout h1, body.dark-layout h3, body.dark-layout h6, body.dark-layout label, body.dark-layout p, body.dark-layout .gray-col {
    color: var(--color-white) !important;
}

body.dark-layout .main-card-home, body.dark-layout .my-drop-now,body.dark-layout .my-drop-now-lang, body.dark-layout .card-chart, body.dark-layout .card-last {
    background-color: var(--dark-ligth);
}

body.dark-layout .main-input {
    background-color: var(--dark-ligth3);
    color: var(--color-white) !important;
    border-color: var(--dark-ligth3);
}

body.dark-layout tspan {
    fill: var(--color-white) !important;
}

#SvgjsTspan2982 {
    color: var(--color-white) !important;
}

body.dark-layout .table td {
    background-color: var(--dark-ligth);
    border-bottom: 2px solid var(--dark-ligth3) !important;
}

body.dark-layout .table th, body.dark-layout .table-head, body.dark-layout .shadow-table {
    background-color: var(--dark-ligth3) !important;
    border-bottom: 2px solid var(--dark-ligth3) !important;
    color: var(--color-white) !important;
}

body.dark-layout .select2-container--default .select2-selection--single {
    background-color: var(--dark-ligth3);
}

body.dark-layout .flex-main-filter > div:not(:last-child) {
    border-color: var(--dark-ligth3);
}

body.dark-layout .style-div, body.dark-layout .filter-btn, body.dark-layout .flex-table-btns, body.dark-layout .flex-table-btns button, body.dark-layout .select2-container--open .select2-dropdown--below {
    background-color: var(--dark-ligth3) !important;
    color: var(--color-white) !important;
}

body.dark-layout .main-input::placeholder {
    color: var(--color-white);
}

body.dark-layout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-white);
}

body.dark-layout .flex-table-btns, body.dark-layout .flex-table-btns button {
    border-color: var(--dark-ligth3);
}

body.dark-layout .select2-container--open .select2-dropdown--below {
    border: none !important;
}

body.dark-layout .select2-search--dropdown .select2-search__field {
    background-color: var(--dark-ligth);
    color: var(--color-white);
}

body.dark-layout .sidebar .icon-co {
    background-color: transparent !important;
    color: var(--color-white) !important;
}

/* body.dark-layout .sidebar .links > li > a > .icon-co img {
    filter: brightness(0) invert(1) !important;
} */

body.dark-layout .log-out-red {
    color: var(--color-white) !important;

}

body.dark-layout .card-main, body.dark-layout .modal-content {
    background-color: var(--dark-ligth);
}

body.dark-layout .pay-sm-card:has(input:checked) {
    color: #000 !important;
}

body.dark-layout .choose-main {
    background-color: var(--dark-ligth3);
}

body.dark-layout .iti__country-list {
    background-color: var(--dark-ligth);
    border-color: var(--dark-ligth3);
}

body.dark-layout .select2-container--default .select2-selection--single, body.dark-layout .card-boreder, body.dark-layout .my-drop-now, body.dark-layout .my-drop-now-lang, body.dark-layout .flex-in-drop {
    border-color: var(--dark-ligth3);
}

body.dark-layout .switch .main-div {
    background: var(--dark-ligth3);

}

body.dark-layout .noti-box {
    background-color: var(--dark-ligth);
}

body.dark-layout .flatpickr-calendar {
    background-color: var(--dark-ligth2) !important;
    border-color: var(--dark-ligth3) !important;
    color: var(--color-white) !important;
}

body.dark-layout .flatpickr-calendar span, body.dark-layout .flatpickr-current-month {
    color: var(--color-white) !important;

}

body.dark-layout .flatpickr-months .flatpickr-prev-month svg, body.dark-layout .flatpickr-months .flatpickr-next-month svg {
    fill: #fff;
}

body.dark-layout .flex--inputs-check {
    background-color: var(--dark-ligth2);
}

body.dark-layout .flex--inputs-check label:has(input:checked) {
    color: #000 !important;
}

body.dark-layout .flex-charts select {
    background-color: var(--dark-ligth2);
    color: var(--color-white);
}

body.dark-layout .code {
    background-color: var(--dark-ligth2);
    color: var(--color-white);
    border-color: var(--dark-ligth3) !important;

}

body.dark-layout .flex-in-drop:hover {
    background-color: var(--dark-ligth2);
}

body.dark-layout .flex-bet-card, body.dark-layout .card-title {
    border-color: var(--dark-ligth3) !important;
}

body.dark-layout .flex-table-btns button, body.dark-layout .flex-table-btns a {
    background-color: var(--dark-ligth2);
    color: var(--color-white);
    border-color: var(--dark-ligth3) !important;
}

body.dark-layout .single-btn:first-child {
    border-color: var(--dark-ligth3) !important;

}

body.dark-layout .flex-table-btns:has(.single-btn-main) {
    background: transparent !important;
}

body.dark-layout .flex-input-shape {

    border-color: var(--dark-ligth3) !important;
    background-color: var(--dark-ligth3);
}

body.dark-layout .chart-main {
    color: #000 !important;
}

body.dark-layout .chat-body {
    background-color: var(--dark-ligth) !important;
}

body.dark-layout .chat-senders .input-chat-m {
    background-color: var(--dark-ligth2);
    border-color: var(--dark-ligth3) !important;
}

body.dark-layout textarea {
    color: var(--color-white) !important;
}

body.dark-layout textarea::placeholder {
    color: var(--color-white) !important;
}

body.dark-layout .label-chat:has(input) {
    background-color: var(--dark-ligth2) !important;
}

body.dark-layout .chat-header {
    border-color: var(--dark-ligth3) !important;
    border-width: 4px;
}
body.dark-layout .card-title{
    background-color: var(--dark-ligth) !important;
}

body.dark-layout .filter-main .select2-container--default .select2-selection--single .select2-selection__rendered, body.dark-layout .filter-main .select2-container--default .select2-selection--single{
    color: #fff !important;
}
body.dark-layout .icon-filter img{
    filter: brightness(0) invert(1) !important;
}
body.dark-layout .filter-input input::placeholder , body.dark-layout .style-div ,body.dark-layout .icon-co i{
    color: #fff !important;
    /* opacity: ; */
}
body.dark-layout .img-active{
    display: block !important;
    /* filter: brightness(0) invert(1) !important; */
}
body.dark-layout .no-active{
    display: none !important;
}
body.dark-layout .loader-container , body.dark-layout .loader-container .loader{
    background-color: var(--dark-ligth) !important;
}
body.dark-layout .card-last .flex-charts:not(.all-money){
    color: #fff;
}
body.dark-layout  .flatpickr-monthDropdown-months{
    background-color: var(--dark-ligth2) !important;
    color: #fff !important;
}
.loader-container{
    transition: none !important;
}
.spin {
    animation: spin 1s linear infinite;
    color: #fff;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .voice-note-container {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 20px;
    padding: 10px;
    max-width: 400px;
    min-width: 360px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    position: relative;
    gap: 10px;
}

.voice-note-container>div:nth-child(2) {
    flex-grow: 1 !important;
}

.play-button {
    width: 40px;
    height: 40px;
    background-color: #4285f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
}


.time-stamp {
    font-size: 12px;
    margin-left: 10px;
    color: #888;
}

/* new chat style */
.message-time{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: var(--gray);
    padding: 2px;
}
.message-contain{
    background-color: #f5f5f5 !important;
    color: #000 !important;
}
.reciever .message-contain{
    background-color: var(--main) !important;
    color: #fff !important;
}
.message-single{
    width: 70%;
}
.chat-header{
    background-color: #fcfdfd !important;
}
.chat-messages{
    padding: 20px !important;
}
.chat-senders{
    width: 100%;
}
.message-single .message-contain img{
    width: auto;
    height: auto;
    max-width: 300px !important;
}
/* .chat-messages{
    min-height: 650px !important;
    margin-bottom: 75px !important;
} */
.message-contain.fit-width{
    width: fit-content;

}
.voice-m{
    position: absolute;
    top: 0;
    right: 0;
    left: 100px;
    width: calc(100% - 188px);
    height: 100%;
}


.loader-chat {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
  }

  .bar {
    width: 10px;
    height: 70px;
    background: hsl(209, 100%, 50%);
    display: inline-block;
    transform-origin: bottom center;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    animation: loader8913 1.2s linear infinite;
  }

  .bar1 {
    animation-delay: 0.1s;
  }

  .bar2 {
    animation-delay: 0.2s;
  }

  .bar3 {
    animation-delay: 0.3s;
  }

  .bar4 {
    animation-delay: 0.4s;
  }

  .bar5 {
    animation-delay: 0.5s;
  }

  .bar6 {
    animation-delay: 0.6s;
  }

  .bar7 {
    animation-delay: 0.7s;
  }

  .bar8 {
    animation-delay: 0.8s;
  }

  @keyframes loader8913 {
    0% {
      transform: scaleY(0.1);
    }

    50% {
      transform: scaleY(1);
      background: rgb(16, 70, 151);
    }

    100% {
      transform: scaleY(0.1);
      background: transparent;
    }
  }
  .radious-div{
    width: 50px !important;
    height: 50px !important;
    min-width: auto;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    border: 1px solid transparent !important;
    color: #fff;
  }
  .radious-div:hover{
    color: red !important;

  }
  .send-message{
    min-width: 100px !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px !important;
  }
  .files-up{
    display: flex;
    align-items: center;
    gap: 22px;
    padding-inline: 10px;
    color: var(--gray);
    font-size: 17px !important;
  }
  .chat-body{
    overflow: hidden;
  }


  /* dark mode */
  body.dark-layout .chat-header{
    background-color: var(--dark-ligth2) !important;
    border-color: var(--dark-ligth3) !important;
}
body.dark-layout .time-main , body.dark-layout a.pdf-style{
    color: #000 !important;
    padding-inline: 2px;
}
body.dark-layout .flex-v-sm.active{
    background-color: var(--dark-ligth3) !important;
}
body.dark-layout .sidebar .links > li > .item-click{
    color: #fff !important;
}

@media screen and (max-width: 600px) {
    .voice-note-container{
        min-width: 270px !important;
    }
    .chat-senders{
        width: 95%;
    }
    .mob-none{
        display: none !important;
    }
    .bar {
        height: 50px;
    }

    .flex-bet-card-qr {
        flex-direction: column;
        text-align: center;
    }

    .flex-bet-card-qr svg {
        width: 280px !important;
        max-width: 100%;
        display: block;
        margin: 10px auto;
    }

}
.pagination {
    justify-content: center !important;
    margin-top: 15px;
    gap: 8px !important;
    margin-bottom: 20px;
}
.page-item .page-link {
    border-radius: 4px !important;
    padding: 4px;
    min-width: 42px !important;
    height: 42px !important;
    text-align: center;
    line-height: 30px;
    background-color: #dedede;
    color: #3a3939;
}
.page-item.active .page-link {
    color: #fff;
    background-color: var(--main);
}
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    font-size: 24px;
    background-color: #272525;
    color: #fff;
    line-height: 27px;
}

.page-item.disabled .page-link {
    background: none;
    cursor: not-allowed !important;
    color: #888ea8;
}
.widget-content:has(.btn-primary) .page-meta {
    margin-top: 0 !important;
}
.page-meta:not(:has(.btn-primary)) {
    margin-top: 0px !important;
}
@media screen and (max-width: 800px) {
    .pagination {
        overflow: auto !important ;
    }
}
body.dark-layout .page-item .page-link{
    background-color: var(--dark-ligth);
}
/* body.dark-layout .page-item.active .page-link{
    background-color: var(--main);
} */
body.dark-layout .page-item:first-child .page-link, body.dark-layout .page-item:last-child .page-link{
    background-color: var(--dark-ligth3) !important;
}
:disabled{
    cursor: not-allowed !important;
}
.table-responsive {
    position: relative;
}

.spinnermain {
    color: var(--main);
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.spinnermain div {
    transform-origin: 40px 40px;
    animation: spinner 1.2s linear infinite;
}
.spinnermain div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #fff;
}
.spinnermain div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
}
.spinnermain div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
}
.spinnermain div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}
.spinnermain div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}
.spinnermain div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}
.spinnermain div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}
.spinnermain div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}
.spinnermain div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}
.spinnermain div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}
.spinnermain div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}
.spinnermain div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}
.spinnermain div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}
@keyframes spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.abs-ajax-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 22;
    display: none;
    min-height: 200px !important;
    border-radius: 10px;
}
.shadow-table:has(.abs-ajax-loader){
    position: relative !important;
    min-height: 330px;
}
body.dark-layout .table td{
    color: #fff;
}
body.dark-layout .flex-in-drop i{
    color: #fff !important;
}
.chat-body{
    padding-bottom: 50px !important;
    height: calc(100vh - 150px);
}
body.dark-layout .nodata-founded img{
    filter: invert(1);

}

/*  new style By Ramadan */

body.dark-layout .edit-Dark {
    filter: brightness(0) invert(1);
  }

  .responsive-close {
    position: absolute;
    left: 15px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #4880ff;
    padding: 10px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 13px;
    color: #fff;
    cursor: pointer
}

@media screen and (max-width: 1024px) {
    .responsive-close{
        display: flex;
    }
}