@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&display=swap');
html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
     font-family: "Domine", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-size: 11px;
    overflow-x: hidden;
    cursor: default;
    background-color: var(--bg-dark);
}

/* root files */
:root,
[data-bs-theme=dark] {
    --dark: white;
    --white: #212529;
    --textdark: #EEEEEE;
    --bg-dark: #31363F;
    --bg-csub: var(--bg-sidebar);
    /* --bg-csub: rgba(73, 190, 255, 0.1); */
    --shadow: #2a2e2e94;
    --bg-sidebar: #202936;
    --bs-border-color: #EEEEEE;
}

:root,
[data-bs-theme=light] {
    --secondary: #FF0854;
    --textdark: #31363F;
    --dark: black;
    --white: white;
    --success: #71dd37;
    --info: #00E5FF;
    --danger: #ff3e1d;
    --bg-dark: #EEEEEE;
    --bg-sub: var(--primary);
    --bg-csub: var(--white);
    --shadow: lightgray;
    --bg-sidebar: #31363F;
    --bs-border-color: #EEEEEE;
    --bs-table-bg-type: var(--white);
    --bs-border-width: 1px;
    --warning:#FFEB3B;
    --bg-sidebar: var(--white);
}

/* bootstrap overclasses */
.pagination {
    --bs-pagination-color: var(--primary) !important;
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-focus-bg: var(--primary);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-secondary-bg);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
}

.w-max-content{
    max-width: max-content;
}
.border-light {
    border-color: #C6D2D9 !important;
}
.card-rounded,
.tb-rounded {
    border-radius: var(--card-raduis);
}


button {
    border-radius: var(--btn-raduis);
}

.shadow {
    -webkit-box-shadow: 0 0 5px var(--shadow) !important;
    box-shadow: 0 0 5px var(--shadow) !important;
}

.tb-rounded {
    border-radius: 5px !important;
}

.border-none {
    border: 0 !important;
}

.bg-none {
    background-color: transparent !important;
}

.rounded-btn {
    height: 40px;
    width: 40px;
    border-radius: 50% !important;
    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;
}


.text-dark {
    color: var(--textdark) !important;
}
.text-danger{
    color: var(--danger)!important;
}
.text-success{
    color: var(--success)!important;
}
.text-primary {
    color: var(--primary) !important;
}

.bg-white {
    background-color: var(--white) !important;
}
.bg-warning{
    background-color: var(--warning) !important;
}
.bg-info{
    background-color: var(--info) !important;
}
.bg-sub {
    background-color: var(--bg-sub) !important;
}

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

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

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

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

/* .text-success {
    color: var(--success) !important;
}

.alert-sucess {
    color: var(--success);
}

.border-success {
    border-color: var(--success) !important;
} */

.border-common-1 {
    border: 1px solid var(--textdark);
}

.border-common-2 {
    border: 2px solid var(--textdark);
}

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

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

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

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

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

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: black!important;
}
.btn-info {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
}
.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
}

.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

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

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary) !important;
}

.note::before {
    content: "Note:";
    color: var(--danger);
}

/* attributes data */
.border-raduis {
    border-radius: var(--border-radius-menu, 0);
}

/*  */
.font-bold {
    font-weight: bold;
}

.border-none {
    border: none !important;
}

.top-50 {
    top: 50%;
}

.word-wrap {
    word-wrap: break-word;
    word-break: break-all;
}

.pointer {
    cursor: pointer;
}

.list-none {
    list-style: none;
}

.rs-sign::before {
    content: '\20B9';
    color: inherit;
    font-size: inherit;
    letter-spacing: 1.5px;
}

.font-05 {
    font-size: 0.5rem;
}

.font-075 {
    font-size: 0.75rem;
}

.font-1 {
    font-size: 1rem;
}

.font-1-5 {
    font-size: 1.5rem;
}

.font-2 {
    font-size: 2rem;
}

.font-4 {
    font-size: 4rem;
}

