/* Imported Fonts */
@font-face {
  font-family: "mortal";
  src: url("../assets/fonts/EscalidoGothico.ttf") format("truetype");
}

@font-face {
  font-family: "changelingES";
  src: url("../assets/fonts/C20_Kells_2.ttf") format("truetype");
}

@font-face {
  font-family: "changeling";
  src: url("../assets/fonts/C20_MeathFLF.ttf") format("truetype");
}

@font-face {
  font-family: "vampire";
  src: url("../assets/fonts/V20_delavan.ttf") format("truetype");
}

@font-face {
  font-family: "vampireVictorianTitle";
  src: url("../assets/fonts/V20Victorian_ChiseledOpenRegular.ttf") format("truetype");
}

@font-face {
  font-family: "vampireVictorianSubtitle";
  src: url("../assets/fonts/V20Victorian_university_roman.ttf") format("truetype");
}

@font-face {
  font-family: "vampireDA";
  src: url("../assets/fonts/V20DA_deroos.ttf") format("truetype");
}

@font-face {
  font-family: "mage";
  src: url("../assets/fonts/M20_abbess_regular.ttf") format("truetype");
}

@font-face {
  font-family: "werewolf";
  src: url("../assets/fonts/W20_balthazar.ttf") format("truetype");
}

@font-face {
  font-family: "hunter";
  src: url("../assets/fonts/hunter.ttf") format("truetype");
}

@font-face {
  font-family: "demon";
  src: url("../assets/fonts/Demon_LushUs_v2.otf") format("truetype");
}

@font-face {
  font-family: "wraith";
  src: url("../assets/fonts/Wr20_MatrixTall.ttf") format("truetype");
}

@font-face {
  font-family: "orpheus";
  src: url("../assets/fonts/orpheus/Fudge.ttf") format("truetype");
}

@font-face {
  font-family: "mummy";
  src: url("../assets/fonts/mummy/Nueva_Caesar2_0.ttf") format("truetype");
}

@font-face {
  font-family: "mummy_italic";
  src: url("../assets/fonts/mummy/P22_Cezanne_Regular.ttf") format("truetype");
}

@font-face {
  font-family: "exalted_normal";
  src: url("../assets/fonts/exalted/frizquadratatt.ttf") format("truetype");
}

