.text-warning {
    color: #ff9f43 !important;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: #34495e;
    margin: 0;
    line-height: 1.4;
}

label {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 5px;
}
p, li, a {
    font-size: 0.875rem;
}

label.is-required:after {
    content: '*';
    color: #dc3545 !important;
    font-weight: 700;
}

.form-control {
    border: 1px solid #ced4da;
}

label {
    font-size: 0.85rem;
    font-weight: 500;
}

.custom-btn-height {
    height: 50px !important;
}

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

.input-error{
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
    font-size: 0.875rem;
    line-height: 1.25rem;
    list-style: none;
}

.btn-outline-warning {
    --color: #ff9f43;
    color: var(--color) !important;
    border-color: var(--color) !important;
}

.btn-outline-warning:hover {
    color: #fff !important;
    background-color: #ff9f43 !important;
}

.sp-replacer {
    padding: 0;
    border: none;
    border-radius: 5px 0 0 5px;
}

.sp-preview {
    width: 100px;
    height: 45px;
    border: 0;
}

.sp-preview-inner {
    width: 110px;
}

.sp-dd {
    display: none;
}

.form-group + .form-group {
    border-top: 1px solid #f3f3f321 !important;
    padding-top: 1rem;
}

.form-group + .form-group[class*="mb-"]:not(.form-group.mb-0) {
    padding-top: 0;
}
.btn{
    font-weight: 400 !important;
    border-width: .09em;
}
.btn-outline-info {
    --bs-btn-color: #0a96b2;
    --bs-btn-border-color: #0a96b2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0a96b2;
    --bs-btn-hover-border-color: #0a96b2;
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #0a96b2;
    --bs-btn-active-border-color: #0a96b2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0a96b2;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0a96b2;
    --bs-gradient: none;
}

.table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    color: var(--bs-table-color);
    vertical-align: top;
    border-color: var(--bs-table-border-color);
}

table.table-default thead th {
    border: none;
    color: #ffffff;
    background: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - calc(var(--extra) - 5%))) !important;
}

table thead th:first-child {
    border-radius: 5px 0 0 0;
}

table th:first-child {
    text-align: left;
    font-weight: 600;
}

.table-default th {
    font-size: 0.75rem;
    text-align: center;
    padding: 12px 25px;
    white-space: nowrap;
}

table.table-default thead th {
    border-top: none;
    padding-left: 25px;
    padding-right: 25px;
}

