/*Page*/

.page {
    background-image:url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Aventures/img/Aventures-bg.jpg');
	border: 1px solid #D3D3D3;
    font-weight: normal;
}

.page-form ~ div.page {
	display: block;
}

.page-head {
    border: 1px solid gray;
    margin-block: 1%;
    width: 100%;
    text-align: center;
    font-weight: bold;
    background-color: #fff;
    font-size: 1em;
}

/*Configure les boutons de tabs*/
.charsheet .page-competences,
.charsheet .page-equipement {
    display: none;
}

/* Afficher/Masquer les tabs */
.charsheet .page-tabstoggle[value="competences"] ~ div.page-competences,
.charsheet .page-tabstoggle[value="equipement"] ~ div.page-equipement {
    display: block;
}

/* Style de tab */
.tab {
    overflow: hidden;
    border-bottom: 5px solid #ccc;
    border-top: 5px solid #ccc;
    background-color : transparent;
}
  
/* Style des boutons de tabs */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}
  
/* Background des boutons tabs */
.tab button:hover {
    background-color: rgb(253, 237, 165);
}


/*Logo*/

div.page-logo-aventures {
    text-align: center;
    margin: auto;
}


/*Blocks*/

div.page-block {
    display: inline-block;
    font-weight: bold;
    margin: 1%;
    width: 98%;
}


/* === Grids === */
/* === Grid character === */
.grid-character {
    display: grid;
    grid-auto-columns: minmax(10%, auto);
    grid-auto-rows: minmax(10%, auto);
    gap: 1%;
    padding-block: 1%;
}
.grid-character-nom {
    grid-column: 1;
    grid-row: 1;
    padding-block: 1%;
}
.grid-character-race {
    grid-column: 2;
    grid-row: 1;
    padding-block: 1%;
}
.grid-character-classe {
    grid-column: 3;
    grid-row: 1;
    padding-block: 1%;
}
.grid-character-element {
    grid-column: 4;
    grid-row: 1;
    padding-block: 1%;
}
.grid-character-themes {
    grid-column: 1 / 3;
    grid-row: 2;
    padding-block: 1%;
}
.grid-character-langues {
    grid-column: 3 / 5;
    grid-row: 2;
    padding-block: 1%;
}
.grid-character-vocation {
    grid-column: 1 / 5;
    grid-row: 3;
}

/* === Grid stats principales === */

.grid-global-stats {
    display: grid;
    grid-auto-columns: minmax(10%, auto);
    grid-auto-rows: minmax(10%, auto);
    gap: 2%;
}

.grid-stats {
    display: grid;
    grid-auto-columns: minmax(10%, auto);
    grid-auto-rows: minmax(10%, auto);
    border:1px solid rgba(26, 27, 28, 0.1);
    grid-column: 1 / 4;
}
.grid-stats-physique {
    display: grid;
    grid-column: 1 / 3;
    grid-row: 1;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}
  .grid-stats-social {
    display: grid;
    grid-column: 3 / 5;
    grid-row: 1;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}
.grid-stats-mental {
    display: grid;
    grid-column: 5 / 7;
    grid-row: 1;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}