@font-face {
  font-family: "exalted";
  src: url("../assets/fonts/exalted/SevenSerifICG-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "wod-svg";
	src: url("../assets/fonts/Umb000.ttf") format("truetype");
}

:root {
  --main-font: Verdana, Helvetica, sans-serif;

  --headline-normal-weight: 700;      /* bold */

  /* font-size constants (semantic names, rem units) */
  --wod-font-xxs: 0.4375rem;   /* 7px */
  --wod-font-xs: 0.625rem;     /* 10px */
  --wod-font-sm: 0.75rem;      /* 12px */
  --wod-font-md: 0.875rem;     /* 14px */
  --wod-font-base: 1rem;       /* 16px */
  --wod-font-lg: 1.125rem;     /* 18px */
  --wod-font-xl: 1.25rem;      /* 20px */
  --wod-font-xxl: 1.5rem;      /* 24px */

  --main-dialog-background: url('../assets/img/graphics/20Page.jpg');

  --main-mortal-color: rgba(24, 78, 119, 1);
  --main-mortal-mid-color: rgba(24, 78, 119, 0.4);
  --main-mortal-dim-color: rgba(24, 78, 119, 0.12);

  --main-werewolf-color: rgb(88, 49, 1);
  --main-werewolf-mid-color: rgba(88, 49, 1, 0.4);
  --main-werewolf-dim-color: rgba(88, 49, 1, 0.12);

  --werewolf-page-background: url('../assets/img/graphics/W20Page.jpg');
  --werewolf-banner-background: url('../assets/img/graphics/W20Banner.png');
  --werewolf-banner-small-background: url('../assets/img/graphics/W20Banner_small.png');

  --main-mage-color: rgb(83, 33, 89);
  --main-mage-mid-color: rgba(83, 33, 89, 0.4);
  --main-mage-dim-color: rgba(83, 33, 89, 0.12);

  --mage-page-background: url('../assets/img/graphics/20Page.jpg');
  --mage-banner-background: url('../assets/img/graphics/M20Banner.png');
  --mage-banner-small-background: url('../assets/img/graphics/M20Banner.png');

  --main-vampire-color: rgb(121, 8, 19);
  --main-vampire-mid-color: rgb(121, 8, 19, 0.4);
  --main-vampire-dim-color: rgb(121, 8, 19, 0.12);

  --vampire-page-background: url('../assets/img/graphics/20Page.jpg');
  --vampire-banner-background: url('../assets/img/graphics/V20Banner.png');
  --vampire-banner-small-background: url('../assets/img/graphics/V20Banner_small.png');

  --main-changeling-color: rgb(42, 92, 165);
  --main-changeling-mid-color: rgba(42, 92, 165, 0.4);
  --main-changeling-dim-color: rgba(42, 92, 165, 0.12);

  --changeling-page-background: url('../assets/img/graphics/C20Page.jpg');
  --changeling-topbanner-background: url('../assets/img/graphics/C20TopBanner.png');
  --changeling-banner-background: url('../assets/img/graphics/C20Banner.png');
  --changeling-banner-small-background: url('../assets/img/graphics/C20Banner.png');

  --main-hunter-color: rgb(191, 67, 18);
  --main-hunter-mid-color: rgba(191, 67, 18, 0.4);
  --main-hunter-dim-color: rgba(191, 67, 18, 0.12);

  --hunter-page-background: url('../assets/img/graphics/H20Page.jpg');
  --hunter-banner-background: url('../assets/img/graphics/H20Banner.png');
  --hunter-banner-small-background: url('../assets/img/graphics/H20Banner_small.png');
  
  --main-demon-color: rgb(229, 111, 8);
  --main-demon-mid-color: rgba(226, 88, 34, 0.4);
  --main-demon-dim-color: rgba(226, 88, 34, 0.12);

  --demon-page-background: url('../assets/img/graphics/D20Page.jpg');
  --demon-banner-background: url('../assets/img/graphics/D20Banner.png');
  --demon-banner-small-background: url('../assets/img/graphics/D20Banner_small.png');

  --main-wraith-color: rgb(93, 196, 158);
  --main-wraith-mid-color: rgba(133, 238, 199, 0.4);
  --main-wraith-dim-color: rgba(195, 241, 224, 0.12);

  --wraith-page-background: url('../assets/img/graphics/Wr20Page.jpg');
  --wraith-banner-background: url('../assets/img/graphics/Wr20Banner.png');
  --wraith-banner-small-background: url('../assets/img/graphics/Wr20Banner_small.png');

  --main-mummy-color: rgb(175, 153, 8);
  --main-mummy-mid-color: rgba(175, 153, 8, 0.4);
  --main-mummy-dim-color: rgba(175, 153, 8, 0.12);  

  --mummy-page-background: url('../assets/img/graphics/parchment.jpg');
  --mummy-banner-background: url('../assets/img/graphics/sand.png');
  --mummy-banner-small-background: url('../assets/img/graphics/sand.png');

  --main-exalted-font: "exalted_normal", Verdana, Helvetica, sans-serif;

  --main-exalted-color: rgb(169, 44, 38);
  --main-exalted-mid-color: rgba(169,44,38, 0.4);
  --main-exalted-dim-color: rgba(169,44,38, 0.12);

  --exalted-page-background: url('../assets/img/graphics/Exalted.jpg');
  --exalted-banner-background: url('../assets/img/graphics/exalted_banner.jpg');
  --exalted-banner-small-background: url('../assets/img/graphics/exalted_banner_small.jpg');

  --main-creature-color: rgba(116, 115, 115, 1);
  --main-creature-mid-color: rgba(72, 71, 71, 0.4);
  --main-creature-dim-color: rgba(72, 71, 71, 0.12);

  --main-spirit-color:rgba(173, 147, 0, 1);
  --main-spirit-mid-color: rgb(255, 215, 0, 0.4);
  --main-spirit-dim-color: rgb(255, 215, 0, 0.12);  

  --main-full-color: var(--main-mortal-color);
  --main-mid-color: var(--main-mortal-mid-color);
  --main-dim-color: var(--main-mortal-dim-color);  

  --sheet-background-color: #f5f5f5;

  --sheet-white: #f5f5f5;

  --healthlevel-bruised-color: #ffffff;
  --healthlevel-hurt-color: #FFFF00;
  --healthlevel-injured-color: #FFCC00;
  --healthlevel-wounded-color: #FF8C00;
  --healthlevel-mauled-color: #FF0000;
  --healthlevel-crippled-color: #800000;
  --healthlevel-incapacitated-color: #000000;
}

/* hbs */

.wod20 section .tabs-container {
  position: absolute;
}

.wod20.wod-item section .tabs-container {
  position: relative;
}

.wod20 section.tab {
  overflow-y: auto;
  margin-left: 50px;  
  min-height: 700px;
}

.wod20.wod-item section.tab {
  margin-left: 0px;  
  margin-top: 10px;
  height: 100%;
}

.wod20 .shape-selector-active {
    background-color: var(--main-full-color);
    color: #e0e0e0;
}

.wod20 .shape-details-container .shape-selector-active {
  text-shadow: 0 0 10px var(--main-full-color);
}

.wod20 .shape-selector {
  width: 20%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: var(--wod-font-lg);
  font-weight: normal;
} 

.wod20 .shape-selector:hover {
	background-color: var(--main-dim-color); 
  color: #121212;  
  cursor: pointer;
}

.wod20 .shape-selectortext {
  width: 20%;
  font-size: var(--wod-font-md);
  font-weight: bold;
  text-align: center;
  margin-top: 100px;
}

/* hbs */


/* START - Type of sheet designs */

.wod-sheet:not(.minimized) {
  min-width: 900px;
  width: 900px;
  min-height: 900px;
}

.wod-item:not(.minimized) {
  min-width: 650px;
  width: 650px;
  min-height: 650px;
  height: 650px;
} 

.wod20rule-dialog:not(.minimized) {
  min-width: 400px;
  max-width: 650px;
}

.wod-dialog:not(.minimized) {
  min-width: 650px;  
  width: 650px;
  min-height: 650px;
}

.wod-dialog.dialog-top {
  z-index: 999 !important;
}

.wod-dialog.weapon-dialog:not(.minimized) {
  min-width: 600px;
  width: 600px;
  height: 800px;
}

.wod-dialog.general-dialog:not(.minimized) {
  height: 750px;
}

.wod-dialog.sortdiscipline-dialog:not(.minimized),
.wod-dialog.checkfrenzy-dialog:not(.minimized),
.wod-dialog.shapechange-dialog:not(.minimized) {
  min-width: 700px;
  width: 700px;
}

.wod-dialog.aretecasting-dialog:not(.minimized) {
  min-width: 950px;
  width: 950px;
}

.wod20.window-app,
.wod20.wod-sheet {
  font-family: var(--main-font);
}

.wod20 button:not(.header-control),
.wod20 input,
.wod20 select {
  font-family: var(--main-font);
}

.wod20 .mseCharacterName,
.wod20 .mseItemName {
  flex-direction: row-reverse;
}

.wod20 .window-content {
  background: var(--sheet-background-color) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.wod-sheet .sheet-inner-area {
  padding-left: 45px;
  width: 830px;
  min-height: 500px;
}

.wod20 nav {
  /* font-weight: bold; */
  font-weight: var(--headline-normal-weight);
}

.wod20 input,
.wod20 select {
	font-weight: normal;
  font-size: var(--wod-font-sm);
}

.wod20 select {
  appearance: none;
}

.wod20 select option {
  background: #e0e0e0;
  color: #121212;
}

.wod20 select option[value=""] {
  background: var(--main-full-color);
  color: #e0e0e0;
}

.wod20 select.editable,
.wod20 input.editable {
  background: rgba(255, 255, 255, 1);
  color: #121212;
}

.wod20 button:not(.header-control) {
  border: 0;
}

.wod20 button.disabled {
  color: var(--color-text-dark-secondary) !important; 
  box-shadow: none !important;
  background: rgba(0, 0, 0, 0.1) !important;
  border: 2px groove var(--color-border-light-highlight) !important;
}

.wod-dialog .window-content,
.wod-item .window-content {
  background: var(--main-dialog-background);
}

.wod20 .rule-dialog select,
.wod20 .rule-dialog input {
  max-width: 150px;
}

/* END - Type of sheet designs */

/* START - handle lock design */

.wod-sheet .profile-img-zone {
  max-width: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 8px;
}

.sheet-item .lock-btn {
  max-width: 25px;
  margin-right: 10px;
}

.wod-sheet .profile-img-zone button {  
  border: none;
  width: 30px;
}

.wod-sheet .profile-img,
.sheet-item .profile-img {
  height: auto;
  width: 105px;
  margin-top: 10px;
  border: 0;
  padding-left: 5px;
  margin-right: 5px;
  border-radius: 10px;
}

.wod-sheet .profile-img.defaultimage {
  background: #121212;
}

.wod20 .pointer:hover,
.wod20 .pointer:focus {
  cursor: pointer;
}

.wod20 .nopointer:hover,
.wod20 .nopointer:focus {
  cursor: default;
}

.wod20 input,
.wod20 select,
.wod20 .textarea {
  background: rgba(255, 255, 255, 1);
  color: #121212;  
} 

.wod20 .textarea {
  overflow-y: auto !important;
  min-height: 150px;
  height: auto !important;
  border-radius: 3px;
  padding: 5px;
}

.wod20 .textarea.small {
  height: 50px;
}

.wod-sheet .textarea {
  border: 1px solid var(--main-full-color);
  border-radius: 5px;
}

.wod20 .headlineNormal.textarea {
  font-weight: normal;
}

.wod20 .locked .resource-value-step {
  cursor: default;
}

/* END - handle lock design */

/* START - General */

.wod20 .pullLeft {
	float: left !important;
}

.wod20 .pullRight {
	float: right !important;
}

.wod20 .item-row {
  display: flex; 
  flex-wrap: wrap; 
  flex-direction: row;
}

.wod20 .item-column {
  display: flex; 
  flex-wrap: wrap; 
  flex-direction: column;
}

.wod20 .item-right {
  margin-left: auto;
}

.wod20 .hide {
  display: none !important;
}

.wod20 .show {
  display: block !important;
}

.wod20 .half {
  width: 50% !important;
}

.wod20 .two-columns {
  width: 48%;
  margin-left: 5px;
  margin-right: 5px;
}

.wod20 .three-columns {
  width: 33%;
  margin-left: 0px;
  margin-right: 0px;
}

.wod20 .flex-columns {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.wod20 .flex-rows {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.wod20 .flex-row {
  display: flex;
  line-height: 23px;
}

.wod20 .clearareaBox {
  clear: both !important;
  overflow: hidden !important;
}

.wod20 input.sheet-infoValues {
  width: 100%;
  text-align: left;
	font-weight: normal;
  font-size: var(--wod-font-sm);
  height: 30px;
}

.wod20 select.sheet-infoValues {
  width: 100%;
  height: 30px;
}

.wod20 select.sheet-infoValues.edit-property {
  float:left;
  width: 90%;
}

input.shortNotebox {
  width: 60%;
}

input.sheet-infoWidth {
  width: 80%;
}

.wod20 input.editable,
.wod20 select.editable {
  border: 1px solid var(--main-full-color);
  box-shadow: 2px 2px 5px var(--main-mid-color);
}

.wod20 .sheet-smallinfoValues {
  height: 75px;
}

.wod20 .icon {
  margin-left: 5px;
  margin-right: 5px;
  line-height: 23px;
  scale: 1.2;
}

.wod20.wod-sheet .icon.fa-square-plus,
.wod20.wod-sheet .icon.fa-ellipsis-vertical:not(.header-control) {
  display: none;
}

.wod20 i.smallicon {
  scale: 1.0;
}

.wod20 i.largeicon {
  scale: 1.4;
}

.wod20 i.createicon {
  scale: 3; 
  position: absolute; 
  bottom: 20px; 
  right: -15px;
}

.wod20 i.transparent {
  background: transparent;
  color: transparent;
}

.wod20 .sheet-container {
  min-height: 200px;
}

.wod20 .sheet-boxcontainer {
  width: 100%;
  text-align: center;
}

.wod20 .sheet-area.flex-columns {
  min-height: 100px;
}

.wod20 .sheet-area .flex-columns {
  margin-top: 15px;
}

.wod20 .area-box {
  width: 100%;
  margin-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
}

.wod-item .area-box {
  padding-right: 0;
}

.wod-sheet .sheet-banner {
  background: var(--main-wod-banner);
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.wod-sheet .sheet-banner-small {
  background: var(--main-wod-banner-small);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 10px; 
}

.wod-sheet .sheet-banner-small.sheet-headline {
  min-width: 230px;
}

.wod-sheet .healthBox .sheet-banner-small.sheet-headline {
  min-width: 259px;
}

.wod-sheet .sheet-banner-text {
  background: var(--sheet-background-color);
  border-radius: 33%;
  font-weight: normal;
}

.wod-sheet .sheet-headline {  
  font-size: var(--wod-font-xxl);
	/* font-weight: bold; */
  font-weight: var(--headline-normal-weight);
	text-align: center;
	width: 100%;	
}

.wod-sheet.noSplatFont .sheet-headline {  
  font-family: var(--main-font);
}
.wod-sheet.noSplatFont .headlineGroup {
  font-family: var(--main-font);
}

.wod20 .headlineNormal {
  font-weight: var(--headline-normal-weight);
  font-size: var(--wod-font-sm);
}

.wod20 .headlineText {
	font-size: var(--wod-font-xxl);
  margin-right: 25px;
  font-weight: var(--headline-normal-weight);
}

.wod20 .centerText {
  text-align: center;
}

.wod20 .headlineList {	
  font-weight: var(--headline-normal-weight);
  font-size: var(--wod-font-sm);
  line-height: 1.2;
}

.wod20 .headlineGroup {	
  font-size: var(--wod-font-xl);
  border: 0;
}

.wod-dialog .headlineGroup {
  margin: 10px;
}

.wod-dialog:not(.noSplatFont) .headlineGroup {
  font-size: var(--wod-font-xxl);
}

.wod20 .headline {
  /* font-weight: bold; */
  font-weight: var(--headline-normal-weight);
}

.wod-dialog:not(.noSplatFont) .headline {
  font-size: var(--wod-font-base);
}

.wod20 .bold {
  /* font-weight: bold; */
  font-weight: var(--headline-normal-weight);
}

.wod20 .headlineTabs {
	font-size: var(--wod-font-xl);    
  height: 30px;
}

/* .wod20 .largeBox {
  width: 250px;
  height: 19px;
} */

.wod20 .largeBox {
  width: 200px;
}

.wod20 .numberBox {
  width: 50px !important;
}

.wod-item .miniBox {
  width: 25px !important;
  min-width: 25px !important;
}

.wod20 .text-unfocus {
  opacity: 0.5;
}

.wod-sheet .text-focus {
  opacity: 1;
  font-weight: bold !important;
}

.wod20 .thin-border-left {
  border-left-style: solid;
  border-width: 1px;
}

.wod20 .thin-border-right {
  border-right-style: solid;
  border-width: 1px;
}

.wod20 .tooltip {
  position: relative;
  display: inline-block;
}

.wod20 .tooltip .tooltiptext {
  visibility: hidden;
  max-width: 450px;  
  border-radius: 6px;
  padding: 5px;
  left: 20px;
  top: 70px;
  position: fixed;
  z-index: 1;

  white-space: normal;   /* allow line breaks */
  word-wrap: break-word; /* force long words/links to break */
  overflow-wrap: break-word; /* modern alternative */
}

.wod20 .chatt-headline {
  /* font-weight: bold; */
  font-weight: var(--headline-normal-weight);
}

.wod20 .tooltip:hover .tooltiptext {
  visibility: visible;
}

.wod20 .vrollable:hover,
.wod20 .vrollable:focus {
  color: #000;  
  cursor: pointer;
}

.wod20 .draggable {
  cursor: default; /* Default cursor normalt */
}

.wod20 .draggable:hover,
.wod20 .draggable:focus {
  cursor: grab;
}

.wod20 .draggable:active {
  cursor: grabbing;
}

.wod-sheet .macroBtn {
  border: 0px;
  margin-bottom: 8px;
  height: 30px;
  width: 30px;  
}

.wod-sheet .shapeIcon {
  height:30px; 
  width: 30px; 
  border: 0;
}

.wod20 .row {
  height: 23px;
  line-height: 23px;
}

.wod20 .row:nth-of-type(even) {
  display: flex;
}

.wod20 .row:nth-of-type(odd) {
  display: flex;
}

.wod20 .information-area {
  font-size: var(--wod-font-xs);
  color: #7e7e7e;
  width: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
}

.wod20 .information-box {
  width: 75%;
}

.wod20 .headlineRow {
  display: flex;
  height: 23px;
  line-height: 23px;
  margin-top: 10px;
  margin-bottom: 5px;
  /* font-weight: bold; */
  font-weight: var(--headline-normal-weight);
}

.wod20 .item-activeBox {
  width: 30px;
  height: 30px;
}

.wod20 .actorv2 input.item-active.pointer {
  width: 16px;
  height: 16px;
  margin: 3px 5px;
}

.wod20 .floating-label-group {
  position: relative;
}
.wod20 .floating-label-group .floating-label {
  position: absolute;
  pointer-events: none;
  left: 5px;
  transition: all 0.2s ease;
  opacity: 0.5;
}
.wod20 .floating-label-group input:focus ~ .floating-label,
.wod20 .floating-label-group input:disabled ~ .floating-label,
.wod20 .floating-label-group input:not(:focus):valid ~ .floating-label,
.wod20 .floating-label-group select:focus ~ .floating-label,
.wod20 .floating-label-group select:disabled ~ .floating-label,
.wod20 .floating-label-group select:not(:focus):valid ~ .floating-label {
  font-size: var(--wod-font-xxs);
  top: -9px;
  bottom: 0px;
  left: 5px;
  opacity: 1;
  border-width: 0px;
  border: none;
  box-shadow: none;
  outline: none !important;
}
.wod20 .floating-label-group input:focus,
.wod20 .floating-label-group select:focus {
  outline: none !important;
}
.wod20 .floating-label-group input {
  height: 30px;
  padding-left: 7px;
}
.wod20 .floating-label-group select {
  height: 30px;
}

.wod20 .info-container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

.wod20 .info-box {
  width: 80%;
  margin: 5px;
}

.wod20 .headlineNormal.info-box {
  padding: 10px;
  background: var( --sheet-white);
  border: black;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  margin-top: 5px;
  max-width: 400px;
}

/* END - General */

/* 
    START drag and drop
    .wod20-drag-row is added as you drag the row
*/
.wod20 .wod20-drag-row {
  white-space: nowrap;
}

.wod20 .wod20-drag-row > div {
  display: inline-block;
  vertical-align: middle;
}

/* Drag-over indicators for sortable items */
.wod20 .advantage-item,
.wod20 .power-item,
.wod20 .feature-item,
.wod20 .ability-item {
  transition: border-color 0.15s ease;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.wod20 .advantage-item.drag-over-top,
.wod20 .power-item.drag-over-top,
.wod20 .feature-item.drag-over-top,
.wod20 .ability-item.drag-over-top {
  border-top: 2px solid var(--main-full-color);
}

.wod20 .advantage-item.drag-over-bottom,
.wod20 .power-item.drag-over-bottom,
.wod20 .feature-item.drag-over-bottom,
.wod20 .ability-item.drag-over-bottom {
  border-bottom: 2px solid var(--main-full-color);
}

.wod20 [data-droparea="advantages"].drag-active,
.wod20 [data-droparea="features"].drag-active,
.wod20 [data-droparea="powers"].drag-active {
  background-color: rgba(var(--main-full-color-rgb, 128, 0, 0), 0.05);
}

/* Highlight ability drop zones when dragging */
.wod20 .ability-statArea.drag-over {
  background-color: rgba(var(--main-full-color-rgb, 128, 0, 0), 0.08);
  border-radius: 4px;
}

/* END drag and drop */

/* Create ALL button */

.wod20.wod-dialog.wod-create .dialog-content {
  flex: 0;
}

.wod20.wod-dialog.wod-create .dialog-buttons {
  text-align: center;
}

.wod20.wod-dialog.wod-create button {
  border: 0;
  background: var(--main-full-color);
  color: #e0e0e0;
  width: 50%;
  height: 34px;
  margin-bottom: 10px;
}

.wod20.wod-dialog.wod-create button.active {
  background: #e0e0e0;
	color: var(--main-full-color);
  border: 1px solid var(--main-full-color);
}

.wod20.wod-dialog.wod-create button:hover,
.wod20.wod-dialog.wod-create button:focus {
  cursor: pointer;
}

.wod20.wod-dialog.wod-create button:hover,
.wod20.wod-dialog.wod-create button:focus {
  cursor: default;
}

.wod20 .fullSplatColor.button.active {
  background: #e0e0e0;
	color: var(--main-full-color);
  border: 1px solid var(--main-full-color);
}

.wod-dialog .setting-area {
  margin-bottom: 20px !important;
}

/* End Create ALL button */

/* Power Selection Accordion */
.wod20 .power-selection .power-category {
	border: 1px solid var(--wod-border-color);
	margin-bottom: 0.5em;
	border-radius: 4px;
	overflow: hidden;
}

.wod20 .power-selection .power-category-header {
	padding: 0.75em;
	background: var(--wod-bg-secondary);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5em;
	user-select: none;
	transition: background-color 0.2s ease;
}

.wod20 .power-selection .power-category-header:hover {
	background: var(--wod-bg-hover);
}

.wod20 .power-selection .power-category-label {
	font-weight: bold;
	flex: 1;
}

.wod20 .power-selection .power-category-buttons {
	padding: 0.5em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: flex-start;
}

/* Överskriv width för power-selection-knappar så att de inte påverkas av .wod-create button-regeln */
.wod20 .power-selection .power-category-buttons .power-button {
	width: auto !important;
	flex: 0 0 auto;
	min-width: 150px;
}

.wod20 .power-selection .power-button {
	padding: 0.5em 1em;
	border: 0;
	background: var(--main-full-color);
	color: #e0e0e0;
	width: auto !important;
	height: 34px;
	margin-bottom: 0 !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
	display: inline-block;
}

.wod20 .power-selection .power-button:hover {
	background: #e0e0e0;
	color: var(--main-full-color);
	border: 1px solid var(--main-full-color);
}

/* Power Selection Dialog - Ensure header controls work correctly */
.wod20.power-selection-dialog.window-app .window-header,
.wod20.power-selection-dialog .window-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wod20.power-selection-dialog.window-app .window-header .header-controls,
.wod20.power-selection-dialog .window-header .header-controls {
	display: flex;
	gap: 0.25em;
}

.wod20.power-selection-dialog.window-app .window-header .header-control,
.wod20.power-selection-dialog .window-header .header-control {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	line-height: 28px;
	font-size: 14px;
}

/* START - Dialog */

.wod20 .setting-radiospan {
  width: 45px; 
  display: inline-block;
}

.wod-dialog .setting-radiobuttons {
  margin-right: 5px !important;
}

.wod-dialog .dialog-area,
.wod-item .dialog-area {
  background: #fff;
  padding-bottom: 10px;
  padding-top: 5px;
  margin-bottom: 10px;
  margin-right: 15px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid var(--main-full-color);
  border-radius: 5px;
}

.wod-dialog .dialog-group {
  margin-top: 5px;
  margin-bottom: 10px;
}

.wod-dialog .dialog-valueBox {
  width: 60px;
}

.wod20 .dialog-action-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.wod20 .dialog-two-button {
  width: 40%;
  height: 34px;
}

.wod20 .dialog-three-button,
.wod20 .dialog-realm-button,
.wod20 .dialog-power-button,
.wod20 .dialog-attribute-button,
.wod20 .dialog-secondaryability-button {
  width: 30%;
  height: 34px;
  margin-bottom: 5px;
}

/* Dialog button rules */

.wod20.wod-item .dialog-one-button.item-bonusvalue-button,
.wod20.wod-dialog .dialog-one-button.item-bonusvalue-button {
  margin-bottom: 5px;
}

.wod20.wod-item .dialog-ten-button.item-bonusvalue-button,
.wod20.wod-dialog .dialog-ten-button.item-bonusvalue-button {
  margin-left: 230px;
  margin-right: 270px;
  margin-bottom: 10px;
  margin-top: 5px;
}

.wod20 .dialog-mode-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.wod20 .dialog-mode-button {
  width: 20%;
  height: 34px;
  margin-bottom: 5px;
}

.wod20 .dialog-numbertargets-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.wod20 .dialog-numbertargets-button,
.wod20 .dialog-numdices-button,
.wod20 .item-bonusvalue-button {
  width: 8%;
  height: 34px;
  max-width: 40px;
}

.wod20 .dialog-difficulty-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.wod20 .dialog-difficulty-button {
  width: 8%;
  height: 34px;
  max-width: 40px;
}

.wod20 .dialog-moon-button,
.wod20 .dialog-shapechange-button {
  width: 19%;
  height: 34px;
}

.wod20 .aretecasting-dialog .dialog-label {
  width: 480px;
}

.wod-dialog button .eon-roller__flag {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 0;
  right: 0;
  font-size: var(--wod-font-md);
  height: 18px;
  line-height: 1;
  background-color: #ff6400;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 4px 4px 0 0;
  max-height: 18px;
  -webkit-transition: all ease-in-out 0.15s;
  -o-transition: all ease-in-out 0.15s;
  transition: all ease-in-out 0.15s;
}

.wod-dialog button .eon-roller__flag:hover, 
.wod-dialog button .eon-roller__flag:focus {
  background-color: #ff6400;
  color: #fff;
}

/* END - Dialog */

/* START List item rows */

.wod20 .item-row-area {
  border-bottom: 1px solid var(--main-full-color);
  padding: 3px;
  line-height: 23px;
  display: flex;
  white-space: nowrap;
  width: 100%;
}

.wod20 .item-row-area.feature-itemlist {
  border-bottom: 0px solid var(--main-full-color);
}

.wod20 .feature-itemlistarea {
  border-bottom: 1px solid var(--main-full-color);
}

.wod20 .item-row-area .dragrow,
.wod20-drag-row.dragrow {
  display: flex;
  white-space: nowrap;
}

.wod20 .item-row-area .iconBox {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center; 
}

.wod20 .power-itemlist {
  line-height: 23px;
  height: 26px;
  display: flex;
}

.wod20 .sphere-itemlist {
  line-height: 23px;
  height: 26px;
  display: flex;
}

.wod20 .item-row-area.power-row {
  border-top: 0;
  border-bottom: 0;
  /* background: var(--sheet-background-color) no-repeat;     */
  background: transparent;
}

.wod20 .tooltipText {
  font-size: var(--wod-font-sm);
  padding: 5px;
}
  

    /* headline */
.wod20 .headlineRow.combat-natural-itemlist .width-namebox,
.wod20 .headlineRow.combat-melee-itemlist .width-namebox,
.wod20 .headlineRow.combat-ranged-itemlist .width-namebox,
.wod20 .headlineRow.combat-armor-itemlist .width-namebox,
.wod20 .headlineRow.gear-itemlist .width-namebox,
.wod20 .headlineRow.feature-itemlist .width-namebox,
.wod20 .description-itemlist .width-namebox {
  width: 190px;
}

    /* item row */
.wod20 .item-row-area.combat-natural-itemlist .width-namebox,
.wod20 .item-row-area.combat-melee-itemlist .width-namebox,
.wod20 .item-row-area.combat-ranged-itemlist .width-namebox,
.wod20 .item-row-area.combat-armor-itemlist .width-namebox,
.wod20 .item-row-area.gear-itemlist .width-namebox,
.wod20 .item-row-area.feature-itemlist .width-namebox,
.wod20-drag-row .width-namebox { 
  width: 170px;
}

.wod20 .effect-itemlist .item-row .width-namebox {
  width: 300px;
}

.wod20 .item-row-area.mainpower-row {
    height: 26px;
    line-height: 23px;
    margin-top: 20px;
    margin-bottom: 5px;
    width: 100%;
    background-color: var(--main-dim-color);
}

.wod20 .item-row-area.mainpower-row .power-itemlist .width-namebox {
  font-size: var(--wod-font-xl);
  font-weight: normal;
  width: 240px;
}

.wod20 .item-row-area.power-row .power-itemlist .width-namebox,
.wod20 .unsorted-area .width-namebox {
  width: 210px;
}

.wod20 .combat-natural-itemlist .width-abilitybox,
.wod20 .combat-melee-itemlist .width-abilitybox,
.wod20 .combat-ranged-itemlist .width-abilitybox,
.wod20 .combat-armor-itemlist .width-abilitybox,
.wod20 .gear-itemlist .width-abilitybox,
.wod20-drag-row .width-abilitybox {
  width: 90px;
}

.wod20 .power-itemlist .width-abilitybox {
  width: 120px;
}

.wod20 .gear-itemlist .width-abilitybox {
  width: 150px;
}

.wod20 .effect-itemlist .item-row .width-abilitybox {
  width: 200px;
}

.wod20 .combat-melee-itemlist .width-mediumbox,
.wod20 .gear-itemlist .width-mediumbox,
.wod20 .feature-itemlist .width-mediumbox,
.wod20 .effect-itemlist .item-row .width-mediumbox,
.wod20-drag-row .width-mediumbox {
  width: 100px;
}

.wod20 .combat-natural-itemlist .width-smallbox,
.wod20 .combat-melee-itemlist .width-smallbox,
.wod20 .combat-ranged-itemlist .width-smallbox,
.wod20 .combat-armor-itemlist .width-smallbox,
.wod20 .power-itemlist .width-smallbox,
.wod20-drag-row .width-smallbox {
  width: 75px;
}

.wod20 .combat-natural-itemlist .width-valuebox,
.wod20 .combat-melee-itemlist .width-valuebox,
.wod20 .combat-ranged-itemlist .width-valuebox,
.wod20 .combat-armor-itemlist .width-valuebox,
.wod20 .gear-itemlist .width-valuebox,
.wod20 .feature-itemlist .width-valuebox,
.wod20 .description-itemlist .width-valuebox,
.wod20-drag-row .width-valuebox {
  width: 50px;
  text-align: center;
}

.wod20 .effect-itemlist .item-row .width-valuebox {
  width: 75px;
  text-align:center;
}

.wod20 .width-iconbox,
.wod20-drag-row .width-iconbox {
  margin-right: 2px;
  width: 15px;
}

.wod20 .width-iconbox-empty,
.wod20-drag-row .width-iconbox-empty {
  margin-right: 2px;
  width: 15px;
}

.wod20 .description {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  
}

.wod20 .description.collapsible-open {
    border-bottom: 1px solid var(--main-full-color);
}

.wod20 .icon.collapsible.button {
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wod20 .no-description-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;

  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wod20 .highlightedPowerRow {
  border-top: 1px solid var(--main-full-color);
  border-bottom: 1px solid var(--main-full-color);
  background-color: var(--main-dim-color);
}

.wod20:not(.noSplatFont) .description .headlineList {
    font-weight: normal;
    font-size: var(--wod-font-base);
}

/* END List item rows */

/* START - Navigation */

.wod20 nav.tabs {
  gap: 0rem;
}

.wod20.wod-sheet .shapeIcon {
  margin-bottom: 8px;
}

.wod20.wod-sheet nav.tabs {
  border-top: 0;
  border-bottom: 0;
}

.wod20.wod-sheet .sheet-tabs {
  flex-direction: column;
  justify-content: flex-start;
}

.wod20.wod-sheet div.item,
.wod20.wod-sheet .tabs .actorv2{
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  border: 0;
}

.wod20 .navigation img.navBtn {
  height: 30px;
  width: 30px;
  border: 0px;
}

.wod20.wod-sheet .tabs .item {
  width: 30px;
  height: 30px;
  display: inline-block;
  padding: 0;
  background-color: transparent;
}

.wod20.wod-sheet .tabs .item.active {
  box-shadow: 5px 5px 5px var(--main-mid-color);
  -moz-box-shadow: 5px 5px 5px var(--main-mid-color);
  -webkit-box-shadow: 5px 5px 5px var(--main-mid-color);
  -khtml-box-shadow: 5px 5px 5px var(--main-mid-color);
  width: 30px;
  height: 30px;
  display: inline-block;
  padding: 0;
  background-color: transparent;
}

.wod20.wod-item nav.tabs {
  border-top: 0px;
  border-bottom: 0px;
}

.wod20.wod-item div.item {
  height: 30px;
  margin-top: 8px;
  margin-bottom: 8px;
  border: 0;
}

.wod20.wod-sheet .tabs .actorv2 {
  width: 30px;
  height: 30px;
  padding: 0;
  background-color: transparent;
}

.wod20.wod-sheet .tabs .actorv2.active {
  box-shadow: 5px 5px 5px var(--main-mid-color);
  -moz-box-shadow: 5px 5px 5px var(--main-mid-color);
  -webkit-box-shadow: 5px 5px 5px var(--main-mid-color);
  -khtml-box-shadow: 5px 5px 5px var(--main-mid-color);
  width: 30px;
  height: 30px;
  padding: 0;
  background-color: transparent;
}

.wod20.wod-item .tabs .itemv2.item {
  box-shadow: 0px 0px 0px var(--main-mid-color);
  -moz-box-shadow: 0px 0px 0px var(--main-mid-color);
  -webkit-box-shadow: 0px 0px 0px var(--main-mid-color);
  -khtml-box-shadow: 0px 0px 0px var(--main-mid-color);
  /* width: 30px; */
  height: 30px;
  display: inline-block;
  padding: 0;
  background-color: transparent;
}

.wod20.wod-item .tabs .itemv2.item.active {
  box-shadow: 5px 5px 5px var(--main-mid-color);
  -moz-box-shadow: 5px 5px 5px var(--main-mid-color);
  -webkit-box-shadow: 5px 5px 5px var(--main-mid-color);
  -khtml-box-shadow: 5px 5px 5px var(--main-mid-color);
}

.wod20 .secondHeadlineTabs,
.wod20.wod-item .navsection {
  font-size: var(--wod-font-xl);
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-weight: var(--headline-normal-weight);
}

.wod20 .actorv2 .secondHeadlineTabs {
  width: 25% !important;
}

/* END - Navigation */

/* START - Bio */

.wod20 .headlineBio {
  float: left; 
  width: 30%;
}

.wod20 .itemv2 .headlineBio {
  width: 40%;
}

.wod20 .itemv2 .headlineSettings {
  width: 80%;
}

.wod20 .bioInformationArea {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
  padding-right: 5px;
}

.wod-item .bioInformationArea {
  padding-right: 0;
  height: 32px;
}

.wod20 .smallbox {
  height: 75px;
}

/* END - Bio */

/* START - Core */

.wod20 .dotvalueArea {
  margin-right: 10%;
}

.wod20 .attribute-statArea {	
	width: 33%;	
}

.wod20 .attribute-headlineWidth {
	width: 	110px;
}

.wod20 .health-headlineWidth {
  width: 	110px;
}

.wod20 .attribute-total {
  display: inline-block;
  width: 10px;
}

.wod20 .ability-statArea {	
	width: 33%;
}

.wod20 .attribute-rowheight {
  height: 19px;
}

.wod-sheet .ability-headlineWidth {
	width: 50%;
}
.wod-sheet .supernaturalAttribute.ability-headlineWidth {
  width: 40%;
}

.wod20 .ability-rowheight {
  height: 19px;
}

.wod20 div.health {
  display: inline-block;
}

.wod20 span.healthBox {
  margin: 1px;
}

.wod20 span.bruised.healthBox {
  background: var(--healthlevel-bruised-color);
}

.wod20 span.hurt.healthBox {
  background: var(--healthlevel-hurt-color);
}

.wod20 span.injured.healthBox {
  background: var(--healthlevel-injured-color);
}

.wod20 span.wounded.healthBox {
  background: var(--healthlevel-wounded-color);
}

.wod20 span.mauled.healthBox {
  background: var(--healthlevel-mauled-color);
}

.wod20 span.crippled.healthBox {
  background: var(--healthlevel-crippled-color);
}

.wod20 span.incapacitated.healthBox {
  background: var(--healthlevel-incapacitated-color);
}

.wod20 .experienceValue {
  margin-left: 70px;
}

.wod20 .total.experienceValue {
  line-height: 26px;
  margin-left: 15px;
}

.wod20.ghoul .total.experienceValue,
.wod20.kinfolk .total.experienceValue {
  line-height: 36px;
}

.wod20 div.permValueRow {
  margin: 0 auto;
}

.wod20 div.tempSquareRow {
  margin: 0 auto;
  max-width: 240px;
}

.wod20 span.supernaturalAttribute:nth-of-type(5n) {
  margin-right: 10px;
}

.wod20 .rankAttribute:nth-of-type(5n) {
  margin-right: 5px;
}

.wod20 div.bloodpool {
  width: 185px;
  margin: 0 auto;
} 

.wod20 div.essence-counters {
  width: 180px;
  margin: 0 auto;
}

.wod20 .form-apocalyptic {
  width: 100%;
  display: flex;
  height: 23px;
  line-height: 23px;
}

.wod20 .form-apocalyptic-name {
  width: 270px;
}

.wod20 .bonus-apocalyptic-name {
  margin-left: 40px;
  width: 150px;
  height: 23px;
  line-height: 23px;
}

.wod20 .bonus-power-name {
  margin-left: 60px;
  width: 200px;
  height: 23px;
  line-height: 23px;
}

.wod20 div.speciality-ability {
  margin-left: 25px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.wod20 div.speciality-attribute {
  margin-left: 25px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.wod20 div.speciality-magic {
  margin-left: 25px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.wod20 div.speciality-ability-icon,
.wod20 div.speciality-attribute-icon,
.wod20 div.speciality-magic-icon {
  margin-right: 10px;
  margin-left: 5px;
}

.wod20 div.speciality-ability-empty-icon,
.wod20 div.speciality-attribute-empty-icon,
.wod20 div.speciality-magic-empty-icon {
  margin-right: 25px;
}

.wod20 div.rank-area {
  height: 75px;
}

/* END - Core */

/* START - Combat */

.wod20 .condition {
  width: 150px;  
}

.wod20 .condition-checkbox {
  height: 25px;
  line-height: 30px;
  /* font-weight: bold; */
  font-weight: var(--headline-normal-weight);
}

.wod20 .actorv2 .condition-checkbox {
  height: 24px;
  line-height: 24px;
}

.wod20 .rowicons {
  width: 23px;
  height: 23px;
}



.wod20 .combat-activeBox {
  width: 30px;
}

.wod20 .combat-bottomarea {
  width: 33%;
}

.wod20 .combat-bottomhealth {
  width: 33%
}

.wod20 .armor-placebox {
  width: 150px;
}

.wod20 .armor-largeBox {
  width: 160px;
}

.wod20 .combat-valueBoxArmor {
  width: 70px;
}

.wod20 .item-row-area .armor-largeBox {
  width: 135px;
}

.wod20 .movementBox {
  line-height: 23px;
}

/* END - Combat */

/* START - Gear */

.wod20 .sheet-gearArea {
  height: 400px;
}



/* END - Gear */

/* START - Power */



/* END - Power */

/* START - Notes */

.wod20 .notes-valueBox {
  width: 70px;
}

.wod20 .notes-centerexperienceadd {
  height: 26px;
  line-height: 26px;
}

.wod20 .notes-experienceHeadline {
  width: 270px;
  height: 19px;
}

/* END - Notes */

/* START - Settings */

.wod20 .space {
  padding-top: 25px;
  padding-bottom: 25px;
}

.wod20 .secondHeadlineTabs.active {
  text-shadow: none;
  box-shadow: none;
  background-color: var(--main-full-color);
  color: #ffffff;  
  cursor: pointer;
  font-weight: normal;
}

.wod20 .secondHeadlineTabs:hover {
	background-color: var(--main-dim-color); 
  color: #121212;  
  cursor: pointer;
}

.wod20 .settings-abilitylabel {
  width: 90px;
}

.wod20 .settings-ability-altnamefiller {
  width: 125px;
}

.wod20 .settings-leftwidth {
  width: 150px;
}

.wod20 .settings-verticalcenter {
  line-height: 26px;
}

/* END - Settings */

/* START - Dialogs */

.wod20 .dialog-casting-type-label {
  width: 250px;
}

.wod-dialog .dialog-checkbox {
  height: 25px;
  line-height: 30px;
}

/* END - Dialogs */

/* START - Items */

.wod-item input[type="checkbox"] {
  margin-left: 0;
}

.wod20 .headlineItem {
  font-size: var(--wod-font-base);
  margin-right: 25px;
  float: left; 
  width: 30%;
  /* font-weight: bold; */
  font-weight: var(--headline-normal-weight);
}

.wod20 .headlineButton {
  font-size: var(--wod-font-lg);
  float:left;
}

.wod20 input.item {
  width: 200px;
}

.wod20 select.item {
  width: 150px;
}

.wod-item select.sheet-infoValues,
.wod-item input.sheet-infoValues {
  width: 200px;
}

.wod-item select.sheet-infoValues.smallbox,
.wod-item input.sheet-infoValues.smallbox {
  width: 100px;
}

.wod-item .infobox {
  margin-bottom: 5px;
  font-family: var(--main-font);
  min-height: 36px;
}

.wod-dialog .infobox {
  margin: 5px;
  font-family: var(--main-font);
  min-height: 36px;
}

.wod20 .sheet-header > .top-area > .top-side > img {
  height: 80px;
  border: 0px;
}

.wod20 .item-body {
  margin-top: 10px;
}

.wod20 .item-area {
  margin: 10px;
}

.wod20 .item-info {
  width: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.wod20 .item-label {
  width: 300px;  
}

.wod20.wod-item .splat-features-columns > .dialog-area {
  flex: 1 1 0;
}

.wod20.wod-item .splat-features-columns > .dialog-area:last-child {
  margin-right: 0;
}

/* Shapes */
.wod20 .shape-details-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;   /* så containern alltid tar hela bredden */
}

.wod20 .shape-panel {
  width: 160px;   /* eller t.ex. 180px – anpassa efter bild (100px) + text */
  /* flex: 0 0 160px; om du vill att de aldrig växer/krymper */
}

.wod20.werewolf .shape-selector {
  text-align: left;
}

.wod20 .shape-panel-body,
.wod20 .shape-bonus-list,
.wod20 .shape-difficulty {
  text-align: left;
}

.wod20 .shape-image {
  width: 100px; 
  height: 100px; 
  border: 1px solid var(--main-full-color); 
  margin-top: 0; 
  padding-left: 0; 
  margin-right: 0;
  border-radius: 10px;
}

.wod20 .shape-panel-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* PC actor power_shapes.hbs only – do not affect legacy werewolf shapechange tab */
/* Whole panel is the visual unit; selected form indicated by panel, not title background */
.wod20 .pc-power-shapes .shape-panel {
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.wod20 .pc-power-shapes .shape-panel:hover {
  border-color: var(--main-dim-color);
}

.wod20 .pc-power-shapes .shape-panel.shape-panel-active {
  border-color: var(--main-full-color);
  background-color: var(--main-dim-color);
  box-shadow: 0 0 0 1px var(--main-full-color);
}

.wod20 .pc-power-shapes .shape-panel-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 28px;
  padding: 4px 0;
  margin-top: 4px;
}

.wod20 .pc-power-shapes .shape-panel-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--wod-font-base);
  /* font-weight: 600; */
  line-height: 1.3;
  text-align: left;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
  background-color: transparent;
  color: inherit;
  transition: background-color 0.15s ease;
}

.wod20 .pc-power-shapes .shape-panel-title:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.wod20 .pc-power-shapes .shape-panel-title.shape-selector-active {
  background-color: transparent;
  color: inherit;
  text-shadow: none;
}

.wod20 .pc-power-shapes .shape-panel-title.shape-selector-active:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.wod20 .pc-power-shapes .shape-panel-header-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.wod20 .pc-power-shapes .shape-panel-header-actions .icon {
  margin-left: 0;
  margin-right: 0;
}

/* END - Items */

/* START - handle design of radio buttons */
.wod20 .difficulty-value .resource-value-step,
.wod20 .resource-value .resource-value-step {
  height: 14px;
  width: 14px;
  border: 1px solid #121212;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  background: #ffffff;  
}

.wod20 .resource-counter.tempSquareRow .resource-value-step,
.wod20 .resource-value.permValueRow .resource-value-step {
  margin-right: 5px;
}

.wod20 span.supernaturalAttribute.resource-value-step {
  height: 12px;
  width: 12px;
}

.wod20 .difficulty-value .resource-value-step.active,
.wod20 .resource-value .resource-value-step.active {
  background-color: #121212;
}

.wod20 .resource-value-static .resource-value-static-step {
  height: 14px;
  width: 14px;
  border: 1px solid #121212;
  display: inline-block;
  border-radius: 50%;
}

.wod20 span.bruised.healthBox {
  background-color: var(--healthlevel-bruised-color);
}

.wod20 span.hurt.healthBox {
  background: var(--healthlevel-hurt-color);
}

.wod20 span.injured.healthBox {
  background: var(--healthlevel-injured-color);
}

.wod20 span.wounded.healthBox {
  background: var(--healthlevel-wounded-color);
}

.wod20 span.mauled.healthBox {
  background: var(--healthlevel-mauled-color);
}

.wod20 span.crippled.healthBox {
  background: var(--healthlevel-crippled-color);
}

.wod20 span.incapacitated.healthBox {
  background: var(--healthlevel-incapacitated-color);
}

.wod20 .resource-counter .resource-value-step {
  height: 14px;
  width: 14px;
  border: 1px solid #121212;
  display: inline-block;
  cursor: pointer;
  background: #ffffff;
}

/* bashing */
.wod20 .resource-counter .resource-value-step[data-state="/"] {
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),  var(--healthlevel-bruised-color);
}

.wod20 .resource-counter .resource-value-step[data-state="/"].bruised {
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),  var(--healthlevel-bruised-color);
}

.wod20 .resource-counter .resource-value-step[data-state="/"].hurt {
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),  var(--healthlevel-hurt-color);
}

.wod20 .resource-counter .resource-value-step[data-state="/"].injured {
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),  var(--healthlevel-injured-color);
}

.wod20 .resource-counter .resource-value-step[data-state="/"].wounded {
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),  var(--healthlevel-wounded-color);
}

.wod20 .resource-counter .resource-value-step[data-state="/"].mauled {
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),  var(--healthlevel-mauled-color);
}

.wod20 .resource-counter .resource-value-step[data-state="/"].crippled {
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      white 45%,
      white 55%,
      transparent 57%,
      transparent 100%
    ),  var(--healthlevel-crippled-color);
}

.wod20 .resource-counter .resource-value-step[data-state="/"].incapacitated {
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      white 45%,
      white 55%,
      transparent 57%,
      transparent 100%
    ),  var(--healthlevel-incapacitated-color);
}

