@charset "UTF-8";

/* FORMULIER
**********************************************/

form
{
  font-size  : 10px;

  width      : 100%;
  box-sizing : border-box !important;

  padding    : 0;
}

form *
{
  font-family : inherit;
  font-size   : inherit;
  box-sizing  : border-box !important;
  text-align  : left;
  outline     : none;
}

form p
{
  font-size   : 1.5em;
  font-weight : bold;
  text-align  : left;

  margin      : 1em 0.2em;
}

form ul,
form li
{
  position   : relative;
  list-style : none !important;
  padding    : 0;
  margin     : 1em 0 0.5em;
}

form li
{
  margin : 0;
}

form li:after,
form li:before
{
  content : unset !important;
}

/* FORM SUCCES
/*************************************************/

form .succes
{
  border-top    : 1px solid hsla(0, 0%, 0%, 0.2);
  border-bottom : 1px solid hsla(0, 0%, 0%, 0.2);
}

form .succes p
{
  margin : 0.5em 0;
}

form .succes h2
{
  margin : 0.25em 0;
  color  : hsl(30, 100%, 50%);
}

/* LABEL, INPUT, SELECT, TEXTAREA
**********************************************/

form a,
form label
{
  font-size      : 1.2em;
  color          : currentColor;

  display        : inline-block;
  margin         : 0 0.2em;

  height         : 1.8em;
  line-height    : 1.8;
  vertical-align : middle;
}

form label[data-error]:before
{
  content  : attr(data-error);
  color    : #8B0000;
  position : absolute;
  right    : 2em;
}

form [type=radio] label[data-error]:before
{
  top   : -0.5em;
  right : 0.2em;
}

form .remove
{
  font-size      : 1.6em;
  color          : rgba(0, 0, 0, 0.3);

  margin         : 0;

  line-height    : 1.6em;
  vertical-align : middle;

  position       : absolute;
  right          : 1em;
  bottom         : 0.25em;

  display        : inline-block;
  cursor         : pointer;

  z-index        : 3;
}

form .remove:hover
{
  color : hsl(174, 63%, 40%);
}

form input
{
  padding : 0 0.3em;
}

form input,
form select,
form textarea
{
  color            : currentColor;
  font-size        : 1.3em;
  font-family      : inherit;
  width            : 100%;
  height           : 2em;

  margin           : 0 0 0.2em;

  border           : none;
  border-bottom    : 1px solid hsl(0, 0%, 80%);
  border-radius    : 0;

  background-color : transparent;
  box-shadow       : 0 1px 0 hsl(0, 0%, 98%);

  z-index          : 2;
}

form input.error,
form select.error,
form textarea.error
{
  color            : hsl(0, 0%, 100%);
  background-color : hsl(0, 30%, 50%);
}

form select
{
  cursor  : pointer;
  padding : 0 0.2em;
}

form option
{
  font-size : 1em;
}

form textarea
{
  overflow-y : hidden;
  padding    : 0.5em 0.5em 0;
  min-height : 5em;
}

form input[readonly],
form input[type=datum],
form textarea[readonly]
{
  color         : currentColor;
  border-bottom : 0.1em dotted currentColor;
  opacity       : 0.75;
}

/* INPUT[TYPE=SUBMIT]
**********************************************/

form input[type=submit]
{
  color         : rgba(255, 255, 255, 0.9);
  padding       : 0 2em;

  cursor        : pointer;

  height        : 3em;
  display       : inline-block;
  border-radius : 0.2em;
  border-width  : 0;

  box-shadow    : none;
  background    : linear-gradient(
    180deg,
    hsl(222, 11%, 43%) 5%,
    hsl(222, 11%, 23%)
  );
}

/* INPUT[TYPE=RADIO], INPUT[TYPE=CHECKBOX]
**********************************************/

form ul.radio,
form ul.checkbox
{
  display       : inline-block;
  margin-top    : 1em;
  margin-bottom : 0.5em;
}

form ul.checkbox
{
  width : 100%;
}

form ul.radio li
{
  margin-bottom : 1em;
  display       : inline-block;
}

form input[type=radio] + label + label
{
  white-space : nowrap;
  z-index     : 2;
}

form input[type=checkbox] + label + label
{
  display : inline;
  z-index : 2;
}

form input[type=radio] + label
{
  margin : 0 0.5em 0 1em;
}

form input[type=checkbox] + label
{
  margin : 0 0.5em 0 0;
}

