/*
 * Monoflux CSS Framework v1
 * Lightweight Utility CSS
 * Created By Rendi Marzikri
 * https://monoflux.vercel.app/
 * https://monofluxcdn.github.io/
 * https://rendimarzikri.qzz.io/
 */

.body{font-family:Inter,Arial,sans-serif;background:#f5f7fb;color:#222;line-height:1.6}
.dark{background:#111;color:#eee}

/* Container */
.container{width:min(1100px,95%);margin:auto}
.full{width:100%}

/* Display */
.flex{display:flex}
.grid{display:grid}
.block{display:block}
.inline{display:inline-block}
.none{display:none}

/* Flex */
.row{flex-direction:row}
.column{flex-direction:column}
.wrap{flex-wrap:wrap}
.center{justify-content:center;align-items:center}
.between{justify-content:space-between}
.around{justify-content:space-around}
.evenly{justify-content:space-evenly}
.start{justify-content:flex-start}
.end{justify-content:flex-end}

/* Grid */
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.gap1{gap:8px}
.gap2{gap:16px}
.gap3{gap:24px}

/* Card */
.card{
background:#fff;
padding:16px;
border-radius:12px;
border:1px solid #ddd;
}
.card-dark{
background:#1d1d1d;
color:#fff;
}

/* Navbar */
.bar{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 20px;
background:#fff;
border-bottom:1px solid #ddd;
}

/* Button */
.btn{
padding:10px 18px;
border:none;
border-radius:10px;
cursor:pointer;
transition:.2s;
font-weight:600;
}
.btn:hover{
transform:translateY(-2px);
}
.primary{background:#2563eb;color:#fff}
.success{background:#16a34a;color:#fff}
.warning{background:#f59e0b;color:#fff}
.danger{background:#dc2626;color:#fff}
.dark-btn{background:#222;color:#fff}
.light-btn{background:#eee;color:#222}

/* Input */
.input{
width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:10px;
outline:none;
}
.input:focus{
border-color:#2563eb;
}

/* Alert */
.alert{
padding:14px;
border-radius:10px;
}
.alert-primary{background:#dbeafe}
.alert-success{background:#dcfce7}
.alert-warning{background:#fef3c7}
.alert-danger{background:#fee2e2}

/* Badge */
.badge{
display:inline-block;
padding:4px 10px;
border-radius:999px;
background:#2563eb;
color:#fff;
font-size:12px;
}

/* Background */
.bg-white{background:#fff}
.bg-black{background:#000;color:#fff}
.bg-primary{background:#2563eb;color:#fff}
.bg-success{background:#16a34a;color:#fff}
.bg-warning{background:#f59e0b}
.bg-danger{background:#dc2626;color:#fff}
.bg-gray{background:#eee}

/* Text */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.white{color:#fff}
.black{color:#000}
.primary-text{color:#2563eb}
.success-text{color:#16a34a}
.warning-text{color:#f59e0b}
.danger-text{color:#dc2626}
.bold{font-weight:bold}
.light{font-weight:300}
.small{font-size:14px}
.large{font-size:22px}
.title{font-size:32px;font-weight:bold}

/* Shadow */
.shadow{
box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.shadow-lg{
box-shadow:0 10px 25px rgba(0,0,0,.25);
}

/* Radius */
.r1{border-radius:6px}
.r2{border-radius:12px}
.r3{border-radius:20px}
.circle{border-radius:999px}

/* Margin */
.m0{margin:0}
.m1{margin:8px}
.m2{margin:16px}
.m3{margin:24px}
.mt1{margin-top:8px}
.mt2{margin-top:16px}
.mb1{margin-bottom:8px}
.mb2{margin-bottom:16px}

/* Padding */
.p0{padding:0}
.p1{padding:8px}
.p2{padding:16px}
.p3{padding:24px}
.pt1{padding-top:8px}
.pt2{padding-top:16px}

/* Width */
.w25{width:25%}
.w50{width:50%}
.w75{width:75%}
.w100{width:100%}

/* Height */
.h100{height:100%}
.vh100{height:100vh}

/* Border */
.border{border:1px solid #ddd}
.border-primary{border:1px solid #2563eb}
.border-danger{border:1px solid #dc2626}

/* Cursor */
.pointer{cursor:pointer}

/* Overflow */
.scroll{overflow:auto}
.hidden{overflow:hidden}

/* Position */
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.sticky{position:sticky;top:0}

/* Opacity */
.o0{opacity:0}
.o50{opacity:.5}
.o100{opacity:1}

/* Animation */
.fade{animation:mfFade .3s}
.zoom{animation:mfZoom .3s}
.float{animation:mfFloat 2s infinite}
.spin{animation:mfSpin 1s linear infinite}
@keyframes mfFade{
from{opacity:0}
to{opacity:1}
}
@keyframes mfZoom{
from{transform:scale(.9);opacity:0}
to{transform:scale(1);opacity:1}
}
@keyframes mfFloat{
50%{transform:translateY(-8px)}
}
@keyframes mfSpin{
to{transform:rotate(360deg)}
}

/* Responsive */
.mobile{display:none}
@media(max-width:768px){
.g2,.g3,.g4,.g5{
grid-template-columns:1fr;
}
.row{
flex-direction:column;
}
.mobile{
display:block;
}
.desktop{
display:none;
}
}