@font-face {
  font-family: Grape Nuts;
  src: url(GrapeNuts-Regular.ttf);
}

:root {
  --main_colour: #5d5d5d;
  --second_colour: #d7d7d7;
  --third_colour: #f9f9f9;
  --accent_colour: #673ab7;
  --font_size: 10pt;
  --font_family: Verdana, Arial, Helvetica;
}

@page {
  size: A4;
  margin: 15mm;
}

@media print {
  .item_detail_div {
    width: auto !important;
    height: auto !important;
  }

  .item_detail {
    --font_family: Arial;
    width: 180mm !important;
    /* -webkit-print-color-adjust: exact !important; */
    /* color-adjust: exact !important; */
    print-color-adjust: exact !important;
    forced-color-adjust: exact !important;
    color: #000000;
  }

  .item_detail tr:first-of-type th:first-child {
    border-top-left-radius: 0.5rem;
  }

  .item_detail tr:first-of-type th:last-child {
    border-top-right-radius: 0.5rem;
  }

  .item_detail tr:last-of-type td:first-child {
    border-bottom-left-radius: 0.5rem;
  }

  .item_detail tr:last-of-type td:last-child {
    border-bottom-right-radius: 0.5rem;
  }

  .items_list tr {
    page-break-inside: avoid;
  }

  .hide_body {
    display: none;
  }

  .print_logo {
    display: revert !important;
  }
}

@media only screen {
  .print_div {
    display: none;
  }
}

table {
  font-family: var(--font_family);
  font-size: var(--font_size);
}

td,
th {
  padding: 1em;
}

input[type="text"],
input[type="password"] {
  border-width: 1px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--main_colour);
}

select {
  height: calc(2rem + 2px);
  padding-top: calc(0.5rem - 1px) !important;
}

td ul {
  padding-inline-start: 1em;
  margin-block-end: 0;
  list-style: disc;
}

td li {
  padding: 0.4em 0;
}

td li:first-child {
  padding-top: initial;
}

td li:last-child {
  padding-bottom: initial;
}

.top-controls {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 2;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
}

.controls > * {
  margin: 0 0.5em;
}

.header-item {
  display: flex;
  justify-content: center;
  text-align: center;
}

.drawer-index {
  font-family: var(--font_family);
  font-size: var(--font_size);
  color: var(--main_colour);
  border-color: var(--main_colour);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  transition: background-color 0.5s;
}

.drawer-index.disabled {
  filter: opacity(0.3);
  pointer-events: none;
  cursor: auto;
}

@media (hover: hover) and (pointer: fine) {
  .drawer-index:hover {
    background-color: var(--second_colour);
  }
}

.pagination {
  display: inline-flex;
  list-style: none;
  padding-inline-start: unset;
}

.pagination.disabled {
  filter: opacity(0.3);
}

.page-item .page-link {
  transition: background-color 0.5s;
}

@media (hover: hover) and (pointer: fine) {
  .page-item .page-link:hover {
    background-color: var(--second_colour);
  }
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  background-color: #fff;
  border: 1px solid var(--main_colour);
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.page-item.disabled .page-link {
  pointer-events: none;
  cursor: auto;
}

.page-item.active .page-link {
  background-color: var(--main_colour);
  color: #fff;
  pointer-events: none;
  cursor: auto;
}

.item_detail_div {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: 70vh;
}

.item_detail {
  background-color: fff;
  width: 100%;
  border-spacing: 0;
  height: -webkit-fill-available;
}

.items_list {
  width: 1024px;
  margin: 1em auto;
  border-spacing: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--main_colour);
}

.items_list thead tr,
.item_detail thead tr {
  background-color: var(--second_colour);
}

.items_list tbody tr:nth-child(even),
.item_detail tbody tr:nth-child(even) {
  background-color: var(--third_colour);
}

.items_list tr:first-of-type th:first-child {
  border-top-left-radius: 0.5rem;
}

.items_list tr:first-of-type th:last-child {
  border-top-right-radius: 0.5rem;
}

.items_list tr:last-of-type td:first-child {
  border-bottom-left-radius: 0.5rem;
}

.items_list tr:last-of-type td:last-child {
  border-bottom-right-radius: 0.5rem;
}

.back-link {
  display: block;
  padding: 0.5rem 0.75rem;
  background-color: #fff;
  border: 1px solid var(--main_colour);
  border-radius: 0.5rem;
  transition: background-color 0.5s;
  margin: 0 0.5em;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .back-link:hover {
    background-color: var(--second_colour);
  }
}

.std-link {
  transition: text-shadow 0.5s;
}

.std-link-bold {
  font-weight: bold;
  transition: text-shadow 0.5s;
}

.external-link-img {
  filter: invert(1) brightness(0.3);
  width: 20px;
  transition: filter 0.5s;
}

