/* ========= forms style ========> */

form.f {
	background:#fff;
	padding:1em;
	margin:1em auto;
	width:90%;
}

form.f fieldset > div {
	margin:0.3em 0;
	clear:both;
}
form.f label {
	float:left;
	width:190px;
	text-align:right;
	margin-right:20px;
	margin-top:5px;
	font:normal 14px/1.1 Verdana,sans-serif;
}
form.f div.l0 {margin-bottom:4px;}
form.f label sup {color:#c00;font-size:9px;padding:0px 1px;}
form.f div.l label {width:260px;margin-top:2px;}
form.f div.l0 label {width:160px;margin-top:4px;}
form.f div.l2 label {width:260px;margin-top:2px;font-size:12px;color:#777;}
form.f div.n label {width:auto;margin-top:2px;}
form.f div.n div.about,form.f div.n div.val {padding:0px 0px 5px 45px;font:italic 12px/1.1 Arial,sans-serif;color:#999;}
form.f div.n div.val {display:none;}
form.f label#summ {font:bold 14px/1.1 Verdana,sans-serif;color:#c00;}
form.f div.no label {width:auto;float:auto;text-align:auto;}
form.f div.no {clear:both;}
form.f legend {
	color:#A89670;
	font:bold italic 17pt/1.1 "Times New Roman", Times, serif;
	background:#fff;padding:0px 10px;
}
form.f input,form.f select,form.f textarea {
	padding:0.15em;
	width:65%;
	border:1px solid #ddd;
	background:#fafafa;
	font:bold 15px arial, sans-serif;
	-moz-border-radius:0.4em;
	-khtml-border-radius:0.4em;
}

.btn,.f input[type=submit],.f button[type=submit] {
    background: #F7D487; /* Fallback */
    background: -moz-linear-gradient(#F7D487, #F7C86A);
    background: -ms-linear-gradient(#F7D487, #F7C86A);
    background: -o-linear-gradient(#F7D487, #F7C86A);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fbd568), to(#ffb347));
    background: -webkit-linear-gradient(#F7D487, #F7C86A);
    background: linear-gradient(#F7D487, #F7C86A);
    border: 1px solid #f4ab4c;
    color: #775319;
    text-shadow: 0 1px rgba(255,255,255,0.3);
	font:400 11pt/1.1 'Lato', Calibri, Arial, sans-serif;text-decoration:none;
	float:none;height:20px;line-height:20px;padding:3px 10px;
	width:auto;margin:8px 10px 0px 1px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}
.f input[type=submit],.f button[type=submit] {padding:1px 10px 3px;height:24px;}
.btn:hover,.f input[type=submit]:hover {
    box-shadow: 
        inset 0 1px rgba(255,255,255,0.3), 
        inset 0 20px 40px rgba(255,255,255,0.15);
	text-decoration:none;
}

.f input[type=submit]:hover {
    background: #F7D487;
	cursor:pointer;
}


/*form.f2 button,*/
form.f div.l input,form.f div.l select,form.f div.l0 input {width:50%;}

form.f input:hover, form.f input:focus {
	border-color:#c5c5c5;
	background:#f6f6f6;
} 
form.f fieldset {
	border:1px solid #ddd;
	padding:0 0.5em 0.5em;
}

.radio, .date {
	position:relative;
}
.radio fieldset, .date fieldset {
	border:none;
	width:auto;
	padding:1px 0 0 11em;
}
.radio legend, .date legend {
	font-size:1em;
	color:#000;
}
.radio legend span, .date legend span {
	position:absolute;
	left:0;
	top:0.3em;
	width:10em;
	display:block;
}
.radio label, .radio input {
	vertical-align:middle;
	display:inline;
	float:none;
	width:auto;
	background:none;
	border:none;
}
.radio div {
	float:left;
	white-space:nowrap;
	clear:none;
}

.email {
	width:14em;
}

form.f input.default {
	color:#bbb;
}

#submit-go {
	position:relative;
	margin:5px 10px;
	display:block;
	cursor:pointer;
}
#submit-go:hover {
	background-position:0 -26px;
}

form.f input.checkbox, form.f input[type=checkbox] {width:auto !important;float:left;margin:5px 10px !important;border:none;background:none;
}
form.f input.checkbox {margin:0px 10px;}

em.error {
  clear: both;
  color: #f00;
  display: block;
  font-size: 12px;
  margin: 5px 0 0 125px;
}
#container { margin: 20px auto 0; width: 600px; }

span.err { position:relative;left:-10px;top:2px;color:#f00;font:bold 18px/1 "Times New Roman", Times, serif;}

/* <========= forms style ========= */

/* ========== modal box style ========> */

#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000;}

/* Container */
#modal-box,#alert {min-width:790px; max-width:900px;background-color:#eee; border:4px solid #ccc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#alert {width:330px;max-width:330px;}
#modal-box .simplemodal-data.message {padding:8px; }
#modal-box code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#modal-box a {color:#ddd;}
#modal-box a.modalCloseImg {background:url(../img/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#modal-box h3 {color:#84b8d9;}
#modal-box a.modal-close,
#modal-box a.modal-close:link,
#modal-box a.modal-close:active,
#modal-box a.modal-close:visited {color:#999; font-size:18px; font-weight:bold; position:absolute; text-decoration:none; right:8px; top:0px;}
#modal-box a.modal-close:hover {color:#ccc;}
#alert .header,#modal-box .header {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
height:30px; line-height:30px; width:100%; background:#B39E5C; color:#fff; font-weight:bold;}
#alert .header b,#modal-box .header b{padding-left:8px;}
#modal-box .message {display:block;position:relative;float:none;clear:both;}
#modal-box .message table {float:none;position:relative;}


/* <========= modal box style ========= */

/* ========== date picker style =========> */

.datepicker {
    display: inline-block;
	border: 2px solid #c8c8c8;
	
	border-radius: 5px;
	-webkit-border-radius: 5px;  
	-moz-border-radius: 5px;
	box-shadow: 0.5px 0.5px 3px #c8c8c8;
	-webkit-box-shadow: 0.5px 0.5px 3px #c8c8c8;
	-moz-box-shadow: 0.5px 0.5px 3px #c8c8c8;
}

.datepicker > .datepicker_header{
	padding-top:	2px;
	padding-bottom: 2px;
	padding-left:	5px;
	padding-right: 5px;
	background-color:	#d2d2d2;
	color: #3f3f3f;
	text-align: center;
	font-size: 9pt;
	font-weight: bold;
}

.datepicker > .datepicker_header > a{
	user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
	cursor: pointer;
	color: #559abd;
}

.datepicker > .datepicker_header > a:hover {
	color: #000000;
	background-color:	#c8c8c8;
}

.datepicker > .datepicker_header > a:active {
	color: #ffffff;
	background-color:	#808080;
}

.datepicker > .datepicker_header > span {
	margin-left: 20px;
	margin-right: 20px;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

/*
 * datepicker_inner_container 
*/

.datepicker > .datepicker_inner_container {
	margin: -2px -2px -2px -2px;
	background-color: #d2d2d2;
	border: 2px solid #c8c8c8;
	border-radius: 5px;
		-webkit-border-radius: 5px;  
		-moz-border-radius: 5px;

	box-shadow: 0.5px 0px 5px #c8c8c8;
		-webkit-box-shadow: 0.5px 0px 5px #c8c8c8;
		-moz-box-shadow: 0.5px 0px 5px #c8c8c8;
}

.datepicker > .datepicker_inner_container:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*
 * datepicker_inner_container > datepicker_calendar
*/

.datepicker > .datepicker_inner_container > .datepicker_calendar {
	float: left;
	width: auto;
	
	margin-top: -0.5px;
	margin-left: -1px;
	margin-bottom: -2px;
	
	background-color:	#ffffff;
	border: 1px solid #c8c8c8;
	
	border-top:none;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
		-webkit-border-top-left-radius:	5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-topleft:		5px;
		-moz-border-radius-bottomleft:	5px;
}

.datepicker > .datepicker_inner_container > .datepicker_calendar > table {
    padding: 10px;
}

/*
 * datepicker_inner_container > datepicker_calendar > datepicker_table > tbody > tr > th (WDay-cell)
*/

.datepicker > .datepicker_inner_container > .datepicker_calendar > .datepicker_table > tbody > tr > th {
	color:	#646464;
	width: 18px;
	font-size: small;
	font-weight: normal;
	text-align:center;
}

/*
 * datepicker_inner_container > datepicker_calendar > datepicker_table > tbody > tr > td (Day-cell)
*/

.datepicker > .datepicker_inner_container > .datepicker_calendar > .datepicker_table > tbody > tr > td {
	color:	#000000;
	font-size: small;
	text-align:center;
	padding:1px 5px;
	
	user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
	cursor: pointer;
}

.datepicker > .datepicker_inner_container > .datepicker_calendar > .datepicker_table > tbody > tr > td.today {
	border-bottom: #bfbfbf solid 2px;
	margin-bottom: -2px;
}

.datepicker > .datepicker_inner_container > .datepicker_calendar > .datepicker_table > tbody > tr > td.wday_sat {
	color:	#0044aa;
}

.datepicker > .datepicker_inner_container > .datepicker_calendar > .datepicker_table > tbody > tr > td.wday_sun {
	color:	#e13b00;
}

.datepicker > .datepicker_inner_container > .datepicker_calendar > .datepicker_table > tbody > tr > td.day_another_month {
	color:	#cccccc;
}

.datepicker > .datepicker_inner_container > .datepicker_calendar > .datepicker_table > tbody > tr > td.active {
	color: #ffffff;
	background-color:	#808080;
}

.datepicker > .datepicker_inner_container > .datepicker_calendar > .datepicker_table > tbody > tr > td.hover {
	color: #000000;
	background-color:	#c8c8c8;
}

/*
 * datepicker_inner_container > datepicker_timelist
*/

.datepicker > .datepicker_inner_container > .datepicker_timelist {
	float: left;
	width: 4.5em;
	height: 118px;
	
	margin-top: -0.5px;
	padding: 5px;
	padding-left: 0px;
	padding-right: 0px;
	
	overflow: auto;
	overflow-x: hidden; 
	
	background-color:	#ffffff;
	
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	-webkit-border-top-right-radius:	4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-topright:		4px;
	-moz-border-radius-bottomright:	4px;
}

.datepicker > .datepicker_inner_container > .datepicker_timelist::-webkit-scrollbar {
	overflow: hidden;
	width: 6px;
	background: #fafafa;
	
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-border-top-right-radius:	5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright:		5px;
	-moz-border-radius-bottomright:	5px;
}

.datepicker > .datepicker_inner_container > .datepicker_timelist::-webkit-scrollbar:horizontal {
	height: 1px;
}

.datepicker > .datepicker_inner_container > .datepicker_timelist::-webkit-scrollbar-button {
	display: none;
}

.datepicker > .datepicker_inner_container > .datepicker_timelist::-webkit-scrollbar-piece {
	background: #eee;
}

.datepicker > .datepicker_inner_container > .datepicker_timelist::-webkit-scrollbar-piece:start {
	background: #eee;
}

.datepicker > .datepicker_inner_container > .datepicker_timelist::-webkit-scrollbar-thumb {
	background: #aaaaaa;
	border-radius: 3px;
		-webkit-border-radius: 3px;  
		-moz-border-radius: 3px;
}

.datepicker > .datepicker_inner_container > .datepicker_timelist::-webkit-scrollbar-corner {
	background: #333;
}

.datepicker > .datepicker_inner_container > .datepicker_timelist > div.timelist_item {
	padding-top:   1px;
	padding-bottom:1px;
	padding-left:  7px;
	padding-right: 25px;
	margin-top: 5px;
	margin-bottom: 2px;
	font-size: small;
	
	user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
	cursor: pointer;
}

.datepicker > .datepicker_inner_container > .datepicker_timelist > div.timelist_item.active {
	color: #ffffff;
	background-color:	#808080;
}

.datepicker > .datepicker_inner_container > .datepicker_timelist > div.timelist_item.hover {
	color: #000000;
	background-color:	#c8c8c8;
}

/* <========== date picker style ========= */

@media only screen and (max-width: 995px) {
#modal-box,#alert {min-width:690px; max-width:790px;
}
@media only screen and (max-width: 767px) {
form.f {margin:0px;}
form.f label,form.f div.l label {width:95px;}
form.f input,form.f select {width:60%;}
#modal-box,#alert {min-width:440px;}
}
@media only screen and (max-width: 479px){
form.f {margin:0px;padding:7px;}
form.f fieldset {padding:0px;border:none;}
form.f label,form.f div.l label {width:75px;font-size:11px;}
form.f input,form.f select {width:50%;}
#modal-box,#alert {min-width:310px;}
}