/* ==========================================
   1. RESET
   ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

/* ==========================================
   2. VARIABLES
   ========================================== */
:root {
    /* Colors */
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --secondary: #6b7280;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #ffc107;

    --white: #ffffff;
    --black: #000000;
    --muted: #9ca3af;
    --light-gray: #f4f5f7;
    --dark-gray: #343a40;
    --primary-border: #e5e7eb;

        /* Palette */
    --red: #ef4444;
    --light-red: #ffdfdf;

    --blue: #3b82f6;
    --light-blue: #eaf3ff;

    --pink: #f02062;
    --light-pink: #fce8ef;

    --green: #22a447;
    --light-green: #e8f7ea;

    --yellow: #d99a00;
    --light-yellow: #fff6d8;

    --purple: #8b45d6;
    --light-purple: #f3ebfc;

    --orange: #f06708;
    --light-orange: #fff0e6;

    /* Radius */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Font size */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --fs-2xl: 32px;

    /* Font weight */
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    /* Transition */
    --transition: 200ms ease;
    --transition-fast: 100ms ease;
    --transition-slow: 400ms ease;

    /* Container */
    --container-max: 1200px;
}

/* ==========================================
   3. COMPONENTS
   ========================================== */

/* Icon */
.icon {
    font-size: var(--fs-lg);
}

/* Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing);
    border: none;
    border-radius: var(--radius);
    font-size: var(--fs-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

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

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

.btn-outline {
    background-color: var(--white);
    color: var(--dark-gray);
    border: 1px solid var(--primary-border);
}
.btn-outline:hover { background-color: #f9fafb; }

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

.btn-dark {
    background-color: var(--black);
    color: var(--white);
}

.btn-warning {
    background-color: var(--warning);
}

/* Card */
.card {
    /* background-color: var(--white); */
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    /* padding: var(--spacing); */
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    /* align-items: flex-start; */
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    z-index: 100;
    padding-bottom: 10vh;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, background-color 0.25s ease, visibility 0.25s;
}

.modal.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-lg);
    width: 90%;
}

.modal-body {
    max-height: 50dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.open-modal.active {
    background-color: var(--light-red);
}

/* Toggle */
.toggle {
    display: none;
}

.toggle.active {
    display: flex;
}

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 10;
}
.dropdown.active .dropdown-menu { display: block; }

/* Accordion */
.accordion-item {
    border-bottom: 1px solid var(--primary-border);
}
.accordion-header {
    padding: var(--spacing-sm) 0;
    cursor: pointer;
    font-weight: 500;
}
.accordion-body {
    display: none;
    padding-bottom: var(--spacing-sm);
}
.accordion-item.active .accordion-body { display: block; }

/* Tabs */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--primary-border);
}
.tab {
    padding: var(--spacing-sm) var(--spacing);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.tab.active {
    border-bottom-color: var(--primary);
    color: var(--primary);
    font-weight: 500;
}

/* Badge */
.badge {
    display: inline-block;
    padding: 2px var(--spacing-sm);
    font-size: var(--fs-xs);
    color: var(--white);
}

/* Breadcrumb */
.breadcrumb ol{
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--fs-sm);
    color: var(--muted);
}
/* .breadcrumb a { color: var(--primary); } */
.breadcrumb li:not(:last-child) > * {
    color: var(--primary);
}

.breadcrumb li:last-child > * {
    color: var(--text);
}

.breadcrumb li + li::before {
    content: "/";
    color: var(--text-muted);
}

/* Navbar */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing);
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
}

/* Pagination */
/* .pagination {
    
} */

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
}
.pagination .active {
    background-color: var(--primary);
    color: var(--white);
}

/* Table */
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th,
.table td {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--primary-border);
}

/* Form control */
.form-control {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
}
.form-control:focus {
    outline: none;
    border-color: var(--primary);
}

.form-select {
    padding: var(--spacing-sm);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    background-color: var(--white);
    cursor: pointer;
}
.form-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Textarea */
.form-control-textarea {
    min-height: 120px;
    resize: vertical;
}
.form-control-textarea-sm {
    min-height: 80px;
    resize: vertical;
}

