:root {
  /* Color */

  --clr-yellow: hsl(45, 100%, 51%);
  --clr-dark-yellow: hsl(45, 94%, 41%);
  
  --clr-red: hsl(354, 70%, 54%);
  --clr-dark-red: hsl(354, 63%, 43%);

  --clr-primary-400: hsl(202, 100%, 61%);
  --clr-primary-500: hsl(202, 64%, 49%);
  --clr-primary-600: hsl(202, 64%, 39%);

  --clr-accent-400: hsl(102, 62%, 60%);
  --clr-accent-400-dark: hsl(102, 52%, 50%);
  --clr-accent-500: hsl(102, 62%, 50%);
  
  --clr-neutral-100: hsl(0, 0%, 90%);
  --clr-neutral-300: hsl(0, 0%, 50%);
  --clr-neutral-350: hsl(0, 0%, 30%);
  --clr-neutral-400: hsl(0, 0%, 20%);
  --clr-neutral-450: hsl(0, 0%, 17%);
  --clr-neutral-475: hsl(0, 0%, 15%);
  --clr-neutral-500: hsl(0, 0%, 10%);

  /* Font Family */
  --ff-primary: 'Roboto', sans-serif;

  --ff-body: var(--ff-primary);
  --ff-heading: var(--ff-primary);

  /* Font Weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Font Size */
  --fs-100: .5rem;
  --fs-200: .8rem;
  --fs-300: .9rem;
  --fs-400: 1rem;
  --fs-450: 1.1rem;
  --fs-500: 1.25rem;
  --fs-600: 1.5625rem;
  --fs-650: 1.7rem;
  --fs-700: 2.5rem;

  --fs-body: var(--fs-400)
  --fs-primary-heading: var(--fs-700)
  --fs-nav: var(--fs-400)
  --fs-button: var(--fs-400)

  /* Sizes */
  --size-200: 0.5rem;
  --size-300: 0.75rem;
  --size-400: 1rem;
  --size-500: 1.5rem;
  --size-600: 2rem;
  --size-700: 3rem;
  --size-800: 4rem;
  --size-900: 5rem;

}

/* --------- Reset ---------- */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100vh;
  min-height: 100dvh;
  /* min-height: -webkit-fill-available; */
  overscroll-behavior-y: none;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */

  /* Enable user-select on non-touch devices */
  @media (hover: hover) {
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
  }
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------- General Styling ----------- */

body {
  position: relative;
  font-size: var(--fs-body);
  font-family: var(--ff-body);
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-400);
}

p {
  max-width: 50ch;
}

.selectable td:not(.non-selectable) {
  cursor: pointer;
}

.selectable {
  cursor: pointer;
}

.open-modal {
  cursor: pointer;
}

/* ------- Form Styling ----------- */
input {
  border: none;
  border-bottom: 2px solid var(--clr-neutral-100);
  background-color: transparent;
  color: var(--clr-neutral-100);
  transition: border .15s;
  border-radius: 0 !important;
  box-shadow: none;
  outline: none;
}

input:focus-visible {
  border: none;
  border-bottom: 2px solid var(--clr-primary-400);
  outline: none;
}

input:disabled {
  border: none;
}

input.error {
  border-bottom-color: var(--clr-red);
  color: var(--clr-neutral-100);
}

label {
  font-size: var(--fs-300);
}

input[type="checkbox"] {
  width: .9rem;
  height: .9rem;
}

/* ------- APP ------- */
.app-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  min-height: 100%;
  width: 100%;
  background-color: var(--clr-neutral-500);
  padding-top: 62px;
  padding-right: .5rem;
  padding-bottom: .5rem;
  padding-left: 9rem;
}

/* -------- App Header ------ */

.app-header {
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: space-between;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--clr-neutral-400);
  z-index: 1000;
  box-shadow: 0 0 5px 0 rgb(0, 0, 0) ;
  padding: .2rem .5rem;
}

.app-header .profile-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: .4rem .4rem;
  cursor: pointer;
  transition: background-color .15s;
}

.app-header .profile-container:hover {
  background-color: var(--clr-neutral-350);
}

