/*************************/
/**        EN-US        **/
/*************************/

/** Instructions:                     **/
/** 1. Mobile and above style         **/
/** 2. Tablet and above style         **/
/**    Use @media (min-width: 768px)  **/
/** 3. Desktop and above style        **/
/**    Use @media (min-width: 992px)  **/

.tnaLogin { text-align: center; }
    .tnaLogin .styledInput input{text-align:left;}
    .tnaLogin .connectForm h1 {
        font: 32px/36px 'RobotoSlab-Bold', Arial, Helvetica, sans-serif;
    }
.tnaLogin .userImg { right: auto; left: calc(50% - 40px); }
.tnaLogin .nav-tabs > li > a { border-radius: 0px; margin-right: 0px;  padding: 15px 0 0 30px; }
.tnaLogin .forgatPassword { text-align: left; }
.tnaLogin .loginBtn { text-align: center; }
.tnaLogin .stepPlaceHolder .connectForm h2.NoMarginTop {  text-align: left; direction: ltr; }
.tnaLogin .loginBtnStep.loginBtnFinish {width:120%;margin-left:-30px;}
 .LegalTermsContent{text-align:left;}

.tnaLogin .loginErrorMsgWrapper { top: -8px; }
.tnaLogin .error:before { left: auto; right: 11%; }
.tnaLogin .captchaField.error:before{right:1%;left:auto;}
.tnaLogin .valid:after { right: 50px; left: auto; }
.tnaLogin .captchaField.valid:after{right:0px}
.tnaLogin .nav-tabs > li > a {  border-left: 1px solid #b5b7b9;}
.tnaLogin .idmodeRadioButtons label { margin-left: 8px; margin-bottom: 0px; }
.tnaLogin .connectForm h2 { text-align: left; font: 20px/24px "PoetiAAA700", Arial, Helvetica, sans-serif;}
.tnaLogin .loginBtnStep { width: auto; }
.tnaLogin .CancelStep2 { display: inline-block;  }
.tnaLogin .info { margin-right: 0; margin-left: -4px;}
.tnaLogin #home .errorMsg ul{top:60px;text-align:left;}
.tnaLogin #home .connectFormStep2 .valid:after{right:0px;left:auto} 

.tnaLogin #home .stepPlaceHolder .connectFormStep2 .errorMsg ul{top:120px;}
.tnaLogin #home .stepPlaceHolder .connectFormStep2 .error:before{right:0%;left:auto}
.bg-login .TopStrip .bojCloseButton{
    right:10px;
    left:auto;
}
.bg-login .TopStrip .bojDownloadDescription{
    margin-right:5px;
    margin-left:10px;
}
.bg-login .TopStrip .bojDownloadAppButton{
    padding:12px 12px 11px;
}
.bg-login .TopStrip .bojDownloadAppButton {
width:90px;
}
    /*modal styles*/
    .modal-content .inner-wrapper .ico {
    top: -5px;
    right: auto;
    left: -35px
}
.modal-content .inner-wrapper p{margin-left:70px;margin-right:0px;text-align:left;}
.modal-content .inner-wrapper footer{text-align:right;}
.modal-content .inner-wrapper h3{text-align:left;margin:0 -20px 5px 70px;}
.modal-content .btn-close.English{right:-10px !important}

#hide-password-chars {
    right: initial;
    left: 0;
}


@media (min-width:495px){
    .tnaLogin #home .stepPlaceHolder .connectFormStep2 .errorMsg ul { top: 95px; }
}
@media (min-width: 768px) {
    .tnaLogin { text-align: left; }
    .tnaLogin .connectForm h1 { font-size: 28px; line-height: 40px; }
    .tnaLogin .stepPlaceHolder .connectForm h2.NoMarginTop{margin-top:15px;}
    .tnaLogin .userImg { right: auto; left: -50px; }
    .tnaLogin .loginBtn { text-align: right; }
    .tnaLogin .info .link { text-align: left; }
    .tnaLogin .info .title { font: 32px/32px 'RobotoSlab-Bold', Arial, Helvetica, sans-serif; }
    .tnaLogin .loginBtnFinish{width:100%;margin-left:-85px}
    #pnlCaptcha + .loginBtn input{height:32px;}

    .tnaLogin #home .stepPlaceHolder .connectFormStep2 .errorMsg ul{top:168px}
    .tnaLogin .loginErrorMsgWrapper { top: -5px; line-height: 12px; }
    .tnaLogin .error:before { right: 19%; left: auto; }
    .tnaLogin #home .errorMsg ul{top:0px}
     .tnaLogin #home .connectFormStep2 .valid:after{right:50px;left:auto}
    .modal-content .inner-wrapper h3,.modal-content .inner-wrapper p{margin-left:5px}
     .modal-content .inner-wrapper p{max-width:364px;}
    .tnaLogin .errorMsg ul{font-size:16px;}
    .modal-content .inner-wrapper{padding:52px 50px 62px 135px}
    .modal-content .inner-wrapper .ico { top:62px;left:15px;right:auto}
    .tnaLogin #home .stepPlaceHolder .connectFormStep2 .error:before{right:14%;left:auto}
    .tnaLogin .connectForm { padding: 50px 75px 15px;}
}




