/* =================================================
   MINI ERP UI FRAMEWORK
   prefix: erp-
   ================================================= */
/* =========================================
   ERP GRID SYSTEM FULL (Bootstrap 5 style)
   ========================================= */

/* ===== CONTAINER ===== */

.erp-container{
    width:100%;
    margin:auto;
    padding-left:1rem;
    padding-right:1rem;
}

/* @media (min-width:576px){ .erp-container{max-width:540px;} }
@media (min-width:768px){ .erp-container{max-width:720px;} }
@media (min-width:992px){ .erp-container{max-width:960px;} } */
/* @media (min-width:1200px){ .erp-container{max-width:1140px;} } */
/* @media (min-width:1400px){ .erp-container{max-width:1320px;} } */

/* ===== ROW ===== */

.erp-row{
    display:flex;
    flex-wrap:wrap;
    margin-left:-0.5rem;
    margin-right:-0.5rem;
}

/* ===== COL BASE ===== */

.erp-row > [class*="erp-col"]{
    padding-left:0.5rem;
    padding-right:0.5rem;
    box-sizing:border-box;
}

.erp-col{
    flex:1 0 0%;
}

/* ===== FUNCTION GEN COL ===== */

.erp-col-1{flex:0 0 8.333%;max-width:8.333%}
.erp-col-2{flex:0 0 16.666%;max-width:16.666%}
.erp-col-3{flex:0 0 25%;max-width:25%}
.erp-col-4{flex:0 0 33.333%;max-width:33.333%}
.erp-col-5{flex:0 0 41.666%;max-width:41.666%}
.erp-col-6{flex:0 0 50%;max-width:50%}
.erp-col-7{flex:0 0 58.333%;max-width:58.333%}
.erp-col-8{flex:0 0 66.666%;max-width:66.666%}
.erp-col-9{flex:0 0 75%;max-width:75%}
.erp-col-10{flex:0 0 83.333%;max-width:83.333%}
.erp-col-11{flex:0 0 91.666%;max-width:91.666%}
.erp-col-12{flex:0 0 100%;max-width:100%}

/* ===== BREAKPOINTS ===== */

/* SM */
@media (min-width:576px){
    
    .erp-col-sm-1{flex:0 0 8.333%;max-width:8.333%}
    .erp-col-sm-2{flex:0 0 16.666%;max-width:16.666%}
    .erp-col-sm-3{flex:0 0 25%;max-width:25%}
    .erp-col-sm-4{flex:0 0 33.333%;max-width:33.333%}
    .erp-col-sm-5{flex:0 0 41.666%;max-width:41.666%}
    .erp-col-sm-6{flex:0 0 50%;max-width:50%}
    .erp-col-sm-7{flex:0 0 58.333%;max-width:58.333%}
    .erp-col-sm-8{flex:0 0 66.666%;max-width:66.666%}
    .erp-col-sm-9{flex:0 0 75%;max-width:75%}
    .erp-col-sm-10{flex:0 0 83.333%;max-width:83.333%}
    .erp-col-sm-11{flex:0 0 91.666%;max-width:91.666%}
    .erp-col-sm-12{flex:0 0 100%;max-width:100%}

}

/* MD */
@media (min-width:768px){

    .erp-col-md-1{flex:0 0 8.333%;max-width:8.333%}
    .erp-col-md-2{flex:0 0 16.666%;max-width:16.666%}
    .erp-col-md-3{flex:0 0 25%;max-width:25%}
    .erp-col-md-4{flex:0 0 33.333%;max-width:33.333%}
    .erp-col-md-5{flex:0 0 41.666%;max-width:41.666%}
    .erp-col-md-6{flex:0 0 50%;max-width:50%}
    .erp-col-md-7{flex:0 0 58.333%;max-width:58.333%}
    .erp-col-md-8{flex:0 0 66.666%;max-width:66.666%}
    .erp-col-md-9{flex:0 0 75%;max-width:75%}
    .erp-col-md-10{flex:0 0 83.333%;max-width:83.333%}
    .erp-col-md-11{flex:0 0 91.666%;max-width:91.666%}
    .erp-col-md-12{flex:0 0 100%;max-width:100%}

}

/* LG */
@media (min-width:992px){

    .erp-col-lg-1{flex:0 0 8.333%;max-width:8.333%}
    .erp-col-lg-2{flex:0 0 16.666%;max-width:16.666%}
    .erp-col-lg-3{flex:0 0 25%;max-width:25%}
    .erp-col-lg-4{flex:0 0 33.333%;max-width:33.333%}
    .erp-col-lg-5{flex:0 0 41.666%;max-width:41.666%}
    .erp-col-lg-6{flex:0 0 50%;max-width:50%}
    .erp-col-lg-7{flex:0 0 58.333%;max-width:58.333%}
    .erp-col-lg-8{flex:0 0 66.666%;max-width:66.666%}
    .erp-col-lg-9{flex:0 0 75%;max-width:75%}
    .erp-col-lg-10{flex:0 0 83.333%;max-width:83.333%}
    .erp-col-lg-11{flex:0 0 91.666%;max-width:91.666%}
    .erp-col-lg-12{flex:0 0 100%;max-width:100%}
}

