:root {
    --basic-col: darkslategrey;
    --blue-col: #0f52ba;
    --red-col: #960019;
    --green-col: #0b6623;
}
html, body {
    margin: 0;
}
/* ================================= Buttons ================================= */
/* BASIC */
.btn-basic {
    outline:none;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 10px 25px;

    color: white;
    background-color: var(--basic-col);
    border: none;
    transition: border-radius .5s;
}
.btn-basic:hover, .btn-basic:focus {
    border-radius: 0;
    cursor: pointer;
}
.btn-basic-out {
    outline:none;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 10px 25px;

    color: var(--basic-col);
    background-color: transparent;
    border: 1px solid var(--basic-col);
    transition: border-radius .5s;
}
.btn-basic-out:hover, .btn-basic-out:focus {
    border-radius: 0;
    cursor: pointer;
}

/* BLUE */
.btn-blue {
    outline:none;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 10px 25px;

    color: white;
    background-color: var(--blue-col);
    border: none;
    transition: border-radius .5s;
}
.btn-blue:hover, .btn-blue:focus {
    border-radius: 0;
    cursor: pointer;
}
.btn-blue-out {
    outline:none;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 10px 25px;

    color: var(--blue-col);
    background-color: transparent;
    border: 1px solid var(--blue-col);
    transition: border-radius .5s;
}
.btn-blue-out:hover, .btn-blue-out:focus{
    border-radius: 0;
    cursor: pointer;
}

/* RED */
.btn-red {
    outline:none;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 10px 25px;

    color: white;
    background-color: var(--red-col);
    border: none;
    transition: border-radius .5s;
}
.btn-red:hover, .btn-red:focus {
    border-radius: 0;
    cursor: pointer;
}
.btn-red-out {
    outline:none;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 10px 25px;

    color: var(--red-col);
    background-color: transparent;
    border: 1px solid var(--red-col);
    transition: border-radius .5s;
}
.btn-red-out:hover, .btn-red-out:focus {
    border-radius: 0;
    cursor: pointer;
}

/* GREEN */
.btn-green {
    outline:none;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 10px 25px;

    color: white;
    background-color: var(--green-col);
    border: none;
    transition: border-radius .5s;
}
.btn-green:hover, .btn-green:focus {
    border-radius: 0;
    cursor: pointer;
}
.btn-green-out {
    outline:none;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 10px 25px;

    color: var(--green-col);
    background-color: transparent;
    border: 1px solid var(--green-col);
    transition: border-radius .5s;
}
.btn-green-out:hover, .btn-green-out:focus {
    border-radius: 0;
    cursor: pointer;
}
/* ================================= Input Fields ================================= */
/* BASIC */
.input-f-basic {
    outline: none;
    border-radius: 10px;
    padding: 10px 25px;
    transition: border-radius .5s;

    background-color: var(--basic-col);
    border: none;
    color: white;
}
.input-f-basic:hover, .input-f-basic:focus {
    border-radius: 0;
}
.input-f-basic-out {
    outline: none;
    border-radius: 10px;
    padding: 10px 25px;
    transition: border-radius .5s;

    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--basic-col);
    color: var(--basic-col);
}
.input-f-basic::placeholder {
    color: #c7c6c1;
}
.input-f-basic-out:hover, .input-f-basic-out:focus {
    border-radius: 0;
}
/* BLUE */
.input-f-blue {
    background-color: var(--blue-col);
}
.input-f-blue-out {
    border: 1px solid var(--blue-col);
    color: var(--blue-col);
}
/* red */
.input-f-red {
    background-color: var(--red-col);
}
.input-f-red-out {
    border: 1px solid var(--red-col);
    color: var(--red-col);
}
/* green */
.input-f-green {
    background-color: var(--green-col);
}
.input-f-green-out {
    border: 1px solid var(--green-col);
    color: var(--green-col);
}
/* ================================= Selects ================================= */
.select-basic {
    position: relative;
    margin: 0 !important;
}
.select-basic select {
    display: none; /*hide original SELECT element:*/
}
/*style the arrow inside the select element:*/
.select-selected:after { 
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: white transparent transparent transparent;
}
.select-selected.select-arrow-active:after {
    border-color: transparent transparent white transparent;
    top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div, .select-selected {
    color: white;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
    border-radius: 10px;
    transition: border-radius .5s;
}
.select-items div:hover, .select-selected:hover {
    border-radius: 0px;
}
.select-items {
    border-radius: 0px;
    transition: border-radius .5s;
}
.select-items:hover {
    border-radius: 10px;
}
/*style items (options):*/
.select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
}