.app-header .profile-container i {
  font-size: 1.75rem !important;
}

/* Box shadow */
.box-shadow {
  box-shadow: 0 0 5px 0 rgb(0, 0, 0);
}

/* Text shadow */
.text-shadow {
  text-shadow: 
    -1px -1px 5px rgba(0, 0, 0, 0.5),
    1px -1px 5px rgba(0, 0, 0, 0.5),
    -1px 1px 5px rgba(0, 0, 0, 0.5),
    1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* List */
.list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.list li {
  padding: .3rem .5rem;
  border-radius: 4px;
  transition: background-color .15s;
  cursor: pointer;
}

.list li.active {
  color: var(--clr-primary-400)
}

.list li:hover {
  background-color: var(--clr-neutral-350);
}

.list li.section {
  color: var(--clr-neutral-300);
  display: flex;
  align-items: center;
  cursor: default;
  background-color: var(--clr-neutral-400);
}

.list .section-line {
  flex: 1;
  border: 1px solid var(--clr-neutral-300);
  margin-left: 10px;
}

.list li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--clr-neutral-100);
}

.list li.disabled {
  color: var(--clr-neutral-300);
  cursor: not-allowed;
}

/* ------- App Sidebar -------- */

.app-sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10rem;
  background-color: var(--clr-neutral-400);
  z-index: 999;
  margin-top: 54px;
  padding: .5rem .5rem;
  box-shadow: 0 0 5px 0 rgb(0, 0, 0);
  transition: width .15s;
}

.app-sidebar.close {
  width: 2.5rem;
}

.app-sidebar.close span:not(.notify-dot) {
  display: none;
}

.app-sidebar.close hr {
  margin: 0;
}

.app-sidebar.close li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-sidebar {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .5rem;
  color: var(--clr-neutral-300);
}

.toggle-sidebar i {
  color: var(--clr-neutral-100);
}

.app-sidebar .list.bottom {
  margin-top: auto;
}

.move-with-sidebar {
  padding-left: 10.5rem;
  transition: padding .15s;
}

.move-with-sidebar.sidebar-closed {
  padding-left: 3rem;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 48.6px;
  height: 27.54px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 21.06px; /* Decreased height by 10% */
  width: 21.06px; /* Decreased width by 10% */
  left: 3.24px; /* Decreased left position by 10% */
  bottom: 3.24px; /* Decreased bottom position by 10% */
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(21.06px); /* Decreased translation by 10% */
  -ms-transform: translateX(21.06px); /* Decreased translation by 10% */
  transform: translateX(21.06px); /* Decreased translation by 10% */
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Text Color */
.text-red {
  color: var(--clr-red);
}

.text-green {
  color: var(--clr-accent-400);
}

.text-blue {
  color: var(--clr-primary-400);
}

/* ------- action menu -------- */
.toggle-action-menu.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .3rem .74rem;
}

.toggle-action-menu.icon-container:hover {
  background-color: var(--clr-neutral-450);
}

.action-menu {
  z-index: 99;
  position: absolute;
  top: 2.5rem;
  right: 0;
  background-color: var(--clr-neutral-400);
  border-radius: 4px;
  box-shadow: 0 0 5px 0 rgb(0, 0, 0);
  padding: .5rem;
  display: flex;
  flex-direction: column;
}

/* ------- Tabs -------- */
.tabs-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-450);
  margin-bottom: 1.5rem;
}
ul.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1rem;
}

li.tab {
  position: relative;
  cursor: pointer;
  padding: .5rem 1rem;
  transition: border-bottom .15s;
  transition: color .15s;
  transition: background-color .15s;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* only apply bottom border radius if active is not in the class list */
li.tab:not(.active) {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

li.tab.active {
  color: var(--clr-primary-400);
  border-bottom: 2px solid var(--clr-primary-400);
}

li.tab:hover {
  background-color: var(--clr-neutral-450);
}

.notify-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  background-color: var(--clr-red);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
}

.notify-dot.sidebar {
  top: -4px;
  right: -8px;
  font-size: 8px;
}

.notify-dot.small {
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
}

/* ------- Map -------- */
#map {
  position: absolute;
  top: 54px;
  left: 160px;
  right: 0;
  bottom: 0;
  transition: left .15s;
}

