Viewing File: /usr/local/cpanel/base/unprotected/nc-cpanel/style_v2.less

/*
# cpanel - base/unprotected/cpanel/style_v2.less   Copyright 2022 cPanel, L.L.C.
#                                                           All rights reserved.
# copyright@cpanel.net                                         http://cpanel.net
# This code is subject to the cPanel license. Unauthorized copying is prohibited
*/

/* CSS Document */
#preload_images {
    background-image: url("images/notice-error.png"),
        url("images/notice-info.png"), url("images/notice-success.png"),
        url("images/warning.png");
    position: absolute;
    visibility: hidden;
    left: -10000px;
}

body {
    font-family: "Open Sans", helvetica, arial, sans-serif;
    background-color: #ffffff;
    color: #333333;
}

body.whm {
    background-color: #293a4a;
    color: #ffffff;
}

body.cp {
    background-color: #f0eff0;
}

body.whm .locale-container a,
body.whm #forms label,
body.whm .input-req-login label,
body.whm #morelocale {
    color: #ffffff;
}

img.main-logo {
    height: 50px;
}

img.small-logo {
    height: 20px;
}

body.whm .copyright {
    background-image: url("images/cp-logo_white.svg");
    color: #ffffff;
}

body.cp .copyright {
    background: url("images/cp-logo.svg") no-repeat scroll center top
        transparent;
    background-size: 25px auto;
}

.wm #select_user_form,
.wm .button-wrapper button {
    background-color: #f0eff0;
}

.clear {
    clear: both;
}

a:link,
a:visited,
a:active {
    color: #ffffff;
    text-decoration: none;
}

a:hover {
    color: #e97b16;
    text-decoration: underline;
}

#token-forms {
    margin-bottom: 15px;
}

.control_container {
    text-align: center;
    width: 100%;
}

#token-forms .control_container {
    text-align: center;
    width: 100%;
}

// #login-wrapper {
//     margin: 45px auto;
//     min-height: 460px;
// }
#login-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;

  .wrapper {
    height: 100%;
    flex-grow: 2;
    display: flex;
    flex-direction: column;
  }
}

.security_policy #login-wrapper {
    min-height: 817px;
}

.small-size #login-wrapper {
    min-height: 460px;
}

#login-container,
.small-size #security-container {
    margin: 0 auto;
    position: relative;
    width: 356px;
}

#login-sub-container,
.small-size #security-sub-container {
    left: 5px;
    position: relative;
    width: 345px;

    html[dir="rtl"] & {
        left: auto;
        right: 5px;
    }
}

#login-sub-header {
    height: 65px;
    padding: 10px 0 0;
    text-align: center;
}

#login-sub-header img {
    margin-left: 7px;
}

#login-sub,
#security-sub,
#reset-sub {
    font-size: 13px;
}

#login-sub,
#security-sub {
    height: 260px;
    padding-left: 30px;
}

#login-sub,
#security-sub {
    padding-top: 30px;
}

#reset-sub {
    position: relative;
    padding-top: 10px;
}

.small-size #security-sub {
    height: 260px;
}

#external-auth-container,
#select_users_option_block {
    padding-left: 30px;
    padding-top: 0;
    font-size: 13px;
    padding-right: 5px;
}

html[dir="rtl"] #external-auth-container,
html[dir="rtl"] #select_users_option_block {
    padding-left: 5px;
    padding-right: 30px;
}

.has-pw-reset #external-auth-container,
.has-pw-reset #select_users_option_block {
    padding-top: 30px;
}

.or-separator {
    text-align: center;
    width: 285px;
    margin-bottom: 10px;
    background-image: url("images/or-separator-line.png");
    background-repeat: no-repeat;
    background-position: center center;
}
.or-separator-secondary-label {
    display: none;
}
.or-separator .or-separator-label {
    display: inline-block;
    padding: 4px;
    border: 2px solid #cccccc;
    border-radius: 50%;
}

#forms {
    left: 30px;
    position: absolute;
    top: 0;
}

#reset-forms {
    position: relative;
    top: 0;
}

button,
button:active,
input[type="submit"],
input[type="submit"]:active,
input[type="button"],
input[type="button"]:active,
.login-btn a.loginbtn {
    border: 1px solid #095779;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
}

button[disabled],
button[disabled]:hover,
button[disabled]:active,
input[type="submit"][disabled],
input[type="submit"][disabled]:hover,
input[type="submit"][disabled]:active,
input[type="button"][disabled],
input[type="button"][disabled]:hover,
input[type="button"][disabled]:active {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.65;
}

