/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');*/

/*
Inter Font
font-family: 'Inter', sans-serif;
font-weight: 100,200,300,400,500,600,700,800,900;

Montserrat Font
font-family: 'Montserrat', sans-serif;
font-weight: 700;
*/

.modal-backdrop {
    /*hides the default modal shadow*/
    display: none;
}

* {
    padding: 0px;
    margin: 0px;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: transparent;
    overflow-x: hidden;
}

#body-scroll {
    width: 100%;
    height: 100%;
}

/* START OF GENERAL STYLE */
p {
    padding: 0px;
    margin: 0px;
}

h1 {
    padding: 0px;
    margin: 0px;
}

h2 {
    padding: 0px;
    margin: 0px;
}

h3 {
    padding: 0px;
    margin: 0px;
}

h4 {
    padding: 0px;
    margin: 0px;
}

h5 {
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
}

hr {
    opacity: .2!important;
    margin: 0px;
}

.color-red {
    color: #f50202;
}
/* END OF GENERAL STYLE */

/* START OF FLAG STYLE */
.vodiapicker {
    display: none;
}

#a { 
    padding-left: 0px;
}

#a img, .btn-select img {
    width: 30px;
    border-radius: 4px;
    margin-top: -4px;
    margin-left: 10px;
}

#a li {
    list-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

#a li:hover {
    background-color: #F4F3F3;
}

#a li img {
    margin: 5px;
}

#a li span, .btn-select li span {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .4px;
    color: #1d1d1d;
    margin: 0px 10px;
}

/* ITEM LIST */

.b {
    display: none;
    width: 100%;
    max-width: 150px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 10px;
    position: fixed;
    bottom: 65px;
    background-color: #fcfcfc;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

#a {
    margin-bottom: 0px!important;
}

#a li:hover {
    background-color: transparent!important;
    cursor: pointer;
}

.open {
    display: show !important;
}

.btn-select {
    width: 100%;
    max-width: 350px;
    height: 40px;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.btn-select li {
    list-style: none;
    float: left;
    padding-bottom: 0px;
}

.btn-select:hover li {
    margin-left: 0px;
}

.btn-select:hover {
    background-color: #F4F3F3;
    border: 1px solid transparent;
    box-shadow: inset 0 0px 0px 1px #ccc;
}

.btn-select:focus {
    outline:none;
}

.lang-select {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999999;
}
/* END OF FLAG STYLE */

.bg {
    background-color: transparent;
}

.section-height {
    height: 100vh;
}

.account-input-box {
    display: none;
    text-align: center;
    /* border: 1px solid #1f1f1f; */
    background-color: #151515;
    border-radius: 1rem;
    width: 100%;
    max-width: 525px;
    backdrop-filter: blur(6px);
    padding: 3.5rem;
    margin: auto;
    color: #fff;
}

.account-input-box form img {
    width: 100%;
    max-width: 175px;
}

.account-input-box form h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 2.5rem 0px 2rem 0px;
}

.account-input-box form .text-left {
    text-align: left;
}

.account-input-box form label {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .5px;
    color: #c0c0c0;
    margin: 1.5rem 0px .5rem 0px;
}

.account-input-box form input {
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: .75rem;
    width: 100%;
    height: 65px;
    padding: .25rem 1.25rem;
}

.account-input-box form button {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .25px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    border-radius: .75rem;
    background-color: #f50202;
    opacity: 1;
    width: 100%;
    height: 65px;
    padding: 1rem;
    margin: 2rem 0px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-input-box form button:hover {
    transition: .3s;
    opacity: .8;
}

input[type=text]:focus {
    outline: 2px solid #f50202;
}

input[type=password]:focus {
    outline: 2px solid #f50202;
}

.account-input-box form .profile-picture {
    border-radius: 100rem;
    width: 100%;
    max-width: 100px;
    height: 100px;
}

.account-input-box form .profile-tag {
    font-size: 1rem;
    font-weight: 500;
    margin: 1rem 0px 2rem 0px;
    color: #fff;
}

.account-input-box form .profile-title {
    font-size: 1.5rem;
    margin: 0rem 0px 1rem 0px;
}

.account-input-box form .profile-sub-title {
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    letter-spacing: .5px;
    margin: 0rem 0px 2rem 0px;
}

.account-input-box form .profile-highlight {
    color: #ffb02e;
    font-weight: 500;
}

#searchBtn:disabled {
    background-color: #4d0000;
    color: #808080;
}

