// mixin
@mixin title_form() {
  margin: 0;
  background-color: $gray-light;
  font-size: em(20, $font-size-base);
  font-style: normal;
  font-family: $font-family-sans-serif;
  color: $blue;
  padding: .5em 1em;
  text-transform: none;
}

@mixin clearfix() {
    &:before,
    &:after {
      content: " ";
      display: table;
    }
    &:after {
      clear: both;
    }
  }


// annule le code en place
.form-content--title,
div#rub_consultation h2,
div#rub_service h2,
div#rub_annonce h2,
div#rub_agenda h2,
div#profile h2,
div#services-2nd h3,
div#member h2,
div#help h2,
div#info h2,
div#accessibility h2,
div#contact h2,
div#gauche h3,
div.gru-content div#rub_service h3,
div#centre h3 {
  padding: 0;
  border: none;
  margin: 0.5em 0 0.5em;
  line-height: 1.3;
  color: $blue;
  font-family: $font-family-sans-serif-bold;
  font-size: em(20, $font-size-base);
  font-weight: normal;
  text-transform: uppercase;
  text-align: left;

  &.title_form { @include title_form(); }
}

div#rub_service form { padding: 0;}

form div.page {
  padding: 0;
  margin: 0;
  border: none;
}


div#rub_service div.dataview { margin:0; padding:0;  border-bottom: 1px solid $gray-light;
  div.page {
    border: 1px solid $gray-light;
    border-top: none;
    border-bottom: none;
    padding: 0;
    margin: 0;

    &:last-child { padding-bottom: 1em; }
  }

  div.field {
    padding: 1em;
    margin: 0;
  }

  span.label { display: inline-block; margin: 0; vertical-align: top; width: 45%; margin-right: 4%; font-weight: normal; text-align: right; }
  .value { display: inline-block; margin: 0; vertical-align: top; width: 49%; text-align: left; font-family: $font-family-sans-serif-bold; }
}


.bo-block { margin: 1em 0;
  + form.quixote { border-top: 1px solid $gray-light }
}
#main-content ul#evolutions li { background-position: 0 0.9em; }

// FORM

label { font-weight: normal; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
  @extend .box-sizing;
  width: 100%;
  z-index: 10;
  position: relative;
  font-family: $font-family-sans-serif;
}

input[type="text"][readonly],
input[type="email"][readonly],
input[type="password"][readonly],
input[type="number"][readonly],
input[type="tel"][readonly],
input[type="date"][readonly],
textarea[readonly] {
  border: 0;
}

input[type="checkbox"][disabled] {
  visibility: hidden;
  position: absolute;
  
  + span::before {
    content: " ";
    height: 16px;
    width: 16px;
    display: inline-block;
    background-image: url("img/checkbox_unchecked.png");
    background-repeat: no-repeat;
    margin-right: 10px;
    vertical-align: top;
  }
  
  &[checked] + span::before {
    background-image: url("img/checkbox_checked.png");
  }
}

.widget {
  fieldset {
    padding: 0;
    margin: 0;
    border: none;
  }
}

// FORM : Particulier identification

.title_form { @include title_form(); }
.ss-title_form {
  border-left: 1px solid $gray-light;
  border-right: 1px solid $gray-light;
  padding: .75em 1em .5em;
  margin: 0;
}


div[id^="rub"] form.quixote.formulaire {

    .title { margin-bottom: .75em; color: $texte; font-size: em(22, $font-size-base); font-weight: normal;
      label { color: $texte; font-size: 22px; }
    }

    .widget { border: none; padding: 0 0 1em; }

    div.SingleSelectHintWidget {
      .title label { padding-bottom: 0; color: $blue; font-size: 16px; }
    }

    div.RadiobuttonsWidget {
      .title,
      .content {
        // display: inline-block; margin-right: .5em;
      }
    }

}


