@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lacquer&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
@import url('./eye-anim.css');
@import url('./glitch-effect.css');

/* 
.unifrakturmaguntia-regular {
  font-family: "UnifrakturMaguntia", cursive;
  font-weight: 400;
  font-style: normal;
} 
  

*/
img {
  border: none;
}

/* Global styles */
.window-app {
  font-family: "Roboto", sans-serif;
}

.window-app .window-content  {
  padding: 5px;
}

/* Window Content Style */

.rollable:hover, .rollable:focus {
  color: #000;
  text-shadow: 0 0 10px red;
  cursor: pointer;
}

.grid,
.grid-2col {
  display: grid;
  grid-column: span 2/span 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
  padding: 0;
}

.grid-3col {
  grid-column: span 3/span 3;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4col {
  grid-column: span 4/span 4;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-5col {
  grid-column: span 5/span 5;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-6col {
  grid-column: span 6/span 6;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-7col {
  grid-column: span 7/span 7;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-8col {
  grid-column: span 8/span 8;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-9col {
  grid-column: span 9/span 9;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-10col {
  grid-column: span 10/span 10;
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-11col {
  grid-column: span 11/span 11;
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-12col {
  grid-column: span 12/span 12;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-start-2 {
  grid-column-start: 2;
}

.grid-start-3 {
  grid-column-start: 3;
}

.grid-start-4 {
  grid-column-start: 4;
}

.grid-start-5 {
  grid-column-start: 5;
}

.grid-start-6 {
  grid-column-start: 6;
}

.grid-start-7 {
  grid-column-start: 7;
}

.grid-start-8 {
  grid-column-start: 8;
}

.grid-start-9 {
  grid-column-start: 9;
}

.grid-start-10 {
  grid-column-start: 10;
}

.grid-start-11 {
  grid-column-start: 11;
}

.grid-start-12 {
  grid-column-start: 12;
}

.grid-span-2 {
  grid-column-end: span 2;
}

.grid-span-3 {
  grid-column-end: span 3;
}

.grid-span-4 {
  grid-column-end: span 4;
}

.grid-span-5 {
  grid-column-end: span 5;
}

.grid-span-6 {
  grid-column-end: span 6;
}

.grid-span-7 {
  grid-column-end: span 7;
}

.grid-span-8 {
  grid-column-end: span 8;
}

.grid-span-9 {
  grid-column-end: span 9;
}

.grid-span-10 {
  grid-column-end: span 10;
}

.grid-span-11 {
  grid-column-end: span 11;
}

.grid-span-12 {
  grid-column-end: span 12;
}

.flex-group-center,
.flex-group-left,
.flex-group-right {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.flex-group-left {
  justify-content: flex-start;
  text-align: left;
}

.flex-group-right {
  justify-content: flex-end;
  text-align: right;
}

.flexshrink {
  flex: 0;
}

.flex-between {
  justify-content: space-between;
}

.flexlarge {
  flex: 2;
}

.align-left {
  justify-content: flex-start;
  text-align: left;
}

.align-right {
  justify-content: flex-end;
  text-align: right;
}

.align-center {
  justify-content: center;
  text-align: center;
}

/* Styles limited to cain sheets */
.cain .item-form {
  font-family: "Roboto", sans-serif;
}
.cain .sheet-header {
  flex: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.cain .sheet-header .profile-img {
  flex: 0 0 100px;
  height: 100px;
  margin-right: 10px;
  object-fit: cover; /* Ensure the image covers the height without stretching */
}

/* .cain .sheet-header .header-fields {
  flex: 1;
} */
.cain .sheet-header h1.charname {
  height: 50px;
  padding: 0px;
  margin: 5px 0;
  border-bottom: 0;
}
.cain .sheet-header h1.charname input {
  width: 100%;
  height: 100%;
  margin: 0;
}
.cain .sheet-tabs {
  flex: 0;
}
.cain .sheet-body,
.cain .sheet-body .tab,
.cain .sheet-body .tab .editor {
  height: 100%;
}
.cain .tox .tox-editor-container {
  background: #fff;
}
.cain .tox .tox-edit-area {
  padding: 0 8px;
}
.cain .resource-label {
  font-weight: bold;
}
.cain .items-header {
  height: 28px;
  margin: 2px 0;
  padding: 0;
  align-items: center;
  background: rgba(0, 0, 0, 0.05);
  border: 2px groove #eeede0;
  font-weight: bold;
}
.cain .items-header > * {
  font-size: 14px;
  text-align: center;
}
.cain .items-header .item-name {
  font-weight: bold;
  padding-left: 5px;
  text-align: left;
  display: flex;
}
.cain .items-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  color: #444;
}
.cain .items-list .item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cain .items-list .item-name {
  flex: 2;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  text-align: left;
  align-items: center;
  display: flex;
}
.cain .items-list .item-name h3, .cain .items-list .item-name h4 {
  margin: 0;
  white-space: nowrap;
  overflow-x: hidden;
}
.cain .items-list .item-controls {
  display: flex;
  flex: 0 0 100px;
  justify-content: flex-end;
}
.cain .items-list .item-controls a {
  font-size: 12px;
  text-align: center;
  margin: 0 6px;
}
.cain .items-list .item {
  align-items: center;
  padding: 0 2px;
  border-bottom: 1px solid #c9c7b8;
}
.cain .items-list .item:last-child {
  border-bottom: none;
}
.cain .items-list .item .item-name {
  color: #191813;
}
.cain .items-list .item .item-name .item-image {
  flex: 0 0 30px;
  height: 30px;
  background-size: 30px;
  border: none;
  margin-right: 5px;
}
.cain .items-list .item-prop {
  text-align: center;
  border-left: 1px solid #c9c7b8;
  border-right: 1px solid #c9c7b8;
  font-size: 12px;
}
.cain .items-list .items-header {
  height: 28px;
  margin: 2px 0;
  padding: 0;
  align-items: center;
  background: rgba(0, 0, 0, 0.05);
  border: 2px groove #eeede0;
  font-weight: bold;
}
.cain .items-list .items-header > * {
  font-size: 12px;
  text-align: center;
}
.cain .items-list .items-header .item-name {
  padding-left: 5px;
  text-align: left;
}
.cain .item-formula {
  flex: 0 0 200px;
  padding: 0 8px;
}
.cain .effects .item .effect-source,
.cain .effects .item .effect-duration,
.cain .effects .item .effect-controls {
  text-align: center;
  border-left: 1px solid #c9c7b8;
  border-right: 1px solid #c9c7b8;
  font-size: 12px;
}
.cain .effects .item .effect-controls {
  border: none;

}
/* New styles for checkbox group */
.cain .group_cat {
  align-items: center; 
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 10px; /* Adjust the gap between items as needed */
}

.cain .checkbox-item_cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cain .checkbox-item_cat label {
  margin-bottom: 5px; /* Space between label and checkbox */
}

.CAT-selector {
  width: 45px; 
  height: 45px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 5px; /* Space between image and label */
  padding: 1px;
}

.CAT-selector img {
  width: 100%;
  border: none !important;
}

.CAT-selected{
  border: #ff3333 solid 1px;
  padding: unset !important;
}

.CAT-session-text{
  color: white; 
  width:100%;
}

.extra-dice-section {
  background-color: #f0f0f0; /* Light grey background */
  border: 1px solid #ccc;    /* Light grey border */
  padding: 10px;             /* Padding around the section */
  margin-top: 5px;
  margin-bottom: 5px;          /* Space above the section */
  border-radius: 5px;        /* Rounded corners */
}
/* Add these styles to your CSS file */


/* Agenda styles */
.agenda-size {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  height: 400px;
}

.agenda-name {
  font-family: "Metal Mania", system-ui;
  font-weight: 400;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

/* Agenda Header */
.agenda-header {
  background-color: #2b2b2b;
  border-bottom: 2px solid #444;
  padding: 1em;
  display: flex;
  align-items: center;
}

.agenda-header .profile-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 1em;
  border: 2px solid #555;
}

.agenda-header .header-fields {
  flex-grow: 1;
}

.agenda-header .charname input {
  font-size: 1.5em;
  width: 100%;
  background-color: #333;
  color: #e0e0e0;
  border: 1px solid #555;
  padding: 0.5em;
  border-radius: 4px;
}

/* Agenda Tabs */
.agenda-tabs {
  background-color: #2b2b2b;
  border-bottom: 2px solid #444;
  display: flex;
  justify-content: space-around;
  padding: 0.5em 0;
}

.agenda-tabs .item {
  color: #e0e0e0;
  padding: 0.5em 1em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.3s;
}

.agenda-tabs .item:hover,
.agenda-tabs .item.active {
  border-bottom: 2px solid #e0e0e0;
}

/* Agenda Body */
.agenda-body {
  background-color: #1a1a1a;
  padding: 1em;
}

.agenda-body .tab {
  display: none;
}

.agenda-body .tab.active {
  display: block;
}

.agenda-body .form-group {
  margin-bottom: 1em;
}

.agenda-body .form-group label {
  display: block;
  margin-bottom: 0.5em;
  font-weight: bold;
  color: #e0e0e0;
}

.agenda-body .form-group textarea {
  width: 100%;
  padding: 0.5em;
  background-color: #333;
  color: #e0e0e0;
  border: 1px solid #555;
  border-radius: 4px;
  min-height: 100px;
}

.agenda-text-color {
  color: #e0e0e0;
}

.agenda-background {
  background-color: #1a1a1a;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.5), -10px -10px 0 rgba(0, 0, 0, 0.5), 10px -10px 0 rgba(0, 0, 0, 0.5), -10px 10px 0 rgba(0, 0, 0, 0.5);
}

/* end agenda styles */

/* homebrew styles */
.homebrew-size {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  height: 400px;
}

.homebrew-name {
  font-family: "Metal Mania", system-ui;
  font-weight: 400;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

/* homebrew Header */
.homebrew-header {
  background-color: #2b2b2b;
  border-bottom: 2px solid #444;
  padding: 1em;
  display: flex;
  align-items: center;
}

.homebrew-header .profile-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 1em;
  border: 2px solid #555;
}

.homebrew-header .header-fields {
  flex-grow: 1;
}

.homebrew-header .charname input {
  font-size: 1.5em;
  width: 100%;
  background-color: #333;
  color: #e0e0e0;
  border: 1px solid #555;
  padding: 0.5em;
  border-radius: 4px;
}

/* homebrew Tabs */
.homebrew-tabs {
  background-color: #2b2b2b;
  border-bottom: 2px solid #444;
  display: flex;
  justify-content: space-around;
  padding: 0.5em 0;
}

.homebrew-tabs .item {
  color: #e0e0e0;
  padding: 0.5em 1em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.3s;
}

.homebrew-tabs .item:hover,
.homebrew-tabs .item.active {
  border-bottom: 2px solid #e0e0e0;
}

/* homebrew Body */
.homebrew-body {
  background-color: #1a1a1a;
  padding: 1em;
}

.homebrew-body .tab {
  display: none;
}

.homebrew-body .tab.active {
  display: block;
}

.homebrew-body .form-group {
  margin-bottom: 1em;
}

.homebrew-body .form-group label {
  display: block;
  margin-bottom: 0.5em;
  font-weight: bold;
  color: #e0e0e0;
}

.homebrew-body .form-group textarea {
  width: 100%;
  padding: 0.5em;
  background-color: #333;
  color: #e0e0e0;
  border: 1px solid #555;
  border-radius: 4px;
  min-height: 100px;
}

.homebrew-text-color {
  color: #e0e0e0;
}

.homebrew-background {
  background-color: #1a1a1a;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.5), -10px -10px 0 rgba(0, 0, 0, 0.5), 10px -10px 0 rgba(0, 0, 0, 0.5), -10px 10px 0 rgba(0, 0, 0, 0.5);
}

.homebrew-toggle-bold {
  width: 20%;
}
/* end homebrew styles */


/* Character Sheet */

.mob-psycho-theme {
  /* General theme styles */
  background-color: #0d0d0d;
  color: #ffffff;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.5), -10px -10px 0 rgba(0, 0, 0, 0.5), 10px -10px 0 rgba(0, 0, 0, 0.5), -10px 10px 0 rgba(0, 0, 0, 0.5);
  font-family: 'Courier New', Courier, monospace; /* Typewriter font */
  padding: 20px;
  border: 2px solid #00bfff; /* Jujutsu Kaisen inspired accent color */
  background-image: url('https://images.thdstatic.com/productImages/bcbf4ea8-d0d4-4b36-9bfb-9fd05702d10e/svn/black-rust-oleum-stops-rust-texture-paint-7220830-76_600.jpg'); /* Paper-like background */
  background-size: cover;
}

.prosemirror menu button {
  background: #ffffff;
}

.mob-psycho-header {
  background-color: #1a1a1a;
  border-bottom: 2px solid #00bfff; /* Jujutsu Kaisen inspired accent color */
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.mob-psycho-img {
  border: 3px solid #00bfff; /* Jujutsu Kaisen inspired accent color */
  border-radius: 50%;
  margin: 10px 0;
  filter: contrast(150%) saturate(120%) hue-rotate(10deg); /* Apply filters for a distorted effect */
  transform: rotate(-5deg) scale(1.1); /* Slight rotation and scaling */
  transition: transform 0.3s, filter 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
  position: relative; /* For pseudo-element positioning */
  object-fit: cover; /* Ensure the image covers the container without stretching */
  width: 100px; /* Set a fixed width */
  height: 100px; /* Set a fixed height */
}

.mob-psycho-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 0.3s;
}

.mob-psycho-img:hover::before {
  opacity: 0.5;
}

.mob-psycho-img:hover {
  filter: contrast(200%) saturate(150%) hue-rotate(20deg); /* More intense filters on hover */
  transform: rotate(5deg) scale(1.2); /* More rotation and scaling on hover */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); /* More intense shadow on hover */
}

.mob-psycho-img:hover::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%) scale(1.2);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0.7;
}

.mob-psycho-header-fields {
  padding: 10px;
  border-radius: 5px;
}

.mob-psycho-charname input {
  background-color: #333333;
  color: #ffffff;
  border: 1px solid #00bfff; /* Jujutsu Kaisen inspired accent color */
  padding: 5px;
}

.mob-psycho-grid {
  color: #ffffff;
  gap: 10px;
  padding: 10px;
  margin: 10px 0;
}

.mob-psycho-flex-group {
  background-color: #333333;
  padding: 5px;
  border-radius: 5px;
}

.mob-psycho-label {
  color: #00bfff; /* Jujutsu Kaisen inspired accent color */
  text-transform: uppercase;
  font-weight: bold;
}

.mob-psycho-theme input[type="number"],
.mob-psycho-theme input[type="text"] {
  color: #ffffff;
  background-color: #404040;
  border: 1px solid #00bfff; /* Jujutsu Kaisen inspired accent color */
  padding: 5px;
}

.mob-psycho-input {
  background-color: #404040;
  color: #ffffff;
  border: 1px solid #00bfff; /* Jujutsu Kaisen inspired accent color */
  padding: 5px;
}

.mob-psycho-resource-content {
  background-color: #333333;
  padding: 5px;
  border-radius: 5px;
  border: 1px dashed #00bfff; /* Dashed border for a report look */
}

.mob-psycho-tabs {
  background-color: #1a1a1a;
  border-bottom: 2px solid #00bfff; /* Jujutsu Kaisen inspired accent color */
  padding: 5px;
}

.mob-psycho-tab-item {
  color: #00bfff; /* Jujutsu Kaisen inspired accent color */
  padding: 5px;
  border-bottom: 1px solid #00bfff; /* Jujutsu Kaisen inspired accent color */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

.mob-psycho-tab-item:hover {
  background-color: #00bfff; /* Jujutsu Kaisen inspired accent color */
  color: #0d0d0d; /* Invert colors on hover */
}

.mob-psycho-body {
  background-color: #0d0d0d;
  padding: 20px;
  border: 2px solid #00bfff; /* Jujutsu Kaisen inspired accent color */
}

.mob-psycho-tab {
  background-color: #0d0d0d;
}

.mob-psycho-sidebar {
  background-color: #1a1a1a;
  padding: 10px;
  border-radius: 5px;
  border: 1px dashed #00bfff; /* Dashed border for a report look */
}

.mob-psycho-heading {
  color: #00bfff; /* Jujutsu Kaisen inspired accent color */
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 10px;
}

.mob-psycho-ability {
  background-color: #262626;
  padding: 5px;
  border-radius: 5px;
  margin: 2px; /* Dashed border for a report look */
  gap: 4px;
}

#sidebar, .sidebar {
  margin-top: 20px;
}

.mob-psycho-extra-dice {
  background-color: #262626;
  padding: 5px;
  border-radius: 5px;
  border: 1px dashed #00bfff; /* Dashed border for a report look */
}

#chat-controls input, .chat-controls input {
  border: 1px solid #444 !important;
  outline: none !important;
}

.mob-psycho-affliction {
  padding: 5px;
  border-radius: 5px;
}

.mob-psycho-main {
  background-color: #1a1a1a;
  padding: 10px;
  border-radius: 5px;
  border: 1px dashed #00bfff; /* Jujutsu Kaisen inspired accent color */
}

.mob-psycho-editor {
  background-color: #262626;
  color: #ffffff;
  border: 1px solid #00bfff; /* Jujutsu Kaisen inspired accent color */
  padding: 10px;
}

.rest-dice-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

.mob-psycho-rest-dice {
  background-color: #2e0d45;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.mob-psycho-button {
  padding: 5px 10px;
  border-radius: 4px;
  border: none;
  background-color: #4b0082;
  color: #f5f5f5;
  cursor: pointer;
}

.mob-psycho-button:hover {
  background-color: #6a0dad;
}

/* end mob-psycho-theme.css */

/* Rolls and chat message edits */

/* Chat Message Styles */


.chat-message {
  background-color: #1a1a1a; /* Dark background */
  color: #ffffff; /* White text */
  border: 1e90ff 2px solid; /* Remove border */
  padding: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
  font-family: 'Courier New', Courier, monospace; /* Typewriter font */
  box-sizing: border-box;
}

.message-header {
  background-color: #262626; /* Slightly lighter dark background */
  padding: 5px;
  text-transform: uppercase;
  font-weight: bold;
}

.chat-message .table-draw .table-description  {
  background-color: #262626; /* Slightly lighter dark background */
  padding: 5px;
  border-radius: 5px;
  border: 1px dashed #00bfff; /* Dashed border for a report look */
  color: #00bfff;
}

.message-sender {
  color: #ffffff; /* White text */
}

.message-metadata {
  color: #ffffff; /* White text */
}

.message-timestamp {
  color: #999999; /* Grey text for timestamp */
}

.message-delete {
  color: #ff4d4d; /* Red color for delete icon */
}

.no-border{
  border: none !important;
}

.no-padding{
  padding: unset !important;
}

.flavor-text {
  color: #ffffff; /* White text */
  font-style: italic;
}

.message-content {
  background-color: #1a1a1a; /* Dark background */
  padding: 10px;
  box-sizing: border-box;
}

.dice-formula {
  color: #ffffff; /* White text */
}

.dice-tooltip {
  background-color: #1a1a1a; /* Dark background */
  padding: 10px;
  border-radius: 5px;
}

.part-header {
  background-color: #1a1a1a; /* Dark background */
  padding: 5px;
}

.part-formula {
  color: #ffffff; /* White text */
}

.part-total {
  color: #ffffff; /* White text */
}

.dice-rolls {
  list-style: none;
  padding: 0;
}

.dice-total {
  color: #ffffff; /* White text */
  font-size: 1.5em;
  text-align: center;
}

/* Talisman CSS */

#talisman-management {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#add-talisman {
  background-color: #262626;
  padding: 20px;
  border-radius: 10px;
  color: #ffffff ;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#talisman-management .current-marks {
  font-size: 1em;
  color: #ff4500; /* Bright orange-red color */
}

#talisman-management .talisman-image {
  width: 200px;
  height: 220px;
  margin-bottom: 10px;
}

.talisman-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 20px;
}

.talisman {
  background-color: #262626;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.talisman input {
  margin-bottom: 10px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  background-color: #333333;
  color: #ffffff;
}

.talisman button {
  margin-top: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background-color: #1e90ff;
  color: #ffffff;
  cursor: pointer;
}

.talisman button.delete-talisman {
  background-color: #ff4d4d;
}

.talisman button:hover {
  opacity: 0.8;
}

#talisman-management .talisman-name {
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  background: #3a3a3a;
  color: #fff;
}


.sinOverflow-icon{
  border: none !important;
}

/* sin-marks.css */

/* sin-marks.css */

.sin-marks {
  background-color: #1a1a1a;
  border: 2px solid #660066;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  font-family: 'Courier-New', serif;
  color: #e0b3ff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.sin-marks h3 {
  color: #cc33ff;
  font-family: 'Courier-New', serif;
  text-shadow: 3px 3px 6px #000;
  font-size: 2em;
  margin-bottom: 20px;
}

.sin-marks ul {
  list-style-type: none;
  padding: 0;
}

.sin-mark-body-part {
  background-color: #2b2b2b;
  border: 2px solid #660066;
  padding: 15px;
  margin: 10px 0;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.sin-marks li:hover {
  box-shadow: 0 0 20px rgba(128, 0, 128, 0.8);
}

.sin-marks li:active {
  background-color: #1a1a1a;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.button-row {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.sin-marks button {
  color: #fff;
  border: 2px solid #660066;;
  margin: 0px;
  cursor: pointer;
  font-family: 'Courier-New', serif;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.sin-marks button:hover {
  background-color: #b300b3;
  box-shadow: 0 0 20px rgba(128, 0, 128, 0.8);
}

.sin-marks button:active {
  background-color: #990099;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.no-sin-marks {
  color: #e0b3ff;
  background-color: #2b2b2b;
  padding: 15px;
  border-radius: 8px;
  margin: 20px 0;
  font-style: italic;
  border: 2px solid #660066;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s, box-shadow 0.3s;
}

.no-sin-marks:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(128, 0, 128, 0.8);
}

.sin-overflow {
  background-color: #1a1a1a;
  border: 2px solid #660066;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  font-family: 'Courier-New', serif;
  color: #e0b3ff;
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 20px;
}

.sin-overflow h3 {
  color: #cc33ff;
  font-family: 'Courier-New', serif;
  text-shadow: 3px 3px 6px #000;
  font-size: 2em;
  margin-bottom: 20px;
}

.sin-overflow-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sin-overflow-controls label {
  color: #e0b3ff;
  font-family: 'Courier-New', serif;
}

.sin-overflow-controls input {
  background-color: #2b2b2b;
  color: #e0b3ff;
  border: 2px solid #660066;
  padding: 10px;
  border-radius: 8px;
  font-family: 'Courier-New', serif;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.sin-overflow-controls input:hover {
  background-color: #333;
  box-shadow: 0 0 10px rgba(128, 0, 128, 0.8);
}

.sin-overflow-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.sin-overflow-buttons button {
  background-color: #cc33ff;
  color: #fff;
  border: 2px solid #660066;
  padding: 12px 24px;
  margin: 5px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Courier-New', serif;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.sin-overflow-buttons button:hover {
  background-color: #b300b3;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(128, 0, 128, 0.8);
}

.sin-overflow-buttons button:active {
  background-color: #990099;
  transform: scale(0.95);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

/* Media query for responsive design */
@media (max-width: 600px) {
  .button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .sin-marks button {
    margin: 5px 0;
  }
}

/* end sin-marks.css */

/* Item Sheet */

.item-kit {
  background-color: #1a1a1a;
  color: #e0e0e0;
  font-family: 'Courier New', Courier, monospace;
  border: 1px solid #444;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.5), -10px -10px 0 rgba(0, 0, 0, 0.5), 10px -10px 0 rgba(0, 0, 0, 0.5), -10px 10px 0 rgba(0, 0, 0, 0.5);
}

.item-kit .sheet-header {
  background-color: #2c2c2c;
  border-bottom: 2px solid #444;
  padding: 10px;
}

.item-kit .sheet-header h1 input {
  background-color: #333;
  color: #e0e0e0;
  border: 1px solid #444;
  width: 100%;
}

.item-kit .sheet-body {
  background-color: #1a1a1a;
}

.item-kit .description {
  margin-bottom: 20px;
}

.item-kit .resource {
  margin-bottom: 10px;
}

.item-kit .resource-label {
  color: #e0e0e0;
  font-weight: bold;
  font-size: 1.1em;
}

.item-kit .resource input {
  background-color: #333;
  color: #e0e0e0;
  border: 1px solid #444;
  width: 100%;
}

.item-kit .resource input:hover {
  border-color: #ff0000;
}

.item-kit .sheet-tabs .item {
  color: #e0e0e0;
  background-color: #2c2c2c;
  border: 1px solid #444;
  padding: 5px 10px;
  margin-right: 5px;
  text-decoration: none;
}

.item-kit .sheet-tabs .item:hover {
  background-color: #ff0000;
  color: #fff;
}

.item-kit .tab {
  padding: 10px;
  border: 1px solid #444;
  background-color: #2c2c2c;
}

.item-kit {
  background-color: #1a1a1a;
  color: #e0e0e0;
  font-family: 'Courier New', Courier, monospace;
  border: 1px solid #444;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.5), -10px -10px 0 rgba(0, 0, 0, 0.5), 10px -10px 0 rgba(0, 0, 0, 0.5), -10px 10px 0 rgba(0, 0, 0, 0.5);
}

.item-kit .sheet-header {
  background-color: #2c2c2c;
  border-bottom: 2px solid #444;
  padding: 10px;
}

.item-kit .sheet-header h1 input {
  background-color: #333;
  color: #e0e0e0;
  border: 1px solid #444;
  width: 100%;
}

.item-kit .sheet-body {
  background-color: #1a1a1a;
}

.item-kit .description {
  margin-bottom: 20px;
}

.item-kit .resource {
  margin-bottom: 10px;
}

.item-kit .resource-label {
  color: #e0e0e0;
  font-weight: bold;
  font-size: 1.1em;
}

.item-kit .resource input {
  background-color: #333;
  color: #e0e0e0;
  border: 1px solid #444;
  width: 100%;
}

.item-kit .resource input:hover {
  border-color: #ff0000;
}

.item-kit .sheet-tabs .item {
  color: #e0e0e0;
  background-color: #2c2c2c;
  border: 1px solid #444;
  padding: 5px 10px;
  margin-right: 5px;
  text-decoration: none;
}

.item-kit .sheet-tabs .item:hover {
  background-color: #ff0000;
  color: #fff;
}

.item-kit .tab {
  padding: 10px;
  border: 1px solid #444;
  background-color: #2c2c2c;
}

.talisman-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px; /* Adjust as needed */
  z-index: 1000; /* Ensure it is above other elements */
  position: relative;
}

.talisman-button, .risk-roll-button, .fate-roll-button, .player-overview-button, .homebrew-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 64px; /* Adjust the size as needed */
  height: 64px; /* Adjust the size as needed */
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.talisman-button img, .risk-roll-button img, .fate-roll-button img, .player-overview-button img, .homebrew-button img {
  border: none;
  width: 100%;
  height: auto;
  transition: filter 0.3s ease;
}

.talisman-button img:hover, .risk-roll-button img:hover, .fate-roll-button img:hover, .player-overview-button img:hover, .homebrew-button img:hover {
  filter: brightness(1.2); /* Adjust the brightness to highlight the icon */
}

.talisman-button.clicked img, .risk-roll-button.clicked img, .fate-roll-button.clicked img, .player-overview-button.clicked img, .homebrew-button.clicked img {
  filter: brightness(0.8); /* Adjust the brightness to indicate the button has been clicked */
}

.form-blasphemy-power {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  border-radius: 15px;
  padding: 25px;
  gap: 25px;
  box-shadow: 0 0 15px var(--accent-color, #ff00ff), 0 0 30px var(--accent-color, #ff00ff);
  font-family: 'Lacquer', sans-serif;
  background: linear-gradient(135deg, var(--primary-color, #2a2a2a), var(--secondary-color, #555));
  color: var(--text-color, #ffffff);
  margin: 0;
  border: 3px solid var(--secondary-color, #555);
  overflow-y: auto;
  position: relative;
  width: 100%;
}

.form-blasphemy-power label {
  font-weight: bold;
  color: var(--text-color, #ffffff);
  text-decoration: underline;
}

.blasphemy-power-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  border-bottom: 2px solid var(--secondary-color, #555);
  padding-bottom: 10px;
  overflow: visible; /* Override the parent overflow */
  background: linear-gradient(135deg, var(--accent-color, #ff00ff), var(--primary-color, #2a2a2a));
  padding: 10px;
  border-radius: 10px;
  width: 100%;
}

.form-blasphemy-power .header-fields {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-blasphemy-power .form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.form-blasphemy-power .charname {
  font-size: 24px;
  font-weight: bold;
}

.form-blasphemy-power .profile-img {
  border: 3px solid var(--accent-color, #ff00ff);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  object-fit: cover;
  box-shadow: 0 0 10px var(--accent-color, #ff00ff), 0 0 20px var(--accent-color, #ff00ff);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-blasphemy-power .profile-img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px var(--accent-color, #ff00ff), 0 0 40px var(--accent-color, #ff00ff);
}

.form-blasphemy-power input[type="text"],
.form-blasphemy-power input[type="checkbox"] {
  background-color: var(--primary-color, #2a2a2a);
  color: var(--text-color, #f0f0f0);
  border: 2px solid var(--secondary-color, #333);
  border-radius: 5px;
  padding: 5px;
  font-family: 'Lacquer', sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.form-blasphemy-power input[type="checkbox"] {
  width: auto;
  height: auto;
}

.form-blasphemy-power .blasphemy-power-body {
  flex-grow: 1;
  overflow-y: auto;
  width: 100%;
  max-height: 600px;
  text-align: center; /* Center text in the sheet body */
  background: linear-gradient(135deg, var(--primary-color, #2a2a2a), var(--secondary-color, #555));
  padding: 20px;
  border-radius: 10px;
}

.form-blasphemy-power .blasphemy-power-body h2 {
  text-align: center; /* Center the Description heading */
  color: var(--accent-color, #ff00ff);
  text-shadow: 0 0 10px var(--accent-color, #ff00ff);
}

.form-blasphemy-power .blasphemy-power-body p {
  text-align: center;
  padding: 10px;
  border: 2px solid var(--secondary-color, #555);
  border-radius: 10px;
  background-color: var(--primary-color, #2a2a2a);
  font-family: 'Courier New', Courier, monospace;
  color: var(--text-color, #ffffff);
  box-shadow: 0 0 10px var(--accent-color, #ff00ff);
}

.form-blasphemy-power .blasphemy-power-body img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px var(--accent-color, #ff00ff);
}

.form-blasphemy-power .er h1 {
  font-size: 24px;
  font-weight: bold;
  color: var(--accent-color, #ff00ff);
}

.form-blasphemy-power .blasphemy-power-header h2 {
  font-size: 20px;
  font-weight: bold;
  color: var(--accent-color, #ff00ff);
}

.form-blasphemy-power .power-label {
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color, #ff00ff);
}


.circle-checkboxes {
  input[type="checkbox"] {
    display: none;
  }

  input[type="checkbox"]+label {
    display: inline-block;
    padding: 0;
    height: 50px;
    width: 50px;
    background-size: cover;
    position: relative;
  }

  input[type="checkbox"]+label::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    border: 3px solid purple; 
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  input[type="checkbox"]:checked+label::before {
    background-color: purple; 
  }
} 

.ability-dots {
  input[type="checkbox"]+label {
    height: 30px;
    width: 30px;
  }

  input[type="checkbox"]+label::before {
    width: 18px;
    height: 18px;
    border: 3px solid rgb(10, 123, 175);
  }

  input[type="checkbox"]:checked+label::before {
    background-color: rgb(10, 123, 175); 
  }
}

.psyche-burst-checkboxes {
  input[type="checkbox"]+label {
    background: url('systems/cain/assets/brain.png') no-repeat;
  }
}

.collapsible-section {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 300px;
  background: #1a1a1a;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
}

.collapsible-section .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.collapsible-section .content {
  display: block;
}

.collapsible-section .header button {
  background: #333;
  color: #e0e0e0;
  border: 1px solid #444;
  padding: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.collapsible-section .header button:hover {
  background: #555;
}

.pinned-talisman-container {
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  gap: 10px;
  resize: both;
  overflow: auto;
}

.pinned-talisman {
  background: #1a1a1a;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 1em; /* Use em units for padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1; /* Allow the pinned talisman to grow */
}

.pinned-talisman img {
  width: 75%;
  height: 75%;
  object-fit: contain; /* Ensure the full image is displayed */
  border-radius: 4px;
  margin-bottom: 0.5em; /* Use em units for margin */
}

.pinned-talisman span {
  font-size: 1em; /* Use em units for font size */
  margin-bottom: 0.5em; /* Use em units for margin */
}

.pinned-talisman button {
  background: #ff0000;
  color: #fff;
  border: none;
  padding: 0.5em 1em; /* Use em units for padding */
  border-radius: 4px;
  cursor: pointer;
  margin-top: 0.5em; /* Use em units for margin */
  transition: background-color 0.3s, color 0.3s;
}

.pinned-talisman button:hover {
  background: #cc0000;
}