/*------------------------------------------------*\
  #GENERAL
\*------------------------------------------------*/


.ui-dialog .charsheet {
  padding: 0px;
}

/* --------- Text ------------- */

span.bold{
  font-weight: 800;
  font-size: medium;
}

/* latin-ext */
@font-face {
  font-family: 'Metamorphous';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/metamorphous/v20/Wnz8HA03aAXcC39ZEX5y133ENSqstTs.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Metamorphous';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/metamorphous/v20/Wnz8HA03aAXcC39ZEX5y133EOyqs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4taVIGxA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4kaVIGxA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4saVIGxA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4jaVIGxA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4iaVIGxA.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4vaVIGxA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4uaVIGxA.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@import url('https://fonts.googleapis.com/css?family=Metamorphous|Open+Sans:300;400;500;600;700;800&display=swap');

.ui-dialog .characterviewer label {
  margin: 5px 0px 5px 0px;
  font-size: 1.1em;
  font-family: 'Metamorphous', cursive;
}

.ui-dialog .characterviewer h1,
.ui-dialog .characterviewer h2,
.ui-dialog .characterviewer h3,
.ui-dialog .characterviewer h4 {
  font-family: 'Metamorphous', cursive;
}

.ui-dialog .characterviewer input,
.ui-dialog textarea,
.ui-dialog select
 {
  font-family: 'Open Sans';
}

.sheet-darkmode .characterviewer h2 {
  color: var(--dark-primarytext);
}

.sheet-darkmode .characterviewer span {
  color: var(--dark-secondarytext);
}


/* ------- Buttons ---------- */

button[type="roll"]:not(.small){
  color: black;
  height: 30px;
  width: 30px;
  margin-left: 15px;
}

button[type="roll"]:not(.small)::before{
  font-size: 1.4em;
}


/*-----------------------------------------------------------------*\
  #SECTIONS
\*-----------------------------------------------------------------*/


/* --------- General Section Styling ------------- */
.flex-center {
  display: flex;
  align-items: center;
}

.flex-middle {
  display: flex;
  justify-content: center;
}

.flex-down {
  flex-flow: column nowrap;
}

.section {
    padding: 5px;
    min-height: 90%;
}


/*  ----- Character Sheet Structure -------

'.main' defines the sheet's general structure and dimensions using CSS Grid.

It uses 'Grid template areas' to name  each sheet section,
so that they can be positioned in the grid easily,
 while also providing a human-readable overview. */
div.main {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-rows: 0.2fr 1fr 0.2fr 0.8fr 0.2fr 0.7fr 0.2fr 1fr 1fr 0.2fr;
  grid-template-areas:"header header"
                      "info-container info-container"
                      "divider-1 divider-1"
                      "skills skills"
                      "divider-2 divider-2"
                      "consequences consequences"
                      "divider-3 divider-3"
                      "items-persons-container items-persons-container"
                      "notes notes"
                      "footer footer";
  grid-gap: 6px;
}

.sheet-darkmode .characterviewer div.main {
  background: rgb(56, 56, 56);
}

/* Section-specific CSS is written in a way that removes the need to define classes
on each individual   */

/* LOGO SECTION */
div.logo{
  grid-area: logo;
  background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/talus_logo.png?raw=true);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
  display: flex;
  justify-content:flex-end;
  align-items:flex-end;
  flex-flow: column;
}

/* Dice SECTION */
div.logo-dice{
  grid-area: dicelogo;
  background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus_dice.png?raw=true);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
  display: flex;
  justify-content:flex-end;
  align-items:flex-end;
  flex-flow: column;
}

/* Footer & Header */
div.footer{
  grid-area: footer;
  background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-footer_light-mode.png?raw=true);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  justify-content:flex-end;
  align-items:flex-end;
  flex-flow: column;
}

.sheet-darkmode div.footer{
  background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-footer_dark-mode.png?raw=true);
}

div.header{
  grid-area: header;
  background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-header_light-mode.png?raw=true);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  justify-content:flex-end;
  align-items:flex-end;
  flex-flow: column;
}

.sheet-darkmode div.header{
  background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-header_dark-mode.png?raw=true);
}


div.divider{
  background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-ornament_light-mode.png?raw=true);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  display: flex;
  justify-content:flex-end;
  align-items:flex-end;
  flex-flow: column;
  border-right: none;
}

.sheet-darkmode div.divider{
  background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-ornament_dark-mode.png?raw=true);
}

div.divider-1{
  grid-area: divider-1;
}

div.divider-2{
  grid-area: divider-2;
}

div.divider-3{
  grid-area: divider-3;
}

div.dagger{
  background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-dagger_light-mode.png?raw=true);
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  justify-content:flex-end;
  align-items:flex-end;
  flex-flow: column;
  margin-left: 5px;
}

.sheet-darkmode div.dagger{
  background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-dagger_dark-mode.png?raw=true);
}

/* Info Container */

div.info-container {
  grid-area: info-container;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-gap: 6px;
  height: fit-content;
}


div.left-info-block {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 6px;
  margin: auto;
}