/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}
.select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.select-basic .select-items {
    background-color: var(--basic-col);
}
.select-basic .select-selected {
    background-color: var(--basic-col);
}
.select-blue .select-items {
    background-color: var(--blue-col) !important;
}
.select-blue .select-selected {
    background-color: var(--blue-col) !important;
}
.select-red .select-items {
    background-color: var(--red-col) !important;
}
.select-red .select-selected {
    background-color: var(--red-col) !important;
}
.select-green .select-items {
    background-color: var(--green-col) !important;
}
.select-green .select-selected {
    background-color: var(--green-col) !important;
}
/* ================================= Tables ================================= */
/* BASIC */
.table-basic {
    border-collapse: collapse;
}
.table-basic tr:not(:first-child) {
    border-bottom: 1px solid black;
}
.table-basic td {
    padding: 10px 25px;
}
.table-basic td:nth-child(even){background-color: rgba(233, 233, 233, 0.3);}
.table-basic td:nth-child(odd){background-color: transparent;}
.table-basic tr:hover td {color: var(--basic-col) !important;}
.table-basic th {
    padding: 10px 25px;
    text-align: center;
    background-color: var(--basic-col);
    color: white;
    transition: border-radius .5s;
}
.table-basic th:first-child {
    border-radius: 10px 0 0 10px;
}
.table-basic th:last-child {
    border-radius: 0 10px 10px 0;
}
.table-basic:hover th {
    border-radius: 0;
}
/* BLUE */
.table-blue th {
    background-color: var(--blue-col) !important;
}
.table-blue tr:hover td {color: var(--blue-col) !important;}
/* RED */
.table-red th {
    background-color: var(--red-col) !important;
}
.table-red tr:hover td {color: var(--red-col) !important;}
/* GREEN */
.table-green th {
    background-color: var(--green-col) !important;
}
.table-green tr:hover td {color: var(--green-col) !important;}
/* ================================= Checkboxes ================================= */
/* BASIC */
.c-box-basic {
    /* display: block; */
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default checkbox */
.c-box-basic input {
    opacity: 0;
    height: 0;
    width: 0;
}
/* Create a custom checkbox */
.c-box-basic .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 5px;
    transition: border-radius 0.5s;
}
/* On mouse-over, add a grey background color */
.c-box-basic:hover input ~ .checkmark {
    background-color: #ccc;
    border-radius: 50%;
}
/* Create the checkmark/indicator (hidden when not checked) */
.c-box-basic .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.c-box-basic input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.c-box-basic .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* When the checkbox is checked, add a blue background */
.c-box-basic input:checked ~ .checkmark {
    background-color: var(--basic-col);
}
.c-box-blue input:checked ~ .checkmark {
    background-color: var(--blue-col);
}
.c-box-red input:checked ~ .checkmark {
    background-color: var(--red-col);
}
.c-box-green input:checked ~ .checkmark {
    background-color: var(--green-col);
}
/* ================================= Radio Buttons ================================= */
 .r-btn-basic {
    /* display: block; */
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default radio button */
.r-btn-basic input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* Create a custom radio button */
.r-btn-basic .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
    transition: border-radius .5s;
}
/* On mouse-over, add a grey background color */
.r-btn-basic:hover input ~ .checkmark {
    background-color: #ccc;
    border-radius: 5px;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.r-btn-basic .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.r-btn-basic input:checked ~ .checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
.r-btn-basic .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    transition: border-radius .5s;
}
.r-btn-basic:hover .checkmark:after {
    border-radius: 1px;
}
.r-btn-basic input:checked ~ .checkmark {
    background-color: var(--basic-col);
}
.r-btn-blue input:checked ~ .checkmark {
    background-color: var(--blue-col);
}
.r-btn-red input:checked ~ .checkmark {
    background-color: var(--red-col);
}
.r-btn-green input:checked ~ .checkmark {
    background-color: var(--green-col);
}
/* ================================= Labels ================================= */
.lbl-basic {
    padding: 10px 25px;
    display: inline-block;
    margin: 10px 10px 10px 0;
    border-top: 1px solid var(--basic-col);
    border-bottom: 1px solid var(--basic-col);
    color: var(--basic-col);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-radius: 0;
    transition: border-color .5s, border-radius .5s;
}
.lbl-basic:hover {
    border-left: 1px solid var(--basic-col);
    border-radius: 10px 0 0 10px;
}
.lbl-blue {
    border-top: 1px solid var(--blue-col);
    border-bottom: 1px solid var(--blue-col);
    color: var(--blue-col);
}
.lbl-blue:hover {
    border-left: 1px solid var(--blue-col);
}
.lbl-red {
    border-top: 1px solid var(--red-col);
    border-bottom: 1px solid var(--red-col);
    color: var(--red-col);
}
.lbl-red:hover {
    border-left: 1px solid var(--red-col);
}
.lbl-green {
    border-top: 1px solid var(--green-col);
    border-bottom: 1px solid var(--green-col);
    color: var(--green-col);
}
.lbl-green:hover {
    border-left: 1px solid var(--green-col);
}
.lbl-basic-invert {
    padding: 10px 25px;
    display: inline-block;
    margin: 10px 10px 10px 0;
    border-top: 1px solid var(--basic-col);
    border-bottom: 1px solid var(--basic-col);
    border-left: 1px solid var(--basic-col);
    color: var(--basic-col);
    border-right: 1px solid transparent;
    border-radius: 10px 0 0 10px;
    transition: border-color .5s, border-radius .5s;
}
.lbl-basic-invert:hover {
    border-left: 1px solid transparent;
    border-radius: 0;
}
.lbl-blue-invert {
    border-top: 1px solid var(--blue-col);
    border-bottom: 1px solid var(--blue-col);
    border-left: 1px solid var(--blue-col);
    color: var(--blue-col);
    border-radius: 10px 0 0 10px;
}
.lbl-blue-invert:hover {
    border-left: 1px solid transparent;
    border-radius: 0;
}
.lbl-red-invert {
    border-top: 1px solid var(--red-col);
    border-bottom: 1px solid var(--red-col);
    border-left: 1px solid var(--red-col);
    color: var(--red-col);
    border-radius: 10px 0 0 10px;
}
.lbl-red-invert:hover {
    border-left: 1px solid transparent;
    border-radius: 0;
}
.lbl-green-invert {
    border-top: 1px solid var(--green-col);
    border-bottom: 1px solid var(--green-col);
    border-left: 1px solid var(--green-col);
    color: var(--green-col);
    border-radius: 10px 0 0 10px;
}
.lbl-green-invert:hover {
    border-left: 1px solid transparent;
    border-radius: 0;
}
/* ================================= Cards ================================= */
.card-basic {
    margin: 20px;
    display: inline-block;
    color: white;
    background-color: var(--basic-col);
    border-radius: 10px;
    height: auto;
    width: 250px;
    padding: 33px;
    transition: border-radius 0.5s;

    -webkit-box-shadow: 0px 5px 23px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 23px -5px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 23px -5px rgba(0,0,0,0.75);
}
.card-basic:hover {
    border-radius: 0;
}
.card-basic:hover div {
    border-radius: 0;
}
.card-basic img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
}
.card-basic h2 {
    margin: 10px 0 !important;
    text-transform: uppercase;
}
.card-basic div {
    border: 1px solid white;
    border-radius: 10px;
    transition: border-radius 0.5s;
    padding: 15px;
}
.card-basic div p {
    text-align: justify;
}
.card-blue {
    background-color: var(--blue-col);
}
.card-red {
    background-color: var(--red-col);
}
.card-green {
    background-color: var(--green-col);
}
/* OUTLINE */
.card-basic-out {
    margin: 20px;
    display: inline-block;
    border: 1px solid var(--basic-col);
    color: var(--basic-col);
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    height: auto;
    width: 250px;
    padding: 33px;
    transition: border-radius 0.5s;

    -webkit-box-shadow: 0px 5px 23px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 23px -5px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 23px -5px rgba(0,0,0,0.75);
}
.card-basic-out:hover {
    border-radius: 0;
}
.card-basic-out:hover div {
    border-radius: 0;
}
.card-basic-out img {
    height: 100px;
    width: 100px;
    border-radius: 50%;

}
.card-basic-out h2 {
    margin: 10px 0 !important;
    text-transform: uppercase;
}
.card-basic-out div {
    border: 1px solid var(--basic-col);
    border-radius: 10px;
    transition: border-radius 0.5s;
    padding: 15px;
}
.card-basic-out div p {
    text-align: justify;
}
.card-blue-out {
    border: 1px solid var(--blue-col);
    color: var(--blue-col);
}
.card-blue-out div {
    border: 1px solid var(--blue-col);
}
.card-red-out {
    border: 1px solid var(--red-col);
    color: var(--red-col);
}
.card-red-out div {
    border: 1px solid var(--red-col);
}
.card-green-out {
    border: 1px solid var(--green-col);
    color: var(--green-col);
}
.card-green-out div {
    border: 1px solid var(--green-col);
}
/* ================================= Input DATE ================================= */
[type="date"].input-d-basic {
    background: var(--basic-col) url(https://cdn4.iconfinder.com/data/icons/small-n-flat/24/calendar-20.png)  95% 50% no-repeat ;
}
[type="date"].input-d-basic::-webkit-inner-spin-button {
    display: none;
}
[type="date"].input-d-basic::-webkit-calendar-picker-indicator {
    opacity: 0;
}
.input-d-basic {
    /* border: 1px solid #c4c4c4; */
    border: none;
    color: white;
    border-radius: 10px;
    padding: 9px 10px 9px 25px;
    width: 180px;
    outline:none;
    transition: border-radius .5s;
}
.input-d-basic:hover, .input-d-basic:focus {
    border-radius: 0;
}
}
[type="date"].input-d-blue {
    background: var(--blue-col) url(https://cdn4.iconfinder.com/data/icons/small-n-flat/24/calendar-20.png)  95% 50% no-repeat ;
}
[type="date"].input-d-red {
    background: var(--red-col) url(https://cdn4.iconfinder.com/data/icons/small-n-flat/24/calendar-20.png)  95% 50% no-repeat ;
}
[type="date"].input-d-green {
    background: var(--green-col) url(https://cdn4.iconfinder.com/data/icons/small-n-flat/24/calendar-20.png)  95% 50% no-repeat ;
}
/* OUT */
[type="date"].input-d-basic-out {
    background: rgba(255, 255, 255, 0.8) url(https://cdn4.iconfinder.com/data/icons/small-n-flat/24/calendar-20.png)  95% 50% no-repeat ;
}
[type="date"].input-d-basic-out::-webkit-inner-spin-button {
    display: none;
}
[type="date"].input-d-basic-out::-webkit-calendar-picker-indicator {
    opacity: 0;
}
.input-d-basic-out {
    border: 1px solid var(--basic-col);
    color: var(--basic-col);
    border-radius: 10px;
    padding: 9px 10px 9px 25px;
    width: 180px;
    outline:none;
    transition: border-radius .5s;
}
.input-d-basic-out:hover, .input-d-basic-out:focus {
    border-radius: 0;
}
.input-d-blue-out {
    border: 1px solid var(--blue-col);
    color: var(--blue-col);
}
.input-d-red-out {
    border: 1px solid var(--red-col);
    color: var(--red-col);
}
.input-d-green-out {
    border: 1px solid var(--green-col);
    color: var(--green-col);
}

/* ================================= Other ================================= */
.bg-color-basic {
    background-color: var(--basic-col);
    color: white;
}
.txt-color-basic {
    color: var(--basic-col);
}
.bg-color-blue {
    background-color: var(--blue-col);
    color: white;
}
.txt-color-blue {
    color: var(--blue-col);
}
.bg-color-red {
    background-color: var(--red-col);
    color: white;
}
.txt-color-red {
    color: var(--red-col);
}
.bg-color-green {
    background-color: var(--green-col);
    color: white;
}
.txt-color-green {
    color: var(--green-col);
}
/* ================================= Header & Footer ================================= */
.header-basic-out {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid var(--basic-col);
    color: var(--basic-col);
    background-color: rgba(255, 255, 255, 0.8);

    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 10;
}
.header-basic-out a {
    color: var(--basic-col);
    text-decoration: none;
}
.footer-basic-out {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 150px;
    border-top: 1px solid var(--basic-col);
    color: var(--basic-col);
    background-color: rgba(255, 255, 255, 0.8);

    display: flex;
    align-items: center;
    justify-content: space-around;
}
.footer-basic-out a {
    color: var(--basic-col);
}