/* color vars */
:root {
    --primary-link-color:#2372de;
    --success-bg-color: #5dc55d;
    --success-border-color:#35b535;
    --info-bg-color:#0775cb;
    --info-border-color:#1969a8;
    --danger-bg-color:#dc3939;
    --danger-border-color:#bf3232;
    --warning-bg-color:#f6e999;
    --warning-textbtn-color:#57572c;
    --warning-border-color:#e0e099;
    --disabled-bg-color:#ececec;
    --disabled-textbtn-color:#9d9d9d;
    --disabled-border-color:#e2e2e2;
    
}

*{font-family:sans-serif; outline:none; max-width:100%; box-sizing: border-box;}
body{padding:0; margin:0; text-align:center;}
 
/* CONTAINERS */
.container{display:inline-block; width:1000px; text-align:center;}
.container-full{width:100%; text-align:center;}
.container>*{text-align:left;}
.container-full>*{text-align:left;}


/* DIRECTIONS */
.text-right{text-align:right;}
.text-left{text-align:left;}
.text-center{text-align:center;}
.vh-center{display:flex; align-items:center; justify-content:center; }
.align-items-center{align-items:center;}
.justify-content-center{justify-content: center;}
.flex-direction-column{flex-direction:column;}
.flex-direction-column-reverse{flex-direction: column-reverse;}


/* SPACES */
.p-1{padding:50px;}
.p-2{padding:40px;}
.p-3{padding:30px;}
.p-4{padding:20px;}
.p-5{padding:10px;}
.py-1{padding:50px 0;}
.py-2{padding:40px 0;}
.py-3{padding:30px 0;}
.py-4{padding:20px 0;}
.py-5{padding:10px 0;}
.m-1{margin:50px;}
.m-2{margin:40px;}
.m-3{margin:30px;}
.m-4{margin:20px;}
.m-5{margin:10px;}
.my-1{margin:50px 0;}
.my-2{margin:40px 0;}
.my-3{margin:30px 0;}
.my-4{margin:20px 0;}
.my-5{margin:10px 0;}
.pt-1{padding-top:50px;}
.pt-2{padding-top:40px;}
.pt-3{padding-top:30px;}
.pt-4{padding-top:20px;}
.pt-5{padding-top:10px;}
.pb-1{padding-bottom:50px;}
.pb-2{padding-bottom:40px;}
.pb-3{padding-bottom:30px;}
.pb-4{padding-bottom:20px;}
.pb-5{padding-bottom:10px;}
.pl-1{padding-left:50px;}
.pl-2{padding-left:40px;}
.pl-3{padding-left:30px;}
.pl-4{padding-left:20px;}
.pl-5{padding-left:10px;}
.pr-1{padding-right:50px;}
.pr-2{padding-right:40px;}
.pr-3{padding-right:30px;}
.pr-4{padding-right:20px;}
.pr-5{padding-right:10px;}
.mt-1{margin-top:50px;}
.mt-2{margin-top:40px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:20px;}
.mt-5{margin-top:10px;}
.mb-1{margin-bottom:50px;}
.mb-2{margin-bottom:40px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:20px;}
.mb-5{margin-bottom:10px;}
.ml-1{margin-left:50px;}
.ml-2{margin-left:40px;}
.ml-3{margin-left:30px;}
.ml-4{margin-left:20px;}
.ml-5{margin-left:10px;}
.mr-1{margin-right:50px;}
.mr-2{margin-right:40px;}
.mr-3{margin-right:30px;}
.mr-4{margin-right:20px;}
.mr-5{margin-right:10px;}


/* DISPLAYS */
.display-inline{display:inline;}
.display-flex{display:flex;}
.display-inline-block{ display:inline-block;}
.display-block{display:block;}
.display-inline-flex{display:inline-flex;}


/* CONTROLERS */
.box-sizing-border-box{box-sizing: border-box; -webkit-box-sizing: border-box;}
.text-security-disc{-webkit-text-security:disc;}
.overflow-auto{overflow:auto;}

/* links */
a:link, a:visited, a:active{color:var(--primary-link-color); text-decoration:none;}
a:hover{text-decoration:underline;}