#map.sidebar-closed {
  left: 40px;
}

#map.info-right {
  right: 8.5rem;
}

#map.info-top {
  top: 8rem;
  right: 0;
}

#map .label {
  display: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  font-weight: bold;
  color: black;
  text-shadow: 
    -1px -1px 2px white,
    1px -1px 2px white,
    -1px 1px 2px white,
    1px 1px 2px white;
  width: max-content !important;
  max-width: 50px !important;
  height: max-content !important;
}

#map .label.field {
  color: black;
}

#map .label.pipeline {
  color: black;
}

#map .label.disabled {
  opacity: 0.3;
}

.leaflet-pane {
  pointer-events: none; /* Prevent panes from capturing clicks unless needed */
}
.leaflet-marker-pane .label.level-1 { /* Pivot labels */
  z-index: 400;
}
.leaflet-marker-pane .label.level-2 { /* Well labels */
  z-index: 500;
}
.leaflet-marker-pane .label.level-3 { /* Pipeline labels */
  z-index: 400;
}


#map-info {
  position: absolute;
  top: 54px;
  right: 0;
  bottom: 0;
  width: 8.5rem;
  background-color: var(--clr-neutral-400);
  padding: .5rem;
  box-shadow: 0 0 5px 0 rgb(0, 0, 0);
  z-index: 999;
  transition: left .15s;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

#map-info section {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

#map-info ul {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
  overflow-y: auto;
}

#map-info.top {
  left: 160px;
  bottom: auto;
  width: auto;
}

#map-info .name {
  background-color: var(--clr-neutral-400);
  padding: .2rem;
  line-height: 1;
  border-bottom-right-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
}

#map-info.top .name {
  padding: .5rem;
  padding-top: 0;
  padding-bottom: .3rem;
  position: absolute;
  bottom: -22px;
  left: 0;
  box-shadow: 
    5px 0 5px -5px rgb(0, 0, 0),
    -5px 0 5px -5px rgb(0, 0, 0),
    0 5px 5px -5px rgb(0, 0, 0);
}

#map-info.top.sidebar-closed {
  left: 40px;
}

#map-info.top ul {
  flex-direction: row;
  overflow-x: auto;
}

#map-info.top section {
  flex-direction: row;
}

#map-info li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: .5rem;
  padding-bottom: .4rem;
  border-radius: 4px;
  background-color: var(--clr-neutral-350);
  font-size: var(--fs-500);
  line-height: 1.3;
  white-space: nowrap;
}

#map-info li h2 {
  font-size: var(--fs-300);
}

#map-action-menu {
  position: absolute;
  right: 10px;
  bottom: 25px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

#map-action-menu .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .4rem;
  background-color: var(--clr-neutral-400);
  transition: background-color .15s, width .15s, color .15s;
}

#map-action-menu .icon-container.active {
  color: var(--clr-primary-400);
}

#map-action-menu .icon-container:hover {
  background-color: var(--clr-neutral-350);
}

@keyframes pulse-blue {
  0% {
    color: hsl(202, 100%, 50%);
  }
  50% {
    color: hsl(202, 100%, 35%);
  }
  100% {
    color: hsl(202, 100%, 50%);
  }
}

@keyframes pulse-green {
  0% {
    color: hsl(102, 62%, 50%);
  }
  50% {
    color: hsl(0, 0%, 0%);
  }
  100% {
    color: hsl(102, 62%, 50%);
  }
}

#track-location.loading {
  animation: pulse-blue 1s infinite;
}

#track-location.active {
  color: hsl(202, 100%, 61%);
}

/* ------- Loader -------- */
.loader {
  width: 1rem;
  padding: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--clr-neutral-500);
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

.loader.big {
  width: 2rem;
  padding: 6px;
}

.loader.bg-white {
  background: var(--clr-neutral-100);
}

/* -- App Table ---- */
tr {
  background-color: var(--clr-neutral-400);
}

table.dataTable {
  width: 100%;
}

