/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================================================
   HTML / BODY
========================================================= */

html,
body{
    width:100%;
    height:100%;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f3f5f7;
    color:#222;
    overflow:hidden;
}

/* =========================================================
   PAGE
========================================================= */

.page{
    width:100%;
    min-height:100vh;
}

/* =========================================================
   MAIN ADMIN CONTAINER
========================================================= */

.container{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100vh;
}

/* =========================================================
   CONTENT AREA
========================================================= */

.content{
    flex:1;
    overflow:auto;
    padding:20px;
    display:none;
    background:#fff;
}

.content.active{
    display:block;
}

/* =========================================================
   GENERIC MODULE WRAPPER
========================================================= */

.module{
    width:100%;
    max-width:1600px;
    margin:auto;
}

/* =========================================================
   SECTIONS
========================================================= */

.section{
    margin-bottom:25px;
}

.section:last-child{
    margin-bottom:0;
}

/* =========================================================
   CARDS
========================================================= */

.card{
    background:#fff;
    border-radius:8px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

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

.flex{
    display:flex;
}

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

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

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

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

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

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

.gap5{
    gap:5px;
}

.gap10{
    gap:10px;
}

.gap15{
    gap:15px;
}

.gap20{
    gap:20px;
}

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

.w25{
    width:25%;
}

.w33{
    width:33.333%;
}

.w50{
    width:50%;
}

.w75{
    width:75%;
}

.w100{
    width:100%;
}

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

.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}

.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}

.ml10{margin-left:10px;}
.mr10{margin-right:10px;}

.p5{padding:5px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p20{padding:20px;}

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

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

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

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

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

.hidden{
    display:none !important;
}

.visible{
    display:block !important;
}

/* =========================================================
   LOADING
========================================================= */

.loading{
    text-align:center;
    padding:40px;
    font-size:18px;
    color:#666;
}

/* =========================================================
   CLEARFIX
========================================================= */

.clear{
    clear:both;
}