/* required field */
.required::after {
    content: "*";
    color: var(--danger);
    margin-left: 2px;
}

/* Image upload field */
.upload-dropzone {
    position: relative;
    border: 2px dashed var(--primary-border);
    border-radius: var(--radius);
    padding: var(--spacing-lg) var(--spacing);
    text-align: center;
    background-color: #fafafa;
    transition: var(--transition-fast);
    min-height: 160px;
}
.upload-dropzone:hover {
    border-color: var(--primary);
    background-color: #eff6ff;
}

.upload-actions {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.upload-actions button {
    pointer-events: auto;
}

/* Checkbox / Radio / Switch */
.checkbox,
.radio {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
    position: absolute;
    inset: 0;
    background-color: #ccc;
    border-radius: var(--radius-full);
    transition: var(--transition);
}
.switch-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--white);
    border-radius: 50%;
    transition: var(--transition);
}
.switch input:checked + .switch-slider {
    background-color: var(--primary);
}
.switch input:checked + .switch-slider::before {
    transform: translateX(18px);
}

/* Tooltip */
.tooltip {
    position: relative;
}
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background-color: var(--black);
    color: var(--white);
    font-size: var(--fs-xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}
.tooltip:hover::after {
    opacity: 1;
}

/* Toast */
.toast {
    position: fixed;
    bottom: var(--spacing);
    right: var(--spacing);
    padding: var(--spacing-sm) var(--spacing);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    background-color: var(--white);
    z-index: 100;
}

/* Alert */
.alert {
    padding: var(--spacing-sm) var(--spacing);
    border-radius: var(--radius);
    border-left: 4px solid var(--primary);
    background-color: #eff6ff;
}
.alert-danger {
    border-left-color: var(--danger);
    background-color: #fef2f2;
}
.alert-success {
    border-left-color: var(--success);
    background-color: #f0fdf4;
}
.alert-warning {
    border-left-color: var(--warning);
    background-color: #fffbeb;
}

/* ==========================================
   4. CONTAINER
   ========================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--spacing);
}

.container-fluid {
    width: 100%;
    padding-inline: var(--spacing);
}

/* ==========================================
   5. CURSOR
   ========================================== */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-wait { cursor: wait; }
.cursor-not-allowed { cursor: not-allowed; }

/* ==========================================
   6. VISIBILITY
   ========================================== */
.hidden { display: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ==========================================
   7. Z-INDEX
   ========================================== */
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }

/* ==========================================
   8. OBJECT FIT
   ========================================== */
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-contain { object-fit: contain; }

/* ==========================================
   9. TRANSITION
   ========================================== */
.transition { transition: all var(--transition); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* ==========================================
   10. WIDTH
   ========================================== */
.w-auto { width: auto; }
.w-fit { width: fit-content; }

.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-33 { width: 33.3333%; }
.w-50 { width: 50%; }
.w-66 { width: 66.6666%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }

/* MAX WIDTH */

.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 960px; }
.max-w-2xl { max-width: 1200px; }
.max-w-full { max-width: 100%; }

/* MIN WIDTH */
.min-w-0 { min-width: 0; }
.min-w-xs { min-width: 180px; }
.min-w-sm { min-width: 480px; }
.min-w-md { min-width: 480px; }
.min-w-lg { min-width: 640px; }
.min-w-xl { min-width: 960px; }

/* ==========================================
   11. HEIGHT
   ========================================== */
.h-auto { height: auto; }
.h-fit { height: fit-content; }
.h-full { height: 100%; }

.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }

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

/* ==========================================
   12. DISPLAY
   ========================================== */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* ==========================================
   13. FLEX
   ========================================== */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }

/* Justify */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align */
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }

/* Gap */
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing); }
.gap-4 { gap: var(--spacing-lg); }
.gap-5 { gap: var(--spacing-xl); }

/* ==========================================
   14. GRID
   ========================================== */
.grid { display: grid; }

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-12 { grid-template-columns: repeat(12, 1fr); }

