body {
  font-family: Arial;
  color: white;
}

.split {
  height: 100%;
  width: 30%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}


.left {
  left: 0;
  width: 70%;
  background-color: #111;
  background: radial-gradient(circle at 24.1% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);
}


@media screen and (max-width: 600px) {
  .split {
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto; /* Enable vertical scrolling */
  padding-top: 20px;
}

.left {
  left: 0;
  width: 100%;
  background-color: #111;
  background: radial-gradient(circle at 24.1% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);

}

}


.right {
    right: 0;
    background-image: url('../index_files/zipwp-image-7828324.jpeg'); /* Replace 'your-image-url.jpg' with the URL or path to your image */
    background-color: red; /* Fallback background color */
  }
  

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 98px;
  border-radius: 50%;
}

/*
.controller_overflowy {
    position: relative;
    height: auto;
    overflow-y: scroll;
}
*/

input[type="range"] {
    width: 100%;
    height: 10px;
    -webkit-appearance: none;
    appearance: none;
    background: #333;
    border-radius: 10px;
}

input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background: #04AA6D; /* Change the background color to green */
    border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #04AA6D; /* Change the background color to green */
    border-radius: 50%;
}





.button_center_div  {
    display: block;
   margin-left: auto;
   margin-right: auto;
   background-color: #ffffff;
   height: 40px;
   width: 180px;
   margin-top: 20px;
   margin-bottom: 15px;
  
  }
  .button_center_div button {
    width: 180px;
    padding: 10px;
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 19px;
    background-color: #04AA6D;
  }
  
  #signin {
    display: block;
    padding : 10px 15px;
    margin: auto;
    background-color: #ffffff;
    min-width: 300px;
    border: 3px solid #ccc;
  }
  
  #signin input[type=text], input[type=email] {
    display: block;
    margin: auto;
    margin-bottom: 30px;
    border: none;
    width: 300px;
    max-width: 800px;
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 0;
    border-bottom: 1px solid #777;
  }
  
  @media screen and (max-width: 600px) {
    #signin input[type=text], input[type=email] {
      display: block;
      margin: auto;
      margin-bottom: 30px;
      border: none;
      width: 300px;
      padding: 8px 20px;
      font-size: 20px;
      border-radius: 0;
      border-bottom: 1px solid #777;
    }
  
  
  
  }
  
  #signin input[type=text]:focus, input[type=email]:focus {
    border-color: blue;
    border-width: medium medium 2px;
  }


.user-input-wrp {
	position: relative;
	width: 100%;
  margin-top: 20px;
  margin-bottom: 30px;
}
.user-input-wrp .inputText{
	width: 100%;
	outline: none;
	border:none;
	border-bottom: 1px solid #777;
 	box-shadow: none !important;
  font-size: 20px;
  margin-bottom: 30px;
}
.inputText:hover {
  background-color: rgb(243,240,237);
}
.user-input-wrp .inputText:focus{
	border-color: blue;
	border-width: medium medium 2px;
}
.user-input-wrp .floating-label {
	position: absolute;
	pointer-events: none;
	top: 10px;
  font-size: 20px;
  padding-left: 8px;
	left: 10px;
	transition: 0.2s ease all;
    color: rgb(31, 25, 25);
  font-style: 'IBM Plex Serif';
  font-family: 'AR One Sans', Tahoma, Geneva, Verdana, sans-serif;
}
.user-input-wrp input:focus ~ .floating-label,
.user-input-wrp input:not(:focus):valid ~ .floating-label{
	top: -9px;
	left: 10px;
	font-size: 12px;
	opacity: 1;
}

@media screen and (min-width: 600px) {
  .user-input-wrp .inputText{
  	 width: 65%;
  	outline: none;
  	border:none;
  	border-bottom: 1px solid #777;
   	box-shadow: none !important;
    font-size: 20px;
  }
  .user-input-wrp .floating-label {
  	position: absolute;
  	pointer-events: none;
  	top: 10px;
    font-size: 22px;
    padding-left: 8px;
  	left: 5px;
  	transition: 0.2s ease all;
    color: rgb(31, 25, 25);
    font-style: 'IBM Plex Serif';
  }

  .user-input-wrp input:focus ~ .floating-label,
  .user-input-wrp input:not(:focus):valid ~ .floating-label{
  	top: -9px;
  	left: 5px;
  	font-size: 12px;
  	opacity: 1;
  }

}



.image-upload {
    display: table;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    margin: auto;
  }

  #image-preview, #image-preview-2 {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover; /* Maintain aspect ratio and fill container */
}


  .image_div {
   /* max-width: 50%;
    float: left;  */
    margin: 0 auto; /* Center the .image_div horizontally */
  }

  /* Clear floats after the columns */
  .image-upload:after {
    content: "";
    display: table;
    clear: both;
  }

  @media screen and (max-width: 600px) {
    .image-upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .image_div {
      max-width: 300px;
      float: none; /* Remove the float to center the .image_div */
      margin: 0 auto; /* Add margin to center the .image_div horizontally */
      margin-bottom: 5px; 
    }
  }

  .preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 200px; /* Fixed height for the container */
    background-color: #c5bebe;
    overflow: hidden;
    position: relative;
  }

  .preview {
    max-width: 100%; /* Allow the image to resize within the container */
    max-height: 100%; /* Allow the image to resize within the container */
    display: block;
    border-radius: 0; /* Remove border-radius to prevent circular appearance */
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
  }

  .overlay:hover {
    opacity: 1;
  }

  .choose-file-button {
    display: none;
    font-family: 'ABeeZee';
    font-size: 20px;
  }

  .overlay:hover .choose-file-button {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .progress {
    margin-top: 5px;
    width: 100%;
    background-color: rgb(121, 178, 75);
  }

  .progress-bar {
    width: 0;
  }

  @media screen and (max-width: 600px) {
    .progress {
      margin-top: 5px;
      width: 100%;
      border-radius: 10px;
      background-color: rgb(121, 178, 75);
    }

    .progress-bar {
      border-radius: 10px;
      width: 0;
    }
  }

  .loader {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-family: 'ABeeZee';
    font-size: 16px;
  }

  .img_icon {
    opacity: 0.8;
  }



  button {
    background-color: #04AA6D;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 30px;
  }
  
  button:hover {
    opacity: 0.8;
  }
  
  #prevBtn {
    background-color: #cccccccb;
  }
h1 {
  font-family: 'Alata', Verdana, Geneva, Tahoma, sans-serif;
}

p {
  font-family: 'Raleway', Verdana, Geneva, Tahoma, sans-serif;
}
  .preapproved_banner h1 {
    padding: 0;
    margin-bottom: 3px;
    color: #2c2b26;
  }

  .preapproved_banner p {
    padding: 0;
    margin-top: 0;
    padding-bottom: 10px;
    color: rgb(66, 62, 49);
  }
  .done_p {
    padding: 0;
    margin-top: 0;
    font-size: 18px;
    color: rgb(66, 62, 49);
  }

  .application_result{
    max-width: 330px;
  }

  .application_result h1 {
    padding: 0;
    margin-bottom: 3px;
    color: #2c2b26;
    font-family: 'Alata', Verdana, Geneva, Tahoma, sans-serif;
  }

  .application_result p {
    padding: 0;
    margin-top: 0;
    padding-bottom: 10px;
    color: rgb(66, 62, 49);
  }
  
  /* checkmark css */
  
  /* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */


.checkmarkdiv {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    color:#000;
    position:relative;
    background-color:#ccc;
    padding-top:0.1em; 
    padding-bottom:0.1em;
}


.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

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

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

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

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}