.ahmmfa_modal,
.ahmmfa_loading{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overflow-y: auto;
}
.ahmmfa_wrapper,
.ahmmfa_loadingWrapper{
    background-color: #fff;
    border-radius: 5px;
    margin: 15px;
    display: inline-block;
}
.ahmmfa_loadingWrapper{
   padding: 15px;
}
.ahmmfa_header,
.ahmmfa_body,
.ahmmfa_footer{
    padding: 15px;
}

@keyframes qrcodeLoading_after {
   0%   {opacity: 0; height: calc(0% + 0px); width: calc(0% + 0px);}
   1%   {opacity: 1; height: calc(0% + 0px); width: calc(0% + 0px);}
   50%  {opacity: 1; height: calc(100% + 10px); width: calc(0% + 0px);}
   100% {opacity: 1; height: calc(100% + 10px); width: calc(100% + 10px);}
}
@keyframes qrcodeLoading_before {
   0%   {opacity: 0; height: calc(0% + 0px); width: calc(0% + 0px);}
   1%   {opacity: 1; height: calc(0% + 0px); width: calc(0% + 0px);}
   50%  {opacity: 1; height: calc(100% + 10px); width: calc(0% + 0px);}
   100% {opacity: 1; height: calc(100% + 10px); width: calc(100% + 10px);}
}

.ahmmfa_qrcode_image{
    width: 260px;
    height: 260px;
    background-color: #fff;
    background-size: calc(100% - 15px);
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    border: 5px #ccc solid;
    margin-top: 15px;
    position: relative;
}
.ahmmfa_qrcode_image:before{
   content: '';
   position: absolute;
   bottom: -5px;
   right: -5px;
   width: 0px;
   height: 0px;
   border-right: 5px #222 solid;
   border-top: 5px #222 solid;
   opacity: 0;
}
.ahmmfa_qrcode_image:after{
   content: '';
   position: absolute;
   top: -5px;
   left: -5px;
   width: 0px;
   height: 0px;
   border-left: 5px #222 solid;
   border-bottom: 5px #222 solid;
   opacity: 0;
}
.ahmmfa_qrcode_image.ahmmfa_qrcode_image_refreshed:after{
   animation-name: qrcodeLoading_after;
   animation-duration: 15s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
}
.ahmmfa_qrcode_image.ahmmfa_qrcode_image_refreshed:before{
   animation-name: qrcodeLoading_before;
   animation-delay: 15s;
   animation-duration: 15s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
}


.ahmmfa_otp_inputs {
   display: flex;
   flex-direction: row;
   justify-content: center;
   margin-bottom: 15px;
}
.ahmmfa_otp_input{
   margin-right: 15px;
}
.ahmmfa_otp_input:last-child{
   margin-right: 0px;
}
.ahmmfa_otp_inputs_guidance{
   margin-bottom: 15px;
   text-align: center;
   font-weight: bold;
}
.ahmmfa_otp_input input{
   width: 34px;
   height: 34px;
   text-align: center;
}
.ahmmfa_otp_input input:focus {
   outline: none;
   box-shadow: none;
}
.ahmmfa_header{
   border-bottom: 1px #ccc solid;
   font-weight: bold;
}
.ahmmfa_footer{
   display: flex;
   justify-content: stretch;
   align-items: center;
   border-top: 1px #ccc solid;
   text-align: right;
}
.ahmmfa_footer_left,
.ahmmfa_footer_right{
   width: 100%;
}
.ahmmfa_footer_left{
   text-align: left;
}
.ahmmfa_footer_right{
   text-align: right;
}
.ahmmfa_downloads{
   display: flex;
   justify-content: center;
}
.ahmmfa_download_button{
   display: inline-block;
   width: 180px;
   height: 65px;
   background-color: #000;
   border-radius: 5px;
   margin: 15px;
   padding: 15px;
}
.ahmmfa_download_button:hover{
   background-color: #222;
}
.ahmmfa_download_button:first-child{
   margin-right: 0px;
}
.ahmmfa_wrapper_row_spacer{
   border-top: 1px #ccc solid;
}

