/* SHARED */
.main-content {
  height: 90vh;
}

.navbar-logo {
  height: 30px;
  width: 30px;
}

#preAuthForms {
  height: 100vh;
}

.preAuthIcon {
  height: 124px;
}

.formContainer {
  width: 90%;
  margin: auto;
}

input[type="text"],
input[type="email"],
[type="password"] {
  background-color: black;
  color: palegoldenrod;
}

h1,
h2 {
  color: palegoldenrod;
}

input[type="checkBox"] {
  background-color: black;
  color: palegoldenrod;
}

.button {
  height: 24px;
  display: block;
  margin: auto;
  margin-top: 5px;
  background-color: #1a1a1a;
  color: palegoldenrod;
  border: 1px solid palegoldenrod;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #474448;
}

input:focus {
  background-color: #232323;
}

.accBoxIcs {
  filter: grayscale(40%);
}

.accFilterSelect {
  background-color: black;
  color: palegoldenrod;
}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #000;
  color: palegoldenrod;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  border: 1px solid palegoldenrod;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#snackbar.showdiag {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
     However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

/* Notes */
.resizable {
  resize: both;
  overflow: auto;
}

.sticky-note {
  position: absolute;
  padding: 2px;
  border-radius: 5px;
  min-width: 150px;
  max-width: 550px;
  min-height: 150px;
}

.note-header {
  display: flex;
  justify-content: space-between;
}

.drag-handle {
  cursor: move;
}

.edit-handle,
.delete-handle {
  cursor: pointer;
}

.note-divider {
  margin-top: -2px;
}

.note-content {
  overflow: auto;
  height: calc(100% - 40px);
}

/* SIDE BAR */
.sidebar {
  display: table;
  width: 100%;
  margin: 0;
}

#accountinfo {
  height: 160px;
  display: table-row;
}

#invasions {
  height: 50%;
}

#remaining {
  display: table-row;
}

/* FISSURE CONTAINER */
.fissureView {
  width: 100%;
}

.skillbox {
  box-sizing: border-box;
  width: 100%;
  margin: 20px 0;
  padding-left: 5px;
  padding-right: 5px;
}

.skillbox p {
  color: palegoldenrod;
  margin: 0 0 10px;
  padding: 0;
  font-weight: bold;
  letter-spacing: 1px;
}

.skillbox p:nth-child(2) {
  float: right;
  position: relative;
  top: -20px;
}

.skill {
  padding: 0px;
  box-sizing: border-box;
  border: 1px solid rgba(74, 74, 74, 0.7);
  border-radius: 2px;
}

.skill_level {
  background: rgba(74, 74, 74, 0.7);
  width: 100%;
  height: 10px;
}

/* SEARCH CONTAINER */
.full-height {
  min-height: -moz-available; /* WebKit-based browsers will ignore this. */
  min-height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  min-height: fill-available;
}
svg {
  color: palegoldenrod;
  fill: currentColor;
  width: 24px;
  height: 24px;
  padding: 3px;
}

#formsearch {
  background-color: black;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input-search {
  all: unset;
  font: 16px system-ui;
  color: palegoldenrod;
  height: 100%;
  width: 100%;
  padding: 6px 10px;
}

::placeholder {
  color: #fff;
  opacity: 0.7;
}

/* INVASION CONTAINER */
#invasions {
  margin-top: 0;
  height: inherit;
  overflow: auto;
  display: block;
}

.invasion {
  margin: 15px 0;
  display: flex;
  flex-wrap: wrap;
}

.invasion:last-child {
  margin-bottom: 0;
}

.bar-header {
  height: 20px;
  width: 100%;
  color: palegoldenrod;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.opponent {
  width: 35%;
  padding-top: 1px;
  border: 1px solid palegoldenrod;
  border-bottom: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.opponent:hover .opponent-tooltip {
  visibility: visible;
}

.opponent:first-child {
  background: var(--op1-color);
}

.opponent:last-child {
  background: var(--op2-color);
}

.opponent-tooltip-1 {
  visibility: hidden;
  width: auto;
  color: palegoldenrod;
  text-align: center;
  border: 1px solid palegoldenrod;
  border-radius: 6px;
  padding: 5px 10px;
  white-space: pre-wrap;
  background: var(--op1-color-tip);

  /* Position the tooltip */
  position: fixed;
  z-index: 1;
  left: 0;
}

#graph-1{
  background: linear-gradient(0.25turn, var(--op1-color) 8.47%, var(--op2-color) 8.47%);
}

.opponent-tooltip-2 {
  visibility: hidden;
  width: auto;
  color: palegoldenrod;
  text-align: center;
  border: 1px solid palegoldenrod;
  border-radius: 6px;
  padding: 5px 10px;
  white-space: pre-wrap;
  background: var(--op2-color);

  /* Position the tooltip */
  position: fixed;
  z-index: 1;
  left: 0;
}

.colored-graph {
  height: 20px;
  width: 100%;
  border: 1px solid palegoldenrod;
}

#graph-2 {
  background: linear-gradient(
    0.25turn,
    var(--op1-color) 80%,
    var(--op2-color) 80%
  );
}

