@font-face {
  font-family: 'Arvo';
   src: url('../fonts/Arvo-Regular.ttf');
 }
@font-face {
  font-family: 'Arvo-Bold';
   src: url('../fonts/Arvo-Bold.ttf');
 }  
 @font-face {
  font-family: 'Arvo-Italic';
   src: url('../fonts/Arvo-Italic.ttf');
 }   
 @font-face {
  font-family: 'Montserrat';
   src: url('../fonts/Montserrat-Regular.otf');
 }  
 @font-face {
  font-family: 'Montserrat-light';
   src: url('../fonts/Montserrat-Light.otf');
 }  
 @font-face {
  font-family: 'Montserrat-hairline';
   src: url('../fonts/Montserrat-Hairline.otf');
 }

:root {
  --primaryBackground: #F9FBFC;
  --secondaryBackground: #474B4F;
  --tertiaryBackground: #61892F;
  --quaternaryBackground: lightgray;
  --primaryBorder: #474B4F;
  --primaryText: #474B4F;
  --primaryButtonText: #86C232;
  --activeBackground:#86C232;
  --inactiveBackground: #a9a9a9;
  --activeBorder: #86C232;
}

body {
  background-color: var(--primaryBackground);

  font-family:'Arvo';
  color: #232E3D;

}

/* This targets any element that can potentially have overflow */
.forceShowScroll::-webkit-scrollbar {
  width: 12px;  /* Adjust as needed */
}

.forceShowScroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 6px;  /* Half of the width value to create a pill shape */
}

.forceShowScroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}


.no-scroll {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.no-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}


.ql-container {
  font-family: 'Montserrat-light';
  font-size: 16px;
}
.ql-editor {
  height:auto;
}
.ql-container:hover {
  cursor:text;
}

.ql-container strong {
  font-family: 'Montserrat';
}
.ql-font-montserrat {
  font-family: 'Montserrat-light';
}

.ql-font-arvo {
  font-family: 'Arvo';
}
strong.ql-font-montserrat {
  font-family: 'Montserrat';
  font-weight: 400;
}
strong.ql-font-arvo {
font-family: 'Arvo-Bold';
font-weight:400;
}
.readOnly .ql-snow {
  border-style:none;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='montserrat']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='montserrat']::before
{
  content: 'Montserrat';
  font-family: 'Montserrat-light';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='arvo']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='arvo']::before
{
  content: 'Arvo';
  font-family: 'Arvo';
}


.freezeBackgroundScroll {
  overflow-y: hidden!important;
  overflow:hidden!important;
}
.autoY {
  overflow-y:auto!important;

}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block; /* For Firefox */
}


.percentSign {
  font-family: 'Arvo';
    width: 0px;
    text-align: center;
    position: relative;
    top: 164px;
    color: black;
    left:calc(90% - 20px);
}
.graphPercentSign {
  font-size: 11px;
  position: relative;
  top: -18px;
  left: calc(100% - 25px);
  width: 5px;
  color: black;
}
.emphasis {
  font-weight: 900;
  font-size: 120%;
  color: black;
  /* background-color: #003366; */
  /* color: white; */
  text-decoration: underline;
}

.withCommas {
  position: absolute;
  bottom: 47px;
  left: 48px;
  font-family: 'Arvo';
  color: black;
}

textarea {
width:100%;
outline:none;
font-family: 'Arvo';
font-size:16px;
padding: 10px;
resize: vertical;
border-style:solid;
border-width:1px;
border-radius:4px;
border-color: var(--primaryBorder);
outline:none;
min-height:90px;
}
div.rationaleInput {
width:calc(100% - 30px);
outline:none;
border-style:solid;
border-width:15px;
border-style:solie;
border-radius:4px;
border-color:white;
outline:none;
background-color:white;
box-shadow: 1px 1px 5px #444444;
min-height:80px;
}

textarea.rationaleInput {
  font-size:16px;
}

textarea:focus, input:focus {
border-color:darkgray;
}
/*.quillContainer {
 
    display: flex;
    overflow-y: auto;
    height: unset;
} */
.explainerBox {
  border-radius:5px;
  background-color:white;
  border-color:#555555;
  padding:20px;
  box-shadow:0px 1px 3px #555555;
  margin-bottom:20px;
}
.commentStreamUpvoteCount {
  font-family:'Montserrat';
  position:relative;
  color:#003366;
  margin-bottom:15px;
  margin-top:-15px;
  font-size: 16px;
  width: 220px;
  left: calc(100% - 225px);
  color: red;
  text-align: right;
}
.commentStreamUpvoteCount.fulfilled {
  color:#003366;
}
.commentStreamUpvoteCount.over {
  color:red;
}
.outerQuillContainer {
  height:200px;
  resize:vertical;
  overflow:auto;
  min-height:200px;
  border-radius:3px;
}
.outerQuillContainer.inFocus {
  border:1px solid rgb(204, 204, 204);
}
.quillEditor {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.ql-toolbar {
  border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
.ql-container.ql-snow {
  border-style:none;

}
.ql-toolbar.ql-snow {
  border-style:none;
  border-bottom:1px solid #ccc;
}
.ql-toolbar.hide {
  display:none;
}
/*
iframe.ql-video {
  width:90%;
  height:100%;
} */

.readOnlyQuill {
  border-style:none!important;
  /*display: flex; */
  overflow-y: auto;
/*  height: unset; */
 height: max-content; 
}
.readOnlyQuill .ql-editor {
  padding-left:0px;
  padding-right:0px;
}
.ql-editor .ql-video {
  width: 100%;
  aspect-ratio: 16/9;
}
.readOnlyQuill.noText {
  display:none;
}
.editCommentQuill {
  display: flex;
  overflow-y: auto;
  height: max-content; 
 /*height: unset;*/
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  min-height: 100px;
}

.placeholderMessage {
  text-align:center;
  font-size:32px;
}
.rationaleInput.wiki {
  min-height:200px;
}

.techHelp {
  font-size:15px!important;
  margin-top:50px!important;
  font-family:'Montserrat-light'!important;
}

.registrationFormLabel {
  text-align: left;
    font-family: 'Montserrat-light';
    margin-bottom: 5px;
}
.iti__country-list {
  width:250px;
}
#registrationBack {
  background-color: transparent;
    border-style: none;
    color: #003366;
    left: 0px;
    font-size: 15px;
    font-family: 'Montserrat-light';
}

a {color: var(--primaryButtonText);}

#loadingPage {
  position:fixed;
  top:100px;
  width:250px;
  left: calc((100% - 250px) / 2);
}

#questionNavBar {
font-family: 'Montserrat';
color: var(--primaryText);
border-radius: 3px;
padding: 3px;
display: inline-block;
font-size: 14px;
margin-left:-6px;
width:100%;
text-align:center;
}
#questionNavBar div{
display: inline-block;
padding: 5px;
border-radius: 3px;
text-align: center;
margin:5px;
}

#tagsMenuContainer {
  font-family: 'Montserrat-light';
  font-size:14px;
  text-align: center;
}
#tagListContainer {
    position: fixed;
    left: 220px;
    top: 220px;
    padding:10px;
    font-size:14px;
    background-color: white;
    border-radius: 3px;
    font-family: 'Montserrat-light';
   box-shadow: 1px 1px 5px lightgray;
   z-index: 13;

  /* width:calc(100% - 22px); */
  }
#addNewTag {
  font-family:'Montserrat';
  margin-bottom:10px;
  margin-top:5px;
  text-align:center;
  color: #232E3D;
}
#addNewTag:hover {
  cursor: pointer;
  text-decoration: underline;
}
#tagListSubcontainer, .listSubcontainer {
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  width:100%;
}
.selectedTagsDisplay {
  position: relative;
}
#tagListContainer.edit, .listSubcontainer.edit {
  position: relative;
  top: 0px;
  left: 0px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  box-shadow: none;
  border-bottom-style: solid;
  border-right: solid;
  border-left-style: solid;
  border-width: 1px;
  overflow-y:auto;
  z-index:14;
}
.tag {
    background-color: #D3DEEA;
    color: #232E3D;
    border-radius: 3px;
    padding: 5px;
    margin: 5px;
    margin-right:0px;
    margin-left: 0px;
    text-align: center;
}
.facebookResult {
  color: #003366;
    margin: 5px;
    padding:5px;
    font-family: 'Montserrat';
    text-align: left;
    border-bottom-style: solid;
    border-radius: 0px;
    border-bottom-width: 1px;
    border-bottom-color: lightgray;
}

.facebookResult .remove:hover {
  cursor: pointer;
}

.tag.team {
 width: calc(100% - 20px);
}
#communityTeamContainer.team {
  display:inline-block;
  margin-left:5px;
  margin-top:-3px; 
  max-width:235px;
}
.tag:hover, .facebookResult:hover {
  cursor: pointer;
  text-decoration: underline;
}
.facebookResult.selected:hover {
  cursor: default;
  text-decoration: none;
}

.tag.isSelected {
  background-color: #232E3D;
  color:white;
  font-size:14px;
}
.tag.isSelected:hover {
  text-decoration: none;
}
#selectedTagsContainer .tag.isSelected:hover::after {
  content: '+';
  transform: rotate(45deg);
  color: #003366;
  font-size: 14px;
  height: 15px;
  width: 15px;
  border-radius: 15px;
  text-align: center;
  background-color: white;
  font-family: Arial;
  margin-right: -15px;
  margin-top: -10px;
  float: right;
}
.tag.mini {
  flex: auto 1;
  width: auto;
  font-size: 11px;
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 2px;
  margin-left: 2px;
  margin-top: 2px;
  margin-bottom: 2px;
}

#adminTagInputContainer {
  
  vertical-align: top;

}
.multiSelectBox {
  background-color: #f0F1F5;
  border-radius: 3px;
  display:flex;
  flex-wrap: wrap;
}
.multiSelectBox:hover {
  cursor: pointer;
}
.multiSelectBox .item {
  flex-grow: 1;
  text-align: center;
  font-size: 13px;
  font-family: 'Montserrat-light';
  padding:5px;
  width: 60px;
}
.multiSelectBox .item.isMax::after {
  content: '+';
}
.multiSelectBox .item.isSelected {
  background-color: #141F33;
  color:white;
}

.customDropdownContainer {
  position:absolute;
}

.team #adminTagInputContainer {
  position:absolute;
  z-index: 11;
  top: -20px;
  min-width:235px;
} 
.setDescription #adminTagInputContainer {
  width:225px;
}
#adminTagInputContainer #tagQuery {
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
  width: 100%;
  padding:2.5px;
  margin-top: 10px;
  border-radius: 3px;
}
.customDropdownContainer .query, .customDropdownContainer.query {
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
  width: 100%;
  padding: 5px;
  border-radius: 3px;
  padding-left: 10px;
  padding-right: 10px;

}

#adminTagInputContainer #tagQuery.edit:focus, .customDropdownContainer .query.edit:focus {
  outline:none;
}
#adminTagInputContainer #tagQuery.edit.active, .customDropdownContainer .query.edit.active {
  outline: none;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-color: #555555;
  border-bottom-color: lightgray;
  padding: 8px;
  position: relative;
    z-index: 11;
}
.inlineTagContainer {
  display:inline-block;
  font-family: 'Montserrat-light';
}
.removeTag {
  color: red;
    font-family: 'Montserrat-light';
    font-size: 9px;
    text-align: center;
}

.removeTag:hover {
  cursor: pointer;
  text-decoration: underline;
}
.tag.team.isSelected:hover::after {
  color:red;
  content: "  Remove";
  text-decoration: underline;
}

.hoverTagMessage {
  display:none;
}

#removeAllFilters {
  background-color: transparent;
    border-style: none;
    font-size: 11px;
    margin-right: 4px;
    margin-top: 3px;
    font-family: 'Montserrat-light';
}
#selectedTagsContainer {
  border-spacing: 2px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 5px;
  width: calc(100% - 20px);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
}

#tagQuery {
  font-family:'Montserrat-light';
  text-align: center;
  width: calc(100% - 25px);
    border-style: solid;
    border-color: white;
    border-radius: 3px;
    width:100%;
}
#tagQuery.hasSelectedTags {
  width:calc(100% - 20px);
}

#searchNavContainer {
  text-align: left;
    margin-bottom: 10px;
}

.innerNavButton {
  font-family: 'Montserrat';
  color: var(--primaryText);
  border-radius: 3px;
  padding: 3px;
  display: inline-block;
  font-size: 14px;
  display: inline-block;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 3px;
  text-align: center;
}


#questionNavBar div:hover, .innerNavButton:hover {
cursor: pointer;
background-color: var(--quaternaryBackground);
color:var(--primaryText);

}

.timeEstimate {
  display: inline-block;
  background-color: lightgray;
  padding: 5px;
  color: #003366;
  border-radius: 5px;
  margin-right: 15px;
  margin-left: 15px;
  vertical-align: top;
  margin-top: 7px;
}

#toDoListsContainer {
  padding:20px;
  background-color: lightgray;
  border-radius: 5px;
  margin-bottom:20px;
}
.setToDoList {
  /*display: inline-block; */
  text-align: left;
  background-color:#003366;
  color:white;
  font-family:'Montserrat-light';
  text-align: center;
  padding:20px;
  border-radius:5px;
  vertical-align: top;
    margin: 5px;
}
.stepToDoList {
  /*display: inline-block;
  margin-left:15px;
  text-align: left; */
  display: inline-block;
    margin-left: 15px;
    margin-bottom: 10px;
    text-align: left;
    padding: 15px;
    border-radius: 3px;
    background-color: #204d79;
}

.setToDoList.disagree {
border-style:solid;
border-width:10px;
border-color:red;
}
.asterisk {
  display: none;
  font-size: 50px;
  color: red;
  font-family: 'Montserrat';
  line-height: 10px;
  position: absolute;
  margin-top: 13px;
  margin-left: -20px;
}
.asterisk.disagree {
  display: inline;
}
.notifAvatarContainer:hover {
  cursor: pointer;
}