.table-default>:not(caption)>*>* {
    
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

table thead th:last-child {
    border-radius: 0 5px 0 0;
}

table th:last-child {
    text-align: right;
}

table.table-default tbody td {
    padding: 15px 25px;
}

table td:first-child {
    text-align: left;
}
.table-default > :not(caption) > * > * {
    border-bottom-width: 0;
}
.table-default td, .table-default th {
    border-top: 1px solid #e8e8e8;
}
.table-default td {
    font-size: 0.8125rem;
    color: #5b6e88;
    text-align: center;
    font-weight: 500;
    padding: 15px 25px;
    vertical-align: middle;
    white-space: nowrap;
}

table td:last-child {
    text-align: right;
}

.table > :not(caption) > * > * {
    border-bottom-width: 0;
}

.empty img[data-hs-theme-appearance="dark"]{
    display: none !important;
}

.empty .card-body{
    box-shadow: none !important;
}

[data-label] {
    position: relative;
}

[data-label]::before {
    position: absolute;
    content: attr(data-label);
    font-weight: 700;
    color: #000000;
    top: 0;
    left: 0;
    padding: 13px 15px;
    display: none;
}

html[data-bs-theme="dark"] [data-label]::before {
    color: #eee !important;
}

html[data-bs-theme="dark"] td, html[data-bs-theme="dark"] td.text-dark{
    color: #eee !important;
}

.table-responsive-lg tbody tr:first-child td {
    border-top: none;
}

@media (max-width: 767px) {
    .table-responsive-sm table .user {
        justify-content: flex-end;
    }

    .table-responsive-sm table .user .name {
        width: auto;
    }

    table thead th:first-child {
        border-radius: 0;
    }

    table thead th:last-child {
        border-radius: 0;
    }

    table.dataTable .user {
        justify-content: flex-start;
    }

    table.dataTable .user .name {
        width: calc(100% - 40px);
    }

    .table-responsive-sm table.dataTable .user {
        justify-content: flex-end;
    }

    .table-responsive-sm table.dataTable .user .name {
        width: auto;
    }
}

@media (max-width: 1199px) {
    .table-responsive-lg thead {
        display: none;
    }

    table thead th:first-child {
        border-radius: 0;
    }

    table thead th:last-child {
        border-radius: 0;
    }

    .table-responsive-lg tbody tr:nth-child(odd) {
        background-color: #e2e2e233;
    }

    .table-responsive-lg tbody tr:nth-child(odd) td {
        border-top: 1px solid #10163a17;
    }

    .table-responsive-lg tr th,
    .table-responsive-lg tr td {
        display: block;
        padding-left: 45% !important;
        text-align: right !important;
    }

    .table-responsive-lg .user-table-list,
    .table-responsive-lg .customer-details {
        justify-content: flex-end;
    }

    .table-responsive-lg [data-label]::before {
        display: block;
    }

    .table-responsive-lg table.dataTable .user {
        justify-content: flex-end;
    }

    .table-responsive-lg table.dataTable .user .name {
        width: auto;
    }

    .table-responsive-lg table .user {
        justify-content: flex-end;
    }

    .table-responsive-lg table .user .name {
        width: auto;
    }
}

@media (max-width: 991px) {
    .table-responsive thead {
        display: none;
    }

    table thead th:first-child {
        border-radius: 0;
    }

    table thead th:last-child {
        border-radius: 0;
    }

    .table-responsive tbody tr:nth-child(odd) {
        background-color: #e2e2e233;
    }

    .table-responsive tbody tr:nth-child(odd) td {
        border-top: 1px solid #10163a17 !important;
    }

    .table-responsive tbody tr:first-child td:first-child {
        border-top: none;
    }

    .table > :not(caption) > * > * {
        border-bottom-width: 1px;
    }

    .table-responsive tr {
        border-width: 1px !important;
    }

    .table-responsive tr th,
    .table-responsive tr td {
        display: block;
        padding-left: 45% !important;
        text-align: right !important;
    }

    .table-responsive tr td{
        word-break: break-word; overflow-wrap: break-word; white-space: normal;
    }

    td div.d-flex.align-items-center.justify-content-start{
        justify-content: flex-end !important;
    }
    .table-responsive tr td:last-child {
        margin-bottom: 50px !important;
    }

    .table-responsive tr:last-child td {
        margin-bottom: 0 !important;
    }

    .table-responsive tr th.no-padding,
    .table-responsive tr td.no-padding {
        padding-left: 0 !important;
    }

    .table-responsive tr td.text-center{
        text-align: center !important;
        padding-left: 0  !important;
    }

    .table-responsive .user-table-list,
    .table-responsive .customer-details {
        justify-content: flex-end;
    }

    .table-responsive [data-label]::before {
        display: block;
    }

    .table-responsive table.dataTable .user {
        justify-content: flex-end;
    }

    .table-responsive table.dataTable .user .name {
        width: auto;
    }

    .table-responsive table .user {
        justify-content: flex-end;
    }

    .table-responsive table .user .name {
        width: auto;
    }
}

@media (max-width: 767px) {
    .table-responsive-sm thead {
        display: none;
    }

    table thead th:first-child {
        border-radius: 0;
    }

    table thead th:last-child {
        border-radius: 0;
    }

    .table-responsive-sm tbody tr:nth-child(odd) {
        background-color: #e2e2e233;
    }

    .table-responsive-sm tbody tr:nth-child(odd) td {
        border-top: 1px solid #10163a17;
    }

    .table-responsive-sm tbody tr:first-child td:first-child {
        border-top: none;
    }

    .table-responsive-sm tr th,
    .table-responsive-sm tr td {
        display: block;
        padding-left: 45% !important;
        text-align: right !important;
    }

    .table-responsive-sm .user-table-list,
    .table-responsive-sm .customer-details {
        justify-content: flex-end;
    }

    .table-responsive-sm [data-label]::before {
        display: block;
    }
}
@media (min-width: 992px) {
    .td-max-w-200 {
        max-width: 200px !important;
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

td div.d-flex.align-items-center.justify-content-start{
    flex-wrap: wrap;
}

table{
    position: relative;
}

.btn-group .dropdown-menu {
    position: absolute; 
    z-index: 1050; 
    will-change: transform; 
}

@media (max-width: 575px) {
    .table-responsive-xs thead {
        display: none;
    }

    table thead th:first-child {
        border-radius: 0;
    }

    table thead th:last-child {
        border-radius: 0;
    }

    .table-responsive-xs tbody tr:nth-child(odd) {
        background-color: #e2e2e233;
    }

    .table-responsive-xs tr th,
    .table-responsive-xs tr td {
        display: block;
        padding-left: 45% !important;
        text-align: right !important;
    }

    .table-responsive-xs .user-table-list,
    .table-responsive-xs .customer-details {
        justify-content: flex-end;
    }

    .table-responsive-xs [data-label]::before {
        display: block;
    }
}

@media (max-width: 1199px) {
    *[class*='table-responsive--'].data-label--none tr th,
    *[class*='table-responsive--'].data-label--none tr td {
        padding-left: 0.75rem;
    }
}

*[class*='table-responsive--'] .table-dark tbody [data-label]::before {
    color: #5b6e88;
}

@media (max-width: 1199px) {
    .table-responsive-lg .table-dark tbody tr:nth-child(odd) {
        background-color: #343a40;
    }

    .table-responsive-lg .table-dark tbody tr:nth-child(even) {
        background-color: #222930;
    }

    .table-responsive-lg table.dataTable tbody tr td {
        white-space: normal;
    }
}

@media (max-width: 991px) {
    .table-responsive .table-dark tbody tr:nth-child(odd) {
        background-color: #343a40;
    }

    .table-responsive .table-dark tbody tr:nth-child(even) {
        background-color: #222930;
    }

    .table-responsive table.dataTable tbody tr td {
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .table-responsive-sm .table-dark tbody tr:nth-child(odd) {
        background-color: #343a40;
    }

    .table-responsive-sm .table-dark tbody tr:nth-child(even) {
        background-color: #222930;
    }

    .table-responsive-sm table.dataTable tbody tr td {
        white-space: normal;
    }
}

@media (max-width: 575px) {
    .table-responsive-xs .table-dark tbody tr:nth-child(odd) {
        background-color: #343a40;
    }

    .table-responsive-xs .table-dark tbody tr:nth-child(even) {
        background-color: #222930;
    }

    ol.sec-item li i,
    ol.sec-item li span {
        font-size: 18px;
    }
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: hsl(var(--primary-color));
    color: #ffffff;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
}

.pagination .page-item.previous .page-link,
.pagination .page-item.next .page-link {
    font-size: 0;
    position: relative;
    width: 35px;
    height: 35px;
}

.pagination .page-item.previous .page-link::before {
    position: absolute;
    top: 7px;
    right: 11px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    content: '\f104';
    font-size: 16px;
}

.pagination .page-item.next .page-link::before {
    position: absolute;
    top: 7px;
    right: 11px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    content: '\f105';
    font-size: 16px;
}

.pagination .page-item .page-link,
.pagination .page-item span {
    font-size: 0.875rem;
    display: flex;
    width: 36px;
    height: 36px;
    margin: 0 3px;
    padding: 0;
    border-radius: 3px !important;
    align-items: center;
    justify-content: center;
    color: #5b6e88;
}

ul.pagination{
    margin-bottom: 0;
    justify-content: flex-end !important;
}

.pagination nav{
    width: 100%;
    padding: 0 !important;
}

.pagination{
    flex-wrap: wrap !important;
}

@keyframes bellAnimation {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}

.bell-shake {
    animation: bellAnimation 0.5s ease infinite;
}

.page-header-right-breadcrumb .btn:not(.btn-normal) {
    height: 45px !important;
    line-height: 2.5 !important;
}

input.form-control, select.form-control {
    height: 45px !important;
}

.modal-title {
    color: #34495e !important;
    font-weight: 500;
}

.rotate {
    animation: spin 2s linear infinite;
}

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

.modal-title strong  {
    font-weight: 700;
}

.select-lg .select2-container {
    width: 100% !important;
    min-height: 45px !important;
}

.select-lg .select2-selection:not(.select-lg .select2-selection.select2-selection--multiple){
    height: 47px !important;
}

.select-lg .select2-selection .select2-selection__rendered{
    
    width: 100% !important;
    padding: 8px 20px;
}

.toggle-group label{
    font-weight: 500 !important;
}

.text-info-dark {
    --bs-text-opacity: 1;
    color: rgb(0 129 155) !important;
}

.select-lg .select2-container .selection{
    min-height: 45px !important;
    align-items: center;
}

.select-lg .select2-container--bootstrap .select2-selection--single {
    padding: 0.5rem 1rem;
}

.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
    border-color: var(--primary-color);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(var(--primary-rgb), 0.6);
}

.border-primary, .input-group-text {
    border-color: var(--primary_color) !important;
}

.input-group-text {
    border: 1px solid var(--primary_color) !important;
    background: var(--primary-color);
    color: #fff !important;
}

.modal-header .close{
    border: none !important;
    background-color: transparent !important;
}

input:not([type='radio']), textarea, select {
    padding: 10px 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background-color: transparent;
    font-size: 0.875rem !important;
}

.toggle .btn-danger {
    background-color: #eb2222 !important;
}

.toggle-group .toggle-handle {
    background-color: #10163A;
}

.toggle-group {
    position: absolute;
    width: 200%;
    top: 0;
    bottom: 0;
    left: 0;
    transition: left .35s;
    -webkit-transition: left .35s;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.toggle-on.btn, .toggle-off.btn {
    line-height: 25px;
    font-weight: 900;
}
.toggle-on.btn {
    padding-right: 24px;
}
.toggle-group .toggle-off {
    color: #ffffff;
}
.btn-primary.toggle-on, .btn-success.toggle-on{
    color: #fff !important;
}

.toggle-on.btn, .toggle-off.btn {
    line-height: 32px;
}
.toggle-off.btn {
    padding-left: 24px;
}
.toggle-handle.btn.btn-default{
    border-color: transparent;
}
.toggle.btn {
    margin-bottom: 0;
    margin-top: 0;
}

@media (max-width: 991px) {
    .table-responsive tr td[colspan="100%"] {
       padding: 0 !important;
    }
}

.sidebar-right-wrapper .form-control{
    color: #eee !important;
}

.sidebar-right-wrapper .form-control:focus {
    color: var(--bs-body-color) !important;
}

.mb-0{
    margin-bottom: 0 !important;
}

.modal .close {
    background-image: none;
    background-color: #eb2222 !important;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .375rem;
    color: #fff;
    padding: calc(var(--bs-modal-header-padding-y)* .5) calc(var(--bs-modal-header-padding-x)* .5);
    margin: calc(-.5* var(--bs-modal-header-padding-y)) calc(-.5* var(--bs-modal-header-padding-x)) calc(-.5* var(--bs-modal-header-padding-y)) auto;
}

input.form-control-lg {
    height: 48px !important;
    font-size: 1rem !important;
}

.content-body {
    padding-bottom: 40px !important;
}

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

.bg-light-green {
    background-color: #35d0ba !important;
}

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

.bg-dark-blue {
    background-color: #035aa6 !important;
}

.widget-two .counter{
    font-size: 20px !important;
    font-weight: 600;
}

.widget-two .title {
    font-size: 16px;
    font-weight: 600;
}

.btn-danger.btn-shadow {
    box-shadow: 0 5px 10px 0 rgba(234, 84, 85, 0.35);
}


.btn-success.btn-shadow {
    box-shadow: 0 5px 10px 0 rgba(40, 199, 111, 0.35);
}

.btn-primary.btn-shadow {
    box-shadow: 0 5px 10px 0 rgba(var(--primary-rgb), 0.35);
}

.btn-secondary.btn-shadow {
    box-shadow: 0 5px 10px 0 rgba(var(--secondary-rgb), 0.35);
}
.btn-warning.btn-shadow {
    box-shadow: 0 5px 10px 0 rgba(255, 159, 67, 0.35);
}

.select2-container {
    display: block;
}

.custom-btn-height-sm {
    min-height: 45px !important;
}

.badge-pending,
.badge-warning,
.badge-success,
.badge-primary,
.badge-danger,
.badge-info,
.badge-dark,
.badge-secondary{
    border-radius: 999px;
    padding: 2px 15px;
    position: relative;
    border-radius: 999px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    -ms-border-radius: 999px;
    -o-border-radius: 999px;
}

.badge-warning {
    background-color: rgba(255, 159, 67, 0.1);
    border: 1px solid #ff9f43;
    color: #ff9f43;
}

.badge-success {
    background-color: rgba(40, 199, 111, 0.1);
    border: 1px solid #28c76f;
    color: #28c76f;
}

.badge-danger {
    background-color: rgba(234, 84, 85, 0.1);
    border: 1px solid #eb2222;
    color: #eb2222;
}

.badge-primary {
    background-color: rgba(var(--primary-rgb), 0.1);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.badge-secondary {
    background-color: rgba(var(--secondary-rgb), 0.1);
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

.badge-dark {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid #000000;
    color: #000000;
}

.badge-info {
    background-color: rgba(30,159,242, 0.1);
    border: 1px solid #1e9ff2;
    color: #1e9ff2;
}

.badge {
    font-size: 0.75rem !important;
    font-weight: 300;
}

.reply-timeline {
    position: relative;
    overflow: hidden;
}

.reply-timeline:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0px;
    box-shadow: 0px 0px 13px 15px #FFF;
    z-index: 1;
}

.reply-timeline:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0px;
    box-shadow: 0px 0px 13px 15px #FFF;
    z-index: 1;
}

.reply-timeline .reply-timeline-items-wrapper {
    position: relative;
    padding: 32px 5px 32px 5px;
}

.reply-timeline .reply-timeline-items-wrapper .reply-timeline-item {
    position: relative;
    background: #e9e8e8;
    padding: 16px;
    padding: 1rem;
    border-radius: 4px;
}

.reply-timeline .reply-timeline-items-wrapper .reply-timeline-item:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #e9e8e8;
    transform: translate3d(0, -50%, 0);
}
.reply-timeline .reply-timeline-items-wrapper .reply-timeline-item.right:before {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px !important;
    left: initial;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #e9e8e8;
    border-right: 0 !important;
    transform: translate3d(0, -50%, 0);
}

.reply-timeline .reply-timeline-items-wrapper .reply-timeline-item.right{
    margin-left: auto;
    
}



.reply-timeline .reply-timeline-items-wrapper .reply-timeline-item + .reply-timeline-item {
    margin-top: 30px;
}

.reply-timeline .reply-timeline-items-wrapper .reply-timeline-item p {
    margin-bottom: 0;
}

.reply-timeline .reply-timeline-items-wrapper .reply-timeline-item p + p {
    margin-top: 20px;
}

@media (max-width: 991px) {
    .reply-timeline-items-wrapper .col-lg-6 {
        width: 80%;
    }
}

@media only screen and (max-width: 767px) {
    .reply-timeline-items-wrapper .userbox .profile-picture {
        display: inline-block !important;
        margin-top: 0 !important;
    }

    .reply-timeline-items-wrapper .userbox {
        margin-top: 0 !important;
    }
}

.attachment-wrapper{
    width: 100% !important;
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 50px;
    margin-bottom: 0.5rem !important;
}

.reply-timeline-items-wrapper{
    max-height: 660px;
    overflow: auto;
    overflow-x: hidden !important;
}

.attachment-wrapper.right{
    padding-right: 50px;
    padding-left: 0 !important;
    justify-content: flex-end !important;
}

.attachment-wrapper.right > div{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}



.reply-timeline-items-wrapper::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, .select2-container--bootstrap .select2-results>.select2-results__options::-webkit-scrollbar, html::-webkit-scrollbar {
    width: 5px; 
    height: 12px; 
}


.reply-timeline-items-wrapper::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track, .select2-container--bootstrap .select2-results>.select2-results__options::-webkit-scrollbar-track, html::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 10px; 
}


.reply-timeline-items-wrapper::-webkit-scrollbar-thumb,.table-responsive::-webkit-scrollbar-thumb, .select2-container--bootstrap .select2-results>.select2-results__options::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 10px; 
}


.reply-timeline-items-wrapper::-webkit-scrollbar-thumb:hover,.table-responsive::-webkit-scrollbar-thumb:hover, .select2-container--bootstrap .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover {
    background: #555; 
}


.reply-timeline-items-wrapper::-webkit-scrollbar-button,.table-responsive::-webkit-scrollbar-button, .select2-container--bootstrap .select2-results>.select2-results__options::-webkit-scrollbar-button, html::-webkit-scrollbar-button {
    background-color: #ccc; 
    border-radius: 50%; 
}


.reply-timeline-items-wrapper::-webkit-scrollbar-corner,.table-responsive::-webkit-scrollbar-corner, .select2-container--bootstrap .select2-results>.select2-results__options::-webkit-scrollbar-corner, html::-webkit-scrollbar-corner {
    background: #e0e0e0; 
}

.daterangepicker .ranges li.active {
    background-color: var(--primary-color) !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--primary-color) !important;
}