#graph-3 {
  background: linear-gradient(
    0.25turn,
    var(--op1-color) 20%,
    var(--op2-color) 20%
  );
}

.graph-text {
  width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 1px;
}

.graph-value,
.timer-value,
.graph-spacer {
  color: palegoldenrod;
  text-align: center;
  padding: 0 5px;
}

/* CYCLE CONTAINER */
.cycle-item {
  width: var(--cycle-width);
  border: 1px solid var(--primary-color);
}

.cycle-title {
  background-color: var(--segment-color);
}

.cycle-attribute {
  padding: 5px;
}

.cycle-icon {
  height: 60px;
  margin: 5px;
  padding: 0;
}

.cycle-anger {
  filter: invert(18%) sepia(100%) saturate(7497%) hue-rotate(0deg)
    brightness(102%) contrast(104%);
}

.cycle-envy {
  filter: invert(50%) sepia(90%) saturate(2000%) hue-rotate(80deg)
    brightness(90%) contrast(95%);
}

.cycle-sorrow {
  filter: grayscale(100%) brightness(10%) invert(20%) sepia(90%);
}

.cycle-fear {
  filter: invert(15%) sepia(25%) saturate(200%) hue-rotate(210deg)
    brightness(90%) contrast(110%);
}

.cycle-joy {
  filter: invert(10%) sepia(50%) saturate(4000%) hue-rotate(30deg)
    brightness(110%) contrast(120%);
}

.period-hidden {
  display: none;
}

#steel-path {
  display: flex;
  justify-content: center;
  width: 80%;
  border: 1px solid var(--primary-color);
  padding: 2px 5px;
}

.path-attributes {
  display: flex;
  margin-left: 10px;
}

.path-attribute {
  padding: 0 5px;
}

.path-cost {
  display: flex;
  padding: 0;
}

.path-icon,
.cost-icon {
  height: 15px;
  padding-top: 0;
}

/* MAIN CONTAINER */
.parent-container {
  display: flex;
  flex-direction: column;
  height: 100%; /* Total maximum height for the container */
}

#title {
  flex-shrink: 0; /* Prevent h5 from shrinking */
  margin-bottom: 0;
  padding: 8px; /* Adjust as needed */
}

.table-container {
  padding: 5px;
  flex: 1 1 auto; /* Allow it to grow and take the remaining space */
  height: 100%;
}

tbody {
  overflow: auto;
}

#spacer {
  margin-top: 0;
  width: 215px;
  padding: 0 0 10px 0;
  border-color: #eee8aa !important;
}
:root {
  --border-color: #4a4a4a;
  --row-bg-color-even: #1a1a1a;
  --row-bg-color-odd: #232323;
  --primary-color: #eee8aa;
  --bg-color: #000000;
  --hover-color: #474448;
  --segment-color: #4a4a4a;
  --cycle-width: 100px;
  --op1-color: rgba(74, 74, 74, 0.7);
  --op2-color: rgba(80, 80, 80, 0.9);
  --op1-color-tip: rgba(74, 74, 74, 0.9);
}

body {
  width: 100%;
  margin: auto;
  background-color: #000000;
}

.container {
  background-color: var(--bg-color);
  color: var(--primary-color);
  padding: 0px;
  font-size: 0.875rem;
}

fieldset {
  display: flex;
  flex-direction: column; /* Arrange children vertically */
  height: 100%; /* Allow it to take full height of the parent */
}

.border {
  border-color: #eee8aa !important;
}

legend {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#title {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  color: #eee8aa;
  padding: 0 15px;
  top: 5px;
}

#table-wrapper {
  position: relative;
  height: inherit;
}
#table-wrapper table {
  width: 100%;
}

.form-container {
  flex-shrink: 0; /* Prevent the form from shrinking */
}

#table-wrapper-search {
  position: relative;
  display: flex;
  overflow-y: scroll;
}

#table-wrapper-search table {
  width: 100%;
  margin: 5px;
}

#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

