@font-face {
    font-family: quicksand;
    src: url('../vendor/font/Quicksand/Quicksand.ttf');
    font-display: swap;
}

:root {
    --success: #2dce89;
    --info: #931bb8;
    --warning: #ff7151;
    --danger: #f5365c;
    --secondary: #e4e4e4;
    --light: #f8f8f8;
    --dark: #212529;
    --primary: #6475d3;
    --font: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --height: 75px;
    --menu-w: 70px;
}

* {
    font-family: var(--font);
}
a {
    text-decoration: none;
}
/* Chrome, Safari, Edge, Opera */
.nochange::-webkit-outer-spin-button,
.nochange::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
.nochange[type=number] {
  -moz-appearance: textfield;
}

.o-hidden {
    overflow: hidden !important;
}

.dashed {
    border: 1px dashed #ddd !important;
}

.w-px-280 {
    width: 280px !important;
}
.w-px-200 {
    width: 200px !important;
}
.w-px-120 {
    width: 120px !important;
}
.w-px-150 {
    width: 150px !important;
}
.w-px-100 {
    width: 100px !important;
}
.w-px-80 {
    width: 80px !important;
}
.w-px-50 {
    width: 50px !important;
}
.w-px-20 {
    width: 20px !important;
}

.h-vh-60 {
    height: 60vh;
}
.h-minvh-100 {
    min-height: 100vh;
}
.cursor-pointer {
    cursor: pointer;
}
.cursor-default {
    cursor: default;
}
.showhide_pass:active i {
    transform: scale(1.1);
}
.border-radius-end {
    border-radius: 0 5px 5px 0;
}
.offcanvas.offcanvas-end {
    border: 0;
    box-shadow: -3px 0 7px rgba(0, 0, 0, 0.05);
}
.offcanvas-backdrop.show {
    opacity: 1;
    backdrop-filter: blur(10px);
}
.offcanvas-backdrop {
    background-color: rgba(255, 255, 255, 0.5);
}

button:not(.default) {
    border: 0;
    outline: none;
}
.disabled:is(a, button) {
    opacity: .4 !important;
}

.column-gap-10 {
    column-gap: 10px;
}

.msg {
    padding: 15px;
    border-radius: 5px;
    position: relative;
    margin-bottom: 12px;
    font-size: .9em;
}
.msg:not(.light, .secondary) {
    color: #fff;
}
.msg .close {
    border: 0;
    outline: none;
    display: block;
    position: absolute;
    right: 0;
    top: 0px;
    background-color: transparent;
    border-radius: 0 0 0 2rem;
    padding: 0 10px 5px 14px;
}
.msg:not(.light, .secondary) .close {
    color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.2);
}
.msg:is(.light, .secondary) .close {
    color: rgba(0, 0, 0, 0.3);
    background-color: rgba(0, 0, 0, 0.2);
}
.msg .close:not(:has(.fa)) {
    font-size: 1.1rem;
}
.msg .close:has(.fa) {
    padding-top: 5px;
    font-size: .7rem;
}
.msg.primary {
    background-color: var(--primary);
}
.msg.info {
    background-color: var(--info);
}
.msg.success {
    background-color: var(--success);
}
.msg.warning {
    background-color: var(--warning);
}
.msg.danger {
    background-color: var(--danger);
}
.msg.dark {
    background-color: var(--dark);
}
.msg.secondary {
    background-color: var(--secondary);
}
.msg.light {
    background-color: var(--light);
}

.bg-info, .text-bg-info, .btn-info {
    background-color: var(--bs-indigo) !important;
    color: var(--bs-white) !important;
}

