mighty-protectors.css

/* global colors */
/* ----------------------------------------- */
/*  Flexbox                                  */
/* ----------------------------------------- */
.flexrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.flexrow > * {
  flex: 1;
}
.flexrow .flex1 {
  flex: 1;
}
.flexrow .flex2 {
  flex: 2;
}
.flexrow .flex3 {
  flex: 3;
}
.flexrow .flex4 {
  flex: 4;
}
.flexcol {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.flexcol > * {
  flex: 1;
}
.flexcol .flex1 {
  flex: 1;
}
.flexcol .flex2 {
  flex: 2;
}
.flexcol .flex3 {
  flex: 3;
}
.flexcol .flex4 {
  flex: 4;
}
.mightyprotectors.sheet.item {
  /*  Sheet header */
  /* sheet navigation */
  /* sheet body */
}
.mightyprotectors.sheet.item form {
  display: flex;
  flex-direction: column;
}
.mightyprotectors.sheet.item .rollable {
  cursor: pointer;
}
.mightyprotectors.sheet.item .rollable:hover {
  text-shadow: 0 0 8px red;
  color: black;
}
.mightyprotectors.sheet.item .sheet-header {
  flex: 0;
  margin-bottom: 5px;
}
.mightyprotectors.sheet.item .sheet-header .item-subtitle {
  margin-left: 8px;
}
.mightyprotectors.sheet.item .sheet-header .item-subtitle .item-type {
  font-size: 10px;
  line-height: 14px;
}
.mightyprotectors.sheet.item .sheet-navigation {
  height: 20px;
  flex: 0;
  margin-bottom: 10px;
}
.mightyprotectors.sheet.item .sheet-navigation .item {
  height: 20px;
  border-bottom: 3px solid #b5b3a4;
}
.mightyprotectors.sheet.item .sheet-navigation .item.active {
  text-shadow: 0 0 10px #3a2aa6;
  border-bottom: 3px solid #44191A;
}
.mightyprotectors.sheet.item .sheet-navigation a:hover {
  text-shadow: 0 0 10px #3a2aa6;
  border-bottom: 3px solid #44191A;
}
.mightyprotectors.sheet.item .sheet-navigation .tabs {
  height: 50px;
}
.mightyprotectors.sheet.item .sheet-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mightyprotectors.sheet.item .sheet-body .bgdesc {
  min-height: 170px;
}
.mightyprotectors.sheet.item .sheet-body .tab {
  height: 100%;
}
.mightyprotectors.sheet.item .sheet-body .description .descgrid {
  display: grid;
  grid-template-columns: 50px auto;
  align-items: center;
}
.mightyprotectors.sheet.item .sheet-body .description .descgrid .desccolumn {
  grid-column: 2;
  grid-row: 1 / span 2;
  height: 100%;
}
.mightyprotectors.sheet.item .sheet-body .description .descgrid .desctext {
  min-height: 150px;
  height: 85%;
}
.mightyprotectors.sheet.item .sheet-body .description .descgrid input[type="number"] {
  width: 40px;
}
.mightyprotectors.sheet.item .sheet-body .description .vsdescgrid {
  display: grid;
  grid-template-columns: 70px auto;
  align-items: center;
}
.mightyprotectors.sheet.item .sheet-body .description .vsdescgrid .desccolumn {
  grid-column: 2;
  grid-row: 1 / span 2;
  height: 100%;
}
.mightyprotectors.sheet.item .sheet-body .description .vsdescgrid .desctext {
  min-height: 150px;
  height: 85%;
}
.mightyprotectors.sheet.item .sheet-body .description .vsdescgrid input[type="number"] {
  width: 40px;
}
.mightyprotectors.sheet.item .sheet-body .details .vscalcgrid {
  display: grid;
  grid-template-columns: 100px 110px 12px 55px 30px 8px 40px 30px 8px 40px 30px;
  align-items: center;
}
.mightyprotectors.sheet.item .sheet-body .details .vscalcgrid input[type="number"] {
  width: 40px;
}
.mightyprotectors.sheet.item .sheet-body .details .detailgrid {
  display: grid;
  grid-template-columns: 60px 60px 80px 70px 80px auto;
  align-items: center;
}
.mightyprotectors.sheet.item .sheet-body .details .detailgrid .separator {
  margin-right: 8px;
  border-right: 2px solid silver;
}
.mightyprotectors.sheet.item .sheet-body .details .detailgrid input[type="number"] {
  width: 40px;
  font-size: 11px;
}
.mightyprotectors.sheet.item .sheet-body .details .detailgrid .colheader1 {
  grid-column: 1 / span 2;
  align-items: center;
  border-bottom: 1px solid gray;
  margin-bottom: 3px;
}
.mightyprotectors.sheet.item .sheet-body .details .detailgrid .colheader2 {
  grid-column: 3 / span 4;
  align-items: center;
  border-bottom: 1px solid gray;
  margin-bottom: 3px;
}
.mightyprotectors.sheet.item .sheet-body .rules .ruletab {
  height: 100%;
}
.mightyprotectors.sheet.item .sheet-body .rules .ruletab .editor {
  height: 90%;
}
.mightyprotectors.sheet.item .sheet-body .move-body {
  display: grid;
  grid-template-columns: auto auto;
}
.mightyprotectors.sheet.item .sheet-body .move-body .move-subgrid {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  padding-top: 15px;
  row-gap: 2px;
}
.mightyprotectors.sheet.item .sheet-body .move-body input[type="text"] {
  width: 55px;
}
.mightyprotectors.sheet.item .sheet-body .move-body .hidden {
  display: none;
}
.mightyprotectors.sheet.item .sheet-body .prot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 5px;
}
.mightyprotectors.sheet.item .sheet-body .prot-grid .other-row {
  padding-top: 10px;
  grid-column: 1 / 5;
}
.mightyprotectors.sheet.item .sheet-body .prot-grid input[type="number"] {
  width: 50px;
}
.mightyprotectors.sheet.item .sheet-body .prot-grid input[type="text"] {
  width: 100px;
}
.mightyprotectors.sheet.item .sheet-body .attack-grid {
  display: grid;
  grid-template-columns: 70px 110px 20px 60px 110px 20px 60px 110px;
  row-gap: 2px;
  align-items: center;
}
.mightyprotectors.sheet.item .sheet-body .attack-grid input[type="number"] {
  width: 30px;
}
.mightyprotectors.sheet.item .sheet-body .attack-grid input[type="text"] {
  width: 100px;
}
.mightyprotectors.sheet.item .sheet-body .attack-cost-grid {
  display: grid;
  grid-template-columns: 90px 40px 20px 120px 200px;
  row-gap: 2px;
  align-items: center;
}
.mightyprotectors.sheet.item .sheet-body .attack-cost-grid input[type="number"] {
  width: 30px;
}
.mightyprotectors.sheet.item .sheet-body .attack-cost-grid input[type="text"] {
  width: 100px;
}
.mightyprotectors.sheet.item .sheet-body .veh-attack-cost-grid {
  display: grid;
  grid-template-columns: 90px 40px 55px 150px 20px 120px 150px;
  row-gap: 2px;
  align-items: center;
}
.mightyprotectors.sheet.item .sheet-body .veh-attack-cost-grid input[type="number"] {
  width: 30px;
}
.mightyprotectors.sheet.item .sheet-body .veh-attack-cost-grid input[type="text"] {
  width: 100px;
}
.mightyprotectors.sheet.item .sheet-body .bonus-list {
  align-items: center;
  border: solid;
  border-radius: 5px;
  padding: 2px 8px 2px 8px;
  border-width: 1px;
}
.mightyprotectors.sheet.item .sheet-body .bonus-side-by-side {
  display: grid;
  grid-template-columns: 50% 50%;
}
.mightyprotectors.sheet.item .sheet-body .bonus-side-by-side .bonus-grid {
  display: grid;
  grid-template-columns: 65px 155px 55px;
  row-gap: 2px;
  align-items: center;
}
.mightyprotectors.sheet.item .sheet-body .bonus-side-by-side .bonus-grid .header-text {
  text-decoration: underline;
}
.mightyprotectors.sheet.item .sheet-body .bonus-side-by-side .bonus-grid .item-header {
  background-color: lightgray;
}
.mightyprotectors.sheet.character {
  /*  Sheet header */
  /* sheet navigation */
  /* sheet body */
}
.mightyprotectors.sheet.character form {
  display: flex;
  flex-direction: column;
}
.mightyprotectors.sheet.character .rollable {
  cursor: pointer;
  text-shadow: 0 0 4px steelblue;
}
.mightyprotectors.sheet.character .rollable:hover {
  text-shadow: 0 0 8px red;
  color: black;
}
.mightyprotectors.sheet.character .roll-image {
  height: 24px;
  background-size: 24px;
  width: 24px;
}
.mightyprotectors.sheet.character .roll-image:hover {
  border: 0px;
  background-image: url("../../icons/svg/d20-black.svg") !important;
}
.mightyprotectors.sheet.character .important-stat {
  font-weight: bold;
}
.mightyprotectors.sheet.character .sheet-header {
  flex: 0;
  margin-bottom: 5px;
}
.mightyprotectors.sheet.character .sheet-header .charimage {
  height: 100px;
  width: 100px;
}
.mightyprotectors.sheet.character .sheet-header .item-subtitle {
  margin-left: 8px;
}
.mightyprotectors.sheet.character .sheet-header .item-subtitle .item-type {
  font-size: 10px;
  line-height: 14px;
}
.mightyprotectors.sheet.character .sheet-header .header-stats {
  font-size: 14px;
  margin-left: 12px;
  display: grid;
  grid-template-columns: 70px 110px 110px 70px 85px 95px 100px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-header .header-stats input[type="number"] {
  width: 30px;
  text-align: center;
}
.mightyprotectors.sheet.character .sheet-header .header-stats .init-text {
  width: 60px;
}
.mightyprotectors.sheet.character .sheet-header .header-stats .type-indicator {
  font-size: 11px;
}
.mightyprotectors.sheet.character .sheet-navigation {
  height: 20px;
  flex: 0;
  margin-bottom: 10px;
}
.mightyprotectors.sheet.character .sheet-navigation .item {
  height: 20px;
  border-bottom: 3px solid #b5b3a4;
}
.mightyprotectors.sheet.character .sheet-navigation .item.active {
  text-shadow: 0 0 10px #3a2aa6;
  border-bottom: 3px solid #44191A;
}
.mightyprotectors.sheet.character .sheet-navigation a:hover {
  text-shadow: 0 0 10px #3a2aa6;
  border-bottom: 3px solid #44191A;
}
.mightyprotectors.sheet.character .sheet-navigation .tabs {
  height: 50px;
}
.mightyprotectors.sheet.character .sheet-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mightyprotectors.sheet.character .sheet-body .tab {
  height: 100%;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid {
  display: grid;
  grid-template-columns: 190px auto;
  /* abilities */
  /* vehcile systems */
  /* attacks */
  /* protection */
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .bc-grid {
  display: grid;
  grid-template-columns: 40px 30px 40px auto;
  align-items: center;
  row-gap: 1px;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .bc-grid input[type="number"] {
  width: 30px;
  text-align: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehicle-detail-grid {
  display: grid;
  grid-template-columns: 60px 180px 20px 60px 180px 10px 60px;
  align-items: center;
  row-gap: 1px;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehicle-detail-grid input[type="text"] {
  width: 170px;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehscale-container {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehscale-container input[type="number"] {
  width: 40px;
  text-align: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .travelrates-container {
  display: grid;
  grid-template-columns: 100px auto auto;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .bc-grid-vehicle {
  display: grid;
  grid-template-columns: 40px 40px auto;
  align-items: center;
  row-gap: 1px;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .cp-grid {
  display: grid;
  grid-template-columns: 40px 110px;
  align-items: center;
  row-gap: 1px;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .cp-grid input[type="number"] {
  width: 30px;
  text-align: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .cp-grid .divider-top {
  border-top: 1px solid black;
  margin-top: 1px;
  margin-bottom: 1px;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .cp-grid .totalcp {
  width: 28px;
  text-align: center;
  padding-left: 3px;
  padding-right: 3px;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .other-grid {
  display: grid;
  grid-template-columns: 70px 90px;
  padding-top: 20px;
  align-items: center;
  row-gap: 1px;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .other-grid input[type="text"] {
  width: 60px;
  text-align: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .other-grid input[type="number"] {
  width: 40px;
  text-align: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .veh-other-grid {
  display: grid;
  grid-template-columns: 100px 60px;
  padding-top: 20px;
  align-items: center;
  row-gap: 1px;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .veh-other-grid input[type="text"] {
  width: 60px;
  text-align: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .veh-other-grid input[type="number"] {
  width: 40px;
  text-align: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .header-text {
  text-decoration: underline;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .item-header {
  background-color: lightgray;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .item-list {
  align-items: center;
  border: solid;
  border-radius: 5px;
  padding: 2px 8px 2px 8px;
  border-width: 1px;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .abilitycol1 {
  flex: 0 0 50px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .abilitycol2 {
  flex: 0 0 250px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .abilitycol3 {
  flex: 0 0 100px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .abilitycol4 {
  flex: 0 0 50px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .abilitycol5 {
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehsyscol1 {
  flex: 0 0 40px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehsyscol2 {
  flex: 0 0 35px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehsyscol3 {
  flex: 0 0 50px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehsyscol4 {
  flex: 0 0 35px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehsyscol5 {
  flex: 0 0 40px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehsyscol5 .inline-editbox {
  border-width: 1px;
  height: 18px;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehsyscol6 {
  flex: 0 0 40px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehsyscol7 {
  flex: 0 0 210px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehsyscol8 {
  flex: 0 0 70px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .vehsyscol9 {
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .remaining {
  font-style: italic;
  font-size: smaller;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .attackcol1 {
  flex: 0 0 35px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .attackcol2 {
  flex: 0 0 150px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .attackcol3 {
  flex: 0 0 50px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .attackcol4 {
  flex: 0 0 90px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .attackcol5 {
  flex: 0 0 90px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .attackcol6 {
  flex: 0 0 50px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .attackcol7 {
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .protectcol1 {
  flex: 0 0 140px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .protectcol-middle {
  flex: 0 0 55px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .protectcol-other {
  flex: 0 0 120px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .protectcol-controls {
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .movementcol-controls {
  flex: 0 0 auto;
  margin-left: auto;
}
.mightyprotectors.sheet.character .sheet-body .stats .stat-outer-grid .divider-top {
  border-top: 1px solid black;
  margin-top: 1px;
  margin-bottom: 1px;
}
.mightyprotectors.sheet.character .sheet-body .stats .caps-container {
  display: flex;
  justify-content: center;
}
.mightyprotectors.sheet.character .sheet-body .stats .caps-container .caps {
  display: flex;
  flex-direction: row;
  gap: 10px;
  /* position: absolute;
                bottom: 0;    */
}
.mightyprotectors.sheet.character .sheet-body .bio {
  display: grid;
  grid-template-columns: 430px 250px;
  row-gap: 1px;
  column-gap: 10px;
}
.mightyprotectors.sheet.character .sheet-body .bio .bio-grid {
  display: grid;
  grid-template-columns: 80px 120px 20px 80px 120px;
  align-items: center;
  row-gap: 1px;
}
.mightyprotectors.sheet.character .sheet-body .bio .bio-grid input[type="number"] {
  width: 80px;
}
.mightyprotectors.sheet.character .sheet-body .bio .backgrounds-grid {
  display: grid;
  row-gap: 1px;
}
.mightyprotectors.sheet.character .sheet-body .bio .backgrounds-grid .item-list {
  align-items: center;
  border: solid;
  border-radius: 5px;
  padding: 2px 8px 2px 8px;
  border-width: 1px;
}
.mightyprotectors.sheet.character .sheet-body .bio .backgrounds-grid .header-text {
  text-decoration: underline;
}
.mightyprotectors.sheet.character .sheet-body .bio .backgrounds-grid .item-header {
  background-color: lightgray;
}
.mightyprotectors.sheet.character .sheet-body .bio .backgrounds-grid .background-col {
  flex: 0 0 180px;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .bio .backgrounds-grid .background-col-controls {
  flex: 0 0 auto;
  align-items: center;
}
.mightyprotectors.sheet.character .sheet-body .story .editor {
  height: 90%;
}