:root {
  --color-agree: rgb(0,153,153);
  --color-slight-agree: rgb(0,213,208);
  --color-unsure: rgb(255,192,0);
  --color-slight-unsure: rgb(255,230,153);
  --color-neutral: rgb(184,255,255);
  --color-midgrey: rgb(127,127,127);
  --color-lightgrey: rgb(242,242,242);
  --color-lightblue: rgb(147,226,255);
  --color-lighterblue: rgb(191,239,255);
  --color-red: rgb(252, 66, 69);
  --color-purple: rgb(215, 66, 252);
  --color-action: rgb(0, 160, 213);
}

.top-safe-padding {
  padding-top: env(safe-area-inset-top);
}
.bottom-safe-padding {
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-top-safe-padding {
  padding-top: calc(0.5rem + env(safe-area-inset-top));
}

#main-panel-body {
  padding-top: calc(72px + env(safe-area-inset-top));
}

#button-summary {
  padding-left: .35rem;
  padding-right: .35rem;
  font-size: .92rem;
}

.footer-link {
}


/*
Electron-specific Styles
*/
.electron-body {
  zoom: 0.8;
}
.electron-body .container {
  max-width: 960px;
}
.electron-body .form-group {
  margin-bottom: .5rem;
}
.electron-body .modal-backdrop {
  width: 100%;
  height: 100%;
}
.electron-body .modal-dialog-scrollable .modal-content {
  max-height: calc(100% - 1rem);
}
.electron-body .modal-header {
  padding: .5rem;
}
.electron-body .modal-footer {
  padding: .5rem;
}
.electron-body #main-panel-body {
  padding-top: calc(1rem + env(safe-area-inset-top));
}


/*
Mobile-specific Styles
*/
.sensing-status-dropdown {
  display: inline-block;
}
.sensing-status {
  width: 38px;
  padding-left: 0;
  padding-right: 0;
}
/*
.sensing-status {
  color: #36b9cc;
}
.sensing-status[disabled] {
  color: #aaaaaa !important;
  opacity: 0.5;
}
*/


/*
Main Visualization Styles
*/
#main-vis {
  width: 100%;
  height: 20%;
  min-height: 200px;
}
.node-label {
  text-align: center;
  text-anchor: middle;
  font-size: .8rem;
  font-weight: bold;
}

/*
Buttons
*/
.moment-action-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: none;
  height: 70px;
  font-weight: bold;
  overflow: hidden;
}
@media (hover: hover) {
  .moment-action-button:hover {
    background: #888888 !important;
  }
}
.moment-action-button:focus {
  background: #888888 !important;
}
.moment-action-button:after {
  content: "";
  background: #f8f8f8;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  border-radius: .35rem;
  transition: all 0.8s;
}
.moment-action-button:active:after {
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  opacity: 1;
  transition: 0s;
}
#button-agree {
  background: var(--color-agree);
}
#button-unsure {
  background: var(--color-unsure);
}
#button-key {
  background: var(--color-slight-agree);
}
#button-action {
  background: var(--color-action);
}

/*
Legends
*/
.legend-box {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  border: 1px solid white;
}
#legend-box-01 {
  background: var(--color-agree);
}
#legend-box-02 {
  background: var(--color-slight-agree);
}
#legend-box-03 {
  background: var(--color-neutral);
}
#legend-box-04 {
  background: var(--color-slight-unsure);
}
#legend-box-05 {
  background: var(--color-unsure);
}
#legend-like{
  background: var(--color-agree);
}
#legend-unsure{
  background: var(--color-unsure);
}
#legend-key{
  background: var(--color-slight-agree);
}
#legend-action{
  background: var(--color-action);
}
#legend-integration1 {
  background: rgb(255, 52, 179);
}
#legend-integration2 {
  background: rgb(255, 127, 205);
}
#legend-integration3 {
  background: rgb(255, 202, 232);
}
#legend-integration4 {
  background: rgb(255, 240, 245);
}
#legend-integration-nodata {
  background: rgb(211, 211, 211);
}

/*
Comments
*/
.comment-main {
  padding-bottom: 4px;
}
.comment-bubble {
  font-size: 0.9rem;
  padding: 10px;
  border-radius: 10px;
  background: #f8f8f8;
  overflow-wrap: break-word;
}
.comment-bubble.comment-highlighted {
  background: var(--color-lighterblue);
}
.comment-name {
  font-size: 0.8rem;
  font-weight: bold;
}
.comment-time {
  font-size: 0.8rem;
  margin-left: 4px;
}
.comment-text {
  word-break: break-all;
  overflow-wrap: break-word;
}
#comment-reply-target-text {
  word-break: break-all;
  overflow-wrap: break-word;
}
.comment-vote-num-total {
  font-size: 0.8rem;
  font-weight: bold;
}
.poll-choice-list {
  margin-top: 4px;
  margin-bottom: 8px;
}
.poll-result-choice-value {
  font-size: 0.75rem;
  font-weight: bold;
  padding-top: 0.15rem;
}

/*
Timeline
*/
.underline {
  stroke: #000000;
  stroke-width: 1;
}
#barplot-buttons-vis {
  overflow: hidden;
}

/*
Summary
*/
#vis-agreement {
  width: 100%;
  height: 20%;
  min-height: 200px;
}
.vis-crowd {
  width: 100%;
  height: 15%;
  min-height: 100px;
}
#vis-agreements-container {
  overflow-x: scroll;
}
.empathy-square {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0;
}
.listening-button-circle {
  stroke: #c8c8c8;
  fill: #ffffff;
}
.listening-button-circle-playing {
  stroke: var(--primary);
  fill: var(--primary);
}
.survey-progress-chart {
  font-size: .75rem;
}
.survey-progress-chart .progress {
  height: 10px;
}
.hidden-player {
  display: none;
  visibility: hidden;
}

/*
Scrollbar summary
*/
.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

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

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

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