form input[type=radio],
form input[type=checkbox]
{
  width    : auto;
  position : absolute;
  opacity  : 0;
  z-index  : 1;
}

form input[type=radio] + label,
form input[type=checkbox] + label
{
  font-size           : 1em;
  width               : 1.8em;
  height              : 1.8em;

  position            : relative;
  display             : inline-block;

  padding             : 0;

  cursor              : pointer;

  border              : 0.2em solid currentColor;

  z-index             : 2;

  -webkit-user-select : none;
  -moz-user-select    : none;
  -ms-user-select     : none;
}

form input[type=radio] + label
{
  border-radius : 50%;
}

form input[type=radio] + label:before,
form input[type=checkbox] + label:before
{
  content       : '';
  position      : absolute;
  left          : 0;
  top           : 0;
  bottom        : 0;
  right         : 0;
  margin        : auto;

  width         : 0.8em;
  height        : 0.8em;

  border-radius : inherit;
}

/* Checked styles */
form input[type=radio]:checked + label:before,
form input[type=checkbox]:checked + label:before
{
  background-color : currentColor;
}

/* Chrome fix */
input[type=checkbox]:checked
{
  -webkit-filter : grayscale(100%) invert(100%) brightness(1.5);
}

/* INPUT[TYPE=COLOR]
**********************************************/

form .color li
{
  width : 100%;
}

form .input-group-addon
{
  font-size      : 1em;

  width          : 2em;
  height         : 2em;
  margin         : 0;
  padding        : 0;

  position       : absolute;
  bottom         : 0.5em;
  right          : 1.5%;

  line-height    : 1;
  vertical-align : middle;
  text-align     : center;

  z-index        : 2;
}

form .input-group-addon i
{
  position      : relative;
  border-radius : 50%;
  width         : inherit;
  height        : inherit;
  display       : inline-block;
  cursor        : pointer;
}

form .input-group-addon i:after
{
  content       : "";
  display       : block;
  position      : absolute;
  top           : 0;
  left          : 0;
  width         : 100%;
  height        : 100%;

  border-radius : inherit;
  background    : linear-gradient(
    135deg,
    red,
    orange,
    yellow,
    green,
    violet
  );

  z-index       : -1;
}

/* INPUT.DEVIATION
**********************************************/

form ul.deviation i
{
  font-size      : 1.6em;
  color          : rgba(0, 0, 0, 0.3);

  margin         : 0;

  line-height    : 1.6em;
  vertical-align : middle;

  position       : absolute;
  right          : 1em;
  bottom         : 0.25em;

  display        : inline-block;
  cursor         : pointer;

  z-index        : 3;
}

form ul.deviation i:hover
{
  color : hsl(174, 63%, 40%);
}

/* INPUT[TYPE=DATE]
**********************************************/

form input[type=date],
form input[type=datum]
{
  cursor : pointer;
}

/* INPUT[TYPE=FILE]
**********************************************/

form .file
{
  position : relative;
  display  : inline-block;
  width    : 100%;
}

form .file:after,
form .file:before
{
  font           : normal normal normal 1.25em/1 FontAwesome;
  cursor         : pointer;
  pointer-events : none;
  position       : absolute;
  bottom         : 0.75em;
  z-index        : 3;
}

form .file:before
{
  right : 3em;
}

form .file:before
{
  content : "\f0f6";
}

form .file.multiple:before
{
  content : "\f0c5";
}

form input[type=file]
{
  position   : relative;
  text-align : right;
  opacity    : 0;
  cursor     : pointer;

  z-index    : 1;
}

form input[type=file] + input
{
  position            : absolute;
  bottom              : 0;
  left                : 0;

  padding             : 0.3em 4em 0.3em 0.5em;

  cursor              : pointer;
  background-size     : 1.4em;
  background-repeat   : no-repeat;
  background-position : 99% 0.2em;

  pointer-events      : none;
  text-overflow       : ellipsis;
  overflow            : hidden;
  white-space         : nowrap;

  z-index             : 2;
}

/* PLACEHOLDER
**********************************************/

::placeholder
{
  color     : hsl(0, 0%, 80%);
  font-size : 0.8em;
}

/* REQUIRED
**********************************************/

.asterix
{
  font-size   : 1.2em;
  margin-left : 0.2em;
}

[required] > label:after,
[required] > .file label:after,
[required] > .datum label:after,
[required] > .checkbox label[for] + label:after
{
  content : " \2731";
  color   : inherit;
}