/*
forms.css - bootstrap overrides
Used for intrinsic form elements including all inputs, checkboxes, 
select, textarea, form-specific error messages, etc.
*/

/*  
    ALL FORM ELEMENTS MUST BE WITHIN A div.formGroup per Bootstrap Design Pattern
    the below override the default Bootstrap theme and implements Elsevier Rebrand Theme
*/
.form-group,
.formGroup,
.formControls {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 0;
}
fieldset {
    margin: 1rem 0 3rem 0;
}
legend {
    border: 0;
    color: #505050;
    display: block;
    font-size: 1.25rem;
    line-height: inherit;
    margin: 1rem 0;
    padding: 0;
    width: 100%;
}
label {
    font-weight: normal;
    margin: 0;
}
/*
    INPUT TEXT FIELDS AND LABELS - add these classes to the label and input fields for the text fields
*/
.inputTextLabel,
.textAreaLabel,
.inputField,
.textAreaField {
    font-size: 1.25rem;
}
.formSmall .inputLabel,
.formSmall .inputField,
.formSmall .textAreaField {
    font-size: 1rem;
}
.inputTextLabel,
.textAreaLabel {
	background: transparent;
    bottom: .5rem;
    color: #007398;
    cursor: pointer;
    display: block;
    font-weight: normal;
    left: 0;
    margin: 0;
    position: absolute;
    transition: top 0.2s ease, font-size .2s ease;
    width: 100%; 
    -webkit-transition: top 0.2s ease, font-size .2s ease;
/*      z-index: -1; */  
}
.textAreaLabel {
    line-height: 2rem; /*   textareas are formatted different within browsers so we need to add an additional 1rem on the line-height   */
}
.plainLabel {
    display: inline-block;
    font-weight: normal;
    max-width: 100%;
    margin-bottom: 5px;
}
label.threeQuarterWidth {
	width: 75%;
}
label.halfWidth {
	width: 50%;
}
label.quarterWidth {
	width: 25%;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
textarea {
    background: #fff;
    border: none;
    border-bottom: 0.125rem solid #dcdcdc;
    border-radius: 0;
    color: #000;
    display: inline-block;
    font-size: 1.25rem;
	line-height: inherit;
    outline: none; /*   we can turn off the outline that chrome shows and since we are using color and transitions, it will pass accessibility  */
    padding: 0;
    transition: border-bottom 0.3s ease;
    width: 100%;
    -webkit-transition: border-bottom 0.3s ease;
}
input[type="text"],
input[type="password"],
input[type="email"] {
	height: 2rem;
	padding: 0 2rem 0 0; /*	we need to set the right padding to account for the "clear button" being used within the input text, password and email - I am not sure if we need to implement for textarea?? */
}
input[type="text"].input-sm,
input[type="password"].input-sm,
input[type="email"].input-sm,
input[type="date"].input-sm {
    font-size: 1rem;
}
input:focus,
input:hover,
textarea:focus,
textarea:hover {
    border-color: #505050;
}
input.threeQuarterWidth {
	width: 75%;
}
input.halfWidth {
	width: 50%;
}
input.quarterWidth {
	width: 25%;
}
/*
    this is ONLY for an extra note within the input type=text field
*/
.labelNote { /* normal input label note */
    color: #505050;
    font-size: .8rem;
    font-style: italic;
    position: absolute;
    right: 1rem;
}
.labelNote.hasBtn {
    right: 3rem;
}
.formGroup .labelNote { /*  input label inside input with a search button inside it */
    right: 3rem;
}
.help-block {   /*  override bootstrap default  */
    color: #505050;
    font-size: .8rem;
    font-style: italic;
    margin: .5rem 0;
}
.requiredField {
    color: #c83727;
}
/*  FOCUS, HOVER AND ACTIVE STATE RULES FOR TEXT INPUTS AND TEXTAREAS   */
.inputTextField:focus,
.inputTextField:hover,
.textAreaField:focus,
.textAreaField:hover {
    border-bottom: 0.125rem solid #505050;
    outline: none;
}
.searchInput .inputTextField:focus,
.searchInput .inputTextField:hover {
    border-bottom: 0.125rem solid #e9711c;
    outline: none;
}
/*
*   FORM TEXT INPUT ERROR RULES
*/
.has-error .inputTextField,
.has-error .textAreaField {
    border-bottom: 0.125rem solid #C83727;
}
.has-error .inputTextField:focus,
.has-error .inputTextField:hover,
.has-error .textAreaField:focus,
.has-error .textAreaField:hover {
    border-bottom: 0.125rem solid #C83727;
}
.errorNote {
    color: #C83727;
    display: block;
    font-size: 1rem;
    margin: 0 0 1rem 0;
}
/*  RULESET FOR ADDING SEARCH BUTTON WITHIN AN INPUT TEXT FIELD     */
.formControls > button {
    position: absolute;
    right: 0;
    bottom: .2rem;
    text-align: center;
}
/*
    ACTIVE STATE OF INPUT TEXT AND TEXT AREAS FIELDS - THIS CHANGES THE HEIGHT AND FONT SIZES  
*/
.activeTextArea {
    height: 5rem;
}
.activeFormGroupTextArea {
    height: 8rem;
    margin-top: 1rem;
}
.activeTextAreaLabel {
    font-size: 1rem;
    top: -1rem; /* matches the top margin of the inactive textarea */
}
.activeInputLabel {
    font-size: 1rem;
    top: -1rem;
}
.activeInputLabel img {
    height: auto;
    width: 1rem;
}
.activeInputField,
.activeFormGroupTextArea {
    z-index: 10001;
}
/*
*   AUTOCOMPLETE SEARCH
*/
.searchInput.activeFormGroup {
    background-color: rgba(220, 220, 220, 0.5);
    z-index: 1;
}
.autocomplete-input.text-input-active .autocomplete-block {
    border: 1rem solid rgba(220, 220, 220, 0.5);
    border-top: 0rem solid rgba(220, 220, 220, 0.5);
    box-sizing: content-box;
    display: block;
    height: auto;
    left: 0;
    margin-left: -1rem;
    position: absolute;
    top: 0rem;
    width: 100%;
    z-index: -1;
}
/*
            INPUT CHECKBOXES AND RADIO FIELDS
            Note: The actual checkbox and radio form element is pushed off the display so it is hidden from display.  The reason for this is so we can have a customized look and feel for Elseiver Rebrand Design requirements for the checkboxes and radios.  This solution is still accessible to screen readers!
*/
input[type="radio"] {
	left: auto;
	position: initial;
}
input[type="checkbox"] {
    left:  -999999px;
    position: absolute;
}
input[type="checkbox"]:hover,
input[type="radio"]:focus {
	border-bottom: 2px solid #505050;
	color: #000;
	outline: none;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
	border-bottom: dotted 2px #dcdcdc;
}

label + [type=email] {
	margin-top: 0;
}
/*
            INPUT CHECKBOXES AND RADIOS
            --  LABELS  --
            The :after and :before help create the "faux" checkbox and radio button so we can style it to meet the Elsevier Rebrand Design.  The :after is for implementing the solid
            orange squary (checked) state and the :before is for implementing the square border on the checkboxes and the rounded border for the radios
*/
label.checkbox-label,
label.radio-label {
	cursor: pointer;
	font-size: 1rem;
	font-weight: normal;
    margin: 0 1rem 0 0;
    padding: 0 0 0 2rem;
	position: relative;
}
label.checkbox-label,
label.radio-label,
label.checkbox-label:after,
label.radio-label:after,
label.checkbox-label:before,
label.radio-label:before {
    display: inline-block;
}
label.checkbox-label:after,
label.radio-label:after,
label.checkbox-label:before,
label.radio-label:before {
    content: "";
    margin-right: 10px;
    position: absolute;
    transition: background-color .3s ease;
}    
label.checkbox-label:after,
label.radio-label:after {
	background-color: transparent;
    height: 10px;
    left: 5px;
	top: 5px;
    width: 10px;
}
label.checkbox-label:before,
label.radio-label:before {
    border: 2px solid #b9b9b9;
    height: 20px;
    left: 0;
    top: 0;
    width: 20px;
}
label.checkbox-label:before {
	background-color :#fff;
}
label.radio-label {
	transition: .2s opacity ease;
}
label.radio-label:after,
label.radio-label:before {
    border-radius: 50%; /*  CREATES THE ROUNDED BORDER LOOK */
}
label.radio-label:before {
	margin-right: 10px;
	transition: .3s border ease;
}             
/*
            HOVER AND FOCUSED STATE FOR ACCESSIBILITY
*/  
label.checkbox-label:hover:before,
input[type=checkbox]:focus + label.checkbox-label:before,
label.radio-label:hover:before,
input[type=radio]:focus + label.radio-label:before {
	border: 2px solid #505050;
}
/*
            CHECKED STATE
*/
input[type=checkbox]:checked + label.checkbox-label:after, 
input[type=radio]:checked + label.radio-label:after {
	background-color: #e9711c;
}
/*
    GLOBAL FORM BUTTONS  
*/
.btn {
    border: 2px solid transparent;
    border-radius: 0;
    box-shadow: none;
    box-sizing: content-box;
    line-height: inherit;
    padding: 0;
    text-shadow: none;
    width: auto;
    -webkit-transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.btn.text-left {
    text-align: left;
}
.btn.text-right {
    text-align: right;
}
/*  GLOBAL BUTTON SIZES    */
.btn {
    font-size: 1.25rem;
}
.btn-lg {
    font-size: 1.50rem;
}
.btn-md {
    font-size: 1.25rem;
}
.btn-sm {
    font-size: 1rem;
}
/*  GLOBAL BUTTON STATES/COLORS/TYPES  */
.btn-primary,
.btn-secondary,
.btn-dropdown,
.btn-link {
    padding: .25rem .50rem;
}
.btn-secondary,
.btn-dropdown,
.btn-link {
    color: #505050;
}
.btn-sm {
    color: #007398;  /* customized button link to be blue just like a link */
/*     #505050; */
}
.btn-primary {
    background: #007398;
    background-image: none;
    border-color: #007398;
    box-shadow: none;
    color: #fff;
}
.btn-secondary {
    background: #fff;
    background-image: none;
    border-color: #007398;
    box-shadow: none;
    color: #007398;    
}
.btn-secondary-grey {
    background: #fff;
    background-image: none;
    border-color: #898989;
    box-shadow: none;    
    color: #898989;
}
.btn-dropdown {
    background: transparent;
    background-image: none;
    border-color: #898989;
    box-shadow: none;
    color: #898989;
}
/*  GLOBAL BUTTON FOCUS AND HOVER RULES    */
.btn-primary:focus,
.btn-primary:hover,
.btn-secondary:focus,
.btn-secondary:hover,
.btn-dropdown:focus,
.btn-dropdown:hover,
.btn-primary.btn-alt:focus span[class ^="ico-"],
.btn-primary.btn-alt:hover span[class ^="ico-"], 
.btn-secondary.btn-alt:focus span[class ^="ico-"],
.btn-secondary.btn-alt:hover span[class ^="ico-"],
.btn-dropdown.btn-alt:focus span[class ^="ico-"],
.btn-dropdown.btn-alt:hover span[class ^="ico-"],
.btn-primary.btn-alt .btnText:focus,
.btn-primary.btn-alt .btnText:hover,
.btn-secondary.btn-alt .btnText:focus,
.btn-secondary.btn-alt .btnText:hover,
.btn-dropdown.btn-alt .btnText:focus,
.btn-dropdown.btn-alt .btnText:hover,
.btn-link:focus,
.btn-link:hover,
.btn-link:focus .btnText,
.btn-link:hover .btnText, 
.btn-secondary:focus .icon,
.btn-secondary:hover .icon,
.btn-dropdown:focus .icon,
.btn-dropdown:hover .icon {
    outline: none;
}
.btn-primary:focus,
.btn-primary:hover,
.btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary-grey:focus,
.btn-secondary-grey:hover,
.btn-dropdown:focus,
.btn-dropdown:hover,
.btn-primary.btn-alt:focus span[class ^="ico-"],
.btn-primary.btn-alt:hover span[class ^="ico-"], 
.btn-secondary.btn-alt:focus span[class ^="ico-"],
.btn-secondary.btn-alt:hover span[class ^="ico-"],
.btn-dropdown.btn-alt:focus span[class ^="ico-"],
.btn-dropdown.btn-alt:hover span[class ^="ico-"] {
    background: #e9711c;
    border-color: #e9711c;
    color: #fff;
    cursor: pointer;
}
/*  alternative link specific   */
.btn-primary.btn-alt:focus .btnText,
.btn-primary.btn-alt:hover .btnText,
.btn-secondary.btn-alt:focus .btnText,
.btn-secondary.btn-alt:hover .btnText,
.btn-dropdown.btn-alt:focus .btnText,
.btn-dropdown.btn-alt:hover .btnText {
    color: #e9711c;
    cursor: pointer; 
}

/*  btn-link focus and hover    */
input[type=text]:focus+.btn-link,
input[type-=text]:hover+.btn-link,
.btn-link:focus,
.btn-link:hover,
.btn-link:focus .icon-after,
.btn-link:hover .icon-after,
.btn-link:focus .verticalAlign,
.btn-link:hover .verticalAlign,
.btn-link:focus .blueText,
.btn-link:hover .blueText,
.btn-link:focus span[class ^= "ico-"],
.btn-lin:hover span[class ^= "ico-"] {
    background: none;
    color: #e9711c;
    cursor: pointer;
    outline: none; /*   we set this due to the btn-link can be used on an anchor element    */
    text-decoration: none;
    
}
.btn-link:focus .btnText,/*  For the "btn-link", ONLY the text has a border-bottom and NOT the icon as well  */
.btn-link:hover .btnText {
    text-decoration: underline;
    /*border-bottom: 2px solid #e9711c;*/
}
/*  GLOBAL DISABLED STATES  */
.btn-primary:disabled,
.btn-primary:focus:disabled,
.btn-primary:hover:disabled,
.btn-secondary:disabled,
.btn-secondary:disabled .icon,
.btn-secondary:focus:disabled,
.btn-secondary:hover:disabled,
input[type="button"]:disabled {
    background: #dcdcdc;
    border-color: #dcdcdc;
    color: #fff;
    cursor: not-allowed;
    opacity: 1;
}
/*  btn-dropdown disabled ONLY  */
.btn-dropdown:disabled {
    background: transparent;
    border-color: #dcdcdc;
    color: #dcdcdc;
    cursor: not-allowed;
    opacity: 1;
}
.btn-dropdown:focus:disabled,
.btn-dropdown:hover:disabled {
    background: #dcdcdc;
    color: #fff;
}
/*  alternative and btn-link button disabled    */
.btn-primary.btn-alt:disabled,
.btn-secondary.btn-alt:disabled,
.btn-dropdown.btn-alt:disabled,
.btn-link:disabled,
input[type="button"]:disabled,
#outlineButton:disabled,
.btn-primary.btn-alt:disabled span[class ^="ico-"],
.btn-secondary.btn-alt:disabled span[class ^="ico-"],
.btn-dropdown.btn-alt:disabled span[class ^="ico-"],
.btn-link:disabled span[class ^="ico"],
.btn-primary.btn-alt:disabled:focus,
.btn-primary.btn-alt:disabled:hover,
.btn-secondary.btn-alt:disabled:focus,
.btn-secondary.btn-alt:disabled:hover,
.btn-dropdown.btn-alt:disabled:focus,
.btn-dropdown.btn-alt:disabled:hover,
.btn-link:disabled:focus,
.btn-link:disabled:hover,
.btn-primary.btn-alt:disabled:focus .btnText,
.btn-primary.btn-alt:disabled:hover .btnText,
.btn-secondary.btn-alt:disabled:focus .btnText,
.btn-secondary.btn-alt:disabled:hover .btnText,
.btn-dropdown.btn-alt:disabled:focus .btnText,
.btn-dropdown.btn-alt:disabled:hover .btnText,
.btn-link:disabled:focus .btnText,
.btn-link:disabled:hover .btnText,
.btn-primary.btn-alt:disabled:focus span[class ^="ico-"],
.btn-primary.btn-alt:disabled:hover span[class ^="ico-"],
.btn-secondary.btn-alt:disabled:focus span[class ^="ico-"],
.btn-secondary.btn-alt:disabled:hover span[class ^="ico-"],
.btn-dropdown.btn-alt:disabled:focus span[class ^="ico-"],
.btn-dropdown.btn-alt:disabled:hover span[class ^="ico-"],
.btn-link:disabled:focus span[class ^="ico-"], 
.btn-link:disabled:hover span[class ^="ico-"],
input[type="button"]:disabled:focus,
input[type="button"]:disabled:hover,
#outlineButton:disabled:focus,
#outlineButton:disabled:hover { 
    background: none;
    border-color: #dcdcdc;
    color: #dcdcdc;
    cursor: not-allowed;
    opacity: .9;
    outline: none;
}
/*  btn-link specific only  */
.btn-link:disabled,
.btn-link:disabled:focus .btnText, 
.btn-link:disabled:hover .btnText,
input[type="button"]:disabled,
input[type="button"]:disabled:focus,
input[type="button"]:disabled:hover,
#outlineButton:disabled,
#outlineButton:disabled:focus,
#outlineButton:disabled:hover {
    border: none;
}
.btn-primary.btn-alt:disabled span[class ^="ico-"],
.btn-secondary.btn-alt:disabled span[class ^="ico-"],
.btn-primary.btn-alt:disabled:focus span[class ^="ico-"],
.btn-primary.btn-alt:disabled:hover span[class ^="ico-"],
.btn-secondary.btn-alt:disabled:focus span[class ^="ico-"],
.btn-secondary.btn-alt:disabled:hover span[class ^="ico-"] { 
    background: #dcdcdc;
    border-color: #dcdcdc;
    color: #fff;
}
/*  icon only buttons disabled ONLY  */
.btn-dropdown.btn-icon:disabled span[class ^="ico-"] {
    color: #dcdcdc;
}
.btn-secondary.btn-icon:disabled span[class ^="ico-"],
.btn-secondary.btn-icon:focus span[class ^="ico-"],
.btn-secondary.btn-icon:hover span[class ^="ico-"],
.btn-dropdown.btn-icon:focus span[class ^="ico-"],
.btn-dropdown.btn-icon:hover span[class ^="ico-"] {
    color: #fff;
}
/*	input type = button disabled	*/

