/* M10 global form styles.

   @file        form.css
   @author      marionm
   ========================================================================== */

/* form layout
   ========================================================================== */

.m10-form .form-wrapper {
    box-sizing: border-box;
    width: 1102px;
    margin: 0 auto;
    padding: 50px 50px 100px 50px;
}

.m10-form .form-column-left {
    box-sizing: border-box;
    float: left;
    width: 658px;
    padding: 0 30px 0 0;
}

.m10-form .form-column-right {
    box-sizing: border-box;
    float: left;
    width: 314px;
}

.devel {
    color: #8393ca;
    font-size: 20px;
}

/* page elements
   ========================================================================== */

.m10-form h2,
.m10-form .h2,
.m10-form h3,
.m10-form .h3,
.m10-form p,
.m10-form .p {
    display: block;
    font-weight: 400;
}

.m10-form h2,
.m10-form .h2 {
    margin: 0 0 25px 0;
    color: #dd1100;
    font-size: 45px;
}

.m10-form h3,
.m10-form .h3 {
    margin: 0 0 15px 0;
    color: #dd1100;
    font-size: 20px;
}

.m10-form p,
.m10-form .p {
    margin: 0 0 25px 0;
    color: #535353;
    font-size: 15px;
}

.m10-form small,
.m10-form .small {
    font-size: 12px;
}

.m10-form hr,
.m10-form .hr {
    display: block;
    margin: 20px 0 35px 0;
    border: none;
    border-bottom: 1px solid #b7b7b7;
}

.m10-form .form-table > tbody > tr > td,
.m10-form .form-table > .tr > .td {
    padding: 0 0 25px 15px;
}

.m10-form .form-table > tbody > tr > td:first-child,
.m10-form .form-table > .tr > .td:first-child {
    padding: 0 16px 25px 0;
}

.m10-form .required-wrapper {
    float: right;
    margin: 9px 0 10px 0;
    color: #dd1100;
    font-size: 13px;
}

.m10-form .required {
    margin: 0 3px;
    color: #dd1100;
}

.m10-form .error-msg {
    display: none;
    min-height: 15px;
    margin: 5px 0 0 0;
    padding: 0 0 0 20px;
    background: url('/common/images/m10/form-icon-error.png') no-repeat 0 1px;
    color: #dd1100;
    font-size: 13px;
    font-weight: 600;
}

.m10-form .server-error-msg {
    display: block; /* these are only shown on page load, so don't hide them by default like other errors */
}

.m10-form .phone-table > tbody > tr > td {
    padding: 0 0 0 8px;
}

.m10-form .phone-table > tbody > tr > td:first-child {
    padding: 0 8px 0 0;
}

.m10-form .affiliations .form-table {
    width: auto;
}

.m10-form .affiliations .form-table > tbody > tr > td {
    padding: 0 0 0 35px;
}

.m10-form .affiliations .form-table > tbody > tr > td:first-child {
    padding: 0 35px 0 0;
}

.m10-form .affiliations .form-table label {
    margin: 6px 0 0 0;
    font-size: 13px;
}

.m10-form .affiliations .form-table label.error {
    color: #dd1100;
}

.m10-form .privacy {
    margin: 6px 0 0 0;
    font-size: 13px;
}

/* sidebar
   ========================================================================== */

.m10-form .m10-table.form-sidebar > .tr > .td,
.m10-form .m10-table.form-sidebar > .tr > .td:first-child {
    padding: 0;
}

.m10-form .form-sidebar a:link,
.m10-form .form-sidebar a:visited {
    color: #535353;
    font-weight: 600;
    text-decoration: none;
}

.m10-form .form-sidebar .icon {
    display: block;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    margin: 3px 0 0 0;
    background: url('/common/images/m10/form-sidebar-icons.png') no-repeat;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
}

.m10-form .form-sidebar .r1-c1 { width: 31px; height: 34px; background-position: 0 0; }
.m10-form .form-sidebar .r1-c2 { width: 37px; height: 27px; background-position: -31px 0; }
.m10-form .form-sidebar .r1-c3 { width: 35px; height: 35px; background-position: -68px 0; }
.m10-form .form-sidebar .r1-c4 { width: 28px; height: 25px; background-position: -103px 0; }

.m10-form .form-sidebar .column-left {
    width: 50px;
}

.m10-form .form-sidebar .h3 {
    margin: 0;
    color: #535353;
    font-size: 15px;
    font-weight: 600;
}

