﻿/* SHO Web Forms - generic styles 
******************************************************************************/

.webforms {

    background-color: #EBEBEB;
    border: solid #ADADAD thin;
    position: relative;
    padding: 20px 20px;
    width: auto;
    z-index: 100;
}


    .webforms h2.step-title {
        margin: 0 0 15px 0;
        font-size: 1.5em;
    }

        .webforms h2.step-title:empty {
            display:none;
        }

    .webforms h3.subsection {
        margin: 10px 0 10px 0;
        font-size: 1.1em;
    }

.web-form {
}

    .web-form hr,
    .form-buttons hr {
        height: 1px;
        background: #cdcdcd;
        margin: 30px 0;
    }

    .web-form p {
        display: block;
    }

    .web-form a {
        font-weight: bold;
    }

.button {
    font-weight: normal !important;
    padding: 9px 15px 9px 15px;
    border-radius: 4px;
    background-color: #336699;
    border-color: transparent;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    line-height: 1em;
}

.summaryEditButton {
    font-family: Helvetica Neue Thin !important;
    font-weight: normal !important;
    padding: 10px 15px 10px 15px;
    border-radius: 4px;
    background-color: #336699;
    border-color: transparent;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    /*border-bottom: none !important;*/
    line-height: 1em;
}

    .summaryEditButton:hover {
        background-color: #5c85ad !important;
        color: #FFF !important;
    }
/*.button[type=submit] {
        background-color: #CC3333 !important;
    }*/

.button[type=submit]:hover {
    background-color: #5c85ad !important;
}

.button:disabled {
    background: #a5a2a2;
    color: #cdcaca;
}

    .button:disabled:hover {
        background: #a5a2a2 !important;
        color: #cdcaca !important;
        cursor: default !important;
    }

.button:hover {
    background-color: #868787 !important;
    color: #FFF !important;
}

.button100 {
    min-width: 100px;
}

.web-form .button {
}

    .web-form .button:hover {
        /*background-color:#CC3333;*/
    }

.web-form .button-disabled {
    opacity: 0.5;
    cursor: default;
}

.web-form .article {
    float: none;
}

.form-element {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 0 0 5px 0;
    -ms-zoom: 1;
    zoom: 1;
}

    .form-element:after {
        display: table;
        clear: both;
        content: "";
    }

    .form-element label,
    .form-element .label {
        display: block;
        width: 420px;
        padding: 0 0 10px 0;
        font-size: 1em;
        font-weight: bold;
        line-height: normal;
    }

    .form-element.inline-element label,
    .form-element.inline-element .controls {
        display: inline-block;
        vertical-align: top;
        float: none;
    }

    .form-element.inline-element label {
        width: 250px;
    }

.form-element-disabled label,
.form-element-disabled .label {
    color: #89898c;
}

.form-element .controls {
	position: relative;
    display: inline-block;
    vertical-align: top;
	padding-right: 30px;
}

    .form-element .controls .dropdown {
        width: 200px;
    }

    .form-element .controls .text {
        width: 350px;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
    }

.no-javascript .conhelp_tip {
    display: none;
}

.form-element .conhelp_tip {
    float: none;
    display:inline-block;
    vertical-align:top;
    margin: 8px 0;
}

.form-element .conhelp_text span {
    display: block;
    margin: 0 0 10px 0;
}

    .form-element .conhelp_text span:last-child {
        margin: 0;
    }

.no-javascript .conhelp_definition {
    position: relative;
    float: left;
    display: block;
    width: auto;
    margin: 10px 0 0 0;
    padding: 8px 8px 8px 35px;
    background-image: url("/Contents/Images/tooltip/icon-question.png");
    background-repeat: no-repeat;
    background-size: 10px 12px;
    background-color: #4f4f4f;
    border: none;
    clear: both;
    border-radius: 7px;
}

    .no-javascript .conhelp_definition:hover {
        /*background-color:#CC3333;*/
    }

    .no-javascript .conhelp_definition .conhelp_arrow {
        position: absolute;
        top: -14px;
        left: 5px;
        height: 0;
        width: 0;
        /*border: solid 8px #007a91;
    border-color: transparent transparent #007a91 transparent;*/
        font-size: 0;
        line-height: 0;
    }

