spacer { height: 15px; }
.info_container {
    background: white;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 12px 16px;
    height: calc(90dvh - 24px);
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    gap: 5px;
}
.info_container::before {
    content: '';
    position: absolute;
    background-color: white;
    background-image: url('../icons/logo_small.png');
    background-position: center;
    background-repeat: no-repeat;
    padding: 12px 16px;
    height: calc(10dvh - 24px);
    top: -10dvh;
    right: 0;
}
.info_container input[type="email"], .info_container input[type="password"], .info_container input[type="text"], .info_container input[type="number"], .info_container select {
    border: none;
    border-bottom: 1px solid rgb(128, 128, 128);
    outline: 0;
    font-family: inherit;
    font-size: 11pt;
    width: calc(100% - 4px);
}
.info_container input[type='checkbox'] { border: 1px solid gray; }
.info_container .footer { font-size: 8pt; margin-top: auto; }
.info_container span { position: relative; width: 100%; }
.msg { display: flex; flex-flow: row nowrap; align-items: stretch; width: 150px; gap: 7.5px; position: absolute!important; background: white; right: calc(100% + 30px); font-size: 11pt; padding: 6px 16px 6px 6px; border-radius: 4px; }
.msg img { max-height: 15px; }
.msg::after { content: ""; position: absolute; background: white; right: -5px; height: 10px; width: 10px; top: 8px; transform: rotate(45deg); }
.row_container { display: flex; width: 100%; justify-content: space-evenly; align-items: center; }

/* MOBILE CHANGES */

@media only screen and (min-width: 800px) {
    .info_container { width: calc(300px - 32px); }
    .info_container::before { width: calc(300px - 32px); }
}
@media only screen and (max-width: 800px) {
    .info_container { width: calc(100dvw - 32px); }
    .info_container::before { width: calc(100dvw - 32px); }
}