.customizer-box .btn-check:checked + .btn,
.customizer-box .btn.active,
.customizer-box .btn.show,
.customizer-box .btn:first-child:active,
.customizer-box :not(.btn-check) + .btn:active {
    color: var(--bs-body-color);
    border: 2px dotted var(--bs-body-color) !important;
}
.steps ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
}
.steps ul li {
    flex: 1;
    text-align: center;
}
.steps ul li a {
    display: block;
    padding: 10px 0;
    background-color: #f0f0f0;
    border-radius: 5px;
}

/* CSS para corrigir os botões do menu quando colapsado */
[data-sidebartype="mini-sidebar"] .sidebar-item .btn {
    margin: 5px auto !important;
    padding: 12px !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap;
    overflow: hidden;
}

[data-sidebartype="mini-sidebar"] .sidebar-item .btn .hide-menu {
    display: none !important;
}

[data-sidebartype="mini-sidebar"] .sidebar-item .btn i {
    margin: 0 !important;
    font-size: 18px !important;
}

[data-sidebartype="mini-sidebar"] .sidebar-item .btn.mt-2 {
    margin-top: 8px !important;
}

/* CSS para quando o menu está expandido */
[data-sidebartype="full"] .sidebar-item .btn,
[data-sidebartype=""] .sidebar-item .btn {
    margin: 10px 15px !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
}

[data-sidebartype="full"] .sidebar-item .btn .hide-menu,
[data-sidebartype=""] .sidebar-item .btn .hide-menu {
    display: inline !important;
    margin-left: 8px !important;
}

/* Ajuste específico para o container dos botões */
[data-sidebartype="mini-sidebar"] .sidebar-item.charge-buttons {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
    margin-bottom: 10px;
}

[data-sidebartype="mini-sidebar"] .sidebar-item {
    text-align: center;
}

/* Ajustes específicos para os botões de cobrança no menu colapsado */
[data-sidebartype="mini-sidebar"] .charge-buttons .btn {
    margin: 5px 0 !important;
    padding: 8px !important;
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-sidebartype="mini-sidebar"] .charge-buttons .btn.mt-2 {
    margin-top: 5px !important;
}

/* Tooltip para mostrar texto quando menu colapsado */
[data-sidebartype="mini-sidebar"] .sidebar-item .btn {
    position: relative;
}

[data-sidebartype="mini-sidebar"] .sidebar-item .btn:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-left: 10px;
}

/* CSS para corrigir o comportamento dos botões de cobrança no hover do menu colapsado */
[data-sidebartype="mini-sidebar"] .left-sidebar:hover .sidebar-item.charge-buttons .btn {
    margin: 10px 15px !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
}

[data-sidebartype="mini-sidebar"] .left-sidebar:hover .sidebar-item.charge-buttons .btn .hide-menu {
    display: inline !important;
    margin-left: 8px !important;
}

[data-sidebartype="mini-sidebar"] .left-sidebar:hover .sidebar-item.charge-buttons .btn i {
    margin: 0 !important;
    font-size: 16px !important;
}

[data-sidebartype="mini-sidebar"] .left-sidebar:hover .sidebar-item.charge-buttons .btn.mt-2 {
    margin-top: 10px !important;
}

[data-sidebartype="mini-sidebar"] .left-sidebar:hover .sidebar-item.charge-buttons {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 15px;
    margin-bottom: 10px;
}