.board-lists {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    min-height: 100px; /* or whatever fits your design */
}

.list-item {
    max-width: 250px;
    flex: 0 0 250px; /* fixed width, no grow, no shrink */
    height: calc(100vh - 180px);
    margin-right: 16px; /* space between lists */
    display: flex;
    flex-direction: column;
    background: #fff; /* optional, for visibility */
    border-radius: 6px; /* optional */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* optional */
}
@media (max-width: 992px) {
    .list-item {
        height: calc(100vh - 200px);
    }
}

.list {
    border: 1px solid #e0e0e0; /* optional, for visibility */
    border-radius: 6px; /* optional */
    padding: 8px; /* optional, for spacing */
    overflow-y: auto; /* allows scrolling within the list */
    flex-grow: 1; /* allows the list to take available height */
    box-shadow: 0 3px 5px rgba(0,0,0,0.1); /* optional */
}
.card-list {
    padding: 4px !important;
    border: 1px dashed #ddd; /* optional, for visibility */
    min-height: 50px;
}
.card-item {
    background: #eee; /* optional, for visibility */
    border: 1px solid #e0e0e0; /* optional, for visibility */
    border-radius: 4px; /* optional */
    padding: 8px; /* optional, for spacing */
    margin-bottom: 8px; /* space between cards */
    box-shadow: 0 3px 5px rgba(0,0,0,0.1); /* optional */
    margin-bottom: 3px !important;
}
.card-list > .card-item:first-child {
    margin-top: 0 !important; /* space above the first card */
}
.card-item .card-handle {
    cursor: grab; /* indicates that the card can be dragged */
    user-select: none; /* prevents text selection during drag */
}
.card-item .card-handle:active {
  cursor: grabbing;
}

.archives-view .card-item {
    max-width: 230px;
    display: inline-block;
    width: 230px;
    margin-left: 15px;
}
.archives-view .archive-cards {
    max-height: 100%;
    overflow: auto;
}

.card-view-window {
    min-width: 250px;
    max-width: calc(1049px - 100px);
}
.file-icon.file-icon-small {
    font-size: 16px !important;
}
.file-icon-small i {
    
    border: 0px !important;
    padding: 0px;
}

.tasks-list {
    border: 1px dashed #ddd; /* optional, for visibility */
    border-radius: 6px; /* optional */
    padding: 8px; /* optional, for spacing */
    display: block;
}
.card-item .card-descr {
    /* Ellipsis for long text */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%; /* Ensures it doesn't overflow its container */
    display: block; /* Ensures it behaves like a block element */
    opacity: 0.5;
}
.card-item .card-header a {
    font-weight: bold;
    text-decoration: none;
}
.no-underline {
    text-decoration: none;
}


.tiny {
    font-size: 0.8em; /* smaller font size */
    color: #999 !important; /* lighter color for less emphasis */
    font-style: italic; /* optional, for style */
}
.list-handle {
    cursor: grab;
}
.list-handle:active {
    cursor: grabbing;
}
.task-text,
.task-item .autosave {
    width: calc(100% - 80px);
    display: inline-block;
    margin-left: 10px;
}

.file-icon {
    width: 32px;
    height: 34px;
    display: inline-block;
    overflow: hidden;
}

.file-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tooltip {
    padding-left: 30px;
    padding-right: 30px;
}
.tooltip img {
    margin-left: -4px !important;
    margin-right: 15px !important;
    padding-right: 15px !important;
    width: 206px !important;
    max-width: calc(100% + 24px) !important;
}

.btn-google {
    background-color: #4285f4 !important;
    color: #fff !important;
}

#popup_menu {
    z-index: 1000; /* Ensure it's above other elements */
    position: absolute; /* Position it absolutely */
    right: 0px;
    top: 40px;
    width: 100%;
    max-width: 200px; /* Optional: limit the maximum width */
    background: #fff; /* Background color */

}

#navbarSupportedContent {
    line-height: 12px;
}
#navbarSupportedContent li a {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    display: inline-block;
}
@media (max-width: 1022px) {
    .fuzz .vbox-table {
        max-width: calc(100% - 30px) !important;
        max-height: calc(100% - 30px);
    }


}
.fuzz .vbox {
    margin-top: 15px;
    margin-bottom: 70px;
}
.vbox-cell {
    background-color: transparent; 
}

.task-handle {
    cursor: grab;
}
.task-handle:active {
    cursor: grabbing;
}


.text-orange {
  color: #fd7e14 !important;
}
.text-purple {
  color: #6f42c1 !important;
}
.text-pink {
  color: #e83e8c !important;
}
.text-brown {
  color: #795548 !important;
}

.bg-orange {
  background-color: #fd7e14 !important;
}
.bg-purple {
  background-color: #6f42c1 !important;
}
.bg-pink {
  background-color: #e83e8c !important;
}
.bg-brown {
  background-color: #795548 !important;
}

.btn-orange {
  background-color: #fd7e14 !important;
  color: #fff !important;
}
.btn-orange:hover {
  background-color: #e67e22 !important;
}
.btn-purple {
  background-color: #6f42c1 !important;
  color: #fff !important;
}
.btn-purple:hover {
  background-color: #5a3e9d !important;
}
.btn-pink {
  background-color: #e83e8c !important;
  color: #fff !important;
}
.btn-pink:hover {
  background-color: #d81b60 !important;
}
.btn-brown {
  background-color: #795548 !important;
  color: #fff !important;
}
.btn-brown:hover {
  background-color: #6d4c41 !important;
}