/*
 * Browser-friendly compatibility layer for the legacy intranet UI.
 * Keeps the existing GreenPark color system while making old fixed-width
 * table layouts behave better on current desktop and mobile browsers.
 */

:root {
  --gp-green: #003e00;
  --gp-green-bright: #008f00;
  --gp-green-deep: #007e00;
  --gp-sky: #178ab5;
  --gp-orange: #ff8b0c;
  --gp-red: #d9522c;
  --gp-purple: #a200a9;
  --gp-text: #1f2a1f;
  --gp-muted: #5b665b;
  --gp-surface: #ffffff;
  --gp-soft: #ececef;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 0;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0;
  margin: 0;
  background-color: var(--gp-green);
  color: var(--gp-text);
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  line-height: 1.45;
}

img,
video,
iframe,
object,
embed {
  max-width: 100%;
}

img,
video {
  height: auto;
}

a {
  touch-action: manipulation;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

button,
input[type="button"],
input[type="submit"],
.ubutton {
  cursor: pointer;
}

.wrapper,
.demo-wrapper {
  width: 100%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.demo-wrapper {
  max-width: none;
  padding-right: clamp(8px, 1vw, 20px);
  padding-left: clamp(8px, 1vw, 20px);
}

.dashboard {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.tiles {
  display: block;
  width: 100%;
  max-width: none;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
}

@media screen and (min-width: 64em) {
  .dashboard {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .col1,
  .col2,
  .col3 {
    float: left !important;
    width: 32.666% !important;
    margin-right: 1% !important;
  }

  .col1 {
    margin-left: 0 !important;
  }

  .col3 {
    margin-right: 0 !important;
  }

  .col4 {
    float: left !important;
    width: 66.333% !important;
    margin-right: 0 !important;
  }

  .tiles::after {
    display: block;
    clear: both;
    content: "";
  }
}

.header {
  min-height: 76px;
  height: auto;
}

.content,
.content1 {
  max-width: 100%;
}

.content {
  position: static;
  width: min(1240px, 100%);
  margin: 0 auto;
}

.admin_content_area {
  min-height: 0;
  height: auto;
  overflow-wrap: anywhere;
}

table {
  max-width: 100%;
}

td,
th {
  overflow-wrap: anywhere;
}

.tile_box,
.knowyourmanagers_tile_box {
  min-height: 64px;
}

.tile_name,
.knowyourmanagers_tile_name {
  width: 100%;
  line-height: 1.25;
}

.color1,
.color2,
.color3,
.color4,
.color5,
.color6,
.color7,
.color8,
.color9,
.color10,
.color11,
.color12,
.color13,
.color14,
.color19 {
  transition: filter 160ms ease, transform 160ms ease;
}

.color1:hover,
.color2:hover,
.color3:hover,
.color4:hover,
.color5:hover,
.color6:hover,
.color7:hover,
.color8:hover,
.color9:hover,
.color10:hover,
.color11:hover,
.color12:hover,
.color13:hover,
.color14:hover,
.color19:hover {
  filter: brightness(1.06);
}

#scrolldiv {
  max-width: 100vw;
  overflow: auto;
}

#container {
  max-width: 100%;
  gap: 8px;
}

.video_img {
  max-width: 100%;
}

@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  .wrapper,
  .demo-wrapper,
  .content1,
  .content1 > div,
  .content1 table,
  .content1 tbody,
  .content1 tr,
  .content1 td,
  .admin_content_area table,
  .admin_content_area tbody,
  .admin_content_area tr,
  .admin_content_area td {
    width: 100% !important;
  }

  .content1 table,
  .admin_content_area table {
    table-layout: auto;
  }

  .content1 > div,
  .content1 td,
  .admin_content_area td {
    height: auto !important;
  }

  .logo_bar,
  .logo_small,
  .content1 [style*="float:left"],
  .content1 [style*="float: left"],
  .content1 [style*="float:right"],
  .content1 [style*="float: right"],
  .admin_content_area [style*="float:left"],
  .admin_content_area [style*="float: left"],
  .admin_content_area [style*="float:right"],
  .admin_content_area [style*="float: right"] {
    float: none !important;
  }

  .content1 [style*="width:1240px"],
  .content1 [style*="width: 1240px"],
  table[width="1240"] {
    width: 100% !important;
  }

  .tile_box {
    min-height: 108px;
  }

  .tiles {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tiles > div,
  .col1,
  .col2,
  .col3,
  .col4 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  .tile,
  .tile1,
  .tile-small,
  .tile-dsmall,
  .tile-tsmall,
  .tile-tsmall1,
  .tile-big,
  .tile-2xbig {
    float: none !important;
    display: block !important;
    width: 100% !important;
    min-height: 96px;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 8px !important;
  }

  .tile div,
  .tile1 div {
    position: relative !important;
    inset: auto !important;
  }

  .tile p,
  .tile1 p {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .tile img,
  .tile1 img {
    width: 100% !important;
    height: auto !important;
  }

  #container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
  }

  #container > div {
    width: calc(50% - 8px) !important;
    height: auto !important;
  }

  #scrolldiv [style*="width:40%"],
  #scrolldiv [style*="width: 40%"] {
    width: 100% !important;
    float: none !important;
  }

  #scrolldiv [style*="height:95%"],
  #scrolldiv [style*="height: 95%"],
  #scrolldiv [style*="height:100%"],
  #scrolldiv [style*="height: 100%"] {
    height: auto !important;
  }
}

@media (max-width: 640px) {
  .wrapper,
  .demo-wrapper {
    padding-right: 8px;
    padding-left: 8px;
  }

  h1,
  h2,
  .page-title {
    line-height: 1.2;
  }

  h2,
  .page-title {
    font-size: 20px;
  }

  .admin_content_area {
    padding: 8px;
    font-size: 13px;
  }

  .admin_content_area .adm_inptext,
  .admin_content_area .adm_select {
    width: 100%;
  }

  #container > div {
    width: 100% !important;
  }

  #scrolldiv {
    margin: 0 !important;
  }

  #scrolldiv > div {
    width: 100% !important;
    height: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.gp-board-modal-open {
  overflow: hidden !important;
}

.gp-board-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vw, 26px);
  background: rgba(0, 0, 0, 0.72);
}

.gp-board-modal.is-open {
  display: flex;
}

.gp-board-modal__dialog {
  position: relative;
  width: min(98vw, 1900px);
  height: min(94vh, 1180px);
  background: #ffffff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
}

.gp-board-modal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}

.gp-board-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.gp-board-modal__close:hover,
.gp-board-modal__close:focus {
  background: #008f00;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .gp-board-modal {
    padding: 0;
  }

  .gp-board-modal__dialog {
    width: 100vw;
    height: 100vh;
  }
}