.clockify-tasks-display-container {
    width: 20vw;
    position: absolute;

    top: 60vh;
    left: 2.5vw;

    .clockify-task-form {
        select, select option, input, input::placeholder {   
            font-family: 'Arial', sans-serif;
        }

        &.loading-container {
            width: 20vw;
            height: auto;
            background: none;
        }
        
        .workspace-selector, .project-selector {
            width: 15vw;
            height: 5vh;
        
            optgroup {
                color: grey;
                font-style: inherit;
                font-weight: 300;
                text-shadow: none;
            }
        }

        .add-task {
            width: 3.5vh;
            height: 3.5vh;

            margin-left: 0.5vh;

            display: inline;

            background-color: var(--second-color);
            border-radius: 100%;

            color: #fff;

            cursor: pointer;

            &:hover {
                filter: brightness(90%);
            }

            &:active {
                filter: brightness(110%);
            }
        }

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

        input[type=text] {
            width: 15vw;
            height: 3vw;

            font-size: 12pt;

            outline: none;
            padding: 1px 2px;

            box-sizing: border-box;
        }

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

@media (max-width: 991.98px) {

    .clockify-tasks-display-container {
        position: static;
        width: 100%;

        padding-top: 2vh;

        .clockify-task-form {   
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content:space-between;

            padding: 0px 3vw;

            .workspace-selector, .project-selector, input[type=text] {
                width: 33vw;
                min-width: 120px;
                height: 5vw;
                min-height: 30px;
            }

            button.add-task {
                margin-right: auto;
            }

            button.adding-new-task {
                margin-right: 0;
            }

            input.new-task {
                width: 10vw;
                margin-right: auto;
                margin-left: 1vw;
            }
        }
    }
}

@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;
        }
    }
}