:root {
    --primary: #ED170F;
    --secondary: #FFD600;
    --accent: #4BB8A4;
    --success: #2DBE15;
    --danger: #ED170F;
    --warning: #DCC81A;
    --info: #00C7FF;

    --neutral-10: #0a0a0a;
    --neutral-20: #404040;
    --neutral-30: #EDEDED;
    --neutral-40: #EDEDED;
    --neutral-50: #C2C2C2;
    --neutral-60: #9E9E9E;
    --neutral-70: #757575;
    --neutral-80: #616161;
    --neutral-90: #404040;
    --neutral-100: #0A0A0A;
}

* {
    font-family: 'Inter', sans-serif;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.btn {
    padding: 6px 28px !important;
    border-radius: 6px !important;
    height: 38px;
}

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    padding: 6px 28px;
}
.btn-accent {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    padding: 6px 28px;
}

.btn-primary:hover {
    box-shadow: 0px 5px 10px 0px rgba(88, 103, 221, 0.19);
}

.btn-accent:hover {
    box-shadow: 0px 5px 10px 0px rgba(88, 103, 221, 0.19);
}

.btn-default {
    border: 1px solid #E0E0E0;
    background: #F5F5F5;
}

.btn-default:hover {
    box-shadow: 0px 5px 10px 0px rgba(88, 103, 221, 0.19);
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
}

.selection {
    /* display: inline-block !important; */
    width: 100% !important;
}

p {
    letter-spacing: 0px;
}

.form-group {
    width: 100%;
    margin-bottom: 1rem;
}

.form-control {
    font-size: 14px !important;
}

.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--neutral-100) !important;
    height: 38px;
    padding: 6px 28px;
}

.btn-secondary:hover {
    box-shadow: 0px 5px 10px 0px rgba(88, 103, 221, 0.19);
}


#login-page {
    background-image: url('/images/miyana-hotel.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* height: 100vh; */
}

.pagination .page-item .page-link {
    color: var(--neutral-100) !important;
    font-size: 14px;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    font-size: 14px;
}

.kv-table-header tr th a {
    color: var(--neutral-100) !important;
}

.form-select {
    font-size: 14px !important;
}

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

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

.fw-300 {
    font-weight: 300 !important;
}

.fw-100 {
    font-weight: 100 !important;
}

.invalid-feedback {
    color: #fff;
}

.logo-wrapper {
    padding: 20px 14px !important;
}

.material-symbols-outlined {
    font-size: 20px !important;
    margin-right: 11px;
}

.page-wrapper.compact-wrapper .page-body-wrapper .page-body {
    min-height: calc(100vh - 136px) !important;
}

.page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown {
    width: max-content !important;
}

.sidebar-list .sidebar-link span {
    color: var(--neutral-70) !important;
    font-weight: 400 !important;
}

.sidebar-list .sidebar-link.active span {
    color: var(--primary) !important;
    font-weight: 400 !important;
}

.sidebar-submenu li a {
    font-weight: 200 !important;
}

.sidebar-submenu li a.active {
    font-weight: 400 !important;
}

.kv-table-header {
    background: #f5f5f5 !important;
    border: 1px solid #E0E0E0 !important;
}

.kv-grid-table.table {
    border: 1px solid #E0E0E0 !important;
}

a {
    letter-spacing: 0px !important;
}

.p-30 {
    padding: 30px !important;
}

.pb-16 {
    padding-bottom: 16px !important;
}

.pxt-30 {
    padding: 30px 30px 0px 30px;
}

.pt-16 {
    padding-top: 16px !important;
}

.kv-sort-icon {
    display: none !important;
}

.login footer {
    position: absolute;
    /* flex-shrink: 0; */
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    width: 100%;
    background: var(--text-9);
    box-shadow: 0px -1px 0px 0px var(--text-7);
    padding: 15px 24px;
    color: var(--text-3);
    text-align: center;
    background: var(--background-dark, #272931);
    /* z-index: -100; */
}

.card-create-broadcast {
    border-radius: 5px;
    border: 1px solid #E0E0E0;
    background: #FFF;
    box-shadow: 0px 9px 20px 0px rgba(46, 35, 94, 0.07);
    padding: 20px;
    width: 283px;
}

.step-broadcast {
    display: flex;
    width: 100%;
    margin-bottom: 16px;
    background-color: #F97772;
    color: #fff;
}

.circle-step {
    border-radius: 50px;
    background-color: var(--primary);
    padding: 8px;
}

.step-broadcast div {
    padding: 8px 12px;
}

.step-broadcast .active {
    background-color: var(--primary);

}

.step-broadcast .active .circle-step {
    background-color: #F97772;
}

#preview-whatsapp {
    height: 674px;
    width: 360px;
    background-image: url('/images/wa-bg.png');
    background-repeat: no-repeat;
    padding: 22px;
}

.chat-wa {
    padding: 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    border-radius: 4px;
    background: #fff;
    /* Shadow Chat WA */
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    line-height: 21px;
    margin-bottom: 16px;
    max-width: 200px;
}

#broadcastwhatsapp-pesan-container {
    padding: 0px !important;
}

.note-toolbar {
    padding: 10px !important;
}
.note-btn {
    margin-right: 1rem;
}

@media (min-width: 768px) {
    .login-main {
        margin-left: 30% !important;
        /* Atur margin kiri sesuai kebutuhan Anda */
    }
}