.clockify-tasks-display {

    width: 20vw;
    position: absolute;

    top: 60vh;
    left: 2.5vw;

    &.loading-container {
        width: 20vw;
        height: auto;
        background: none;
    }

    &.disabled {
        user-select: none;
        cursor: initial;
        pointer-events: none;
        opacity: 30%;
    }
    
    .workspace-selector, .project-selector {
        width: 15vw;
        height: 3vw;

        &.disabled {
            user-select: none;
            cursor: initial;
            pointer-events: none;
            opacity: 30%;
        }
    }

    select {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    input[type=text] {
        width: 15vw;
        height: 3vw;
        
        @include bodyFont();

        font-size: 12pt;

        outline: none;
        padding: 1px 2px;

        box-sizing: border-box;

        &.disabled {
            user-select: none;
            cursor: initial;
            pointer-events: none;
            opacity: 30%;
        }
    }
}

@media (max-width: 991.98px) {

    .clockify-tasks-display {
        position: initial;
        width: auto;

        display: flex;
        justify-content:space-around;

        padding: 3vh 5vw;

        &.loading-container {
            width: 90%;
            height: auto;
        }

        .workspace-selector, .project-selector, input[type=text] {
            width: 20vw;
            height: 5vw;
        }
    
    }
}

@media (max-width: 576px) {

    .clockify-tasks-display {
        position: initial;
        width: auto;

        display: flex;
        flex-direction: column;
        align-items: center;

        &.loading-container {
            width: 90%;
            height: auto;
        }

        .workspace-selector, .project-selector, input[type=text] {
            width: 70%;
            height: 4vh;
            margin-top: 1vh;
        }
    }
}

.clockify-tasks-display-container.dark-mode-container {

    background-color: $second-color-dark;


}