/**
*
* Basic layout changes
*
**/
/**
*
* Defines all colors that are used in MoPats less sheets
*
**/
/**
* This file contains color definition based on the material 
* design specification for color palettes
**/
/* Grayscales (from Bootstrap) */
/**
*
* Sizes for the mopat web application
*
**/
/**
*
* Some variable values that will be repeated
* for MoPats views
* This file can be used as a central hub to change 
* many settings at once without touching the less files
*
**/
* {
  font-size: 14px;
  line-height: 1.428;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body {
  background-color: #eeeeee;
}
form {
  margin-bottom: 0px !important;
}
#site-title.card-header {
  margin-top: 15px;
  background-color: #ffffff;
}
#site-title.card-header h1,
#site-title.card-header h2,
#site-title.card-header h3,
#site-title.card-header h4,
#site-title.card-header h5,
#site-title.card-header h6 {
  color: #3e3e3b;
}
.main-card {
  border-color: #dddddd;
  border: 0;
}
@media only screen and (min-width: 1200px) {
  .main-card {
    border-radius: 10px;
  }
}
.card-header {
  border-color: #dddddd;
}
.main-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-wrapper {
    padding-right: var(--bs-gutter-x, 5rem);
    padding-left: var(--bs-gutter-x, 5rem);
  }
}
@media only screen and (min-width: 1400px) {
  .main-wrapper {
    padding-right: var(--bs-gutter-x, 10rem);
    padding-left: var(--bs-gutter-x, 10rem);
  }
}
.main-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 1920px;
  flex-grow: 1;
  position: relative;
}
@media only screen and (min-width: 1200px) {
  .main-container {
    margin-top: 20px;
  }
}
.main-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -70px;
  background-color: #ffffff;
  z-index: -1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
@media only screen and (min-width: 1200px) {
  .main-container::before {
    border-radius: 10px;
  }
}
.vh-75 {
  height: 75vh !important;
}
.vh-50 {
  height: 50vh !important;
}
.vh-25 {
  height: 25vh !important;
}
.vw-75 {
  width: 75vw !important;
}
li.children {
  padding-left: 10px;
}
.vw-50 {
  width: 50vw !important;
}
.vw-25 {
  width: 25vw !important;
}
.w-10 {
  width: 10% !important;
}
.w-15 {
  width: 15% !important;
}
.w-20 {
  width: 20% !important;
}