.subtask-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 5px;
    gap: 5px;
}

.subtask-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: black;
    margin-right: 5px;
}

.subtask-value {
    border: none;
    outline: none;
    max-height: 1.2em;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

.hover-content {
    display: flex;
    align-items: center;
}

.separator2 {
    opacity: 0.2;
}

.hover-content .separator2,
.hover-content img {
    display: none;
}

.subtask-container:hover .hover-content .separator2,
.subtask-container:hover .hover-content img {
    display: inline-block;
}

.editing-mode:hover .hover-content .separator2,
.editing-mode:hover .hover-content img {
    display: none;
}

.edit-subtask-button,
.delete-subtask-button {
    cursor: pointer;
}

.save-subtask-button {
    display: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.edit-delete-subtask-button:hover {
    content: url('../img/delete_subtask_hover.png');
}

.save-subtask-button:hover {
    content: url('../img/add_subtask_hover.png');
}

.separator3 {
    display: none;
    opacity: 0.2;
}

.no-hover:hover {
    background: none;
}

.add-task-buttons {
    position: fixed;
    right: 42px;
    bottom: 55px;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.add-task-buttons-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.clear-form-btn {
    display: flex;
    width: 116px;
    padding: 16px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    border: 1px solid #647188;
    background: var(--white, #FFF);
    cursor: pointer;
    color: #647188;
    font-size: 23px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.clear-form-btn:hover {
    transition: ease-in-out 100ms;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: var(--bg-color, #4589FF);
    border: 1px solid var(--bg-color, #4589FF);
}

.clear-form-btn:hover .button-clear-pic {
    content: url('../img/cancel_icon_hover.png');
}

.clear-form-btn:active {
    color: var(--btn-hover, #005DFF);
    border: 1px solid var(--btn-hover, #005DFF);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.clear-form-btn:active .button-clear-pic {
    content: url('../img/cancel_icon_active.png');
}

.create-task-btn {
    display: flex;
    padding: 16px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 10px;
    background: #4589FF;
    cursor: pointer;
    border: none;
    color: #FFF;
    font-size: 23px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.create-task-btn:hover {
    background: #005DFF;
}

.create-task-btn:active {
    background-color: #FFFFFF;
    color: var(--bg-color, #4589FF);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.create-task-btn:active .button-create-task-pic {
    content: url('../img/check_active.png');
}

.task-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.task-success-message {
    display: flex;
    width: 326px;
    height: 74px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    gap: 20px;
    background: var(--bg-color, #4589FF);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    animation-name: slideInFromOutside;
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes slideInFromOutside {
    from {
        transform: translateY(200px);
    }

    to {
        transform: translateY(50%);
    }
}

.task-success-message p {
    color: #FFFFFF;
    font-family: Open Sans;
    font-size: 23px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.send-check {
    width: 26px;
    height: 22px;
}

/* Media Query für Bildschirmbreite von maximal 768px */
@media(max-width: 768px) {

    #taskForm {
        display: flex;
        justify-content: center;
    }

    .add-task-container {
        padding: 20px;
        margin-top: 80px;
        margin-bottom: 156px;
        align-items: center;
        overflow-y: unset;
        height: auto;
        width: 80vw;
    }

    .add-task-titel-textfield {
        font-size: 28px;
    }

    .add-task-description-header,
    .due-date-header,
    .due-date-textfield,
    .assigned-to-header,
    .assigned-select-text,
    .select-text,
    .category-header,
    .subtasks-header,
    .new-subtask-textfield,
    .select-name,
    .category {
        font-size: 16px;
    }

    .add-task-priority-header {
        display: none;
    }

    .add-task-description-textfield {
        height: 40px !important;
        font-size: 16px;
    }

    .priority-choice-inner {
        font-size: 16px;
        width: 102px;
        padding: 14px 8px;
    }

    .add-task-buttons {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        background: white;
        width: 100%;
        height: 100px;
    }

    .create-task-btn, .clear-form-btn {
        font-size: 19px;
        padding: 12px 8px;
    }
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
    #taskForm {
        display: flex;
        justify-content: center;
    }

    .add-task-container {
        padding: 20px;
        margin-top: 124px;
        margin-bottom: 156px;
        align-items: center;
        overflow-y: unset;
        height: auto;
        width: 80vw;
    }

    .add-task-buttons {
        position: fixed;
        bottom: 15px;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        background: white;
        width: 100%;
        height: 100px;
    }
}

@media (max-width: 1030px) {
    .add-task-buttons {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 1023px) and (max-width: 1120px) and (min-height: 600px) and (max-height: 900px) {
    .add-task-buttons {
        position: unset;
        transform: translate(0, 0);
    }
    
}