#questionNavBar div.active, .innerNavButton.active {
background-color: white;
color: var(--primaryButtonText);
border-style: solid;
border-width: 1px;
}

#statAnalysisContainer iframe {
height: 100%;
width: 100%;
border-style: solid;
border-width: 1px;
border-radius: 4px;
}

#loadingMessage {
  font-size:24px;
  color:white;
  padding-top:25px;
  font-family:"Montserrat-hairline";
}

#bodyContainer {
/* 12/6/22 min-height: 1000px; */ /* will cover the 100% of viewport */
height:calc(100vh - 110px); /* new 12/6/22*/
display: block;
position: relative;
/* REMOVED AUGUST 27 2024 padding-bottom: 100px; */ /* height of your footer */
/*what the fuck is this. removed jan 19 2026 width: calc(100% + 16px); */
left: -8px;
top:-8px;
/*overflow-y:auto; */
}

.footer { 
  position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 13px;
    padding-bottom: 30px;
    margin-top: 120px;
    top: calc(100% - 10px);
  /*
  position: relative;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding-bottom: 20px;
  margin-top: 120px;
  */
}

#logo {
width: 250px;
position: absolute;
left: -20px;
top: -20px;
}
#loginContainer {
position: relative;
left: calc((100% - 250px) / 2);
text-align: center;
width: 250px;
min-width: 200px;
}
#loginContainer img {
width:100%;
margin-top:100px;
margin-bottom:20px;
}

#registerContainer {
  position: relative;
  left: calc((100% - 250px) / 2);
  text-align: center; 
  width: 250px;
  min-width: 200px;
}
#registerContainer.expanded {
  width: calc(100% - 100px);
  left:50px;
  max-width:800px;
}
@media(min-width:900px) {
  #registerContainer.expanded {
    left: calc((100% - 800px) / 2);
  }
  #registerContainer.expanded.signedIn {
    left: 50px;
  } 
}

#registerContainer img {
  width:100%;
  margin-top:100px;
  margin-bottom:20px;
}

.stripeAccountContainer {
  position: relative;
  width: 250px;
  left: calc((100% - 250px) / 2);
}
.stripeAccountContainer .label {
  font-family: 'Montserrat';
  color: #003366;
}
.stripeAccountContainer input {
 width:100%;
  font-family:'Montserrat-light';
}

#scoresContainer {
  position: relative;
  left: calc((100% - 250px) / 2);
  text-align: center;
  width: 250px;
  min-width: 200px;
}

#scoresContainer img {
  width:100%;
  margin-top:100px;
  margin-bottom:20px;
}

.formInput {
font-family: "Arvo";
margin-bottom: 10px;
background-color: white;
border-radius: 3px;
font-size: 18px;
width: 100%;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: var(--primaryBorder);
}
.formButton {
width: 100%;
font-family: 'Montserrat-hairline';
font-size: 18px;
background-color: gray;
color: white;
border-style: none;
border-radius: 3px;
padding: 5px;
}
.formButton:hover:disabled {
cursor:default;
}

.formButton.enabled {
background-color: #141F33;
}
.formButton.saved {
  font-family:'Montserrat-light'!important;
  background-color:#ff9f40;
}

.formButton.saved.blue {
  background-color:blue;
}
.formButton.saved.orange {
  background-color:darkorange;
}
.formButton.saved.red {
  background-color:red;
}

.topHead {
  font-size:48px;
}
.subHead {
text-align: center;
  font-family:'Montserrat';
  font-size:40px;
}
.bodyContainer {
  position:relative;
  width:90%;
  left:5%;
  top:30px;
}
.gif {
position:relative;
  margin:20px;
  max-height:420px;
  width: 561px;
display:inline-block;
}
img.hidden {
  display:none;
}

#typingGif {
  width: 100px;
    margin-top: -20px;
}
.userWorkingMessage {
  font-family: 'Montserrat-light';
    text-align: center;
}
.commentImage:hover {
  cursor:pointer;
  border-style:solid;
  border-color: var(--activeBorder);
  border-radius:3px;
  border-width:1px;
  padding:3px;
}

#shadowBox {
  position: fixed;
  top:0px;
  left:0px;
  z-index: 4;
  width:100%;
  height:100%;
  overflow-y:auto;
  background-color:rgba(0, 51, 102, .8);
}
#shadowBox img {
  position: relative;
  top: 50px;
}
#shadowBox button {
  background-color: transparent;
    float: right;
    position: absolute;
    top: 20px;
    /* margin-right: 100px; */
    left: calc(100% - 100px);
    color: white;
    font-size: 18px;
    border-style: none;
    text-decoration: underline;

}

#gifContainer {  
text-align: center;
  width:100%;
}
#gifContainer img {
  max-height:400px;
}

.slidecontainer {
width:200px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;   
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
#timeSliderContainer {
  position: relative;
  top:-10px;
}
#timeSliderLabel {
  text-align: center;
  font-family: 'Montserrat-light';
  margin-bottom: -10px;
}

.timeSlider {
  position: relative;
    left: 50px;
    width: calc(100% - 100px)!important;
}

.curtain {
  position: absolute;
  top: 60px;
  height: 250px;
  width: 401px;
  left: 69px;
  background-color: white;
}

.gifSubcontainer {

  width: 560px;
  width: 560px;
  box-shadow: 1px 1px 5px #444444;
  border-radius:10px;
}
#forecastHistoryContainer {
  text-align:center;
}

#teamTimestampsContainer {
  position: absolute;
  background-color: white;
  width: 360px;
  left: calc((100% - 360px) / 2);
  margin-top: -7px;
  z-index: 2;
  overflow-y: auto;
  border-radius: 4px;
  box-shadow: 1px 1px 3px var(--secondaryBackground);
}
.teamTimestampRow {
    padding-right: 10px;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;

    margin-bottom: 1px;
}

.teamTimestampRow.isStale {
  background-color:#f6c9ce;
}
.teamTimestampRow.inFocus {
  display: inline-block;
  position: relative;
  top: -10px;
}

span.isStale2 {
  color:#982a24;
}
#toggleTimestamps {
  position: relative;
  top: -15px;
/*  left: calc((100% - 250px) / 2) */
}

#controlsContainer {
width: 150px;
background-color: #fec032;
padding: 20px;
position: fixed;
left: calc(100% - 190px);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 1px 1px 5px #444444;
z-index:10;
}
#controlsContainer button {
  font-size: 14px;
  font-family: Arvo;
  font-weight: 600;
  background-color: #fec032;
  border-style: solid;
  border-color: white;
  border-width: 2px;
  color: white;
  width: 100%;
  padding: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 5px;
  margin-bottom: 5px;
}
#controlsContainer button:hover {
  background-color:#d63eb6;
  color:white;
  border-color:#d63eb6;
  cursor: pointer;
}
#techTreeContainer {
  width:calc(100% - 66px);
  padding:20px;
  overflow-x: scroll;

}
#techTreeContainer img {
  max-height: 300px;
}
#techTreeOverlay {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-x: scroll;
}

/* navbar styling */

#leftNavBar {
position: fixed;
height: calc(100% + 220px);
top:-110px;
width: 200px;
background-color: var(--secondaryBackground);
color:white;
text-align: right;
}

#explanationDiv, #explanationDiv2 {
  font-family: 'Montserrat-light';
  text-align: center;
  background-color: var(--quaternaryBackground);
  color: var(--primaryButtonText);
  padding: 25px;
  border-radius: 3px;
  margin-bottom: 20px;
}

#expandLink {
  font-family: 'Montserrat-light';
  text-decoration: none;
  background-color: var(--activeBackground);
  color: white;
  padding: 3px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 3px;
  position: relative;
  top: -40px;
  float: right;
  margin-right: 5%;
}
.discussionData {
  position:relative;
  margin-bottom:10px;
  padding-top:10px;
}

#expandLink.stats {
  top:5px;
  margin-right:0px;
}
#modeMessage {
  font-family: 'Montserrat-hairline';
  font-size: 11px;
  position: relative;
  top:160px;
  width: 100%;
  text-align: center;
  left: 0px;
  color: white;
  border-radius: 3px;
}
#timeMessage {
 display:inline;
}

/* Tooltip text */
#modeMessage .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: var(--activeBackground);
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 10000000000000000;
  top: 20px;
  left: 5px;
}
#timeMessage .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: var(--activeBackground);
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 10000000000000000;
  top: 50px;
  font-size: 11px;
  font-family: 'Montserrat-light'
}

.effectSizeLabel {
  display: inline-block;
  font-size: 12px;
  margin-right: 15px;
  margin-left: 15px;
  font-family: 'Montserrat-light';
}

.effectSizeLabel.blue {
  color:blue;
  font-family:'Montserrat';
}

.effectSizeLabel.orange {
  color:darkorange;
  font-family:'Montserrat';
}
.effectSizeLabel.red {
  color:red;
  font-family:'Montserrat';
}
.rangeSlider {
  width:300px!important;
}
.rangeSlider.blue {
  --primaryButtonText: blue;
  --activeBackgroundColor: blue;
  --activeBorder: blue;
  --activeBackground:blue;
}
.rangeSlider.orange {
  --primaryButtonText: darkorange;
  --activeBackgroundColor: darkorange;
  --activeBorder: darkorange;
  --activeBackground:darkorange;
}
.rangeSlider.red {
  --primaryButtonText: red;
  --activeBackgroundColor: red;
  --activeBorder: red;
  --activeBackground:red;
}

/* Show the tooltip text when you mouse over the tooltip container */
#modeMessage:hover .tooltiptext, #timeMessage:hover .tooltiptext {
  visibility: visible;
}

#questionLeftNavContainer {
  position: relative;
margin-top:200px;
max-height:calc(100% - 490px);
overflow-y:auto;
overflow-x:visible;
}


#viewMoreArrow {
  margin-top:20px;
  margin-bottom:5px;
  width:100%;
  text-align: center;
  font-family:'Montserrat-light';
  color:#003366;
}
#viewMoreArrow:hover {
  cursor: pointer;
}
#viewMoreArrow.top {
  position:relative;
  top:220px;
  margin-top:15px;
  margin-bottom:-20px;
}
.questionSetNavButton {
font-family:'Montserrat-light';
font-size:14px;
padding:4px;
padding-right:10px;
background-color:'#55555';
border-bottom-style:solid;
border-bottom-color:var(--secondaryBackground);
border-bottom-width: 1px;
background-color:var(--tertiaryBackground);
}


#activityMenuItem {
  font-family:'Montserrat-hairline';
  text-align: left;
  padding-left: 20px;
  position: relative;
  top:155px;
  
}

#enableTaggingButton, #disableTaggingButton {
  font-family: 'Montserrat';
  font-size:13px;
}

#enableTaggingButton:hover, #disableTaggingButton:hover {
  cursor: pointer;
  text-decoration: underline;
}
#profileDiv {
  margin-bottom:20px;
}

#activityMenuItem:hover {
  cursor: pointer;
}

#activityMenuItem.isSelected {
  text-decoration: underline;
}

.activityHeader {
  font-family:'Montserrat'
}


/* begin toggle open response */
.emailSetting {
  width:100%;
  margin-bottom:10px;
  margin-left:20px;

}
.emailSettingDescription {
  width: 220px;
  font-family: 'Montserrat-light';
  display:inline-block;
}
#toggleEmailContainer {
  display: inline-block;
  position: relative;
  /*left: calc(100% - 200px);*/
  width: 220px;
  height: 22px;
  font-family: 'Montserrat';
  border-radius: 6px;
	overflow: hidden;
	user-select: none;
	cursor: pointer;
}
.toggleEmail a {
	text-decoration: none;
	opacity: .6;
	padding: 60px;
	font-weight: bolder;
	position: absolute;
	right: 0px;
	bottom: 0px;
	font-size: 1.4em;
}

.toggleEmail a:hover {
	opacity: 1;
}

.toggleEmail .inner-container {
	position: absolute;
	left: 0;
	top: 0;
	width: inherit;
	height: inherit;
	text-transform: uppercase;
	font-size: .6em;
  letter-spacing: .2em;
 
}

#toggle-container {
  clip-path:inset(0 50% 0 0);
  -webkit-clip-path:inset(0 50% 0 0);
  background-color:var(--activeBackground);
}

#toggle-container.isOn {
  clip-path: inset(0 0 0 50%);
  -webkit-clip-path:inset(0 0 0 50%);
  background-color:var(--activeBackground);
}

.toggleEmail .inner-container:first-child {
	background: #e9e9e9;
	color: #a9a9a9;
}

.toggleEmail .inner-container:nth-child(2) {
	background: var(--activeBackground);
	color: white;
  clip-path: inset(0 50% 0 0);
  -webkit-clip-path:inset(0 50% 0 0);
	transition: .3s cubic-bezier(0,0,0,1);
}

.toggleEmail .toggle {
	width: 50%;
	position: absolute;
	height: inherit;
	display: flex;
	box-sizing: border-box;
}

.toggleEmail .toggle p {
  position: relative;
  margin: auto;
 
}

.toggleEmail .toggle:nth-child(1) {
	right: 0;
}
/* end toggle container */


.clickableSet:hover {
    text-decoration: underline;
    cursor: pointer;
}
body.vp-center {
  height:unset!important;
}

.surveyQuestionContainer .rationaleInput {
  min-height:350px!important;
}

.achCell {
  text-align:center;
  background-color:lightgray;
  color:#003366;

}
.achCell.isLast {
  border-top-right-radius:4px;
  border-bottom-right-radius: 4px;
}


.mcAnswerOption {
  padding: 10px;
  background-color: #dfe3ef;
  border-radius: 4px;
  margin:2.5px;
  border-style:solid;
  border-width:1px;
  border-color:transparent;
  font-family: 'Montserrat-light';
  font-size:14px;
  text-align:center;
}
.alignLeft .mcAnswerOption {
  width:fit-content;
}
.mcFeedback {
  text-align: center;
}
.mcFeedbackText {
  color:#003366;
  font-style: italic;
}

