/* Edits for New Frontend Forms */
/* global buttons */
.gen-button .icon-plus-sign {display: none;}

.gen-button, .alt-button.blue, .alt-button.red, .alt-button.green {
	background: #f4f4f4;
	border: 1px solid #bfbfbf;
	height: 26px;
	line-height: 26px;
	text-shadow: none;
	color: #4a4a4a !important;
	border-radius: 3px;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 13px;
  	box-shadow: none;
}
.gen-button:hover, .alt-button.blue:hover,
.alt-button.red:hover, .alt-button.green:hover {
	text-decoration: none !important;
	background: #fff;
	color: #888888 !important;
}

.gen-button:active, .gen-button.pressed, .gen-button.pressed:hover {
    box-shadow: none;
    text-shadow: none;
    text-decoration: none !important;
    background: #fff;
  	color: #888888 !important;
}
.alt-button.green {background: #888888; color: #fff !important; border-color: #888888;}
.alt-button.green:hover {background: #777777 !important; border-color: #777777;  color: #FFF !important;}

.alt-button.red:hover {border-color: #B84444; background: #B84444; color: #FFF !important;}

.gen-button.disabled, .gen-button.disabled:hover,
.alt-button.red.disabled, .alt-button.red.disabled:hover {
	opacity: 0.3;
	background: none;
	color: #4a4a4a !important;
	border-color: #bfbfbf;
	box-shadow: none;
}

.alt-button.green.disabled, .alt-button.green.disabled:hover {
	opacity: 0.3;
	color: #fff !important;
	border-color: #777777;
	box-shadow: none;
	background: #777777 !important;
}


/* modals */
.form-modal{
	border: 1px solid #bfbfbf;
	border-radius: 3px ;
	background: #fff;
	width: auto;
	max-width: 100%;
}
.form-modal .modal-header, .form-modal .modal-footer {border-color: #bfbfbf;}
.modal-header strong {font-weight: normal;}
.modal .modal-interior * {font-family: Roboto, Arial, Helvetica, sans-serif;}

.modal .modal-footer {overflow: hidden;}

@media screen and (max-width: 500px)
{
	.form-modal {left: 0 !important; top: 0 !important; border: 0 !important; border-radius: 0 !important; width: 100%;}
}

#form-view .events-btns {width: auto}

.ui-helper-clearfix:after {content: "" !important;}
#ui-datepicker-div {display: none}


#form-view fieldset {border: 0; padding: 0; margin: 10px 0; min-width: 0;}
#form-view fieldset legend {border-bottom: 1px solid #bfbfbf; width: 100%; margin: 0; padding-bottom: 4px; font-size: 18px}

#form-view label {font-weight: normal; font-size: inherit;}
#form-view input[ type="text" ], #form-view input[ type="password" ], #form-view select, #form-view textarea {padding-left: 0.5%; padding-right: 0.5%;}
#form-view ul.options-list li div, #form-view ul.options-list li {width: auto;}

/* Fix for long radio/checkboxes in Firefox breaking the width of the page */
#form-view ul.options-list li div {white-space: normal}

#form-view ul.options-list input {position: absolute; top: 2px; left: 0; box-shadow: none; margin-right: 10px;}
#form-view ul.options-list li label {position: relative; padding-left: 30px; float: left;}


.mc-touch #form-view select[ multiple ] {height: auto;}

#form-view #btn-controls {float: none; text-align: center;}

/* Applicants and Registrants */
 #form-view .toggle-title {background: #f7f7f7 !important;}

/* Title Toggle Section */
#form-view div.toggle-title {border-bottom: 0; border-radius: 2px 2px 0 0; margin-bottom: 0;}
#form-view .hide-user div.toggle-title {border-bottom: 1px solid #ddd; border-radius: 2px;}

.user-event-wrapper .user-event-form {
	padding: 5px;
	border: 1px solid #ddd;
	margin: 0 !important;
}

#form-view .toggle-title .carets {
	border-top: 8px solid #4a4a4a;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	height: 0; width: 0;
	/* Fix for jagged arrows in Firefox */
	-moz-transform: scale(1.1);
}

#form-view .hide-user .toggle-title .carets {
	border-top: 5px solid transparent;
	border-right: 0;
	border-left: 8px solid #4a4a4a;
	border-bottom: 5px solid transparent;
	height: 0; width: 0;
}

#summary-section .section-row {padding: 0; width: auto;}

#form-view input#discountcode {margin-bottom: 20px;}

span.applicant-name {display: inline-block;}

@media screen and (max-width: 500px){
	#form-view div[data-label="Registrant Name"] {overflow: hidden;}
	#form-view input.name-field {margin: 0 !important; width: 45% !important;}
	#form-view input.name-field[data-key="firstName"] {margin-right: 1.7% !important;}

	#summary-section .section-row div.row div.item {width: 55%;}
	#summary-section .section-row div.row div.prices {padding-right: 1%; width: 22%;}
	#summary-section .section-row div.row div.prices.amount {padding-right: 0}
}

@media screen and (max-width: 980px) {
	select:focus,
	textarea:focus,
	input:focus,
	select,
	textarea,
	input {
  		font-size: 16px !important;
	}
}


#form-view .name-element input,
#form-view .name-element select {margin-right: 1.2195121951% !important}


#form-view .name-element input[data-key="lastName"] {margin-right: 0 !important;}
#form-view .name-element select.suffix {margin-right: 0 !important; margin-left: 1.2195121951% !important;}

#form-view .name-element select {width: 15.853658537% !important; font-size: 13px !important; top: -2px; /* 65/410 */; height: 26px !important;}
@media screen and (max-width: 400px){
	#form-view .name-element select {width: 14.853658537% !important; font-size: 13px !important; top: -2px; /* 65/410 */; height: 26px !important;}
}
#form-view .name-element input.middle-initial {width: 3.6585365854% !important; /* 15/410 */}

	/* 2 Name Fields */
#form-view .name-fields-2 input {width: 47.5% !important;}
@media screen and (max-width: 520px){
	#form-view .name-fields-2 input {width: 46.7% !important;}
}


	/* 3 with prefix/suffix */
#form-view .name-fields-3 input.long-name {width: 38.6% !important; }
@media screen and (max-width: 550px){
	#form-view .name-fields-3 input.long-name {width: 37.6% !important; }
}


	/* 3 with Middle Name */
#form-view .name-fields-3.mn input.long-name {width: 30.6% !important;}
@media screen and (max-width: 550px){
	#form-view .name-fields-3.mn input.long-name {width: 29.8% !important;}
}

	/* 3 with Middle Initial */
#form-view .name-fields-3.mi input.long-name {width: 44.1% !important;}
@media screen and (max-width: 550px){
	#form-view .name-fields-3.mi input.long-name {width: 43.15% !important;}
}


	/* 4 with prefix and suffix */
#form-view .name-fields-4 input.long-name {width: 29.8% !important;}
@media screen and (max-width: 550px){
	#form-view .name-fields-4 input.long-name {width: 28.7% !important;}
}


	/* 4 with Middle Name */
#form-view .name-fields-4.mn input.long-name {width: 24.7% !important;}
@media screen and (max-width: 550px){
	#form-view .name-fields-4.mn input.long-name {width: 23.902439024% !important;}
}
	/* 4 with Middle Initial */
#form-view .name-fields-4.mi input.long-name {width: 35.25% !important;}
@media screen and (max-width: 570px){
	#form-view .name-fields-4.mi input.long-name {width: 33.902439024% !important;}
}

	/* 5 with Middle Name */
#form-view .name-fields-5.mn input.long-name {width: 18.7% !important;}
@media screen and (max-width: 550px){
	#form-view .name-fields-5.mn input.long-name {width: 17.95% !important;}
}
	/* 5 with Middle Initial */
#form-view .name-fields-5.mi input.long-name {width: 26.4% !important;}
@media screen and (max-width: 580px){
	#form-view .name-fields-5.mi input.long-name {width: 25% !important;}
}

/* Address Field */
#form-view .zip-field {width: 20.85% !important; /* 136/708*/ }
#form-view .state-field {width: 36.5056497175% !important; /* 272/708 */ }
#form-view .city-field {width: 36.5056497175% !important; /* 272/708 */ }

#form-view .zip-field,
#form-view .state-field,
#form-view .city-field {
	margin-right: 1.4124293785% !important; /* 10/708 */
}

@media screen and (max-width: 400px){
#form-view .state-field {width: 35.5056497175% !important; /* 272/708 */ }
}

#form-view .zip-field {margin: 0 !important;}

#form-view select {width: 99.3% !important }

@media screen and (max-width: 440px){
	.events-btns a.gen-button {display: block; margin-top: 5px}
}

.linked-profile-container {display: inline-block; position: relative;}



#form-view .events-btns .linked-profile-menu {
	right: -1px;
	width: 220px;
	top: 20px;
	border-color: #ccc;
	box-shadow: none;
	z-index: 11111;
}

