@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&display=swap');


/* .assistant-<uniquifier> {
    font-family: "Assistant", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
  } */


:root {
    --sidebar-width: 16rem;
    --clr-blu: #002F73;
    --clr-border: #ebebeb;
    --clr-body: #f5f5f5;
    --clr-txt-2: #565656;
}

@media(max-width:1600px) {
    html {
        font-size: 0.9rem;
    }
}

/* For WebKit-based browsers (Chrome, Edge, Safari, etc.) */
::-webkit-scrollbar {
    width: 8px;
    /* Adjust width */
}

* {
    scrollbar-width: thin;
    /* Options: auto, thin, none */
}


input:-internal-autofill-selected {
    background-color: #fff !important;
}

body {
    font-family: "Assistant", sans-serif;

}

button {
    outline: none !important;
}

.c--blu{
    color: var(--clr-blu);
}

.bg-primary-fade {
    background-color: #edf0f5 !important;
}

.table-padding-more th,
.table-padding-more td {
    padding: 0.85rem;
}

.c-txt-2 {
    color: var(--clr-txt-2);
}

.c-fade {
    color: #7e7e7e;
}


.font-weight-regular {
    font-weight: 500 !important;
}

.font-weight-semibold {
    font-weight: 600 !important;
}

.gap-1 {
    gap: 0.5rem;
}

.btn-search {
    color: #959595;
}

.btn-search svg {
    width: 1em;
    height: auto;
    display: block;
}

.form-search .form-control {
    border-color: #fff;
    height: auto;
}

.form-search {
    border-radius: .25rem;
    border: 1px solid #ced4da;
}

.dropdown-menu-with-icons .dropdown-item a {
    color: inherit;
}

.dropdown-menu-with-icons .dropdown-item button {
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
}

.dropdown-menu-with-icons .dropdown-item img {
    width: 1.25em;
    height: auto;
    margin-right: 0.25em;
    vertical-align: middle;
}

.circle-art {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background-color: var(--bg-circle-outer);
}

.circle-art::after {
    content: '';
    width: 33.3%;
    height: 33.3%;
    border-radius: inherit;
    background-color: var(--bg-circle-inner);
}


.bg-style2 {
    --bg-circle-outer: #cfe5eb;
    --bg-circle-inner: #003c51;
}

.bg-style3 {
    --bg-circle-outer: #d2f2fa;
    --bg-circle-inner: #127d98;
}

.bg-style4 {
    --bg-circle-outer: #e2d9f7;
    --bg-circle-inner: #684ea6;
}

.bg-style5 {
    --bg-circle-outer: #ffe0bb;
    --bg-circle-inner: #a06926;
}

.btn-underlined {
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.1em;
}


.btn-capsule {
    border: 1px solid currentColor;
    border-radius: 100em;
    padding: 0.2em 0.75em 0.1em;
    font-size: 0.85rem;
    line-height: 1;
    color: inherit;
    font-weight: 600;
    opacity: 0.75;
}

.nav-treeview .nav-item .nav-link::before {
    content: '- ';
}

.nav-item.menu-open>.nav-link {
    font-weight: 600;
    color: var(--clr-blu);
}

/* 



#d2f2fa
#127d98


#e2d9f7
#684ea6


#ffe0bb
#a06926 */

.row-gap {}

.card-head {
    font-size: 1.5rem;
    font-weight: 600;
}

.page-header {
    /* padding-bottom: 1rem;
    border-bottom: 1px solid #dfdfdf; */
    margin-bottom: 1rem;
}

.main-header {
    padding: .5rem;
}

.user-panel {
    font-weight: 600;
}

.user-panel .name {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #b5d1f933;
    color: #134a99;
    text-align: center;
    line-height: 2.25;
    font-weight: 600;
    border: 1px solid rgb(214 231 255);
}

.sidebar-mini.sidebar-collapse .main-sidebar {
    padding-left: 2px;
}

.login-page {
    padding: 2rem;
}

.fig-hero img {
    height: calc(100vh - 4rem);
    object-fit: cover;
}

.login-head {
    color: var(--clr-blu);
    font-weight: 700;
    margin: 1rem 0 3rem;
}

.btn-pwdTgl {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 31px;
    width: 50px;
    height: 50px;
    border: none;
    outline: none !important;
    background-color: transparent;
}

.password-show .ico-eyeslash {
    display: none;
}

.password-hide .ico-eye {
    display: none;
}

.ico-eye,
.ico-eyeslash {
    width: 1.25em;
    display: block;
    margin: auto;
}

.btn-expand {
    padding: 0.5em 3em;
}


