/* import font family */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    --font-family: "Noto Sans", sans-serif;
    --primary: #54bd95;
    --bg-primary: #e6f6f0;
    --primary-hover: #146c43;
    --white: #fff;
    --dark: #191a15;
    --danger: #ec407a;
    --border: #d9dee3;
}

/* start global css */
body {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    background-color: var(--bg-primary);
    color: var(--dark);
}

h5 {
    font-size: 20px;
}

a {
    font-style: none;
    text-decoration: none;
    color: var(--dark);
}

a:hover {
    color: var(--primary) !important;
}

i {
    font-size: 16px;
}

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

.arCard {
    background-color: var(--white);
    border-radius: 5px;
    width: 100%;
    -webkit-box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);
    box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);
}

.arCard-body {
    padding: 1rem;
    border-radius: 5px;
}

.arCard-title {
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px 10px 0;
    color: var(--dark);
}

.arBtn {
    padding: 10px 20px;
    background-color: var(--primary);
    border-radius: 5px;
    color: var(--white);
    border: 1px solid var(--primary);
}

.arBtn:hover {
    background-color: var(--primary-hover);
    border: 1px solid var(--primary-hover);
    color: var(--white) !important;
}

.arBtn-outline {
    padding: 10px 20px;
    background-color: transparent;
    border-radius: 5px;
    color: var(--primary);
    border: 1px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.arBtn-outline path {
    stroke: var(--primary);
}

.arBtn-outline:hover {
    background-color: var(--primary);
    color: var(--white) !important;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.arBtn-outline:hover path {
    stroke: var(--white) !important;
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background-color: var(--primary-hover);
}
.btn-outline-primary:hover svg path,
.btn-outline-danger:hover svg path {
    stroke: var(--white) !important;
}

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

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

.bg-body {
    background-color: var(--bg-primary) !important;
}
.py-70 {
    padding: 70px 0 !important;
}
.arForm-group small {
    font-size: 10px;
    background-color: var(--bg-primary);
    padding: 0 5px;
    border-radius: 10px;
    margin-left: 5px;
    color: var(--primary);
    font-weight: 700;
}

.input-group-text {
    color: var(--dark);
    font-size: 14px;
}

.small-text {
    font-size: 12px;
}

.status-bg-primary {
    background-color: var(--bg-primary);
    color: var(--primary);
    padding: 0px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.status-bg-denger {
    background-color: #ffb5b540;
    color: var(--danger);
    padding: 0px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.arForm-label {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    font-size: 14px;
    font-weight: 500;
}

.arForm-control {
    font-size: 0.9rem !important;
    padding-top: 0.7rem !important;
    padding-bottom: 0.5rem !important;
    color: var(--dark) !important;
    font-family: "Noto Sans", sans-serif;
}

.arForm-file {
    padding: 9.5px;
    font-size: 0.9rem;
}

.arForm-control:focus,
.arForm-file:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--primary) !important;
    outline: 0;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.arForm-control option:hover {
    background-color: var(--danger) !important;
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--primary) !important;
    outline: 0;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.arCustom-tooltip {
    --bs-tooltip-bg: var(--primary) !important;
    --bs-tooltip-color: var(--white) !important;
}

.text-danger {
    color: var(--danger);
}

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

.btn-close:focus {
    -webkit-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}

.text-bg-primary {
    background-color: rgba(105, 108, 255, 0.16) !important;
    color: var(--primary) !important;
}

.text-bg-warning {
    color: var(--danger) !important;
    background-color: #ffc10740;
}
.active-status {
    background: #e8f7f1;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #54bd95;
    color: #54bd95;
    font-size: 12px;
}
.de-active-status {
    background: #ec407a14 !important;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid var(--danger);
    color: var(--danger);
    font-size: 12px;
}
.object-cover {
    object-fit: cover;
}
/* form {
   overflow: hidden;
} */
.message-box form {
    overflow: auto !important;
}

/* loading animation css */
.loading-spinner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 300px;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(105, 108, 255, 0.16);
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* select 2 css start  */
.select2-container {
    width: 100% !important;
}
.dt-container .select2-container {
    width: 62px !important;
}

.select2-container .select2-selection--single {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 41px;
    border-color: #dee2e6;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: var(--dark);
    line-height: 40px;
    text-transform: capitalize;
    padding-left: 12px;
}

.select2-container--default .select2-results__option--selected {
    background-color: transparent;
}

li.select2-results__option.select2-results__option--selectable:hover {
    background: var(--bg-primary) !important;
    color: #000;
    font-weight: 500;
}

.select2-container--default
    .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bg-primary) !important;
    color: var(--dark) !important;
    font-weight: 600;
}

.select2-container--default .select2-results > .select2-results__options {
    text-transform: capitalize;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: none;
    color: var(--dark);
}

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

.select2-container--default.select2-container--focus
    .select2-selection--multiple {
    border: 1px solid var(--primary) !important;
    outline: 0;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__display {
    cursor: default;
    padding-left: 30px !important;
    padding-right: 5px;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove {
    border-right: 1px solid var(--white);
    color: var(--white);
    padding: 0 10px;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary);
    color: var(--white);
    padding: 5px;
    margin-left: 5px;
    margin-top: 5px;
    padding: 0;
    padding-left: 5px;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove:hover,
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove:focus {
    background-color: var(--primary) ad;
    color: var(--white);
    outline: none;
}

.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: text;
    line-height: 30px !important;
    padding-bottom: 5px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    position: relative;
    outline: 0;
}

.select2-container--default.select2-container--focus
    .select2-selection--multiple {
    border: 1px solid var(--primary) !important;
    outline: 0;
    padding: 0 0 5px 0;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 8px;
    right: 7px;
    width: 20px;
}

.form-control[type="file"] {
    overflow: hidden !important;
    color: var(--dark);
}

.select2-dropdown {
    border-color: #dee2e6;
}

.dashboard-footer {
    margin: 10px 0;
    bottom: 0;
}

.dashboard-footer .arCard-body {
    padding: 15px 20px;
    background-color: var(--white);
    border-radius: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

.dashboard-footer .arCard-body p {
    margin-bottom: 0;
}

.dashboard-footer .arCard-body p a {
    color: var(--primary);
}

/* end global css */

/* start navbar */
.navbar {
    background-color: var(--white);
    padding: 10px;
    margin: 15px 0;
    color: var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-radius: 5px;
}

.collapse-icon {
    padding: 10px;
}

.collapse-icon i {
    font-size: 20px;
    font-weight: 500;
    padding-top: 5px;
}

.right-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px;
}

.right-nav .helps {
    color: var(--dark);
}

.right-nav .helps button {
    border: 0;
    color: var(--dark);
}

.right-nav .helps button i {
    font-size: 25px;
}

.multi-language button svg,
.ai-menu svg {
    margin: 0px 5px;
}

.dropdown .dropdown-menu.show {
    border: none;
    padding: 10px;
    -webkit-box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);
    box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);
}