#searchBtn:disabled:hover {
    cursor:no-drop;
}

.account-input-box form .yesBtnStep2 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .25px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    border-radius: .75rem;
    background-color: #f50202;
    opacity: 1;
    width: 100%;
    height: 65px;
    padding: 1rem;
    margin: 2rem 0px 0px 0px;
}

.account-input-box form .yesBtnStep2:hover {
    transition: .3s;
    opacity: .8;
}

.account-input-box form .noBtnStep2 {
    background-color: transparent;
    border: 2px solid #ffb02e;
    color: #fff;
    margin: 1rem 0rem 0px 0px;
}

.account-input-box form .noBtnStep2:hover {
    transition: .3s;
    background-color: #ffb02e;
}

.modal-dialog {
    height: 100vh!important;
    display: flex!important;
    margin: 0px auto !important;
    padding: 0px !important;
}

.modal-content {
    width: 100%!important;
    max-width: 500px!important;
    background-color: #fff!important;
    margin: auto!important;
    border-radius: 1.5rem;
    padding: 3.5rem;
    text-align: center;
}

.yesHighlight {
    font-weight: 700;
    color: #f50202;
}

.yesModalContent h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    padding: 0px 0px 2rem 0px;
    border-bottom: 1px solid #dbdbdb;
}

.yesModalContent p {
    font-size: 1rem;
    font-weight: 500;
    padding: 1.75rem 0px 0px 0px;
    line-height: 1.75rem;
}

.botProfileBtn {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .25px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    border-radius: .75rem;
    background-color: #f50202;
    opacity: 1;
    width: 100%;
    height: 65px;
    padding: 1rem;
    margin: 2rem 0px 0px 0px;
}

.botProfileBtn:hover {
    transition: .3;
    opacity: .8;
}

.alreadySentBtn {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .25px;
    background-color: #ffb02e;
    border-radius: .75rem;
    color: #fff;
    border: none;
    width: 100%;
    height: 65px;
    padding: 1rem;
    margin: 1rem 0px 0px 0px;
    text-transform: uppercase;
}

.alreadySentBtn:hover {
    transition: .3;
    opacity: .8;
}

.account-input-box form .finalStepImg {
    position: absolute;
    top: -150px;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 100%;
    max-width: 350px;
    z-index: -1;
}

.account-input-box form .finalStepTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.account-input-box form .finalStepSubtitle {
    color: #fff;
}

.account-input-box form .botProfileBtn {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .25px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    border-radius: .75rem;
    background-color: #f50202;
    opacity: 1;
    width: 100%;
    height: 65px;
    padding: 1rem;
    margin: 2rem 0px 0px 0px;
}

.account-input-box form .botProfileBtn:hover {
    transition: .3;
    opacity: .8;
}

.account-input-box form .alreadySentBtn {
    font-weight: 600;
    letter-spacing: .25px;
    background-color: #ffb02e;
    border-radius: .75rem;
    color: #fff;
    border: none;
    width: 100%;
    height: 65px;
    padding: 1rem;
    margin: 1rem 0px 0px 0px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-input-box form .alreadySentBtn:hover {
    transition: .3;
    opacity: .8;
}

.account-input-box form .step3BackDrop {
    width: 100%;
    height: 400px;
    background-color: #0000;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 1.5rem;
    border-top: 1px solid #1f1f1f30;
}