:root{
    /* CSS HEX */
    --light-gray: #ccccccff;
    --jet: #292929ff;
    --dark-blue-gray: #5d5d81ff;
    --dark-blue-gray-2: #6a66a3ff;

    /* CSS HSL */
    --light-gray: hsla(0, 0%, 80%, 1);
    --gray: hsla(200, 5%, 22%, 1);
    --jet: hsla(0, 0%, 16%, 1);
    --dark-blue-gray: hsla(240, 16%, 44%, 1);
    --dark-blue-gray-2: hsla(244, 25%, 52%, 1);
    --rpurple: rebeccapurple;
    --light-rpurple: #B38CD9;
}

html, body {
    height: 100%;
}

body{
    vertical-align: middle;
    margin: auto;
    width: 100%;
    max-width: 100%;
    background-color: var(--gray);
}

main{
    margin-top: 2.5487946544789%;
}

.nav-wrapper {
    width: 100%;
    background-color: var(--jet);
    /* padding-left: 15px;
    padding-right: 15px; */
}

li.active{
    background-color: var(--dark-blue-gray-2) !important;
}

li:hover{
    background-color: var(--dark-blue-gray) !important;
}

a:hover{
    color: var(--rpurple);
}

.main-content {
    width: 70%;
}

.form-form{
    margin-top: 100px;
    padding-top: 50px !important;
    border: 2px solid black;
    border-radius: 5px;
}

.form-btn{
    background-color: var(--rpurple);
    margin: 1.5rem 0rem;
}

.form-btn:hover{
    background-color:var(--light-rpurple);
    margin: 1.5rem 0rem;
}

.login-error{
    color: #AA0000;
}

.login-btn{
    margin-top: 1rem;
}

input.login{
    border: 1.7px solid var(--dark-blue-gray) !important;
    /* border-bottom: none !important; */
    border-radius: 5px !important;
}

input.login:focus{
    border: none !important; 
    border-bottom: none !important;
    border-radius: 5px !important;
}

input.login:valid{
    border: none !important; 
    border-bottom: none !important;
    /* border-radius: 5px !important; */
}


label{
    margin-left: 5px !important;
    padding-bottom: 1px !important;
}

#login{
    color: black;    
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/* Materialize */
.row{
    margin-top: 0.22rem !important;
    margin-bottom: 0.21rem !important;
}