.menubar {
  display             : inline-block;
  width               : auto;
  margin              : 10px;
  padding             : 10px;
  border-collapse     : collapse;
  border-radius       : 10px;
  text-align          : center;
  color               : black;
  background-color    : var(--color-theme1);
  box-shadow          : 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow            : visible;
}

/*
** Box Wraps
*/

.arms-task-box {
  display             : inline-block;
  padding             : 4px;
  margin              : 2px;
  background-color    : var(--color-theme1);
  color               : lime;
  border-radius       : 3px;
  box-shadow          : 0 2px 5px rgba(0, 0, 0, 0.1);
}

.vs-task-box {
  display             : block;
  padding             : 8px;
  margin              : 1px;
  background-color    : var(--color-theme1);
  color               : white;
  border-radius       : 3px;
  box-shadow          : 0 2px 5px rgba(0, 0, 0, 0.1);
}

.vs-day-box {
  display             : block;
  padding             : 8px;
  margin              : 1px;
  background-color    : var(--color-theme1);
  color               : white;
  border-radius       : 3px;
  box-shadow          : 0 2px 5px rgba(0, 0, 0, 0.1);
}

.category-box {
  display             : inline-block;
  padding             : 4px;
  margin              : 2px;
  background-color    : var(--color-theme1);
  color               : yellow;
  border-radius       : 3px;
  box-shadow          : 0 2px 5px rgba(0, 0, 0, 0.1);
}

.box-empty {
  color               : red;
}

/*
** Item Tooltip
*/

.highlighted-green-item {
  border-radius         : 3px;
  border                : 3px solid lime;
  box-shadow            : 0 0 3px rgba(0, 255, 0, 1);
  transition            : filter 0.3s ease-in-out;
  overflow              : hidden;
}

.highlighted-red-item {
  border-radius         : 3px;
  border                : 3px solid red;
  box-shadow            : 0 0 3px rgba(255, 0, 0, 1);
  transition            : filter 0.3s ease-in-out;
  overflow              : hidden;
}

.item-image-container {
  position              : relative;
  display               : inline-block;
  overflow              : visible;
}

.item-image-container:hover .item-textbox {
  visibility            : visible;
  display               : block;
  opacity               : 1;
  transform             : translateY(-50%);
}

.item-image-container:hover .item-textbox::after {
  left                  : -5px;
}

.item-textbox {
  display               : none;
  position              : absolute;
  top                   : 50%;
  left                  : 50%;
  transform             : translateX(-50%);
  pointer-events        : none;
  background-color      : white;
  color                 : black;
  padding               : 12px;
  width                 : 35em;
  border-radius         : 3px;
  border                : 1px solid black;
  text-align            : left;
  opacity               : 0;
  box-shadow            : 0 2px 5px rgba(0, 0, 0, 0.2);
  transition            : opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  z-index               : 10000;
  font-size             : 1.2em;
}

.item-textbox::after {
  content               : '';
  position              : absolute;
  top                   : 50%;
  left                  : -5px;
  transform             : translateY(-50%);
  border-top            : 5px solid transparent;
  border-right          : 5px solid white;
  border-bottom         : 5px solid transparent;
}

.item-textbox::before {
  content               : '';
  position              : absolute;
  top                   : 50%;
  left                  : -6px;
  transform             : translateY(-50%);
  border-top            : 5px solid transparent;
  border-right          : 5px solid black;
  border-bottom         : 5px solid transparent;
  z-index               : -1;
}

.item-textbox b {
  display               : block;
  margin-bottom         : 10px;
}

.item-textbox li, .item-textbox ul {
  margin-left           : 0;
  padding-left          : 0;
  list-style-position   : inside;
}

/*
** Main Table
*/

.main-table {
  width                 : 100%;
  table-layout          : auto;
}

.main-table td {
  padding               : 0;
  vertical-align        : top;
  width                 : auto;
}