.ahmmfa_download_playstore,
.ahmmfa_download_appstore{
   width: 100%;
   height: 100%;
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
}
.ahmmfa_download_playstore{
   background-image: url('img/playstore.png');
}
.ahmmfa_download_appstore{
   background-image: url('img/appstore.png');
}
 
.ahmmfa_otp_alert{
   color: #F01D26;
   text-align: center;
   padding: 15px;
   border-top: 1px #ccc solid;
}

.ahmmfa_modal_close,
#ahmmfa_otp_submit,
.ahmmfa_modal_logout {
   padding: 10px 15px;
}
#ahmmfa_otp_submit{
   color: #fff;
   background-color: #007bff;
   border-color: #007bff;
}
#ahmmfa_otp_submit:disabled{
   color: #fff;
   background-color: #007bff;
   border-color: #007bff;
}
#ahmmfa_otp_sendMail {
   display: inline-block;
   color: #007bff;
   background: transparent !important;
}
#ahmmfa_otp_downloadInstruction {
   display: inline-block;
   color: #007bff;
   background: transparent !important;
}


.ahmmfa_body{
   position: relative;
}
.ahmmfa_qrcode_guidance {
   position: absolute;
   top: 0px;
   left: 100%;
   width: 400px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.ahmmfa_qrcode_guidance_text {
   padding: 10px;
   background: #fff;
   text-align: left;
   line-height: normal;
   border-radius: 0px 5px 5px 0px;
   padding-left: 20px;
   border-left: 1px #ccc solid;
}
.ahmmfa_qrcode_guidance_text * {
   position: relative;
   z-index: 2;
}
.ahmmfa_qrcode_guidance_text:after {
   content: '';
   position: absolute;
   width: 50px;
   height: 50px;
   display: inline-block;
   background: #fff;
   top: calc(50% - 25px);
   right: 100%;
   transform: rotate(45deg);
   transform-origin: center;
   margin-right: -25px;
   border-bottom: 1px #ccc solid;
   border-left: 1px #ccc solid;
   z-index: 1 !important;
}
.ahmmfa_qrcode_guidance_text li{
   margin-bottom: 10px;
}

.ahmmfa_modal {
   overflow: hidden;
   max-height: 100%;
   min-height: 100%;
   overflow-y: auto;
}
.ahmmfa_content{
   max-height: 100%;
}


.ahmmfa_qrcode_link {
   padding: 6px 12px;
   background: #337ab7;
   color: #fff !important;
   border-radius: 3px;
   margin-top: 10px;
   display: none;
   text-decoration: none !important;
}
.ahmmfa_qrcode_link:hover{
   background: #23527c;
   color: #fff !important;
   text-decoration: none !important;

}
.ahmmfa_qrcode_link i {
   margin-right: 12px;
}
.ahmmfa_qrcode_image_icon {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}
.ahmmfa_qrcode_image_icon i {
   font-size: 40px;
   color: #cccccc;
   opacity: 0;
}
.ahmmfa_qrcode_image_icon:hover i {
   opacity: 1;
}
.ahmmfa_body_wrapper{
   display: flex; 
   align-items: center; 
   justify-content: center;
   text-align: center;
}

@media only screen and (max-width: 1200px) {

   .ahmmfa_wrapper{
      margin-left: -400px;
   }
}
@media only screen and (max-width: 1024px) {
   .ahmmfa_body_wrapper{
      flex-direction: column;
   }


}
@media only screen and (max-width: 880px) {
   .ahmmfa_body_wrapper{
      flex-direction: column;
   }
   
   .ahmmfa_qrcode_link {
      display: inline-block;
   }
   .ahmmfa_wrapper{
      margin-left: 15px;
   }
   .ahmmfa_qrcode_guidance{
      position: relative;
      left: 0px;
      width: 100%;
      margin-left: -15px;
      margin-right: -15px;
   }
   .ahmmfa_qrcode_guidance_text{
      padding-left: 10px;
      border-left: none;
      border-bottom: 1px #ccc solid;
      border-radius: 0px;
   }
   .ahmmfa_qrcode_guidance_text:after{
      display: none;
   }
}
@media only screen and (max-width: 500px) {
   .ahmmfa_wrapper,
   .ahmmfa_content{
      margin: 0px;
      width: 100%;
   }
   .ahmmfa_content{
      padding: 20px;
   }
}