/** button style */
/* This css button was generated by css-button-generator.com */
.main-container .ui-button,
.main-container button {
  outline: 0;
  cursor: pointer;
  font-size: 14px;
  font-family: "Bitter", sans-serif;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  border: 0 solid #29a329;
  padding: 8px 28px;
  text-decoration: none;
  background-color: #33cc33;
  color: #000000;
  display: inline-block;
  text-shadow: 0px 0px 1px #29a329;
}
.main-container .ui-button:hover,
.main-container button:hover {
  background-color: #000000;
  color: #ffffff;
}
.main-container .ui-button:active,
.main-container button:active {
  position: relative;
  top: 1px;
  outline: 0;
}
/**
 * API Formular ProcessWire Basic Styles Example
 * -----------------------------------------------------------------------------
 */
.InputfieldContent,
.ui-widget-content {
  font-size: 14px;
}
.main-container form {
  margin-bottom: 1.618em;
}
form input[type=text],
form input[type=email],
form input[type=number],
form input[type=password],
form textarea {
  border-top: 1px solid #333333;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #333333;
  color: #333333;
  font-size: 14px;
  font-family: "Bitter", sans-serif;
  border-radius: 1px;
  width: 100%;
  padding: 6px 7px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  zoom: 1;
  background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #ffffff), color-stop(0.81, #ffffff));
  background-image: -o-linear-gradient(left bottom, #ffffff 0%, #ffffff 81%);
  background-image: -moz-linear-gradient(left bottom, #ffffff 0%, #ffffff 81%);
  background-image: -webkit-linear-gradient(left bottom, #ffffff 0%, #ffffff 100%);
  background-image: -ms-linear-gradient(left bottom, #ffffff 0%, #ffffff 81%);
  background-image: linear-gradient(to left bottom, #ffffff 0%, #ffffff 81%);
  background-color: #ffffff;
}
form input[type=text]:focus,
form input[type=email]:focus,
form input[type=number],
:focus form input[type=password]:focus,
form textarea:focus {
  border-top: 1px solid #333333;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #333333;
  color: #333333;
  background-image: none;
  background-color: #ffffff;
}
form select {
  font-size: 14px;
}
form button:disabled,
form input:disabled,
form textarea:disabled {
  opacity: 0.6;
}
form button:readonly,
form input:readonly,
form textarea:readonly {
  opacity: 0.6;
}
/**
 * Clearfixes
 * -----------------------------------------------------------------------------
 */
.main-container .Inputfields > .Inputfield > .InputfieldContent:before,
.main-container .Inputfields > .Inputfield > .InputfieldContent:after,
.main-container .InputfieldForm:after {
  /* @soma clearfix */

  content: " ";
  display: table;
}
.main-container .Inputfields > .Inputfield > .InputfieldContent:after,
.main-container .InputfieldForm:after {
  /* @soma clearfix  */

  clear: both;
}
.ui-helper-clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.ui-helper-clearfix {
  display: inline-block;
}
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix {
  height: 1%;
}
.ui-helper-clearfix {
  display: block;
}
/**
 * Inputfields
 * -----------------------------------------------------------------------------
 */
.main-container .Inputfields {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.main-container .Inputfields p {
  margin: 0 0 0.2em;
  padding: 0em;
}
.main-container .Inputfields .Inputfield:before {
  content: " ";
}
.main-container .Inputfields .Inputfield {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  zoom: 1;
  margin: 0em 0em 1.0714285714285714em 0em;
  clear: both;
}
.main-container .Inputfields .Inputfield .InputfieldHeader,
.main-container .Inputfields .Inputfield label {
  font-weight: normal;
}
.main-container .Inputfields .Inputfield label {
  cursor: pointer;
}
.main-container .Inputfields .Inputfield label.InputfieldHeader {
  margin: 0 0 0.3em 0;
  display: inline-block;
  color: #666666;
  font-size: 14px;
}
.main-container .Inputfields .Inputfield div div label {
  font-weight: normal;
}
.main-container .Inputfields .InputfieldHeaderHidden,
.main-container .Inputfields .InputfieldHidden {
  display: none!important;
}
.main-container .Inputfields .InputfieldColumnWidth {
  float: left;
  clear: none;
  margin-left: 1%;
}
.main-container .Inputfields .InputfieldColumnWidthFirst {
  clear: both;
  margin-left: 0;
}
.main-container .Inputfields hr {
  height: 1px;
  border: 0;
  border-bottom: 1px dashed #ccc;
}
.main-container .Inputfields .InputfieldFieldset {
  margin: 0 0 0.6em;
  padding: 1em;
  border: 1px solid #ddd;
}
.main-container .Inputfields .InputfieldFieldset > .InputfieldHeader {
  border-bottom: 1px solid #ddd;
  display: block!important;
  font-weight: bold;
  margin: 0 0 0.7em;
  padding: 0 0 0.7em;
  color: #666666;
}
.main-container .Inputfields .description {
  color: #777777;
  margin: 0.2em 0 0.7em 0;
  font-size: 13px;
  line-height: 1.3em;
}
.ui-state-error .InputfieldContent {
  position: relative;
  padding: 0 0 0.5em;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}
.ui-state-error .InputfieldContent p {
  margin: 0;
  position: relative;
  display: block;
}
.ui-state-error .InputfieldContent p span.ui-state-error {
  color: #ffffff;
  line-height: 1.4em;
  display: inline-block !important;
  background-color: #e00b00;
  padding: 0.5em 0.8em;
  border: 1px solid #ff0052;
  margin-top: 0.6em;
  -webkit-text-stroke: 0.4px;
}
.ui-state-error .InputfieldContent p span.ui-state-error:before {
  content: " ";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 9px 10px 9px;
  border-color: transparent transparent #e00b00 transparent;
  position: absolute;
  top: 0px;
  left: 5px;
}
.ui-state-error .InputfieldContent input[type=text],
.ui-state-error .InputfieldContent input[type=email],
.ui-state-error .InputfieldContent textarea {
  border: 1px solid #ff0052;
}
.main-container .ui-state-error-text {
  color: #ffffff;
}
.main-container .error-text {
  color: #e00b00;
}
.main-container .InputfieldCheckbox .InputfieldContent label {
  font-weight: normal;
}
.main-container .InputfieldRadios div,
.main-container .InputfieldCheckboxes div {
  /* we don't need checkboxes/radios to have bullets, etc. */

  list-style: none!important;
  /* no need for top/bottom margins in a group of checkboxes or radios */

  margin: 0;
  padding-left: 0!important;
}
.main-container .InputfieldRadiosColumns,
.main-container .InputfieldCheckboxesColumns,
.main-container .InputfieldRadiosFloated,
.main-container .InputfieldCheckboxesStacked {
  width: 100%;
  list-style-type: none;
  margin: 0.4em 0 0 0;
}
.main-container .InputfieldRadiosColumns div:before,
.main-container .InputfieldCheckboxesColumns div:before,
.main-container .InputfieldRadiosFloated div:before,
.main-container .InputfieldCheckboxesStacked div:before {
  content: " ";
}
.main-container .Inputfields .InputfieldCheckboxesColumns div,
.main-container .Inputfields .InputfieldRadiosColumns div,
.main-container .Inputfields .InputfieldRadiosFloated div {
  display: block;
  float: left;
}
.main-container .Inputfields .InputfieldCheckboxesFloated div,
.main-container .Inputfields .InputfieldRadiosFloated div {
  padding-right: 1em;
}
.main-container .Inputfields .InputfieldCheckboxesColumns div,
.main-container .Inputfields .InputfieldRadiosColumns div {
  padding-right: 1%;
  padding-bottom: 1%;
}
.main-container .InputfieldForm .Inputfields .InputfieldColumnWidthFirstTmp,
.main-container .InputfieldForm .Inputfields .InputfieldColumnWidthFirst.InputfieldStateHidden + .Inputfield {
  /* for support of inputfield dependencies */

  clear: both;
  margin-left: 0;
}
.main-container .InputfieldStateRequired > .InputfieldHeader:first-child:after {
  /* Add asterisk to indicate field is required */

  content: ' *';
  color: #000;
}
.ui-input {
  display: inline;
  vertical-align: middle;
  margin: 0.3em 0.5em;
  padding: 0.3em 0.5em;
}
/**
 * UI Sliders
 */
.ui-slider {
  position: relative;
  text-align: left;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: .7em;
  display: block;
  border: 0;
  background-position: 0 0;
}
/* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}
.ui-slider-horizontal {
  height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
  top: -0.25em;
  margin-left: -0.6em;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}
.ui-slider-vertical {
  width: .8em;
  height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}
.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}
.ui-slider.ui-slider-horizontal {
  background-color: #ddd;
  box-shadow: inset 0px 0px 5px #aaa;
}
.ui-slider-handle {
  width: 10px;
  height: 10px;
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 50%;
}
.ui-slider-handle.ui-state-hover {
  cursor: pointer;
  background-color: #bbb;
  border: 1px solid #666;
}
/** custom styles
------------------------------------------ */
.Inputfield_login #Inputfield_login {
  float: right;
}
/**
 * Make some responsive
 * -----------------------------------------------------------------------------
 */
@media only screen and (max-width: 479px) {
  .Inputfield {
    clear: both !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .content .InputfieldCheckboxesColumns li {
    width: 100%!important;
  }
  .content .InputfieldRadiosColumns li {
    width: 100%!important;
  }
}