.m10-form .form-sidebar a:hover .h3,
.m10-form .form-sidebar a:active .h3 {
    color: #f77700;
}

.m10-form .form-sidebar .p {
    margin: 0 0 30px 0;
    padding: 0;
    color: #535353;
    font-size: 12px;
}

.m10-form .form-sidebar a:hover .gray,
.m10-form .form-sidebar a:active .gray {
    color: #535353;
}

.m10-form .form-sidebar .premier,
.m10-form .form-sidebar .support {
    display: none;
}

/* form elements
   ========================================================================== */

.m10-form label,
.m10-form .label {
    display: block;
    color: #535353;
    font-size: 15px;
}

/* text input ====================== */

.m10-form input[type=text],
.m10-form input[type=password],
.m10-form textarea,
.m10-form select,
.m10-form .input,
.m10-form .textarea,
.m10-form .select,
.m10-form .fancy-select,
.m10-form .fancy-select-options {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    margin: 5px 0 0 0;
    padding: 5px 10px;
    border: 1px solid #b7b7b7;
    background: #fff;
    color: #535353;
    font-size: 13px;
}

.m10-form input[type=text].error,
.m10-form input[type=password].error,
.m10-form textarea.error,
.m10-form select.error,
.m10-form .input.error,
.m10-form .textarea.error,
.m10-form .select.error,
.m10-form .fancy-select.error,
.m10-form .fancy-select-options.error {
    border: 1px solid #dd1100;
    background: #fff0f0;
    color: #dd1100;
}

.m10-form input[type=text]:disabled,
.m10-form input[type=password]:disabled,
.m10-form textarea:disabled,
.m10-form select:disabled,
.m10-form .input.disabled,
.m10-form .textarea.disabled,
.m10-form .select.disabled,
.m10-form .fancy-select.disabled,
.m10-form .fancy-select-options.disabled {
    border: 1px solid #b5b5b5;
    background: #ebebeb;
    color: #636363;
}

.m10-form textarea,
.m10-form .textarea {
    height: 154px;
    resize: vertical;
}

.m10-form select,
.m10-form .select {
    padding: 4px 10px;
}

.m10-form .radio-wrapper {
    margin: 2px 0 0 0;
}

.m10-form .radio-wrapper.error {
    margin: 5px 0 0 0;
    padding: 10px;
    padding: 5px 10px 10px 10px;
    border: 1px solid #dd1100;
    background: #fff0f0;
}

.m10-form input[type=text].inactive-by-default,
.m10-form input[type=password].inactive-by-default,
.m10-form textarea.inactive-by-default,
.m10-form select.inactive-by-default,
.m10-form .fancy-select.inactive-by-default {
    color: #a9a9a9;
    /* font-style: italic; */
}

.m10-form input[type=text].inactive-by-default.active,
.m10-form input[type=password].inactive-by-default.active,
.m10-form textarea.inactive-by-default.active,
.m10-form select.inactive-by-default.active,
.m10-form .fancy-select.inactive-by-default.active {
    color: #535353;
    /* font-style: normal; */
}

.m10-form input[type=text].inactive-by-default.error,
.m10-form input[type=password].inactive-by-default.error,
.m10-form textarea.inactive-by-default.error,
.m10-form select.inactive-by-default.error,
.m10-form .fancy-select.inactive-by-default.error {
    background-color: #fff0f0 !important;
    color: #dd1100;
}

/* radio and checkboxes ============ */

.m10-form input[type=radio],
.m10-form input[type=checkbox],
.m10-form .radio,
.m10-form .checkbox {
    display: inline-block;
    float: left;
    box-sizing: border-box;
    margin: 2px 5px 0 0;
    color: #535353;
    font-size: 13px;
    vertical-align: top;
}

/* fancy selects =================== */

.m10-form .fancy-select {
    padding-right: 30px !important;
    background: #fff url('/common/images/m10/form-icon-arrow-down.png') no-repeat 100% 50% !important;
}

.m10-form .fancy-select-options,
.m10-form .fancy-select-options.error {
    /* position: relative;
    max-height: 221px;
    padding: 0; */
    margin: 0;
    padding: 15px 25px;
    border-top: none;
    /* overflow-y: auto;
    z-index: 99999999; */
}

.m10-form .fancy-select-options input[type=checkbox] {
    margin: 2px 5px 0 0;
}

.m10-form .fancy-select-options label {
    padding: 0 0 4px 18px;
    font-size: 13px;
}

