body {
    margin: 0;
    line-height: normal;
  }
  
  :root {
    /* fonts */
    --font-inter: Inter;
  }

  .page-template-katon-network-ambassadors-application .modal{
    --bs-modal-width: 609px !important;
  }
  .back{
    cursor: pointer;
  }
  .content{
    gap: 20px;
    display: flex;
    flex-direction: column;
  }
  .descriptiondialog{
    font-family: Inter;
  font-size: 14px;
  font-weight: 300;
  line-height: 20.58px;
  text-align: center;
  color: #000000;
  padding-left: 20px;
      width: 361px;
  }
  .titledialog{
    font-family: Inter;
  font-size: 32px;
  font-weight: 700;
  line-height: 30.72px;
  text-align: center;
  color: #000000;
  
  }
  .cta2{
    width: 130px;
  height: 38px;
  
  border-radius: 16px;
  background: #008CD1;
  border: 1px solid #008CD1;
  margin-top: 35px;
  }
  .explore4-explore{
    font-family: Inter;
  font-size: 12px;
  font-weight: 500;
  line-height: 14.52px;
  /* text-align: left; */
  color: #FFFFFF;
  }
  .ambassador-register-application-main #successModal {
    /* background: #FFFFFF !important; */
  
    background-color: rgba(0, 0, 0, 0.1)  !important;
    /* opacity: 1;
    display: block; */
  }
  .modal-backdrop.show{
    opacity: 0 !important;
  }
  
  .ambassador-register-application-main .modal-content{
    z-index: 1060 !important;
    opacity: 1 !important;
    width: 609px !important;
    height: 421px !important;
    align-items: center !important;
    padding: 51px 40px 51px 40px;
    background: #FFFFFF !important;
    display: flex;
    flex-direction: column;
    gap: 56px;
  }
  .ambassador-register-application-main .modal-dialog-centered{
  justify-content: center !important;
  padding-top: 112px !important;
  }
  .fade {
    transition: opacity 0.01s linear !important; /* Reduced duration to 0.05 seconds */
  }
  .subject-title{
    padding: 10px;
  }
  /* Basic styles for custom select */
  .custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 524px;
  }
  
  .custom-select {
    position: relative;
  }
  
  .custom-select-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border: 0.72px solid #BDBDBD;
    border-radius: 7.25px;
    font-family: Inter;
  font-size: 10px;
  font-weight: 400;
  line-height: 17.5px;
  text-align: left;
  padding-left: 15px;
  }
  .arrow {
    transition: transform 0.3s ease;
    background-image: url('../assets/katon-network/Icon.svg');
    background-size: cover;
     background-repeat: no-repeat;
  }
  
  .arrow.down {
    transform: rotate(180deg); /* Rotates the arrow downwards */
  }
  .custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    /* max-height: 200px; */
    overflow-y: auto;
    display: none; /* Initially hidden */
    z-index: 9;
  }
  
  .custom-option {
    padding: 10px;
    cursor: pointer;
  }
  
  .custom-option:hover {
    background-color: #f1f1f1;
  }
  
  /* Arrow styling */
  .custom-select-trigger .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    /* transform: translateY(-50%); */
    width: 9.5px;
    height: 5.5px;
    /* border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333; */
  }
  
  .custom-options.open {
    display: block; /* Show the dropdown options when the "open" class is applied */
    display: flex;
    flex-direction: column;
    border-radius: 7.25px;
    font-family: Inter;
  font-size: 10px;
  font-weight: 400;
  line-height: 17.5px;
  text-align: left;
  /* padding-left: 12px; */
  
  }
  
  /* .drop {
    overflow: visible;
  }
  .dropdown3 {
    position: relative;
    z-index: 9999;
  } */
  
  .input-field{
    width: 524px;
  height: 39px;
  border-radius: 7.25px;
  border: 0.72px solid #BDBDBD;
  font-family: Inter;
  font-size: 10px;
  font-weight: 400;
  line-height: 17.5px;
  padding-left: 15px;
  }

  input[type="text"]:focus-visible{
    border: 0.72px solid #BDBDBD !important;
  }
  textarea:focus-visible{
    border: 0.72px solid #BDBDBD !important;
  }
  .input-field::placeholder{
    color: #8A8A8A;
  }
  
  .solidinterfacecaret-left-icon1 {
    width: 24px;
    position: relative;
    height: 24px;
    object-fit: cover;
    cursor: pointer;
  
  }
  .solidinterfacecaret-left-icon1 :hover{
    cursor: pointer;
  }
  .back1 {
    position: relative;
    line-height: 105.02%;
    font-weight: 300;
  }
  .back {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 0 55px;
    gap: 5px;
  }
  .katon-teachers-outlook1 {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: 32px;
    line-height: 96%;
    font-weight: 700;
    font-family: inherit;
  }
  .for-online-tuition {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: 14px;
    line-height: 105.02%;
    font-weight: 300;
  }
  .heading3 {
    max-width: 736px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
  }
  .please-fill-in1 {
    position: relative;
    line-height: 16.8px;
    font-size: 16px;
    font-weight: 500;
  }
  .title19 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 0 58px;
  }
  .section-1 {
    position: relative;
    line-height: 105.02%;
  }
  .do-you-have,
  .section-1 {
    align-self: stretch;
  }
  .do-you-have,
  .select-7 {
    position: relative;
    line-height: 175%;
  }
  .solidinterfacecaret-down-icon31 {
    width: 24px;
    position: relative;
    height: 24px;
    object-fit: cover;
    display: none;
  }
  .drop,
  .dropdown3 {
    align-self: stretch;
    display: flex;
  }
  .dropdown3 {
    border-radius: 7.25px;
    border: 0.7px solid #bdbdbd;
    box-sizing: border-box;
    height: 39px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 7px 17px;
    font-size: 10px;
    color: #8a8a8a;
    background: #ffffff;
  }
  .drop {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .rectangle-input8 {
    margin: 0;
    width: 17.71px;
    position: relative;
    border-radius: 5.64px;
    border: 0.8px solid #8a8a8a;
    box-sizing: border-box;
    height: 17.71px;
    appearance: none;
    cursor: pointer;
  }
  .rectangle-input8:checked::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: rgb(46, 103, 208);
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
  }

  .gender-error{
    margin-top: -12px;
  }

  .male1,
  .rectangle-input {
    margin: 0;
    position: relative;
  }
    .gender
    {
      display: flex;
      flex-direction: column;
      /* align-items: center; */
      justify-content: flex-start;
      gap: 12px;
    }
    .female,
    .gender {
      align-self: stretch;
    }
    .female {
      position: relative;
      top: 3px;
    }
    .checked-male {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 58px;
      /* font-size: var(--font-size-mid-2); */
    }
    .male1{
      font-family: Inter;
  font-size: 14px;
  font-weight: 300;
  line-height: 24.5px;
  text-align: left;
  color: #000000;
  cursor: pointer;
  
    }
    .female1{
      font-family: Inter;
      font-size: 14px;
      font-weight: 300;
      line-height: 24.5px;
      text-align: left;
      bottom: 5px;
      position: relative;  
      cursor: pointer;
    }
    .checked-teacher{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  .rectangle-input {
    width: 17.71px;
    border-radius: 5.64px;
    border: 0.8px solid #8a8a8a;
    box-sizing: border-box;
    height: 17.71px;
    appearance: none;
    cursor: pointer;
  }
  .rectangle-input:checked::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: rgb(46, 103, 208);
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
  }
  .on-1-tuition {
    margin-left: 10px;
    cursor: pointer;
  }
  
  .selection1 {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .child,
  .span15 {
    position: relative;
  }
  .span15 {
    line-height: 175%;
    font-weight: 300;
    cursor: pointer;
  }
  .child {
    width: 17.7px;
    border-radius: 5.64px;
    border: 0.8px solid #8a8a8a;
    box-sizing: border-box;
    height: 17.7px;
  }
  .age2,
  .container55 {
    display: flex;
    justify-content: flex-start;
  }
  .container55 {
    align-self: stretch;
    flex-direction: row;
    align-items: center;
    gap: 42px;
    font-size: 14px;
  }
  .age2 {
    width: 515.7px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 30px;
  }
  .container56,
  .male {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .male {
    justify-content: flex-start;
    gap: 7px;
  }
  .container56 {
    align-self: stretch;
    justify-content: space-between;
    font-size: 14px;
  }
  .sex2 {
    width: 188.8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
  }
  .dropdown10 {
    border: 0.7px solid #bdbdbd;
    background-color: transparent;
    outline: 0;
    align-self: stretch;
    border-radius: 7.25px;
    box-sizing: border-box;
    height: 126px;
    resize: none;
    padding: 2px 10px;
  }

  .dropdown10.has-error.has-danger{
    border: 1px solid red !important;
  }

  .cont10,
  .container54,
  .sec-14 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .container54 {
    gap: 24px;
    font-size: 17px;
  }
  .cont10,
  .sec-14 {
    gap: 32px;
  }
  .cont10 {
    gap: 22px;
  }
  .upload-a-sample {
    margin: 0;
  }
  .upload-a-sample-container {
    align-self: stretch;
    position: relative;
    line-height: 120%;
  }
  .solidinterfacelogout-icon {
    width: 20px;
    position: relative;
    height: 20px;
    object-fit: contain;
  }
  .add-file {
    position: relative;
    font-size: 10px;
    line-height: 175%;
    font-family: var(--font-inter);
    color: #8a8a8a;
    text-align: left;
  }
  .add,
  .cta62 {
    display: flex;
    justify-content: flex-start;
  }
  .cta62 {
    cursor: pointer;
    border: 0.7px solid #bdbdbd;
    background-color: transparent;
    border-radius: 7.25px;
    box-sizing: border-box;
    height: 39px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 95px !important;
  }
  .add {
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .checkbox {
    cursor: pointer;
    margin: 0;
    width: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .on-1-tuition {
    position: relative;
    line-height: 175%;
  }
  .selection1,
  .selection3 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
  }
  .selection3 {
    gap: 10px;
  }
  .selection {
    gap: 6px;
  }
  .container57,
  .sec-1-parent,
  .selection {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .container57 {
    gap: 29px;
    font-size: 17px;
  }
  .sec-1-parent {
    gap: 52px;
  }
  .thank-you {
    align-self: stretch;
    position: relative;
    font-size: 17px;
    line-height: 175%;
  }
  .submit1 {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-inter);
    color: #fff;
    text-align: left;
  }
  .cta63 {
    cursor: pointer;
    border: 0;
    padding: 6px 165px;
    background-color: #008cd1;
    width: 414px;
    border-radius: 10px;
    height: 38px;
    flex-direction: row;
    justify-content: flex-start;
    box-sizing: border-box;
    gap: 11px;
  }
  .cta63,
  .form1,
  .form2 {
    display: flex;
    align-items: center;
  }
  .form2 {
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    gap: 94px;
  }
  .form1 {
    align-self: stretch;
    border-radius: 20px;
    background-color: #fff;
    flex-direction: row;
    justify-content: center;
    padding: 62px 240px 62px;
    font-size: 18px;
  }
  .content53 {
    align-self: stretch;
    align-items: flex-start;
    gap: 24px;
    text-align: left;
    font-size: 16px;
  }
  .container53,
  .content53,
  .main-content30 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .container53 {
    align-self: stretch;
    align-items: center;
    gap: 76px;
    font-size: 32px;
  }
  .main-content30 {
    width: 1012px;
    align-items: flex-start;
    gap: 35px;
  }
  .ambassador-register-application-main {
    width: 100%;
    position: relative;
    background-color: #eceff1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 125px 10px 100px;
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    color: #000;
    font-family: var(--font-inter);
  }

  .ambassador-register-application-main .main-content30 .modal-content{
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    width: 68px; 
    height: 68px;
  }
  .ambassador-register-application-main .main-content30 .modal-content .content .katon-explore-a{
    margin-bottom: 0px !important;
  }

  .ambassador-register-application-main .main-content30 .modal-content .rightArrowStyleForOk{
    display: none;
  }

  .reject-btn{
    margin-left: 10px;
  }

  @media screen and (max-width: 1200px) {
    .ambassador-register-application-main {
      width: auto;
      align-self: unset;
    }
    .inputContainer{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .form1{
      padding-left: 240px !important;
      padding-right: 240px !important;
    }
    .content53{
        justify-content: center;
        align-items: center;
    }
  }

  @media screen and (max-width: 1100px) {
    .main-content30{
      width: 100%;
      padding-left: 38px;
      padding-right: 38px;
    }
    .container53{
      width: 100%;
    }
    .form1{
      padding-left: 150px !important;
      padding-right: 150px !important;
    }

  }
  @media screen and (max-width: 960px) {
    .back,
    .heading3,
    .title19 {
      align-self: stretch;
      width: auto;
    }
    .back{
      padding-left: 0px !important;
    }
    .title19{
      padding-left: 10px !important;
    }
    .form2 {
      flex: 1;
    }
    .form1 {
      padding-left: 75px;
      padding-right: 75px;
      box-sizing: border-box;
    }
    .container53,
    .form1 {
      align-self: stretch;
      width: auto;
    }
    .main-content30 {
      flex: 1;
    }
    .ambassador-register-application-main {
      padding-left: 50px;
      padding-right: 50px;
      box-sizing: border-box;
    }
  }

  @media screen and (max-width: 870px) {
    .form1{
      padding-left: 100px !important;
      padding-right: 100px !important;
    }
  }
  @media screen and (max-width: 800px) {
    .form1{
      padding-left: 50px !important;
      padding-right: 50px !important;
    }
  }

  @media screen and (max-width: 720px) {
    .content53{
      justify-content: unset !important;
      align-items: unset !important;
      width: 100%;
      gap: 12px;
    }
    .container53{
      gap: 48px;
    }
    .main-content30{
      padding-left: 0;
      padding-right: 0;
      gap: 20px;
    }
    .ambassador-register-application-main{
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-top: 120px;
      box-sizing: border-box;
    }
    .title19{
      padding-left: 0px !important;
    }
    .form1{
      padding: 30px 20px !important;
    }
    .container54 .inputContainer .input-field{
      width: 100%;
    }
    .container54 .age2{
      margin-top: 0;
    }
    .custom-select-wrapper{
      width: 100%;
    }
    .container53 .heading3 .katon-teachers-outlook1{
      font-size: 20px;
      line-height: 19.2px;
    }
    .content53 .title19 .please-fill-in1{
      font-size: 14px;
      line-height: 14.7px;
    }
    .form1 .sec-14 .section-1{
      font-size: 14px;
      line-height: 14.7px;
    }
    .form1 .sec-14 {
      gap: 24px;
    }
    .container54{
      font-size: 14px;
      line-height: 24.5px;
    }
    .form2{
      gap: 48px;
      align-items: unset;
    }
    .cta63{
      position: relative;
      border-radius: 20px;
      font-size: 14px;
      line-height: 16.94px;
      width: 100%;
      justify-content: center;
    }
    .cta63 .rightSideArrowIconStyle{
      position: absolute;
      right: 23px;
    }
    .heading3{
      gap: 8px;
    }
  }

  @media (max-width: 575.98px) {
      .for-online-tuition {
          margin-top: 0px !important;
      }
  }
  @media screen and (max-width: 580px) {
    .form1, .form2{
      display: flex !important;
      flex-direction: column;
    }
    .main-content30, .content53, .container53{
      background-color: unset !important;
      border-radius: 0 !important; 
      padding: 0 !important;
    }
    .age2 , .container55{
      display: flex !important;
      width: 100%;
      flex-wrap: wrap;
    }
  }

  @media screen and (max-width: 670px) {
    .ambassador-register-application-main .main-content30 .modal-content{
      max-width: 330px;
      border-radius: 20px !important;
      height: auto !important;
      padding: 23px 23px 12px 23px;
      gap: 27px;
    }
    .ambassador-register-application-main .main-content30 .modal-content .rightTickIconStyle{
      width: 40px !important;
      height: 40px !important;
    }
    .ambassador-register-application-main .main-content30 .modal-content .content{
      gap: 8px;
      justify-content: center;
      align-items: center;
    }
    .ambassador-register-application-main .main-content30 .modal-content .content .titledialog{
      font-size: 20px;
      line-height: 24.2px;
    }
    .ambassador-register-application-main .main-content30 .modal-content .content .descriptiondialog{
      width: 284px;
    }
    .ambassador-register-application-main .main-content30 .modal-content .content a{
      width: 100%;
    }
    .ambassador-register-application-main .main-content30 .modal-content .content .cta2{
      margin-top: 9px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .ambassador-register-application-main .main-content30 .modal-content .content .katon-explore-a{
      margin-bottom: 0px !important;
    }
    .ambassador-register-application-main .main-content30 .modal-content .rightArrowStyleForOk{
      display: flex;
      position: absolute;
      right: 23px;
      width: 25px !important;
      height: 25px !important;
    }
  }
  @media screen and (max-width: 575px) {
    .custom-select-wrapper{
        width: 100%;
    }
    .page-template-katon-network-ambassadors-application .modal-content{
      max-width: 435px;
      padding: 46px 40px 12px 40px;
    }
  }

  @media screen and (max-width: 428px) {
    .page-template-katon-network-ambassadors-application .modal-content{
      max-width: 350px;
    }
    .back {
      padding-left: 0;
      box-sizing: border-box;
    }
    .heading3 {
      align-self: stretch;
      width: auto;
    }
    .title19 {
      padding-left: 58px;
      box-sizing: border-box;
    }
    .age2,
    .container55 {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .age2 {
      align-self: stretch;
      width: auto;
    }
    .on-1-tuition {
      flex: 1;
    }
    .selection {
      align-self: stretch;
      width: auto;
    }
    .cta63,
    .form1 {
      box-sizing: border-box;
    }
    .cta63 {
      width: auto;
      align-self: unset;
      align-items: center;
      justify-content: center;
      padding-left: 100px;
      padding-right: 100px;
    }
    .form1 {
      padding-left: 20px;
      padding-right: 20px;
    }
    .main-content30 {
      align-self: stretch;
      width: auto;
    }
    .ambassador-register-application-main {
      width: auto;
      align-self: unset;
      flex-direction: column;
      padding-left: 24px;
      padding-right: 24px;
      box-sizing: border-box;
    }
    .input-field{
      font-size: 15px;
      width: 100%;
    }
  }
  @media screen and (max-width: 420px) {
    .back {
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
    }
    .heading3,
    .title19 {
      align-self: stretch;
      width: auto;
    }
    .title19 {
      padding-left: 0;
      box-sizing: border-box;
    }
    .container55 {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .add,
    .age2,
    .selection,
    .sex2 {
      align-self: stretch;
      width: auto;
    }
    .cta63 {
      padding-left: 100px;
      padding-right: 100px;
      box-sizing: border-box;
    }
    .form2 {
      flex: 1;
    }
    .form1 {
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
    }
    .content53,
    .form1 {
      align-self: stretch;
      width: auto;
    }
    .container53,
    .main-content30 {
      padding-left: 0;
      box-sizing: border-box;
    }
    .container53 {
      align-self: stretch;
      width: auto;
      padding-right: 0;
    }
    .main-content30 {
      flex: 1;
    }
    .ambassador-register-application-main {
      padding-left: 24px;
      padding-right: 24px;
      box-sizing: border-box;
    }
  }
  @media screen and (max-width: 375px) {
    .page-template-katon-network-ambassadors-application .modal-content{
        gap: 24px;
    }

    .ambassador-register-application-main .main-content30 .modal-content .content .descriptiondialog{
      width: 100%;
    }
    .cta63 {
      width: auto;
      align-self: unset;
      align-items: center;
      justify-content: center;
      padding-left: 40px;
      padding-right: 40px;
      box-sizing: border-box;
    }
    .main-content30 {
      align-self: stretch;
      width: auto;
    }
    .ambassador-register-application-main {
      width: auto;
      align-self: unset;
      padding-left: 16px;
      padding-right: 16px;
      box-sizing: border-box;
    }
  }
  @media screen and (max-width: 350px) {
    .cta63 {
      align-self: stretch;
      width: auto;
    }
    .ambassador-register-application-main,
    .form1 {
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
    }
    .ambassador-register-application-main {
      padding-left: 16px;
      padding-right: 16px;
    }
    .page-template-katon-network-ambassadors-application .modal-content{
      max-width: 289px;
    }
    .ambassador-register-application-main .main-content30 .modal-content{
      max-width: 288px;
    }
  }