.mcFeedback.correct .incorrect {
  display:none;
}
.mcFeedback.incorrect .correct {
  display:none;
}

.mcAnswerOption.scale {
  display:inline-block;
}

.scaleText {
  display: inline-block;
  width: 20%;
  margin-right: 15px;
  vertical-align: middle;
  text-align: left;
}
.scaleText.isTypeTen {
  vertical-align: top;
}

.scaleRowContainer {
  margin-bottom: 15px;
  text-align: center;
}

.mcAnswerOption.isSelected {
  background-color:#232E3D;
  
  color:white;
}
.forecastInputContainer.scale {
  padding-top: 35px;
  margin-bottom:35px;
}
.forecastInputContainer.scale.googleWiki {
  width: 95%;
  left: calc(2.5% - 20px);
}
#otherTextArea {
  display: inline-block;
    width: calc(80% - 130px);
    height: 40px;
    min-height: 0px;
}

#mcPrompt {
  margin-bottom: 10px;
    font-size: 20px;
    text-align: center;
    font-family: 'Montserrat-light';
}
.mcAnswerOption:hover {
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-color: var(--activeBorder);
}


#mcPlaceholderText {
  padding-top:15px;
  padding-left:14px;
  position: absolute;
}
#progressBarContainer {
  margin-bottom:15px;
}

.selectFeedback {
  padding: 10px;
    border-style: solid;
    text-align: center;
    font-family: 'Montserrat-light';
    border-width: 1px;
    border-radius: 4px;
    color: white;
    background-color: #003366;
}
.selectFeedback.showingFeedback {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-style:none;
  background-color:#F9FBFC;
  box-shadow: 1px 1px 3px var(--secondaryBackground);
  color: #003366;
  padding-top: 15px;
  padding-bottom: 15px;
}
.selectFeedback:hover {
  cursor: pointer;
  text-decoration: underline;
}

.feedbackDropdown {
  position: relative;
  z-index: 1;
  background-color: white;
  box-shadow: 1px 1px 3px var(--secondaryBackground);
  margin-bottom:20px;
}
.feedbackItem {
  padding:10px;
  text-align: center;
  padding-top:15px;
  padding-bottom:15px;
  background-color:#F9FBFC;
}
.feedbackItem:hover {
  cursor: pointer;
  color:#003366;
}
#switchCondition {
  display: inline;
    background-color: #003366;
    color: white;
    border-radius: 3px;
    border-style: none;
    font-family: 'Montserrat-light';
    margin-left: 3px;
    font-size: 11px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.qid, .editQ {
  font-family: 'Montserrat';
    font-size: 8px;
    position: absolute;
    top: 5px;
    left: calc(100% - 25px);
}
.editQ {
  left:10px;
  color:#003366;
}
.editQ:hover, .toggleCompleters:hover{
  text-decoration: underline;
  cursor: pointer;
}
#expandedNodeContainer .qid, #expandedNodeContainer .editQ {
  display: none;
}
.toggleCompleters {
  font-family: 'Montserrat';
    font-size: 8px;
    position: relative;
    top: -15px;
    left: calc(100% - 15px);
    color:#003366;
}

.editSet {
  font-family: 'Montserrat';
    font-size: 8px;
    color: #003366;
    float: right;
    position: relative;
    right: 20px;
    top:-15px;
}
.codeButton, .textButton {
  font-family: 'Arvo';
  color: #003366;
  float: right;
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-radius: 3px;
  font-size: 11px;
}
.textButton {
  font-family: 'Montserrat-light';
}
.codeButton:hover, .textButton:hover {
  cursor: pointer;
}
.codeButton.isSelected, .textButton.isSelected {
text-decoration: underline;
}

.editSet:hover {
  text-decoration: underline;
  cursor: pointer;
}
#editQuestionContainer {
  position: fixed;
  z-index: 2;
  top: 100px;
  max-height: calc(100% - 150px);
  overflow-y: auto;
  background-color: #F9FBFC;
  /*width: calc(100% - 500px);
  max-width: 500px;
  left: calc((100% - 500px) / 2); */
  width: calc(75% - 150px);
  left: 25%;
  border-radius: 4px;
  padding: 20px;
  font-family: 'Montserrat';
  box-shadow: 1px 1px 3px var(--secondaryBackground);
  resize: both;
}

#editQuestionContainer.code {
  left: calc(190px + 5%);
  top: 75px;
  max-width: calc(90% - 240px);
}

.editQBox {
  font-family: 'Montserrat-light'!important;
  padding:8px;
  border-style:solid;
  border-width: 1px;
  border-radius: 3px;
  padding-right:10px;
  padding-left:10px;
}
div.editQBox {
  color:#000000;
}
div.editQBox:focus {
  outline:none;
}

.editCodeBox {

  padding:8px;
  border-style:solid;
  border-width: 1px;
  border-radius: 3px;
  padding-right:10px;
  padding-left:10px;
}

code.edit {
  display:inline-block;
  max-width:100%;
  white-space: normal;
}
code.edit:focus {
  outline: none;
} 
.closePopup {
  color:#003366;
  font-family: 'Montserrat';
  font-size: 16px;
  float: right;
  margin-top: -10px;
  margin-right: -10px;
}
.closePopup:hover {
  cursor: pointer;
}
#saveQuestionEdits {
  float: right;
    font-size: 13px;
    margin-bottom: -10px;
    margin-right: -15px;
}

.stepInfoContainer {
  display: inline-block;
  margin:5px;
  background-color: #1a4d80;
  border-radius: 4px;
  padding: 10px;
  padding-right: 15px;
  padding-left: 15px;
  border-style:solid;
  border-width:1px;
  border-color:#1a4d80;
}
.stepInfoContainer:hover {
  cursor: pointer;
  border-color:white;
}

input[type='date']:empty:after  {
  color: #003366;
  content: attr('mm/dd/yyyy');
  font-family:'Montserrat-light';
}


#optOutContainer {
  font-family: 'Montserrat-light';
  font-size: 11px;
  background-color: lightgray;
  border-style: solid;
  border-width: 1px;
  border-color: darkgray;
  color: #003366;
  border-radius: 3px;
  padding: 10px;
  width: 460px;
}
#stageTasks {
  text-align: left;
  padding: 15px;
  background-color: white;
  border-style: solid;
  border-color: lightgray;
  border-radius: 3px;
}
#optOutContainer.isOptedOut {
  background-color: #fec032;
  color: white;
  border-color: #fec032;
}
.optOutButton {
  text-decoration: underline;
  font-family: 'Montserrat';
}
.optOutButton:hover {
  cursor: pointer;
}
#teammateQuota {
  position: relative;
    width: fit-content;
    font-family: 'Montserrat-light';
    text-decoration: underline;
    color: #003366;
    padding: 5px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 5px;
    left: calc(100% - 150px);
    margin-bottom: -20px;
}
#teammateQuota.blocked {
  left: calc(100% - 195px);
  font-family: 'Montserrat-light';
  background-color: red;
  color: white;
  text-decoration: none;
}
#blockedByQuotaMessage {
  font-family: 'Montserrat-light';
  text-align: center;
  background-color: lightgray;
  padding: 20px;
  border-radius: 5px;
  color: red;
}
.noForecasts {
  color:red!important;
}
#progressTrackerTable {
  width:100%;
  margin-top:0px;
}

#progressTrackerTable td {
  color:transparent;
  background-color: darkgray;
  text-align: center;
  font-family: 'Montserrat-light';
  color:white;
}

#progressTrackerTable td.isInStage {
  background-color: #fec032;
}

#progressTrackerTable td.satisfied {
  background-color:green;

}
#progressTrackerTable td.unsatisfied.isInStage.isRequired {
  background-color:red;
}

#progressTrackerTable td div:hover{
  text-decoration: underline;
  cursor: pointer;
}
/*
#progressTrackerTable td:hover {
  color:white;
  text-decoration: underline;
  cursor:pointer;
  } */
  #progressTrackerTable td.question {
    background-color: white!important;
    color: #555555;
    text-align: center;
    font-family: 'Montserrat';
  }
  
  #progressTrackerTable td.question:hover {
  color:#003366;
  text-decoration: underline;
  cursor:pointer;
  }


#taskLegendContainer {
  text-align:left;
}
.tasksLegend {
  display: inline;
    color: white;
    padding: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 2px;
}
.tasksLegend.red {
  background-color: red;
}
.tasksLegend.green {
  background-color: green;
}
.tasksLegend.yellow {
  background-color: #fec032;
}
.tasksLegend.gray {
  background-color: darkgray;
}

.progressBarItem {
  display: inline-block;
  font-family: 'Montserrat-light';
  background-color:#1a4d80;
  color:white;
  border-radius:5px;
 /* background-color: var(--quaternaryBackground);
  color: var(--tertiaryBackground); */
  padding: 10px;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom:2px;
}
.progressBarItem:hover{
  cursor: pointer;
}
.progressBarItem.isSelected {
  background-color: white;
  color: var(--primaryButtonText);
  border-style: solid;
  border-width: 1px;
  border-color:var(--activeBorder);
}
.progressBarItem.isCompleted {
 /* background-color:#555555;
  color: white; */ 
 /* text-decoration: line-through; */
 font-style: italic;
  background-color:rgb(255, 159, 64);
  color:white;
}
.mText {
  font-size: 120%;
  color:var(--primaryButtonText);
  font-weight:600;
}

.mWarning {
  font-size:120%;
  background-color:var(--activeBackground);
  color: white;
  padding: 15px;
  border-radius: 4px;
  margin-top:10px;
}
.mWarning.stop {
  background-color:red;
}

.mQuote {
  font-style: italic;
}

.forecastInputContainer.scale.automaton {
  display:none;
}

.forecastInputContainer.scale.automaton.showingChart {
  display:block;
}

#feedbackContainer {
  padding: 25px;
  background-color: white;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--primaryBorder);
}

#feedbackContainer img {
  max-width:100%;
}

.staticFeedback {
    text-align: center;

}
.scoreRow {
  margin-top:15px;
}
.scoreRow div {
  display: inline;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: var(--quaternaryBackground);
}
.scoreRowName {
  font-family:'Montserrat';
}
#scoresTable, #mcScoresTable {
  text-align:center;
  margin-top:15px;
  width:100%;
}

#mcScoresTable .scoreRowName {
  background-color: #ff9f40!important;
  color:white;
}

#scoresTable td, #mcScoresTable td {
  background-color:var(--primaryBackground);
}
#mcScoresTable td {
  min-width:150px;
}
#mcScoresTable td.submission {
  background-color:#f6c9ce;
}
#mcScoresTable td.submission.isCorrect {
background-color: green;
color:white;
}

tr.processGain, .processGain td {
  background-color:green!important;
  color:white;
}

#moveOnButton, #checkForNew {
  text-align: center;
    background-color: var(--activeBackground);
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 4px;
    font-family: 'Montserrat-light';
    color: white;
    font-size: 18px;
}

#brierExplanation {
  font-family: 'Arvo';
  font-size:16px;
  text-align: left;
}

#moveOnButton:hover, #checkForNew:hover{
  cursor: pointer;
border-style: solid;
border-width:1px;
border-color: var(--activeBorder);
}

#checkForNew {
  margin-top: 10px;
}

#moduleExplanationDiv {
  background-color: white;
    border-style: solid;
    border-color: var(--primaryBorder);
    border-width: 1px;
    padding: 25px;
    font-family:'Montserrat-light';
    text-align:center;
    font-size:20px;
}
#moduleExplanationDiv #explanationText {
  font-family: 'Arvo';
  text-align: left;
  font-size:18px;
}


.progressBarItem.isSelected.isCompleted {
  text-decoration: underline;
}

.questionNavButton.isLastMenuItem {
  margin-bottom:60px;
}
#updateCountBadge.isLastMenuItem, #hoverBlock.isLastMenuItem{
  margin-top:-83px;
}
#metaDataContainer.isLastMenuItem {
  margin-top:-60px;
}

#metaDataContainer {
  position: absolute;
  z-index:10;
  width:0px;
  height:0px;

}
#hoverBlock {
  width: 20px;
    height: 20px;
    position: absolute;
    left: 161px;
    margin-top: -23px;
    background-color: transparent;
}

#metaDataSubContainer {
  position: absolute;
  left:10px;
  border-radius: 3px;
  box-shadow: 1px 1px 3px var(--secondaryBackground);
  font-family:'Montserrat-light';
  font-size:11px;
  color:var(--primaryText);
  padding: 10px;
  text-align: left;
  width:160px;
  background-color:white;
}



#updateCountBadge {
  background-color: red;
    position: absolute;
    left: 155px;
    margin-top: -23px;
    color: white;
    font-size: 12px;
    font-weight: 400;
    font-family: 'Arvo';
    border-radius: 50%;
    line-height: 15px;
    text-align: center;
    margin-left: 7px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}

#updateCountBadge.isNonZero {
  background-color: var(--activeBackground);
  padding-right: 7px;
  padding-left: 7px;
}

#notificationBadge {

    /* display: inline-block; */
    background-color: red;
    color: white;
    font-size: 9px;
    /* font-weight: 400; */
    display: flex;
    justify-content: center;
    font-family: 'Arvo';
    border-radius: 50%;
    min-width: 10px;
    /* flex-grow: 1; */
    height: 10px;
    line-height: 10px;
    text-align: center;
    position: absolute;
    font-family: 'Montserrat';
    /* margin-left: 40px; */
    margin-top: -5px;
    margin-left: 35px;
    padding: 3px;

}
#notificationBadge:hover {
  cursor: pointer;
}

#parentCommentContainer {
  padding:10px;
  padding-bottom:0px;
}