.main-table .main-middle-cell {
  width                 : 60%;
  padding               : 10px;
  text-align            : center;
  margin                : 0 auto;
}

.main-table .main-right-cell {
  padding               : 10px;
  min-width             : 40%;
  max-width             : 40%;
}

/*
** Notice Board
*/

.notice {
  background-color      : var(--color-theme2);
  color                 : var(--color-theme3);
  border-radius         : 5px;
  text-shadow           : 0 1px 1px rgba(black, 0.5);
  box-shadow            : 0 2px 8px rgba(0, 0, 0, 0.8), 0 -2px 3px rgba(255, 255, 255, 0.1);
  padding               : 20px;
  margin-top            : 20px;
  text-align            : left;
  width                 : 100%;
}

.notice > h3, .notice > h5 {
  text-align            : center;
}

.notice-table {
  margin                : 0 auto;
  table-layout          : fixed;
  font-size             : 0.8em;
}

.notice-table td {
  white-space           : nowrap;
  overflow              : hidden;
  padding-left          : 10px;
  padding-right         : 10px;
}

/*
** Action Button
*/

.action-button {
  position              : relative;
  border                : none;
  background            : transparent;
  padding               : 0;
  cursor                : pointer;
  font-family           : sans-serif;
  font-size             : 1em;
}

