*, ::after, ::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

/* MARGIN */
.m5 {margin: 5px;}.m10{margin: 10px;}.m15{margin: 15px;}.m20{margin: 20px;}.m25{margin: 25px;}.m30{margin: 30px;}.m35{margin: 35px;}.m40{margin: 40px;}
.mt5 {margin-top: 5px;}.mt10{margin-top: 10px;}.mt15{margin-top: 15px;}.mt20{margin-top: 20px;}.mt25{margin-top: 25px;}.mt30{margin-top: 30px;}.mt35{margin-top: 35px;}.mt40{margin-top: 40px;}
.mb5 {margin-bottom: 5px;}.mb10{margin-bottom: 10px;}.mb15{margin-bottom: 15px;}.mb20{margin-bottom: 20px;}.mb25{margin-bottom: 25px;}.mb30{margin-bottom: 30px;}.mb35{margin-bottom: 35px;}.mb40{margin-bottom: 40px;}
.ml5 {margin-left: 5px;}.ml10{margin-left: 10px;}.ml15{margin-left: 15px;}.ml20{margin-left: 20px;}.ml25{margin-left: 25px;}.ml30{margin-left: 30px;}.ml35{margin-left: 35px;}.ml40{margin-left: 40px;}
.mr5 {margin-right: 5px;}.mr10{margin-right: 10px;}.mr15{margin-right: 15px;}.mr20{margin-right: 20px;}.mr25{margin-right: 25px;}.mr30{margin-right: 30px;}.mr35{margin-right: 35px;}.mr40{margin-right: 40px;}

/* PADDING */
.p10{padding: 10px;}.p15{padding: 15px;}.p20{padding: 20px;}.p25{padding: 25px;}.p30{padding: 30px;}.p35{padding: 35px;}.p40{padding: 40px;}
.pt5 {padding-top: 5px;}.pt10{padding-top: 10px;}.pt15{padding-top: 15px;}.pt20{padding-top: 20px;}.pt25{padding-top: 25px;}.pt30{padding-top: 30px;}.pt35{padding-top: 35px;}.pt40{padding-top: 40px;}
.pb5 {padding-bottom: 5px;}.pb10{padding-bottom: 10px;}.pb15{padding-bottom: 15px;}.pb20{padding-bottom: 20px;}.pb25{padding-bottom: 25px;}.pb30{padding-bottom: 30px;}.pb35{padding-bottom: 35px;}.pb40{padding-bottom: 40px;}
.pl5 {padding-left: 5px;}.pl10{padding-left: 10px;}.pl15{padding-left: 15px;}.pl20{padding-left: 20px;}.pl25{padding-left: 25px;}.pl30{padding-left: 30px;}.pl35{padding-left: 35px;}.pl40{padding-left: 40px;}
.pr5 {padding-right: 5px;}.pr10{padding-right: 10px;}.pr15{padding-right: 15px;}.pr20{padding-right: 20px;}.pr25{padding-right: 25px;}.pr30{padding-right: 30px;}.pr35{padding-right: 35px;}.pr40{padding-right: 40px;}.p5 {padding: 5px;}

/* BORDER */
.br5{border-radius: 5px;}.br10{border-radius: 10px;}.br15{border-radius: 15px;}.br20{border-radius: 20px;}

/* FLEX */
.wfit{width: fit-content;}
.flex{display: flex;}
.flex_align{display: flex;align-items: center;}
.flex_col{display: flex;flex-direction: column;}
.flex_center{display: flex;justify-content: center;align-items: center;}
.al_end{text-align: end;}
.wrap{flex-wrap: wrap;}
.nowrap{flex-wrap: nowrap;}

/* SHADOW */
.boxshadow{box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}

/* COLORS */
.bg_red{background-color: red;}.bg_green{background-color: green;}.bg_white{background-color: white;}.bg_black{background-color: black;}

/* BUTTON */
.btn_close{position: absolute;top: 10px;right: 10px;cursor: pointer;font-size: 25px;}

/* OVERLAY */
.overlay{position: absolute;top: 70px;left: 50%; z-index: 10;transform: translateX(-50%);box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: white;padding: 20px;    overflow: auto;
}
.mask{position: fixed;top: 0;left: 0;bottom: 0; right: 0;z-index: 1;background-color: rgb(245, 245, 245);opacity: 0.8;}

/* DISPLAY */
.hide{display: none;}