/*
 COLORS
 =====================
 - Text: #000000
 - Title: #2c3e45
 - Subtitle: #8998a0
 - Table head: #2c3e45
 - Table body: #f1ebe3
 - Border: #000000
 - Quote background: #e2e6e9
 - Quote text: #68747c
*/

/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

*,
input,
select,
textarea,
p {
    font-family: 'Oswald';
    color: #000000;
}

p,
input,
label,
span,
textarea,
select,
table,
button,
h1,
h2 {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
}

input,
textarea,
select {
    border-color: #000000;
}

input {
    border: none;
    border-bottom: 2px dotted #000000;
}

label {
    line-height: 10px;
}

h1 {
    color: #2c3e45;
    font-size: 1.5rem;
    text-transform: uppercase;
    line-height: 1.5rem;
}

.sheet-input {
    display: flex;
    align-items: center;
}

.sheet-input-label {
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
}

.sheet-input-label span {
    text-transform: none;
    font-size: 0.9em;
}

div.sheet-tableHead,
fieldset.sheet-tableHead .sheet-fieldset,
.sheet-tableBody {
    display: flex;
}

table.sheet-table th,
table.sheet-table td,
div.sheet-tableHead > div,
fieldset.sheet-tableHead > .sheet-fieldset > div,
.sheet-tableBody > div {
    border: 1px solid #000000;
}

div.sheet-table .sheet-tableBody:not(:first-child) > div {
    border-top: none;
}

.sheet-tableBody > div:not(:first-child),
div.sheet-tableHead > div:not(:first-child),
fieldset.sheet-tableHead > .sheet-fieldset > div:not(:first-child) {
    border-left: none;
}

table.sheet-table thead th,
div.sheet-tableHead > div,
fieldset.sheet-tableHead > .sheet-fieldset > div{
    padding: 2px 5px;
    color: #fff;
    background: #2c3e45;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
}

table.sheet-table tbody tr:nth-child(even),
table.sheet-table tbody tr:nth-child(even) input,
div.sheet-table .repitem:nth-child(even) .sheet-tableBody > div,
div.sheet-table .repitem:nth-child(even) .sheet-tableBody input {
    background: #e2e6e9;
} 

/* Main canvas */
div.sheet-main {
  width: 840px; /* Defines the width and height of the sheet */
  height: 500px;
  background: white;
}

/* Header */
div.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

div.sheet-header > * {
    flex-shrink: 0;
    flex-grow: 0;
}

