/* Your app custom styles here */
:root {
--f7-table-body-font-size: 11px;
--f7-font-size: 12px;
--f7-table-size: 11px;
--f7-card-header-font-weight: 350;
--f7-table-input-height: 12px;
--f7-theme-color: #139ade;
--f7-theme-color-rgb: 88, 182, 191;
--f7-theme-color-shade: #9c42ac;
--f7-theme-color-tint: #ca7590;
}

.gbmenu{

    width:120px;aspect-ratio: 1 / 1;overflow:hidden;
}

table,tr,td{
    border:0.5px solid gray
}
table th{
    background-color: var(--f7-bg-color-primary);
    text-decoration-color: var(--f7-card-header-text-color-white);
}

.blockinput{
    background-color: var(--f7-bars-bg-color);
    padding:10px;
}

.inputdiv{
    border-bottom:0.3px solid gray;
}

.invalid{
    border: 0.5px solid red;
}

.notmacth{
    background-color: #ca7590;
    color: white;
}
input[readonly] {

    background-color: rgb(183, 204, 44) !important;
    color : rgb(7, 7, 6) !important ;
}

table.cetak{
    border:0.5px solid black;
    border-collapse:collapse;
     
     } 
    
  
    table.cetak>tr>th{
  
      background:var(--f7-theme-color);
      color:white;
      text-align:center;
      line-height:10px;
      font: bold 11px/25px;
      border:1px solid white;
      
    }	
    
     
  
    table.cetak thead{
      background:var(--f7-theme-color);
      border:1px solid white;
      color:white;
    }	
  
  
    table.cetak>tr:hover{
    background:yellow;	
  
    }
    
    table.cetak td{
    border:0.5px solid black;
    }
  
 .myinput {
  max-width: 80%;
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  transition: all 0.25s ease;
  background: #fff;
}

.myinput:focus {
  border-color: var(--f7-theme-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.myinput::placeholder {
  color: #9ca3af;
}   


table.dataTable thead th {
  background-color: var(--f7-theme-color); /* warna header */
  color: #ffffff;           /* warna teks */
   height: 30px;
    max-height: 30px;
  color:white
}

table.dataTable tbody td {
    height: 30px;
    max-height: 30px;
    overflow-y: auto;
    white-space: normal;
}

input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* focus */
input[type="number"]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* disable spinner (Chrome, Edge, Safari) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}