button:active:focus,
button:focus,
input[type="submit"]:active:focus,
input[type="submit"]:focus,
input[type="button"]:active:focus,
input[type="button"]:focus,
.login-btn a.loginbtn:active:focus,
.login-btn a.loginbtn:focus,
.input-button:active:focus,
.input-button:focus {
    outline: thin dotted;
    outline-offset: -2px;
}

input::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
}

/**
 * On iOS 9.3, text and password fields have the "textfield" appearance set
 * which adds an inner shadow to the top of the field. We want to remove
 * this since it looks odd with the way we style the login pages.
 */
input[type="text"],
input[type="password"] {
    -webkit-appearance: none;
}

/**
 * On iOS 9.3, input buttons have the "push-button" appearance set
 * which makes them look like native buttons. We want to remove this
 * since it causes our buttons to look odd with the way we style
 * the login pages.
 */
input[type="submit"],
input[type="button"],
input[type="reset"] {
    -webkit-appearance: none;
}

input.std_textbox {
    width: 254px;
    height: 22px;
    margin: 5px 0;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    border: 2px solid #bebebe;
    background-color: #ffffff;
    color: #000000;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
}

#reset_form .input-group input.std_textbox,
div.icon input.std_textbox,
div.no-icon input.std_textbox {
    width: 220px;
    background: transparent;
    border: none;
    -khtml-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}

#reset_form .input-group,
.input-field-login.icon,
.input-field-login.no-icon {
    input.std_textbox:-ms-input-placeholder,
    input.std_textbox:-moz-placeholder {
        color: #7f7f7f;
    }

    input.std_textbox:focus:-ms-input-placeholder,
    input.std_textbox:focus:-moz-placeholder,
    input.std_textbox:focus::-webkit-input-placeholder {
        color: #bbbbbb;
        -ms-transition: color 0.2s;
        -moz-transition: color 0.2s;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
    }
}

#reset_form .input-group input.std_textbox,
.input-field-login.icon,
.input-field-login.no-icon {
    display: block;
    height: 32px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    border: 2px solid #bebebe;
    background-color: #ffffff;
    background-repeat: no-repeat;
}

.input-field-login.icon,
.input-field-login.no-icon {
    input.std_textbox {
        border: 1px solid #fff;
        padding: 0 10px;
        margin: 4px 5px 0 5px;

        border-radius: 4px;
        -khtml-border-radius: 4px;
    }
}

html[dir="ltr"] {
    #reset_form .input-group input.std_textbox {
        padding-left: 40px;
    }

    div.icon input.std_textbox {
        margin-left: 30px;
    }
}

html[dir="rtl"] {
    #reset_form .input-group input.std_textbox {
        padding-right: 40px;
    }

    div.icon input.std_textbox {
        margin-right: 30px;
    }
}

#forms label,
.input-req-login label {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.login-password-field-label {
    margin-top: 30px;
}

html[dir="ltr"] #reset_form .input-group input.std_textbox,
html[dir="ltr"] .input-field-login.icon {
    background-position: 6px 6px;
}

html[dir="rtl"] #reset_form .input-group input.std_textbox,
html[dir="rtl"] .input-field-login.icon {
    background-position: 258px 6px;
}

div.username-container,
div.reset-pass-container {
    background-image: url("images/icon-username.png");
}

div.password-container {
    background-image: url("images/icon-password.png");
}

div.puzzle-container {
    background-image: url("images/icon-envelope.png");
}

div.token-container,
div.password-confirm-container {
    background-image: url("images/icon-token.png");
}

input.std_textbox[disabled] {
    background-color: #005270;
    box-shadow: none !important;
}

/* @group Security Questions */

#security-container {
    margin: 0 auto;
    position: relative;
    width: 850px;
}

.small-size #security-sub-container {
    height: 365px;
}

#security-sub-container {
    height: 745px;
    left: 5px;
    position: absolute;
    width: 838px;
}

#security-sub {
    height: 640px;
}

.login-rt {
    text-align: center;
    padding: 0 20px 0 0;
}

.security_policy #login-status {
    margin: 45px auto 15px;
    width: 556px;
    padding: 5px 5px 10px 5px;
}

.small-size #login-status {
    margin: 45px auto;
    padding: 5px 10px 5px 5px;
    width: 365px;
}

#userform {
    text-align: center;
    margin-left: 0 !important;
}

#userform input {
    font-size: 13px;
    font-style: normal;
    width: 274px;

    @media (min-width: 480px) {
        width: 400px;
    }

    @media (min-width: 1024px) {
        width: 600px;
    }
}

@validation-error-input-difference: 14px;