.dropdown .dropdown-menu.show .dropdown-item {
    font-size: 15px;
    color: var(--dark);
    padding: 10px 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 5px;
    transition: 0.5s;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.profile .dropdown-menu.show {
    width: 250px;
    padding: 10px;
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--bs-dropdown-link-hover-bg) !important;
}

.right-nav img {
    position: relative;
    object-fit: cover;
}

.nav-profile {
    position: absolute;
    width: 20%;
    right: 5px;
    padding: 0px 10px;
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    background-color: var(--white);
}

.navbardropdown:hover .nav-profile {
    visibility: visible !important;
    opacity: 1 !important;
}

.nav-profile ul {
    list-style: none;
    padding: 10px 0px;
    color: #000;
    padding-bottom: 0;
    margin-bottom: 7px;
}

.nav-profile ul li {
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 5px;
}

.nav-profile ul li a {
    display: block;
    width: 100%;
}

.nav-profile ul li:hover {
    background-color: var(--primary);
    color: var(--white);
    -webkit-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;
}

.nav-profile ul li:hover a {
    color: var(--white);
    -webkit-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;
}

.nav-profile ul li a span {
    padding-left: 5px;
}

/* end navbar */

/* start navigation */
.navigation {
    background-color: var(--white);
    padding: 15px;
    color: #333;
    -webkit-box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);
    box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);
    z-index: 99;
}

.arNavigation .menu-header small,
.arNavigation .menu-header::before {
    display: none !important;
}

.arNavigation .navigation-logo,
.navigation-favicon {
    display: none;
}
.arNavigation .navigation-favicon {
    display: block;
}