.no-javascript .conhelp_heading {
    display: block;
    padding: 0;
    font-weight: bold;
    color: #fff;
}

.no-javascript .conhelp_text {
    color: #fff;
}

.form-element .text {
    float: left;
    display: block;
}

select::-ms-expand {
    display: none;
}

hr {
    border-style: none;
}

.form-element .textbox,
.form-element .textarea,
.form-element .combobox {
    float: left;
    width: 190px;
    padding: 10px 15px;
    border: solid 1px #666;
}

.web-form .textbox,
.web-form .textarea,
.web-form .combobox,
.web-form .dropdown {
    padding: 11px 5px 10px 5px;
    border: 1px solid #000;
    border-radius: 4px;
}

.form-element .combobox {
    width: 206px;
    background: #FFF url("/~/media/Image-Libraries/USS/dropdown-bg.png") no-repeat right;
    -webkit-appearance: none;
    padding: 11px 38px 10px 5px;
    -moz-appearance: none;
}

    .form-element .combobox.auto-width {
        width: auto;
    }

    .form-element .textbox:disabled,
    .form-element .textarea:disabled,
    .form-element .combobox:disabled {
        background: #e5e5e5;
        border: solid 1px #ccc;
        color: #999;
    }

.form-element .textarea {
    width: 370px;
    height: 150px;
}

.form-element .combobox-hour {
    width: 53px;
    margin: 0 5px 0 0;
}

.form-element .combobox-minute {
    width: 62px;
    margin: 0 5px 0 0;
}

.form-element .date-textbox {
    /*padding: 3px 25px 3px 5px;*/
}

.form-element .calendar-icon {
    position: absolute;
    top: 50%;
    right: 43px;
    display: block;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 0;
    background: no-repeat url(/Contents/Images/calendar.png);
}

.form-element .validation {
    position: relative;
    display: none;
    min-width: 210px;
    max-width: 400px;
    margin: 0 0 0 15px;
    padding: 8px 10px 8px 40px;
    background: #f8e4dc;
    color: #CD2C00;
}

.form-element .validation:before {
	font-family:FontAwesome;
	content:"\f071";
	position: absolute;
    left: 12px;
    top: 10px;
}

    .form-element .validation.password-rules {
        z-index: 10;
        position: absolute;
        width: 180px;
        max-width: 180px;
        left: 400px;
        top: 0;
        background: #e6e6e6;
        color: #000;
        font-weight: normal;
    }

        .form-element .validation.password-rules .validation-arrow {
            border-right-color: #e6e6e6;
        }

        .form-element .validation.password-rules .invalid,
        .form-element .validation.password-rules .valid {
            display: block;
            position: relative;
            padding-left: 18px;
            min-height: 24px;
        }

        .form-element .validation.password-rules .valid {
            color: green;
            background: url(../images/tick-small.png) top left no-repeat;
        }

        .form-element .validation.password-rules .invalid {
            color: #cd2c00;
            background: url(../images/cross-small.png) top left no-repeat;
        }

.form-element .validation-below {
    float: left;
    max-width: 100%;
    margin: 5px 0 0 0;
}

    .form-element .validation-below .validation-arrow {
        position: absolute;
        top: -14px;
        left: 5px;
        width: 0;
        height: 0;
        border: solid 8px #cd2c00;
        border-color: transparent transparent #cd2c00 transparent;
        font-size: 0;
        line-height: 0;
    }

.form-element-textarea .validation {
    width: auto;
    margin: 10px 0 0 155px;
}

    .form-element-textarea .validation .validation-arrow {
        top: -14px;
        left: 6px;
        border-color: transparent transparent #cd2c00 transparent;
    }

.form-element .validation-error {

}   
    

.form-element .messages {
    position: relative;
    float: left;
    display: block;
    margin: 10px 0 0 0;
    padding: 5px 10px 5px 29px;
    background: no-repeat 5px 6px url(/Contents/Images/icons/info16x16.png) #efefef;
    clear: both;
}

    .form-element .messages .message-arrow {
        position: absolute;
        top: -14px;
        left: 6px;
        width: 0;
        height: 0;
        border: solid 7px #efefef;
        border-color: transparent transparent #efefef transparent;
        font-size: 0;
        line-height: 0;
    }