table.dataTable thead tr {
  background-color: var(--clr-neutral-450);
}

table.dataTable td {
  text-align: left !important;
}

div.dt-container div.dt-layout-row {
  margin: 0;
}

.dt-column-title {
  display: flex;
  align-items: center;
  gap: .5rem;
}


/* Search */
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
  justify-content: flex-start;
  margin-left: 0;
}

div.dt-container .dt-search input {
 border-radius: 4px !important;
 margin-left: 0;
}



table.dataTable thead tr:first-child th:first-child {
  border-top-left-radius: 4px;
}

table.dataTable thead tr:first-child th:last-child {
  border-top-right-radius: 4px;
}

table.dataTable tbody tr {
  background-color: var(--clr-neutral-400);
  transition: background-color .15s;
}

table.dataTable tbody tr:hover {
  background-color: var(--clr-neutral-350);
}

.dt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dt-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.dt-settings {
  cursor: pointer;
}

.dt-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.text-width-100 {
  min-width: 15ch;
}
.text-width-200 {
  min-width: 20ch;
}
.text-width-300 {
  min-width: 25ch;
}

.table-header {
  align-items: flex-end;
}

.table-container {
  max-width: 600px;
}

@media screen and (max-width: 600px) {
  .table-container {
    max-width: 85vw
  }
  
}

/* ----- Our Services ------ */

#our-services ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  list-style: none;

}
#our-services i {
  font-size: 2em;
  color: var(--clr-primary-400);

}

#our-services li {
  text-align: center;
  display: flex;
  flex-direction: column;
  outline: red;
  padding: 0rem;
  margin: 0rem;
  min-width: 25ch;
  max-width: 70ch;
}

/* ---- App Images ---- */

#gallery {
  border: 2px solid var(--clr-neutral-100);
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
}

.img-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

ul.img-gallery {
  list-style: none;
}

.img-gallery > li {
  flex: auto;
  height: 23rem;
}

.img-gallery li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-radius: 4px;
}

.file-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  width: 170px;
  text-align: center;
}

.thumbnail {
  display: inline-block;
  margin: 10px;
  width: 160px;
  height: 90px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
}

/* --- App Modal ---- */
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.modal-wrapper.bg-dark {
  background-color: rgba(0, 0, 0, 0.623);
}

.modal-container {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.623);
  border-radius: 4px;
  margin: .5rem .5rem;
  height: fit-content;
  max-height: 95svh;
  max-width: 95svw;
  overflow: auto;
}

.modal {
  position: relative;
  background-color: var(--clr-neutral-400);
  border-radius: 4px;
  padding: 1rem;
}

.last-edited-text .modal {
  padding-bottom: 5px;
}

.modal .close-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
}

.close-btn {
  cursor: pointer;
  color: var(--clr-neutral-100);
  transition: color .15s;
}

.close-btn:hover {
  color: var(--clr-red);
}

/* Badge */
.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .2rem .5rem;
  border-radius: 4px;
  font-size: var(--fs-300);
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-300);
}

/* ---- Last edited ------- */
.last-edited {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-300);
  color: var(--clr-neutral-300);
  margin-top: 5px;
  gap: .3rem;
}

/* --------- Image Viewer ---------- */
.img-container {
  position: relative;
  margin: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: 4px;
}

.img-container .icon-container {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 1010;
}

.img-container .loader {
  position: absolute;
  top: 50%;
  left: 45%;
  z-index: 900;
}

.img-container img {
  width: 100%;
  height: 100%;
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  z-index: 1000;
}

/* PDF Viewer */
.pdf-viewer-modal .viewer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;

}

/* button */

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: .5rem;
  cursor: pointer;
  text-decoration: none;
  border: none;
  border-radius: .25rem;
  padding: .625em 1em;
  font-weight: var(--fw-medium);
  font-size: var(--fs-400);
  line-height: 1;
  color: var(--clr-neutral-500);
  background-color: var(--clr-primary-400);
  transition: background-color 0.15s;
}

.btn-sm {
  padding: .4em .5em;
  font-weight: var(--fw-medium);
}

.drop-down {
  padding: .46em;
}

