/* Margin */
.v-m-0 { margin: 0; }
.v-m-xs { margin: var(--space-xs); }
.v-m-sm { margin: var(--space-sm); }

/* Padding */
.v-p-0 { padding: 0; }
.v-p-md { padding: var(--space-md); }

/* Display */
.v-flex { display: flex; }
.v-grid { display: grid; }

/* Text */
.v-text-center { text-align: center; }
.v-text-bold { font-weight: var(--font-weight-bold); }

.fs-24 {
    font-size: 24px;
}

.fs-16 {
    font-size: 16px;
}

/* 🔲 Padding */
.p-0 {
    padding: 0;
}
.p-xxs {
    padding: var(--padding-xxs);
}
.p-xs {
    padding: var(--padding-xs);
}
.p-sm {
    padding: var(--padding-sm);
}
.p-md {
    padding: var(--padding-md);
}
.p-lg {
    padding: var(--padding-lg);
}
.p-xl {
    padding: var(--padding-xl);
}
.p-xxl {
    padding: var(--padding-xxl);
}

.p-6{
    padding: 6px;
}

/* Padding Horizontal (X Axis) */
.px-0 {
    padding-left: 0; padding-right: 0;
}
.px-xxs {
    padding-left: var(--padding-xxs); padding-right: var(--padding-xxs);
}
.px-xs {
    padding-left: var(--padding-xs); padding-right: var(--padding-xs);
}
.px-sm {
    padding-left: var(--padding-sm); padding-right: var(--padding-sm);
}
.px-md {
    padding-left: var(--padding-md); padding-right: var(--padding-md);
}
.px-lg {
    padding-left: var(--padding-lg); padding-right: var(--padding-lg);
}
.px-xl {
    padding-left: var(--padding-xl); padding-right: var(--padding-xl);
}
.px-xxl {
    padding-left: var(--padding-xxl); padding-right: var(--padding-xxl);
}
.px-10 {
    padding-left: var(--padding-10-px); padding-right: var(--padding-10-px);
}
.px-40 {
    padding-left: var(--padding-40-px); padding-right: var(--padding-40-px);
}

/* Padding Vertical (Y Axis) */
.py-0 {
    padding-top: 0; padding-bottom: 0;
}
.py-xxs {
    padding-top: var(--padding-xxs); padding-bottom: var(--padding-xxs);
}
.py-xs {
    padding-top: var(--padding-xs); padding-bottom: var(--padding-xs);
}
.py-sm {
    padding-top: var(--padding-sm); padding-bottom: var(--padding-sm);
}
.py-md {
    padding-top: var(--padding-md); padding-bottom: var(--padding-md);
}
.py-lg {
    padding-top: var(--padding-lg); padding-bottom: var(--padding-lg);
}
.py-xl {
    padding-top: var(--padding-xl); padding-bottom: var(--padding-xl);
}
.py-xxl {
    padding-top: var(--padding-xxl); padding-bottom: var(--padding-xxl);
}
.py-10 {
    padding-top: var(--padding-10-px); padding-bottom: var(--padding-10-px);
}
.py-40 {
    padding-top: var(--padding-40-px); padding-bottom: var(--padding-40-px);
}

/* 🔲 Margin */
.m-0 {
    margin: 0;
}
.m-xxs {
    margin: var(--margin-xxs);
}
.m-xs {
    margin: var(--margin-xs);
}
.m-sm {
    margin: var(--margin-sm);
}
.m-md {
    margin: var(--margin-md);
}
.m-lg {
    margin: var(--margin-lg);
}
.m-xl {
    margin: var(--margin-xl);
}
.m-xxl {
    margin: var(--margin-xxl);
}

.mt-xxs {
    margin-top: var(--margin-xxs);
}
.mt-xs {
    margin-top: var(--margin-xs);
}
.mt-sm {
    margin-top: var(--margin-sm);
}
.mt-md {
    margin-top: var(--margin-md);
}
.mt-lg {
    margin-top: var(--margin-lg);
}
.mt-xl {
    margin-top: var(--margin-xl);
}
.mt-xxxxl {
    margin-top: var(--margin-xxxxl);
}
.mt-35 {
    margin-top: 2.188rem;
}