#form-view .events-btns .linked-profile-menu li {
	text-overflow: ellipsis;
}

@media screen and (max-width: 440px){
	.linked-profile-container,
	#form-view .events-btns .linked-profile-menu {
		width: 100%;
	}
}

#form-view .field-datetime {width: 200px}

/* datepicker */
.ui-widget-content { padding: 10px; border-color: #4a4a4a; background: white;}
.ui-datepicker { width: 17em; padding: 0; display: none; font-family: Roboto, Arial, Helvetica, sans-serif; z-index: 1002 !important; }
.ui-datepicker * { font-family: Roboto, Arial, Helvetica, sans-serif !important; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; background: #4a4a4a; border: 0; border-radius: 0; color: white}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 0px; background: none;}
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left: 2px; top:2px; background: none !important; border: 0 !important; cursor: pointer;}
.ui-datepicker .ui-datepicker-next-hover { right:2px; top:2px; background: none !important; border: 0 !important; cursor: pointer;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-next .ui-icon-circle-triangle-e {background: #6a6a6a url(/administrator/includes/images/new-database/arrow-right-white-16.png) 1px 0 no-repeat !important; border-radius: 50%;}
.ui-datepicker .ui-datepicker-prev .ui-icon-circle-triangle-w {background: #6a6a6a url(/administrator/includes/images/new-database/arrow-left-white-16.png) -1px 0 no-repeat !important; border-radius: 50%;}
.ui-datepicker .ui-datepicker-next-hover .ui-icon-circle-triangle-e {background-color: #000 !important;}
.ui-datepicker .ui-datepicker-prev-hover .ui-icon-circle-triangle-w {background-color: #000 !important;}
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%; }

.ui-datepicker table {width: 96%; font-size: .9em; border-collapse: collapse; margin:0 auto .6em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px;}
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; background: #eee !important; border: 0 !important; color: #4a4a4a !important; text-align: center; }
.ui-datepicker td.ui-datepicker-current-day span, .ui-datepicker td.ui-datepicker-today a {background: #ccc !important; }
.ui-datepicker td span, .ui-datepicker td a:hover { background: #4a4a4a !important; color: #fff !important; text-decoration: none !important; }
.ui-datepicker td.ui-datepicker-current-day span, .ui-datepicker td.ui-datepicker-current-day a { background: #74b844 !important; color: #fff !important; }

.ui-datepicker td.ui-datepicker-unselectable td, .ui-datepicker td.ui-datepicker-unselectable span { background: #eee !important; color: #bbb !important; opacity: 1 !important;}

.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; border-color: #ddd; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	background: #f4f4f4; border-radius: 3px;
	border: 1px solid #bfbfbf; color: #4a4a4a;
	opacity: 1; font-weight: normal;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:hover,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover {
	background: #fff; color: #74b844;
}

.ui-timepicker-div {margin-top: 10px; font-size: 12px !important; margin: 0 3px;}
.ui-timepicker-div .ui-slider {background: #eee; border: 0px; height: 10px; padding: 0;}
.ui-timepicker-div .ui-slider-handle {border: 0; border-radius: 50%; width: 15px; height: 15px; background: #4a4a4a;}
.ui-timepicker-div .ui-slider:hover .ui-slider-handle {background: #74b844;}

#ui-datepicker-div {border: 1px solid #4a4a4a; border-radius: 2px; box-shadow: 0px 0px 50px 10px rgba(0,0,0,0.33);}

.ui-timepicker-div dl dt {display: inline-block; width: 50px;}
.ui-timepicker-div dl dd {display: inline-block; width: 80%;}


/* Frontend spinner */

.jqwhiteout {
	background-image: url(/ui-v2/images/memberclicks/loading-spinner.gif) !important;
	background-position: 50% 40% !important;
}

.multiplier {width: 60% !important; }
.multiplier-symbol {padding: 0 10px}

.span-error {clear: both; display: block;}