.midcontarea {
  max-width: 100% !important;
}
        .figure.img-center img {
          width: 100%;
          display: block;
          margin: auto;
        }
    
        body h1 {
          text-align: center !important;
          font-size: 32px;
        }
    
        body h2 {
          margin-top: 20px;
        }
    
        .register-area-form .register-form {
          background: none !important;
        }
    
        .register-area-form .register-form .login-footer2 {
          /* padding: 0; */
          padding: 20px 0 30px 0 !important;
          text-align: center;
          font-size: 18px;
          border-bottom: #00389338 solid 1px;
        }
    
        .howto-heading {
          display: flex;
          border-bottom: #003893 solid 1px;
        }
    
        .howto-heading h2,
        .howto-heading p {
          flex-flow: row;
        }

        .howto-main a {
color:#003893 !important
}
    
        .howto-heading h2 {
          flex: 20%;
          color: #003893 !important;
          /* border: #003893 solid 1px; */
          border-radius: 20px;
          text-align: center;
          background: #fff;
          padding: 15px 0;
        }
    
        .howto-active h2 {
          flex: 20%;
          color: #003893;
          border: #0c1d32 solid 1px;
          border-radius: 10px;
          text-align: center;
          background: #4095fd29;
          padding: 15px 0;
        }
    
        .howto-heading p {
          flex: 80%;
          line-height: normal !important;
          align-self: center;
          padding: 3px 20px;
          margin-bottom: 0px !important;
        }
    
        .howto-main {
          margin-top: 30px;
        }
    
        .howto-main .row:nth-child(2) {
          border: red solid 1px;
        }
    
        .howto-main .col-md-4 {
          padding: 0 20px 5px 20px;
        }
    
        .howto-main .step1-text p {
          line-height: 1.8em !important;
          margin-bottom: 20px;
        }
    
        .step1-text .list-group {
          border: #ffffff solid 1px;
          margin-bottom: 30px;
          font-size: 16px;
        }
    
        .step1-text .list-group li {
          padding: 15px 0;
          margin-left: 30px;
        }
    
        .step1-text .list-group .active {
          padding: 10px 20px;
          margin-left: 0px !important;
          text-align: center;
          background: #0c1d32 !important;
          color: #fff !important;
        }
    
        .howto-main .step2-text p {
    
          line-height: 1.8em !important;
          margin: 20px;
        }
        .step2-cta a{
      color: #fff !important;
        }
        .howto-main  .step2-cta a:hover{
          background: #f2a613 !important;
        }
        .howto-main .step2-cta,
        .howto-mobile .step2-cta {
          width: 100%;
          text-align: center;
          color: #fff !important;
          margin-top: 50px;
          margin-bottom: 40px
        }
    
    
        .howto-main .step2-cta a,
        .howto-mobile .step2-cta a {
          /* background: #003893 !important; */
          background: #003893 !important;
          padding: 20px 30px;
          color: #fff;
          border-radius: 5px;
        }
    
    
        .howto-mobile .step2-cta a {
          padding: 20px;
        }
    
        
        .howto-main .step3-text p {
    
          line-height: 1.8em !important;
          margin: 20px;
        }
    
        .howto-main .step3-text legend {
          margin-bottom: 0px !important;
          border: none !important;
        }
    
        .howto-main .step3-text .card {
          border: transparent;
          margin-bottom: 20px;
        }
    
        .howto-main .step3-text .card ul li {
          font-size: 16px;
        }
    
        .step2-text,
        .step3-text {
          opacity: .5;
        }
    
        .howto-active {
          cursor: pointer;
          background: #fdf6e9;
          border: #003893 solid 1px;
          border-radius: 20px;
          margin-top: 50px;
          height: max-content;
          padding-top: 0px !important;
    
        }
    
        .opacity-50 {
          opacity: 0.5;
        }
    
        .hover-inactive {
          border: 1px solid transparent;
          border-radius: 20px;
          background: none;
    
        }
    
    
        .hover-active {
          border: #003893 solid 1px !important;
          border-radius: 20px !important;
        }
    
    
        .step-inactive {
          background: none !important;
          color: #003893 !important;
          border: none !important;
        }
    
    
    
        .howto-step:hover .step2-text,
        .howto-step:hover .step3-text {
          opacity: 1;
        }
    
    
        .ms-slide-bgcont {
          border-radius: 10px !important;
        }
    
    
        i.fa-solid.fa-star {
          margin-right: 5px;
        }
    
        #qr_form .captcha-info .offset-lg-3.col-lg-9.pull-right{
          width: 100%;
          margin-left: auto;
        }
        #qr_form{
          background: none !important;
        }
    
        /***************STEPS MOBILE ACCORDION STYLE***************/
    
    
        .panel-title-row {
          display: flex;
          align-items: center;
          column-gap: 5px;
    
        }
    
        .step {
          width: 70px;
          border-radius: 2px;
          font-size: 1.5rem;
          color: #fff;
          text-align: center !important;
          background: #DBE7F5;
          /*change to your desired bg color*/
          transition: all .5s;
          outline: 2px solid #0C1D32;
          /*change to your desired border color*/
          color: #0C1D32;
          /*change to your desired color*/
          padding: 15px 7px;
        }
    
        .step-text {
    
          font-size: 15px;
          padding-left: 46px;
          padding-top: 5px;
          color: #2D2E34;
          /*change to your desired color*/
          padding-inline: 2px !important;
        }
    
        .panel-default {
          border-color: transparent;
        }
    
        .panel {
          margin-bottom: 20px;
          background-color: transparent;
          border: 0px solid transparent;
          border-radius: 4px;
          -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
        }
    
        .panel-title {
          padding: 10px 8px;
          border-radius: 3px;
    
        }
    
        .panel.panel-default {
          margin-bottom: 10px;
        }
    
        .panel-default>.panel-heading {
          color: #333;
          background-color: transparent;
          border-color: transparent;
          padding: 0;
        }
    
        .panel-group .panel-heading+.panel-collapse .panel-body {
          border-top: 0px solid #ddd;
        }
    
        .panel-group .panel:not(:last-child) {
          margin-bottom: 10px;
        }
    
    
        /*************START OF STYLE USED WITH JAVASCRIPT**********/
    
        /**to devs incharge-- change the bg-color and color according to your site color palette if you want **/
    
        .howto-mobile-active-heading {
          background-color: #0C1D32 !important;
    
        }
    
    
        .howto-mobile-active-title {
          color: #DBE7F5 !important;
        }
    
    
    
    
        .howto-mobile-active-step {
          background: #003893 !important;
          color: #DBE7F5 !important;
        }
    
    
        .howto-mobile-inactive-step {
          color: #003893 !important;
    
          outline: 2px solid transparent !important;
          background: transparent !important;
        }
    
    
    
        .howto-active-mobile {
          outline: 1px solid #003893;
          background-color: #FAF7F3 !important;
        }
    
    
        /*************END OF  STYLE USED WITH JAVASCRIPT**********/
    
    
        /************END OF  STEP MOBILE ACCORDION STYLE***************/
    
    
        /************START OF MEDIA QUERIES*****************/
    
        @media screen and (max-width: 992px) {
    
          h1 {
            font-size: 2rem !important;
          }
    
          .howto-main {
            display: none;
          }
    
          .howto-mobile .list-group {
            width: 100%;
          }
    
    
    
          .step2-text,
          .step3-text {
            opacity: 1;
          }
    
    
          .howto-mobile {
            margin-top: 35px;
          }
    
          .howto-mobile .card {
            margin-bottom: 22px;
          }
    
        }
    
        @media screen and (min-width: 993px) {
          .howto-mobile {
            display: none;
          }
    
        }
        .howto-main {
    @media screen and (min-width: 1024px) {
    .register-area-form .register-form .form-group label.col-lg-3.control-label {
        margin-right: auto;
        font-size: 15px;
        padding-inline: 0;
        line-height: 3rem;
        width: 100%;
        text-align: left;
    }
    .register-area-form .register-form .form-group .col-lg-9 {
    padding-left: 0 !important;
  }
.register-area-form .register-form .form-group {
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
    }
    .register-area-form .register-form input {
      width: 115% !important;
    padding: 0 0 0 5px !important;

}
.register-area-form .register-form .col-lg-12 #qr_do_reg {
  width: 100% !important;
}
    }
#qr_fk_countries , #qr_profile_birth_date select {
  font-size: 1.6rem;
}
}
    
        /************END OF  START OF MEDIA QUERIES*****************/