.modal-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    width: 40vw;
    height: 90vh;
    background-color: white;
    border: solid black 2px;
    border-radius: 15px;
}

@media screen and (max-width: 2000px) {
    .modal-frame {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
        width: 40vw;
        height: 100vh;
        background-color: white;
        border: solid black 2px;
        border-radius: 15px;
    }
}

@media screen and (max-width: 1200px) {
    .modal-frame {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
        width: 100vw;
        height: 100vh;
        background-color: white;
        border: solid black 2px;
        border-radius: 15px;
    }
}

.modal-top {
    position: relative;
    top: 0;
    width: 100%;
    height: 35%;
    display: flex;
    border-bottom: solid black 2px;
}

.modal-top-left {
    flex: 1;
    height: 100%;
    border-right: solid black 1px;
}

.modal-top-left-title {
    top: 0;
    width: 100%;
    height: 30%;
    border-bottom: solid black 1px;
    padding: 5%;
}

.modal-top-left-bottom {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 70%;
    display: flex;
}

.modal-top-right {
    flex: 1;
    height: 100%;
    padding: 5%;
}

.modal-middle {
    width: 100%;
    height: 20%;
    border-bottom: solid black 2px;
}

.modal-middle-workers {
    width: 100%;
    height: 50%;
    border-bottom: solid black 1px;
    display: flex;
}

.modal-middle-workers-col {
    flex: 1;
    height: 100%;
    padding: 2%;
    justify-content: center;
    justify-items: center;
}

.modal-middle-customer {
    width: 100%;
    height: 50%;
    border-bottom: solid black 1px;
    display: flex;
}

.modal-middle-customer-col {
    flex: 1;
    height: 100%;
    padding: 2%;
    justify-content: center;
    justify-items: center;
}

.modal-bottom {
    height: 45%;
    width: 100%;
    display: flex;
}

.modal-bottom-left {
    flex: 1;
    height: 100%;
    border-right: solid black 1px;
    padding-left: 1%;
}

.modal-bottom-right {
    flex: 3;
    height: 100%;
}

.customer-frame {
    position: absolute;
    top: 50%;
    left: 15vw;
    transform: translate(-50%, -50%);
    z-index: 99;
    width: 25vw;
    height: 85vh;
    background-color: white;
    border: solid black 2px;
    border-radius: 15px;
}