* 
{
	font-size: 11px;
	font-family: Arial, Verdana, sans-serif;
	margin: 0px;
}
body 
{
	font-size: 11px;
	background-color: #e3e3e3;
	margin: 0;
	text-align: center;	
}
.ext-webkit .x-btn-text,
.ext-chrome .x-btn-text
{
    padding: 1px 6px;
}
.x-panel-body
{
	background-color: transparent;
}
.webui-not-supported-msg
{
    background-color: #F0F0F0;
    border: 1px solid #8F8F8F;
    text-align: left;
    margin: 0 auto;
    padding: 15px 8px;
}
.webui-not-supported-msg .x-panel-body
{
    font-size: 12px;
    text-align: justify;
    line-height: 1.5;
}
#webui_login_chpass_mainpanel 
{
	background: url(/chpass/login_chpass_bg.png) no-repeat center top;
}
#webui_login_twofa_mainpanel
{
    background: url(/twofa/login_small.png) no-repeat center top;
}
#webui_login_mainpanel 
{
	background: url(/images/login_small.png) no-repeat center top;
}
.webui_login_mainpanel 
{
	margin: 0 auto;     /* top/bottom: 0  left/right: auto — explicit centering */
	left: auto;         /* cancel any left offset ExtJS may inject              */
 	text-align: left;
	vertical-align: middle;
	display: block;
}

.webui_version_hbox {
	color: #cd7393; 
	font-size: 12px;
	margin: 144px 0 0 0;
} 

#version_toolbar_portal {
	text-align: right;
	padding-right: 4px;
	font-size: 12px;
	background-color: #1f2a3d;
}

#login-version {
	font-size: 12px;
	font-weight: bold;
	background-color: #1f2a3d;
}

.banner-msg-text{
  color: #2F3D5F;
    font-weight: bold;
    padding-bottom: 4px; 
}
#hostname_caption_id
{
    text-align: center;
    font-weight: bolder; 
    color: #cd7393;
    margin: 16px 10px 0px 10px;
}
 .banner-msg-text,
#hostname_caption_id   /* deal with overflow */
{
	overflow-wrap: break-word;
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
} 
.webui_login_mainpanel .webui_login_chpass_banner
{
    font-weight: bold;
    margin-bottom: 20px;
}
.ext-ie .webui_login_mainpanel .webui_login_chpass_banner 
{
    margin-bottom: none;
}
.webui_login_mainpanel .webui_login_twofa_banner
{
    margin-bottom: 20px;
    margin-left: 75px;
    font-size: 14px;
    text-align: center;
    width: 200px;
}
.ext-ie .webui_login_mainpanel .webui_login_twofa_banner
{
    margin-bottom: none;
}

.webui_login_mainpanel .webui_login_twofa_failure
{
    font-weight: bold;
    margin-bottom: 20px;
}
.ext-ie .webui_login_mainpanel .webui_login_twofa_failure
{
    margin-bottom: none;
}
.webui_login_mainpanel form 
{
	background-color: transparent;
}
.webui-login-label
{
    color: #17233F;
    margin-bottom: 10px;
}
.webui_login_mainpanel .x-btn-noicon .x-btn-small .x-btn-text 
{
    height: auto;
}
.ext-chrome .x-btn-text
{
    padding: 1px 6px;
}
.webui_login_mainpanel .x-form-field 
{
    font: inherit;
}
.webui_login_mainpanel .login-error
{
    color: red;
    margin-left: 75px;
	padding-top: 5px;
    display: block;
}
.login_chpass-error
{
    color: red;
    display: block;
}
.login_twofa-error
{
    color: red;
    display: block;
}
.webui_login_mainpanel .webui_login_form 
{
    padding: 30px 18px 0px 30px;
}

.banner-msg-wrapper .info_icon{
  background: url('/login/info.png') no-repeat;
}

.require_twofa .require_twofa_icon{
    background:  url(/twofa/require_twofa.png) no-repeat;

}

