/* general set button */
.box-flex {
 height: 100%;
 display: flex;
 flex-direction: column;
 padding-bottom: 15px;
}

.btn-image-selection {
 margin-bottom: 8px;
 box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 10%);
 line-height: 20px;
 white-space: pre-wrap;
 flex: 1 0 auto;
 align-items: center !important;
 display: flex !important;
 justify-content: center;
 border-radius: 5px;
 font-size: 1rem;
}

.image-border {
 margin: 10px 15px;
 border-radius: 15px;
 box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
 display: none;
 min-height: 205px;
}



.image-border img {
 width: 100%;
 box-shadow: 0 1px 5px 2px rgb(0 0 0 / 10%);
 border-radius: 13px;
}

/* component image gejala */

.button-gejala .selected {
 background: #064469;
 color: white;
}

.btn-gejala:hover {
 background: #064469;
 color: white;
}

.content-gejala .button-gejala {
 margin-top: 10px;
}
.content-gejala {
 padding: 0 15px;
}

#image-gejala-1 {
 display: block;
}

/* component image procedure */
.button-procedure .selected {
 background: #064469;
 color: white;
}

.btn-procedure:hover {
 background: #0089d1;
 color: white;
}

.content-procedure .button-procedure {
 margin-top: 10px;
}
.content-procedure {
 padding: 0 15px;
}

.content-procedure img {
 width: 100%;
}

#image-procedure-1 {
 display: block;
}

/* component image facility */

.button-facility .selected {
 background: #0089d1;
 color: white;
}

.btn-facility:hover {
 background: #0089d1;
 color: white;
}

.content-facility .button-facility {
 margin-top: 10px;
}
.content-facility {
 padding: 0 15px;
}

#image-facility-1 {
 display: block;
}

/* component image procedure */
.button-procedure .selected {
 background: #0089d1;
 color: white;
}

.btn-procedure:hover {
 background: #0089d1;
 color: white;
}

.content-procedure .button-procedure {
 margin-top: 10px;
}
.content-procedure {
 padding: 0 15px;
}

.content-procedure img {
 width: 100%;
}

#image-procedure-1 {
 display: block;
}

/* component image problems */

.button-problems .selected {
 background: #0089d1;
 color: white;
}

.btn-problems:hover {
 background: #0089d1;
 color: white;
}

.content-problems .button-problems {
 margin-top: 10px;
}
.content-problems {
 padding: 0 15px;
}

.content-problems img {
 width: 100%;
}

#image-problems-1 {
 display: block;
}

.btn-danger-custom {
 border-radius: 5px;
 font-size: 14px;
 background-color: #0089d1;
 font-weight: 500;
 color: white !important;
 padding: 4px 15px;
 margin-right: 10px;
}

.wrapper-download-brochure i {
 vertical-align: middle;
 font-size: 22px;
}

.wrapper-download-brochure {
 border: solid 0.4px;
 padding: 6px;
 display: inline-block;
 border-radius: 5px;
 margin-top: -10px;
 border-color: lightgray;
}

.brochure-item {
 display: none;
}

.show {
 display: block;
}

.hide {
 display: none;
}


.box-latar {
 margin: 10px 15px;
 /*border-radius: 15px;*/
 /*box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);*/
 display: none;
 background-color: #ffffff;
 /*color: #ffffff;*/
 min-height: 205px;
 width: 100%;
 display: block;
}

.listing{
padding-top: 15px;
padding-bottom: 7px;
}

.btnn {
  border: 2px solid black;
  background-color: white;
  /*color: black;*/
  font-size:16px; 
  border-color: #e7e7e7;
  color: #064469; 
  font-weight: 530;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 20px;
}

/*.luar {
  border-color: #e7e7e7;
  color: #064469;
}*/


.tombol {
  border: 1px solid #2A7C97;
  background-color: #2A7C97;
  font-size:16px; 
  color: #ffffff; 
  font-weight: 530;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 30px;
}