.grid-stats-physique-value {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-column: 1 / 3;
    grid-row: 2;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-stats-social-value {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-column: 3 / 5;
    grid-row: 2;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-stats-mental-value {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-column: 5 / 7;
    grid-row: 2;
    border:1px solid rgba(26, 27, 28, 0.1);
}

/* === Grid stats secondaires === */

.grid-stats-puissance {
    display: grid;
    grid-column: 1;
    grid-row: 3;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}
.grid-stats-finesse {
    display: grid;
    grid-column: 2;
    grid-row: 3;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}
.grid-stats-aura {
    display: grid;
    grid-column: 3;
    grid-row: 3;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}
.grid-stats-relations {
    display: grid;
    grid-column: 4;
    grid-row: 3;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}
.grid-stats-instinct {
    display: grid;
    grid-column: 5;
    grid-row: 3;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}
.grid-stats-savoir {
    display: grid;
    grid-column: 6;
    grid-row: 3;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}
.grid-stats-puissance-value {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-column: 1;
    grid-row: 4;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-stats-finesse-value {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;    
    grid-column: 2;
    grid-row: 4;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-stats-aura-value {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-column: 3;
    grid-row: 4;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-stats-relations-value {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-column: 4;
    grid-row: 4;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-stats-instinct-value {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-column: 5;
    grid-row: 4;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-stats-savoir-value {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-column: 6;
    grid-row: 4;
    border:1px solid rgba(26, 27, 28, 0.1);
}

/*Grid cartons */

.grid-carton-puissance {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    grid-column: 1;
    grid-row: 5;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}
.grid-carton-finesse {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    grid-column: 2;
    grid-row: 5;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}
.grid-carton-aura {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    grid-column: 3;
    grid-row: 5;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}
.grid-carton-relation {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    grid-column: 4;
    grid-row: 5;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}
.grid-carton-instinct {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    grid-column: 5;
    grid-row: 5;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}
.grid-carton-savoir {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    grid-column: 6;
    grid-row: 5;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}

/* === Grid bonus de sous-stats === */

.grid-stats-bonus {
    display: grid;
    grid-column: 1 / 7;
    grid-row: 6;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}

.grid-bonus-puissance {
    display: grid;
    grid-column: 1;
    grid-row: 7;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}
.grid-bonus-finesse {
    display: grid;
    grid-column: 2;
    grid-row: 7;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}
.grid-bonus-aura {
    display: grid;
    grid-column: 3;
    grid-row: 7;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}
.grid-bonus-relation {
    display: grid;
    grid-column: 4;
    grid-row: 7;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}
.grid-bonus-instinct {
    display: grid;
    grid-column: 5;
    grid-row: 7;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}
.grid-bonus-savoir {
    display: grid;
    grid-column: 6;
    grid-row: 7;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: transparent;
}

/* === Grid stats ingame === */

.grid-stats-ingame {
    display: grid;
    grid-auto-columns: minmax(10%, auto);
    grid-auto-rows: minmax(10%, auto);
    border:1px solid rgba(26, 27, 28, 0.1);
    grid-column: 4;
}
.grid-stats-lvl {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}
.grid-stats-pv {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-stats-psy {    
    display: grid;
    grid-column: 1;
    grid-row: 3;
    align-items: center;
    justify-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-stats-posture {
    display: grid;
    grid-column: 1;
    grid-row: 4;
    align-items: center;
    justify-items: center;    
    border:1px solid rgba(26, 27, 28, 0.1);
}

.grid-stats-lvl-value {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-items: center;    
    border:1px solid rgba(26, 27, 28, 0.1);
    background-color: #fff;
}
.grid-stats-pv-value {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    justify-content: center;
    align-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-stats-psy-value {
    display: flex;
    grid-column: 2;
    grid-row: 3;
    justify-content: center;
    align-items: center;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-stats-posture-value {
    display: grid;
    grid-column: 2;
    grid-row: 4;
    align-items: center;
    justify-items: center;    
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-des-aventures-des {
    display: flex;
    grid-column: 1;
    grid-row: 5;
    align-items: center;    
    justify-content: space-between;
    padding-left: 5%;
    padding-right: 5%;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-des-aventures-reste {
    display: flex;
    grid-column: 2;
    grid-row: 5;
    align-items: center;    
    justify-content: center;
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-des-mesaventures-des {
    display: flex;
    grid-column: 1;
    grid-row: 6;
    align-items: center;
    justify-content: space-between;
    padding-left: 5%;
    padding-right: 5%;    
    border:1px solid rgba(26, 27, 28, 0.1);
}
.grid-des-mesaventures-reste {
    display: flex;
    grid-column: 2;
    grid-row: 6;
    align-items: center;
    justify-content: center;    
    border:1px solid rgba(26, 27, 28, 0.1);
}

/*Grid avantage desavantage*/

.grid-bonus-detail {
    grid-column: 1 / 7;
    grid-row: 8;
    border:1px solid rgba(26, 27, 28, 0.1);
}

/*Grid avantage desavantage*/

.grid-avantage {
    grid-column: 1 / 7;
    grid-row: 9;
    text-align: center;
    font-weight: bold;
    border:1px solid rgba(26, 27, 28, 0.1);
}

/* === Grid competences et dons === */

.grid-competences-dons {
    display: grid;
    grid-auto-columns: minmax(10%, auto);
    grid-auto-rows: minmax(10%, auto);
    gap: 2%;
    padding-block: 1%;
}
.grid-competences {
    display: grid;
    grid-auto-columns: minmax(10%, auto);
    grid-auto-rows: minmax(10%, auto);
    border:1px solid rgba(26, 27, 28, 0.1);
    grid-column: 1 / 4;
}
.grid-dons {
    display: grid;
    grid-auto-columns: minmax(10%, auto);
    grid-auto-rows: minmax(10%, auto);
    border:1px solid rgba(26, 27, 28, 0.1);
    grid-column: 4 / 7;
}
.grid-competences-passiv {
    display: grid;
    grid-auto-columns: minmax(10%, auto);
    grid-auto-rows: minmax(10%, auto);
    border:1px solid rgba(26, 27, 28, 0.1);
    gap: 2%;
    padding-block: 1%;
}

/* === Grid equipement === */

.grid-equipement {
    display: grid;
    grid-auto-columns: minmax(10%, auto);
    grid-auto-rows: minmax(10%, auto);
    gap: 2%;
    padding-block: 1%;
}
.grid-armes {
    display: grid;
    border:1px solid rgba(26, 27, 28, 0.1);
    grid-column: 1 / 4;
    grid-row: 1;
}
.grid-armure {
    display: grid;
    border:1px solid rgba(26, 27, 28, 0.1);
    grid-column: 4 / 7;
    grid-row: 1;
}
.grid-sac {
    display: grid;
    border:1px solid rgba(26, 27, 28, 0.1);
    grid-column: 1 / 4;
    grid-row: 2;
}
.grid-autre {
    display: grid;
    border:1px solid rgba(26, 27, 28, 0.1);
    grid-column: 4 / 7;
    grid-row: 2;
}

/*Input text*/

textarea {
    border: transparent; 
    background-color:rgba(255, 255, 255, 0.5); 
    max-width: 95% !important;
    max-height: 80% !important;
}

textarea.themes-langues {
    border: transparent; 
    background-color:rgba(255, 255, 255, 0.5); 
    min-width: 95% !important;
    max-height: 30px !important;
}
textarea.vocation {
    border: transparent; 
    background-color:rgba(255, 255, 255, 0.5); 
    min-width: 98% !important;
    max-height: 30px !important;
}
textarea.bonus-detail {
    border: transparent; 
    background-color:rgba(255, 255, 255, 0.5); 
    min-width: 98% !important;
    max-height: 80% !important;
}

textarea.passiv {
    border: transparent; 
    background-color:rgba(255, 255, 255, 0.5); 
    min-width: 100% !important;
    min-height: 10px !important;
}

input[type=text] {
    border: transparent;
    background-color:rgba(255, 255, 255, 0.5);
    width: 98%;
}
input[type=text].page-text-don {
    border: transparent;
    background-color:rgba(255, 255, 255, 0.5);
    width: 50%;
}
input[type=text].page-text-competence {
    border: transparent;
    background-color:rgba(255, 255, 255, 0.5);
    width: 50%;
}
input[type=text].page-objet-nom {
    border: transparent; 
    background-color:rgba(255, 255, 255, 0.5); 
    width: 90%;
    display:inline;
}
input[type=text].page-arme {
    border: transparent;
    background-color:rgba(255, 255, 255, 0.5);
    width: 40%;
}
input[type=text].page-armure {
    border: transparent;
    background-color:rgba(255, 255, 255, 0.5);
    width: 85%;
}

/* === Inputs number === */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
    -webkit-appearance: none;
}

input[type=number] {
    -moz-appearance: textfield;
    
    width: 25px;
    display: inline;
    text-align: center;
    border:1px solid rgba(26, 27, 28, 0.1);
}
input[type=number].page-number {
    -moz-appearance: textfield;

    align-content: center;
    width: 20px !important;
    display: inline;
    font-weight: bold;
    font-size: 1em;
    background-color:rgba(255, 255, 255, 0.3);
    border:1px solid rgba(26, 27, 28, 0.1);
}
input[type=number].page-number-main {
    -moz-appearance: textfield;
    
    align-content: center;
    width: 30px !important;
    display: inline;
    font-weight:  bold;
    font-size: 1.2em;
    background-color:rgba(255, 255, 255, 0.6);
    border:1px solid rgba(26, 27, 28, 0.1);
}
input[type=number].page-number-bar-max {
    -moz-appearance: textfield;
    
    align-content: center;
    width: 30px !important;
    color: #b74437;
    display: inline;
    font-weight: bold;
    font-size: 1.2em;
    background-color:rgba(255, 255, 255, 0.6);
    border:1px solid rgba(26, 27, 28, 0.1);
}
input[type=number].page-number-long {
    -moz-appearance: textfield;
    
    align-content: center;
    width: 35px !important;
    display: inline;
    font-size: 1em;
    background-color:rgba(255, 255, 255, 0.6);
    border:1px solid rgba(26, 27, 28, 0.1);
}
input[type=number].page-query {
    -moz-appearance: textfield;
    
        display: none;
}

/* === Inputs checkbox === */

input[type="checkbox"].page-carton-jaune
{
    margin: 2px;
    outline: inset 3px #f4df42;
}
input[type="checkbox"].page-carton-rouge
{
    margin: 2px;
    outline: inset 3px #b74437;
}

/* ==== Placeholders ====== */

input::placeholder {
    opacity: 60%;
}

/* === Select === */

.page-select {
    width: 100px !important;
    display: inline;
    position: relative;
    top: 2px;
    background-color:rgba(255, 255, 255, 0.8);
}
.page-comp-dX-select {
    width: 55px;
    display: inline;
    position: relative;
    top: 2px;
    background-color:rgba(255, 255, 255, 0.7);
}

/* === Options === */

.page-options {
    text-align: right;
    font-size: 0.8em;
    color: rgba(25,26,27,0.7);
    background-color: rgba(255, 255, 255, 0.4);
}

/* === Boutons === */

button[type=roll] {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    border: outset 1px;
    width: 15px;
}

.des_buttons {
    background-color: transparent;
    border: transparent;
    width: 15px;
}

/* === Boutons de répétitions de lignes === */

.repcontrol_edit {
    opacity: 50%;
}
.repcontrol_add {
    opacity: 50%;
}