#webui_login_chpass_form
{
   padding: 20px 15px 10px 20px; 
}
.ext-ie #webui_login_chpass_form
{
   padding: 8px 15px 8px 20px; 
}
#webui_login_twofa_form
{
    padding: 20px 15px 10px 20px;
}
.ext-ie #webui_login_twofa_form
{
    padding: 8px 15px 8px 20px;
}

.ext-ie .x-panel-btns
{
	padding: 0px;
}

.webui_login_logo_panel 
{
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(/login/mark-word-icon.png) no-repeat left top;
}

.webui_login_hbox
{
	padding: 10px 10px 0px 10px;
}

.webui-login-html5-qtip
{
    background-color: #E7EEF7;
    border: 1px solid #9F9F9F;
}
::-ms-reveal {
    display: none;
}
 .login_toolbar 
{
   background-color: transparent;
   border: none;
}
 
.login_button
{		
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
   width: 110px;
   height: 30px;
   background-image: none;
   background-color: #17233F;/* green button */
   margin-top: 0px;

}

.login_button .login_button_icon {
  background: url('/login/login_arrow.png');
	padding-right: 21px !important;
}

.login_button .x-btn-text
{	
   color: white !important;
   font-size: 15px;
   text-align: center;
}
.login_button:hover {
   background-color: #1d2c50;
}
.login_button:active {
   background-color: #17233F;
}
/* #version_separator{
	color: white;
} */

.setup_twofa_button
{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width: 50px;
    height: 25px;
    background-image: none;
    background-color: #17233F;/* blue button */
    margin-right:95px
}


.setup_twofa_button .x-btn-text
{
    color: white !important;
    font-size: 12px;
    text-align: center;
}
.setup_twofa_button:hover {
    background-color: #1d2c50;
}
.setup_twofa_button:active {
    background-color: #17233F;
}

 #bottom_text {
    margin-top: 20px;
} 

.tooltip {
    position: absolute;
    display: inline-block;
    margin-left:2px

}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 90px;
    background-color: #fff;
    color: #1f2a3d;;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -90px;
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 10px;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: 33px;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* ── Icon + placeholder fields ────────────────────────────────────────────── */
/* itemCls puts the icon class on the .x-form-item wrapper div (same pattern   */
/* as .info_icon and .login_button_icon used elsewhere in this codebase).      */
/* A ::before pseudo-element on .x-form-element overlays the icon on the left  */
/* of the input.  Images are base64-encoded from:                              */
/*   swirl/images/icons/icon-user.svg                                          */
/*   swirl/images/icons/icon-lock.svg                                          */
/*   swirl/images/icons/icon-shield.svg                                        */
.icon-item .x-form-element {
    position: relative;
}
.icon-item .x-form-element input {
    padding-left: 28px !important;
}
.icon-item .x-form-element::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}
.icon-user-item .x-form-element::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzlhYWFjNCI+CiAgPGNpcmNsZSBjeD0iOCIgY3k9IjUuNSIgcj0iMi44Ii8+CiAgPHBhdGggZD0iTTIgMTQuNWMwLTMuMyAyLjctNiA2LTZzNiAyLjcgNiA2IiBmaWxsPSIjOWFhYWM0Ii8+Cjwvc3ZnPgo=");
}
.icon-password-item .x-form-element::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjgiIHJ4PSIxLjUiIGZpbGw9IiM5YWFhYzQiLz4KICA8cGF0aCBkPSJNNSA3VjUuNWEzIDMgMCAwIDEgNiAwVjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzlhYWFjNCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==");
}
.icon-otp-item .x-form-element::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTggMS41TDIuNSA0djRjMCAzLjIgMi4zIDYuMiA1LjUgNyAzLjItLjggNS41LTMuOCA1LjUtN1Y0TDggMS41eiIgZmlsbD0iIzlhYWFjNCIvPgo8L3N2Zz4K");
}