@media (min-width: 992px) {
    .tnaLogin .connectForm h1 { font-size: 44px; line-height: 50px; }
    .tnaLogin .info .title { font-size: 45px; line-height: 40px; }
    .tnaLogin .loginErrorMsgWrapper { top: -10px; font-size: 15px; line-height: 18px; }
    .tnaLogin .error:before { right: 15%; left: auto; }
    .tnaLogin .captchaField.error:before{right:15%}
    .tnaLogin .valid:after { left: auto; right: 65px; }
     .tnaLogin .loginBtnSendCode { margin-left: 0; margin-right: 90px; }
    .LegalTermsContent { min-height: 160px; margin-bottom: 20px; padding: 4px 15px; overflow: auto; max-height: 160px; margin-top: 35px;}
    .IdRadioButtons .RadioDot1 { left: 16px;  right: initial;}
    .IdRadioButtons .RadioDot2 { left: 68px;}
    .tnaLogin .lblIdmodeRadioButtons, .tnaLogin .lblForm{width: 100%;}
    .tnaLogin .IdRadioButtons { margin-top: 30px; }
    .tnaLogin .nav-tabs > li.active > a { font: 18px/20px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif; }
    .tnaLogin .nav-tabs > li > a {font: 18px/18px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif;}
    .tnaLogin .connectForm.legalTerms{ padding-bottom:0px; }
    .tnaLogin .loginBtn input{
        margin-left:255px;
    }
    .tnaLogin .loginBtn.loginBtnFinish input {
        margin-left: 0px;
        margin-right:90px;
    }
    .tnaLogin .loginBtn.loginBtnStep .CancelStep2 
    {
        margin-left:82px;
    }
    .tnaLogin .loginBtn.loginBtnFinish .CancelStep2
    {
        margin-left:90px;
    }
    
}

@media (max-width:992px)
{
    .tnaLogin .loginBtnSendCode { margin-left: 0; margin-right: 90px;margin-top: 0; }
    .tnaLogin .IdRadioButtons {margin-top: 18px;}
    .tnaLogin .nav-tabs { width: 429px;}
    .IdRadioButtons .RadioDot1 { left: 16px; right: initial;  top: 8px;}
    .IdRadioButtons .RadioDot2 { left: 68px;}
}

@media (max-width:768px)
{
    .TopStrip { padding: 5px 5px;}
     .tnaLogin .nav-tabs { width: 82%; margin: 0 auto; }
    .tnaLogin .nav-tabs > li > a { border-left: 0; padding: 15px 0 0 5px; }
    .tnaLogin .connectForm { padding: 35px 25px 10px;}
    .tnaLogin .IdRadioButtons { margin-top: 0; }
    .btn-question { left: initial; right: -10px; }
    .tnaLogin .loginBtnSendCode { margin-right: 0;  margin-top: 90px; }
    .tnaLogin .lblIdmodeRadioButtons, .tnaLogin .lblForm {text-align: left;}
    .tnaLogin .description { text-align: left;}
    .tnaLogin .connectForm h2 {font: 18px/22px "PoetiAAA700", Arial, Helvetica, sans-serif;}

}

@media (max-width:510px) {
    .tnaLogin .nav-tabs > li > a { padding: 15px 0 0 5px; text-align:center;}
    .tnaLogin .nav-tabs > li.active > a {text-align:center;}
}

@media (max-width: 450px){

 .tnaLogin .nav-tabs > li > a {text-align: center; font: 14px/16px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif; }

 .tnaLogin .connectForm { padding: 20px 15px 5px; }
 .tnaLogin .oginBtnFinish input { width: auto !important; }
  .tnaLogin .connectForm h2 {font: 16px/20px "PoetiAAA700", Arial, Helvetica, sans-serif;}
  .tnaLogin .nav-tabs > li.active > a,.tnaLogin .nav-tabs > li.active > a:hover,.tnaLogin .nav-tabs > li.active > a:focus {  font:14px/16px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif; }
}

@media (max-width:370px)
{
    
    .tnaLogin .joinSite { padding: 10px 0 30px; }
    .tnaLogin .connectForm { padding: 5px 15px 9px; }
    .tnaLogin .nav-tabs { width: 90%; margin: 0 auto; }
    .tnaLogin .loginBtnSendCode { margin-right: 0; margin-top: 30px;}
    .tnaLogin .CancelStep2 {  margin-right: 10px;}
    .tnaLogin .CancelStep2 a { font: 22px/24px 'AlmoniDLAAA700', Arial, Helvetica, sans-serif;}
    
}

@media (max-width:340px)
{
.tnaLogin .nav-tabs > li > a { padding: 15px 0 0 0px;}
 
}