/* =====================================================
   SPI UI Framework
   Utility Classes
   Version : 1.0.1
===================================================== */


/* =====================================================
   DISPLAY
===================================================== */

.spi-flex{
    display:flex;
}

.spi-inline-flex{
    display:inline-flex;
}

.spi-block{
    display:block;
}

.spi-inline{
    display:inline-block;
}

.spi-hidden{
    display:none !important;
}


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

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

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

.spi-flex-column{
    flex-direction:column;
}

.spi-flex-row{
    flex-direction:row;
}

.spi-flex-1{
    flex:1 1 0;
}


/* =====================================================
   ALIGNMENT
===================================================== */

.spi-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.spi-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.spi-align-start{
    align-items:flex-start;
}

.spi-align-center{
    align-items:center;
}

.spi-align-end{
    align-items:flex-end;
}

.spi-align-stretch{
    align-items:stretch;
}

.spi-justify-start{
    justify-content:flex-start;
}

.spi-justify-center{
    justify-content:center;
}

.spi-justify-end{
    justify-content:flex-end;
}

.spi-justify-between{
    justify-content:space-between;
}

.spi-justify-around{
    justify-content:space-around;
}

.spi-justify-evenly{
    justify-content:space-evenly;
}


/* =====================================================
   WIDTH & HEIGHT
===================================================== */

.spi-w-100,
.spi-w-full{
    width:100%;
}

.spi-h-100,
.spi-h-full{
    height:100%;
}


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

.spi-text-center{
    text-align:center;
}

.spi-text-left{
    text-align:left;
}

.spi-text-right{
    text-align:right;
}


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

.spi-mt-0{
    margin-top:0;
}

.spi-mt-1{
    margin-top:4px;
}

.spi-mt-2{
    margin-top:8px;
}

.spi-mt-3{
    margin-top:12px;
}

.spi-mt-4{
    margin-top:16px;
}

.spi-mt-5{
    margin-top:20px;
}

.spi-mt-6{
    margin-top:24px;
}

.spi-mt-7{
    margin-top:32px;
}


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

.spi-mb-0{
    margin-bottom:0;
}

.spi-mb-1{
    margin-bottom:4px;
}

.spi-mb-2{
    margin-bottom:8px;
}

.spi-mb-3{
    margin-bottom:12px;
}

.spi-mb-4{
    margin-bottom:16px;
}

.spi-mb-5{
    margin-bottom:20px;
}

.spi-mb-6{
    margin-bottom:24px;
}

.spi-mb-7{
    margin-bottom:32px;
}


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

.spi-p-0{
    padding:0;
}

.spi-p-1{
    padding:4px;
}

.spi-p-2{
    padding:8px;
}

.spi-p-3{
    padding:12px;
}

.spi-p-4{
    padding:16px;
}

.spi-p-5{
    padding:20px;
}

.spi-p-6{
    padding:24px;
}

.spi-p-7{
    padding:32px;
}


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

.spi-gap-0{
    gap:0;
}

.spi-gap-1{
    gap:4px;
}

.spi-gap-2{
    gap:8px;
}

.spi-gap-3{
    gap:12px;
}

.spi-gap-4{
    gap:16px;
}

.spi-gap-5{
    gap:20px;
}

.spi-gap-6{
    gap:24px;
}

.spi-gap-7{
    gap:32px;
}


/* =====================================================
   RESPONSIVE UTILITIES
===================================================== */

@media(max-width:768px){

    .spi-mobile-column{
        flex-direction:column;
        align-items:stretch;
    }

    .spi-mobile-w-100{
        width:100%;
    }

}