/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/
//
// Form
// --------------------------------------------------
form {
	margin: 0;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
	color: @inputColor;
	.box-shadow(inset 0 2px 1px rgba(0,0,0,.075));
	font-size: @baseFontSize;
	.box-sizing(border-box);
	height: 28px;
	border: 1px solid @inputBorder;
	 &:focus {
		border-color: @inputFocusBorder;
		.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px @{inputFocusShadow}");
		color: @inputFocusColor;
  }
  +.actionIcon {
  	margin-left: 3px ~'; /** orientation=lt */ ';
  	margin-right: 3px ~'; /** orientation=rt */ ';
  }
}
.rest-input {
    .box-shadow(inset 0 2px 1px rgba(0,0,0,0))!important;
    padding: 0!important;

   border: none!important;
&:focus {
		border-color:transparent!important;
	}
}
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
	padding: 0 @gutterSizeBase;
}

.input-append .btn {
	background-color: @inputAppendBtnBackground;
}

select {
	padding: 0 0 0 @gutterSizeBase - 4px;
}

select option {
	padding: 6px @gutterSizeBase - 1px 4px;
	line-height: 20px;
	height: 20px;
}

select[multiple="true"] {
	padding-left: 0;
	padding-right: 0;
	option {
		padding-top: 7px;
		padding-bottom: 3px;
	}
}

.form-search input,.form-search textarea,
.form-inline textarea, .form-horizontal textarea,
.form-search select, .form-inline select, .form-horizontal select,
.form-search .help-inline, .form-inline .help-inline,
.form-horizontal .help-inline, .form-search .uneditable-input,
.form-inline .uneditable-input, .form-horizontal .uneditable-input,
.form-search .input-prepend, .form-inline .input-prepend, .form-horizontal .input-prepend,
.form-search .input-append, .form-inline .input-append, .form-horizontal .input-append {
	vertical-align: top;
}

.inputMini input[type="text"],.inputMini input[type="password"]      { width: 60px; }
.inputSmall input[type="text"],.inputSmall input[type="password"]    { width: 90px; }
.inputMedium input[type="text"],.inputMedium input[type="password"]     { width: 150px; }
.inputLarge input[type="text"],.inputLarge input[type="password"]      { width: 210px; }
.inputXlarge input[type="text"],.inputXlarge input[type="password"]     { width: 270px; }
.input-xxlarge ,.inputXxlarge input[type="text"],.inputXxlarge input[type="password"]    { width: 350px; }
.input-xxxlarge ,.inputXxxlarge input[type="text"],.inputXxxlarge input[type="password"]   { width: 530px; }

.form-horizontal .control-group {
	margin-bottom: 12px;
}

.form-horizontal {
	padding: 20px 0 5px;
	.form-horizontal {
		padding: 0;
	}
	.control-group{
		margin-bottom: 8px;
		.control-label {
			margin: 0;
		}
		.controls{
			line-height: 28px;
			.uiCheckbox{
			    margin: 5px 0 0;
			  }
			  .uiRadio{
		      margin: 3px 25px 0px 0;
		    }
		}
	}
}

input, select, .uneditable-input {
	width: 270px;
}

textarea {
  .size(80px, 270px);
	padding: 3px @gutterSizeBase;
}

.uiCheckbox {
	position: relative;
	display: inline-block;
	margin: 0 5px;
	line-height: 20px;
	min-width:13px;
}

.uiCheckbox input[type="checkbox"]:checked,
.uiCheckbox  input[type="checkbox"]:not(:checked) {
	margin: 4px 0 0; /* hack margin-top: 4px to fix problem on chrome in Mac only */
	opacity: 0;
	padding: 0;
	outline: 0 none;
	position: absolute;
	top: 0;
	left: 0 ~'; /** orientation=lt */ ';
	right: 0 ~'; /** orientation=rt */ ';
	z-index: 100;
}

.uiCheckbox > span {
	display: inline-block;
	text-indent: 18px;
}