/* lethal */
.wod20 .resource-counter .resource-value-step[data-state="x"] {
  background:
    linear-gradient(
      45deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ), #ffffff;
}

.wod20 .resource-counter .resource-value-step[data-state="x"].bruised {
  background:
    linear-gradient(
      45deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ), var(--healthlevel-bruised-color);
}

.wod20 .resource-counter .resource-value-step[data-state="x"].hurt {
  background:
  linear-gradient(
    45deg,
    transparent 0%,
    transparent 43%,
    black 45%,
    black 55%,
    transparent 57%,
    transparent 100%
  ),
  linear-gradient(
    135deg,
    transparent 0%,
    transparent 43%,
    black 45%,
    black 55%,
    transparent 57%,
    transparent 100%
    ), var(--healthlevel-hurt-color);
}

.wod20 .resource-counter .resource-value-step[data-state="x"].injured {
  background:
  linear-gradient(
    45deg,
    transparent 0%,
    transparent 43%,
    black 45%,
    black 55%,
    transparent 57%,
    transparent 100%
  ),
  linear-gradient(
    135deg,
    transparent 0%,
    transparent 43%,
    black 45%,
    black 55%,
    transparent 57%,
    transparent 100%
    ), var(--healthlevel-injured-color);
}

.wod20 .resource-counter .resource-value-step[data-state="x"].wounded {
  background:
  linear-gradient(
    45deg,
    transparent 0%,
    transparent 43%,
    black 45%,
    black 55%,
    transparent 57%,
    transparent 100%
  ),
  linear-gradient(
    135deg,
    transparent 0%,
    transparent 43%,
    black 45%,
    black 55%,
    transparent 57%,
    transparent 100%
    ), var(--healthlevel-wounded-color);
}