.mb-xxs {
    margin-bottom: var(--margin-xxs);
}
.mb-xs {
    margin-bottom: var(--margin-xs);
}
.mb-sm {
    margin-bottom: var(--margin-sm);
}
.mb-md {
    margin-bottom: var(--margin-md);
}
.mb-lg {
    margin-bottom: var(--margin-lg);
}
.mb-xl {
    margin-bottom: var(--margin-xl);
}
.mb-xxl {
    margin-bottom: var(--margin-xxl);
}
.mb-xxxxl {
    margin-bottom: var(--margin-xxxxl);
}
.mb-40 {
    margin-bottom: var(--margin-40-px);
}
.mb-35 {
    margin-bottom: 2.188rem;
}

.mr-xxs {
    margin-right: var(--margin-xxs);
}
.mr-xs {
    margin-right: var(--margin-xs);
}
.mr-sm {
    margin-right: var(--margin-sm);
}
.mr-md {
    margin-right: var(--margin-md);
}
.mr-lg {
    margin-right: var(--margin-lg);
}
.mr-xl {
    margin-right: var(--margin-xl);
}
.mr-xxl {
    margin-right: var(--margin-xxl);
}
.mr-xxxl {
    margin-right: var(--margin-xxxl);
}
.mr-xxxxl {
    margin-right: var(--margin-xxxxl);
}

/* Margin Horizontal (X Axis) */
.mx-0 {
    margin-left: 0; margin-right: 0;
}
.mx-xxs {
    margin-left: var(--margin-xxs); margin-right: var(--margin-xxs);
}
.mx-xs {
    margin-left: var(--margin-xs); margin-right: var(--margin-xs);
}
.mx-sm {
    margin-left: var(--margin-sm); margin-right: var(--margin-sm);
}
.mx-md {
    margin-left: var(--margin-md); margin-right: var(--margin-md);
}
.mx-lg {
    margin-left: var(--margin-lg); margin-right: var(--margin-lg);
}
.mx-xl {
    margin-left: var(--margin-xl); margin-right: var(--margin-xl);
}
.mx-xxl {
    margin-left: var(--margin-xxl); margin-right: var(--margin-xxl);
}

/* Margin Vertical (Y Axis) */
.my-0 {
    margin-top: 0; margin-bottom: 0;
}
.my-xxs {
    margin-top: var(--margin-xxs); margin-bottom: var(--margin-xxs);
}
.my-xs {
    margin-top: var(--margin-xs); margin-bottom: var(--margin-xs);
}
.my-sm {
    margin-top: var(--margin-sm); margin-bottom: var(--margin-sm);
}
.my-md {
    margin-top: var(--margin-md); margin-bottom: var(--margin-md);
}
.my-lg {
    margin-top: var(--margin-lg); margin-bottom: var(--margin-lg);
}
.my-xl {
    margin-top: var(--margin-xl); margin-bottom: var(--margin-xl);
}
.my-xxl {
    margin-top: var(--margin-xxl); margin-bottom: var(--margin-xxl);
}

.my-40{
    margin-top: 2.5rem; margin-bottom: 2.5rem;
}