.uiCheckbox input[type="checkbox"]:checked + span:after {
	border-bottom: 2px solid @uiCheckboxCheckedBorder;
	border-left: 2px solid @uiCheckboxCheckedBorder ~'; /** orientation=lt */ ';
	border-right: 2px solid @uiCheckboxCheckedBorder ~'; /** orientation=rt */ ';
	content: "";
	.size(3px,6px);
  -webkit-transform: skew(45deg, -49deg);
     -moz-transform: skew(45deg, -49deg);
      -ms-transform: skewX(30deg) skewY(-35deg); // See https://github.com/twitter/bootstrap/issues/4885
       -o-transform: skew(45deg, -49deg);
          transform: skew(45deg, -49deg) ~'; /** orientation=lt */ ';
          transform: rotateZ(45deg) ~'; /** orientation=rt */ ';
  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
	left: 4px ~'; /** orientation=lt */ ';
	right: 4px ~'; /** orientation=rt */ ';
	position: absolute;
	top: 4px;
}

.uiCheckbox input[type="checkbox"]:checked + span:before {
	background: @uiCheckboxCheckedBackground;
}

.uiCheckbox input[type="checkbox"] + span:before {
	background: @uiCheckboxBackground;
	.border-radius(@borderRadiusSmall);
	.box-shadow(inset 0 1px 2px rgba(0,0,0,.17));
	.square(12px);
	top: 4px;
	left: 0px ~'; /** orientation=lt */ ';
	right: 0px ~'; /** orientation=rt */ ';
	content: " ";
	position: absolute;
}

input[type="radio"] + span {
	cursor: pointer;
}

.uiCheckbox input[type="checkbox"]:disabled + span:after {
	border-bottom: 2px solid @uiCheckboxCheckedDisabledBorder;
	border-left: 2px solid @uiCheckboxCheckedDisabledBorder ~'; /** orientation=lt */ ';
	border-right: 2px solid @uiCheckboxCheckedDisabledBorder ~'; /** orientation=rt */ ';
}

input[readonly], select[readonly], textarea[readonly] {
	background: @formReadOnyBackground;
	.box-shadow(inset 0 0 0 rgba(0,0,0,0));
	color: @formReadOnyColor;
}

input[disabled], select[disabled], textarea[disabled] {
	background: @inputDisabledBackground;
	color: @inputDisableColor;
}

.uiCheckbox input,.uiRadio input {
	min-height: 10px;
	padding: 0;
}

.lt-ie9  .uiCheckbox input[type="checkbox"] + span:before {
	background: none;
	display: none;
}

.uiRadio {
	position: relative;
	display: inline-block;
	margin: 0 5px;
	line-height: 20px;
}

.uiRadio input[type="radio"]:checked,
.uiRadio input[type="radio"]:not(:checked) {
	margin: 0;
	opacity: 0;
	padding: 0;
	outline: 0 none;
	position: absolute;
	top: 0;
	z-index: 100;
}

.uiRadio > span {
	display: inline-block;
	text-indent: 18px;
}

.uiRadio input[type="radio"]:checked + span:after {
	#gradient > .vertical(rgba(0,0,0,0), @uiRadioCheckedAfterBackground);
	background-color: @uiRadioCheckedColor;
	content: "";
	.square(8px);
	.border-radius(50%);
	left: 2px ~'; /** orientation=lt */ ';
	right: 2px ~'; /** orientation=rt */ ';
	position: absolute;
	top: 6px;
}
.uiRadio input[type="radio"]:checked + span:before {
	background: @uiRadioCheckedBeforeBackground;
}

//hack ie9

.ie9 .uiRadio input[type="radio"]:checked + span:after {
	left: 2px ~'; /** orientation=lt */ ';
	right: 2px ~'; /** orientation=rt */ ';
}

