button {
  /* background-color: #4CAF50;
  color: white;
  margin: 5px 0;
  border: none;
  cursor: pointer;
  width: 100%; */

  margin: 5px 0;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  background-color: #ef568a;
  border: solid 0px #FFFFFF;
  font-family: Arial;
  font-size: 16px;
  color: white;
}

button:hover {
  opacity: 0.8;
}

.tombol_biru {
  background-color: #008CBA;
}

.tombol_merah {
  background-color: #ea4335;
}

.garis_kotak {}

h4,
option,
select,
input {
  font-family: Arial;
}



.header {
  padding: 0px;
  text-align: left;
  background: #00ADE0;
  color: white;
}

.header img {
  max-width: 100%;
  height: auto;
}



fieldset {
  border: 1px solid #DDDDDD;
  /* display: inline-block; */

}

legend {
  background: #1898d3;
  color: #FFFFFF;
  margin-bottom: 1px;
  padding: 4px;
  /* margin-left:2px;
  margin-right:2pxl */
  font-size: 16px;
  font-family: Arial;
}



.bawah {
  margin-top: 5px;
  /* margin-bottom: 5px; */

}

.cancelbtn {
  width: auto;
  /* padding: 10px 18px; */

  background-color: #ef568a;
}

.loginbtn {
  width: auto;
  /* padding: 10px 18px; */
  background-color: #3367D6;
}

.loginbtn_1 {
  width: auto;
  background-color: #00B896;
}


.loginbtn_2 {
  width: auto;
  background-color: #DAAE2B;
}

.loginbtn_3 {
  width: auto;
  background-color: #f39c12;
}

.loginbtn_4 {
  width: auto;
  background-color: #00c0ef;
}

.loginbtn_5 {
  width: auto;
  background-color: #8cc152;
}

.loginbtn_6 {
  width: auto;
  background-color: #00ade0;
}

.loginbtn_7 {
  width: auto;
  background-color: #009688;
}

.loginbtn_8 {
  width: auto;
  background-color: #f39c12;
}

.loginbtn_9 {
  width: auto;
  background-color: #00a6a4;
}

.disabled_1 {
  width: auto;
  background-color: #c7c6c6;
}



.detailbtn {
  width: auto;
  /* padding: 10px 18px; */
  background-color: #e91e63;
  /* 8cc152 */

  /*  */
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 2px;

}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 2px;
  text-align: left;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

  .col-25,
  .col-75 {
    width: 100%;
    margin-top: 0;
  }
}

.pesan_kecil {
  font-size: 16px;
  color: #ef568a;
  /* font-style: oblique; */
}

.pesan_kecil1 {
  font-size: 16px;
  color: #2196f3;
  /* font-style: oblique; */
}


/*  membagi dua kolom */

* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.bagi_kolom {
  float: left;
  width: 50%;
  padding: 5px;
  /* margin-right:5px; */
}

/* Clear floats after the columns */
.row_kolom:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .bagi_kolom {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .bagi_kolom {
    width: 100%;
  }
}