/**********************************************************/
/*CSS VARIABLES	                                          */
/**********************************************************/
:root {
  --page-fill: #DCDCDD;
  --page-fill-darker: #c5c3c6;
  --page-fill-dark-mode: #101010;
  --element-dark-fill: #1b1d28;
  --element-light-fill: #2e303b;
  --element-lighter-fill: #41434E;
  --emphasis-fill: #388fe6;
  --emphasis-blue: #388fe6;
  --emphasis-green: #5ac059;
  --emphasis-red: #e6523e;
  --emphasis-orange: #fc955a;
  --emphasis-yellow: #edce51;
  --emphasis-purple: #E39BDB;
}
.fill-text {
  color: var(--emphasis-fill);
}
.blue-text {
  color: var(--emphasis-blue);
}
.green-text {
  color: var(--emphasis-green);
}
.red-text {
  color: var(--emphasis-red);
}
.orange-text {
  color: var(--emphasis-orange);
}
.yellow-text {
  color: var(--emphasis-yellow);
}
.purple-text {
  color: var(--emphasis-purple);
}
.darker-text {
  color: var(--page-fill-darker);
}
.fade-text {
  opacity: 0.7;
}
.underline-text {
  text-decoration: underline;
}
@font-face {
  font-family: 'OpenSans';
  src: url('/static/external/OpenSans-Regular.ttf') format('truetype');
}
body {
  font-family: 'OpenSans', Fallback, sans-serif;
  background-color: var(--page-fill-darker);
  padding: 0px;
  margin-left: 0px;
  transition: all 1s ease;
  padding-top: 50px;
}
.dark-mode body {
  background-color: var(--page-fill-dark-mode);
  transition: all 1s ease;
}
button {
  border: none;
}
textarea,
input {
  outline: none;
  border: none;
  background: var(--element-dark-fill);
  color: var(--page-fill);
  padding-left: 5px;
  padding-right: 5px;
  font-size: 12pt;
  height: 30px;
  border-radius: 3px;
  border: 1px solid var(--emphasis-fill);
}
input[type="radio"],
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  margin-left: 5px;
  cursor: pointer;
}
input:disabled {
  background: var(--element-lighter-fill);
  color: var(--page-fill);
  border: 1px solid var(--emphasis-fill);
  cursor: not-allowed;
}
li a {
  text-decoration: none;
}
/**********************************************************/
/*CLEAR FIX			                           			  */
/**********************************************************/
.group:after {
  content: "";
  display: table;
  clear: both;
}
/* CSS class for the top bar */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: var(--element-dark-fill);
  color: var(--emphasis-fill);
  padding: 5px 0px;
}
.border-bar {
  width: 100%;
  border-bottom: 2px solid var(--emphasis-fill);
}
.title-text {
  font-size: 22pt;
  margin-left: 10px;
  margin-bottom: 5px;
}
.top-bar-widgets-container {
  padding: 10px;
}
.top-bar-widget {
  cursor: pointer;
}
@media screen {
  .top-bar {
    flex-direction: column;
  }
}
.sidebar {
  position: fixed;
  top: 57px;
  bottom: 0px;
  left: -315px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  float: left;
  width: 300px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--element-light-fill);
  color: var(--page-fill);
  transition: left 0.25s ease;
  z-index: 100;
}
.page-content.sidebar-open > .sidebar {
  left: 0px;
  border-left: none;
  border-top: none;
  border-bottom: none;
}
.sidebar-toggle {
  width: 35px;
  /* border-radius: 50%; */
  position: fixed;
  top: 57px;
  bottom: 0px;
  left: 0px;
  background: var(--element-lighter-fill);
  font-size: 3em;
  color: var(--page-fill);
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  transition: left 0.25s ease;
  z-index: 100;
}
.sidebar-toggle:hover {
  background: var(--element-light-fill);
  cursor: pointer;
}
.sidebar-toggle:active {
  background: var(--element-light-fill);
}
.page-content.sidebar-open .sidebar-toggle {
  left: 320px;
}
.page-content .sidebar-toggle .sidebar-toggle-icon {
  transition: transform 0.25s ease;
}
.page-content.sidebar-open .sidebar-toggle .sidebar-toggle-icon {
  transform: scale(-1, 1);
}
.page-content {
  position: fixed;
  top: 57px;
  left: 40px;
  bottom: 0px;
  right: 10px;
  overflow: auto;
  padding: 5px;
  /* Remove scrollbar*/
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: left 0.25s ease, width 0.25s ease, right 0.25s ease;
}
.page-content.no-sidebar {
  position: fixed;
  top: 57px;
  left: 0px;
  bottom: 0px;
  right: 10px;
  overflow: auto;
  padding: 5px;
  /* Remove scrollbar*/
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: left 0.25s ease, width 0.25s ease, right 0.25s ease;
}
.page-content.sidebar-open {
  left: 360px;
}
.gratuitous-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 300pt;
  opacity: 0.05;
  z-index: -10;
  transition: all 1s ease;
}
.dark-mode .gratuitous-background {
  color: white;
  transition: all 1s ease;
}
.tab_holder {
  border-bottom: 2px solid var(--emphasis-fill);
}
.tab_holder .tab {
  padding: 5px;
  margin-right: 3px;
  color: var(--page-fill);
  width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  float: left;
  border: 1px solid var(--emphasis-fill);
  border-bottom: none;
  background-color: var(--element-dark-fill);
  cursor: pointer;
  font-size: 16pt;
  border-top-right-radius: 10px;
}
.tab_holder .tab.selected {
  background: var(--emphasis-fill);
}
.tab_holder .tab.selected i {
  color: var(--element-dark-fill) !important;
}
.tab-content {
  margin-top: 10px;
}
.tab_title {
  margin-bottom: 10px;
  border-bottom: 2px dotted var(--emphasis-fill);
  color: var(--emphasis-fill);
  padding-bottom: 3px;
  font-size: 14pt;
}
.big_tab_holder {
  border-bottom: 5px solid var(--element-light-fill);
}
.big_tab_holder .big_tab {
  padding: 5px;
  margin-right: 5px;
  color: var(--page-fill);
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  float: left;
  border-bottom: none;
  background: var(--element-light-fill);
  cursor: pointer;
  font-size: 14pt;
  border-top-right-radius: 10px;
  opacity: 0.3;
}
.big_tab_holder .big_tab.selected {
  background: var(--element-light-fill);
  opacity: 1;
  font-weight: bold;
  color: var(--emphasis-fill);
}
.big_tab_holder .big_tab.selected i {
  color: var(--emphasis-fill) !important;
}
.big_tab_holder .big_tab.button_tab {
  width: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
}
.prevent-select {
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}
.button {
  padding: 5px;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  border: 1px solid var(--emphasis-fill);
  cursor: pointer;
  background: var(--emphasis-fill);
  color: var(--element-dark-fill);
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
  border-radius: 3px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.button.small {
  width: 20px;
}
.flex-container {
  display: flex;
  width: 100%;
}
.flex-item {
  flex: 1;
}
.sidebar-header {
  margin-bottom: 25px;
  margin-top: 10px;
}
.expandable-shelf {
  margin-bottom: 3px;
  padding: 10px;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--element-dark-fill);
  color: var(--emphasis-fill);
  font-size: 12pt;
  border-radius: 5px;
}
.expandable-shelf .shelf-content {
  max-height: 0px;
  overflow: hidden;
  display: none;
  font-size: 11pt;
  transition: all 1s ease;
}
.expandable-shelf.expanded-shelf .shelf-content {
  max-height: auto;
  overflow: unset;
  display: unset;
  transition: all 1s ease;
}
.expandable-shelf:last-of-type {
  margin-bottom: 0px;
}
.expandable-self-wrapper {
  border-bottom: none;
  padding-bottom: 0px;
}
.expandable-shelf.expanded-shelf .expandable-self-wrapper {
  border-bottom: 1px dotted var(--emphasis-fill);
  padding-bottom: 5px;
}
.shelf-button {
  border-radius: 3px;
}
.shelf-content-block {
  padding: 5px;
  background: var(--element-light-fill);
  border-radius: 3px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--emphasis-fill);
  cursor: pointer;
}
.shelf-content-block:last-of-type {
  margin-bottom: 0px;
}
.shelf-content-block:hover {
  background: var(--element-lighter-fill);
}
.shelf-content-block-top-bar {
  display: flex;
}
.shelf-content-block-top-bar-identifier {
  flex: 100;
  font-weight: bold;
}
.shelf-content-block-top-bar-meta {
  font-size: 10pt;
}
.shelf-content-block-content {
  color: var(--page-fill-darker);
}
.bubble-element {
  background: var(--emphasis-fill);
  color: var(--element-dark-fill);
  border-radius: 500px;
  min-width: 25px;
  text-align: center;
  font-weight: bold;
  font-size: 11pt;
  margin-top: 3px;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}
