:root{
    --color-default: rgba(13, 110, 253,1);
    --color-default-hov: rgba(13, 110, 253,.5);
    --color-success: #198754;
    --color-danger: #dc3545;
    --color-warning: #fd8827;
    --color-gray1: #394b57;
    --color-gray2: #96acaa;
    --color-gray3: #e2e5e5;
    --color-orange: #fb6e16;
    --color-blue: #2290b1;    
}

/*BUTTON*/
button{padding:3px 10px;font-size:100%;background-color:var(--color-default);border-radius:5px;color:#fff;border:1px solid var(--color-gray2);cursor: pointer;}
button:hover{background-color: var(--color-default-hov);}

.btn-s{padding:2px 6px;font-size:.7em;background-color:var(--color-default);border-radius:5px;color:#fff;border:1px solid;}
.btn-s:hover{background-color:#fff;color: var(--color-default);}

.btn-m{padding: 2px 6px;font-size:.9em;background-color:var(--color-default);border-radius:5px;color:#fff; border:1px solid;}
.btn-m:hover{background-color:#fff;color: var(--color-default);}

.btn-l{padding: 2px 6px;font-size:1.1em;background-color:var(--color-default);border-radius:5px;color:#fff; border:1px solid;}
.btn-l:hover{background-color:#fff;color: var(--color-default);}

.btn-xl{padding: 9px 16px;font-size:150%;background-color:var(--color-default);border-radius:5px;color:var(--fon-color-default);}
.btn-xl:hover{background-color:var(--color-default-hov);}

.btn-s-success{padding:2px 6px;font-size:.7em;background-color:var(--color-success);border-radius:5px;color:#fff;border:1px solid;}
.btn-s-success:hover{background-color:#fff;color:var(--color-success);}

.btn-m-success{padding:2px 6px;font-size:.9em;background-color:var(--color-success);border-radius:5px;color:#fff;border:1px solid;}
.btn-m-success:hover{background-color:#fff;color: var(--color-success);}

/* BACKGROUND*/
.bg-tran{background-color:transparent;}
.bg-bla{background-color:#000;}
.bg-whi{background-color:#fff;}
.bg-default{background-color:var(--color-default);}
.bg-success{background-color:var(--color-success);}
.bg-danger{background-color:var(--color-danger);}
.bg-warning{background-color:var(--color-warning);}
.bg-red{background-color:#ff0000;}
.bg-gre{background-color:#00ff00;}
.bg-blu{background-color:#0000ff;}
.bg-gra1{background-color:var(--color-gray1);}
.bg-gra2{background-color:var(--color-gray2);}

/*COLOR*/
.col-whi{color:#fff;}
.col-bla{color:#000;}
.col-default{color:var(--color-default);}
.col-success{color:var(--color-success);}
.col-danger{color:var(--color-danger);}
.col-warning{color:var(--color-warning);}
.col-gray1{color:var(--color-gray1);}
.col-gray2{color:var(--color-gray2);}



/* box-shadow */
.shadow-1 {
    box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.55);
}