@media (max-width: 767px) {
  @supports(padding: max(0px)) {
    .safearea {
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        background: #f1f1f1
    }
  }

  .app-nav-inner-safearea {
    padding-top: max(12px, env(safe-area-inset-top));
  }
}



:root {
  /* ------------------------------------------------------------------- 
      Assign the default/constant/env values to CSS variables
  */
  --safe-area-inset-top   :60px;
  --safe-area-inset-right : 0px;
  --safe-area-inset-bottom: 0px;
  --safe-area-inset-left  : 0px;  
  --rally-home-height: 20px;
  /*ios mobile setting*/
  --mobile-main-rally-top-spacing:20px;
  /*
   web setting
  --mobile-main-rally-top-spacing: 16px;*/
  /*--safe-area-inset-top   : constant(safe-area-inset-top);*/
  @supports (top: constant(safe-area-inset-top)){
      
      --safe-area-inset-right : constant(safe-area-inset-right);
      --safe-area-inset-bottom: constant(safe-area-inset-bottom);
      --safe-area-inset-left  : constant(safe-area-inset-left);          
  }
  /*--safe-area-inset-top   : env(safe-area-inset-top);*/
  @supports (top: env(safe-area-inset-top)){

      --safe-area-inset-right : env(safe-area-inset-right);
      --safe-area-inset-bottom: env(safe-area-inset-bottom);
      --safe-area-inset-left  : env(safe-area-inset-left);            
  }          
}


@supports(padding: Max(0px)) {
  .post {
      /* -------------------------------------------------------------------   
         Use the CSS variables in the max function   
      */
      padding-left:  Max(12px, var(--safe-area-inset-left));
      padding-right: Max(12px, var(--safe-area-inset-right));
  }
}