body{
  background: #f3f3f3;
  margin: 0;
}

/* Company colors. */

/* General text font (off black): */
.off-black-font-color{
  color:#333333;
}

/* Midnight blue (dark blue): */
.midnight-blue-font-color{
  color:#294273;
}

/* Midnight blue (dark blue): */
.midnight-blue-background{
  background: #294273;
}

.sky-blue-font-color{
  color: #66c6d9
}

.sky-blue-background{
  background: #66c6d9
}

.light-sky-blue-background{
  background: #D3EFF4;
}


/* Lavender (purple): */
.lavender-background{
  background:#845ba5;
}

.lavender-font-color{
  color:#845ba5;
}


/* purple */
.purple-background{
  background: #a7a9aa
}

.purple-font-color{
  color:#a7a9aa;
}


/* Salmon roe (red): */
.salmon-roe-background{
   background: #ea6668;
}

/* Salmon roe (red): */
.salmon-roe-font-color{
   color: #ea6668;
}

/* dark green */
.teal-background{
  background: #4d95a6
}






.arrow-up {
  width: 0;
  height: 0;
  border-left: 5pt solid transparent;
  border-right: 5pt solid transparent;
  border-bottom: 5pt solid black;
}

.triangle{
  bottom: 8%;
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 4pt solid transparent;
  border-right: 4pt solid transparent;
}

.tri-down{
  border-top: 4pt solid black;
}

.tri-up{
  border-bottom: 4pt solid black;
}
/* used as the darkbackground for popups. */
.popup-dark-background{
  width: 100vw;
  height: 100vh;
  background: #00000040;
  display: inline-block !important;
  position: fixed;
  z-index: 999;
  display: flex;
  left: 0;
  top: 0;
}

@media (min-width: 950px) {
  .popup-dark-background{
    width: 100vw;
    height: 100vh;
    background: #00000040;
    display: inline-block !important;
    position: fixed;
    z-index: 1;
    display: flex;
    left: 0;
    top: 0;
  }
}

.popup-box{
  background: white;
  width: 90%;
  height: fit-content;
  padding: 15pt;
  position: absolute;
  left: 50%;
  top: 17%;
  transform: translate(-50%);
  font-size: 14pt;
  min-width: 90%;
  padding: 15pt;
  border-radius: 10pt;
  text-align: center;
}

@media (min-width: 950px) {
  .popup-box{
    background: white;
    width: fit-content;
    height: fit-content;
    padding: 15pt;
    position: absolute;
    left: 50%;
    top: 17%;
    transform: translate(-50%);
    font-size: 14pt;
    min-width: 500pt;
    padding: 15pt;
    border-radius: 10pt;
    text-align: center;
  }
  
}

.popup-box-title{
  font-size: 25pt;
  margin: 15pt;
  color: #294273;
}

.popup-box-button{
  background: #ffffff;
  color: black;
  border-radius: 25pt;
  padding: 6pt 8pt;
  font-size: 14pt;
  width: fit-content;
  margin: 15pt auto;
  width: 206pt;
  height: 35pt;
  color: #4c4c4c;
  transition: 0.2s;
  box-shadow: 0pt 2pt 3pt #00000036;
  border-color: #d8d8d8;
}

.popup-box-button:hover{
    background: #007bff;
    cursor: pointer;
    color: white;
}

.hover-highlightable{

}

.hover-highlightable:hover{
  background: #cfcfcf;
  cursor: pointer;
}

.hover-highlightable:hover .hidden-message{
  opacity: 1;
}

.hidden-message{
  position: absolute;
  z-index: 2;
  opacity: 0;
  font-family: sans-serif;
  bottom: -47pt;
  left: 50%;
  transform: translate(-50%);
  background: #404040;
  color: white;
  padding: 5pt;
  border-radius: 5pt;
  pointer-events: none;
  font-style: normal;
  transition: 0.2s;
}

.hover-highlightable:active{
  background: black;
  color: white;
}

#root-content-holder{
  display: flex;
}

.smooth-square-border{
  border-radius: 3pt;
}

.selectable-border-width{
  border-width: 2pt;
}

#main-title{
  font-size: 29pt;
  text-align: center;
  text-decoration: none;
}

.menu-title{
  background: white;
  font-weight: bold;
  padding: 11pt;
  border-bottom: 2pt solid #f3f3f3;
}

.menu-component{
  color: black;
  height: calc(100vh - 60pt);
  min-width: 180pt;
  max-width: 180pt;
}

@media (min-width: 1000px) {
  .menu-component{
    color: black;
    height: calc(100vh - 60pt);
    min-width: 203pt;
    max-width: 203pt;
  }
}

