:root {
    --v-white: 255, 255, 255;
    --v-black: 0, 0, 0;

    --white: rgba(var(--v-white), 1);
    --black: rgba(var(--v-black), 1);

    --v-blue  : 70, 128, 255;
    --v-red   : 255, 82, 82;
    --v-cyan  : 0, 172, 193;
    --v-green : 156, 204, 101;
    --v-yellow: 255, 186, 87;

    --blue   : rgba(var(--v-blue), 1);
    --red    : rgba(var(--v-red), 1);
    --cyan   : rgba(var(--v-cyan), 1);
    --green  : rgba(var(--v-green), 1);
    --yellow : rgba(var(--v-yellow), 1);
    --primary: var(--blue);
    --success: var(--success);
    --info   : var(--cyan);
    --danger : var(--danger);
    --warning: var(--warning);

    --bs-blue   : var(--blue);
    --bs-red    : var(--red);
    --bs-cyan   : var(--cyan);
    --bs-green  : var(--green);
    --bs-yellow : var(--yellow);
    --bs-primary: var(--primary);
    --bs-success: var(--success);
    --bs-info   : var(--cyan);
    --bs-danger : var(--danger);
    --bs-warning: var(--warning);

    --text-light-color: var(--light);
    --text-dark-color : var(--dark);
    --bg-primary      : var(--primary);
    --active          : var(--primary);
    --menu-item-text  : var(--secondary);
}

body {
    color     : var(--text-dark-color);
    background: var(--bg-primary);
}

a {
    color           : var(--primary);
    background-color: transparent;
    text-decoration : none;
    cursor          : pointer;
}

a:hover {
    color          : var(--primary);
    outline        : none;
    text-decoration: none;
}

.rounded {
    border-radius: 5px;
}

.shadow {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
}

.bg-danger {
    background-color: var(--red) !important;
    color           : var(--text-light-color);
}

.bg-primary {
    background-color: var(--bg-primary) !important;
    color           : var(--text-light-color);
}

.btn-primary {
    background-color: var(--bg-primary);
}

.text-primary {
    color: var(--bg-primary);
}

.card {
    border-radius: 0.4rem;
}

.form-group {
    padding-top  : 2px;
    margin-bottom: 2px;
    position     : relative;
}

.form-group .form-control {
    height             : auto;
    width              : 100%;
    padding            : 0.2rem 5px 0.35rem 5px;
    position           : relative;
    border-radius      : 0;
    border-width       : 0 0 1px;
    border-bottom-color: rgba(0, 0, 0, 0.25);
    background-color   : transparent;
}

.form-group .form-control:focus {
    box-shadow         : none;
    border-bottom-color: rgba(var(--v-black), 0.12);
}

.form-group .form-control~.form-label {
    font-weight        : 300;
    text-align         : left;
    cursor             : text;
    width              : 100%;
    height             : 2px;
    margin             : 0;
    position           : absolute;
    left               : 0;
    bottom             : 0;
    opacity            : 0.6;
    -webkit-user-select: none;
    -moz-user-select   : none;
    user-select        : none;
    transition         : all 0.2s ease;
}

.form-group .form-control~.form-label::after {
    content         : "";
    visibility      : hidden;
    background-color: var(--bg-primary);
    width           : 0;
    height          : 0.15rem;
    position        : absolute;
    left            : 50%;
    bottom          : 0;
    transition      : all 0.2s ease;
}

.form-group .form-control.not-empty~.form-label {
    font-size: 0.9rem;
}

.form-group .form-control:focus~.form-label {
    font-size: 0.9rem;
    color    : var(--bg-primary);
    opacity  : 1;
}

.form-group .form-control:focus~.form-label::after {
    visibility: visible;
    width     : 100%;
    left      : 0;
}

.form-group.label {
    padding-top  : 1rem;
    margin-bottom: 1rem;
}

.form-group.label .form-control~.form-label {
    height: auto;
    top   : 1.4rem;
}

.form-group.label .form-control.not-empty~.form-label {
    top: 0;
}

.form-group.label .form-control:focus~.form-label {
    top: 0;
}

.col.form-group .form-control~.form-label {
    top: 0;
}

.fa-sign-out-alt {
    transform: rotate(180deg);
}

.login.card {
    height   : 35rem;
    top      : 15vh;
    width    : 90vw;
    max-width: 28rem;
    position : relative;
}

.login.card .card-body {
    padding: 2rem 3rem 1.5rem 3rem;
}

.profile-photo {
    border-radius: 50%;
}

.ri {
    font-size: 1.25rem;
}

.fa,
.fas,
.far {
    font-size: 1.1rem;
}

.fa-15 {
    font-size: 1.5rem;
}

.fa-spin {
    font-size: 3rem;
}

.btn:not(.btn-sm) {
    padding-top   : 0.25rem;
    padding-bottom: 0.25rem;
}

.toast {
    width: auto;
}

textarea.form-control {
    padding: 0.2rem 5px 0.35rem 5px;
}