.image-position-2 {
    margin: -64px 0 0 0px !important;
}
.this-bg-blue {
    background-color: #e2e8f0 !important;
}
:fullscreen,
::backdrop {
    background-color: #f8f9fa !important;
}
.btn-hover-primary:hover {
    color: #86b4f9 !important;
}

/* global font */
* {
    font-family: "Poppins", sans-serif;
}

/* colors brand */
:root {
    --primary: #08c1cb;
    --primary-darker: #004080;
    --primary-lighter: #e2f9fa;
    --secondary: #6cdfe5;
    --secondary-lighter: #d7f7ff;
    --secondary-darker: #0096bb;
    --slate: #f2f3f5;
    --slate-400: #94A3B8;
    --slate-600: #475569;
    --slate-700: #334155;
    --light: #f8fafc;
    --primary-text: #1f2933;
    --secondary-text: #9aa5b1;
    --secondary-text-2: #667080;
    --danger-default: #e99286;
    --danger-darker: #e97f70;
    --danger-lighter: #ffe4e0;
    --on-progress-default: #ffde70;
    --on-progress-darker: #ebbf2f;
    --on-progress-lighter: #fff7db;
    --success-default: #61cf9c;
    --success-lighter: #e0fff1;
    --success-darker: #49b884;
    --md-viewport: 768px;
    --yellow-secondary: #ffde70;
    --red-secondary: #e99286;
    --green-secondary: #61cf9c;
    --red-primary: #f54748;
    --surface: #f2f7ff;
    --yellow-200: #fff1c6;
    --yellow-300: #ffe79b;
    --yellow-500: #fdc55e;
    --yellow-800: #8a742b;
    --black-50: #f4f8f84d;
    --black-200: #f1f8ff;
    --black-400: #ddeeff;
    --black-500: #bccfe2;
    --black-900: #4b5c6d;
    --tosca-900: #007379;
    --red-200: #ffdbd6;
    --green-50: #e7f9f1;
    --green-200: #cfffe9;
    --green-600: #27bd5a;
    --green-800: #3c956b;
    --blue-200: #cee6ff;
    --blue-500: #71b8ff;
    --blue-600: #50a5fa;
    --blue-800: #125da9;
    --chart-tosca: #30cde3;
    --chart-yellow: #d9cb4d;
    --tosca-100: #E8FEFF;
}

/* font weights */
.fw-500 {
    font-weight: 500 !important;
}

.no-scrollbar::-webkit-scrollbar {
    display: none !important;
}
/* For Firefox */
.no-scrollbar {
    scrollbar-width: none;
}

/* For IE 11 */
.no-scrollbar {
    -ms-overflow-style: none;
}

/* background class */
.hulu-talent-bg-primary {
    background-color: var(--primary) !important;
}

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

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

.hulu-talent-bg-secondary {
    background-color: var(--secondary);
}

.hulu-talent-bg-secondary-lighter {
    background-color: var(--secondary-lighter);
}

.hulu-talent-bg-secondary-darker {
    background-color: var(--secondary-darker);
}

.hulu-talent-bg-slate {
    background-color: var(--slate) !important;
}

.hulu-talent-bg-light {
    background-color: var(--light) !important;
}

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

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

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

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

.hulu-talent-bg-surface {
    background-color: var(--surface) !important;
}

.hulu-talent-bg-yellow-200 {
    background-color: var(--yellow-200) !important;
}

.hulu-talent-bg-yellow-300 {
    background-color: var(--yellow-300) !important;
}

.hulu-talent-bg-yellow-500 {
    background-color: var(--yellow-500) !important;
}

.hulu-talent-bg-yellow-800 {
    background-color: var(--yellow-800) !important;
}

.hulu-talent-bg-black-50 {
    background-color: var(--black-50) !important;
}

.hulu-talent-bg-black-200 {
    background-color: var(--black-200) !important;
}

.hulu-talent-bg-black-400 {
    background-color: var(--black-400) !important;
}

.hulu-talent-bg-black-900 {
    background-color: var(--black-900) !important;
}

.hulu-talent-bg-tosca-900 {
    background-color: var(--tosca-900) !important;
}

.hulu-talent-bg-tosca-100 {
    background-color: var(--tosca-100) !important;
}

.hulu-talent-bg-red-200 {
    background-color: var(--red-200) !important;
}

.hulu-talent-bg-green-50 {
    background-color: var(--green-50) !important;
}

.hulu-talent-bg-green-200 {
    background-color: var(--green-200) !important;
}

.hulu-talent-bg-green-600 {
    background-color: var(--green-600) !important;
}

.hulu-talent-bg-blue-200 {
    background-color: var(--blue-200) !important;
}

.hulu-talent-bg-blue-500 {
    background-color: var(--blue-500) !important;
}

.hulu-talent-bg-blue-600 {
    background-color: var(--blue-600) !important;
}

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

/* state class */
.hulu-talent-danger {
    background-color: var(--danger-default);
}

.hulu-talent-danger-darker {
    background-color: var(--danger-darker);
}

.hulu-talent-danger-lighter {
    background-color: var(--danger-lighter);
}

.hulu-talent-success {
    background-color: var(--success-default);
}

.hulu-talent-success-darker {
    background-color: var(--success-darker);
}

.hulu-talent-success-lighter {
    background-color: var(--success-lighter);
}

.hulu-talent-progress {
    background-color: var(--on-progress-default);
}

.hulu-talent-progress-darker {
    background-color: var(--on-progress-darker);
}

.hulu-talent-progress-lighter {
    background-color: var(--on-progress-lighter);
}

/* text colors */
.hulu-talent-text-primary {
    color: var(--primary) !important;
}

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

.hulu-talent-text-primary-darker-light {
    color: #004080cc !important;
}

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

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

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