.bold-400 {
    font-weight: 400 !important;
}

.bold-450 {
    font-weight: 450 !important;
}

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

.bold-600 {
    font-family: 600 !important;
}

.fs-16 {
    font-size: 16px;
}

.fs-14 {
    font-size: 14px;
}


/* custom inputs */
.fileUploadInput {
    height: 38px;
}

input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

select,
input,
textarea,
.fileUploadInput {
    border-radius: 0.375rem !important;
    font-size: 10px;
    border: 1px solid #d9dee3 !important;
    font-weight: 100;
    box-shadow: none !important;
    background-color: transparent !important;
}

.form-control.is-invalid {
    border-color: var(--danger) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
.fileUploadInput:focus,
.form-select:focus,
.form-control:focus {
    outline: none;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-color: var(--primary) !important;
}

input:disabled,
.fileUploadInput:disabled {
    outline: none;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-style: dotted !important;
}

input[type="checkbox"] {
    border-radius: 0;
}

.form-label {
    font-weight: 400;
}

input::placeholder,
textarea::placeholder {
    transition: all 0.2s linear !important;
    color: #848688 !important;
}

input:focus::placeholder,
textarea:focus::placeholder {
    left: 0.1rem;
    position: relative;
    font-size: 15.5px;
}

.toggle-input {
    opacity: 0;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    width: 0;
}

.toggle-input-show {
    opacity: 1;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    width: 100% !important;
}

/* CSS for custom scrollbar

/* width */
.ps__thumb-y,
.ps__rail-y {
    z-index: 100000;
}


/* login page */
.login-body {
    background: url('../storage/images/web/bg2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
}


.bg-white-drop {
    background-color: rgba(255, 255, 255, 0.135);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

}

/* tabel */

.table-responsive::-webkit-scrollbar {
    width: 1px !important;
    height: 3px;
}

.scroll::-webkit-scrollbar {
    width: 1px !important;

}

.table-responsive::-webkit-scrollbar-thumb:hover,
.scroll::-webkit-scrollbar-thumb:hover {
    background: #888;
}

.table-responsive::-webkit-scrollbar-thumb,
.scroll::-webkit-scrollbar-thumb {
    background: var(--primary);
}

/* svg */
.flex-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
    width: 35px;
    height: 28px;
}

/* toogle btn */
.togglelabel {
    width: 45px;
}

.togglelabel .outer-toogle {
    width: 45px;
    height: 20px;
    background: #cbcb;
    border-radius: 25px;
    -webkit-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    /* border: 1px solid var(--textdark); */
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.inner-toggle {
    background: white;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    -webkit-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    -webkit-box-shadow: 0 0 5px;
    box-shadow: 0 0 5px;

}

.toggleswitch:checked~.togglelabel>.outer-toogle .inner-toggle {
    -webkit-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);

}

.toggleswitch:checked~.togglelabel>.outer-toogle {
    background-color: var(--success);
    -webkit-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}

/* .toggleswitch:checked~.togglelabel>.outer-toogle::after {
    content: 'Active';
    color: var(--success);
    position: absolute;
    left: 48px;
    font-weight: bold;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
} */

.modal-header {
    background-color: var(--primary);
    color: white !important;
    border-top-left-radius: calc(0.5rem - 0px);
    border-top-right-radius: calc(0.5rem - 0px);
}

.modal-header .btn-close {
    color: white !important;
}

.btn-close:focus {
    box-shadow: none;
}

/* admin */
.nav-link {
    color: var(--textdark);
}

.profile-img-nav {
    width: 35px;
    height: 35px;
    overflow: hidden;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    border: 1px solid var(--textdark);
    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;
    vertical-align: middle;
}

.profile-img-nav img {
    height: 35px;
    object-fit: cover;
}

textarea:focus,
textarea:active {
    border-color: var(--primary) !important;
}

input[type="file"]::-webkit-file-upload-button {
    background: var(--primary);
    color: white;
}

.sidebar {
    z-index: 1001;
    width: calc(20% - 8px);
    background: var(--bg-sidebar);
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    box-shadow: 0 0 5px var(--shadow);
    margin: 8px;
    height: calc(100% - 16px);
    
}

.sidebarcontent {
    height: 100%;
    background: var(--bg-sidebar);
}

.hover-to-action-back {
    transition: all 0.02s linear;
}

.bottom-info-container {
    bottom: 0 !important;
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-content {
    width: calc(100% - 20%);
    height: 100%;
    position: relative;
    left: 20%;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    overflow-x: hidden;
}

.sidebar-container {
    max-height: 70px;
    min-height: 82px;
    background-color: var(--bg-sub);
    color: white;
    font-weight: bold;
}

.off-sidebar {
    background-color: var(--bg-sidebar);
}

.sidebarcontent {
    height: calc(100% - 83px);
}

.sidebarcontent ul {
    min-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* sidebar */
.sidebarcontent ul .nav-item {
    list-style: none;
    margin: 2px auto;
    padding: 2px 0;
    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;
    min-width: 90%;
    color: var(--textdark);
    word-break: break-all;
    border-bottom: 1px solid var(--primary);
    overflow: hidden;
}
.nav-item .nav-link,{
    font-weight: bold;
    font-size: 10px!important;
    text-transform:uppercase;
    /*letter-spacing:1px;*/
}
.nav-item a{
    text-transform:uppercase;
    /*letter-spacing:1px;*/
}
.navbar-main {
    z-index: 1000;
    background-color: var(--bg-sidebar);
    height: auto;
    width: 98%;
    top: 5px;
}

.navbar-brand {
    height: 50px;
    width: auto;
}

.navbar-brand img {
    object-fit: contain;
    height: 50px;
    width: auto;
}

.nav-item {
    border-radius: var(--border-radius-menu);
}

.nav-item.active{    
background-color: var(--bg-sub);
}
.nav-item.active .nav-link,
.nav-item.active i {
    color: white;
}

.nav-item a,
.sidebar-input {
    text-decoration: none;
    text-align: start;
    width: 80%;
    word-break: break-all;
}

.icon-width {
    text-align: start;
    padding: 0 20px;
    width: 20%;
    margin-right: 5px;
}

.image-user-sidebar,
.image-user-sidebar>img {
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 100%;
}

.dropdown-menu {
    border: none !important;
    -webkit-box-shadow: var(--bs-box-shadow) !important;
    box-shadow: var(--bs-box-shadow) !important;
}

.dropdown-menu .nav-item {
    width: 100%;
}

.dropdown-item {
    font-size: 12px;
    width: 100% !important;
}

.btn {
    font-size: 14px;
    border-radius: var(--btn-raduis);
}

.dropdown-item:active {
    background-color: var(--primary);
}

/* menu system */





.menu-bar {
    height: 2px;
    width: 25px;
    transition: all 0.2s ease-in-out;
}

.menu-bar:nth-child(2) {
    width: 20px;
}

#menushow:checked~.menushow>.menu-bar:nth-child(1) {
    transform: rotate(48deg) translateY(1.9px);
    width: 10px;
}

#menushow:checked~.menushow>.menu-bar:nth-child(3) {
    transform: rotate(-48deg) translateY(-1.9px);
    width: 10px;
}

#menushow:checked~.menushow>.menu-bar:nth-child(2) {
    margin-right: 13px;
}