main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.navigation {
    width: 262px;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.main-content {
    width: calc(100% - 262px);
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: relative;
    padding: 0 20px;
}

.content-body {
    min-height: calc(100vh - 30vh);
}

.arNavigation {
    width: 74px;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 99;
}

.arNavigation .menu-item span,
.arNavigation .menu-item .sub-menu-icon,
.arNavigation .menu-item .sub-menu {
    display: none;
}

.menu-item:focus-visible,
button:focus-visible {
    outline: 0 !important;
}

.arContent {
    width: calc(100% - 74px);
    position: fixed;
    right: 0;
}

.menu-item .sub-menu {
    opacity: 0;
    visibility: hidden;
    height: 0px;
}

.sub-menu-open {
    opacity: 1 !important;
    visibility: visible !important;
}

.active .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    height: 100% !important;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.md-navigation-close {
    display: none;
}

.menu-icon {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 0.1rem;
    font-size: 1.1rem;
}

.navigation-menu ul {
    list-style: none;
    padding: 0px;
}

.brand {
    overflow: hidden;
    text-align: center;
}

.brand h2 {
    font-size: 1.75rem;
    letter-spacing: -0.5px;
    color: var(--dark);
    font-weight: 700;
    padding: 10px;
}

.navigation-menu ul .menu-header {
    position: relative;
    color: #a1acb8;
    margin: 15px 0;
}

.navigation-menu ul .menu-header:before {
    content: "";
    background: #333;
    position: absolute;
    left: -10px;
    top: 10px;
    width: 1rem;
    height: 1px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.menu-item-label {
    margin-right: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.menu-item-label span {
    padding-left: 10px;
}

.navigation-menu ul .menu-item a {
    padding: 10px;
    display: block;
    width: 100%;
    border-radius: 5px;
    color: var(--dark);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.navigation-menu ul .menu-item a:hover {
    background-color: var(--bg-primary);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    color: var(--primary);
    border-radius: 5px;
}

.navigation-menu ul .menu-item a:hover path {
    stroke: var(--primary);
}

.navigation-menu ul .sub-menu-item .menu-link:hover {
    background-color: transparent !important;
    color: var(--primary) !important;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
}

.menu {
    position: relative;
}

.sub-menu {
    list-style: none;
    padding-left: 0px;
}

.sub-menu .active a {
    color: var(--primary) !important;
}

.menu-link i {
    font-size: 12px;
    margin-top: 1.5px;
}

.sub-menu-icon {
    position: absolute;
    top: 9px;
    right: 10px;
}

.rotated .sub-menu-icon {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.navigation-menu ul .active .menu-item-label {
    background-color: var(--bg-primary) !important;
    color: var(--primary) !important;
}

.navigation-menu ul .active .menu-item-label path {
    stroke: var(--primary);
}

.sub-menu-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sub-menu-item .menu-link span {
    padding-left: 5px;
}

.sub-menu-item a {
    background-color: transparent;
}

.sub-menu-active a {
    color: var(--primary) !important;
}

.sub-menu-active svg {
    fill: var(--primary);
}

/* admin image  */
.admin-avator {
    margin: auto;
    text-align: center;
}

.admin-avator img {
    height: 80px;
    width: 80px;
    border-radius: 50px;
}

.avator-title {
    margin: 15px;
}

.arNavigation:hover {
    position: absolute;
    z-index: 99;
    width: 262px !important;
}
.arNavigation:hover .menu-item span, .arNavigation:hover .menu-item .sub-menu-icon, .arNavigation:hover .menu-item .sub-menu {
    display: block;
}
.arNavigation:hover .navigation-logo {
    display: block;
}
.arNavigation:hover .navigation-favicon {
    display: none;
}
/* end navigation */

/* scroll bar */
.scrollbar {
    overflow: scroll;
    height: 100vh;
    overflow-x: hidden;
    /* scrollbar-color: #888 #f1f1f1; */
    scrollbar-width: none;
}

/* WebKit browsers (Chrome, Edge, Safari) */
.scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px !important;
}

/* start dashboard content body */
.breadcrumb {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.breadcrumb .create-button {
    padding: 1rem;
    padding-top: 0;
}

.breadcrumb ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 !important;
}

.breadcrumb li a {
    color: var(--dark);
}

.breadcrumb-item + .breadcrumb-item::before {
    display: none;
}

.welcome {
    padding-top: 30px;
    padding-left: 14px;
    padding-bottom: 20px;
}

.welcome h5 {
    font-size: 30px;
    font-weight: 600;
}

.welcome p {
    margin-bottom: 30px;
}

.welcome a {
    margin: 20px 0;
}

.overview-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.overview-card-right h5 {
    font-size: 30px;
    margin-bottom: 0px;
    text-align: end;
}

.overview-card-left a {
    padding: 5px 15px;
    border: 0.5px solid var(--primary);
    border-radius: 20px;
}

.overview-card-left a:hover {
    background-color: var(--primary);
    color: var(--white) !important;
    -webkit-transition: 0.7s ease;
    -o-transition: 0.7s ease;
    transition: 0.7s ease;
}

.overview-bg {
    background-size: cover;
    background-position: bottom;
}

.bar-chart-body {
    position: relative;
}

/* start datatable */
.tw-300 {
    min-width: 300px;
}
.tw-250 {
    min-width: 250px;
}
.tw-200 {
    min-width: 200px;
}
.tw-150 {
    min-width: 150px;
}
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    border-bottom: 1px dashed var(--border);
    text-transform: uppercase;
    color: var(--dark) !important;
}

table {
    width: 100% !important;
}

.table td {
    color: var(--dark);
}
.table tr {
    vertical-align: middle;
}

.service-table .dropdown a,
.newsletter-list .dropdown a {
    background: transparent !important;
    border: 0 !important;
}

/* .dataTable thead tr {
    padding: 10px 0;
} */
table.dataTable > thead > tr:first-child > * {
    padding-left: 10px;
}

table.dataTable > tbody > tr > * {
    border-top: none;
    padding-left: 10px !important;
    color: var(--dark);
}

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
    text-align: left;
}

.dataTable thead tr,
.dataTable tbody tr {
    border-bottom: 1px dashed var(--border) !important;
    vertical-align: middle;
}

.dataTable tr td {
    padding: 15px 0 !important;
    text-align: left;
}

.dataTable tr td .dropdown {
    padding-left: 15px;
    position: static;
}

.dt-length label {
    text-transform: capitalize;
    margin-left: 10px;
}

div.dt-container select.dt-input {
    border-color: var(--border);
    padding: 5px 10px;
}

div.dt-container .dt-search input {
    border: 1px solid var(--border) !important;
    outline: none;
    margin-left: 10px;
    padding: 10px;
}

div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border: none;
}

.table-image {
    height: 40px;
    width: 40px;
    border-radius: 50px;
    -o-object-fit: cover;
    object-fit: cover;
    border: 1px solid #e7e7ff;
}

.table > :not(caption) > * > * {
    border: transparent;
}
.line-1 {
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.h-100vh {
    height: 100vh !important;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    background: transparent !important;
    border-radius: 5px;
    color: var(--dark) !important;
    border-color: var(--border) !important;
}

.dt-paging nav .current {
    background: var(--bg-primary) !important;
    border-radius: 5px !important;
    border-color: var(--bg-primary) !important;
    color: var(--primary) !important;
}

div.dt-container .dt-paging .dt-paging-button:active {
    -webkit-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}

.imgWithPreview {
    width: 150px;
}

.imgWithPreview img {
    border-radius: 5px 5px 0 0;
    width: 150px !important;
    border: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    -o-object-fit: contain;
    object-fit: contain;
}

.imgWithPreview label {
    text-align: center;
    width: 150px;
    padding: 5px;
    background: var(--white);
    border-radius: 0 0 5px 5px;
    font-weight: 600;
    border: 1px solid #dee2e6;
    cursor: pointer;
    border-top: 0;
    font-size: 12px;
}

.imgWithPreview small {
    text-transform: capitalize;
    font-size: 11px;
}

.smtp-tutorial ul {
    background: rgba(105, 108, 255, 0.16) !important;
    padding: 20px 40px;
    border-radius: 5px;
    line-height: 25px;
}

.about-table tr td {
    color: var(--dark);
    padding: 15px 0;
}

.about-table tr {
    border-bottom: 1px dashed var(--border);
}

.about-table tr:last-child {
    border-bottom: 0;
}

/* end datatable */

/* start color box css  */
.color-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.color-box {
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
}

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

/* end color box css  */

/* confirm alert box css */
.custom-alert {
    margin-left: 10px;
}

.custom-alert p {
    text-align: center;
}

.confirm-alert .alert-icon {
    color: var(--danger);
    margin: 15px;
    text-align: center;
}

.confirm-alert .alert-buttons {
    text-align: center;
    margin-bottom: 20px;
}

.confirm-alert .alert-buttons a {
    padding: 7px 15px;
    border: 1px solid var(--primary);
    border-radius: 5px;
}

.confirm-alert .alert-buttons .cancel-btn {
    margin-right: 5px;
    border: 1px solid var(--primary);
}

.confirm-alert .alert-buttons .confirm-btn {
    background-color: var(--primary);
    margin-left: 5px;
    color: var(--white) !important;
    font-weight: 600;
}

.confirm-alert .alert-buttons .confirm-btn:hover {
    background-color: var(--primary-hover);
}

/* end alert box css */
.pie-chart {
    height: 400px;
    width: 100%;
    position: relative;
}

/* end dashboard content body */

/* Modal animation keyframes for zoom-in */
@-webkit-keyframes zoomIn {
    from {
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0;
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0;
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes zoomOut {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0;
    }
}

@keyframes zoomOut {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(0.3);
        transform: scale(0.3);
        opacity: 0;
    }
}

/* Initial state modal */
.arModal-content {
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
    transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease, opacity 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease,
        -webkit-transform 0.3s ease;
}

/* Animation states modal */
.arModal-content.showing {
    -webkit-animation: zoomIn 0.3s forwards;
    animation: zoomIn 0.3s forwards;
}

.arModal-content.hiding {
    -webkit-animation: zoomOut 0.3s forwards;
    animation: zoomOut 0.3s forwards;
}

.arModal-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 1rem 1rem 0 1rem;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border) !important;
    position: relative;
}