@media (max-width: 767px) {
    .md\:d-none { display: none !important; }

    .md\:p-0 { padding: 0 !important; }
    .md\:p-sm { padding: var(--padding-sm) !important; }
    .md\:p-md { padding: var(--padding-md) !important; }
    .md\:p-lg { padding: var(--padding-lg) !important; }
    .md\:p-xl { padding: var(--padding-xl) !important; }
    .md\:p-20 { padding: 20px !important; }

    .md\:px-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .md\:px-sm { padding-left: var(--padding-sm) !important; padding-right: var(--padding-sm) !important; }
    .md\:px-md { padding-left: var(--padding-md) !important; padding-right: var(--padding-md) !important; }
    .md\:px-lg { padding-left: var(--padding-lg) !important; padding-right: var(--padding-lg) !important; }
    .md\:px-xl { padding-left: var(--padding-xl) !important; padding-right: var(--padding-xl) !important; }

    .md\:py-0 { padding-top: 0; padding-bottom: 0; }
    .md\:py-8 { padding-top: .5rem; padding-bottom: .5rem; }
    .md\:py-md { padding-top: var(--padding-md); padding-bottom: var(--padding-md); }
    .md\:py-lg { padding-top: var(--padding-lg); padding-bottom: var(--padding-lg); }
    .md\:py-xl { padding-top: var(--padding-xl); padding-bottom: var(--padding-xl); }

    .md\:pt-0 { padding-top: 0; }
    .md\:pt-md { padding-top: var(--padding-md); }
    .md\:pt-lg { padding-top: var(--padding-lg); }
    .md\:pt-xl { padding-top: var(--padding-xl); }

    .md\:pb-0 { padding-bottom: 0; }
    .md\:pb-md { padding-bottom: var(--padding-md); }
    .md\:pb-lg { padding-bottom: var(--padding-lg); }
    .md\:pb-xl { padding-bottom: var(--padding-xl); }

    .md\:m-0 { margin: 0; }
    .md\:m-sm { margin: var(--margin-xs); }
    .md\:m-md { margin: var(--margin-sm); }
    .md\:m-lg { margin: var(--margin-md); }
    .md\:m-xl { margin: var(--margin-lg); }

    .md\:mr-0 { margin-right: 0; }
    .md\:mr-auto { margin-right: auto; }
    .md\:mr-sm { margin-right: var(--margin-sm) !important; }
    .md\:mr-md { margin-right: var(--margin-md) !important; }
    .md\:mr-lg { margin-right: var(--margin-lg) !important; }
    .md\:mr-xl { margin-right: var(--margin-xl) !important; }
    .md\:mr-xxl { margin-right: var(--margin-xxl) !important; }
    .md\:mr-40 { margin-right: 40px !important; }
    .md\:mr-30 { margin-right: 30px !important; }

    .md\:mb-0 { margin-bottom: 0; }
    .md\:mb-sm { margin-bottom: var(--margin-sm) !important; }
    .md\:mb-md { margin-bottom: var(--margin-md) !important; }
    .md\:mb-lg { margin-bottom: var(--margin-lg) !important; }
    .md\:mb-xl { margin-bottom: var(--margin-xl) !important; }
    .md\:mb-xxl { margin-bottom: var(--margin-xxl) !important; }
    .md\:mb-40 { margin-bottom: 40px !important; }

    .md\:ml-0 { margin-left: 0; }
    .md\:ml-auto { margin-left: auto !important; }
    .md\:ml-sm { margin-left: var(--margin-sm) !important; }
    .md\:ml-md { margin-left: var(--margin-md) !important; }
    .md\:ml-lg { margin-left: var(--margin-lg) !important; }
    .md\:ml-xl { margin-left: var(--margin-xl) !important; }
    .md\:ml-xxl { margin-left: var(--margin-xxl) !important; }
    .md\:ml-40 { margin-left: 40px !important; }
    .md\:ml-30 { margin-left: 30px !important; }

    .md\:mb-0 { margin-bottom: 0; }
    .md\:mt-xs { margin-top: var(--margin-xs); }
    .md\:mt-sm { margin-top: var(--margin-sm); }
    .md\:mt-md { margin-top: var(--margin-md); }
    .md\:mt-lg { margin-top: var(--margin-lg); }
    .md\:mt-xl { margin-top: var(--margin-xl); }

    .md\:mx-0 { margin-left: 0; margin-right: 0; }
    .md\:mx-sm { margin-left: var(--margin-xs); margin-right: var(--margin-xs); }
    .md\:mx-md { margin-left: var(--margin-sm); margin-right: var(--margin-sm); }
    .md\:mx-lg { margin-left: var(--margin-md); margin-right: var(--margin-md); }
    .md\:mx-xl { margin-left: var(--margin-lg); margin-right: var(--margin-lg); }

    .md\:my-0 { margin-top: 0; margin-bottom: 0; }
    .md\:my-sm { margin-top: var(--margin-xs); margin-bottom: var(--margin-xs); }
    .md\:my-md { margin-top: var(--margin-sm); margin-bottom: var(--margin-sm); }
    .md\:my-lg { margin-top: var(--margin-md); margin-bottom: var(--margin-md); }
    .md\:my-xl { margin-top: var(--margin-lg); margin-bottom: var(--margin-lg); }
}