ul.validation_errors_ul > li.validation_errors_li {
    max-width: (274px - @validation-error-input-difference);

    @media (min-width: 480px) {
        max-width: (400px - @validation-error-input-difference);
    }

    @media (min-width: 1024px) {
        max-width: (600px - @validation-error-input-difference);
    }
}

/* For multi-user select */
.image-wrapper,
.text-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}

.image-wrapper {
    min-width: 90px;
    min-height: 90px;
}

.button-wrapper {
    display: inline-block;
    float: left;
}

.button-wrapper button {
    border: 0;
    background-color: #fff;
    padding: 0 5px 5px;
    color: #000;
    width: 100px;
}

.button-wrapper button img {
    display: block;
    border-radius: 40px;
    margin: 5px 5px;
    vertical-align: middle;
    -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.35);
}

#select_user_form {
    background-color: white;
    padding: 20px 30px;
    box-shadow: 5px 5px 5px #cccccc;
    max-width: 600px;
}

body.whm #select_user_form {
    box-shadow: 5px 5px 5px #172029;
}

#select_user_form .controls {
    width: 600px;
    font-size: 0;
}

@media (min-width: 481px) {
    #select_user_form {
        max-width: 400px;
        margin: 0 auto;
    }

    .button-wrapper {
        height: 121px;
    }

    .text-content {
        width: 90px;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 600px) {
    #select_user_form {
        max-width: 500px;
    }
}

@media (min-width: 700px) {
    #select_user_form {
        max-width: 600px;
    }
}
/* End unique styles for multi-user select */

input.security_question {
    font-size: 13px;
    color: #000000;
    font-style: italic;
    margin: 10px 0 0 3px;
    height: 32px;
}

#userform input.security_question {
    background-color: transparent;
}

html[dir="rtl"] input.security_question {
    margin: 10px 3px 0 0;
}

html body.security_policy input.security_question {
    margin: 0;
}

span.security_question_expander {
    position: absolute;
    top: 12px;
    right: 6px;
    color: #333333;
    padding: 0 !important;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
}

input.security_question_answer {
    height: 32px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    border: 2px solid #bebebe;
    background-color: #ffffff;
    padding-left: 2px;
    width: 100%;
}

input.security_question[disabled] {
    background-color: #eeeeee;
    box-shadow: none !important;
}

td.label-cell,
td.field-cell {
    display: block;
    text-align: left;
}

html[dir="rtl"] td.label-cell,
html[dir="rtl"] td.field-cell {
    text-align: right;
}

.question-row td.field-cell {
    margin-bottom: 5px;
}
.answer td.field-cell {
    margin-bottom: 20px;
}

/* override of inline style in shared template */
tr.answer td {
    padding-bottom: 0 !important;
}

.combobox {
    border: 2px solid #bebebe !important;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    background-color: #ffffff;
    position: relative;
    text-align: left;
}

/* override of inline style in shared template */
.combobox input {
    border-right: none !important;
}

.yui-ac-bd li {
    white-space: normal !important;
}

.yui-ac-bd {
    font-size: 12px;
    color: #333333;
}

#userform table {
    margin: 0 auto;
}

#userform label {
    font-size: 13px;
    font-weight: bold;
    padding-bottom: 8px;
    text-align: right;
}

body.whm #userform label,
body.whm .answer {
    color: #ffffff;
}

a.page-link {
    text-decoration: underline;
}

.input-button {
    background-color: #179bd7;
    font-size: 13px;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    padding-top: 7px;
    padding-bottom: 7px;
    text-align: center;
    text-decoration: none;
    width: 285px;
}

.input-button:hover {
    background-color: #095779;
    text-decoration: none;
}

.cjt_validation_error > img {
    display: none;
}

span.cjt_validation_error {
    display: inline-block;
}

.validation_errors_div {
    border: 1px solid #a94442;
    background-color: #d35351;
    border-radius: 4px;
    -khtml-border-radius: 4px;
    color: #ffffff;
    font-size: 13px;
    list-style: none outside none;
    padding: 5px;
}

.validation_errors_ul {
    margin: 0;
    padding: 2px 5px 2px 5px;
}

ul.validation_errors_ul > li.validation_errors_li {
    list-style-type: none;
    list-style-position: inside;
}

.mask {
    background-color: #000000 !important;
    opacity: 0.6 !important;
}

#validation_errors_modal_box {
    -khtml-border-radius: 4px;
    border-radius: 4px;
    color: #ffffff;
    padding: 10px;
    font-size: 13px;
    font-family: "Open Sans", helvetica, sans-serif;
    background-color: #293a4a;
    border: 1px solid;
    border-color: #000000;
    border-color: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

#validation_errors_modal_box .input-button {
    width: 100%;
}

