html {
    height: 100%;
    width: 100%;
    padding:0%;
    margin: 0%;
    overflow-x: hidden;
}
body{
    background-image: url("/static/registration/images/StageScreen_BG.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    height: 100%;
}
@media only screen and (max-width: 768px) {
    body{
        background-size:400%;
    }
  }
  

#information_privacy_background{
    position: fixed;
    top: 13vh;
    left: 5vw;
    font-size: 6vw;
    color: white;
    font-weight: 600;
    z-index: -1;
    line-height: 90%;
}

@media only screen and (max-width: 768px) {
    #information_privacy_background{
        top: 20vh;
        left: 0.5vw;
        font-size: 13vw;
        line-height: 90%;
    }
  }

.dlnLogo, .dlnLogo-2{
    width: auto;
    height: 70%;
}

@media only screen and (max-width: 768px) {
    .dlnLogo, .dlnLogo-2{
        width: 18vw;
        height: auto;
    }
  }


header{
    height: 20%;
}

header div{
    height: 100%;
}

.main-content{
    height: 80%;
}

@media only screen and (max-width: 768px) {
    .header{
        height: auto;
    }
    .main-content{
        height: auto;
        margin-top: 20%;
    }
  }

.header-title{
    font-size: 2.1rem;
    font-weight: 600;
    padding: 0%;
    padding-left: 16%;
}
@media only screen and (max-width: 1700px) {
    .header-title{
        font-size: 1.8rem;
    }
  }
@media only screen and (max-width: 1200px) {
    .header-title{
        font-size: 1.3rem;
    }
  }
@media only screen and (max-width: 768px) {
    .header-title{
        font-size: 1.8rem;
        font-weight: 600;
        padding: 7%;
    }
  }





.content-text{
    font-size: 1.5rem;
}

@media only screen and (max-width: 1700px) {
    .content-text{
        font-size: 1.2rem;
    }
  }
@media only screen and (max-width: 1200px) {
    .content-text{
        font-size: 0.8rem;
    }
  }


.inputrow{
    padding-left: 2%;
}

@media only screen and (max-width: 768px) {
    .content-text{
        font-size: 3.5vw;
        padding: 5% !important;
    }
  }

.radio-container{
    font-size: 1.5rem;
    font-weight: 600;
}

@media only screen and (max-width: 1700px) {
    .radio-container{
        font-size: 1.1rem;
    }
  }
@media only screen and (max-width: 1200px) {
    .radio-container{
        font-size: 0.7rem;
    }
  }

@media only screen and (max-width: 768px) {
    .radio-container{
        font-size: 3.5vw;
        padding-left: 15% !important;
    }
    /* input[type="checkbox"]{
        min-width: 3vw !important;
        min-height: 3vw !important;
    } */
  }

.submit-button.disabled{
    background-color: #595959 !important;
}

.submit-button{
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    width: 20%;
    background-color: #145096 !important;
    border: none;
    opacity: 1 !important;
    margin-top: 7%;
}

@media only screen and (max-width: 768px) {
    .submit-button{
        width: 35%;
        border-radius: 0%;
        margin-bottom: 15%;
        padding: 2% 3%;
        background-color: #145096 !important;
        border: none;
        opacity: 1 !important;
        margin-top: 7%;
    }
  }






.radio-checkmark {
    position: absolute;
    background-color:white;
    top: 10%;
    left: 0;
    height: 2vw;
    width: 2vw;
    border-style: solid;
    border-color: #aaaaaa;
    border-width: thin;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .radio-checkmark {
    background-color: #ccc;
}

.radio-container input:focus ~ .radio-checkmark{
    border-color: black;
    border-width: 2px;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio-checkmark {
    background-color: white;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radio-checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .radio-checkmark:after {
    margin: 0.2vw;
    width: 1.5vw;
    height: 1.5vw;
    background: #438dc8;
}

.radio-container {
    display: block;
    position: relative;
    padding-left: 2.5vw;
    margin-bottom: 1vw;
    color: #4d4d4d;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
    /* height: 2vw; */
    /* width: 2vw; */
    position: absolute;
    opacity: 0;
    cursor: pointer;
    color: #7f7f7f;
}

@media only screen and (max-width: 768px) {
    .radio-checkmark {
        position: absolute;
        background-color:white;
        top: 10%;
        left: 0;
        height: 10vw;
        width: 10vw;
        border-style: solid;
        border-color: #aaaaaa;
        border-width: thin;
    }
    .radio-container .radio-checkmark:after {
        margin: 1vw;
        width: 8vw;
        height: 8vw;
        background: #438dc8;
    }
  }

.blue-item{
    background-color: #145096;
}

.blue-item h5{
    color: white;
    font-size: 0.9vw;
    padding-left: 6%;
    padding-top: 1%;
    padding-bottom: 1%;
    width: 94%;
}

@media only screen and (max-width: 768px) {
    .blue-item h5{
        color: white;
        font-size: 2.7vw;
        padding-left: 6%;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-right: 3%;
        width: 94%;
    }
  }

.pink-number{
    background-color: #bda7ce;
    height: 60%;
    width: 6%;
    font-size: 0.8vw;
    font-weight: bold;
}

@media only screen and (max-width: 768px) {
    .pink-number{
        height: 60%;
        width: 10%;
        font-size: 2.3vw;
    }
  }

  @media only screen and (max-width: 768px) {
    .sign-form{
        flex-direction: column;
    }
  }

.sign-form label{
    font-size: 0.8vw;
    font-weight: bold;
}
.sign-form input{
    font-size: 0.8vw;
    font-weight: bold;
    border: 1px black solid;
    border-radius: 0px;
}

@media only screen and (max-width: 768px) {
    .custom-radio-2{
        flex-wrap: wrap;
    }
    .sign-form label{
        font-size: 2.8vw;
        font-weight: bold;
    }
    .sign-form input{
        font-size: 2.8vw;
    }
    .custom-radio-2 .custom-options-2 label{
        width: 70vw !important;
        height: 2vw;
        margin-top: 10vw;
    }
    .custom-radio-2 .custom-options-2 label input{
        white-space: normal;

    }
    .accommodations .honesty-text input{
        margin-top: 10vw;
        font-size: 2.9vw !important;
    }
  }

.honesty-text{
    font-size: 0.9vw;
    font-weight: 600;
}

@media only screen and (max-width: 768px) {
    .honesty-text{
        font-size: 2.7vw;
        font-weight: 600;
    }
  }

.custom-options-2{
    white-space: nowrap;
    margin-right: 5%;
}

.custom-options-2 .radio-checkmark{
    top: -20% !important;
}

.custom-options-2 .textInput{
    font-size: 0.8vw;
    font-weight: bold;
    border: 1px black solid;
    border-radius: 0px;
    width: auto;
    /* margin-left: 5%; */
}

.custom-options-2 .radio-container{
    margin-bottom: 0%;
}