input[type="text"] { padding: 0.5em 1em!important;  }
input[type="number"] { padding: 0.5em 1em!important;  }
input[type="password"] { padding: 0.5em 1em!important;  }
input[type="email"] { padding: 0.5em 1em!important;  }
input[type="datetime-local"] { padding: 0.5em 1em!important;  }
textarea { padding: 0.5em 1em!important; }
select { padding: 0.51em 1em!important; }

input:focus, input:focus-visible { outline: none; }
textarea:focus, textarea:focus-visible { outline: none; }
th { background-color: #fff !important; }
.inline-flex-aliest { display: inline-flex; align-items: center; justify-content: center; }
.inline-flex-aliest a { margin-left: 0.5em; }
.alert-dangers { width: 100%!important; margin-top: 1em; border-radius: 5px; }
#img-upload img { width: 4em; border-radius: 5px; }
#img-upload { text-align: center!important; display: inline-flex; }
table > thead > tr > th:nth-child(1) { display: flex; width: 100%; align-items: center; }
.bgred-l {  background-color: #f44336!important; color: #fff!important; }
.relative { position: relative; }
.absolute { position: absolute; }
#menu-bg-gray aside { overflow-x: hidden; overflow-y: auto; width: 390px; }
.menu-item a { cursor: pointer; }
#hover-max:hover { opacity: 1!important; }
.text-red-800 { transition: 1s; }
.text-red-800:hover { transition: 1s; }
/* Estilo geral da barra de rolagem */
#menu-bg-gray aside::-webkit-scrollbar {
    width: 5px; /* Largura da barra de rolagem */
}

/* Estilo da parte de fundo da barra de rolagem */
#menu-bg-gray aside::-webkit-scrollbar-track {
    background: #f1f1f1; /* Cor do fundo */
}

/* Estilo da parte de rolagem */
#menu-bg-gray aside::-webkit-scrollbar-thumb {
    background-color: #88888894; /* Cor da barra de rolagem */
    border-radius: 0px; /* Bordas arredondadas */
}

/* Estilo ao passar o mouse sobre a barra de rolagem */
#menu-bg-gray aside::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Cor ao passar o mouse */
}

.white-fusion {
    position: absolute;
    background-color: white;
    border: 1px solid #8080802e;
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px rgb(0 0 0 / 3%);
    z-index: 1000;
    padding: 1em 1em !important;
    min-width: 200px;
}

.dropdown-menu ul {
    padding-left: 0;
    list-style: none;
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.3rem 0.8rem;
    color: gray;
    text-decoration: none;
}

.submenu {
    padding-left: 1rem;
}

.submenu a {
    padding: 0.5rem 1rem;
}

.sid-dashboard-fusion li { color: #fff; }

 @media (min-width: 800px) {
    .light-2 { width: 20%; }
    .light-1 { width: 60%!important; text-align: center; justify-content: center; }
    .light-1 ul { width: 100%!important;  }
    .light-1 ul li { margin-right: 1em; }
    .dashboard-fusion { display: none; }
}

@media (max-width: 800px) {
  #menu-bg-gray aside { display: none; }
  /*.title-drake-fusion-formated { display: inline-flex; }*/
  .inline-flex-aliest { display: inline-flex; align-items: flex-start; flex-direction: column-reverse; }
  .inline-flex-aliest a { margin-left: 0em!important; margin-bottom: 0.8em; }
  .filter-form-draken .gap-y-8 { row-gap: 0.5rem; } 
  .filter-form-draken .mt-2 { margin-top: 0rem; }
  .title-drake-fusion-formated p { margin-top: 0.5rem; }
  .gap-y-8 { row-gap: 1rem!important; }
  .edit-fusion { margin-top: 0em!important; }
  .flox li { padding-left: 3em!important;  }
  .flox-x li{  padding-left: 3em!important;  }
  .menus-mobile { width: 100%; }
  .menus-mobile  li { font-size: 0.85em; }
}


/*
 * We'll use CSS grids for the base template
 * More info on https://cssgrid.io/ by @wesbos
 */
#main {
  display: grid;
  grid-template-columns: 6rem auto;
  /* Or grid-template-columns: config('width.24') auto; */
}

@media (min-width: 1200px) { 
/* Or @media (min-width: config('screens.xl')) { */
  
  #main { grid-template-columns: 12rem auto; }
  /* Or #main { grid-template-columns: config('width.48') auto; } */
}

a {
  text-decoration: none;
  /* Or @apply .no-underline; */
}

/* Just a new padding size */
.pt-16 {
  padding-top: 4rem;
}

/*
 * Just some customized new utilities needed for the submenus
 * Add this before
 */
.top-full { top: 100%; }
.left-full { left: 100%; }

/*
 * This hacks is just needed in Codepen because the previous rules are prioritary to xl:pin-none.
 * In your own config this should not be needed.
 */

@media (min-width: 1200px) {
  .xl\:pin-none { left: auto; }
}

/* 
 * Active "group-hover" for the "display" module in your
 * tailwind.js config file like this:
 * 
 * display: ['responsive', 'group-hover']
 *
 * More info on https://tailwindcss.com/docs/state-variants/#group-hover
 */
.group:hover .group-hover\:block {
  display: block;
}

/* Adicione isso ao seu CSS para garantir que a movimentação seja visível */
.sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.flox li {
  padding-left: 5em;
}

.flox-x li{ 
  padding-left: 5em;
}

.sortable li {
    cursor: move;
}

.handle {
    cursor: move;
    margin-right: 10px;
}