@import url('https://fonts.googleapis.com/css2?family=Skranji&family=Pompiere&display=swap');

.no-spinners {
    -moz-appearance: textfield;
}
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


#content input[type="number"] {
    width: 5em;
    padding: 0px;
    text-align: center;
}

#content textarea {
    box-sizing: border-box;
    margin: 0;
    resize: vertical;
}

#content {
    width: 800px;
    position: relative;
    border: 5px #233259 solid;
    padding: 10px;
    background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Kemi/images/Kemi-background.jpg');
    background-size: cover;
    background-position-x: right;
}

#content h1,
#content h2 {
    font-family: Skranji;
    font-variant: small-caps;
    color: #233259;
    text-shadow:
         2px  0   #b39545,
        -2px  0   #fce46a,
         0    2px #b39545,
         0   -2px #fff9d8,
         1px  1px #b39545,
        -1px -1px #fce46a,
         1px -1px #b39545,
        -1px  1px #fce46a;
}
#content {
    font-family: Merriweather;
}

#content input,
#content select,
#content textarea {
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.7);
}

#content input {    
    height: 2.2em;
}

/*****************************************************************************/
/**************                      LAYOUT                     **************/
/*****************************************************************************/

#main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

#main .col {
    text-align: center;
}

.v-space {
    display: block;
    height: 15px;
}

#identite > div,
#inventaire > div,
#attributs {
    margin: 20px 5px;
}

/*****************************************************************************/
/**************                      TITLE                      **************/
/*****************************************************************************/

#title {
    text-align: center;
}

#title img {
    max-height: 150px;
}

/*****************************************************************************/
/**************                     IDENTITY                    **************/
/*****************************************************************************/

#identite input,
#identite textarea {
    width: 100%;
}

#identite #nom_xp {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
#identite #nom_xp > div:first-child {
    flex-grow: 1;
}

/*****************************************************************************/
/**************                    INVENTORY                    **************/
/*****************************************************************************/



#inventaire .repitem {
    display: flex;
    gap: 5px;
}
#inventaire input[type="text"] {
    width: 100%
}

#equipements .repcontainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#inventaire input[name="attr_arme_degats"] {
    width: 70px;
    text-align: center;
}

#inventaire input[name="attr_armure_protection"] {
    width: 70px;
    text-align: center;
}


/*****************************************************************************/
/**************                   ATTRIBUTES                    **************/
/*****************************************************************************/

#attributs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

#attributs > div {
    display: flex;
    flex-direction: column;
    align-items: start;
}

#attributs > div > div {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 5px 0px;
}

#attributs h3 {
    display: inline;
    margin-left: 5px;
    vertical-align: middle;
}

#attributs select {
    min-width: auto;
    width: 120px;
}

#attributs #heka_dieux {
    position: relative;
}

#attributs #heka_dieux .repcontrol {
    position: absolute;
    bottom: 5px;
    right: -50px;
    width: 50px;
    padding: 0;
    margin: 0;
}

/*****************************************************************************/
/**************                      POINTS                     **************/
/*****************************************************************************/

#points {
    display: flex;
    justify-content: space-around;
    gap: 5px;
}

#points > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

#points > div > input[type="number"] {
    border-radius: 50%;
    height: 80px;
    width: 80px;
    font-size: xx-large;
}

#points #points_maat {
    position: relative;
}

#points input[type="checkbox"] {
    position: absolute;
    bottom: 40px;
    right: 0px;
    width: 20px;
    height: 20px;
}


/* -------------------------------------------------------------------------- */
/* ----------------                PARAMETERS                 --------------- */
/* -------------------------------------------------------------------------- */

#show_params_button,
#close_params_button {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 0;
    font-size: 1.8em;
}
#show_params_button {
    font-family: pictos;
    background: 0;
    color: #233259;
}
#show_params_button:hover {
    color: #2a4c94;
}
#close_params_button {
    background: red;
    border-radius: 3px;
    color: white;
    font-weight: bold;
}
#close_params_button:hover {
    background: #ad0000;
}

#params {
    display: none;

    position: absolute;
    width: 70%;
    top: 50px;
    right: 50%;
    transform: translateX(50%);
    z-index: 2;

    padding: 20px;
    border: 5px black solid;
    border-radius: 10px;
    background: white;
}
#params span {
    vertical-align: middle;
    margin-left: 10px;
}

input[name="attr_show_params"][value="1"] ~ #params {
    display: block;
}

input[name="attr_show_params"][value="1"] ~ #title,
input[name="attr_show_params"][value="1"] ~ #main {
    z-index: 1;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px); 
    filter: blur(4px);
    transition: 0.5s -webkit-filter linear;
    transition: 0.5s -moz-filter linear;
    transition: 0.5s -o-filter linear;
    transition: 0.5s filter linear;
}

input[name="attr_param_use_heka"]:not([value="true"]) ~ #main .heka_component {
    display: none;
}


/* -------------------------------------------------------------------------- */
/* ----------------             BOUTTONS FIELDSET             --------------- */
/* -------------------------------------------------------------------------- */

div.repcontrol{
    display: flex;
    width: 100%;
	justify-content: space-between;
	flex-direction: row-reverse;
	padding-right: 10px;
}
.repcontrol_add,
.repcontrol_edit {
    opacity: 0.8;
	position: relative;
    /* remove effects */
    box-shadow: none;
    text-shadow:none;
    background: transparent;
    border-color: transparent;
    /* hide the text */
    color: transparent;
    font-size: 0px;
    /* 0 width */
    width: 0px;
    padding: 0px;
}
.repcontrol_add {
    left: 5px;
}
.repcontrol_edit {
    right: 20px;
}
.repcontrol_add:hover,
.repcontrol_edit:hover,
.repcontrol_move:hover,
.repcontrol_del:hover{
    opacity: 1.0;
    outline: none;
    background: none;
    color: transparent;
}
.repcontrol_add:focus,
.repcontrol_edit:focus,
.repcontrol_move:focus,
.repcontrol_del:focus {
    outline: none;
}
.repcontrol_move {
    float: left;
}
.repcontrol_del {
    float: right;
    z-index: 5;
}
.repcontrol_add:before {
    content: '+';
}
.repcontrol_edit:before {
    content: 'y';
}
.repcontrol_add:before,
.repcontrol_edit:before {
    visibility: visible;
    font-family: pictos;
    border: none;
    font-size: 18px;
    height: 18px;
    width: 18px;
    padding: 2px 0px 0px 0px;
    color: #2a4c94;
}
.editmode ~ .repcontrol .repcontrol_edit:before {
    content: '2';
}


/* -------------------------------------------------------------------------- */
/* ----------------              SHEET TEMPLATES              --------------- */
/* -------------------------------------------------------------------------- */

.sheet-rolltemplate-roll .sheet-template-container {
    background: #efd9b0;
    border-bottom-left-radius: 50% 50%;
    border-bottom-right-radius: 50% 50%;
    border: 2px solid #004f6e;
    text-align: center;
    font-family: Pompiere, Merriweather, serif;
    max-width: 270px;
    margin: auto;
}
.sheet-rolltemplate-roll .sheet-template-header {
    background: #f4bb54;
    font-weight: bold;
    padding: 5px;
    color: #004f6e;
    border-bottom: 4px #f4bb54 ridge;
}
.sheet-rolltemplate-roll .sheet-template-result {
    padding: 5px;
}
.sheet-rolltemplate-roll .sheet-template-maat {
    font-style: italic;
    color: #004f6e;
}