// form controls
.form-group, .input-group{
  position: relative; margin-bottom: 30px;
  label{display: block;margin-bottom: 10px;font-size: 15px;color: color(900);}
  .form-control{
    height:50px;color:color(200);font-size:16px;border-radius: 2px;background-clip: initial;
    &:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;border-color:color(500);}
    &:valid, &:invalid{
      &:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;}
    }
  }
  input.form-control, textarea.form-control{
    padding: 10px 15px; border-color: #E1E1E1;
    @include placeholder {color: #C1C1C1;}
  }
  textarea.form-control{height:auto;}
  .inputPassword{
    input{padding-right: 50px;}
    .tyepCheck{
      top:16px;right: 15px;color: #C1C1C1;font-size: 16px;line-height: 0;
      span{
        input{
          opacity: 0;cursor: pointer;z-index: 3;left: 0;right: 0;top: 0;bottom:0;
          i{position: relative;}
          &:checked~i{
            &::after{
              content: "";@include rotate(-45deg);z-index: 2;background-color: color(200);
              width: 100%;height: 2px;position: absolute;left: 0;right: 0;top: 7px;
            }
          }
        }
      }
    }
  }
  &--check{margin-bottom: 15px;}
  .datePicker{
    input{padding-right: 48px;}
    &:after{
      content: "\e901";font-family: 'icomoon';
      color: #C1C1C1;position:absolute; top:11px; right: 15px;
    }
  }
  .timePicker{
    input{padding-right: 48px;}
    &:after{
      content: "\e906";font-family: 'icomoon';
      color: #C1C1C1;position:absolute; top:12px; right: 15px;
    }
  }
  @media(max-width:1599px){
    margin-bottom: 20px;
    &--check{ margin-bottom: 5px; }
    label{margin-bottom: 6px;}
    .form-control{height: 44px; font-size: 15px;}
    .inputPassword{
      .tyepCheck{
        top:14px;font-size: 14px;
        span{
          input{
            &:checked~i{
              &::after{top: 6px;}
            }
          }
        }
      }
    }
    .datePicker{
      &:after{top:8px;font-size: 16px;}
    }
    .timePicker{
      &:after{top:9px;font-size: 16px;}
    }
  }
  @include media-breakpoint-down(lg) {
    margin-bottom: 15px;
    &--check{ margin-bottom: 0; }
    .form-control{height: 38px;font-size: 14px;}
    textarea.form-control{font-size: 13px;}
    input.form-control, textarea.form-control{padding: 6px 10px;}
    .inputPassword{
      .tyepCheck{font-size: 13px; top: 12px; right:10px;}
      input{padding-right:45px;}
    }
    .datePicker,.timePicker{
      input{padding: 6px 35px 6px 10px}
    }
    .datePicker{
      &:after{top:7px;font-size: 15px;}
    }
    .timePicker{
      &:after{top:8px;}
    }
  }
  @include media-breakpoint-down(md){
    label{font-size: 14px;}
  }
}


// common Chexkbox
.commonCheck, .commonRadio{
  ul{
    margin: 0 -5px;
    li{padding: 0 5px;vertical-align: top;}
  }
  &__box{
    margin-bottom: 15px;min-width: 80px;
    input{
      left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;opacity: 0;
      &:checked~label{
        border-color: color(500);color: color(500);
        &:after{content: "\e904";}
      }
    }
    label{
      font-size: 16px;border: 1px solid #E1E1E1;padding: 12px 15px;@include transition(0.1s);
      border-radius: 2px;cursor: pointer;
      &:hover{
        border-color: color(500);color: color(500);
        &:after{content: "\e904";}
      }
      &:after{
        font-family: 'icomoon';color: color(500);position: absolute;
        top: -8px;right: -8px;background-color: color(50);width: 18px;height: 18px;line-height: 18px;
      }
    }
  }
  // css for errors
  .help-block{display: block;position:relative;top: -12px;}
  // css for errors
  @media(max-width: 1599px){
    &__box{
      label{font-size: 15px;padding: 10px 15px;}
    }
  }
  @media(max-width: 1399px){
    &__box{
      label{padding: 10px 15px;}
    }
  }
  @include media-breakpoint-down(lg){
   &__box{
      label{padding: 7.5px 10px;font-size: 14px;}
    }
  }
}