.daterangepicker td.in-range {
    background-color: rgba(var(--primary-rgb), .1) !important;
}

@media (max-width: 767px) {
    .filter-btn {
        display: block;
    }

    .filter-card {
        display: none;
        transition: none;
    }
}

@media (min-width: 768px) {
    .filter-btn {
        display: none;
    }
}

@media (min-width: 768px) {
    .w-md-auto{
        width: auto !important;
    }
}

@media (min-width: 992px) {
    .w-lg-auto{
        width: auto !important;
    }
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--primary-color) !important;
}

.page-header-right-breadcrumb .btn:not(.btn-sm) {
    font-size: 0.875rem;
    line-height: 1.9 !important;
}

.b-radius-5 {
    border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    -o-border-radius: 5px !important;
}

.box-shadow2 {
    box-shadow: 0 4px 10px #38414a0f !important;
}

.bl-5 {
    border-left: 5px solid !important;
}

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

.toggle-group .btn {
    border-radius: 0.375rem !important;
    font-size: 14.4px !important;
    font-weight: 400 !important;
}

.toggle.btn {
    padding: 0 !important;
    border-radius: 0.375rem !important;
    border: none;
}

.toggle.btn-check:checked + .toggle.btn, :not(.btn-check) + .toggle.btn:active, .toggle.btn:first-child:active, .toggle.btn.active, .toggle.btn.show {
    background-color: transparent;
    border-color: transparent;
}

