/*<style>*/

  :root {
    --orange-dark: #e52e00;
  }   

  /*-- LBuilder ]--------------------------- *
   *-- {WEBSITE.HEAD_CSS_Style}              *
   *-- ------------------------------------- */
  /*[@LBuilder]{ADD-WEBSITE.HEAD_CSS_Style}...{/ADD-WEBSITE.HEAD_CSS_Style}*/

  .form-control.is__valid {
    border-color: #28a745;
    padding-right: calc(1.5em + 0.75rem) !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  }   
  
  .form-control.bg-read {
    background-color: #fffdeb !important;
    opacity: 0.99;
  }
  
 /*.required:after {*/
  .form-required {
    content:" *";
    color: red;
    position: absolute; 
    margin: 0px 0px 0px -20px; 
  }

  .border-bottom-dashed-gray {
      border-bottom-style: dashed!important;
      border-bottom-width: thick;
      border-color: #78829D !important;
  }
 /*  
  TITLE
  <h4 class="text-info HR-2 HR-info mb-2"><i class="icofont-search-property"></i> COA</h4>
 */
  .HR-1  { left: -2px; width:100%; border-width: 1px; border-style: dotted; }
  .HR-15 { left: -2px; width:100%; border-width: 1.5px; border-style: dotted; }
  .HR-2  { left: -2px; width:100%; border-width: 2px; border-style: dotted; }

  .HR-primary   { border-image: linear-gradient(to right, var(--primary), rgba(0, 0, 0, 0)) 0 0 100% 0;}
  .HR-secondary { border-image: linear-gradient(to right, var(--secondary), rgba(0, 0, 0, 0)) 0 0 100% 0;}
  .HR-success   { border-image: linear-gradient(to right, var(--success), rgba(0, 0, 0, 0)) 0 0 100% 0;}
  .HR-info      { border-image: linear-gradient(to right, var(--info), rgba(0, 0, 0, 0)) 0 0 100% 0;}
  .HR-warning   { border-image: linear-gradient(to right, var(--warning), rgba(0, 0, 0, 0)) 0 0 100% 0;}
  .HR-danger    { border-image: linear-gradient(to right, var(--danger), rgba(0, 0, 0, 0)) 0 0 100% 0;}
  .HR-dark      { border-image: linear-gradient(to right, var(--dark), rgba(0, 0, 0, 0)) 0 0 100% 0;}
  .HR-black     { border-image: linear-gradient(to right, var(--black), rgba(0, 0, 0, 0)) 0 0 100% 0;}
  .HR-gray      { border-image: linear-gradient(to right, var(--gray), rgba(0, 0, 0, 0)) 0 0 100% 0;}
  .HR-gray-2    { border-image: linear-gradient(to right, #CEC4DA, rgba(0, 0, 0, 0)) 0 0 100% 0;}

  .BL1-primary   { border-left: 1px solid  var(--primary);}
  .BL1-secondary { border-left: 1px solid  var(--secondary);}
  .BL1-success   { border-left: 1px solid  var(--success);}
  .BL1-info      { border-left: 1px solid  var(--info);}
  .BL1-warning   { border-left: 1px solid  var(--warning);}
  .BL1-danger    { border-left: 1px solid  var(--danger);}
  .BL1-dark      { border-left: 1px solid  var(--dark);}
  .BL1-black     { border-left: 1px solid  var(--black);}
  .BL1-gray      { border-left: 1px solid  var(--gray);}
  .BL1-gray-2    { border-left: 1px solid  #CEC4DA;}


  #TAB_MAIN_SETUP .nav-item.active {
    background-color: #007bff !important;
  }
  #TAB_MAIN_SETUP .nav-item.active:hover {
    background-color: #ffc107;
  }
  #TAB_MAIN_SETUP .nav-item.active:focus {
    background-color: #28a745;
  }

  /* Perbaikan CSS untuk tombol close */
  /* direction :  to bottom, to top, to right, to bottom right, */
  .bg-info2primary       { background: linear-gradient(to right, var(--info), var(--primary)); }
  .bg-yellow2orange      { background: linear-gradient(to right, var(--yellow), var(--orange)); }
  .bg-purple2pink        { background: linear-gradient(to right, var(--purple), var(--pink)); }
  .bg-orange2orange-dark { background: linear-gradient(to right, var(--orange), var(--orange-dark)); }
  .bg-white2gray         { background: linear-gradient(to right, var(--white), var(--gray)); }
  .bg-gray2white         { background: linear-gradient(to right, var(--gray), var(--white)); }
  .bg-teal2cyan          { background: linear-gradient(to right, var(--teal), var(--cyan)); }

  .bg-white2info         { background: linear-gradient(to right, var(--light), var(--white), var(--white), var(--white), var(--light)); }

  .border-orange2orange-dark {
    border-width: 5px;
    border-style: solid;
    border-image: linear-gradient(to right, var(--orange), var(--orange-dark)) 1;
  } 

  .border-purple2pink {
    border-width: 5px;
    border-style: solid;
    border-image: linear-gradient(to right, var(--purple), var(--pink)) 1;
  }     

  /* Perbaikan CSS untuk tombol close */
  /* 
  .btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
  .btn-labeled {padding-top: 0;padding-bottom: 0;}
  .btn { margin-bottom:10px; }
  */

  /* Perbaikan CSS untuk tombol close */    
  .btn-circle.btn-xl {
      width: 70px;
      height: 70px;
      padding: 10px 16px;
      border-radius: 35px;
      font-size: 24px;
      line-height: 1.33;
  }

  .btn-circle {
      width: 30px;
      height: 30px;
      padding: 6px 0px;
      border-radius: 15px;
      text-align: center;
      font-size: 12px;
      line-height: 1.42857;
  }

  /* Kombinasi class untuk efek visual yang lebih baik */
  .mychecked-row_tr {
      border-left: 3px solid #007bff !important;
  }

  /* Opsional: Jika baris yang sudah dicentang di-hover, beri sedikit penekanan */
  .mychecked-row_tr:hover {
      background-color: #bee5eb !important; /* Sedikit lebih gelap/berbeda saat di-hover */
      cursor: pointer;
  }

  .mychecked-row_tr.row-checked {
      background-color: #d1ecf1 !important;
  }

  .row-disabled {
      background-color: #f1d6d1 !important;
  }

  #checkAll {
      transform: scale(1.2);
      cursor: pointer;
      margin: 0;
  }

  .mycheckbox-nota_gl {
      width: 20px;
      height: 20px;
      vertical-align: middle; 
  }

  #checkAll_Nota_GL {
      width: 20px;
      height: 20px;
      vertical-align: middle; 
  }

  /* Styling untuk input jml_alokasi[] */
  .myinput-jml_alokasi[readonly] {
      background-color: transparent !important;
      border: none !important;
      color: inherit !important;
      font-weight: inherit !important;
      cursor: default;
      padding: 0 !important;
      height: auto !important;
  }

  .myinput-jml_alokasi:not([readonly]) {
      background-color: #ffffff !important;
      border: 1px solid #80bdff !important;
      color: #495057 !important;
      font-weight: 600 !important;
      cursor: text;
      padding: 0.25rem 0.5rem !important;
      height: auto !important;
      border-radius: 0.25rem !important;
  }

  /* Efek hover pada input yang bisa diedit */
  .myinput-jml_alokasi:not([readonly]):hover {
      border-color: #0056b3 !important;
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
  }

  /* Fokus pada input yang bisa diedit */
  .myinput-jml_alokasi:not([readonly]):focus {
      border-color: #0056b3 !important;
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
      outline: 0 !important;
  }

  /* Animasi transisi untuk input */
  .myinput-jml_alokasi {
      transition: all 0.3s ease !important;
  }

  .border-dotted {
      border: 1px dotted #555555 !important;
  }

  .border-dotted-top {
      border-top-style: dotted !important;
  }

  .border-dotted-top-5blue {
      border-top: 5px dotted #17a2b8 !important; /* Gunakan warna cyan agar terlihat */
  }

  .border-dotted-bottom {
      border-bottom-style: dotted !important;
  }

  .bg-disabled { background-color: #e9ecef; }

  .hero-section-2 {
      background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
      color: white;
      padding: 80px 0;
      position: relative;
      overflow: hidden;
  }    


    .sw-theme-arrows .nav-link.done {
        background-color: #28a745 !important;
        border-color: #28a745 !important;
        color: #fff !important;
    }
    .sw-theme-arrows .nav-link.active {
        background-color: #007bff !important;
        border-color: #007bff !important;
        color: #fff !important;
    }
    .progress-xxs {
        height: 4px;
    }
    .nav-link h5 {
        font-size: 0.9rem;
        font-weight: bold;
        margin-bottom: 2px;
        margin-top: 5px;
    }

@media print {
    @page {
        size: landscape;
    }
}

/*</style>*/