@font-face {
  font-family: EverettL;
  src: url("../fonts/Everett-Light.eot");
  src: url("../fonts/Everett-Light.otf") format("opentype");
  src: url("../fonts/Everett-Light.woff2") format("woff2");
  src: url("../fonts/Everett-Light.woff") format("woff");
  /* chrome firefox */
  src: url("../fonts/Everett-Light.ttf") format("truetype");
  /* chrome firefox opera Safari, Android, iOS 4.2+*/
}

html {
  font-size: var(--reference-font-size);
  font-family: EverettL;
  user-select: auto;
  color: var(--text-color);
  margin: 0;
  padding: 0;
  height: 100vh;
  max-height: 100vh;
  overflow-y: hidden;
}

body {
  color: var(--text-color);
  font-family: EverettL;
  margin: 0;
  padding: 0;
  height: 100vh;
  max-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  background: url("../images/background.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: var(--background-color2);
  padding: 0 var(--body-side-padding);
}

/* grid layout bootstrap  */

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.row > * {
  margin-top: 2rem;
  /* width: 100%; */
}

/* right margin for all children of row except last */
.row > *:not(:last-child) {
  padding-right: 2rem;
}

/* .row>button {
  margin-top: 2rem;
} */

div.row2elem > * {
  width: 50%;
}

div.row1elem > * {
  width: 100%;
}

.rowDonutBar > *:first-child {
  width: 250px;
}

.rowDonutBar> *:last-child {
  width: calc(100% - 250px);
}

div.page-content-wrapper {
  display: flex;
  /* margin: 0 5vw; */
  flex-wrap: nowrap;
  height: 100vh;
  width: calc(100vw - var(--body-side-padding)*2) !important;
}

/* 
div.pages-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  width:90vw !important;
} */

#user-name {
  color: var(--text-color);
  font-family: EverettL;
  font-size: var(--label-font-size-small);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: smallcase;
  padding-right: 1rem;
}

a,
a:hover,
a:visited,
a:active {
  color: var(--link-text-color-orange);
  text-decoration: underline;
}