.btn-page-login-right {
  float: right;
  padding-right: 60px;
  margin: 20px auto;
}
.text-line-login {
  color: #002c66;
}
.btn-login-style {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 189, 89);
  border-color: rgb(255, 189, 89);
  margin: 5px auto;
}
.btn-page-login-left {
  float: left;
  margin: 5px auto;
}

.nav-banner-head-logo {
  background-color: darkblue;
  color: #ffff;
}
.nav-banner-head-link {
  background-color: gray;
  color: #ffff;
}

a.nav-link.active {
  background-color: #ff0;
}

a:hover {
  outline: 0;
  background-color: #ff0;
}

mark {
  background: #ff0;
  color: #000;
}
.containerApp {
  margin-bottom: 100px;
}
.navbar-toggler {
  background-color: #ffffff;
}
.trapezoid-right {
  border-bottom: 25px solid darkblue;
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-top: 0 solid transparent;
  transform: rotate(-90deg);
  float: right;
  padding-left: 73px;
}

.heard-footer {
  position: fixed;
  bottom: 0;
  padding-top: 10px;
}

#footer1 {
  position: fixed;
  bottom: 0;
  width: 60%;
  border-bottom: 60px solid darkblue;
  border-left: 0 solid transparent;
  border-right: 20px solid transparent;
  border-top: 0 solid transparent;
  margin-top: 10px;
}

#footer2 {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 60px;
  width: 70%;
  border-bottom: 25px solid blue;
  border-left: 20px solid transparent;
  border-right: 0 solid transparent;
  border-top: 0 solid transparent;
  margin-top: 10px;
}

.right {
  position: fixed;
  bottom: 0;
  right: 0px;
}

.parallelogram-right {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 200px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  color: white;
  -o-text-overflow: clip;
  text-overflow: clip;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
  background: darkblue;
}

.rectangle-right {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 200px;
  height: 200px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  color: white;
  -o-text-overflow: clip;
  text-overflow: clip;
  z-index: 2;
  position: absolute;
  top: 0px;
  left: -50px;
  background: darkblue;
}

.rectangle1 {
  position: relative;
  left: 0;
  height: 44px;
  background: darkblue;
  color: white;
  text-align: center;
  font-size: 18px;
  padding-top: 8px;
}

.rectangle1:before {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 24px solid darkblue;
}

.trapezoid1 {
  right: 0;
  position: relative;
  height: 44px;
  background: gray;
  margin-left: 18px;
  color: white;
}

.trapezoid1:after {
  position: absolute;
  content: "";
  left: -50px;
  top: 0px;
  border-style: solid;
  border-color: gray transparent gray transparent;
  border-width: 44px 0px 0px 50px;
}

.right {
  position: fixed;
  bottom: 0;
  right: 0px;
}

.nav {
  text-align: left;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
  font-size: 18px;
}

li a {
  color: white;
}
.dropdown-menu {
  background-color: gray;
}

