// chosen
.form-chosen{margin-bottom: 20px; font-size: 14px;
  .touch &{font-size: 16px;}
}
.select-chosen{position: relative; background-color: @white;z-index: 999;
  .select-mobile{background: @input-border;width: 40px;height: 40px;position: absolute;right: 0;top: 0;text-align: center; line-height: 40px; .border-radius(0 2px 2px 0);}
  label{line-height: (@input-height-base - 2px);margin: 0;width: 100%;position: absolute;top: 1px;left: 1px;font-weight: normal;.transition(all 0.3s ease);outline: 2px solid transparent;padding: 0 15px;text-align: left;white-space: nowrap; z-index: 1; cursor: pointer; overflow: visible; color: @input-color-placeholder; display: block; z-index: 1;}
  &.open{z-index: 9;}
  &.error{
    .chosen-single, .chosen-default{border-color: @brand-warning}
    .error-content{bottom: -12px; top: inherit;}
  }
  .icoCharte-error, .icoCharte-check{right: 40px}
  &.active{background-color: transparent;
    .chosen-single{background-color: @white;
      div{background-color: @grey99}
    }
    label{height: 20px; font-size: 11px; display: inline-block; width: auto; top: -7px; left: 8px; line-height: 1; z-index: 3; padding: 0 7px; background: @white; cursor: text}
    .select-mobile{background-color: @brand-primary}
    select{border-color: @brand-primary}
    .chosen-single{border-color: @grey99}
  }
  select{background-color: transparent; z-index: 99; position: relative;.border-radius(@input-border-radius);color: @input-color;font-size: 16px; -webkit-appearance: none;-moz-appearance: none;appearance: none;background-image: none;
    option{color: @input-color;font-size: 16px;}
    &:focus{outline: 0;}
  }
  &.select-disabled{
    select{background-color: @input-bg-disabled; color: @input-color-placeholder}
    .chosen-disabled{
      cursor: not-allowed;
      .chosen-single, .chosen-default{background-color: @input-bg-disabled; color: @input-color-placeholder}
    }
  }
}