div.right-info-block {
  margin: auto;
  width: 100%;
  height: 100%;
}

div.talus-pnp-logo{
  background-image: url(https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-pnp-logo.png?raw=true);
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  justify-content:flex-end;
  align-items:flex-end;
  flex-flow: column;
  background-position: center;
}


div.name{
  margin-left: 15px;
}

div.circle{
  margin-left: 15px;
}

div.campaign{
  margin-left: 15px;
}

div.experience{
  margin-left: 15px;
}

/* Skills SECTION */


div.skills-container {
  grid-area: skills;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,0.1fr) minmax(0,1fr);
  grid-gap: 6px;
  height: fit-content;
}

div.skills-block-left,
div.skills-block-right {
  display: grid;
  grid-template-rows: 2fr 0.5fr 0.5fr 0.5fr;
  grid-gap: 6px;
  margin: auto;
}


div.skills-block {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  grid-gap: 6px;
}

.ui-dialog .charsheet  button[type="roll"].talus-roll::before {
  content: "";
}

/* Consequences SECTION */
div.consequences{
  grid-area: consequences;
  margin-left: 15px;
  margin-right: 15px;
  height: fit-content;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-gap: 6px;
}

div.consequences > div {
  display: grid;
  grid-template-columns: minmax(0,0.2fr) minmax(0,0.8fr);
  grid-gap: 6px;
}

/* Persons SECTION */
div.items-persons-container {
  grid-area: items-persons-container;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,0.1fr) minmax(0,1fr);
  grid-gap: 6px;
  height: fit-content;
}

div.persons{
  margin-left: 15px;
  margin-right: 15px;
}

/* Items SECTION */
div.items{
  margin-left: 15px;
  margin-right: 15px;
}

/* Notes SECTION */
div.notes{
  grid-area: notes;
  margin-left: 15px;
  margin-right: 15px;
}


/* Custom Roll SECTION */


/* 1200 x 670 */
/* 280 x 156 */
.sheet-rolltemplate-talus {
  background-image: url("https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-border_light-mode.png?raw=true");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 280px;
  height: 156px;
}

.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode {
  background-image: url("https://github.com/thhesp/roll20-character-sheets/blob/talus/Talus/images/talus-border_dark-mode.png?raw=true");
}

.sheet-rolltemplate-talus .inlinerollresult  {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  color: #000;
  font-weight:bold;
}

.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode .inlinerollresult {
  background-color: var(--el-fill-color);
}


.sheet-rolltemplate-talus div.sheet-talus-crit > span {
  border: none;
  color: green;
  font-weight:bold;
}

.sheet-rolltemplate-talus div.sheet-talus-fumble > span {
  border: none;
  color: red;
  font-weight:bold;
}


.sheet-rolltemplate-talus div.sheet-template-container-talus {
  font-family: 'Metamorphous', cursive;
  font-size: 1.0em;
  text-align: center;
  padding-top: 13px;
  padding-left: 1px;
  width: 278px;
  height: 140px;
}

.sheet-rolltemplate-talus .sheet-template-header {
  background: rgb(56, 56, 56);
  background-clip: content-box;
  color: var(--dark-primarytext);
  padding: 2px;
  border-bottom: 1px solid black;
  line-height: 1.6em;
}

.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode .sheet-template-header {
  background-color: rgba(112, 32, 130,1);
  background-clip: content-box;
  color: #000;
}

.sheet-rolltemplate-talus div,
.sheet-rolltemplate-talus span {
  color: var(--dark-primarytext);
}

.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode div,
.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode span {
  color: #000;
}

.sheet-rolltemplate-talus > div {
  padding: 5px;
  border-bottom: 1px solid black;
}

.sheet-template-container-talus > div {
  padding: 5px;
  border-bottom: 1px solid black;
}

.sheet-rolltemplate-talus div.sheet-template-header {
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  padding: 5px;
}

.sheet-rolltemplate-talus div.sheet-result-row {
  font-weight: bold;
  font-size: 1.4em;
  text-align: center;
  padding: 5px;
  font-family: 'Open Sans';
}

.sheet-rolltemplate-talus div.sheet-template-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  text-align: center;
  font-family: 'Open Sans';
}


.sheet-rolltemplate-talus div.sheet-template-grid span {
  text-align: center;
}

.sheet-rolltemplate-talus div.sheet-template-grid > span:nth-child(1),
.sheet-rolltemplate-talus div.sheet-template-grid div {
  border-right: 2px solid black;
}

.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode div:nth-child(odd) {
  background-color: white;
  background-clip: content-box;
}
.sheet-rolltemplate-talus.sheet-rolltemplate-darkmode div:nth-child(even) {
  background-color: rgba(233, 233, 233,1);
  background-clip: content-box;
}

.sheet-rolltemplate-talus div:nth-child(odd) {
  background-color: rgb(40, 40, 37,1);
  background-clip: content-box;
}
.sheet-rolltemplate-talus div:nth-child(even) {
  background-color: rgb(56, 56, 56,1);
  background-clip: content-box;
}