/* CAS-Jartpoint V227 · ZIP-brede telefoon-, notch- en bezelbescherming. */
:root{
  --cj-safe-top:env(safe-area-inset-top,0px);
  --cj-safe-right:env(safe-area-inset-right,0px);
  --cj-safe-bottom:env(safe-area-inset-bottom,0px);
  --cj-safe-left:env(safe-area-inset-left,0px)
}
html{min-height:100%;min-height:100dvh}
body{min-height:100vh;min-height:100dvh;max-width:100%;overflow-x:clip}
.cj-pwa-install,.cj-pwa-update{right:max(10px,var(--cj-safe-right))}
.cj-pwa-modal{padding:max(18px,var(--cj-safe-top)) max(18px,var(--cj-safe-right)) max(18px,var(--cj-safe-bottom)) max(18px,var(--cj-safe-left))}

@media(max-width:980px){
  body.cj-has-admin-shell .cj-shell,body.cj-has-public-shell .cj-shell{
    height:calc(68px + var(--cj-safe-top))!important;
    padding-top:var(--cj-safe-top)!important
  }
  body.cj-has-admin-shell .cj-shell__mobilebar,body.cj-has-public-shell .cj-shell__mobilebar{
    height:68px!important;
    padding-left:max(12px,var(--cj-safe-left))!important;
    padding-right:max(12px,var(--cj-safe-right))!important
  }
  body.cj-has-admin-shell .cj-shell__panel,body.cj-has-public-shell .cj-shell__panel{
    inset:calc(68px + var(--cj-safe-top)) 0 auto!important;
    height:calc(100dvh - 68px - var(--cj-safe-top))!important;
    max-height:calc(100dvh - 68px - var(--cj-safe-top))!important;
    padding-right:max(13px,var(--cj-safe-right))!important;
    padding-bottom:max(18px,var(--cj-safe-bottom))!important;
    padding-left:max(13px,var(--cj-safe-left))!important
  }
  body.module-page .module-shell{
    height:calc(66px + var(--cj-safe-top))!important;
    padding-top:var(--cj-safe-top)!important
  }
  body.module-page .module-shell__mobilebar{
    height:66px!important;
    padding-left:max(12px,var(--cj-safe-left))!important;
    padding-right:max(12px,var(--cj-safe-right))!important
  }
  body.module-page .module-shell__panel{
    inset:calc(66px + var(--cj-safe-top)) 0 0!important;
    height:auto!important;
    max-height:calc(100dvh - 66px - var(--cj-safe-top))!important;
    padding-right:max(13px,var(--cj-safe-right))!important;
    padding-bottom:max(18px,var(--cj-safe-bottom))!important;
    padding-left:max(13px,var(--cj-safe-left))!important
  }
  body.module-page .public-bar{
    height:calc(66px + var(--cj-safe-top))!important;
    padding-top:var(--cj-safe-top)!important
  }
  body.module-page .public-bar__inner{
    height:66px!important;
    padding-left:max(13px,var(--cj-safe-left))!important;
    padding-right:max(13px,var(--cj-safe-right))!important
  }
  body.module-page .wrap{
    padding-right:max(11px,calc(var(--cj-safe-right) + 7px))!important;
    padding-bottom:max(44px,calc(var(--cj-safe-bottom) + 24px))!important;
    padding-left:max(11px,calc(var(--cj-safe-left) + 7px))!important
  }
  .cj-portal-shell{
    width:auto!important;max-width:1240px;
    margin-right:max(7px,var(--cj-safe-right))!important;
    margin-left:max(7px,var(--cj-safe-left))!important;
    padding-top:calc(7px + var(--cj-safe-top))!important;
    padding-bottom:max(16px,var(--cj-safe-bottom))!important
  }
  .cj49-shell{
    width:auto!important;max-width:1580px;
    margin-right:max(7px,var(--cj-safe-right))!important;
    margin-left:max(7px,var(--cj-safe-left))!important;
    padding-top:calc(7px + var(--cj-safe-top))!important;
    padding-bottom:max(18px,var(--cj-safe-bottom))!important
  }
  .pwa-shell{
    width:auto!important;max-width:980px;
    margin-right:max(7px,var(--cj-safe-right))!important;
    margin-left:max(7px,var(--cj-safe-left))!important;
    padding-top:calc(7px + var(--cj-safe-top))!important;
    padding-bottom:max(24px,var(--cj-safe-bottom))!important
  }
  .pwa-login-form{
    right:max(10px,var(--cj-safe-right))!important;
    left:max(10px,var(--cj-safe-left))!important;
    top:calc(86px + var(--cj-safe-top))!important;
    max-height:calc(100dvh - 98px - var(--cj-safe-top) - var(--cj-safe-bottom));
    overflow:auto;
    overscroll-behavior:contain
  }
  .pwa-account-button,.pwa-account-summary{min-height:44px!important}
  .pq-fire-panel{bottom:max(8px,var(--cj-safe-bottom))!important}
  body.cj-test-pwa{padding-top:calc(70px + var(--cj-safe-top))!important;padding-bottom:calc(88px + var(--cj-safe-bottom))!important}
  .cjtp-topbar{height:calc(61px + var(--cj-safe-top))!important;padding-top:calc(8px + var(--cj-safe-top))!important;padding-right:max(9px,var(--cj-safe-right))!important;padding-left:max(9px,var(--cj-safe-left))!important}
  body.cj-teamplanning-page .wrap{
    width:auto!important;max-width:920px;
    margin-right:max(7px,var(--cj-safe-right))!important;
    margin-left:max(7px,var(--cj-safe-left))!important;
    padding-top:calc(7px + var(--cj-safe-top))!important;
    padding-bottom:calc(28px + var(--cj-safe-bottom))!important
  }
  body.cj-page-kale-kop-deelnemer{
    padding-top:var(--cj-safe-top)!important;
    padding-right:var(--cj-safe-right)!important;
    padding-bottom:var(--cj-safe-bottom)!important;
    padding-left:var(--cj-safe-left)!important
  }
  .lab-top{
    min-height:calc(64px + var(--cj-safe-top))!important;
    padding-top:calc(9px + var(--cj-safe-top))!important;
    padding-right:max(10px,var(--cj-safe-right))!important;
    padding-left:max(10px,var(--cj-safe-left))!important
  }
  body.cj-teamwedstrijd-scorebord-v56 .board{
    padding-top:max(7px,var(--cj-safe-top))!important;
    padding-right:max(7px,var(--cj-safe-right))!important;
    padding-bottom:max(7px,var(--cj-safe-bottom))!important;
    padding-left:max(7px,var(--cj-safe-left))!important
  }
  body.cj-teamwedstrijd-scorebord-v56 .error-banner{bottom:max(20px,var(--cj-safe-bottom))!important}
}

@media(max-width:430px){
  .cj-shell__mobilebar{gap:7px!important}
  .cj-shell__mobile-home{width:42px;min-width:42px;padding-right:0!important;padding-left:0!important;gap:0!important;font-size:0!important}
  .cj-shell__mobile-home .cj-icon{width:17px;height:17px}
  .cj-shell__mobile-login{min-width:52px;min-height:42px!important;padding-right:8px!important;padding-left:8px!important;flex:0 0 auto}
  .cj-shell__toggle{min-width:42px;min-height:42px;padding-right:10px!important;padding-left:10px!important}
  .pwa-account-main{min-width:0;overflow:hidden}
  .pwa-account-copy strong,.pwa-account-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media(max-width:360px){
  .cj-shell__mobile-home{display:none!important}
  .cj-shell__mobile-brand .cj-shell__ball{width:36px!important;height:36px!important}
  .pwa-account-icon{display:none!important}
}

@media(orientation:landscape) and (max-height:560px){
  .pwa-login-form{top:calc(8px + var(--cj-safe-top))!important;max-height:calc(100dvh - 16px - var(--cj-safe-top) - var(--cj-safe-bottom))}
}