/*
Web made by Ondis

          ______
     ____|_[]__|_
    |  _        _|
    '-(O)======(o)'
*/

html {
  scrollbar-gutter: stable;
}
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: page-out 0.18s ease both;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: page-in 0.26s ease both;
  mix-blend-mode: normal;
}
::view-transition-group(root) {
  animation-duration: 0.26s;
}
#navbar {
  view-transition-name: public-navbar;
}
.sidebar {
  view-transition-name: admin-sidebar;
}
.topbar {
  view-transition-name: admin-topbar;
}
::view-transition-group(public-navbar),
::view-transition-group(admin-sidebar),
::view-transition-group(admin-topbar) {
  animation-duration: 0.26s;
}
::view-transition-old(public-navbar),
::view-transition-old(admin-sidebar),
::view-transition-old(admin-topbar),
::view-transition-new(public-navbar),
::view-transition-new(admin-sidebar),
::view-transition-new(admin-topbar) {
  animation: none;
  mix-blend-mode: normal;
}
@keyframes page-out {
  to {
    opacity: 0;
  }
}
@keyframes page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.skeleton-block {
  display: block;
  border-radius: 9px;
  background: linear-gradient(100deg, #d8d4c84d 15%, #fff9e6b3 42%, #d8d4c84d 65%);
  background-size: 250% 100%;
  animation: skeleton-shine 1.6s ease-in-out infinite;
}
.skeleton-card {
  background: #ffffffa6;
  border: 1px solid #e6e0d2;
  border-radius: 20px;
  overflow: hidden;
  min-width: 0;
  pointer-events: none;
}
.skeleton-media {
  height: 170px;
  border-radius: 0;
}
.skeleton-body {
  display: grid;
  gap: 14px;
  padding: 23px;
}
.skeleton-line {
  height: 14px;
}
.skeleton-heading {
  height: 24px;
  width: 72%;
}
.skeleton-short {
  width: 46%;
}
.skeleton-button {
  height: 42px;
  width: 62%;
  margin-top: 8px;
  border-radius: 12px;
}
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
}
.skeleton-grid > .skeleton-card {
  margin: 0 !important;
}
.cms-pending {
  min-height: 340px;
}
.cms-pending > .skeleton-grid {
  grid-column: 1/-1;
}
.content-load-error {
  grid-column: 1/-1;
  min-height: 280px;
  padding: 36px 24px;
  text-align: center;
  display: grid;
  place-content: center;
  gap: 16px;
}
.content-load-error p {
  color: #655c4e;
  font-size: 15px;
}
.content-load-error button {
  justify-self: center;
}
.navigation-skeleton {
  position: fixed;
  inset: 72px 0 0;
  z-index: 80;
  background: rgba(249, 247, 239, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 36px max(6vw, 20px);
  overflow: auto;
  animation: loader-in 0.18s ease both;
  pointer-events: none;
}
.navigation-skeleton[hidden] {
  display: none !important;
}
.navigation-skeleton-inner {
  max-width: 1400px;
  margin: auto;
}
.navigation-skeleton-heading {
  height: 32px;
  max-width: 330px;
  margin-bottom: 18px;
}
.navigation-skeleton-caption {
  height: 15px;
  max-width: 460px;
  margin-bottom: 30px;
}
.navigation-status {
  font:
    14px Nunito,
    Arial,
    sans-serif;
  color: #675d47;
  margin-bottom: 22px;
}
.console-page .navigation-skeleton {
  left: 260px;
  top: 76px;
  background: rgba(247, 244, 237, 0.95);
  padding: 36px;
}
.auth-page .navigation-skeleton {
  top: 80px;
}
.navigation-pending::after {
  content: "";
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, #f8c653, transparent);
  background-size: 200% 100%;
  animation: skeleton-shine 1s linear infinite;
  pointer-events: none;
}
.hero-loading-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100%;
  background-color: #d3b66a;
  color: #463615;
}
.hero-loading-skeleton[hidden] {
  display: none;
}
@keyframes skeleton-shine {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@keyframes loader-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .console-page .content-row,
  .console-page .list-row,
  .quick-link,
  .stat-icon {
    transition:
      background 0.22s ease,
      box-shadow 0.22s ease,
      transform 0.22s ease;
  }
  .console-page .button:active {
    transform: translateY(1px) scale(0.985);
  }
  .console-page .quick-link:hover > span {
    transform: translateX(3px);
  }
  .quick-link > span {
    transition: transform 0.22s ease;
  }
  .console-page .list-row:hover {
    background: #ffffff55;
  }
  .cms-news,
  .cms-crop,
  .cms-machine {
    transition:
      box-shadow 0.25s ease,
      translate 0.25s ease;
  }
  .cms-news:hover,
  .cms-crop:hover,
  .cms-machine:hover {
    box-shadow: 0 12px 30px #70500b16;
    translate: 0 -3px;
  }
  .console-page .panel-head,
  .console-page .activity-row {
    animation: page-in 0.3s ease both;
  }
}
@media (max-width: 1200px) {
  .console-page .navigation-skeleton {
    left: 225px;
  }
}
@media (max-width: 900px) {
  .console-page .navigation-skeleton {
    left: 0;
    top: 70px;
  }
}
@media (max-width: 768px) {
  .skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .navigation-skeleton {
    padding: 24px 20px;
  }
  .skeleton-grid > .skeleton-card:nth-child(3) {
    display: none;
  }
}
@media (max-width: 520px) {
  .skeleton-grid {
    grid-template-columns: 1fr;
  }
  .skeleton-grid > .skeleton-card:nth-child(n + 2) {
    display: none;
  }
  .navigation-skeleton,
  .console-page .navigation-skeleton {
    padding: 24px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .skeleton-block,
  .navigation-pending::after,
  .navigation-skeleton {
    animation: none !important;
  }
  .cms-news:hover,
  .cms-crop:hover,
  .cms-machine:hover {
    translate: none;
  }
}
@font-face {
  font-family: KrejcarNunito;
  src: url("/fonts/nunito-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}
@font-face {
  font-family: KrejcarNunito;
  src: url("/fonts/nunito-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: KrejcarNunito;
  src: url("/fonts/nunito-800.ttf") format("truetype");
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
}
body,
button,
input,
textarea,
select {
  font-family: KrejcarNunito, Nunito, Arial, sans-serif;
}