.calculator-error {
    color: #ffffff;
    width: 121px;
    padding: 5px 10px 5px 29px;
    background: no-repeat 5px 6px url(/Contents/Images/icons/warning16x16.png) #cd2c00;
}

.form-element .messages p:last-child,
.form-element .validation p:last-child {
    margin: 0;
}
/* Form Message - Shown at top when there are messages to display ************/

    .form-message p:last-child {
        margin: 0;
    }
/* Session Expired Message - Shown at top when the session expires ************/

.form-message {
    /* height: 59px; */
    min-height: 59px;
    margin: 0 0 30px 0;
    padding: 15px 15px 15px 89px;
    font-size: 1.4em;
    color: #000;
}

.session-expired-message,
.validation-message ,
.form-message{
    background: #FFF;
    font-weight: bold;
    position: relative;
	color: #336699;
}

    .session-expired-message:before,
    .validation-message:before,
	.form-message:before{
        font-family: FontAwesome;
        content: "\f06a";
        position: absolute;
        left: 10px;
        color: #336699;
        font-size: 68px;
        top: 10px;
    }
/* Unique element changes ************/

.form-captcha .controls {
    width: 100%;
}

.form-captcha label {
    display: none;
}

.form-captcha .controls label {
    display: block;
}
/* Invalid state changes *************/

.form-element-invalid label,
.form-element-invalid .label {
    font-weight: bold;
    color: #CD2C00;
}

.form-element-invalid .textbox,
.form-element-invalid .combobox {
    border: solid 1px #CD2C00;
}

.form-element-invalid .validation {
    display: inline-block !important;
}

.form-element-invalid .validation-message {
    display: none !important;
}
/* Valid state changes *************/

.form-element-valid .textbox,
.form-element-valid .combobox {
    border: solid 1px #94CE09;
}
/* Valid/Invalid icons ************/

/* f00c */

.form-element.form-captcha .captcha-controls:after,
.form-element .controls:after {
    display: none;
    position: absolute;
    right: 0px;
    top: 8px;
    width: 22px;
    height: 22px;
	font-family:fontAwesome;	
}

.form-element.form-captcha .controls:after {
    display: none !important;
}

.form-element-valid .controls:after {
    content: '\f00c';
	display:inline-block;
	color:#8dc63f;
}

.form-element-invalid .controls:after {
    content:"\f00d";
	display:inline-block;
	color:#CD2C00;
}


.form-element.checkBox label{
	display: inline-block;
    width: auto;
    padding-left: 30px;
	padding-top: 12px;
}

.form-element.checkBox .controls{
	position: absolute;
    left: 0;
	top: 12px;
}

.form-element.checkBox.form-element-invalid .controls:after{
	display:none;
}

.form-element.confirmation-checkbox {
}

.form-element.confirmation-checkbox .controls{
	position: absolute;
    left: 0;
    top: 4px;
}

.form-element.confirmation-checkbox .label {
    display: inline-block;
    padding-left: 30px;
	padding-top: 8px;
}

/* Repeating component
******************************************************************************/

.webform-component {
    display: block;
    margin: 0 0 20px 0;
}

    .webform-component .no-results {
        display: block;
        padding-bottom: 10px;
    }

.completed-items {
    display: block;
}

    .completed-items .repeating-item-result {
        position: relative;
        display: block;
        border-bottom: solid 1px #666666;
        padding: 0 0 10px 0;
        /*margin: 0 10px 10px 10px;*/
    }

        .completed-items .repeating-item-result:last-of-type {
            border-bottom: none;
        }

        .completed-items .repeating-item-result .result-buttons {
            position: absolute;
            top: 10px;
            right: 10px;
        }

            .completed-items .repeating-item-result .result-buttons .button {
                margin: 0 0 0 5px;
            }

.component-form {
    display: block;
    padding: 20px 0 0 0;
}

    .component-form .form-element {
        margin: 0 0 10px 0;
    }

.component-buttons {
    display: block;
}

    .component-buttons .button {
        margin: 0 10px 0 0;
        padding: 8px 25px;
        border-radius: 4px;
        border-width: 1px;
    }

    .component-buttons .button-add {
        padding: 8px 25px 8px 35px;
        background-image: url(/Contents/Images/webforms/icon-plus.png);
        background-repeat: no-repeat;
        background-position: 5px center;
    }