/* buttons */
.btn{border:1px solid #b2b2b2; padding:8px 13px; color:#292929; background:#f1f1f1; border-radius:3px;}
.btn-success{background:var(--success-bg-color); color:white; border:1px solid var(--success-border-color);}
.btn-text{background: none; border:none;}
.btn-info{background:var(--info-bg-color); color:white; border:1px solid var(--info-border-color); }
.btn-danger{background: var(--danger-bg-color); color:white; border:1px solid var(--danger-border-color);}
.btn-warning{background: var(--warning-bg-color); color:var(--warning-textbtn-color); border:1px solid var(--warning-border-color);}
.btn-disabled{background:var(--disabled-bg-color); color:var(--disabled-textbtn-color); border:1px solid var(--disabled-border-color); cursor:no-drop;}


/* FORMS */
.form{margin:5px;}
.form-col{margin:17px 0;}


/* INPUTS */
.form-input{width:100%; background:none; border:1px solid #c9c2c2; border-radius:3px; padding:9px;}
.form-input:focus{border:1px solid #3285c5;}


/* COLORS */
/* text colors */
.text-black{color:black;}
.text-white{color:white;}
.text-gray{color:gray;}
.text-red{color:red;}
.text-green{color:green;}
.text-orange{color:orange;}
.text-blue{color:blue;}
.text-blueviolet{color:blueviolet;}
.text-pink{background:pink;}

/* background colors */
.bg-black{background:black;}
.bg-white{background:white;}
.bg-gray{background:gray;}
.bg-red{background:red;}
.bg-green{background:green;}
.bg-orange{background:orange;}
.bg-blue{background:blue;}
.bg-blueviolet{background:blueviolet;}
.bg-pink{background:pink;}


/* DIMENSIONS */
.w-100{width:100%;}
.w-50{width:50%;}
.w-0{width:0;}
.mw-100{max-width:100%;}
.h-100{height:100%;}
.h-50{height:50%;}
.h-0{height:0;}
.mh-100{max-height:100%;}


/* GRIDS */
.row{display:flex; width:100%;}
.row .col{width:auto;}
.row .col-100{width:100%;}
.row .col-50{width:50%;}
.row .col-30{width:30%;}
.row .col-20{width:20%;}
.row .col-10{width:10%;}
.row.one-col{flex-direction:column;}


/* BORDERS */
.border-5{border:1px solid #b0b0b0;}
.border-4{border:2px solid #b0b0b0;}
.border-3{border:3px solid #b0b0b0;}
.border-2{border:4px solid #b0b0b0;}
.border-1{border:5px solid #b0b0b0;}
.border-radius{border-radius:4px;}
.border-radius-top{border-top-left-radius:4px; border-top-right-radius:4px;}
.border-radius-bottom{border-bottom-left-radius:4px; border-bottom-right-radius:4px;}
.border-radius-left{border-top-left-radius:4px; border-bottom-left-radius:4px;}
.border-radius-right{border-top-right-radius:4px; border-bottom-right-radius:4px;}
.border-radius-pil{border-radius:50px;}


/* POSITIONS */
.fixed{position:fixed;}
.fixed-top{top:0; left:0; position:fixed; width:100%;}
.fixed-bottom{bottom:0; left:0; position:fixed; width:100%;}
.fixed-left{left:0; top:0; bottom:0; position:fixed; height:100%; }
.fixed-right{right:0; top:0; bottom:0; position:fixed; height:100%; }


/* FONTS */
.text-bold{font-weight:bold;}
.text-italic{font-style: italic;}
.text-underline{text-decoration: underline;}
.no-underline{text-decoration: none;}



/* MEDIA QUERIES */
.only-for-below-700{display:none}
.only-for-below-600{display:none}
.only-for-below-500{display:none}
.only-for-below-900{display:none}

@media screen and (max-width:900px){
    .hide-on-below-900{display:none;}
    .d-block-on-below-900{display:block;}
    .d-inline-block-on-below-900{display:block;}
    .d-flex-on-below-900{display:flex;}
    .d-inline-flex-on-below-900{display:inline-flex;}
    .text-center-on-below-900{text-align:center;}
    .text-left-on-below-900{text-align:left;}
    .text-right-on-below-900{text-align:right;}
}

@media screen and (max-width:700px){
    .hide-on-below-700{display:none;}
    .d-block-on-below-700{display:block;}
    .d-inline-block-on-below-700{display:block;}
    .d-flex-on-below-700{display:flex;}
    .d-inline-flex-on-below-700{display:inline-flex;}
    .text-center-on-below-700{text-align:center;}
    .text-left-on-below-700{text-align:left;}
    .text-right-on-below-700{text-align:right;}
}

@media screen and (max-width:600px){
    .hide-on-below-600{display:none;}
    .d-block-on-below-600{display:block;}
    .d-inline-block-on-below-600{display:block;}
    .d-flex-on-below-600{display:flex;}
    .d-inline-flex-on-below-600{display:inline-flex;}
    .text-center-on-below-600{text-align:center;}
    .text-left-on-below-600{text-align:left;}
    .text-right-on-below-600{text-align:right;}
}

@media screen and (max-width:500px){
    .hide-on-below-500{display:none;}
    .d-block-on-below-500{display:block;}
    .d-inline-block-on-below-500{display:block;}
    .d-flex-on-below-500{display:flex;}
    .d-inline-flex-on-below-500{display:inline-flex;}
    .text-center-on-below-500{text-align:center;}
    .text-left-on-below-500{text-align:left;}
    .text-right-on-below-500{text-align:right;}
}