.arModal-title button {
    position: absolute;
    right: -25px;
    top: -25px;
    color: var(--white);
    padding: 0;
    border-radius: 50px;
    border: none;
    background: transparent;
}

.arModal-title button svg {
    background: var(--primary);
    padding: 7px;
    border-radius: 50px;
}

.arModal-title button i:hover {
    background-color: rgba(105, 108, 255, 0.16) !important;
    color: var(--primary);
}

.arModal-title h1 {
    padding: 0;
    margin: 0;
    font-size: 20px;
    color: var(--dark);
    font-weight: 800;
}

.modal-body {
    padding-top: 5px;
}

/* end main section */

.random-password-generate {
    position: relative;
}

.random-password-generate a {
    position: absolute;
    right: 0;
    top: 50%;
    padding: 10px;
    -webkit-transform: translate(-10%, -50%);
    -ms-transform: translate(-10%, -50%);
    transform: translate(-10%, -50%);
}

.browse-file {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 130px;
    color: var(--dark);
    border: 1.4px dashed var(--border);
    border-radius: 5px;
    padding: 62px 0;
    margin: 20px 0px;
}

.browse-file i {
    font-size: 50px;
}

/* verify settings css */
.verify-settings .item,
.previous-ticket .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 20px;
    border-left: 1px solid var(--primary);
    padding-left: 20px;
}

