h4 {
  margin-left: 15px;
}

.leftside,
.rightside {
  height: 100vh;
  width: 100%;
}

@media screen and (min-width: 758px) {

  .leftside,
  .rightside {
    height: 100vh;
  }
}

.leftside {
  background: linear-gradient(to bottom, #ffffff, #00649f);
}

.rightside {
  background: white;
  padding: 170px 200px;
}

.accordion-button {
  background-color: #0e507d;
}

/* Add this CSS code to your <style> tag or external CSS file */
input.form-control,
.username {
  border: none;
  border-bottom: 1px solid #ced4da;
  border-radius: 0;
  box-shadow: none;
}

h3 {
  position: relative;
}

h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 13%;
  height: 4px;
  background-color: #0e507d;
}

/* Hide the default checkbox */
input[type="checkbox"] {
  display: none;
}

/* Style the checkbox container */
.checkbox-container {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 3px;
  left: -253px;
  cursor: pointer;
}

/* Style the custom checkbox */
.checkbox-container .checkmark {
  position: absolute;
  top: 6px;
  left: 539px;
  height: 20px;
  width: 20px;
  /* background-color: #eee; */
  border-radius: 50px;
  border: 2px solid white;
}

.checkbox-container .checkmark1 {
  position: absolute;
  top: 6px;
  left: 539px;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50px;
  border: 2px solid #0e507d;
}

/* Style the checked state of the custom checkbox */
.checkbox-container input:checked~.checkmark {
  background-color: #0e507d;
}

/* Style the checkmark inside the custom checkbox */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Display the checkmark for the checked state */
.checkbox-container input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark icon */
.checkbox-container .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.Languageonetap_logo {
  /*margin-top: -145px;
  margin-left: -140px;*/
  margin-top: 0px;
  margin-left: 0px;
  display: block;
}

.LanguageBottom_img {
/*  margin-left: -78px;*/
  /* margin-top: 170px; */
  width: 300px;
/*  height: 370px;*/
}

.language_title {
  color: #114d77;
  font-size: 27px;
}

#progress-bar {
  /* width: 100%; */
  height: 4px;
  background-color: #15486f;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 14%;
  margin-left: 41.8%;
}

.ml462 {
  margin-left: 462px;
}

.ml473 {
  margin-left: 473px;
}

.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, .0);
}

.form-check-input:checked {
  background-color: #0e507d;
  border-color: #fff;
}



















.wrapper {
  display: flex;
  flex-direction: column;
  height: 100px;
  width: 400px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 20px 15px;
  margin-top: 45px;
}

.wrapper .option {
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  padding: 10px 10px;
  border: 1px solid #114D77;
  transition: all 0.3s ease;
}

.wrapper .option .dot {
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}

.wrapper .option .dot::before {
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #114D77;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}

input[type="radio"] {
  display: none;
}

#option-1:checked:checked~.option-1,
#option-2:checked:checked~.option-2 {
 border-color: #9acd0b;
 background: #9acd0b;
}

#option-1:checked:checked~.option-1 .dot,
#option-2:checked:checked~.option-2 .dot {
  background: #fff;
}

#option-1:checked:checked~.option-1 .dot::before,
#option-2:checked:checked~.option-2 .dot::before {
  opacity: 1;
  transform: scale(1);
}

.wrapper .option span {
  font-size: 20px;
  color: rgb(82, 77, 77);
}

#option-1:checked:checked~.option-1 span,
#option-2:checked:checked~.option-2 span {
  color: #fff;
}

.desktopview_showlogo {
  display: none !important;
}

@media only screen and (max-width: 768px) {

  /* .rightside {
      height: 47vh!important;
      width: 100%;       padding: 44px 31px;
  } */
  .rightside {
    height:
      47vh !important;
    width: 100%;
    padding:
      44px 15px;
  }

  .leftside {
    height:
      61vh !important;
    width: 100%;
    margin-top:
      56px;
  }

  .desktopview_showlogo {
    display: block !important;
  }

  .desktopview_showlogo {
    margin-top: -38px !important;
    margin-left: 122px !important;
  }

  .Languageonetap_logo {
    margin-top: -33px !important;
    margin-left: 30px !important;
    margin-bottom: 42px;
    display: none;
  }

  .LanguageBottom_img {
    margin-left: 0px !important;
    width: 100%;
    margin-top: -61px !important;
  }

  .leftside {
    height: 99vh !important;
    width: 100%;
  }
}

/* apps-fileview.texmex_20230622.01_p0
language.css
Displaying language.css. */