/**
 * @copyright (C) 2004-2021 SICOM Systems Inc
 *            1684 S. Broad Street, Suite 300
 *            Lansdale, PA 19446
 *            215-489-2500, FAX: 215-489-2769
 */

html {
    overflow: auto;
}

div.loginmessage + div.link {
    margin-top: 10px;
}

div#login_inner_container .loginmessage + a {
    margin-top: 10px;
}

#login_outer_container {
    width: 647px;
    height: 400px;
    margin: 0 auto;
}

#login_outer_container.wide {
    width: 900px;
}

#login_outer_container.tall {
    height: 640px;
}

#login_inner_container {
    background-color: rgba(255, 255, 255, 1);
    padding: 10px 10px 60px 10px;
    color: black;
    border-radius: 8px;
    height: 315px;
}


#login_inner_container.wide {
    width: 940px;
    height: 680px;
}

#login_inner_container.tall {
    height: 570px;
    width: 675px;
}

#login_inner_container.mfa {
    height: 330px;
}

#login_inner_container input {
    font-size: 13px;
    color: black;
}

#login_inner_container label {
    font-weight: bold;
    display: block;
    margin-top: 11px;
}

#login_inner_container input[type='text'],
#login_inner_container input[type='password'] {
    display: block;
    width: 236px;
    height: 15px;
    padding: 12px 16px;
    border: 1px solid black;
    background-color: white;
    margin: 2px 0;
}


#login_inner_container input[type='text']:focus,
#login_inner_container input[type='password']:focus {
    box-shadow: 0 0 10px 1px #ffa200;
    border: 1px solid #ffa200;
}

/* fade effect for input focus */
#login_inner_container input[type='text'],
#login_inner_container input[type='password'] {
    -webkit-transition: box-shadow .2s ease;
    -moz-transition: box-shadow .2s ease;
    -ms-transition: box-shadow .2s ease;
    -o-transition: box-shadow .2s ease;
    border-radius: 8px;
    border: 1px solid #ABC6D8;
    background: #FCFCFC;
}

#login_inner_container.wide input {
    width: 318px;
}

#login_inner_container.tall input {
    width: 318px;
}


#login_inner_container select {
    width: 19em;
}

#forgot_pw {
    cursor: pointer;
    position: relative;
    z-index: 10;
}

#register_now {
    margin-bottom: -1px;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

#loginbutton, #mfa_submit {
    font-family: 'DM Sans', 'Open Sans', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 12px;
    border-radius: 9999px;
    background-color: rgba(38, 42, 255, 1);
    color: rgba(252, 252, 254, 0.9);
    width: 310px;
    margin-top: 5px;
}

#loginbutton.inactive {
    background-color: #AAA!important;
}

#loginbutton.active {
    cursor: pointer;
}

#loginbutton.active:hover {
    background-color: rgba(8, 12, 225, 1)!important;
}

#pw_reset_submit_button {
    font-family: 'DM Sans', 'Open Sans', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 32px;
    border-radius: 9999px;
    background-color: rgba(38, 42, 255, 1);
    color: rgba(252, 252, 254, 0.9);
    width: 310px;
    margin-top: 80px;
}

#pw_reset_submit_button.inactive {
    background-color: rgba(87, 88, 92, 1);
}

#pw_reset_submit_button.active:hover {
    background-color: rgba(8, 12, 225, 1);
}

#login_inner_container a {
    font-size: 13px;
    display: inline-block;
}

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

.logo_login {
    width: 471px;
    height: 70px;
    background: transparent url('images/company_logo_login.png') no-repeat top left;
    margin: 130px auto 0 auto;
}

.logo_login.dev {
    background: transparent url('images/company_logo_login_dev.png') no-repeat top left;
}

#loginfor {
    font-weight: normal;
    font-size: 14px;
    background-color: rgba(229, 239, 255, 1);
    border: 1px solid rgba(148, 180, 255, 1);
    border-radius: 4px;
    padding: 10px;
    margin: 20px;
    text-align: center;
}