.uiRadio input[type="radio"] + span:before {
	background: @uiRadioCheckedBackground;
	.border-radius(50%);
	.box-shadow(inset 0 1px 2px rgba(0,0,0,.17));
	.square(12px);
	top: 4px;
	left: 0px ~'; /** orientation=lt */ ';
	right: 0px ~'; /** orientation=rt */ ';
	content: " ";
	position: absolute;
}

//hack ie8 and ie7
.lt-ie9 {
  .uiRadio input[type="radio"] + span:before {
    background: none;
    display: none;
  }

  .uiRadio input[type="radio"]:checked + span:after {
    background: none;
    display: none;
  }
}


.uiRadio input[type="radio"] + span {
	cursor: pointer;
}

.uiRadio input[type="radio"]:disabled + span:after {
	background-color: @uiRadioCheckedDisabledBackground;
}

.selectboxMini  {
	.uiSelectbox {
		width: 84px;
		vertical-align: middle;
		.selectbox {
			width: 84px;
		}
	}
}

.selectboxSmall  {
	.uiSelectbox {
		width: 100px;
		vertical-align: middle;
		.selectbox {
			width: 100px;
			margin-bottom: 0;
		}
	}
}
.selectboxMedium  {
	.uiSelectbox {
		width: 178px;
		vertical-align: middle;
		.selectbox {
			width: 178px;
		}
	}
}

.vertical-align input[type="text"],
.vertical-align input[type="password"],
.vertical-align input[type="datetime"],
.vertical-align input[type="datetime-local"],
.vertical-align input[type="date"],
.vertical-align input[type="month"],
.vertical-align input[type="time"],
.vertical-align input[type="week"],
.vertical-align input[type="number"],
.vertical-align input[type="email"],
.vertical-align input[type="url"],
.vertical-align input[type="search"],
.vertical-align input[type="tel"],
.vertical-align input[type="color"],
.vertical-align .uneditable-input{
	margin-bottom: 0px;
}
.vertical-align input[type="text"] + input[type="text"],
.vertical-align input[type="password"] + input[type="password"] ,
.vertical-align input[type="datetime"] + input[type="datetime"] ,
.vertical-align input[type="datetime-local"]+ input[type="datetime-local"],
.vertical-align input[type="date"] + input[type="date"],
.vertical-align input[type="month"] + input[type="month"],
.vertical-align input[type="time"] + input[type="time"],
.vertical-align input[type="week"] + input[type="week"],
.vertical-align input[type="number"] + input[type="number"],
.vertical-align input[type="email"] + input[type="email"],
.vertical-align input[type="url"] + input[type="url"],
.vertical-align input[type="search"] + input[type="search"],
.vertical-align input[type="tel"] + input[type="tel"],
.vertical-align input[type="color"] + input[type="color"],
.vertical-align .uneditable-input + .uneditable-input {
	margin-top: 10px;
}

.controls   {
	.removeFile {
		float: none;
	}
	.selectFileFrame,.progressBarFrame,.progressBarFrame{
		margin: 0;
	}
	.selectFileFrame {
		line-height: 29px;
	}
}

// Warning
.control-group.warning {
  .formFieldState(@warningText, @warningBorder, @warningBorderFocus, @warningBorderShadow, @warningBackground);
}
// Error
.control-group.error {
  .formFieldState(@errorText, @errorBorder, @errorBorderFocus, @errorBorderShadow, @errorBackground);
}
// Success
.control-group.success {
  .formFieldState(@successText, @successBorder, @successBorderFocus, @successBorderShadow, @successBackground);
}
// Success
.control-group.info {
  .formFieldState(@infoText, @infoBorder, @infoBackground, @infoBorderShadow, @infoBackground);
}
.control-group.error > .control-label, .control-group.error .help-block, .control-group.error .help-inline {
  color: @textColor; 
}

input.input-default { color: @placeholderText;}


input,
textarea {
  .placeholder(@placeholderText);
}

