@media(max-width: 1200px) {
    .name-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media(max-width: 1024px) {
    .contacts-content {
        width: 100%;
        z-index: 1;
    }

    .contact-container {

        position: absolute;
        z-index: 49;
        width: 50%;
        height: 74vh;
        background-color: white;
        display: none;
    }

    .addContact-Button-Media {
        display: inline-flex;
    }

    .new-contact-button-container {
        display: none !important;
    }

    #container {
        overflow: auto;
    }

    .mediaquery-d-flex {
        display: flex;
    }

    .mediaquery-d-none {
        display: none;
    }

    .mediaquery-z-index {
        z-index: 100;
    }
}

@media(max-width: 769px) {
    .contact-container {
        width: 88%;
        height: 70vh;
    }

    .contacts-content {
        margin-bottom: 83.5px;
    }
}

@media(max-width: 700px) {
    #container {
        margin-bottom: 83.5px;
    }

    .new-contact {
        width: 100%;
        overflow: hidden;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
        border-radius: 0;
        z-index: 103;
        transform: translateX(100%);
    }

    .new-contact-show {
        transform: translateX(0%);
    }

    .new-contact-input-field {
        width: 300px;
    }

    .new-contact-input {
        width: 270px;
    }

    .contact-container {
        padding: 0;
        z-index: 101;
    }

    .contact-information {
        margin-left: 10px;
        width: 90%;
    }

    .name-container {
        margin: 10px;
    }

    .contact {
        width: 300px;
    }

    .new-contact-header {
        padding: 10px;
        height: 215px;
        text-align: center;
        border-radius: 0;
        width: 100%;
    }

    .new-contact-information {
        padding-top: 20px;
        width: 100%;
    }

    .edit-contact {
        width: 100%;
        overflow: hidden;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
        border-radius: 0;
        z-index: 103;
        transform: translateX(-100%);
    }

    .edit-contact-show {
        transform: translateX(0%);
    }

    .edit-contact-header {
        width: 100%;
        padding: 10px;
        height: 215px;
        text-align: center;
        overflow: hidden;
        border-radius: 0;

    }


}

@media(max-width: 500px) {
    .contact-container {
        width: 100%;
        height: 100vh;
    }
}


@media (max-height: 800px) and (min-width: 1024px) {
    .new-contact {
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.0);
        border-radius: 0;
    }

    .new-contact-input-container {
        gap: 12px;
    }

    .new-contact-input-field {
        width: 300px;
    }

    .new-contact-input {
        width: 270px;
    }

    .new-contact-information {
        padding-top: 10px;
    }

    .new-contact-header {
        padding: 20px 46px;
        height: 215px;
        text-align: center;
    }

    .new-contact-intro {
        width: 250px;
    }

    .new-contact-show {
        transform: translateX(26px);
    }

    .edit-contact-header {
        padding: 20px 46px;
        height: 215px;
        text-align: center;
    }

    .edit-contact {
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.0);
        border-radius: 0;
    }

    .edit-contact-show {
        transform: translateX(-26px);
    }


}