.custom-tab.nav-tabs li .nav-link, .nav-tabs li .nav-link:hover {
    background: transparent;
    border: none;
    cursor: pointer;
}

.custom-tab {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #5b6e8824;
    margin: -30px -30px 35px -30px;
    background-color: #fff;
    border-bottom: 1px solid rgba(var(--primary-rgb), .5);
}

.custom-tab li.active a {
    background-color: #f3f3f9 !important;
    border-top: 1px solid rgba(var(--primary-rgb), .5) !important;
    border-left: 1px solid rgba(var(--primary-rgb), .5) !important;
    border-right: 1px solid rgba(var(--primary-rgb), .5) !important;
    border-radius: 5px 5px 0 0 !important;
}

.custom-tab li.active a {
    color: var(--primary-color) !important;
}

.custom-tab li a {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    font-weight: 500;
    position: relative;
    font-size: 0.92rem !important;
}


.custom-tab li {
    margin-top: 3px;
}
.custom-tab.nav-tabs li .nav-link i{
    margin-right: 7px;
}


.custom-tab-close {
    position: absolute;
    top: 0;
    left: -35px;
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 24px;
    border:none;
}

.custom-tab li {
    margin-top: 3px;
}

.custom-navigation {
    text-align: center;
    border: 2px solid #cdcdcd;
    padding: 12px 0px;
    border-radius: 5px;
    background: #efefef;
    cursor: pointer;
    transition: all 0.3s;
}