.yui-panel .hd {
    background-color: #293a4a !important;
    padding: 3px;
    font-size: 14px !important;
    border: none !important;
    margin: 0 0 20px 0;
}

.validation_errors_modal_box_title {
    font-weight: bold !important;
}

#validation_errors_modal_box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#validation_errors_modal_box li {
    margin: 5px 0 5px 0;
    padding: 0;
}

.yui-panel-container.shadow .underlay {
    display: none;
}

.yui-panel .container-close {
    background: url("images/login-error-close.png") no-repeat scroll 0 0
        transparent !important;
}

/* @end */

#tfa_login_form {
    text-align: left;
}

#clickthrough_form,
#login_form {
    position: absolute;
    left: 0px;
    top: 100px;
}

#reset_form {
    position: relative;
    left: 0px;
    top: 0px;
}

#clickthrough_form {
    right: 0;
}

#clickthrough_form p {
    font-size: 14px;
}

.label--title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 20px 0;
}

.login-btn,
.reset-pass-btn,
.external-auth-btn,
.clickthrough-cont-btn {
    float: left;
    padding-top: 30px;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
}

.clickthrough-cont-btn {
    margin-top: 20px;
}

.external-auth-btn {
    vertical-align: middle;
}
.external-auth-icon {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    vertical-align: middle;
}

.external-auth-btn {
    vertical-align: middle;
}
.external-auth-icon {
    display: inline-block;
    width: 33px;
    height: 33px;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-position: center center;
    vertical-align: middle;
}

#reset-pw-container {
    margin-right: 30px;
}

.reset-pw {
    float: right;
    padding: 25px 0;
    text-align: center;
    width: 100%;
}

.reset-pw a {
    color: #293a4a;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

.reset-pw a:hover {
    color: #d03f00;
}

.input-req-login {
    color: #293a4a;
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 8px;
    padding-left: 4px;
    width: 100%;
}

.locale-container {
    text-align: center;
    padding: 5px 0 0 0;
}

#mobilelocalemenu {
    font-size: 14px;
    color: #333;
    display: none;
    margin-top: 10px;
}

body.whm #mobilelocalemenu {
    color: #fff;
}

#mobilelocalemenu a {
    padding: 5px 8px;
    background-color: #ccc;
    border: 1px solid #333;
    border-radius: 4px;
    color: #333;
}

#locale-footer {
    margin: 40px auto;
    padding: 5px;
    width: 90%;
}

.error_notice {
    color: #3f4143;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding: 10px;
    max-width: 50%;
    display: table;
}

body.whm .error_notice,
body.whm .error_notice a {
    color: #ffffff;
}

body.whm .error_notice a:hover {
    text-decoration: underline;
}

#login-status {
    display: table;
    width: 100%;
}

#login-detail,
.message-detail {
    display: table-row;
    height: 40px; /* Since its like a tr, height works like min-height */
}

#login-status-icon-container,
#IE-warning-icon-container {
    padding-left: 5px;
    padding-right: 5px;
    width: 27px;
}

#login-status-icon-container,
#login-status-message,
.login-status-message,
#IE-warning-icon-container,
#IE-warning-message {
    display: table-cell;
    vertical-align: middle;
}

div.control_container div.login-button {
    display: inline-block;
}

.external-auth-btn,
.external-auth-btn .external-auth-link {
    display: inline-block;
}

.external-auth-btn .external-auth-link {
    border-radius: 4px;
}

.login-btn button,
.login-btn input,
.login-btn .loginbtn,
.btn button,
.external-auth-btn .external-auth-link,
.clickthrough-cont-btn {
    background-color: #179bd7;
    width: 100%;
    font-size: 13px;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    padding-top: 7px;
    padding-bottom: 7px;
    text-align: center;
    text-decoration: none;
}

.external-auth-btn .external-auth-link {
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 4px;
}
.login-btn button:hover,
.login-btn input:hover,
.login-btn .loginbtn:hover,
.external-auth-btn .external-auth-link:hover {
    background-color: #095779;
    text-decoration: none;
    color: #fff;
}

.external-auth-btn .external-auth-link:hover {
    color: #ffffff;
    -webkit-box-shadow: inset 0 0 0 1px rgba(00, 0, 0, 1);
    box-shadow: inset 0 0 0 1px rgba(00, 0, 0, 1);
}

#answer-submit {
    float: none !important;
    margin: 10px 0;
}

.logout-container,
.response-container {
    float: none !important;
    margin-top: 30px;
}

#confirm-submit-btn {
    padding-top: 23px !important;
}

#notify {
    width: 365px;
    margin: 15px auto;
}

