.simple_container .normal {
  background-color: lightgreen;
}

.simple_container .tired,
.simple_container .reeling {
  background-color: #b8ffff;
}

.simple_container .collapse {
  background-color: #ffcdd2;
}

.simple_container .check {
  background-color: lightcoral;
}

.simple_container .unconscious,
.simple_container .dead {
  background-color: black;
  color: white;
}

.simple_container .destroyed {
  background-color: black;
  color: lightcoral;
}

.simple_Ads label,
.simple_Eqt label,
.simple_Skills label,
.simple_Notes label,
.simple_Attacks label {
  font-size: 120%;
  font-weight: bold;
  font-style: italic;
}

.simple_form {
  width: 100% !important;
  height: 100% !important;
}

.simple_container {
  width: 100% !important;
  height: 100% !important;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 5px 5px;
  grid-template-areas:
    'ST ST-desc ST-desc Portrait Portrait'
    'DX DX-desc DX-desc Portrait Portrait'
    'IQ IQ-desc IQ-desc Portrait Portrait'
    'HT HT-desc HT-desc Portrait Portrait'
    'Shield Body Heart Notes Notes'
    'Shield Body Heart Notes Notes'
    'Shield Body Heart Notes Notes'
    'Defend Armor HP Notes Notes'
    'Attacks Attacks Attacks Skills Skills'
    'Attacks Attacks Attacks Skills Skills'
    'Attacks Attacks Attacks Skills Skills'
    'Attacks Attacks Attacks Skills Skills'
    'Attacks Attacks Attacks Skills Skills'
    'Eqt Eqt Eqt Ads Ads'
    'Eqt Eqt Eqt Ads Ads'
    'Eqt Eqt Eqt Ads Ads'
    'Eqt Eqt Eqt Ads Ads';
}

.simple_lrg {
  font-size: 200%;
}

.simple_roll_label {
  text-align: center;
}

.simple_ST-desc label,
.simple_DX-desc label,
.simple_IQ-desc label,
.simple_HT-desc label {
  align-self: center;
}

.simple_ST {
  grid-area: ST;
}

.simple_DX {
  grid-area: DX;
}

.simple_IQ {
  grid-area: IQ;
}

.simple_HT {
  grid-area: HT;
}

.simple_ST-desc {
  grid-area: ST-desc;
  display: flex;
  flex-direction: row;
  align-content: center;
}

.simple_DX-desc {
  grid-area: DX-desc;
  display: flex;
  flex-direction: row;
  align-content: center;
}

.simple_IQ-desc {
  grid-area: IQ-desc;
  display: flex;
  flex-direction: row;
  align-content: center;
}

.simple_HT-desc {
  grid-area: HT-desc;
  display: flex;
  flex-direction: row;
  align-content: center;
}

.simple_dodge {
  font-size: 150%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-top: 1px solid #cccccc;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #cccccc;
  border-radius: 5px;
}

.simple_container .gurpslink,
.simple_container .glinkmod,
.simple_container .rollable {
  border-top: 1px solid #cccccc;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #cccccc;
  border-radius: 5px;
}

.simple_Shield {
  grid-area: Shield;
  background-image: url('../ui/ri_1.webp');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  font-size: 250%;
  font-weight: bold;
  position: relative;
}

.simple_Body {
  grid-area: Body;
  text-align: center;
  background-image: url('../ui/ri_3.webp');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  font-size: 250%;
  font-weight: bold;

  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  padding: 0px 0px 30px 0px;
}

.simple_Heart {
  grid-area: Heart;
}

