@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap';

@font-face {
    font-family: material icons;
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), url(../fonts/MaterialIcons-Regular.woff) format('woff'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype')
}

.material-icons {
    font-family: material icons;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga'
}

@font-face {
    font-family: framework7 icons;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/Framework7Icons-Regular.woff2) format('woff2'), url(../fonts/Framework7Icons-Regular.woff) format('woff'), url(../fonts/Framework7Icons-Regular.ttf) format('truetype')
}

.f7-icons {
    font-family: framework7 icons;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'liga';
    -moz-font-feature-settings: 'liga=1';
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    text-align: center
}

.md:not([class*=color-theme]) {
    --f7-theme-color: #6200ee;
    --f7-theme-color-rgb: 98, 0, 238;
    --f7-theme-color-shade: #5100c5;
    --f7-theme-color-tint: #7718ff
}



.panel {
    min-width: 150px;
    max-width: 90%
}

.ios .panel-right.panel-in~.view-main:after,
.ios .panel-right.panel-out~.view-main:after {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    right: 0;
    top: 0;
    background: #ddd;
    z-index: 1000
}

.ios .dark .panel-right.panel-in~.view-main:after,
.ios .dark .panel-right.panel-out~.view-main:after {
    background: #282828
}

.ios .panel-left:after {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    right: 0;
    top: 0;
    background: #ddd;
    z-index: 1000
}

.ios .dark .panel-left:after {
    background: #282828
}

:root {
    --f7-navbar-height:60px;
    --f7-page-content-extra-padding-top: 20px;
    /* --f7-page-bg-color: ghostwhite; */
}
/* ********************************* */
.hidden {
    display: none;
}