#notify a {
    text-decoration: underline;
    font-size: 12px;
}

#notify a:hover {
    text-decoration: none;
}

#notify p,
#failure p {
    margin: 0 0 10px 0;
    padding-left: 30px;
    padding-top: 3px;
}

.text_notice {
    padding-left: 30px;
    padding-top: 3px;
    padding-bottom: 20px;
    text-align: left;
    background-color: #ffffff;
    border: solid 2px #000000;
}

#failure a {
    font-size: 14px;
    color: #035e7e;
    text-decoration: underline;
}

#failure a:hover {
    text-decoration: none;
}

.error-notice,
.answers-notice,
.warn-notice,
.info-notice,
.success-notice,
#failure {
    -khtml-border-radius: 4px;
    border-radius: 4px;
    font-size: 12px;
    min-height: 27px;
    padding: 5px 10px 5px 5px;
}

.error-notice,
#failure {
    background-color: #d35351;
    color: #ffffff;
}

.warn-notice,
.answers-notice {
    background: #f4b445;
    color: #333333;
}

.info-notice {
    background-color: #009cde;
    color: #ffffff;
}

.success-notice {
    background-color: #67ba5b;
    color: #ffffff;
}

#login-status .login-status-icon,
#IE-warning .IE-warning-icon {
    display: block;
    width: 27px;
    height: 27px;
}

#login-status.error-notice .login-status-icon {
    background-image: url("images/notice-error.png");
}

#login-status.info-notice .login-status-icon {
    background-image: url("images/notice-info.png");
}

#login-status.success-notice .login-status-icon {
    background-image: url("images/notice-success.png");
}

#login-status.warn-notice .login-status-icon,
#IE-warning.warn-notice .IE-warning-icon {
    background-image: url("images/warning.png");
}

#IE-warning {
    width: 100%;
    margin-top: 10px;
}

#IE-warning a {
    color: #428bca;
}

.IE-warning-hide {
    display: none;
}

#failure {
    margin: 45px auto;
    width: 365px;
}

#login-status-message,
#IE-warning-message,
.login-status-message {
    padding: 5px;
}

#login-status.error-notice,
#login-status.answers-notice,
#login-status.warn-notice,
#login-status.info-notice,
#login-status.success-notice,
#IE-warning.warn-notice {
    padding: 0;
}

#login-status.error-notice > .content-wrapper,
#login-status.answers-notice > .content-wrapper,
#login-status.warn-notice > .content-wrapper,
#login-status.info-notice > .content-wrapper,
#login-status.success-notice > .content-wrapper,
#IE-warning.warn-notice > .content-wrapper {
    padding: 5px 10px 5px 5px;
}

#login-status.error-notice a:hover {
    color: #fff;
}

#locale-container {
    margin: 0 auto;
    width: 768px;
    height: 245px;
    background-attachment: scroll;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    position: relative;
    padding: 3px;
}

#locale-inner-container {
    background-color: #16262a;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}

#locale-header {
    width: 100%;
    border-bottom: 1px solid #333333;
    height: 25px;
    padding: 5px 0 5px 0;
}

.locale-head {
    float: left;
    font-size: 14px;
    color: #ffffff;
    padding: 7px 0 10px 10px;
}

.close {
    float: right;
    padding: 7px 10px 0 0;
    position: relative;
    top: -3px;
}

.close a {
    font-weight: bold;
    font-size: 10px;
    color: #fff;
}

.close a:hover {
    color: #ff6c2c;
}

html[dir="rtl"] .locale-head {
    float: right;
    padding: 7px 10px 10px 0;
}

html[dir="rtl"] .close {
    float: left;
    padding: 7px 0 0 10px;
}

.locale-cell {
    float: left;
    display: block;
    width: 140px;
    height: 40px;
    padding: 10px 0 0 5px;
    overflow: hidden;
}

html[dir="rtl"] .locale-cell {
    float: right;
    padding: 10px 5px 0 0;
}

.scroller {
    max-height: 320px;
    min-height: 205px;
    overflow-y: auto;
    padding: 0 0 0 10px;
}

html[dir="rtl"] .scroller {
    padding: 0 10px 0 0;
}

.scroller a {
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
}

.scroller a:hover {
    color: #ff6c2c;
}

.locale-container ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

.locale-container ul li,
html[dir="rtl"] .locale-container ul li:first-child {
    display: inline;
    list-style: none;
    margin-left: 34px;
}

.locale-container ul li:first-child,
html[dir="rtl"] .locale-container ul li:last-child {
    margin-left: 0;
}

#morelocale {
    color: #293a4a;
    text-decoration: none;
}