/* ==========================================
   15. POSITION
   ========================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ==========================================
   16. OVERFLOW
   ========================================== */
.overflow-hidden { overflow: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ==========================================
   17. BORDER
   ========================================== */
.border { border: 1px solid var(--primary-border); }
.border-0 { border: none; }
.border-top { border-top: 1px solid var(--primary-border); }
.border-bottom { border-bottom: 1px solid var(--primary-border); }
.border-left { border-left: 1px solid var(--primary-border); }
.border-right { border-right: 1px solid var(--primary-border); }
.border-dashed {
    border: 2px dashed var(--dark-gray);
    border-radius: 5px;
}

/* ==========================================
   18. BORDER RADIUS
   ========================================== */
.rounded { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ==========================================
   19. SHADOW
   ========================================== */
.shadow { box-shadow: var(--shadow); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ==========================================
   20. BACKGROUND
   ========================================== */
.bg-none { background: none;}
.bg-primary { background-color: var(--primary); }
.bg-danger { background-color: var(--danger); }
.bg-success { background-color: var(--success); }
.bg-white { background-color: var(--white); }
.bg-black { background-color: var(--black); }
.bg-muted { background-color: var(--muted);}
.bg-transparent { background: transparent; }
.bg-dark-gray { background-color: var(--dark-gray); }
.bg-light-gray { background-color: var(--light-gray); }
.bg-red { background-color: var(--red); }
.bg-light-red { background-color: var(--light-red); }
.bg-blue { background-color: var(--blue); }
.bg-light-blue { background-color: var(--light-blue); }

.bg-pink { background-color: var(--pink); }
.bg-light-pink { background-color: var(--light-pink); }
.bg-green { background-color: var(--green); }
.bg-light-green { background-color: var(--light-green); }
.bg-yellow { background-color: var(--yellow); }
.bg-light-yellow { background-color: var(--light-yellow); }
.bg-purple { background-color: var(--purple); }
.bg-light-purple { background-color: var(--light-purple); }
.bg-orange { background-color: var(--orange); }
.bg-light-orange { background-color: var(--light-orange); }



/* ==========================================
   21. TYPOGRAPHY
   ========================================== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Font weight */
.fw-light { font-weight: var(--fw-light); }
.fw-normal { font-weight: var(--fw-normal); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-bold { font-weight: var(--fw-bold); }

/* Font Style */
.fst-italic { font-style: italic; }

/* Font size */
.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-md { font-size: var(--fs-md); }
.fs-lg { font-size: var(--fs-lg); }
.fs-xl { font-size: var(--fs-xl); }
.fs-2xl { font-size: var(--fs-2xl); }

/* Line height */
.lh-1 { line-height: 1; }
.lh-normal { line-height: 1.5; }
.lh-relaxed { line-height: 1.75; }

/* Type */
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }

/* On line */
.text-line-1, .text-line-2, .text-line-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-line-1 { -webkit-line-clamp: 1; line-clamp: 1;}
.text-line-2 { -webkit-line-clamp: 2; line-clamp: 2;}
.text-line-3 { -webkit-line-clamp: 3; line-clamp: 3;}

/* ==========================================
   22. COLOR
   ========================================== */
.text-primary { color: var(--primary); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-muted { color: var(--muted); }
.text-dark { color: var(--dark-gray); }
.text-white { color: var(--white); }

/* ==========================================
   23. MARGIN
   ========================================== */
.m-auto { margin: auto; }
.m-0 { margin: 0; }

.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing); }
.m-4 { margin: var(--spacing-lg); }
.m-5 { margin: var(--spacing-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-inline: auto; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--spacing-xs); }
.ml-2 { margin-left: var(--spacing-sm); }
.ml-3 { margin-left: var(--spacing); }
.ml-4 { margin-left: var(--spacing-lg); }
.ml-5 { margin-left: var(--spacing-xl); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--spacing-xs); }
.mr-2 { margin-right: var(--spacing-sm); }
.mr-3 { margin-right: var(--spacing); }
.mr-4 { margin-right: var(--spacing-lg); }
.mr-5 { margin-right: var(--spacing-xl); }

.mx-0 { margin-inline: 0; }
.mx-1 { margin-inline: var(--spacing-xs); }
.mx-2 { margin-inline: var(--spacing-sm); }
.mx-3 { margin-inline: var(--spacing); }
.mx-4 { margin-inline: var(--spacing-lg); }
.mx-5 { margin-inline: var(--spacing-xl); }

.my-0 { margin-block: 0; }
.my-1 { margin-block: var(--spacing-xs); }
.my-2 { margin-block: var(--spacing-sm); }
.my-3 { margin-block: var(--spacing); }
.my-4 { margin-block: var(--spacing-lg); }
.my-5 { margin-block: var(--spacing-xl); }

/* ==========================================
   24. PADDING
   ========================================== */
.p-0 { padding: 0; }

.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-xs); }
.pt-2 { padding-top: var(--spacing-sm); }
.pt-3 { padding-top: var(--spacing); }
.pt-4 { padding-top: var(--spacing-lg); }
.pt-5 { padding-top: var(--spacing-xl); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-xs); }
.pb-2 { padding-bottom: var(--spacing-sm); }
.pb-3 { padding-bottom: var(--spacing); }
.pb-4 { padding-bottom: var(--spacing-lg); }
.pb-5 { padding-bottom: var(--spacing-xl); }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: var(--spacing-xs); }
.pl-2 { padding-left: var(--spacing-sm); }
.pl-3 { padding-left: var(--spacing); }
.pl-4 { padding-left: var(--spacing-lg); }
.pl-5 { padding-left: var(--spacing-xl); }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: var(--spacing-xs); }
.pr-2 { padding-right: var(--spacing-sm); }
.pr-3 { padding-right: var(--spacing); }
.pr-4 { padding-right: var(--spacing-lg); }
.pr-5 { padding-right: var(--spacing-xl); }

