/*--------------------
        Form
---------------------*/

.ui.form {
  position: relative;
  width: 330px;
}

/* Form Controls */
.ui.form .field {
  clear: both;
  margin: 0px 0px 15px;
}

/*-------------------------------
   Simple Form (No Placeholders)
--------------------------------*/

.ui.form.simple textarea,
.ui.form.simple input[type="text"] {
  color: #444444;
}

/*--------------------
      Fluid Form
---------------------*/

.ui.form.fluid {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}


/*--------------------
      Form Labels
---------------------*/

.ui.form .field > label {
  margin: 0px 0px 3px;
  display: block;

  color: #555555;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
}
.ui.form .field > label.inline {
  display: inline-block;
  margin: 0px 5px 0px 0px;
}
.ui.form .field > label.inline:first-child {
  margin: 0px 0px 0px 5px;
}

.ui.form .field > label.selector {
  display: inline;
}

/*--------------------
      Form Inputs
---------------------*/

.ui.form textarea,
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.textarea,
.ui.input {
  width: 100%;
  height: 32px;
  padding: 7px 10px;

  font-size: 14px;

  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  -webkit-transition: background-color 0.3s ease-out;
  -moz-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  -ms-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;

  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.ui.form select {
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}

.ui.form textarea {
  height: 100px;
  resize: vertical;
}


/*  Input State */
.ui.form textarea,
.ui.form input[type="text"] {
  color: #DADADA;
}
.ui.form input:focus,
.ui.form textarea:focus {
  color: #222222;
  background-color: #FFFFFF;
  border-color: #BBBBBB;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.08) inset;
}
.ui.form textarea.filled,
.ui.form input.filled {
  color: #444444;
}

.ui.form textarea,
.ui.form input[type="checkbox"] {
  vertical-align: top;
}


/*--------------------
    Special Types
---------------------*/

.ui.form input.attached {
  width: auto;
}

.ui.form .date.field > label {
  position: relative;
}
.ui.form .date.field > label:after {
  position: absolute;
  top: 22px;
  right: 10px;

  font-family: 'Icons';
  content: '📅'; /* '\1f4c5' */
  font-size: 20px;
  font-weight: normal;
  color: #CCCCCC;
}

.ui.large.form .date.field > label:after {
  top: 29px;
  font-size: 24px;
}

/*--------------------
    Higher Contrast
---------------------*/

.ui.form.contrast label {
  color: #FFFFFF;
}
.ui.form .field.error textarea,
.ui.form .field.error input[type="text"] {
  background-color: #FFAAAA;
  border-color: #FF3333;
  color: #AA5555;
}
.ui.form.contrast .field.error label {
  color: #FF3333;
}
.ui.form.contrast .notices,
.ui.form.contrast .errors {
  border-color: #FF3333;
  background-image: -webkit-linear-gradient(top , #F36666 0px, #E14242 100%);
  background-image: -moz-linear-gradient(top , #F36666 0px, #E14242 100%);
  background-image: -o-linear-gradient(top , #F36666 0px, #E14242 100%);
  background-image: -ms-linear-gradient(top , #F36666 0px, #E14242 100%);
  background-image: linear-gradient(top , #F36666 0px, #E14242 100%);

  color: #FFFFFF;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
}

/*--------------------
    Field Groups
---------------------*/

/* Split fields */
.ui.form .fields {
  clear: both;
  overflow: hidden;
}
.ui.form .fields .field {
  clear: none;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ui.form .fields .field:first-child {
  border-left: none;
  box-shadow: none;
}

/* Other Combinations */
.ui.form .fields .field,
.ui.form .two.fields .field {
  width: 50%;
  padding-left: 1%;
  padding-right: 1%;
}

.ui.form .three.fields .field {
  width: 33.333%;
  padding-left: 1%;
  padding-right: 1%;
}
.ui.form .four.fields .field {
  width: 25%;
  padding-left: 1%;
  padding-right: 1%;
}
.ui.form .five.fields .field {
  width: 20%;
  padding-left: 1%;
  padding-right: 1%;
}

/* override sides, ie8 no last-child */
.ui.form .fields .field:first-child {
  padding-left: 0%;
}
.ui.form .fields .field:last-child {
  padding-right: 0%;
}


/*--------------------
    Inline Fields
---------------------*/

.ui.form .inline.field > :first-child {
  margin-right: 5px;
}
.ui.form .inline.field label,
.ui.form .inline.field input,
.ui.form .inline.field select {
  display: inline-block;
}


/*--------------------
    Success Messages
---------------------*/

.ui.form .notices {
  color: #67a210;

  background-color: #ebf8d8;
}

/*--------------------
     Error State
---------------------*/

/* Form has an error */
.ui.form.error .errors {
  display: block;
}

/* Form field has an error */
.ui.form .field.error label {
  color: #AC3A3A;
}
.ui.form .field.error textarea,
.ui.form .field.error input[type="text"],
.ui.form .field.error input[type="password"] {
  background-color: #FFEFEF;
  border-color: #FF9999;
  color: #F0BBBB;
}
.ui.form .field.error textarea,
.ui.form .field.error input[type="password"],
.ui.form .field.error textarea.filled,
.ui.form .field.error input.filled {
  color: #AC3A3A;
}
.ui.form .field.error textarea:focus,
.ui.form .field.error input:focus {
  border-color: #E68585;
  color: #AC3A3A;
}

/*--------------------
     Loading State
---------------------*/

.ui.form.loading .loading,
.ui.form.loading i.throbber {
  display: block;
}


/*--------------------
        Resizes
---------------------*/

.ui.large.form {
  width: 440px;
}
.ui.large.fluid.form {
  width: 100%;
}

.ui.large.form .field {
  margin-bottom: 20px;
}

.ui.large.form .divider {
  margin: 30px 0px;
}

.ui.large.form .field > label {
  margin-bottom: 7px;
  font-size: 14px;
}
.ui.large.form .field input[type="text"] {
  height: 38px;
  padding: 10px 12px;
  
  font-size: 14px;
}
.ui.large.form .field textarea {
  height: 140px;
  padding: 10px 12px;
  font-size: 14px;
}


/*--------------------
    Error Messages
---------------------*/

.ui.form .notices,
.ui.form .errors {
  margin: 25px 0px 10px;

  background-color: #F8EBEB;
  background-image: -webkit-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
  background-image: -moz-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
  background-image: -o-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
  background-image: -ms-linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);
  background-image: linear-gradient(top , #F8EBEB 0px, #F1D7D7 100%);

  color: #AD0000;
  border: 1px solid #B06C6C;

  padding: 7px 12px;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.ui.form .errors i:before {
  opacity: 0.8;
  margin: 0px;
  font-family: 'Icons';
  content: '\2757';
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  line-height: 1;
  margin-right: 0.3em;
  vertical-align: middle;
}
.ui.form .errors i,
.ui.form .errors .error {
  display: inline-block;
  vertical-align: middle;
}

.ui.form .errors h3 {
  font-size: 18px;
  font-weight: bold;
}
.ui.form .errors .error {
  display: block;
  margin-left: 15px;
  line-height: 1.55;
}
.ui.form .errors .error.list {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 5px 0px;
  padding: 5px 0px 0px 15px;

  -webkit-box-shadow: 0px -1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px -1px rgba(0, 0, 0, 0.05);
  box-shadow: 0px -1px rgba(0, 0, 0, 0.05);
}
.ui.form .errors .error.list li {
  list-style-type: disc;
}