*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: box-shadow var(--main-transition, .3s) linear;
    -webkit-transition: box-shadow var(--main-transition, .3s) linear;
    -moz-transition: box-shadow var(--main-transition, .3s) linear;
    -ms-transition: box-shadow var(--main-transition, .3s) linear;
    -o-transition: box-shadow var(--main-transition, .3s) linear;
    user-select: none;
}

body {
    font-family: "Open Sans", sans-serif;
    background-color: var(--background-body, #e5e5e5fc);
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    display: block;
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}

*:focus {
    outline: none;
}

img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: cover;
}

input,
button,
textarea,
select {
    font: inherit;
    padding: 0;
    margin: 0;
    border: 0;
    display: block;
}

button {
    cursor: pointer;
    background-color: transparent;
}

/* end reset elements */
/* start sign in page */
#containerSignIn section {
    max-width: 1500px;
    min-height: 100vh;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media (max-width:767.98px) {
    #containerSignIn section {
        justify-content: flex-start;
    }

}

#containerSignIn section .renova {
    margin: 1rem auto;
    font-family: "Rubik Doodle Shadow", system-ui;
    flex: 0 1 auto;
    align-items: flex-end;
    gap: .25rem;
    cursor: pointer;
    direction: ltr;
    unicode-bidi: embed;
}

#containerSignIn section .renova i {
    color: var(--color-logo, rgb(255, 214, 139));
    font-size: 3.5rem;
}

#containerSignIn section .renova span {
    color: var(--color-logo, rgb(255, 214, 139));
    font-size: 2.5rem;
}

/* start form sign in */
#containerSignIn section .formSign {
    width: 50%;
    max-width: 30rem;
    padding: .25rem;
    background-color: white;
    border: .006rem solid rgb(246, 230, 125);
    border-radius: .5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    -ms-border-radius: .5rem;
    -o-border-radius: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media (max-width:768px) {
    #containerSignIn section .formSign {
        width: 95%;
    }
}

#containerSignIn section .formSign#formSignIn.hidden,
#containerSignIn section .formSign#formSignUp.hidden {
    display: none;
}

#containerSignIn section .formSign#formSignIn.visible,
#containerSignIn section .formSign#formSignUp.visible {
    display: flex;
}

#containerSignIn section .formSign span.signIn {
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: rgb(73, 72, 72);
    font-size: 2rem;
    font-weight: 600;
    text-transform: capitalize;
}

#containerSignIn section .formSign .error {
    width: 70%;
    padding: .5rem;
    margin: .5rem auto;
    color: red;
    font-size: .8rem;
    text-transform: capitalize;
    text-align: center;
    border: .03rem solid red;
    display: none;
}

#containerSignIn section .formSign form {
    width: 100%;
    max-width: 30rem;
    padding: .25rem;
    overflow: hidden;
}

#containerSignIn section .formSign label {
    width: 70%;
    display: block;
    padding: .5rem 0;
    margin-top: .25rem;
    margin-left: auto;
    margin-right: auto;
    color: rgb(53, 52, 52);
    font-size: .9rem;
    text-transform: capitalize;
}

#containerSignIn section .formSign input {
    width: 70%;
    padding: .25rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5rem;
    font-size: 1rem;
    background-color: rgb(248, 252, 255);
    border: .006rem solid rgb(200, 200, 200);
    border-radius: .25rem;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    -ms-border-radius: .25rem;
    -o-border-radius: .25rem;
}
#containerSignIn section .formSign input#phone{
flex:1;
min-width: 70%;
} 
#containerSignIn section .formSign input[type='submit'] {
    width: fit-content;
    padding-left: .75rem;
    padding-right: .75rem;
    background-color: blanchedalmond;
    margin-top: 1rem;
    font-size: .9rem;
    text-transform: capitalize;
    cursor: pointer;
}

#containerSignIn section .formSign input[type='submit']:hover {
    color: rgb(81, 81, 81);
    background-color: rgb(251, 212, 153);
}

#containerSignIn section .formSign #createNewAccount {
    width: 70%;
    padding: .5rem;
    margin: 1rem auto;
    font-size: .8rem;
    text-transform: capitalize;
    text-align: center;
    border: .006rem solid rgb(227, 226, 226);
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    cursor: pointer;
}

#containerSignIn section .formSign #createNewAccount:hover {
    color: rgb(114, 114, 114);
    border-color: rgb(194, 193, 193);
}

/* end form sign in */
/* start form sign up */
#containerSignIn section #formSignUp {
    display: none;
}

#containerSignIn section #formSignUp #email.redError,
#containerSignIn section #formSignUp #userName.redError,
#containerSignIn section #formSignUp #password.redError {
    border-color: red;
}

#containerSignIn section #formSignUp #email.success,
#containerSignIn section #formSignUp #userName.success,
#containerSignIn section #formSignUp #password.success {
    border-color: green;
}

#containerSignIn section .formSign#formSignUp #haveAccount {
    margin: 1rem auto;
    font-size: .9rem;
}

#containerSignIn section .formSign#formSignUp #haveAccount::first-letter {
    text-transform: uppercase;
}

#containerSignIn section .formSign#formSignUp #haveAccount span#sign {
    color: rgb(250, 146, 2);
    cursor: pointer;
}

#containerSignIn section .formSign#formSignUp #haveAccount span#sign:hover {
    color: rgb(2, 156, 156);
}

#containerSignIn section .formSign#formSignUp #haveAccount span#sign.hover {
    color: rgb(2, 156, 156);
}

/* end form sign up */
/* start intl-tel-input */
#containerSignIn section .formSign#formSignUp .contain{
    width:70%;
    margin: auto;
}
.iti {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.iti input.iti__tel-input,
.iti input.iti__tel-input[type=text],
.iti input.iti__tel-input[type=tel] {
    padding-left: .25rem !important;
}

.iti input.iti__tel-input[type=text] {
    flex: 1;
}

.iti input.iti__tel-input[type=tel]::placeholder {
    font-size: .8rem;
}

.iti__country-container {
    flex-basis: 20%;
    padding: .28rem .25rem;
    position: relative;
    background-color: rgb(248, 252, 255);
    border: .006rem solid rgb(200, 200, 200);
    border-radius: .25rem;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    -ms-border-radius: .25rem;
    -o-border-radius: .25rem;
}

.iti__selected-country-primary {
    padding: 0;
}

.iti .iti__selected-dial-code {
    font-size: .85rem;
}

.iti--inline-dropdown .iti__dropdown-content {
    margin-top: -1.3rem;
    left: 0;
}

.iti--inline-dropdown .iti__dropdown-content li {
    font-size: .8rem;
}

.iti--inline-dropdown .iti__dropdown-content input {
    width: 100% !important;
}
.iti__search-input{
    padding: .5rem;
}
.iti--fullscreen-popup.iti--container {
    padding: 0;
}
/* end intl-tel-input */
/* start media root */
@media (min-width:1400px) {
    :root {
        font-size: 18px;
    }
}

@media (min-width:992px)and (max-width:1199.98px) {
    :root {
        font-size: 16px;
    }
}

@media(max-width:991.98px) {
    :root {
        font-size: 15px;
    }
}

/* end  media root */
/* end sign page */