.dropdown-item {
  display: block;
  color: #000;

  &:hover,
  &:focus {
    background-color: #ff0;
  }

  &.active,
  &:active {
    color: #000;
    background-color: #ff0;
  }
}
.station1-head {
  background-color: #1670f7;
  padding: 10px;
}
.station1-head-conter {
  background-color: #f4d74a;
  padding: 20px;
  border-radius: 20px;
}
.station1-conter {
  background-color: #a6c5da;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 20px;
}
.station1-conter-list {
  background-color: #fdfaf0;
  padding: 20px;
}
.station1-1-conter {
  background-color: #dd0c0c;
  padding: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 20px;
}
.station1-1-conter-list {
  background-color: #f2e8d5;
  padding: 10px;
  border-radius: 20px;
}
.this-is-you {
  background-color: #f7941e;
  padding: 20px;
  border-radius: 20px;
}
.station1-3-1-good {
  background-color: #5ce1e6;
}
.station1-3-1-no {
  background-color: #fff7ad;
}
.station1-complete-head {
  background: #fff7ad; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    -90deg,
    #ffa9f9,
    #fff7ad
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    -90deg,
    #ffa9f9,
    #fff7ad
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    -90deg,
    #ffa9f9,
    #fff7ad
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, #ffa9f9, #fff7ad); /* Standard syntax */
  padding: 40px;
  border-radius: 30px;
}
.station1-complete-detail {
  background-color: #ffbd59;
  padding: 20px;
  padding-top: 40px;
  margin-left: 20px;
  margin-right: 20px;
  /* border-radius: 20px; */
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 20px;
}
.station2-head {
  background-color: #a3f2ea;
  padding: 10px;
}
.station2-head-conter {
  background-color: #f4d74a;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 20px;
}
.station2-conter {
  background-color: #f9baba;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 20px;
}
.this-is-you2 {
  background-color: #fed3d5;
  padding: 20px;
  border-radius: 20px;
}
.station2-0-2conter {
  background-color: #03459d;
  padding: 15px;
  border-radius: 20px;
}
.station2-0-3conter {
  background-color: #603b8f;
  padding: 15px;
  border-radius: 20px;
}
.station2-0-4conter {
  background-color: #a3aed5;
  padding: 15px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.station2-1 {
  background-color: #f4d74a;
  padding: 15px;
  border-radius: 30px;
}
.station2-1conter {
  background-color: #e04f84;
  padding: 35px;
  margin: 10px;
  border-radius: 20px;
}
.station2-1-conter-list {
  background-color: #f2e8d5;
  padding: 50px;
  border-radius: 20px;
}
.this-is-you2-1 {
  background-color: #f7907f;
  padding: 20px;
  border-radius: 20px;
}
.station2-4conter {
  background-color: #e04f84;
  padding: 15px;
  /* margin: 10px; */
  border-radius: 20px;
}
.station2-4 {
  background-color: #f2e8d5;
  padding: 15px;
  border-radius: 20px;
}
.font-white {
  color: white;
}
.btn-prev-next {
  bottom: 27px;
  right: 5px;
  position: fixed;
}
.station3-head {
  background-color: #e04f84;
  padding: 10px;
  border-radius: 30px;
}
.station3-head-conter {
  background-color: #f4d74a;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 20px;
}
.station3-conter {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 20px;
}
.station3-1-1-head {
  background-color: #fed3d5;
  padding: 20px;
  margin: 10px;
}
.station3-1-1-conter {
  background-color: #a3aed5;
  padding: 15px;
  border-radius: 20px;
}
.station3-1-1-conter-list {
  background-color: #f2e8d5;
  padding: 20px;
  /* margin: 10px; */
  border-radius: 20px;
}
.station3-2-1-head {
  background-color: #92c6b9;
  padding: 20px;
  margin: 10px;
}
.station3-2-1-conter {
  background-color: #fcbfa3;
  padding: 15px;
  border-radius: 20px;
}
.station3-2-1-questions1 {
  background-color: #004aad;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 20px;
}
.station3-2-1-questions2 {
  background-color: #ff6194;
  padding: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 20px;
}
.station3-3-bk {
  background-color: #bdeaff;
  padding: 5px;
  margin: 0px;
  border-radius: 20px;
  border-style: solid;
  border-color: #000;
}
.station1-3-3-dotted {
  border-style: dotted;
  border-radius: 20px;
  padding: 20px;
}
.form-centet {
  width: 100%;
  max-width: 475px;
  padding: 15px;
  margin: auto;
}
.station4-head {
  background-color: #044aad;
  padding: 15px;
  border-radius: 30px;
}
.station4-head-conter {
  background-color: #b8d5ff;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 20px;
}
.station4-conter {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 20px;
}
.station4-conter-list {
  background-color: #b8d5ff;
  padding: 15px;
  /* margin: 10px; */
  border-radius: 20px;
}
.station4-conter-process {
  background-color: #004aad;
  color: #ffffff;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 20px;
}
.station4-2-1-head {
  background-color: #f890bc;
  padding: 30px;
  margin: 15px;
  border-radius: 20px;
}
.station4-2-1-detal {
  background-color: #faeab2;
  padding: 10px;
}
.choice-yes {
  background-color: #00cc52;
}
.choice-no {
  background-color: #ff3939;
}
.station4-2-3conter {
  background-color: #c0e8d5;
  /* color: #ffffff; */
  padding: 20px;
  /* margin: 10px; */
  border-radius: 20px;
}
.station5-head {
  background-color: #ff3131;
  padding: 15px;
  border-radius: 30px;
}
.station5-head-conter {
  background-color: #fed3d5;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 20px;
}
.station5-conter {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 20px;
}
.station5-1-1-conter {
  background-color: #c0e8d5;
  padding: 15px;
  border-radius: 20px;
}
.station5-1-1-conter-list {
  background-color: #fdfaf0;
  padding: 15px;
  margin: 10px;
  border-radius: 20px;
}
.station5-3-list1 {
  background-color: #f2e8d5;
  padding: 5px;
  /* margin: 5px; */
  border-style: solid;
  border-color: #000;
}
.station5-3-list2 {
  background-color: #ffe4e9;
  padding: 5px;
  /* margin: 5px; */
  border-style: solid;
  border-color: #000;
}
.station5-3-list3 {
  background-color: #c0e8d5;
  padding: 5px;
  /* margin: 5px; */
  border-style: solid;
  border-color: #000;
}
.station5-5-head {
  background-color: #c0e8d5;
  padding: 20px;
  margin: 10px;
  border-radius: 20px;
}
.station5-5-1 {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-binge-drinking {
  background-color: #ff0d0d;
  margin: 5px;
  padding: 5px;
  border-style: solid;
  border-color: #000;
}
.form-binge-drinking-detail {
  background-color: #ffffff;
  margin: 5px;
  padding: 5px;
}