.nav-second.show {
    margin-top: 3px;
}


.content-main {
    width: 100%;
    left: 0;
}

.menu {
    -webkit-transform: translateX(-120%) !important;
    -ms-transform: translateX(-120%) !important;
    transform: translateX(-120%) !important;
}

/* error */
.error {
    width: 80%;
    left: 20%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 2000;
}

/* pagination */
.w-5 {
    width: 30px;
    fill: var(--primary);
}

.relative a {
    color: var(--primary);
    text-decoration: none;
}

.flex-1 {
    display: none;
}

.relative a:active {
    color: var(--secondary);
}

/* icons */
.icon-border {
    background-color: var(--bg-sub);
    border-radius: 100%;
    width: 14px;
    height: 14px;
    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;
    padding: 18px;
}

.icon-border i {
    font-size: 18px;
}

.toggle-button {
    width: 25px;
    height: 25px;
    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;
}

.rotate180 {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    color: var(--primary) !important;
}

.transform-div-roles-name {
    -webkit-transform: translateX(-12px);
    -ms-transform: translateX(-12px);
    transform: translateX(-12px);
}

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

/* datatabel */
#myTable {
    font-size: 12px;
}

#myTable thead tr th {
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    min-width: 60px;
    max-width: 180px;
}

text,
.apexcharts-legend-text {
    fill: var(--dark);
    color: var(--dark) !important;
}

