input[type="submit"] {
  width: 120px;
  height: 44px;
  margin: auto;
  cursor: pointer;
  background-color: #2277F7;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: 500;
}

#senddiv, #senddivLogin {
  display: flex;
  flex-flow: column;
  align-items: center;
}

@media screen and (max-width: 876px)   {    

  #senddiv, #senddivLogin {
    
    bottom: 16px;
    left: 0;
    right: 0;
    margin: auto;
    width: calc(100vw - 32px);
    padding: 0;
  }

  input[type="submit"] {
    width: 100%;
    height: 44px;
  }
}




.form {
  display: flex;
  flex-flow: column;
  max-width: 600px;
  width: 100%;
  margin: auto;
  padding-top: 32px;
}

.form input[type="text"], .form input[type="password"], .form input[type="date"], .form textarea {
  border-radius: 8px;
  border: 1px solid #d8e1ee;
  background-color: #f8f9fa;
  margin-bottom: 16px;
  outline: none;
}

.showhide {
  position: relative;
  top: -60px;
  left: 380px;
  width: 24px;
}

@media screen and (max-width: 876px)   {
  .form {
    padding: 32px 16px 16px 16px;
    width: unset;
  }
  .showhide {
    left: 90%;
  }
}

.input-container {
  position: relative;
}

.input-container input, .input-container input:focus, .input-container textarea, .input-container textarea:focus {
  padding: 20px 16px 0 16px;
  color: #01122c;
  font-weight: 500;
  font-size: 14px;
  width: 100%; 
  box-sizing: border-box;
  height: 56px;
}

.form textarea, .form textarea:focus  {
  height: 118px;
  line-height: 30px;
}

.input-container input:focus, .input-container textarea:focus {
  border: 2px solid #2277F7;
}

.input-container label {
  position: absolute;
  top: 17px;
  left: 21px;
  transition: .3s;
  color: #bfc3ca;
  font-size: 14px;
}

.input-container input:not(:placeholder-shown) + label, .input-container input:focus + label {
    top: 5px;
    font-size: 12px;
}

.input-container textarea:not(:placeholder-shown) + label, .input-container textarea:focus + label {
  top: 5px;
  font-size: 12px;
}

.input-container input:read-only  {
  background-color: unset;
}

textarea {
  overflow: hidden;
  resize: none;
}

@media screen and (max-width: 876px)   {
  textarea {
    overflow: auto;
    resize: unset;
  }
}

.error, .helperForm {
  color: #EB5545;
  font-size: 12px;
  position: relative;
  top: -12px;
  left: 20px;
  font-weight: 400;
}

.helperForm {
  color:#677180;
  top: -20px;
  left: 20px;
}

.helperInputContainer .error {
  left:0;
}

.dnone {
  display: none !important;
}

.errorInputBorder {
  border: 2px solid #EB5545 !important;
}



.helperInputContainer {
  height: 108px !important;
}

.helperInputContainerRemplace {
  height: 90px !important;
}


/* Hide the default checkbox */
.checkboxdiv input[type="checkbox"] {
  display: none;
}

/* Create a new custom checkbox */
.checkboxdiv input[type="checkbox"] + label {
  position: relative;
  padding-left: 35px; /* Adjust this value to position the text */
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400 ;
  color: #01122C;
}

/* Custom checkbox appearance */
.checkboxdiv input[type="checkbox"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #DDE5EF;
  border-radius: 20%; /* This will make the checkbox round */
  background: #F0F4F9;
}

/* Custom checkbox checked state */
.checkboxdiv input[type="checkbox"]:checked + label:before {
  background-color: #2277F7;
  border: none;
}

/* Create a tick mark */
.checkboxdiv input[type="checkbox"]:checked + label:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  z-index: 1;
}

.checkboxdiv {
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
}

input[type=checkbox].errorInputBorder:not(:checked)+label:before {
  border: 2px solid #EB5545;
}

#sendbtn:disabled {
  background-color: #F2F3F4;
  color: #BFC3CA;
}

.tos {
  padding: 0 32px 32px 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #677180;
}
.tos a {
  color: #01122C;
  text-decoration: none;
}

.showhide560 {
  left: 560px !important;
  top: -40px !important;
}

@media screen and (max-width: 876px)   {
  .form {
    padding: 32px 16px 16px 16px;
    width: unset;    
    min-height: calc(var(--vh, 1vh) * 100 - 142px);
  }
  #senddiv, #senddivLogin {
    margin: auto 0 0 0;
  }
  body {
    height: unset !important  ;
  }

  .showhide560 {
    left: calc(100% - 40px) !important;
  }
}