// image upload css
.uploadBox{
  padding: 40px;border:2px dashed #E1E1E1; border-radius: 2px;
  input{outline: none;opacity: 0;left:0;top:0; z-index: 2;cursor:pointer;bottom:0;right: 0;}
  .btn{font-size: 14px;padding: 8px 30px;}
  &__img{
    width: 118px;margin-bottom: 30px;@include box-shadow(0, 0, 39px, rgba(color(900), 0.16));
    vertical-align: top;
    &:not(:last-child){margin-right: 30px;}
    .remove{
      width: 18px;height: 18px;top: -9px;right: -9px;background-color: color(500);
      color: color(50);line-height: 20px;font-size: 8px;z-index: 3;
    }
  }
  &__video{
    &:after{
      content: "";position:absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 1;
      background-color: rgba(color(900), 0.28);width: 100%;height: 100%;
    }
    video{min-width: 100%;height: auto;}
    .btnVideo{
      top: 50%;left: 50%;color: color(50);z-index: 10;width: 40px;height: 40px;
      background-color: rgba(color(500), 0.7);border: 7px solid rgba(color(500), 0.5);
      font-size: 10px;letter-spacing: initial;padding: 0 !important;
      @include translate(-50%, -50%);@include transition(.3s);
      .icon-pause{display: none;}
      &.play{
        .icon-play{display: none;}
        .icon-pause{display: inline-block;}
      }
    }
    .videoDuration{bottom:10px;left: 10px;font-size: 10px;line-height: 10px;}
  }
  @media(max-width: 1599px){
    &__img{
      margin-bottom: 20px;
      &:not(:last-child){margin-right: 20px;}
    }
  }
  @media(max-width: 1399px){
    padding: 30px;
    &__video{
      .btnVideo{ width: 35px;height: 35px;font-size: 7px;}
    }
  }
  @include media-breakpoint-down(lg){
    &__img{
     margin-bottom: 15px;
     &:not(:last-child){margin-right: 15px;}
    }
  }
  @include media-breakpoint-down(md){
    padding: 20px;
    .btn{font-size: 13px;padding: 6px 22px;}
  }
  @include media-breakpoint-down(xs){
    padding: 15px;
    &__img{width: 98px;}
    &__video{
      .btnVideo{width: 30px;height: 30px;font-size: 5px;}
    }
  }
}

// document upload css
.uploadDoc{
  padding: 20px;border:2px dashed #E1E1E1; border-radius: 2px;color: #C1C1C1;
  input{outline: none;opacity: 0;left:0;top:0; z-index: 2;cursor:pointer;bottom:0;right: 0;}
  &__box{
    margin-top: 20px;
    .media{
      img{margin-right: 10px;}
    }
    .right{min-width: 100px;text-align: right;margin-left: 10px;}
    .btnRemove{
      width: 20px;height: 20px;background-color:#D4D4D4;color: color(50);
      line-height: 20px;font-size: 9px;@include transition(.3s);
      &:hover, &:active, &:focus{background-color: color(900);}
    }
  }
  @media(max-width: 1599px){
    &__box{
      .media{
        img{ height: 30px; }
      }
    }
  }
  @include media-breakpoint-down(md){
    padding: 10px;
    label{ font-size: 13px; }
    i{ font-size: 15px; }
    &__box{
      margin-top: 10px;
      .media{
        img{ height: 20px; }
      }
      h5,span{ font-size: 12px; }
      .btnRemove{width: 15px;height: 15px;line-height: 15px;font-size: 7px;
      }
    }
  }
}

