/* ======== *
 * ## 4K ##
 * ======== */

@media only screen and (min-width: 3840px) and (max-width: 4092px)
{
   /* ====================== *
    * ## Casper Component ##
    * ====================== */

   html body { font-size: 20px; }

   body .admin-div > .header,
   body .casper-component .role-subheader,
   body .columns-dropdown .column-assignment-container > .header,
   body .page-container > .page > .header {
      border-radius: 12px 12px 0 0;
      border-width: 0 0 2px 0;
   }

   body .admin-div .header .title,
   body .casper-component .role-subheader .role-title,
   body .columns-dropdown .column-assignment-container > .header,
   body .page-container > .page > .header .title {
      height: 54px;
      line-height: 54px;
   }

   body .casper-component .role-content { border-radius: 0 0 12px 12px; }


   /* ========== *
    * ## Grid ##
    * ========== */

   .page .grid-container {
      padding: 20px 20px 0 20px;
   }

   .page .grid-item-container {
      border-radius: 12px;
   }

   .page .grid-item-container > .grid-item-header {
      border-width: 0 0 2px 0;
      height: 56px;
   }

   .page .grid-item-container > .grid-item-header > .header-title {
      border-radius: 12px 12px 0 0;
      line-height: 54px;
   }


   /* ============ *
    * ## Header ##
    * ============ */

   body .casper > .header .client-logo {
      height: 80px;
      width: 300px;
   }

   body .f3-menu-main > .f3-menu-item {
      height: 80px;
      line-height: 80px;
   }

   body .f3-menu-main > .f3-menu-item > a {
      font-size: 24px;
      padding: 0 40px;
   }


   /* ================== *
    * ## Map Controls ##
    * ================== */

   body .map-controls .top-right .map-controls-button-container > div:not(.map-options-control) { min-width: 60px; }
   body .map-controls .map-controls-button { height: 60px; }
   
   body .map-controls .dropdown-component .list-toggle,
   body .map-controls .map-controls-button:not(.dropdown-component) .icon {
      padding: 16px;
   }

   body .map-controls .map-options-control > .display-wrapper .label {
      line-height: 60px;
      margin-left: 16px;
   }
   body .map-controls .map-options-control > .display-wrapper .list-toggle { padding: 8px; }

   body .map-controls .map-controls-button.reset-button .role-button .icon,
   body .map-controls .map-controls-button.save-button .role-button .icon {
      padding: 14px;
   }

   body .map-controls .map-legend-container {
      border-radius: 8px 0 8px 8px;
      padding: 20px;
      width: 600px;
   }

   body .map-controls .legend-item .legend-item-color,
   body .map-controls .legend-item .legend-item-label-container {
      height: 24px;
   }

   body .map-controls .legend-item .legend-item-label {
      font-size: 20px;
      line-height: 24px;
   }

   body .map-controls .legend-component .role-title { line-height: 40px; }

   /* ====================== *
    * ## Section Carousel ##
    * ====================== */

   .page .section-carousel-container {
      --sc-gap: 40px;
   }


   /* ===================== *
    * ## Time Controller ##
    * ===================== */

   body .casper.tc-closed #time_controls,
   body .casper.tc-closed #time_controls #play_controller {
      height: 90px;
   }
}