/* >> Contact Fomr Scss
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---*/
.section--form{
  padding: 1rem 0 6rem 0;
  .formContainer{
    @extend %flexBox;
    background-color: $color-section;
    .contactForm{width: 100%;
      @media #{$mq-iPad_land}{width: 50%;}
    }
    .formImg{width: 100%;
      @media #{$mq-iPad_land}{width: 50%;}
    }
  }
}
.contactForm{
  @extend %baseForm;
  display: block;  
  color: $color-baseText; 
  width: 100%;
  padding: 3rem 2rem;
  .form__flexRow{ 
    @extend %flexBox; 
    justify-content: space-between; 
    align-items: flex-start;
    margin-bottom: 1rem;
    .formItem{ width: 100%;
      @media #{$mq-tab_720}{width: 48%;}
    }
    &.form__flexRow--1{
      .formItem{ width: 100%;
        @media #{$mq-tab_720}{width: 100%;}
      }
    }
    &.form__flexRow--3{     
      .formItem{ width: 100%;
        @media #{$mq-tab_720}{width: 32%;}
      }
    }
  }
  .formItem{ margin-bottom: 1rem;
    .formItem__title{
      font-size: 12px;
      font-weight: 500;
      line-height: 1.1;
      color: $color-gray;
      text-transform: uppercase;
    }
    .formItem__title--big{
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      color: #000;
      text-transform: none;
      margin-bottom: 1rem;
    }
    .checkbox-text{color: $color-baseText;
      a{color: $color-baseText;
        &:hover{color: $color-secondary;}
      }
    }
    input,select,textarea{
      border: none;
    }
  }
  .formItem__note{display: block; width: 100%; position: absolute; left: 0; top: 0;}
  .formItem__note__icon{
    display: inline-block; position: absolute; top: 15px; right: -9px; width: 18px; height: 18px; background-color: $color-primary; background-image: url("../images/easydent/svg-notice.svg"); background-repeat: no-repeat; background-position: center center; background-size: 9px 9px; z-index: 2; cursor: pointer;
    &:hover{
      + .formItem__note__text{@include transition; visibility: visible; opacity: 1; display: inline-block;}
    }
  }
  .formItem__note__text{
    @include transition; visibility: hidden; opacity: 0; position: absolute; z-index: 3; right: 16px; top: 15px; width: auto; padding: 0.225rem 0.75rem; font-size: 12px; line-height: 1.2; text-align: left; background-color: $color-primary; color: white; font-style: normal;
    font-weight: 500;
  }
  .btn--submitForm{ width: 100%;
    @media #{$mq-tab}{width: auto}
  }
  .form__title{
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    color: $color-primary;
    margin-bottom: 1.5rem;
  }
  .statText{
    padding: 0!important;
    margin: 0 0 3rem 0!important;
    background-color: transparent!important;
    color: #fff;
    text-align: center;
    .sectionTitle{color: #fff;}
  }
  
  .formItem{
    &.formItem--split{
      @extend %flexBox;
      .formItem__title{width: 100%;}
      input,select,textarea{width: 48%; margin-right: 4%;
        &:last-child{margin-right: 0;}
      }
    }
  }

}

.contactForm__form__item{margin-bottom: 16px; width: 100%;
  &:last-child{margin-bottom:0;}
  &.formItem--checkBox-wrapper{
    .formItem--checkBox{
      label{width: 24px; height: 24px;
      }
      .regular-checkbox{
        &:checked + label{
          &:after{background-size: 14px 14px;}
        }
      }
    }
  }
}

.formItem{
  &.formItem__multiUpload{padding: 1rem; background-color: darken($color-gray-light,20%);
    .formItem__title{text-align: center; font-size: 1.2rem; margin: 0;}
    .formItem__upload{ margin-bottom: 0;
      input{background-color: transparent; line-height: 4rem; height: 4rem;}
      label{line-height: 4rem; border-color: white; color: white;
        &:hover{border-color: $color-primary;}
      }
    }
  }
}
  

.multiUpload__info{display: block; width: 100%; padding: 0.33rem; font-size: 13px; line-height: 1.5; font-weight: 400; text-align: center; color: white}
.uploadList{display: block; width: 100%;
  .uploadList__item{display: inline-block; font-size: 15px; line-height: 1.2; font-weight: 600; color: white; padding: 0.5rem; background-repeat: no-repeat; background-position: left 8px center; background-size: 16px 16px;}

  .uploadList__item__filename{display: inline-block; vertical-align: middle; margin-left: 1rem;}
}
.btn--clear{position: relative; display: inline-block; vertical-align: middle; width: 18px; height: 18px; padding: 0; background-color: $color-error; background-image: url("../images/easydent/btn-clear.svg"); background-repeat: no-repeat; background-position: center center; background-size: 16px 16px; border-radius: $radius-round;
  &:hover{background-color: lighten($color-error, 10%);}
}
.contactForm .formItem--checkBox .regular-checkbox:checked + label::after{}
.contactForm__form__item__title{display: none; margin-bottom: 8px; color: white; font-family: $titleFont; font-weight: 600; font-size: em(16px);}
.contactForm input.btn--submitContact{
  @include appearencNone;
  display: block; margin: 20px 0 0 auto; width: auto; height: 48px; text-transform: uppercase; font-size: 15px; line-height: 48px; padding: 0 22px; border: 2px solid #f5f5f5; color: #fff; background: #f5f5f5; cursor: pointer;
}

.form__information{
  display: block; width: 100%; position: relative; margin: 1rem 0; padding: 0.75rem; font-size: 0.75rem; line-height: 1; font-weight: 400; border-radius: $radius; color: white; background-color: lighten($color-primary,3%);
  b{color: red; font-size: 1.5rem;}
}

.formItem__multiUpload{
  padding: 1rem; background-color: $color-gray-light;
  margin: 2rem auto;
    .form__title{
      margin-bottom: 0.35rem;
    }
    .form__subTitle{font-size: 1.1rem; font-weight: 700; text-align: center;}
    .form__fileSize{font-size: 0.85rem; margin-bottom: 0.35rem; text-align: center;}
    .formItem__uploadListContainer{
      @extend %flexBox;
      margin-top: 1rem;
    }
    .formItem__uploadList{
      margin-top: 1rem;
      .uploadList__img{
        position: relative;
        width: 100%;
        max-width: 100px;
        border-radius: 1%;
        margin-right: 1%;
        margin-bottom: 1%;
        .btn--clear{
          position: absolute;
          width: 18px;
          height: 18px;
          min-height: auto;
          padding: 0;
          top: 3px;
          right: 3px;
          background-color: #ef5350;
          background-image: url("../images/easydent/btn-clear.svg");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 8px 8px;
          border: 0;
          &:hover{
            background-color: darken(#ef5350, 12%);
          }
        }
      }
      .uploadList__item{
        display: block;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 600;
        color: $color-baseText;
        padding: 1rem 2rem 1rem 2.5rem;
        margin-bottom: 0.5rem;
        border: 2px dotted $color-border;
        background-image: url("../images/easydent/svg-file.svg");
        background-repeat: no-repeat;
        background-position: left 8px center;
        background-size: 22px 22px;
        .uploadList__item__filename{
          display: inline-block;
          vertical-align: middle;
          margin-right: 0.5rem;
        }
        .delete-icon{
          position: absolute;
          right: 0.5rem;
          top: calc(50% - 9px);
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          padding: 0;
          background-color: transparent;
          background-image: url("../images/easydent/svg-delete.svg");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
          border: 0;
          cursor: pointer;
        }
      }
    }
  }

 fieldset{
  padding: 0!important;
  &.career__questions{background-color: $color-section;
    .formItem{
      input,select,textarea{background-color: darken($color-gray-light,10%); }
    }
  }
 }

 .career__questions__item{ display: block; padding-bottom: 0.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid $color-border;
  &:last-child{border-bottom: 0; margin-bottom: 0; padding-bottom: 0;}

    .career__question__title{
      display: block; width: 100%; margin-bottom: 0.5rem; font-size: 1.2rem; font-weight: 600;
      b{color: $color-error}
  }

  .formItem--checkBox{
    .regular-checkbox + label:active,
    .regular-checkbox:checked + label{ border-color: $color-primary;}
    .regular-checkbox:checked + label{
      &:active{border-color: $color-primary;}
      &::after{background-color: $color-primary;}
    }
  }

 }



  .ui-datepicker {
    padding:0; 
    z-index: 99!important;
    background: #ffffff;
    border-radius: 4px;
    font-size:18px;
    border: none;
    @include shadow-depthImg;
    table{
      tr{
        th{background-color: transparent;}
        td{padding: 3px 0;}
      }
    }
      
  .icon {
    margin-left: -30px;
    margin-top: -26px;
    position: relative;
    color: #31639c;
    font-size:20px;
}
  }
  .ui-datepicker {
    background: #ffffff;
    border-radius: 15px;
  }
  .ui-datepicker-header {
    height: 50px;
    line-height: 50px;
    color: #ffffff;
    background: #31639c;
    margin-bottom: 10px;
  }
  .ui-datepicker-prev,
  .ui-datepicker-next {
    width: 20px;
    height: 20px;
    text-indent: 9999px;
    border-radius: 100%;
    cursor: pointer;
    overflow: hidden;
    margin-top: 12px;
    z-index: 99;
  }
  .ui-datepicker-prev {
    float: left;
    margin-left: 12px;
  }
  .ui-datepicker-prev:after {
    transform: rotate(45deg);
    margin: -43px 0px 0px 8px;
  }
  .ui-datepicker-next {
    float: right;
    margin-right: 12px;
  }
  .ui-datepicker-next:after {
    transform: rotate(-135deg);
    margin: -43px 0px 0px 6px;
  }
  .ui-datepicker-prev:after,
  .ui-datepicker-next:after {
    content: '';
    position: absolute;
    display: block;
    width: 8px;
    height: 8px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
  }
  .ui-datepicker-prev:hover,
  .ui-datepicker-next:hover,
  .ui-datepicker-prev:hover:after,
  .ui-datepicker-next:hover:after {
    border-color: #333333;
  }
  .ui-datepicker-title {
    text-align: center;
    font-size:25px;
  }
  .ui-datepicker-calendar {
    width: 100%;
    text-align: center;
  }
  .ui-datepicker-calendar thead tr th span {
    display: block;
    width: 40px;
    color: #31639c;
    margin-bottom: 5px;
    font-size: 18px;
  }
  .ui-state-default {
    display: block;
    text-decoration: none;
    color: #333333;
    line-height: 40px;
    font-size: 16px;
  }
  .ui-state-default:hover {
    color: #ffffff;
    background:#31639c;
    border-radius:50px;
    transition: all 0.25s cubic-bezier(0.7, -0.12, 0.2, 1.12);
  }
  .ui-state-highlight {
    color: #ffffff;
    background-color:#31639c;
    border-radius:50px;
  }
  
  .ui-state-active {
    color: #ffffff;
    background-color:#31639c;
    border-radius:50px;
  }
  .ui-datepicker-unselectable .ui-state-default {
    color: #eee;
    border: 2px solid transparent;
  }

  #sectionShowHide{display: none;}