/*.dua {
  color: #ffffff;
}*/

.tengah {
  width: 100%;
  /*height: 400px;*/
  /*border: 1px solid black;*/
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.head-latar{
  font-weight: 700;
  font-size:23px;
  color: #116377;
  padding-bottom: 30px;
}

.latar-text{
  font-weight: 550;
  font-size:19px;
  color: #116377;
  text-align: justify;
  padding-bottom: 40px;
}

.latar-text-dua{
  font-size:17px; 
  color: #116377; 
  font-weight: 530;
  text-align: justify;
}


.latar-text-tiga{
  font-size:14px;
  color: #8B9DB2;
  padding-top: 87px;
}

.latar-text-empat{
  font-size:14px;
  color: #8B9DB2;
  padding-top: 12px;
}

.latar-text-lima{
  font-size:14px;
  color: #8B9DB2;
  padding-top: 87x;
}

.frame-white{
  background-color:#ffffff;
}

.text-frame-putih{
  font-size:18px;
  color: #116377;
  font-weight: 530;
  padding-top:20px;
  text-align: justify;
}

.header-frame-putih{
  font-weight: 600;
  font-size:26px;
  color: #116377;
  padding-top:50px
}

.ikon-mata{
  padding-top:50px
}

.list-frame-white{
  font-size:17px;
  color: #116377;
  font-weight: 530;
}

.frame-pembuatan{
/*padding-top:70px;*/
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.batas-desktop{
  padding-top: 80px;
  padding-bottom: 80px;
}

.subhead-pembuatan{
  font-size: 26px;
  font-weight: 800;
  color: white;
  padding-bottom: 25px;
}

.textbd-pembuatan{
  font-size: 22px;
  font-weight: 600;
  color: white;
}

.batas-phone{
    display: none;
 }

 .batas-desktop{
    display: block;
 }

 .tampilan-hp{
  display: none;
 }

 .tampilan-desktop{
    display: block;
 }

 .text-benefit{
  font-size: 16px;
  text-align: justify;
  font-weight: 520;
 }

 .text-peta{
  font-size: 15px;
  font-weight: 700;
  color: #064469;
  background-color: #F7F7F7;
  padding-bottom: 10px;
  padding-left: 7px;
 }

 .tbl {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 12px;
}

@media only screen and (max-width: 900px) {
 .image-border {
  margin: 10px 0;
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
  display: none;
  min-height: 0px;
 }

 .box-latar {
 /*border-radius: 15px;*/
 /*box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);*/
 
 background-color: #ffffff;
 /*color: #ffffff;*/
 /*min-height: 205px;*/
 width: 100%;
 display: block;
 }

 .gambarlat{
    width: 100%;
 /*display: block;*/
 padding-top: 40px;
 }

 .ikon-mata{
    display: none;
 }

 .batas-desktop{
    display: none;
 }

 .batas-phone{
    display: block;
 }

 .tampilan-desktop{
  display: none;
 }

 .tampilan-hp{
    display: block;
 }

 .head-latar{
  font-weight: 700;
  font-size:23px;
  text-align: justify;
  color: #116377;
  padding-bottom: 30px;
  }

  .latar-text-tiga{
  font-size:14px;
  color: #8B9DB2;
  padding-bottom: 30px;
  padding-top: 7px;
  }

  .latar-text-empat{
  font-size:14px;
  color: #8B9DB2;
  padding-bottom: 30px;
  padding-top: 7px;
  }

  .frame-pembuatan-mobile{
    padding-top:15px;
    padding-bottom: 15px;
  }

  .subhead-pembuatan{
    font-size: 24px;
    font-weight: 800;
    color: white;
    padding-bottom: 25px;
  }

  .textbd-pembuatan{
    font-size: 20px;
    font-weight: 600;
    color: white;
    text-align: justify;
  }

  #image-gejala-5 {
 display: block;
}

}