:root {
    --color-foreground: #221f20;
    --color-background: #fff;
    --color-highlight: #d1d2d4;
    --color-secondary: #e1e2e4;
    --color-border: #939598;
    --font-editor: "IM Fell Great Primer", serif;
    --font-input: "Poppins", sans-serif;
    --font-special: "IM Fell DW Pica", serif;
    --font-subheader: "IM Fell DW Pica SC", serif;
    --font-table: "Poppins", sans-serif;
}

.kopparhavet.sheet .window-content form {
    min-height: 0;
}

/********* Grid / Flex *********/
.grid-container {
    display: grid;
    grid-gap: 5px;
}

.flexrow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/********* Editor *********/
.editor,
editor-content {
    font-family: var(--font-editor);
    height: 100%;
    padding: 5px;
    width: 100%;
}

.info-small,
.info-small .description,
.info-small .description .editor {
    height: 166px;
}

.info,
.info .description,
.info .description .editor {
    height: 180px;
}

.info-bio,
.info-bio .description,
.info-bio .description .editor {
    height: 190px;
}

.info-mid,
.info-mid .description,
.info-mid .description .editor {
    height: 238px;
}

.info-high,
.info-high .description,
.info-high .description .editor {
    height: 380px;
}

/********* Headers *********/
h5 {
    border-bottom: 1px solid #782e22;
    font-size: 1.15em;
    margin-bottom: 5px;
    margin-top: 10px;
    text-align: center;
}

/********* Text *********/
.center-text {
    text-align: center !important;
}

/********* Button *********/
.kopparhavet button {
    background: transparent;
    border: 0 none;
    border-radius: 3px;
    box-shadow: none;
    color: var(--color-foreground);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    height: auto;
    line-height: inherit;
    padding: 2px 4px;
    width: auto;
}
.kopparhavet button:focus,
.kopparhavet button:hover {
    background: var(--color-highlight);
}

/********* Border *********/
.kopparhavet .border {
    border: 1px solid #00000f;
    padding: 5px;
}

/********* Tabs *********/
.kopparhavet .sheet-body {
    overflow: hidden;
    flex-grow: 1;
}

.kopparhavet .tab {
    height: 100%;
    width: 100%;
}

.tabs .item.active {
    border-bottom: none;
    text-shadow: 0 0 10px red;
}
.tabs .item {
    border: solid #333333 1px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    text-align: center;
    /* margin: auto; */
}

/********* Dice rolls *********/
.rollable:hover,
.rollable:focus {
    color: #000;
    text-shadow: 0 0 10px red;
    cursor: pointer;
}