/*  MOBILE  */
@media screen and (max-width: 600px) {

    /* BODY BLUR */
    :root {
      --edge-blur-height: calc(20px + env(safe-area-inset-top) + var(--mobile-navbar-height));
      --edge-blur-amount: 24px;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      left: 0;
      right: 0;
      z-index: 99;
      pointer-events: none;

      backdrop-filter: blur(var(--edge-blur-amount));
      -webkit-backdrop-filter: blur(var(--edge-blur-amount));
    }

    body::before {
      top: -5px;
      height: var(--edge-blur-height);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    }

    body::after {
      bottom: -5px;
      height: var(--edge-blur-height);
      mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
    }
    /* BODY BLUR */

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

    .ui.top.toast-container {
        top: calc(0px + env(safe-area-inset-top)) !important;
    }

    .ui.visible.bottom.flyout {
        border-radius: 20px 20px 0 0;
        padding-bottom: calc(0px + env(safe-area-inset-bottom));
    }

    .ui.visible.fullscreen.flyout:not(.bottom) {
        padding-top: calc(0px + env(safe-area-inset-top));
        padding-bottom: calc(0px + env(safe-area-inset-bottom));
    }
    .ui.visible.fullscreen.flyout:not(.bottom) > i.close.icon {
        padding-top: calc(0px + env(safe-area-inset-top));
    }
    .ui.visible.fullscreen.flyout:not(.bottom) > .scrolling.content {
        min-height: unset !important;
        height: calc(100dvh - 124px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }


    .ui.big.list, .ui.large.list, .ui.massive.list {
        font-size: 1em !important;
    }

    #header .header {
        font-size: 18px !important;
    }

    #header .button {
        font-size: 16px !important;
    }

    #header img {
        width: 40px !important;
        height: 25px !important;
        margin: 0 !important;
    }

    #header img.circular {
        width: 25px !important;
        margin-right: 5px !important;
        padding: 0 !important;
    }

    .statistics .value {
        font-size: 20px !important;
    }

    .statistics .label {
        font-size: 14px !important;
    }

}