html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

body{
    font-family: 'Roboto', sans-serif;
}

:root{
    --theme: #088DCD;
    --theme-dark: #0576aa;
    --theme-light: #DEEBF3;
    --theme-extralight: rgba(8, 141, 205, 0.10);
    --theme-secondary: #707070;
    --secondary-light: #CDCDCE;
    --light: #FAFAFA;
    --red: #FF0000;
    --red-light: rgb(255, 0, 0, 0.05);
    --orange: #FF5E14;
    --orange-light: rgb(255, 94, 20, 0.05);
    --dark: #000000;
    --white: #FFFFFF;
    --light-border: #ced4da;

    --scorebg: #121727;
    --scorebg-light: #303548;

    --fb: #224793;
    --tw: #088DCD;
    --green: #198754;
    --green-light: rgba(25, 135, 84, 0.05);
}



/* --------------------------------------------------- */
/* Common */
/* --------------------------------------------------- */
.btn-check:focus+.btn, .btn:focus {
    outline: 0;
    box-shadow: unset !important;
}
a{
    text-decoration: unset;
}
.form-control:focus {
    border-color: #ced4da;
    outline: 0;
    box-shadow: none;
}

.link{
    color: var(--theme);
}
.link:hover, .link:focus{
    color: var(--theme);
}

.min-h-100{
    min-height: 100%;
}

.text_light{
    color: var(--theme-secondary);
}

/* Buttons */


.btn{
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    white-space: nowrap;
}

.btn_outline_theme_red{
    border-color: var(--red);
    color: var(--red);
    background-color: var(--red-light);
}
.btn_outline_theme_red:hover, .btn_outline_theme_red:focus{
    border-color: var(--red);
    color: var(--white);
    background-color: var(--red);
}

.btn_outline_theme_green{
    border-color: var(--green);
    color: var(--green);
    background-color: var(--green-light);
}
.btn_outline_theme_green:hover, .btn_outline_theme_green:focus{
    border-color: var(--green);
    color: var(--white);
    background-color: var(--green);
}

.btn_theme {
    color: #fff;
    background-color: var(--theme);
    border-color: var(--theme);
}
.btn_theme:hover {
    color: #fff;
    background-color: var(--theme-dark);
    border-color: var(--theme-dark);
}

.btn_outline_theme {
    color: var(--theme);
    border-color: var(--theme);
    background-color: var(--theme-extralight);
}
.btn_outline_theme:hover {
    color: var(--white);
    background-color: var(--theme);
    border-color: var(--theme);
}

.btn_secondary {
    background-color: var(--light);
    border-color: var(--theme-light);
    color: var(--theme-secondary);
}
.btn_secondary:hover {
    color: var(--scorebg-light);
}

.btn_secondary_sm{
    border: 1px solid #dee2e6;
    border-radius: 3px;
    background-color: var(--white);
    color: var(--secondary-light);
    margin-left: auto;
    font-size: 12px;
}
.btn_secondary_sm:hover{
    border: 1px solid var(--theme);
    background-color: var(--theme-light);
    color: var(--theme);
}

.btn-outline-warning{
    border-color: var(--orange);
    border-radius: 3px;
    background-color: var(--orange-light);
    color: var(--orange);
}
.btn-outline-warning:hover, .btn-outline-warning:focus{
    border-color: var(--orange);
    background-color: var(--orange);
    color: var(--white);
}
.btn-outline-secondary{
    border-color: var(--secondary-light);
    border-radius: 3px;
    background-color: var(--light);
    color: var(--secondary-light);
}

.modal .form-label{
    font-weight: 400;
}
.bg_theme_extralight{
    background-color: var(--theme-extralight);
}

/* backgrounds */
.main_bg_wh{
    background-color: var(--white);
    padding: 30px;
    border-radius: 20px;
}

/* --------------------------------------------------- */
/* RESPONSIVE */
/* --------------------------------------------------- */
@media (max-width: 600px){
    .main_bg_wh {
        padding: 30px 16px 16px;
    }
}