* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  font-family: Arial;
}

.Menus {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3rem;
  background: #FFFFFF;
}
.Menus a {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.Menus a i {
  color: #0D5093;
  font-size: 1.5rem;
}

.Toast {
  position: fixed;
  right: 0;
  bottom: 3rem;
  left: 0;
  padding-right: 1rem;
  padding-left: 1rem;
  width: 100%;
  height: 50%;
  background: #FFFFFF;
  border-top: 0.05rem solid #999999;
  border-radius: 1.5rem 1.5rem 0 0;
}
.Toast h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;
}
.Toast h1 a {
  text-decoration: none;
}
.Toast h1 a i {
  font-size: 1.5rem;
  color: #3A4C9A;
}
.Toast h1 span {
  flex-grow: 1;
  text-align: center;
  font-size: 0.75rem;
  color: #999999;
}
.Toast p {
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #666666;
  text-align: center;
}
.Toast ul {
  list-style: none;
}
.Toast ul li a {
  display: flex;
  padding-right: 1rem;
  padding-left: 1rem;
  justify-content: flex-start;
  align-items: center;
  height: 2.5rem;
  border-bottom: 0.05rem solid #D0D0D0;
  font-size: 0.75rem;
  color: #333333;
  text-decoration: none;
}
.Toast ul li:last-child a {
  border-bottom: 0;
}

.Navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
}
.Navigation a {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  width: 3rem;
  height: 3rem;
  text-decoration: none;
  cursor: pointer;
}
.Navigation a i {
  font-size: 1.5rem;
  color: #FFFFFF;
}
.Navigation span {
  margin-left: -3rem;
  z-index: 999;
  flex-grow: 1;
  font-size: 1rem;
  color: #FFFFFF;
  text-align: center;
}

