/****************************************************************************
********************************* IMPORTS ***********************************
****************************************************************************/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;1,700&display=swap");
/****************************************************************************
******************************** VARIABLES **********************************
****************************************************************************/
/****************************************************************************
************************ DEFAULT STYLE VARIABLES ****************************
****************************************************************************/
/* Top Navigation Bar */
/* HR */
/* Inputs */
/* Buttons */
/****************************************************************************
**************************** MIXINS & FUNCTIONS *****************************
****************************************************************************/
/****************************************************************************
******************************** VARIABLES **********************************
****************************************************************************/
/***************** APPLE STYLE PREVENTION *********************/
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

/***************** STANDARD TAGS *****************/
* {
  font-family: "Open Sans", sans-serif;
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Open Sans", sans-serif;
  width: 100%;
  font-size: 16px;
  color: #202020;
  background-color: #eeeeee;
  padding-top: 0;
}

a {
  text-decoration: none;
  font-weight: 400;
  -webkit-transition: .2s;
  transition: .2s;
  cursor: pointer;
}

::-moz-selection {
  color: #0072ff;
  background: #66aaff;
}

::selection {
  color: #0072ff;
  background: #66aaff;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  font-weight: 600;
  text-align: center;
  padding-bottom: 8px;
}

h1 {
  font-size: 36px;
  width: 100%;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 18px;
}

table, tr, td {
  color: inherit;
}

/* Browsers have thier own default color for tables. This helps it stay consistant */
/* Improve readability */
p, ul, ol, dl, address {
  line-height: 1.5;
}

pre {
  font-family: "Arial", sans-serif;
  white-space: pre-wrap;
  /* Overflow by default is bad. */
}

hr {
  border: 0.5px solid #666666;
}

nav ul {
  list-style: none;
}

img, video, canvas, audio, iframe, embed, object {
  display: block;
  /* Switch display mode to block, since that's what we usually want for images. */
  vertical-align: middle;
  /* If you override, and make an image inline, it's likely you'll want middle vertical alignment. */
}

img, video {
  max-width: 100%;
  /* Make images and video flexible by default. */
  height: auto;
  /* Ensure images and video maintain their aspect ratio when max-width comes into play. */
  width: auto;
  /* Ensure images and video maintain their aspect ratio when max-width comes into play. */
}

img {
  border-style: none;
  /* Remove the border on images inside links in IE 10 and earlier. */
}

/***************** IMPORTANT *****************/
.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}

.showDollar:before {
  content: '$';
  font-size: inherit;
}

.defaultTip {
  border-bottom: 1px dotted #808080;
}

.loadingDiv {
  padding: 20px;
}

.loadingDiv div {
  width: 90px;
  height: 90px;
  margin: 0px auto;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  background: url("img/TemplateIcons/loading.gif") no-repeat;
  background-size: contain;
}

/****************************************************************************
*********************************** SIZING **********************************
****************************************************************************/
.grid2, .grid2s {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
}

.grid3, .grid3s {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
}

