body{padding: 0;margin: 0;
    font-family: 'Inter', serif;
    }
  
 /* Target the input when it's autofilled */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset; /* Change the color here */
}
input:-moz-autofill {
  box-shadow: 0 0 0px 1000px white inset; /* Change the color here */
}



.form-container{display: flex;box-sizing: border-box;}
.form-banner{position: relative; flex-basis: 40%;height: calc(100vh - 2px);display: flex; flex-direction:column;justify-content: space-between;}
.event-info{position: relative;
    top: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.71) 68.38%, rgba(255, 255, 255, 0.00) 98.71%);
    right: 21px;
    left: 21px;
    display: flex;
    gap: 40px;}
.event-info .logo img{width: 120px;display: block;margin-top: 14px;}
.event-details{text-align: center;color: #185c75;}
.event-details h1{font-weight: 700;margin-bottom: 0;font-size: 25px;margin-top: 25px;}
.event-details h3{font-family: 'Quando', serif;font-weight: 400;font-size: 20px;margin:3px auto 8px;}
.event-details h6{font-family: 'Quando', serif;font-size: 14px;font-weight: 400;margin:3px auto 8px;}


.design img{
  width: 70%;
  display: block;
  /* height: 300px; */
  object-fit: contain;
  margin: auto;}
  .coordinate{margin-left: 64px;}
  .coordinate h5{margin-bottom: 0;
    font-family: 'Mulish', sans-serif;
    font-weight: 500;
    margin-top: 0;
    font-size: 20px;}
    
  .coordinate img{width: 120px;}
.form-content{flex-basis: 60%;}
.form-content h2{text-align: center;font-size: 28px;font-weight: 700;margin-bottom: 0;color: #185c75;}
.form-content p{text-align: center;}
.form-block{font-family: 'Roboto', sans-serif;padding:0 46px;height:calc(90vh - 100px);overflow-y:scroll;}
.form-block h2{font-size: 28px;color: #185c75;font-weight:700;text-align: left;}
.label-heading-3{font-size: 24px;color: #185c75;font-weight:700;margin-bottom: 6px;
  margin-top: 28px;display: block;}
.form-block h5{font-size: 20px;color: #185c75;font-weight:700;margin-bottom: 14px;
  margin-top: 0px;}
  .form-block h5 span,.label-heading-3 span{color: red;}
.form-block p{text-align: left; margin: 6px 0 21px;font-size: 14px;color:#616161;}
.form-row{display: flex;width: 100%;}
.col-half{position: relative;display: flex;flex-direction: column;flex-basis: 50%;margin-right: 28px;margin-bottom: 13px;}
.col-half:last-child{margin-right: unset;}
.col-full{position: relative;display: flex;flex-direction: column;flex-basis: 100%;margin-bottom: 15px;}
.col-half input[type="text"],.col-half input[type="tel"],.col-full input[type="text"],.col-full input,.field-col input[type="text"],.degree-name-col input[type="text"]{width: 100%;height: 36px;border: unset;border-bottom: 1px solid #616161;padding-block: unset;
  padding-inline: unset;}
  
.col-half select,.degree-col select,.found-us-col select{height: 38px;border: unset;border-bottom: 1px solid #616161;cursor: pointer;
  -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
  padding-left: 1px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAHCAYAAAD9NeaIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDE1LTA0LTE3VDE3OjEyOjQyKzAyOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxNS0wNC0yMFQxNzoxNjoyNCswMjowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxNS0wNC0yMFQxNzoxNjoyNCswMjowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTU4MjBDRURERjVCMTFFNEEzN0FCODBEM0I5MTExMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTU4MjBDRUVERjVCMTFFNEEzN0FCODBEM0I5MTExMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2RUVFRDJCNkREQzMxMUU0QTM3QUI4MEQzQjkxMTEyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNTgyMENFQ0RGNUIxMUU0QTM3QUI4MEQzQjkxMTEyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuShL/sAAABeSURBVHjaYszOzjZnYGDYCcT8DMSBv0AcP2XKlKVEqmdgAuKTQOwOxB+JtQCIibYAZgkDkRaRZQGyJYQsItsCdEtwWUSRBdgsQbeIYgtAgAWHOMwiJSBezkAhAAgwAJSTG/DI0S9VAAAAAElFTkSuQmCC");
  background-position: 100% 60%;
  background-repeat: no-repeat;
  background-size: auto 15%;
}


.col-half input:focus,.col-full input:focus,.col-half select:focus,.degree-col select:focus, .found-us-col select:focus, .field-col input:focus,.degree-name-col input:focus{outline: unset;}
label span{color:red;}
.col-half input + label,.col-full input + label,.work-location input + label,.vacancies input + label,.field-col input + label,.degree-name-col input + label{
    position: absolute;
    left: 0px;
    top: 13px;
    transition: 0.5s;
    font-size: 14px;
    font-weight: 400;
    background-color: #fff;color:#616161;}

.err{font-size: 12px;color:red;margin-top: 2px;}

.col-half input:focus + label,
.col-half input:not(:placeholder-shown) + label,
.col-full input:focus + label,
.col-full input:not(:placeholder-shown) + label,
.field-col input:focus + label,
.field-col input:not(:placeholder-shown) + label,
.degree-name-col input:focus + label,
.degree-name-col input:not(:placeholder-shown) + label{
  top: -8px !important;
  font-size: 12px;
  left: 0px;
  background: white;
  padding: 1px;
}
.other-input input + label{
  position: absolute;
    left: 0px;
    top: 13px;
    transition: 0.5s;
    font-size: 14px;
    font-weight: 400;
    background-color: #fff;
    color:#616161;
    line-height: 23px;
}

.other-input input:focus + label,
.other-input input:not(:placeholder-shown) + label{
  font-size: 12px;
  left: 0px;
  background: white;
  padding: 1px;
}



/* custom column */
.country-col,.degree-col{flex-basis: 50%;position: relative;margin-bottom: 15px;}
.state-col{flex-basis: 50%;position: relative;margin-bottom: 15px;}
.country-col{margin-right: 25px;}
.city-col{margin-right: 25px;}
.city-col{flex-basis: 50%;position: relative;}
.degree-name-col{flex-basis: 50%;position: relative;}
.degree-name-col{margin-right: 25px;}
.grade-col{flex-basis: 30%;position: relative;}
.institute-col{flex-basis: 70%;position: relative;}
.grade-col{margin-right: 25px;}
.postal-col{flex-basis: 50%;position: relative;}
.dob-col,.start-col{flex-basis: 50%;position: relative;margin-right: 25px;}
.gender-col{flex-basis: 50%;position: relative;}
.gender-col select{width: 100%;box-sizing: border-box; }
.degree-col{margin-right: 25px;}

.field-col{flex-basis: 50%;position: relative;}

.found-us-col{flex-basis: 30%;position: relative;}
/* .state-col{margin-right: unset;} */
.country-col select,.state-col select,.degree-col select, .found-us-col select{width:100%;box-sizing: border-box;}
.floating-select ~ .floating-select-label {
    position: absolute;
    left: 0px;
    top: 13px;
    transition: 0.5s;
    font-size: 14px;
    font-weight: 400;
    background-color: #fff;color:#616161;
  }

  .floating-select[value=""]:focus ~ .floating-select-label {
    position: absolute;
    top: 1px!important;

  }

  .floating-select:not([value=""]):valid ~ .floating-select-label{
    position: absolute;
    top: -10px!important;
    font-size: 12px;
    background: white;
    padding: 1px;
    }

    .iti input, .iti input[type=text], .iti input[type=tel]{width: 100%;}
    .iti--separate-dial-code .iti__selected-flag{background-color: unset!important;padding: 0 6px 0 1px!important;}
    

    .iti__arrow{position: relative;}
    .iti__arrow::after{
      position: absolute;
      content: '';
      width: 1px;
      height: 18px;
      background-color: #cac8c8;
      margin-left: 9px;
      top: -11px;}
    .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code{font-size: 14px;}
    .iti__flag-box, .iti__country-name{font-size: 14px;}

      /* custom dialcode floating label */
      .phone-label,.emergency-phone-label {
        position: absolute;
        left: 76px;
        top: 9px;
        font-size: 14px;
        transition: 0.5s;
        font-weight: 400;
        background-color: #fff;
        color:#616161;
 
      }
     /* custom dialcode floating label */
     .radio-group{display: flex;flex-wrap: wrap;line-height: 45px;}
     .radio-group label{cursor: pointer;color: #616161;font-size: 15px;}
     .radio-input{margin-right:25px;align-items: center;
      display: flex;}
      .radio-input input{margin: -2px 6px 0px 0px;}

     .checkbox-group{display: flex;flex-wrap: wrap;line-height: 45px;}
     .checkbox-group label{cursor: pointer;color: #616161;font-size: 15px;}
     
     .checkbox-input{margin-right:25px;display: flex;align-items: center; flex-basis:40%;flex-wrap: wrap;}
     .checkbox-input-w-s{margin-right:25px;display: flex;align-items: center;flex-wrap: wrap;}
     .checkbox-input input{margin: -2px 6px 0px 0px;}
     .checkbox-input-w-s input{margin: -2px 6px 0px 0px;}


    .action-button{display: flex;justify-content: flex-end;margin-top: 30px;margin-bottom: 20px;}
    .action-button button{padding: 10px 35px;border:1px solid #185c75;border-radius: 3px;cursor: pointer;}
    .action-button button:nth-child(1){background-color:white;color:#185c75;margin-right: 37px;}
    .action-button button:nth-child(2){background-color:#185c75;color: white;}

    .work-location, .vacancies{position: relative;}
    .work-location{flex-basis: 40%;margin-right: 25px;}
    .work-location input, .vacancies input{width: 100%;}

    .vacancies{flex-basis: 30%;margin-right: 25px;}
    .repeater-action{display: flex;justify-content: flex-end;}
    .repeater-action .add-education{
      background-color: #185c75;
      padding: 10px 35px;
      border: 1px solid #185c75;
      border-radius: 3px;
      cursor: pointer;
      color: white;}
    .repeater-action .add,.repeater-action .remove{background-color: #185c75;
        color: white;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12px;
        cursor: pointer;}
   .delete-row-action{display: flex;
    justify-content: flex-end;color: red;}  
    .delete-row-action > div{display: flex;
      align-items: center;
      font-size: 15px;
      cursor: pointer;}   
    .delete-row-action > div > i { color: red;
        font-size: 26px;} 
    .d-flex{display: flex!important;}
    .d-none{display: none!important;}

 .snack-bar-container{position:fixed;left: 0;right:0;bottom: 0;top:0;}
 .snack-bar-message{position: absolute;
    z-index: 4080;
    color: white;
    padding: 2px 18px 3px 20px;
    top: 110px;
    right: 42px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    align-items: center;
    display: flex;
    background-color: #28a745;}
  .snack-bar-message p{font-family: 'Mulish', sans-serif;}  
.close-bar{margin-left: 12px;color:white;cursor: pointer;font-weight: 300;}
  
.user-content{display: flex;align-items: flex-start;}
.user-content input{margin: 2px 6px 0px 0px;}
.user-content label{ font-size: 15px;
  color: #616161;cursor: pointer;}
.user-consent-msg{margin-top: 13px;}
.v-hide{visibility: hidden;};
.v-show{visibility: visible;}

.col-half .skills-container {
  border: 3px dashed #ccc;
  padding: 8px;
  width: calc(100% - 32px);
  min-height: 100px;
  display: flex;
  flex-wrap: wrap;
 
}
.skill {
  background-color: #e0e0e0;
  border-radius: 20px;
  padding: 5px 10px;
  margin: 4px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.skill .remove-btn {
  margin-left: 8px;
  cursor: pointer;
  font-weight: bold;
}
.input-container {
  flex: 1;
}
.input-container input {
  border: none;
  outline: none;
  padding: 5px;
  font-size: 14px;
}

/* input chips */
.chips-right-margin{margin-right: 18px!important;}
.remove-skills{color: #fff!important;cursor: pointer;}
.col-half .chips_input{ width: calc(100% - 12px);}
div.chips_input {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  
}
div.chips_input > label {
  font-size: 10px;
  position: absolute;
  top: 5px;
  left: 6px;
  color: #b7b3b3;

}
div.chips_input > p {
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 0 0.25rem;
  color: inherit;
}
div.chips_input > div.inner {
  width: 100%;
    min-height: 100px;
    background-color: var(--primary);
    border: 2px dashed #3333;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding:16px 7px 0;
    box-sizing: border-box;
    /* max-width: 20rem; */
    position: relative;
}
div.chips_input > div.inner > input {
  border: none;
  outline: none;
  font-size: 1rem;
  position: relative;
  background: transparent;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  color: var(--secondary);
}
span.chip {
  padding: 4px;
    box-sizing: border-box;
    background: #e0e0e0;
    border-radius: 18px;
    color: #494949;
    font-size: 15px;
    padding-right: 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
}

span.chip > button {
  border: none;
    background: #797979;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    display: flex;
    margin-left: 3px;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 5px;
    font-size: 7px;
}
span.chip > button > i {
  font-family: fontawesome;
  cursor: pointer;
  color: var(--primary);  
}
span.limit {
  float: right;
}
/* input chips */


.dropzone {min-height: 96px!important;  width: 282px;
  border: 1px solid rgb(0 0 0);
  background: white;
  padding: 1px 16px;
  border-radius: 8px;}
.dropzone .dz-preview .dz-image {width: 100px;height: 100px;}
.dropzone .dz-message {
  text-align: center;
  margin: 2px 0!important;
}
.dropzone .dz-message p{margin: 0px;
  color: #b8b8b8;text-align: center;}
.form-para{padding-top: 10px;}
.event-details{display: none;}
.design h1{font-weight: 700;margin-bottom: 0;font-size: 25px;text-align: center;color: #185c75;
  margin-bottom: 25px;}

  .spinner {
    border: 2px solid #f3f3f3; 
    border-top: 2px solid #fff; 
    border-right: 2px solid #fff;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 50%;
    width: 11px;
    height: 11px;
    display: inline-block;
    margin-right: 6px;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
/* media query */
@media only screen and (max-width: 768px) {
  .form-container{flex-direction: column;}
  .form-para{padding: 10px 20px;}
  .design{display: none;}
  .form-block{padding:0 46px;}
  .form-row{flex-direction: column;}
  .col-half,.dob-col,.country-col,.state-col,.city-col,.postal-col{flex-basis: 100%;margin-right: unset;margin-bottom: 22px;}
  .radio-group,.checkbox-group{flex-direction: column;}
  .label-heading-3{font-size: 22px;}
  .degree-col,.start-col {margin-right: unset;}
  .grade-col{width: 100%;}
  .field-col input,.start-col input, .grade-col input {margin-bottom: 14px;}
  .chips-right-margin{margin-right: unset!important;}
  .col-half .chips_input{ width: 100%;}
  .degree-name-col {margin-right: unset;margin-bottom: 12px;}
  .event-info {right: 0;left: 0;display: flex;flex-direction: column;align-items: center;}
  .form-content h2{margin: 0;}
.copy{display: none;}
.copy_mobile{display: block !important;}
.event-info{gap: 2px;}
.event-details h1{margin-top: 10px;}
.event-details{display: block;}
.design h1{display: none;}
}

@media only screen and (max-width: 1280px) {
  /* .form-banner img{object-fit: fill;} */
  .event-details h3{font-size: 18px;}
  .event-details h6{font-size: 13px;}
  
}