.Form {
  padding-top: 1rem;
  padding-right: 5%;
  padding-bottom: 1rem;
  padding-left: 5%;
}
.Form h1 {
  display: flex;
  margin-top: 1rem;
  margin-bottom: 1rem;
  justify-content: center;
  font-size: 1rem;
  color: #FFFFFF;
}
.FormBox {
  display: flex;
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  flex-direction: column;
  background: rgba(188, 220, 247, 0.75);
  border-radius: 0.25rem;
}
.FormBox p {
  display: flex;
  margin-bottom: 1rem;
}
.FormBox p span {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
  font-size: 0.75rem;
  color: #FFFFFF;
}
.FormBox p a {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
  font-size: 0.75rem;
  color: #3A4C9A;
  text-decoration: none;
}
.FormBox p.Message {
  display: flex;
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  font-size: 0.75rem;
  background: #F0F0F0;
}
.FormBox p.Message.Success {
  background: #719707;
  color: #FFFFFF;
}
.FieldGroup {
  display: flex;
  flex-direction: column;
}
.FieldGroup label {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: #FFFFFF;
}
.FieldInput {
  position: relative;
  margin-bottom: 1rem;
  flex-grow: 1;
  overflow: hidden;
  width: 100%;
}
.FieldInput i {
  display: flex;
  position: absolute;
  top: 0;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  color: #376679;
  cursor: default;
}
.FieldInput.Right i {
  right: 0;
}
.FieldInput.Left i {
  left: 0;
}
.FieldInput input,
.FieldInput textarea {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  width: 100%;
  height: 2.5rem;
  border: 0.05rem solid #C0C0C0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: #333333;
}
.FieldInput input:read-only {
  background: #F9F9F9;
  color: #666666;
}
.FieldInput textarea {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  min-height: 4rem;
}
.FieldInput.Right input {
  padding-right: 2.5rem;
  padding-left: 0.5rem;
}
.FieldInput.Left input {
  padding-right: 0.5rem;
  padding-left: 2.5rem;
}
.FieldInput select {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  width: 100%;
  height: 2.5rem;
  background: #FFFFFF;
  border: 0.05rem solid #C0C0C0;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: #333333;
}
.FieldInput select option {
  font-size: 0.75rem;
  color: #333333;
}
.FieldInput button {
  float: right;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-top: 0.5rem;
  background: #106DB3;
  height: 2rem;
  font-size: 0.75rem;
  color: #FFFFFF;
  border: none;
  border-radius: 0.25rem;
}
.FieldFile {
  display: flex;
  position: relative;
  margin-bottom: 1rem;
  align-items: center;
}
.FieldFile input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-grow: 1;
  width: 100%;
  min-height: 2rem;
  opacity: 0;
}
.FieldFile span {
  display: flex;
  margin-right: 0.5rem;
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  align-items: center;
  width: 100%;
  min-height: 2rem;
  background: #FFFFFF;
  font-size: 0.75rem;
  color: #999999;
  border-radius: 0.25rem;
}
.FieldFile i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 1.5rem;
  color: #106DB3;
  font-size: 1.5rem;
  border-radius: 0.25rem;
}
.FieldFile i.success {
  color: #32BA00;
}
.FieldFile i.failed {
  color: #C22900;
}
.FieldCheckbox {
  display: flex;
  margin-bottom: 1rem;
  justify-content: flex-start;
  align-items: center;
}
.FieldCheckbox input {
  margin-right: 0.5rem;
}
.FieldCheckbox label {
  font-size: 0.75rem;
  color: #333333;
}
.FieldCheckbox.White label {
  color: #FFFFFF;
}
.FieldDateRange {
  display: flex;
  align-items: center;
}
.FieldDateRange input {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  width: 45%;
  height: 2.5rem;
  font-size: 0.75rem;
  color: #333333;
}
.FieldDateRange span {
  flex-grow: 1;
  font-size: 0.75rem;
}
.FieldDetail {
  display: block;
  width: 100%;
  height: auto;
}
.FieldDetail span {
  display: block;
  color: #FFFFFF;
}
.FieldDetail span:first-child {
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  font-style: italic;
}
.FieldDetail span:last-child {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}
.FieldAlert {
  display: block;
  flex-direction: column;
}
.FieldAlert span {
  display: block;
  text-align: center;
  font-size: 0.95rem;
  color: #FFFFFF;
}
.FieldAlert button {
  display: flex;
  margin-top: 1rem;
  margin-right: auto;
  margin-bottom: 1rem;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2rem;
  background: #106DB3;
  border: none;
  border-radius: 0.25rem;
}
.FieldAlert button span {
  font-size: 0.75rem;
  color: #FFFFFF;
}
.FieldAction {
  display: flex;
  margin-bottom: 1rem;
  justify-content: flex-end;
}
.FieldAction a {
  display: flex;
  align-items: center;
  flex-grow: 1;
  text-decoration: none;
}
.FieldAction a i {
  font-size: 1.5rem;
  color: #3A4C9A;
}
.FieldAction a span {
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: #3A4C9A;
}
.FieldAction button {
  padding-right: 1rem;
  padding-left: 1rem;
  width: auto;
  height: 2rem;
  background: #106DB3;
  border: none;
  border-radius: 0.25rem;
}
.FieldAction button span {
  font-size: 0.75rem;
  color: #FFFFFF;
}
.FieldAction button:nth-child(even) {
  margin-left: 0.5rem;
}
.FieldAction .BtnBlock {
  flex-grow: 1;
}
.FieldAction .White {
  color: #FFFFFF;
}

.Menubar {
  display: grid;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  width: 100%;
  height: auto;
}
.Menubar button {
  float: left;
  display: flex;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  align-items: center;
  width: auto;
  height: 2rem;
  border: none;
  border-radius: 0.25rem;
  background: #FFFFFF;
}
.Menubar button span {
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: #466485;
}
.Menubar button i {
  font-size: 1.5rem;
  color: #466485;
}


.PageInfo {
  display: flex;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.PageInfo h1 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  color: #C0C0C0;
}
.PageInfo p {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: #D0D0D0;
}