.button:hover {
  background-color: var(--clr-primary-500);
  
}

.button:active {
  background-color: var(--clr-primary-600);
 
}

.btn-style-outline {
  border: 2px solid var(--clr-primary-400);
  background-color: transparent;
  color: var(--clr-neutral-100);
  padding: .5em 1em;
  transition: background-color 0.15s;
}

.btn-style-outline.disabled {
  border: 2px solid var(--clr-neutral-300);
  color: var(--clr-neutral-300);
  cursor: not-allowed;
}

.btn-style-outline:hover {
  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-500);
}

.btn-style-outline.disabled:hover {
  background-color: var(--clr-neutral-300);
  color: var(--clr-neutral-100);
  cursor: not-allowed;
}

.btn-grid-end {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: end;
}

.btn-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: var(--fs-400);
}

/* ------- Website Header ----------*/
.primary-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.primary-header .container {
  background-color: var(--clr-neutral-500);
  border-end-end-radius: .25rem;
  border-end-start-radius: .25rem;
  padding: .5rem 1rem .5rem 1rem;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-list {
  display: flex;
  gap: clamp(var(--size-300), 5vw, var(--size-600));
  font-size: var(--fs-400);
  text-decoration: none;
}

.mobile-nav-toggle {
  display: none;
}

.primary-nav-mobile {
  display: none;
}

@media (max-width: 40em) {

  .primary-navigation {
    position: relative;
    display: none;
  }
  
  .mobile-nav-toggle {
    display: block;
    cursor: pointer;
  }

  .primary-nav-mobile {
    display: flex;
    justify-content: center;
    position: absolute;
    padding: var(--size-500);
    inset: 6rem var(--size-400) auto;
    max-width: 20rem;
    margin-left: auto;
    background-color: var(--clr-neutral-400);
    border-radius: 4px;
  }

  .mobile-nav-toggle .icon-menu {
    color: var(--clr-neutral-100);
    font-size: var(--fs-600);
  }

  .mobile-nav-toggle .icon-close {
    color: var(--clr-neutral-100);
    font-size: var(--fs-600);
  }
}

/* logo */

.logo-400 {
  height: 3rem;
  object-fit: contain;
}

.logo-700 {
  height: 8rem;
  object-fit: contain;
}



/* Icons */
.icon-size-400 {
  font-size: 1.2rem;
}

.icon {
  height: 2rem;
}

.icon-container {
  cursor: pointer;
  transition: color .15s;
  padding: .1rem .5rem;
  border-radius: 4px;
  transition: background-color .15s;
  font-size: 1rem;
}

.icon-container.bg-solid {
  background-color: var(--clr-neutral-400);
}

.icon-container:hover {
  background-color: var(--clr-neutral-350);
}

/* password */

.toggle-password {
  position: relative;
}

.toggle-password i {
  cursor: pointer;
  position: absolute;
  top: -20px;
  right: 5px;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--clr-neutral-100);
}

/* Hero */
#hero {
  background-color: rgba(0, 0, 0, 0.651);
  background-image: url(/static/img/background.jpg);
  background-position: center;
  background-size: cover;
  background-blend-mode: color;
  padding-top: 5rem;
}

/* How it works */
#how-it-works {
  background-color: var(--clr-neutral-400);
}

/* login/sign up form */

/* Color */

.error {
  color: var(--clr-red);
}

.info {
  color: var(--clr-yellow);
}

.success {
  color: var(--clr-accent-400);
}

.clr-primary {
  color: var(--clr-primary-400);
}

/* Form */

.form-box {
  display: flex;
  flex-direction: column;
  background-color: var(--clr-neutral-500);
  border-radius: .25rem;
  max-width: 22rem;
  width:95%;
  padding: 1rem;
}

.form-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
}

.form-multi-col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1.5rem;
}


fieldset {
  padding: .5rem;
  border: 1px solid var(--clr-neutral-100);
  border-radius: 4px;
}

