@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Roboto";
}

@font-face {
  font-family: "Roboto";
  src: url("../FONT/Roboto-Medium.eot");
  src: url("../FONT/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../FONT/Roboto-Medium.woff2") format("woff2"), url("../FONT/Roboto-Medium.woff") format("woff"), url("../FONT/Roboto-Medium.ttf") format("truetype"), url("../FONT/Roboto-Medium.svg#Roboto-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../FONT/Roboto-Regular.eot");
  src: url("../FONT/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../FONT/Roboto-Regular.woff2") format("woff2"), url("../FONT/Roboto-Regular.woff") format("woff"), url("../FONT/Roboto-Regular.ttf") format("truetype"), url("../FONT/Roboto-Regular.svg#Roboto-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body {
  background-color: #EEEEEE;
}

/*
==================
=== page Index ===
==================
*/
.header_1 {
  width: 100%;
}
.header_1 .container_header_1 {
  padding: 16px;
}
.header_1 .container_header_1 .logo img {
  height: 26px;
}
@media (max-width: 450px) {
  .header_1 .container_header_1 .logo img {
    height: 20px;
  }
}
.header_1 .container_header_1 .links {
  gap: 26px;
}
.header_1 .container_header_1 .links ul {
  list-style: none;
  gap: 8.5px;
}
@media (max-width: 767px) {
  .header_1 .container_header_1 .links ul {
    display: none !important;
  }
}
.header_1 .container_header_1 .links ul li {
  color: #2B7A00;
  font-size: 14px;
}
.header_1 .container_header_1 .links ul.show_sm {
  gap: 20px;
}
@media (max-width: 767px) {
  .header_1 .container_header_1 .links ul.show_sm {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
@media (max-width: 450px) {
  .header_1 .container_header_1 .links ul.show_sm li {
    font-size: 12px;
  }
}

.wrapper_login {
  width: 100%;
}
.wrapper_login .container_login {
  max-width: 700px;
  margin: 0 auto;
}
.wrapper_login .container_login .title_top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 16px 0 28px;
}
.wrapper_login .container_login .title_top img {
  margin-bottom: 2px;
}
.wrapper_login .container_login .title_top p {
  font-size: 18px;
  color: #2C353E;
  font-weight: 500;
}
.wrapper_login .container_login form {
  width: 100%;
  -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 8px;
}
.wrapper_login .container_login form .head {
  padding: 16px;
  border-bottom: 1px solid #DADFE3;
  text-align: center;
}
.wrapper_login .container_login form .head p {
  font-size: 18px;
  color: #2C353E;
  font-weight: 500;
  line-height: 1.3;
}
.wrapper_login .container_login form .back {
  width: 100%;
}
.wrapper_login .container_login form .back img {
  width: 100%;
}
.wrapper_login .container_login form .wrapper_form {
  padding: 25.6px 25.6px 32px 25.6px;
}
.wrapper_login .container_login form .wrapper_form .part_txt, .wrapper_login .container_login form .wrapper_form .part_inputes {
  width: 100%;
}
@media (max-width: 767px) {
  .wrapper_login .container_login form .wrapper_form {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.wrapper_login .container_login form .wrapper_form .part_txt {
  padding-right: 23.6px;
}
.wrapper_login .container_login form .wrapper_form .part_txt p {
  font-size: 14px;
  color: #2C353E;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .error {
  color: red;
  font-size: 14px;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .inputes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .inputes .input_box {
  width: 100%;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .inputes .input_box label {
  color: #2C353E;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .inputes .input_box p {
  color: #616E7A !important;
  font-size: 12px;
  line-height: 15.6px;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .inputes .input_box input {
  margin-top: 2px;
  border: 1px solid #8A96A3;
  font-weight: normal;
  line-height: 1.5;
  color: #0a0a0a;
  height: 40px;
  width: 100%;
  background-color: #F7F9FA;
  border-radius: 4px;
  padding: 0 10px;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .inputes .input_box input:focus {
  background-color: white;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .btn_sub {
  width: 100%;
  margin-top: 20px;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .btn_sub span {
  background-color: #EEEEEE;
  color: #AFAFAF;
  font-size: 13px;
  width: 100%;
  padding: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .btn_sub button {
  width: 100%;
  border-radius: 4px;
  height: 38px;
  outline: none;
  border: none;
  padding: 8px 25px;
  font-size: 14px;
  color: white;
  background-color: #008035;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .forget {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 24px;
}
.wrapper_login .container_login form .wrapper_form .part_inputes .forget a {
  color: #2B7A00;
  text-decoration: none;
  font-size: 14px;
}
.wrapper_login .container_login form .forget {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0px 25.6px 32px 25.6px;
}
.wrapper_login .container_login form .forget a {
  color: #2B7A00;
  text-decoration: none;
  font-size: 14px;
}
.wrapper_login .container_login .or {
  width: 100%;
  margin: 28px 0;
  text-align: center;
  color: #616E7A;
  line-height: 1.3;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}
.wrapper_login .container_login .or::after {
  position: absolute;
  content: "";
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 0.2px;
  left: 0;
  background-color: rgba(51, 51, 51, 0.12);
}
.wrapper_login .container_login .or span {
  padding: 0 16px;
  background: #EEEEEE;
  z-index: 1000;
  position: relative;
  width: 100%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.wrapper_login .container_login .switch {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 30px;
}
.wrapper_login .container_login .switch button {
  background-color: #fff;
  border: 1px solid #8A96A3;
  color: #2d6f13;
  border-radius: 4px;
  font-size: 14px;
  width: 350px;
  padding: 8px 25px;
  height: 34px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.wrapper_login .container_login .links_foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style: none;
  gap: 10px;
  display: none;
  padding-bottom: 25px;
}
@media (max-width: 767px) {
  .wrapper_login .container_login .links_foot {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
.wrapper_login .container_login .links_foot li {
  color: #2B7A00;
  font-size: 12px;
}

.body_infos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  height: 100vh;
}

.footer_1 {
  width: 100%;
  background-color: #004729;
  padding: 10px 0;
  margin-top: 150px;
}
.footer_1 .container_footer_1 {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}
.footer_1 .container_footer_1 img {
  width: 100px;
}
@media (max-width: 450px) {
  .footer_1 .container_footer_1 img {
    width: 60px;
  }
}
.footer_1 .container_footer_1 p {
  color: white;
  font-size: 13.5px;
}

.loading {
  width: 100%;
  text-align: center;
}
.loading p {
  font-size: 14px;
}
.loading b {
  font-size: 14px;
  font-weight: 500;
}

.spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #7d7d7d 94%, rgba(0, 0, 0, 0)) top/9px 9px no-repeat, conic-gradient(rgba(0, 0, 0, 0) 30%, #7d7d7d);
  -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 9px), #000 0);
  -webkit-animation: spinner-c7wet2 1s infinite linear;
          animation: spinner-c7wet2 1s infinite linear;
}

@-webkit-keyframes spinner-c7wet2 {
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@keyframes spinner-c7wet2 {
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}