.chosen-container {position: relative; z-index: 2;
  & * {.box-sizing(border-box)}
  & .chosen-drop {display: none; z-index: 1010;width: 100%;}
  a {cursor: pointer}
  &-single {
    .chosen-single {
      white-space: nowrap;
      display: block;
      border: 1px solid @input-border;
      height: @input-height-base;
      line-height: @input-height-base;
      .border-radius(@input-border-radius);
      color: @input-color;
      text-decoration: none;
      span {
        display: block;
        margin-right: @input-height-base;
        padding-left: (@grid-gutter-width / 2);
        height: @input-height-base - 0.125rem;
        line-height: @input-height-base - 0.125rem;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      div {
        position: absolute;
        top: 1px;
        right: 1px;
        display: block;
        width: 32px;
        height: (@input-height-base - 2px);
        line-height: (@input-height-base - 2px);
        text-align: center;
        background-color: @input-border;
        .border-radius(0 @input-border-radius @input-border-radius 0);
        b{
          display: inline-block;width: 10px; height: 6px; background: url('@{img}/sprite_charte.svg') no-repeat -36px -15px transparent;
          .no-svg & {background-image: url('@{img}/sprite_charte.png');}
        }
        .chosen-with-drop& {
          background-color: @brand-primary;
        }
      }
      .chosen-disabled& {cursor: default}
    }

    .chosen-drop{
      .chosen-results{width: 100%;
        .active-result{text-overflow: ellipsis;display: block;}//word-wrap: break-word;
      }
    }
    &.chosen-container-single-nosearch{
      .chosen-search {position: absolute;left: -9999px;}
    }
  }
  .chosen{
    &-results {
      overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;background-color: #f4f4f4; padding: 0 15px; margin-bottom: 0; margin-top: -1px;
      li {
        display: none;
        margin: 0;
        padding: 13px 0;
        list-style: none;
        white-space: nowrap;
        word-wrap: break-word;
        -webkit-touch-callout: none;
        color: @input-color;
        border-top: 1px solid @input-border;
        &.active-result   {cursor: pointer;display: block;}
        &.disabled-result {display: list-item;color: @input-color;cursor: default;}
        &.no-results      {color: @input-color;display: list-item;background: @input-bg-disabled;}
        &.group-result    {display: list-item;font-weight: bold;cursor: default;}
        &.group-option    {padding-left: 15px;}
        &:hover{color: @brand-primary}
      }
    } &-drop{position: absolute;top: 100%;left: -9999px;z-index: 1010;min-width: 100%; width: auto; border: 1px solid @input-border;border-top: 0;background: #f4f4f4;.box-shadow(0px 3px 5px 0px #c8c8c8); padding: 0}
  }
  &-active{
    .chosen{
      &-drop{left: 0; display: block;overflow-x: hidden;}
      &-single{border-color: @input-border-focus; .border-radius(3px 3px 0 0);
        div {.border-radius(0 3px 0 0); background: @brand-primary}
      }
    }
  }
}
.select-chosen-container {
  position: relative;
  & ~ & {margin-top: 10px}
}


form{margin: 0;
  .tooltip{
    .error{padding-bottom: 20px;
      &-content{bottom: 3px; right: 8px}
    }
  }
  .cp{width: 50%} //Code postal size
  .form-group{
    &.secure{
      margin: 0 0 25px;
      .input-group-addon{.border-radius(0px);background: none;padding: 0;margin: 0;width: auto;display: inline-block;border:1px solid @greyc4;float: left;}
      input{border-color:@greyc4;border-left:none;height: 50px;line-height: 50px;display:block;width: 65%;
        @media (max-width: 767px) {
          width: 82%;
        }
      }
    }
    &.form-info{
      &-btn{position: inherit; width: 25px; float: right;}
      .CheckBox span.text{width: 90%}
    }
  }
  textarea.form-control{min-height: 100px;resize: none; padding: 10px 35px 10px 15px; line-height: @line-height-base}

  .input-group{
    .form-control{.border-radius(2px 0 2px 0)}
    &-btn .btn{.border-radius(0);.box-shadow(none);padding-left: 12px; padding-right: 12px; margin: 0; line-height: inherit;
      &.inscription{padding-left: 30px; padding-right: 30px;}
    }
  }
  .radios{padding-bottom: 14px}
  .CheckBox{
    width: 100%;cursor:pointer;font-family: 'open_sanssemibold';white-space: normal;font-size: 16px;margin-bottom: 19px;
    input{display:none;}
    span{
      display:inline-block;width:20px;height:18px;cursor:pointer;position: relative;top:2px;background:url('@{img}/s_site.svg') -1124px -232px no-repeat scroll;
      .no-svg & {background-image:url('@{img}/s_site.png')}
      &.text{
        float: right;width:90%;text-align: justify;height: auto;position: relative;background: none;display: block;top: 0px;
      }
    }
    .error-content{clear: both}
    &.check{
      span{
        background-position: -1124px -182px;
        &.text{background: none;}
      }
      &.disabled{
        color:inherit;
        span{
          background-position: -1124px -132px;
          &.text{background: none;}
        }
      }
    }
  }
  .CheckRadio, .CheckRadio_t2{
    width: 100%;cursor:pointer;font-family: 'open_sanssemibold';white-space: normal;font-size: 16px;
    .error-content{left: 20px; right: inherit; font-family: 'open_sansregular';    font-weight: normal;}
    &.not-active { opacity: 0.5; cursor: not-allowed;
      span { cursor: not-allowed; }
    }
    input{display:none;}
    span{
      display:inline-block;width:15px;height:15px;cursor:pointer;position: relative;top:2px;background:url('@{img}/s_site.svg') -1250px -236px no-repeat scroll;
      .no-svg & {background-image:url('@{img}/s_site.png')}
      &.text{float: right;width:90%;text-align: justify;height: auto;position: relative;background: none;display: block;top: 0;}
    }
    &.check{
      span{
        background-position: -1250px -186px;
        &.text{background: none;}
      }
      &.disabled{
        color:inherit;
        span{
          background-position: -1250px -136px;
          &.text{background: none;}
        }
      }
    }
  }
  &.loading { cursor: not-allowed;
    .CheckRadio, .CheckRadio_t2{ cursor: not-allowed;
      span { cursor: not-allowed;  }
    }
  }

  .btn-link, .btn-link:focus{background:url('@{img}/s_link.svg') 0% -50px no-repeat scroll;padding-left:25px;white-space: normal;padding-right: 0px;text-align: left;
    .no-svg & {background-image:url('@{img}/s_link.png')}
    font-size: 14px;
  }

  //Fix IOS autoZoom
  input, textarea, .form-control, select{font-size: 14px;
    .touch &{font-size: 16px}
  }

  .legal{text-align: right;font-family: 'open_sansitalic';margin: 0}
  .legalMention{
    font-family: 'open_sansitalic';text-align: justify;color:@grey66;font-size: @font-size-small;
  }
  .input-group-btn{vertical-align: top;}

  div.error{
    input, textarea{border-color: @brand-warning;}
    label{border:none}
  }
  .error-content{color: @brand-warning;position: absolute; top: 100%; right: 0;font-size: 10px; text-align: right; line-height: 1;margin-top: -17px;}

  &.newsletterCustomer .CheckBox span.text{text-align: left}
  &.ajax .loader{
    background-image: url('@{img}/loader_32_ff.gif'); width: 32px; height: 32px; display: none;
    .modal-body & {top: 10px;  position: relative;}
  }
  &#formContactNonConnete .loader {background-image: url('@{img}/loader_32_eb.gif'); }
}
.icoCharte-error,.icoCharte-check{position: absolute; top: 13px; right: 15px;z-index: 4;}
.form {
  &-btn{margin-bottom: 0;
    &-picto{height: auto; width: 16px; display: block; position: absolute; top: 50%; left: 0; .translate(0; -50%); line-height: 16px}
    &-content{display: inline-block; width: auto; padding-left: 21px; position: relative;}
    .btn{
      .icoCharte{margin-right: 5px}
      path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @white;}
    }
    .btn-primary{margin-top: 0;}
  }
  &-group {position: relative;z-index: 1; margin-bottom: 0; padding-bottom: 19px;
    &:last-child{padding-bottom: 0}
    &.textarea{
      label{min-height: 100px}
      .icoCharte{right: 20px}
    }
    &.disabled{background: transparent;
      .form-control{color: @input-color-placeholder;background: @input-bg-disabled;}
    }
    label{line-height: (@input-height-base - 2px);color: @input-color-placeholder;margin: 0;width: 100%;position: absolute;top: 0;left: 0;font-family: 'open_sansregular';.transition(all 0.3s ease);outline: 2px solid transparent;padding: 0 15px;text-align: left;white-space: nowrap;z-index: 2; cursor: text; overflow: visible; font-size: 14px; font-weight: normal;
      .touch &{font-size: 16px;}
      &.CheckBox{position: static; line-height: @line-height-base; white-space: normal; margin-bottom: 19px;}
    }
    &.active{
      label{height: 15px;min-height: 15px; font-size: 11px; display: inline-block; width: auto; top: -7px; left: 8px; line-height: 1; z-index: 4; padding: 0 7px; background: @white;}
      .form-control{border-color: @grey99;
        &:focus{border-color: @input-border-focus}
      }
    }
    .input-group-btn{position: absolute; width: auto; right: 0; top: 0; z-index: 4; height: @input-height-base;}
    &.error{
      &, &.active{
        .form-control, textarea{
          &, &:focus{border-color: @brand-warning}
        }
      }
    }
  }
  &-control{position: relative;z-index: 3;width: 100%;padding: 0 25px 0 15px;line-height: @input-height-base;  .box-shadow(none);font-size: 14px; background-color: transparent;
    .touch &{font-size: 16px;}
    &:focus {.box-shadow(none)}
  }
}
.bg{
  .title{margin-bottom: 0;
    & > span{display: block;
      &.title-picto{max-width: 50px; max-height: 50px; margin: 20px auto; display: block;
        path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @white}
      }
    }
  }
  .chapo{margin-top: 0.8em}
}