div.sheet-stars {
    width: 19%;
    height: 80px;
    background-image: url(https://raw.githubusercontent.com/anis/roll20-character-sheet-stars/main/images/stars.png);
    align-self: center;
    background-size: 120px 39px;
    background-repeat: no-repeat;
    background-position: center;
}

table.sheet-personnage-main,
div.sheet-personnage-genial,
div.sheet-personnage-problematique {
    width: 25%;
}

table.sheet-personnage-main td {
    text-align: right;
}

div.sheet-header input,
div.sheet-header select {
    width: auto;
    max-width: 100px;
}

div.sheet-header select {
    margin: 5px 0;
    height: 20px;
}

div.sheet-header textarea {
    resize: none;
    width: 100%;
    height: 55px;
}

/* Onglets */
div.sheet-onglets {
    margin-top: 5px;
    border-bottom: 3px solid #2c3e45;
}

div.sheet-onglets button {
    border: 1px solid #2c3e45;
    background: #e2e6e9;
    color: #68747c;
    padding: 2px 5px;
    font-weight: bold;
    border-bottom: none;
}

div.sheet-onglets button:hover {
    color: #fff;
    background: #8998a0;
}

.sheet-caracteristiques,
.sheet-competences,
.sheet-inventaire {
	display: none;
}

.sheet-ongletActif[value="caracteristiques"] ~ div.sheet-onglets button[name="act_caracteristiques"],
.sheet-ongletActif[value="competences"] ~ div.sheet-onglets button[name="act_competences"],
.sheet-ongletActif[value="inventaire"] ~ div.sheet-onglets button[name="act_inventaire"] {
	background: #2c3e45;
	color: #fff;
}

.sheet-ongletActif[value="caracteristiques"] ~ div.sheet-contenu div.sheet-caracteristiques,
.sheet-ongletActif[value="competences"] ~ div.sheet-contenu div.sheet-competences,
.sheet-ongletActif[value="inventaire"] ~ div.sheet-contenu div.sheet-inventaire {
	display: block;
}

div.sheet-contenu {
  min-height: 389px;
  background-image: url(https://raw.githubusercontent.com/anis/roll20-character-sheet-stars/main/images/background.jpg);
  background-repeat: no-repeat;
  background-position: top center;
}

div.sheet-section {
    display: flex;
    justify-content: space-between;
}

div.sheet-sectionCol {
    width: 47%;
    padding-top: 20px;
}

div.sheet-sectionCol--full {
    width: 100%;
}

div.sheet-sectionCol--divider {
    padding-top: 10px;
    width: 50px;
    text-align: center;
}

div.sheet-sectionCol h1:not(:first-child) {
    margin-top: 20px;
}

/**************** ONGLET CHAR ****************/
/**** CHAR ****/
.sheet-table--caracteristiques {
    width: 100%;
}

.sheet-table--caracteristiques input[readonly] {
    font-size: 2rem;
}

.sheet-caracteristique-jet {
    text-align: center;
}

.sheet-roll {
    background: none;
    border: none;
}

.sheet-roll:hover {
    color: red;
}

.sheet-caracteristique-nom {
    font-weight: bold;
    text-align: center;
}

.sheet-caracteristique-valeur,
.sheet-caracteristique-bonus,
.sheet-caracteristique-total {
    text-align: center;
}

.sheet-caracteristique-valeur input,
.sheet-caracteristique-bonus input {
    text-align: right;
}

.sheet-caracteristique-total input {
    text-align: center;
    width: 30px;
}

input[readonly] {
    border-bottom: none;
    background: none;
}

/**** VIVRE OU SURVIVRE ****/
div.sheet-healthStats {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

div.sheet-healthBlock,
div.sheet-protectionBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.sheet-healthInput,
div.sheet-protectionInput {
    display: flex;
    width: 115px;
    height: 92px;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
}

div.sheet-healthInput {
    background-size: 115px 92px;
    background-image: url(https://raw.githubusercontent.com/anis/roll20-character-sheet-stars/main/images/inputs/weapon_score.png);
}

div.sheet-protectionInput {
    background-size: 97px 92px;
    background-image: url(https://raw.githubusercontent.com/anis/roll20-character-sheet-stars/main/images/inputs/protection_score.png);
}

div.sheet-healthInput input,
div.sheet-protectionInput input {
    background: none;
    border: none;
    text-align: center;
    font-size: 3rem;
    max-width: 40px;
    margin-bottom: 20px;
}

div.sheet-healthBlock span,
div.sheet-protectionBlock span {
    font-weight: bold;
    text-transform: uppercase;
}

div.sheet-mindStats {
    margin-top: 20px;
}

div.sheet-mindStats-inputs {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

div.sheet-mindBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.sheet-mindInput {
    display: flex;
    width: 120px;
    height: 70px;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
}

div.sheet-mindInput input {
    background: none;
    border: none;
    text-align: center;
    font-size: 3rem;
    max-width: 70px;
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    border-radius: 50%;
    border: 3px solid #000000;
}

div.sheet-mindBlock span {
    font-weight: bold;
    text-transform: uppercase;
}

div.sheet-mindEffects {
    margin-top: 10px;
    margin-left: 5px;
}

div.sheet-mindEffects span {
    font-weight: bold;
    margin-right: 10px;
}

table.sheet-weapons {
    width: 100%;
}

.sheet-weapon-jet {
    width: 50px;
    text-align :center;
}
.sheet-tableBody .sheet-weapon-jet {
    width: 60px;
    line-height: 30px;
}
.sheet-tableBody .sheet-weapon-jet button {
    vertical-align: middle;
}

.sheet-weapon-nom {
    width: 160px;
    text-align: center;
}
.sheet-weapon-nom input {
    width: 150px;
}
.sheet-tableBody .sheet-weapon-nom {
    width: 170px;
}

.sheet-weapon-degats {
    width: 140px;
    text-align: center;
}
.sheet-weapon-degats input {
    text-align: center;
}
.sheet-weapon-degats select {
    width: auto;
}
.sheet-tableBody .sheet-weapon-degats {
    width: 150px;
}

.sheet-weapon-commentaires {
    flex-grow: 1;
}
.sheet-weapon-commentaires input {
    width: 100%;
}

/* compétences */
.sheet-competence-points-restants {
    display: none;
    margin-bottom: 5px;
}

.sheet-competence-methode[value="points"] ~ .sheet-table .sheet-competence-points,
.sheet-competence-methode[value="points"] ~ .sheet-competence-points-restants {
    display: block;
}

.sheet-competence-methode-selector {
    margin-bottom: 5px;
}

.sheet-competence-table {
    width: 580px;
}

.sheet-competence-table .sheet-tableBody {
    line-height: 3rem;
}

.sheet-competence-jet {
    width: 50px;
    text-align :center;
}
.sheet-tableBody .sheet-competence-jet {
    width: 60px;
    line-height: 30px;
}

.sheet-competence-nom {
    width: 190px;
}
.sheet-tableBody .sheet-competence-nom {
    width: 200px;
    text-align: center;
}
.sheet-tableBody .sheet-competence-nom input {
    width: 200px;
}
.sheet-tableBody .sheet-competence-nom select {
    width: auto;
}

.sheet-competence-liens {
    width: 70px;
}
.sheet-tableBody .sheet-competence-liens {
    width: 80px;
    text-align: center;
}

.sheet-competence-liens input {
    width: 30px;
    text-align: center;
    line-height: 30px;
}

.sheet-competence-base {
    width: 40px;
}
.sheet-tableBody .sheet-competence-base {
    width: 50px;
    text-align: center;
}
.sheet-tableBody .sheet-competence-base input {
    width: 50px;
    text-align: center;
}

.sheet-competence-points {
    display: none;
}

.sheet-competence-points,
.sheet-competence-bonus,
.sheet-competence-total {
    width: 50px;
}
.sheet-tableBody .sheet-competence-points,
.sheet-tableBody .sheet-competence-bonus,
.sheet-tableBody .sheet-competence-total {
    width: 60px;
    text-align: center;
}
.sheet-tableBody .sheet-competence-points input,
.sheet-tableBody .sheet-competence-bonus input,
.sheet-tableBody .sheet-competence-total input {
    width: 60px;
    text-align: center;
}

.sheet-tableBody .sheet-competence-total input {
    font-size: 2rem;
    vertical-align: top;
    line-height: 3rem;
}

/* Roll template : compétences */
.sheet-rolltemplate-competence .sheet-template-container {
    display: flex;
    flex-direction: column;
    font-family: 'Oswald';
    font-size: 1.15em;
    text-align: center;
}

.sheet-rolltemplate-competence .sheet-template-header {
    border: 1px solid #000000;
    background: #2c3e45;
    color: #fff;
    font-weight: bold;
    padding: 1rem 0;
}

.sheet-rolltemplate-competence .sheet-template-header span {
    text-transform: uppercase;
}

.sheet-rolltemplate-competence .sheet-template-rolled {
    border: 1px solid #000000;
    border-top: none;
    background: white;
    padding: 2rem 0;
    font-size: 3rem;
}

.sheet-rolltemplate-competence .sheet-template-result {
    border: 1px solid #000000;
    border-top: none;
    background: #e2e6e9;
    color: #000;
    padding: 1rem;
    font-weight: bold;
    font-style: italic;
}