.grid4, .grid4s {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid5, .grid5s {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid6, .grid6s {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid2s {
  grid-gap: 1rem;
}

.grid3s {
  grid-gap: 1rem;
}

.grid4s {
  grid-gap: 1rem;
}

.grid5s {
  grid-gap: 1rem;
}

.grid6s {
  grid-gap: 1rem;
}

.gridCenterVert {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.gridCenter {
  display: -ms-grid;
  display: grid;
  justify-items: center;
}

@media screen and (max-width: 1080px) {
  .gridStack {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
}

/*@media (max-width: screen(tablet))
{
    // For mobile phones:
    .gridStack {grid-template-columns:1fr;}

}*/
.container, .dashboard {
  display: block;
  width: 100%;
  max-width: 100vw;
  max-width: 100vw;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 0 16px;
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  .container, .dashboard {
    width: 768px;
  }
}

@media screen and (min-width: 1080px) {
  .container, .dashboard {
    width: 1080px;
  }
}

@media screen and (min-width: 1200px) {
  .container, .dashboard {
    width: 1200px;
  }
}

.container.pad, .dashboard {
  padding-top: 16px;
  padding-bottom: 16px;
}

.container.pad.lg, .lg.dashboard {
  padding-top: 48px;
  padding-bottom: 48px;
}

.defaultContent {
  background-color: #eeeeee;
}

.pageContent {
  margin-top: 80px;
}

.pageContent.slide {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  padding-top: 80px;
}

.pageContent.slide .container, .pageContent.slide .dashboard {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -ms-grid;
  display: grid;
}

.pageContent.full {
  min-height: 100%;
}

.oneLine {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twoLines {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.threeLines {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.minPageHeight, .dashboard {
  min-height: 75vh;
}

/****************************************************************************
*********************************** HEADER **********************************
****************************************************************************/
#defaultModal, .defaultModal {
  display: none;
}

#defaultModal.active, .defaultModal.active {
  display: block;
}

/****************************************************************************
*********************************** ICONS **********************************
****************************************************************************/
.deleteIcon {
  background: url("img/TemplateIcons/red-x.png") no-repeat;
  background-size: contain;
  background-position: center center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  -webkit-transition: -webkit-transform .1s;
  transition: -webkit-transform .1s;
  transition: transform .1s;
  transition: transform .1s, -webkit-transform .1s;
  border: none;
}

.deleteIcon:hover {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

/****************************************************************************
*********************************** LOGIN **********************************
****************************************************************************/
/*CLEAN UP THIS AREA WHEN WRITING THE CONTACT FORM*/
.loginBox {
  background-color: #eeeeee;
  width: 400px;
  overflow: auto;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #a2a2a2;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/*.labeledInput {
  margin:22px 0 5px 0;position:relative;border:0;box-sizing:border-box;text-align:left;

  label {
    display:block;text-align:left;box-sizing:border-box;padding:0 6px;color:#777;position:absolute;top:8px;left:0px;font-size:16px;z-index:0;transition-duration:.1s;transition-timing-function:linear;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  input {

    &:focus + label, &:not(:placeholder-shown) + label {
      top: -18px !important;left: 0px !important;font-size:$fontSize*0.875;background:transparent;z-index:2;
    }
    &:focus + label {
      color:$textColor;
    }
  }

  &:placeholder {color:#cecece;}
}

.labeledInputLabel {display:block;text-align:left;box-sizing:border-box;padding:0 6px;color:#777;font-size:16px;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.labeledInput label span {color:inherit;font-size:inherit;font-weight:inherit;}
.labeledInput input:placeholder-shown + label > span {color:#bc0a0a;}*/
/****************************************************************************
*********************************** INPUTS **********************************
****************************************************************************/
.labeledInput {
  margin: 20px 0 5px 0;
  position: relative;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: left;
}

.labeledInput label {
  top: -18px !important;
  left: 0px !important;
  font-size: 14px;
  background: transparent;
  z-index: 2;
}

.labeledInput input:focus + label, .labeledInput input:not(:placeholder-shown) + label, .labeledInput textarea:focus + label, .labeledInput textarea:not(:placeholder-shown) + label {
  top: -18px !important;
  left: 0px !important;
  font-size: 14px;
  background: transparent;
  z-index: 2;
}

.labeledInput input:focus + label, .labeledInput textarea:focus + label {
  color: #202020;
}

.labeledInput:placeholder {
  color: #cecece;
}

.labeledLabel.active {
  top: -18px !important;
  left: 0px !important;
  font-size: 14px;
  background: transparent;
  z-index: 2;
}

.defaultInput.errorInput {
  border-color: #C00;
  background-color: #ece2e2;
}

.defaultInput.warningInput {
  border-color: #eb7f00;
  background-color: #eee8e2;
}

/*.inputWrapLabel {display:block;text-align:left;box-sizing:border-box;padding:0 6px;color:#777;font-size:16px;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.inputWrap label span {color:inherit;font-size:inherit;font-weight:inherit;}
.inputWrap input:placeholder-shown + label > span {color:#bc0a0a;}*/
.defaultInput, .defaultSelect, .DefaultInputError {
  width: 100%;
  padding: 5px;
  font-size: 18px;
  background-color: #eeeeee;
  color: #202020;
  font-weight: 400;
  border: #666666 1px solid;
  text-align: left;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  outline: 0;
}

.defaultInput:hover, .defaultSelect:hover {
  border-color: #45a529;
  color: #202020;
}

.defaultInput:focus, .defaultSelect:focus {
  border-color: #45a529;
  color: #202020;
}

/****************************************************************************
************************************ MENU ***********************************
****************************************************************************/
.toggleMenu {
  position: relative;
}

.toggleMenu .toggle:after {
  content: '';
  display: inline-block;
  background-image: url("/media/icons/standard/standard/chevronDownDark.svg");
  height: 18px;
  width: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin: 0 6px;
}

.toggleMenu .toggle.selected:after, .toggleMenu .toggle.active:after {
  background-image: url("/media/icons/standard/chevronUpDark.svg");
}

.toggleMenu .toggle.light:after {
  background-image: url("/media/icons/standard/chevronDown.svg");
}

.toggleMenu .toggle.light.selected:after, .toggleMenu .toggle.light.active:after {
  background-image: url("/media/icons/standard/chevronUp.svg");
}

.toggleMenu .menu {
  background-color: #eeeeee;
  text-align: right;
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: max-height 0.4s;
  transition: max-height 0.4s;
  min-width: 20ch;
}

.toggleMenu .menu.active {
  max-height: 100vh;
}

.toggleMenu .menu a {
  -webkit-box-shadow: 0px 1px 2px rgba(255, 255, 255, 0.15);
          box-shadow: 0px 1px 2px rgba(255, 255, 255, 0.15);
}

.toggleMenu li {
  list-style: none;
  padding: 12px;
}

.toggleMenu li a {
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  .toggleMenu {
    position: static;
  }
}

.topNavOffset {
  background-color: black;
  height: 80px;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
}

.mobileCollapse {
  -webkit-transition: max-height 0.4s;
  transition: max-height 0.4s;
  min-width: 20ch;
}

@media screen and (max-width: 768px) {
  .mobileCollapse {
    background-color: #eeeeee;
    text-align: right;
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: max-height 0.4s;
    transition: max-height 0.4s;
  }
  .mobileCollapse.active {
    max-height: 100vh;
  }
}

.breadcrumb {
  white-space: nowrap;
  padding-bottom: 16px;
}

.breadcrumb > *, .breadcrumb a, .breadcrumb div {
  margin-right: 2px;
  display: inline-block;
}

.breadcrumb a {
  color: #336699;
}

.breadcrumb a div {
  color: #336699;
}

.breadcrumb a:hover div {
  text-decoration: none;
}

.breadcrumb a:after {
  content: "/";
  content: '';
  display: inline-block;
  background-image: url("/media/icons/chevronRightDark.svg");
  height: 0.8rem;
  width: 0.8rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
  text-decoration: none !important;
  background-position-y: bottom;
}

/****************************************************************************
*********************************** BUTTONS **********************************
****************************************************************************/
.defaultButton {
  display: inline-block;
  background-color: #45a529;
  color: #fff;
  border: 2px solid #45a529;
  border-radius: 4px;
  padding: 8px 16px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.defaultButton.left {
  margin-right: auto;
  float: left;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.defaultButton.center {
  margin-left: auto;
  margin-right: auto;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.defaultButton.right {
  margin-left: auto;
  float: right;
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.defaultButton:hover {
  color: #fff;
  border-color: #45a529;
  background-color: #79d75d;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.6);
}

.defaultButton:active {
  color: #fff;
  border-color: #45a529;
  background-color: #79d75d;
}

.defaultButton:disabled {
  color: #eeeeee !important;
  border-color: #1a1a1a !important;
  background-color: #666666 !important;
}

.icon {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/****************************************************************************
*********************************** TABLES **********************************
****************************************************************************/
.defaultTable {
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
}

.defaultTable tr:nth-child(even) {
  background-color: #eeeeee;
}

.defaultTable tr:nth-child(odd) {
  background-color: #d5d5d5;
}

.defaultTable tr:hover {
  background-color: #FFF;
}

.defaultTable tr th {
  padding: 8px;
  font-size: 16px;
  font-weight: 600;
  background-color: #eeeeee;
  color: #eeeeee;
  text-align: left;
}

.defaultTable tr th:first-child {
  border-radius: 8px 0px 0px 0px;
}

.defaultTable tr th:last-child {
  border-radius: 0px 8px 0px 0px;
}

.defaultTable tr td {
  padding: 8px;
  font-size: 16px;
  font-weight: 300;
  color: #111;
  text-align: left;
}

/***************** ERROR/SUCCESS *****************/
.error, .warning, .info, .success {
  margin: 5px 0px;
  padding: 5px;
  text-align: center;
  font-weight: 400;
  border-radius: 4px;
  font-size: 14.4px;
}

/* DARK */
.error {
  color: #FFF;
  border: 1px solid #C00;
  background: #C00;
}

.warning {
  color: #FFF;
  border: 1px solid #eb7f00;
  background: #eb7f00;
}

.success {
  color: #FFF;
  border: 1px solid #529214;
  background: #529214;
}

.info {
  color: #FFF;
  border: 1px solid #336699;
  background: #336699;
}

/* LIGHT */
.error {
  color: #C00;
  border: 1px solid #C00;
  background: #ffcccc;
}

.warning {
  color: #eb7f00;
  border: 1px solid #eb7f00;
  background: #fff6eb;
}

.success {
  color: #529214;
  border: 1px solid #529214;
  background: #d2f4b1;
}

.info {
  color: #336699;
  border: 1px solid #336699;
  background: #d9e6f2;
}

/****************************************************************************
********************************* Color/Images *********************************
****************************************************************************/
.bgLight {
  background-color: #eeeeee;
  color: #202020;
}

.bgImage {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body {
  background-color: #28571a;
}

.pageContent {
  background-color: #eeeeee;
}

/****************************************************************************
********************************** Headers **********************************
****************************************************************************/
.topNav {
  position: fixed;
  top: 0;
  height: 80px;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
          box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
  -webkit-transition: top 0.2s;
  transition: top 0.2s;
  border-bottom: 1px solid #eeeeee;
  -webkit-transition: 0.2s background-color;
  transition: 0.2s background-color;
}

.topNav:after {
  content: "";
  clear: both;
  display: table;
}

.topNav li {
  list-style: none;
}

.topNav a {
  color: #eeeeee;
  display: inline-block;
  line-height: 80px;
  padding: 0px 1ch;
  margin-left: -0.25rem;
}

.topNav a:hover, .topNav a.selected {
  background-color: black;
}

.topNav img {
  width: auto;
  height: 100%;
}

.topNav .links {
  width: 100%;
  max-width: 100vw;
  -webkit-transition: max-height 0.2s;
  transition: max-height 0.2s;
  margin: auto;
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  .topNav .links {
    width: 768px;
  }
}

@media screen and (min-width: 1080px) {
  .topNav .links {
    width: 1080px;
  }
}

@media screen and (min-width: 1200px) {
  .topNav .links {
    width: 1200px;
  }
}

.topNav .links > * {
  display: inline-block;
  vertical-align: top;
  line-height: 80px;
}

.topNav .linksRight, .topNav .linksLeft {
  white-space: nowrap;
}

.topNav .linksRight > *, .topNav .linksLeft > * {
  display: inline-block;
}

.topNav .linksRight {
  float: right;
}

.topNav .linksRight .menu {
  right: 0;
}

.topNav .linksLeft {
  float: left;
}

.topNav .linksLeft .menu {
  left: 0;
}

.topNav .toggle {
  height: 100%;
}

.topNav .toggleMenu {
  display: inline-block;
}

.topNav .menu {
  position: absolute;
  border-radius: 0px 0px 4px 4px;
  top: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.topNav .menu > * {
  display: block;
}

.topNav .hamburger {
  display: none;
  height: 100%;
  padding: 0px 8px;
}

.topNav .hamburger:after {
  padding-top: 25%;
  height: 60px !important;
  width: 60px !important;
}

.topNav div.search {
  display: inline-block;
}

.topNav div.search:before {
  display: none;
}

.topNav div.search input {
  line-height: 60px;
}

@media screen and (max-width: 768px) {
  .topNav div.search {
    padding: 8px 2ch;
    display: block;
  }
  .topNav div.search input {
    line-height: normal;
    display: block;
    width: 100%;
    padding: 4px 0px;
  }
}

@media screen and (max-width: 768px) {
  .topNav .hamburger {
    display: inline-block;
  }
  .topNav .mobileCollapse, .topNav .menu {
    position: absolute;
    border-radius: 0px 0px 4px 4px;
    top: 100%;
    left: 0;
    right: 0;
  }
  .topNav .mobileCollapse > *, .topNav .menu > * {
    display: block;
    text-align: left;
    padding-left: 4ch;
  }
  .topNav .mobileCollapse > *:before, .topNav .menu > *:before {
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transition-property: opacity, padding-left;
    transition-property: opacity, padding-left;
    content: '';
    display: inline-block;
    background-image: url("/media/icons/standard/chevronRight.svg");
    height: 1rem;
    width: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    width: 0ch;
    margin-left: -1ch;
    padding-left: 1ch;
  }
  .topNav .mobileCollapse > *:hover:before, .topNav .menu > *:hover:before {
    padding-left: 2ch;
    opacity: 1;
  }
  .topNav .toggleMenu {
    padding-left: 0;
  }
  .topNav .toggleMenu:before {
    display: none;
  }
  .topNav .toggle {
    width: 100%;
  }
  .topNav div.search {
    padding: 8px 2ch;
    display: block;
  }
  .topNav div.search input {
    line-height: normal;
    display: block;
    width: 100%;
    padding: 4px 0px;
  }
}

.topNav:hover {
  background-color: black;
}

.topNav a {
  border-style: none solid none solid;
  border-color: transparent;
  border-width: 1px;
}

.topNav a:hover {
  border-color: #eeeeee;
}

.topNav .menu a {
  line-height: 48px;
  border-bottom: solid 3px transparent;
}

.topNav .menu a:hover {
  border-bottom-color: #eeeeee;
}

.TopBar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid #eeeeee;
  z-index: 20;
  height: 80px;
  -webkit-transition: 0.2s background-color;
  transition: 0.2s background-color;
}

.TopBar:hover {
  background-color: black;
}

.TopBar img {
  height: 100%;
}

.TopBar a {
  height: 100%;
  padding: 8px;
  line-height: 80px;
  color: #eeeeee;
}

.TopBar .underlineBar, .TopBar .accountHeadline h1, .accountHeadline .TopBar h1, .TopBar .accountHeadline h2, .accountHeadline .TopBar h2, .TopBar .accountHeadline h3, .accountHeadline .TopBar h3, .TopBar .accountHeadline h4, .accountHeadline .TopBar h4, .TopBar .accountHeadline h5, .accountHeadline .TopBar h5, .TopBar .accountHeadline h6, .accountHeadline .TopBar h6, .TopBar .dashboardBlock h2, .dashboardBlock .TopBar h2 {
  padding-bottom: 8px;
}

.TopBar .links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 100%;
}

.TopBar .links a {
  padding: 0px 4px;
  border-width: 1px;
  border-style: none solid;
  border-color: transparent;
}

.TopBar .links a div {
  border-style: none;
  line-height: 80px;
  height: 100%;
  color: #eeeeee;
}

.TopBar .links a:hover {
  background-color: black;
  border-color: #eeeeee;
}

.jumbotron {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  width: 100%;
  height: 540px;
  display: -ms-grid;
  display: grid;
  -ms-flex-line-pack: center;
      align-content: center;
  margin-bottom: 8px;
  color: #eeeeee;
  padding: 32px 0;
}

#HeaderProfileDropDown {
  display: none;
}

/****************************************************************************
********************************** Footer **********************************
****************************************************************************/
#footer {
  background-color: #28571a;
  padding: 16px;
  color: #eeeeee;
}

#footer hr {
  border-color: #45a529;
}

#footer .links a {
  color: #eeeeee;
}

#footer .logo {
  height: 96px;
  margin: auto;
}

#footer .logo img {
  height: 100%;
}

#footer .links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: left;
  margin-left: 0;
}

/****************************************************************************
******************************** Containers *********************************
****************************************************************************/
.card {
  /*display:grid;
  grid-template-areas:
  'header'
  'body'
  'footer';*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  background-color: #666666;
  position: relative;
  color: #eeeeee;
}

.card .floating {
  color: #eeeeee;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  grid-area: body;
}

.card img {
  width: 100%;
}

.card .header {
  padding: 8px;
  width: 100%;
}

.card .header.floating {
  top: 0;
}

.card .title {
  font-size: 24px;
  text-align: center;
}

.card .body {
  width: 100%;
}

.card .text {
  padding: 8px;
}

.card .footer {
  text-align: left;
  width: 100%;
  padding-bottom: 8px;
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: auto;
}

.card .footer.floating {
  bottom: 0;
}

.formBox {
  margin: 16px auto;
  width: 480px;
  border: solid 1px gray;
  border-radius: 4px;
  padding: 20px;
  -webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.6);
          box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.6);
}

.formBox h1, .formBox h2, .formBox h3, .formBox h4, .formBox h5, .formBox h6 {
  text-align: center;
}

.formBox button {
  margin-top: 12px;
}

.loginBox {
  background-color: #FFF;
  width: 400px;
  overflow: auto;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #ededed;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-height: 100%;
}

.bgShadow {
  background-color: rgba(0, 0, 0, 0.6);
}

.maxPhone {
  max-width: 480px;
}

/****************************************************************************
******************************* Dashboard ***********************************
****************************************************************************/
.dashboard {
  background-color: #fff;
}

.dashboard .defaultInput, .dashboard .defaultSelect, .dashboard textarea {
  background-color: #fff;
}

.accountHeadline {
  text-align: left;
  padding: 0px;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
  width: 100%;
  background-color: #fff;
}

.accountHeadline h1, .accountHeadline h2, .accountHeadline h3, .accountHeadline h4, .accountHeadline h5, .accountHeadline h6 {
  display: inline;
  padding-bottom: 0.6rem;
  padding-left: 8px;
  font-weight: normal;
}

.accountHeadline h1 {
  font-size: 2rem;
}

.accountHeadline a {
  float: right;
  margin-right: 6px;
  margin-top: 6px;
}

.dashboardBlock {
  display: block;
  width: 100%;
}

.dashboardBlock h1, .dashboardBlock h2, .dashboardBlock h3, .dashboardBlock h4, .dashboardBlock h5, .dashboardBlock h6 {
  text-align: left;
}

.dashboardBlock h2 {
  font-size: 1.5rem;
  padding: 8px 2ch;
  padding-right: 4ch;
  display: inline-block;
  font-weight: 900;
}

.bubble {
  background-color: #eeeeee;
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  padding: 0.6rem;
  margin: auto;
  background-color: #eeeeee;
  color: #404040;
  border-color: #c8c8c8;
}

.bubble.border {
  border-style: solid;
  border-width: 1px;
  border-color: #c8c8c8;
}

.bubble.dark {
  background-color: #404040;
  color: #eeeeee;
  border-color: #333333;
}

.bubble.dark.border {
  border-style: solid;
  border-width: 1px;
  border-color: #333333;
}

.bubble.primary {
  background-color: #45a529;
  color: #eeeeee;
  border-color: #45a529;
}

.bubble.primary.border {
  border-style: solid;
  border-width: 1px;
  border-color: #2b681a;
}

.bubble.secondary {
  background-color: #d88723;
  color: #eeeeee;
  border-color: #d88723;
}

.bubble.secondary.border {
  border-style: solid;
  border-width: 1px;
  border-color: #965e18;
}

.bubble.triary {
  background-color: #2368d8;
  color: #eeeeee;
  border-color: #2368d8;
}

.bubble.triary.border {
  border-style: solid;
  border-width: 1px;
  border-color: #184896;
}

.bubbleButton {
  text-align: center;
  display: inline-block;
  margin: 8px;
  padding: 8px;
  /*.bubble{
      @include bgColor( $color, $foregroundColor, darken($color, 15%) );
      border-color:darken($color, 15%);
    }*/
}

.bubbleButton label {
  color: #404040;
  padding: 8px;
  cursor: pointer;
}

.bubbleButton .bubble {
  border-style: solid;
  border-width: 1px;
}

.bubbleButton:hover .bubble {
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
}

.bubbleButton:hover {
  /*.bubble{
        @include bgColor( $hoverColor, $foregroundColor, darken($color, 15%) );
      }*/
}

.bubbleButton:hover .bubble {
  border-color: #f6f6f6;
}

.bubbleButton:hover:before {
  background: #f6f6f6;
  background: -webkit-gradient(linear, left top, right top, from(#f6f6f6), to(transparent));
  background: linear-gradient(90deg, #f6f6f6, transparent);
  background-color: #f6f6f6;
}

.bubbleButton:hover:before {
  background: #404040;
  background: -webkit-gradient(linear, left top, right top, from(#404040), to(transparent));
  background: linear-gradient(90deg, #404040, transparent);
  background-color: #404040;
}

.bubbleButton.dark {
  /*.bubble{
      @include bgColor( $color, $foregroundColor, darken($color, 15%) );
      border-color:darken($color, 15%);
    }*/
}

.bubbleButton.dark:hover {
  /*.bubble{
        @include bgColor( $hoverColor, $foregroundColor, darken($color, 15%) );
      }*/
}

.bubbleButton.dark:hover .bubble {
  border-color: #404040;
}

.bubbleButton.dark:hover:before {
  background: #404040;
  background: -webkit-gradient(linear, left top, right top, from(#404040), to(transparent));
  background: linear-gradient(90deg, #404040, transparent);
  background-color: #404040;
}

.bubbleButton.neutral {
  /*.bubble{
      @include bgColor( $color, $foregroundColor, darken($color, 15%) );
      border-color:darken($color, 15%);
    }*/
}

.bubbleButton.neutral:hover {
  /*.bubble{
        @include bgColor( $hoverColor, $foregroundColor, darken($color, 15%) );
      }*/
}

.bubbleButton.neutral:hover .bubble {
  border-color: #666666;
}

.bubbleButton.neutral:hover:before {
  background: #666666;
  background: -webkit-gradient(linear, left top, right top, from(#666666), to(transparent));
  background: linear-gradient(90deg, #666666, transparent);
  background-color: #666666;
}

.bubbleButton.primary {
  /*.bubble{
      @include bgColor( $color, $foregroundColor, darken($color, 15%) );
      border-color:darken($color, 15%);
    }*/
}

.bubbleButton.primary:hover {
  /*.bubble{
        @include bgColor( $hoverColor, $foregroundColor, darken($color, 15%) );
      }*/
}

.bubbleButton.primary:hover .bubble {
  border-color: #45a529;
}

.bubbleButton.primary:hover:before {
  background: #45a529;
  background: -webkit-gradient(linear, left top, right top, from(#45a529), to(transparent));
  background: linear-gradient(90deg, #45a529, transparent);
  background-color: #45a529;
}

.bubbleButton.secondary {
  /*.bubble{
      @include bgColor( $color, $foregroundColor, darken($color, 15%) );
      border-color:darken($color, 15%);
    }*/
}

.bubbleButton.secondary:hover {
  /*.bubble{
        @include bgColor( $hoverColor, $foregroundColor, darken($color, 15%) );
      }*/
}

.bubbleButton.secondary:hover .bubble {
  border-color: #d88723;
}

.bubbleButton.secondary:hover:before {
  background: #d88723;
  background: -webkit-gradient(linear, left top, right top, from(#d88723), to(transparent));
  background: linear-gradient(90deg, #d88723, transparent);
  background-color: #d88723;
}

.bubbleButton.triary {
  /*.bubble{
      @include bgColor( $color, $foregroundColor, darken($color, 15%) );
      border-color:darken($color, 15%);
    }*/
}

.bubbleButton.triary:hover {
  /*.bubble{
        @include bgColor( $hoverColor, $foregroundColor, darken($color, 15%) );
      }*/
}

.bubbleButton.triary:hover .bubble {
  border-color: #2368d8;
}

.bubbleButton.triary:hover:before {
  background: #2368d8;
  background: -webkit-gradient(linear, left top, right top, from(#2368d8), to(transparent));
  background: linear-gradient(90deg, #2368d8, transparent);
  background-color: #2368d8;
}

/****************************************************************************
******************************** ELEMENTS ***********************************
****************************************************************************/
.learnMore {
  display: -ms-inline-grid;
  display: inline-grid;
  -ms-grid-columns: auto auto;
      grid-template-columns: auto auto;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  color: #eeeeee;
}

.learnMore .chevron {
  /*border-radius: 100%;
    background-color: $light;
    height: 24px;
    width: 24px;
    margin:auto;
    margin-left:4px;*/
  padding-left: 8px;
}

.learnMore .chevron:after {
  content: " ";
  background-image: url("../../media/icons/learnMore/LearnMoreWhite.svg");
  background-size: 24px 24px;
  height: 24px;
  width: 24px;
  display: block;
}

.learnMore .underlineBar.primary, .learnMore .accountHeadline h1.primary, .accountHeadline .learnMore h1.primary, .learnMore .accountHeadline h2.primary, .accountHeadline .learnMore h2.primary, .learnMore .accountHeadline h3.primary, .accountHeadline .learnMore h3.primary, .learnMore .accountHeadline h4.primary, .accountHeadline .learnMore h4.primary, .learnMore .accountHeadline h5.primary, .accountHeadline .learnMore h5.primary, .learnMore .accountHeadline h6.primary, .accountHeadline .learnMore h6.primary, .learnMore .dashboardBlock h2.primary, .dashboardBlock .learnMore h2.primary {
  color: #45a529;
}

.learnMore .underlineBar.light, .learnMore .accountHeadline h1.light, .accountHeadline .learnMore h1.light, .learnMore .accountHeadline h2.light, .accountHeadline .learnMore h2.light, .learnMore .accountHeadline h3.light, .accountHeadline .learnMore h3.light, .learnMore .accountHeadline h4.light, .accountHeadline .learnMore h4.light, .learnMore .accountHeadline h5.light, .accountHeadline .learnMore h5.light, .learnMore .accountHeadline h6.light, .accountHeadline .learnMore h6.light, .learnMore .dashboardBlock h2.light, .dashboardBlock .learnMore h2.light {
  color: #eeeeee;
}

.underlineBar, .accountHeadline h1, .accountHeadline h2, .accountHeadline h3, .accountHeadline h4, .accountHeadline h5, .accountHeadline h6, .dashboardBlock h2 {
  position: relative;
  padding-bottom: 4px;
}

.underlineBar:before, .accountHeadline h1:before, .accountHeadline h2:before, .accountHeadline h3:before, .accountHeadline h4:before, .accountHeadline h5:before, .accountHeadline h6:before, .dashboardBlock h2:before {
  content: "";
  width: 100%;
  height: 4px;
  background-color: #202020;
  position: absolute;
  bottom: 0px;
  left: 0;
}

.underlineBar.primary:before, .accountHeadline h1.primary:before, .accountHeadline h2.primary:before, .accountHeadline h3.primary:before, .accountHeadline h4.primary:before, .accountHeadline h5.primary:before, .accountHeadline h6.primary:before, .dashboardBlock h2.primary:before {
  background: #45a529;
  background: -webkit-gradient(linear, left top, right top, color-stop(100%, #45a529), to(transparent));
  background: linear-gradient(90deg, #45a529 100%, transparent);
}

.underlineBar.light:before, .accountHeadline h1.light:before, .accountHeadline h2.light:before, .accountHeadline h3.light:before, .accountHeadline h4.light:before, .accountHeadline h5.light:before, .accountHeadline h6.light:before, .dashboardBlock h2.light:before {
  background: #eeeeee;
  background: -webkit-gradient(linear, left top, right top, color-stop(100%, #eeeeee), to(transparent));
  background: linear-gradient(90deg, #eeeeee 100%, transparent);
}

.underlineBarHover, .bubbleButton {
  position: relative;
  padding-bottom: 4px;
}

.underlineBarHover:before, .bubbleButton:before {
  content: "";
  width: 100%;
  height: 4px;
  background-color: #202020;
  position: absolute;
  bottom: 0px;
  left: 0;
}

.underlineBarHover:before, .bubbleButton:before {
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  -webkit-transition-property: width, background-color;
  transition-property: width, background-color;
  width: 0px;
  background-color: transparent;
}

.underlineBarHover:hover:before, .bubbleButton:hover:before {
  width: 100%;
}

.underlineBarHover:hover:before, .bubbleButton:hover:before {
  background: #eeeeee;
  background: -webkit-gradient(linear, left top, right top, from(#eeeeee), to(transparent));
  background: linear-gradient(90deg, #eeeeee, transparent);
  background-color: #eeeeee;
}

.underlineBarHover.primary:hover:before, .primary.bubbleButton:hover:before {
  background: #45a529;
  background: -webkit-gradient(linear, left top, right top, from(#45a529), to(transparent));
  background: linear-gradient(90deg, #45a529, transparent);
  background-color: #45a529;
}

.underlineBarHover.secondary:hover:before, .secondary.bubbleButton:hover:before {
  background: #d88723;
  background: -webkit-gradient(linear, left top, right top, from(#d88723), to(transparent));
  background: linear-gradient(90deg, #d88723, transparent);
  background-color: #d88723;
}
/*# sourceMappingURL=screen.css.map */