/*
 * auth: budiono
 * date: aug-31, 10:04, thu-2023;
 * edit: sep-04, 21:55, mon-2023;
 */

html {
  font-size: 14px;
}

@media (max-width: 900px) {
  html { font-size: 13px; }
}
@media (max-width: 400px) {
  html { font-size: 10px; }
}

input:focus,textarea:focus{
  outline:none; //ini penting
}

body{
  margin:0px;
  padding:0px;
  background-color:#f9f9fb;
  font-family:helvetica; /*sans*/;
  color: #101010;
}

ul {
  list-style-type: none;
  margin: 0;
  padding:0;
}

li {
  margin-left:0.1rem;
  margin-top:0.2rem;
  height:1.5rem;
}
label{
  display:inline-block;
  width:8rem;
}
input[type=text],input[type=password],textarea,input[type=date]{
  border-radius:7px;
  padding-left:0.2rem;
  padding-right:0.1rem;
  border:1px solid grey;
}
input[type=text]:focus,input[type=password]:focus,textarea:focus,input[type=date]:focus{
  color:black;
  border:1px solid blue;
  
}
input:disabled{
  color:#00008B; //darkblue
  background-color:lightgrey;
}
input[type=text]:disabled, select:disabled{
  color:#00008B;
  background-color:#E0E0E0; /*#F0F0F0;*/
}
.div-center{
  margin:0;
  top:2rem;
  left:50%;
  position:absolute;
  transform:translate(-50%,0)
}
.dropbtn {}
.dropdown-content {}


/*table*/
table{
  border-collapse: collapse;
  width:100%;

}
td{
  padding:0.1rem 0.5rem 0.1rem 0.5rem;
  border:1px solid lightgrey;
  /*word-wrap:break-word;*/
  /*word-wrap:break-all;*/
  white-space:pre-wrap;
  cursor: pointer;
}
th{
  text-align:center;
  border:1px solid lightgrey;
  color:#101010;
  padding-left:0.5rem;
  padding-right:0.5rem;
  padding-top:0.3rem;
  padding-bottom:0.2rem;
}
button,input[type=button]{
  margin:0.1rem;
  background-color:#d5dbdb;
  border-radius:5px;
  border:1px solid lightgrey;
}
button:hover,input[type=button]:hover{
  border:1px solid grey;
  cursor:pointer;
  border-radius:5px;
}
.btn_refresh:before{
  content: "\25CB \0020 Refresh";
}
.btn_close:before{
  content: "\2718 \0020 Close";
}
.btn_search:before{
  content: "\2299 \0020 Search";
}
.btn_new:before{
  content: "\25FB \0020 New";
}
.btn_restore:before{
  content: "\21BA \0020 Restore";
}
.btn_more:before{
  content: "\22EE \0020";
}
.btn_save:before{
  content: "\2714 \0020 Save";
}
.btn_save_as:before{
  content: "\25FB \0020 Duplicate";
}
.btn_hide:before{
  content: "\2207 \0020";
  /*26C9-*/
  /*2690*/
  /*2616-like home*/
  /*223E-gantungan*/
  /*2212-minus*/
  /*2207*/
}
.btn_back:before{
  content: "\227A \0020 Back";
}
.btn_previous:before{
  content: "\22B2 \0020 Previous";
}
.btn_next:before{
  content: "\22B3 \0020 Next";
}

.btn_filter:before{
  content: "\003D \0020 Filter";
}
.btn_print:before{
  content: "\2263 \0020 Print";
  /*2263*/
  /*2607*/
}
.btn_delete:before{
  content: "\2297 \0020 Delete";
}
.btn_reply:before{
  content: "\229B \0020 Reply";
}
.btn_export:before{
  content: "\21C8 \0020 Export";
}
.btn_import:before{
  content: "\21CA \0020 Import";
}
.btn_select:before{
  content: "\2714 \0020 Select";
}
.btn_preview:before{
  content: "\2295 \0020 Preview";
}
.btn_edit:before{
  content: "\2298 \0020 Edit";
}
.btn_find:before{
  content: "\279C";
}
.btn_cancel:before{
  content: "\2718 \0020 Cancel";
}
.icon_select:before{
  content: "\2714 \0020";
}
.btn_execute:before{
  content: "\2295 \0020 Execute";
}
.btn_lock:before{
/*  content: "\220E \0020 Locker";*/
  content: "\22EE \0020";
}
.btn_properties:before{
  content: "\2699 \0020";
}
.btn_copy:before{
  content: "\274F \0020 Copy";
}
.btn_paste:before{
  content: "\1F4CB \0020 Paste";
}


#btn_change:before{
  content: '\2298 \0020 Change';
}
#btn_delete:before{
  content: '\2297 \0020 Delete';
}
#btn_reply:before{
  content: '\229C \0020 Reply';
}
#btn_open:before{
  content: '\279C \0020 Open';
}
#btn_first:before{
  content: '\22A2';
}
#btn_last:after{
  content: '\22A3';
}
#btn_detail:before{
  content: '\279C \0020 Show';
}
#btn_drawer:before{
  content: 'App Drawer \279C ';
}
#btn_find:before{
  content: "\279C";
}
#btn_select:before{
  content: "\2714 \0020";
}
#btn_add:after{
  content: "\2795";
}
#btn_remove:before{
  content: "\2796"; /*2715*/
}
#btn_remove, #btn_find, #btn_add{
  border-radius:30px;
}
input:disabled{
/*  color:#00008B;*/ /*darkblue*/
  color:grey;
  background-color:lightgrey;
}
input[type=text]:disabled, select:disabled{
  color:#00008B;
  background-color:#E0E0E0; /*#F0F0F0;*/
}
details{
  margin-top:0.5rem;
}
summary{
  border:1px solid #D3D3D3;
  padding-left:0.5rem;
  margin-top:0.1rem;
  color: #505050;
  font-weight:bold;
  background-color:#F5F5F5;
}
summary:hover{
  color:blue;
}
.required{
  color:#B21807;
  font-weight:normal;
}
.info{
  color:blue;
  font-weight:normal;
}
.close {
  position:relative;
  right:0;
  padding:0;
  margin:1rem;
  border-radius:30px;
}
.close:hover {
  color:white;
  background-color:#FF5050;
}
footer {
    background-color: #9e9e9e;
    color: #f3f3f3;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    height:100px;
    bottom: 0;
    position: absolute;
    width:100%;
    justify-content:center;
    display:flex;
    align-items:center;
}

.quote_text{
  border:1px lightgrey solid;
  padding:0px 10px 0px 10px;
  background-color:#f9f9fb;
  border-radius:5px;
  font-weight:medium;
}

.canvas{
  position:absolute;
  border:1px solid lightgrey;
}

.report{
  position:relative;
  display:block;
  margin:0 auto;
  width:95%;
  margin-top:10px;
  border:0px solid red;
}

.report-sticky{
  position:sticky;
  width:210mm;
  margin-top:0;
  padding:0;
}
.report-paper{
  width:100%;
  background:white;
  display:block;
}

.report-detail{
  position:relative;
  overflow-y:auto;
  height:400px;
  margin-top:10px;
  border:0px solid blue;
}

.report-detail-dua{
  position:relative;
  overflow-y:auto;
  height:400px;
  margin-top:30px;
  border:0px solid blue;
}