.custom-navigation.active {
    border-color: var(--primary-color);
    position: relative;
}

.custom-navigation {
    text-align: center;
    border: 2px solid #cdcdcd;
    padding: 12px 0px;
    border-radius: 5px;
    background: #efefef;
    cursor: pointer;
    transition: all 0.3s;
}
.custom-navigation .active-badge {
    display: none;
}

.custom-navigation.active .active-badge {
    right: -1px;
    top: -1px;
    position: absolute;
    color: #fff;
    background: var(--primary-color);
    text-align: right;
    width: 50px;
    height: 40px;
    padding-right: 4px;
    clip-path: polygon(100% 0, 0 1%, 100% 100%);
    display: block;
}

@media (max-width: 1199px) {
    .custom-tab {
        margin: -30px -42px 35px -42px;
    }
}
@media (max-width: 380px) {
    .custom-tab {
        width: 250px;
    }
}
@media (max-width: 1199px) {
    .custom-tab {
        margin: 0;
        position: fixed;
        top: 30px;
        right: -390px;
        width: 300px;
        background-color: #fff;
        display: block;
        min-height: 100vh;
        z-index: 99;
        border: none;
        box-shadow: -5px 0 10px rgba(0, 0, 0, 0.05);
        transition: all 0.3s;
    }
}