#loginfor span {
    font-weight: bold;
    display: block;
}

#loginform {
    padding-left: 315px;
    height: 225px;
}



.tv_logo {
    margin: 0 0 -96px 35px;
    position: absolute;
}

.tv_logo.bk,
.tv_logo.bk .tv_shadow {
    background-image: none !important
}

.tv_shadow {
    background-image: url('images/tv_shadow.png');
    width: 196px;
    height: 129px;
    position: relative;
    z-index: -1;
    bottom: 16px;
    right: 17px;
}

.tv_logo img {
    width: 250px;
    height: 150px;
}

div.tv_logo.xe {
    margin: 15px 0 0 100px;
    position: absolute;
}

div.tv_logo.xe img {
    width: 96px;
    height: 125px;
}

.tv_logo img.stop {
    width: 80px;
    height: 80px;
    margin: 5px 37px 5px 37px;
}

.loginmessage {
    padding: 6px 10px 11px 10px;
}

.loginmessage.notice {
    color: #000000;
    width: 266px;
    background-color: rgba(229, 239, 255, 1);
    border: 1px solid rgba(148, 180, 255, 1);
    border-radius: 4px;
    position: absolute;
    margin-top: -125px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center;
}

.loginmessage.error {
    color: #FFFFFF;
    background-color: #761F27;
    position: absolute;
    width: 266px;
    margin-top:-100px;
    margin-left: -300px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border-radius: 8px;
}

.wide .loginmessage.error {
    width: 900px;
}

.pwresetmessage.error {
    color: #FFFFFF;
    background-color: #761F27;
    position: absolute;
    width: 266px;
    margin-top: -52px;
    margin-left: -300px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border-radius: 8px;
    padding: 6px 10px 11px 10px;
}

.initialloginmessage.error {
    color: #FFFFFF;
    background-color: #761F27;
    position: absolute;
    width: 266px;
    margin-top: -52px;
    margin-left: -300px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border-radius: 8px;
    padding: 6px 10px 11px 10px;
}

.mfamessage.error {
    color: #FFFFFF;
    background-color: #761F27;
    position: absolute;
    width: 266px;
    margin-top: -115px;
    margin-left: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border-radius: 8px;
    padding: 6px 10px 11px 10px;
}

#question_hint {
    margin-top: 135px;
    width: 266px;
    float: left;
    border-top: #FFFFFF 1px solid;
    color: #FFFFFF;
    margin-left: 380px;;
    position: absolute;
    padding-top: 10px;
    font-size: 12px;
}

#question_hint ul {
    margin-left: 2em;
    font-size: 12px;
    margin-right: 20px;
}

#password_hint {
    margin-top: -20px;
    width: 266px;
    float: left;
    border-top: #234E86 1px solid;
    margin-left: 380px;
    position: absolute;
    color: #FFFFFF;
}

#password_hint ul,ol {
    margin-left: 2em;
    font-size: 12px;
    margin-right: 20px;
}

#password_rules {
    font-size: 12px;
}

#password_rules .message {
    width: 236px;
    margin-left: 15px;
    padding-top: 2px;
}

#password_rules li .message {
   margin-left: 0;
}


.mark {
    float: left;
    width: 18px;
}

#answers_match .message, #passwords_match .message {
    margin-left: 22px;
    padding-top: 2px;
    font-size: 12px;
}

li .message {
    margin-left: 0;
}

#password_input {
    width: 266px;
    float: left;
}

#question_input {
    margin-top: 1.3ex;
    width: 266px;
    float: left;
}

#question_input select {
    width: 350px;
    padding: 12px 10px;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #ABC6D8;
    font-size: 13px;
    margin-top: 10px;
}

.disabled {
    background: #ccc !important;
    color: graytext !important;
}

.clear {
    clear:both;
}