.verify-settings p,
.previous-ticket p {
    margin: 0;
    font-weight: 700;
}

.verify-settings .item .form-check,
.previous-ticket .item .form-check {
    padding-right: 15px;
}

/* .verify-settings a {
    font-size: 12px;
    border: 1px solid var(--primary);
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--primary);
    color: var(--white);
}

.verify-settings a:hover {
    background: transparent;
    color: var(--primary);
    -webkit-transition: 0.6s ease;
    -o-transition: 0.6s ease;
    transition: 0.6s ease;
} */

.verify-settings .form-check-input,
.previous-ticket .form-check-input {
    width: 18px;
    height: 18px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--dark);
    border-radius: 5px;
    background-color: var(--white);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.verify-settings .form-check-input:checked,
.previous-ticket .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-4 4a.75.75 0 0 1-1.08 0l-2-2a.75.75 0 1 1 1.08-1.04l1.47 1.47 3.47-3.47z'/%3E%3C/svg%3E");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.verify-settings .form-check-input:hover {
    border-color: var(--primary);
}

.verify-settings .form-check-input:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}

.verify-body .arForm-group {
    position: relative;
}

.verify-body input {
    padding: 15px 95px 15px 12px !important;
}

.verify-body button {
    position: absolute;
    top: 50%;
    right: 46px;
    -webkit-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}

