/*
form
*/

fieldset {
    position: relative;
    display: block;
    border: none;
    padding: 10px 0px;
 }
 
 label {
    position: relative;
    display: block;
    font-style: normal;
    color: var(--text-color);

   font-weight: 300;
   font-size: 14px;
   line-height: 100%;
 }
 
 input,
 select,
 textarea {
   position: relative;
   display: table;
   opacity: 0.9;
   box-sizing: border-box;
   border-radius: 10px;
   font-size: 15px;
   line-height: 18px;
   padding: 10px;;
   background-color: transparent!important;
   width: 100%;
   color:var(--form-text-color);
   box-shadow: var(--form-box-shadow);
   border:var(--form-border);
   
 }

 select {
   -webkit-appearance:none;
 }

 .form-repeat-input {
    margin-top: 10px;
 }

 select > option {
    font-size: inherit;
 }
 
 .lightbox button,
 .button,
 button,
 a.button {
   position: relative;
   display: table;
   border-radius: 50px;
   padding: 10px 30px;
   font-style: normal;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
   text-align: center;
   color: var(--button-text-color);
   background-image: var(--button-bg);
   transition:5s;
   -o-transition:.5s;
   -ms-transition:.5s;
   -moz-transition:.5s;
   -webkit-transition:.5s;

   /*
   safari
   */
   display: inline-block;
 }

 .lightbox button > span,
 .button > span,
 button > span,
 a.button  > span {
   font-size: inherit;
   color: inherit;
   font-family: inherit;
 }

 .lightbox button {
    display: inline-block;
 }

 button:hover,
 a.button:hover {
   color: var(--button-text-color-hover);
   background: var(--button-bg-hover);
 }
 
 .not-unique > * ,
 .mark-input > * {
   background-image: var(--error-bg);
   color:var(--error-text-color);
 }
 
 button.monocrome,
 a.button.monocrome  {
    background: var(--button-monocrome-bg);
 }
 
 button.monocrome:hover,
 a.button.monocrome:hover  {
    color: var(--button-monocrome-bg);
    background: transparent;
 }
 
 button.onbox,
 a.button.onbox  {
   color: var(--button-onbox-text-color);
   background-image: var(--button-onbox-bg);
   border: solid 1px transparent;
 }
 
 button.onbox:hover,
 a.button.onbox:hover  {
   color: var(--button-onbox-text-color-hover);
   background-image: var(--button-onbox-bg-hover);
    border: solid 1px var(--button-onbox-text-color-hover);
 }
 
 button.onbox-line,
 a.button.onbox-line  {
    background: transparent;
    color:#ffffff;
    border: solid 1px #22DB7F;
 }
 
 button.onbox-line:hover,
 a.button.onbox-line:hover  {
    background: #22DB7F;
    color:#6C6C78!important;
    border: solid 1px transparent;
    /*border: 1px solid #6C6C78;*/
 }
 
 button.text,
 a.button.text {
    position: relative;
    border: none;
    padding: 10px 20px;
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
    color: #51515A;
    background: none;
 }
 
 button.text:hover,
 a.button.text:hover {
    color: #016BB8;
    background: none;
 }

 a.small-text {
    position: relative;
    border: none;
    padding: 5px 0px;
    font-style: normal;
    font-size: 10px;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
    color: #51515A;
    background: none;
    font-weight: bold;
 }

 a.small-text:hover {
    color: #016BB8;
    background: none;
 }
 
 .button-container {
   position: relative;
   display: table;
   /*width: 100%;*/
   padding: 10px 0px;
   /*border-spacing: 10px;*/
 }
 
 .button-container > a.button,
 .button-container > button {
    display: table-cell;
    vertical-align: middle;
 }

 button.help,
 .button.help {
   background: #22DB7F;
    color:#6C6C78!important;
   background-image: url(../../../../files/img/frontend/chat.svg);
   padding-left: 40px;
   background-repeat: no-repeat;
   background-position: left 10px center;
 }

 .lightbox button.small,
 .button.small,
 button.small,
 a.button.small {
    font-size: 12px;
    padding: 4px 10px;
 }

 /*
 form icons
 */

 .password {
    background-image: url(../../../../files/img/frontend/lock.svg);
    padding-left: 40px;
    background-repeat: no-repeat;
    background-position: left 10px center;
 }

 .search {
   background-image: url(../../../../files/img/frontend/search.svg);
   padding-left: 40px;
   background-repeat: no-repeat;
   background-position: left 10px center;
}

.search.big {
   background-image: url(../../../../files/img/frontend/search.svg);
   padding-right: 40px;
   padding-left: 10px;
   background-repeat: no-repeat;
   background-position: right 10px center;
   border:solid 2px var(--highlight-color);
   box-shadow: none;
   font-size: 16px;
}

 /*
 radio check
 */

 .form input[type="radio"] + label > span, 
 .form input[type="checkbox"] + label > span {
   background: var(--checkbox-bg);
   border: none;
   width: 22px;
   height: 22px;
}

.form input[type="radio"]:checked + label > span:after, 
.form input[type="checkbox"]:checked + label > span:after {
   background: var(--checkbox-bg);
   color:var(--text-color);
   border: none;
   background-color: transparent;
   border: none;
   font-size: 10px;
   text-align: center;
   top: 0px;
   left: 0px;
}

