/* Wide CRM workspace: align with the website navigation while remaining responsive. */
body .wlcrm-app{
  width:min(1700px,calc(100vw - 80px))!important;
  max-width:none!important;
  margin-top:14px!important;
  margin-right:0!important;
  margin-bottom:14px!important;
  margin-left:calc(50% - 50vw + 40px)!important;
}

@media(min-width:1780px){body .wlcrm-app{margin-left:calc(50% - 850px)!important}}

/* Let the additional width benefit the information-heavy areas. */
body .wlcrm-app .wlcrm-panel,
body .wlcrm-app .wlcrm-header,
body .wlcrm-app .wlcrm-holidays,
body .wlcrm-app .wlcrm-tabs{width:100%!important;max-width:none!important}

@media(max-width:1100px){
  body .wlcrm-app{
    width:calc(100vw - 32px)!important;
    margin-right:0!important;
    margin-left:calc(50% - 50vw + 16px)!important;
  }
}

@media(max-width:600px){
  body .wlcrm-app{
    width:calc(100vw - 20px)!important;
    margin-top:8px!important;
    margin-right:0!important;
    margin-bottom:8px!important;
    margin-left:calc(50% - 50vw + 10px)!important;
    border-radius:10px!important;
  }
}