/* ----------------------------- */
/* ----- Join Form Styling ----- */
/* ----------------------------- */





/* Home Page */
.JoinInitial {
	max-width: 600px;
	margin: auto;
}

.JoinInitial #Submit_Container .PanelFieldValue,
.JoinInitial #Submit_Container .PanelFieldValue .TextButton {
	width: 100%;
}


/* General */
.OverflowAuto {
	overflow: auto;
}

.disclaimer {
	color: #646464;
	font-style: italic;
}

.error {
	color: red;
	font-weight: bold;
}

.rtsLI.rtsLast.hiddenImportant {
	display: none !important;
}	


/* Headers */
h3.section-title {
	font-size: 1.8em;
	text-decoration: underline;
	text-decoration-color: purple;
	text-decoration-thickness: 2px;
}

.JoinSummary h2.panel-title {
	font-size: 1.8em;
	text-decoration: underline;
	text-decoration-color: purple;
	text-decoration-thickness: 2px;	
}

.JoinSummary .PanelField {
	padding-top: 0px;
	padding-bottom: 0px;

	width: 50%;
	display: inline-block;
	float: revert;
}
.JoinSummary {
	margin-top: 5px;
	margin-bottom: 1em;
}

.JoinSummary .ReadOnly.PanelField.Left {
	padding: 0px;
}


/* CCO Tab styling */

.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel1 .rtsSelected {
	color: #fff !important;
	background-color: #501f74 !important;
	border-color: #501f74 !important;
}

.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel1 .rtsSelected:hover {
	background-color: #501f74 !important;
	border-color: #501f74 !important;
}



.btn:hover, 
.btn:focus, 
.btn:active, 
.TextButton:hover, 
.TextButton:focus, 
.TextButton:active, 
.TextButtonWithImage:hover, 
.TextButtonWithImage:focus, 
.TextButtonWithImage:active, 
.ruButton:hover, .ruButton:focus, #masterHeaderActionArea a:hover, #masterHeaderActionArea a:focus, #masterHeaderActionArea a:active, .RadGrid input.TextButton:hover, .RadGrid input.TextButton:focus, .RadGrid input.TextButton:active {
  background-color: #003B74;
}


/* Textbox */
.JoinFreetext {
	width: 100%;
}

/* Dropdowns */
.JoinDropdown {
	width: 100%;
}


/* Datepicker */
.JoinDatepicker {
	width: 100%;
	display: inline-block;
}
.JoinDatepicker .RadPicker.RadPicker_Metro {
	width: 100%;
}
.JoinDatepicker .ValidationError {
	display: none;
}

/* Checkbox */
.JoinCheckbox input {
	scale: 1.5;
	accent-color: #501f74;
	margin-right: 5px;
	margin-left: 3px;
}

.CustomRequired {
	padding-left: 5px;
}
.CustomRequired .PanelFieldValue {
	background-position: left .45em !important;
	background-image: url(/Assets/images/required.png) !important;
	background-repeat: no-repeat;
	padding-left: 10px;
}


/* Multiselect */
.JoinMultiselectContainer .chosen-container.chosen-container-multi,
.JoinMultiselectContainer .PanelFieldValue select {
	width: 100% !important;
}

.JoinMultiselectContainer .ListSearchPrompt {
	display: none;
}

/* Form Tabs */
.rtsUL {
    /* Fallback for older browsers */
    display: table !important;
    table-layout: fixed !important;
    
    /* Modern flexbox with vendor prefixes */
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    
    /* Justify content with vendor prefixes */
    -webkit-box-pack: justify !important;
    -webkit-justify-content: space-between !important;
    -moz-justify-content: space-between !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    
    /* Align items with vendor prefixes */
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -moz-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.rtsLI {
    /* Fallback for table display */
    display: table-cell !important;
    
    /* Flex properties with vendor prefixes */
    -webkit-box-flex: 1 !important;
    -webkit-flex: 1 !important;
    -moz-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    
    text-align: center !important;
    vertical-align: middle !important;
}

/* IE 8 and below fallback */
.rtsLI {
    *display: inline !important;
    *zoom: 1 !important;
    *width: 20% !important;
}

/* Container Error Styling */
.MissingRequired {	background: #ffc9c978;	border-radius: 5px; padding-bottom: 5px;}
.MissingRequired::after {  content: "Required";  font-weight: bold;  color: red;}

/* ----- Datepicker Styling ----- */
/* Make the month select look more like a button */
.RadCalendar span.rcTitle {
  width: 130px;
  margin: auto;
  color: #444;
  border: 1px solid #CCC;
  background: #DDD;
  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
}
/* add dropdown arrow to month selecter */
.RadCalendar .rcTitle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #444;
  display: inline-block;
  margin-left: 5px;
}

/* Override white on white selected color in month selecter */
.RadCalendarMonthView_Metro .rcSelected a {
	color: #25a0da !important;
}
/* ----- End Datepicker Styling ----- */


/* Searchbox */
.JoinSearchBox .RadSearchBox.RadSearchBox_Default {
	width: 100%;
	
}
.JoinSearchBox .rsbInner {
	padding: 5px 10px !important;
	color: #555555;
	border-radius: 3px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	border: 1px solid #ccc;	
}
.JoinSearchBox .rsbInner.rsbFocused {
	border-color: #66afe9 !important;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.JoinSearchBox .rsbInput {
	height: 30px !important;
}
.JoinSearchBox .rsbIcon.rsbIconSearch,
.JoinSearchBox .rsbButton.rsbButtonSearch {
	display: none;
}
.JoinSearchBox .RadSearchBox .rsbLoadingIcon {
  margin-top: 7px;
}

.rsbPopup .rsbListItem {
  padding: 5px;
}
  

#TermsConditions_Container label,
#EmailComms_Container label {
	max-width: 90% !important;
}

#EmailComms_Container .disclaimer {
	font-weight: normal;
}



/* Auto searchbox */








/* small screens */
@media only screen and (max-width: 480px) {

	/* make datepicker show full width on small screens */
	.RadCalendarPopup.RadCalendarPopupShadows {
	  left: 0 !important;
	  width: 100% !important;
	}
	.RadCalendar.RadCalendar_Metro {
		width: 100% !important;
	}
	
	/* remove side padding on small devices */
	#masterContentArea > #ContentPanel > .welcomeContainer > .WTZone > div > .row > .col-sm-12 {
		padding-left: 5px;
		padding-right: 5px;	
	}
	.JoinFormCCO > .panel > .panel-body-container > .panel-body {
		padding-left: 0px;
		padding-right: 0px;	
	}
	
	/* increase submit button for small devices */
	input.TextButton {
	  width: 90%;
	  margin: 5px auto;
	  display: block;
	}
}


/* stack CCO tabs on smaller devices */
@media (max-width: 992px) {
	.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLI, 
	.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLink, 
	.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsUL, 
	.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel {

		display: block !important;
		float: none;
	}
}