body {
  background: #e8edf3;
}

h5 {
  color: #304259;
}

a {
  color: #2e69b5;
}

.form-row {
  margin-bottom: 1rem;
}

.form-control,
.tox-tinymce {
  border: 1px solid #90a2b3 !important;
}

.btn {
  border-radius: 10px !important;
}

.btn-blue {
  background: #304259;
  border: none;
}

.btn-blue:hover {
  background: #2e496b;
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgb(163 176 191),
    rgba(0, 0, 0, 0)
  );
}

.container {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  margin: 30px auto;
  overflow: hidden;
}

.header {
  background: #304259;
  color: #fff;
  width: calc(100% + 40px);
  margin-top: -20px;
  margin-left: -20px;
  margin-bottom: 20px;
  padding: 20px 20px;
}

.header img {
  width: 200px;
  height: auto;
}

.header .kembali {
  float: right;
  color: #c9d0d8;
  background-color: #4f637d;
  border: none;
}

.header .kembali .kembali-svg {
  height: 22px;
  width: 22px;
  position: relative;
  top: -1px;
}

.intro,
.success {
  color: #304259;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  position: relative;
}

.intro .text1,
.intro .text2,
.success .text1,
.success .text2 {
  font-size: 1.8rem;
  position: absolute;
  top: 0;
  left: 25%;
}

.intro .text2 {
  top: 12.4%;
  left: 38%;
}

.success .text1 {
  left: 15%;
}

.success .text2 {
  top: 14%;
  left: 5%;
}

.intro .text1 span,
.intro .text2 span,
.success .text1 span,
.success .text2 span {
  font-weight: bold;
}

.form-start-header {
  width: 100%;
  height: auto;
  margin: 30px 0 25px;
  position: relative;
}

.form-start-header .text {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 10px;
  font-size: 1.4rem;
  color: #304259;
  display: inline-flex;
}

.form-start-header .text span {
  font-weight: bold;
  padding-right: 6px;
}

.formulir.submitted {
  pointer-events: none;
  opacity: 50%;
  transition: all ease-in-out 0.3s;
}

/* NOTE: RESPONSIVE */

@media (min-width: 768px) {
  .container,
  .container-md,
  .container-sm {
    max-width: 600px;
  }
}

@media (min-width: 992px) {
  .container,
  .container-md,
  .container-sm {
    max-width: 600px;
  }
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 600px;
  }
}

@media (max-width: 767px) {
  h5 {
    font-size: 1.19rem;
  }

  .container {
    width: auto;
    margin: 25px 20px;
  }

  .header img {
    width: 150px;
  }

  .header .kembali {
    font-size: 0.9rem;
    padding: 0.25rem 0.55rem;
  }

  .header .kembali .kembali-svg {
    height: 18px;
    width: 18px;
  }

  .intro img {
    padding-top: 25px;
  }

  .intro .text1,
  .intro .text2 {
    font-size: 1.45rem;
    position: absolute;
    top: -5px;
    left: 15%;
  }

  .intro .text2 {
    top: 13%;
    left: 32%;
  }

  .form-start-header .text {
    font-size: 1.28rem;
  }

  .success img {
    padding-top: 27px;
  }

  .success .text1 {
    margin-top: -7px;
    left: 16%;
    font-size: 1.45rem;
  }

  .success .text2 {
    font-size: 1.45rem;
    top: 22px;
    left: -4%;
  }
}