// image upload css
.imgUpload{
  border: 5px solid #f5f5f5;width: 120px;height: 120px;color: rgba(color(200), 0.63);
  input{left: 0;right: 0;top: 0;bottom: 0;opacity: 0;cursor: pointer;}
  &__txt{
    label{font-size: 12px;margin-top: 10px;}
  }
  &__edit{
    color: color(500);width: 27px;height: 27px;line-height: 29px;font-size: 12px !important;
    right: -6px;bottom: 8px;@include box-shadow(0, 0, 23px, rgba(color(900), 0.2));
    cursor: pointer;
  }
  @media(min-width:1200px) and(max-width:1399px){
    &__edit{width: 23px;height: 23px;line-height: 25px;font-size: 9px !important;right: -4px;}
  }
  @include media-breakpoint-down(md){
    width: 100px;height: 100px;
    &__edit{
      width: 21px; height: 21px;line-height: 25px;
      .icon-edit{ font-size: 10px; position: absolute;left: 7px; top: 6px; }
    }
    label{font-size: 10px;margin-top: 5px;}
    i{ font-size: 13px; }
  }
}

// datepicker css
.datepicker {
  td, th {height: 35px;width: 35px;}
  table {
    tr {
      td, span {
        &:focus {
          background-color: color(900) !important;background-image: none;
        }
        &.active {
          background-color: color(500) !important; background-image: none;
          &:focus, &:hover {background-color: color(500) !important;background-image: none;}
        }
      }
    }
  }
}
.bootstrap-datetimepicker-widget {
  @include box-shadow(0, 0, 20px, rgba(color(900), 0.15));
  &.dropdown-menu {
    border: none;border-radius: 0;padding: 0 !important; margin: 0 !important;
    &.bottom{
      &:after {border-bottom-color: color(50);}
    }
  }
  &.top{
    &:after{border-top-color: color(900);}
  }
  &.bottom {
    &:before {display: none;}
  }
  .table {
    thead {
      background-color: color(500);color:color(50);
      th {
        border: none;border-radius: 0;font-weight: normal;font-size: 14px;
        span {font-size: 12px;}
        &.dow {background-color: lighten(color(500), 15%);font-size: 13px;color:color(50);}
        &.prev{
          span{
            &::before{font-family: 'icomoon'; content: "\e92c";}
          }
        }
        &.next{
          span{
            &::before{font-family: 'icomoon'; content: "\e92d";}
          }
        }
      }
      tr {
        &:first-child {
          th {
            &:hover {
              background-color: darken(color(500), 10%);color:color(50);
              .fa { color:color(50); }
            }
          }
        }
      }
    }
    td {
      border-top: none;border-radius: 0;font-size: 12px;
      &.today {
        background-color: color(500);color: color(50);
        &:before {border-bottom-color: color(50);}
      }
      &.active {
        background-color: color(500);color: color(50);
        &:before {border-bottom-color:color(50);}
      }
      &:hover {background: color(500) !important;color: color(50);}
    }
  }
  .table-condensed {
    thead {
      background-color: color(500);color:color(50);
      th {
        border: none;border-radius: 0;font-weight: normal;padding: 8px;font-size: 14px;
        &.dow {background-color: #b3dc15;}
        &.prev{
          span{
            &::before{font-family: 'icomoon'; content: "\e92c";}
          }
        }
        &.next{
          span{
            &::before{font-family: 'icomoon'; content: "\e92d";}
          }
        }
      }
      tr {
        &:first-child {
          th {
            &:hover {
              background-color:darken(color(500), 10%);color:color(50);
              .fa { color: color(50); }
            }
          }
        }
      }
    }
    td {
      span {
        border-radius:0;width: 38px;height: 38px;line-height: 38px;font-size: 13px;
        &.month {font-size: 14px;}
        &.active {background-color: color(900);color: color(50);}
        &:hover {background-color: color(500);color: color(50);}
      }
    }
  }
  .timepicker {
    padding:15px;
    a[data-action]{padding:0px;}
    .btn-primary {
      background-color: color(500);background-image: none;
      border-radius: 0;border-color: color(500);margin: 15px 0;
      &:hover, &:focus, &:active {
        background-color: darken(color(500), 10%); border-color: darken(color(500), 10%)
      }
    }
    .fa {color: color(500);}
    table {
      td {
        height:35px;line-height:35px;width:35px;border-radius:0;
        span{font-size: 16px !important;}
        .btn{
          .fa-arrow-up{
            &:before{ content: "\e92f"; font-family: 'icomoon';font-size: 12px;}
          }
          .fa-arrow-down{
            &:before{ content: "\e92e"; font-family: 'icomoon'; font-size: 12px;}
          }
        }
        span, &.day, &.hour, &.minute, &.second {
          &:hover {background-color: color(500);color: color(50);}
        }
      }
    }
  }
  .picker-switch{
    td{
      span{
        &.fa-clock-o{
          color: color(500);font-size: 16px;
          &::before{content: "\e906"; font-family: 'icomoon';}
        }
        &.fa-calendar{
          color: color(500);font-size: 18px;
          &::before{content: "\e901"; font-family: 'icomoon';}
        }
        &:hover{color: color(50);}
      }
    }
  }
}

// custom radio and checkbox
.custom-checkbox{
  .custom-control-input:checked~.custom-control-label{
    &:after {
      font-family: 'icomoon';content: "\e904";font-size: 12px;
      background-image: none;color: color(50);top: 3px;left: 4px;
    }
  }
}
.custom-checkbox, .custom-radio{
  margin-top: 15px;padding-left: 28px;
  &.custom-control-inline{
    &:last-child{margin-right: 0;}
  }
  .custom-control-input {
    z-index: 1;width: 20px;height: 20px;cursor: pointer;
    &:focus {
      ~.custom-control-label {
        &:before {-webkit-box-shadow: none;box-shadow: none;}
      }
    }
    &:not(:disabled):active ~ .custom-control-label::before{
      background-color: color(50);border-color: #898989;
    }
    &:focus:not(:checked) ~ .custom-control-label::before{border-color: #898989;}
  }
  &.interactive-effect {
    .custom-control-label {
      &:after {-webkit-animation: radius-shadow 0.4s;animation: radius-shadow 0.4s;}
    }
  }
  .custom-control-input:checked~.custom-control-label {
    &:after {background-image: none;}
    &:before {
      border-color: color(500);border-radius:3px;background: color(500);
    }
  }
  .custom-control-label {
    width: 100%;cursor: pointer;color: color(200);position: static;
    &:before {
      content: ""; position: absolute; left: 0px; display: block; width: 20px;height: 20px;
      border-radius: 3px; background: color(50); top: 1px; border: 2px solid #898989;
      cursor: pointer; @include transition(all 0.3s);
      border-radius: 2px;
    }
    &:after {
      content: ""; position: absolute; display: block; left:3px; top:4px;@include transition(all 0.3s);cursor: pointer;
    }
  }
  &.custom-radio{
      .custom-control-input:checked~.custom-control-label {
          &:after {background-color:color(500);background-image:none; content: ""; border-radius: 50%;}
          &:before {border-color: color(500);border-radius:50%;background-color:transparent;}
      }
      .custom-control-label {
          &:before,&:after {border-radius:50%; content: "";}
          &:after{width:12px;height:12px;background-color:transparent;left:4px;top:5px;}
      }
  }
}
@include media-breakpoint-down(md) {
  .custom-checkbox{
    .custom-control-input:checked~.custom-control-label{
      &:after {font-size: 10px;top: 4px;left: 4px;}
    }
  }
  .custom-checkbox, .custom-radio{
    padding-left: 24px;
    .custom-control-input {width: 18px;height: 18px;}
    .custom-control-label {
       &:before {width: 18px;height: 18px;}
    }
    &.custom-radio{
      .custom-control-label {
        &:after{width:10px;height:10px;left:4px;top:5px;}
      }
    }
  }
}