/**
 * Project style sheet.
 *
 * @package    vanilla
 * @subpackage css
 * @author     Loops <evrard at h2a dot lu>
 * @version    SVN: $Id: forms.css 65 2019-03-21 08:30:23Z lemale $
 */


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

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



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

/* default */
select, textarea, input { border-width: 1px; border-style: solid; border-color: rgba(112, 112, 112, 0.4); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
input { height: 45px; }
/* hover focus, active */
select:hover, textarea:hover, input:hover,
select:focus, textarea:focus, input:focus,
select:active, textarea:active, input:active { border-color: rgba(112, 112, 112, 1); }
/* error (by default #c22b2b) */
.\:error select, .\:error textarea, .\:error input { border-color: #c22b2b; color: #c22b2b; }
/* invalid/required - for now, only on mozilla */
select:-moz-ui-invalid, textarea:-moz-ui-invalid, input:-moz-ui-invalid { border-color: #c22b2b; color: #c22b2b; }

/** padding **/
/* try to harmonize with select */
textarea, input { padding: 15px 20px; }
select { padding: 1px 0; }
  option { padding: 0 4px; }
  optgroup { padding: 0 4px; }
    optgroup > option { padding: 0 0 0 1em; margin: 0 -4px; }


/** 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 {}
::-webkit-input-placeholder {}
:-moz-placeholder {}
::-moz-placeholder { opacity: 1; } /* FF 19+ had an opacity to the placeholder */
:-ms-input-placeholder {}
.\:placeholder {} /* @see jquery.placeholder.js */
/* hover */
:hover::placeholder {}
:hover::-webkit-input-placeholder {}
:hover:-moz-placeholder {}
:hover::-moz-placeholder {}
:hover:-ms-input-placeholder {}
.\: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 #c22b2b) */
.\:error ::placeholder { color: #c22b2b; }
.\:error ::-webkit-input-placeholder { color: #c22b2b; }
.\:error :-moz-placeholder { color: #c22b2b; }
.\:error ::-moz-placeholder { color: #c22b2b; }
.\:error :-ms-input-placeholder { color: #c22b2b; }
.\:error .\:placeholder { color: #c22b2b; } /* @see jquery.placeholder.js */
/* invalid/required - for now, only on mozilla */
:-moz-ui-invalid::placeholder, :-moz-ui-invalid::placeholder { color: #c22b2b; }
:-moz-ui-invalid:-moz-placeholder, :-moz-ui-invalid:-moz-placeholder { color: #c22b2b; }
:-moz-ui-invalid::-moz-placeholder, :-moz-ui-invalid::-moz-placeholder { color: #c22b2b; }



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

/* on error */
.\:error label { color: #c22b2b; }
/* 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: #c22b2b; }
/* invalid/required */
/* for now, only on mozilla */
input[type="checkbox"]:-moz-ui-invalid + label, input[type="radio"]:-moz-ui-invalid + label { color: #c22b2b; }



/*** 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 { font-size: 13px; position: relative; z-index: 1; display: inline-block; padding-left: 28px; min-height: 34px; padding-top: 5px; }
/* 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; box-sizing: border-box; width: 20px; height: 20px; position: absolute; top: 1px; z-index: 1;
  -webkit-box-shadow: 0 0 0 1px #fff;  box-shadow: 0 0 0 1px #fff; border: 3px #fff solid; background-color: #fff;
}
/* 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: 18px; }
/* 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 **/
/* normal */
input[type="checkbox"] + label:before, input[type="radio"] + label:before,
input[type="checkbox"] + label:after, input[type="radio"] + label:after { -webkit-box-shadow: 0 0 0 1px rgba(112, 112, 112, 0.4); box-shadow: 0 0 0 1px rgba(112, 112, 112, 0.4);  }
/* 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 { -webkit-box-shadow: 0 0 0 1px rgba(112, 112, 112, 1); box-shadow: 0 0 0 1px rgba(112, 112, 112, 1); }
/* invalid/required */
/* for now, only on mozilla */
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 { -webkit-box-shadow: 0 0 0 1px #c22b2b; box-shadow: 0 0 0 1px #c22b2b; }
/* 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 { -webkit-box-shadow: 0 0 0 1px #c22b2b; box-shadow: 0 0 0 1px #c22b2b; }

/** checked **/
/* normal */
input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:after, input[type="radio"]:checked + label:after { background-color: rgba(112, 112, 112, 1); }
/* hover (not that the input cannot be hover) */
input[type="checkbox"]:checked + label:hover:before, input[type="radio"]:checked + label:hover:before,
input[type="checkbox"]:checked + label:hover:after, input[type="radio"]:checked + label:hover:after,
  /* focus, active */
input[type="checkbox"]:checked:focus + label:before, input[type="radio"]:checked:focus + label:before,
input[type="checkbox"]:checked:active + label:before, input[type="radio"]:checked:active + label:before,
input[type="checkbox"]:checked + label:focus:before, input[type="radio"]:checked + label:focus:before,
input[type="checkbox"]:checked + label:active:before, input[type="radio"]:checked + label:active:before,
input[type="checkbox"]:checked:focus + label:after, input[type="radio"]:checked:focus + label:after,
input[type="checkbox"]:checked:active + label:after, input[type="radio"]:checked:active + label:after,
input[type="checkbox"]:checked + label:focus:after, input[type="radio"]:checked + label:focus:after,
input[type="checkbox"]:checked + label:active:after, input[type="radio"]:checked + label:active:after {}
/* invalid/required */
/* for now, only on mozilla */
input[type="checkbox"]:checked:-moz-ui-invalid + label:before, input[type="radio"]:checked:-moz-ui-invalid + label:before,
input[type="checkbox"]:checked:-moz-ui-invalid + label:after, input[type="radio"]:checked:-moz-ui-invalid + label:after { -webkit-box-shadow: 0 0 0 1px #c22b2b; box-shadow: 0 0 0 1px #c22b2b; }
/* error */
.\:error input[type="checkbox"]:checked + label:before, .\:error input[type="radio"]:checked + label:before,
.\:error input[type="checkbox"]:checked + label:after, .\:error input[type="radio"]:checked + label:after { -webkit-box-shadow: 0 0 0 1px #c22b2b; box-shadow: 0 0 0 1px #c22b2b; }

/* invalid/required */
/* error */
.\:error input[type="checkbox"].\:checked + label:before, .\:error input[type="radio"].\:checked + label:before,
.\:error input[type="checkbox"].\:checked + label:after, .\:error input[type="radio"].\:checked + label:after { border-color: #c22b2b; }



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

form { font-size: 16px; }

/** fieldset **/
.formfieldset {}
.formfieldset_title {}

/** row **/
.formrow { display: grid; margin: 15px 0; }
.formrow_inline { display: block; }
.formrow_inline input + label { padding: 0 10px; }

  .formrow + .formrow {}
  /* label */
  .formrow > label { display: inline-block; margin-bottom: 6px; }
  .formrow > input[type="text"] + label { margin: 0 0.5em; }
  /* help */
  .formhelp {}
  /* errors */
  .formerror { color: #c22b2b; margin-bottom: 2px; }

/** submit **/
.formrow_submit { margin: 15px 0 0; }
  button[type="submit"] { width: 200px; height: 50px; border: 1px solid rgba(112, 112, 112, 1); color: rgba(112, 112, 112, 1); background-color: white; font-size: 16px; font-weight: bold; }
  button[type="submit"]::before { content: none; }
  button[type="submit"]:hover { color: #FFFFFF; background-color: rgba(112, 112, 112, 1); }
/** helper **/
/*.fit { width: 350px; }*/
.smallfit { width: 200px; }