@media (max-width: 991px) {
    .lg\:p-0 { padding: 0 !important; }
    .lg\:p-sm { padding: var(--padding-sm) !important; }
    .lg\:p-md { padding: var(--padding-md) !important; }
    .lg\:p-lg { padding: var(--padding-lg) !important; }
    .lg\:p-xl { padding: var(--padding-xl) !important; }
    .lg\:p-20 { padding: 20px !important; }

    .lg\:px-0 { padding-left: 0; padding-right: 0; }
    .lg\:px-md { padding-left: var(--padding-sm); padding-right: var(--padding-sm); }
    .lg\:px-lg { padding-left: var(--padding-md); padding-right: var(--padding-md); }
    .lg\:px-xl { padding-left: var(--padding-lg); padding-right: var(--padding-lg); }

    .lg\:py-0 { padding-top: 0; padding-bottom: 0; }
    .lg\:py-md { padding-top: var(--padding-sm); padding-bottom: var(--padding-sm); }
    .lg\:py-lg { padding-top: var(--padding-md); padding-bottom: var(--padding-md); }
    .lg\:py-xl { padding-top: var(--padding-lg); padding-bottom: var(--padding-lg); }

    .lg\:m-0 { margin: 0; }
    .lg\:m-sm { margin: var(--margin-xs); }
    .lg\:m-md { margin: var(--margin-sm); }
    .lg\:m-lg { margin: var(--margin-md); }
    .lg\:m-xl { margin: var(--margin-lg); }

    .lg\:mb-0 { margin-bottom: 0; }
    .lg\:mb-sm { margin-bottom: var(--margin-xs); }
    .lg\:mb-md { margin-bottom: var(--margin-sm); }
    .lg\:mb-lg { margin-bottom: var(--margin-md); }
    .lg\:mb-xl { margin-bottom: var(--margin-lg); }

    .lg\:mb-0 { margin-bottom: 0; }
    .lg\:mt-xs { margin-top: var(--margin-xs); }
    .lg\:mt-sm { margin-top: var(--margin-sm); }
    .lg\:mt-md { margin-top: var(--margin-md); }
    .lg\:mt-lg { margin-top: var(--margin-lg); }
    .lg\:mt-xl { margin-top: var(--margin-xl); }

    .lg\:mx-0 { margin-left: 0; margin-right: 0; }
    .lg\:mx-sm { margin-left: var(--margin-xs); margin-right: var(--margin-xs); }
    .lg\:mx-md { margin-left: var(--margin-sm); margin-right: var(--margin-sm); }
    .lg\:mx-lg { margin-left: var(--margin-md); margin-right: var(--margin-md); }
    .lg\:mx-xl { margin-left: var(--margin-lg); margin-right: var(--margin-lg); }

    .lg\:my-0 { margin-top: 0; margin-bottom: 0; }
    .lg\:my-sm { margin-top: var(--margin-xs); margin-bottom: var(--margin-xs); }
    .lg\:my-md { margin-top: var(--margin-sm); margin-bottom: var(--margin-sm); }
    .lg\:my-lg { margin-top: var(--margin-md); margin-bottom: var(--margin-md); }
    .lg\:my-xl { margin-top: var(--margin-lg); margin-bottom: var(--margin-lg); }
}

@media (max-width: 767px) {
    .md\:w-100 { width: 100% }
}

.gap-1-2 { gap: var(--gap-1-2); }
.gap-3-4 { gap: var(--gap-3-4); }
.gap-10  { gap: var(--gap-10); }
.gap-16  { gap: var(--gap-16); }
.gap-24  { gap: var(--gap-24); }
.gap-28  { gap: var(--gap-28); }
.gap-32  { gap: var(--gap-32); }
.gap-35  { gap: var(--gap-35); }
.gap-40  { gap: var(--gap-40); }
.gap-42  { gap: var(--gap-42); }
.gap-48  { gap: var(--gap-48); }
.g-form {

}

.gap-x-24 { column-gap: var(--gap-x-24); }
.gap-y-24 { row-gap: var(--gap-y-24); }
.gap-x-48 { column-gap: var(--gap-x-48); }
.gap-y-48 { row-gap: var(--gap-y-48); }