#morelocale {
    font-weight: bold;
    font-size: 16px;
}

.locale-container ul li a {
    color: #293a4a;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.locale-container ul li a:hover,
#morelocale:hover {
    color: #d03f00;
}

.logo {
    text-align: center;
}

.copyright {
    color: #3f4143;
    font-family: verdana;
    font-size: 7pt;
    margin: 10px 0 0;
    padding-top: 30px;
    text-align: center;
}

body.cp .copyright a,
body.wm .copyright a {
    color: #3f4143;
}

body.cp .copyright a:hover,
body.whm .copyright a:hover,
body.wm .copyright a:hover {
    text-decoration: none;
    color: #d03f00;
}

#sec-ques {
    text-align: left;
    margin-left: 15px;
    padding: 0;
    margin: 0;
    display: inline-block;
}

#sec-ques li {
    list-style-position: inside;
    padding: 0;
}

.description {
    text-align: left;
    margin-bottom: 10px;
}

/* @end */

#new-pw-container {
    border: 1px solid gray;
    border-color: rgba(255, 255, 255, 0.1);
    -khtml-border-radius: 4px 10px 10px 10px;
    border-radius: 4px 10px 10px 10px;
    height: 380px;
    margin: 0 auto;
    position: relative;
    width: 356px;
}

#new-pw-sub-container {
    border: 1px solid gray;
    border-color: rgba(0, 0, 0, 0.2);
    -khtml-border-radius: 4px 10px 10px 10px;
    border-radius: 4px 10px 10px 10px;
    box-shadow: 0 0 10px #000000 inset;
    height: 368px;
    left: 5px;
    position: absolute;
    top: 5px;
    width: 345px;
}

#new-pw-sub {
    background-color: #035271;
    background-color: rgba(3, 82, 113, 0.75);
    -khtml-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    border-top: 1px solid #0d7291;
    height: 262px;
    padding-left: 30px;
    padding-top: 30px;
    color: white;
    font-size: 12px;
    padding-right: 5px;
}

.form-container {
    width: 285px;
}

input#token-submit,
input#logout-btn {
    margin-top: 15px;
    width: 100%;
    font-size: 13px;
}

.login-btn a.loginbtn {
    display: block;
}

.code {
    font-family: monospace;
}

ul.options li {
    margin-top: 8px;
}

ul.options li:first-child {
    margin-top: 0;
}

/* 404 Page */
#error-wrapper {
    display: table-row;
}

error_msg_contents {
    display: table-cell;
}

#error-wrapper ul li a,
#error-wrapper p a {
    color: #3f4143;
    text-decoration: underline;
}

body.whm #error-wrapper ul li a,
body.whm #error-wrapper p a {
    color: #ffffff;
}

#error-wrapper ul li a:hover,
#error-wrapper p a:hover {
    color: #cc6600;
}

body.whm #error-wrapper ul li a:hover,
body.whm #error-wrapper p a:hover {
    color: #ff6c2c;
}

.controls {
    width: 285px;
}

/* clearfix */
.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}

#proceed_btn_container.login-btn {
    padding-top: 15px;
}

#logout_btn_container.login-btn {
    padding-top: 11px;
}

#logout-btn,
.logout-container .input-button {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

#logout-btn:hover,
.logout-container .input-button:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

#logout-btn:active,
.logout-container .input-button:active {
    color: #333;
}

#link-account {
    background-color: #ccc;
    margin: 5px 0;
    border-radius: 5px;
    width: 380px;
    max-width: 100%;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);
    font-size: 14px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);
    min-height: 92px;
}

#link-account .content-wrapper {
    padding: 8px 8px;
}

.link-account-avatar {
    vertical-align: top;
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 5px 8px 5px;
    border-radius: 4px;
    border: 1px solid #fff;
    background-position: center center;
    background-repeat: no-repeat;
    float: left;
}

body.logging-in {
    a,
    #mobilelocalemenu {
        visibility: hidden;
    }
}