@media (min-width: 1200px) {
    .custom-tab-close {
        display: none;
    }
}

@media (max-width: 1199px) {
    .custom-tab li {
        margin-top: 0;
    }
}

@media (max-width: 1199px) {
    .custom-tab li.active a {
        border: none;
    }
}

@media (max-width: 1199px) {
    .custom-tab.active {
        right: 0;
    }
}

.custom-tab-open {
    display: none;
}

@media (max-width: 1199px) {
    .custom-tab-open {
        display: inline-block;
    }
}

#previewFrame{
    width: 100%;
    height: 400px;
    border: none;
}

textarea.form-control {
    min-height: calc(1.5em + .75rem + 2px);
}

.email-editor {
    height: 400px;
}

.text-info {
    color: rgb(4 156 187) !important;
}

small.small{
    font-size: .895em;
}

.select2-container--bootstrap .select2-results__option {
    padding: 12px 14px !important;
    border-bottom: 1px solid #eee;
}

.select2-results__option:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.select2-results__option:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.select-lg .select-lg .select2-search--dropdown .select2-search__field {
    border-color: #ced4da !important;
    padding: 10px 20px;
}

.select-lg .select2-search--dropdown {
    padding: 10px 10px !important;
    border-color: #ced4da !important;
}


.select2-dropdown {
    border: transparent;
    margin-top: 8px !important;
    border-radius: 5px !important;
    box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05), 6px 4px 19px rgb(115 103 240 / 20%);
}

.select-lg .select2-search--dropdown {
    padding: 10px 10px !important;
    border-color: #ced4da !important;
}

.select-lg .select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #ced4da !important;
    padding: 10px 20px;
}

.select-lg .select2-results__option.select2-results__option--selected,
.select-lg .select2-results__option--selectable {
    padding: 12px 14px !important;
    border-bottom: 1px solid #eee;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar, .dropdown-menu.notification-menu .content ul::-webkit-scrollbar {
    width: 3px;
    border-radius: 5px;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track, .dropdown-menu.notification-menu .content ul::-webkit-scrollbar-track  {
    background: #f1f1f1;
    border-radius: 5px;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb, .dropdown-menu.notification-menu .content ul::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}

.select2-search__field{
    outline: none !important;
}

.select2-search__field:focus, .select2-search__field:focus-within {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(var(--primary-rgb), 0.3);
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover, .dropdown-menu.notification-menu .content ul::-webkit-scrollbar-thumb:hover {
    background: #ddd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
    position: absolute;
    right: 10px;
    top: 0;
    content: '\f107';
    font-family: 'Line Awesome Free';
    font-weight: 900;
    transition: 0.3s;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after {
    transform: rotate(-180deg);
}

.select2-results__option:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.select2-results__option:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.select2-results__option.select2-results__option--selected {
    background-color: #f1f1f1;
    color: #000;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color);
    color: white;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
    margin-top: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: var(--primary-color);
    color: #fff !important;
}

.select2-container--open .select2-selection.select2-selection--single,
 .select2-container--open .select2-selection.select2-selection--multiple {
    border-color: var(--primary-color) !important;
    border-radius: 5px !important;
    box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05), 3px 4px 8px rgba(115, 103, 240, 0.1);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
}

.select-lg .select2-results__option {
    padding: 12px 14px !important;
    border-bottom: 1px solid #eee;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 14%;
}

.select-lg .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 25%;
}

.select-lg .select2-container--default .select2-selection--multiple {
    min-height: 45px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}



.gateway-settings {
    width: calc(100% - var(--thumb-size));
    padding-left: 30px;
}

@media screen and (max-width: 575px) {
    .gateway-settings {
        width: 100%;
        padding-left: calc(var(--bs-gutter-x)* 0.5); !important;
        padding-top: 25px;
    }
}

.box-shadow-0{
    box-shadow: none !important;
}

.form-control[readonly]{
    background-color: #ece8e8 !important;
}

.btn-outline-light {
    --bs-btn-color: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f8f9fa;
    --bs-btn-active-border-color: #f8f9fa;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none;
}

.thumb-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.thumb img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    object-fit: cover;
    -o-object-fit: cover;
    object-position: center;
    -o-object-position: center;
    border: 2px solid #ffffff;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
}

.thumb-wrapper .name {
    /*width: calc(100% - 40px);*/
    padding-left: 10px;
}

@media (max-width: 767px) {
    .thumb-wrapper .name {
        width: auto;
    }
}

@media (max-width: 991px) {
    .table-responsive tr td .thumb-wrapper{
        justify-content: flex-end !important;
    }
}