.pingGroupContainer {
  border-style:solid;
  border-color:var(--primaryBorder);
  border-radius:4px;
  border-width:1px;
  margin-bottom:10px;
  padding:15px;
  padding-top:5px;
  font-family:'Montserrat';
}
#allPingGroupsContainer {
  max-height:400px;
  overflow-y:auto;
}
#fullChat #allPingGroupsContainer {
  max-height: none;
}

.pingGroupContainer.unread {
  border-color:red;
}

.pingGroupContainer div {
  display:inline-block;
}
.pingGroupContainer:hover {
  border-color:var(--activeBorder);
  cursor: pointer;
}
.pingTimestamp {
  font-family:'Montserrat-light';
  text-align:right;
  flex-grow:1;
}



#activeConversation {
  min-height: 320px;
  max-height:320px; 
  overflow-y:auto;
  border-style: solid;
  border-color: var(--primaryBorder);
  border-radius: 4px;
  border-width: 1px;
  padding: 15px;
  text-align: left;
  margin-bottom: 10px;
  background-color: var(--primaryBackground);
  width:calc(100% - 35px);
}
#rightNavBar2 #activeConversation {
  max-height: unset;
    height: calc(100vh - 240px);
}

#fullChat {
  position:fixed;
  height:calc(100% - 74px);
  width:calc(100% - 200px);
  background-color:#fcfbfa;
  top:74px;
  overflow-y:auto;
  z-index:3;
}

#activeConversation.fullScreen {
  min-height:calc(100% - 270px);
  max-height:calc(100% - 270px);
}

.grv-widget-tag.grv-widget-tag-bottom-right {
  margin-right:-10px;
  margin-bottom:-10px;
}

.grv-widget-tag.grv-widget-tag-bottom-right.grv-widget-open {
  margin-right:0px;
  margin-bottom:0px;
}

#pingTextArea {
  min-height: 60px;
  height: 60px;
  font-family: 'Montserrat-light';
    font-size: 14px;
}

.pingCommentContainer {
  padding-right: 15px;
  margin-bottom: 10px;
}
.pingCommentContainer .text {
  /*margin-left: 65px; 1/23/24 */
  margin-top: 5px; /* was -10px before 1/23/24 */
  font-family: 'Montserrat-light';
    font-size: 14px;
}

.questionSetNavButton.home {
  position: relative;
  top:155px;
  text-align:left;
  padding-left:20px;
}

.questionNavButton {
font-family:'Montserrat-light';
font-size:14px;
padding:4px;
padding-right:5px;
background-color:var(--tertiaryBackground);
border-bottom-style:solid;
border-bottom-color:var(--secondaryBackground);
border-bottom-width: 1px;
}
.questionNavButton.isSelected, .questionSetNavButton.isSelected {
background-color:var(--primaryBackground);
color:#333333;
}
.questionSetNavButton:hover, .questionNavButton:hover {
cursor: pointer;
background-color:darkgray;
/*
background-color:var(--primaryBackground);
color:var(--primaryText); */
}
.questionSetNavButton.isSelected:hover, .questionNavButton.isSelected:hover {
  cursor: pointer;
  background-color:white;
  }


/*button styling */

button {
font-family:'Montserrat';
outline: none;
}
button:hover {
cursor: pointer;
}

#topNavBar button {
  float:right;
  margin-right: 20px;
    font-size: 14px;
    position: relative;
    top: 15px;
}

#topNavBar button:hover {
  text-decoration: underline;
}

#adminGetPingGroup {
  float: unset!important;
  top: 0px!important;
  margin-left: 5px;
  background-color: #003366;
  color: white;
  border-style: none;
  border-radius: 3px;
  font-family: 'Montserrat-light';
  padding: 3px;
  padding-right: 10px;
  padding-left: 10px;
}
#adminGetPingGroupInput {
  height: 25px;
    text-align: center;
    width: 60px;
}

.example {
  background-color: #F9FBFC;
    padding: 15px;
    border-style: solid;
    border-width: 1px;
    border-color: lightgray;
    border-radius: 4px;
}
.exampleHeader {
  font-style:italic;
  margin-bottom: 5px;
}
.mediaContainer {
  text-align: center;
}
.mediaContainer iframe, .mediaContainer video {
  width:100%;
  height:450px;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
}
.clickHere:hover {
  cursor: pointer;
}

#navItemsContainer {
  width: calc(100% - 220px);
  position: fixed;
  left: 200px;
  top:0px;
  padding: 10px;
  margin-bottom: -50px;
  text-align: center;
  padding-top: 10px;
  padding-bottom:0px;
  z-index: 12;
  background-color: var(--primaryBackground);
}

#navItemsSubcontainer {
  width: 600px;
  position: relative;
  left: calc((100% - 600px) / 2);
  min-height:25px;
 /* margin-bottom:-10px; */
}
#markAsRead {
  font-family: 'Montserrat-light';
  text-decoration: none;
  color: white;
  padding: 3px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 3px;
  position: relative !important;
  top: 0px!important;
  float: unset!important;
  border-style: none;
  left: calc(100% - 320px);
  margin-bottom: 10px;
  background-color: var(--quaternaryBackground);
  cursor: default;
}


#markAsRead:enabled {
  background-color: red;
}
#markAsRead:enabled:hover {
  cursor: pointer;
}


#hrDiv {
  width: 80%;
  position: relative;
  left: 10%;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: darkgray;
}
#navItemsContainer #navButton {
  width: 25px;
  display: inline-block;
  margin-right: 15px;
  margin-left: 15px;
  padding: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
}
#navItemsContainer #navButton.hazard {
width:30px;
padding:7px;
}
#navItemsContainer #navButton.p200 {
  width:30px;
  position:relative;
  top:1px;
}
#navItemsContainer #navButton:hover {
  background-color: var(--quaternaryBackground);
    border-radius: 4px;
    cursor: pointer;
}
#navItemsContainer #navButton.active {
  border-style:solid;
  border-width:1px;
  border-color:var(--activeBorder);
  border-radius:4px;
  background-color:white;
}
.navContentContainer {
  position: absolute;
  background-color: white;
  top: 80px;
  left: calc((100% - 520px) / 2);
  width: 500px;
  padding: 20px;
  box-shadow: 1px 1px 3px var(--secondaryBackground);
  z-index: 11;
  border-radius: 4px;
}

#expandedNodeContainer {
  position: absolute; 
  font-family:'Montserrat-light';
  color:#232E3D;
  background-color: white;
  top: 80px;
  left: calc((100% - 520px) / 2); 
  width: calc(100vw - 80px);
  max-width: 550px;
  padding: 20px;
  box-shadow: 1px 1px 3px var(--secondaryBackground);
  z-index: 11;
  border-radius: 4px;
  border-style:solid;
  border-color: #555555;
  z-index: 18;
  overflow: hidden;
  overflow-y:auto;
}
#expandedNodeContainer table {
  color:#232E3D;
}

#expandedNodeContainer .warning {
  color: red;
}

.nodeForecastInput {
  text-align: center;
  font-family: 'Montserrat-light';
  border-top-style: none;
  border-left-style: none;
  border-right-style:none;
  border-bottom-width: 1px;
  outline:none;
  background-color: transparent;
  width:calc(100% - 20px);
}
.quarterMark {
  display:inline-block;
  width:calc(20% - 5px);
  text-align: left;
}
.bottomLineInput {
    width: 100%;
    border-radius: 0px;
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-width: 1px;
    outline:none;
}

.shrinkButton:hover {
  cursor: pointer;
}

#newDiscussionContainer {
  position: absolute;
  background-color: white;
  top: 80px;
  left: calc((100% - 520px) / 2);
  width: 500px;
  padding: 20px;
  box-shadow: 1px 1px 3px var(--secondaryBackground);
  z-index: 2;
  border-radius: 4px;
}

#searchResultsContainer, #notificationsContainer {
  background-color: white;
  z-index: 2;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

#checklistContainer .listButton {
  display: inline-block;
  font-family: "Montserrat";
  font-size:14px;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 3px;
}

#checklistContainer .listButton:hover {
  cursor: pointer;
}

#checklistContainer .subhead {
  font-family:"Montserrat";
  font-size:16px;
  font-weight:bold;
}

#checklistContainer {
  font-family:'Arvo';
  font-size:16px;
}

#checklistContainer .spacerDiv {
  height:10px;
}

#checklistContainer div.active {
  background-color: white;
  color: var(--primaryButtonText);
  border-style: solid;
  border-width: 1px;
}

#checklistContainer .listDiv {
  text-align: left;
  max-height:400px;
  overflow-y: auto;
}

.introBioContainer {
  text-align: center;
  font-family:'Montserrat-light';
}
.bioContainer {
  display: inline-block;
  margin: 5px;
  width: calc(33% - 10px);
  max-width: 200px;
  vertical-align: top;
  text-align: left;
}
.bioContainer img {
  width:calc(100% - 10px);
}

.historyDiv {
  width: 70%;
  position: relative;
  left: 15%;
  max-height: 60px;
  text-align: center;
  overflow-x: hidden;
  margin-top: 10px;
  margin-bottom:10px;
  border-style: solid;
  border-width: 1px;
  padding: 5px;
  border-color: var(--primaryBorder);
  border-radius: 4px;
}

.historicalDataContainer {
  border-radius: 5px;
  width: calc(100% - 2px);
  border-width: 1px;
  border-style: solid;
  border-color: lightgray;
}
.historicalDataContainer img {
width: 100%;
border-radius: 5px;
}
#embed_chart, .docs-charts-component, .docs-charts-component-canvas {
  width:100%!important;
  height:auto!important;
}

.ql-cursor .ql-cursor-flag {
  padding-top:5px;
  visibility: visible!important;
  opacity:1!important;
}
.quillWikiHistory {
  user-select: none;
  text-align: right;
  margin-right:10px;
  margin-bottom:10px;
}
.quillWikiHistory i.right, .quillWikiHistory i.left {
  vertical-align: bottom;
}

.quillWikiAvatar {
  display:inline-block;
  border-radius: 5px;
  margin-bottom:-10px;
vertical-align: middle;
width: max-content;
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.quillWikiAvatar.isSelected {
  background-color: white;
  border-style: solid;
  border-color: #003366;
}

.quillWikiAvatar .dateTimeAuthor {
  padding-right: 5px!important;
  padding-top:2px!important;
}

#historyTitle {
  position: relative;
  font-family: 'Montserrat';
  font-size: 11px;
  margin-bottom: 3px;
}

.historyInnerContainer div {
  display: inline;
  padding:5px;
  font-family:'Montserrat-light';
  color:var(--primaryButtonText);
}

.historyInnerContainer div:hover {
  cursor:pointer;
  font-family:'Montserrat';
}

#dropdownContainer {
  text-align: left;
  font-family: 'Montserrat';
}

#questionForTags {
  margin-left:10px;
  font-family:'Montserrat-light';
}

#questionsDropdown {
  position: absolute;
  z-index: 3;
  background-color: white;
  text-align: left;
  max-height: 350px;
  overflow-y: auto;
  border-radius: 4px;
  box-shadow: 1px 1px 3px var(--secondaryBackground);
  font-family:'Montserrat-light';
  width: 310px;
}

#inlineDropdownDiv {
  width: 285px;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  margin-left: 0px;
}

.filterDropdownContainer #inlineDropdownDiv {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  font-family: 'Montserrat';
}

.filterDropdownContainer input:hover {
  cursor: default;
}

.filterDropdownContainer input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--primaryText);
  opacity: 1; /* Firefox */
}

.filterDropdownContainer input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--primaryText);
}

.filterDropdownContainer input::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--primaryText);
}

#matchedTag {
  padding-bottom:30px!important;
}

#inlineDropdownDiv:hover {
  cursor: pointer;
}

#inlineDropdownDiv div {
  display:inline-block;
}

#questionsDropdown div {
  padding-right:10px;
  padding-left:10px;
  padding-top:5px;
  padding-bottom:5px;
  max-width: calc(100% - 30px);
}

#questionsDropdown div:hover {
  cursor: pointer;
  font-family:'Montserrat';
}

.googleDocIframe {
  width: 100%;
    height: 100%;
    max-height: 600px;
    border-width: 1px;
    border-radius: 5px;
    min-height:1200px;
}

.openGoogleDoc {
  font-size: 13px;
  font-family: 'Montserrat-light';
  text-decoration: none;
  background-color: #003366;
  color: white;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
}

.expandableRationaleContainer {
  overflow-y: auto;
  resize: vertical;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.granularInterface {
  position: absolute;
  width: calc(90% - 20px);
  padding: 10px;
  box-shadow: 0px 1px 5px lightgrey;
  border-radius: 4px;
  background-color: var(--primaryBackground);
  font-family: 'Montserrat-light';
  text-align: center;
  top: 260px;
  left: 5%;
}
.granularInterface.graph {
  position: relative;
    top: 0px;
    left: 0px;
    width: calc(90% - 20px);
    margin-left: 10%;
}
.granularInterface.graph.timeseries {
    top: -5px;
    width: calc(90% - 10px);
    margin-left:10px;
}

.granularButtons {
  position: absolute;
    width: 40px;
    left: 0px;
    top: 12px;
}
.granularButtons.denominator {
  left:calc(100% - 40px);
}
.granularButtons .topButton, .granularButtons .bottomButton {
  position: relative;
  width:100%;
}
.granularButtons .topButton:hover, .granularButtons .bottomButton:hover {
 cursor:pointer;
}
/*
.granularButtons .bottomButton {
  right:2px;
}*/
.granularInterface span.halfFont {
  font-size: 50%;
  line-height: 18px;
}

#taggingUI, #citationUI {
  width: 250px;
  padding: 10px;
  box-shadow: 1px 1px 3px var(--secondaryBackground);
  border-radius: 4px;
  background-color: var(--primaryBackground);
  font-family: 'Montserrat-light';
  text-align: center;
  z-index: 3;
}

#citationUI {
  position: absolute;
    left: 100px;
    margin-top: -15px;
}

#citationInput {
  width: 100%;
  font-size: 14px;
  font-family: 'Arvo';
  padding: 5px;
}

