.hero {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
  linear-gradient(360deg, #3DB9CC -21.11%, #1157A6 79.05%);
  height: 456px;
  font-family: 'Open Sans';

  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  padding-right: 7rem;
}
.input {
  border: 1.5px solid transparent;
}
input[type="password"]
{
   border: 1.5px solid transparent;
}
.wrap-icons {
  background: linear-gradient(
    180deg, #FFFFFF 48.96%, #D0E1F4 100%);
    align-items: center;
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  cursor: pointer;
  justify-content: center;
  margin-top: 16px;
  width: 70px;
  height: 70px;
  margin-left: 40px;
}
.wrap-icons-paragraph {
  font-family: 'Open Sans';
  font-style: normal !important;
  font-weight: bold !important;
  font-size: 16px !important;
  line-height: 24px !important;
  text-align: center !important;
  cursor: pointer;
  color: #FFFFFF !important;
  position: absolute;
  margin-top: 7rem;
}

body.front-end .input-label input,
body.front-end .input-label select {
  width: 100%;
  height: 49px;
  font-size: 16px !important;
  font-weight: bold;
  color: #9a9a9a ;
  border: 1.5px solid transparent;
}
body.front-end .input-label input::placeholder {
  color: #9a9a9a  !important;
  
}
.form-item input::placeholder {
  color: #9a9a9a  !important;
}
@media (max-width: 767px) {
  .button-submit {
    margin-top: 8px !important;
  }
  .button-submit-disabled {
    margin-top: 8px !important;
  }
  .text-recaptcha {
    text-align: center !important;
  }
  .pad-kontak-kami {
    padding-right: 13px;
  }
  .hero .title {
    margin-left: 0 !important;
  }
  section.content {
    min-height: 300px;
    position: relative;
    padding-right: 0px !important;
  }
  .hero .title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    line-height: 28px;
    color: white;
    margin-left: 0rem;
    margin-bottom: 48px;
  }
.wrap-icons{
  width: 50px;
  height: 50px;
  margin-left: 12px;
  cursor: pointer;
}
.wrap-icons-paragraph {
  font-family: 'Open Sans';
  font-style: normal !important;
  font-weight: bold !important;
  font-size: 12px !important;
  line-height: 24px !important;
  text-align: center !important;
  color: #FFFFFF !important;
  position: absolute;
  margin-top: 5rem;
}
.hero img.icon {
  width: 30px !important;
  height: 30px !important;
}
.hero img.icon-email {
  width: 40px !important;
  height: 40px !important;
}
.hero img.icon-phone-bca{
  width: 30px !important;
  height: 30px !important;
}
.question-container { 
  width: 100% !important;
}
}
@media ( min-width: 768px) and (max-width: 1024px ) {
  .hero {
    height: 400px;
    padding-right: 0px;
  }
  section.content {
    min-height: 300px;
    position: relative;
    padding-right: 0px !important;
  }
}
@media (max-width: 768px) {
  .hero {
    height: 400px;
    padding-right: 0px;
  }
  section.content {
    min-height: 300px;
    position: relative;
    padding-right: 0px !important;
  }
  .question-container span {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #535353;
    margin-left: 0px;
    padding-top: 24px;
}
}
.hero .hero-content {
  margin-top: auto;
  margin-bottom: 80px;
}

.hero .title {
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  line-height: 28px;
  color: white;
  margin-left: 3rem;
  margin-bottom: 48px;
}
.hero img.icon {
  width: 44px;
  height: 44px;
}
.hero img.icon-email {
  width: 62px;
  height: 62px;
}
.hero img.icon-phone-bca{
  width: 48px;
  height: 48px;
}
.question-wrapper {
  left: 0;
  top: -32px;
}
.question-wrapper .question-container {
  width: 688px;
  border-radius: 32px;
  border: 3px solid #F4F4F4;
  /* border-image-source: linear-gradient(0deg, #7D6CD7BB, #7D6CD7BB),
  linear-gradient(360deg, #BEE8EE -9.31%, #F4F4F4 80.48%); */
}
@media (max-width: 768px) {
  .question-container {
    flex-direction: column;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
  .question-container button {
    margin-top: 20px;
  }
}
.question-container span {
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  color: #535353;
  margin-left: 20px;  
}
.question-container .button-here {
  background: linear-gradient(88.56deg, #007F9F 41%, #05A5B3 82.31%);
  border-radius: 28px;
  font-weight: bold;
  font-size: 18px;
  width: 168px;
  color: white;
  text-align: center;
  border: none;
}
.question-container .button-here:hover {
  background: linear-gradient(88.56deg, #007F9F 41%, #05A5B3 82.31%);
  border-radius: 28px;
  font-weight: bold;
  font-size: 18px;
  width: 168px;
  color: white;
  text-align: center;
  border: 1.5px solid #007F9F;
}
.question-container .button-here:visited {
  background: linear-gradient(88.56deg, #007F9F 41%, #05A5B3 82.31%);
  border-radius: 28px;
  font-weight: bold;
  font-size: 18px;
  width: 168px;
  color: white;
  text-align: center;
  border: 2px solid #007F9F;
}

.form-component {
  padding: 32px;
  color: #535353;
}
.form-component .title {
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  margin-bottom: 18px;
}
.form-component .gap {
  grid-gap: 16px;
}

section.content {
  min-height: 300px;
  position: relative;
  padding-right: 7rem;
}

.form input {
  border: none !important;
  
}
body.front-end .form select {
  border: none;
  width: 100%;
  font-size: 14px !important;
  font-weight: bold;
  color: #3A3A3A !important;
}
body.front-end .form input:focus,
body.front-end .form select:focus,
body.front-end .form textarea:focus {
  border: none !important;
  outline: none;
}
body.front-end .form textarea {
  resize: none;
  font-size: 12px;
}

.input-label {

  box-sizing: border-box;
  display: block;
  /* form shadow */
  border: 1.5px solid transparent;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  
  color: #A0A0A0;
  padding: 5px 17px;
  margin-bottom: 1px !important
}
.input-label-karir {
  background: #ffffff;
}
.input-label:hover {
  border: 1.5px solid rgba(126, 208, 221, 0.6);
  box-sizing: border-box;
  display: block;
  /* form shadow */

  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  
  color: #A0A0A0;
  padding: 5px 17px;
  margin-bottom: 1px !important
}


@media (max-width: 768px) {
  .input-label {
    grid-column: span 2 / span 2;
  }   
  .input-label-karir {
    grid-column: span 2 / span 2;
  }
}
.input-label > div {
  font-size: 11px;
    color: #3a3a3a;
    position: absolute;
    top: -7px;
    padding: 0px 10px;
    background-color: #ffffff;
}
body.front-end .input-label input,
body.front-end .input-label select {
  width: 100%;
  font-size: 16px !important;
  font-weight: bold;
  color: #3A3A3A !important;
}

.button-submit {
  background: linear-gradient(88.56deg, #007F9F 41%, #05A5B3 82.31%);
  border-radius: 28px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: none;

  width: 200px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 !important;
  margin-top: 36px;
}
.button-submit-account {
  background: #3DB9CC;
border-radius: 28px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: none;

  width: 200px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 !important;
  margin-top: 36px;
}
.button-submit:hover {
  background: linear-gradient(88.56deg, #007F9F 41%, #05A5B3 82.31%);
  border-radius: 28px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: 1.5px solid #007F9F !important;
  width: 200px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 !important;
  margin-top: 36px;
}
.button-submit:visited {
  background: linear-gradient(88.56deg, #007F9F 41%, #05A5B3 82.31%);
  border-radius: 28px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: 2px solid #007F9F !important;
  width: 200px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 !important;
  margin-top: 36px;
}
.button-submit-disabled {
  background: #A0A0A0;
border: 3px solid #A0A0A0 !important;
  border-radius: 28px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: none;
  cursor: not-allowed;
  width: 200px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 !important;
  margin-top: 36px;
}
.button-submit-disabled:hover {
  background: #A0A0A0;
border: 3px solid #A0A0A0 !important;
  border-radius: 28px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  cursor: not-allowed;
  width: 200px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 !important;
  margin-top: 36px;
}
.button-submit-disabled:visited {
  background: #A0A0A0;
border: 3px solid #A0A0A0 !important;
  border-radius: 28px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  cursor: not-allowed;
  width: 200px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 !important;
  margin-top: 36px;
}

.grid {
  display: grid;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gap-4 {
  gap: 1rem;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}

.submit-wrapper {
  display: flex;
  justify-content: flex-end;
}


@media (max-width: 768px)  {
 
  .submit-wrapper {
    justify-content: center;
    /* margin-top: 1rem; */
    margin-bottom: 1rem;
}


}
.form-item{
  position: relative;
  margin-bottom: 2px;
    box-sizing: border-box;
    display: block;
    box-shadow: inset 0px 0px 6px rgb(0 0 0 / 25%);
    border: 1.5px solid transparent;
    border-radius: 8px;
    color: #A0A0A0;
    padding: 5px 17px;
	
}
.form-item:visited{
 border: 1.5px solid rgba(126, 208, 221, 0.6);
}


.form-item input{
  display: block;
  width: 400px;
  height: 40px;
  background: transparent;
  border: none !important;
  transition: all .3s ease;
  padding: 0 3px;
	width: 100%;
    font-size: 14px !important;
    font-weight: bold;
    color: #3A3A3A;
		margin-top: 6px;
}
.form-item select {
  height: 40px;
}
.form-item label{
  position: absolute;
  cursor: text;
  z-index: 2;
  top: 13px;
  left: 10px;
  font-size: 12px ;
  background: #fff;
  padding: 0 10px;
  color: #3a3a3a;
  transition: all .3s ease
}
.form-item input[disabled] + label {
  top: -10px;
}

.form-item input:valid + label,.form-item select:valid+label{
  font-size: 11px;
  top: -12px !important;
}
.form-item input:focus + label{
  font-size: 12px;
  top: -12px !important;
  color: #3a3a3a;
}
.form-item:visited{
	border: 1.5px solid rgba(126, 208, 221, 0.6);
  box-shadow: none;
  background: #FFFFFF;
}
.form-item:focus-within {
	border: 1.5px solid rgba(126, 208, 221, 0.6);
  box-shadow: none;
  background: #FFFFFF;
}
.form-item *:focus {
  border: 1.5px solid rgba(126, 208, 221, 0.6);
  box-shadow: none;
  background: #FFFFFF;
}
.input-label:focus-within {
	border: 1.5px solid rgba(126, 208, 221, 0.6);
  box-shadow: none;
  background: #FFFFFF;
}
.input-label *:focus {
  border: 1.5px solid rgba(126, 208, 221, 0.6);
  box-shadow: none;
  background: #FFFFFF;
}
.errorForm {
  border: 1.5px solid #FF7F71 !important;
}
.labelError {
  color: #DB303C !important;
}
.errorFormPengkinian {
  border: 1.5px solid #FF7F71 !important;
}
.labelErrorPengkinian {
  color: #DB303C !important;
}
.form-item input:focus + label, .form-item select:focus + label, .form-item textarea:focus + label {
  color: #339AAA ;
}
.form-item:hover{
  border: 1.5px solid rgba(126, 208, 221, 0.6);
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
  background: #FFFFFF;
}
/* error-message  */
.error-form{
  border: 1.5px solid #FF7F71;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}
.error-form:hover{
  border: 1.5px solid #FF7F71;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}
.error-message{
  font-family: 'Open Sans';
    font-weight: normal !important;
    font-size: 10px !important;
    line-height: 12px !important;
    color: #DB303C !important;
    margin-top: 4px;
    margin-bottom: 1rem;
    margin-left: 7% !important;
}
.success-info {
  font-family: 'Open Sans';
    font-weight: normal !important;
    font-size: 10px !important;
    line-height: 12px !important;
    color: #78A10B !important;
    margin-top: 4px;
    margin-bottom: 1rem;
    margin-left: 7% !important;
}
.text-recaptcha {
  font-family: 'Open Sans';
    font-weight: normal !important;
    font-size: 11px !important;
    line-height: 12px !important;
    color: #3A3A3A !important;
    margin-top: 4px;
    text-align: center;
    margin-bottom: 1rem;
   
}

/* success-message */
.success-form{
  border: 1.5px solid #B5D643;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}
.success-form:hover{
  border: 1.5px solid #B5D643;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}
.success-message{
  font-family: 'Open Sans' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 10px !important;
  line-height: 12px;
  color: #78A10B !important;
}