/*
 * # Semantic Button - Flat
 * http://github.com/quirkyinc/semantic
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 * Released: April 22 2013
 */


/*******************************
           Standard
*******************************/

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

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

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

.ui.form .field {
  clear: both;
  margin: 0px 0px 15px;
}

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

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

  color: #555555;
  font-size: 0.875em;
  line-height: 1.2;
}

/*--------------------
    Standard 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;

  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);

  font-size: 14px;
  color: #555555;

  -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 textarea {
  height: 100px;
  resize: vertical;
}
.ui.form select {
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}
.ui.form textarea,
.ui.form input[type="checkbox"] {
  vertical-align: top;
}

/*--------------------
   Types of Messages
---------------------*/

.ui.form .info.block,
.ui.form .warning.block,
.ui.form .error.block {
  display: none;
}

/*******************************
            States
*******************************/


/*--------------------
        Focus
---------------------*/

.ui.form input:focus,
.ui.form textarea:focus {
  color: #222222;
  background-color: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15) inset;
}

/*--------------------
  Empty (Placeholder)
---------------------*/

.ui.form input[placeholder], 
.ui.form [placeholder], 
.ui.form *[placeholder] {
   color: #BBBBBB;
}
.ui.form input:focus[placeholder], 
.ui.form :focus[placeholder], 
.ui.form *[placeholder] {
   color: #555555;
}

.ui.form textarea.empty,
.ui.form input.empty {
  color: #CCCCCC;
}

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

/* On Form */
.ui.form.error .error.block {
  display: block;
}

/*--------------------
        Warning
---------------------*/

/* On Form */
.ui.form.warning .warning.block {
  display: block;
}

/* On Field */
.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
---------------------*/

/* On Form */
.ui.form.loading .loading,
.ui.form.loading i.throbber {
  display: block;
}


/*******************************
           Variations
*******************************/


/*--------------------
      Fluid Width
---------------------*/

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


/*--------------------------
  Input w/ attached Button
---------------------------*/

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

/*--------------------
      Date Input
---------------------*/

.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 .block:first-child {
  margin-top: 0px;
}

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

  background-color: #ebf8d8;
}



/*--------------------
        Sizes
---------------------*/

.ui.form {
  font-size: 16px;
}
.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 input[type="text"] {
  height: 38px;
  padding: 10px 12px;
  
  font-size: 14px;
}
.ui.large.form .field textarea {
  height: 140px;
  padding: 10px 12px;
}


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