.Status {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 2;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}
.StatusDetail {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  background: #FFFFFF;
  border-radius: 0.5rem;
}
.StatusDetail p {
  display: block;
}
.StatusDetail p span {
  display: block;
  margin-bottom: 0.5rem;
}
.StatusDetail p span:first-child {
  font-size: 0.75rem;
  color: #666666;
}
.StatusDetail p span:last-child {
  font-size: 1rem;
  font-weight: bold;
  color: #000000;
}
.StatusItem {
  display: flex;
  padding-top: 1rem;
  padding-right: 0.5rem;
  padding-bottom: 1rem;
  padding-left: 0.5rem;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 0.5rem;
}
.StatusItem p {
  font-size: 0.75rem;
  font-weight: bold;
  color: #466485;
}
.StatusItem i {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 3rem;
}
.StatusItem span {
  font-size: 0.75rem;
  font-weight: bold;
  color: #466485;
}
.StatusButton {
  display: flex;
  padding-top: 0.25rem;
  padding-right: 0.5rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-direction: row;
  gap: 0.25rem;
  background: #FFFFFF;
  border-radius: 0.5rem;
  text-decoration: none;
}
.StatusButton i {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 3rem;
  color: #466485;
}
.StatusButton span {
  font-size: 0.75rem;
  font-weight: bold;
  color: #466485;
}

i.success {
  color: #32BA00 !important;
}
i.failed {
  color: #C22900 !important;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: url('../img/logo_skat.png') center no-repeat;
  background-size: 75% auto;
}

#Wrapper {
  display: grid;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: 1fr;
  overflow: auto;
  width: 100%;
  height: 100%;
  background: rgba(13, 92, 159, 0.75);
}

#Login {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 1;
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: 5rem 7.5rem 2rem 1fr;
}
#Login .LoginLogos {
  display: flex;
  grid-column: 1 / span 120;
  grid-row: 1;
  justify-content: center;
  align-items: center;
}
#Login .LoginLogosImg {
  display: flex;
  margin-top: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  border-radius: 100%;
}
#Login .LoginLogosImg img {
  width: 2.5rem;
  height: auto;
}
#Login .LoginTitle {
  display: flex;
  grid-column: 1 / span 120;
  grid-row: 2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#Login .LoginTitle span {
  font-size: 3.75rem;
  color: #FFFFFF;
}
#Login .LoginTitle small {
  text-align: center;
  font-size: 0.65rem;
  color: #FFFFFF;
}
#Login .LoginMethod {
  display: flex;
  grid-column: 1 / span 120;
  grid-row: 3;
  padding-right: 5%;
  padding-left: 5%;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}
#Login .LoginMethod button {
  flex-grow: 1;
  padding-right: 1rem;
  padding-left: 1rem;
  width: auto;
  height: 2rem;
  font-size: 0.75rem;
  background: rgba(188, 220, 247, 0.75);
  border: 1px solid rgba(188, 220, 247, 0.75);
  border-radius: 0.25rem;
  color: #F0F0F0;
}
#Login .LoginMethod button.active {
  border: 1px solid #FFFFFF;
  color: #3A4C9A;
}
#Login .Form {
  grid-column: 1 / span 120;
  grid-row: 4;
}

#Register {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 1;
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: 3rem 1fr;
}
#Register .Navigation {
  grid-column: 1 / span 120;
  grid-row: 1;
}
#Register .Form {
  grid-column: 1 / span 120;
  grid-row: 2;
}

#Aktivasi a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 16rem;
  height: 5rem;
  background: #F0F0F0;
  text-decoration: none;
  border: 1px solid #909090;
  border-radius: 10px;
}
#Aktivasi a span {
  font-size: 1rem;
  font-weight: bold;
  color: #333333;
}
#Aktivasi a img {
  width: 3rem;
  height: auto;
}

