:root {
  --f7-ios-primary: #3E84F7;
  --f7-ios-primary-shade: #3E84F7;
  --f7-ios-primary-tint: #3E84F7;
  --lamp-toolbar-duration: .7s;  
  --f7-bars-translucent-blur: 2px;
  --f7-tabbar-icon-size: 20px;
  --f7-theme-color-rgb: var(--f7-ios-primary);
  --f7-block-inset-border-radius: 23px;
  --f7-list-inset-border-radius: 25px;
  --f7-card-border-radius: 26px !important;
    --f7-bars-translucent-blur: 4px;
}

.ios {
    --f7-theme-color: #b9cefb;
    
    --f7-theme-color-shade: #b9cefb;
    --f7-theme-color-tint: #b9cefb;
    --f7-tabbar-icon-size: 20px;
  --f7-block-inset-border-radius: 23px;
  --f7-list-inset-border-radius: 25px;
  --f7-card-border-radius: 26px !important;
    --f7-bars-translucent-blur: 4px;
}

.ios .color-primary,
.ios.color-primary {
    --f7-theme-color: #b9cefb;
    --f7-theme-color-shade: #b9cefb;
    --f7-theme-color-tint: #b9cefb;
}

.lamp-tabbar {
    --f7-toolbar-inner-padding-left: 0px;
    --f7-toolbar-inner-padding-right: 0px;
    --f7-tabbar-icon-size: 24px;
    overflow: hidden;
    --computed-lamp-color: var(--active-lamp-color, var(--f7-tabbar-link-active-border-color, var(--f7-theme-color)));
}

ion-icon {
    font-size: 27px;
}

.lamp-tabbar .toolbar-inner {
    overflow: visible;
}

.md .tabbar i.icon:before,
.md .tabbar-icons i.icon:before {
    display: none;
}

@media (max-width: 767px) {
    .ios .lamp-tabbar {
        --f7-tabbar-icon-size: 20px;
    }
    .ios .lamp-tabbar.tabbar-icons .tab-link i.icon {
        margin-bottom: 2px;
    }
    .md .lamp-tabbar {
        --f7-tabbar-icon-size: 24px;
    }
}

.lamp-tabbar .tab-link {
    transition-duration: calc(var(--lamp-toolbar-duration) / 2);
}

.lamp-tabbar .tab-link-active {
    transition-delay: calc(var(--lamp-toolbar-duration) / 2);
}

.theme-dark .lamp-tabbar .tab-link {
    --f7-touch-ripple-color: rgba(255, 255, 255, .05);
}

.lamp-tabbar .tab-link-highlight {
    display: block !important;
    position: absolute;
    background-color: transparent !important;
    height: 4px !important;
    transition-timing-function: cubic-bezier(.25, .1, .4, 1.4);
    transition-duration: var(--lamp-toolbar-duration);
}

.lamp-tabbar .tab-link-highlight:before {
    --lamp-circle-color: var(--computed-lamp-color);
    --lamp-circle-size: calc(var(--f7-toolbar-height) * 1.25);
    content: "";
    width: var(--lamp-circle-size);
    height: var(--lamp-circle-size);
    position: absolute;
    left: 50%;
    top: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--lamp-circle-color);
    opacity: .5;
    transition-duration: var(--lamp-toolbar-duration);
    -webkit-filter: blur(30px);
    filter: blur(30px);
}

