@page {
  margin: 0;
}
.new-line {
  padding: 3px 0;
}

.text-right {
  text-align: right;
}

.wrapper {
  font-family: TimesNewRoman, "Times New Roman", Times !important;
  position: relative;
  margin: 24px 35px;
}
.wrapper h1 {
  font-size: 17pt;
  line-height: 19pt;
}
.wrapper h2 {
  font-size: 15pt;
  line-height: 17pt;
}
.wrapper h3 {
  font-size: 13pt;
  line-height: 15pt;
  margin-bottom: 0 !important;
}
.wrapper h4 {
  font-size: 12pt;
  line-height: 14pt;
  margin-bottom: 0 !important;
}
.wrapper p,
.wrapper li {
  font-size: 11pt;
  line-height: 13pt;
  margin-bottom: 0 !important;
}
.wrapper .wrapper {
  position: relative;
  margin: 24px 35px;
}
.wrapper .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 10px;
}
.wrapper .header img {
  width: 170px;
  height: 170px;
}
.wrapper hr {
  border-top: solid 3px #000 !important;
}
.wrapper .header-text {
  text-align: center;
}
.wrapper .head-text {
  font-size: 16pt;
  margin-bottom: 12px;
}
.wrapper .sub-head-text {
  font-size: 14pt;
  margin: 6px 0;
}
.wrapper .secondary-head-text {
  font-size: 11pt;
  margin-top: 12px;
  margin-bottom: 5px;
}
.wrapper .main {
  position: relative;
  font-size: 10pt;
  margin-top: 12px;
  text-align: center;
}
.wrapper .main__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrapper .main__wrapper h3 {
  width: -moz-fit-content;
  width: fit-content;
}
.wrapper .main__title {
  width: 100%;
}
.wrapper .main__fit {
  text-align: left;
}
.wrapper .single-headline {
  margin: 0;
}
.wrapper .flex-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  text-align: justify;
}
.wrapper .flex-list div p {
  text-align: left;
}
.wrapper .flex-list .left-list-item {
  width: 70%;
  margin: 0;
}
.wrapper .flex-list .right-list-item {
  width: 30%;
  margin: 0;
}
.wrapper .flex-list .left-item {
  width: 20%;
  margin: 0;
}
.wrapper .flex-list .right-item {
  width: 80%;
  margin: 0;
}
.wrapper .flex-list .left-subitem {
  width: 70%;
  margin: 0;
}
.wrapper .flex-list .right-subitem {
  width: 30%;
  margin: 0;
}
.wrapper .flex-list .right-item ol {
  padding-left: 12px;
}
.wrapper .empty-right-item {
  height: 20px;
}
.wrapper .ttd-wrapper {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 200px;
  align-items: flex-end;
}
.wrapper .ttd-wrapper .tanda-tangan {
  width: 35%;
}
.wrapper .ttd-wrapper .tembusan {
  width: 65%;
}
.wrapper .ttd-wrapper .tembusan p,
.wrapper .ttd-wrapper .tembusan li {
  font-size: 12px;
}
.wrapper .float-right {
  float: right;
}
.wrapper .ml-2 {
  margin-left: 20px;
}
.wrapper .my-3 {
  margin: 8px 0;
}
.wrapper .mt-3 {
  margin-top: 8px;
}
.wrapper .mb-0 {
  margin-bottom: 0;
}
.wrapper .mb-10 {
  margin-bottom: 200px;
}
.wrapper ol {
  list-style-position: outside;
  margin-top: 0;
  margin-bottom: 0;
}
.wrapper .footer {
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 10pt;
  display: grid;
  grid-template-columns: 70% auto;
  text-align: left;
}
.wrapper .footer .left-fragment .nb-text {
  position: absolute;
  left: 0;
  bottom: 0;
}
.wrapper .lampiran {
  margin: 18px 60px;
}
.wrapper .lampiran .lampiran-title {
  margin: 48px 0;
  text-align: center;
}
.wrapper .lampiran table {
  margin: 24px;
  width: 100%;
  text-align: center;
}
.wrapper .lampiran table td,
.wrapper .lampiran table th {
  padding: 8px 16px;
  border: 1px solid black;
}
.wrapper .lampiran table tbody tr td:nth-child(2) {
  text-align: left;
}
.wrapper .lampiran-horizontal {
  margin: 32px;
}
.wrapper .lampiran-horizontal .title {
  margin: 24px 60px;
}
.wrapper .lampiran-horizontal table {
  width: 100%;
  text-align: center;
}
.wrapper .lampiran-horizontal table ol {
  padding-left: 12px;
}
.wrapper .lampiran-horizontal table td,
.wrapper .lampiran-horizontal table th {
  padding: 8px 16px;
  border: 1px solid black;
}
.wrapper .lampiran-horizontal table tbody tr td:nth-child(-n+5) {
  text-align: left;
}
.wrapper .logo-text {
  font-family: "Public Sans", sans-serif;
}
.wrapper .bg-dark-green {
  background-color: rgb(44, 90, 55);
  background-image: linear-gradient(180deg, rgb(44, 90, 55) 10%, rgb(61, 174, 43) 100%);
  background-size: cover;
}
.wrapper .bg-light-green {
  background-color: rgb(40, 167, 69);
  background-image: linear-gradient(180deg, #fff 10%, rgb(61, 174, 43) 100%);
  background-size: cover;
}
.wrapper .btn-light-green {
  color: #fff;
  background-color: rgb(40, 167, 69);
  border-color: rgb(31, 152, 59);
}

.navbar {
  padding: 18px 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #006633;
}
@media only screen and (max-width: 550px) {
  .navbar {
    padding: 12px 5%;
  }
}
.navbar-left {
  width: 70%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
}
.navbar-left img {
  width: 72px;
  height: auto;
}
.navbar-left h2 {
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
@media only screen and (max-width: 550px) {
  .navbar-left h2 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
  }
}
.navbar-right {
  width: 30%;
  display: flex;
  justify-content: flex-end;
}
.navbar-right p {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.login {
  position: relative;
}
.login .bg-image {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100vh;
  filter: brightness(0.4);
}
.login-container {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
}
.login-template {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 5% 25%;
  padding-top: 3%;
}
@media only screen and (max-width: 1100px) {
  .login-template {
    padding: 5% 15%;
  }
}
@media only screen and (max-width: 700px) {
  .login-template {
    padding: 5% 10%;
  }
}
@media only screen and (max-width: 500px) {
  .login-template {
    padding: 5%;
  }
}
.login-template img {
  width: 100%;
}
.login-template .image {
  width: 100%;
}
.login-template .card {
  background-color: #fff;
  width: 100%;
  padding: 40px;
  margin-top: 40px;
  box-shadow: 1px 2px 8px #000;
  border-radius: 6px;
}
.login-template .card .login-form__item {
  margin-bottom: 24px;
}
.login-template .card .login-form__item p {
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 30px;
}
.login-template .card .login-form__item input {
  width: 100%;
  padding: 12px 4px;
  border-radius: 4px;
  border: none;
  background-color: rgb(181, 181, 181);
}
.login-template .card .login-form__button {
  float: right;
}
@media only screen and (max-width: 700px) {
  .login-template .card .login-form__button {
    float: unset;
  }
}
.login-template .card .login-form__button button {
  padding: 12px 60px;
  background-color: #006633;
  color: #fff;
  font-size: 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
@media only screen and (max-width: 700px) {
  .login-template .card .login-form__button button {
    width: 100%;
  }
}

.headerN {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 10px;
}

.headerN h3 {
  font-size: 11pt !important;
  line-height: 13pt !important;
  font-weight: 300 !important;
}

.headerN h4 {
  font-size: 10pt !important;
  line-height: 12pt !important;
  font-weight: 300 !important;
}

.headerN h5 {
  font-size: 10pt !important;
  line-height: 12pt !important;
  font-weight: 700 !important;
}

.headerN > * {
  font-family: "Public Sans";
}

.headerN img {
  width: 120px;
  height: 120px;
}

.headerN__text {
  display: grid;
  grid-template-columns: 30fr 29fr;
  gap: 18px;
  align-items: center;
}

.headerN__text-extras {
  display: flex;
  align-items: center;
  gap: 12px;
}

.headerN__text__extra {
  width: 50%;
  font-size: 8pt !important;
  line-height: 10pt !important;
}

.headerN__text__extra:first-child {
  width: 45%;
}

.headerN__text__extra:last-child {
  width: 55%;
}