/* ==========================================================================
   Fluxoweby
   Utilities
   Version: 1.0
   ========================================================================== */

/* ==========================================================================
   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;

}

/* ==========================================================================
   FLEX
   ========================================================================== */

.flex-row{

    flex-direction:row !important;

}

.flex-column{

    flex-direction:column !important;

}

.flex-wrap{

    flex-wrap:wrap !important;

}

.justify-start{

    justify-content:flex-start !important;

}

.justify-center{

    justify-content:center !important;

}

.justify-between{

    justify-content:space-between !important;

}

.justify-end{

    justify-content:flex-end !important;

}

.items-start{

    align-items:flex-start !important;

}

.items-center{

    align-items:center !important;

}

.items-end{

    align-items:flex-end !important;

}

/* ==========================================================================
   TEXT
   ========================================================================== */

.text-left{

    text-align:left !important;

}

.text-center{

    text-align:center !important;

}

.text-right{

    text-align:right !important;

}

.text-primary{

    color:var(--color-primary) !important;

}

.text-muted{

    color:var(--color-text-muted) !important;

}

.text-white{

    color:#ffffff !important;

}

.text-uppercase{

    text-transform:uppercase !important;

}

.text-lowercase{

    text-transform:lowercase !important;

}

.text-capitalize{

    text-transform:capitalize !important;

}

.fw-400{

    font-weight:400 !important;

}

.fw-500{

    font-weight:500 !important;

}

.fw-600{

    font-weight:600 !important;

}

.fw-700{

    font-weight:700 !important;

}

.fw-800{

    font-weight:800 !important;

}

/* ==========================================================================
   WIDTH
   ========================================================================== */

.w-100{

    width:100% !important;

}

.h-100{

    height:100% !important;

}

/* ==========================================================================
   SPACING
   ========================================================================== */

.mt-0{margin-top:0 !important;}
.mt-2{margin-top:var(--space-2) !important;}
.mt-4{margin-top:var(--space-4) !important;}
.mt-6{margin-top:var(--space-6) !important;}
.mt-8{margin-top:var(--space-8) !important;}
.mt-10{margin-top:var(--space-10) !important;}
.mt-12{margin-top:var(--space-12) !important;}
.mt-16{margin-top:var(--space-16) !important;}

.mb-0{margin-bottom:0 !important;}
.mb-2{margin-bottom:var(--space-2) !important;}
.mb-4{margin-bottom:var(--space-4) !important;}
.mb-6{margin-bottom:var(--space-6) !important;}
.mb-8{margin-bottom:var(--space-8) !important;}
.mb-10{margin-bottom:var(--space-10) !important;}
.mb-12{margin-bottom:var(--space-12) !important;}
.mb-16{margin-bottom:var(--space-16) !important;}

.pt-0{padding-top:0 !important;}
.pt-2{padding-top:var(--space-2) !important;}
.pt-4{padding-top:var(--space-4) !important;}
.pt-6{padding-top:var(--space-6) !important;}
.pt-8{padding-top:var(--space-8) !important;}
.pt-10{padding-top:var(--space-10) !important;}

.pb-0{padding-bottom:0 !important;}
.pb-2{padding-bottom:var(--space-2) !important;}
.pb-4{padding-bottom:var(--space-4) !important;}
.pb-6{padding-bottom:var(--space-6) !important;}
.pb-8{padding-bottom:var(--space-8) !important;}
.pb-10{padding-bottom:var(--space-10) !important;}

/* ==========================================================================
   GAP
   ========================================================================== */

.gap-0{gap:0 !important;}
.gap-2{gap:var(--space-2) !important;}
.gap-4{gap:var(--space-4) !important;}
.gap-6{gap:var(--space-6) !important;}
.gap-8{gap:var(--space-8) !important;}
.gap-10{gap:var(--space-10) !important;}
.gap-12{gap:var(--space-12) !important;}
.gap-16{gap:var(--space-16) !important;}

/* ==========================================================================
   BORDER RADIUS
   ========================================================================== */

.rounded-sm{

    border-radius:var(--radius-sm) !important;

}

.rounded{

    border-radius:var(--radius-md) !important;

}

.rounded-lg{

    border-radius:var(--radius-lg) !important;

}

.rounded-xl{

    border-radius:var(--radius-xl) !important;

}

.rounded-full{

    border-radius:9999px !important;

}

/* ==========================================================================
   SHADOW
   ========================================================================== */

.shadow-sm{

    box-shadow:var(--shadow-sm) !important;

}

.shadow{

    box-shadow:var(--shadow-md) !important;

}

.shadow-lg{

    box-shadow:var(--shadow-lg) !important;

}

.shadow-xl{

    box-shadow:var(--shadow-xl) !important;

}

/* ==========================================================================
   BACKGROUND
   ========================================================================== */

.bg-primary{

    background:var(--color-primary) !important;

}

.bg-surface{

    background:var(--color-surface) !important;

}

.bg-background{

    background:var(--color-background) !important;

}

/* ==========================================================================
   VISIBILITY
   ========================================================================== */

.hidden{

    display:none !important;

}

.invisible{

    visibility:hidden !important;

}

.visible{

    visibility:visible !important;

}

/* ==========================================================================
   SCREEN READER
   ========================================================================== */

.sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

/* ==========================================================================
   OVERFLOW
   ========================================================================== */

.overflow-hidden{

    overflow:hidden !important;

}

.overflow-auto{

    overflow:auto !important;

}

/* ==========================================================================
   POSITION
   ========================================================================== */

.position-relative{

    position:relative !important;

}

.position-absolute{

    position:absolute !important;

}

.position-fixed{

    position:fixed !important;

}

/* ==========================================================================
   CURSOR
   ========================================================================== */

.cursor-pointer{

    cursor:pointer !important;

}

.cursor-default{

    cursor:default !important;

}

/* ==========================================================================
   TRANSITIONS
   ========================================================================== */

.transition{

    transition:all var(--transition);

}