/** 
 * SilverStripe Black Candy Theme
 * http://www.silverstripe.com
 *
 * Form Styling
 */

.optionset {clear:both;display:block;margin:0px}
/*.optionset ul {height:20px;}*/
.optionset  li {float:left;width:auto}
.optionset  li  input{float:left;margin:0}
.optionset  li  label {float:left;margin:0px 10px 0px 5px}
.checkboxset  .optionset  li  label {float:none}
.optionset  li  input, .optionset  li  label {margin-bottom:3px;}
label.required {width:95%}

.checkboxset ul {height:auto}
.checkboxset  li {float:none}
.checkboxset  li  label {text-indent:2px}

fieldset .field.readonly {clear:both}
fieldset .field.readonly label, fieldset .field.labelledliteral label, fieldset .field.checkboxfield_readonly label {display:block;width:150px;margin-bottom:7px;margin:3px 0 5px 0}
fieldset #editLink {margin-top:10px;float:right;#_position:absolute; #_margin-left:530px}
fieldset #viewDetails {float:right;margin:0 5px 0px 0px;#_position:absolute;#_margin:0 0 0 440px}
/*fieldset .field.readonly .middleColumn, fieldset .field.labelledliteral .middleColumn, fieldset .field.checkboxfield_readonly .middleColumn {display:block;float:left;min-width:300px;max-width:640px;margin-left:150px;margin-top:-25px;margin-bottom:0;#_margin-left:100px}*/
fieldset {margin-bottom:10px;#_margin-bottom:30px}

a.button.left, div.buttons.left {float:left}
a.button.right, div.buttons.right {float:right}
a.button {float:left;background:#666!important;border:1px solid #333;color:#fff !important;padding:10px!important;margin:15px 10px 0px 0px;font-size:110%;;width:auto;}
a.button:hover {background:#444}
a.button.openFlag{background:#CF0C0C;border-color:#AF0A0A}
a.button.openFlag:hover{background:#AF0A0A}

a.btn.right {
	margin-right:5px;
}

a.btn, a.button, button, input[type="submit"], .Actions .action, div.button {
    background: #f0f0f0; /* Old browsers */
    background: -moz-linear-gradient(top,  #f0f0f0 0%, #d5d5d5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#d5d5d5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f0f0f0 0%,#d5d5d5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f0f0f0 0%,#d5d5d5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f0f0f0 0%,#d5d5d5 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f0f0f0 0%,#d5d5d5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
    text-align: center;
    border: 1px solid #b2b2b2;
    color: #333;
    display: inline-block;
    /*border-radius: 5px;*/
    padding: 5px 10px 5px 10px;
}

a.btn:hover, a.button:hover, button:hover, input[type="submit"]:hover, .Actions .action:hover, div.button:hover {
 	background: #e5e5e5; /* Old browsers */
    background: -moz-linear-gradient(top,  #e5e5e5 0%, #ccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e5e5e5 0%,#ccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e5e5e5 0%,#ccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e5e5e5 0%,#ccc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e5e5e5 0%,#ccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ccc',GradientType=0 ); /* IE6-9 */
	border: 1px solid #999;
	color:#222;
}

div .field {clear:both;width:99%;padding:1px 5px;margin:0px 0px 5px 0px}
div .field:hover, div .field:hover .middleColumn {background:#FFF9DF}
.WidgetHolder div .field {clear:none;padding:1px;margin:0px}
.WidgetHolder div .field:hover {background:none}

/* FIELDSETS
---------------------------------------- */
fieldset {
	border: 0;
	font-size: 1.2em;
}
.fieldgroup small {color:#777;display:block;padding:5px 0px}
.fieldgroup ul {clear:both;padding:5px 0px 20px 0px;margin:0;display:block}
.fieldgroup span.message.required {margin-top:30px;}
.fieldgroupField  label {clear:both;padding-bottom:15px}

.fieldgroup .middleColumn, .fieldgroup .fieldgroup {padding-left:0 !important;margin-left:0 !important}

/* ACTION BUTTONS
---------------------------------------- */
input.action {
	padding: 2px;
	font-size: 1.2em;
	font-family: Verdana, Tahoma, Sans-serif;
}
input.action:hover,
input.action:focus {
	cursor: pointer;
}

/* FIELD FORMATING
---------------------------------------- */
form ul {
	list-style: none;
}
.middleColumn {
 	display: block;
 	margin: 15px 10px 5px 0;
	background: transparent;
	padding: 4px;
	/*
	width: 100%;
	clear: left;
	*/
}

	#Sidebar .middleColumn {
		margin: 0 0 0 8px;
		display: inline;
	}
	
	div.tab .field .middleColumn {
		clear: none !important;
 		margin: 0 !important;
		width: auto;
	}
	
	.middleColumn .middleColumn {
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}
	
	.middleColumn .message {
		margin: 0;
	}
/* INPUT BOXS
---------------------------------------- */

input.text, textarea, select, .customcalendardate input.required {
	padding: 2px;
	border: 1px solid #A7A7A7;
	color: #000;
	font-size: 1.1em;
	font-weight: normal;
	width: 300px;
}

.customcalendardate input.required {
	width:100px	
}

textarea {
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 1.2em;
}
input:focus span, textarea:focus span {
	border: 3px solid #000;
}

/* SELECT DROPDOWN
---------------------------------------- */

select {
	width: auto;
}

/* LABELS
---------------------------------------- */
.typography label {
 	display: block;
	margin: 10px 0 -10px 0;
	color: #777;
	font-size: 1em;
}

label.right {
	display:inline;
}
/* SEARCH BOX 
---------------------------------------- */
#Search {
	width: 105px;
}
	input#Search_Form_SearchForm_Search {
		width: 110px;
		padding: 3px;
		margin-left: -4px;
		font-size: 1.2em;
	}
#Sidebar input.action {
	font-size: 1.2em;
	float: right;
	padding: 1px;
	margin: -22px 10px 0 0;
}


#notify {
	border:2px solid #BF0B0B;
	color:#A30C0C;
	background:#EF8686;
	padding:10px;
	font-size:11px;
	margin-bottom:20px
}
#notify a {
	color:#BF0B0B;
}


/* FILTER FORM
---------------------------------------- */

#Form_FilterForm {
	border:1px solid #B5B5B5;
	background: #f0f0f0;
	padding:7px 7px 10px 7px;
}
	#Form_FilterForm h3 {
		color:#555;
		text-transform:uppercase;
		font-size:120%;
		margin:0 0 2px 0
	}
	
	#Form_FilterForm input.text {
		width:200px
	}

	#Form_FilterForm  label.left, #Form_FilterForm .fieldgroupField label {
		clear:left;
		display:block;
		float:left;
		width:100px!important;
		margin-top:8px
	}

	#Form_FilterForm .middleColumn {
		clear:none;
		width:215px;
		float:left;
		margin:5px 10px 0 10px;
		background:transparent;
		padding:0
	}
		#Form_FilterForm .groupedlistdropdown label,
		#Form_FilterForm .listbox label {
			margin:0;
			margin-top:7px;
		}
		#Form_FilterForm .middleColumn label {
			float:left;
			margin:0
		}
		#Form_FilterForm .middleColumn input {
			padding:3px
		}
	
	
	#Form_FilterForm .fieldgroup {
		clear:left;
		width:auto;
	}
	#Form_FilterForm .fieldgroup label {
		margin:2px 0 6px 0;
	}
	#Form_FilterForm .fieldgroupField  {
		padding:0;
		margin:0;
	}
		#Form_FilterForm .fieldgroup .middleColumn {
			width:380px;
			margin-left:0;
		}
		
		#Form_FilterForm  .CompositeField, #Form_FilterForm  .date {
			width:auto;
			float:left;
			clear:none
		}
		#Form_FilterForm .CompositeField label, #Form_FilterForm  .date label {
			clear:none;
			width:auto!important;
			float:left;
			margin:3px 3px 0 3px;
		}
		
		#Form_FilterForm .CompositeField .text, #Form_FilterForm  .date .text {
			float:left;
			width:95px;
			margin:0 0;
			*margin-bottom:5px
		}
		#Form_FilterForm  .date .middleColumn {
			margin:0;
			width:auto;
		}
	
	#Form_FilterForm select {
		width:370px;
		font-weight:normal
	}
	#Form_FilterForm .col.first select {
		width:auto
	}
	#Form_FilterForm .col.first button.ui-multiselect {
		width:210px!important
	}
	#Form_FilterForm .col.first .ui-multiselect-header .ui-helper-reset {
		margin:0
	}
	#Form_FilterForm fieldset {
		width:400px;
		float:left
	}
	#Form_FilterForm .Actions {
		float:right;
	}
	#Form_FilterForm_action_ClearAction, #Form_FilterForm_action_doReset {
		padding:2px;
		font-size:11px;
		background:#D9D9D9;
		color:#666;
		float:left
	}
	
	#Form_FilterForm {
		display:block;
		height:40px;
	}
	
	
