.required-field input, .form-group.required-field textarea {border-left:1px solid red}
.required-field label:before {content:' * '; color:red;}

hr {width: 100%; clear: both; display: block}
/* Header 
------------------------
*/
.full-width-header {
	background-color:#f5f5f5;
}
.full-width-header .col-md-8 {padding-right: 10px}

.icon-secure {margin-top: 10px; padding-right: 0}
.privacy-text {padding-left: 2px;}

.breadcrumb {
	margin:10px 0;
	color:#666;
	font-size:12px;
}


/* Radio Button Area
------------------------
*/
h4 {
	margin-bottom:10px;
}

p.small {
	margin-top:0;
	padding-left:22px;
	font-size:90%;
}

#form-select {
	margin-top:34px; padding-right: 35px;
}
#form-select form label {color:#3388c5;}
#form-select form label:hover {color:#317bb0}
#form-select form label.active-Radio-Label {color: black;}
.radio-padding label {
	margin-bottom:10px;
}
.radio-margin-bottom {margin-bottom: 10px}
.cs-reps {display:none; margin-top:40px; text-align: center; /* height: 400px */; }
.cs-reps .col-md-4 {padding: 0}
span.larger {font-size: 16px; font-weight: bold}

#form-select legend {
	font-size: 25px;
    margin: 10px 0;
    letter-spacing: -0.04em;
    font-weight: normal;
    font-family: 'Open Sans', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    color: #000;
    line-height: 125%;
    border-bottom: 0;
    display: block;
    padding-top: 10px;
}

/* Form Area
------------------------
*/

p#show-rma-form {color:#3388c5; cursor: pointer}
p#show-rma-form:hover {color:#317bb0}

/* Hide all forms and have them load in the top left corner to allow for better loading */
#form-instructions, #general-support-form, #technical-support-form, #change-my-order, #request-return, #rma-form, #order-details-form, #success-message, #error-message {
	display:none;
        width:100%;
	position:absolute;
	top:0;
	left: 0px;
}

#form-display {
	margin-top:40px;
}


form.support-form label {
	display:none;
	font-size:12px;
}

form.support-form label.do-not-hide {
	display:block;
	font-size:12px;
}

/* Override Bootstrap styles */
.form-control:focus {
	border-color:inherit;
	-webkit-box-shadow:none;
	box-shadow:none;
}

.mac-model-id span {margin: 5px 0 15px 0; position: relative; float: right; text-align: right; display: block}
/* Intial state of form fields */

.form-group textarea {
    height:100px;
	width:100%;
	color:#999;
	border:1px solid #ccc;
	border-radius:3px;
	padding-left: 10px;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    height:50px;
	box-shadow:none;
	font-size:18px;
}

/* Override focus state */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
	outline:none;
	border-color:#3388c5;
}

.form-group-radios {margin-bottom: 10px;}
.form-group-radios label {float:left; width: 100%}
.form-group-radios label:first-of-type {width: 150px; display: inline-block; float: left}
.icon-info {cursor: pointer; padding-right: 5px; width: 20px;height: auto;}
#crosship-content {display: none; padding: 5px; background-color: #3388c5; color: #fff; letter-spacing: 0.6px; border-radius: 3px}
/* Once keypress within input field the class show-label is added to div */
.show-label {
    height:50px;
    padding:6px 3px 3px 3px;
	border:1px solid #ccc;
	border-radius:3px;
}

.show-label label {
	margin:0;
	margin-left:10px;
}

.show-label input, 
.show-label textarea, .required-field.show-label textarea {
    height:25px;
    margin-top:0;
	font-size:14px;
	font-weight:400;
	border:none;
	outline:none;
	box-shadow:none;
	background-color:transparent;
	line-height: 100%;
}

.show-label input:focus,
.show-label textarea:focus {
	outline:none;
	border-collapse:collapse;
}

.show-label-textarea {
    height:101px;
    padding:3px;
	border:1px solid #ccc;
	border-radius:3px;
}

.show-label-textarea textarea, .show-label-textarea.required-field textarea {
	height:75px;
	padding-left:10px;
	color:#555;
}

/* Once field has focus change up the look of focus to the div and to the input field itself */
.has-focus ::selection {
	background-color:#3388c5;
	border-radius:none;
	display:inline;
}

.has-focus {
	border-color:#3388c5;
}

.has-focus textarea {
	outline:none!important;
	box-shadow: none
}

/*
I signled out the dropdown box to make it easier to mess with.
In scaffolding-wrapper.css we already have a class caledd dropdown-select so be careful and maybe add an other class if these styles are overriding custom select box
*/
.dropdown-select {
    padding:3px;
	width:250px;
	height: 50px;
	border:1px solid #eee;
	border-radius:3px;
}

.dropdown-select select {
    display: block;
    width:220px;
	height: 30px;
    margin-left: 5px;
    font-size:14px;
	color:#555;
	border:none;
	background:url(/Customized_Pages/imgs-wrapper/select-arrow-down-blue.svg) 100%/30px no-repeat #fff;
}



.dropdown-select.has-focus {
	border:1px solid #3388c5;
}

.dropdown-select.has-focus select {
	outline:none;
}

.dropdown-select.show-label label {
	display:block;
	padding-left:0px;
}

/* ERROR MESSAGES */
.input-error, .input-error-radios, .captcha-error {
    margin-bottom:3px;
	border:1px solid red;
	border-radius:3px;
}
.input-error textarea {border: none}

.not-valid-message {margin:5px 0 15px 0;}

.captcha-error {
	width: 304px;
	height: 78px;
}

/* SUCCES */ 
#success-message, #error-message { text-align: center}


/* MISC */
.support-form hr {
	border-top:2px solid #eee;
}

.support-form h4 {
	margin-bottom:10px;
}

button.btn {
	border:none;
}
.btn {cursor: pointer}
/* Change my Order */
p.large {font-size: 18px; font-weight: bold; }
.support-chat {text-align: center}
.support-chat img {width: 50%; height: auto; padding-top: 30px; padding-bottom: 59px}
.support-chat p {color:#3388c5}
.support-chat p span {font-size: 14px; font-weight: normal; color:#999; display: block}
.support-chat:hover p, .support-chat:hover p span{text-decoration: underline; color:#317bb0}
.support-chat:hover p.chat-hours {color: initial; text-decoration: initial;}
.support-phone {text-align: center}