.desktop-menu-list{
  padding: 0pt;
  list-style: none;
  width: 100%;
  background: white;
  font-size: 16pt;
  height: 100%;
  color: black;
  max-height: 250pt;
  border-bottom: 2pt solid #f3f3f3;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}



::-webkit-scrollbar {
    /* width: 0px;
    background: transparent; */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.desktop-menu-list:-webkit-scrollbar {
  display: none;
}

.alert-danger{
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  border-radius: 0pt;
  padding: 0pt 7pt;
}





.menu-button {
  border-radius: 4pt;
  border: 1pt solid #d0d0d0;
  box-shadow: 0pt 3pt 6pt #ececec75;
  text-align: center;
  position: relative;
  width: 150pt;
  display: inline-block;
  padding: 4pt 10pt;
  cursor: default;
  margin: 0;
  transition: 0.1s;
}

@media (max-width: 900px) {
  .menu-button {
    border-radius: 4pt;
    border: 1pt solid #d0d0d0;
    box-shadow: 0pt 3pt 6pt #ececec75;
    text-align: center;
    position: relative;
    width: 80px;
    display: inline-block;
    padding: 4pt 10pt;
    cursor: default;
    margin: 0;
    transition: 0.1s;
  }
}

.menu-button::before {
	content: "";
	width: 0px;
	height: 0px;
	border: 0.8em solid transparent;
	position: absolute;
}

.menu-button.black-background::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 22pt solid transparent;
  position: absolute;
}

.menu-button.filter-selected{
  box-shadow: none;
  background: #87ceeb1f;
  border: 1px solid #93c6ff;
  border-top: none;

}

@media (max-width: 900px) {
  .menu-button.filter-selected{
    box-shadow: none;
    background: #87ceeb1f;
    border: 1px solid #93c6ff;
    border-top: none;
    width: 80px;
  }
}

.policy-menu-button{
  border-radius: 0pt 0pt 4pt 4pt;
  border-top:none;
}


#current-user-name{
  background: white;
  font-weight: bold;
  border-bottom: 2pt solid black;
  border-top: 2pt solid;
}

.anchor-link {
  display: block;
  margin: 0pt;
  margin-top: 15pt;
  text-align: center;
  color: #007bff !important;
  text-decoration: none !important;
  background-color: transparent !important;
  -webkit-text-decoration-skip: objects !important;
}

.anchor-link:hover{
  color: -webkit-link !important;
  text-decoration: underline !important;
  cursor: default !important;
}


.center-panel{
    flex-grow: 1;
    position: relative;
    width: fit-content;
    min-width: 410pt;
    margin: 0pt auto;
}

.center-panel-holder{
    padding: 0pt 0pt;
    overflow-y: scroll;
    margin: 0pt auto;
    height: calc(100vh - 110pt);
    padding-left: 15pt;
    padding-right: 15pt;
        margin-top: 45pt;
        min-width: 0;
        max-width: 660px;
}

@media (min-width: 1120px) {
  .center-panel-holder{
    padding: 0pt 0pt;
    overflow-y: scroll;
    margin: 0pt auto;
    height: calc(100vh - 110pt);
    padding-left: 15pt;
    padding-right: 15pt;
        margin-top: 45pt;
        min-width: 0;
        max-width: 100%;
}

}

.table-header{
  text-decoration: underline;
  text-align: left;
  padding: 15pt;
  padding-left: 10pt;
  white-space: nowrap;
}

.table-header-centered{
    text-decoration: underline;
    text-align: left;
    padding: 15pt;
    white-space: nowrap;
    text-align: left;
    padding-left: 23pt;
    position:relative;
}

.td-holder{
  display: flex;
  padding-top: 20pt;
}

@media (min-width: 950px) {
  .td-holder{
    display: flex;
    padding-top: 0;
  }
  
}

.table-guideline{
  height: 100%;
  border-bottom: 1px dotted #000000;
  flex-grow: 1;
  position: relative;
  bottom: -8pt;
  display: none;
}

@media (min-width: 950px) {
  .table-guideline{
    height: 100%;
    border-bottom: 1px dotted #000000;
    flex-grow: 1;
    position: relative;
    bottom: -8pt;
    display: block;
  }
}



.non-editable-label{
  background: white;
  padding-right:10pt;
  padding-top: 10pt;
}

@media (min-width: 950px) {
  .non-editable-label{
    background: white;
    padding-right:10pt;
    padding-top: 0;
  }
}

.table-label{
  margin-right: 8pt;
  white-space: nowrap;
}

.table-label-centered{
  margin-right: 0pt;
  margin-left: 0pt;
  white-space: nowrap;
  text-align: left;
  padding: 15pt 0pt;
}

@media (min-width: 1300px) {
  .table-label-centered{
    margin-right: 8pt;
    margin-left: 8pt;
    white-space: nowrap;
    text-align: center;
    padding: 8pt 0pt;
  }
}

.long-table-td{
  min-width: 200pt;
}

.table-td{
  max-width: 317pt;
  min-width: 178pt;
  padding: 9pt;
  margin: 9pt;
  text-align: left;
  font-size: 12pt;
  position: relative;
  display: flex;
}

@media (min-width: 950px) {
  .table-td{
    max-width: 317pt;
    min-width: 178pt;
    padding: 9pt;
    margin: 9pt;
    text-align: left;
    font-size: 12pt;
    position: relative;
    display: table-cell;
  }
}

@media (max-width: 800px) {
  .hideMobileSm {
    display: none !important;
  }
}

@media (max-width: 1300px) {
  .hideMobile {
    display: none !important;
  }
}

@media (max-width: 950px) {
  .hideMobileLg {
    display: none !important;
  }
}

@media (min-width: 800px) {
  .hideDesktopSm {
    display: none !important;
  }
}

@media (min-width: 950px) {
  .hideDesktopLg {
    display: none !important;
  }
}