.dropdown-menu.notification-menu .content{
    overflow: hidden;
    padding: 0 !important;
}

.dropdown-menu.notification-menu .content .view-more{
    padding: 12px;
}

.dropdown-menu.notification-menu .content ul{
    overflow: auto;
    max-height: 300px !important;
    padding: 12px;
}

/* Styling the spinner */
.spinner {
    display: none;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Styling the suggestion box */
.suggestions {
    display: none;
    border: 1px solid #ccc;
    max-width: 300px;
    margin-top: 5px;
    padding: 5px;
    position: absolute;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.suggestions li {
    padding: 8px;
    cursor: pointer;
}

.suggestions li:hover {
    background-color: #f0f0f0;
}

#search-container {
    position: relative;
}

.search-list {
    position: absolute;
    top: 100%;
    background-color: #fff;
    width: 100%;
    z-index: 99;
    max-height: 310px;
    overflow: auto;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.search-list li {
    border-bottom: 1px solid #e5e5e5;
}

.search-list li .search-list-link {
    padding: 8px 8px 8px 30px;
    display: block;
}

.search-list li a {
    color: #363636;
    font-size: 13px;
}

.search-list::-webkit-scrollbar {
    width: 2px;
}

.search-list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}

.search-list::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}

.rc-anchor-light.rc-anchor-normal, .rc-anchor-light.rc-anchor-compact {
    border: 1px solid #d3d3d3;
    background-color: #0a0a0a !important;
}

.btn--info {
    background-color: #1e9ff2 !important;
    border: 1px solid #1e9ff2 !important;
    color: #fff !important;
}

.uneditable-input.col {
    min-height: 45px;
    display: flex;
    /*flex-wrap: wrap;*/
    align-items: center;
}

.fileupload-preview{
    display: inline-flex;
    word-wrap: break-word;
}

.fileupload-new .input-append .btn-file, .fileupload .btn {
    background-color: var(--primary-color);
    color: #fff !important;
}

.fileupload-new .input-append .btn-file, .fileupload .fileupload-exists{
    border-radius: 0 5px 5px 0 !important;
}

.fileupload-new .input-append .btn-file:hover{
    background-color: var(--secondary-color);
}

.fileupload .btn {
    border-radius: 0;
}

.fileupload .btn-file{
    /* Add your styles here */
    border-right: 1px solid #fff !important;
}

/*!* Select the last .btn inside .fileupload *!*/
/*.fileupload .btn:last-of-type {*/
/*    !* Add your styles here *!*/
/*    background-color: red;*/
/*    color: white;*/
/*}*/

.top-leader{
    position: relative;
}

.top-leader:after {
    position: absolute;
    content: "";
    top: 25px;
    left: -20px;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    width: 20px;
    height: 20px;
}

ol {
    margin-left: 30px; /* Increased left indent for readability */
    counter-reset: item;
}

.wtree {
li {
    list-style-type: none;
    margin: 10px 0 10px 10px;
    position: relative;
}
li:before{
    content: "";
    counter-increment: item;
    position: absolute;
    top: -15px;
    left: -32px; /* Adjust left positioning for the line */
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    width: 30px;
    height: 35px;
}

li:after{
    position: absolute;
    content: "";
    top: 20px;
    left: -32px;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    width: 30px;
    height: 100%;
}
li:last-child:after {
    display: none;
}

/* Expandable span styling */
span.expandable {
    display: block;
    /*border: 1px solid #ddd;*/
    padding: 10px;
    /*color: rgba(102, 102, 102, 1);*/
    /*background-color: #DDF3FE;*/
    cursor: pointer;
    font-weight: bold;
    position: relative;
}

/* Icon styling for expand/collapse */
span.expandable i {
    margin-right: 10px;
    font-size: 12px;
}
}

/* Hide sub-tree by default */
.wtree ol {
    display: none;
}

/* When the parent is expanded */
.wtree li.open > ol {
    display: block;
}

/* Hover effects */
.wtree li span:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Expand/Collapse logic */
.wtree li span.open i {
    content: "\f068"; /* minus icon */
}

.wtree li span:not(.open) i {
    content: "\f067"; /* plus icon */
}