#Dashboard {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 1;
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: 5rem 1fr 3rem;
}
#Dashboard .PageInfo {
  grid-column: 1 / span 120;
  grid-row: 1;
}
#Dashboard .Status {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(3, auto);
}
#Dashboard .StatusItem.SkatTerdaftar {
  margin-right: 0.25rem;
  margin-bottom: 1.5rem;
}
#Dashboard .StatusItem.TransmiterAktif {
  margin-right: 0.25rem;
  margin-bottom: 1.5rem;
}
#Dashboard .StatusItem.TransmiterMati {
  margin-left: 0.25rem;
  margin-bottom: 1.5rem;
}
#Dashboard .StatusItem.SkatTerdaftar {
  grid-column: 1 / span 2;
}
#Dashboard .StatusItem.SkatTerdaftar i,
#Dashboard .StatusItem.TransmiterAktif i {
  color: #32BA00;
}
#Dashboard .StatusItem.SkatProses i,
#Dashboard .StatusItem.TransmiterMati i {
  color: #C22900;
}
#Dashboard .StatusButton.SkatPelayanan {
  grid-column: 1 / span 2;
  margin-bottom: 1.5rem;
}

#Kapal {
  grid-column: 1 / span 120;
  grid-row: 1;
}
#Kapal .Menubar {
  grid-template-columns: auto 0.25rem auto 1fr;
  grid-template-rows: 1fr;
}
#Kapal .Menubar button:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
#Kapal .Menubar button:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}
#Kapal .Menubar button:nth-child(3) {
  grid-column: 4;
  grid-row: 1;
}
#Kapal .Titlebar {
  display: grid;
  padding-right: 1rem;
  padding-left: 1rem;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr 2.5rem 1fr;
  align-items: center;
  justify-content: center;
}
#Kapal .Titlebar h1 {
  grid-column: 1;
  grid-row: 2;
  font-size: 1rem;
  color: #FFFFFF;
}
#Kapal .Titlebar a {
  display: flex;
  grid-column: 3;
  grid-row: 2;
  padding-right: 1rem;
  padding-left: 1rem;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #466485;
  border-radius: 0.25rem;
  text-decoration: none;
}
#Kapal .Titlebar a span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
  font-size: 0.75rem;
}
#Kapal .Titlebar a i {
  margin-right: 0.5rem;
  font-size: 1rem;
}
#Kapal .ListKapal {
  display: block;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 3rem;
  padding-left: 1rem;
}
#Kapal .KapalItem {
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  width: 100%;
  background: #FFFFFF;
  border-radius: 0.25rem;
}
#Kapal .KapalInfo {
  margin-bottom: 0.25rem;
  width: 100%;
  color: #666666;
}
#Kapal .KapalInfo p:first-child {
  font-size: 0.75rem;
  color: #C0C0C0;
}
#Kapal .KapalInfo p:last-child {
  display: flex;
  flex-grow: 1;
  align-items: center;
}
#Kapal .KapalInfo p span {
  display: flex;
  height: 1.5rem;
  align-items: center;
  font-size: 0.75rem;
  color: #999999;
}
#Kapal .KapalInfo p span:nth-child(1) {
  flex-grow: 1;
}
#Kapal .KapalInfo p span:nth-child(2) {
  padding-right: 1rem;
  padding-left: 1rem;
  height: 1.5rem;
  background: #999999;
  font-size: 0.5rem;
  color: #FFFFFF;
}
#Kapal .KapalAction {
  display: flex;
  margin-top: 1rem;
  align-items: center;
  justify-content: right;
}
#Kapal .KapalAction button {
  border: none;
  border-radius: 0.25rem;
  background: #0C599B;
  font-size: 0.5rem;
  color: #FFFFFF;
  border: 0;
  outline: none;
  min-height: 2.5rem;
  min-width: 50%;
}
#Kapal .KapalAction button[disabled] {
  background: #999999;
}
#ToastPermohonanPersetujuan .FieldAction a {
  font-weight: bold;
  color: #0C599B;
}