.tagButton {
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  width: fit-content;
  text-align: right;
  background-color: var(--quaternaryBackground);
  border-radius: 3px;
  margin-top: 5px;
  display: inline-block;
  font-family:'Montserrat-light';
}

.tagButton:hover {
  cursor: pointer;
}

.tagButton.baserate {
  background-color:#4D9DE0;
  color:white;
  font-family: 'Montserrat';
}

.tagButton.causal {
  background-color:#3bb273;
  color:white;
  font-family: 'Montserrat';
}

.tagButton.model {
  background-color:#E1BC29;
  color:white;
  font-family: 'Montserrat';
}

.tagButton.uncertainty {
  background-color:#e15554;
  color:white;
  font-family: 'Montserrat';
}

.tag:hover {
  cursor: pointer;
}

#pendingTag {
  background-color:yellow;
}

.glossary {
  color: #003366;
  text-decoration: underline;
  font-weight: 600;
}
.glossary sup {
  font-size:12px;
  text-decoration:none;
}
.glossary:hover {
  cursor: pointer;
}
#vocabContainer, #infoContainer, .popup {
  width: 240px;
    text-align: left;
    font-family: 'Montserrat-light';
    position: absolute;
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #444444;
    max-height: 80%;
    overflow-y: auto;
    z-index: 101;
}
.inputPopup {
  position: absolute;
    width: 150px;
    max-width: 95vw;
    background-color: white;
    padding: 10px;
    font-family: 'Montserrat-light';
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-bottom-left-radius: 0px;
   /* border-color: lightgray; */
   border-color:white;
    box-shadow: 0 0px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15); 
   /*box-shadow:0 -1px 2px 0 rgba(60, 64, 67, .3), 0 -2px 6px 2px rgba(60, 64, 67, .15); */
    max-height: calc(100vh - 10px);
    overflow-y: auto;
    z-index: 1;
    font-size:13px;
}
.inputPopup strong {
  font-family:'Montserrat';
}
.inputPopup:hover {
  cursor: pointer;
}
.inputPopup.isForecast {
  border-color: blue;
  box-shadow:0 -1px 2px 0 rgba(60, 64, 67, .3), 0 -2px 6px 2px rgba(60, 64, 67, .15);
}
.inputPopup.hidden {
  visibility: hidden;
}
.popupsContainer {
  /* margin-bottom:10px;position:relative;left:10%;width:90%;padding-left:0px;padding-right:0px; 
        background-color: lightgray;height:5px;*/
  margin-bottom: -10px;
    position: relative;
   
    padding-left: 0px;
    padding-right: 0px;
    background-color: transparent;
    height: 5px;
}
.popupsContainer.log {
  left: 10%;
  width: 90%;
}
.popupsContainer.linear {

  left:0px;
  width:100%;

}
.triangleDown {
  /*position:absolute;border-left-style:solid; border-left-width: 1px;border-left-color: #141F33;height:15px*/
  position:absolute;
  width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 15px solid #232E3D;
    z-index: 2;
}
.triangleDown.isForecast {
border-top: 15px solid blue;
}
.triangleDown:hover {
  cursor: pointer;
}
#definition {
  display:inline;
}
#definition ul {
  margin-top:10px;
  margin-bottom:10px;
}

#vocabContainer #word, #infoContainer #word {
  font-family:'Montserrat';
  display:inline;
  position: relative;
  top: -6px;
}

#clickEater {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 1;
}
#fixedClickeater {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 1;
}
.dropdownSubcontainer {
  position: absolute;
    background-color: white;
    box-shadow: 1px 1px 5px #444444;
    margin-top:4px;
    border-radius:3px;
    z-index:2;
}

.dropdownHeader {
  font-family: 'Montserrat-light';
  background-color:#F9FBFC;
  padding:5px;
  border-radius: 3px;
  color: #003366;

}
.dropdownHeader.selected {
  background-color:#ff9f40;
  color:white;
  font-family:'Arvo';
}
.dropdownHeader:hover {
cursor: pointer;
}
.dropdownOption {
  padding:5px;
  color:#003366;
}
.dropdownOption:hover {
  cursor: pointer;
  text-decoration: underline;
}

#navClickEater, #vocabClickEater, #editTagsClickeater, .clickeater {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 4;
}
#vocabClickEater {
  z-index:100;
}

.baserate, .baserate_citation {
  background-color:#4D9DE0;
  color:white;
}

.causal, .causal_citation {
  background-color:#3bb273;
  color:white;
}

.model, .model_citation {
  background-color:#E1BC29;
  color:white;
}

.uncertainty, .uncertainty_citation {
  background-color:#e15554;
  color:white;
}

.baserate:hover::before, .baserate_citation:hover::before {
  content: "Baserate";

    font-size: 11px;
    position: absolute;
    margin-top: -13px;
    background-color:#4D9DE0;
}

.causal:hover::before, .causal_citation:hover::before {
  content: "Causal Argument";

    font-size: 11px;
    position: absolute;
    margin-top: -13px;
    background-color:#3bb273;
}

.model:hover::before, .model_citation:hover::before {
  content: "Statistical Model";

    font-size: 11px;
    position: absolute;
    margin-top: -13px;
    background-color:#E1BC29;
}

.uncertainty:hover::before, .uncertainty_citation:hover::before {
  content: "Source of Uncertainty";

    font-size: 11px;
    position: absolute;
    margin-top: -13px;
    background-color:#e15554;
}

.baserate_citation:hover::before, .causal_citation:hover::before, .model_citation:hover::before, .uncertainty_citation:hover::before {
  margin-top:-13px;
  margin-left:-3px;
}

.tagButton:hover::before {
  content:""!important;
}

#messageBoardContainer {
  position: relative;
  margin-bottom: 100px;

}

.discussionItemContainer {
  padding: 20px;
  margin-bottom: 10px;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  border-color: var(--primaryBorder);
}

.discussionItemContainer:hover {
  cursor: pointer;
  border-color:var(--activeBorder);
}

#backToMessageBoard {
  font-family: 'Montserrat-light';
  color: var(--primaryButtonText);
  border-style: solid;
  padding: 10px;
  border-radius: 4px;
  width: 200px;
  border-width: 1px;
  text-align: center;
  margin-bottom: 15px;
  position: relative;
}

#toggleNewDiscussion {
  font-family: 'Montserrat-light';
  border-style: solid;
  padding: 10px;
  border-radius: 4px;
  border-width: 1px;
  text-align: center;
  margin-bottom: 15px;
  width: 230px;
  background-color: var(--activeBackground);
  color: white;
  position: relative;
}

#toggleNewDiscussion:hover {
  cursor: pointer;
}

#backToMessageBoard:hover {
  background-color:var(--activeBackground);
  color:white;
  cursor: pointer;
}

.discussionTitle {
  /*font-family: 'Montserrat';
  margin-bottom: 10px; */
  font-family: 'Arvo';
  font-size: 25px;
  margin-left:48px;
  margin-bottom:10px;
}

.forumDescription {
  margin-left: 48px;
  margin-right:48px;
  overflow-x:auto;
}

.discussionItemContainer br {
  display:none;
}

.grossmannSeperator {
  font-family: 'Montserrat-light';
  color: #003366;
  font-size: 16px;
  text-align: center;

  padding: 10px;
  border-width: 1px;
}

/*
.baserate_citation {
color: #4d9de0;
}
.causal_citation {
columns: #3bb273;
}
.model_citation {
color:#e1BC29;
}
.uncertainty_citation {
color: #e15554;
}
*/

.matchedStem {
  background-color:yellow;
}

#searchInput {
  position:relative;
}
#loadingImage {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  z-index: 100;
  background-color: rgba(255,255,255,.5);
}

#loadingSplash {
  font-size: 35px;
  font-family: Arvo;
  color: #141F33;
  margin-top: 8px;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}
.savingSpan {
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: flash;

}

#instructions, #grossmannDragInstructions {
  font-family:'Montserrat-light';
  color: var(--primaryButtonText);
  font-size:16px;
  text-align: center;
}
#instructions.phone {
  font-family: 'Montserrat';
    color: #003366;
    padding-bottom: 10px;
    position: relative;
    left: -100px;
    width: calc(100% + 200px);
    margin-bottom: 15px;
}


.noBackgroundButton {
  background-color:transparent;
  border-style: none;
  /*color:#555555 ; */
  color: var(--primaryButtonText);
  font-size: 16px;
  outline:none;
}
.noBackgroundButton.openInNewTab {
  padding: 3px;

    border-style: solid;
    border-color: transparent;
    border-width: 1px;
    border-radius: 4px;
    outline:none;
}
.noBackgroundButton.openInNewTab:hover {
  cursor: pointer;
  border-color: lightgray;
  background-color: white;
}

.tooltiptext {
visibility: hidden;
width: 120px;
background-color: #232E3D;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
font-family: 'Montserrat-light';
font-size: 13px;
margin-left: -160px;
margin-top: -4px;
}
.clickableFilter {
  font-family: 'Montserrat';
  color: #141F33;
  font-size: 13px;
}
.clickableFilter:hover {
  cursor: pointer;
}
.clickableFilter:hover .tooltiptext {
  visibility: visible;
}


 .staticItem {
    padding: 15px;
    font-family: 'Montserrat-light';
    /* width: max-content;*/
}


.staticItem:hover {
    background-color: #F9FBFC;
    cursor: pointer;
}

.noBackgroundButton.toggleZoom {
  font-family: 'Montserrat-light';
    float: right;
    font-size: 12px;
  /*  margin-right: 35px;*/
}
.commentTimestamp {
  font-family: 'Montserrat-light';
  font-size: 12px;
  float: right;
  margin-left: 15px;
}
.commentButtons {
  position:relative;
  height:17px;
  margin-right:10px;
  margin-left:10px;
}
.noBackgroundButton.toggleResponse {
  font-size: 11px;
   float:right;
   margin-left:15px;
}
.noBackgroundButton.toggleEdit {
  font-size: 11px;
 float:right;
 margin-left:15px;
}

.noBackgroundButton.isVoted {
  text-decoration: underline;
  font-style: italic;
}
.noBackgroundButton.toggleHideAll {
  font-size: 14px;
  font-family: 'Montserrat-light';
  position: relative;
  float: right;
  margin-right:30px;
}
.noBackgroundButton:hover {
  cursor: pointer;
}

.noBackgroundButton.copyLink {
  font-family: 'Montserrat';
  font-size: 11px;
  text-decoration: none;
  margin-top: 1px;
}
.noBackgroundButton.copyTagLink {
  position: absolute;
  left: calc(100% - 80px);
  margin-top: -25px;
  background-color: white;
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 3px;
  font-family: 'Montserrat';
  font-size:11px;
}


.noBackgroundButton.noiseAuditResults {
  position:absolute;
  bottom:25px;
}


#noiseAuditWarning {
  font-family: 'Montserrat';
  font-size: 11px;
  max-width: 250px;
  position: absolute;
  bottom:10px;
  padding-left: 7px;
}

.noBackgroundButton.upload {
  font-family: 'Montserrat';
  font-size:11px;
  position: absolute;
  padding-left:5px;
  padding-right:5px;
  padding-top:3px;
  padding-bottom:3px;
  margin-top:14px;
} 

.noBackgroundButton.upload:hover {
  cursor: pointer;
}

.noBackgroundButton.upload:active{
  background-color:var(--activeBackground);
  color:white;
  border-radius: 3px;
}

.previewImageContainer {
max-width:100%;
margin-bottom:20px;
text-align: center;
background-color:var(--activeBackground);
border-radius: 3px;
}

#previewImageLabel {
text-align: left;
font-size:14px;
padding-top:10px;
padding-left:20px;
color:white;
font-family: 'Montserrat-hairline';
}

.previewImage  {
  max-width:50%;
  margin: 20px;
  margin-top: 0px;
}

.exButton {
  float:right;
  border-style: none;
  border-radius:20px;
  padding-top:3px;
  padding-bottom:3px;
  padding-right:7px;
  padding-left:7px;
  margin-top:4px;
  margin-right: 4px;
  color:white;
}

.exbutton.citation {
  color: var(--primaryButtonText);
  font-size: 24px;
  margin-top: -15px;
  margin-right: -10px;
}

.exButton.remove {
  font-family: 'Montserrat';
  font-size: 11px;
  margin-top: -1px;
}

.citationListContainer {
  margin: 20px;
  padding-top: 10px;
  margin-top: 20px;
  border-top: solid;
  border-top-width: 1px;
  border-top-color: var(--secondaryBackground);
  font-size:12px;
}

.citation {
  font-size:10px;
  padding-right:3px;
  padding-left:3px;
  font-family:'Montserrat';
}

.currentUserRationale .citation, .rationaleInput .citation {
  background-color:transparent;
  color:var(--primaryButtonText);
  font-size:unset;
  font-family:'Arvo';
}

.currentUserRationale .citation:hover::before {
  color:white;
  margin-top:-13px;
}

.outside {
  background-color:var(--quaternaryBackground);
}

#citationTitle {
  font-family:'Montserrat';
  margin-bottom:5px;
}

#insertCiteButton {
  width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    border-style: none;
    background-color: #808080;
    color: white;
    border-radius: 4px;
    font-family: 'Montserrat-light';
}

#insertCiteButton.enabled {
  background-color:var(--activeBackground);
}

.exButton:hover {
  background-color:white;
  color:var(--primaryButtonText);
  cursor: pointer;
}

.exbutton.citation:hover {
  background-color:transparent;
}

.uploadContainer input {
  width:0.1px;
  height:0.1px;
  opacity:0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#loggedInBody {
  position:relative;
  left:200px;
  top:60px;
  width:calc(100% - 200px);
  padding-bottom:100px;
}

#tableButtonsContainer button {
  float:right;
}

.filterInstructions {
  float: right;
    width: calc(100% - 320px);
    margin-top: 16px;
}
/*
table {
  position:relative;
margin-top:40px;
  border-radius: 3px;
} */

