@theme-color: #12364a; /*cor zuri*/
@theme-contrast: #fff;
@background-color: #ccc;
@text-color: #444;

body.pwa {
    header {
        position: -webkit-sticky;
        position: sticky;
        top: -1px;
        z-index: 3;
    }

    main {
        margin-bottom: 3em;
    }

    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    ul.commands {
        position: absolute;
        bottom: .5em;
        right: .5em;

        li {
            margin: 0;
            padding: 0;
        }

        a.create-item {
            margin: 0;
            display: block;
            width: 2rem;
            height: 2rem;
            background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqAQMAAAD/DVsYAAAABlBMVEVMaXHr6+u1uY+LAAAAAXRSTlMAQObYZgAAABhJREFUeAFjYGCwB+KBov6DwAEiqIF1JwDfRys/xZRySQAAAABJRU5ErkJggg==") no-repeat center 0.6em;
            background-size: 1.1rem;
            text-align: center;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
        }
    }

    input:not([type=checkbox], [type=radio], [type=range]), select, textarea {
        -webkit-appearance: none;
        border-radius: 0;
    }

    input:not([type=range], [type=submit], [type=button], [type=reset]), button, select, textarea {
        &:disabled {
            pointer-events: none;
        }
    }

    input:not([type=range], [type=submit], [type=button], [type=reset]), textarea {
        &:read-only {
            pointer-events: none;
        }
    }

    input[type=range] {
        &[disabled=disabled], &[readonly=readonly] {
            pointer-events: none;
        }
    }

    .form-mobile {
        &, & fieldset.group {
            grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
        }

        > div.scale, > div.rating {
            padding: .5em 1.5em;

            > span:first-child {
                margin: 0 -1em;
            }
        }
    }
}
