@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
:root{
--line-border-fill: #97cef7;
--line-border-empty: #454545;
--dark-color: #002a4a;
--light-gray-color: #e3e6e8;
--white-color: #ffffff;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
background: #f7f6f6;
}
.nav {
margin: 0;
padding: 0;
width: 100vw;
height: 100px;
background-color: #101f30;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
}
.footer_content{
max-width: 930px;
width: 90%;
margin: 0 auto;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ccc;
padding: 20px 0 30px 0;
display: block;
text-align: center;
color: #454545;
font-size: 12px;
}
a{
color: #0069ba;
font-size: 12px;
}
.container{
width:90%;
max-width: 600px;
height:650px;
margin: 5rem auto;
background-color: var(--white-color);
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 5px;
position: relative;
align-items: center;
justify-content: center;
}
h3{
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
text-align: center;
margin-bottom: 1rem;
color: var(--dark-color);
font-size: 2rem;
}
h4{
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
text-align: center;
margin-bottom: 1rem;
color: var(--line-border-fill);
font-size: 1rem;
}
p{
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
text-align: center;
margin-bottom: 1rem;
color: var(--line-border-empty);
font-size: 1rem;
}
.container form{
width: 90%;
max-width: 550px;
position: absolute;
top: 100px;
left: 20px;
font-family: inherit;
transition: 0.5s ease-in;
}
form div button{
width: 30%;
}
form input{
width: 100%;
border: 1px solid var(--light-gray-color);
border-radius: 5px;
background: transparent;
font-family: inherit;
accent-color: #0069ba;
}
form input:focus{
outline: none;
border: 1px solid var(--dark-color);
accent-color: #0069ba;
}
.btn_box{
width: 100%;
margin: 30px auto;
text-align: center;
}
form button{
width: 110px;
height: 50px;
margin: 0 10px;
background-color: #0069ba;
border: solid;
border-width: 3px;
border-color: #0069ba;
outline: none;
cursor: pointer;
color:#ffffff;
font-size: 16px;
font-family: inherit;
border-radius: 30px;
}
form button:hover{
background-color: #003f70;
color: #ffffff;
border: solid;
border-width: 3px;
border-color: #003f70;
}
form button:active{
background-color: #003f70;
border: solid;
border-width: 3px;
border-color: #003f70;
color: #ffffff;
}

.progress_container{
width:90%;
max-width: 550px;
display: flex;
justify-content: space-between;
margin: 2rem auto;
position: relative;
}
.progress_container::before{
content: '';
background-color: var(--light-gray-color);
position: absolute;
top: 50%;
left: 0;
height: 4px;
width: 100%;
z-index: 1;
}
.progress{
background-color: var(--line-border-fill);
position: absolute;
top: 50%;
left: 0;
height: 4px;
width: 0%;
z-index: 1;
transition: 0.4s ease-in;
}
.circle{
background-color: var(--light-gray-color);
height: 1px;
width: 1px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
z-index: 1;
transition: 0.4 ease;
}
.circle.active{
border-color: var(--line-border-empty);
color: var(--white-color);
background-color: var(--line-border-fill);
}
.list{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.list2{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 0px;
width: 60%;
margin-left: 20%;
}
.checkbox{
border: 2px solid #454545;
color: #454545;
text-align: center;
padding: 10px;
border-radius: 5px;
}
.checkbox:hover{
border: 2px solid #454545;
background-color: #f7f6f6;
color: #141e2e;
}
.checkbox:checked{
border: 2px solid #97cef7;
background-color: #f1f8ff;
color: #454545;
}

.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 10px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
border: 2px solid #454545;
background: #ffffff;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #04AA6D;
cursor: pointer;
}
.textField{
margin-top: 20px;
padding: 15px 10px;
text-align: center;
border: 2px solid #454545;
border-radius: 5px;
width:60%;
margin-left: 20%;
vertical-align: center;
}
.dropdown{
margin-top: 10px;
margin-bottom: ;
padding: 15px 10px;
text-align: center;
border: 2px solid #454545;
border-radius: 5px;
width:60%;
margin-left: 20%;
vertical-align: center;
}
.startDate{
margin-top: 10px;
padding: 15px 10px;
text-align: center;
border: 2px solid #454545;
border-radius: 5px;
width:60%;
margin-left:20%;
vertical-align: center;
}
.checked:checked + .checkbox {
border: 2px solid #97cef7;
background-color: #f1f8ff;
color: var(--line-border-fill);
}