#allCommentsTable {
  table-layout: fixed;
  width:100%;
  margin-top:10px;
}
/*
td, th {
  background-color:white;
  padding:10px;
  max-width:400px;
} */

#allCommentsTable td:last-child {
  max-width: none;
  width: 100%;
}

th {
  font-family:'Montserrat';
}

#allCommentsTable td {
  overflow-x:scroll;
}

td a {
  text-decoration: none;
  color:var(--primaryText);
}

td.clickable:hover {
border-style:solid;
border-color:var(--activeBorder);
border-width: 1px;
}

#commentTally {
  font-family: 'Montserrat';
  float: right;
  margin-right: 10px;
  margin-top: 1px;
  color: var(--primaryButtonText);
  margin-bottom: 10px;

}

.sortHeader:hover {
cursor: pointer;
}

th span.uparrow {
  position:relative;
  top:2px;
  color:var(--primaryButtonText);
}

th span.downarrow {
  position:relative;
  top:3px;
  color:var(--primaryButtonText);
}


.raytheonScoreExplanation {
  display:inline-block;
  width:50%;
  margin-right:10px;
  vertical-align: top;
}
.raytheonTableContainer {
  display: inline-block;
    width: calc(50% - 20px);
    position: relative;
    top: 20px;
}
.raytheonTableContainer.full {
  width:100%;
  margin-bottom:15px;
}

table.performanceTable {
  background-color:#003366;
  margin-top:0px;
  margin-left:auto;
  margin-right:auto;
  table-layout: fixed;
  width:100%;
}
table.performanceTable td {
  text-align:center;
}
table.performanceTable td.outer, table.performanceTable td.outer a {
  font-family:'Montserrat';
  color:#003366;
}
table.performanceTable td.outer a:hover {
  text-decoration: underline;
}
table.performanceTable td.inner {
  font-family:'Arvo';
}
table.performanceTable td.outer.column {
  width:107px;
}

table.performanceTable td.outer.column .dateTimeAuthor .dropdown {
margin-top:0px!important;
}

#allCommentsTableContainer {
  width:100%;
  overflow-x:auto;
}
#allCommentsTableContainer.communityStats {
  position: relative;
  top: 30px;
  min-height:200px;
}
.communityStats.noBackgroundButton {
  text-decoration: underline;
    font-size: 12px;
    font-family: 'Montserrat-light';
}

#communityTabContainer {
  width: max-content;
  max-width:calc(100% - 30px);
  font-family: 'Montserrat-light';
  padding: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color:lightgray;
}
.communityTab {
  display: inline-block;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  background-color: #F9FBFC;
  color: #555555;
  margin-top:3px;
  margin-bottom:3px;
  
}
.communityTab:hover {
  cursor: pointer;
  text-decoration: underline;
}
.communityTab.isSelected {
  background-color:#003366;
  color:white;
}

#communityStatsTable {
  font-size: 12px;
  text-align: center;
  margin-top:0px;
  margin-bottom:50px;
  width:-webkit-fill-available;
}
#communityStatsTable th, #communityStatsTable td {
  padding-top:5px!important;
  padding-bottom:5px!important;
  padding-right: 5px!important;
    padding-left: 5px!important;
    max-width:300px;
}
#communityStatsTable td:hover {
  cursor: pointer;
}
tr.isSelected td {
  background-color:lightblue;
}
tr.isRemoved td {
  background-color:#f6c9ce;
}
#communityControls {
  background-color: lightgray;
  color: #555555;
  font-family: 'Montserrat-light';
  padding: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
  width: max-content;
  max-width:calc(100% - 30px);
  min-width: 180px;
  position: relative;
  top: 15px;
}
#uploadTeams, #uploadUsers {
  float:right;color:#003366;
}
#uploadUsers {
 margin-left:15px;
}
#communityControls div, #communityControls button {
  display:inline-block;
}
#communityControls.enabled {
  color:#003366;
}
#communityControlsButtons {
  text-align:right;
 
}
#communityControlsButtons .noBackgroundButton {
  font-family:'Montserrat-light';
  padding-right:0px;
  font-size:12px;
  color: #555555;
}
#communityControlsButtons .noBackgroundButton:enabled {
  color: #003366;
}
#communityControlsButtons .noBackgroundButton:enabled:hover {
 text-decoration: underline;
}
#communityControlsButtons .noBackgroundButton.remove:enabled {
  color: red;
}

.setTemplateContainer {
  font-family:'Montserrat-light';
  border-style:solid;
  border-width: 1px;
  border-radius: 5px;
  border-color: lightgray;
  padding:20px;
}
.setTemplateContainer:hover {
  cursor: pointer;
  border-color: #003366;
}
.setTemplateContainer.isSelected {
  border-color:#003366;
  border-width:2px;
}
.setTemplateContainer.isSelected:hover {
  cursor: unset;
}
.setTemplateContainer .label {
  font-family: 'Montserrat';
}

.removeAnswerButton {
  font-family: 'Montserrat-light';
  font-size: 12px;
  color:red;
  background-color: transparent;
  border-style: none;
  position:relative;
  left: calc(100% - 55px);
}
.removeAnswerButton:disabled {
  color:darkgray;
}
.setup.answerOptionsContainer {
  width:50%;
}
.addAnswerButton {
  position: relative;
  left: calc(100% - 127px);
  background-color: transparent;
  color: #003366;
  border-style: none;
  padding: 5px;
  padding-right: 0px;
  padding-left: 0px;
  border-radius: 3px;
  font-family: 'Montserrat-light';
}
.addQuestionButton {
  background-color: transparent;
  color: #003366;
  border-style: none;
  padding: 5px;
  padding-right: 0px;
  padding-left: 0px;
  border-radius: 3px;
  font-family: 'Montserrat-light';
  display: inline-block;
}
#communityFiltersContainer {
  width:350px;
  max-width: 100%;;
}
#communityFiltersContainer input {
  position: relative;
  display: block;
  top:25px;
}
input.filter {
  font-family: 'Arvo';
  font-size: 16px;
  padding-right: 5px;
  padding-left: 5px;
  width:100%;
  margin-bottom:5px;
}

#applyFilters {
  position: relative;
    width: 100%;
    top: 25px;
    background-color: #003366;
    border-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
    color: white;
    border-radius: 5px;
    font-family: 'Montserrat-light';
}

input.setup {
  font-family: 'Arvo';
    font-size: 16px;
    padding-right: 5px;
    padding-left: 5px;
    width:350px;
    max-width: 100%;
}
input.setup.answerOption {
  width:100%;
}
.subcontainer {

  padding:10px;
}
.subcontainer.inline {
  border-style:solid;
  border-width: 1px;
  border-radius: 5px;
  border-color: lightgray;
  display: inline-block;
}

@media(max-width:580px) {

  #communityControls div {
    display:block;
  }
 #uploadTeams {
  float: unset;
  margin-top: 10px;
  position: relative;
  left: calc(100% - 85px);
 }
 #uploadUsers {
  float: unset;
  margin-top: 20px;
  position: relative;
  margin-left: unset;
  left:calc(100% - 79px);
 }


  #optOutContainer {
    width:calc(100% - 20px);
    left:0px;
  }
  .team #adminTagInputContainer {
    position:relative;
    top: 5px;
    min-width: unset;
  }
  #communityTeamContainer.team {
    display:block;
    position: relative;
    top:5px;
    margin-bottom:10px;
  }
  #registerContainer.expanded {
    width:calc(100% - 20px);
    left:10px;
  }
}

@media(max-width:460px) {
  #instructions.phone {
    left: 0px;
    width:100%;
  }
}




@media(max-width:720px) {
  .raytheonScoreExplanation {
    width:100%;
  } 
  .raytheonTableContainer {
    width:100%;
    margin-bottom:20px;
  }
  
  table.performanceTable td.outer.column {
    width:unset;
  }
}

.filterSectionContainer {
  background-color: var(--quaternaryBackground);
    padding-right: 10px;
    padding-left:10px;
    border-radius: 3px;
    margin-top:10px;
}

.filterDropdownContainer {
  text-align: left;
  font-family: 'Montserrat';
  display:inline-block;
}

.filterItemsContainer {
  display: inline-block;
}

#typeItem {
  background-color: var(--tertiaryBackground);
  color: white;
  padding: 5px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 3px; 
  margin-bottom:15px;
}

#questionItem {
  background-color: var(--activeBackground);
  color: white;
  padding: 5px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 3px;
  margin-bottom:15px;
}

#tagItem {
  background-color:rgb(255, 159, 64);
  color: white;
  padding: 5px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 3px;
  margin-bottom:15px;
}


#saveForecast.formButton{
 /* float:right; */
 position: relative;
    left: calc(100% - 143px);
  font-family:'Montserrat-light'; 
  font-size:14px;
  padding-right:10px;
  padding-left:10px;
  width:143px;
  margin-top:20px;
}
#saveRationale.formButton {
  position:relative;
  font-family:'Montserrat-light'; 
  font-size:14px;
  padding-right:10px;
  padding-left:10px;
  width:143px;
  margin-top:10px;
  margin-bottom:10px;
  left:calc(100% - 143px);
}

.editButton {
  font-size: 11px;
float:right;
position: relative;
top: 3px;
}

.openResponseEdit {
  font-size: 11px;
  position: relative;
  left: calc(100% - 40px);
}

.openResponseDismissEdit {
  font-size: 11px;
  float: right;
  margin-right: 155px;
  margin-top: 15px;
}

#tooltip {
  background-color: rgba(0, 0, 0, .5);
  z-index: 100;
 /* color:white; */
}

#teamForecastsChart, .conditionalForecastsCharts, 
.timeSeriesCharts, #evChart, .individualCharts, 
#teamModeChart, .teamModeChart, .genericChart {
  min-height:200px;
  max-height:400px;
}



.teamModeChart.isHiddenBeforeSaved {
  visibility: hidden;
  height:0px!important;
  min-height:0px;
}

#evChart {
  min-height:200px;
  max-height:250px;
}
.writeResponse {
  font-size: 11px;
  float:right;
  padding-top:3.5px;
}

.responseContainer {
  position: relative;
  width: 95%;
  left:5%;
}

.dismissEditButton {
  font-size:11px;
  position: absolute;
  left:calc(100% - 230px);
  margin-top:16px;
}
.citationButton {
  font-size:11px;
  position: absolute;
  left:50px;
  margin-top:16px;
}
.attachButton {
  width:27px;
  height:27px;
  border-radius:3px;
  background-color:var(--activeBackground);
  position:absolute;
  margin-top:10px;
  border-color:var(--activeBorder);
}
.attachButton img {
  width:27px;
  height:27px;
  position:relative;
}

.attachButton:hover {
  cursor: pointer;
}


.dismissRespondButton {
  font-size:11px;
 /* position: absolute;
  left:calc(100% - 210px);
  margin-top:16px; */
  float:right;
  margin-right:160px;
  margin-top:15px;
}

/* question styling */

#visibleContentContainer {
width: 90%;
position:relative;
left:5%;
top: 20px;
}


.conditionalTreesContainer.fullscreen {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
  width: 100%;
  height: 100%;
}
.conditionalTreeSubcontainer {
  background-color: #f6f6f6;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  overflow-x:auto;
}

.questionTitle {
  display:inline-block;
font-family:'Montserrat-light';
margin-bottom:15px;
font-size:19px;
margin-right:5px;
}
.questionSubtitle {
font-family:'Montserrat';
margin-bottom:3px;
}
.questionTextContainer {
margin-bottom:15px;
padding-bottom:15px;
}

.questionTextContainer.resize {
  resize: vertical;
    overflow-y: auto;
    border-bottom: solid;
    border-width: 1px;
}

.forecastInputContainer .questionTextContainer {
  color:#444444;
  font-family: 'Montserrat-light';
}

.assetsContainer {
  text-align: center;
  width: calc(50% - 100px);
  display: inline-block;
  min-width: 300px;
  max-width:440px;
  margin-left:50px;
}
.leftQuestionContainer {
  width:calc(50% - 20px);
  display:inline-block;
  vertical-align:top;
  margin-bottom:10px;
  min-width:400px;
}
.assetsHeader {
  font-family:'Montserrat';
  text-align:left;
  min-width:400px;
}
.assetVideoContainer {
  text-align:center;
width:calc(100% - 2px);
 border-style:solid;
 border-width:1px;
 border-radius:3px;
 margin-bottom:10px;
}
.assetVideoContainer video {
  max-width:calc(100% - 10px);
}

.linkContainer {
  vertical-align:top;
  padding-left:15px;
}

@media(max-width:1091px) {
  .assetsContainer {
    margin-left:0px;
    display:block;
  }
  .leftQuestionContainer {
    width:100%;
    display:block;
    min-width:0px;
  }
  .assetsHeader {
    min-width:0px;
  }
}
@media(max-width:750px) {
  #editQuestionContainer {
    left: 10px;
    width:calc(100% - 60px);
  }
}

@media(max-width:460px) {
  .assetsContainer {
    min-width:0px;
    width:100%;
  }
}

.siblingHeader {
  margin-top:15px;
  margin-bottom:15px;
}

#forecastTotalLabel {
  position: relative;
  left: calc(100% - 90px);
  top: 10px;
  font-size: 13px;
  width: 90px;
  font-family: 'Montserrat';
  text-align: center;
  margin-bottom:15px;
}
#forecastTotalLabel.isNotOneHundred {
color:red;
text-decoration: none;
}

#commentContainer, .chartContainer {
width: calc(75% + 40px);
position:relative;
left:calc(12.5% - 40px); 
padding-right:20px;
padding-left:20px;
margin-top:20px; /* was 46 */
} 

.rationaleContainer {
  position: relative;
background-color:white;
border-radius:4px;
border-style:solid;
border-color: var(--primaryBorder);
border-width:1px;
padding:5px;
margin-bottom:12px;
/*overflow-x:hidden;*/
text-align: left;
}

