:root {
    --primary:#23609E;
    --secondary:#5D6163;
    --success:#34C759;
    --info:#12B3A8;
    --warning:#ffc107;
    --danger:#FF383C;
    --light:#F2F2F2;
    --dark:#1C1C1C;
    --grey: #A4B0BE;
    --white: #FFFFFF;
}

*,
::after,
::before {
    box-sizing: border-box;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--white);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    font-size: 1rem;
    overflow-x: hidden;
}

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

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

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

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

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

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

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

.bg-grey {
    background-color: var(--grey);
}

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

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

.text-circle{
    font-size: 8px;
}

.text-justify {
    text-align: justify;
}

.border-secondary {
    border: 1px solid #adb5bd !important;
}
.border-primary {
    border: 1px solid var(--primary) !important;
}
.curved-10 {
    border-radius: 10px !important;
}

.curved-bottom-10 {
    border-radius: 0 0 10px 10px !important;
}

.curved-top-10 {
    border-radius: 10px 10px 0 0 !important;
}

.curved-left-10 {
    border-radius: 10px 0 0 10px !important;
}

.curved-right-10 {
    border-radius: 0 10px 10px 0 !important;
}

.curved-8 {
    border-radius: 8px !important;
}

.curved-left-8 {
    border-radius: 8px 0 0 8px !important;
}

.content {
    padding: 15px;
}

.content .your-child {
    width: 100%;
    padding: 10px;
    /* border: 1px solid #ECEEF5; */
    /* border: 1px solid #adb5bd; */
    border-radius: 8px;
}

.content .your-child .form-select:focus {
    box-shadow: none;
}


.modal.bottom-sheet .modal-dialog {
    position: fixed;
    bottom: 0;
    margin: 0;
    left: 0;
    right: 0;
    height: 72vh;
    transition: transform 0.3s ease-out;
}

.modal.bottom-sheet .modal-content {
    border-radius: 16px 16px 0 0;  /* rounded top */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    padding: 15px;
    /* height: 100vh; */
}

.modal.bottom-sheet .modal-header {
    border-bottom: none;
    justify-content: center;
}

.icon-no-data {
    width: 30px;
    color: var(--info);
}

.custom-input {
    position: relative;
    margin-bottom: 25px;
}

.custom-input input,
.custom-input textarea {
    width: 100%;
    padding: 14px 14px 14px 14px;
    border: 1px solid #d4d7e1;
    border-radius: 8px;
    font-size: 14px;
    color: #000;
    outline: none;
    background-color: #fff;
    box-sizing: border-box;
}


.custom-input select {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    border: 1px solid #d4d7e1;
    border-radius: 8px;
    outline: none;
    color: #000;
    background-color: #fff;
    box-sizing: border-box;
    /* Hilangkan gaya bawaan Safari */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    /* Tambahkan panah langsung di background */
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%23666' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
        no-repeat right 14px center;
    background-size: 10px;
}

/* Untuk mencegah panah default muncul */
.custom-input select::-ms-expand {
  display: none;
}

.custom-input select::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
}

.custom-input label {
    position: absolute;
    top: 0;
    left: 12px;
    transform: translateY(-50%);
    color: var(--secondary);
    font-size: 14px;
    pointer-events: none;
    transition: 0.2s ease all;
    background: white;
    padding: 0 4px;
    z-index: 1;
}

.choices_list--dropdown, .choices_list[aria-expanded] {
    z-index: 2 !important;
}

.custom-input input:focus {
    border-color: #14b8a6;
}

.custom-input input:focus + label {
    top: 0;
    font-size: 14px;
    color: #14b8a6;
}

.btn-save {
    background-color: var(--info);
    color: var(--dark);
    border-radius: 8px;
    font-weight: 500;
    width: 100%;
    padding: 14px;
}

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

.btn-primary:hover {
    color: var(--white);
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.btn-save:hover {
    background-color: #0f9d92;
}

.table-content .table th {
    font-size: 14px;
    color: var(--dark);
    text-align: center;
    vertical-align: middle;
    background-color: #ECEEF5;
    font-weight: 600;
}

.table-content .table td {
    font-size: 14px;
    color: var(--dark);
    vertical-align: middle;
    white-space: normal !important;
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rotate {
    -webkit-transform: rotate(-90deg);
    writing-mode: horizontal-tb;
    padding-top: 30px;
    padding-bottom: 30px;
    white-space: normal;
    width: 100px;
}

.btn-open {
    background-color: #ECEEF5;
}
.btn-open:hover {
    background-color: #ECEEF5 !important;
}
.btn-open:focus-visible {
    background-color: #ECEEF5 !important;
}
.btn-open:active {
    background-color: #ECEEF5 !important;
}


.member-checkbox input[type="checkbox"] {
    display: none;
}
.member-checkbox {
    width: 17px;
    height: 17px;
    border-color: #999aa4;
}
.member-checkbox span {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #dcdde1;
}
.member-checkbox input[type="checkbox"]:checked+span {
    background-color: var(--info);
    border-color: var(--info);
}
.member-checkbox input[type="checkbox"]:checked+span::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    border: solid white;
    background-color: var(--white);
    animation: blink .5s linear infinite;
    /* border-width: 0 2px 2px 0; */
    /* transform: rotate(45deg); */
}

figure img {
    max-width: 100%;
    height: auto;
}