#result {
  font-size: x-small;
  color: gray;
  float: right;
  padding-right: 11px;
}
.readonly {
  width: 10%;
}
.text-xxsmall {
  font-size: xx-small;
}

.rata-kanan {
  text-align: right;
  padding-right: 19px;
}

button {
  cursor: pointer;
}
.color-lgreen {
  color: lightseagreen;
}

#result-tabel {
  color: green;
  width: 22%;
  float: right;
  background: yellow;
  text-align: center;
}

textarea {
  min-height: 40px !important;
  height: 0px;
  border: 0px !important;
  text-align: center;
  vertical-align: middle;
}

/* End container */
.containter-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  /* border: 1px solid red; */
}
.input-1 {
  width: 10%;
}
.input-2 {
  width: 50%;
}

.container {
  width: 600px;
  border: 5px solid red;
  margin: 3px auto;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

.container-team div {
  width: 100px;
  height: 100px;
  background-color: rgb(240, 103, 49);
  margin: 2px;
}

.containter-tabel {
  width: 50%;
  height: auto;
  border-top: 0px solid rgb(222, 219, 226);
  margin: 1px auto;
  padding: 1px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  background: greenyellow;
}

.containter-menu {
  width: 100%;
  height: auto;
  border-top: 0px solid rgb(222, 219, 226);
  margin: 1px auto;
  padding: 1px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  /* background: orange; */
}

.width-10 {
  width: 10%;
}
.width-20 {
  width: 20%;
}

.col-1-ket-sub-1 {
  width: 5%;
}

.col-1-ket-sub-2 {
  width: 90%;
}

.col-1-ket {
  width: 90%;
  /* background: yellow; */
}

.col-1 {
  width: 50%;
  /* background: yellow; */
}
.col-2 {
  width: 20%;
  /* background: blue; */
}
.col-3 {
  width: 20%;
}
.col-4 {
  width: 10%;
}

.containter-team {
  width: 100%;
  height: auto;
  border: 2px solid rgb(33, 9, 72);
  margin: 5px auto;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

.card-petugas {
  width: 30%;
  height: 21vh;
  text-align: center;
  border: 3px solid #fff;
  padding-top: 5px;
}

textarea {
  height: 57px;
  border: 1px solid #dfe0e6 !important;
}

.card-pegawai {
  width: 20%;
  height: 17vh;
  text-align: center;
  border: 3px solid #fff;
  padding-top: 5px;
}

.containter-modal {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  /* border: 1px solid red; */
  box-sizing: border-box;
  padding: 5px;
  align-items: flex-start;
}

.containter-2 {
  display: flex;
  justify-content: left;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  /* border: 1px solid red; */
  box-sizing: border-box;
  padding: 5px;
  align-items: flex-start;
}

.label-1 {
  width: 100%;
  padding: 5px;
  font-size: large;
  text-align: center;
}

.readonly {
  border: 0px solid rgb(202, 230, 239);
  font-size: xx-small;
  color: gray;
  background: transparent;
}

.input-readonly {
  border: 0px;
  font-size: xx-small;
  color: gray;
}

.input-10 {
  width: 10%;
  text-align: left;
}

.input-11 {
  width: 17%;
  text-align: left;
}

.input-tanda {
  width: 3%;
  /* padding: 5px; */
  text-align: left;
}

.input-tabel-sub {
  width: 78%;
  display: flex;
  flex-direction: column;
}
/* End container */

.btn-nav {
  color: #ff450091;
  font-size: x-small;
  background: #dcdcdc7a;
}

.bg-blue-light {
  background: #00005108;
}

.btn-nav:hover {
  background: #000051;
  color: #fff;
}

.mt-10 {
  margin-top: 10px;
}

.input-123 {
  width: 78%;
  display: flex;
  flex-direction: row;
}

.input-12 {
  width: 3%;
}

.input-13 {
  width: 75%;
}

.input-72 {
  width: 72%;
}

.input-50 {
  width: 50%;
}

.input-15 {
  width: 15%;
}

.input-20 {
  width: 26%;
}

.input-48 {
  width: 48%;
}

.input-10 {
  width: 10%;
}

.input-30 {
  width: 30%;
}

.input-tgl1 {
  width: 38%;
  padding-right: 5%;
}
.input-tgl2 {
  width: 37%;
  padding-right: 5%;
}

.tWajib {
  color: red !important;
  font-style: italic;
  font-size: xx-small !important;
}

.spBlank {
  padding-top: 11px;
}

@media (min-width: 820px) {
  .r25 {
    width: 25%;
  }
  .r50 {
    width: 50%;
  }
  .r75 {
    width: 75%;
  }
  .r100 {
    width: 100%;
  }
}

.rOnly {
  font-size: xx-small;
  border: 0px solid;
  text-align: center;
  color: #808080a6;
  width: 72%;
}

#form_validate {
  width: 100%;
}
.user-name {
  font-weight: 700;
}
.user-level {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-weight: 300;
  letter-spacing: 2px;
}
.user-email {
  font-weight: 200;
  font-style: italic;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.user-date {
  font-weight: 200;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.form-avatar,
.img-update,
.img-responsive {
  opacity: 100% !important;
}

.text-line-1 {
  color: #1b8c1b;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  margin-bottom: 0px !important;
  font-size: medium;
}

.text-line-soft {
  font-size: x-small;
  color: #198b19;
  padding-bottom: 5px;
}

.t-email {
  font-size: small;
  color: black;
}

.text-line-3 {
  font-size: small;
  color: black;
}

.text-line-alamat {
  font-size: xx-small;
  color: rgb(29, 28, 28);
}

.text-line-4 {
  font-size: x-small;
  color: rgb(29, 28, 28);
}

.activity-border {
  background-image: linear-gradient(to right, green, #e6e6e6);
  padding: 88px 0px 0px 0px;
  border-radius: 11px 0px 0px 11px;
  width: 5px;
}

.htd {
  height: 5px;
}

.activity-img-tabel {
  background-image: linear-gradient(to right, rgb(27, 65, 234), #e6e6e6);
  padding: 16px 6px 16px 6px;
  border-radius: 11px 0px 0px 11px;
}

small {
  font-size: x-small !important;
  letter-spacing: 1px;
  font-style: italic;
}

i {
  color: #d0d0d0;
}

tr:hover {
  background-color: #ddecec !important;
}

.select2 {
  width: 100% !important;
}

.card-header {
  display: none;
}

.dropdown {
  padding-left: 25%;
}

.noPadding {
  padding: 0px !important;
}

@media screen and (max-width: 800px) {
  .card-header {
    display: block;
  }

  .header-closed {
    color: #fff;
    background: #000051;
    width: 6%;
    text-align: center;
    border-radius: 41px;
    height: 28px;
    font-size: large;
  }

  .header-closed:hover {
    background: #198b19;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 9px 16px !important;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  select.input-sm {
    height: 30px;
    line-height: 30px;
    margin-left: 18px;
  }
  .dropdown {
    color: #fff;
    background: transparent !important;
    padding: 0px;
    border-radius: 11px;
  }

  .dropdown:hover {
    color: #fff;
    /* background: rgb(14, 25, 107); */
    background: green !important;
    cursor: pointer;
  }

  /* button {
    outline: none !important;
    background: transparent !important;
    border: 0px !important;
  } */
  button:hover {
    background: #000051;
  }

  a {
    outline: none !important;
    background: #fff;
    border: 0px !important;
    /* width: 17px; */
  }

  .select2 {
    width: 100% !important;
  }

  .btn-success {
    color: #958e8e !important;
    background-color: #000051;
    border-color: #000051;
  }

  .btn-success:hover {
    color: #fff !important;
    background-color: #000051;
    border-color: #000051;
  }

  .option-icon:hover {
    background: #fff;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin-top: -7px;
  }
}