.dt-buttons .btn-secondary{
    background-color: var(--color-logo) !important;
    border-color: var(--color-logo) !important;
}
li.profile-nav img.force-headshot{
    max-width:35px !important;
    border-radius:50px;
}
.login-logo{
    width:40% !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper{
    padding:5px 10px !important;
}
.force-logo-menu{
    width:57%;
}
.force-logo-menu-kecil{
    width:39%;
}

.sidebar-wrapper.close_icon .logo-icon-wrapper{
    text-align:center !important;
    padding:10px 0px !important;
}

.dataTables_wrapper .dt-buttons {
  margin-bottom: 10px;
}
table.dataTable th, table.dataTable td {
  white-space: nowrap;
}

/* ====== DataTable container look ====== */
table.dataTable tbody tr:hover {
  background-color: #f8f9fa;
  transform: scale(1.01);
  transition: all 0.2s ease;
}
.dt-buttons .btn {
  border-radius: 0.5rem;
  margin-right: 5px;
  font-weight: 500;
  text-transform: capitalize;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.dt-buttons .btn:hover {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}
.tab-biasa tr.fade-out {
  transition: all 0.3s ease;
  background-color: #f8d7da !important;
  opacity: 0;
}

/* ====== Buttons ====== */
.btn-link {
    color: var(--theme-default)
}

.btn-outline-light {
    color: #242934 !important
}

.purchase-btn {
    background: linear-gradient(90deg, var(--theme-default) -18.33%, #563ee0 62.78%);
    transition: .5s
}

.purchase-btn:hover {
    background: linear-gradient(90deg, #563ee0 -18.33%, var(--theme-default) 62.78%);
    transition: .5s
}

@media (max-width:575px) {
    .purchase-btn {
        font-size: 14px
    }
}

.btn-light:not([disabled]):not(.disabled).active.active {
    background-color: #efefef !important;
    color: #404040
}

.btn-primary-gradien {
    background-image: linear-gradient(90deg, #4e3dff 0, #988fff 51%, #4e3dff);
    background-size: auto 200%;
    border: none;
    color: #fff;
    transition: all .3s ease
}

.btn-primary-gradien.active,
.btn-primary-gradien:active,
.btn-primary-gradien:focus {
    background-image: linear-gradient(90deg, #988fff, 0, #4e3dff, 100%, #fff) !important;
    background-position: 100%;
    transition: 1.5s
}

.btn-secondary-gradien {
    background-image: linear-gradient(90deg, #979797 0, #6f6f6f 51%, #979797);
    background-size: auto 200%;
    border: none;
    color: #fff;
    transition: all .3s ease
}

.btn-secondary-gradien.active,
.btn-secondary-gradien.hover,
.btn-secondary-gradien:active,
.btn-secondary-gradien:focus,
.btn-secondary-gradien:hover {
    background-image: linear-gradient(90deg, #979797, 0, #6f6f6f, 100%, #fff) !important;
    background-position: 100%;
    transition: 1.5s
}

.btn-success-gradien {
    background-image: linear-gradient(90deg, #81cc7a 0, #4db143 51%, #81cc7a);
    background-size: auto 200%;
    border: none;
    color: #fff;
    transition: all .3s ease
}

.btn-success-gradien.active,
.btn-success-gradien.hover,
.btn-success-gradien:active,
.btn-success-gradien:focus,
.btn-success-gradien:hover {
    background-image: linear-gradient(90deg, #81cc7a, 0, #4db143, 100%, #fff) !important;
    background-position: 100%;
    transition: 1.5s
}

.btn-danger-gradien {
    background-image: linear-gradient(90deg, #fd7b72 0, #fb3122 51%, #fd7b72);
    background-size: auto 200%;
    border: none;
    color: #fff;
    transition: all .3s ease
}

.btn-danger-gradien.active,
.btn-danger-gradien.hover,
.btn-danger-gradien:active,
.btn-danger-gradien:focus,
.btn-danger-gradien:hover {
    background-image: linear-gradient(90deg, #fd7b72, 0, #fb3122, 100%, #fff) !important;
    background-position: 100%;
    transition: 1.5s
}

.btn-warning-gradien {
    background-image: linear-gradient(90deg, #ffc652 0, #fa0 51%, #ffc652);
    background-size: auto 200%;
    border: none;
    color: #fff;
    transition: all .3s ease
}

.btn-warning-gradien.active,
.btn-warning-gradien.hover,
.btn-warning-gradien:active,
.btn-warning-gradien:focus,
.btn-warning-gradien:hover {
    background-image: linear-gradient(90deg, #ffc652, 0, #fa0, 100%, #fff) !important;
    background-position: 100%;
    transition: 1.5s
}

.btn-info-gradien {
    background-image: linear-gradient(90deg, #67c6f7 0, #19aaf3 51%, #67c6f7);
    background-size: auto 200%;
    border: none;
    color: #fff;
    transition: all .3s ease
}

.btn-info-gradien.active,
.btn-info-gradien.hover,
.btn-info-gradien:active,
.btn-info-gradien:focus,
.btn-info-gradien:hover {
    background-image: linear-gradient(90deg, #67c6f7, 0, #19aaf3, 100%, #fff) !important;
    background-position: 100%;
    transition: 1.5s
}

.btn-light-gradien {
    background-image: linear-gradient(90deg, #fff 0, #e0e0e0 51%, #fff);
    background-size: auto 200%;
    border: none;
    color: #fff;
    transition: all .3s ease
}

.btn-light-gradien.active,
.btn-light-gradien.hover,
.btn-light-gradien:active,
.btn-light-gradien:focus,
.btn-light-gradien:hover {
    background-image: linear-gradient(90deg, #fff, 0, #e0e0e0, 100%, #fff) !important;
    background-position: 100%;
    transition: 1.5s
}

.btn-dark-gradien {
    background-image: linear-gradient(90deg, #505a72 0, #2e3442 51%, #505a72);
    background-size: auto 200%;
    border: none;
    color: #fff;
    transition: all .3s ease
}

.btn-dark-gradien.active,
.btn-dark-gradien.hover,
.btn-dark-gradien:active,
.btn-dark-gradien:focus,
.btn-dark-gradien:hover {
    background-image: linear-gradient(90deg, #505a72, 0, #2e3442, 100%, #fff) !important;
    background-position: 100%;
    transition: 1.5s
}

.btn {
    padding: .375rem 1.75rem
}

.btn.bg-light-primary:hover {
    background: #7366ff !important;
    color: #fff !important
}

.btn-lg {
    font-size: 18px
}

@media only screen and (max-width: 991px) {
    .page-wrapper.compact-wrapper .page-header .header-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
    }

    .page-wrapper.compact-wrapper .page-header .header-wrapper .header-logo-wrapper {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-right: 0;
        width: 100%;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

    .page-wrapper.compact-wrapper .page-header .header-wrapper .header-logo-wrapper .toggle-sidebar {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        margin: 0 !important;
        padding: 0 12px 0 0 !important;
        border-right: 1px solid #ddd;
        border-left: 0 !important;
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        min-width: 30px;
        max-width: 30px;
        z-index: 3;
        pointer-events: auto;
    }

    .page-wrapper.compact-wrapper .page-header .header-wrapper .header-logo-wrapper .logo-wrapper {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        position: static;
        transform: none;
        pointer-events: auto;
    }

    .page-wrapper.compact-wrapper .page-header .header-wrapper .header-logo-wrapper .logo-wrapper img {
        width: 70px;
        max-width: 100%;
        margin: 30px 0 0;
    }

    .page-wrapper.compact-wrapper .page-header .header-wrapper .left-header {
        display: none !important;
    }

    .page-wrapper.compact-wrapper .page-header .header-wrapper .nav-right {
        margin-left: auto !important;
        width: auto !important;
        padding: 0 !important;
    }

    .page-wrapper.compact-wrapper .page-header .header-wrapper .nav-right > ul {
        top: 100%;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 16px 20px !important;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .force-logo-menu {
        width: 30% !important;
        min-width: 92px;
        max-width: 140px;
        margin: 0 auto;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .back-btn {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        float: none;
        margin: 0;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .toggle-sidebar {
        display: none !important;
    }
}

.btn-sm {
    font-size: 12px
}

.page-wrapper.horizontal-wrapper .header-logo-wrapper {
    width: 200px;
}

@media only screen and (min-width: 992px) {
    .page-wrapper.horizontal-wrapper .header-logo-wrapper {
        margin-right: 1em;
    }
}

@media only screen and (max-width: 991px) {
    .page-wrapper.compact-wrapper .page-header .header-wrapper .header-logo-wrapper .logo-wrapper img {
        width: 150px;
        max-width: 100%;
        margin: 0;
        position: absolute;
        left: 4em;
        top: -1em;
    }
}

.btn-xs {
    font-size: 11px;
    line-height: 1.4;
    padding: .05rem .4rem
}

.large-btn {
    margin-bottom: -20px
}

.large-btn .btn {
    margin-bottom: 15px;
    margin-right: 5px
}

.dt-buttons.btn-group {
    padding-bottom: 1em;
}

.modern-facility-head th {
    background: var(--theme-default) !important;
    color: white !important;
}

.btn-outline-white {
    border: 1px solid #fff;
    color: #fff
}

.btn-outline-white:focus,
.btn-outline-white:hover {
    background: #fff;
    color: var(--theme-default)
}

.button-light-primary,
.button-light-primary:hover {
    background-color: #094E60
}

.button-light-secondary,
.button-light-secondary:hover {
    background-color: #f2f2f2
}

.button-light-success,
.button-light-success:hover {
    background-color: #dcf1da
}

.button-light-warning,
.button-light-warning:hover {
    background-color: #fff7e5
}

.button-light-info,
.button-light-info:hover {
    background-color: #d5f5fe
}

.button-light-light,
.button-light-light:hover {
    background-color: #f9f9fb
}

.button-light-danger,
.button-light-danger:hover {
    background-color: #ffe8e6
}

.button-light-dark,
.button-light-dark:hover {
    background-color: #eaebf2
}

.btn-air-primary {
    box-shadow: 0 5px 10px 2px rgba(88, 103, 221, .19) !important
}

.btn-air-primary:active,
.btn-air-primary:hover,
.btn-air-primary:not([disabled]):not(.disabled):active {
    background-color: #43f;
    border-color: #43f
}

.input-air-primary {
    box-shadow: 0 3px 5px 1px rgba(115, 102, 255, .1) !important
}

.input-air-primary:focus {
    border-color: #7366ff
}

.btn-air-secondary {
    box-shadow: 0 5px 10px 2px rgba(88, 103, 221, .19) !important
}

.btn-air-secondary:active,
.btn-air-secondary:hover,
.btn-air-secondary:not([disabled]):not(.disabled):active {
    background-color: #6a6a6a;
    border-color: #6a6a6a
}

.input-air-secondary {
    box-shadow: 0 3px 5px 1px hsla(0, 0%, 51%, .1) !important
}

.input-air-secondary:focus {
    border-color: #838383
}

.btn-air-success {
    box-shadow: 0 5px 10px 2px rgba(88, 103, 221, .19) !important
}

.btn-air-success:active,
.btn-air-success:hover,
.btn-air-success:not([disabled]):not(.disabled):active {
    background-color: #4aaa40;
    border-color: #4aaa40
}

.input-air-success {
    box-shadow: 0 3px 5px 1px rgba(101, 193, 92, .1) !important
}

.input-air-success:focus {
    border-color: #65c15c
}

.btn-air-danger {
    box-shadow: 0 5px 10px 2px rgba(88, 103, 221, .19) !important
}

.btn-air-danger:active,
.btn-air-danger:hover,
.btn-air-danger:not([disabled]):not(.disabled):active {
    background-color: #fb2718;
    border-color: #fb2718
}

.input-air-danger {
    box-shadow: 0 3px 5px 1px rgba(252, 86, 74, .1) !important
}

.input-air-danger:focus {
    border-color: #fc564a
}

.btn-air-info {
    box-shadow: 0 5px 10px 2px rgba(88, 103, 221, .19) !important
}

.btn-air-info:active,
.btn-air-info:hover,
.btn-air-info:not([disabled]):not(.disabled):active {
    background-color: #10a6f2;
    border-color: #10a6f2
}

.input-air-info {
    box-shadow: 0 3px 5px 1px rgba(64, 184, 245, .1) !important
}

.input-air-info:focus {
    border-color: #40b8f5
}

.btn-air-light {
    box-shadow: 0 5px 10px 2px rgba(88, 103, 221, .19) !important
}

.btn-air-light:active,
.btn-air-light:hover,
.btn-air-light:not([disabled]):not(.disabled):active {
    background-color: #dbdbdb;
    border-color: #dbdbdb
}

.input-air-light {
    box-shadow: 0 3px 5px 1px hsla(0, 0%, 96%, .1) !important
}

.input-air-light:focus {
    border-color: #f4f4f4
}

.btn-air-dark {
    box-shadow: 0 5px 10px 2px rgba(88, 103, 221, .19) !important
}

.btn-air-dark:active,
.btn-air-dark:hover,
.btn-air-dark:not([disabled]):not(.disabled):active {
    background-color: #2a2f3c;
    border-color: #2a2f3c
}

.input-air-dark {
    box-shadow: 0 3px 5px 1px rgba(63, 71, 90, .1) !important
}

.input-air-dark:focus {
    border-color: #3f475a
}

.btn-air-warning {
    box-shadow: 0 5px 10px 2px rgba(88, 103, 221, .19) !important
}

.btn-air-warning:active,
.btn-air-warning:hover,
.btn-air-warning:not([disabled]):not(.disabled):active {
    background-color: #f5a400;
    border-color: #f5a400
}

.input-air-warning {
    box-shadow: 0 3px 5px 1px rgba(255, 184, 41, .1) !important
}

.input-air-warning:focus {
    border-color: #ffb829
}

.btn-warning,
.btn-warning.disabled,
.btn-warning:hover {
    color: #fff
}

[class*=-gradien]:hover {
    background-size: 50% 100%;
    color: #fff;
    transition: all .3s ease
}

.btn-square {
    border-radius: 0
}

.btn-pill {
    border-radius: 60px
}

.btn-group-pill .btn:first-child {
    border-radius: 60px 0 0 60px
}

.btn-group-pill .btn:last-child {
    border-radius: 0 60px 60px 0
}

.btn-group-square .btn:first-child,
.btn-group-square .btn:last-child {
    border-radius: 0 0 0 0
}

.btn-showcase {
    margin-bottom: -10px
}

.btn-showcase .btn {
    margin-bottom: 10px;
    margin-right: 10px
}

.btn-dropdown-showcase {
    margin-bottom: -10px
}

.btn-dropdown-showcase .btn-group,
.btn-dropdown-showcase .dropdown {
    margin-bottom: 10px;
    margin-right: 18px
}

.btn-group .radio label:before {
    top: 2px
}

.btn-group .radio label:after {
    top: 7px
}

.btn-group .checkbox label {
    margin-top: 3px
}

.tooltiptext {
    background-color: #555;
    border-radius: 6px;
    bottom: 125%;
    color: #fff;
    left: 50%;
    margin-left: -60px;
    opacity: 1;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    transition: opacity .3s;
    visibility: visible;
    width: 120px;
    z-index: 1
}

.tooltiptext:after {
    border: 5px solid transparent;
    border-top-color: #555;
    content: "";
    left: 50%;
    margin-left: -5px;
    position: absolute;
    top: 100%
}

.card-header-right-icon .btn.btn-light-primary {
    background-color: var(--light-shade-primary);
    color: var(--theme-default)
}

.card-header-right-icon .btn.btn-light-primary:hover {
    background-color: var(--theme-default);
    color: #fff
}

.btn.button-primary,
button.button-primary {
    background-color: var(--light-shade-primary);
    color: var(--theme-default)
}

.btn.button-primary:hover,
button.button-primary:hover {
    background-color: var(--theme-default);
    border-color: var(--theme-default);
    color: #fff
}

.visual-button .btn,
.visual-button button {
    height: 45px;
    padding: 0;
    width: 45px
}

.visual-button .btn svg,
.visual-button button svg {
    height: 18px;
    vertical-align: middle;
    width: 18px
}

.visual-button .btn.btn-pill,
.visual-button button.btn-pill {
    border: unset;
    border-radius: 50%;
    height: 45px;
    width: 45px
}

@media (max-width:1200px) {

    .visual-button .btn,
    .visual-button .btn.btn-pill,
    .visual-button button,
    .visual-button button.btn-pill {
        height: 40px;
        width: 40px
    }
}

.visual-button.visual-button1 .btn,
.visual-button.visual-button1 .btn-pill {
    align-items: center;
    display: flex;
    gap: 8px;
    height: auto;
    justify-content: center;
    padding: 6px 28px;
    width: auto
}

.visual-button.visual-button1 .btn-pill {
    border-radius: 60px
}

.button-wrapper {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.button-wrapper .btn-group .btn {
    vertical-align: middle
}

.button-wrapper .btn-group .btn svg {
    height: 18px;
    width: 18px
}

@media (max-width:1190px) {
    .button-wrapper .btn-group.select-checkbox label {
        padding: 6px
    }
}

@media (max-width:1065px) {
    .button-wrapper .btn-group.select-checkbox label.btn-outline-primary {
        display: none
    }
}

.button-wrapper .btn-group.select-checkbox label:nth-child(4) {
    border-left: 0
}

[dir=rtl] .button-wrapper .btn-group.select-checkbox label:nth-child(4) {
    border-left: unset;
    border-right: 0
}

@media (max-width:1065px) and (min-width:591px) {
    .button-wrapper.button-box .btn-group .btn {
        padding: 6px 10px
    }
}

@media (max-width:590px) {
    .button-wrapper.button-box .btn-group .btn {
        padding: 6px 8px
    }
}

.button-wrapper.button-outlined .btn-group .btn {
    line-height: .8
}

@media (max-width:1399px) {
    .btn-groups .button-wrapper {
        align-items: center
    }
}

.btn-group-vertical .btn-group .btn.show {
    border-color: var(--recent-border)
}

@media (max-width:360px) {
    .btn-radio .btn-group .btn {
        border-radius: 6px !important
    }
}

.btn-radio .btn-group .btn:hover {
    color: var(--body-font-color)
}

@media (max-width:369px) {
    .btn-radio .btn-group {
        display: grid;
        gap: 8px
    }

    .btn-radio .btn-group .btn {
        border-radius: 6px
    }
}

.btn-toolbar {
    gap: 12px
}

.card-wrapper .btn-option .btn:hover {
    color: var(--body-font-color)
}

.card-wrapper .btn-option .btn:active,
.card-wrapper .btn-option .btn:focus {
    box-shadow: unset;
    color: var(--body-font-color)
}

@media (max-width:369px) {
    .card-wrapper .btn-option.btn-group {
        display: grid;
        gap: 8px
    }

    .card-wrapper .btn-option.btn-group .btn {
        border-radius: 6px
    }
}

.loader-buttons button i {
    margin-left: 8px
}

[dir=rtl] .loader-buttons button i {
    margin-left: unset;
    margin-right: 8px
}

.ripple-button {
    overflow: hidden;
    position: relative;
    transform-origin: center center
}

.ripple-button:active,
.ripple-button:focus {
    box-shadow: none;
    outline: 0
}

.ripple-button .ripple-span {
    animation: ripple .7s linear;
    background-color: hsla(0, 0%, 100%, .7);
    border-radius: 50%;
    height: 20px;
    position: absolute;
    transform: scale(0);
    width: 20px
}

@keyframes ripple {
    0% {
        opacity: .4;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(30)
    }
}

.mix-hover-btn .btn {
    position: relative
}

.mix-hover-btn .btn.btn-border-pop:before {
    border: 2px solid var(--theme-default);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: top, left, right, bottom, .1s ease-in-out;
    z-index: -1
}

.mix-hover-btn .btn.btn-border-pop:focus:before,
.mix-hover-btn .btn.btn-border-pop:hover:before {
    border-radius: 10px;
    inset: -5px
}

.mix-hover-btn .btn.btn-bg-slide:before {
    background-color: var(--theme-default);
    border-radius: 6px;
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease-in-out;
    z-index: -1
}

.mix-hover-btn .btn.btn-bg-slide:focus,
.mix-hover-btn .btn.btn-bg-slide:hover {
    color: #fff;
    transition: color .3s ease-in-out;
    z-index: 1
}

.mix-hover-btn .btn.btn-bg-slide:focus:before,
.mix-hover-btn .btn.btn-bg-slide:hover:before {
    transform: scaleX(1)
}

.mix-hover-btn .btn.btn-border-bottom:before {
    background-color: var(--theme-default);
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transition: transform .3s ease-in-out
}

.mix-hover-btn .btn.btn-border-bottom:focus:before,
.mix-hover-btn .btn.btn-border-bottom:hover:before {
    transform: scaleX(1)
}

.button--winona {
    background-color: transparent;
    border: 2px solid #7366ff;
    color: var(--body-font-color);
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: border-color .3s, background-color .3s;
    transition-timing-function: cubic-bezier(.2, 1, .3, 1)
}

.button--winona:after {
    color: #7366ff;
    content: attr(data-text);
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translate3d(0, 25%, 0);
    width: 100%
}

.button--winona>span {
    display: block
}

.button--winona:after,
.button--winona>span {
    padding: 6px 28px;
    transition: transform .3s, opacity .3s;
    transition-timing-function: cubic-bezier(.2, 1, .3, 1)
}

.button--winona:hover {
    background-color: rgba(232, 229, 255, .7)
}

.button--winona:hover:after {
    opacity: 1;
    transform: translateZ(0)
}

.button--winona:hover>span {
    opacity: 0;
    transform: translate3d(0, -25%, 0)
}
.dark-accordion li, dark-accordion ul{
    color:white;
}
.collapse-accordion #collapseDesc{
    margin-top:1em;
}

.mix-hover-btn .btn {
    position: relative
}

.mix-hover-btn .btn.btn-border-pop:before {
    border: 2px solid var(--theme-default);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: top, left, right, bottom, .1s ease-in-out;
    z-index: -1
}

.mix-hover-btn .btn.btn-border-pop:focus:before,
.mix-hover-btn .btn.btn-border-pop:hover:before {
    border-radius: 10px;
    inset: -5px
}

.mix-hover-btn .btn.btn-bg-slide:before {
    background-color: var(--theme-default);
    border-radius: 6px;
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease-in-out;
    z-index: -1
}

.mix-hover-btn .btn.btn-bg-slide:focus,
.mix-hover-btn .btn.btn-bg-slide:hover {
    color: #fff;
    transition: color .3s ease-in-out;
    z-index: 1
}

.mix-hover-btn .btn.btn-bg-slide:focus:before,
.mix-hover-btn .btn.btn-bg-slide:hover:before {
    transform: scaleX(1)
}

.mix-hover-btn .btn.btn-border-bottom:before {
    background-color: var(--theme-default);
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transition: transform .3s ease-in-out
}

.mix-hover-btn .btn.btn-border-bottom:focus:before,
.mix-hover-btn .btn.btn-border-bottom:hover:before {
    transform: scaleX(1)
}

/* STEPPER WIZARD */
.basic-wizard .stepper-horizontal {
    display: flex;
    margin: 0 auto calc(12px + .625vw);
    overflow: auto;
    width: 100%
}

.basic-wizard .stepper-horizontal .step {
    padding-inline: 24px;
    position: relative;
    width: 100%;
    z-index: 2
}

.basic-wizard .stepper-horizontal .step:first-child {
    padding-left: 0
}

[dir=rtl] .basic-wizard .stepper-horizontal .step:first-child {
    padding-left: 24px;
    padding-right: 0
}

.basic-wizard .stepper-horizontal .step:last-child {
    padding-right: 0
}

[dir=rtl] .basic-wizard .stepper-horizontal .step:last-child {
    padding-left: 0;
    padding-right: 24px
}

.basic-wizard .stepper-horizontal .step:last-child .step-bar-left,
.basic-wizard .stepper-horizontal .step:last-child .step-bar-right {
    display: none
}

.basic-wizard .stepper-horizontal .step .step-circle {
    background: var(--white);
    border: 2px solid #ccc;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 600;
    height: 32px;
    line-height: 1.8;
    margin: 0 auto;
    text-align: center;
    width: 32px;
    z-index: 2
}

.basic-wizard .stepper-horizontal .step.done .step-circle {
    background-color: var(--white);
    border: 2px solid #75758a;
    color: #7366ff;
    position: relative;
    z-index: 4
}

.basic-wizard .stepper-horizontal .step.done .step-circle:before {
    content: "\f00c";
    font-family: Font Awesome\ 6 Free;
    font-weight: 600
}

.basic-wizard .stepper-horizontal .step.done .step-circle * {
    display: none
}

.basic-wizard .stepper-horizontal .step.done .step-title {
    color: #75758a
}

.basic-wizard .stepper-horizontal .step.editing .step-circle {
    background: var(--white);
    border-color: #75758a;
    color: var(--theme-default)
}

.basic-wizard .stepper-horizontal .step .step-title {
    color: var(--chart-text-color);
    font-size: 16px;
    font-size: calc(13.6px + .125vw);
    font-weight: 600;
    margin-top: 8px;
    white-space: nowrap
}

.basic-wizard .stepper-horizontal .step .step-optional,
.basic-wizard .stepper-horizontal .step .step-title {
    text-align: center
}

.basic-wizard .stepper-horizontal .step .step-bar-left,
.basic-wizard .stepper-horizontal .step .step-bar-right {
    background-color: var(--view-border-marker);
    border: solid var(--view-border-marker);
    border-width: 2px 0;
    height: 4px;
    position: absolute;
    top: 14px
}

.basic-wizard .stepper-horizontal .step .step-bar-left {
    left: 50%;
    width: 100%;
    z-index: -1
}

[dir=rtl] .basic-wizard .stepper-horizontal .step .step-bar-left {
    left: unset;
    right: 50%
}

.basic-wizard .stepper-horizontal .step .step-bar-right {
    left: 50%;
    transition: width .5s ease-in-out;
    width: 0;
    z-index: -1
}

[dir=rtl] .basic-wizard .stepper-horizontal .step .step-bar-right {
    left: unset;
    right: 50%
}

.basic-wizard .stepper-horizontal .step.done .step-bar-right {
    background-color: var(--theme-default);
    border-color: var(--theme-default);
    width: 100%;
    z-index: 3
}

.basic-wizard form.none {
    display: none
}

.basic-wizard form.block {
    display: block
}

.basic-wizard form .form-check-label {
    margin-bottom: 0
}
.important-validation .form-label span {
    color: #fc564a
}

.select-size.form-select {
    font-size: 14px
}

.wizard-footer button.disabled {
    background-color: #eaebf2
}

.wizard-footer button.back {
    background-color: #ffb829
}

.successful-form {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    padding-bottom: 24px
}

.successful-form img {
    height: calc(61.6px + 2vw);
    width: calc(61.6px + 2vw)
}


/* Deep teal background readability */
[style*="background-color:#094E60"],
[style*="background-color: #094E60"],
[style*="background:#094E60"],
[style*="background: #094E60"] {
  color: #FFFFFF !important;
}

[style*="background-color:#094E60"] a,
[style*="background-color: #094E60"] a,
[style*="background:#094E60"] a,
[style*="background: #094E60"] a {
  color: #FFFFFF !important;
}

/* Enforce white text on deep teal primary-light variants */
.button-light-primary,
.button-light-primary:hover,
.button-light-primary:focus,
.button-light-primary:active,
.alert-light-primary,
.alert.alert-light-primary,
.bg-light-primary,
.badge-light-primary,
.label-primary,
.label-theme,
.banner-primary,
.info-primary {
  color: #FFFFFF !important;
}

.button-light-primary a,
.button-light-primary:hover a,
.alert-light-primary a,
.alert.alert-light-primary a,
.bg-light-primary a,
.badge-light-primary a,
.label-primary a,
.label-theme a,
.banner-primary a,
.info-primary a {
  color: #FFFFFF !important;
}

.badge.bg-info,
.badge.status-halfway,
.emblem-halfway,
.status-halfway {
  color: #ffffff !important;
}

/* =======================================
   Horizontal Menu Anti-Cut (Desktop/Tablet)
======================================= */
@media (min-width: 768px) {
  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper {
    height: 70px !important;
    overflow: visible !important;
  }

  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main {
    height: 100%;
  }

  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask,
  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
  }

  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper {
    overflow-y: visible !important;
  }

  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content {
    display: flex;
    align-items: center !important;
    min-height: 70px;
  }

  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a,
  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li > a.active {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    line-height: 1.2 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .left-arrow,
  .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main .right-arrow {
    top: 50% !important;
    transform: translateY(-50%);
  }
}

@media (max-width: 767px) {
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links {
    left: 0px !important;
  }

  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .back-btn i,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .mobile-back i {
    font-size: 26px !important;
    line-height: 1 !important;
  }
}