#Pelanggaran {
  grid-column: 1 / span 120;
  grid-row: 1;
}
#Pelanggaran .Titlebar {
  display: grid;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr 2.5rem 1fr;
  align-items: center;
  justify-content: center;
  background: #F9F9F9;
  border-bottom: 1px solid #0C599B;
}
#Pelanggaran .Titlebar h1 {
  grid-column: 1;
  grid-row: 2;
  font-size: 1rem;
  color: #0C599B;
}
#Pelanggaran .Titlebar a {
  display: flex;
  grid-column: 3;
  grid-row: 2;
  padding-right: 1rem;
  padding-left: 1rem;
  align-items: center;
  justify-content: center;
  background: #C0C0C0;
  color: #FFFFFF;
  border-radius: 0.25rem;
  text-decoration: none;
}
#Pelanggaran .Titlebar a span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
  font-size: 0.75rem;
}
#Pelanggaran .Titlebar a i {
  margin-right: 0.5rem;
  font-size: 1rem;
}
#Pelanggaran .ListPelanggaran {
  display: block;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 3rem;
  padding-left: 1rem;
}
#Pelanggaran .PelanggaranItem {
  display: block;
  float: none;
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  width: 100%;
  background: #FFFFFF;
  border-radius: 0.25rem;
}
#Pelanggaran .PelanggaranInfo,
#Pelanggaran .PelanggaranStatus {
  margin-bottom: 0.25rem;
  width: 100%;
  color: #666666;
}
#Pelanggaran .PelanggaranInfo p:first-child,
#Pelanggaran .PelanggaranStatus p:first-child {
  font-size: 0.75rem;
  color: #C0C0C0;
}
#Pelanggaran .PelanggaranInfo p:last-child,
#Pelanggaran .PelanggaranStatus p:last-child {
  display: flex;
  flex-grow: 1;
  align-items: center;
}
#Pelanggaran .PelanggaranInfo p span,
#Pelanggaran .PelanggaranStatus p span {
  display: flex;
  height: 1.5rem;
  align-items: center;
  font-size: 0.75rem;
  color: #999999;
}
#Pelanggaran .PelanggaranInfo p span:nth-child(1),
#Pelanggaran .PelanggaranStatus p span:nth-child(1) {
  flex-grow: 1;
}
#Pelanggaran .PelanggaranInfo p span:nth-child(2) {
  font-weight: bold;
}
#Pelanggaran .PelanggaranStatus p span:nth-child(2) {
  padding-right: 1rem;
  padding-left: 1rem;
  height: 1.5rem;
  background: #FF0066;
  font-size: 0.5rem;
  color: #FFFFFF;
}

#History {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 1;
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: 3rem 1fr;
}
#History .Navigation {
  grid-column: 1 / span 120;
  grid-row: 1;
}
#History .ListHistory {
  display: block;
  grid-column: 1 / span 120;
  grid-row: 2;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 3rem;
  padding-left: 1rem;
}
#History .HistoryItem {
  display: block;
  float: none;
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  width: 100%;
  background: #FFFFFF;
  border-radius: 0.25rem;
}
#History .HistoryInfo,
#History .HistoryStatus {
  margin-bottom: 0.25rem;
  width: 100%;
  color: #666666;
}
#History .HistoryInfo p:first-child,
#History .HistoryStatus p:first-child {
  font-size: 0.75rem;
  color: #C0C0C0;
}
#History .HistoryInfo p:last-child,
#History .HistoryStatus p:last-child {
  display: flex;
  flex-grow: 1;
  align-items: center;
}
#History .HistoryInfo p span,
#History .HistoryStatus p span {
  display: flex;
  height: 1.5rem;
  align-items: center;
  font-size: 0.75rem;
  color: #999999;
}
#History .HistoryInfo p span:nth-child(1),
#History .HistoryStatus p span:nth-child(1) {
  flex-grow: 1;
}
#History .HistoryInfo p span:nth-child(2) {
  font-weight: bold;
}
#History .HistoryStatus p span:nth-child(2) {
  padding-right: 1rem;
  padding-left: 1rem;
  height: 1.5rem;
  background: #FF0066;
  font-size: 0.5rem;
  color: #FFFFFF;
}

#PelanggaranKlarifikasi,
#PelanggaranBilling {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 1;
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: 3rem 1fr;
}
#PelanggaranKlarifikasi .Navigation,
#PelanggaranBilling .Navigation {
  grid-column: 1 / span 120;
  grid-row: 1;
}
#PelanggaranKlarifikasi .Form,
#PelanggaranBilling .Form {
  grid-column: 1 / span 120;
  grid-row: auto;
}