/*  BUTTON TEXT & FONT ICONS AND OTHER ICONS WITHIN BUTTONS (FOR BUTTONS THAT HAVE TEXT AND ICONS WITHIN IT)   */
.btnText {
    display: inline-block;
    float: none;
    vertical-align: middle;
}
.btnText.leftAlign {
    margin: 0 0 0 .5rem; /* icons are by to the left (before) the text   */
}
.btnNoPad { /*  special class to override padding set by other classes if needed    */
    padding: 0;
}
.btnVerticalPad {
    padding: .5rem .75rem;
}
[class ^= "ico-"] {
    display: inline-block;
    float: none;
    text-align: center;
    vertical-align: middle;
}
/*  FONT ICON ONLY BUTTONS  */
.btn.btn-icon,
.btn > span[class^="ico-"] {
    line-height: inherit;
    padding: 0;
}
.btn-icon span[class^="ico-"] {
    display: inline-block;
    margin: 0;
    padding: .5rem;
}
.btn-icon span[class="ico-navigate-right"],
.btn-icon span[class="ico-navigate-left"] {
    padding-right: .75rem;
    padding-left: .75rem;
}
/*  FONT ICON PARTICULAR COLORS */
.btn-secondary.btn-icon span[class ^="ico-"],
.btn-dropdown.btn-icon span[class ^="ico-"] {
    color: #007398;
}
/*  ALTERNATIVE BUTTONS */
.btn-primary.btn-alt,
.btn-secondary.btn-alt,
.btn-dropdown.btn-alt {
    background: none;
    border: none;
    color: #505050;
    position: relative;
}
.btn-primary.btn-alt .btnText,
.btn-secondary.btn-alt .btnText,
.btn-dropdown.btn-alt .btnText,
.btn-primary.btn-alt.btn-lg .btnText,
.btn-secondary.btn-alt.btn-lg .btnText,
.btn-dropdown.btn-alt.btn-lg .btnText,
.btn-primary.btn-alt.btn-md .btnText,
.btn-secondary.btn-alt.btn-md .btnText,
.btn-dropdown.btn-alt.btn-md .btnText,
.btn-primary.btn-alt.btn-sm .btnText,
.btn-secondary.btn-alt.btn-sm .btnText,
.btn-dropdown.btn-alt.btn-sm .btnText {
    display: table-cell;
    padding: 0 .5rem 0 0;
    text-align: right;
}
.btn-primary.btn-alt .btnText.leftAlign,
.btn-secondary.btn-alt .btnText.leftAlign,
.btn-dropdown.btn-alt .btnText.leftAlign,
.btn-primary.btn-alt.btn-lg .btnText.leftAlign,
.btn-secondary.btn-alt.btn-lg .btnText.leftAlign,
.btn-dropdown.btn-alt.btn-lg .btnText.leftAlign,
.btn-primary.btn-alt.btn-md .btnText.leftAlign,
.btn-secondary.btn-alt.btn-md .btnText.leftAlign,
.btn-dropdown.btn-alt.btn-md .btnText.leftAlign,
.btn-primary.btn-alt.btn-sm .btnText.leftAlign,
.btn-secondary.btn-alt.btn-sm .btnText.leftAlign,
.btn-dropdown.btn-alt.btn-sm .btnText.leftAlign {
    display: table-cell;
    padding: 0 0 0 .5rem;
    text-align: left;
}
.btn-primary.btn-alt.btn-lg .btnText,
.btn-secondary.btn-alt.btn-lg .btnText,
.btn-dropdown.btn-alt.btn-lg .btnText {
/*    height: 2.75rem;*/
}
.btn-primary.btn-alt.btn-md .btnText,
.btn-primary.btn-alt .btnText,
.btn-secondary.btn-alt.btn-md .btnText,
.btn-secondary.btn-alt .btnText,
.btn-dropdown.btn-alt .btnText,
.btn-dropdown.btn-alt.btn-md .btnText {
    /*height: 2rem;*/
}
.btn-primary.btn-alt.btn-sm .btnText,
.btn-secondary.btn-alt.btn-sm .btnText,
.btn-dropdown.btn-alt.btn-sm .btnText {
    /*height: 1.50rem;*/
}
.btn.btn-alt span[class^="ico-"] {
    display: table-cell;
    padding: .5rem;
    vertical-align: middle;
}
.btn.btn-alt span[class^="ico-navigate-right"],
.btn.btn-alt span[class^="ico-navigate-left"] {
    padding-left: .75rem;
    padding-right: .75rem;
}
.btn-primary.btn-alt span[class ^="ico-"] {
    background: #007398;
    border: .125rem solid #007398;
    color: #fff;
}
.btn-secondary.btn-alt span[class ^="ico-"] {
    border: .125rem solid #007398;
    color: #007398;
}
.btn-dropdown.btn-alt span[class ^="ico-"] {
    border: .125rem solid #898989;
    color: #007398;
}
/*  VERTICAL ICON AND TEXT SPECIFIC   */
.btn-link .verticalAlign {
    display: block;
    color: #007398;
    clear: both;
    text-align: center;
}
.btn-link .btnText.verticalAlign {
    padding-top: 0.25rem;
}
/*  miscellaneous form text css rules   */
.formTextInlineBlock {
    display: inline-block;
    margin: 0 1rem;
}
/*
*	INPUT CLEAR BUTTON	*/
/*Removing default clear icon in IE - IE specific hack*/
input::-ms-clear {
    display: none;
}
input[type=text]:focus+.btn-link.clearButton {
	color: #505050;
}
input[type=text]:focus+.clearButton:hover { /*	have to set this since overrides the default button hover due to specificity	*/
	color: #e9711c;
}

/*Removing chrome's default autofill color*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}