:root {
    --padding: .5rem;
    --border-radius: .5rem;
}

nav {
    opacity: 1;
}

body {}

main {
    background-image: url('/images/amr-updated-logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

main>section {
    background-color: #fffffff3;
}

main>section>div {
    width: min(90%, 40rem);
    margin: auto;
    padding: 1rem 0rem;
}

h1 {
    text-transform: uppercase;
    font-family: "Lato", sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
}

span {
    color: #1413139E;
}

form label[for] {
    display: block;
    font-family: "Lato", sans-serif;
    font-weight: bolder;
}

form label span {
    color: red;
    font-family: "Lato", sans-serif;
    font-weight: bold;
}

div.form-group {
    margin-bottom: 1rem;
}

div.form-group.email {
    margin-top: 2rem;
}

#country-form-group {
    display: none;
}

input:not([type=file], [type=radio]),
select,
textarea {
    width: 100%;
    border-radius: var(--border-radius);
    padding: var(--padding);
    border: 1px solid gray;
    height: 2.75rem;

    &:focus {
        outline: none;
    }
}


button#submit-btn {
    width: 100%;
    padding: var(--padding);
    color: white;
    font-weight: 500;
    background-color: #7c7c7c;
    border: none;

    &:hover {
        background-color: #6f6f6f;
    }

    &:disabled {
        background-color: #a9a9a9;
    }
}

nav a {
    &:hover {
        color: black !important;
    }

    &.active {
        color: black;
    }
}

nav a.disabled {
    &:hover {
        color: #A79B9B !important;
    }
}

/* style element containing generated country codes */
#code-container {
    display: none;
    box-shadow: 2px 2px 2px gray;
    max-height: 25vh;
    overflow-y: scroll;
    border: 1px solid rgb(65, 65, 19);
    position: absolute;
    top: 4rem;
    left: 0rem;
    background-color: #fff;
}

#code-container ul,
#code-container li {
    margin: 0px;
    padding: 0px;
}

#code-container li {
    cursor: pointer;
    padding: .25rem;
    list-style-type: none;

    &:hover {
        background-color: rgb(217, 216, 216);
    }
}

#code-container li img {
    max-width: 2rem;
}

/* style element showing passport verification status */
div#verifying {
    display: none;
    padding: .5rem;
    font-family: "Lato", sans-serif;
    font-weight: bold;
    border-radius: .5rem;
    margin-top: .5rem;
}

div#verifying.loading {
    border: 1px solid #dbdb0b;
}

div#verifying.error {
    border: 1px solid #cd0505;
}

div#verifying.error p {
    color: #cd0505;
    font-family: 'Optima Medium';
    padding-bottom: 0px;
    margin-bottom: 0px;
}

div#verifying.error strong {
    color: #cd0505;
    font-family: 'Optima Bold';
}

div#verifying.success {
    border: 1px solid #06c43f;
}

span.error {
    color: #cd0505;
    font-family: 'Optima Medium';
    display: none;
}

section#side-video {
    /* border: 1px solid green; */
    display: none;
    min-height: 12rem;
    position: absolute;
    top: 3.1rem;
    width: min(100%, 360px);
    aspect-ratio: 2 / 1;
    right: 0.5rem;
    /* overflow: hidden; */
}

section#side-video video {
    aspect-ratio: 1.8 / 1;
    width: min(100%, 360px);
    /* border: 1px solid green; */
}

section#side-video button {
    position: absolute;
    background-color: red;
    max-width: 6rem;
    top: -2.5rem;
    left: 0px;

    &:hover {
        background-color: rgb(112, 6, 6);
    }
}

button#watch-again-btn {
    border: 2px solid #7c7c7c;
    background-color: #fff;
    color: #7c7c7c;
    display: none;

    &:hover {
        background-color: #434343;
        color: #fff;
    }
}

section#custom-video {
    border: 1px solid red;
    display: flex;
    justify-content: center;
}

div#verifyEmail {
    display: none;
    padding: 1rem;
    font-family: "Lato", sans-serif;
    font-weight: bold;
    border-radius: .5rem;
    margin-top: .5rem;
    position: absolute;
    top: 3.1rem;
    left: 0rem;
    width: 100%;
    min-height: 85vh;
    background-color: #16203eda;
    border: 1px solid #3458c3;
    justify-content: center;
    align-items: center;
}

div#verifyEmail div {
    background-color: #fffffff3;
    width: min(90%, 40rem);
    padding: 2rem;
}

div#verifyEmail div.linkSent,
#emailNotVerified {
    display: none;
}