/*
 *  Document   : formlayout.css
 *  Author     : RedStar Theme
 *  Description: form control related stylesheet	
 */

.form-control {
  border-radius: 0;
  box-shadow: none;
  border-color: #d2d6de;
}

.form-control:focus {
  border-color: #3c8dbc;
  box-shadow: none;
}

.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-webkit-input-placeholder {
  color: #bbb;
  opacity: 1;
}

.form-control:not(select) {
  -webkit-appearance: none;
  -moz-appearance: none;
}

/***************** form group **************/
.form-group.has-success label {
  color: #00a65a;
}

.form-group.has-success .form-control,
.form-group.has-success .input-group-addon {
  border-color: #00a65a;
  box-shadow: none;
}

.form-group.has-success .help-block {
  color: #00a65a;
}

.form-group.has-warning label {
  color: #f39c12;
}

.form-group.has-warning .form-control,
.form-group.has-warning .input-group-addon {
  border-color: #f39c12;
  box-shadow: none;
}

.form-group.has-warning .help-block {
  color: #f39c12;
}

.form-group.has-error label {
  color: #dd4b39;
}

.form-group.has-error .form-control,
.form-group.has-error .input-group-addon {
  border-color: #dd4b39;
  box-shadow: none;
}

.form-group.has-error .help-block {
  color: #dd4b39;
}
.formDatePicker {
  height: 45px !important;
  margin-left: 15px;
  border: 1px solid #d2d6de;
}
/***************** icons **************/
.input-icon > i {
  color: #ccc;
  display: block;
  position: absolute;
  margin: 11px 16px 4px 10px;
  z-index: 3;
  width: 16px;
  font-size: 16px;
  text-align: center;
  left: 0;
}
.input-icon.right > i {
  left: auto;
  right: 8px;
  float: right;
}
.has-success .input-icon > i {
  color: #36c6d3;
}
.has-warning .input-icon > i {
  color: #f1c40f;
}
.has-info .input-icon > i {
  color: #659be0;
}
.has-error .input-icon > i {
  color: #ed6b75;
}

.input-group .input-group-addon {
  border-radius: 0;
  border-color: #d2d6de;
  background-color: #fff;
  border: 1px solid #d2d6de;
}
.input-group-addon {
  padding: 6px 12px;
}

.btn-group-vertical .btn.btn-flat:first-of-type,
.btn-group-vertical .btn.btn-flat:last-of-type {
  border-radius: 0;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.icheck > label {
  padding-left: 0;
}

.form-control-feedback.fa {
  line-height: 34px;
}

.input-lg + .form-control-feedback.fa,
.input-group-lg + .form-control-feedback.fa,
.form-group-lg .form-control + .form-control-feedback.fa {
  line-height: 46px;
}

.input-sm + .form-control-feedback.fa,
.input-group-sm + .form-control-feedback.fa,
.form-group-sm .form-control + .form-control-feedback.fa {
  line-height: 30px;
}

/************************************************* 

					advance form 
			
****************************************************/

/*************** Toggle Button ***************/

.switchToggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switchToggle input {
  display: none;
}

.switchToggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.switchToggle .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.switchToggle input:checked + .red {
  background-color: #dc5754;
}

.switchToggle input:focus + .red {
  box-shadow: 0 0 1px #dc5754;
}

.switchToggle input:checked + .green {
  background-color: #64bd63;
}

.switchToggle input:focus + .green {
  box-shadow: 0 0 1px #64bd63;
}

.switchToggle input:checked + .aqua {
  background-color: #00c0ef;
}

.switchToggle input:focus + .aqua {
  box-shadow: 0 0 1px #00c0ef;
}

.switchToggle input:checked + .yellow {
  background-color: #f39c12;
}

.switchToggle input:focus + .yellow {
  box-shadow: 0 0 1px #f39c12;
}

.switchToggle input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/***************  Rounded sliders ***************/
.switchToggle .slider.round {
  border-radius: 34px;
}

.switchToggle .slider.round:before {
  border-radius: 50%;
}

/***************  checkbox ***************/
.checkbox {
  padding-left: 20px;
}

.checkbox label {
  display: inline-block;
  position: relative;
  padding-left: 5px;
}

.checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  margin-top: 4px;
  border: 1px solid #cccccc;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.checkbox label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 3px;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 11px;
  color: #555555;
}

.checkbox input[type="checkbox"] {
  opacity: 0;
}

.checkbox input[type="checkbox"]:checked + label::after {
  font-family: "FontAwesome";
  content: "\f00c";
}

.checkbox input[type="checkbox"]:disabled + label {
  opacity: 0.65;
}

.checkbox input[type="checkbox"]:disabled + label::before {
  background-color: #eeeeee;
  color: #eeeeef;
  cursor: not-allowed;
}

.checkbox.checkbox-inline {
  margin-top: 0;
}

/********************** checkbox with backgound color ************************/
.checkbox-aqua input[type="checkbox"]:checked + label::before {
  background-color: #00c0ef;
  border-color: #00c0ee;
}

.checkbox-aqua input[type="checkbox"]:checked + label::after {
  color: #fff;
}

.checkbox-aqua input[type="checkbox"]:hover + label::before {
  border: 2px solid #00c0ef;
}

/* checkbox with icon color */
.checkbox-icon-aqua input[type="checkbox"]:checked + label::after {
  color: #00c0ef;
}

.checkbox-icon-aqua input[type="checkbox"]:hover + label::before {
  border: 1px solid #00c0ef;
}