#sSearch {
	display:none
}

.wrapper form .message{
	width: 555px;
	color: #7a7a7a;
	font-size: 16px;
	margin-left: 0;
	font-size: 13px
}
.wrapper div.dropdownjs form div.middleColumn {
	margin-bottom:0px;
	padding-bottom: 2px;
	width:300px;
}
.wrapper div.dropdownjs form label {
	width:150px;
}
.wrapper div.dropdownjs form textarea {
	width:100%;
}
.wrapper div.dropdownjs form .message {
	width: auto;
	clear:left;
}
.wrapper div.dropdownjs form div.field .message {
	display: block;
	color:red;
}
.wrapper div.dropdownjs form strong {
	font-weight: bold;
}
.wrapper form .error.message{
	margin-top: 40px;
	color: red;
	display: block;
}

    
/* ─── Login / Forgot-password / Change-password cards ────────────────── */

/* Shared card */
#CustomLoginForm_LoginForm,
form#CustomLoginForm_LostPasswordForm,
form#MemberLoginForm_LostPasswordForm {
    width: 95%;
    max-width: 400px;
    margin: 30px auto;
    padding: 30px 28px 22px;
    background: #ffffff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    font-size: 90%;
    box-sizing: border-box;
}

/* Form heading (HeaderField renders as h2) */
#CustomLoginForm_LoginForm h2 {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center;
}

