/*-------------------------------------------*/
/*------------- SWD6 Main CSS----------------*/
/*-------------------------------------------*/
.charsheet {
    background-image: url(https://cdn.pixabay.com/photo/2015/09/29/15/12/stars-964022_960_720.png); /*black space with tiny white stars*/
    background-color: black;
    background-repeat: repeat;
    color:white;
}

.charsheet .sheet-version::after {
    content: '2.31';
}

.charsheet label, h1, h2, h3{
    color:white;
}

.charsheet table{
    border-collapse:separate;
    border-spacing:4px;
}

.charsheet textarea{
    resize:none;
}

.charsheet .sheet-toppad{
    padding:2px;
}

.charsheet .sheet-section{
    border-top: 5px dotted white;
    padding:10px;
    width: 100%;
}

.charsheet .sheet-shipinfo span {
    display: inline-block;
    margin: 5px 10px 5px 10px;
}

.charsheet .sheet-flex-box{
    display: flex;
}
.charsheet .sheet-flex-col{
    flex: 1;
}

.charsheet input[type=number].sheet-pipnumber{
    width:33px;
}

.charsheet input[type=number].sheet-smallnumber{
    width:40px;
}

.charsheet input[type=number].sheet-smallshortnumber{
    width:40px;
    padding-top:2px;
    padding-bottom:2px;
    display: inline-block;
    float:right;
}
.charsheet input[type=number].sheet-shortnumber{
    padding-top:2px;
    padding-bottom:2px;
}

.charsheet input[type=number].sheet-mediumnumber{
    width:60px;
}

.charsheet input[type=number].sheet-credits,
.charsheet span.sheet-credits {
    width: 80px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.charsheet input[type=text].sheet-smalltext{
    width:60px;
    margin:0px;
}

.charsheet input[type=text].sheet-mediumtext{
    width:80px;
    margin:0px;
}

.charsheet input[type=text].sheet-shorttext{
    padding-top:2px;
    padding-bottom:2px;
}

.charsheet input[type=text].sheet-skilltext{
    width:115px;
    padding:2px;
    margin-left:3px;
}

.charsheet .sheet-right{
    float:right;
}

.charsheet .sheet-left{
    float:left;
}

.charsheet .sheet-bold{
    font-size: 12pt;
    margin-bottom: 10px;
}

.charsheet span.sheet-num {
    background: white;
    color: black;
    border-radius: 2px;
    padding: 4px;
    margin: 5px;
    height: 28px;
    width: 50px;
}


.charsheet .sheet-tdborder{
    border: 2px solid white;
    vertical-align:top;
    width:330px;
    padding:5px;
    margin: 5px;
}

.charsheet .sheet-rightmargin{
    margin-right:0px;
}

.charsheet select.sheet-smallselect{
    width:60px;
    height:25px;
    padding-top:2px;
    padding-bottom:2px;
    margin:0px;
    display: inline-block;
    float:right;
}

.charsheet select.sheet-mediumselect{ /*Used for Wound levels dropdown select*/
    width:100px;
    height:25px;
    padding-top:2px;
    padding-bottom:2px;
    margin:0px;
    display: inline-block;
    float:right;
}

.charsheet label.sheet-areaLabel{
    margin:0px;
}
/*-----------------------------------------*/
/*----------Roll Buttons classes-----------*/

.charsheet button[type=roll].sheet-d6-dice::before {    /*new die changes die roller to d6*/
    font-family: 'dicefontd6',arial;
    content: 'F ';
    color: red;
}

.charsheet .sheet-forcebutton{
    width:90px;
    padding-right:5px;
}

.charsheet .sheet-redtxt{
    font-size: 8px;
    color: red;
    font-family: 'Arial';
}


/* writing the letter 't' with this font shows an impact icon signifying physical damage */
.charsheet button.sheet-physical{
    font-family: 'Pictos Custom';
}
/* writing the letter 'e' with this font shows e bolt icon signifying energy damage */
.charsheet button.sheet-energy{
    font-family: 'Pictos';
}

/*-------------------------------------------*/
/*-----Main Settings and hide classes--------*/
/*-----------(from GUMSHOE Official)---------*/

.charsheet .sheet-main-settings .sheet-input-row label {
    display: inline-block;
    width: auto;
}

.charsheet .sheet-main-settings .sheet-input-row input {
    margin-right: 30px;
}

.charsheet .sheet-main-settings .sheet-input-row select {
    width: 45%;
    margin-right: 15px;
}

input.sheet-main-options.sheet-options-flag + span,/*displays the cog icon*/
input[type=radio]:checked ~ .sheet-master-container input.sheet-options-flag + span {
    font-family: pictos;
    font-style: normal;
}

div.sheet-main-settings {
    display: none;
    position: relative;
    margin-left: 0;
}

input.sheet-options-flag:checked ~ div.sheet-main-settings {
    display: inline-block;
    width: 600px;
    height: 500px;
}

input.sheet-selector-switch ,
input.sheet-options-flag:checked ~ div.sheet-main-container {
    display: none;
}

/* all hide options using option menu checkboxes*/

.sheet-master-container .sheet-pc,
.sheet-master-container .sheet-npc,
.sheet-master-container .sheet-ship,
.sheet-master-container .sheet-shop-inventory {
    display: none;
}

input.sheet-toggle[value="0"] ~ .sheet-master-container .sheet-pc,
input.sheet-toggle[value="1"] ~ .sheet-master-container .sheet-npc,
input.sheet-toggle[value="2"] ~ .sheet-master-container .sheet-ship,
input.sheet-toggle[value="3"] ~ .sheet-master-container .sheet-shop-inventory {
    display: block;
}

input.sheet-toggle[value="2"] ~ .sheet-master-container .sheet-ship.sheet-shipblock{
    display: grid;
}
input.sheet-toggle[value="2"] ~ .sheet-master-container .sheet-ship.sheet-shipheader{
    display: flex;
}

input.sheet-background:checked  ~ .sheet-master-container .sheet-background-hide,
input.sheet-force:checked ~ .sheet-master-container .sheet-force-hide,
input.sheet-equipment:checked ~ .sheet-master-container .sheet-equipment-hide,
input.sheet-gmroll:checked ~ .sheet-master-container .sheet-gmroll-hide,
input.sheet-rollmod:checked ~ .sheet-master-container .sheet-rollmod,
input.sheet-rollmod:not(:checked) ~ .sheet-master-container .sheet-rollmod-no,
input.sheet-cptracker:checked ~ .sheet-master-container .sheet-cptracker-hide,
input.sheet-credittracker:checked ~ .sheet-master-container .sheet-credittracker-hide  {
    display: none;
}

/*-------------------------------------------*/
/*------------- General Styles---------------*/
/*------------(from GUMSHOE Official)--------*/

input[type=number]::-webkit-inner-spin-button {}

.sheet-master-container {
    position: relative;
    padding: 0;
    display: inline-block;
    background-image: url(https://cdn.pixabay.com/photo/2015/09/29/15/12/stars-964022_960_720.png); /*black space with tiny stars*/
    background-color: black;
    background-repeat: repeat;
}

.sheet-container {
    padding: 5px;
    margin-left: -25px;
    position: relative;
}

.sheet-main-container {
    display: inline-block;
    padding-top: 75px;
    margin-left: 0;
}

/*-------------------------------------------*/
/*------------- Options Toggles--------------*/
/*-----------(from GUMSHOE Official)---------*/

input.sheet-options-flag,
input.sheet-options-flag + span {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 15px;
    height: 15px;
}

input.sheet-options-flag {
    z-index: 99;
    opacity: 0;
}

input.sheet-options-flag + span {
    margin-top: 0px;
    display: none;
    white-space: nowrap;
    line-height: 15px;
    font-size: 17px;
    color: white;
    cursor: pointer;
}

input.sheet-options-flag.sheet-main-options {
    width: 30px;
    height: 30px;
    top: 20px;
    left: 20px;
    z-index: 3;
}

input.sheet-options-flag.sheet-main-options + span {
    width: 30px;
    height: 30px;
    top: 20px;
    left: 20px;
    font-size: 34px;
    z-index: 2;
    line-height: 30px;
    opacity: .5;
    display: block;
}

input.sheet-options-flag.sheet-main-options:hover + span {
    opacity: 1;
}

input.sheet-options-flag:checked + span {
    color: white;
    display: block;
}

input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-content .sheet-options,
input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-content .sheet-options-flag:checked ~ .sheet-display  {
    display: none;
}

input.sheet-selector-switch:checked ~ .sheet-master-container .sheet-content .sheet-options-flag:checked ~ .sheet-options {
    display: block;
}


/*-------------------------------------------*/
/*------------- Ship Section-----------------*/

div.sheet-ship .sheet-wborder{
    border: 2px solid white;
    padding: 5px;
}

div.sheet-shipheader{
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
}

div.sheet-shipheader span:nth-child(1) input[type="text"]{
    width: 300px;
}
div.sheet-shipheader span:nth-child(2) input[type="text"]{
    width: 150px;
}
div.sheet-shipheader span:nth-child(3) input[type="text"]{
    width: 150px;
}

div.sheet-shipblock{
    padding: 5px;
    display: grid;
    grid-template-columns: 3fr 7fr;
    grid-template-rows: 4fr 2fr 4fr 4fr 2fr 1fr;
    grid-template-areas: "price   perf      "
                         "price   sensor    "
                         "price   sensor    "
                         "price   hyperdrive"
                         "consume hyperdrive"
                         "consume dura      ";
    height: 550px;
}

div.sheet-shipblock div.sheet-price{
    grid-area: price;
    flex-flow: column nowrap;
    justify-content: space-between;
}

div.sheet-shipblock div.sheet-price span{
    width: 100px;
}

div.sheet-shipblock div.sheet-price div{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}

div.sheet-shipblock div.sheet-priceblock div.sheet-flex-row{
    flex-flow: row nowrap;
    justify-content: space-around;
    margin: 3px;
}


/* Performance */
div.sheet-shipblock div.sheet-perf{
    grid-area: perf;
    padding: 5px;
}

div.sheet-shipblock div.sheet-perf .sheet-medium,
div.sheet-shipblock div.sheet-sensor .sheet-medium,
div.sheet-shipblock div.sheet-hyperdrive input[type="text"],
div.sheet-shipblock div.sheet-price input[type="text"]{
    width: 80px;
}

div.sheet-shipblock div.sheet-perf label:not(.sheet-title){
    font-size: 0.8em;
}

div.sheet-shipblock div.sheet-perf div.sheet-perf,
div.sheet-shipblock div.sheet-perf-block div.sheet-flex-col{
    display: flex;
    flex-flow: column nowrap;
}
div.sheet-shipblock div.sheet-perf div.sheet-perf-block{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 5px;
}

/* Sensors */
div.sheet-shipblock div.sheet-sensor{
    grid-area: sensor;
    border: 2px solid white;
}

div.sheet-shipblock div.sheet-sensor div.sheet-flex-row{
    display: flex;
    flex-flow: row nowrap;
}


div.sheet-shipblock div.sheet-sensor div.sheet-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    border: 2px solid white;
    padding: 5px;
    width: 400px;
}

/* Hyperdrive */
div.sheet-shipblock div.sheet-hyperdrive{
    grid-area: hyperdrive;
    display: flex;
    flex-flow: column nowrap;
}

div.sheet-shipblock div.sheet-hyperdrive div{
    display: flex;
    flex-flow: row nowrap;
    font-size: 0.8em;
}

div.sheet-shipblock div.sheet-hyperdrive .sheet-crew{
    display: flex;
    flex-flow: column nowrap;
}

div.sheet-shipblock div.sheet-hyperdrive .sheet-hyper-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    border: 2px solid white;
    padding: 5px;
    width: 440px;
}

div.sheet-shipblock div.sheet-hyper-grid label{
    width: 110px;
}

div.sheet-shipblock div.sheet-hyperdrive input[type="text"]{
    height: 22px;
}


div.sheet-shipblock div.sheet-consume{
    grid-area: consume;
}

div.sheet-shipblock div.sheet-dura{
    grid-area: dura;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

div.sheet-shipblock div.sheet-dura label{
    width:80px;
}

div.sheet-section.sheet-ship div.sheet-other{
    margin-bottom: 10px;
}


/*-------------------------------------------*/
/*------------- Roll Templates---------------*/


/* new */

/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-swd6 {
  margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-swd6 {
  margin-left: -7px;
}

.sheet-rolltemplate-swd6 .sheet-container {
  border: 3px solid black;
  border-radius: 3px;
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-swd6 .sheet-header {
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
  text-align: left;
  text-transform: capitalize;
  padding: 5px;
  border-bottom: 2px solid black;
}
.sheet-rolltemplate-swd6 .sheet-name {
  font-size:1.2em;
  font-weight: bold;
}

.sheet-rolltemplate-swd6 .sheet-subtitle {
  font-size:.9em;
}

/* example colors */
.sheet-rolltemplate-swd6 .sheet-container {
  /* this is the default color */
  --header-bg-color: #a83521;
  --header-text-color: #FFF;
}

/* alt template colors */
.sheet-rolltemplate-swd6 .sheet-container.sheet-color-green {
  --header-bg-color: #008000;
}rgba(204, 0, 0,1)
.sheet-rolltemplate-swd6 .sheet-container.sheet-color-red {
  --header-bg-color: rgba(204, 0, 0,1);
}
.sheet-rolltemplate-swd6 .sheet-container.sheet-color-black {
  --header-bg-color: #000;
}
.sheet-rolltemplate-swd6 .sheet-container.sheet-color-purple {
  --header-bg-color: rgba(112,32,130,1);
}
.sheet-rolltemplate-swd6 .sheet-container.sheet-color-white {
  --header-bg-color: #FFF;
  --header-text-color: #000;
}

/* Allprops part */
.sheet-rolltemplate-swd6 .sheet-content {
  display: grid;
  background: #FFF;
  /* Header formatting - modify the column layout below */
  grid-template-columns: auto auto;
  /* Line height to match default roll template */
  line-height:1.4em;
}
.sheet-rolltemplate-swd6 .sheet-content > div {
  padding: 5px;
}

/* Left column */
.sheet-rolltemplate-swd6 .sheet-content .sheet-key {
  font-weight: bold;
  padding-right: 10px;
  text-align: right;
}

/* Empty rule, use this if you want to change the right column 
.sheet-rolltemplate-swd6 .sheet-value {
}
*/

/* Make even-numbered rows grey */
.sheet-rolltemplate-swd6 .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-swd6 .sheet-content :nth-child(4n) {
  background:#EEE;
}

/* Description field */
.sheet-rolltemplate-swd6 .sheet-desc {
  grid-column: span 2;
  padding: 5px;
  text-align: center;
}


/* old */

/* ----------- BLUE -----------*/
.sheet-rolltemplate-blue table {
 width:100%;
 background-color:white;
 border:1px solid rgba(51, 51, 255,1);
}
.sheet-rolltemplate-blue caption {
 background-color:rgba(51, 51, 255,1);
 color:white;
 font-family:"Helvetica Neue",Helvetica,sans-serif;
 font-weight:600;
 text-align:center;
 font-size:1.1em;
 padding:5px;
}
.sheet-rolltemplate-blue td {
 padding:5px;
 line-height:1.4em;
 vertical-align:top;
}
.sheet-rolltemplate-blue td:first-child {
 font-weight:bold;
 text-align:right;
 min-width:50px;
 padding-right:10px;
}
.sheet-rolltemplate-blue tr:nth-child(even) {
 background-color:#eee;
}
/* ----------- GREEN -----------*/
.sheet-rolltemplate-green table {
 width:100%;
 background-color:white;
 border:1px solid rgba(0, 153, 51,1);
}
.sheet-rolltemplate-green caption {
 background-color:rgba(0, 153, 51,1);
 color:white;
 font-family:"Helvetica Neue",Helvetica,sans-serif;
 font-weight:600;
 text-align:center;
 font-size:1.1em;
 padding:5px;
}
.sheet-rolltemplate-green td {
 padding:5px;
 line-height:1.4em;
 vertical-align:top;
}
.sheet-rolltemplate-green td:first-child {
 font-weight:bold;
 text-align:right;
 min-width:50px;
 padding-right:10px;
}
.sheet-rolltemplate-green tr:nth-child(even) {
 background-color:#eee;
}
/* ----------- RED -----------*/
.sheet-rolltemplate-red table {
 width:100%;
 background-color:white;
 border:1px solid rgba(204, 0, 0,1);
}
.sheet-rolltemplate-red caption {
 background-color:rgba(204, 0, 0,1);
 color:white;
 font-family:"Helvetica Neue",Helvetica,sans-serif;
 font-weight:600;
 text-align:center;
 font-size:1.1em;
 padding:5px;
}
.sheet-rolltemplate-red td {
 padding:5px;
 line-height:1.4em;
 vertical-align:top;
}
.sheet-rolltemplate-red td:first-child {
 font-weight:bold;
 text-align:right;
 min-width:50px;
 padding-right:10px;
}
.sheet-rolltemplate-red tr:nth-child(even) {
 background-color:#eee;;
}
/* ----------- BLACK -----------*/
.sheet-rolltemplate-black table {
 width:100%;
 background-color:white;
 border:1px solid rgba(0, 0, 0,1);
}
.sheet-rolltemplate-black caption {
 background-color:rgba(0, 0, 0,1);
 color:white;
 font-family:"Helvetica Neue",Helvetica,sans-serif;
 font-weight:600;
 text-align:center;
 font-size:1.1em;
 padding:5px;
}
.sheet-rolltemplate-black td {
 padding:5px;
 line-height:1.4em;
 vertical-align:top;
}
.sheet-rolltemplate-black td:first-child {
 font-weight:bold;
 text-align:right;
 min-width:50px;
 padding-right:10px;
}
.sheet-rolltemplate-black tr:nth-child(even) {
 background-color:#eee;
}