/* Summary page
******************************************************************************/

.web-form-summary {
    position: relative;
    padding: 0 80px 0 0;
}

    .web-form-summary .edit-button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1000;
    }

.summary-confirmation {
    padding: 1px 20px;
    background: #f4f4f4;
}

    .summary-confirmation .form-element label {
        width: auto;
        width: 420px;
        margin: 0;
        color: #000;
    }

    .summary-confirmation .form-element .controls {
        width: 30px;
        margin: 4px 0 0 0;
    }
/* Form Buttons
******************************************************************************/

.form-buttons,
.form-links {
    padding: 20px 0 0;
    text-align: center;
	position:relative;
}

    .form-buttons hr {
        margin: 0 0 20px 0;
		color:#CACACA;
    }

    .form-buttons p {
        margin: 0;
    }

    .form-buttons .left-buttons,
    .form-buttons .right-buttons {
        position:absolute;
		left:0;
        min-height: 30px;
    }

    .form-buttons .right-buttons {
        right:0px;
		left:auto;
    }

    .form-buttons .button {
        padding: 8px 25px;
        border-radius: 4px;
        border-width: 1px;
        font-weight: bold;
        color: #fff;
    }

        .form-buttons .button.disabled,
        .report-action .button.disabled,
        .LoginStep .button.disabled {
            opacity: 0.5;
            cursor: default;
            background: #ccc;
        }

            .form-buttons .button.disabled:hover {
                cursor: default;
            }

        .form-buttons .button:hover {
            /*background-color:#CC3333;*/
        }

    .form-buttons .button-disabled {
        cursor: default;
        opacity: 0.5;
    }

    .form-buttons .previous-button,
    .form-buttons .back-button {
        float: left;
    }

    .form-buttons .next-button {
        float: left;
        /*background-color:#CC3333;*/
    }

    .form-buttons .print-button {
        float: right;
    }

    .form-buttons .no-js-print-button {
        color: white;
        float: right;
    }

    .form-buttons .hidden {
        display: none;
    }
/* Captcha 
******************************************************************************/

.captcha {
    float: left;
    /*background: #f4f4f4;*/
} 

    .captcha .captcha-image {
        float: left;
        display: block;
        width: 200px;
        height: 60px;
        margin: 0 0 10px 0;
    }

    .captcha .captcha-buttons {
        float: left;
        display: block;
        width: 24px;
        margin: 0 0 0 5px;
    }

    .captcha .refresh,
    .captcha .audio {
        background-color: #c79633;
    }

        .captcha .refresh:hover,
        .captcha .audio:hover {
            background-color: #CC3333;
        }

    .captcha .captcha-controls {
        display: block;
        clear: both;
    }

    .captcha label {
        width: 140px;
        line-height: 24px;
    }

    .captcha .textbox {
        width: 90px;
        text-transform: uppercase;
    }

    .captcha .captcha-overlay {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        background: url(/contents/images/backgrounds/1x1-black-40-opacity.png);
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
    }

        .captcha .captcha-overlay .player {
            display: block;
            width: 200px;
            height: 60px;
        }

        .captcha .captcha-overlay .player-controls {
            position: absolute;
            top: 10px;
            left: 10px;
            display: block;
            width: 180px;
            height: 40px;
        }

        .captcha .captcha-overlay .control-close {
            color: #fff;
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            cursor: pointer;
            font-size: 0.8em;
        }
        
        .captcha .captcha-overlay .control-play,
        .captcha .captcha-overlay .control-pause {
            display: block;
            width: 22px;
            height: 22px;
            background: no-repeat url(/contents/images/webforms/audio-captcha-buttons.png);
            text-indent: -1000px;
        }

        .captcha .captcha-overlay .control-play {
            display: block;
            cursor: pointer;
        }

            .captcha .captcha-overlay .control-play:hover {
                background-position: 0 -22px;
            }

        .captcha .captcha-overlay .control-pause {
            display: block;
            background-position: -22px 0;
            cursor: pointer;
        }

            .captcha .captcha-overlay .control-pause:hover {
                background-position: -22px -22px;
            }

        .captcha .captcha-overlay .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            /*display: block;*/
            display: none;
            width: 178px;
            height: 10px;
            border: solid 1px #003f72;
        }

            .captcha .captcha-overlay .progress-bar .seek-bar {
                display: block;
                width: 100% !important;
                height: 100%;
                /*background: #bd439b;*/
            }

            .captcha .captcha-overlay .progress-bar .play-bar {
                display: block;
                height: 100%;
                /*background: #94ce08;*/
            }

    .captcha .validation-message {
        position: relative;
        display: none;
        margin: 10px 0 0 0;
        padding: 5px 10px;
        background: #c00;
        font-weight: bold;
        color: #fff;
    }

        .captcha .validation-message .validation-arrow {
            position: absolute;
            top: -6px;
            left: 135px;
            width: 12px;
            height: 6px;
            background: no-repeat url(/Contents/Images/arrow-validation-up.png);
        }