@media (hover: hover) and (pointer: fine) {
  .std-link:hover,
  .std-link-bold:hover {
    text-shadow: 0 0 10px var(--second_colour), 0 0 10px var(--second_colour), 0 0 10px var(--second_colour), 0 0 10px var(--second_colour), 0 0 10px var(--second_colour);
  }

  .external-link-img:hover {
    filter: invert(1) brightness(0.3) drop-shadow(0 0 5px #323232);
  }
}

.search_filter {
  width: 900px;
  margin: 0 auto;
  display: flex;
  transition: all 1s ease-out;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

body > .search_filter {
  width: 600px;
}

.search_filter.active {
  opacity: 1;
  max-height: 300px;
  margin: 1em auto;
}

.search_opt_lst {
  height: 175px !important;
}

.options_list {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  border: 1px solid var(--main_colour);
  border-radius: 0.5rem;
  height: 225px;
  overflow-y: auto;
  background-clip: padding-box;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  margin: 1em 0;
}

.options_list .option_label {
  display: flex;
  align-items: center;
}

.options_list .option_label::after {
  content: "";
  flex-grow: 1;
  order: 0;
}

.options_list_input_div {
  display: flex;
  justify-content: space-between;
  padding: 0.25em 0;
}

.options_list_input_div .drawer-index {
  flex-grow: 1;
  width: 0;
}

.options_list_input_div .back-link {
  margin-left: calc(var(--font_size));
}

.movers {
  margin-left: 1em;
  order: 1;
  float: unset;
}

.option_label {
  display: block;
  padding: 0.25em 0;
}

.option_check {
  float: left;
  vertical-align: middle;
  margin-right: 1em;
}

.button_std {
  font-family: var(--font_family);
  font-size: var(--font_size);
  color: #fff;
  padding: 0.5rem 0.75rem;
  background-color: #000;
  border: 1px solid #fff;
  border-radius: 0.5rem;
  transition: filter 0.5s;
  margin: 1em 0.5em;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .button_std:hover {
    filter: brightness(120%);
  }
}

.msg_div {
  width: 50vw;
  text-align: center;
  color: #fff;
  overflow: hidden;
  border-radius: 0.5rem;
}

.print_logo {
  display: none;
  height: 1.5rem;
  position: absolute;
  right: 1em;
  top: calc(1em - 0.25rem);
}

.long_content_wrap {
  overflow-wrap: anywhere;
}

@keyframes blink {
  50% {
    background-color: var(--second_colour);
  }
}
@keyframes background-modal {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

@media only screen and (max-device-width: 599px), only screen and (max-device-height: 599px) and (orientation: landscape) {
  :root {
    --font_size: 10pt;
  }

  body {
    width: auto;
  }

  td,
  th {
    padding: 0.5em;
  }

  .controls {
    flex-wrap: wrap;
  }

  .controls > * {
    margin: 0.5em;
  }

  .items_list {
    width: calc(100vw - 2em);
    margin: 1em 1em;
  }

  .search_filter {
    width: auto;
  }

  body > .search_filter {
    width: auto;
  }

  .options_list .option_label {
    padding: 0.5em 0;
  }

  .options_list_input_div .back-link {
    font-size: 0;
  }

  .options_list_input_div .back-link::after {
    font-size: var(--font_size);
    content: "+";
  }

  div[id="objects_list"] .option_label,
  div[id="units_list"] .option_label {
    justify-content: space-between;
  }

  .options_list a[name="group_hrefs"],
  .options_list a[name="object_hrefs"],
  .options_list a[name="state_hrefs"],
  .options_list a[name="county_hrefs"] {
    font-size: 1.5em;
    margin-bottom: 0.1em;
  }

  .section > .option_label {
    min-height: 2.5em;
  }

  .option_check {
    min-height: 1.5em;
    min-width: 1.5em;
  }

  .msg_div {
    width: calc(100% - 2em);
  }
}

@media only screen and (max-device-width: 480px) {
  .page-item:not(.active):not(:first-child):not(:last-child) {
    display: none;
  }

  .items_list th:nth-child(4),
  .items_list td:nth-child(4) {
    display: none;
  }

  .items_list th:nth-child(6) {
    font-size: 0 !important;
  }

  .items_list th:nth-child(6)::after {
    font-size: 0 !important;
    content: "" !important;
  }
}

@media only screen and (max-device-width: 1024px) {
  .items_list th:nth-child(1) {
    font-size: 0;
  }

  .items_list th:nth-child(1)::after {
    font-size: var(--font_size);
    content: "Sygn.";
    padding: 0.5em;
    display: inline-block;
  }

  .items_list th:nth-child(4) {
    font-size: 0;
  }

  .items_list th:nth-child(4)::after {
    font-size: var(--font_size);
    content: "Miejsce powst.";
    padding: 0.5em;
    display: inline-block;
  }

  .items_list th:nth-child(5) {
    font-size: 0;
  }

  .items_list th:nth-child(5)::after {
    font-size: var(--font_size);
    content: "Okr. powst.";
    padding: 0.5em;
    display: inline-block;
  }

  .items_list th:nth-child(6) {
    font-size: 0;
  }

  .items_list th:nth-child(6)::after {
    font-size: var(--font_size);
    content: "Zasób cyfr.";
    padding: 0.5em;
    display: inline-block;
  }
}

@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) {
  .search_filter {
    width: 70% !important;
  }

  body > .search_filter {
    width: 55% !important;
  }

  .items_list {
    width: 70% !important;
    margin: 1em auto !important;
  }
  .msg_div {
    width: 70% !important;
  }
}