@media (min-width: 481px) {
    #badtokenloginform .control_container {
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    body {
        margin: 0 10px;
    }

    #login-wrapper {
        width: 100%;
        min-width: 280px;
        margin: 15px 0 5px 0;
    }

    #login-wrapper.no-external-auth-modules {
        min-height: 420px;
    }

    .login-password-field-label {
        margin-top: 15px;
    }

    .reset-pw {
        padding: 15px 0;
    }

    #notify {
        width: 100%;
        min-width: 280px;
        margin: 0 0 25px 0;
    }

    #login-container,
    .small-size #security-container {
        width: 100%;
        min-width: 300px;
    }

    #login-sub-container,
    .small-size #security-sub-container {
        width: 100%;
        min-width: 280px;
        position: static;
    }

    #login-sub {
        height: 225px;
    }

    #login-sub-header {
        padding: 0;
    }

    #login-sub,
    #external-auth-container,
    #select_users_option_block {
        padding: 10px;
        margin-bottom: 8px;
    }

    /*
     * This is needed to override the rtl settings
     * for the external-auth-container that are set
     * earlier in this file.
     */
    html[dir="rtl"] #login-sub,
    html[dir="rtl"] #external-auth-container,
    html[dir="rtl"] #select_users_option_block {
        padding: 10px;
        margin-bottom: 8px;
    }

    #external-auth-container,
    #select_users_option_block {
        margin-bottom: 0;
    }

    .has-pw-reset #external-auth-container,
    .has-pw-reset #select_users_option_block {
        padding-top: 10px;
    }

    #badtokenloginform + #external-auth-container {
        padding-top: 30px;
    }

    #forms {
        position: static;
    }

    #login_form,
    #reset_form,
    #tfa_login_form {
        left: 10px;
        right: 10px;
        top: 75px;
    }

    .security_policy #login-status {
        width: 100%;
        padding: 0;
    }

    .small-size #login-status {
        width: 100%;
        min-width: 280px;
        margin: 15px 0;
        padding: 5px 0;
    }

    #security-container {
        width: 100%;
    }

    #security-sub-container {
        width: 100%;
    }

    #reset_form .input-group input.std_textbox,
    #reset_form .input-field-login.no-icon,
    .input-field-login.icon {
        height: 40px;
    }

    html[dir="ltr"] #reset_form .input-group input.std_textbox,
    html[dir="ltr"] .input-field-login.icon {
        background-position: 6px 10px;
    }

    html[dir="rtl"] #reset_form .input-group input.std_textbox,
    html[dir="rtl"] .input-field-login.icon {
        background-position: right;
    }

    .input-button {
        width: 280px;
    }

    input.std_textbox {
        height: 29px;
        min-width: 220px;
    }

    html[dir="rtl"] #reset_form .input-group input.std_textbox,
    html[dir="rtl"] div.icon input.std_textbox {
        margin-right: 26px;
    }

    #userform {
        text-align: left;
    }

    input.security_question_answer {
        width: 274px;
    }

    #security-sub {
        padding-left: 0;
        padding-right: 0;
    }

    .login-rt {
        padding: 0;
        text-align: left;
    }

    #tfa_login_form .controls,
    #login_form .controls,
    #external-auth-container .controls,
    #select_users_option_block .controls,
    #reset_form .controls,
    #reset-sub .controls {
        width: 100%;
        min-width: 260px;
    }

    #tfa_login_form .controls .login-btn,
    #login_form .controls .login-btn {
        padding-top: 15px;
    }

    #locale-footer {
        width: 100%;
        min-width: 300px;
        margin: 0 0 15px 0;
        padding: 0;
    }

    #locale-container {
        width: 100%;
        height: auto;
        min-width: 280px;
        margin: 15px 0;
        color: #293a4a;
        font-family: "Open Sans", sans-serif;
        font-weight: 600;
        padding: 0;
    }

    #locale-container a:hover {
        color: #d03f00;
    }

    #locale-map .scroller {
        max-height: none;
        padding: 0;
    }

    #locale-header {
        padding: 10px 0 5px 0;
    }

    #locale-header .locale-head {
        padding: 0px 0 0 10px;
        font-size: 18px;
    }

    html[dir="rtl"] #locale-header .locale-head {
        padding: 0 10px 0 0;
    }

    #locale-header .close {
        padding: 0 10px 0 0;
        top: 0;
    }

    html[dir="rtl"] #locale-header .close {
        padding: 0 0 0 10px;
    }

    #locale-header .close a {
        font-size: 12px;
    }

    #locale-map .scroller .locale-cell {
        width: 100%;
        height: 36px;
        padding: 0;
        float: none;
        border-top: 1px solid #999999;
        border-bottom: 1px solid #333333;
    }

    #locale-map .scroller .locale-cell a {
        display: block;
        font-size: 16px;
        margin: 10px 0 5px 10px;
    }

    html[dir="rtl"] #locale-map .scroller .locale-cell a {
        margin: 10px 10px 5px 0;
    }

    input#confirmation {
        width: 100%;
    }

    input#new-password {
        padding-left: 0;
    }

    #locales_list {
        display: none;
    }

    #mobilelocalemenu {
        display: inline-block;
    }

    #external-auth-container,
    #select_users_option_block {
        text-align: center;
        padding-bottom: 0;
    }

    #external-auth-container .or-separator,
    #select_users_option_block .or-separator {
        background: none;
        text-align: left;
        display: inline-block;
        width: auto;
        vertical-align: middle;
        margin-bottom: 8px;
    }

    #external-auth-container .external-auth-items {
        width: auto;
        min-width: auto;
        vertical-align: middle;
        text-align: center;
        margin-bottom: 8px;
    }

    #external-auth-container .external-auth-btn {
        width: 30px;
        height: 30px;
        text-align: center;
        padding-top: 0;
        margin-left: 8px;
    }

    #external-auth-container .external-auth-btn .external-auth-btn-label {
        display: none;
    }

    #external-auth-container .or-separator-secondary-label,
    #select_users_option_block .or-separator {
        display: inline-block;
    }

    #external-auth-container .external-auth-icon {
        margin: 0;
        width: 22px;
        height: 22px;
    }

    .image-wrapper {
        min-width: 50px;
        min-height: 50px;
    }

    .copyright {
        margin: 0;
    }

    #select_user_form {
        max-width: 500px;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .button-wrapper {
        display: block;
        float: none;
        border-bottom: 1px solid #ccc;
    }

    .button-wrapper button {
        width: 100%;
        padding: 0;
        text-align: left;
    }

    .button-wrapper button img {
        display: inline-block;
        width: 40px;
    }

    .button-wrapper .text-content,
    .button-wrapper .link-extra-account {
        display: inline-block;
        vertical-align: middle;
        font-size: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        white-space: inherit;
        margin: auto 0;
        padding: 0;
        vertical-align: middle;
        width: 100%;
    }

    .image-wrapper {
        width: 16%;
    }

    .text-wrapper {
        width: 80%;
    }

    #select_users_option_block .controls.external-auth-items {
        margin: 0 0 8px;
        min-width: 0;
        padding: 0;
        vertical-align: middle;
        width: auto;
    }

    .btn {
        padding: 0;
    }

    .btn .external-auth-select {
        padding: 7px;
        margin-left: 5px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #locale-container {
        height: auto;
        min-height: 245px;
        width: 100%;
    }
    .scroller {
        max-height: none;
    }

    .security_policy #login-status {
        width: 100%;
        padding: 0;
    }

    .small-size #login-status {
        padding: 5px 10px 5px 5px;
        width: 365px;
    }

    #security-container {
        width: 100%;
    }

    #security-sub-container {
        width: 100%;
    }
}