#colorsArray {
  background-color: rgba(255, 99, 132, 1);
  background-color: rgba(54,162,235,1);
  background-color: rgba(255,206,86,1);
  background-color: rgba(75,192,192,1);
  background-color: rgba(153,102,255,1);
  background-color: rgba(255,159,64,1);
  background-color: rgba(255,0,0,1);
  background-color: rgba(128,0,0,1);
  background-color: rgba(0,255,0,1);
  background-color: rgba(0,128,0,1);
  background-color: rgba(0,255,255,1);
  background-color: rgba(0,128,128,1);
  background-color: rgba(0,0,255,1);
  background-color: rgba(0,0,128,1);
  background-color: rgba(255,0,255,1);
  background-color: rgba(128,0,128,1);
  background-color: rgba(123,104,238,1);
  background-color: rgba(199,21,133,1);
  background-color: rgba(119,136,153,1);
  background-color: rgba(65,105,225,1);
  background-color: rgba(47,79,79,1);
  background-color: rgba(0,0,0,1);
  background-color: rgba(50,169,82,1);
  background-color: rgba(233,150,122,1);
  background-color: rgba(24,69,59,1);
  background-color: rgba(169,32,62,1);
  background-color: rgba(154,185,115,1);
  background-color: rgba(11,218,81,1);
  background-color: rgba(176,235,217,1);
  background-color: rgba(255,91,1,1);
  background-color: rgba(186,39,112,1);
  background-color: rgba(227,235,41,1);
  background-color: rgba(184,93,45,1);
  background-color: rgba(38,85,120,1);
  background-color: rgba(58,126,124,1);
  background-color: rgba(70,75,104,1);
  background-color: rgba(232,143,222,1);
  background-color: rgba(110,166,209,1);
  background-color: rgba(197,2,74,1);
  background-color: rgba(30,251,206,1)'
}

.rationaleContainer.step {
  
    background-color: #F9FBFC;
    scroll-margin-top: 75px; 
}
.rationaleContainer.step.isVoted {
  border-width: 2px;
  border-color: #003366;
}
.rationaleContainer.step.isScrolledTo {
  border-width: 3px;
  border-color: #003366;
  background-color: white;
}
.rationaleContainer.wiki {
  border-style: solid;
    border-width: 2px;
    border-color: var(--activeBorder);
    padding: 25px;
}
#wikiButtonsContainer {
  float:left;
}
.wikiButton {
  display: inline-block;
    font-family: 'Montserrat-light';
    background-color: lightgray;
    color: #003366;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    margin-left: 10px;
}
.wikiButton:hover {
  cursor: pointer;
}
.wikiButton.isSelected {
background-color: #003366;
color: white;
}

.rationaleContainer.isHighlighted {
  z-index: 2;
}
.rationaleContainer.unread {
  border-style:solid;
  border-color:red;
}

.upvote.endorse {
float: right;
    background-color: #003366;
    color: white;
    border-style: none;
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 3px;
    margin-right: 5px;
    margin-top: 5px;
    font-family: 'Montserrat-light';
}
.upvote.endorse.voted {
  background-color: transparent;
  color: #003366;
  text-decoration: underline;
}
.upvoteCount.endorse {
  float: right;
    margin-top: 5px;
    margin-right: 5px;
    font-size: 12px;
    font-family: 'Montserrat-light';
    color: #003366;
}
/*
.upvotes.isVoted {
background-color:#003366;
color:white;
border-radius:3px;
}
.isVoted button {
background-color:#003366;
color:white;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
} */

.reliabilityPrompt {
padding: 10px;
text-align: center;
font-family: 'Montserrat';
font-style:italic;
}

.currentUserRationale {
padding:10px;
overflow-x:hidden;
font-family:'Montserrat-light';
}

.dateTimeAuthor {
font-family:'Montserrat';
font-size:12px;
text-align: left;
padding-top:5px;
padding-left:5px;
display:flex;
align-items: center;
color: #141F33;
/*width:max-content;*/
/*flex-wrap:wrap; */
}
.dateTimeAuthor.setToMaxWidth {
  width:max-content;
}

.dateTimeAuthor.consensus {
  width: calc(100% - 30px);
  padding: 15px;
  padding-bottom:10px;
}


.questionHeader {
  font-family: 'Montserrat';
    margin-bottom: 10px;
    text-decoration: underline;
}

#affirmMessage {
  font-family: 'Montserrat-light';
  font-size: 16px;
  background-color: #F9FBFC;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 20px;
  margin-top: 10px;
  color:#003366;
}
#affirmButton {
  display: block;
  background-color: #003366;
  color: white;
  border-style: none;
  padding: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 3px;
  font-family: 'Montserrat-hairline';
position: relative;
left:calc(100% - 177px);
  height: 30px;
  width:177px;
}
#affirmButton.saved {
  font-family:'Montserrat-light'!important;
  background-color:#ff9f40;
}
#affirmButton.disabled {
  background-color:gray;
  color:white;
}
#affirmButton.disabled:hover {
  cursor: default;
}

.dateTimeAuthor.dropdown{
  width: 100%;
    margin-top: 10px;
    margin-left: 10px;
}
.dateTimeAuthor.inline {
  margin: 5px;
}

.dateTimeAuthor.pendingGroup:hover, .dateTimeAuthor.filter:hover {
cursor: pointer;
}
.dateTimeAuthor.filter:hover::before {
  content: "REMOVE";
  font-size: 11px;
  position: absolute;
  margin-top: 17px;
  padding-right: 10px;
  /* padding-left: 10px; */
  padding-bottom: 2px;
  padding-top: 2px;
  border-radius: 2px;
  color: var(--primaryButtonText);
}

.dateTimeAuthor.pendingGroup:hover::before {
  content: "REMOVE";
  font-size: 11px;
  position: absolute;
  margin-top: 25px;
  margin-left: 38px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 2px;
  padding-top: 2px;
  border-radius: 2px;
  color: var(--primaryButtonText);
}

.dateTimeAuthor.dropdown:hover {
  cursor: pointer;
  background-color:var(--primaryBackground);
}

.stepToDoList .notifAvatarContainer:hover {
  cursor: pointer;
  text-decoration: underline;
  border-style: solid;
  padding-bottom: 5px;
  border-width: 1px;
  border-radius: 3px;
}

.avatar {
  position: relative;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height:50px;
  background-color: var(--activeBackground);
  color: white!important;
  border-radius: 25px;
  font-size: 16px;
  font-family: Arvo;
  display:inline-block;
  margin-right:10px;
  font-family:'Arvo'!important;
  display: flex;
    align-items: center;
    justify-content: center;
}
.avatar.small {
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding:5px!important;
  margin-right:5px;
  border-radius: 30px;
}
.avatar.small.isSelectedVersion {
  border-style: solid;
  border-color: var(--activeBorder);
  border-width: 2px;
}
#pendingGroupContainer {
  padding: 10px;
  margin-top: -10px;
  text-align: center;
  background-color: var(--primaryBackground);
  margin-top: 15px;
  margin-bottom: 15px;
}
#chatInstructions {
  font-family:'Montserrat-light';
  margin-bottom:10px;
}

.helpDeskBadge {
  font-family: 'Montserrat-light';
  font-size: 11px;
  background-color:var(--activeBackground);
  width:150px;
  padding:3px;
  text-align: center;
  color: white;
  border-radius: 3px;
  display:inline-block;

}
.binLabel.mobileForecastLabel {
  display:none;
}

.upvotes {
float:right;
padding-right:5px;
font-size:11px;
}
.upvotes .noBackgroundButton {
font-size:11px;
}

.responseCount {
position: relative;
font-size:11px;
}
.responseCount .noBackgroundButton {
font-size:11px;
}

.childrenAreHidden {
transition:height 1s ease-out;
height:0px;
overflow:hidden;
}

blockquote {
  font-size:80%;
  background-color: #f5f5f5;
    padding: 10px;
    border-radius: 3px;
}

/* arrows */

i.right, i.left, i.up, i.down {
border: solid #003366;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
margin-left:10px;
}
i.right.disabled, i.left.disabled, i.up.disabled, i.down.disabled {
  border-color:gray;
}

.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}

.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}

.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-left:4px;
margin-bottom:1px;
}
.right:hover, .left:hover {
  cursor: pointer;
}

.questionSetImages {
position: relative;
left:calc(12.5% - 20px);
width:75%;
border-radius:4px;
padding:20px;
padding-top:15px;
padding-bottom:15px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color:var(--primaryBorder);
margin-top: 10px;
margin-bottom:20px;
}
.commentImages img {
max-width: 100%;
}
.questionSetImages img {
  max-width: 400px;
  display: inline-block;
  margin:5px;
}
.commentImages {
position: relative;
left: calc(25% - 20px);
width: 50%;
border-radius: 4px;
padding: 20px;
border-style: solid;
border-width: 1px;
border-color: var(--primaryBorder);
margin-top: 10px;
margin-bottom:20px;
text-align: center;
}
a.commentLink {
color:var(--primaryText);
text-decoration:none;
}
.commentLink:hover {
  cursor: pointer;
}

/* slider css */
.forecastInputContainer {
position: relative;
left:calc(12.5% - 20px);
width:75%;
background-color:white;
border-radius:4px;
padding:20px;
border-style: solid;
border-width: 1px;
border-color:var(--primaryBorder);
}
.forecastInputContainer.reliability {
margin-bottom:50px;
}

.binContainer {
height:300px;
display: inline-block;
position:relative;
top:0px;
}
.binContainer.showingGranular {
  height:345px;
}

.binLabel {
position:absolute;
top:260px;
max-height:55px;
overflow-y:auto;
width: 100%;
font-family:'Montserrat';
font-size: 11px;
text-align:center;
}
.binLabel.showingGranular {
  top:305px;
}
.binLabel::-webkit-scrollbar {
  -webkit-appearance: none;
}

.binLabel::-webkit-scrollbar:vertical {
  width: 11px;
}

.binLabel::-webkit-scrollbar:horizontal {
  height: 11px;
}

.binLabel::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid white; /* should match background, can't be transparent */
  background-color: rgba(0, 0, 0, .5);
}


.forecastSlider {
transform: rotate(270deg); 
position:relative;
top:100px;
left:calc(50% - 100px);
}
.forecastNumberBox {
width: 90%;
font-size: 16px;
font-family: 'Arvo';
text-align: center;
position: relative;
left: 5%;
top:185px;
background-color: transparent;
}
.pointBinContainer {
  display:inline-block;
  vertical-align: top; 
}
.pointForecastNumberBox {
  font-family: 'Arvo';
  display: block;
  text-align: center;
  width: calc(100% - 115px);
 /* margin-left: 95px; */
  border-style: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-top: 8px;
  min-width:60px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  outline:none;
  background-color:transparent;
}
.pointForecastLabel {

    position: relative;
  /*  display: inline-block; */
    font-size: 11px;
    padding-top: 8px;
    font-family: 'Montserrat';
    color: #003366;
    overflow: hidden;
    text-overflow: ellipsis;
   /* white-space: nowrap; */
    text-align: right;
   /* width: 100%; */
   width:max-content;
    margin-bottom: -20px;
    max-width: calc(100% - 60px);
}
.pointForecastLabel.block {
  width: 90%;
  margin-left: calc(10% - 8px);
  margin-bottom: 0px;
  max-width: none;
  text-align: center;
  /* new */
  height: 25px;
  text-overflow: ellipsis;
}
.pointForecastNumberBox.block {
  width: 90%;
  margin-left: 10%;
}


#chartDescriptionContainer {
  position: absolute;
  z-index: 2;
  background-color: #ffffff;
  top: 80px;
  width: 60%;
  left: 20%;
  border-radius: 3px;
  padding: 15px;
  box-shadow: 1px 1px 5px #444444;

}
#closeChartDescription {
  float: right;
    background-color: var(--activeBackground);
    color: white;
    border-style: none;
    border-radius: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    width:26px;
}
.actualWorldNumber {
  font-size: 16px;
font-family: 'Arvo';
text-align: center;
display:inline-block;
width:60px;
}
.numericInput {
font-size: 16px;
font-family: 'Arvo';
text-align: center;
width: 200px;
}

.formRow input[type=range] {
height: 25px;
-webkit-appearance: none; 
margin: 10px 0;
width: 200px;
background-color:transparent; 
} 

.formRow input[type=range]:focus {
outline: none;
}
.formRow input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: var(--quaternaryBackground);

border-radius: 1px;
border: 0px solid #000000;
}
.formRow input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--quaternaryBackground); 
  }

  
.formRow input[type=range]::-webkit-slider-thumb {
  
box-shadow: 0px 0px 0px #000000;
border: 1px solid var(--activeBorder);
height: 18px;
width: 18px;
border-radius: 25px;
background: blue;/*var(--activeBackground);*/
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
}

.withTickmarks input[type=range]::-webkit-slider-thumb {
 height:20px;
 width:4px;
 z-index:5000;
background-color: transparent;
border-style:none;
 border-radius: 0px;


}
.withTickmarks input[type=range].isZero::-webkit-slider-thumb, .withTickmarks input[type=range].noForecast::-webkit-slider-thumb  {
  height:0px; 
  width:0px;
  background:transparent;
  border:0px;
 
 }
.tickLabel {
  width:0px;
  position: relative;
  top: 10px;
  left: -6;
  font-family: 'Montserrat-light';
  font-size: 9px;
  white-space: nowrap;
}
/* temp removal jan 2 2023
.tickLabel.shouldRotate {
  transform: rotate(45deg);
}
*/