/* checkbox with backgound color */
.checkbox-yellow input[type="checkbox"]:checked + label::before {
  background-color: #f39c12;
  border-color: #f39c11;
}

.checkbox-yellow input[type="checkbox"]:checked + label::after {
  color: #fff;
}

.checkbox-yellow input[type="checkbox"]:hover + label::before {
  border: 2px solid #f39c12;
}

/* checkbox with icon color */
.checkbox-icon-yellow input[type="checkbox"]:checked + label::after {
  color: #f39c12;
}

.checkbox-icon-yellow input[type="checkbox"]:hover + label::before {
  border: 1px solid #f39c12;
}

/******************** checkbox with backgound color ************************/
.checkbox-black input[type="checkbox"]:checked + label::before {
  background-color: #000000;
  border-color: #000009;
}

.checkbox-black input[type="checkbox"]:checked + label::after {
  color: #fff;
}

.checkbox-black input[type="checkbox"]:hover + label::before {
  border: 2px solid #000000;
}

/********************* checkbox with icon color ************************/
.checkbox-icon-black input[type="checkbox"]:checked + label::after {
  color: #000000;
}

.checkbox-icon-black input[type="checkbox"]:hover + label::before {
  border: 1px solid #000000;
}

/********************* checkbox with backgound color **********************/
.checkbox-red input[type="checkbox"]:checked + label::before {
  background-color: #dc5754;
  border-color: #dc5755;
}

.checkbox-red input[type="checkbox"]:checked + label::after {
  color: #fff;
}

.checkbox-red input[type="checkbox"]:hover + label::before {
  border: 2px solid #dc5754;
}

/****************** checkbox with icon color ***************************/
.checkbox-icon-red input[type="checkbox"]:checked + label::after {
  color: #dc5754;
}

.checkbox-icon-red input[type="checkbox"]:hover + label::before {
  border: 1px solid #dc5754;
}

/***************  Radio button ***************/

.radio {
  padding-left: 20px;
}

.radio label {
  display: inline-block;
  position: relative;
  padding-left: 5px;
}

.radio label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  margin-top: 4px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out;
  transition: border 0.15s ease-in-out;
}

.radio label::after {
  display: inline-block;
  position: absolute;
  content: " ";
  width: 11px;
  height: 11px;
  left: 3px;
  top: 7px;
  margin-left: -20px;
  border-radius: 50%;
  background-color: #555555;
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}

.radio input[type="radio"] {
  opacity: 0;
}

.radio input[type="radio"]:checked + label::after {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}

.radio input[type="radio"]:disabled + label {
  opacity: 0.65;
}

.radio input[type="radio"]:disabled + label::before {
  cursor: not-allowed;
}

.radio.radio-inline {
  margin-top: 0;
}

.radio-black input[type="radio"] + label::after {
  background-color: #000000;
}

.radio-black input[type="radio"]:checked + label::before {
  border-color: #000000;
}

.radio-black input[type="radio"]:checked + label::after {
  background-color: #000000;
}

.radio-yellow input[type="radio"] + label::after {
  background-color: #f39c12;
}

.radio-yellow input[type="radio"]:checked + label::before {
  border-color: #f39c12;
}

.radio-yellow input[type="radio"]:checked + label::after {
  background-color: #f39c12;
}

.radio-red input[type="radio"] + label::after {
  background-color: #dc5754;
}

.radio-red input[type="radio"]:checked + label::before {
  border-color: #dc5754;
}

.radio-red input[type="radio"]:checked + label::after {
  background-color: #dc5754;
}

.radio-aqua input[type="radio"] + label::after {
  background-color: #00c0ef;
}

.radio-aqua input[type="radio"]:checked + label::before {
  border-color: #00c0ef;
}

.radio-aqua input[type="radio"]:checked + label::after {
  background-color: #00c0ef;
}

.radioicon-group {
  margin-top: 10px;
}
.radioicon label {
  font-weight: normal;
  font-size: 14px;
  color: black;
  margin: 0px;
  height: 25px;
}

.radioicon span {
  font-size: 19px;
  height: 25px;
  width: 20px;
  padding-top: 5px;
}
/* Hidding the radiobuttons & checkboxes */
.radioicon input[type="radio"] {
  display: none;
}
/* Hidding the "check" status of inputs */
.radioicon input[type="radio"] + label .fa-circle {
  display: block;
  color: #cccccc;
}

/* Styling the "check" status */
.radioicon-aqua input[type="radio"]:checked + label .fa-circle {
  display: block;
  color: #00c0ef;
}

.radioicon-red input[type="radio"]:checked + label .fa-circle {
  display: block;
  color: #dc5754;
}

.radioicon-yellow input[type="radio"]:checked + label .fa-circle {
  display: block;
  color: #f39c12;
}

.radioicon-black input[type="radio"]:checked + label .fa-circle {
  display: block;
  color: #000000;
}

/* Spinner control */

.input-group-btn-vertical {
  position: relative;
  white-space: nowrap;
  width: 2%;
  vertical-align: middle;
  display: table-cell;
}

.input-group-btn-vertical > .btn {
  display: block;
  float: none;
  width: 30px;
  padding: 8px;
  margin-left: -1px;
  position: relative;
  border-radius: 0;
}

.input-group-btn-vertical > .btn:first-child {
  border-top-right-radius: 0px;
}

.input-group-btn-vertical > .btn:last-child {
  border-bottom-right-radius: 0px;
}

.input-group-btn-vertical i {
  position: absolute;
  top: 0;
  left: 10px;
}
#colorinput2 .input-group-addon {
  padding: 3px 10px !important;
}