body {
  background-color: #f1f2f6;
}

table.dataTable {
  margin-bottom: 12px;
  border-collapse: collapse;
}

table.dataTable thead th {
  border-bottom: 1px solid #e2e8f0;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #e2e8f0;
}

.dataTables_wrapper {
  margin: 4px;
}

.dataTables_wrapper .dataTables_length {
  margin-bottom: 20px;
  color: #333;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid transparent;
  border-radius: 7px;
  background: #f4f5f7;
  margin: 0px 3px;
}

.dataTables_wrapper .dataTables_length select:focus {
  outline-offset: unset;
  border: 1px solid #d6bcfa;
  box-shadow: 0 0 0 3px rgba(202, 191, 253, 0.45);
}

.dataTables_wrapper .dataTables_filter {
  margin-bottom: 20px;
  color: #333;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid transparent;
  border-radius: 7px;
  background: #f4f5f7;
  margin-left: 10px;
}

.dataTables_wrapper .dataTables_filter input:focus {
  outline-offset: unset;
  border: 1px solid #d6bcfa;
  box-shadow: 0 0 0 3px rgba(202, 191, 253, 0.45);
}

.dataTables_wrapper .dataTables_paginate {
  margin-bottom: 12px;
}

.dataTables_wrapper .dataTables_info {
  color: #333;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1em;
  padding: 5px 13px;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  *cursor: hand;
  border: 1px solid transparent;
  border-radius: 8px;
  --text-opacity: 1;
  color: #a0aec0 !important;
  color: rgba(160, 174, 192, var(--text-opacity)) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #828b95 !important;
  background: #f6f6f6;
  border: 1px solid #d6bcfa;
  box-shadow: 0 0 0 3px rgba(202, 191, 253, 0.45);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #333 !important;
  --border-opacity: 1;
  border-color: #e7e7e7;
  border-color: rgba(226, 232, 240, var(--border-opacity));
  background: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border: 1px solid #d6bcfa;
  box-shadow: 0 0 0 3px rgba(202, 191, 253, 0.45);
}

:focus {
  outline: unset;
}

.table-scroll-wrapper {
  scroll-margin: 50px 0 0 50px;
}

.login-section {
  width: 100%;
  min-height: 100vh;
}
.login-section .login-wrapper {
  width: 70%;
  min-height: 70vh;
  box-shadow: 0px 6px 15px #c7c7c7;
  border-radius: 20px;
}
.login-section .login-wrapper .login-form {
  text-align: center;
}
.login-section .login-wrapper .login-form .login-subtitle {
  font-weight: normal;
  font-size: 25px;
  color: #263238;
}
.login-section .login-wrapper .login-form .login-title {
  font-weight: bold;
  font-size: 35px;
  color: #57b1b9;
  margin-bottom: 35px;
}
.login-section .login-wrapper .login-form .login-description {
  font-weight: normal;
  font-size: 15px;
  color: #636e72;
  margin-bottom: 20px;
}
.login-section .login-wrapper .login-form .login-icon {
  height: 45px;
  width: 45px;
  border: 2px solid #d7d7d7;
  border-radius: 25px 0px 0px 25px;
  border-right: none;
}
.login-section .login-wrapper .login-form .login-icon img {
  min-width: 20px;
  height: 20px;
  margin-left: 10px;
}
.login-section .login-wrapper .login-form .login-input {
  border: 2px solid #d7d7d7;
  border-left: none;
  box-sizing: border-box;
  border-radius: 0px 25px 25px 0px;
  width: 315px;
  height: 45px;
  padding: 5px 15px 5px 5px;
  margin-bottom: 20px;
}
.login-section .login-wrapper .login-form .login-input:focus {
  outline: none;
}
.login-section .login-wrapper .login-form .login-button {
  width: 360px;
  height: 45px;
  background: #57b1b9;
  border-radius: 25px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 15px;
  color: #ffffff;
}
.login-section .login-wrapper .login-form .login-button:hover {
  background: #4fa4ac;
}
.login-section .login-wrapper .login-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 0px 20px 20px 0px;
}
.login-section .login-wrapper .login-image img {
  height: 250px;
}

.bubble-1 {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.bubble-2 {
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0;
}

.table-scroll-wrapper::-webkit-scrollbar {
  width: 1em;
}
.table-scroll-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 15px #dbdbdb;
  border-radius: 10px;
}
.table-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: #9673e0;
  outline: none;
  border-radius: 10px;
}