.simple_Heart_inner {
  width: 100%;
  height: 100%;
  text-align: center;
  background-image: url('../ui/ri_2t.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  font-size: 250%;
  font-weight: bold;

  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  padding: 0px 0px 30px 0px;
}

.simple_Defend {
  grid-area: Defend;
  font-weight: bold;
  text-align: center;
  background-color: green;
}

.simple_Armor {
  grid-area: Armor;
  font-weight: bold;
  text-align: center;
  background-color: orange;
}

.simple_HP {
  grid-area: HP;
  font-weight: bold;
  text-align: center;
  background-color: red;
}

.simple_Attacks {
  grid-area: Attacks;
  background-color: rgb(220, 255, 255);
  display: grid;
  align-content: stretch;
  grid-template-rows: repeat(100, 1fr);
  grid-template-columns: 1.5fr 1fr 1fr;
  text-align: left;
  vertical-align: middle;
  font-size: 120%;
  gap: 10px 15px;
  overflow-y: scroll;
  padding: 0px 0px 0px 5px;
}

.simple_Skills {
  grid-area: Skills;
  background-color: rgb(220, 255, 255);
  display: grid;
  align-content: stretch;
  grid-template-rows: repeat(100, 1fr);
  grid-template-columns: 3fr 1fr;
  text-align: left;
  vertical-align: middle;
  font-size: 120%;
  gap: 10px 15px;
  overflow-y: scroll;
  padding: 0px 0px 0px 5px;
}

.simple_Eqt {
  grid-area: Eqt;
  background-color: rgb(215, 215, 255);
  display: grid;
  align-content: stretch;
  grid-template-rows: repeat(100, 1fr);
  grid-template-columns: 9fr 1fr;
  text-align: left;
  vertical-align: middle;
  font-size: 120%;
  gap: 10px 15px;
  overflow-y: scroll;
  padding: 0px 0px 0px 5px;
}

.simple_Ads {
  grid-area: Ads;
  background-color: rgb(215, 215, 255);
  display: grid;
  align-content: stretch;
  grid-template-rows: repeat(100, 1fr);
  grid-template-columns: 1fr;
  text-align: left;
  vertical-align: middle;
  font-size: 120%;
  gap: 10px 20px;
  overflow-y: scroll;
  padding: 0px 0px 0px 5px;
}

.simple_Portrait {
  grid-area: Portrait;
  object-fit: contain;
  text-align: center;
}

.simple_Notes {
  grid-area: Notes;
  background-color: rgb(220, 255, 255);
  font-size: 120%;
  display: grid;
  align-content: stretch;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr;
  padding: 0px 0px 0px 5px;
  overflow-y: scroll;
}

.simple_icon {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  background-color: rgb(255, 255, 175);
}

.simple_input:hover {
  cursor: pointer;
  text-decoration: none;
  background-color: rgb(255, 255, 128) !important;
  color: black;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #333333;
  border-bottom: 2px solid #333333;
  border-left: 2px solid #cccccc;
  border-radius: 5px;
  overflow: visible;
  z-index: 99;
  margin: 3px;
  padding: 10px;
}

.simple_icon:hover {
  cursor: pointer;
  text-decoration: none;
  background-color: rgb(255, 255, 128) !important;
  color: black;
  padding: 0px 3px 0px 3px;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #333333;
  border-bottom: 2px solid #333333;
  border-left: 2px solid #cccccc;
  border-radius: 5px;
  margin: -2px -4px 0px -2px;
  overflow: visible;
  z-index: 99;
}

.simple_input:active {
  cursor: pointer;
  text-decoration: none;
  color: black;
  background-color: rgb(255, 255, 128) !important;
  border-bottom: 2px solid #cccccc;
  border-left: 2px solid #333333;
  border-top: 2px solid #333333;
  border-right: 2px solid #cccccc;
  border-radius: 8px;
  overflow: visible;
  z-index: 99;
  margin: 5px;
  padding: 10px;
}

.simple_icon:active {
  cursor: pointer;
  text-decoration: none;
  color: black;
  background-color: rgb(255, 255, 128) !important;
  padding: 0px 3px 0px 3px;
  border-bottom: 2px solid #cccccc;
  border-left: 2px solid #333333;
  border-top: 2px solid #333333;
  border-right: 2px solid #cccccc;
  border-radius: 8px;
  margin: -2px -5px 0px -3px;
  overflow: visible;
  z-index: 99;
}

.simple_input {
  font-size: 120% !important;
  height: 40px !important;
  width: 80px !important;
  vertical-align: middle;
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: rgb(255, 255, 175);
}