#customSearch {
    height: calc(2.4375rem + 2px);
}

#myTable_previous,
#myTable_next,
#myTable_paginate span a {
    font-weight: bold;
    margin: 0px 10px;
    cursor: pointer;
    /* float: left; */
}

.dataTables_paginate {
    width: 50%;
    margin: 10px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: var(--dark) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--dark) !important;
}

.dataTables_filter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.dataTables_wrapper .dataTables_filter label {
    color: var(--dark) !important;
}

.dataTables_filter input {
    border: none;
    border-bottom: 2px solid var(--primary);
}

.dataTables_filter input:focus {
    border: none;
    border-bottom: 2px solid var(--primary);
    outline: none !important;
}

.dataTables_length select {
    border: 1px solid !important;
}

#tablebtncustom {
    padding: 5px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.table {
    width: 100% !important;
}

#notificationdropdown {
    width: 300px;
    left: -259px;
}

.notificatins {
    color: var(--textdark);
    -webkit-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

.notificatins:hover {
    background-color: var(--primary) !important;
    color: white !important;
}

.img50x50 {
    height: 50px;
    width: 50px;
}

.text-turncate {
    width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* toast alert */
.toast-alert {
    position: fixed;
    top: 25px;
    right: 30px;
    border-radius: 10px;
    background: #fff;
    -webkit-box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    -webkit-transform: translateX(calc(100% + 30px));
    -ms-transform: translateX(calc(100% + 30px));
    transform: translateX(calc(100% + 30px));
    -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    z-index: 100000000;
}

.toast-alert::before {
    content: "";
    position: absolute;
    background-color: var(--bs-secondary-bg);
    border-radius: inherit;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    height: 100%;
    width: 5px;
}

.toast-alert.show {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.toast-alert .toast-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px 35px 20px 25px;
}

.toast-content .check {
    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;
    height: 30px;
    min-width: 30px;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
}

.toast-content .message {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 20px;
}

.message .text {
    font-size: 12px;
    font-weight: 400;
    color: black;
}

.message .text.text-1 {
    font-weight: 600;
}

.toast-alert .close {
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;
}

.toast-alert .close:hover {
    opacity: 1;
}

.toast-alert .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;

}

.toast-alert .progress:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: var(--danger);
}

.toast-alert .pr:before {
    background-color: var(--success);
}

.progress.active:before {
    -webkit-animation: progress 5s linear forwards;
    animation: progress 5s linear forwards;
}

@-webkit-keyframes progress {
    100% {
        right: 100%;
    }
}

@keyframes progress {
    100% {
        right: 100%;
    }
}

/* new chnages in theme */
#profiledropdown {
    min-width: 285px;
    left: -259px;
}

[type="file"] {
    /* Style the color of the message that says 'No file chosen' */
    color: var(--bg-dark);
}

[type="file"]::-webkit-file-upload-button,
.uploadSectionBrowse {
    background: var(--primary);
    border-radius: 4px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    outline: none;
    padding: 10px 25px;
    text-transform: uppercase;
    transition: all 1s ease;
    height: 38px;
    font-weight: bold;
}

