@import url('https://fonts.googleapis.com/css?family=Montserrat|Graduate|Courier+Prime|Roboto|Share+Tech+Mono&display=swap');
/* ORIGINAL */

.sheet-background-wrap{
    background-color: black;
    padding: 5px;
    min-width: 1128px;
}
.sheet-header-image{
    background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Weyland-Yutani.png?raw=true");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 25px;
    margin-bottom: 10px;
    margin-top: 2px;
}

.sheet-footer-text{
    display: block;
    text-align: center;
    font-family: 'Graduate';
    text-transform: uppercase;
    color: rgba(211, 211, 211, 1);
}

.sheet-grid-container {
    display: grid;
    background-color: transparent;
    border: 2px solid rgba(211, 211, 211, 1); /* LightGrey */
    border-radius: 0px;
    grid-gap: 10px;
    padding: 10px;
    text-align: center;
}

.sheet-contains-thirteen-columns {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.sheet-contains-four-columns {
    grid-template-columns: 20% 20% auto 25%;
    grid-gap: 0px;
    padding: 0px;
    text-align: left;
    border-color: transparent;
}

.sheet-roll-buttons{
    display: grid;
    grid-gap: 5px;
}

.sheet-alpha-buttons{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.sheet-beta-buttons{
    grid-template-columns: 1fr 1fr 1fr;
    margin: 5px 0px;
    
}
.sheet-gamma-buttons{
    grid-template-columns: 1fr 1fr;
}

.sheet-span-one-two {
    grid-column: 1 / 3;
}

.sheet-span-one-thru-three {
    grid-column: 1 / 4;
}

.sheet-span-one-thru-four {
    grid-column: 1 / 5;
}

.sheet-span-two-three {
    grid-column: 2 / 4;
}

.sheet-span-three-four {
    grid-column: 3 / 5;
}

.sheet-span-three-thru-five {
    grid-column: 3 / 6;
}

.sheet-span-four-five {
    grid-column: 4 / 6;
}

.sheet-span-four-thru-six {
    grid-column: 4 / 7;
}

.sheet-span-five-six {
    grid-column: 5 / 7;
}

.sheet-span-five-thru-nine {
    grid-column: 5 / 10;
}

.sheet-span-six-thru-eight {
    grid-column: 6 / 9;
}

.sheet-span-seven-eight {
    grid-column: 7 / 9;
}

.sheet-span-seven-thru-nine {
    grid-column: 7 / 10;
}

.sheet-span-eight-nine {
    grid-column: 8 / 10;
}

.sheet-span-nine-ten {
    grid-column: 9 / 11;
}

.sheet-span-nine-thru-eleven {
    grid-column: 9 / 12;
}

.sheet-span-ten-eleven {
    grid-column: 10 / 12;
}

.sheet-span-ten-thru-twelve {
    grid-column: 10 / 13;
}

.sheet-span-ten-thru-thirteen {
    grid-column: 10 / 14;
}

.sheet-span-eleven-thru-thirteen {
    grid-column: 11 / 14;
}

.sheet-span-twelve-thirteen {
    grid-column: 12 / 14;
}

.sheet-span-personal-agenda {
    grid-row: 1 / 3;
}

.sheet-span-talents {
    grid-row: 1 / 5;
}

.sheet-span-relationships {
    grid-row: 3 / 5;
}

.sheet-span-radiation {
    grid-row: 7 / 9;
}

.sheet-span-critical-injuries {
    grid-row: 9 / 11;
}

.sheet-span-gear {
    grid-row: 10 / 16;
}

.sheet-span-conditions {
    grid-row: 11 / 14;
}

.sheet-span-weapons {
    grid-row: 13 / 16;
}

.sheet-grid-item {
    background-color: rgba(204, 217, 207, 1);
    border: 1px solid rgba(211, 211, 211, 1); /* LightGrey */
    border-radius: 5px;
    padding: 5px;
    line-height: 24px;
    vertical-align: bottom;
}

.sheet-black-item {
    background-color: transparent;
    border: 1px solid transparent;
}

.sheet-what-padding {
    padding: 0px;
}

.sheet-weapon-item {
    padding: 0px;
    text-align: center;
    border: 1px solid rgba(204, 217, 207, 1);
    width: auto;
    border-radius: 0px;
    border-right: 1px dashed rgb(0, 139, 139); /* Dark Cyan #008b8b */
}

.sheet-weapon-item.sheet-range{
    padding: 0px 20px;
}

.sheet-weapon-item.sheet-type{
    border-right-width: 0px;
}



/* - - - - - - - - - - AUTO EXPAND TEXTAREAS - - - - - - - - - - */
.sheet-auto-expand {
	position: relative;
	cursor: text;
	word-wrap: break-word;
	min-height: 1em;
	border: 1px Dashed #bfbfbf;
	font-family: 'Courier Prime';
	font-family: 'Roboto';
    text-align: left;
	font-size: 0.9em;
    line-height: 1em;
    padding: 2px;    
}

.sheet-auto-expand span {
	visibility: hidden;
    white-space: pre-wrap;
	display: block;
    font-family: 
}

.sheet-auto-expand textarea {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	margin: 0;
	overflow: hidden;
	resize: none;
	height: 100%;
	width: 100%;
	display: block;
	box-sizing: border-box;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	padding: inherit;
	text-align: inherit;
	text-transform: inherit;
    
}

.sheet-textarea-margin-correct {
    margin: 6px 0px 0px 0px;
}

.sheet-dotted-line {
    height: 0px;
    border-bottom: 1px dashed rgba(0, 139, 139, 1); /* Dark Cyan #008b8b */
    padding: 0px;
    margin: 3px;
}

.sheet-span-relationships .sheet-dotted-line,
.sheet-span-critical-injuries .sheet-dotted-line{
    margin: 8px;
}

.sheet-teal-header {
    color: rgba(204, 217, 207, 1); /* Teal Varient */
    font-family: 'Graduate', cursive;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .1em;
}

button[type="roll"].sheet-button-skill, .sheet-medium-teal-header, .sheet-dark-teal-header{
    color: #008b8b; /* Dark Cyan #008b8b */
    font-family: 'Montserrat';
    text-transform: uppercase; 
    font-size: 10px;
    font-weight: bold;
}


.sheet-medium-teal-header {
    color: rgba(113, 142, 135, 1); /* Medium Teal #718e87 */
}

.sheet-dark-teal-header {
    color: rgba(0, 139, 139, 1); /* Dark Cyan #008b8b */
    font-weight: bold;
}
.sheet-vertical-adjust-one {
     margin-top: 5px;
}

.sheet-vertical-balance {
     margin-top: 12px;
}
 
.sheet-black-floating-header {
    background-color: rgba(0, 0, 0, 1); /* Black #000000 */
    border: 1px solid rgba(0, 0, 0, 1); /* Black #000000 */
    border-radius: 0px 20px 20px 0px;
    float: left;
    height: 1em;
    width: 80%;
    line-height: 1em;
    margin: -14px 15% 0px -7px;
    text-align: left;
    padding: 0px 0px 0px 5px;
    
}

.sheet-more-curves {
    border-radius: 20px 20px 20px 0px;
}

.sheet-black-header {
    background-color: rgba(0, 0, 0, 1); /* Black #000000 */
    border: 1px solid rgba(0, 0, 0, 1); /* Black #000000 */
    border-radius: 20px;
    width: 90%;
    height: 18px;
    margin: -18px 0px 0px -7px;
    padding: 0px 0px 0px 5px;
}

.sheet-mini-header {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: 'Montserrat';
    font-size: .75em;
    line-height: .75em;    
}

.sheet-bold {
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0px;
}

.sheet-align-left {
    text-align: left;
}
.sheet-align-right {
    text-align: right;
}

.sheet-float-left {
    float: left;
    margin-left: 0px;
}

.sheet-float-right {
    float: right;
    margin-right: 0px;
}
.sheet-condition-title {
    float: left;
    margin-left: 5px;
}
.sheet-relationship-title {
    float: left;
    margin-left: 5px;
}

.sheet-text-input, .sheet-select-input, input[type="number"].sheet-number-input{
    font-family: 'Courier Prime';
    font-family: 'Roboto';
    background: transparent;
}

.sheet-text-input {
    color: #000000;
    width: 99%;
    border: 1px solid transparent;
    padding: 3px;
}

.sheet-select-input{
    color: #555;
    width: 100%;
    height: 1.95em;
    padding: 3px;
    margin-bottom: 0px;
}

.sheet-relationship-input{
    width: 85%;
}

.sheet-seventy-seven-percent {
    width: 77%;
}

.sheet-make-it-shorter {
    width: 89%;
}

/* - - - - - Remove Number Spinner - - - - - */
input[type="number"].sheet-no-spin-input::-webkit-outer-spin-button, input[type="number"].sheet-number-input::-webkit-outer-spin-button,
input[type="number"].sheet-no-spin-input::-webkit-inner-spin-button, input[type="number"].sheet-number-input::-webkit-inner-spin-button, {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].sheet-no-spin-input, input[type="number"].sheet-number-input {
    -moz-appearance: textfield;
}

input[type="number"].sheet-no-spin-input {
    font-family: 'Courier Prime';
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    
    height: 1.5em;
    width: 1.5em;
    background-color: White;
    border: 1px solid White;
    margin: -1px -2px;
    padding: 3px 0px 0px 0px;
    
    border-radius: 50%;
    box-shadow: 1px 1px 7px rgba(0, 139, 139, 1), -1px -1px 7px rgba(0, 139, 139, 1), 1px 1px 10px white, -1px -1px 10px white;
}

input[type="number"].sheet-number-input {
    text-align: center;
    border: 1px solid rgb(204, 204, 204);
    padding: 3px;
}

input[type="number"].sheet-shorter-number {
    width: 22px;
}

input[type="number"].sheet-pool-number {
    font-size: 1.75em;
    font-weight: bold;
    height: 1.75em;
    width: 1.75em;
    background-color: white;
    border: 1px solid transparent;
    border-radius: 50%;
    text-align: center;    
    margin-left: -3px;
    box-shadow: 1px 1px 10px white, -1px -1px 10px white;
}

input[type="number"].sheet-low-visibility-number {
    color: #bfbfbf;
    font-size: 1.25em;
    font-weight: bold;
    height: 1.5em;
    width: 1.5em;
    background-color: transparent;
    border: 1px solid #bfbfbf;
    border-radius: 5px;
    text-align: center;
    margin-top: 1px;
    margin-left: 1px;
    box-shadow: none;
    padding: 0px;
}

.sheet-skinny-div {
    height: 18px;
}

/* ACTION BUTTONS FOR TABULAR SHEET */
button[type="action"].sheet-action-tab {
    width: 20%;
    height: 10px;
    background-color: transparent;
    border: 1px solid rgba(105, 105, 105, 0.33);
    border-radius: 5px;
    font-size: 12px;
    line-height: 12px;
    color: rgba(105, 105, 105, 0.33);
    padding: 0px 0px 2px 0px;
}

button[type="action"].sheet-action-tab:hover {
    color: #ffffff;
    background-color: #696969;
    border: 1px solid #696969;
}

button[type="action"].sheet-action-tab:active {
    color: #ffffff;
    background-color: #696969;
    border: 1px solid #696969;
}

button[type="action"].sheet-action-tab:focus {
    color: #ffffff;
    background-color: #696969;
    border: 1px solid #696969;
}

button[type="action"].sheet-tab-weapon {
    width: 15%;
}

/*  TABS  */
div.sheet-tab-content, div.sheet-box-under-the-bed { 
    display: none;
}

input.sheet-tab-one:checked ~ div.sheet-tab-one-contents,
input.sheet-tab-two:checked ~ div.sheet-tab-two-contents,
input.sheet-tab-three:checked ~ div.sheet-tab-three-contents,
input.sheet-tab-four:checked ~ div.sheet-tab-four-contents {
	display: block;
}

input.sheet-tab-alpha:checked ~ div.sheet-tab-alpha-contents,
input.sheet-tab-beta:checked ~ div.sheet-tab-beta-contents,
input.sheet-tab-gamma:checked ~ div.sheet-tab-gamma-contents,
input.sheet-tab-delta:checked ~ div.sheet-tab-delta-contents,
input.sheet-tab-epsilon:checked ~ div.sheet-tab-epsilon-contents,
input.sheet-tab-zeta:checked ~ div.sheet-tab-zeta-contents{
	display: block;
}

input.sheet-tab {
	opacity: 0;
    display: none;
}

/* CUSTOM CHECKBOXES FOR ALIEN RPG */

input.sheet-numbered-box {
    width: 16px;
    height: 16px;
    position: relative;
    top: 0px;
    left: 0px;
    margin: 0px;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
}

input.sheet-numbered-box + span::before {
    content: attr(title);
    color: #dcdcdc;
    border: solid 1px #f5f5f5;
    text-align: center;
    display: inline-block;
    background: #f5f5f5;
    
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: bold;
    margin-left: -14px;
    margin-right: 2px;
    padding: 0px 0px 0px 0px;
    line-height: 16px;
    box-shadow: 0px 0px 5px #008b8b;
}

input.sheet-condition + span::before {
    margin-right: 10px;     /* Indent the conditions on the right-hand side */
}

input.sheet-numbered-box:checked + span::before {
    color: #ffffff;
    background: #cc0000;
    border: solid 1px #cc0000;
    box-shadow: 0px 0px 10px #b30000;
}

input.sheet-grey-box:checked + span::before {
    color: #ffffff;
    background: #808080;
    border: solid 1px #808080;
    box-shadow: 0px 0px 10px #008b8b;
}

input.sheet-green-box:checked + span::before {
    color: #000000;
    background: #7cfc00;
    border: solid 1px #7cfc00;
    box-shadow: 0px 0px 10px #008000;
}

input.sheet-gold-box:checked + span::before {
    color: #000000;
    background: #ffd700;
    border: solid 1px #ffd700;
    box-shadow: 0px 0px 10px #ffd700;
}

input.sheet-letter-box {
    width: 28px;
    height: 14px;
    position: relative;
    top: 0px;
    left: 0px;
    margin: 0px;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
}

input.sheet-letter-box + span::before {
    content: attr(title);
    color: #dcdcdc;
    border: solid 1px #f5f5f5;
    text-align: center;
    display: inline-block;
    background: #f5f5f5;
    width: 28px;
    height: 14px;
    font-size: 9px;
    font-weight: bold;
    margin-left: -28px;
    margin-right: 2px;
    padding: 0px 0px 0px 0px;
    line-height: 14px;
    box-shadow: 0px 0px 5px #008b8b;
}

input.sheet-letter-box:checked + span::before {
    color: #ffffff;
    background: #808080;
    border: solid 1px #808080;
    box-shadow: 0px 0px 10px #008b8b;
}





/* WOOHOO BUTTONS */
button[type="roll"].sheet-button-alpha:before, button[type="roll"].sheet-button-skill:before, button[type="action"].sheet-action-modifier:before {
    content: ""!important;
    display: none;
    border: none;
    background-image: none;
    text-shadow: none;
}



button[type="roll"].sheet-button-skill {
    height: 14px;
    line-height: 14px;
    width: 60%;
    margin: 4px 1px;
    background-color: transparent;
    border: 1px solid rgb(204, 217, 207); /* Teal Varient */
    border-radius: 5px;
    background-image: none;
    display: inline;
    text-shadow: none;   
}

button[type="roll"].sheet-button-skill:hover {
    color: rgb(204, 217, 207); /* Teal Varient */
    background-color: rgba(0, 139, 139, 1); /* Dark Cyan #008b8b */
    border: 1px solid #008b8b;
    text-shadow: none;
}

button[type="roll"].sheet-button-skill:active {
    color: rgb(204, 217, 207); /* Teal Varient */
    background-color: #008b8b; /* Dark Cyan #008b8b */
    border: 1px solid #008b8b; /* Dark Cyan #008b8b */
    box-shadow: 0px 0px 10px #008b8b;
}

button[type="roll"].sheet-bigger-skill {
    width: 75%;
}

/* Attack button in weapon box */
button[type="roll"].sheet-smaller-skill {
    width: 16%;
    border: 1px solid #008b8b;   /* Gave it an outline as players were not realising it was a button */
}


button[type="roll"].sheet-button-alpha, button[type="roll"].sheet-button-beta, button[type="roll"].sheet-button-gamma{
    margin-top: 0px;
    margin-bottom: 0px;
    border: 1px solid #008b8b;
    width: inherit;
}

button[type="roll"].sheet-button-alpha {
   text-transform: lowercase;  /* Exception because common usage of 1d6 is more important than consistency with theme. */
}

button[type="roll"].sheet-button-skill:focus { 
    outline:0;
}

/* ROLL TEMPLATE STYLING */
.sheet-rolltemplate-alien .sheet-template-wrap {
    background-color: hsl(0, 0%, 22%);
    border: 1px solid #404040;
    border-radius: 5px;
    width: 100%;
    margin-left: -10px;
    padding: 5px;
}

.sheet-rolltemplate-alien .sheet-template-background {
    background: url(https://s3.amazonaws.com/files.d20.io/images/83147486/YCuEWUzaudOcg2mNHbiFCw/max.png?1559667169);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.sheet-rolltemplate-alien .sheet-template-grid {
    display: grid;
    grid-gap: 3px;
    background-color: transparent;
    padding: 3px;
    grid-template-columns: 15.75% 15.75% 15.75% 15.75% 15.75% 15.75%;
}

.sheet-rolltemplate-alien .sheet-template-grid-item {
    background-color: rgba(259, 259, 259, 0.05);
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 3px;
    text-align: center;
}

.sheet-rolltemplate-alien .sheet-template-span-six {
  grid-column: 1 / 7;
}

.sheet-rolltemplate-alien .sheet-template-span-left {
  grid-column: 1 / 3;
}

.sheet-rolltemplate-alien .sheet-template-span-center {
  grid-column: 3 / 5;
}

.sheet-rolltemplate-alien .sheet-template-span-right {
  grid-column: 5 / 7;
}

.sheet-rolltemplate-alien .sheet-template-span-one {
  grid-column: 1 / 2;
}

.sheet-rolltemplate-alien .sheet-template-span-two {
  grid-column: 2 / 3;
}

.sheet-rolltemplate-alien .sheet-template-span-three {
  grid-column: 3 / 4;
}

.sheet-rolltemplate-alien .sheet-template-span-four {
  grid-column: 4 / 5;
}

.sheet-rolltemplate-alien .sheet-template-span-five {
  grid-column: 5 / 6;
}

.sheet-rolltemplate-alien .sheet-template-span-shix {
  grid-column: 6 / 7;
}

.sheet-rolltemplate-alien .sheet-template-to-the-left {
    text-align: left;
}

.sheet-rolltemplate-alien .sheet-template-to-the-center {
    padding-left: 43%;
}

.sheet-rolltemplate-alien .inlinerollresult  {
    color: #000000;
    font-size: 1.9em;
    line-height: 35px;
    background-color: transparent;
    border: none;
    padding: 0px;
}
 
.sheet-rolltemplate-alien .inlinerollresult.fullcrit {
    color: #000000;
    border: none;
}
 
.sheet-rolltemplate-alien .inlinerollresult.fullfail {
	color: #000000;
    border: none;
}
 
.sheet-rolltemplate-alien .inlinerollresult.importantroll {
	color: #000000;
    border: none;
}

.sheet-rolltemplate-alien .sheet-template-base-between {
    height: 35px;
    width: 35px;
    background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Base-Between.png?raw=true");
    background-size: 100% 100%;
    
}

.sheet-rolltemplate-alien .sheet-template-base-success {
    height: 35px;
    width: 35px;
    background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Base-Success.png?raw=true");
    background-size: 100% 100%;
}

.sheet-rolltemplate-alien .sheet-template-stress-fail {
    height: 35px;
    width: 35px;
    background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Stress-Fail.png?raw=true");
    background-size: 100% 100%;
}

.sheet-rolltemplate-alien .sheet-template-stress-between {
    height: 35px;
    width: 35px;
    background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Stress-Between.png?raw=true");
    background-size: 100% 100%;
}

.sheet-rolltemplate-alien .sheet-template-stress-success {
    height: 35px;
    width: 35px;
    background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/Alien%20Roleplaying%20Game/Images/Stress-Success.png?raw=true");
    background-size: 100% 100%;
}

.sheet-rolltemplate-alien .sheet-template-yellow {
    height: 35px;
    width: 35px;
    background-color: #ffe600;
    border: none;
    border-radius: 5px;
    background-position: center;
}