/*
======================================================================
 EcoDrop Kiosk OS V2
 ---------------------------------------------------------------------
 File        : /kiosk/ui/utilities.css
 Module      : Utility Classes
 Version     : 2.0.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;
}

.items-start{
    align-items:flex-start !important;
}

.items-center{
    align-items:center !important;
}

.items-end{
    align-items:flex-end !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;
}

.flex-1{
    flex:1 !important;
}

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

.w-100{
    width:100% !important;
}

.h-100{
    height:100% !important;
}

.vw-100{
    width:100vw !important;
}

.vh-100{
    height:100vh !important;
}

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

.text-left{
    text-align:left !important;
}

.text-center{
    text-align:center !important;
}

.text-right{
    text-align:right !important;
}

.text-uppercase{
    text-transform:uppercase !important;
}

.text-lowercase{
    text-transform:lowercase !important;
}

.text-capitalize{
    text-transform:capitalize !important;
}

.text-nowrap{
    white-space:nowrap !important;
}

/* ==========================================================
   FONT
========================================================== */

.fw-300{
    font-weight:300 !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;
}

/* ==========================================================
   MARGIN
========================================================== */

.m-0{
    margin:0 !important;
}

.mt-auto{
    margin-top:auto !important;
}

.mb-auto{
    margin-bottom:auto !important;
}

.ms-auto{
    margin-left:auto !important;
}

.me-auto{
    margin-right:auto !important;
}

/* ==========================================================
   PADDING
========================================================== */

.p-0{
    padding:0 !important;
}

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

.rounded{
    border-radius:var(--eco-radius-md) !important;
}

.rounded-lg{
    border-radius:var(--eco-radius-lg) !important;
}

.rounded-xl{
    border-radius:var(--eco-radius-xl) !important;
}

.rounded-full{
    border-radius:9999px !important;
}

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

.shadow-sm{
    box-shadow:var(--eco-shadow-sm) !important;
}

.shadow{
    box-shadow:var(--eco-shadow-md) !important;
}

.shadow-lg{
    box-shadow:var(--eco-shadow-lg) !important;
}

/* ==========================================================
   GLASS
========================================================== */

.glass{
    background:var(--eco-glass-bg) !important;
    backdrop-filter:blur(var(--eco-glass-blur));
    -webkit-backdrop-filter:blur(var(--eco-glass-blur));
    border:1px solid var(--eco-glass-border);
}

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

.relative{
    position:relative !important;
}

.absolute{
    position:absolute !important;
}

.fixed{
    position:fixed !important;
}

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

.hidden{
    visibility:hidden !important;
}

.visible{
    visibility:visible !important;
}

/* ==========================================================
   OPACITY
========================================================== */

.opacity-0{
    opacity:0 !important;
}

.opacity-50{
    opacity:.5 !important;
}

.opacity-100{
    opacity:1 !important;
}

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

.pointer{
    cursor:pointer !important;
}

.no-pointer{
    pointer-events:none !important;
}

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

.overflow-hidden{
    overflow:hidden !important;
}

.overflow-auto{
    overflow:auto !important;
}

/* ==========================================================
   ANIMATION
========================================================== */

.fade-in{

    animation:ecoFadeIn .35s ease forwards;

}

.fade-out{

    animation:ecoFadeOut .35s ease forwards;

}

.scale-in{

    animation:ecoScaleIn .35s ease forwards;

}

.slide-up{

    animation:ecoSlideUp .35s ease forwards;

}

/* ==========================================================
   Z INDEX
========================================================== */

.z-1{
    z-index:1;
}

.z-10{
    z-index:10;
}

.z-100{
    z-index:100;
}

.z-1000{
    z-index:1000;
}