body {
    font-family: "Roboto", sans-serif, "FontAwesome";
    background-color: #87cee0;
}

/**********************************************************************/
/* Text styling */
h6 {
    font-style: italic;
    color: #ff7e4a; 
}

a {
    color: white;
}

a:focus, a:hover {
    color: #ff7e4a; 
    text-decoration: none;
}

.logo {
    padding-bottom: 0px; 
    margin-bottom: -5px; 
    font-size: 20px; 
    color: white; 
}

.logo-text {
    color: white; 
    font-size: 13px;
    padding-right: 2px; 
    padding-top: 0px; 
    margin-top: 0px; 
}

.logo-text:focus, .logo-text:hover {
    font-weight: bold; 
    color: white; 
    text-decoration: none; 
}

label {
    color: white;
}

/**********************************************************************/
/* Button Styling */
.btn-primary {
    background-color: #ff7e4a;
    border-color: #ff7e4a;
    border-radius: 0px; 
    border-width: 3px; 
    color: white; 
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: white !important;
    border-color: #ff7e4a !important;
    color: #ff7e4a !important; 
    box-shadow: none !important;
}

.btn-secondary {
    background-color: #434343;
    border-color: #434343;
    border-radius: 0px;
    border-width: 3px;
    color: white;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: white !important;
    border-color: #434343!important;
    color: #434343 !important; 
    box-shadow: none !important;
}

.btn-outline-primary {
    border-color: #ff7e4a;
    border-radius: 0px;
    border-width: 3px;
    color: #ff7e4a;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, btn-outline-primary:active {
    background-color: white !important;
    border-color: #ff7e4a !important;
    color: #ff7e4a !important; 
    box-shadow: none !important;
}

#forgot-pwd {
    font-style: italic;
    color: #ff7e4a;
    background-color: #87cee0;
    border: none;
    border-color: #ff7e4a;
    box-shadow: none !important;
}

#forgot-pwd:hover, #forgot-pwd:focus, #forgot-pwd:active {
    border-color: #87cee0 !important;
    box-shadow: none !important;
    font-weight: bold; 
    outline: none;
}

/**********************************************************************/
/* Modal Styling */
#emailInput-modal {
    background-color: white; 
    color: #434343!important; 
    border: 3px solid #f3f3f3; 
}

.modal-text {
    color: #434343; 
}

.modal-title {
    color: #434343; 
}

#sent {
    background-color: limegreen; 
    border: 3px solid limegreen; 
    pointer-events: none; 
    outline: none;
}

#error {
    background-color: red;
    border: 3px solid red;
    pointer-events: none;
    outline: none;
}


/**********************************************************************/
/* Input Field Styling */
input[type="text"], input[type="email"], input[type="password"], textarea {
    outline: none;
    box-shadow: none !important;
    background-color: none; 
    color: white; 
    font-size: 20px; 
}

.form-control, .form-control:active, .form-control:focus {
    background-color: #87cee0;
    color: white;
    border-width: 3px;
    border-color: white;
    border-radius: 0px;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px #FFFFFF40 inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.tac {
    color: white;
    text-decoration: underline; 
}

.tac:focus, .tac:hover {
    color: white; 
    font-weight: bold; 
    text-decoration: underline; 
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #ff7e4a;
    background-color: #ff7e4a;
}

.custom-control-input:active ~ .custom-control-label::before {
    border-color: white; 
    background-color: white;
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
    border-color: #ff7e4a;
}

/**********************************************************************/
/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: none;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff7e4a;
}

@media screen and (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 5px;
    }
}

/**********************************************************************/
/* Whitespace */
.whitespace-medium {
    margin: 5vh;
}

.whitespace-small {
    margin: 1vh;
}

/**********************************************************************/
/* Action Page CSS */
.card-footer {
    background-color: #ff7e4a;
    border: none;
}

.rootText {
    font-size: 14px;
    color: white;
    display: inline !important;
    clear: none;
}

.rootText:hover, .rootText:focus, .rootText:active {
    text-decoration: none;
    font-weight: bold;
    color: white;
}