div[id^="rub"] {
  form.quixote {
    .title { color: $blue; font-size: em(14, $font-size-base);
      label { font-size: 1em; }
    }
	/* custom MI */
    .widget, .comment-field {
      border-left: 1px solid $gray-light;
      border-right: 1px solid $gray-light;
    }
	
	.widget {
      padding: 1em;
    }
	
	.comment-field {
      padding: 1em;
      
      p:last-of-type {
      	margin-bottom: 0;
      }
      
      &.miNoPaddingT {
      	padding-top: 0;
      }
      
      &.miNoPaddingB {
      	padding-bottom: 0;
      }
      
      &.miNoPaddingTB {
      	padding-top: 0;
      	padding-bottom: 0;
      }
    }
    
    p.comment-field {
    	margin-bottom: 0;
    }
    
    .comment-field.miInformation {
    	padding: 1.5em 2em 1.5em 4em;
    	background: rgb(217, 237, 247);
    	color: rgb(51, 51, 51);
    	border: none;
    	border-left: 0;
    	border-right: 0;
    }
    
    .content {
      .widget { border: none; padding: 0; }
    }

    div.buttons {
      border-top: 1px solid $gray-light;
    }
  }

  div.RadiobuttonsWidget,
  div.WcsExtraStringWidget,
  div.SingleSelectHintWidget,
  div.EmailWidget,
  div.FileWithPreviewAndStrongboxWidget {
    position: relative;
    padding: .5em 0 .75em;
  }

  div.RadiobuttonsWidget { color: $blue;
    .title,
    .content { display: block; }

    .title { margin-bottom: 10px; }

    .content br + label {
      margin-top: 10px;
      display: inline-block;
    }
  }

  div.FileWithPreviewAndStrongboxWidget {
    .title,
    .content { display: inline-block; vertical-align: top;  }

    .title { margin-right: 2%; font-weight: normal; }
    p { margin: .5em 0 0; }

    + div.FileWithPreviewAndStrongboxWidget {
      &:before { margin-bottom: 1em; display: block; content:""; border-bottom: 1px solid $gray-light; }
    }
  }

}

.required { color: $blue; }
.help { padding: .5em; margin: .5em 0; background-color: $gray-light; font-size: $font-size-small-px; border-radius: 5px;  }
.info { font-size: $font-size-small-px; }
div.widget { margin-bottom: 0; }
div.widget div.title { color: $texte; font-weight: normal; }

div.CheckboxesWidget .content,
div.RadiobuttonsWidget .content {
   label { margin-right: .5em;}
   ul {
     li {
       padding: 0 0 1em 1em;
       background: none !important;
     }
   }
}

div.DateWidget input,
div.EmailWidget input,
div.StringWidget input,
div.PasswordWidget input,
div.WcsExtraStringWidget input,
div.TextWidget textarea,
div.SingleSelectHintWidget select {
  border-color: $gray-lighter;
  border-radius: 5px;
  padding: 8px;
}


div[id^="rub"] div.buttons,
div.buttons {
  @include clearfix();
  padding-top: 2em;
  margin: 0;

    button,
    input {
      font-family: $font-family-sans-serif;
      margin: 0;
      border: 1px solid $blue;
      background-color: #FFF;
      border-radius: 5px;
      color: $blue;
      padding: .5em 1.5em;
      height: auto;
      font-weight: normal;
      font-size: em(14, $font-size-base);

      &:hover,
      &:focus { background-color: $blue; color:#FFF; border: 1px solid $blue; box-shadow: none;  }
    }
    button[name="submit"],
    input[type="submit"][name="submit"] {font-weight: normal; box-shadow: none;  }

   div.SubmitWidget { border: none; padding: 0;}

   div.submit-button { float: right;
    input { color: #FFF; text-transform: uppercase; background-color: $blue; background-image: url('img/chevron_white.png'); background-repeat: no-repeat; background-position: 6.4em center;
      &:hover,
      &:focus { background-color: #FFF; color: $blue; }
    }
   }
   div.previous-button { margin-right: 2em; float: left;

    button,
    input { background-image: url('img/chevron-back.png'); background-repeat: no-repeat; background-position: 5px center; }
   }
   div.cancel-button {float: left;}
}

// messages d'erreur/validation
div.validenotice,
div#receipt-intro { padding: 1.5em 2em 1.5em 4em; margin: 2em 0; background: $bg-valid url('img/picto-valid.png') no-repeat .75em center; color: $valid; border: none; }
div.errornotice { padding: 1.5em 2em 1.5em 4em; margin: 2em 0; background: $bg-error url('img/picto-alert.png') no-repeat .75em center; color: $error; border: none; }
div.error { padding: 0; margin: 0; background: none; color: $error; font-weight: normal;
  &:before { @extend .box-sizing; position: absolute; background: rgba(194,34,34, 0.1); display: block; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; content: ""; z-index:0; border: 5px solid #FFF; }
}

// Resume de fin apres confirmation d envoi
#summary {
  .subtitle {
    display: none; 
  }
}