#list-box-table {
  width: 100%;
  text-align: left;
  border-collapse: separate;
  overflow: auto;
  border-spacing: 0;
  display: block;
}

#list-box-dropdata {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-color);
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 10px;
  overflow: auto;
  display: table;
  height: fit-content;
}

#list-box-searchdata {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-color);
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 10px;
  overflow: auto;
  display: table;
  height: 100%;
}

th:not(#ingredients-name) {
  border: 1px solid var(--border-color);
  text-align: center;
  padding: 2px 5px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  width: 100%;
  z-index: 3;
  background: #2d2a32;
}

th:is(#ingredients-name) {
  border-left: 1px solid var(--border-color);
  text-align: center;
  padding: 2px 5px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  width: 80%;
  z-index: 3;
  background: #2d2a32;
}

th:first-child:not(#ingredients-name) {
  border-left: none;
  text-align: left;
  width: 100%;
}

th:first-child:is(#ingredients-name) {
  border-left: none;
  text-align: left;
  width: 24px;
}
th:nth-child(3):is(#ingredients-name) {
  width: 10%;
}
th:nth-child(4):is(#ingredients-name) {
  width: 10%;
}

.colored tr {
  border-bottom: 1px solid var(--border-color);
}

.colored tr:nth-child(even) {
  background-color: var(--row-bg-color-even);
}

.colored tr:nth-child(odd) {
  background-color: var(--row-bg-color-odd);
}

.name:not(#ingredients-name) {
  text-align: left;
  padding: 2px 5px;
  position: relative;
}

.name:is(#ingredients-name) {
  text-align: center;
  padding: 2px 5px;
  position: relative;
}

.ingredients-td {
  text-align: center;
}

.name:hover .name-tooltip {
  visibility: visible;
  display: block;
}

.name-tooltip {
  /* Styling */
  visibility: hidden;
  color: #eee8aa;
  border: 1px solid #eee8aa;
  background: var(--hover-color);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Position the tooltip */
  position: fixed;
  z-index: 20;
}

.name:hover .name-tooltip-ingredient {
  visibility: visible;
  display: flex;
}

.name-tooltip-ingredient {
  /* Styling */
  visibility: hidden;
  color: #eee8aa;
  border: 1px solid #eee8aa;
  background: var(--hover-color);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Position the tooltip */
  position: fixed;
  z-index: 20;
}

#tooltip-header th {
  text-align: center;
  width: fit-content;
}

#tooltip-header th:last-child {
  text-align: left;
}

#tooltip-table {
  height: fit-content;
}

#tooltip-table tr,
#tooltip-table td {
  padding: 2px 5px;
  height: 25px;
}

#tooltip-table .tooltip-counter {
  text-align: right;
}
#tooltip-table {
  width: 100%;
}
#tooltip-table .tooltip-name {
  text-align: left;
  width: 25px;
}

.checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--primary-color);
}

#list-box-table > tr:not(:first-child):hover {
  background-color: var(--hover-color) !important;
}

#list-box-table
  > tr:not(:first-child):hover
  > td:not(:first-child)
  > label
  > .checkbox.checked {
  accent-color: var(--hover-color) !important;
}

/* quill editor */
.ql-snow .ql-stroke {
  stroke: #eee8aa;
}

.ql-picker-label {
  color: #eee8aa;
}

.ql-snow .ql-picker-options {
  background-color: #000;
  color: #eee8aa;
}

.ql-snow .ql-tooltip {
  background-color: #000;
  color: #eee8aa;
  border: 1px solid #eee8aa;
}

.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "Enter link:";
  color: #eee8aa;
}

.ql-snow .ql-tooltip input[type="text"] {
  display: none;
  border: 1px solid #eee8aa;
  color: #eee8aa;
  background-color: #000;
}

.ql-toolbar.ql-snow {
  border: 2px solid #eee8aa;
}

.ql-container.ql-snow {
  border: 2px solid #eee8aa;
}

#noteContent .ql-editor {
  min-height: 150px;
}

#add-note {
  border: 1px solid palegoldenrod;
  width: 156px;
  height: 24px;
  cursor: pointer;
}
.modal-content {
  background-color: #000;
  color: #eee8aa;
}

#noteColor,
#fontColor {
  background-color: #000;
  border-color: #000;
}

.active {
  background-color: #474448;
  border-radius: 10px; /* Adjust the value as needed */
}

.baseGrid {
  flex: 0 0 20%;
  max-width: 20%;
}

.w96vw {
  width: 96vw;
}

#mode {
  background-color: black;
  color: palegoldenrod;
  margin-left: 5px;
}