//Via Michelin
.sCompletion, div.mcm-completion{
  position: absolute;border : 1px solid @brand-primary !important;background-color: @white;z-index: 2010!important;text-align:left;max-height:300px !important;overflow:auto;padding:0;
  table{border-collapse: collapse;}
  tr{color:@black1d !important;cursor:pointer;}
  td {color: @black1d !important;font-size: @font-size-small !important;line-height: 30px !important;padding-left: 10px !important;text-align: left;white-space: nowrap;}
  .liste_suggest {list-style-type:none;margin:0;padding:0;}
  .selected {
    background-color:@white !important;
    td {
      background-color:@white !important;
      span.match {background-color: inherit;color: @brand-primary!important;font-size: @font-size-small !important;}
    }
  }
  .match {color:@brand-primary !important;}
  .vmapi-completion-grouping-title {padding-left:5px;font-family: 'open_sansbold';background-color:@white !important;}
}

@media (min-width: 768px){
  form{
    .cp { //Code postal size
      width: 70% ;
      .lt-ie9 & {line-height: 30px;font-size: 14px;}
    }
    .btn-link{text-align: center}
    .form-group{
      input{font-size: 14px;}
      &.secure{
        span {
          top: 2px;
          &.text {top: 0px;}
        }
        .lt-ie9 & input{line-height: 50px;}
      }
    }
    .CheckBox{
      font-size: 14px;
      .lt-ie9 & {span{top:4px;}}
    }

    .CheckRadio, .CheckRadio_t2{
      font-size: 14px;
      span.text{width: 96%;}
    }

    input, textarea, .form-control, select{font-size: 14px;}
  }
}

@media (min-width: 992px) {
  form {
    .cp {width: 50%}
    .CheckBox  span {
      top: 0px;
      &.text {
        width: 93%;
      }
    }
  }
}
.title{
  & + form, & + .form{margin-top: 20px;}
}
.chapo.hidden-sm{
  @media(min-width: @screen-sm) and (max-width: @screen-md-max){
    & + form, & + .form{margin-top: 20px;}
  }
}

.rgpd-mention, .rgpd-mention-modal{
  font-family: 'Open sans';
  color: #737373;
  font-size: 12px;
  text-align: left;
  #politique-confidentialite{
    text-decoration: underline;
    color: #737373;
  }
}

.rgpd-mention-modal{
  padding-top: 10px;
}

.rgpd-mention{
  padding-bottom: 20px;
  margin-top: -15px;
}