/* Invalid state changes ***************/

.captcha-invalid .captcha-controls {
    color: #ce481e;
}

.captcha-invalid .textbox {
    border: solid 1px #ce481e;
}

.captcha-invalid .validation-message {
    display: block;
}

/* Checkbox List
   Author: JH
********************************************************************/

.form-element-checkbox-list {
}

    .form-element-checkbox-list .label {
        float: none;
        width: auto;
    }

    .form-element-checkbox-list .controls {
        float: none;
        width: auto;
    }
/* Checkbox List */

.checkbox-list {
    display: block;
    padding: 10px 0;
}

.checkbox-list-row {
    display: block;
    clear: both;
}

.checkbox-list-item {
    float: left;
    position: relative;
    display: block;
    width: 49%;
    margin: 0 0 10px 0;
}

    .checkbox-list-item label {
        float: none;
        width: auto;
        padding: 0 50px 0 0;
    }

    .checkbox-list-item .checkbox {
        position: absolute;
        top: 3px;
        right: 25px;
    }

.form-element-checkbox-list .validation {
    max-width: 100%;
    margin: 0;
    clear: both;
}

    .form-element-checkbox-list .validation .validation-arrow {
        top: -14px;
        left: 6px;
        border-color: transparent transparent #cd2c00 transparent;
    }

.summary-check-box-list {
}

    .summary-check-box-list .summary-check-box-item {
        display: block;
        margin: 0 0 12px 0;
    }
/* Radio Button */

.form-element.radioButton {
    height: 30px;
}

    .form-element.radioButton .radioButton {
        position: absolute;
        top: 3px;
        left: 0;
    }

    .form-element.radioButton .label {
        position: absolute;
        left: 30px;
    }

    .form-element.radioButton .conhelp_tip {
        position: absolute;
        top: -8px;
        left: 455px;
    }

.form-element.checkBox {
    height: 30px;
}

    .form-element.checkBox .checkBox {
        position: absolute;
        top: 4px;
        left: 0;
    }

    .form-element.checkBox .label {
        left: 30px;
    }

    .form-element.checkBox .conhelp_tip {
        position: absolute;
        top: -8px;
        left: 455px;
    }
/* Data Table 
*******************************************************************/

.web-form .data-table th {
    text-align: left;
}
/* Calendar 
*******************************************************************/