.verify-info {
    margin-top: 15px;
    border: 1px dashed #dee2e6;
    border-radius: 5px;
    min-height: 200px;
}

.verify-info .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px 20px 15px;
}

.verify-info .header i {
    font-size: 20px;
    padding: 6px;
    border: 1px solid var(--dark);
    border-radius: 5px;
    margin-right: 10px;
}

.verify-info .header span {
    font-size: 16px;
}

.verify-info .details ul {
    list-style: none;
    padding-left: 20px;
}

.verify-info .details ul li {
    line-height: 30px;
}

.verify-info p {
    color: #b7bcc0;
}

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

/* summernote css */
.note-toolbar,
.note-resizebar {
    background-color: var(--white) !important;
}

.dropdown-toggle::after {
    display: none;
}

.note-font .note-btn.dropdown-toggle,
.note-fontsize .note-btn.dropdown-toggle,
.note-color .note-btn.dropdown-toggle {
    padding: 7px;
}

.note-btn.active,
.note-btn:active {
    background-image: none;
    -webkit-box-shadow: 0 0 0 0 !important;
    box-shadow: 0 0 0 0 !important;
}

.note-editor .note-toolbar .note-dropdown-menu.note-check a i,
.note-popover .popover-content .note-dropdown-menu.note-check a i {
    color: var(--dark) !important;
}

/* tickets css */
.single-card {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 5px;
}

.single-card:hover {
    border: 1px solid var(--primary);
}

.serial-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
}

.user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.user-tags {
    color: #6c757d;
    font-size: 0.875rem;
}

.top-bar {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.nav-tabs {
    gap: 10px;
}

.dropdown-toggle::after {
    margin-left: 5px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: #6f42c1;
    color: white;
    border: none;
}

/* .content-body .arCard-body form {
    overflow-x: scroll;
} */

.icon-btn.inactive {
    background-color: #f1f1f1;
    color: #6f42c1;
}

.icon-group {
    display: flex;
    gap: 10px;
    color: #6c757d;
    font-size: 0.875rem;
    align-items: center;
}

.icon-group .icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 20px;
}

.icon-group .icon-item .svg {
    padding: 10px;
    background: rgba(105, 108, 255, 0.16) !important;
    border-radius: 50px;
}

/* Custom scrollbar styling */
.conversation::-webkit-scrollbar {
    width: 0;
}

.conversation::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 10px !important;
}

.conversation::-webkit-scrollbar-thumb:hover {
    background-color: var(--border) !important;
}

.conversation::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

.message-icon svg {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(50%, -42%);
    -ms-transform: translate(50%, -42%);
    transform: translate(50%, -42%);
    font-size: 25px;
}
.massage-box textarea {
    border: none;
    font-size: 14px;
}
.massage-box textarea:focus {
    box-shadow: none;
}

.empty-conversation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
}

.empty-conversation img {
    width: 100px;
}

.ticket-body .list-group-item {
    border: 0;
    padding: 0;
}

.ticket-body .list-group {
    margin-top: 20px;
}

.ticket-body .list-group-item img {
    -o-object-fit: cover;
    object-fit: cover;
}

.ticket-body .list-group-item p {
    color: var(--dark);
    font-size: 13px;
}

.macro .select2-container {
    width: 300px !important;
}

.status-button {
    width: 175px !important;
    margin-left: 15px;
}

.h-100vh {
    height: 100vh;
}

.w-80 {
    width: 80px;
}

.cursor-pointer {
    cursor: pointer;
}

.recent-search {
    width: 100%;
    border-collapse: collapse;
}

.recent-search tbody tr {
    display: block;
    border: 1px dashed var(--primary);
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
}

.recent-search tbody td {
    display: inline-block;
    padding: 5px;
}

.custom-no-data img {
    max-width: 300px !important;
    width: 100%;
}

.purchase-info {
    border: 1.3px dashed var(--border) !important;
    border-radius: 5px;
    padding: 20px;
}

.purchase-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 25px;
}