#Permohonan {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 1;
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: 3rem 1fr;
}
#Permohonan .Navigation {
  grid-column: 1 / span 120;
  grid-row: 1;
}
#Permohonan .Form {
  grid-column: 1 / span 120;
  grid-row: auto;
}
#ToastPermohonanBaru,
#ToastPermohonanPerpanjangan,
#ToastPermohonanPerubahan,
#ToastPermohonanPenggantian,
#ToastPermohonanLembarTransmitter {
  bottom: 0;
}

#Detail {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 1;
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: 3rem auto auto;
}
#Detail .Navigation {
  grid-column: 1 / span 120;
  grid-row: 1;
}
#Detail .Status {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 3;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(4, auto);
}
#Detail .StatusDetail.DetailKapal {
  margin-bottom: 1rem;
  grid-column: 1 / span 2;
}
#Detail .StatusItem.StatusTransmiter {
  margin-bottom: 0.5rem;
  grid-column: 1 / span 2;
}
#Detail .StatusItem.StatusSipi {
  margin-right: 0.5rem;
}
#Detail .StatusItem.StatusSKAT {
  margin-left: 0.5rem;
}
#Detail .StatusItem i {
  color: #32BA00;
}
#Detail .Action {
  display: flex;
  grid-column: 1 / span 120;
  grid-row: 4;
  margin-bottom: 2rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  width: 100%;
  height: 2.5rem;
}
#Detail .Action button {
  flex-grow: 1;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  background: #FFFFFF;
  border: none;
  border-radius: 0.25rem;
  outline: none;
}
#Detail .Action button span {
  font-size: 0.75rem;
  color: #0C599B;
}
#Peta {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 1;
  grid-template-columns: repeat(1, 120);
  grid-template-rows: 3rem 1fr;
}
#Peta .Navigation {
  grid-column: 1 / span 120;
  grid-row: 1;
}
#Peta .Status {
  grid-column: 1 / span 120;
  grid-row: 2;
  z-index: 1000;
}
#Peta .Status {
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: auto 1fr;
}
#Peta .StatusDetail {
  grid-column: 5 / span 115;
  background: rgb(88, 159, 216, 0.5);
  border: 0.01rem solid #FFFFFF;
}
#Peta .StatusDetail p span:first-child {
  font-size: 0.85rem;
  font-weight: bold;
  color: #FFFFFF;
}
#Peta .StatusDetail p span:last-child {
  font-size: 0.75rem;
  color: #E0E0E0;
}
#Peta .Map {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 2;
}
#Dokumen {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 1;
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: 3rem auto;
}
#Dokumen .Navigation {
  grid-column: 1 / span 120;
  grid-row: 1;
}
#Dokumen .DokumenContainer {
  grid-column: 1 / span 120;
  grid-row: 2;
}

#Track {
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 1;
  grid-template-columns: repeat(1, 120);
  grid-template-rows: auto 3rem;
}
#Track .Navigation {
  grid-column: 1 / span 120;
  grid-row: 1;
}
#Track .Status {
  grid-column: 1 / span 120;
  grid-row: 2;
  z-index: 1000;
}
#Track .Status {
  grid-template-columns: repeat(120, 1fr);
  grid-template-rows: auto 1fr;
}
#Track .StatusDetail {
  grid-column: 5 / span 115;
  background: rgb(88, 159, 216, 0.5);
  border: 0.01rem solid #FFFFFF;
}
#Track .StatusDetail p span:first-child {
  font-size: 0.85rem;
  font-weight: bold;
  color: #FFFFFF;
}
#Track .StatusDetail p span:last-child {
  font-size: 0.75rem;
  color: #E0E0E0;
}
#Track .Map {
  position: relative;
  display: grid;
  grid-column: 1 / span 120;
  grid-row: 1;
  border-bottom: 0.05rem solid #C0C0C0;
}

/* remove esri map outline */
.esri-view .esri-view-surface--inset-outline:focus::after {
  outline: none !important;
}
/* esri scalebar text */
.esri-scale-bar__label {
  font-size: 0.75rem;
}
/* esri attribute text */
.esri-attribution__sources,
.esri-attribution__powered-by,
.esri-attribution__link {
  font-size: 0.75rem;
}