.wod20 .resource-counter .resource-value-step[data-state="x"].mauled {
  background:
  linear-gradient(
    45deg,
    transparent 0%,
    transparent 43%,
    black 45%,
    black 55%,
    transparent 57%,
    transparent 100%
  ),
  linear-gradient(
    135deg,
    transparent 0%,
    transparent 43%,
    black 45%,
    black 55%,
    transparent 57%,
    transparent 100%
    ), var(--healthlevel-mauled-color);
}

.wod20 .resource-counter .resource-value-step[data-state="x"].crippled {
  background:
  linear-gradient(
    45deg,
    transparent 0%,
    transparent 43%,
    white 45%,
    white 55%,
    transparent 57%,
    transparent 100%
  ),
  linear-gradient(
    135deg,
    transparent 0%,
    transparent 43%,
    white 45%,
    white 55%,
    transparent 57%,
    transparent 100%
    ), var(--healthlevel-crippled-color);
}

.wod20 .resource-counter .resource-value-step[data-state="x"].incapacitated {
  background:
  linear-gradient(
    45deg,
    transparent 0%,
    transparent 43%,
    white 45%,
    white 55%,
    transparent 57%,
    transparent 100%
  ),
  linear-gradient(
    135deg,
    transparent 0%,
    transparent 43%,
    white 45%,
    white 55%,
    transparent 57%,
    transparent 100%
    ), var(--healthlevel-incapacitated-color);
}