.px-0 { padding-inline: 0; }
.px-1 { padding-inline: var(--spacing-xs); }
.px-2 { padding-inline: var(--spacing-sm); }
.px-3 { padding-inline: var(--spacing); }
.px-4 { padding-inline: var(--spacing-lg); }
.px-5 { padding-inline: var(--spacing-xl); }

.py-0 { padding-block: 0; }
.py-1 { padding-block: var(--spacing-xs); }
.py-2 { padding-block: var(--spacing-sm); }
.py-3 { padding-block: var(--spacing); }
.py-4 { padding-block: var(--spacing-lg); }
.py-5 { padding-block: var(--spacing-xl); }

/* ==========================================
   25. BREAKPOINTS
   ========================================== */
@media (min-width: 640px) {
    /* Container */
    .container { max-width: 600px; }
 
    /* Width / Max-width */
    .sm\:w-auto { width: auto; }
    .sm\:w-fit { width: fit-content; }
    .sm\:w-full { width: 100%; }
    .sm\:w-20 { width: 20%; }
    .sm\:w-25 { width: 25%; }
    .sm\:w-33 { width: 33.3333%; }
    .sm\:w-50 { width: 50%; }
    .sm\:w-66 { width: 66.6666%; }
    .sm\:w-75 { width: 75%; }
    .sm\:w-100 { width: 100%; }
    .sm\:max-w-xs { max-width: 320px; }
    .sm\:max-w-sm { max-width: 480px; }
    .sm\:max-w-md { max-width: 640px; }
    .sm\:max-w-lg { max-width: 800px; }
    .sm\:max-w-xl { max-width: 960px; }
    .sm\:max-w-2xl { max-width: 1200px; }
    .sm\:max-w-full { max-width: 100%; }
 
    /* Display / Flex-direction */
    .sm\:d-none { display: none !important; }
    .sm\:d-block { display: block !important; }
    .sm\:d-flex { display: flex !important; }
    .sm\:d-grid { display: grid !important; }
    .sm\:d-inline-block { display: inline-block !important; }

    /* Flex */
    .sm\:flex-row { flex-direction: row; }
    .sm\:flex-column { flex-direction: column; }
 
    /* Grid columns */
    .sm\:grid-2 { grid-template-columns: repeat(2, 1fr); }
    .sm\:grid-3 { grid-template-columns: repeat(3, 1fr); }
    .sm\:grid-4 { grid-template-columns: repeat(4, 1fr); }
    .sm\:cols-2 { grid-template-columns: repeat(2, 1fr); }
    .sm\:cols-3 { grid-template-columns: repeat(3, 1fr); }
    .sm\:cols-4 { grid-template-columns: repeat(4, 1fr); }

    /* Align items */
    .sm\:align-start { align-items: flex-start; }
    .sm\:align-center { align-items: center; }
    .sm\:align-end { align-items: flex-end; }
    .sm\:align-stretch { align-items: stretch; }

    /* Justify items */
    .sm\:justify-start { justify-content: flex-start; }
    .sm\:justify-center { justify-content: center; }
    .sm\:justify-end { justify-content: flex-end; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:justify-around { justify-content: space-around; }
    .sm\:justify-evenly { justify-content: space-evenly; }

    /* Position */
    .sm\:relative { position: relative; }
    .sm\:absolute { position: absolute; }
    .sm\:fixed { position: fixed; }
    .sm\:sticky { position: sticky; }
    .sm\:static { position: static; }

    /* TYPOGRAPHY */
    .sm\:text-left { text-align: left; }
    .sm\:text-center { text-align: center; }
    .sm\:text-right { text-align: right; }
    .sm\:text-justify { text-align: justify; }
}
 
@media (min-width: 768px) {

    /* Container */
    .container { max-width: 720px; }
 
    /* Width / Max-width */
    .md\:w-auto { width: auto; }
    .md\:w-fit { width: fit-content; }
    .md\:w-full { width: 100%; }
    .md\:w-20 { width: 20%; }
    .md\:w-25 { width: 25%; }
    .md\:w-33 { width: 33.3333%; }
    .md\:w-50 { width: 50%; }
    .md\:w-66 { width: 66.6666%; }
    .md\:w-75 { width: 75%; }
    .md\:w-100 { width: 100%; }
    .md\:max-w-xs { max-width: 320px; }
    .md\:max-w-sm { max-width: 480px; }
    .md\:max-w-md { max-width: 640px; }
    .md\:max-w-lg { max-width: 800px; }
    .md\:max-w-xl { max-width: 960px; }
    .md\:max-w-2xl { max-width: 1200px; }
    .md\:max-w-full { max-width: 100%; }
 
    /* Display / Flex-direction */
    .md\:d-none { display: none !important; }
    .md\:d-block { display: block !important; }
    .md\:d-flex { display: flex !important; }
    .md\:d-grid { display: grid !important; }
    .md\:d-inline-block { display: inline-block !important; }
    .md\:flex-row { flex-direction: row; }
    .md\:flex-column { flex-direction: column; }
    .md\:flex-wrap { flex-wrap: wrap; }
    .md\:flex-nowrap { flex-wrap: nowrap; }
 
    /* Grid columns */
    .md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-4 { grid-template-columns: repeat(4, 1fr); }
    .md\:grid-5 { grid-template-columns: repeat(5, 1fr); }
    .md\:grid-6 { grid-template-columns: repeat(6, 1fr); }
    .md\:cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:cols-4 { grid-template-columns: repeat(4, 1fr); }
    .md\:cols-12 { grid-template-columns: repeat(12, 1fr); }

    /* Align items */
    .md\:align-start { align-items: flex-start; }
    .md\:align-center { align-items: center; }
    .md\:align-end { align-items: flex-end; }
    .md\:align-stretch { align-items: stretch; }

    /* Justify items */
    .md\:justify-start { justify-content: flex-start; }
    .md\:justify-center { justify-content: center; }
    .md\:justify-end { justify-content: flex-end; }
    .md\:justify-between { justify-content: space-between; }
    .md\:justify-around { justify-content: space-around; }
    .md\:justify-evenly { justify-content: space-evenly; }

    /* Position */
    .md\:relative { position: relative; }
    .md\:absolute { position: absolute; }
    .md\:fixed { position: fixed; }
    .md\:sticky { position: sticky; }
    .md\:static { position: static; }

    /* VISIBILITY */
    .md\:hidden { display: none; }
    .md\:visible { visibility: visible; }
    .md\:invisible { visibility: hidden; }

    /* POSITION */
    .md\:.relative { position: relative; }
    .md\:.absolute { position: absolute; }
    .md\:.fixed { position: fixed; }
    .md\:.sticky { position: sticky; }

    /* TYPOGRAPHY */
    .md\:text-left { text-align: left; }
    .md\:text-center { text-align: center; }
    .md\:text-right { text-align: right; }
    .md\:text-justify { text-align: justify; }
}
 
@media (min-width: 1024px) {

    /* Container */
    .container { max-width: 960px; }
 
    /* Width / Max-width */
    .lg\:w-auto { width: auto; }
    .lg\:w-fit { width: fit-content; }
    .lg\:w-full { width: 100%; }
    .lg\:w-20 { width: 20%; }
    .lg\:w-25 { width: 25%; }
    .lg\:w-33 { width: 33.3333%; }
    .lg\:w-50 { width: 50%; }
    .lg\:w-66 { width: 66.6666%; }
    .lg\:w-75 { width: 75%; }
    .lg\:w-100 { width: 100%; }
    .lg\:max-w-xs { max-width: 320px; }
    .lg\:max-w-sm { max-width: 480px; }
    .lg\:max-w-md { max-width: 640px; }
    .lg\:max-w-lg { max-width: 800px; }
    .lg\:max-w-xl { max-width: 960px; }
    .lg\:max-w-2xl { max-width: 1200px; }
    .lg\:max-w-full { max-width: 100%; }
 
    /* Display / Flex-direction */
    .lg\:d-none { display: none !important; }
    .lg\:d-block { display: block !important; }
    .lg\:d-flex { display: flex !important; }
    .lg\:d-grid { display: grid !important; }
    .lg\:d-inline-block { display: inline-block !important; }
    .lg\:flex-row { flex-direction: row; }
    .lg\:flex-column { flex-direction: column; }
 
    /* Grid columns */
    .lg\:grid-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:grid-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:grid-5 { grid-template-columns: repeat(5, 1fr); }
    .lg\:grid-6 { grid-template-columns: repeat(6, 1fr); }
    .lg\:cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:cols-12 { grid-template-columns: repeat(12, 1fr); }

    /* Align items */
    .lg\:align-start { align-items: flex-start; }
    .lg\:align-center { align-items: center; }
    .lg\:align-end { align-items: flex-end; }
    .lg\:align-stretch { align-items: stretch; }

    /* Justify items */
    .lg\:justify-start { justify-content: flex-start; }
    .lg\:justify-center { justify-content: center; }
    .lg\:justify-end { justify-content: flex-end; }
    .lg\:justify-between { justify-content: space-between; }
    .lg\:justify-around { justify-content: space-around; }
    .lg\:justify-evenly { justify-content: space-evenly; }

    /* Position */
    .lg\:relative { position: relative; }
    .lg\:absolute { position: absolute; }
    .lg\:fixed { position: fixed; }
    .lg\:sticky { position: sticky; }
    .lg\:static { position: static; }

    /* TYPOGRAPHY */
    .lg\:text-left { text-align: left; }
    .lg\:text-center { text-align: center; }
    .lg\:text-right { text-align: right; }
    .lg\:text-justify { text-align: justify; }
}
 
@media (min-width: 1280px) {
    /* Container */
    .container { max-width: var(--container-max); }
 
    /* Width / Max-width */
    .xl\:w-auto { width: auto; }
    .xl\:w-fit { width: fit-content; }
    .xl\:w-20 { width: 20%; }
    .xl\:w-25 { width: 25%; }
    .xl\:w-33 { width: 33.3333%; }
    .xl\:w-50 { width: 50%; }
    .xl\:w-66 { width: 66.6666%; }
    .xl\:w-75 { width: 75%; }
    .xl\:w-100 { width: 100%; }
    .xl\:max-w-xs { max-width: 320px; }
    .xl\:max-w-sm { max-width: 480px; }
    .xl\:max-w-md { max-width: 640px; }
    .xl\:max-w-lg { max-width: 800px; }
    .xl\:max-w-xl { max-width: 960px; }
    .xl\:max-w-2xl { max-width: 1200px; }
    .xl\:max-w-full { max-width: 100%; }
 
    /* Display / Flex-direction */
    .xl\:d-none { display: none !important; }
    .xl\:d-block { display: block !important; }
    .xl\:d-flex { display: flex !important; }
    .xl\:d-grid { display: grid !important; }
    .xl\:d-inline-block { display: inline-block !important; }
    .xl\:flex-row { flex-direction: row; }
    .xl\:flex-column { flex-direction: column; }

    /* Flex */
    .xl\:flex-nowrap { flex-wrap: nowrap; }
 
    /* Grid columns */
    .xl\:grid-2 { grid-template-columns: repeat(2, 1fr); }
    .xl\:grid-3 { grid-template-columns: repeat(3, 1fr); }
    .xl\:grid-4 { grid-template-columns: repeat(4, 1fr); }
    .xl\:grid-5 { grid-template-columns: repeat(5, 1fr); }
    .xl\:grid-6 { grid-template-columns: repeat(6, 1fr); }
    .xl\:cols-2 { grid-template-columns: repeat(2, 1fr); }
    .xl\:cols-3 { grid-template-columns: repeat(3, 1fr); }
    .xl\:cols-4 { grid-template-columns: repeat(4, 1fr); }
    .xl\:cols-12 { grid-template-columns: repeat(12, 1fr); }

    /* Align items */
    .xl\:align-start { align-items: flex-start; }
    .xl\:align-center { align-items: center; }
    .xl\:align-end { align-items: flex-end; }
    .xl\:align-stretch { align-items: stretch; }

    /* Justify items */
    .xl\:justify-start { justify-content: flex-start; }
    .xl\:justify-center { justify-content: center; }
    .xl\:justify-end { justify-content: flex-end; }
    .xl\:justify-between { justify-content: space-between; }
    .xl\:justify-around { justify-content: space-around; }
    .xl\:justify-evenly { justify-content: space-evenly; }

    /* Position */
    .xl\:relative { position: relative; }
    .xl\:absolute { position: absolute; }
    .xl\:fixed { position: fixed; }
    .xl\:sticky { position: sticky; }
    .xl\:static { position: static; }

    /* TYPOGRAPHY */
    .xl\:text-left { text-align: left; }
    .xl\:text-center { text-align: center; }
    .xl\:text-right { text-align: right; }
    .xl\:text-justify { text-align: justify; }
}

/* ICON */
@font-face {
    font-family: 'webhub_icon';
    src: url('/css/fonts/webhub_icon.woff2') format('woff2'),
         url('/css/fonts/webhub_icon.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'webhub_icon' !important;
  /* speak: never; */
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-boxes:before {
  content: "\e959";
}
.icon-hash:before {
  content: "\e957";
}
.icon-code:before {
  content: "\e958";
}
.icon-shopping-cart-plus:before {
  content: "\e956";
}
.icon-package-x:before {
  content: "\e954";
}
.icon-package-check:before {
  content: "\e955";
}
.icon-warehouse:before {
  content: "\e953";
}
.icon-archive:before {
  content: "\e900";
}
.icon-arrow-up-down:before {
  content: "\e901";
}
.icon-award:before {
  content: "\e902";
}
.icon-ban:before {
  content: "\e903";
}
.icon-barcode:before {
  content: "\e904";
}
.icon-calendar:before {
  content: "\e905";
}
.icon-shopping-cart:before {
  content: "\e906";
}
.icon-chevron-down:before {
  content: "\e907";
}
.icon-chevron-left:before {
  content: "\e908";
}
.icon-chevron-right:before {
  content: "\e909";
}
.icon-chevron-up:before {
  content: "\e90a";
}
.icon-circle:before {
  content: "\e90b";
}
.icon-circle-check:before {
  content: "\e90c";
}
.icon-circle-minus:before {
  content: "\e90d";
}
.icon-circle-plus:before {
  content: "\e90e";
}
.icon-contact:before {
  content: "\e90f";
}
.icon-corner-down-right:before {
  content: "\e910";
}
.icon-dashboard:before {
  content: "\e911";
}
.icon-dashed-text:before {
  content: "\e912";
}
.icon-dollar:before {
  content: "\e913";
}
.icon-download:before {
  content: "\e914";
}
.icon-edit:before {
  content: "\e915";
}
.icon-ellipsis:before {
  content: "\e916";
}
.icon-ellipsis-vertical:before {
  content: "\e917";
}
.icon-external-link:before {
  content: "\e918";
}
.icon-eye:before {
  content: "\e919";
}
.icon-eye-closed:before {
  content: "\e91a";
}
.icon-eye-off:before {
  content: "\e91b";
}
.icon-file-text:before {
  content: "\e91c";
}
.icon-film:before {
  content: "\e91d";
}
.icon-flag:before {
  content: "\e91e";
}
.icon-folder:before {
  content: "\e91f";
}
.icon-funnel:before {
  content: "\e920";
}
.icon-gallery:before {
  content: "\e921";
}
.icon-globe:before {
  content: "\e922";
}
.icon-grid:before {
  content: "\e923";
}
.icon-heading-1:before {
  content: "\e924";
}
.icon-heading-2:before {
  content: "\e925";
}
.icon-heading-3:before {
  content: "\e926";
}
.icon-home:before {
  content: "\e927";
}
.icon-image:before {
  content: "\e928";
}
.icon-key:before {
  content: "\e929";
}
.icon-link:before {
  content: "\e92a";
}
.icon-list:before {
  content: "\e92b";
}
.icon-list-todo:before {
  content: "\e92c";
}
.icon-login:before {
  content: "\e92d";
}
.icon-logout:before {
  content: "\e92e";
}
.icon-mail:before {
  content: "\e92f";
}
.icon-map-pin:before {
  content: "\e930";
}
.icon-megaphone:before {
  content: "\e931";
}
.icon-menu:before {
  content: "\e932";
}
.icon-message:before {
  content: "\e933";
}
.icon-message-square:before {
  content: "\e934";
}
.icon-minus:before {
  content: "\e935";
}
.icon-mouse-pointer-click:before {
  content: "\e936";
}
.icon-move-left:before {
  content: "\e937";
}
.icon-move-right:before {
  content: "\e938";
}
.icon-newspaper:before {
  content: "\e939";
}
.icon-note:before {
  content: "\e93a";
}
.icon-notepad:before {
  content: "\e93b";
}
.icon-package:before {
  content: "\e93c";
}
.icon-phone:before {
  content: "\e93d";
}
.icon-pin:before {
  content: "\e93e";
}
.icon-plus:before {
  content: "\e93f";
}
.icon-printer:before {
  content: "\e940";
}
.icon-quote:before {
  content: "\e941";
}
.icon-receipt:before {
  content: "\e942";
}
.icon-refresh:before {
  content: "\e943";
}
.icon-save:before {
  content: "\e944";
}
.icon-search:before {
  content: "\e945";
}
.icon-share:before {
  content: "\e946";
}
.icon-sheet:before {
  content: "\e947";
}
.icon-star:before {
  content: "\e948";
}
.icon-store:before {
  content: "\e949";
}
.icon-table-of-contents:before {
  content: "\e94a";
}
.icon-tags:before {
  content: "\e94b";
}
.icon-timeline:before {
  content: "\e94c";
}
.icon-trash:before {
  content: "\e94d";
}
.icon-truck:before {
  content: "\e94e";
}
.icon-undo:before {
  content: "\e94f";
}
.icon-upload:before {
  content: "\e950";
}
.icon-user-round-pen:before {
  content: "\e951";
}
.icon-x:before {
  content: "\e952";
}