.toggle-button {
    width: 90px;
    font-size: 14px;
    cursor: pointer;
    background: #9d5d6e;
    border: none;
    border-radius: 100em;
    position: relative;
    color: white;
    transition: background-color 0.4s ease, box-shadow 0.3s ease;
    padding-left: 24px;
    padding-right: 15px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.toggle-button.active {
    background: rgb(80 145 70);
    padding-right: 24px;
    padding-left: 15px;
}

.toggle-circle {
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute !important;
    top: 4px;
    left: 4px;
    transition: transform 0.4s ease, box-shadow 0.3s ease;
}

.toggle-button.active .toggle-circle {
    transform: translateX(60px);
}

.status-text {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    z-index: 1;
    pointer-events: none;
}


span.required {
    color: red;
}

.select2-container .select2-selection--single {
    height: 50px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 5px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px !important;
    right: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-width: 8px 6px 0 6px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-width: 0px 6px 8px 6px !important;
}




.paginate-admin .flex.justify-between.flex-1.sm\:hidden {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.paginate-admin span.relative.z-0.inline-flex.rtl\:flex-row-reverse.shadow-sm.rounded-md:has(svg) {
    display: none;
}

.paginate-admin nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

/* Google translator */
.skiptranslate iframe {
    display: none;
}


body,
body.login-page {
    top: 0px !important;
}

.goog-te-gadget-simple {
    background-color: #FFF;
    border-left: 1px solid #D5D5D5;
    border-top: 1px solid #9B9B9B;
    border-bottom: 1px solid #E8E8E8;
    border-right: 1px solid #D5D5D5;
    padding: 14px !important;
    border-radius: 50px;
    font-size: 10pt;
    display: inline-block;
    padding-top: 1px;
    padding-bottom: 2px;
    cursor: pointer;
}

body.login-page .goog-te-gadget-simple {
    margin-bottom: 25px;
}

.goog-te-gadget {
    font-family: inherit !important;
}


body.login-page #google_translate_element {
    position: fixed;
    top: 15px;
    right: 15px;
}



.right-navbar-translate {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.form-search select.form-control {
    border-radius: 0px;
    border-left: 1px solid #ced4da;
}

.form-search .form-control option {
    background: #134a99;
    color: #fff;
}

.card-body .form-group,
.form-group {
    position: relative;
}




/* address css */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}


.nav-tabs-style-1 {
    gap: 1em
}

.nav-tabs-style-1 .nav-link {
    color: inherit;
    border: none;
    font-weight: 600;
    padding: 1em 1.5em;
    border-bottom: 2px solid transparent;
}

.nav-tabs-style-1 .nav-link.active {
    color: rgb(1 72 173);
    background: rgb(1 72 173 / 5%);
    border-bottom-color: currentColor;
}

.link-primary {
    display: inline-block;
    color: #134A99;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.2em;
}

/* badge styles */
.dotted-badge-style {
    display: inline-block;
    line-height: 1.1;
    font-weight: 600;
    font-size: 0.95rem;
}

.dotted-badge-style::before {
    content: '';
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    margin-right: 0.25em;
    vertical-align: middle;
    background-color: currentColor;
}

.available-status {
    color: rgb(42 136 42);
}

.non-available-status {
    color: #dc3b3b;
}


/* CHAT PAGE */
.chat-container {
    box-shadow: 2px 0 15px 0px rgb(0 0 0 / 5%);
    background-color: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    height: calc(100vh - 200px);
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.chat-header {
    padding: 1rem 1.5rem;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-bottom: 1px solid #e9e9e9;
}

.chat-header h6 {
    font-size: 1.35rem;
    color: #494c51;
    margin-bottom: 0.25em;
}

.chat-header h6 img {
    width: 1.1em;
    margin-right: 0.15em;
    opacity: 0.85;
}

.chat-header h6 span {
    color: #074bad
}

.chat-header p {
    font-size: 0.85rem;
    color: #5b5b5b;
}

.chat-container .form-control {
    border: none;
    padding: 0;
}


.chat-body {
    border-radius: 0.5rem;
    overflow: auto;
    padding: 1.5rem;
    background-color: #fff;
    scrollbar-width: thin;
}

.avatar-rounded {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #5a6f8ff2;
    color: #fff;
    text-align: center;
    line-height: 2.5;
    font-weight: 600;
    /* border: 1px solid rgb(214 231 255); */
}

.message-box {
    max-width: 60%;
    margin-right: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.message-box.sent {
    margin-left: auto;
    margin-right: 0;
    grid-template-columns: 1fr auto;

}

.message-box .msg {
    padding: 1.25rem;
    border-radius: 0.5rem;
    background-color: #eff5fd;
    border: 1px solid #c8e0ff;
    margin-bottom: 0.5rem;
}

.message-box.sent .msg {
    background-color: #e8ffd5;
    border: 1px solid #caedae;
}

.message-box.sent .sender-timestamp {
    text-align: right;
}


.message-box small {
    opacity: 0.85;
    font-size: 12px;
}


.chat-footer {
    padding: 1rem 1.5rem;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #e9e9e9;
}


/* NOTIFICATION DROPDOWN */
.notificaton-menu {
    max-height: 21rem;
    overflow: auto;
}

.notificaton-item {
    position: relative;
    padding: 0.85rem 1rem 0.85rem 2.45rem;
}

.notificaton-item::before {
    content: '';
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: #134A99;
    display: inline-block;
    position: absolute;
    top: 1.5rem;
    left: 0.85rem;
}

.notificaton-item+.notificaton-item {
    border-top: 1px solid #134a9914;
}

.notificaton-item:hover {
    background-color: #134a9914;
}


.notificaton-item-grid {
    display: grid;
    grid-template-columns: auto 0.25fr 1fr auto 17ch;
    align-items: center;
    gap: 2rem;
    padding: 0.5rem 1rem;
}


.notificaton-item-grid::before {
    position: static;
}

.notificaton-item-grid-expanded {
    grid-template-columns: auto 1fr 1fr auto 17ch;
}

.text-eclip {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 1rem;
}


.row-gap-0 {
    row-gap: 0 !important;
}

.row-gap-1 {
    row-gap: 0.25rem !important;
}

.row-gap-2 {
    row-gap: 0.5rem !important;
}

.row-gap-3 {
    row-gap: 1rem !important;
}

.row-gap-4 {
    row-gap: 1.5rem !important;
}

.row-gap-5 {
    row-gap: 3rem !important;
}

.column-gap-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
}

.column-gap-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
}

.column-gap-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
}