.lamp-tabbar .tab-link-highlight:after {
    content: "";
    position: absolute;
    left: 50%;
    width: 32px;
    height: 100%;
    top: 0;
    background-color: var(--computed-lamp-color);
    transform: translate(-50%);
    z-index: 100;
    transition-duration: var(--lamp-toolbar-duration);
    box-shadow: 0 0 2px var(--computed-lamp-color);
    border-radius: 0 0 4px 4px;
}
.item-title{font-size:auto;color:#fff!important}
.item-subtitle{font-size:auto;color:#fff!important}
.lamp-tabbar .tab-link-active {
    color: var(--lamp-color, var(--f7-tabbar-link-active-color, var(--f7-theme-color)));
}

.page-content {
    max-height: 100%;
    max-width: 100%;
}
.page {
    background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #1a5f7a 32px),
        repeating-linear-gradient(#4fc3f7, #4fc3f7);
    background-color: #1a5f7a;
}

.source-code{font-size:20px;color:#fff;font-weight:bold;!important}

.toolbar-inner .toolbar,
.block-strong,
.card {
    background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(7px) saturate(180%);
  -webkit-backdrop-filter: blur(7px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0px 0px 0px 2px rgba(255, 255, 255, 0.05) inset,
    0px 0px 100px 10px rgba(255, 255, 255, 0.05) inset,
    0 0.5px 0px rgba(255, 255, 255, 0.525) inset;
  transition: all 0.3s ease;
}
.list{font-size:auto;!important 
    color:#fff;!important}
.item-media img {
    background-color: #C2C2C2;
    width: 60px;
    height: 60px;
    border-radius: 23.3%;
}

img {
    pointer-events: none;
}
.source-code{font-size:20px;color:#fff;font-weight:bold;!important}
.source-code i{font-size:20px;!important}
.concept-img {
    width: 97%;
    border-radius: 20px;
}
.item-title{font-size:auto;color:#fff;!important}
.item-subtitle{font-size:auto;color:#fff;!important}

.block-title {
    font-size: auto;
    color: #fff;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    position: fixed;
    overflow: hidden;
    font-size: auto;
    color: #fff;
    opacity: 0;
    animation: fadeIn 2s ease-in-out forwards;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

::-webkit-scrollbar {
    display: none;
}

.list.separated li {
    margin-top: 10px;
    background: var(--f7-list-strong-bg-color);
    border-radius: var(--f7-list-inset-border-radius);
}

.list.separated ul {
    background: transparent;
}

    .list.separated.glass li {
  background: rgba(255, 255, 255, 0.13)!important;
  backdrop-filter: blur(7px) saturate(180%);
  -webkit-backdrop-filter: blur(7px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0px 0px 0px 2px rgba(255, 255, 255, 0.05) inset,
    0px 0px 100px 10px rgba(255, 255, 255, 0.05) inset,
    0 0.5px 0px rgba(255, 255, 255, 0.525) inset;
}

..list.separated.glass li::before {
  content: "";
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.list.separated .item-inner:after {
    content: none;
}


.popup {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.card-expandable {
    border-radius: 23px;
}

.item-media ion-icon {
    font-size: 27px;
}

a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}

.button-raised {
    border-radius: 10px;
}

.button-large {
    border-radius: 15px;
}

.swipe-nav {
    background: var(--handler-navbar-bg);
    position: absolute;
    justify-content: center;
    -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
    z-index: 500;
    display: flex;
    height: 17px;
    width: 100%;
    backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
    align-items: center;
}

.swipe-nav i {
    font-size: 60px;
    color: gray;
}

.newsimg {
    width: 300px;
    border-radius: 20px;
    margin-right: 2px;
}

.profile-pic {
    border-radius: 999px;
    width: 50%;
}
.toolbar-bottom {
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  padding: 10px 0;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.13)!important;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0px 0px 0px 2px rgba(255, 255, 255, 0.05) inset,
    0px 0px 100px 10px rgba(255, 255, 255, 0.05) inset,
    0 0.5px 0px rgba(255, 255, 255, 0.525) inset;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: fixed;
  bottom: 0;
}

.toolbar-bottom::before {
  content: "";
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.dark .toolbar-bottom {
  background: rgba(30, 30, 30, 0.13)!important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0px 0px 0px 2px rgba(255, 255, 255, 0.05) inset,
    0px 0px 100px 10px rgba(255, 255, 255, 0.05) inset,
    0 0.5px 0px rgba(255, 255, 255, 0.525) inset;
}

.dark .toolbar-bottom::before {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05), transparent 70%);
}

@media only screen and (min-width: 500px) {
    #app {
        padding-left: 30%;
        padding-right: 30%;
    }
}