* {
    box-sizing: border-box;
	
}
.sheet-noclick{
  pointer-events: none;  
}
.ui-dialog .charsheet button[type=roll]:before {
    content: "";
}
.ui-dialog .button[type=roll].sheet-blank-button::before {
  content: '';
  content: "";
}

 input.button[type=roll].sheet-blank-button{
	 background:transparent; z-index:5; border:none;
	 visibility:hidden;
 }
    /*  === === ===     === === === */
.charsheet h1, .charsheet  h2, .charsheet h4{
	color: silver;
	text-shadow:0px 0px 0.5em black;
}
 .charsheet h3 {
	color: white;
	text-shadow:0px 0px 0.5em black;
	cursor: pointer;
}
.charsheet h3:hover {
	color:orange;
}
.sheet-slant .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: blue;
  border: 2px dashed red;
  border-radius: 5px;
  color: yellow;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
	bottom: 100%;
  left: 50%;
  margin-left: -60px;
  -webkit-transform: skew(45deg); 
  -ms-transform: skew(45deg);
  transform: skew(45deg);
}

.sheet-slant:hover .tooltiptext {
  visibility: visible;
}
.charsheet .sheet-headertitle{
    font-family: "contail One", monospace;
    font-size:24px; 
    color:silver; 
	text-align: center;
	width: 840px;
}
.charsheet {
    background-color: #2c5054; /*#bdd2f7;
    background: linear-gradient(75deg, rgba(254,252,234,.5) 25%,rgba(44, 80, 84, 0.95) 90%);*/
    font-size: 10px; /*mostly labels. Does not handle inputs.*/
}
.charsheet .sheet-headertitle:hover{
    font-family: "contail One", monospace;
    text-shadow: 0px 0px 10px #ffd700; 
    color:gold; 
	text-align: center;
}



