/* form styling */
.formTxt{clear:both; display:block; float:left; width:30%; margin: 0 0 15px 0; overflow:hidden; font-weight:bold; }
.formInput{display:block; float:left; width:60%; margin: 0 0 15px 0; overflow:hidden; }
.formInput input[type="text"], .formInput input[type="date"], .formInput input[type="password"], .formInput input[type="number"], .formInput input[type="email"], .formInput textarea{-webkit-appearance: none; border: 1px solid #565656; padding:5px; width: calc(100% - 12px); }
.formInput select{border: 1px solid #565656; padding:5px; width: calc(100% - 12px); }
.formInput textarea{ height:100px; }
.formInput input[type="submit"], .formInput input[type="button"]{ transition: ease-in 0.3s; border:none; -webkit-appearance: none; padding:10px 25px!important; font-weight:bold; }
.formInput label{margin-right: 20px; display:inline-block;}
.nonmem .formInput label{margin-left: 20px; }
.diet .formTxt{font-weight:normal;}
input[type=checkbox] { transform: scale(1.5); border: 1px solid #565656; padding:5px; margin: 0px 10px 0 10px;}

.error{ background:#fff; border:#c8473c 1px solid; color:#c8473c; padding:10px; margin:10px 0;}
.error li{ margin-left:25px; }
.succes{ background:#fff; border:green 1px solid; color:green; padding:10px; margin:10px 0; }

/* always show arrow of input field with datalist*/
input::-webkit-calendar-picker-indicator { opacity: 100; }

#form{position:absolute; margin-top: -250px;}

/*
.actions{width:50%;}
*/

/* The Modal (background) */
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: z-index: 100000 !important;; /* Sit on top */ left: 0;  top: 0;  width: 100%; /* Full width */  height: 100%; /* Full height */  overflow: auto; /* Enable scroll if needed */}
/* Modal Content/Box for agree to rules */
.modal-content { box-shadow: 0 4px 8px #565656; z-index: 100001 !important; background: #eaf5fa; border:1px solid #e1005a; margin: 15% auto; /* 15% from the top and centered */  padding: 20px;  width: 80%; /* Could be more or less, depending on screen size */ }
/* The Close Button */
.close { color: #e1005a; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer;}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity: 1;}

.buttons input{width: calc(50% - 10px)!important; display: inline-block; margin: 5px;}
.buttons input[name="saveChanges"], .buttons input[name="savePassword"]{background-color: #009ee1; color: white}
.buttons input[name="saveChanges"]:hover, .buttons input[name="savePassword"]:hover{background-color: #ff8f00;}

@media only screen and (min-width: 1000px) {
	.formInput input[type="submit"]:hover, .formInput input[type="button"]:hover{background: #ff8f00; }
}
@media only screen and (max-width: 950px) {
	.formInput span{display:block;}
}
@media only screen and (max-width: 767px) {
	.formTxt{float:none; width:100%; margin: 0 0 10px 0; }
	.formInput{float:none; width:100%; margin: 0 0 25px 0; }	
	.formTxt.gone{display:none;}
}
@media only screen and (max-width: 480px) {
	.formInput input[type="submit"]{ width:100%; }
}


@media screen and (max-width: 400px) {
	 #formpage_left { float: none; margin-right:0; width:auto; border:0; }
	.actions{width:100%;}
}