body, html {
    overflow-x: hidden;
    min-height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    font-size: 100%;
}

.body-off {
    font-family:'Open Sans',sans-serif;
    background: rgb(0,157,248);
    background: linear-gradient(25deg, rgba(0,157,248,1) 25%, rgba(59,198,37,1) 100%);
    width: 100%;
    min-height: 100vh;
    padding: 1.5rem;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.area-off {
    width: min(100%, 56rem);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
}

.area-msg {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    flex: 0 1 32rem;
    min-width: 0;
}

.msg {
    line-height: 1.1 !important;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    max-width: 32rem;
}

.logo_pref {
    height: auto;
    color: #FFD302;
    /*color: #1DC98A;*/
    font-size: 0.9rem;
    font-weight: 600;
    border-left: 3px solid #FFFFFF;

    writing-mode: tb-rl;
    -webkit-transform: rotate(50deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(180deg);
}

.msg-alerta {
    padding-top: 0.75rem;
    font-size: 0.75rem;
    /*color: #FFD302;*/
    color: #FFFFFF;
    display: block;
    width: 100%;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 768px) {
    .area-off {
        width: min(100%, 32rem);
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    .msg {
        max-width: 100%;
    }

    .logo_pref {
        border-left: 0;
        border-bottom: 3px solid #FFFFFF;
        padding-bottom: 0.5rem;
        writing-mode: initial;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        text-align: center;
    }

    .area-msg,
    .msg,
    .msg-alerta {
        align-items: center;
        text-align: center;
    }
}