:root {
    /* dimensions */
    --datetime-width: 260px;
    --location-width: 370px;
    --birth-datetime-width: 190px;
    --birth-location-width: 278px;
    --date-place-label-width: 30px;

    /* padding and margins */
    --date-place-label-padding: 13px;
    --birth-date-place-right: 15px;
}
.date-place-label {
    display: inline-block;
    color: black;
    font-weight: 700;
    margin: 0 0 0 5px;
    padding: var(--date-place-label-padding);
    width: var(--date-place-label-width);
}
.birth-date-place {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--data-place-gap);
    margin-top: 15px;
    margin-left: var(--date-place-margin);
    margin-right: var(--birth-date-place-right);
    background: #b4b4d9;
    border-radius: 5px;
}
#birth-datetime {
    width: var(--birth-datetime-width);
    margin: var(--input-margin);
    order: 1;
}
.birth-date-place .awesomplete {
    order: 2;
}
#birth-location {
    width: var(--birth-location-width);
    margin: var(--input-margin);
}
#action-load {
    order: 3;
}
#action-save {
    order: 4;
}
@media screen and (max-width: 900px) {
    :root {
        /* dimensions */
        --datetime-width: 211px;
        --location-width: 303px;
        --birth-datetime-width: 148px;
        --birth-location-width: 225px;
    }
}
@media screen and (max-width: 720px) {
    :root {
        /* dimensions */
        --datetime-width: 167px;
        --location-width: 242px;
        --action-button-width: 50px;
        --birth-datetime-width: 140px;
        --birth-location-width: 142px;
    }
}
@media screen and (max-width: 600px) {
    :root {
        /* dimensions */
        --datetime-width: 340px;
        --location-width: 277px;
        --action-button-width: 60px;
        --birth-datetime-width: 224px;
        --birth-location-width: 224px;
        --date-place-label-width: 26px;

        /* padding and margins */
        --date-place-label-padding: 8px;
    }
    #birth-datetime {
        order: 1;
    }
    .birth-date-place > .awesomplete {
        order: 3;
        margin-left: 51px;
    }
    #action-load {
        order: 2;
    }
    #action-save {
        order: 4;
    }
}
@media screen and (max-width: 427px) {
    :root {
        /* dimensions */
        --datetime-width: 323px;
        --location-width: 260px;
        --birth-datetime-width: 213px;
        --birth-location-width: 213px;
        --date-place-label-width: 24px;

        /* padding and margins */
        --date-place-label-padding: 6px;
        --birth-date-place-right: 20px;
    }
    .birth-date-place > .awesomplete {
        margin-left: 45px;
    }
}
@media screen and (max-width: 413px) {
    :root {
        /* dimensions */
        --datetime-width: 293px;
        --location-width: 230px;
        --birth-datetime-width: 184px;
        --birth-location-width: 184px;

        /* padding and margins */
        --birth-date-place-right: 10px;
    }
}
@media screen and (max-width: 374px) {
    :root {
        /* dimensions */
        --datetime-width: 236px;
        --location-width: 174px;
        --birth-datetime-width: 129px;
        --birth-location-width: 129px;
    }
}