.ui-datepicker {
    display: none;
    padding: 5px;
    background: #fff;
    border: solid 1px #999;
    -moz-box-shadow: 1px 1px 4px #999;
    -webkit-box-shadow: 1px 1px 4px #999;
    box-shadow: 1px 1px 4px #999;
}

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        width: 176px;
        height: 24px;
        padding: 4px 0 0 0;
        background: #666666;
        text-align: center;
    }

        .ui-datepicker .ui-datepicker-header .ui-datepicker-month {
            margin: 0 2px 0 0;
        }

    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 5px;
        display: block;
        width: 17px;
        height: 17px;
        background: no-repeat -18px 0 url(/Contents/Images/calendar.png);
        cursor: pointer;
        overflow: hidden;
        text-indent: -1000px;
    }

    .ui-datepicker .ui-datepicker-prev {
        left: 5px;
    }

        .ui-datepicker .ui-datepicker-prev:hover {
            background-position: -18px -17px;
        }

    .ui-datepicker .ui-datepicker-next {
        right: 5px;
        background-position: -35px 0;
    }

        .ui-datepicker .ui-datepicker-next:hover {
            background-position: -35px -17px;
        }

    .ui-datepicker thead {
        background: #eee;
    }

    .ui-datepicker th {
        font-weight: normal;
    }

    .ui-datepicker th,
    .ui-datepicker td {
        width: 24px;
        height: 24px;
        text-align: center;
    }

    .ui-datepicker td {
        background: #fff;
        border: solid 1px #666666;
        cursor: pointer;
    }

        .ui-datepicker td a:hover {
            text-decoration: none;
        }

        .ui-datepicker td.ui-datepicker-today {
            background: #d65c5c;
            border: solid 1px #666666;
        }

            .ui-datepicker td.ui-datepicker-today a {
                color: #fff;
            }

    .ui-datepicker .ui-datepicker-calendar {
        background: #fff;
    }

    .ui-datepicker td.ui-datepicker-current-day,
    .ui-datepicker td.ui-datepicker-current-day:hover {
        background: #CC3333;
        border: solid 1px #618014;
    }

        .ui-datepicker td.ui-datepicker-current-day a,
        .ui-datepicker td.ui-datepicker-current-day:hover a {
            color: #eee;
        }

    .ui-datepicker td.ui-datepicker-other-month {
        background: #eee;
        border: solid 1px #666666;
    }

        .ui-datepicker td.ui-datepicker-other-month,
        .ui-datepicker td.ui-datepicker-other-month a {
            color: #666;
        }

    .ui-datepicker td.ui-datepicker-unselectable,
    .ui-datepicker td.ui-datepicker-unselectable:hover {
        background: #666666;
        border: solid 1px #666666;
        cursor: default;
    }

        .ui-datepicker td.ui-datepicker-unselectable span,
        .ui-datepicker td.ui-datepicker-unselectable:hover span {
            color: #eee;
        }

    .ui-datepicker td:hover {
        background: #d65c5c;
    }

        .ui-datepicker td:hover a {
            color: #fff;
        }
/**********************************************************************************************/
/* Additional CSS Classes */
/* - These are added in via Sitecore */
/**********************************************************************************************/

.grey-button {
    padding: 0 !important;
    background: #f4f4f4 !important;
    font-weight: bold;
    /*color: #bd439b;*/
}

    .grey-button:hover {
        text-decoration: underline;
    }
/* Repeating Data Div styling */

.repeating-data-div-holder {
    width: 100%;
}

.repeating-data-div-header {
    width: 100%;
    border-bottom: 1px solid #336699;
    display: block;
}

.repeating-data-div-header-item {
    display: inline-block;
    vertical-align: top;
}

.repeating-data-div-datarow {
    width: 100%;
    display: block;
    padding-top: 5px;
}

.repeating-data-div-datarow-item {
    display: inline-block;
    vertical-align: top;
}

    .repeating-data-div-datarow-item .form-element {
        margin: 0;
    }
/* Change Investments - Funds Repeating Data Div */

.repeating-data-div-holder .Change-Investments-FundName {
    width: 300px;
}

.repeating-data-div-holder .Change-Investments-Percentage {
    width: 210px;
}

    .repeating-data-div-holder .Change-Investments-Percentage .controls {
        width: auto;
    }

.repeating-data-div-datarow-item.Change-Investments-FundName {
    padding-top: 10px;
}

.repeating-data-div-header.Change-Investments-Total {
    border: none;
    padding-top: 10px;
}

    .repeating-data-div-header.Change-Investments-Total .Change-Investments-FundName {
        text-align: right;
    }

        .repeating-data-div-header.Change-Investments-Total .Change-Investments-FundName p {
            font-weight: bold;
            padding: 10px;
        }
/**********************************************************************************************/
/* Pages */
/**********************************************************************************************/
/* Login Page */
/**********************************************************************************************/

.loginMiniView .articleContent {
    padding: 0;
    width: 100%;
}

    .loginMiniView .articleContent .web-form {
        width: 85%;
    }

    .loginMiniView .articleContent h2.step-title {
        margin: 0;
    }

.pre-login-inset-box {
    padding: 10px;
    /*background-color: #007A91;*/
    text-align: center;
}

    .pre-login-inset-box .button {
        margin-left: 0;
    }