#ToastListLayer {
  z-index: 1000;
}
#Track .TrackOptions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1000;
  width: auto;
  height: auto;
}
#Track .TrackOptions ul {
  display: flex;
  flex-direction: column;
}
#Track .TrackOptions ul li {
  overflow: hidden;
  border-radius: 100%;
  list-style: none;
}
#Track .TrackOptions ul li * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #F0F0F0;
  color: #0D5093;
}
#Track .TrackIndicator {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  z-index: 1000;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  flex-direction: column;
  width: auto;
  height: auto;
  background: #FFFFFF;
  border-radius: 0.25rem;
}
#Track .TrackIndicator h1 {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
#Track .TrackIndicator p {
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
}
#Track .TrackIndicator p span {
  width: 30%;
  font-size: 0.75rem;
}
#Track .TrackIndicator p span:last-child {
  height 1rem;
  flex-grow: 1;
  background: #F0F0F0;
}
#Track .TrackNavigation {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  display: flex;
  z-index: 1000;
  gap: 0.5rem;
  width: auto;
  height: auto;
  border-radius: 0.25rem;
}
#Track .TrackNavigation button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  background: #0C599B;
  border: 0.1rem solid #999999;
  border-radius: 0.25rem;
  font-size: 2rem;
  color: #FFFFFF;
  cursor: pointer;
}

#PopupTrackKapal h1 {
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1rem;
  color: #000000;
}
#PopupTrackKapal .Row {
  display: flex;
  flex-direction: column;
  text-align: left;
}
#PopupTrackKapal .Row span {
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
#PopupTrackKapal .Row span:first-child {
  color: #333333;
}
#PopupTrackKapal .Row span:last-child {
  color: #666666;
}
#PopupTrackKapal .Action {
  display: flex;
  margin-top: 1rem;
  justify-content: flex-end;
}
#PopupTrackKapal .Action button {
  padding: 0.75rem;
  color: #FFFFFF;
  background: #0D5093;
  font-size: 0.75rem;
  border-radius: 0.25rem;
}