/* XL */
@media (min-width:1200px){

.erp-col-xl-1{flex:0 0 8.333%;max-width:8.333%}
.erp-col-xl-2{flex:0 0 16.666%;max-width:16.666%}
.erp-col-xl-3{flex:0 0 25%;max-width:25%}
.erp-col-xl-4{flex:0 0 33.333%;max-width:33.333%}
.erp-col-xl-5{flex:0 0 41.666%;max-width:41.666%}
.erp-col-xl-6{flex:0 0 50%;max-width:50%}
.erp-col-xl-7{flex:0 0 58.333%;max-width:58.333%}
.erp-col-xl-8{flex:0 0 66.666%;max-width:66.666%}
.erp-col-xl-9{flex:0 0 75%;max-width:75%}
.erp-col-xl-10{flex:0 0 83.333%;max-width:83.333%}
.erp-col-xl-11{flex:0 0 91.666%;max-width:91.666%}
.erp-col-xl-12{flex:0 0 100%;max-width:100%}

}

/* XXL */
@media (min-width:1400px){

.erp-col-xxl-1{flex:0 0 8.333%;max-width:8.333%}
.erp-col-xxl-2{flex:0 0 16.666%;max-width:16.666%}
.erp-col-xxl-3{flex:0 0 25%;max-width:25%}
.erp-col-xxl-4{flex:0 0 33.333%;max-width:33.333%}
.erp-col-xxl-5{flex:0 0 41.666%;max-width:41.666%}
.erp-col-xxl-6{flex:0 0 50%;max-width:50%}
.erp-col-xxl-7{flex:0 0 58.333%;max-width:58.333%}
.erp-col-xxl-8{flex:0 0 66.666%;max-width:66.666%}
.erp-col-xxl-9{flex:0 0 75%;max-width:75%}
.erp-col-xxl-10{flex:0 0 83.333%;max-width:83.333%}
.erp-col-xxl-11{flex:0 0 91.666%;max-width:91.666%}
.erp-col-xxl-12{flex:0 0 100%;max-width:100%}

}

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

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

.erp-flex-between{
    display:flex;
    justify-content:space-between;
}

.erp-flex-column{
    display:flex;
    flex-direction:column;
}

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

.erp-mt-0{margin-top:0}
.erp-mt-1{margin-top:0.5rem}
.erp-mt-2{margin-top:1rem}
.erp-mt-3{margin-top:1.25rem}
.erp-mt-4{margin-top:1.5rem}
.erp-mt-5{margin-top:2rem}

.erp-ml-0{margin-left:0}
.erp-ml-1{margin-left:0.5rem}
.erp-ml-2{margin-left:1rem}
.erp-ml-3{margin-left:1.5rem}
.erp-ml-4{margin-left:2rem}

.erp-mb-1{margin-bottom:0.5rem}
.erp-mb-2{margin-bottom:1rem}
.erp-mb-3{margin-bottom:1.5rem}

.erp-mr-1{margin-right:0.5rem}
.erp-mr-2{margin-right:1rem}

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

.erp-p-1{padding:0.5rem}
.erp-p-2{padding:1rem}
.erp-p-3{padding:1.5rem}

.erp-px-1{
    padding-left:0.5rem;
    padding-right:0.5rem;
}

.erp-px-2{
    padding-left:1rem;
    padding-right:1rem;
}

.erp-py-1{
    padding-top:0.5rem;
    padding-bottom:0.5rem;
}

.erp-py-2{
    padding-top:1rem;
    padding-bottom:1rem;
}

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

.erp-w-100{width:100%}
.erp-w-75{width:75%}
.erp-w-50{width:50%}
.erp-w-25{width:25%}

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

.erp-text-left{text-align:left}
.erp-text-center{text-align:center}
.erp-text-right{text-align:right}

.erp-text-bold{font-weight:bold}
.erp-text-small{font-size:0.85rem}
.erp-text-large{font-size:1.2rem}

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

.erp-bg-white{background:#fff}
.erp-bg-light{background:#f5f6fa}
.erp-bg-gray{background:#e9ecef}

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

.erp-border{
    border:1px solid #ddd;
}

.erp-border-bottom{
    border-bottom:1px solid #ddd;
}

.erp-radius{
    border-radius:6px;
}

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

.erp-shadow{
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

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

.erp-gap-1{gap:0.5rem}
.erp-gap-2{gap:1rem}
.erp-gap-3{gap:1.5rem}

.erp-fs-075 {
   font-size: calc(var(--erp-fs)* .75) ;
}

.erp-fs-09 {
   font-size: calc(var(--erp-fs)* .9) ;
}

.erp-fs-1 {
   font-size: calc(var(--erp-fs)* 1) ;
}

.erp-fs-2 {
   font-size: calc(var(--erp-fs)* 1.25) ;
}

.erp-fs-3 {
   font-size: calc(var(--erp-fs)* 1.5) ;
}

.erp-fs-4 {
   font-size: calc(var(--erp-fs)* 1.75) ;
}

.erp-fs-5 {
   font-size: calc(var(--erp-fs)* 2.0) ;
}