/* Responsive Gap Utilities */
/*@media (min-width: 576px) { !* Small (sm) *!*/
/*    .sm\:gap-16  { gap: var(--gap-16); }*/
/*    .sm\:gap-24  { gap: var(--gap-24); }*/
/*    .sm\:gap-28  { gap: var(--gap-28); }*/
/*    .sm\:gap-32  { gap: var(--gap-32); }*/
/*}*/

@media (max-width: 767px) { /* Medium (md) */
    .md\:gap-8  { gap: var(--gap-1-2) !important; }
    .md\:gap-3-4  { gap: var(--gap-3-4) !important; }
    .md\:gap-16  { gap: var(--gap-16) !important; }
    .md\:gap-24  { gap: var(--gap-24) !important; }
    .md\:gap-28  { gap: var(--gap-28) !important; }
    .md\:gap-32  { gap: var(--gap-32) !important; }
    .md\:gap-40  { gap: var(--gap-40) !important; }
}

@media (max-width: 991px) { /* Large (lg) */
    .lg\:gap-24  { gap: var(--gap-24); }
    .lg\:gap-28  { gap: var(--gap-28); }
    .lg\:gap-32  { gap: var(--gap-32); }
    .lg\:gap-35  { gap: var(--gap-35); }
    .lg\:gap-40  { gap: var(--gap-40); }
    .lg\:gap-48  { gap: var(--gap-48); }
}

@media (max-width: 1199px) { /* Extra Large (xl) */
    .xl\:gap-28  { gap: var(--gap-28); }
    .xl\:gap-32  { gap: var(--gap-32); }
    .xl\:gap-35  { gap: var(--gap-35); }
    .xl\:gap-40  { gap: var(--gap-40); }
    .xl\:gap-48  { gap: var(--gap-48); }
}

.lh-30 {
    line-height: 1.875rem !important;
}

.card-md {
    flex: 1 1 calc(33.333% - 16px); /* 3 kolom dengan jarak */
    max-width: 100%; /* Batas maksimal ukuran */
}

.menu-category {
    max-width: 100%;
    overflow: hidden;
}

.menu-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    padding: 8px 0;
    max-width: 80%;
}

.menu-scroll::-webkit-scrollbar {
    display: none;
}

.scroll-btn {
    background: white;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    position: absolute;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.no-hover-no-underline {
    text-decoration: none !important;
}

.no-hover-no-underline:hover {
    color: unset;
    text-decoration: none !important;
}

.radius-8 {
    border-radius: .5rem;
}

.radius-12 {
    border-radius: .75rem;
}

.radius-16 {
    border-radius: 1rem;
}

.radius-24 {
    border-radius: 1.5rem;
}

.shadow-md {
    box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.04);
}

.modal-content {
    max-height: 90vh;
}

.modal-body {
    overflow-y: scroll;
}

.scrollable-y {
    overflow-y: scroll;
}

.social-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    padding: 0 var(--padding-md);
    border: 1px solid #F4F5F6;
    border-radius: 99999px;
    gap: 10px;
    flex-grow: 1;
}

.share-job {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--padding-lg);
}

.box-icon-user {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 19.2px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 799999.188px;
    background: var(--color-secondary, #13CB99);
}

.box-icon-user i {
    display: flex;
    width: 19.2px;
    height: 19.2px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-white);
}

@media (max-width: 767px) {
    .container-fluid.employer{
        margin: 0 !important;
        padding: var(--margin-lg) var(--margin-md) !important;
    }
    .container-fluid.employer .container{
        margin: 0;
        padding: 0;
    }

    .mb-xxl {
        margin-bottom: var(--margin-xl);
    }
    .mb-xxxxl {
        margin-bottom: var(--margin-xxl);
    }
    .setup.mb-xxxxl {
        margin-bottom: var(--margin-xl) !important;
    }
    .my-xxl {
        margin: var(--margin-xl) 0;
    }

    .share-job {
        display: flex;
        flex-direction: column;
        align-items: center; /* Geser ke kiri */
        gap: var(--padding-md);
    }

    .share-job .d-flex {
        justify-content: start !important; /* Geser tombol ke kiri */
    }
}