/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

#app.framework7-root {
    padding-top: 0px;
}

/* Make room for the statusbar on pages with navbars */
.view-main .page:not([data-name=home]) .navbar {
    margin-top: var(--f7-statusbar-height);
}

.popup {
    overflow-y: auto;
}

#settings-bin .card {
    text-align: center;
    min-height: 250px;
    position: relative;
}

#settings-bin .card .item-icon {
    font-size: 6em;
    height: 1.23em;
}

.usericon {
    border: 2px solid white;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    display: inline-block;
    overflow: hidden;
}

.usericon svg {
    width: 100%;
    height: 100%;
    /* Make it a bit bigger so we can't see the sides */
    transform: scale(1.1);
}

.usericon-2x {
    height: 100px;
    width: 100px;
}

.flex-wrap {
    flex-wrap: wrap;
}

.badges .badge {
    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 50%;
    overflow: hidden;
    margin: 1em;
}

.badges .badge i {
    font-size: 35px;
}

#web-barcode-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: block;
    background: rgba(0,0,0,0.75);
}

.popup-backdrop {
    /*
    We want the backdrop to exist to enable closing on tap,
    but IMO it's better when it's totally transparent
    */
    background: rgba(0,0,0,0);
}

#web-barcode-ui.hidden {
    display: none;
}

#web-barcode-ui video#barcode-viewer {
    max-width: calc(100% - 2em);
    max-height: calc(100% - 2em);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1em;
}

#web-barcode-ui .text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    padding: 1em 5px 1em 5px;
    color: white;
    text-align: center;
    background: rgba(0,0,0,0.5);
}