@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: 1;
    }

    label.menu{

    }

    main {
        margin-bottom: 3em;
    }

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

    ul.commands {

        li {
            overflow: hidden;
            max-height: 2em;
            transition: max-height ease-in-out .3s;

            a.create-item {
                display: inline-block;
                min-width: 2rem;
                max-width: 3rem;
                background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqAQMAAAD/DVsYAAAABlBMVEVMaXHr6+u1uY+LAAAAAXRSTlMAQObYZgAAABhJREFUeAFjYGCwB+KBov6DwAEiqIF1JwDfRys/xZRySQAAAABJRU5ErkJggg==") no-repeat center 0.6em;
                background-size: 1.1rem;
                font-size: 0.7em;
                padding: 2rem 0 0;
                text-align: center;
            }
        }

        .more-commands {
            display: inline-block;

            label {
                width: 1.5rem;
                height: 2rem;
                font-size: 1.5em;
                text-align: center;
                cursor: pointer;
            }
        }

        #more-commands[type=checkbox] {
            &:checked {
                ~ li {
                    max-height: 5em;
                }
            }
        }
    }
}
