/* GENERAL FORMS SETUP -------------------------------------------------------------------- */

.form {
    display: flex;
    flex-direction: flex;
    align-items: center;
    width: 100%;
}

.form label {
    width: 100%;
    max-width: 300px;
    text-align: left;
    margin-top: 4px;
}

.form p {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.form input {
    display: block;
    margin: 10px auto;
}

input[type="text"],
input[type="password"],
input[type="email"]{
    padding: 10px;
    margin: 10px 0;
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    border: 1px solid #000000cc;  /* #cccc  Input fields borders color and size */
    border-radius: 5px;
}

.error-list li {
    color: red;
}

form button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #414141;
    color: var(--cnt-text-color);
    background-color: transparent;
    cursor: pointer;
    border-radius: 10px;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);

    margin-top: 5px;
}

form button:hover {
/*  border-color: #0974f1;
    box-shadow: 0 0 20px rgba(9, 117, 241, 0.8); */
    
    border-color: #292929;
    box-shadow: 0 0 20px rgba(82, 82, 83, 0.8);


}

form button:active {
  box-shadow: 0 0 10px rgba(9, 117, 241, 0.4);
}


/* Signup form field-signup setup -------------------------------------------------------*/
.form-field-signup {
    display: flex;
    
    flex-direction: row;

    align-items: center;
    margin-bottom: 10px;
    justify-content: center;
}

.form-field-signup label {
    font-weight: normal;
    margin-bottom: 5px;
    text-align: left;
    width: 150px;
}



.form-field-signup label::after {
    content: ":";
    margin-left: 5px;
}

.form-field-signup input,
.form-field-signup select,
.form-field-signup textarea {

    
    width: 100%;
    max-width: 400px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #000000;
    box-sizing: border-box;

}



.form-field-signup input:-webkit-autofill {
    /* Filled space after input */
    -webkit-box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset;
}




.form-field-signup .helptext {
    /* Help text is the displayed version of whatever needs to be done */
    font-size: 0.9em;
    color: #ff0000; /* #666*/
    margin-top: 5px;
    margin-left: 0;
    width: 100%;
    text-align: left;
    display: block;
}



.form-field-signup input::placeholder {
    /* Help text inside the form field-signup */
    color: rgb(167, 167, 167);
}

.form-field-signup input:focus,
.form-field-signup select:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    
}



.form-field-signup select[type="zonecolor"] {

    padding: 10px;
    width: 100%;
    border: 1px solid black;
    background-color: white;
}




.form-field-signup input[type="date"] {
    color: black;
    padding: 10px;
    margin: 10px 0;
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
    border: 1px solid #000000cc;  /* #cccc  Input fields borders color and size */
    border-radius: 5px;

}





/* Notifications field -------------------------------------------------------------------- */
.form-field-ntfs {
    color: rgb(255, 255, 255);
}

.form-field-ntfs button {
    color: green;
}
.form-field-ntfs button:hover {
    border-color: none;
    box-shadow: none;
}

.form-field-ntfs button:active {
    box-shadow: none;
}



.form-field-ntfs input::placeholder {
    color: grey;
    background-color: rgb(255, 255, 255);
}


.form-field-ntfs input[type="text"],
.form-field-ntfs select[type="time"] {
    color: rgb(0, 0, 0);

    /* Has to be set with placeholder beside */
    background-color: rgb(255, 255, 255);
}



.form input::placeholder {
    /* Help text inside the form field-signup */
    color: rgb(167, 167, 167);
    background-color: red;
}


/*LOGIN form-field --------------------------------------------------------------------------- */

.form-field-login {
    
    background-color: transparent;

}

.form-field-login input[type="text"],
.form-field-login input[type="password"] {
    border: 1px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}

.form-field-login input::placeholder {
    /* Hint for user! */
    color: grey;
}

.form-field-login input:focus {
    /* Settings for when user clicks on the form */
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    
}


.form-field-login input:-webkit-autofill {
    /* Filled space after input */
    -webkit-box-shadow: 0 0 0 1000px white inset;
}






/* Change Password field --------------------------------------------------------------------- */
.form-field-cpwd {
    color: var(--cnt-text-color);
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    justify-content: center;
}

.form-field-cpwd label {
    color: var(--cnt-text-color);
    font-weight: normal;
    margin-bottom: 5px;
    text-align: left;
    width: 200px;
}

.form-field-cpwd label::after {

    margin-right: 20px;
}



.form-field-cpwd input:-webkit-autofill {
    /* Filled space after input */
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

.form-field-cpwd input:active {
    /* Filled space after input */
    background-color: rgb(255, 0, 0);
}


.form-field-cpwd input[type="password"] {
    align-items: right;
    border: 1px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}


.form-field-cpwd input::placeholder {
    /* Help text inside the form field-signup */
    color: rgb(167, 167, 167);
}

.form-field-cpwd input:focus,
.form-field-cpwd select:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    
}


/* Password reset fields requested email  --------------------------------------------------------------------------- */
.form-field-pr {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* margin-bottom: 10px; */

}

.form-field-pr label {
    font-weight: normal;
    margin-bottom: 5px;
    text-align: left;
    width: auto;}

.form-field-pr label::after {
    content: ":";
    margin-left: 5px;
}



.form-field-pr input:-webkit-autofill {
    /* Filled space after input */
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

.form-field-pr input:active {
    /* Filled space after input */
    background-color: rgb(255, 255, 255);
}


.form-field-pr input[type="email"] {
    margin-left: 20px;
    width: 100%;
    min-width: 150px;
    border: 1px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}


.form-field-pr input::placeholder {
    /* Help text inside the form field-signup */
    color: rgb(167, 167, 167);
}

.form-field-pr input:focus,
.form-field-pr select:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    
}


/* Set password field ------------------------------------------------------------------------------- */
.form-field-spwd {

    display: flex;
    
    flex-direction: row;

    align-items: center;
    margin-bottom: 10px;
    justify-content: center;



    background-color: #ffffff;
}

.form-field-spwd label {
    color: black;
    font-weight: normal;
    margin-bottom: 5px;
    text-align: left;
    width: 150px;
}



.form-field-spwd input:-webkit-autofill {
    /* Filled space after input */
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

.form-field-spwd input:active {
    /* Filled space after input */
    background-color: rgb(255, 255, 255);
}


.form-field-spwd input[type="password"] {
    border: 1px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}


.form-field-spwd input::placeholder {
    /* Help text inside the form field-signup */
    color: rgb(167, 167, 167);
}

.form-field-spwd input:focus,
.form-field-spwd select:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    
}



/* STUFF TO BE CHECKED */




/* 
.form-field-signup input[type="submit"] {
    width: 100%;
    background-color: green;
    color: red;
}
 */