.articleContent a.pre-login-button-div {
    margin-top: 10px;
    margin-bottom: 10px;
}

.login-reminder-div,
.loggedin-links-div {
    padding: 10px;
}

.loggedin-links-div {
    padding-left: 0;
    padding-right: 0;
}

.login-links-div {
    padding-top: 10px;
}

.login-reminder-div a {
    color: #FFFFFF;
}

.login-page .LoginStepRow p {
    margin: 0;
    line-height: 30px;
}
/* Login Page */
/**********************************************************************************************/

#registrationForm .form-element .validation {
    min-width: 100px;
    max-width: 145px;
    margin: 0 0 0 13px;
}

#registrationForm .form-element label,
#registrationForm .form-element .label {
    width: 187px;
    padding: 0 25px 0 0;
}

/* FANCY DROPDOWNS */

.dropdown-container {
    position: relative;
    display: inline-block;
}

.fancy-dropdown-dropcontainer {
    position: absolute;
    z-index: 1000;
    width: 100%;
}

.dropdown-container + input {
    position: absolute;
    margin-left: 20px;
}

.combobox {
    position: relative;
    font-size: 16px;
    color: #777;
}

.fancy-dropdown-trigger,
.fancy-dropdown-activetrigger {
    background: #FFF;
    display: block;
    padding: 11px 5px 10px 5px;
    border: 1px solid #838487;
    border-radius: 4px;
    border-bottom: 1px solid #838487 !important;
    font-weight: normal !important;
    font-family: Helvetica Neue Thin !important;
}

.searchForm .fancy-dropdown-trigger,
.searchForm .fancy-dropdown-activetrigger {
    color: #818285 !important;
    border: none !important;
    padding: 2px 5px 2px 5px;
    font-size: 0.8em;
}

.fancy-dropdown-trigger:after,
.fancy-dropdown-activetrigger:after {
    font-family: FontAwesome;
    content: "\f078";
    background: #CC3333;
    color: #FFF;
    position: absolute;
    right: 0;
    padding: 11px 11px 12px 11px;
    top: 0;
    border-radius: 0 4px 4px 0;
    border: 1px solid #838487;
}

.searchForm .fancy-dropdown-trigger:after,
.searchForm .fancy-dropdown-activetrigger:after {
    background: #FFF !important;
    color: #838487;
    width: 10px;
    height: 20px;
    padding: 0 8px;
    line-height: 20px;
    text-align: center;
    border: none;
}

.fancy-dropdown-activetrigger:after {
    content: "\f077";
}

.fancy-dropdown-trigger:hover {
    color: #777;
}

.fancy-dropdown-activetrigger {
}

    .fancy-dropdown-activetrigger:hover {
        color: #777;
    }

    .fancy-dropdown-activetrigger:active {
        color: #777;
    }

.fancy-dropdown-dropcontainer ul {
    font-size: 16px;
    border: 1px solid #838487;
    border-top: none;
    background: #EBEBEB;
    list-style-type: none;
    padding: 10px;
    margin: 0;
    width: 100%;
    z-index: 100;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.searchForm .fancy-dropdown-dropcontainer ul {
    background: #FFF;
    position: absolute;
    width: 200px;
    top: 22px;
    left: -5px;
}

.fancy-dropdown-dropcontainer ul li {
    padding: 5px;
}

    .fancy-dropdown-dropcontainer ul li:hover {
        outline: none;
    }
    /*.fancy-dropdown-dropcontainer ul li:first-child {
            display: none;
        }*/

    .fancy-dropdown-dropcontainer ul li:last-child {
        border-bottom: none;
    }

    .fancy-dropdown-dropcontainer ul li a {
        font-weight: normal !important;
        font-family: Helvetica Neue Thin !important;
        border-bottom: none !important;
    }

    .fancy-dropdown-dropcontainer ul li:before {
        display: none !important;
    }

.searchForm .fancy-dropdown-dropcontainer ul li a {
    color: #838487;
    font-size: 0.8em;
}

.fancy-dropdown-hidden {
    display: none;
}

.fancy-dropdown-visible {
    max-height: 200px;
    overflow-y: auto;
}