/* Style for the password tooltip */
.password-tooltip {
    display: none; /* Hide the tooltip by default */
    position: absolute;
    bottom: 40px; /* Position the tooltip above the input */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust to center the tooltip */
    padding-bottom: 10px;
    background-color: #333; /* Dark background for the tooltip */
    color: white;
    border-radius: 5px;
    width: 250px; /* Set a width for the tooltip */
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.password-tooltip .card-title{
    border-radius: 5px 5px 0 0;
}

.password-tooltip ul {
    list-style-type: none;
    padding-top: 15px;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    margin: 0;
}

.password-tooltip li {
    display: flex;
    align-items: center;
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 10px;
}

/* Icon styles */
.icon {
    font-size: 18px;
}

.danger {
    color: #e74c3c; /* Red color for danger (X icon) */
}

.success {
    color: #2ecc71; /* Green color for success (checkmark icon) */
}

/* Dashed line through the instructions using text-decoration */
.condition{
    flex-grow: 1;
    text-decoration-color: #fff; /* Red line for invalid condition */
    margin-left: 10px;
}

.line-through{
    text-decoration: line-through;
}

/* On success, remove the line-through decoration */
.success .condition-line {
    text-decoration: none;
}

/* Tooltip arrow */
.password-tooltip:before {
    content: '';
    position: absolute;
    bottom: -10px; /* Position the arrow above the tooltip */
    left: 50%; /* Center the arrow horizontally */
    transform: translateX(-50%); /* Adjust to center the arrow */
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #333; /* Tooltip arrow pointing upwards */
}

html[data-bs-theme=dark] .modal-title, [data-bs-theme=dark] .modal-title{
    color:#aab8c5 !important;
}

/*html[data-bs-theme=dark] h1, html[data-bs-theme=dark] h2, html[data-bs-theme=dark] h3, html[data-bs-theme=dark] h4, html[data-bs-theme=dark] h5, html[data-bs-theme=dark] h6, [data-bs-theme=dark] h1, [data-bs-theme=dark] h2, [data-bs-theme=dark] h3, [data-bs-theme=dark] h4, [data-bs-theme=dark] h5, [data-bs-theme=dark] h6, html[data-bs-theme=dark] table, html[data-bs-theme=dark] td{*/
/*    color:#aab8c5;*/
/*}*/

html[data-bs-theme=dark] .badge-dark{
    border: 1px solid #aab8c5;
    color: #aab8c5;
}

html[data-bs-theme=dark] .form-control[readonly]{
    color: var(--primary-color)
}

.filter-card .form-group + .form-group {
    border-top: none !important;
}

a {
    --bs-link-color-rgb: var(--primary-rgb);
}

html[data-bs-theme=dark]  .logo-dark {
    display: none;
}
html[data-bs-theme=dark]  .logo-light {
    display: block;
}

html[data-bs-theme=light]  .logo-dark {
    display: block;
}
html[data-bs-theme=light]  .logo-light {
    display: none;
}

.section-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(var(--primary-rgb), .2);
    padding: 15px;
    border-radius: 5px;
    background: #fff;
    transition: all .2s;
    margin-top: 1.5rem;
}

.section-card h6{
    font-size: 1rem;
}

.iconpicker-popover.fade.in{
    z-index: 9999;
    opacity: 1;
}

.btn-primary:hover{
    color: #fff !important;
}

.notification-icon.btn-primary:hover i{
    color: var(--primary-color) !important;
}

.no-white-space{
    white-space: normal !important;
}

.min-w-140{
    min-width: 140px !important;
}

@keyframes zoomIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Zoom-out animation for the modal */
@keyframes zoomOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* Animation for the cookie icon */
@keyframes iconBounce {
    0% {
        transform: scale(1.2);
    }
    25% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

.cookie-modal {
    width: 520px;
    padding: 30px;
    position: fixed;
    bottom: 15px;
    left: 15px;
    z-index: 999999;
    transition: all .5s;
    border-radius: 5px;
    border: 2px solid hsl(var(--primary-hsl));
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 0 0 15px hsl(var(--primary-hsl));
    opacity: 0; /* Start with the modal hidden */
    animation: slideUpIn 0.5s forwards; /* Apply the zoom-in animation when modal appears */
    animation-delay: 3s; /* Delay 3 seconds before animation starts */
}

html[data-bs-theme=dark] .cookie-modal{
    background-color: #222222 !important;
}

@media (max-width: 767px) {
    .cookie-modal {
        width: 100%;
        left: 0;
        bottom: 0;
        font-size: 14px;
        padding: 15px;
    }
}
.cookie-modal .icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    animation: iconBounce 1.5s forwards; /* Apply bounce animation to the icon */
    animation-delay: 3s;
}

.cookie-modal-content {
    margin-top: 20px;
}

.cookie-modal .icon.bounce {
    animation: iconBounce 1.5s;
}

.cookie-modal a {
    color: var(--secondary-color);
    text-decoration: none;
}


/* Content of the page */
.content {
    padding-left: 20px;
    padding-top: 50px; /* Adjust based on how much space you want */
}

@keyframes slideUpIn {
    0% {
        transform: translateY(100%); /* Start from below the screen */
        opacity: 0; /* Start invisible */
    }
    100% {
        transform: translateY(0); /* End at its normal position */
        opacity: 1; /* Become visible */
    }
}

/* Slide-down animation for the modal */
@keyframes slideDownOut {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%); /* Slide out to the bottom */
        opacity: 0; /* Fade out */
    }
}

@media (max-width: 767px) {
    .filter-card .theme-form .form-group:last-child {
       width: 100% !important;
    }
}

html[data-bs-theme="dark"] label{
    color: #fff !important;
}
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single{
    color: #fff !important;
    background-color: transparent !important;
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
}

html[data-bs-theme="dark"] .select2-dropdown {
    background-color: #282F36 !important;
}

html[data-bs-theme="dark"] .fileupload .uneditable-input {
    background: transparent !important;
}

html[data-bs-theme="dark"] .form-control[readonly] {
    background-color: transparent !important;
}