.hulu-talent-text-secondary-2 {
    color: var(--secondary-text-2);
}

.hulu-talent-text-danger-darker {
    color: var(--danger-darker) !important;
}

.hulu-talent-text-slate-400 {
    color: var(--slate-400) !important;
}

.hulu-talent-text-slate-600 {
    color: var(--slate-600) !important;
}

.hulu-talent-text-slate-700 {
    color: var(--slate-700) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* border colors */
.hulu-talent-border-secondary,
.hulu-talent-border-secondary-hover {
    border: 1px solid #e4e7eb !important;
    transition: ease-in 0.3s;
}

.hulu-talent-border-darker {
    border-color: var(--secondary-text);
}

.hulu-talent-outline-primary {
    outline: 1px solid var(--primary) !important;
}

/* hovering colors */
.hulu-talent-border-secondary-hover:hover {
    border: 1.5px solid var(--primary-darker) !important;
}

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

/* button colors */
.hulu-talent-btn-primary {
    background-color: var(--primary) !important;
    color: var(--primary-lighter);
    transition: 0.3s;
}

.hulu-talent-btn-tosca {
    background-color: var(--tosca-900) !important;
    color: var(--primary-lighter);
    transition: 0.3s;
}

.hulu-talent-btn-primary:active {
    opacity: 0.85;
}

.hulu-talent-btn-outline-primary {
    color: var(--primary) !important;
    transition: 0.3s;
}

.hulu-talent-btn-outline-primary:hover {
    color: var(--primary) !important;
    transition: 0.3s;
    border: none !important;
}

.hulu-talent-btn-outline-primary:hover,
.hulu-talent-btn-outline-primary:active,
.hulu-talent-btn-outline-primary:focus {
    background-color: var(--secondary-lighter) !important;
    color: var(--secondary-darker) !important;
}

.hulu-talent-btn-active {
    background-color: var(--secondary-lighter) !important;
    color: var(--secondary-darker) !important;
}

/* badge colors */
.hulu-talent-badge-danger {
    background-color: var(--danger-lighter);
    color: var(--danger-darker) !important;
}

.hulu-talent-badge-success {
    background-color: var(--success-lighter);
    color: var(--success-darker) !important;
}

.hulu-talent-badge-primary {
    background-color: var(--primary);
    color: whitesmoke !important;
}

.hulu-talent-badge-progress {
    background-color: var(--on-progress-lighter);
    color: var(--on-progress-darker) !important;
}

.hulu-talent-badge-warning {
    background-color: var(--yellow-300);
    color: var(--yellow-800) !important;
}

.hulu-talent-badge-tosca {
    background-color: var(--tosca-100);
    color: var(--primary) !important;
}

/* position */
.fixed {
    position: fixed !important;
}

.-right-full {
    right: -100% !important;
}

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

/* sidebar menu  */
.menu {
    top: 0 !important;
    bottom: 0 !important;
    transition: 0.3s ease;
}

.menu--opened {
    right: 0;
}

.menu--closed {
    right: -100% !important;
}

/* sidebar */
.sidebar {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 9;
    transition: top 0.3s ease;
    overflow-y: auto;
}

.sidebar--opened {
    top: 5rem;
    bottom: 0;
}

.sidebar--closed {
    top: -100%;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.smooth-transistion {
    transition: ease 0.3s;
}

/* cards */
.card--w--half {
    width: 100% !important;
}

/* remove ruler */
.no-ruler {
    scrollbar-width: 0;
}

.no-ruler::-webkit-scrollbar {
    display: none;
}

/* circular progress */
.circular .circular-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--black-400);
    position: relative;
}

.circular .circular-circle .mask,
.circular .circular-circle .fill {
    width: 70px;
    height: 70px;
    position: absolute;
    border-radius: 50%;
}

.circular-circle .mask .fill {
    clip: rect(0px, 35px, 70px, 0px);
    background-color: var(--primary-darker);
}

.circular-circle .inner-circle {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 5px;
    display: grid;
    place-items: center;
    font-size: 16px;
}

/* custom radio button */
.custom-radio-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--black-500);
    color: #fff;
    border: 1px solid;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    width: 100%;
}

/* Hide the actual radio input */
.custom-radio-input {
    display: none;
}

/* Style for the checked custom radio button */
.custom-radio-input:checked + .custom-radio-button {
    background-color: var(--primary-darker);
    color: #fff;
}

/* viewports */
@media screen and (min-width: 768px) {
    .md-static {
        position: static !important;
    }
    .md-border-none {
        border-width: none !important;
        border-style: none !important;
        border-color: none !important;
    }
    .md-h-auto {
        height: auto !important;
    }
    .sidebar {
        position: sticky !important;
        top: 4rem;
        bottom: 0;
        height: 100vh;
        overflow-y: auto;
        scrollbar-width: 0;
    }
    .card--w--half {
        width: 48% !important;
    }
}

/* overlapping style */
.nav-link.active,
.show > .nav-link {
    background-color: var(--primary) !important;
    color: var(--primary-lighter) !important;
    transition: 0.3s !important;
}

.nav-pills .nav-link:not(.active) {
    background-color: var(--secondary-text) !important;
    color: var(--primary-lighter) !important;
    transition: 0.3s !important;
}

.bg-warning-light {
    background-color: #fcd700 !important;
    /* Warna kustom */
    color: black !important;
}
.bg-creation-direct {
    background-color: #dd8c00 !important;
    /* Warna kustom */
    color: white !important;
}

.bg-fullfillment {
    background-color: #197419 !important;
    /* Warna kustom */
    color: white !important;
}

.bg-creation-not-submitted {
    background-color: #dddddd !important;
    color: black !important;
}