.guest-section {
  padding-top: 150px;
}
.guest-section .subtitle {
  font-weight: normal;
  font-size: 20px;
  line-height: 34px;
  color: #263238;
}
.guest-section .title {
  font-weight: bold;
  font-size: 50px;
  line-height: 55px;
  color: #57B1B9;
  margin-bottom: 25px;
}
.guest-section .description {
  font-weight: normal;
  font-size: 15px;
  line-height: 20px;
  color: #636E72;
  margin-top: 45px;
}
.guest-section .guest-input {
  border: 2px solid #d7d7d7;
  box-sizing: border-box;
  border-radius: 10px;
  width: 315px;
  height: 45px;
  padding: 15px;
  margin-bottom: 20px;
}
.guest-section .guest-input::-moz-placeholder {
  color: #999;
}
.guest-section .guest-input:-ms-input-placeholder {
  color: #999;
}
.guest-section .guest-input::placeholder {
  color: #999;
}
.guest-section .guest-input:focus {
  outline: none;
}
.guest-section .guest-select {
  border: 2px solid #d7d7d7;
  background-color: white;
  box-sizing: border-box;
  border-radius: 10px;
  width: 315px;
  height: 45px;
  padding: 0px 15px;
  margin-bottom: 20px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.guest-section .guest-select:focus {
  outline: none;
}
.guest-section .placeholder:valid {
  color: #999;
}
.guest-section .guest-button {
  width: 650.14px;
  height: 45px;
  background: #57b1b9;
  border-radius: 10px;
  font-weight: bold;
  font-size: 15px;
  color: #ffffff;
}
.guest-section .guest-button:hover {
  background: #4fa4ac;
}
.guest-section .guest-button:focus {
  outline: none;
}
.guest-section .sign-button {
  width: 100%;
  height: 45px;
  background: #57b1b9;
  border-radius: 10px;
  margin-top: 20px;
  font-weight: bold;
  font-size: 15px;
  color: #ffffff;
}
.guest-section .sign-button:hover {
  background: #4fa4ac;
}
.guest-section .sign-button:focus {
  outline: none;
}

.kartu-member {
  height: 204px;
  width: 323px;
  border: 1px solid lightgrey;
  padding: 5px;
}
.kartu-member .row-wrapper {
  display: grid;
  grid-template-rows: 42px auto 30px;
}
.kartu-member .row-wrapper .header {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #ECCC68;
  border-radius: 5px;
  padding: 5px 15px 5px 15px;
}
.kartu-member .row-wrapper .header .left-logo {
  width: 23px;
  margin-right: 10px;
}
.kartu-member .row-wrapper .header .title-wrapper {
  display: grid;
  grid-template-rows: auto auto;
}
.kartu-member .row-wrapper .header .title-wrapper .title {
  font-weight: bold;
  font-size: 15px;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0.05em;
  color: #000000;
}
.kartu-member .row-wrapper .header .title-wrapper .subtitle {
  font-weight: bold;
  font-size: 11.7px;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0.025em;
  color: #000000;
}
.kartu-member .row-wrapper .header .right-logo {
  width: 25px;
  margin-left: 10px;
}
.kartu-member .row-wrapper .body {
  display: grid;
  grid-template-columns: 233px auto;
  grid-template-rows: 93px;
  padding-top: 5px;
}
.kartu-member .row-wrapper .body .left {
  background-color: #70A1FF;
  border-radius: 5px;
  margin-right: 5px;
  padding: 10px;
  font-weight: 500;
  font-size: 8.5px;
  line-height: 10px;
  letter-spacing: 0.02em;
  color: #000000;
}
.kartu-member .row-wrapper .body .left .detail-row {
  display: grid;
  grid-template-columns: 45px auto;
}
.kartu-member .row-wrapper .body .left .detail-row .detail-col div {
  margin-bottom: 3px;
}
.kartu-member .row-wrapper .body .right .image-wrapper {
  background-color: #FF6B81;
  border-radius: 5px;
  height: 100%;
  width: 100%;
  padding: 5px;
}
.kartu-member .row-wrapper .body .right .image-wrapper .image {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.kartu-member .row-wrapper .footer {
  display: grid;
  grid-template-columns: 47px auto 78px;
  padding-top: 5px;
}
.kartu-member .row-wrapper .footer .info {
  padding-left: 5px;
  position: relative;
}
.kartu-member .row-wrapper .footer .info .title {
  font-weight: 500;
  font-size: 6px;
  line-height: 7px;
  letter-spacing: 0.02em;
  color: #000000;
}
.kartu-member .row-wrapper .footer .info .subtitle {
  font-style: normal;
  font-weight: bold;
  font-size: 6px;
  line-height: 7px;
  letter-spacing: 0.02em;
  color: #000000;
  position: absolute;
  bottom: 0;
  left: 5;
}
.kartu-member .row-wrapper .footer .pustakawan {
  display: flex;
  flex-direction: column;
  position: relative;
}
.kartu-member .row-wrapper .footer .pustakawan .title {
  font-weight: 500;
  font-size: 5px;
  line-height: 6px;
  text-align: center;
  letter-spacing: 0.02em;
  color: #000000;
}
.kartu-member .row-wrapper .footer .pustakawan .ttd {
  position: absolute;
}
.kartu-member .row-wrapper .footer .pustakawan .subtitle {
  font-weight: 500;
  font-size: 5px;
  line-height: 6px;
  text-align: center;
  letter-spacing: 0.02em;
  color: #000000;
  margin-top: auto;
}

.belakang-kartu-member {
  height: 204px;
  width: 323px;
  border: 1px solid lightgrey;
  background-color: #70a2ff7c;
  padding: 8px 0px;
  overflow: hidden;
  position: relative;
}
.belakang-kartu-member .demo-bg {
  opacity: 0.3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: auto;
}
.belakang-kartu-member .row-wrapper {
  display: grid;
  grid-template-rows: 28px auto 30px;
  position: relative;
}
.belakang-kartu-member .row-wrapper .header {
  display: grid;
  grid-template-columns: auto;
  padding: 5px 15px 5px 15px;
  height: 100%;
  width: 100%;
  position: relative;
}
.belakang-kartu-member .row-wrapper .header .bg-header {
  opacity: 0.6;
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;
}
.belakang-kartu-member .row-wrapper .header .title-wrapper {
  display: grid;
  grid-template-rows: auto auto;
  z-index: 1;
}
.belakang-kartu-member .row-wrapper .header .title-wrapper .title {
  font-weight: 400;
  font-size: 8px;
  line-height: 10px;
  text-align: center;
  letter-spacing: 0.05em;
  color: #000000;
}
.belakang-kartu-member .row-wrapper .header .title-wrapper .subtitle {
  font-weight: 400;
  font-size: 8px;
  line-height: 10px;
  text-align: center;
  letter-spacing: 0.025em;
  color: #000000;
}
.belakang-kartu-member .row-wrapper .body {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  padding: 5px 15px 5px 15px;
}
.belakang-kartu-member .row-wrapper .body .visi .title {
  font-weight: bold;
  font-size: 8px;
  line-height: 12px;
  text-align: center;
  letter-spacing: 0.05em;
  color: #000000;
}
.belakang-kartu-member .row-wrapper .body .visi .description {
  width: 70%;
  padding: 5px 10px;
  padding-top: 0;
  font-weight: 500;
  font-size: 6px;
  line-height: 8px;
  letter-spacing: 0.02em;
  color: #000000;
}
.belakang-kartu-member .row-wrapper .body .misi .title {
  font-weight: bold;
  font-size: 8px;
  line-height: 12px;
  text-align: center;
  letter-spacing: 0.05em;
  color: #000000;
}
.belakang-kartu-member .row-wrapper .body .misi .description {
  padding: 5px 10px;
  padding-top: 0;
  font-weight: 500;
  font-size: 6px;
  line-height: 8px;
  letter-spacing: 0.02em;
  color: #000000;
}
.belakang-kartu-member .row-wrapper .body .motto .title {
  font-weight: bold;
  font-size: 8px;
  line-height: 12px;
  text-align: center;
  letter-spacing: 0.05em;
  color: #000000;
}
.belakang-kartu-member .row-wrapper .body .motto .description {
  padding: 5px 10px;
  padding-top: 0;
  font-weight: 500;
  font-size: 6px;
  line-height: 8px;
  letter-spacing: 0.02em;
  color: #000000;
  font-style: italic;
}

.details-member .image-wrapper {
  height: 335px;
  margin-bottom: 25px;
}
.details-member .image-wrapper .image {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.details-member .row {
  margin-bottom: 20px;
}
.details-member .row .title {
  color: #7c3aed;
  font-weight: 500;
}
.details-member .row .subtitle {
  font-size: 20px;
  font-weight: 500;
}/*# sourceMappingURL=main.css.map */