/** ----------------------------------------------------------
 *
 * This stylesheet includes both generic form styles and 
 *    additional form styles for the User Defined Form Module. 
 *
 ** ------------------------------------------------------- */

@charset "utf-8";
/* CSS Document */


/* Financing Form Styles */

.flex-form{
	width:100%;
	text-align: left;
	margin: 0 auto;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: 15px;
}

.flex-form h3{
	width:100%;
	text-transform: uppercase;
	font-weight: 600;
	border-top:2px solid #eee;
	padding:20px 0 20px 0;
	margin-top:40px;
}

.flex-form h4{
	width:100%;
	text-transform: uppercase;
	font-weight: 600;
	margin-top:40px;
	padding:10px 0;
	font-size: 16px;
}
.flex-form label{font-weight: normal;}

.flex-form span{text-align: left; margin: 0; font-size: 12px;}


.flex-form #formpage input, select{margin-top:5px;}

.flex-form .flex-row{
	display: flex; 
	justify-content: space-between; 
	align-items: flex-end; 
	width: 100%;
}
.flex-form .flex-row .flex-input {width: 100%;}
.flex-form .flex-row input {width: 98%;}
.flex-form .flex-row textarea {width: 100%; max-width: auto;}

.flex-border{
	border:2px solid #eee;
	padding:20px;
}

.flex-input{
	width:100%;
	display: flex;
	flex-direction: column;
	margin: 10px 5px 5px 5px;
	text-align: left;
}



.check-container {display: inline-block; text-align: left; margin: 0;}
.check-container input[type="checkbox"]{display: inline-block; width:20px !important;}
	

.formpage input.submit-button {margin: 0 auto; text-align: center;}

/*form styles*/
.parts-request{
	width:100%;
	padding:40px 0;
	text-align:left;
	margin-top:40px;
	border-top:1px solid #eaeaea;
}

.parts-request h3{text-transform:uppercase;}

#formpage {
	width:100%;
	vertical-align: top;
	display:inline-block;
	text-align:left;
}

#formpage p{
	text-align:left;
}
#formpage h4{margin-top:30px;}

.form-half{
	width:48%;
	display: inline-block;
	vertical-align: middle;
	margin: 10px;
}

.add-part{
	padding:30px;
	border:1px solid #f1f1f1;
	margin:20px 0 0 0
}
.add-part h4{margin:0 0 10px 10px !important;}


.formfield {
	width: 100%;
	display:inline-block;
	margin-right: 10px;
	margin-top: 10px;
	min-width: 175px;
	text-align:left;
}

#formpage input,select {
	padding: 6px 5px 10px;
	border: 1px solid #f1f1f1;
	font-family: "Source Sans Pro", sans-serif;
	color: #000;
	font-size: 16px;
	margin-top: 5px;
    border-radius: 2px;
	background:#f1f1f1;
}

#formpage input:focus {
	border: 1px solid #eaeaea;
	border-radius:2px
}

#formpage option{color:#333;background:#fff;}

/*===PLACEHOLDER TEXT STYLES===*/

#formpage ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #767676;
}
#formpage ::-moz-placeholder { /* Firefox 19+ */
  color: #767676;
}
#formpage :-ms-input-placeholder { /* IE 10+ */
  color: #767676;
}
#formpage :-moz-placeholder { /* Firefox 18- */
  color: #767676;
}
#formpage input.submit-button, #formpage input.submit-button:focus {
	background:#044DA2; 
	color:#fff;
	padding:10px;
	text-decoration:none;
	border-radius:2px;
	transition:ease-in .3s;
	width: 300px;
	border:none;
	height:auto;
	float: none;
	margin: 0 auto;
	display: block;
}



#formpage input.submit-button:hover{
	background:#000; 
	box-shadow:1px 1px 2px #848484;
	transition:ease-out .3s;
}

input[type="button"],
input[type="submit"] {
	-webkit-appearance: none;
}

#formpage textarea {
	padding: 6px 5px;
	border: 1px solid #f1f1f1;
	color: #000;
	font-size: 16px;
	background: #f1f1f1;
	width: 100%;
	height: 85px;
	border-radius:2px;
	margin-top:10px;
	max-width: 1500px;
}

#formpage textarea:focus{
	border: 1px solid #eaeaea;
	border-radius:2px
} 
#formpage button {text-align: center; margin: 0 auto;}
.CaptchaPanel{width:100%; text-align: center;}

