/* Form */
form, form * {box-sizing:border-box}

.Tx-Formhandler .form-message {margin:0 0 35px; padding-left:20px; border-left:4px solid #027ac1; color: #027ac1; font-weight:500;}


/* Fieldset */
fieldset, form .fieldset {border:none;padding:0;margin:1.5em 0}
legend {}

/* Field */
label {display:block}
form .field label {font-weight:bold;}
input {outline:none}

form .field {margin:1em 0;position:relative}
form div[class*='cols-'] > div.field {margin: 1em 0;}

form .field .note {
	font-size:16px;
	color:#888;
	line-height:1.4;
	font-weight:500;
}
form .field .validator.note {
	font-size:14px;
	line-height:1.25;
	font-weight:500;
}
form .field .note + .note {margin-top:10px;}

.field.no-label .field-label {display:none;}

/* Text Input, Textarea */
input[type=text], input[type=password], input[type=email], textarea {
	background: #F8F8F8;
	border: 1px solid rgba(0,0,0,.15);
	border-left-color: rgba(0,0,0,.3);
	border-top-color: rgba(0,0,0,.3);
	box-shadow: inset 1px 1px 5px rgba(0,0,0,.1);

	border-radius:1px;
	color: #555;

	padding: 0.3em 0.5em;
	width: 100%;
	min-width:350px;
	margin:0.5em 0;
	font-size:inherit;
	height:auto;
	
	border-radius:8px;
}

div[class*="bg"] input[type=text], 
div[class*="bg"] input[type=password], 
div[class*="bg"] input[type=email], 
div[class*="bg"] textarea {
	min-width:310px;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus {
  background: #FFF;
  border-top-color: #999;
  color: #111;
  outline:none
}

input[type=file] {
  margin:.5em 0;
  display:none;
}

/* Submit, Button */
input[type=submit],
.button
{
	display:inline-block;
    width: auto;
	height: auto;    
	cursor: pointer;    	

    margin:0.5em 0;
    line-height: 1.5em;
    padding: 0.3em 0.5em;

	font-size: inherit;
    font-weight: 500;
    
	background:#007dc6;
	border:solid 1px #007dc6;
	color:#fff;    

    border-radius: 8px;	
    
    transition: color 0.1s ease-in, border-color 0.1s ease-in, background 0.1s ease-in;
}



input[type=submit]:hover,
.button:hover
{
  opacity:0.7;
}


input[disabled=disabled], 
input[disabled],
input[disabled=disabled]:hover, 
input[disabled]:hover,
.button.disabled
{opacity:0.3 !important; cursor:default;}

/* button */
.button {
    background: #0000;
    color: #000;
    border: 1px solid #ccc;
}
.button.gray {color:#888;}
.button.blue {border-color:#027ac1; color:#027ac1;}
.button.red {border-color:#c00; color:#c00;}

.button.solid {
	background:#007dc6;
	border-color:#007dc6;
	color:#fff;
}

.button:hover {
	background:#48a3ee !important;
	border-color:#48a3ee !important;
	color:#fff !important;
}

.button.ms-toggle-control {
	border:dashed 2px rgba(0,0,0,0.1);
}

.button.ms-toggle-control:hover {
	background:none !important;
	border-color:#48a3ee !important;
	color:#48a3ee !important;
}



/* Textarea */
textarea {
	min-height:6em;
	padding:5px;
	line-height:1.25;
	font-size:16px;
}

.field.small textarea {min-height:3em;}


/* Select */
select {
	line-height: 2;
	padding: 0.35em;
	margin: 0.5em 0;
	max-width:100%;
}

.col select,
[class*='cols-'] select
{
  width: 100%;	
}


/* Checkbox */

/* Radio // todo !! */

form .items {margin:0.5em 0 1.5em;font-size:.9em;line-height:1.33}
form .items .item {margin:0 0 .5em}
form .items .item label, .items .input {display:inline-block;vertical-align:top}
form .items .item label {font-weight:normal;max-width:70%;color:#333}



/* Inline Fieldset */
form .field.checkbox {width:100%; overflow:hidden; display:flex; align-items:flex-start;}
form .field.checkbox input {flex:0 0 auto; margin-right:0.5em; margin-top:0.3em;}



/* fileupload stuff */



/* Sr Freecap */
form input.captcha {
    display: inline-block;
    width: 100px;
}

.tx-srfreecap-pi1-cant-read {
  display: block;
  font-size: 13px;
  color: #888;
  margin:0 0 0.3em;
}

/* Form Validation */
form .required label.field-label {font-weight:bold}
form .required label.field-label:after {content: "*"; color:#c03;margin:0 .25em}

form .error {color:#c03}

form .error input,
form .error textarea {border:1px solid #c03 !important}

form .error input::placeholder,
form .error textarea::placeholder {color:#c03 !important}

label.field-label.error {font-size:.8em;font-weight:bold;position:absolute;bottom:0;left:0;background:#fff}


/* Ms Flexi Forms */
.msflexiHide {display:none;}



								/* cols etc */

form div[class*='cols-'] > div {
	margin:0;
}
						
								
[class*='cols-'] input[type=text], 
[class*='cols-'] input[type=password], 
[class*='cols-'] input[type=email], 
[class*='cols-'] textarea {
  margin-left:0;
  margin-right:0;
}

/* flexbuttons */
.flexbuttons .items {
	display:flex;
	margin:20px -10px;
}

.flexbuttons .item.radio {
	flex-grow:1;
	max-width:450px;
	padding:0 10px;
	margin:0;
	cursor:pointer;
	overflow:unset;
	position:relative;
	overflow:visible;
}

.flexbuttons .item input {
	position: absolute;
    right: 7px;
    top: 1px;
    width:20px;
}

.flexbuttons .item.radio label {
	padding:20px;
	border:solid 1px #ddd;
	border-radius:10px;	
	cursor:pointer;
	font-weight:500;
	height:100%;
	width:100%;
	max-width:none;
}

.flexbuttons .item input[checked="checked"] + label {
	background:rgba(2,122,193,0.1);
	border-color:rgba(2,122,193,0.2);
}





								/* from okno.css */
  /* common */
form.fh div.field.fileupload .file .size {
  margin: 0.2em 0 0;
  color: #888;
  font-size: 0.8rem;
}

  
  /* valid */
form .required.valid > label.field-label:after,
form .required.valid > .main > label.field-label:after,
form .required.valid > .inline > label.field-label:after
{
	content:'';
	display:inline-block;
	width:12px;
	height: 12px;
	background: url(../images/ico-check-white.svg) 50% 50% no-repeat #579C67;
	background-size:8px;
	border-radius: 6px;    
}
  
    /* valid fileupload */
form.fh div.field.fileupload .file {
  position: relative;
  padding: 10px;
  padding-left: 45px;
}

form.fh div.field.fileupload.valid .file .name {color: #579C67;}

form.fh div.field.fileupload .file .remove {
  position: absolute;
  top:10px;
  left: 10px;
  line-height: 1;
  border: none;
}

form.fh div.field.fileupload .file > .field.required {
  margin-left: -45px;
}

form.fh div.field.fileupload .file > .field.required textarea {
  min-height:40px; 
}

form .field.ajaxFileUpload .validator.note {margin:10px 0 0;}


/* hightlight */
form label a {color:#027ac1;}
form .highlight .item label {
	font-weight:bold;
}


									/* todo > overrides */
/* master temp */
label.field-label {color:#000;}
.error label.field-label {color:#c00;}
.required.valid .field-label {color:#579c67;}


/* ajaxFileUpload */
input[type=file] {
	font-size:13px;
	line-height:1;
	color:#888;
}

form .ajaxFileUpload label.upload.button {
	color:#888;
	font-weight:500;
	margin:0.5em 0;
	background:#f2f3f4;
}

label.upload + input[type=file] {opacity:0;}

form .ajaxFileUpload .itemAdd.file.error .name {color:#c00;}

form .uploadingCotrols {font-size:16px;}

form .ajaxFileUpload .itemAdd.file {
	position:relative;
	overflow:hidden;
	margin:0 0 1em;
	font-size:16px;
}

form .ajaxFileUpload .itemAdd.file .name {
	font-weight:500;
	white-space:nowrap;
	color:#037ac1;
	margin:0 0 0.3em;
}


form .ajaxFileUpload div[id*="Tx_Formhandler_UploadedFiles"] {
	position:relative;
	overflow:hidden;
	font-size:16px;
	font-weight:500;
	margin: 0 0 1em;
}

form .ajaxFileUpload div[id*="Tx_Formhandler_UploadedFiles"] .item {
	position:relative;
	overflow:hidden;
	margin:0 0 0.5em;
	white-space:nowrap;	
}

form .ajaxFileUpload div[id*="Tx_Formhandler_UploadedFiles"] .item:before,
form .ajaxFileUpload .itemAdd.file .name:before
{
	content:'';
	display:inline-block;
	vertical-align:1px;
	width:0.7em;
	height:0.7em;
	border-radius:999px;
	margin-right:0.5em;
	background:#4caf50;
}

form .ajaxFileUpload .itemAdd.file .name:before {background:#037ac1;}

form .ajaxFileUpload .itemAdd input {max-width:none;} 

form .fileUploadProgress {
  position:relative;
  overflow:hidden;
  margin:10px 0;
  border:dotted 1px #eee;
}
form .fileUploadProgress .bar { 
  height:10px;
  background:#17c;
  width:5px
}




/* form */

.field.flexcomment {
	display:flex;
	justify-content: space-between;
}

.field.flexcomment > .comment {
	padding-left:50px;
	flex-basis:33%;
	flex-shrink:0;
} 



							/* mschoice */
.field.mschoice .mschoice-note {
	display:none;
	
	font-size:16px;
	color:#888;
	margin:10px 0 20px;
}

.field.mschoice textarea {
	display:none;
	margin:10px 0 20px;
}

.field.mschoice .checked .mschoice-note,
.field.mschoice .checked textarea
{display:block;}

.field.mschoice .item.radio .mschoice-note {
	padding-left: 28px;
}


								/* ms_rating */

.ms_rating .rating {
  display:flex;
  margin:10px 0;
}

.ms_rating .rating > .item {
  flex:0 0 auto;
  width:30px;
  height:30px;
  line-height:30px;
  border-radius:999px;
  background:transparent;
  border:solid 1px transparent;
  color:#fff;
  font-size:12px;
  font-weight:500;
  text-align:center;
  margin-right:2px;
  cursor:pointer;
  
  background-color:rgba(0,0,0,0.1);
  color:rgba(0,0,0,0.6);
  border-color:rgba(0,0,0,0.3);  
}

.ms_rating .rating.active > .item
{opacity:1; background-color:rgba(0,0,0,0.6);}
.ms_rating .rating.active > .item.active ~ .item
{opacity:0.3;}

.ms_rating .rating > .item.active {color:rgba(255,255,255,0.7) !important;}

.ms_rating .rating.haspositive.hasnegative > .item.negative,
.ms_rating.neg .rating > .item
{
  background-color:rgba(204,0,0,0.1);
  color:rgba(204,0,0,1);
  border-color:rgba(204,0,0,0.3);
}

.ms_rating .rating.haspositive.hasnegative > .item.positive,
.ms_rating.pos .rating > .item
{
  background-color:rgba(68,169,139,0.1);
  color:rgba(68,169,139,1);
  border-color:rgba(68,169,139,0.5);
}

.ms_rating .rating.active.haspositive.hasnegative.positive > .item.positive,
.ms_rating.pos .rating.active > .item
{opacity:1; background-color:rgba(68,169,139,1);}

.ms_rating .rating.haspositive.hasnegative.active.positive > .item.positive.active ~ .item.positive,
.ms_rating .rating.haspositive.hasnegative.active.positive > .item.negative
{opacity:0.3;}

.ms_rating .rating.haspositive.hasnegative.active.negative > .item.negative.active ~ .item.negative,
.ms_rating.neg .rating.active > .item
{opacity:1; background-color:rgba(204,0,0,1);}

.ms_rating .rating.haspositive.hasnegative.active.negative > .item.negative,
.ms_rating .rating.haspositive.hasnegative.active.negative > .item.positive
{opacity:0.3;}

.ms_rating .rating.haspositive.hasnegative.active.negative > .item.negative.active {opacity:1; background-color:rgba(204,0,0,1);}
.ms_rating .rating.haspositive.hasnegative.active.positive > .item.positive.active {opacity:1; background-color:rgba(68,169,139,1);}

.ms_rating.star .rating > .item {
	width: 23px;
    height: 22px;
    overflow: hidden;
    margin-right: 5px;
    border:none;
    background: url(../images/splash-star.svg) 0 0 no-repeat;
    cursor: pointer;
    opacity: 0.6;
    transition: background-position 0.2s;	
    text-indent:-999px;
}

.ms_rating.star .rating.rating_chosen > .item,
.ms_rating.star .rating:hover > .item,
.ms_rating.star .rating.rating_chosen > .item.active ~ .item:hover
{
	opacity: 1;
    background-position: 0 -22px;	
}
.ms_rating.star .rating.rating_chosen > .item.active ~ .item,
.ms_rating.star .rating > .item:hover ~ .item {
	opacity: 0.3;
    background-position: 0 0px; 
}