.PopupRating {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
.PopupRatingInput {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.PopupRatingInput textarea {
  padding: 0.5rem;
  width: 100%;
  height: 7.5rem;
}
.PopupRatingAction {
  display: flex;
}
.PopupRatingAction button {
  display: flex;
  margin-top: 1rem;
  margin-right: auto;
  margin-bottom: 1rem;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2rem;
  background: #106DB3;
  border: none;
  border-radius: 0.25rem;
}
.PopupRatingAction button span {
  font-size: 0.75rem;
  color: #FFFFFF;
}
.rating {
  --dir: right;
  --fill: gold;
  --fillbg: rgba(100, 100, 100, 0.15);
  --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
  --stars: 5;
  --starsize: 3rem;
  --value: 1;
  --x: calc(100% * (var(--value) / var(--stars)));
  block-size: var(--starsize);
  inline-size: calc(var(--stars) * var(--starsize));
  position: relative;
  touch-action: manipulation;
  -webkit-appearance: none;
}
[dir="rtl"] .rating {
  --dir: left;
}
.rating::-moz-range-track {
  background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
  block-size: 100%;
  mask: repeat left center/var(--starsize) var(--star);
}
.rating::-webkit-slider-runnable-track {
  background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
  block-size: 100%;
  mask: repeat left center/var(--starsize) var(--star);
  -webkit-mask: repeat left center/var(--starsize) var(--star);
}
.rating::-moz-range-thumb {
  height: var(--starsize);
  opacity: 0;
  width: calc(var(--starsize) / 2);
}
.rating::-webkit-slider-thumb {
  height: var(--starsize);
  opacity: 0;
  width: calc(var(--starsize) / 2);
  -webkit-appearance: none;
}
.rating, .rating-label {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.rating-label {
  margin-block-end: 1rem;
}

.PopupPolling {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
.PopupPollingDisclaimer {
  display: flex;
  flex-direction: column;
}
.PopupPollingDisclaimer p {
  padding-left: 1rem;
  margin-bottom: 0.25rem;
  text-align: justify;
  font-size: 0.75rem;
  color: #666666;
}
.PopupPollingDisclaimer p::before {
  content: '';
  margin-top: 0.1rem;
  margin-left: -1rem;
  display: inline-block;
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background:#909090;
  border-radius: 100%;
}
.PopupPollingInput {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.PopupPollingInput textarea {
  padding: 0.5rem;
  width: 100%;
  height: 7.5rem;
}
.PopupPollingOptions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.PopupPollingOptionsItem {
  position: relative;
  display: flex;
  width: auto;
  height: auto;
}
.PopupPollingOptionsItem input {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
  opacity: 0;
}
.PopupPollingOptionsItem label {
  padding: 0.5rem;
  background: #909090;
  font-size: 0.75rem;
  color: #FFFFFF;
  border-radius: 0.25rem;
}
.PopupPollingOptionsItem input:checked + label {
  background: #1690ec;
}
.PopupPollingAction {
  display: flex;
}
.PopupPollingAction button {
  display: flex;
  margin-top: 1rem;
  margin-right: auto;
  margin-bottom: 1rem;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2rem;
  background: #106DB3;
  border: none;
  border-radius: 0.25rem;
}
.PopupPollingAction button span {
  font-size: 0.75rem;
  color: #FFFFFF;
}

.PopupTerms {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
.PopupTermsConfirmMessage {
  text-align: center;
  font-size: 0.75rem;
  color: #FF0066;
}
.PopupTermsDisclaimer {
  display: flex;
  flex-direction: column;
}
.PopupTermsDisclaimer p {
  text-align: justify;
  font-size: 0.85rem;
  color: #333333;
  white-space: pre-line;
}
.PopupTermsAction {
  display:flex;
  gap: 0.5rem;
}
.PopupTermsAction span {
  font-size: 0.85rem;
  color: #666666;
}

#Akun {
  grid-column: 1 / span 120;
  grid-row: 1;
  padding-bottom: 3rem;
}
#Akun .PageInfo {
  padding-bottom: 0;
}
#Akun .Form {
  padding-top: 0;
}

/* Select2 */
.select2-container .select2-selection--single {
  display: flex;
  width: 100%;
  height: 2.5rem;
  align-items: center;
}
.select2-selection__rendered {
  flex-grow: 1;
  font-size: 0.75rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  position: relative;
}
.select2-search__field {
  font-size: 0.75rem;
}
.select2-results__option {
  font-size: 0.75rem;
}

@media screen and (min-width: 992px) {
  body::after {
    background-size: 25% auto;
  }

  .Menus {
    padding-right: 25%;
    padding-left: 25%;
  }

  #Login {
    grid-column: 43/ span 36;
  }

  #Register .Form {
    grid-column: 31 / span 60;
  }

  #Dashboard .Status {
    grid-column: 31 / span 60;
  }

  #Akun .Form {
    margin: 0 auto;
    width: 50%;
  }

  #Kapal .ListKapal {
    overflow: hidden;
  }
  #Kapal .KapalItem {
    float: left;
    width: 30%;
    margin-top: 2.5%;
    margin-left: 2.5%;
  }

  #Kapal .ListKapal,
  #Pelanggaran .ListPelanggaran {
    overflow: hidden;
  }
  #Kapal .KapalItem,
  #Pelanggaran .PelanggaranItem {
    float: left;
    width: 30%;
    margin-top: 2.5%;
    margin-left: 2.5%;
  }
  #Pelanggaran .ListHistory {
    overflow: hidden;
  }
  #ListHistory .HistoryItem {
    float: left;
    width: 30%;
    margin-top: 2.5%;
    margin-left: 2.5%;
  }

  #Detail .Status {
    grid-column: 31 / span 60;
  }
  #Detail .Action {
    grid-column: 31 / span 60;
  }

  #Permohonan .Form {
    grid-column: 31 / span 60;
  }
  #PelanggaranKlarifikasi .Form {
    grid-column: 31 / span 60;
  }
}

@media screen and (min-width: 1200px) {
  body::after {
    background-size: 35% auto;
  }
}