[type="file"]::-webkit-file-upload-button:hover {
    background: var(--bg-dark);
    border: 2px solid #535353;
    color: #000;
}


.icon-password-show {
    top: 55%;
    right: 4px;
}


.custom-tooltip {
    position: relative;
    display: inline-block;
}

[data-title] {
    position: relative;
    display: inline-block;
}

[data-title]:hover::after {
    content: attr(data-title);
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    background-color: black;
    color: white;
    padding: 5px;
    white-space: nowrap;
    transition: opacity 0.3s;
    font-size: 12px;
    pointer-events: none;
    z-index: 100000;
    opacity: 1;
    border-radius: var(--card-raduis);
}

[data-title]:hover:before {
    content: "";
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent black transparent;
    width: 0;
    height: 0;
}


[data-title]:hover::after {
    opacity: 1;
}



@media only screen and (max-width: 767px) {
    .sidebar {
        -webkit-transform: translateX(-110%);
        -ms-transform: translateX(-110%);
        transform: translateX(-110%);
        border: none;
    }

    .main-content,
    .error {
        width: 100%;
        left: 0%;
    }

    .content-main {
        overflow: hidden;
        position: fixed !important;
    }

    .menu {
        -webkit-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        transform: translateX(0) !important;
        width: 60%;
        border: none;
        background-color: var(--bg-sidebar);
    }

    .menu-icon-desktop {
        -webkit-transform: translateX(calc(0% + 50px));
        -ms-transform: translateX(calc(0% + 50px));
        transform: translateX(calc(0% + 50px));
    }

    .menu-icon-desktop {
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    #menushow:checked~.menushow>.menu-icon-desktop {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    .dataTables_filter {
        margin: 3% 0;
    }

    .table-btn {
        width: 100%;
        margin-bottom: 3px;
    }

    #myTable_filter,
    .dataTables_length,
    .dataTables_length label,
    .dt-buttons,
    .dataTables_paginate,
    .dataTables_filter label,
    .dataTables_filter input {
        width: 100%;
    }

    .dt-buttons {
        display: flex !important;
    }

    .dt-buttons button {
        width: 50%;
    }

    .dms-nav-collpase {
        width: 100%;
    }

    #notificationdropdown {
        left: -200px !important;
    }

}

/* For medium-sized devices (tablets) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sidebar {
        -webkit-transform: translateX(-110%);
        -ms-transform: translateX(-110%);
        transform: translateX(-110%);
    }

    .main-content,
    .error {
        width: 100%;
        left: 0%;
    }

    .content-main {
        width: 100% !important;
        left: 0;
    }

    .menu {
        -webkit-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        transform: translateX(0) !important;
        width: 40%;
    }

    .menu-icon-desktop {
        -webkit-transform: translateX(calc(20% + 50px));
        -ms-transform: translateX(calc(20% + 50px));
        transform: translateX(calc(20% + 50px));
    }

    .menu-icon-desktop {
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    #menushow:checked~.menushow>.menu-icon-desktop {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

table tr th{
    text-transform:uppercase;
}
table tr th,
td {
    color: var(--dark) !important;
}

table td {
    font-weight: 500;
}

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


table,
th,
td {
    border-color: var(--bs-border-color) !important;
    border-left: none;
    border-right: none;
}

.note-image-input {
    border-color: var(--primary);
}

/* Style the custom checkbox appearance */
.custom-checkbox-label .checkbox-custom {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary);
    border-radius: var(--card-raduis);
    background-color: #fff;
    transition: background-color 0.3s, border-color 0.3s;
    z-index: 100;
}

/* Style for the custom checkbox when checked */
.custom-checkbox:checked+.checkbox-custom {
    background-color: transparent;
    border-color: var(--primary);
}

/* Style for the checkmark in the custom checkbox */
.custom-checkbox:checked+.checkbox-custom::after {
    content: "";
    display: block;
    width: 10px;
    height: 5px;
    border: solid var(--primary);
    /* Checkmark color */
    border-width: 4px 4px 0px 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(120deg);
}