/* Add To Task Section */
@media (max-width: 1300px){
    .dialog-adToTask p{
        width: 100%;
        margin-bottom: 0;
    }

    .profilepicture {
        width: 50px;
        height: 50px;
    }

    .assigned-name {
        font-size: 2.5vh;
    }
}

@media (max-width: 1000px ), (min-height: 1100px) and (max-width:1300px) {
    .workspace {
        min-height: unset;
    }

    .add-task-main-container {
        height: unset;
    }

    .add-task-container {
        height: unset;
    }

    .field-container {
        padding: 0 1rem 0 1rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    h2 {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }

    input, textarea{
        margin-left: auto;
        margin-right: auto;
    }

    .custom-array {
        width: 5vw;
    }

    .avatar-box {
        gap: 2vw;
        justify-content: center;
    }

    .top-row, .mid-row, .bottom-row {
        flex-direction: column;
        justify-content: center;
    }

    .icon-container {
        height: 60%;
    }

    .add-button-container {
        margin-left: 1vw;
    }

    .menu_footer {
        display: flex;
        flex-direction: column;
    }

    .user_name_box {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content:center;
        overflow: hidden;
        
    }

}

@media (max-width: 1000px) {
    input[type="date"]::-webkit-calendar-picker-indicator {
        width: 5vw;
        height: 5vw;
    }

    .custom-array {
        width: 7vw;
    }
}

@media (max-width: 700px) {
    input[type="date"]::-webkit-calendar-picker-indicator {
        width: 7vw;
        height: 7vw;
    }

    .custom-array {
        width: 9vw;
    }
}

@media (max-width: 500px)  {
    input[type="date"]::-webkit-calendar-picker-indicator {
        width: 9vw;
        height: 9vw;
    }
    .custom-array {
        width: 11vw;
    }
    .headline-container h1 {
        font-size: 4vh
    }
    .logo {
        width: unset !important;
        padding-left: 10px;
    }
    .icon_mobile_container {
        width: unset !important;
        padding-right: 10px;
    }
}

@media (max-width: 350px) {
    .headline-container h1 {
        font-size: 4vh;
    }

    .headline-container p {
        font-size: 2.7vh;
    }
}


/* //////////////////// */

/* Backlog Section */

@media(max-width:1250px){

    .assigned_to_headline {
        width: 30%;
    }

    .assigned_to {
        width: 30%;
    }

    .assigned_to p{
        display: none;
    }

    .category_headline {
        width: 30%;
    }

    .backlog_description_headline {
        width: 40%;
    }

    .backlog_description {
        width: 40%;
    }


    .category {
        width: 30%;
    }

}

@media (max-width: 2100px) and (min-height: 1000px){
    .assigned_to p {
        display: none;
    }
}

@media (max-width: 1450px) and (min-height: 1000px) {
    

    .assigned_to_headline {
        width: 30%;
    }

    .assigned_to {
        width: 30%;
    }

    .category_headline {
        width: 30%;
    }

    .category {
        width: 30%;
    }

    .backlog_description_headline {
        width: 40%;
    }

    .backlog_description {
        width: 40%;
    }
}

@media (min-width:1100px) and (min-height:1000px) {

    .backlog_profil_img {
        width: 70px;
        height: 70px;
    }

    .backlog-table-tasks {
        height: 130px;
    }

    .assigned_to p, .category p, .backlog_description p {
        font-size: 1.5rem;
    }
}

@media (min-width: 900px) and (min-height: 1000px) {

    .backlog-table-tasks {
        height: 130px;
    }

    .assigned_to p, .category p, .backlog_description p {
        font-size: 1.5rem;
    }

    .backlog_profil_img {
        width: 70px;
        height: 70px;
    }

    .backlog_profil_img {
        margin: 0rem 1rem 1rem 1rem;
    }

    .assigned_to_headline {
        width: 40%;
    }

    .assigned_to {
        width: 40%;
    }

    .category_headline {
        width: 30%;
    }

    .category {
        width: 30%;
    }

    .backlog_description_headline {
        width: 30%;
    }

    .backlog_description {
        width: 30%;
    }
}

@media (max-width: 700px) {
    .backlog-table-header {
        display: none;
    }

    .backlog-table-tasks {
        height: unset;
        flex-wrap: wrap;
        padding-left: 12px;
        margin: 0 1rem 1rem 1rem;
    }

    .assigned_to {
        width: 100%;
        justify-content: space-around;
    }

    .assigned_to p {
        display: flex;
        width: 50%;
    }

    .backlog_profile_placeholder {
        width: 50%;
    }

    .category {
        width: 50%;
    }

    .backlog_description {
        width: 50%;
        padding-left: 0;
    }
}

@media (max-width: 400px) {
    .backlog-table-tasks {
        height: 183px;
    }
}

/* /////////////////// */

/* Menu Section */
@media (min-width: 1000px){
    .menu-list {
        transform: translateX(0) !important;
    }

    .footer-sidebar {
        display: flex !important;
    }
}

@media (max-width: 1000px) {
    .workspace, .backlogspace {        
        margin-top: 15vh;
    }

    .menu {
        width: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    .menu-content {
        height: 15vh !important;
        flex-direction: row !important;
    }

    .menu-list {
        position: absolute;
        top: 15vh;
        right: 0;
        width: 30vw;
        transform: translateX(30vw) !important;
        z-index: 2;

    }

    .menu_tags {
        padding-top: 3.5vh !important;
        padding-bottom: 3.5vh !important;
        font-size: 3.5vh !important;
    }

    .menu_footer {
        margin-left: auto;
        margin-right: auto;
    }

    

    .footer-sidebar {
        margin-bottom: 0 !important;
        position: absolute;
        right: 0;
        top: 60.5vh;
        width: 30vw;
        display: none !important;
        z-index: 3;
    }

    .footer-sidebar a {
        font-size: 3.5vh !important;
        color: white;
        text-decoration: none;
        background-color: #203192;
        display: flex;
        padding-top: 3.5vh !important;
        padding-bottom: 3.5vh !important;
        padding-left: 30px !important ;  
    }

    .footer-sidebar a:hover {
        cursor: pointer;
        margin-left: 5px !important;
        padding-left: 25px !important;
        transition: margin-left 0.5s, padding-left 0.5s !important;
    }

    .icon_mobile_container {
        display: flex !important;
        justify-content: center;
        width: 174px;
    }

    .icon_mobile {
        width: 4vw;
        height: 4vw;
        filter: invert();
        cursor: pointer;
    }

    .profil_img {
        margin-bottom: 0 !important;
    }
}

.fade_in_menu_animation {
    animation: FadeInMenu 225ms ease-in-out;
}

.fade_out_menu_animation {
    animation: FadeOutMenu 225ms ease-in-out;
}



@keyframes FadeInMenu {
    from {
        opacity: 0;

    }

    to {
        opacity: 1;
    }
}

@keyframes FadeOutMenu {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media (max-width: 1000px) and (max-height: 950px) {
    #logo {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 700px) {
    .icon_mobile {
        width: 6vw;
        height: 6vw;
    }

    .menu-list {
        width: 40vw;
        transform: translateX(40vw) !important;
    }

    .footer-sidebar {
        width: 40vw;
    }
}

@media (max-width: 500px) {
    .icon_mobile {
        width: 9vw;
        height: 9vw;
    }

    .menu-list {
        width: 65vw;
        transform: translateX(65vw) !important;
    }

    .footer-sidebar {
        width: 65vw;
    }
}

/* /////////////////// */

/* Board section */

@media (max-width: 1200px) {
    .board-container {
        flex-wrap: wrap;
    }

    .task-container {
        height: 40%;
        width: 40%;
    }

    .task {
        min-height: 70%;
        width: 100%;
        overflow: auto;
    }
}

@media (max-width: 1000px) {
    .task {
        height: 250px;
    }
}

@media (max-width: 700px) {
    .task-container {
        width: 80%;
        height: 300px;
    }
    .board-container {
        height: 160vh;
    }
}

@media (max-width: 600px) {
    .task-container {
        width: 90%;
    }
}

@media (max-width: 500px) {
    .task-container {
        width: 98%;
        height: 38vh;
    }

    .workspace {
        height: 160vh;
    }

    .task-container h2 {
        padding-top: 3vh;
        padding-bottom: 3vh;
    }
}

/* //////////////////// */

/* Ticket Popup section */

@media (max-width: 1000px) {
    .ticket_popup {
        width: 80%;
    }

}



@media (max-width: 700px) {
        .ticket_popup_footer {
            height: 130px;
            flex-direction: column-reverse;
            padding-top: 10px;
        }
    }

@media (max-width: 500px) {

    .ticket_popup {
        width: 90%;
    }
}

@media (max-height: 550px) {
    .ticket_popup {
        width: 90%;
    }

    .ticket_description_label {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .ticket_description {
        margin-bottom: 0;
        margin-top: 0;
    }

    .middle_leftbox {
        width: 100%;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #change_status {
        position: absolute;
        top: 7px;
    }
}