div.lang_selector {
    position: relative;
    display: flex;
    justify-content: center;
}

div.lang_selector * {
    position: relative;
}

div.lang_selector select {
    width: 200px;
    padding: 12px 16px;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #ABC6D8;
    font-size: 16px;
    margin-top: 10px;
}

.clear {
    clear: both;
}

#password_strength {
    height: 10px;
    margin-top: 50px;
    width: 252px;
}

#mfa_instructions {
    margin: 5px 0px;
    margin-left: 315px;
}

#masked_email {
    color: #00BFFF;
}

#login_button_container,
#mfa_submit_container {
    padding: 5px 0px 10px 0px;
}

#link_container {
    color: #FFFFFF;
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

#mfa_submit_container {
    margin-left: 315px;
}

#mfa_logout {
    float: right;
}

#critical_error {
    margin-top: 15px;
}

#mfa_title {
    margin-top: 15px;
    margin-left: 315px;
}

label[for="mfa_token_input"] {
    margin-left: 315px;
}

#mfa_token_input {
    margin-left: 315px!important;
}

#resend_code {
    margin-left: 315px;
}

#mfa_submit.inactive {
    background-color: #AAA;
}

#mfa_submit.active:hover {
    background-color: rgba(8, 12, 225, 1);
}

#mfa_logout_button {
    background-color: rgba(38, 42, 255, 1);
    color: rgba(252, 252, 254, 0.9);
    border: none;
    border-radius: 9999px;
    padding: 10px 30px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    margin-left: 5px;
    margin-top: -17px;
    margin-bottom: 11px;
    width: 155px;
}

#mfa_logout_button:hover {
    background-color: rgba(8, 12, 225, 1);
}

#privacy_button, #privacy_button_login, #privacy_button_mfa {
    background-color: rgba(38, 42, 255, 1);
    color: rgba(252, 252, 254, 0.9);
    border: none;
    border-radius: 9999px;
    padding: 10px 30px;
    font-size: 14px;
    cursor: pointer;
    margin-left: 267px;
}

#privacy_button:hover, #privacy_button_login:hover, #privacy_button_mfa:hover {
    background-color: rgba(8, 12, 225, 1);
}

#privacy_button_login {
    margin-left: 0px!important;
    margin-top: -10px!important;
    padding: 16px 32px;
    font-size: 11px;
    font-weight: 700;
    width: 155px;
}

#privacy_button_mfa {
    margin-left: 315px!important;
    margin-bottom: 11px;
    margin-top: -17px!important;
    padding: 16px 32px;
    font-size: 11px;
    font-weight: 700;
    width: 190px!important;
}

#register_button {
    background-color: rgba(38, 42, 255, 1); /* Green background for privacy button */
    color: rgba(252, 252, 254, 0.9);           /* White text */
    border: none;             /* Remove border */
    border-radius: 9999px;       /* Rounded corners */
    padding: 10px 15px;       /* Padding for the button */
    font-size: 11px;          /* Font size */
    font-weight: 700;
    cursor: pointer;          /* Pointer cursor on hover */
    margin-left: 5px;        /* Space between buttons */
    margin-top: -13px;
    width: 155px;
}

#register_button:hover {
    background-color: rgba(8, 12, 225, 1);
}

a#mfa_info{
    margin-top: 0px;
    margin-left: 315px;
}

#mfa_logout_button {
    display: inline-block;
    padding: 16px 16px;
    background: rgba(38, 42, 255, 1);
    color: #fff;
    border-radius: 9999px;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    border: none;
    cursor: pointer;
}

#mfa_logout_button:hover {
    background-color: rgba(8, 12, 225, 1);
}

.loading-mask {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, .33);
    z-index: 100;
}

.loading-icon {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    border: 8px solid #ffa200;
    border-top: 8px solid rgba(256,256,256,0);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: loading-icon-spin 1s linear infinite;
    z-index: 101;
}

@keyframes loading-icon-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}