/**
 * Project style sheet.
 *
 * @package    vanilla
 * @subpackage css
 * @author     Loops <evrard at h2a dot lu>
 * @version    SVN: $Id: forms.css 77 2017-06-27 12:43:49Z loops $
 */


/*** MESSAGES ------------------ ***/

.msgerror { color: #E90000; }
.msgsuccess { color: #008913; }



/*** ELEMENTS ------------------ ***/

/* default */
select, textarea, input { color: #474B5A; border-radius: 3px; border: 1px #D1D2D5 solid; box-sizing: border-box; background-color: #fff; }
/* hover */
select:hover, textarea:hover, input:hover { border-color: #191E31; }
/* focus, active */
select:focus, textarea:focus, input:focus,
select:active, textarea:active, input:active { border-color: #191E31; color: #191E31; }
/* error (by default #E90000) */
.\:error select, .\:error textarea, .\:error input { border-color: #E90000 !important; color: #E90000 !important; }
/* invalid/required */
/* Firefox */
select:-moz-ui-invalid, textarea:-moz-ui-invalid, input:-moz-ui-invalid { border-color: #E90000 !important; color: #E90000 !important; }

/** padding **/
/* try to harmonize with select */
textarea, input { padding: 12px 15px 14px; }
html.mac textarea, html.mac input { padding-top: 15px; padding-bottom: 11px; } /* Chrome/Safari MAC */
x:-moz-any-link, html.mac textarea, html.mac input { padding-top: 14px; padding-bottom: 12px; } /* Firefox MAC */
html.safari_ios textarea, html.safari_ios input { padding-top: 13px; padding-bottom: 13px; } /* Safari iOs */

select { padding: 11px 11px 13px; -webkit-appearance: none; }
html.mac select { padding: 15px 15px 11px; -webkit-appearance: none; } /* Chrome/Safari MAC */
x:-moz-any-link, html.mac select { padding: 12px 11px; } /* Firefox MAC */
  option { padding: 0 15px; }
  optgroup { padding: 0 15px; }
    optgroup > option { padding: 0 0 0 1em; margin: 0 -15px; }
    
textarea { min-height: 160px; }

/** stupid webkit shit, put your own colors **/
/** / input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #xxxxxx inset; color: #xxxxxx !important; } /**/
/** / input:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 1000px #xxxxxx inset; color: #xxxxxx !important; } /**/
/** / input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #xxxxxx inset; color: #xxxxxx !important; } /**/
/** / .\:error input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #xxxxxx inset; color: #xxxxxx !important; } /**/



/*** PLACEHOLDER --------------- ***/
/* each variation needs to be separated */

/* normal */
::placeholder { opacity: .5; color: #fff; }
::-webkit-input-placeholder { opacity: .5; color: #fff; }
:-moz-placeholder { opacity: .5; color: #fff; }
::-moz-placeholder { opacity: .5; color: #fff; } /* FF 19+ had an opacity to the placeholder */
:-ms-input-placeholder {}
.\:placeholder {} /* @see jquery.placeholder.js */
/* hover */
:hover::placeholder { opacity: 1; }
:hover::-webkit-input-placeholder { opacity: 1; }
:hover:-moz-placeholder { opacity: 1; }
:hover::-moz-placeholder { opacity: 1; }
:hover:-ms-input-placeholder { opacity: 1; }
.\:placeholder:hover {} /* @see jquery.placeholder.js */
/* focus, active */
:focus::placeholder, :active::placeholder {}
:focus::-webkit-input-placeholder, :active::-webkit-input-placeholder {}
:focus:-moz-placeholder, :active:-moz-placeholder {}
:focus::-moz-placeholder, :active::-moz-placeholder {}
:focus:-ms-input-placeholder, :active:-ms-input-placeholder {}
.\:placeholder:focus, .\:placeholder:active {} /* @see jquery.placeholder.js */
/* error (by default #E90000) */
.\:error ::placeholder { color: #E90000; }
.\:error ::-webkit-input-placeholder { color: #E90000; }
.\:error :-moz-placeholder { color: #E90000; }
.\:error ::-moz-placeholder { color: #E90000; }
.\:error :-ms-input-placeholder { color: #E90000; }
.\:error .\:placeholder { color: #E90000; } /* @see jquery.placeholder.js */
/* invalid/required */
/* Firefox */
:-moz-ui-invalid::placeholder { color: #E90000; }
:-moz-ui-invalid:-moz-placeholder { color: #E90000; }
:-moz-ui-invalid::-moz-placeholder { color: #E90000; }



/*** LABELS -------------------- ***/

label { color: #474B5A; }
/* on error */
.\:error label { color: #E90000; }
/* for checkboxes */
input[type="checkbox"] + label, input[type="radio"] + label {}
/* hover */
input[type="checkbox"]:hover + label, input[type="radio"]:hover + label,
input[type="checkbox"] + label:hover, input[type="radio"] + label:hover {}
/* focus, active */
input[type="checkbox"]:focus + label, input[type="radio"]:focus + label, 
input[type="checkbox"]:active + label, input[type="radio"]:active + label,
input[type="checkbox"] + label:focus, input[type="radio"] + label:focus, 
input[type="checkbox"] + label:active, input[type="radio"] + label:active {}
/* error */
.\:error input[type="checkbox"] + label, .\:error input[type="radio"] + label { color: #E90000; }
/* invalid/required */
/* Firefox */
input[type="checkbox"]:-moz-ui-invalid + label, input[type="radio"]:-moz-ui-invalid + label { color: #E90000; }



/*** RADIO/CHECKBOX ------------ ***/

/*** default display ***/
input[type="checkbox"], input[type="radio"] { padding: 0 !important; border: 0 !important; width: 16px !important; vertical-align: -2px; }

/*** iconized sample ***/
/* this sample assume three status (inactive, active, error) - for checked and unchecked state - and icon of 13px x 13px */
/* do not hesitate to adapt it if necessary */
/* for IE8, do not forgot to activate jquery.checked.js in view.yml file */

/* hide it behind the label, but keep it at correct place and visible (for focus) */
input[type="checkbox"], input[type="radio"] { position: absolute; z-index: -1; margin-top: 2px; margin-left: 2px; opacity: 0; }
input[type="checkbox"] + label, input[type="radio"] + label { position: relative; z-index: 1; top: -1px; display: inline-block; padding-left: 22px; min-height: 20px; }
html.mac input[type="checkbox"] + label, html.mac input[type="radio"] + label { padding-top: 2px; } /* Chrome/Safari MAC */
x:-moz-any-link, html.mac input[type="checkbox"] + label, html.mac input[type="radio"] + label { padding-top: 1px; } /* Firefox MAC */
html.safari_ios input[type="checkbox"] + label, html.safari_ios input[type="radio"] + label { padding-top: 1px; } /* Safari iOs */
/* background display */
input[type="checkbox"] + label:before, input[type="radio"] + label:before,
input[type="checkbox"] + label:after, input[type="radio"] + label:after { 
  display: inline-block; width: 16px; height: 16px; position: absolute; top: 1px; z-index: 1; box-sizing: border-box; 
  border: 1px currentColor solid; background-color: currentColor; color: #D1D2D5; border-radius: 3px; background-clip: content-box;
}
input[type="radio"] + label:before, input[type="radio"] + label:after { border-radius: 100%; }
/* by default, only before */
input[type="checkbox"] + label:before, input[type="radio"] + label:before { content: ""; left: 0; }
/* with this class, on after */
/* adjust label */
input.\:after[type="checkbox"] + label, input.\:after[type="radio"] + label { padding-left: 0; padding-right: 40px; }
/* hide before */
input.\:after[type="checkbox"] + label:before, input.\:after[type="radio"] + label:before { display: none; }
/* display after */
input.\:after[type="checkbox"] + label:after, input.\:after[type="radio"] + label:after { content: ""; right: 0; }

/** unchecked/checked **/
input[type="checkbox"] + label:before, input[type="radio"] + label:before,
input[type="checkbox"] + label:after, input[type="radio"] + label:after { padding: 7px; } /* background-clip: content-box ; do not forgot to exclude border ;) */
input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before, 
input[type="checkbox"]:checked + label:after, input[type="radio"]:checked + label:after { padding: 4px; } /* background-clip: content-box */
/* same rules (must be separate for IE8) */
input[type="checkbox"].\:checked + label:before, input[type="radio"].\:checked + label:before,
input[type="checkbox"].\:checked + label:after, input[type="radio"].\:checked + label:after { padding: 4px; } /* background-clip: content-box */

/* effect */
/* hover (note that the input cannot be hover) */
input[type="checkbox"] + label:hover:before, input[type="radio"] + label:hover:before, 
input[type="checkbox"] + label:hover:after, input[type="radio"] + label:hover:after,
/* focus, active */
input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before, 
input[type="checkbox"]:active + label:before, input[type="radio"]:active + label:before,
input[type="checkbox"] + label:focus:before, input[type="radio"] + label:focus:before, 
input[type="checkbox"] + label:active:before, input[type="radio"] + label:active:before, 
input[type="checkbox"]:focus + label:after, input[type="radio"]:focus + label:after, 
input[type="checkbox"]:active + label:after, input[type="radio"]:active + label:after,
input[type="checkbox"] + label:focus:after, input[type="radio"] + label:focus:after, 
input[type="checkbox"] + label:active:after, input[type="radio"] + label:active:after { color: #191E31; } /* currentColor for border and background */
/* invalid/required */
/* Firefox */
input[type="checkbox"]:-moz-ui-invalid + label:before, input[type="radio"]:-moz-ui-invalid + label:before,
input[type="checkbox"]:-moz-ui-invalid + label:after, input[type="radio"]:-moz-ui-invalid + label:after { color: #E90000 !important; } /* currentColor for border and background */
/* error */
.\:error input[type="checkbox"] + label:before, .\:error input[type="radio"] + label:before,
.\:error input[type="checkbox"] + label:after, .\:error input[type="radio"] + label:after { color: #E90000 !important; } /* currentColor for border and background */



/*** DISPLAY ------------------- ***/

/** fieldset **/
.formfieldset {}
  .formfieldset_title {}
  
/** row **/
.formrow { padding-left: 32%; margin: 15px 0; position: relative; }
.formrow + .formrow { }
   /* label */
  .formlabel { position: absolute; top: auto; left: 0; z-index: 1; width: calc( 32% - 50px ); padding-top: 13px; }
  /* help */
  .formhelp {}
  /* errors */
  .formerror { margin: 5px 0 0; color: #E90000; }

/** submit **/
.formrow_submit {}
  .form_submit {}
  

/*** ALTERNATIVE DISPLAY ------------------- ***/

/** on simple layout **/

/** input **/
select.\:alt, textarea.\:alt, input.\:alt { border-color: #474B5A; background-color: #191E31; color: #fff; }
/* hover/active/focus */
select.\:alt:hover, textarea.\:alt:hover, input.\:alt:hover,
select.\:alt:focus, textarea.\:alt:focus, input.\:alt:focus,
select.\:alt:active, textarea.\:alt:active, input.\:alt:active { border-color: #fff; }

/** radio/checkbox **/
/* label */
input[type="checkbox"].\:alt + label, input[type="radio"].\:alt + label { color: #fff; padding-left: 40px; padding-top: 3px; min-height: 24px; }
html.mac input[type="checkbox"].\:alt + label, html.mac input[type="radio"].\:alt + label { padding-top: 6px; } /* Chrome/Safari MAC */
x:-moz-any-link, html.mac input[type="checkbox"].\:alt + label, html.mac input[type="radio"].\:alt + label { padding-top: 5px; } /* Firefox MAC */
html.safari_ios input[type="checkbox"].\:alt + label, html.safari_ios input[type="radio"].\:alt + label { padding-top: 5px; } /* Safari iOs */
/* unckecked */
input[type="checkbox"].\:alt + label:before, input[type="radio"].\:alt + label:before,
input[type="checkbox"].\:alt + label:after, input[type="radio"].\:alt + label:after { width: 24px; height: 24px; padding: 11px; color: #474B5A; background-color: #fff; } /* disable background change for checked effect */
/* checked */
input[type="checkbox"].\:alt:checked + label:before, input[type="radio"].\:alt:checked + label:before, 
input[type="checkbox"].\:alt:checked + label:after, input[type="radio"].\:alt:checked + label:after { padding: 7px; } /* background-clip: content-box */
/* same rules (must be separate for IE8) */
input[type="checkbox"].\:alt.\:checked + label:before, input[type="radio"].\:alt.\:checked + label:before,
input[type="checkbox"].\:alt.\:checked + label:after, input[type="radio"].\:alt.\:checked + label:after { padding: 7px; } /* background-clip: content-box */
/* hover (note that the input cannot be hover) */
input[type="checkbox"].\:alt + label:hover:before, input[type="radio"].\:alt + label:hover:before, 
input[type="checkbox"].\:alt + label:hover:after, input[type="radio"].\:alt + label:hover:after,
/* focus, active */
input[type="checkbox"].\:alt:focus + label:before, input[type="radio"].\:alt:focus + label:before, 
input[type="checkbox"].\:alt:active + label:before, input[type="radio"].\:alt:active + label:before,
input[type="checkbox"].\:alt + label:focus:before, input[type="radio"].\:alt + label:focus:before, 
input[type="checkbox"].\:alt + label:active:before, input[type="radio"].\:alt + label:active:before, 
input[type="checkbox"].\:alt:focus + label:after, input[type="radio"].\:alt:focus + label:after, 
input[type="checkbox"].\:alt:active + label:after, input[type="radio"].\:alt:active + label:after,
input[type="checkbox"].\:alt + label:focus:after, input[type="radio"].\:alt + label:focus:after, 
input[type="checkbox"].\:alt + label:active:after, input[type="radio"].\:alt + label:active:after { color: #fff; } /* currentColor for border */

/** row **/
.formrow2 { margin: 10px 0; }

/** submit **/
.formrow2_submit { margin-top: 45px; }

/** link **/
/* on right */
.formlink1_br { display: none; } /* responsive purpose */
.formlink1 { float: right; font-size: 13px; margin-top: 4px; }
html.mac .formlink1 { margin-top: 5px; } /* Chrome/Safari/Firefox MAC */


/** radio/checkbox **/
/* label */
input[type="checkbox"].\:alt2 + label, input[type="radio"].\:alt2 + label { color: #fff; padding-left: 52px; padding-top: 0; min-height: 32px; font-size: 30px; }
html.mac input[type="checkbox"].\:alt2 + label, html.mac input[type="radio"].\:alt2 + label { padding-top: 3px; } /* Chrome/Safari MAC */
x:-moz-any-link, html.mac input[type="checkbox"].\:alt2 + label, html.mac input[type="radio"].\:alt2 + label { padding-top: 2px; } /* Firefox MAC */
html.safari_ios input[type="checkbox"].\:alt2 + label, html.safari_ios input[type="radio"].\:alt2 + label { padding-top: 3px; } /* Safari iOs */
/* unckecked */
input[type="checkbox"].\:alt2 + label:before, input[type="radio"].\:alt2 + label:before,
input[type="checkbox"].\:alt2 + label:after, input[type="radio"].\:alt2 + label:after { width: 32px; height: 32px; padding: 0; background-color: transparent; border-radius: 3px; background-position: 999px 999px;} /* use icon fo checked effect */
/* checked */
input[type="checkbox"].\:alt2:checked + label:before, input[type="radio"].\:alt2:checked + label:before, 
input[type="checkbox"].\:alt2:checked + label:after, input[type="radio"].\:alt2:checked + label:after { padding: 0; color: #F2543A !important; background-color: #F2543A; background-position: -139px -271px; } /* use icon fo checked effect */
/* same rules (must be separate for IE8) */
input[type="checkbox"].\:alt2.\:checked + label:before, input[type="radio"].\:alt2.\:checked + label:before,
input[type="checkbox"].\:alt2.\:checked + label:after, input[type="radio"].\:alt2.\:checked + label:after { padding: 0; color: #F2543A; background-color: #F2543A; background-position: -139px -271px; } /* use icon fo checked effect */


/* display */
.formchoice2_list { margin: 60px 0; }
  .formchoice2_item { margin: 15px 0; }
    .formchoice2_label { white-space: nowrap; }
      .formchoice2_price { font-size: 12px; line-height: 1.231; color: #fff; padding: 4px 11px 3px; border-radius: 64px; border: 1px #474B5A solid; background-color: transparent; display: inline-block; text-align: center; text-decoration: none !important; vertical-align: 4px; margin-left: 20px; }
      html.mac .formchoice2_price { padding-top: 5px; } /* Chrome/Safari/Firefox MAC */