:root {
    --renfroe-blue: rgb(47, 126, 206);
    --renfroe-red: rgb(241, 80, 96);
    --renfroe-black: rgb(0, 0, 0);
    --renfroe-accent-charcoal: rgb(109, 106, 102);
    --renfroe-accent-highlighter: rgb(252, 207, 97);
    --renfroe-accent-greenapple: rgb(115, 201, 45);
}

body {
    background: #EEEEEE;
}

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: rgb(47, 126, 206);
    -webkit-text-fill-color: var(--renfroe-blue);
    transition: background-color 5000s ease-in-out 0s;
}

p {
    padding: 0rem;
}

.gradient-bar {
    background: rgb(239,59,65);
    background: linear-gradient(90deg, rgba(239,59,65,1) 0%, rgba(47,126,206,1) 65%);
    width: 100%;
    height: 10px;
}

.card {
    border: none;
    box-shadow: none;
}

.card-footer {
    padding: 0.75rem 1.25rem;
    background: #EEEEEE;
    border: none;
}

.renfroe-logo {
    padding-top: 25px;
    width: 140px;
}

.input-container {
    padding: 10px;
}

.button-container {
    padding-top: 10px;
    padding-bottom: 10px;
}

.custom-button {
    color: white;
    border-color: rgb(47, 126, 206);
    border-color: var(--renfroe-blue);
    background-color: rgb(47, 126, 206);
    background-color: var(--renfroe-blue);
    font-size: 16px;
    padding-top: 5px;
    width: 93%;
}

.custom-button:hover {
    color: white;
    border-color: rgb(47, 126, 206);
    border-color: var(--renfroe-blue);
    background-color: rgb(47, 126, 206);
    background-color: var(--renfroe-blue);
    font-size: 16px;
    padding-top: 5px;
    width: 94%;
}

.custom-button-disabled {
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
    border-color: var(--renfroe-accent-charcoal);
    border-color: rgb(109, 106, 102);
    font-size: 16px;
    padding-top: 5px;
    width: 200px;
}

.custom-anchor {
    color: rgb(47, 126, 206);
    color: var(--renfroe-blue);
    font-weight: 900;
}

.error-message{
    padding: 5px;
}

.custom-checkbox {
    font-size: 17px;
    padding: 10px;
}

#arrow {
    color: rgb(47, 126, 206);
    color: var(--renfroe-blue);
    font-size: 30px;
}

#password-tips-register {
    margin-top: 0;
    text-align: left;
    font-size: 14px;
}

.custom-checkbox input[type="checkbox"],
.custom-checkbox .checked {
    display: none;
}

.custom-checkbox input[type="checkbox"]:checked ~ .checked {
    display: inline-block;
}

.custom-checkbox input[type="checkbox"]:checked ~ .unchecked {
    display: none;
}

.login {
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 340px;
    font-weight: 900;
}

#email, #password, #confirmPassword, #firstName, #lastName, #cellPhoneNumber, #dateOfBirth,
#phone-number, #first-name, #last-name, input, #answer {
    background-color: white;
    font-size: 18px;
    color: rgb(47, 126, 206);
    color: var(--renfroe-blue);
}

#code::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
    opacity: 1; /* Firefox */
}

#code:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

.codeInput {
    width: 41px;
    height: 50px;
    display: inline;
    background-color: white;
    font-size: 14px;
    color: rgb(47, 126, 206);
    color: var(--renfroe-blue);
}

#answer::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
    opacity: 1; /* Firefox */
}

#answer:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#email::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
    opacity: 1; /* Firefox */
}

#email:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#email::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#password::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
    opacity: 1; /* Firefox */
}

#password:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#password::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#confirmPassword::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
    opacity: 1; /* Firefox */
}

#confirmPassword:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#confirmPassword::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#firstName::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
    opacity: 1; /* Firefox */
}

#firstName:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#firstName::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#lastName::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
    opacity: 1; /* Firefox */
}

#lastName:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#lastName::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#dateOfBirth::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
    opacity: 1; /* Firefox */
}

#dateOfBirth:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#dateOfBirth::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#cellPhoneNumber::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
    opacity: 1; /* Firefox */
}

#cellPhoneNumber:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

#cellPhoneNumber::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--renfroe-accent-charcoal);
    color: rgb(109, 106, 102);
}

.register-input-container {
    padding: 14px;
}

fieldset {
    margin: 0px;
    border-bottom: none;
}

.field-icon {
    float: right;
    margin-left: -25px;
    margin-top: -25px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    pointer-events: initial;
}

#password-tips {
    text-align: left;
    font-size: 14px;
}

#password-strength-text {
    padding-top: 15px;
    padding-bottom: 5px;
    display: none;
}

#password-feedback-warning {
    padding-top: 5px;
    padding-bottom: 8px;
    display: none;
}

input::-ms-clear, input::-ms-reveal {
    display: none;
}

#select-container{
    margin: 10px;
}

#custom-select {
    display: block;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: rgb(47, 126, 206);
    color: var(--renfroe-blue);
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    width: 80%;
    max-width: 80%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

#custom-select::-ms-expand {
    display: none;
}

#custom-select:hover {
    border-color: rgb(47, 126, 206);
    border-color: var(--renfroe-blue);
}

#custom-select:focus {
    border-color: var(--renfroe-blue);
    border-color: rgb(47, 126, 206);
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: rgb(1,107,183);
    outline: none;
}

#custom-select option {
    font-weight: normal;
}

*[dir="rtl"] #custom-select, :root:lang(ar) #custom-select, :root:lang(iw) #custom-select {
    background-position: left .7em top 50%, 0 0;
    padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
#custom-select:disabled, #custom-select[aria-disabled=true] {
    color: var(--renfroe-accent-charcoal);
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

#custom-select:disabled:hover, #custom-select[aria-disabled=true] {
    border-color: var(--renfroe-blue);
    border-color: rgb(47, 126, 206);
}

#textingDetails {
    display: none;
    font-size: 14px;
}

@media only screen and (min-device-width: 320px) and (max-device-height : 667px) {
    .renfroe-logo {
        width: 180px;
        height: 70px;
    }

    .login {
        padding-top: 15px;
    }
}