:root {
  --height-header-top: 60px;
  --height-header-nav: 45px;
}

.training-certificate-wrapper .banner {
  padding: 6rem 9rem;
  min-height: calc(100vh - var(--height-header-nav) - var(--height-header-top));
  background-color: #1c3a6a;
  color: #fff;
  margin-bottom: 5rem;
}

@media (max-width: 1024px) {
  .training-certificate-wrapper .banner {
    padding: 3rem 15px 3rem;
    min-height: unset;
  }
}

@media (max-width: 991px) {
  .training-certificate-wrapper .banner {
    margin-bottom: 15px;
  }
}

.training-certificate-wrapper .content-wrapper {
  display: flex;
}

.training-certificate-wrapper .content-wrapper .info-left {
  flex: 0 0 45%;
  max-width: 45%;
  margin-right: 5%;
  text-align: right;
}

.training-certificate-wrapper .content-wrapper .info-left .logo {
  margin-bottom: 20px;
}

.training-certificate-wrapper .content-wrapper .info-left .logo a {
  display: block;
  pointer-events: none;
}

.training-certificate-wrapper .content-wrapper .info-left .logo a img {
  max-width: 100%;
  height: 40px;
}

.training-certificate-wrapper .content-wrapper .info-left .title-no-bold {
  font-size: 18px;
  text-transform: uppercase;
}

.training-certificate-wrapper .content-wrapper .info-left .title-bold {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 18px;
}

.training-certificate-wrapper .content-wrapper .info-left .title-bold-mb {
  display: none;
}

.training-certificate-wrapper .content-wrapper .form-right {
  flex: 0 0 45%;
  max-width: 45%;
  margin-left: 5%;
}

.training-certificate-wrapper .content-wrapper .form-right .label-form {
  display: block;
  margin-bottom: 15px;
  margin-top: 25px;
  text-transform: uppercase;
}

.training-certificate-wrapper .content-wrapper .form-right form {
  max-width: 40rem;
  margin: 0 auto;
}

.training-certificate-wrapper .content-wrapper .form-right .input-password,
.training-certificate-wrapper .content-wrapper .form-right .input-search {
  background-color: #fff;
  border: 1.6px solid #19396a;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  height: 46px;
  padding-left: 0.8rem;
  margin-bottom: 1.8rem;
  width: 78%;
}

.training-certificate-wrapper .content-wrapper .form-right .input-password:focus,
.training-certificate-wrapper .content-wrapper .form-right .input-search:focus {
  outline: none;
}

@media (max-width: 580px) {
  .training-certificate-wrapper .content-wrapper .form-right .input-password,
  .training-certificate-wrapper .content-wrapper .form-right .input-search {
    width: 100%;
    margin-bottom: 1rem;
    margin-right: unset;
  }
}

.training-certificate-wrapper .content-wrapper .form-right input::-moz-placeholder {
  opacity: 0.5;
  /* Firefox */
  font-style: italic;
}

.training-certificate-wrapper .content-wrapper .form-right input::placeholder {
  opacity: 0.5;
  /* Firefox */
  font-style: italic;
}

.training-certificate-wrapper .content-wrapper .form-right .form-search__captcha {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
  .training-certificate-wrapper .content-wrapper .form-right .form-search__captcha {
    width: 78%;
  }
}

@media (max-width: 1024px) {
  .training-certificate-wrapper .content-wrapper .form-right .form-search__captcha {
    width: 100%;
  }
}

@media (max-width: 580px) {
  .training-certificate-wrapper .content-wrapper .form-right .form-search__captcha .form-group {
    padding: 0 !important;
  }
}