.sheet-header-ribbon {
	margin-bottom:5px; text-indent:000px; text-align: center; /*background:rgba(186,31,25,.95); border-radius:14px;*/
	min-width: 840px; 
	
}
.sheet-flexed {
	display: flex; 
	flex-direction: row; 
	flex-wrap: nowrap; 
	justify-content: start;
	margin-left: 20px;
}
input.sheet-tab::before {
    content: attr(title);
    
    color:white;
    text-shadow:0px 0px 0.5em black;

    text-align: center;
    display: inline-block;
    
    background: #fff;
    background: -moz-linear-gradient(to top, #fff, #000, #fff);
    background: -webkit-linear-gradient(to top, #fff, #000, #fff);
    background: -ms-linear-gradient(to top, #fff, #000, #fff);
    background: -o-linear-gradient(to top, #fff, #000, #fff);
    background: linear-gradient(to top, #fff, #000, #fff);
    
    width: 110px;
    height: 20px;
    font-size: 14px;
    font-weight:700;
    border-radius: 15px 15px 15px 15px;
    border:1px solid black;
}

input.sheet-tab:checked::before {
    background: #dcdcdc;
    background: -moz-linear-gradient(to top, #b30000, #000, #b30000);
    background: -webkit-linear-gradient(to top, #b30000, #000, #b30000);
    background: -ms-linear-gradient(to top, #b30000, #000, #b30000);
    background: -o-linear-gradient(to top, #b30000, #000, #b30000);
    background: linear-gradient(to top, #b30000, #000, #b30000);
    /* border-bottom-color: #fff; */
    text-shadow:0px 0px 0.5em black,0px 0px 0.5em black;
}

input.sheet-tab {
    width: 100px;
    height: 20px;
    position: relative;
    left: 6px; 
    margin: 2px 2px 15px 2px;
    cursor: pointer;
    z-index: 4;
    border-radius: 5px 5px 5px 5px;
}
input.sheet-tab:not(:first-child)::before {
    border-left: none;
}
.none {
	display: none;
}

div.sheet-attributes {
	display: flex; 
	flex-direction: row; 
	flex-wrap: nowrap; 
	justify-content: space-evenly;
	margin-left: 20px;
	margin-right: 20px;
}

div.sheet-slant {
  background: #4682b4;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  /*z-index: -1; */
  color: white;
  height:15px;
  margin-bottom: 5px;
}    
label.sheet-slant {
/*  background: transparent; */
  -webkit-transform: skew(45deg);
  -ms-transform: skew(45deg);
  transform: skew(45deg);
  z-index: -1;
  font-family: "Contrail One", cursive;
  color: white;
  padding-left:6px;
}
 	
	.sheet-roll-notice:hover {
	 color:red;
}   
div.sheet-slant2 {
  background: black;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}  
.sheet-border {
 margin-bottom:5px; border-radius:5px; box-shadow: inset 0px 0px 10px silver, inset 0px 0px 8px silver,inset 0px 0px 4px black;
}
.sheet-circle {
  background:grey;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  padding: 0px;
  /* background:#4682b4; */
  border: 1px solid white;
  color:white;
  text-align: right;
  font: 12px Arial, sans-serif;
  margin:0px;
  cursor:pointer;
}

input[type="number"].sheet-circle{
	font-size: 16px;
	text-align:center;
	cursor:pointer;
}

input[type="number"].sheet-circle:out-of-range{
	background:red;
}


/*  For the AC emblem */


div.shield {
  height: 50px;
  width: 50px;
  margin-left: -10px;
  margin-top:10px;
  margin-bottom:10px;
  /*border: 10px solid; */
  border-radius: 50% 50% 50% 50% / 12% 12% 88% 88%;
  background-color: silver;
  opacity:50%
}


    /*  === === ===     === === === */
div.sheet-tab1, div.sheet-tab-content { 
    display: none; 
}


div.foci {
	display:grid; grid-template-columns: 40px 150px 40px 150px; grid-template-rows: auto;
}


.sheet-tab1:checked ~ div.sheet-tab1,
.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4,
input.sheet-tab5:checked ~ div.sheet-tab5,
input.sheet-tab6:checked ~ div.sheet-tab6,
input.sheet-tab7:checked ~ div.sheet-tab7 {
    display: block;
	width: 840px;
	margin-left:auto;
	margin-right:auto;
}
.sheet-show2:checked ~ .sheet-flexed,
.sheet-show1:checked ~ .sheet-flexed {
	display: flex; 
	flex-direction: row; 
	flex-wrap: nowrap; 
	justify-content: start;
	margin-left: 20px;
}
	div.Yellow-Ribbon{
	display: flex; 
	flex-direction: row;
	flex-wrap: nowarp; 
	width: 840px; 
	background-color: 4d4d00; 
	z-index: -1;
	border-radius:5px;
    box-shadow: inset 0px 0px 10px silver, inset 0px 0px 8px silver,inset 0px 0px 4px black;
    margin-right:auto;
    margin-left:auto;
}
div.top-ribbon{
	display: block; 
	width: 840px; 
	background-color: 4d4d00; 
	z-index: -1;
	border-radius:5px;
    box-shadow: inset 0px 0px 10px silver, inset 0px 0px 8px silver,inset 0px 0px 4px black;
    margin-right:auto;
    margin-left:auto;
}

div.sheet-tab-content {
    width: 840px;
    padding: 5px;
    
    background-color: black;
    background: linear-gradient(75deg, rgba(0,0,0,.3) 25%,rgba(44, 80, 84, 0.95) 90%);
    font-size: 10px;
    /*  rgba(179,0,0,.7) */
    border-radius:15px;
    box-shadow: inset 0px 0px 10px white, inset 0px 0px 8px white,inset 0px 0px 4px white;
    margin-right:auto;
    margin-left:auto;
}
    /* ===  === === */

.charsheet label,
.charsheet h5 {
    color:white;
    text-shadow:0px 0px 2px black,0px 0px 2px black,0px 0px 2px black;
}

div.sheet-center {
    padding-right:5%;
    background:black;
    padding-left:5%;
    border-radius:15px;
}

input[type="text"].sheet-attribword {
    background:transparent;
    width:120px;
    margin:0px;
    font-size:20px;
    font-weight:bold;
    color:white;
    border-top:none;
    border-left:none;
    border-right:none;
    box-shadow:none;
    text-shadow: 0px 0px 5px black;
    cursor:pointer;

}
input[type="text"].sheet-attribword2 {
    background:transparent;
    width:120px;
    margin:0px;
    font-size:18px;
    font-weight:normal;
    color:white;
    border-top:none;
    border-left:none;
    border-right:none;
    box-shadow:none;
    text-shadow: 0px 0px 5px gray;
    cursor:pointer;

}
input[type="text"].sheet-attribword2::placeholder,
input[type="text"].sheet-attribword::placeholder {
    color:#c8c8c8;
    font-weight:normal;
}
input[type="text"].sheet-attribword2:focus,
input[type="text"].sheet-attribword:focus {
    font-weight:normal;
}
input[type="text"].sheet-equipment {
    background:gray;
    width:150px;
    margin:0px;
    font-size:10px;
    font-weight:bold;
    color:white;
    cursor:pointer;
}
input[type="text"].sheet-skillword {
    background:gray;
    width:180px;
    margin:0px;
    font-size:14px;
    font-weight:bold;
    color:white;
    cursor:pointer;
}
input[type="text"].sheet-skillword2 {
    background:gray;
    width:150px;
    margin:0px;
    font-size:14px;
    font-weight:bold;
    color:white;
    cursor:pointer;
}

input[type="text"].sheet-skillword3 {
    background:gray;
    width:200px;
    margin:0px;
    font-size:14px;
    font-weight:bold;
    color:white;
    cursor:pointer;
}
input[type="text"].sheet-equipment::placeholder,
input[type="text"].sheet-skillword3::placeholder,
input[type="text"].sheet-skillword2::placeholder,
input[type="text"].sheet-skillword::placeholder {
    color:#c8c8c8;
    font-weight:normal;
}

input[type="number"].sheet-skillnumber {
    background:gray;
    width:30px;
    margin:0px;
    font-size:14px;
    font-weight:bold;
    color:white;
    text-shadow: 0px 0px 5px black;
    cursor:pointer;
}
input[type="number"] {
	  -moz-appearance: textfield;
        /* Firefox */
}
input[type="number"].sheet-skillnumber2::-webkit-inner-spin-button, 
input[type="number"].sheet-skillnumber2::-webkit-outer-spin-button,
input[type="number"].sheet-skillnumber::-webkit-inner-spin-button, 
input[type="number"].sheet-skillnumber::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
  -moz-appearance: textfield;
        /* Firefox */
}
input[type="number"].sheet-skillnumber2,
input[type="number"].sheet-skillnumber {
  -moz-appearance: textfield;
}
input[type="number"].sheet-skillnumber2 {
    background:black;
    width:30px;
    margin:0px;
    font-size:14px;
    font-weight:bold;
    color:white;
    text-shadow: 0px 0px 5px black;
    cursor:pointer;
}

input[type="number"].sheet-skillnumber3 {
    width:80px; 
    background:transparent;
    margin:0px;
    font-size:14px;
    font-weight:bold;
    color:white;
    text-shadow: 0px 0px 5px black, 0px 0px 5px black;
    border-left:none;
    border-right:none;
    border-top:none;
    border-bottom:1px solid white;
    cursor:pointer;
}
input[type="number"].sheet-skillnumber2:hover,
input[type="number"].sheet-skillnumber2:focus,
input[type="number"].sheet-skillnumber:hover,
input[type="number"].sheet-skillnumber:focus {
  -moz-appearance: number-input;
}
input[type="number"].sheet-attribnumber {
    background:transparent;
    width:30px;
    margin:0px;
    font-size:18px;
    font-weight:bold;
    color:white;
    text-shadow: 0px 0px 5px black;
    border:none;
    cursor:pointer;
}
input[type="number"].sheet-circle::-webkit-inner-spin-button,
input[type="number"].sheet-attribnumber::-webkit-inner-spin-button, 
input[type="number"].sheet-attribnumber::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} -moz-appearance:textfield;
}
input[type="number"].sheet-attribnumber {
    -moz-appearance:textfield;
}
input[type="number"].sheet-attribnumber:focus {
    background:red;
}
h4.sheet-header {
    color:white;
    text-shadow: 0px 0px 5px black,0px 0px 5px black;
}
div.sheet-hidden {
    display:none;
}
.sheet-border1 {
    border-radius:15px;
    border:1px solid green;
    box-shadow: inset 0px 0px 10px green;
}
.sheet-border2 {
    border-radius:15px;
    border:1px solid red;
    box-shadow: inset 0px 0px 10px red;
}
.sheet-border3 {
    border-radius:15px;
    border:1px solid blue;
    box-shadow: inset 0px 0px 10px blue;
}
.sheet-center {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
    /* ===  === === */
textarea.sheet-textarea {
    color: white;
    text-shadow:0px 0px 5px black;
    padding-top:2px; 
    padding-bottom:2px;
    height:45px; 
    width:260px;
    background:gray;
    cursor:pointer;
}
textarea.sheet-textarea2::placeholder,
textarea.sheet-textarea::placeholder {
    color:white;
    text-shadow:none;
    font-style:italic;
}
textarea.sheet-textarea2 {
    height:45px; 
    padding-top:2px; 
    padding-bottom:2px;
    width:400px;
    background:gray;
    color: white;
    text-shadow:0px 0px 5px black;
    cursor:pointer;
}
select.sheet-select {
    color:white;
    background:gray;
    width:120px;
    padding-top:0px;
    padding-bottom:0px;
    margin-top:2px;
    margin-bottom:0px;
}
select.sheet-select * {
    color:white;
    background: gray;
    text-shadow:none;
}
select.sheet-select1 {
    color:white;
    background:transparent;
    width:120px;
    padding-top:0px;
    padding-bottom:0px;
    margin-top:2px;
    margin-bottom:0px;
}
select.sheet-select1 * {
    color:black;
    background: gray;
}
    /* ===  === === */

/*  === My Buttons  === */
/* ======== Sheet btn========*/
.sheet-btn button[type="roll"]:before,
.sheet-btn:before  {
    content: ""!important;
    display: none;
    border:none;
}
.sheet-btn button[type="roll"],
.sheet-btn {
    display: block;
    background: blue;
    border-radius: 5px;
    height: 20px;
    width: 44px;
    margin: 0;
    background: radial-gradient(circle at 20px 20px, gray, #000);
    border:none;
    box-shadow: 0px 0px 5px gray;
}
.sheet-btn button[type="roll"]:hover,
.sheet-btn:hover  {
    background: radial-gradient(circle at 10px 10px, gray, #000);
}

.sheet-btn button[type="roll"]:active,
.sheet-btn:active  {
    background: radial-gradient(circle at 20px 20px, #000, gray);
}
    /**/
/* ======== Sheet msgbtn========*/
.sheet-msgbtn button[type="roll"]:before,
.sheet-msgbtn:before  {
    content: ""!important;
    display: none;
    border:none;
}
.sheet-msgbtn button[type="roll"],
.sheet-msgbtn {
    display: block;
    background: blue;
    border-radius: 5px;
    height: 44px;
    width: 44px;
    margin: 0;
    background: radial-gradient(circle at 30px 30px, yellow, #000);
    border:none;
    box-shadow: 0px 0px 5px gray;
}
.sheet-msgbtn button[type="roll"]:hover,
.sheet-msgbtn:hover  {
    background: radial-gradient(circle at 10px 10px, yellow, #000);
}

.sheet-msgbtn button[type="roll"]:active,
.sheet-msgbtn:active  {
    background: radial-gradient(circle at 20px 20px, #000, yellow);
}
    /**/
    
.sheet-button button[type="roll"]:before,
.sheet-button:before  {
    content: ""!important;
    display: none;
    border:none;
}
.sheet-button button[type="roll"],
.sheet-button {
    width:80px;
    height:28px;
    
    display: inline-block;
    
    cursor: pointer;
    
    background: transparent;
    border: 4px outset gray;
    border-radius: 4px;
    
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom:4px;
    margin: 0;

    text-align: left;
    vertical-align: middle;
    font-weight: 700;
    font-size: 1.3em!important;
    
    color: white; 
    text-shadow: 0px 0px 5px black;
    
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.sheet-button button[type="roll"]:hover,
.sheet-button:hover  {
    color: white;
    border: inset 4px gray;
    background: transparent;
    
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 1px;
    padding-bottom: 1px;
    margin: 0;
    
    text-shadow: 0px 0px 0.5em black;
}

.sheet-button button[type="roll"]:active,
.sheet-button:active  {
    background: radial-gradient(circle at 20px 20px, #000, gray);
}
/**/
.sheet-button2 button[type="roll"]:before,
.sheet-button2:before  {
    content: ""!important;
    display: none;
    border:none;
}
.sheet-button2 button[type="roll"],
.sheet-button2 {
    width:28px;
    height:28px;
    
    display: inline-block;
    
    cursor: pointer;
    
    background: transparent;
    border: 4px outset gray;
    border-radius: 4px;
    
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom:4px;
    margin: 0;

    text-align: left;
    vertical-align: middle;
    font-weight: 700;
    font-size: 1.3em!important;
    
    color: white; 
    text-shadow: 0px 0px 5px black;
    
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.sheet-button2 button[type="roll"]:hover,
.sheet-button2:hover  {
    color: white;
    border: inset 4px gray;
    background: transparent;
    
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 1px;
    padding-bottom: 1px;
    margin: 0;
    
    text-shadow: 0px 0px 0.5em black;
}
.img1{
    max-width:100px;
    max-height:100px;
    width: minmax(0px, 25px);
    height: minmax(0px, 25px);
	border:none;
}
.sheet-button2 button[type="roll"]:active,
.sheet-button2:active  {
    background: radial-gradient(circle at 20px 20px, #000, gray);
}
    /**/

/*========== sheet hiding ==========*/

input.sheet-hider:checked ~ div.sheet-hold
{
    display: none;
}

input.sheet-hidden {
    display: none;
}
    /* === Text and Number === */
.charsheet input {
    font-size:9px;
}
.charsheet input[type=text].sheet-smalltext{
    width:60px;
    height: 18px;
    margin:0px;
}
.charsheet input[type=text].sheet-shorttext{
    padding-top:2px;
    padding-bottom:2px;
}
.charsheet input[type=text].sheet-skilltext{
    width:200px;
    padding:2px;
    margin-left:3px;
}
.charsheet input[type=number].sheet-smallnumber{
    width:40px;
}
.charsheet input[type=number].sheet-smallshortnumber{
    font-size: 8pt;
    width:10px;
    padding-top:1px;
    padding-bottom:1px;
    display: inline-block;
    float:right;
}
.charsheet input[type=number].sheet-shortnumber{
    padding-top:2px;
    padding-bottom:2px;
}
    /* === Text area === */
.charsheet textarea{
    resize:vertical;
	height:450px;
}
    /* === general === */
.charsheet .sheet-right {
    float:right;
}
.charsheet .sheet-bold {
    margin-bottom: 10px;
}
    /* === label === */
.charsheet label.sheet-areaLabel{
    margin:5px;
}
    /* === background === */
.charsheet .sheet-border{
    border: 2px solid white;
    vertical-align:top;
    width:100%;
    padding: 2px;
    margin: 2px;
}

input:invalid {
  border: 2px solid red;
}



/* Roll Templates */

.sheet-rolltemplate-dscreen div.sheet-in {
    position: relative;
    padding: 7px;
    color: rgba(255,255,255,.57);
	color: bisque(.6);
    border: 10px solid transparent;
    border-image-source: url(http://i166.photobucket.com/albums/u108/Ninty_07/border2.png); 
    border-image-slice: 9;
    background: url(https://media.tenor.com/tFsFXTP0wkIAAAAC/full-moon.gif);
    background-size: 100% 100%; /*228px 143px; */
    background-repeat: no-repeat;
    box-shadow: 4px 10px silver;
    overflow: hidden;
    min-height: 200px;
    height:100%;
    width: 530px;
	width: 250px;
}
.sheet-rolltemplate-dscreen h1{
    font-size:16px;
    color: Bisque;
}
/* WWN from Jakob's example https://wiki.roll20.net/Building_Character_Sheets/Roll_Templates#Jakob.27s_Better_Default_Rolltemplate */
/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-WWN {
  margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-WWN {
  margin-left: -7px;
}

.sheet-rolltemplate-WWN .sheet-container {
  border: 1px solid;
  /* by default, the border is the same color as the header. You can change this here, e.g. to black */
  border-color: var(--header-bg-color);
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-WWN .sheet-header {
  background-color: var(--header-bg-color);
  /* change text-align to center to center the header text */
  text-align: left;
  color: var(--header-text-color);
  padding: 5px;
}
.sheet-rolltemplate-WWN .sheet-title {
  font-size:1.2em;
  font-weight:bold;
}
.sheet-rolltemplate-WWN .sheet-subtitle {
  font-size:.9em;
}

/* example colors */
.sheet-rolltemplate-WWN .sheet-container {
  /* this is the default color */
  --header-bg-color: rgba(112,32,130,1);/*purple*/
  --header-text-color: #FFF;/*white*/
}
.sheet-rolltemplate-WWN .sheet-container.sheet-color-red {
  --header-bg-color: #F00; /*red*/
}
.sheet-rolltemplate-WWN .sheet-container.sheet-color-green {
  --header-bg-color: #009933; /*green*/
  --header-text-color: #000;/*black*/
}
.sheet-rolltemplate-WWN .sheet-container.sheet-color-blue {
  --header-bg-color: #0066ff; /*blue*/
  /*--header-text-color: #F00; red*/
}
.sheet-rolltemplate-WWN .sheet-container.sheet-color-bisque {
  --header-bg-color: #ff981a; /*orangish bisque*/
  --header-text-color: #000; /*black*/
}
/* Allprops part */
.sheet-rolltemplate-WWN .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-WWN .sheet-content > div {
  padding: 5px;
}

/* Left column */
.sheet-rolltemplate-WWN .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-WWN .sheet-value {
}
*/

/* Make even-numbered rows grey */
.sheet-rolltemplate-WWN .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-WWN .sheet-content :nth-child(4n) {
  background:#9edee0; /*aquae light was eee*/
}

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