.action-button .action-button-shadow {
  position              : absolute;
  top                   : 0;
  left                  : 0;
  width                 : 100%;
  height                : 100%;
  background            : black;
  background            : rgba(0, 0, 0, 0.25);
  border-radius         : 8px;
  transform             : translateY(2px);
  transition            : transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.action-button .action-button-edge {
  position              : absolute;
  top                   : 0;
  left                  : 0;
  width                 : 100%;
  height                : 100%;
  border-radius         : 8px;
  background            : linear-gradient(
                          to left,
                          hsl(217, 33%, 16%) 0%,
                          hsl(217, 33%, 32%) 8%,
                          hsl(217, 33%, 32%) 92%,
                          hsl(217, 33%, 16%) 100%
                          );
}

.action-button .action-button-front {
  position              : relative;
  display               : flex;
  align-items           : center;
  justify-content       : center;
  padding               : 12px 28px;
  font-size             : 1em;
  color                 : white;
  background            : var(--color-theme2);
  border-radius         : 8px;
  transform             : translateY(-4px);
  transition            : transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.action-button:hover .action-button-shadow {
  transform             : translateY(4px);
  transition            : transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.action-button:hover .action-button-front {
  transform             : translateY(-6px);
  transition            : transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.action-button:active .action-button-shadow {
  transform             : translateY(1px);
  transition            : transform 34ms;
}

.action-button:active .action-button-front {
  transform             : translateY(-2px);
  transition            : transform 34ms;
}

.action-button .action-button-front span {
  user-select           : none;
}

/*
** Inventory
*/
  
.inventory-tab {
  display               : inline-block;
  position              : relative;
  width                 : auto;
  min-width             : 10em;
  max-width             : 10em;
  padding               : 0.7em 1em;
  margin                : 1.5em 0 1px 0;
  border-radius         : 5px 5px 5px 5px;
  border-top            : 3px solid transparent;
  border-bottom         : 3px solid transparent;
  border-left           : none;
  border-right          : none;
  text-align            : center;
  text-shadow           : 0 1px 1px rgba(black, 0.5);
  box-shadow            : 0 2px 4px rgba(0, 0, 0, 0.8), 0 -2px 3px rgba(255, 255, 255, 0.1);
  background-color      : var(--color-theme2);
  color                 : var(--color-theme3);
  cursor                : pointer;  
  transition            : background-color 0.3s ease, padding 0.3s ease, border-radius 0.3s ease, box-shadow 0.2s ease;
  transform             : skew(-4deg);
  font-size             : 1em;
}

.inventory-tab.clicked {
  border-bottom         : 5px solid var(--color-theme4);
  border-bottom-color   : var(--color-theme5);
  background            : var(--color-theme6);
  color                 : var(--color-theme3);
  transform             : skew(-5deg) scaleY(1.2);
}

.inventory-tab.clicked:after,
.inventory-tab.clicked:before {
  content               : "";
  position              : absolute;
  left                  : 50%;
  top                   : 100%;
  border-top            : 15px solid var(--color-theme6);
  border-bottom         : none;
  border-left           : 20px solid transparent;
  border-right          : 20px solid transparent;
  transform             : translateX(-50%);
}

.inventory-tab.clicked:before {
  padding-top           : 10px;
  border-top-color      : var(--color-theme5);
}

.inventory-tab.clicked:after {
  margin-top            : -5px;
  border-top-color      : var(--color-theme6);
}

.inventory {
  display               : block;
  width                 : 100%;
  margin                : 10px;
  padding               : 10px;
  border-collapse       : collapse;
  border-radius         : 10px;
  overflow              : visible;
  color                 : var(--color-theme1);
  
}

.inventory-content {
  padding               : 20px;
  background-color      : var(--color-theme3);
  border-radius         : 5px;
  width                 : 100%;
  margin                : 0 auto;
}

.inventory-content-container {
  display               : grid;
  grid-template-columns : repeat(auto-fill, 106px);
  gap                   : 10px;
  justify-content       : space-between;
}

/*
** Pretty Select Box
*/

.pretty-sel {
  display               : inline-block;
  margin                : 0.5em 0.5em;
  width                 : 15em;
  background-color      : transparent;
  position              : relative;
  cursor                : pointer;
  border-bottom         : 4px solid black;
  border-bottom         : 4px solid rgba(0, 0, 0, 0.3);
  z-index               : 1000;
}

.pretty-sel:before {
  position              : absolute;
  content               : '\2b9f';
  color                 : var(--color-theme3);
  right                 : 20px;
  top                   : 50%;
  transform             : translateY(-50%);
}

.pretty-sel.active:before {
  transform             : rotateX(-180deg) translateY(50%);
}

.pretty-sel.active .pretty-sel-placeholder::before {
  visibility            : visible;
}

.pretty-sel.active .pretty-sel-placeholder {
  visibility            : hidden;
}

.pretty-sel.active .pretty-sel-box {
  display               : block;
  animation             : fadeInUp 500ms;
}

.pretty-sel-placeholder {
  display               : block;
  color                 : var(--color-theme7);
  padding               : 0.2em 0.5em;
  text-align            : left;
  pointer-events        : none;
  user-select           : none;
  visibility            : visible;
  font-size             : 1.6em;
}

.pretty-sel-placeholder:before {
  position              : absolute;
  top                   : 0;
  right                 : 0;
  bottom                : 0;
  left                  : 0;
  padding               : 0.2em 0.5em;
  content               : attr(data-placeholder);
  visibility            : hidden;
}

.pretty-sel-box {
  position              : absolute;
  top                   : 100%;
  right                 : 0;
  bottom                : 0;
  left                  : 0;
  display               : none;
  list-style-type       : none;
  text-align            : left;
  background-color      : var(--color-theme3);
  width                 : 100%;
  box-sizing            : border-box;
}

.pretty-sel-box-options {
  display               : list-item;
  font-size             : 1.6em;
  color                 : var(--color-theme7);
  padding               : 0.5em 1em;
  user-select           : none;
  background-color      : var(--color-theme1);
}

.pretty-sel-box-options:after {
  content               : '\2b9c';
  color                 : var(--color-theme3);
  margin-left           : 5px;
  display               : none;
}

.pretty-sel-box-options:hover {
  background-color      : var(--color-theme3);
}

.pretty-sel-box-options.selected::after {
  display               : inline;
}

@keyframes fadeInUp {
  from {
    opacity           : 0;
    transform         : translateY(20px);
  }

  to {
    opacity           : 1;
    transform         : translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity           : 1;
  }

  to {
    opacity           : 0;
  }
}