/** ----------------------------------------- Form Styles ----------------------------------------- **/


form input, textarea {
    font-family: Helvetica;
    font-size: 1rem;
    font-weight: 300;
    color: var(--clr-prmary-blk);
    box-shadow: 2px 2px 2px var(--clr-med-light);
}

form input:focus, textarea:focus {    
    outline: 1px solid var(--clr-prmary-blk);
}

form label {
    font-family: Helvetica;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--clr-lt-dark);
}

form em {
    color: var(--clr-xdk-red);
}

form input[type=text] {
    padding: .625rem;
    border: 1px solid var(--clr-dk-grey);
    border-radius: .5rem;
    /* box-shadow: 2px 2px 2px rgb(196,196,196);     */
}

form input[type=submit] {
    padding: 1rem 0 1rem 0;   
    border: none;
    border-radius: .625rem;
    font-weight: 600;
    background-color: var(--clr-dk-blue);
    color: var(--clr-xlt-light);
}

form input[type=submit]:hover {
    background-color: var(--clr-med-blue);
    transition-duration: .5s; 
    cursor: pointer;    
}

form input[type=submit]:focus,
form input[type=submit]:active {
    outline: none;
}

form select {
    padding: .625rem;
    border: 1px solid var(--clr-dk-grey);
    border-radius: .5rem;
    font-family: Helvetica;
    font-size: 1rem;
    font-weight: 300;
    color: var(--clr-prmary-blk);
    background-color: var(--clr-xlt-light);
    box-shadow: 2px 2px 2px var(--clr-med-light);
    appearance: none;
}

form select:focus,
form select:active {
    outline: none;
}

.select-parent {
    position: relative;
}

form .select-arrow {
    position: absolute;
    display: block;
    width: 2.8125rem;
    height: 100%;
    top: 0;
    right: 0;
    border-radius: 0 .625rem .625rem 0;
    background: var(--clr-dk-blue);
    pointer-events: none;
}

form .select-arrow::before,
form .select-arrow::after {
    --size: .5rem;
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

form .select-arrow::before {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-bottom: var(--size) solid var(--clr-xlt-light);
    top: 35%;
}

form .select-arrow::after {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-top: var(--size) solid var(--clr-xlt-light);
    top: 65%;
}

form .error-msg {
    display: block;
    min-height: 1.25rem;
    padding: .625rem 0 .3125rem;
    margin: 0 auto;
    font-family: Helvetica;
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--clr-xdk-red);
}