div.controls {
    display: inline-block;
}

.btn-primary,
.btn-secondary,
.btn-default,
input.btn-primary,
input.btn-secondary,
input.btn-default {
    border-style: solid;
    border-radius: 4px;
}

.btn-primary,
.btn-default,
input.btn-primary,
input.btn-default {
    background-color: #428bca;
    border-color: #357ebd;
    color: #ffffff;
}

.btn-secondary,
input.btn-secondary {
    background-color: #ffffff;
    border-color: #666666;
    color: #333333;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
input.btn-primary:hover,
input.btn-primary:focus,
input.btn-primary:active,
input.btn-default:hover,
input.btn-default:focus,
input.btn-default:active {
    cursor: pointer;
    background-color: #3276b1;
    border-color: #285e8e;
    color: #ffffff;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus,
input.btn-secondary:hover,
input.btn-secondary:active,
input.btn-secondary:focus {
    cursor: pointer;
    background-color: #ebebeb;
    border-color: #666666;
    color: #333333;
}

.btn-primary.disabled,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled:hover,
button[disabled].btn-primary,
input[type="submit"][disabled].btn-primary,
input[type="button"][disabled].btn-primary,
input[type="reset"][disabled].btn-primary,
.btn-default.disabled,
.btn-default.disabled:focus,
.btn-default.disabled:active,
.btn-default.disabled:hover,
button[disabled].btn-primary,
input[type="submit"][disabled].btn-default,
input[type="button"][disabled].btn-default,
input[type="reset"][disabled].btn-default {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: #428bca;
    border-color: #357ebd;
}

.btn-secondary.disabled,
.btn-secondary.disabled:focus,
.btn-secondary.disabled:active,
.btn-secondary.disabled:hover,
button[disabled].btn-secondary,
input[type="submit"][disabled].btn-secondary,
input[type="button"][disabled].btn-secondary,
input[type="reset"][disabled].btn-secondary {
    cursor: not-allowed;
    opacity: 0.5;
}

/**
 * Angular base styles
 */

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

@import (inline) "libraries/fontawesome/css/all.css";
@import (inline) "libraries/cjt2-dist/cjt2.css";
@import "cpanel/resetpass.less";