.column-gap-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
}

.column-gap-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
}

.column-gap-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
}

.filterWhite {
    filter: brightness(0) invert(1);
}

.filterWhiteParentHvr:hover img {
    filter: brightness(0) invert(1);
}

.subscription-card {
    background: #fff;
    padding: 1.5rem;
    transition: 0.3s ease-in-out;
}

.subscription-card ul {
    list-style: none;
    background-color: #078b250d;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.subscription-card ul:empty {
    display: none;
}

.subscription-card ul li {
    color: #078b25;
    margin: 0.35em 0;
    font-weight: 600;
    display: grid;
    grid-template-columns: auto 1fr;
}


.subscription-card ul li::before {
    content: '✔';
    display: inline-block;
    background-color: #078b25;
    color: #fff;
    font-size: 0.75em;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    text-align: center;
    margin-right: 1em;
    font-weight: 300;
    margin-top: 0.25em;
    line-height: 1.25;
}


.subscription-card .btn {
    padding: 10px;
    border-radius: 8px;
}




@media (max-width:1300px) {
    .table-responsive .table {
        white-space: nowrap;
    }

}

@media (max-width: 991px) {
    div:has(.form-search),
    .form-search {
        flex: 0 0 100%;
        width: 100%;
    }

    .form-search select.form-control {
        width: auto;
    }
}

@media (max-width:767.98px) {

    body,
    body.login-page {
        padding: 0;
    }

    .login-box,
    .register-box {
        padding: 1rem 0.5rem;
    }

    .login-logo,
    .register-logo {
        max-width: 200px;
    }

    .btn-full-mob,
    .flex-1-mob,
    .w-100p-mob {
        width: 100%;
    }

    .w-100p-mob>.btn:not(.btn-full-mob) {
        flex: 1;
    }

    .form-search:has(select.form-control) input.form-control {
        border-bottom: 1px solid #ced4da;
    }

    .form-search:has(select.form-control) {
        flex-wrap: wrap;
    }

    .form-search select.form-control {
        width: auto;
        flex: 1;
        border-left: none;
    }

    .user-panel .info {
        padding: 5px;
    }


    .table td,
    .table th {
        padding: 1rem !important;
    }

    .btn {
        font-size: 0.95rem;
    }

    .table td:last-child:has(.btn-group) {
        position: sticky;
        background-color: #fff;
        right: 0;
        z-index: 1;
        box-shadow: inset 16px 6px 14px 0px #f6f6f6;
    }


    .table td:last-child:has(.btn-group.show) {
        z-index: 11;
    }

    .notificaton-item-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 0.5rem;
        border-bottom: 1px solid #e3e3e3;
    }
}



@media(max-width: 767px) {
    #google_translate_element .goog-te-gadget {
        width: auto !important;
    }

    .goog-te-gadget-simple {
        width: auto !important;
        padding: 0 !important;
        border: none !important;
        display: block !important;
    }

    .goog-te-gadget-simple span {
        border: none;
    }

    .goog-te-gadget img,
    .goog-te-gadget-simple a[aria-haspopup="true"] span {
        display: none;
    }

    .goog-te-gadget-simple a {
        width: 36px;
        height: 36px;
        border: 1px solid #d8d8d8;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center !important;
        margin: 0;
    }




    .goog-te-gadget-simple a span:nth-of-type(1) {
        width: 20px;
        height: 20px;
        display: block;
        font-size: 0;
        background-image: url('./../../images/icons/global.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}