div.textareas {
   position: relative;
   display: block;
   padding: 20px 0px;
}

.line-form textarea,
.line-form select,
.line-form input,
div.textareas > textarea {
   position: relative;
   display: block;
   width: 100%;
   background-color: transparent;
   color: var(--text-color);
   font-size: 16px;
   border: solid 1px var(--highlight-b-color);
   padding: 10px;
   border-radius: 10px;
   min-height: 200px;
}

.line-form select {
   min-height: auto;
}

.not-unique > *:not(.form-ballon-container):not(.field-error-over), 
.mark-input > *:not(.form-ballon-container):not(.field-error-over) {
   background-image: none!important;
   background-color: transparent!important;
   color: var(--error-text-color)!important;
   border: solid 2px var(--error-color)!important;
}

/*
form-search
*/

.form-search {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   text-align: right;
}

.form-search > label {
   padding: 10px;
   text-transform: uppercase;
   font-size: 12px;
   font-weight: bold;
}

.form-search > fieldset {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   padding: 10px;
}
 
/*
theme
*/

.form.theme > label {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   color: var(--text-color);
   font-size: 12px;
   padding: 0px 10px;
   text-transform: none!important;
}

.form.theme input[type=checkbox] {
	width: 25px;
}

.form.theme input[type="checkbox"] + label {
	font-size: 14px;
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.93;
	color: var(--selector-color);
}

.form.theme input[type="checkbox"] + label span {
    width:18px;
    height:18px;
    margin:-1px 12px 0 0;
	border:solid 2px var(--selector-color);
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.form.theme input[type="checkbox"]:checked + label span:after {
	top: -2px;
	left: -2px;
	width: 22px;
	height: 22px;
	background-color:var(--selector-color)!important;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	content:'';
	color: #ffffff;
	font-size: 20px;
	line-height: 22px;
	font-weight: bold;
}

.form.theme input[type="checkbox"] + label.slider span {
    width:50px;
    height:33px;
	height:28px;
    margin:-1px 4px 0 0;
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	border-radius:40px;
	background-color: #ffffff;
   background-color: #cdcccd;
   background-color: transparent;
   background: transparent;
   border: solid 1px #000000;
}

.form.theme input[type="checkbox"]:checked + label.slider span {
   border: solid 1px #8DA6BB;
   background: transparent;
}

.form.theme input[type="checkbox"] + label.slider div {
	width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
	font-size: 13px;
}

.form.theme input[type="checkbox"] + label.slider span:after {
	top: 4px;
	left:4px;
	width:20px;
	height:20px;
	-moz-border-radius:27px;
	-webkit-border-radius:27px;
	border-radius:27px;
	background-color: #000000;
  	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.41);
}

.form.theme input[type="checkbox"]:checked + label.slider span:after {
	left:24px;
	width:20px;
   height:20px;
   top: 4px;
	-moz-border-radius:27px;
	-webkit-border-radius:27px;
	border-radius:27px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	/*background-color: #8DA6BB!important;*/
  	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.41);
}

/*
form balloons alert
*/

.form-ballon-container {
	position:relative!important;
	display:block!important;
	width: 100%;
	opacity: 1;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
   transition:.5s;
   background:none!important;
   color:var(--text-color)!important;
}

.form-ballon-container.active {
	opacity:1;
}

.form-after {
	/*position:absolute;*/
	position:relative;
	display: inline-table;
	width:0px;
	height:0px;
	overflow:visible;
	vertical-align:top;
}

.form-balloon {
	position:relative;
	display:block;
	color:#ffffff;
	font-size:11px;
	padding:8px;
	cursor:pointer;
	z-index: 2;
}

.mark-unload .form-balloon-bottom  {
	background-color: var(--unload-color);
}

.mark-input .form-balloon-bottom  {
	background-color:var(--error-color);
}

.form-balloon:before {
	position: relative;
	display: inline-block;
	vertical-align: middle;
   font-size: 26px;
   color:inherit;
	content:'';
	font-family: "Material Icons";
	padding-right: 5px;
}

/*
.form-balloon:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 242, 0, 0);
	border-top-color: #e2e2e2;
	border-width: 10px;
	margin-left: -10px;
	left:20px;
}
*/

.form-balloon-bottom {
   background:none!important;
   color:var(--text-color)!important;
	/*position:absolute;
	width:100%;
	height:100%;
	bottom:100%;
	left:0px;
	display:table;
	bottom: initial;
	*/
	/*top: 20px;*/
}

.form-balloon-bottom * {
   color:var(--text-color)!important;
}

.foot.button.help {
   padding: 8px 8px 8px 40px !important;
}


.evaluation-test div.checkboxes {
   padding: 30px 0px;
   width: auto;
   display: table;
   
}

.evaluation-test div.checkboxes > label {
   position: relative;
   display: table;
   font-size: 20px;
   padding: 5px 0px;
}

.evaluation-test div.checkboxes > label > span {
   margin-right: 10px;
   background: none;
   border: solid 1px var(--light-bg-color);
}

.evaluation-test div.checkboxes input:checked + label > span,
.evaluation-test div.checkboxes input:checked + label > span:after {
   background-color: var(--highlight-b-color) !important;
   background: none;
   border: solid 1px var(--highlight-b-color) !important;
}