@media (max-width: 1200px) {
  .training-certificate-wrapper .content-wrapper .form-right .form-search__captcha .form-group {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 1200px) {
  .training-certificate-wrapper .content-wrapper .form-right .form-search__captcha .g-recaptcha {
    transform: scale(0.75) !important;
  }
}

.training-certificate-wrapper .content-wrapper .form-right button {
  height: 46px;
  border: none;
  background-color: #005091;
  transition: all 0.3s;
  outline: none;
  width: 78%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #fff;
  text-transform: uppercase;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.training-certificate-wrapper .content-wrapper .form-right button div {
  text-align: left;
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  position: absolute;
  padding: 1rem;
  left: 0;
  top: 0;
  border-right: 2px solid #1c3a6a;
}

.training-certificate-wrapper .content-wrapper .form-right button i {
  color: #fff;
}

.training-certificate-wrapper .content-wrapper .form-right .register-certi {
  display: block;
  text-decoration: underline;
  margin-top: 1.5rem;
}

@media (max-width: 1024px) {
  .training-certificate-wrapper .content-wrapper {
    flex-direction: column;
  }

  .training-certificate-wrapper .content-wrapper .info-left {
    flex: unset;
    max-width: 100%;
    margin-right: 0;
    text-align: center;
  }

  .training-certificate-wrapper .content-wrapper .form-right {
    flex: unset;
    max-width: 50%;
    margin: 0 auto;
  }

  .training-certificate-wrapper .content-wrapper .form-right .label-form {
    text-align: center;
  }

  .training-certificate-wrapper .content-wrapper .form-right form {
    max-width: 100%;
  }

  .training-certificate-wrapper .content-wrapper .form-right form .form-search--input .input-password,
  .training-certificate-wrapper .content-wrapper .form-right form .form-search--input .input-search {
    width: 100%;
  }

  .training-certificate-wrapper .content-wrapper .form-right form button {
    width: 100%;
  }

  .training-certificate-wrapper .content-wrapper .form-right form .register-certi {
    text-align: center;
  }
}

@media (max-width: 991px) {
  .training-certificate-wrapper .content-wrapper {
    flex-direction: column;
  }

  .training-certificate-wrapper .content-wrapper .info-left {
    flex: unset;
    max-width: 100%;
    margin-right: 0;
    text-align: center;
  }

  .training-certificate-wrapper .content-wrapper .info-left .title-no-bold {
    display: none;
  }

  .training-certificate-wrapper .content-wrapper .info-left .title-bold {
    display: none;
  }

  .training-certificate-wrapper .content-wrapper .info-left .title-bold-mb {
    display: block;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
  }

  .training-certificate-wrapper .content-wrapper .form-right {
    flex: unset;
    max-width: 90%;
    margin: 0 auto;
  }

  .training-certificate-wrapper .content-wrapper .form-right .label-form {
    text-align: center;
  }

  .training-certificate-wrapper .content-wrapper .form-right form {
    max-width: 100%;
  }

  .training-certificate-wrapper .content-wrapper .form-right form .form-search--input .input-password,
  .training-certificate-wrapper .content-wrapper .form-right form .form-search--input .input-search {
    width: 100%;
  }

  .training-certificate-wrapper .content-wrapper .form-right form button {
    width: 100%;
  }

  .training-certificate-wrapper .content-wrapper .form-right form .register-certi {
    text-align: center;
  }
}

.training-certificate-wrapper .info-wrapper {
  display: flex;
}

.training-certificate-wrapper .info-wrapper .info-left {
  background-color: #1c3a6a;
  flex: 0 0 30%;
  max-width: 30%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.training-certificate-wrapper .info-wrapper .info-left .employee-info__avatar {
  position: absolute;
  z-index: 2;
  width: 100%;
  right: -50%;
  top: 13%;
}

.training-certificate-wrapper .info-wrapper .info-left .employee-info__avatar img {
  max-width: 100%;
  height: auto;
  border-radius: 50%;
}

.training-certificate-wrapper .info-wrapper .info-left .logo {
  text-align: right;
  margin-right: 1rem;
}

.training-certificate-wrapper .info-wrapper .info-left .logo a {
  display: block;
}

.training-certificate-wrapper .info-wrapper .info-left .logo a img {
  height: 35px;
}

.training-certificate-wrapper .info-wrapper .info-left .title-no-bold {
  text-transform: uppercase;
  font-size: 16px;
  color: #fff;
  line-height: 1.5;
  margin: 1rem;
  text-align: right;
  padding-bottom: 4rem;
}

.training-certificate-wrapper .info-wrapper .info-left .title-mobile {
  display: none;
}

.training-certificate-wrapper .info-wrapper .info-right {
  flex: 0 0 60%;
  max-width: 60%;
  margin-left: 10%;
  text-align: center;
}

.training-certificate-wrapper .info-wrapper .info-right .title-bold {
  font-size: 14px;
  text-transform: uppercase;
  opacity: 0.5;
  text-align: right;
  margin-top: 2rem;
  margin-right: 20.1%;
}

@media (max-width: 1200px) {
  .training-certificate-wrapper .info-wrapper .info-right .title-bold {
    margin-right: 10%;
  }
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info {
  padding: 4rem 0;
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .title {
  color: #19396a;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 16px;
  font-weight: bold;
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .name {
  padding: 0.8rem;
  margin-bottom: 2rem;
  background-color: #19396a;
  font-weight: bold;
  margin-left: -10%;
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .name h3 {
  font-size: 18px;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  font-weight: bold;
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .list {
  display: block;
  margin-right: 19%;
  font-size: 16px;
}

@media (max-width: 1200px) {
  .training-certificate-wrapper .info-wrapper .info-right .employee-info__info .list {
    margin-right: 7%;
  }
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .list .item {
  display: flex;
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .list .item .left {
  flex: 0 0 49%;
  max-width: 49%;
  margin-right: 1%;
  text-align: right;
  opacity: 0.8;
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .list .item .right {
  flex: 0 0 49%;
  max-width: 49%;
  margin-left: 1%;
  text-align: left;
  font-weight: bold;
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .btn-info-emloyee {
  display: flex;
  padding-top: 2rem;
  justify-content: space-between;
  width: 85%;
  margin: 0 auto;
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .btn-info-emloyee a {
  padding: 1rem 2rem;
  background-color: #005091;
  color: #fff;
  transition: all 0.3s;
  border-radius: 4px;
  text-transform: uppercase;
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .btn-info-emloyee a:hover {
  background-color: #f6821f;
  text-decoration: none;
  color: #fff;
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .btn-info-emloyee .certi-scan {
  font-weight: bold;
}

.training-certificate-wrapper .info-wrapper .info-right .employee-info__info .btn-info-emloyee .btn-continue {
  font-style: italic;
}

@media (max-width: 1024px) {
  .training-certificate-wrapper .info-wrapper {
    flex-direction: column;
  }

  .training-certificate-wrapper .info-wrapper .info-left {
    flex: unset;
    max-width: 100%;
    justify-content: center;
  }

  .training-certificate-wrapper .info-wrapper .info-left .employee-info__avatar {
    width: 25%;
    right: 38%;
    top: 42%;
  }

  .training-certificate-wrapper .info-wrapper .info-left .logo {
    text-align: center;
    margin: 1rem 0 0;
  }

  .training-certificate-wrapper .info-wrapper .info-left .title-no-bold {
    display: none;
  }

  .training-certificate-wrapper .info-wrapper .info-left .title-mobile {
    justify-content: center;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    text-align: center;
    margin: 0.5rem auto 10.5rem;
    color: #fff;
  }

  .training-certificate-wrapper .info-wrapper .info-right {
    flex: unset;
    max-width: 100%;
    margin: 5% 0 0;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .title-bold {
    display: none;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .title {
    display: none;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .name {
    margin-left: 0;
    background-color: unset;
    margin-bottom: 1rem;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .name h3 {
    color: black;
    font-weight: bold;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .list {
    margin-right: 0;
    justify-content: center;
  }
}

@media (max-width: 991px) {
  .training-certificate-wrapper .info-wrapper .info-left .employee-info__avatar {
    width: 35%;
    right: 33%;
  }

  .training-certificate-wrapper .info-wrapper .info-right {
    margin: 7% 0 0;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .name_v2_mobile {
    justify-content: center;
    font-size: 16px;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .name_v2_mobile .left {
    max-width: 49%;
    opacity: 0.8;
    flex: 0 0 49%;
    text-align: right;
    margin-right: 1%;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .name_v2_mobile .right {
    flex: 0 0 49%;
    margin-left: 1%;
    text-align: left;
    font-weight: bold;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .name {
    margin-bottom: 0;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .btn-info-emloyee {
    align-items: center;
    flex-direction: column;
    padding-top: 1rem;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .btn-info-emloyee a {
    width: -moz-max-content;
    width: max-content;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .btn-info-emloyee .certi-scan {
    margin-bottom: 1.5rem;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info .employee-info__info .btn-info-emloyee .btn-continue {
    background-color: unset;
    color: #005091;
    text-decoration: underline;
    padding: 0;
  }
}

@media (max-width: 767px) {
  .training-certificate-wrapper .info-wrapper .info-left .employee-info__avatar {
    width: 40%;
    right: 30%;
    top: 45%;
  }

  .training-certificate-wrapper .info-wrapper .info-right {
    margin: 5% 0 0;
  }

  .training-certificate-wrapper .info-wrapper .employee-info__info .name_v2_mobile {
    justify-content: left !important;
  }

  .training-certificate-wrapper .info-wrapper .employee-info__info .name_v2_mobile .left {
    max-width: 36% !important;
    opacity: 0.8 !important;
    flex: 0 0 49% !important;
    text-align: start !important;
    margin-right: 1% !important;
  }

  .training-certificate-wrapper .info-wrapper .employee-info__info .name_v2_mobile .right {
    flex: 0 0 49%;
    margin-left: 1%;
    text-align: left;
    font-weight: bold;
  }

  .training-certificate-wrapper .info-wrapper .employee-info__info .list .item .left {
    text-align: start !important;
    max-width: 36% !important;
  }

  .training-certificate-wrapper .info-wrapper .employee-info__info .list .item .right {
    max-width: unset;
  }
}

@media (max-width: 480px) {
  .training-certificate-wrapper .info-wrapper .info-right .employee-info__info {
    padding: 2rem 0;
  }
}

@media (max-width: 440px) {
  .training-certificate-wrapper .info-wrapper .info-left .employee-info__avatar {
    top: 50%;
    width: 45%;
    right: 28%;
  }

  .training-certificate-wrapper .info-wrapper .info-left .title-mobile {
    margin: 1rem auto 9rem;
  }

  .training-certificate-wrapper .info-wrapper .info-right .employee-info__info {
    padding: 4rem 0;
  }
}

@media (max-width: 390px) {
  .training-certificate-wrapper .info-wrapper .info-left .employee-info__avatar {
    width: 50%;
    right: 25%;
  }
}

.error-messgae {
  color: #a57b2a;
}