/* COLOR THEME */
.color_theme{
   color: #000000; /* 01 Menu, Teks    */
   color: #111111; /* 02 Navbar        */
   color: #232323; /* 03 Thead         */
   color: #343434; /* 04 */
   color: #454545; /* 05 Judul Sub     */
   color: #565656; /* 06 */
   color: #676767; /* 07 */
   color: #777777; /* 08 */
   color: #888888; /* 09 Sub Total     */
   color: #999999; /* 10 */
   color: #AAAAAA; /* 11 */
   color: #BBBBBB; /* 12 */
   color: #CCCCCC; /* 13 Garis Pemisah Kosong */
   color: #DDDDDD; /* 14 */
   color: #EEEEEE; /* 15 */
   color: #FFFFFF; /* 16 */
}

body {
   min-height: 75rem;
   padding-top: 3.1rem;
   background-color: #777777;
   background-image: url("../img/bg.jpg");
   background-attachment: fixed;
}

body, a, td, tr, div, input, select, option, .form-control:valid  {
   color: black;
   font-family: Tahoma, Verdana, Geneva, sans-serif;
   font-size: 15px;
}

/* a {
   color:#212529;
} */

.w1 {
   width: 1px;
}

/* Warna Hover Table */
   .table-hover tbody tr:hover td {
      /* background: rgb(204, 204, 204) !important; */
      /* background:lightpink !important; */
      /* background: lightblue !important; */
      background: aquamarine !important;
   }
/* end */

.text-modify {
   color: darkorange !important;
}

/* Warna jumlah huruf pada input text */
   .input-length{
      color: #CCCCCC;
   }
/* end */

/* mengubah cursor menjadi pointer saat menunjuk link javascript*/
.pointer{
   cursor: pointer;   
}
/* end */


.btn-simpan {
   background:white !important;
}

.btn-simpan:hover {
   background:dodgerblue !important;
   color:white !important;
}

.none {
   text-decoration: none;
}

/* loader */
.loader {
   font-size: 80px;
   top: 0;
   left: 0;
   padding: 10px;
   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 9;
   display: none;
}

@-webkit-keyframes spin {
   0% {
       -webkit-transform: rotate(0deg);
   }
   100% {
       -webkit-transform: rotate(360deg);
   }
}
@keyframes spin {
   0% {
       transform: rotate(0deg);
   }
   100% {
       transform: rotate(360deg);
   }
}

/* JQuery UI Sortable bug fix */
   .ui-sortable-helper {
      display: table;
   }
/* end */

/* loader */
.cssload-container {
   position: fixed;
   top: 20%;
   left: 50%;
   margin-top: -50px;
   margin-left: -50px;
   z-index: 99;
}

.cssload-speeding-wheel {
   width: 100px;
   height: 100px;
   margin: auto;
   border: 12px solid rgb(233, 30, 99);
   border-radius: 50%;
   border-left-color: transparent;
   border-right-color: transparent;
   animation: cssload-spin 575ms infinite linear;
   -o-animation: cssload-spin 575ms infinite linear;
   -ms-animation: cssload-spin 575ms infinite linear;
   -webkit-animation: cssload-spin 575ms infinite linear;
   -moz-animation: cssload-spin 575ms infinite linear;
}

@keyframes cssload-spin {
   100% {
       transform: rotate(360deg);
       transform: rotate(360deg);
   }
}

@-o-keyframes cssload-spin {
   100% {
       -o-transform: rotate(360deg);
       transform: rotate(360deg);
   }
}

@-ms-keyframes cssload-spin {
   100% {
       -ms-transform: rotate(360deg);
       transform: rotate(360deg);
   }
}

@-webkit-keyframes cssload-spin {
   100% {
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
   }
}

@-moz-keyframes cssload-spin {
   100% {
       -moz-transform: rotate(360deg);
       transform: rotate(360deg);
   }
}
/* end */

.bg-grey{
   background-color: lightgrey;
}

.bg-menu{
   background-color: #C0C0C0;
}



.ui-autocomplete {
    z-index:2147483647; 
}

/* warna pesan error di input form (jQuery Validation) */
.error{
   color: red;
   font-weight: bold;
}
/* end */



/* Ukuran Icon Font-Awesome */