/* Field rows */
#CustomLoginForm_LoginForm .field,
form#MemberLoginForm_LostPasswordForm .field {
    margin-top: 14px;
}

/* Labels — stacked above input (eliminates the float-overflow issue) */
#CustomLoginForm_LoginForm label,
form#MemberLoginForm_LostPasswordForm label {
    float: none;
    display: block;
    width: auto;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.3px;
}

/* middleColumn: full-width block */
#CustomLoginForm_LoginForm .middleColumn,
form#MemberLoginForm_LostPasswordForm .middleColumn {
    width: 100%;
    float: none;
    margin: 0;
}

/* Text / email / password inputs */
#CustomLoginForm_LoginForm input[type="text"],
#CustomLoginForm_LoginForm input[type="email"],
#CustomLoginForm_LoginForm input[type="password"],
form#MemberLoginForm_LostPasswordForm input[type="text"],
form#MemberLoginForm_LostPasswordForm input[type="email"],
form #CustomLoginForm_LostPasswordForm_Email,
form #MemberLoginForm_LostPasswordForm_Email {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 13px;
    color: #333;
    background: #fafafa;
    float: none;
}
#CustomLoginForm_LoginForm input[type="text"]:focus,
#CustomLoginForm_LoginForm input[type="email"]:focus,
#CustomLoginForm_LoginForm input[type="password"]:focus,
form#MemberLoginForm_LostPasswordForm input[type="text"]:focus,
form#MemberLoginForm_LostPasswordForm input[type="email"]:focus {
    border-color: #b20b00;
    outline: none;
    background: #fff;
}

/* Submit buttons */
#CustomLoginForm_LoginForm_action_dologin,
#CustomLoginForm_LostPasswordForm_action_forgotPassword,
#MemberLoginForm_LostPasswordForm_action_forgotPassword {
    width: 100%;
    float: none;
    display: block;
    margin: 18px 0 5px;
    padding: 11px;
    border: none;
    border-radius: 6px;
    background: #b20b00;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}
#CustomLoginForm_LoginForm_action_dologin:hover,
#CustomLoginForm_LostPasswordForm_action_forgotPassword:hover,
#MemberLoginForm_LostPasswordForm_action_forgotPassword:hover {
    background: #8e0900;
}

/* Forgot password link */
#ForgotPassword {
    margin: 0;
    clear: both;
    display: block;
    text-align: center;
}
#ForgotPassword a {
    display: block;
    margin-top: 12px;
    color: #888;
    font-size: 11px;
}
#ForgotPassword a:hover {
    color: #b20b00;
    text-decoration: none;
}

/* Remember me — inline beside its checkbox */
#CustomLoginForm_LoginForm label.right {
    position: static;
    display: inline;
    margin: 0 0 0 6px;
    width: auto;
    font-weight: normal;
    font-size: 12px;
    color: #666;
    letter-spacing: 0;
}
#CustomLoginForm_LoginForm_Remember {
    position: static;
    margin-top: 0;
    vertical-align: middle;
    width: auto;
}

/* Error / info messages */
#CustomLoginForm_LoginForm p.message {
    font-size: 100%;
    width: auto;
    margin-top: 10px;
}

/* Change password form */
#ChangePasswordForm_ChangePasswordForm {
    width: 95%;
    max-width: 400px;
    margin: 30px auto;
    padding: 30px 28px 22px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    box-sizing: border-box;
}

div.dropdown-panel form div.field.email input,
div.dropdown-panel form div.field.text input {
	width:100%;
}