/* aggravated */
.wod20 .resource-counter .resource-value-step[data-state="*"] {
  background:
    linear-gradient(
      45deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ), #ffffff;
}

.wod20 .resource-counter .resource-value-step[data-state="*"].bruised {
  background:
    linear-gradient(
      45deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ), var(--healthlevel-bruised-color);
}

.wod20 .resource-counter .resource-value-step[data-state="*"].hurt {
  background:
  linear-gradient(
      45deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ), var(--healthlevel-hurt-color);
}

.wod20 .resource-counter .resource-value-step[data-state="*"].injured {
  background:
  linear-gradient(
      45deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ), var(--healthlevel-injured-color);
}

.wod20 .resource-counter .resource-value-step[data-state="*"].wounded {
  background:
  linear-gradient(
      45deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),var(--healthlevel-wounded-color);
}

.wod20 .resource-counter .resource-value-step[data-state="*"].mauled {
  background:
  linear-gradient(
      45deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      black 45%,
      black 55%,
      transparent 57%,
      transparent 100%
    ), var(--healthlevel-mauled-color);
}

.wod20 .resource-counter .resource-value-step[data-state="*"].crippled {
  background:
  linear-gradient(
      45deg,
      transparent 0%,
      transparent 43%,
      white 45%,
      white 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 43%,
      white 45%,
      white 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      white 45%,
      white 55%,
      transparent 57%,
      transparent 100%
    ), var(--healthlevel-crippled-color);
}

.wod20 .resource-counter .resource-value-step[data-state="*"].incapacitated {
  background:
  linear-gradient(
      45deg,
      transparent 0%,
      transparent 43%,
      white 45%,
      white 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 43%,
      white 45%,
      white 55%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 43%,
      white 45%,
      white 55%,
      transparent 57%,
      transparent 100%
    ), var(--healthlevel-incapacitated-color);
}

/* Migration Wizard - Fixed button layout */
.wod20.migration-wizard-dialog .migration-wizard-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 500px;
}

.wod20.migration-wizard-dialog .migration-wizard-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.wod20.migration-wizard-dialog .migration-wizard-buttons {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  margin-top: auto;
  border-top: 1px solid var(--main-full-color);
}