/* PWA / offline stuff */
body.offline {
}
body.offline:after {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f05e";
    position: fixed;
    right: 0;
    top: 0;
    height: 25px;
    width: 25px;
    padding-top: 6px;
    background: #ccc;
    color: #111;
    font-size: 12px;
    z-index: 9999999;
    text-align: center;
}
body.offline .widget_nooffline:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    content: "no offline";
    opacity: 0.5;
    z-index: 99999;
    font-size: 14px;
    padding-top: 30%;
    text-align: center;
    color: #b80000;
}

/** buttons container */
.pwa_buttons {
    position: fixed;
    right: 10px;
    bottom: 0px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 25%;
    min-width: 300px;
}
.pwa_buttons > div {
    margin-bottom: 15px;
    position: relative;
    padding: 10px;
    border: 1px solid #ddd;
    background: #fff;
    color: #111;
    border-radius: 3px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    z-index: 9999;
    cursor: pointer;
    width: 100%;
    display: none;
}
.pwa_buttons > div.pwa_button_show {
    -webkit-animation: pwa_button_in 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: pwa_button_in 1s; /* Firefox < 16 */
    -o-animation: pwa_button_in 1s; /* Opera < 12.1 */
    animation: pwa_button_in 1s;
    display: block;
}
.pwa_buttons > div.pwa_button_hide {
    -webkit-animation: pwa_button_out 0.5s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: pwa_button_out 0.5s; /* Firefox < 16 */
    -o-animation: pwa_button_out 0.5s; /* Opera < 12.1 */
    animation: pwa_button_out 0.5s;
    display: block; /** it's removed via javascript */
}

.pwa_buttons > div img {
    float: left;
    margin-right: 15px;
    height: 70px;
}
.pwa_buttons > div img {
}

.pwa_buttons > div p {
    margin: 5px;
    font-weight: bold;
}
.pwa_buttons > div p.small {
    font-weight: normal;
    opacity: 0.7;
    margin-bottom: 0;
}
.pwa_buttons > div .btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    zoom: 0.75;
}
@media (max-width: 768px) {
    .pwa_buttons {
        left: 5% !important;
        width: 90%;
        right: auto !important;
        bottom: 0px !important;
        top: auto !important;
        min-width: 200px;
    }
    .pwa_buttons > div p {
        font-size: 90%;
    }
    .pwa_buttons > div p.small {
        font-size: 80%;
    }
    .pwa_buttons > div .btn {
        font-size: 11px !important;
    }
    .pwa_buttons>div img {
        height: 4em;
    }
}

/* animations for buttons - in */
@keyframes pwa_button_in {
    from { opacity: 0; margin-top: -20px; }
    to   { opacity: 1; margin-top: 0px; }
}
@-moz-keyframes pwa_button_in {
    from { opacity: 0; margin-top: -20px; }
    to   { opacity: 1; margin-top: 0px; }
}
@-webkit-keyframes pwa_button_in {
    from { opacity: 0; margin-top: -20px; }
    to   { opacity: 1; margin-top: 0px; }
}
@-ms-keyframes pwa_button_in {
    from { opacity: 0; margin-top: -20px; }
    to   { opacity: 1; margin-top: 0px; }
}
@-o-keyframes pwa_button_in {
    from { opacity: 0; margin-top: -20px; }
    to   { opacity: 1; margin-top: 0px; }
}

/* animations for buttons - out */
@keyframes pwa_button_out {
    from { opacity: 1; margin-right: 0px; }
    to   { opacity: 0; margin-right: -200px; }
}
@-moz-keyframes pwa_button_out {
    from { opacity: 1; margin-right: 0px; }
    to   { opacity: 0; margin-right: -200px; }
}
@-webkit-keyframes pwa_button_out {
    from { opacity: 1; margin-right: 0px; }
    to   { opacity: 0; margin-right: -200px; }
}
@-ms-keyframes pwa_button_out {
    from { opacity: 1; margin-right: 0px; }
    to   { opacity: 0; margin-right: -200px; }
}
@-o-keyframes pwa_button_out {
    from { opacity: 1; margin-right: 0px; }
    to   { opacity: 0; margin-right: -200px; }
}





/* A2HS */
.modal-a2hs-backdrop {
    position: fixed;
    opacity: 0;
    display: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99999;
    transition: all .5s linear;
}
.modal-a2hs {
    position: absolute;
    border-radius: 3px;
    opacity: 0;
    display: none;
    top: 10vh;
    left: 50%;
    width: 50%;
    margin-left: -25%;
    background: #fff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
    transition: all 1s linear;
    z-index: 999999;
}
@media (max-width: 768px) {
    .modal-a2hs {
        top: 10% !important;
    }
}
.modal-a2hs-header {
    padding: 5px;
    text-align: right;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
@media (max-width: 768px) {
    .modal-a2hs {
        width: 90%;
        margin-left: -45%;
        top: auto;
        bottom: 15px;
    }
}

.modal-a2hs-backdrop.a2hs_modal_show, .modal-a2hs.a2hs_modal_show {
    display: block;
    opacity: 1;
}

.modal-a2hs .modal-a2hs-body {
    display: none;
    padding: 15px;
    max-height: 80vh;
    overflow: auto;
}
@media (max-width: 768px) {
    .modal-a2hs .modal-a2hs-body img {
        display: block;
        max-height: 150px;
        width: auto !important;
        margin: auto;
    }
}
.modal-a2hs.a2hs_modal_iphone .modal-a2hs-iphone {
    display: block;
}
.modal-a2hs.a2hs_modal_ipad .modal-a2hs-ipad {
    display: block;
}
.modal-a2hs.a2hs_modal_ipad .modal-a2hs-ipad-ipad {
    display: none;
}
.modal-a2hs.a2hs_modal_ipad .modal-a2hs-ipad-safari {
    display: block;
}

@media (min-width : 768px) and (max-width : 1024px) {
    /** ipad **/
    .modal-a2hs .modal-a2hs-body img {
        display: block;
        max-height: 150px;
        width: auto !important;
        margin: auto;
        float: none;
    }
    .modal-a2hs.a2hs_modal_ipad .modal-a2hs-ipad-ipad {
        display: block;
    }
    .modal-a2hs.a2hs_modal_ipad .modal-a2hs-ipad-safari {
        display: none;
    }
}


.modal-a2hs.a2hs_modal_generic .modal-a2hs-generic {
    display: block;
}