fieldset legend {
  font-weight: var(--fw-bold);
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group input {
  width: 100%;
}

.form-group .flex input {
  width: .9rem;
  height: inherit;
}



.form-group .error-container {
  color: var(--clr-red);
}

form .button {
  width: 100%;
  
}

/* Message Container */
#message-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: .5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  font-weight: 600;
  font-size: var(--fs-450);
  text-align: center;
}

#message-container .message {
  display: flex;
  align-items: center;
  padding: .5rem 1rem .5rem 1rem;
  border-radius: 4px;
  background-color: var(--clr-neutral-300);
  gap: .5rem;
}

#message-container .message.error {
  color: var(--clr-red);
  background-color: var(--clr-neutral-475);
}

#message-container .message.info {
  color: var(--clr-yellow);
  background-color: var(--clr-neutral-475);
}

#message-container .message.success {
  color: var(--clr-accent-400);
  background-color: var(--clr-neutral-475);
}


/* Footer */
.primary-footer {
  background-color: var(--clr-neutral-500);
  padding: .5rem 0 .5rem 0;
  position: sticky;
  top: 100%;
}


.primary-footer .nav-list {
  flex-wrap: wrap;
  gap: clamp(var(--size-300), 4vw, var(--size-600));
}

/* -------- Charts ---------- */
.charts {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

.chart {
  display: flex;
  flex-direction: column;
}

.canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.chart-box {
  background-color: var(--clr-neutral-400);
  border-radius: .25rem;
  padding: 1rem;
}


/* -------- Utility classes ---------- */

.visually-hidden {
  position: absolute;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.display-none {
  display: none;
}

.cursor-pointer {
  cursor: pointer;
}

.text-neutral-100 {
  color: var(--clr-neutral-100)
}

/* Background color */

.bg-neutral-500 {
  background-color: var(--clr-neutral-500)
}
.bg-neutral-400 {
  background-color: var(--clr-neutral-400)
}
.bg-neutral-300 {
  background-color: var(--clr-neutral-300)
}

.bg-warning {
  background-color: var(--clr-yellow);
}

.bg-warning:hover {
  background-color: var(--clr-dark-yellow);
}

.bg-danger {
  background-color: var(--clr-red);
}

.bg-danger:hover {
  background-color: var(--clr-dark-red);
}

.bg-success {
  background-color: var(--clr-accent-400);
}

.bg-success:hover {
  background-color: var(--clr-accent-400-dark);
}

/* Font text */

.fw-bold { font-weight: var(--fw-bold);}
.fw-medium { font-weight: var(--fw-medium);}
.fw-regular {font-weight: var(--fw-regular);}

.fs-primary-heading {
  font-size: var(--fs-700);
  line-height: 1.2;
}

.fs-secondary-heading {
  font-size: var(--fs-600);
  line-height: 1.3;
}

.fs-300 {
  font-size: .95rem;
}

.fs-400 {
  font-size: 1rem;
}

.fs-450 {
  font-size: 1.25rem;
}

.fs-500 {
  font-size: 1.4rem;
}

.fs-600 {
  font-size: 1.7rem;
}

.fs-700 {
  font-size: 2rem;
}


.text-center {
  text-align: center;
}

/* Text color */
.text-red {
  color: var(--clr-red);
}

/* ------- Padding --------*/

.padding-block-400 {
  padding-block: var(--size-400);
}

.padding-block-500 {
  padding-block: var(--size-600);
}

.padding-block-600 {
  padding-block: var(--size-600);
}

.padding-block-700 {
  padding-block: var(--size-700);
}

.padding-top-500 {
  padding-top: 3rem;
}

.padding-top-600 {
  padding-top: 2.5rem;
}


/* ----- Margin ------ */
.margin-block-300 {
  margin-block: var(--size-300);
}

.margin-block-400 {
  margin-block: var(--size-400);
}

.margin-block-500 {
  margin-block: var(--size-500);
}

.margin-block-600 {
  margin-block: var(--size-600);
}

.margin-bottom-300 {
  margin-bottom: .5rem;
}

.margin-bottom-400 {
  margin-bottom: 1rem;
}

.margin-bottom-500 {
  margin-bottom: 2rem;
}

.margin-bottom-for-header {
  margin-bottom: 72px;
}

.margin-top-300 {
  margin-top: .5rem;
}

.margin-top-400 {
  margin-top: 1rem;
}

.margin-top-500 {
  margin-top: 2rem;
}

.margin-top-600 {
  margin-top: 3rem;
}

.mt-sm {
  margin-top: 2em;
}

/* Width */
.w-100 {
  width: 100%;
}

/* Height */
.h-100 {
  height: 100%;
}

/* Text */
.white-space-nowrap {
  white-space: nowrap;
}


/* Links */
.link {
  cursor: pointer;
  color: var(--clr-neutral-100);
  transition: color .15s;
  text-decoration: none;
}

.link.underline {
  text-decoration: underline;
}

.link:hover,
.link:focus {
  color: var(--clr-primary-400);
}

.container {
  --max-width: 67rem;
  --padding: 1rem;

  width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;
}

.sm-full {
  --max-width: 67rem;
  --padding: 1rem;

  width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;
}

@media (max-width: 40em) {
  .sm-full {
    --max-width: 67rem;
    --padding: 0;

    width: min(var(--max-width), 100% - (var(--padding) * 2));
    margin-inline: auto;
  }
}
:where(.flow>:not(:first-child)) {
  margin-top: var(--flow-spacer, 1em);
}
/* Grid */

.even-columns {
  display: grid;
  gap: 1rem;
}

.text-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.display-inline {
  display: inline;
}


/* Flex */

.flex-grid {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.flex-grid .col {
  display: flex;
  flex-wrap: wrap;
  flex: 2;
  flex-direction: column;
  gap: 1.5rem;
}

.inline-flex-sm-gap {
  display: inline-flex;
  gap: .5rem;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.center {
  align-items: center;
  justify-content: center;
}

.column {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.inline {
  display: inline-flex;
}

.wrap {
  flex-wrap: wrap;
}

.space-between {
  justify-content: space-between;
}

.display-block {
  display: block;
}

.vertical-align-center {
  align-items: center;
}

.align-start {
  align-items: start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.align-end {
  align-items: flex-end;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-grow-0 {
  flex-grow: 0;
}

.gap-100 {
  gap: .1rem;
}
.gap-200 {
  gap: .25rem;
}
.gap-250 {
  gap: .5rem;
}
.gap-300 {
  gap: .75rem;
}
.gap-400 {
  gap: 1rem;
}

.gap-500 {
  gap: 1.5rem;
}

.gap-600 {
  gap: 2rem;
}

/* Fixed Center */

.fixed-center {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fixed-vertical-center {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.center-in-parent {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.absolute-center {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.absolute-vertical-center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

/*  Position */
.position-relative {
  position: relative;
}

.position-fixed {
  position: fixed;
}


/* Absolute / Fixed */
.top-header {
  top: 72px;
}

.bottom-400 {
  bottom: 1rem;
}

.bottom-space-for-header {
  bottom: 100px;
}

/* Select Field */
select {
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-400);
  border-radius: 4px;
}

/* Textarea */
textarea {
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-400);
  padding: 0 3px 0 3px;
  border: none;
  border-radius: 4px;
  resize: vertical;
}

textarea.border {
  border: 1px solid var(--clr-neutral-300);
}

/* Textarea with dark class */
textarea.dark {
  background-color: var(--clr-neutral-475);
}

.form-notes {
  min-width: 35ch;
}

.border-radius-400 {
  border-radius: 4px;
}

/* Scrollbar with app header */
.overflow {
  overflow: auto;
}

.min-height-450 {
  min-height: 1.7rem;
}

/* WebKit-based browsers */
::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--clr-neutral-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--clr-neutral-100);
  border-radius: 4px;
}

/* Firefox */
::-moz-scrollbar {
  height: 5px;
  width: 5px;
}

::-moz-scrollbar-track {
  background: var(--clr-neutral-300);
  border-radius: 4px;
}

::-moz-scrollbar-thumb {
  background: var(--clr-neutral-300);
  border-radius: 4px;
}

/* media */

@media (min-width: 40em) {
  .even-columns {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

@media (max-width: 40em) {
  .display-sm-none {
    display: none;
  }
}