.formRow input[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #2497E3;
border-radius: 1px;
border: 0px solid #000000;
}
.formRow input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000;
border: 1px solid #2497E3;
height: 18px;
width: 18px;
border-radius: 25px;
background: #A1D0FF;
cursor: pointer;
}
.formRow input[type=range]::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
.formRow input[type=range]::-ms-fill-lower {
background: #2497E3;
border: 0px solid #000000;
border-radius: 2px;
box-shadow: 0px 0px 0px #000000;
}
.formRow input[type=range]::-ms-fill-upper {
background: #2497E3;
border: 0px solid #000000;
border-radius: 2px;
box-shadow: 0px 0px 0px #000000;
}
.formRow input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 0px 0px 0px #000000;
border: 1px solid #2497E3;
height: 18px;
width: 18px;
border-radius: 25px;
background: #A1D0FF;
cursor: pointer;
}
.formRow input[type=range]:focus::-ms-fill-lower {
background: #2497E3;
}
.formRow input[type=range]:focus::-ms-fill-upper {
background: #2497E3;
}


#contextTitle {
  font-family:'Montserrat-light';
  width:100%; 
  text-align:center;
}
#contextForecastContainer {
  background-color: var(--primaryBackground);
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 3px;
  }
  #contextForecastContainer.isBaseline {
    background-color:white;
    padding-top:0px;
    padding-bottom:0px;
  }
  #contextForecastContainer th, #contextForecastContainer td {
    background-color: var(--primaryBackground)!important;
   
    }

    #deltaButton {
      position: relative;
      font-size: 14px;
      left: calc(100% - 138px);
    }

    #deltasInterface {
    
      border-radius: 3px;
    padding: 15px;
    box-shadow: 1px 1px 5px #444444;
    }
    .deltaContainer {
      display:inline-block;
    }
    .deltaNumberBox {
      width: 90%;
      font-size: 16px;
      font-family: 'Arvo';
      text-align: center;
      position: relative;
      font-size:11px;
    }
    .deltaBinLabel {
      font-family: 'Montserrat';
    font-size: 11px;
    text-align: center;
    }

    #saveDeltas.formButton {
      font-family: 'Montserrat-light';
      font-size: 14px;
      padding-right: 10px;
      padding-left: 10px;
      width: 143px;
      margin-top: 20px;
      position:relative;
      left:calc(100% - 143px);
    }
    #saveDeltas.formButton:disabled {
      background-color:gray!important;
    }
    /* end sliders css */

    .clickableSpan {
      font-family:'Montserrat';
      text-decoration: underline;
    }
    .clickableSpan:hover {
      cursor: pointer;
    }
    .clickableSpan label:hover{
      cursor: pointer;
    }

    .highlightRequired {
      border-style: solid!important;
      border-width: 2px!important;
      border-color: red!important;
      padding: 5px!important;
      height: fit-content!important;
      border-radius: 4px;
    }
    .highlightRequiredTab {
      color:red;
    }


#mobileNavButton {
position: fixed;
top: 18px;
left: 0px;
background-color: var(--activeBackground);
color: white;
display: none;
font-family: 'Montserrat-light';
padding: 5px;
padding-left: 10px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
font-size:13px;
z-index: 12;
}
#mobileNavButton:hover {
cursor: pointer;
}

#mobileNavButton .right, #mobileNavButton .left {
border-color:white;
margin-right:7px;
margin-bottom:.5px;
margin-left:5px;
}

#searchResultsContainer button, #searchResultsContainer .upvotes {
  display:none;
}
#searchResultsContainer .noBackgroundButton.copyLink {
  margin-right:7px;
}
#copyLinkToSegment {
  margin-top:10px;
  color:var(--primaryButtonText); 
  font-family:'Montserrat'
}
#copyLinkToSegment:hover {
  cursor: pointer;
}

.noBackgroundButton.backToPings {
  position: relative!important;
    float: unset!important;
    top: 0px!important;
    margin-bottom: 10px;
    left: 0px;
}

#instructionalIcon {
  width: 20px;
  height: 20px;
  margin-bottom: -12px;
  margin-top: -5px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  margin: 0px;
}

#toggleStageButton {
  width: 100%;
  padding: 10px;
  left: 0px;
  text-align: center;
  margin: 0px!important;
  background-color: var(--quaternaryBackground);
  border-radius: 4px;
  margin-bottom:10px!important;
}
#mobileForecastTable {
  display:none;
}
#forecastTable {
  display:table;
  width:100%;
}
.commentForecastTableContainer {
  display: inline-block;
  padding: 10px;
    padding-bottom: 0px;
    padding-top:0px;
    vertical-align: top;
    margin-top:10px;
}
.activityListDashboardItem .commentForecastTableContainer {
  margin-top:0px;
}
.commentForecastTable {
  display:table;
  margin-top:0px;
  width:100%;
  height:100%;
}

.commentForecastTable td, .commentForecastTable th {
  background-color: transparent;
  padding:0px;
}




@media(max-width:920px) {
  .scaleText {
  width: calc(100% - 30px);
  text-align: center;
  font-size: 18px;
  background-color: var(--activeBackground);
  margin-bottom: 10px;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-right: 0px;
}
.mcAnswerOption.scale {
  width:calc(100% - 50px);
}
#otherTextArea {
  width: calc(100% - 30px);
  text-align:center;
}
}


@media(max-width:620px) {
  .emailSettingDescription {
    margin-bottom:5px;
  }
}

@media(max-width:1100px) {
  #allCommentsTable {
    width:unset;
  }
  #allCommentsTable td:last-child {
    width: unset;
    max-width: 340px;
    
  }
}

@media (max-width:1003px) and (min-width:861px) {
  .filterInstructions {
    float: unset;
    display: inline-block;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 10px;
  }
}

@media(max-width:860px) {

  #hoverBlock {
    display:none;
  }
  #updateCountBadge {
    left:105px;
  }
  #modeMessage {
    display:none;
  }
/*was 750 */
#loggedInBody {
  width:100%;
  left:0px;
}
#fullChat {
  width:100%;
  top:54px;
}
#notificationsContainer {
  width:100%;
}

.navContentContainer #instructions {
  max-height:500px;
overflow-y: auto;
}
#allPingGroupsContainer {
  max-height:300px;
  overflow-y: auto;
}
#editQuestionContainer.code {
  left: 10px;
    max-width: calc(100% - 60px);
}

#leftNavBar {
  width:0px;
  overflow-x:hidden;
  transition: all .75s ease;
  z-index: 3;
  box-shadow: 1px 3px 3px var(--secondaryBackground);

}
#leftNavBar.show {
  width:150px;
} 
#navClickEater, #vocabClickEater, #editTagsClickeater {
  left: 0px;
  width: 100%;
  height: 100%;
}


#navItemsSubcontainer {
  width: 100%;
  left: 0px;
}

#navItemsContainer {
  width:calc(100% - 20px);
  left:0px;
}
#navItemsContainer #navButton {
width:15px;
margin-right:5px;
margin-left:5px;
}
#navItemsContainer #navButton.p200 {
  width:20px;
}
#navItemsContainer #navButton.hazard {
  width:18px;
}

#signOut {
  display: none;
  position:relative;
  top:15px;
  font-size:9px;
}
#signOut.global {
  display:block;
}

#notificationsContainer {
  width:100%;
}

#markAsRead {
  display: block!important;
  left: calc(100% - 160px);

}

.navContentContainer {
  left: 10px;
  width: calc(100% - 60px);

}
#searchResultsContainer {
  width:100%;
  max-height:420px;
}
#newDiscussionContainer {
  width: calc(100% - 40px);
    left: 0px;
}
.listDiv {
  max-height:420px;
  overflow-y: auto;
}


#mobileNavButton {
  display:block;
}
.footer {
  width:100%!important;
  left:0px!important;
  margin-bottom: -70px!important;
  padding-bottom:10px;
}
.forecastInputContainer {
  left:0px;
  width:calc(100% - 40px);
}
#commentContainer, .chartContainer  {
width:calc(100% - 40px);
left:0px;
}

.commentImages, .questionSetImages {
width:80%;
left:calc(10% - 20px);
}
}
#searchContainer iframe {
  width:100%;height:500px;
}
@media(max-width:800px) {
  .filterInstructions {
    float: unset;
    display: inline-block;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 10px;
  }
  #searchContainer iframe {
    max-height:400px!important;
    min-height:0px!important;
    height:400px!important;
  }
}

@media (max-width: 560px) {
  .rationaleContainer {
    padding-bottom:20px;
  }
  #fullChat {
    top:74px;
  }
  .discussionData {
    padding-bottom:25px;
  }
  .questionSetImages img {
    max-width: 100%;
  }
.chartjs-size-monitor {
  height:400px;
}
  .citationButton {
    font-size: 11px;
    position: relative;
    left: -10px;
    top: 24px;
    margin-bottom: 40px;
  }
.footer {
  margin-bottom:-120px!important;margin-top:250px;

}
  #navItemsSubcontainer {
    width: 200px;
    left: calc((100% - 200px) / 2);
  }
  #visibleContentContainer {
    top:50px;
  }


  .forumDescription {
    margin-right:0px;
    margin-left:0px;
    width: calc(100% - 40px);
    position: relative;
    left: 20px;
  }
  .hideOnMobile {
    display:none;
  }
}

@media(max-width:500px) {


  .percentSign {
    display:none;
  }

  #mobileForecastTable {
    display:block;
  }
  #forecastTable {
    display:none;
  }
  
/* removed september 18 2024
  input[type=range] {
    margin-top:30px;
  } */

  .editButton.brier {
    position: absolute;
    font-size:11px;
  }
  
#loginContainer {
width:90%;
left:5%;
}
#loginContainer img {
margin-top:20px;
}

.noBackgroundButton.noBackgroundButton.noiseAuditResults {
  font-size:11px;
  width:80px;
  bottom:20px;

}



#noiseAuditWarning {
  display:none;
}

.binContainer {
display:block;
max-height:80px;
width:100%!important; 
}
.forecastSlider {
transform: rotate(0deg);
position: relative;
left:0px;
top:0px;
width:100%!important;
}
.forecastNumberBox {
  width: 50px;
  position: relative;
  left: calc(50px - 100%);
  top: -30px;
  margin-top: 50px;

}
.binLabel {
  position:absolute;
  left:0px;
  text-align:left;
  padding-top: 3px;
  top:-10px!important;
  width:calc(100% - 90px);
}

#markAsRead {
  float: unset;
  top:0px;
  left:calc(100% - 158px);
  margin-bottom:5px;
}

#instructionalIcon {
  width: 20px;
  height: 20px;
  margin-bottom: -12px;
  margin-top: -5px; 
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  margin: 0px;
}

#teamForecastsChart, .conditionalForecastsCharts, .timeSeriesCharts, #evChart, #teamModeChart, .teamModeChart {
  height:600px!important;
  max-height:600px!important;
}
.binLabel.mobileForecastLabel {
  display: block;
    left: calc(100% - 100px);
    top: 5px!important;
    color: var(--primaryButtonText);
}

.granularInterface {
  top: 30px;
  left: 0px;
  width: calc(100% - 20px);
}

/* Supress pointer events */
.forecastSlider { pointer-events: none; }
/* Enable pointer events for slider handle only */
.forecastSlider::-webkit-slider-thumb { pointer-events: auto; }
.slider::-moz-range-thumb {pointer-events: auto; }

.pointBinContainer {
  width:100%!important;
}
.pointForecastLabel {
  max-width: 100%!important;
  margin-bottom: 0px;
  text-align: center!important;
}
.pointForecastNumberBox {
  width:100%!important;
  margin-left:0px!important;
}
.granularInterface.graph.timeseries {
  margin-left:0px;
  width: calc(100% - 20px);

} 


  .grv-widget-tag.grv-widget-tag-bottom-right {
    margin-right:-20px;
    margin-bottom:-20px;
  }
  .grv-widget-tag.grv-widget-tag-bottom-right.grv-widget-open {
    margin-right:0px;
    margin-bottom:0px;
  }
  
  .pingCommentContainer .dateTimeAuthor {
    height: 50px;
    overflow-y: hidden;
  }
}

.toggle-check-input {
  width: 1px;
  height: 1px;
  position: absolute;
}

.toggle-check-text {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  background: var(--inactiveBackground);
  padding: 0.25em 0.5em 0.25em 2em;
  border-radius: 1em;
  min-width: 2em;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s
}

.toggle-check-text:after {
  content: ' ';
  display: block;
  background: white;
  width: 1.1em;
  height: 1.1em;
  border-radius: 1em;
  position: absolute;
  left: 0.3em;
  top: 0.25em;
  transition: left 0.15s, margin-left 0.15s;
}

.toggle-check-text:before {
  content: 'off';
}

.toggle-check-input:checked ~ .toggle-check-text {
  background: var(--activeBackground);
  padding-left: 0.5em;
  padding-right: 2em;
}

.toggle-check-input:checked ~ .toggle-check-text:before {
  content: 'on';
}

.toggle-check-input:checked ~ .toggle-check-text:after {
  left: 100%;
  margin-left: -1.4em;
}

@media(max-width:422px) {
  #saveRationale.formButton {
   margin-top:-20px;
  }
  .mcAnswerOption.scale {
    width: 100%;
    box-sizing: border-box;
    margin-right: unset;
    margin-left: unset;
  }
  .stripeAccountContainer {
    position: relative;
    width: 100%;
    left: 0px;
  }
 .stripeButton {
  width:100%!important;
  left:0px!important;
  margin-top:-10px!important;
 }
}

.labelInfo {
  background: #232e3d;
  color: white;
  display: inline-block;
  text-align: center;
  height: 29px;
  line-height: 29px;
  font-size: 13px;
  padding: 0px 10px;
  border-radius: 3px;
  margin-top:5px;
}
/*
.labelInfo .clearFilters {
  display:none;
  color:red;
  font-size:11px;
  margin-top:3px;
  text-align:right;
  margin-left:10px;
  font-family: 'Montserrat-light';
} */
.removable .labelInfo:hover {
  cursor: pointer;
}
.removable .labelInfo:hover::after {
  color: red;
  content: " Remove";
  font-family: 'Montserrat';
  font-size: 11px;
  margin-left: 3px;
}
/*
.labelInfo:hover .clearFilters {
 display:inline;
}
.labelInfo .clearFilters:hover {
  cursor: pointer;
} */