/* Document styles */
* {
    box-sizing: border-box;
}

.character-sheet {
    border-color: #9a6365;
    border-style: double;

    /* max-width: 1100px; */

    margin-top: 10em;
    margin-left: 5em;
    margin-right: 5em;
}

/* Logo styles */
.vtm-logo-container {
    transform: translateY(-30%);
}

.vtm-logo {
    display: block;

    margin-left: auto;
    margin-right: auto;
    width: 30%;

    background-color: var(--body-background-color);
}

/* General styles */
input, select, button, textarea {
    background-color: var(--input-background-color);
    color: var(--body-color);

    border: 1px solid var(--border-color);
}

input, select {
    padding-top: .5em;
    padding-bottom: .5em;
}

h1 {
    text-transform: uppercase;
    text-align: center;
}

h2 {
    text-transform: uppercase;
    text-align: center;
}

h5 {
    width: 100%;

    margin-top: .5rem;
    margin-bottom: .2rem;

    font-style: italic;
    text-align: center;

    font-weight: normal;
}

.app-container {
    margin-left: 3em;
    margin-right: 3em;
}

section.container {
    margin-top: 2em;
    margin-left: 2em;
    margin-right: 2em;
}

.container > h2, .container > hr {
    width: 100%;
}

.container > h2 {
    margin-bottom: .2rem;
}

.dots {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dots-5 {
    min-width: 101px;
}
.dots-10 {
    min-width: 222px;
}

.dot {
    display: inline-block;

    height: 1em;
    width: 1em;

    border: 2px solid var(--dot-color);
    border-radius: 50%;

    cursor: pointer;
}
.dot.not-allowed {
    cursor: not-allowed;
}
.dot.filled {
    background-color: var(--filled-dot-color);
}

.square {
    display: inline-block;

    height: 1em;
    width: 1em;

    border: 2px solid var(--dot-color);

    cursor: pointer;
}
.square.not-allowed {
    cursor: not-allowed;
}
.square.filled {
    background-color: var(--dot-color);
}

.character-selection-container {
    position: absolute;
    max-width: 25%;

    display: flex;
    flex-direction: column;

    z-index: 1;
}

.buttons-container button {
    margin-top: 10px;
}

/* Main info section styles */
.main-info-container {
    display: flex;
    flex-wrap: wrap;

    border-collapse: collapse;
}

.main-info-item {
    width: calc(100% / 3);

    border: 1px solid var(--border-color);
    border-collapse: collapse;

    padding: .5em;
}

.main-info-item label {
    display: block;

    margin-bottom: .3em;
}

/* Attributes section styles */
.attributes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.attributes-column {
    width: calc(100% / 3);
}

.attributes {
    padding-top: .5em;
    padding-bottom: .5em;
}

.attributes-column:not(:last-child) .attributes {
    border-right: 1px solid var(--border-color);
}

.attribute {
    display: flex;
    justify-content: space-between;

    padding-top: .5em;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: .5em;
}

.calculated-attribute-container {
    width: calc(100% / 3);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    margin-top: .5em;
}

.squares-container .space {
    margin-left: .2em;
    margin-right: .2em;
}

/* Skills section styles */
.skills-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.skill-item {
    width: calc(100% / 3);

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: .5em;
}

.specialization {
    /**
        This is here, since normally if the width is not set,
        the inputs would get too large, and stretch everything.
    */
    width: 50px;

    flex-grow: 1;

    margin-left: 1em;
    margin-right: 1em;
}

/* Disciplines styles */
.disciplines-container {
    display: flex;
    flex-wrap: wrap;
}

.discipline-container {
    width: calc(100% / 3);
}

.discipline-picker-header {
    display: flex;
}

.discipline-picker-header > .dots {
    margin-left: 1em;
    margin-right: 1em;
}

.discipline-picker {
    flex-grow: 1;
}

.discipline-powers {
    display: flex;
    flex-direction: column;
}

/* 2nd page */
/* Misc section */
.misc-container {
    display: flex;
}
.misc-container > section {
    width: calc(100% / 3);
}
.misc-container > section > textarea {
    width: 100%;
    height: 250px;

    resize: none;
}

/* Rest of the character sheet */
.rest-container {
    display: flex;
    flex-direction: row;
}
.rest-container > section {
    width: 50%;
}
.left-side {
    padding-right: 1em;

    border-right: 1px solid var(--border-color)
}
.right-side {
    padding-left: 1em;
}
/* Vantages */
.vantage {
    display: flex;
}
.vantage > input {
    flex-grow: 1;
    margin-right: 1em;
}
/* Notes */
.notes {
    margin-top: 2em;
}
.notes > textarea {
    width: 100%;
    height: 500px;

    resize: none;
}
/* Blood power */
.blood-power-level {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: .5em;
}
.blood-power-details {
    display: flex;
    flex-wrap: wrap;
}
.blood-power-input {
    width: 50%;

    display: flex;
    flex-direction: column;
}
/* Experience points */
.experience-section {
    padding-top: 2em;
    padding-bottom: 2em;
}
.experience-section > div {
    display: flex;
    align-items: center;
}
.experience-section > div > label {
    padding-right: 1em;
}
.experience-section > div > input {
    flex-grow: 1;
}
/* Another misc section */
.misc-container-2 > div {
    display: flex;
    align-items: center;
}
.misc-container-2 label {
    padding-right: 1em;
}
.misc-container-2 input {
    flex-grow: 1;
}
.misc-container-2 .appearance, .misc-container-2 .distinguishing-features, .misc-container-2 .history {
    flex-flow: column;
    align-items: flex-start;
}

.appearance textarea, .distinguishing-features textarea {
    width: 100%;
    height: 50px;
    resize: none;
}

.history textarea {
    width: 100%;
    height: 350px;
    resize: none;
}