.purchase-info .header {
    padding-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.purchase-info i {
    font-size: 25px;
    margin-right: 10px;
}

.purchase-info li {
    line-height: 27px;
}

.help-link {
    color: var(--primary);
    text-decoration: underline;
}

/* internal training css */
.course-card {
    border-radius: 5px;
    overflow: hidden;
    /* box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15); */
    position: relative;
    border: 1px solid #dee2e6;
}

.course-card img {
    width: 100%;
    height: 110px;
    -o-object-fit: cover;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}

.course-card h4 {
    font-size: 16px;
    font-weight: 600;
}

.course-card .avatars {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.course-card .avatars img {
    width: 25px;
    height: 25px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50px;
    margin-right: -10px;
    border: 1px solid var(--primary);
}

.course-card span {
    font-size: 14px;
    margin-left: 15px;
}

.course-card .enroll a {
    border: 1px solid var(--primary);
    background: var(--bg-primary);
    padding: 5px 7px;
    border-radius: 50px;
}

.course-card .action-count {
    position: absolute;
    top: 10px;
    left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 95%;
}

.course-card .action-count span,
.course-card .action-count .dropdown {
    margin: 0;
    padding: 5px;
    border-radius: 5px;
    background: var(--bg-primary);
    font-size: 12px !important;
}

.course-card .action-count .dropdown {
    border-radius: 50px;
}

.internal-training .dropdown-item {
    padding-left: 15px !important;
}

.course-card .action-count .dropdown .dropdown-item {
    padding: 2px;
}

.internal-training .pagination-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 20px;
}

.pagination-links span svg {
    width: 20px;
    height: 20px;
}

.pagination-links p,
.pagination-links .flex.justify-between.flex-1 {
    display: none;
}

.bg-transparent {
    background: transparent;
}

/* google meet join link */
.g-meet-link {
    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;
    margin: 20px;
}

.g-meet-body {
    background: rgba(105, 108, 255, 0.16) !important;
    width: 400px;
    padding: 15px 25px;
    border-radius: 10px;
    text-align: center;
}

.g-meet-body a {
    background: var(--primary);
    padding: 10px;
    display: block;
    color: var(--white);
    border-radius: 5px;
}

.g-meet-body h4 {
    font-size: 18px;
    font-weight: 600;
}

.template-table tr {
    border-bottom: 1px dashed var(--border);
}

.template-table a {
    font-size: 12px;
    border: 1px solid var(--primary);
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--primary);
    color: var(--white);
}

.template-table a:hover {
    color: var(--white) !important;
}

.template-table tr td {
    color: var(--dark);
}

.template-table tbody tr:last-child {
    border-bottom: 0;
}

.image-logo {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.map-rounded iframe {
    border-radius: 10px;
    width: 100%;
    height: 500px;
}

.pagination-links a {
    border-radius: 5px !important;
    padding: 10px 15px !important;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--primary);
    border: none;
    border-bottom: 1px solid var(--primary) !important;
}

.nav-tabs .nav-link {
    color: var(--dark);
    border: none;
}
.nav-tabs .nav-link:hover {
    border: none;
    border-bottom: 1px solid var(--primary) !important;
}
.nav-link:focus-visible {
    box-shadow: 0 0 0 0;
}

/* Change clock icon color inside flatpickr */
.off-day-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    padding: 9px;
    border-radius: 5px;
}
.day-name {
    border: var(--bs-border-width) solid var(--bs-border-color);
    padding: 10px;
    border-radius: 5px;
}
.flatpickr-time .numInputWrapper:after,
.flatpickr-time .flatpickr-time-separator {
    color: #007bff;
    /* Change to your desired color */
}

.time-input {
    position: relative;
}

.time-input span {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -58%);
}
.flatpickr-calendar {
    padding: 12px;
}
.flatpickr-calendar.hasTime .flatpickr-time {
    border: 0;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
    background: transparent;
}
/* ticket details css */
.ticket-header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.profile-img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    margin-right: 10px;
    object-fit: cover;
}

.ticket-details {
    border-left: 1px solid #ddd;
    padding-left: 20px;
}

.ticket-details p {
    display: flex;
    flex-direction: column;
}

.ticket-meta {
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.status-tag {
    background-color: rgba(105, 108, 255, 0.16);
    color: var(--primary);
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
}

.massage-box {
    border-radius: 5px;
    box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);
    padding: 10px;
    margin-top: 30px;
}