th i { 
   font-size: 20px;
}
td i { 
   font-size: 20px;
}
.fa-mod{
   font-size: 30px;
}
.fa-plus-mod{
   font-size: 35px;
}
.fa-login{
   font-size: 22px;
}
.fa-medium{
   font-size: 24px;
}
/* end */

/* Warna Hever Menu Drop Down*/
.dropdown-item:hover {
   background-color:LightGray; /* Ubah warna latar belakang sesuai kebutuhan */
 }

/* Warna Pagination */
.pagination > li > a,
.pagination > li > span {
    color:darkslategray;
}
.page-item.active .page-link {
   z-index: 1;
   color: #fff;
   background-color:#212529;
   border-color:#6c757d;
}
/* end */

/* Dropdown Custom */
.mydropbtn {
   border: none;
 }
 
 .mydropdown {
   position: relative;
   display: inline-block;
 }
 
 .mydropdown-content {
   display: none;
   position:absolute ;
   background-color: gray;
   min-width: 150px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
   text-align: left;
 }
 
 .mydropdown-content a {
   color: black;
   padding: 5px 10px;
   text-decoration: none;
   display: block;
 }
 
.mydropdown-content a:hover {background-color: red;}
.mydropdown:hover .mydropdown-content {display: block;}
.mydropdown:hover .mydropbtn {color: rgb(0, 89, 255) ;}
 /* end */

/* Warna Title JQuery Confirm */
 .pesan-info{
background-color: dodgerblue;
text-align: center;
padding: 10px;
border-radius: 5px;
}
.pesan-confirm{
background-color: pink;
text-align: center;
padding: 10px;
border-radius: 5px;
}
.pesan-warning{
background-color: red;
color: white;
text-align: center;
padding: 10px;
border-radius: 5px;
}
/* end */

/* BOOTSTRAP FIX */
   /* membuat table menghabiskan lebar ke 100% */
      /* .table-responsive {
         display: table;
      } */
   /* end */

   /* membuat ckeditor fokus tidak bermasalah di bootstrap modal */
      :root {
         --ck-z-default: 100;
         --ck-z-modal: calc( var(--ck-z-default) + 999 );
      }
   /* end */

   /* membesarkan huruf badge */
      .badge{
         font-size: 95%;
      }
   /* end */
   
   /* membuat warna bg dan warna garis untuk subtotal pada table yang table-striped */
      table.table.table-striped tr.bg-subtotal th {
         background-color: #888888;
         border:1px solid rgb(107, 107, 107);
      }
   /* end */

   /* membuat warna bg dan warna garis untuk subtotal pada table yang table-striped */
      table.table.table-striped tr.bg-pemisah th {
         background-color:#CCCCCC;
      }
   /* end */

   /* membuat warna bg judulsub untuk table yang table-striped */
      table.table.table-striped tr.bg-judulsub th {
         background-color:#454545;
         color: white;
         border:1px solid rgb(107, 107, 107);
      }
   /* end */

   /* mengatur tinggi baris thead dan tfoot */
      .table>thead>tr>th, .table>thead>tr>td, .table>tfoot>tr>th, .table>tfoot>tr>td {
         padding: 7px;
      }
   /* end */

   table.table.table-striped tr>th{
      background-color: #232323;
   }



   /* mengatur tinggi baris tbody */
      .table>tbody>tr>th, .table>tbody>tr>td{
         padding: 5px;
      }
   /* end */

   /* mengatur warna border pada table-bordered */
      table.table-bordered > tbody > tr > td{
         border:1px solid #d2d2d2;
      }
   /* end */

   /* mengatur level transparan saat modal aktif */
      .modal-backdrop{
         opacity:0.8 !important;
      }
   /* end */

   /* mengganti warna modal header dan footer */
      .modal-header, .modal-footer {
         /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
         background: linear-gradient(-45deg,#058a00, #000000, #058a00, #000000);
         background-size: 400% 400%;
         animation: gradient 15s ease infinite;
         color: #ffffff !important;
      }
      @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}     
   /* end */

   /* bootstrap input color */
      .form-control, .form-select:valid, .form-control:valid {
         background-color:#E3FFDB !important;
      }
   /* end */

   .modal {
      top: 0px;
    }
   
/* end: BOOTSTRAP FIX */

/* mengganti warna input tanggal yang readonly menjadi hijau */
.input-tanggal[readonly] {
   background-color: #E3FFDB !important ;
 }