/* switch radio*/
.uiSwitcher {
	position: relative;
	display: inline-block;
	width: 45px;
	height: 10px;
	margin-bottom: 0;
    input {
      display: none;
      &:focus + .switcher-slider {
        box-shadow: 0 0 1px #2196F3;
      }
      &:checked + .switcher-slider:before {
        transform: translateX(18px);
        background: @uiSwitcherOnBackground;
      }
    }
    .switcher-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: @uiSwitcherBackground;
      border-radius: 8px;
      &:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 5px ~'; /** orientation=lt */ ';
        right: 5px ~'; /** orientation=rt */ ';
        bottom: -4px;
        background: @uiSwitcherOffBackground;
        border-radius: 50%;
        transition: transform .4s;
      }
    }
}

/* switch button with label*/
.uiSwitchBtn {
   -webkit-transform: translate3d(0, 0, 0);
   position: relative;
   height: 21px;
   cursor: pointer;
   overflow: hidden;
   display: inline-block;
   vertical-align: middle;
   padding-top: 1px;
}

.uiSwitchBtn input {
   position: absolute;
   top: 5px;
   left: 30px ~'; /** orientation=lt */ ';
   right: 30px ~'; /** orientation=rt */ ';
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 0);
   opacity: 0;
}

.uiSwitchBtn label {
   white-space: nowrap;
   font-size: 11px;
   line-height: 16px;
   font-weight: bold;
   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
   cursor: pointer;
   display: block;
   height: 18px;
   position: absolute;
   width: auto;
   top: 1;
   overflow: hidden;
}

.uiSwitchBtn, .uiSwitchBtn label {
   user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
}

.switchBtnDisabled {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 50);
   opacity: 0.5;
}

label.switchBtnLabelOn {
   color: @baseBackground;
   text-shadow: none;
   left: 1px ~'; /** orientation=lt */ ';
   right: 1px ~'; /** orientation=rt */ ';
   min-width: 9px;
   top: 1px;
   #gradient > .vertical(@switchBtnLabelOnStartColor, @switchBtnLabelOnStartColor);
   .box-shadow(inset 0px 3px 5px @primaryDarkerColor);
   .border-top-left-radius (9px);
   .border-bottom-left-radius(9px);
}

label.switchBtnLabelOn span {
   line-height: 19px;
    padding: 0 8px 0 11px ~'; /** orientation=lt */ ';
    padding: 0 11px 0 8px ~'; /** orientation=rt */ ';
}

label.switchBtnLabelOff {
   color: @baseColorLight;
   background-color: @primaryBackgroundHover;
   #gradient > .vertical(@switchBtnLabelOffStartColor, @switchBtnLabelOffStartColor);
   .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.43));
   text-shadow: none;
   text-align: end;
   .border-top-right-radius (9px);
   .border-bottom-right-radius(9px);
   //height: 17px;
   top: 1px;
   right: 0 ~'; /** orientation=lt */ ';
   left: 0 ~'; /** orientation=rt */ ';
   margin-right: 1px ~'; /** orientation=lt */ ';
   margin-left: 1px ~'; /** orientation=rt */ ';
}

label.switchBtnLabelOff span {
   line-height: 19px;
    padding-right: 14px ~'; /** orientation=lt */ ';
    padding-left: 14px ~'; /** orientation=rt */ ';
}

.switchBtnHandle {
   display: block;
   cursor: pointer;
   position: absolute;
   top: 1px;
   left: 1px ~'; /** orientation=lt */ ';
   right: 1px ~'; /** orientation=rt */ ';
   .square (18px);
	#gradient > .vertical(@switchBtnHandleStartColor,@switchBtnHandleEndColor);
	.border-radius(50%); 
	.box-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
// remove clear button on IE
input::-ms-clear,input[type=password]::-ms-reveal{
  display: none;
}
.uiAvatarUploadContent .avatarInfo {
	.pull-left + .form-horizontal {
		max-width: 330px;
		.controls {
			.text-overflow() ;
			
		}
	}
}
