:root {
    --primary-color: #2eaf7d;
    /* Define the variable */
}

.material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.text-root-color {
    color: #2eaf7d;
}




body {
    font-family: "Poppins", sans-serif;
    background-color: #f4f2f3;
    color: black;
    touch-action: manipulation;
}

.green-gradient {
    background-color: #eaf4ec;
}

#main-container {
    max-width: 100dvw;
}

#main-navbar {
    background-color: var(--primary-color);
    color: white !important;
    max-width: 100dvw;
}

#main-navbar .navbar-brand img,
.logo-company {
    height: 90px;
}

.btn {
    font-size: small;
}

.fs-small {
    font-size: small !important;
}

.fs-x-small {
    font-size: x-small !important;
}

.fs-xx-small {
    font-size: xx-small !important;
}

label {
    font-size: small !important;
}

.dashboard-app {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
    background-color: white;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding: 20px;
    min-width: 180px;
    color: gray;
    transition: all 0.2 ease-in-out;
}

@media (max-width: 700px) {
    .dashboard-app {
        flex: 1 1 auto;
    }
}

.dashboard-app span {
    font-size: small;
    font-weight: 300;
}

.dashboard-app i {
    font-size: x-large;
}

.dashboard-app .icon {
    font-size: xx-large;
}

.dashboard-app:hover {
    background-color: var(--primary-color);
    color: white !important;
}

.fs-smaller {
    font-size: xx-small !important;
}

.outstation-form-report-table {
    min-width: 900px !important;
}

.list-table {
    min-width: 300px !important;
}

.list-table#prorate-table {
    min-width: 600px !important;
}

.list-table#leave-table,
.list-table#pagination-leave {
    min-width: 1700px !important;
}

#leave-table a {
    color: #2eaf7d;
}

#leave-table a:hover {
    color: #16523b;
}
.overflow-table-all-size {
    overflow-x: auto;
    width: 100%;
}

.overflow-table-all-size::-webkit-scrollbar {
    width: 3px !important;
    height: 10px !important;
}
.overflow-table-all-size::-webkit-scrollbar-thumb {
    background: rgb(126, 169, 152);
    border-radius: 20px;
    transition: all 0.5;
    width: 10px;
}

@media (max-width: 1000px) {
    .overflow-table {
        overflow-x: auto;
        width: 100%;
    }
}

.dashboard-title-section {
    font-weight: 700;
    color: var(--primary-color);
}

.bg-white {
    background-color: white !important;
}

.file-upload-btn {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    padding: 20px;
    height: 100%;
    border: 1px solid #979797;
    font-size: medium;
    transition: all 0.3s;
    cursor: pointer;
    border-radius: 5px;
}

.file-upload-btn:hover {
    transform: scale(102%);
}

.img-profile {
    height: 200px;
    width: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: solid white 10px;
}
.img-profile.small{
        height: 120px;
    width: 120px;
}
.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer:hover {
    opacity: 75%;
}

.bg-blue-70 {
    background-color: #7fbadc !important;
    color: white !important;
}

.bg-blue-40 {
    background-color: #b6d5eb !important;
}

.bg-blue-20 {
    background-color: #d7e9f5 !important;
}

.bg-green-70 {
    background-color: #38df4e !important;
}

.bg-green-40 {
    background-color: #95ff8f !important;
}

.bg-green-20 {
    background-color: #daffd6 !important;
}

.bg-orange-70 {
    background-color: #ff781f !important;
    color: white !important;
}

.bg-orange-40 {
    background-color: #ff9d5c !important;
}

.bg-orange-20 {
    background-color: #ffc49d !important;
}

.bg-purple-70 {
    background-color: #9b59b6 !important;
}
.bg-purple-40 {
    background-color: #e198fd !important;
}
.bg-purple-20 {
    background-color: #f2d4fe !important;
}

.bg-gold-70 {
    background-color: #f7c948 !important;
}
.bg-gold-40 {
    background-color: #fbdf90 !important;
}

.bg-gold-20 {
    background-color: #f9eecf !important;
}

.bg-light-green-70 {
    background-color: #48c9b0 !important;
}

.bg-light-green-40 {
    background-color: #7becd5 !important;
}

.bg-light-green-20 {
    background-color: rgb(209, 255, 246) !important;
}

.pagination-custom a {
    color: black !important;
}

.pagination-custom a:hover {
    color: #2eaf7d !important;
}

.page-item {
    cursor: pointer;
}

.pagination-custom .page-item.active a {
    color: white !important;
    background-color: #2eaf7d !important;
    border-color: #2eaf7d !important;
}

.card-dashboard {
    background-color: #2eaf7e15;
    border-color: #2eaf7d;
}

#staff-leave-details .section {
    border: 1px solid #2eaf7d;
    padding: 30px 20px;
}

#staff-leave-details .section.small {
    padding: 15px 20px;
}

.grid-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    width: 100%;
    gap: 10px;
    padding-bottom: 10px;
}

@media (max-width: 900px) {
    .grid-container {
        flex-direction: column;

    }
}

.grid-container::-webkit-scrollbar {
    width: 3px !important;
    height: 10px !important;
}

.grid-container::-webkit-scrollbar-thumb {
    background: rgb(126, 169, 152);
    border-radius: 20px;
    transition: all 0.5;
}

.grid-container .section {
    min-width: 200px;
}

#calendar-event {
    width: 100%;
    max-width: 600px !important; /* jangan limit */
    margin: 0 auto; /* optional, untuk center */
}

#calendar-event.full-calendar {
    max-width: none !important;
}

#calendar-event a {
    text-decoration: none !important;
    color: black;
}

.event-view,
.holiday-view,
.event-edit {
    cursor: pointer;
}

.leave-emergency {
    color: #df3838;
}

.leave-annual {
    color: #2eaf7d;
}

.leave-unpaid {
    color: grey;
}

.leave-sick {
    color: #38df4e;
}

.leave-hospitalization {
    color: #ff781f;
}

.leave-compassionate {
    color: #9b59b6;
}

.leave-maternity {
    color: #df38c0;
}

.leave-paternity {
    color: #3838df;
}

.leave-other {
    color: #202020;
}

/* badge */
.leave-emergency-badge {
    background-color: #df3838;
    color: white;
}

.leave-annual-badge {
    background-color: #2eaf7d;
    color: white;
}

.leave-unpaid-badge {
    background-color: grey;
    color: white;
}

.leave-sick-badge {
    background-color: #38df4e;
    color: white;
}

.leave-hospitalization-badge {
    background-color: #ff781f;
    color: white;
}

.leave-compassionate-badge {
    background-color: #9b59b6;
    color: white;
}

.leave-maternity-badge {
    background-color: #df38c0;
    color: white;
}

.leave-paternity-badge {
    background-color: #3838df;
    color: white;
}

.leave-other-badge {
    background-color: #202020;
    color: white;
}

.img-profile-home,
.img-profile-home-mobile {
    height: 110px;
    width: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: solid white 10px;
}

.img-profile-home.small-size {
    height: 80px;
    width: 80px;
}

.img-profile-home-mobile {
    height: 90px;
    width: 90px;
}

.img-profile,
.img-preview-profile {
    height: 200px;
    width: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: solid white 10px;
}

.img-container {
    position: relative;
    display: inline-block;
    width: fit-content;
}

#edit-img-btn {
    padding-top: 7px;
    padding-right: 7px;
    position: absolute;
    right: 0;
    top: 0;
}

#edit-img-btn > input {
    display: none;
}

#edit-img-btn span {
    cursor: pointer;
}
.italic-sign{
    font-style: italic !important;
}