.btn-info, .btn-info:is(:hover, :active, :focus) {
    border-color: var(--bs-indigo) !important;
}
.btn:hover {
    opacity: 0.9;
}
.bg-warning, .text-bg-warning, .btn-warning {
    background-color: var(--warning) !important;
    color: var(--bs-white) !important;
}
.btn-warning, .btn-warning:is(:hover, :active, :focus) {
    border-color: var(--warning) !important;
}
.btn-warning:hover {
    opacity: 0.9;
}
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
.bg-primary {
    background-color: var(--primary) !important;
}
.bg-danger, .text-bg-danger, .btn-danger {
    background-color: var(--danger) !important;
    color: var(--bs-white) !important;
}
.btn-danger, .btn-danger:is(:hover, :active, :focus) {
    border-color: var(--danger) !important;
}

.badge {
    font-size: 11px;
    border: 0;
    outline: none;
}
.badge:active {
    opacity: .9;
}

.text-warning {
    color: var(--warning) !important;
}
.text-info {
    color: var(--bs-indigo) !important;
}
.text-danger {
    color: var(--danger) !important;
}

.modal {
    backdrop-filter: blur(20px);
}

.card {
    text-decoration: none;
    margin-bottom: 20px;
}
.card.with-icon {
    position: relative;
    z-index: 1;
}
.card h4 {
    font-weight: bold;
}
.card-title {
    padding: 7px 0 0;
}
.card-title h5 {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0px;
}
.card-menu {
    border: 0;
    outline: none;
    background-color: transparent;
    color: rgba(0, 0, 0, 0.5);
}
.card, .card-header, .card-footer {
    border: 0;
    background-color: #fff;
}
.card-primary {
    box-shadow: none;
    background-color: #c8cfff !important;
    border: 0;
    color: #004085;
}
.card-info {
    background-color: #e0faff !important;
    border: 0;
    color: #1c7483;
    box-shadow: none;
}
.card-warning {
    box-shadow: none;
    background-color: #fff1c0 !important;
    border: 0;
    color: #856404;
}
.card-success {
    box-shadow: none;
    color: #155724;
    border: 0;
    background-color: #bcffe5 !important;
}
.card-danger {
    box-shadow: none;
    color: #721c24 !important;
    border: 0;
    background-color: #ffc8db;
}
.card-light {
    box-shadow: none;
    color: #818182 !important;
    background-color: #fefefe;
    border: 0;
}
.card-dark {
    color: #1b1e21;
    background-color: #d6d8d9 !important;
    border: 0;
    box-shadow: none;
}
.card-icon, .alert-icon {
    position: absolute;
    top: 0;
    right: 10px;
    justify-content: center;
    align-items: center;
    height: 100%;
    z-index: -1;
}
.card-icon {
    width: 70px;
}
.alert-icon i {
    width: 50px;
    height: 50px;
    line-height: 50px;
}
.card-icon i, .alert-icon i {
    opacity: 0.2;
    text-align: center;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}
.card-icon i {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 1.8rem;
}

.dropdown-item.text-warning:is(:active, :focus) {
    background-color: var(--warning) !important;
    color: #fff !important;
}
.dropdown-item.text-danger:is(:active, :focus) {
    background-color: var(--danger) !important;
    color: #fff !important;
}
.dropdown-item.text-primary:is(:active, :focus) {
    background-color: var(--primary) !important;
    color: #fff !important;
}
.dropdown-item.text-success:is(:active, :focus) {
    background-color: var(--success) !important;
    color: #fff !important;
}
.dropdown-item.text-info:is(:active, :focus) {
    background-color: var(--info) !important;
    color: #fff !important;
}
.dropdown-item.text-dark:is(:active, :focus) {
    background-color: var(--dark) !important;
    color: #fff !important;
}

.pagination-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.btn_detail_item {
    border: 0;
    outline: none;
    background-color: transparent;
}

.table small {
    font-size: .75rem;
}

.label-sw::before {
    content: 'Nonaktif';
    font-size: 12px;
    position: relative;
    top: -3px;
}
.form-check-input:checked ~ .label-sw::before {
    content: 'Aktif';
}

.form-control:is(:read-only) {
    background-color: var(--bs-light);
}