.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action-bar .icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icons a {
    padding: 5px;
    cursor: pointer;
}
.icons a svg {
    cursor: pointer;
}

.actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-toggle-split {
    border-radius: 0 5px 5px 0;
}

.split-submit {
    border-radius: 5px 0 0 5px;
}

.massage-box .note-statusbar {
    display: none;
}

.massage-box .note-frame {
    color: var(--dark);
}

.massage-box .note-editable,
.massage-box .note-placeholder {
    line-height: 10px;
}
.download-icon {
    align-items: center;
    justify-content: center;
    position: relative;
}
.download-icon svg {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 32px;
}
.h-55vh {
    height: 55vh;
    overflow: scroll;
    overflow-x: hidden;
}
/* Remove border from Summernote editor */
.massage-box .note-editor.note-frame {
    border: none !important;
    box-shadow: none !important;
}

/* Remove border from the editable area */
.massage-box .note-editable {
    border: none !important;
    outline: none !important;
    background-color: transparent;
    /* Optional */
}

.action-bar .arBtn:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

a:hover svg path {
    stroke: var(--primary) !important;
}
.status-batch {
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 12px;
}
#basicDataTable tbody .strong {
    font-weight: 600;
}
tbody tr:hover {
    background-color: red; /* light gray, change as needed */
    cursor: pointer;
}
.dt-layout-cell.dt-layout-full {
    overflow-x: scroll;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 3em; /* Reserve space for 2 lines */
}

/* training page css */
.course-list {
    height: 400px;
    overflow: scroll;
    overflow-x: hidden;
}

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

.course-list .list-item {
    background: #f5f5f9;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    margin-bottom: 10px;
    transition: 1s ease;
}

.course-list .list-item h4 {
    font-size: 16px;
    font-weight: 600;
}

.course-list .active,
.course-list .list-item:hover {
    background-color: rgba(105, 108, 255, 0.16) !important;
    color: #000;
}

.course-list .list-item p {
    margin: 0;
}
/* pagination css */
.pagination-custom .page-link {
    color: var(--dark);
    background-color: var(--bg-primary);
    border: none;
    margin: 0 10px;
    border-radius: 8px;
    font-weight: 500;
    padding: 8px 14px;
    transition: 0.2s ease-in-out;
}

.pagination-custom .page-link:hover {
    background-color: var(--bg-primary);
    color: var(--primary);
}

.pagination-custom .active > .page-link {
    background-color: var(--primary);
    color: var(--white);
}

.pagination-custom .disabled > .page-link {
    background-color: var(--bg-light);
    color: var(--text-muted);
}
.ticket-status {
    display: inline-block;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    width: 80px;
    text-align: center;
}
.page-link:focus {
    box-shadow: none;
}

.logos {
    display: flex;
    align-items: center;
    justify-content: start;
}

.company-items label {
    padding: 30px;
    border: 1px dashed #dee2e6;
    border-radius: 5px;
    cursor: pointer;
}

.company-logos,
#uploaded-logos {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.uploaded-logo img {
    padding: 0;
    height: 86px;
    width: 86px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    object-fit: cover;
}

.uploaded-logo {
    position: relative;
}

.uploaded-logo a {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #fff;
    border: 1px solid #f63e50;
    padding: 5px;
    border-radius: 50px;
}

.delete-logo-btn {
    padding: 5px;
    line-height: 0;
}
.mail-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.newsletter-box,
.custom-newsletter-box {
    padding: 20px;
    border: 1px solid #566a7f;
    width: 50%;
    text-align: center;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 30px;
}
.newsletter-box:hover,
.custom-newsletter-box:hover {
    color: #566a7f !important;
}
.google-meet-container {
    border: 1px solid var(--primary);
    background-color: var(--bg-primary);
    padding: 20px;
    margin: 20px 100px;
    border-radius: 5px;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid {
    background: var(--primary) !important;
}
.plyr__progress input[type=range], .plyr__volume input[type=range] {
    color: var(--primary) !important;
}
.plyr--video .plyr__control:focus-visible, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
    background: var(--primary);
    background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,var(--primary)))) !important;
    color: #fff;
    color: var(--plyr-video-control-color-hover,#fff);
}