.m10-form .fancy-select-options .other {
    margin: 0;
    padding: 2px 5px;
    color: #636363;
    font-size: 12px;
}

/* buttons ========================= */

.m10-form input[type=button],
.m10-form input[type=submit],
.m10-form input[type=reset],
.m10-form button,
.m10-form .button,
.m10-form .button:link,
.m10-form .button:visited,
.m10-form input[type=button].button-large,
.m10-form input[type=submit].button-large,
.m10-form input[type=reset].button-large,
.m10-form button.button-large,
.m10-form .button-large,
.m10-form .button-large:link,
.m10-form .button-large:visited {
    display: inline-block;
    padding: 7px 25px;
    border: 1px solid #b00f00;
    border-radius: 4px;
    background: #dd1100;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

.m10-form input[type=button].button-large,
.m10-form input[type=submit].button-large,
.m10-form input[type=reset].button-large,
.m10-form button.button-large,
.m10-form .button-large,
.m10-form .button-large:link,
.m10-form .button-large:visited {
    padding: 11px 25px;
    font-size: 16px;
}

.m10-form input[type=button]:hover,
.m10-form input[type=submit]:hover,
.m10-form input[type=reset]:hover,
.m10-form button:hover,
.m10-form .button:hover,
.m10-form input[type=button].button-large:hover,
.m10-form input[type=submit].button-large:hover,
.m10-form input[type=reset].button-large:hover,
.m10-form button.button-large:hover,
.m10-form .button-large:hover,
.m10-form input[type=button].hover,
.m10-form input[type=submit].hover,
.m10-form input[type=reset].hover,
.m10-form button.hover,
.m10-form .button.hover,
.m10-form input[type=button].button-large.hover,
.m10-form input[type=submit].button-large.hover,
.m10-form input[type=reset].button-large.hover,
.m10-form button.button-large.hover,
.m10-form .button-large.hover {
    background: #f80000;
    color: #fff;
}

.m10-form input[type=button]:active,
.m10-form input[type=submit]:active,
.m10-form input[type=reset]:active,
.m10-form button:active,
.m10-form .button:active,
.m10-form input[type=button].button-large:active,
.m10-form input[type=submit].button-large:active,
.m10-form input[type=reset].button-large:active,
.m10-form button.button-large:active,
.m10-form .button-large:active,
.m10-form input[type=button].active,
.m10-form input[type=submit].active,
.m10-form input[type=reset].active,
.m10-form button.active,
.m10-form .button.active,
.m10-form input[type=button].button-large.active,
.m10-form input[type=submit].button-large.active,
.m10-form input[type=reset].button-large.active,
.m10-form button.button-large.active,
.m10-form .button-large.active {
    background: #b00f00;
}

.m10-form input[type=button]:disabled,
.m10-form input[type=submit]:disabled,
.m10-form input[type=reset]:disabled,
.m10-form button:disabled,
.m10-form .button:disabled,
.m10-form input[type=button].button-large:disabled,
.m10-form input[type=submit].button-large:disabled,
.m10-form input[type=reset].button-large:disabled,
.m10-form button.button-large:disabled,
.m10-form .button-large:disabled,
.m10-form input[type=button].disabled,
.m10-form input[type=submit].disabled,
.m10-form input[type=reset].disabled,
.m10-form button.disabled,
.m10-form .button.disabled,
.m10-form input[type=button].button-large.disabled,
.m10-form input[type=submit].button-large.disabled,
.m10-form input[type=reset].button-large.disabled,
.m10-form button.button-large.disabled,
.m10-form .button-large.disabled {
    opacity: 0.45;
}

/* subpage styles
   ========================================================================== */

.form-subpage .form-column-left .column-left {
    width: 60px;
}

.form-subpage .form-column-left .column-right h2 {
    margin: 0 0 6px 0;
}

/* sign in page ==================== */

.page-sign-in .content {
    clear: both;
    border: 1px solid #b7b7b7;
}

.page-sign-in .content > tbody > tr > td {
    padding: 35px !important;
}

.page-sign-in .content > tbody > tr > td:first-child {
    border-right: 1px solid #b7b7b7;
}

.page-sign-in .login > tbody > tr > td,
.page-sign-in .login > tbody > tr > td:first-child {
    padding: 0 0 25px 0;
}

/* thank you page ================== */

.page-thank-you .form-column-left small {
    display: inline-block;
    padding: 6px 0 0 0;
}

/* server error page =============== */

.page-server-error .form-column-left .column-right {
    padding: 17px 0 0 0;
}