tr:hover {
    cursor: pointer;
}

@media screen and (max-width: 80em) {
    td {
        font-size: xx-small;
        max-width: 100px;
    }

    th {
        font-size: x-small;
    }
}

#optionsbox {
    border: 1px solid var(--primary-border-color);
    border-radius: 5px;
    padding: 20px;
    display: flex;
}

#temporaloptions {
    flex: 1;
}

#tagoptions {
    flex: 2;
}

#tagmodal {
    width: 40%;
}

@media screen and (max-width: 80em) {
    #tagmodal {
        width: 100%;
    }
}

.description-column {
    word-wrap: break-word;
}

.tag-label {
    border: 1px solid var(--secondary-border-color);
    border-radius: 25px;
    padding: 10px;
    width: fit-content;
    margin-right: 5px; 
    margin-top: 20px;
    background-color: var(--primary-color);
}

.tag-label-selected {
    background-color: var(--secondary-hover-color);
    border: 2px solid var(--secondary-border-color);
}

.tag-label:hover {
    background-color: var(--secondary-hover-color);
    cursor: pointer;
}

.checkbox-margin {
    margin-left: 20px;
}