[x-cloak] {
    display: none !important;
}

.sidebar-expanded {
    width: 14rem;
}

.sidebar-collapsed {
    width: 4rem;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 24;
}

.sidebar a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#logo {
    width: 150px;
}

.active {
    background-color: #e5e7eb;
    /* Tailwind's bg-gray-200 */
}

.flex-container {
    display: flex;
    min-height: 100vh;
    /* Ensure the container fills the viewport height */
}

.sidebar {
    flex-shrink: 0;
    /* Prevent the sidebar from shrinking */
}

.content {
    flex-grow: 1;
    /* Ensure the content area grows to fill the remaining space */
    overflow: auto;
    /* Enable scrolling if content overflows */
}

.menu-txt {
    font-size: 15px;
}

.col-id {
    width: 50px;
}

.col-order {
    width: 100px;
}

.col-action {
    width: 100px;
    text-align: right !important;
}

.col-status {
    width: 120px;
}
.col-drag {
    width: 30px;
}

table.list tbody tr:nth-child(even) {
    background-color: rgb(249 250 251);
}
table.list td,
table.list th {
    font-size: 13px;
}

table.list {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    font-size: 0.875rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

table.list thead th {
    padding: 0.35rem 0.75rem;
    background-color: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

table.list tbody td {
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

table.list tbody td:last-child {
    text-align: right;
}

table.list .text-blue-500 {
    color: #3b82f6;
}

table.list .text-blue-500:hover {
    color: #1d4ed8;
}

table.list .text-red-500 {
    color: #ef4444;
}

table.list .text-red-500:hover {
    color: #b91c1c;
}

table.list .material-symbols-outlined {
    vertical-align: middle;
}

table.list form {
    display: inline-block;
}

table.list .ml-2 {
    margin-left: 0.5rem;
}
table.list td .material-symbols-outlined {
    cursor:grab;
}