.bubble-element.small {
  font-weight: unset;
  font-size: 10pt;
  padding-left: 5px;
  padding-right: 5px;
}
.tag-holder {
  margin-top: 5px;
  margin-bottom: 5px;
  border-top: 1px dotted var(--page-fill);
  padding-top: 5px;
}
.tag {
  margin-right: 5px;
  margin-bottom: 3px;
}
.big-group {
  font-size: 30pt;
  border-radius: 5px;
  text-align: center;
  padding-left: 10px;
  margin-bottom: 30px;
}
.favorite-button {
  margin-right: 5px;
  cursor: pointer;
}
.big-group-title {
  text-align: left;
  padding: 5px;
  padding-left: 10px;
  font-size: 14pt;
  background: var(--element-light-fill);
  border-radius: 5px;
  width: 400px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  padding-bottom: 0px;
}
.big-group-content {
  border: 5px solid var(--element-light-fill);
  border-radius: 20px;
  border-top-left-radius: 0px;
  padding: 10px;
  width: fit-content;
  min-width: 405px;
}
.big-group-content.dark-background {
  background: var(--element-dark-fill);
  color: var(--emphasis-fill);
}
.selected-project {
  border: 5px solid var(--emphasis-fill);
  background: var(--element-lighter-fill);
  font-size: 11pt;
  position: relative;
}
.selected-project::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-width: 15px 0 15px 15px;
  border-style: solid;
  border-color: transparent transparent transparent var(--emphasis-fill);
}
.big-button {
  float: left;
  margin: 10px;
  height: 150px;
  width: 150px;
  background: var(--element-light-fill);
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.no-deco-link {
  text-decoration: none;
  color: inherit;
}
.big-button:hover {
  background: var(--element-lighter-fill);
}
.big-button:active {
  background: var(--element-light-fill);
}
.big-button:focus-visible {
  background: var(--element-lighter-fill);
}
.big-button-icon {
  font-size: 50pt;
}
.big-button-text {
  font-size: 11pt;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--page-fill);
}
.icon-button-icon {
  font-size: 20px;
  color: var(--element-dark-fill);
}
.icon-button-text {
  font-size: 20px;
  color: var(--element-dark-fill);
}
.icon-button {
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  cursor: pointer;
  background: var(--emphasis-fill);
  color: var(--element-dark-fill);
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
  border-radius: 3px;
  width: 250px;
  float: right;
  height: 30px;
  padding-top: 10px;
  font-size: 15pt;
  font-weight: bold;
  margin: 3px;
}
.content-bar {
  display: flex;
  flex-direction: row;
  padding: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--element-light-fill);
  margin-bottom: 10px;
  border-radius: 5px;
  font-size: 11pt;
}
.content-bar .button {
  width: 250px;
  float: right;
  height: 30px;
  padding-top: 10px;
  font-size: 15pt;
  font-weight: bold;
  margin-bottom: 5px;
}
.content-bar-label {
  color: var(--page-fill-darker);
  flex: 3;
}
.content-bar-main-label {
  font-size: 16pt;
  font-weight: bold;
  color: var(--emphasis-fill);
}
.content-bar-sub-label {
  opacity: 0.7;
}
.content-bar-content {
  margin-top: auto;
  margin-bottom: auto;
  flex: 2;
}
.step-button {
  background: var(--emphasis-red);
  border: none;
}
.no-project-splash {
  padding-top: 10px;
}
.workflow-diagram-container {
  flex: 2;
  padding: 10px;
  overflow: auto;
  cursor: grab;
}
.workflow-diagram-help-text-container {
  flex: 0.5;
  padding: 10px;
}
.workflow-faq-box {
  background: var(--element-light-fill);
  font-size: 11pt;
  padding: 10px;
  border-radius: 5px;
}
.workflow-faq-box .button {
  margin-bottom: 5px;
  font-size: 12pt;
  text-align: left;
}
.workflow-faq-box .button.subtask {
  background: var(--emphasis-orange);
  border: 1px solid var(--emphasis-orange);
}
.workflow-faq-box-title {
  font-size: 16pt;
  font-weight: bold;
  border-bottom: 1px solid var(--emphasis-fill);
  color: var(--emphasis-fill);
}
.workflow-faq-box-subtitle {
  font-size: 14pt;
  font-weight: bold;
  color: var(--emphasis-fill);
  margin-bottom: 5px;
}
.workflow-faq-box-content {
  border-bottom: 1px solid var(--emphasis-fill);
  color: var(--page-fill-darker);
  margin-top: 10px;
  padding-bottom: 10px;
}
.workflow-faq-box-content:last-of-type {
  border-bottom: none;
  padding-bottom: 0px;
}
.workflow-container {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.workflow-container:active {
  cursor: grabbing;
}
.project-content {
  height: 100%;
}
.project-content .tab-content {
  height: 80%;
}
.workflow-sidebar-menu-content .icon-button {
  float: none;
  margin: 5px;
  margin-left: auto;
  margin-right: auto;
}
.workflow-sidebar-menu-content .sub-step-button {
  cursor: default;
}
.canvas-container {
  width: 100%;
  height: 100%;
}
/* Hiding scrollbar for Chrome, Safari and Opera */
#workflow-canvas-container::-webkit-scrollbar {
  display: none;
}
/* Hiding scrollbar for IE, Edge and Firefox */
#workflow-canvas-container {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  max-width: 100%;
  max-height: 750px;
}
.flex-row-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
}
.flex-column-container {
  display: flex;
  flex-flow: column nowrap;
}
.workflow-renderer-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.workflow-renderer-container .workflow-container {
  width: 100%;
}
.workflow-renderer-container .workflow-sidebar {
  width: 300px;
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 10px;
  border-radius: 5px;
  background: var(--element-light-fill);
  max-height: 575px;
  overflow-y: auto;
}
.workflow-renderer-container #workflow-step-menu .workflow-sidebar-menu-content {
  padding: 5px;
}
.workflow-renderer-container .workflow-sidebar-menu {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: start;
  margin-top: 5px;
  margin-bottom: 5px;
}
.workflow-renderer-container .workflow-sidebar-menu .workflow-sidebar-menu-header {
  font-size: 16pt;
  font-weight: bold;
  color: var(--emphasis-fill);
  border-bottom: 1px solid var(--emphasis-fill);
  width: 100%;
}
.workflow-renderer-container .workflow-sidebar-menu .workflow-sidebar-menu-content-subtitle {
  font-size: 14pt;
  font-weight: bold;
  color: var(--emphasis-fill);
  width: 100%;
}
.workflow-renderer-container .workflow-sidebar-menu .workflow-sidebar-menu-content {
  font-size: 11pt;
  color: var(--page-fill-darker);
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.workflow-renderer-container .workflow-sidebar-menu .workflow-sidebar-menu-content .button {
  margin: 5px;
}
#workflow-subtask-menu .button {
  border: 1px solid var(--emphasis-orange);
  background: var(--emphasis-orange);
}
#workflow-subtask-menu .complete {
  background: var(--emphasis-green);
  border: 1px solid var(--emphasis-green);
}
#workflow-subtask-menu .incomplete {
  background: var(--emphasis-red);
  border: 1px solid var(--emphasis-red);
}
.faq-answer {
  display: none;
  border-left: 2px solid var(--emphasis-fill);
  padding-left: 10px;
  margin: 10px;
  margin-left: 5px;
}
a {
  color: var(--emphasis-fill);
}
.center-float-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--element-light-fill);
  border-radius: 5px;
  padding: 10px;
  z-index: 100;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.center-float-box .center-float-box-title {
  font-size: 16pt;
  font-weight: bold;
  color: var(--emphasis-fill);
  margin-bottom: 10px;
}
.center-float-box .center-float-box-content {
  font-size: 11pt;
  color: var(--page-fill-darker);
  margin-top: 10px;
  margin-bottom: 10px;
}
.form-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.form-container.left-align {
  justify-content: flex-start;
}
.form-container .form-group {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  flex-basis: 100%;
}
.form-container .form-group label {
  font-size: 14pt;
  font-weight: bold;
  color: var(--emphasis-fill);
  margin-right: 10px;
  text-align: right;
  width: 33%;
}
.form-container .form-group input {
  flex: 1;
}
.form-container .form-group select {
  flex: 1;
}
.form-container .form-group a {
  margin: 5px;
}
.form-container .form-group.two-column {
  flex-basis: 50%;
}
.dark-container {
  background: var(--element-light-fill);
  padding: 5px;
  border-radius: 5px;
}
form {
  margin: 0px;
  padding: 0px;
}
.subtle-link {
  color: var(--emphasis-fill);
  text-decoration: underline;
  cursor: pointer;
}
.alert {
  background: var(--emphasis-red);
  color: var(--element-dark-fill);
  padding: 10px;
  border-radius: 5px;
  font-size: 11pt;
}
.alert-danger {
  background: var(--emphasis-red);
}
.dark-button {
  background: var(--element-lighter-fill);
  color: var(--page-fill);
  border: 1px solid var(--emphasis-fill);
  cursor: pointer;
  border-radius: 3px;
}
.dark-button:hover {
  background: var(--element-light-fill);
  color: var(--page-fill);
  border: 1px solid var(--emphasis-fill);
}
.dark-button:active {
  background: var(--element-lighter-fill);
  color: var(--page-fill);
  border: 1px solid var(--emphasis-fill);
}
select {
  background: var(--element-lighter-fill);
  color: var(--page-fill);
  border: 1px solid var(--emphasis-fill);
  cursor: pointer;
  border-radius: 3px;
  padding: 5px;
  font-size: 11pt;
}
table tr.filtered {
  display: none;
}
.table-striped {
  background: var(--element-dark-fill);
  color: var(--page-fill);
  border: 1px solid var(--emphasis-fill);
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 10px;
}
.table-striped th {
  background: var(--element-dark-fill);
  color: var(--page-fill);
  padding: 5px;
}
.table-striped td {
  padding: 5px;
}
.table-striped tr:first-child {
  background: var(--element-light-fill);
}
.table-striped tr:nth-child(even) {
  background: var(--element-lighter-fill);
}
.table-striped tr:nth-child(odd) {
  background: var(--element-light-fill);
}
#workflow-title-bar {
  transition: all 0.25s ease;
  max-height: auto;
}
#workflow-action-bar {
  transition: all 0.25s ease;
  max-height: auto;
}
#workflow-title-bar.hidden {
  opacity: 0;
  transform: scaleY(0);
  transform: translateY(-100%);
  padding: 0px;
  margin: 0px;
  font-size: 0pt;
}
#workflow-title-bar.hidden * {
  font-size: 0pt;
  margin: 0px;
  padding: 0px;
  transition: all 0.25s ease;
}
#workflow-action-bar.hidden {
  opacity: 0;
  transform: scaleY(0);
  transform: translateY(-100%);
  padding: 0px;
  margin: 0px;
  font-size: 0pt;
}
#workflow-action-bar.hidden * {
  font-size: 0pt;
  margin: 0px;
  padding: 0px;
  transition: all 0.25s ease;
}
.badge {
  padding: 5px;
  border-radius: 15px;
  margin: 5px;
  font-size: 11pt;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold;
  /* Safari */
  /* IE 10 and IE 11 */
  /* Standard syntax */
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}
.badge.clickable {
  cursor: pointer;
}
.badge.fill {
  background-color: #388fe6;
  color: #ffffff;
}
.badge.blue {
  background-color: #388fe6;
  color: #ffffff;
}
.badge.green {
  background-color: #5ac059;
  color: #ffffff;
}
.badge.red {
  background-color: #e6523e;
  color: #ffffff;
}
.badge.orange {
  background-color: #fc955a;
  color: #ffffff;
}
.badge.yellow {
  background-color: #edce51;
  color: #000000;
}
.badge.purple {
  background-color: #E39BDB;
  color: #000000;
}
.flex-row-wrap-start-center {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
}
.inputs-container input,
.inputs-container textarea,
.inputs-container select {
  margin: 2.5px;
}
div.dt-length .dt-input {
  background: white !important;
}
.bold-text {
  font-weight: bold;
}
.modal {
  position: fixed;
  background: var(--page-fill);
  border-radius: 5px;
  border: 1px solid var(--element-lighter-fill);
}
.modal .modal-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.modal .modal-content .modal-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--element-dark-fill);
  border-bottom: 1px solid var(--element-lighter-fill);
}
.modal .modal-content .modal-header .modal-title {
  flex-basis: 85%;
  font-size: 16pt;
  font-weight: bold;
  color: var(--emphasis-fill);
  padding: 10px;
}
.modal .modal-content .modal-header .close {
  flex-basis: 5%;
  text-align: right;
  padding: 5px;
  color: var(--emphasis-fill);
  font-size: 24pt;
  margin-right: 5px;
}
.modal .modal-content .modal-header .close:hover {
  cursor: pointer;
}
.tag-list .tag {
  background: var(--element-light-fill);
  color: var(--page-fill);
  border: 1px solid var(--emphasis-fill);
  border-radius: 5px;
  padding: 5px;
  margin: 2.5px;
  font-size: 11pt;
  display: inline-block;
  cursor: pointer;
}
.tag-list .tag.selected {
  background: var(--emphasis-fill);
  color: var(--element-dark-fill);
}
.collapse-button {
  background: var(--element-light-fill);
  color: var(--page-fill);
  border: 1px solid var(--emphasis-fill);
  border-radius: 5px;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  /* Safari */
  /* IE 10 and IE 11 */
  /* Standard syntax */
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}
.collapse-button:hover {
  background: var(--element-lighter-fill);
}
.collapse-button:active {
  background: var(--emphasis-fill);
  color: var(--element-light-fill);
}
.collapse-button.collapsed::before {
  content: '+ ';
}
.collapse-button.expanded::before {
  content: '- ';
}
.collapse-section.collapsed {
  display: none;
}
.collapse-section.expanded {
  display: block;
}
.tab-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  margin-top: 10px;
  margin-bottom: 10px;
}
.tab-container .tabs-holder {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-left: 5px;
  padding-right: 5px;
  background: var(--element-dark-fill);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.tab-container .tabs-holder .tab {
  background: var(--element-dark-fill);
  color: var(--page-fill);
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 5px;
  cursor: pointer;
}
.tab-container .tabs-holder .tab:hover {
  background: var(--element-lighter-fill);
}
.tab-container .tabs-holder .tab.active {
  background: var(--emphasis-fill);
  color: var(--element-dark-fill);
}
.tab-container .tab-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--element-light-fill);
  margin-top: 0px;
}
.tab-container .tab-pane {
  display: none;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: var(--element-light-fill);
}
.tab-container .tab-pane.active {
  display: block;
}
.help-page {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}
.help-page a {
  color: var(--emphasis-fill);
  text-decoration: underline;
  cursor: pointer;
}
.help-page .help-page-header {
  font-weight: bold;
  color: var(--emphasis-fill);
  border-bottom: 1px solid var(--emphasis-fill);
  width: 100%;
  padding: 5px;
  background: var(--element-dark-fill);
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.help-page .help-page-header h2 {
  margin: 0px;
}
.help-page .help-page-sections {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  background: var(--element-light-fill);
  padding-left: 10px;
}
.help-page .help-page-sections .section {
  color: var(--page-fill);
}
.help-page .help-page-sections .section h3 {
  color: var(--emphasis-fill);
  border-bottom: 1px solid var(--emphasis-fill);
  width: 100%;
  padding-bottom: 5px;
}
.help-page .help-page-sections .section p {
  margin-top: 5px;
  margin-bottom: 5px;
}
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--element-dark-fill);
  border-radius: 5px;
  border: 1px solid var(--emphasis-fill);
  z-index: 1000;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-width: 500px;
}
.popup .popup-header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.popup .popup-header h2 {
  margin: 0px;
  font-weight: bold;
  color: var(--emphasis-fill);
}
.popup .popup-header .close {
  font-size: 24pt;
  color: var(--emphasis-fill);
  cursor: pointer;
  margin-left: auto;
  margin-right: 5px;
}
.popup .popup-content {
  background: var(--page-fill);
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.backdrop {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}