.CaptchaImagePanel img{width:200px; text-align: center;}
.CaptchaImagePanel input {text-align: center;}
.CaptchaAnswerPanel{
	width:250px;text-align: center; margin: 0 auto;
}
.CaptchaWhatsThisPanel a{color:#333; text-align: center;}

.submit-button{
	padding:10px 0px 10px 0px;
	position:relative;
	width:100%;
	text-align:center;
	margin: 0 auto;
}

/*end form styles*/


@media screen and (max-width: 1170px)  {
	.form-half{width: 46%;}
}

@media screen and (max-width: 900px)  {
	.flex-form .flex-row{flex-wrap: wrap;}
}

@media screen and (max-width: 700px)  {
	.form-half{width: 98%;}
}

@media screen and (max-width: 450px)  {
	.add-part{padding: 20px;}
}


/* GENERIC FORMS
----------------------------------------------- */

.switcher-box form label, .consign-form form label, .equip-search form label {color:#fff; display:block;}
.search-sidebar form label {display:block;}

.switcher-box form .radio-section, .equip-search form .radio-section {display:inline-block;}

.switcher-box form input.text, 
.switcher-box form select, 
.switcher-box form .radio-section,
.consign-form form input.text, 
.consign-form form select  {margin-bottom:15px;}

.switcher-box #recaptcha_area, .switcher-box #recaptcha_table {
    margin: 0 auto;
}


.switcher-box form input[type="submit"], .search-sidebar form input[type="submit"], .consign-form form input[type="submit"] {
	float:none;
	background:#034da2;
	margin:10px auto !important;
	color:#fff;
}
.equip-search form input[type="submit"] {
	float:none;
	background:#034da2;
	margin:25px auto 10px auto !important;
	color:#fff;
}
.switcher-box form input[type="submit"]:hover, .search-sidebar form input[type="submit"]:hover, .consign-form form input[type="submit"]:hover {background:#00a651; color:#fff;}
.equip-search form input[type="submit"]:hover {background:#FCB026; color:#000;}

.switcher-box form .radio-label {color:#fff; display:inline-block; margin:0 10px 0 5px;}
.switcher-box form select {padding:5px 1.3%;}



.switch-content3 form fieldset, .switch-content3 form .Actions {text-align:center;}



.full-box {
	width:97%;
	display:inline-block;
	zoom:1;
	*display:inline;
}
div.field.full-box {margin:0 1% 5px 1% !important;}
.full-box textarea {width:97%; max-width:none;}


.third-box {
	width:30%;
	display:inline-block;
	zoom:1;
	*display:inline;
}
div.field.third-box {margin:0 1% 5px 1% !important;}

.third-box select, .third-box textarea {width:97%;}


.fourth-box {
	width:22.5%;
	display:inline-block;
	zoom:1;
	*display:inline;
}
div.field.fourth-box {margin:0 1% 5px 1% !important;}

.fourth-box select, .fourth-box textarea {width:97%;}




form {
    width: 100%;
}
div.field {
    margin: 10px 0 15px;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
form label {
    margin-bottom: 5px;
}
    form label.left {
        display: block;
        font-family: 'open_sansbold';
		font-weight:normal;
    }
    form label.right {
        font-size: 12px;
        color: #888;
    }

form input[type="file"] {width:97%;}

form input.text,
form textarea,
form .textajaxuniquetext,   /* Not sure if this is used? */
form select {
    width: 97%;
    max-width: 400px;
    padding: 6px 1.3%;
    font-size: 15px;
    background-color: #F1F1F1;
}
    .ie7 form select { width: 400px; }

form input.text:focus,
form textarea:focus,
form .textajaxuniquetext:focus,
form select:focus {
    outline:none;
}
form input[disabled], form textarea[disabled] {
    background-color: #f7f7f7;
    border: 1px solid #dad9d9;
}
textarea {
    resize: vertical;
}


/* Radio and Checkbox */
.field .checkbox, .field .radio {
    float: left; 
    width: 13px; 
    height: 13px; 
    margin-right: 6px; 
    margin-top: 3px;
    padding: 0;
}
    .checkbox label.right,
    .radio label.right {
        float: left;
    }


/* Messages */
form .message {
    background-color: #fef4ba;
    padding: 5px 10px;
    border: 1px solid #e8c805;
}
    form .good {
        background-color: #ecf9d0;
        border-color: #8fbe00;
    }
    form .bad, form .required {
        background-color: #f9d0d0;
        border-color: #cf0000;
        color: #b80000;
    }


/* ACTIONS */
.Actions {
    margin-bottom: 20px;
}
    a.btn, button, input[type="submit"], .Actions .action {
        background: #ddd;
        color: #000;
        display: inline-block;
        padding: 6px 15px;
        margin:10px 10px 10px 0;
        text-transform: uppercase;
        border: none;
        font-size: 16px;
        float: left;
		font-family: 'open_sansbold';
		font-weight:normal;
		-webkit-appearance:none;
    }
    a.btn:hover, button, input[type="submit"]:hover, .Actions .action:hover {
        background: #ccc;
        color: #000;
		-webkit-appearance:none;
    }
    a.btn {
        line-height: 18px;
        margin-bottom: 10px;
    }
    a.btn:after {                     /* creates arrow in button */
        content: '\2192';
        padding-left: 10px;
    }
    .ie7 input.action {
        width: 0;                     /* IE table-cell margin fix */
        overflow: visible;
    }
    input.action[class] {             /* IE ignores [class] */
        width: auto;                  /* cancel margin fix for other browsers */
    }

    .ie7 .Actions .action {
        float: left;
    }
    .Actions:after {
        color: #B94A48;
        content: "* Indicates a required field";
        display: inline-block;
        font-weight: normal;
        margin-top: 9px;
    }
    #MemberLoginForm_LoginForm .Actions:after {
        display: none;
    }


/* AREA SPECIFIC */
    /* LOGIN and FORGOT PASSWORD */
    #Remember {
        min-height: 20px;
    }
	
	#MemberLoginForm_LoginForm #Remember {margin:0.5em 0 !important;}
	#ExternalLoginForm_LoginForm #Remember {margin:0.5em 0 !important;}
	#MemberLoginForm_LoginForm .Actions {padding-left:0 !important;}
	
    #ForgotPassword {
        clear: left;
    }
    #MemberLoginForm_LostPasswordForm .Actions:after {
        display: none;
    }

    /* Search / Login */
    .header form .middleColumn {
        /* float: none;
        width: 100% !important; */
    }




/* USER DEFINED USER FORM MODULE STYLES
----------------------------------------------- */

/*Generic and mixed*/
.FormHeading {
    clear: both;
    padding-top: 15px;
}
form .date .middleColumn input {
    /*background: transparent url(../images/icons/your_icon_here.png) no-repeat scroll 90px 5px;*/
    width: 114px;
}
.Actions input.resetformaction {                  /* Clear button */
    float: left;
    background-color: #888;
}
.Actions input.resetformaction:hover {            /* Clear button */
    background-color: #aaa;
}

/* Labels */
.checkbox label.right {
    font-size: 13px;                            /* reset to default */
    color: #333;                                /* reset to default */
}
form .requiredField label.left:after {
    color: #B94A48;
    content: "*";
    font-size: 14px;
    font-weight: normal;
    padding-left: 3px;
}

/* Radio / Checkbox */
form .checkboxset ul,
form .optionset ul {
    margin: 0;
	clear:left;
}
    form .checkboxset li,
    form .optionset li {
        margin-bottom: 5px;
        list-style-type:none;
    }
    form div.checkbox:after { 
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    form .checkbox .checkbox { clear: both; }

/* Messages */
span.message {
    margin: 10px 0;
    display: block;
    max-width: 390px;
    clear: left;
}
div.holder-required {               /* This class needs to be changed - is used for both input and div */
    /* background-color: #f9d0d0;
    border: 1px solid #cf0000;
    padding: 10px;
    margin-left: -11px; */
}
form input.holder-required {        /* This class needs to be changed - is used for both input and div */
    border: 1px solid #cf0000; 
}

/* Error messages */
input:invalid,
textarea:invalid {
    border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red;
    -webkit-box-shadow: 0px 0px 5px red;
    box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid {
    background-color: #f0dddd
}

/* To test - potentially not needed? */
.ss-uploadfield-item-info button{
    margin-top: 4px !important;
    float: left;
}
form .creditCardField input,
form input.currency,
form input.numeric {
    width: 50px;
}
form #DMYDate-month,
form #DMYDate-day {
    width: 25px
}




/* Responsive form styles
----------------------------------------------- */

@media only screen and (max-width: 900px) { 
    form {
        max-width: 100%;
    }
}

@media only screen and (max-width: 768px) { 
	.switcher-box form input.text, .switcher-box form select, .switcher-box form .radio-section {margin-bottom:7px;}
	
}

@media only screen and (max-width: 713px) { 
	.third-box {width:47%;}
	
}


@media only screen and (max-width: 700px) { 

    /* To test - potentially not needed? */
	.header form .middleColumn {
	    float: none;
	    width: 100% !important;
	}
	form label.left,
	#MemberLoginForm_LoginForm label {
	    margin-bottom: 8px
	}
}

@media screen and (max-width: 640px) {
	.fourth-box {width:46.5%;}
}


@media screen and (max-width: 440px) {
	.third-box, .fourth-box, .full-box {width:100%; display:block;}
	div.field.third-box, div.field.fourth-box, div.field.full-box {margin:0 0%;}
}