html {
    scroll-behavior: smooth;
}

body,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
	background-color: #000;
	color: #fff;
	font-family: 'Trebuchet MS', sans-serif;
	font-size: 16px;
}

body {
    margin-top: 0 !important;
}

.dialog-off-canvas-main-canvas {
    position: relative;
}

.well {
	border: none;
	border-radius: 0;
	background-color: #000;
}

.btn-primary {
	border-color: #0af;
	background-color: #0af;
}

.page-node-type-backlog .region-content .field--name-field-image {
  margin-bottom: 30px;
}

h1, h2, h3, h4, h5 {
    color: #0af;
	font-weight: bold;
}

h2 a,
h3 a,
h4 a,
h5 a {
  position: relative;
  transition: all .3s ease-in-out;
}

h2 a:hover,
h2 a:active,
h2 a:focus,
h3 a:hover,
h3 a:active,
h3 a:focus,
h4 a:hover,
h4 a:active,
h4 a:focus,
h5 a:hover,
h5 a:active,
h5 a:focus {
  color: #fff;
  text-decoration: none;
}

h2 a:before,
h3 a:before,
h4 a:before,
h5 a:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  z-index: -1;
  width: 0;
  height: calc(100% + 4px);
  background-image: linear-gradient(to right, #0af 35%, transparent);
  transition: all .3s ease-in-out;
}

h2 a:hover:before,
h2 a:active:before,
h2 a:focus:before,
h3 a:hover:before,
h3 a:active:before,
h3 a:focus:before,
h4 a:hover:before,
h4 a:active:before,
h4 a:focus:before,
h5 a:hover:before,
h5 a:active:before,
h5 a:focus:before {
  width: 100%;
}

h2 a:after,
h3 a:after,
h4 a:after,
h5 a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  z-index: 0;
  width: 100%;
  height: 2px;
  background-color: #0af;
  transition: all .2s;
}

h2 a:hover:after,
h2 a:active:after,
h2 a:focus:after,
h3 a:hover:after,
h3 a:active:after,
h3 a:focus:after,
h4 a:hover:after,
h4 a:active:after,
h4 a:focus:after,
h5 a:hover:after,
h5 a:active:after,
h5 a:focus:after {
  width: 0;
}

.menu--main li a {
  font-weight: bold;
}

h1 {
	text-align: center;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: #0af;
}

a:hover,
a:active,
a:focus {
	color: #08e;
}

button, input, select, textarea {
	border: none;
	color: #000;
}

textarea {
    border: 3px solid #fff
}

fieldset {
    height: 100%;
	border: 1px solid #0af;
	padding: 20px 25px 25px;
}

legend {
	width: auto;
	margin: 0 auto;
	padding: 0 25px;
	border: none;
	background-color: #08f;
/*	background-image: linear-gradient(160deg, #0af, #05f, #0af);*/
	color: #fff;
}

fieldset h3 {
    margin-top: 0;
    color: #fff;
    text-align: center;
}

.container-fluid,
.container {
	padding-left: 25px;
	padding-right: 25px;
}

.row {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin-left: -25px;
	margin-right: -25px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	padding-left: 25px;
	padding-right: 25px;
}

.d-inline-block {
	display: inline-block;
}

.d-flex {
	display: flex;
	max-width: 100%;
}

.flex-wrap-wrap {
	flex-wrap: wrap;
}

.justify-content-center {
	justify-content: center;
}

.align-items-start {
	align-items: start;
}

.align-items-center {
	align-items: center;
}

.mt-10 {
    margin-top: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.main-container > .row > section.col-sm-12 {
    width: 100%;
}

.from-textarea {
    white-space: break-spaces;
}

.cursor-pointer {
    cursor: pointer;
}

.is-unpublished {
    position: relative;
    padding-top: 100px;
    background-color: transparent;
}

.is-unpublished:before {
    content: "UNPUBLISHED";
    position: absolute;
    top: 0px;
    left: 50px;
    z-index: 100;
    display: block;
    border-radius: 5px;
    padding: 22px 45px;
    background-color: #f00;
    background-image: linear-gradient(160deg, #f00, #ff0, #f00);
    color: #000;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}

/* ------------------------- HEADER ------------------------- */
.header-spacer {
    height: 90px;
}

header#navbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    margin: 10px 0;
	border: none;
	border-radius: 0;
	background-color: transparent;
}

header#navbar a.navbar-brand {
	font-size: 30px;
	font-weight: bold;
	color: #0af;
	text-transform: uppercase;
}

header .logo {
    margin: 0;
}

header .logo img {
    max-width: 120px;
}

header ul.menu--main {
	float: none;
	display: flex;
    justify-content: flex-end;
    margin-top: 25px;
}

header .navbar-nav > li {
    display: inline-block;
    float: none;
}

ul.menu--main li a {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: transparent !important;
	color: #0af !important;
	text-transform: uppercase;
    transition: all .3s ease-in-out;
}

ul.menu--main li a:hover,
ul.menu--main li a:active,
ul.menu--main li a:focus,
ul.menu--main li a.is-active {
	color: #fff !important;
}

ul.menu--main li a:before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    z-index: -1;
    width: 0;
    height: calc(100% + 4px);
    background-image: linear-gradient(to right, #0af, transparent);
    transition: all .3s ease-in-out;
}

ul.menu--main li a:hover:before {
    width: 100%;
}

/* ------------------------- MAIN CONTENT ------------------------- */
.main-container .region-content article .content .field--name-field-image {
	margin-bottom: 50px;
}

.cat-parent {
	text-transform: uppercase;
}

#block-views-block-category-tags-block-1 .cat-child {
	margin-left: 20px;
}

#block-views-block-category-tags-block-2 .view-content .views-row {
	font-style: italic;
}

#block-views-block-category-tags-block-2 .view-content .views-row:not(:last-of-type) .field-content a:after {
	content: ",";
}

dd img {
	max-width: 100%;
	height: auto;
}

dd img + img,
dd img + br + img{
	margin-top: 25px;
}

/* ------------------------- SEARCH ------------------------- */
.page-node-type-tool-page #block-truebacklog-searchform {
	text-align: right;
}

.page-node-type-tool-page #block-truebacklog-searchform #search-block-form {
	display: inline-block;
	width: 250px;
}

/* ------------------------- VIEWS ------------------------- */
.view-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.views-field-title h3 {
	text-align: center;
}

.views-field-title h3 a {
	padding: 0 8px;
}

.views-field-title h3 a:after {
	display: none;
}

/* ------------------------- TOOL PAGES: Map Generator ------------------------- */
.grid-input-form-wrp {
	margin-bottom: 50px;
	text-align: center;
}

#gridInputForm {
	display: inline-block;
}

.grid-input-form-inner-wrp {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
	align-items: center;
}

.grid-input-form-inner-left-area-wrp {
	padding-top: 16px;
}

.grid-input-form-inner-center-area-wrp {
	padding: 0 20px;
}

.grid-input-form-inner-right-area-wrp {
	padding: 15px 15px 0px;
}

#gridInputForm label {
	width: 208px;
	text-align: left;
}

#gridInputForm label {
	padding-right: 5px;
}

.input-form-wrp label {
	padding-right: 20px;
}

#gridInputForm label + input,
#gridInputForm label + select,
.input-form-wrp label + input,
.input-form-wrp label + select {
	width: 200px;
	border: none;
	border-radius: 0;
	padding-left: 10px;
	line-height: 20px;
}

#gridInputForm label.center-aligned-label {
    padding: 0 20px;
	text-align: center;
}

#gridInputForm button,
.input-form-wrp button,
.custom-import-btn,
.form-btn-wrp input[type="submit"] {
	display: inline-block;
	min-width: 220px;
	border: 3px solid #0af;
	border-radius: 5px;
	padding: 10px 15px;
	background-color: #000;
	color: #0af;
	font-size: 16px;
	text-transform: uppercase;
	transition: all .2s ease;
}

#gridInputForm button:hover,
#gridInputForm button:active,
#gridInputForm button:focus,
.input-form-wrp button:hover,
.input-form-wrp button:active,
.input-form-wrp button:focus,
.custom-import-btn:hover,
.custom-import-btn:active,
.custom-import-btn:focus,
.form-btn-wrp input[type="submit"]:hover,
.form-btn-wrp input[type="submit"]:active,
.form-btn-wrp input[type="submit"]:focus {
	background-color: #0af;
	color: #fff;
}

.custom-import-btn {
    text-align: center;
    font-weight: normal;
}

.custom-import-btn:hover {
    cursor: pointer;
}

.form-btn-wrp button,
.custom-import-btn {
	margin: 20px auto;
}

#importInput {
    display: none;
}

.image-percentages-txt-label {
    font-weight: bold;
}

.image-percentages-txt-inner-wrp {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

#codeOutputContainer {
	max-width: 90%;
	margin: 0 auto 50px;
	font-size: 10px;
}

#tilesPreviewWrp.visible {
	margin-bottom: 50px;
}

#tilesPreviewContainer {
	display: flex;
	flex-wrap: wrap;
}

.tileset-preview-title {
    width: 100%;
    text-align: center;
    padding: 0 25px 20px;
}

.preview-tile {
	margin: 5px;
}

.preview-tile img {
	max-width: 145px;
	height: auto;
}

#gridContainer {
	margin-bottom: 100px;
}

#gridContainer .grid-row {
	display: flex;
}

/*#gridContainer .grid-row > div {
	border: 1px solid #000;
}*/

.grid-tile {
	line-height: 0;
}

#gridContainer[tileset-id="tileSetRiverSystem"] .grid-tile:nth-child(2n)[tile-ref-id="01"] img {
  transform: rotate(180deg);
}

#gridContainer[tileset-id="tileSetRiverSystem"] .grid-tile:nth-child(3n)[tile-ref-id="01"] img {
  transform: rotate(180deg) scaleX(-1);
}

#gridContainer[tileset-id="tileSetRiverSystem"] .grid-tile:nth-child(4n)[tile-ref-id="01"] img {
  transform: scaleX(-1);
}

/* ------------------------- TOOL PAGES: Character Sheet Generator ------------------------- */
.generated-character-sheet-wrp {
    background-image: url('/sites/default/files/scroll-pattern.jpg');
}

.input-form-wrp .row + .row,
.generated-character-sheet-wrp .row + .row {
	margin-top: 25px;
}

.input-form-wrp .row + .row.expand-area-btn-wrp {
    margin-top: 0;
}

.expand-area-btn-wrp .form-btn-wrp {
    position: relative;
    background-color: #0af;
    background-image: linear-gradient(160deg, #000, #05f, #000);
}

.expand-area-btn-wrp .form-btn-wrp:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(160deg, #0af, #05f, #0af);
    transition: all .3s ease;
}

.expand-area-btn-wrp .form-btn-wrp:hover:after {
    opacity: 0;
}

.form-btn-wrp > div {
    text-align: center;
}

.expand-area-btn-wrp .form-btn-wrp button {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 25px;
    background-color: transparent;
    color: #fff;
    font-size: 20px;
    text-shadow: 0px 0px 5px #555;
    transition: all .3s ease;
}

.expand-area-btn-wrp .form-btn-wrp button:hover {
    text-shadow: 0px 3px 0px #000;
}

.color-field-wrp {
	display: inline-flex;
	flex-direction: column;
    align-items: start;
	max-width: 100%;
	margin-bottom: 10px;
/*	border-radius: 5px;*/
/*	padding: 3px;*/
    padding: 1px;
	background-color: #08f;
/*	background-image: linear-gradient(160deg, #08f, #05f, #09f, #0cd, #8f9, #fff);*/
}

.color-field-wrp label {
	min-width: 125px;
	margin: 0;
	padding: 0 10px 0 6px;
	text-shadow: 0px 0px 5px #555;
}

.input-form-wrp label + input,
.input-form-wrp label + select {
	width: 100%;
}

.color-field-wrp input,
.color-field-wrp select,
.color-field-wrp textarea {
	background-color: #000;
	color: #fff;
}

.color-field-wrp textarea {
    max-width: 100%;
    border: 3px solid #000;
}

.color-field-wrp select {
	padding-top: 2px;
}

.color-field-wrp input[type="checkbox"] {
  width: auto;
  margin-right: 10px;
  cursor: pointer;
}

.color-field-wrp input[type="radio"],
.color-field-wrp .radio-option-wrp + label {
    cursor: pointer;
	text-shadow: 0px 0px 5px #000;
}

.under-input-notes {
    margin: 0 6px;
    font-size: 12px;
}

.radio-selectors-wrp {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    max-width: 550px;
}

.radio-option-wrp {
    display: inline-block;
    width: 24px;
    background-color: #000;
    text-align: center;
}

.radio-option-wrp:first-of-type {
    padding-top: 2px;
}

.radio-option-wrp:last-of-type {
    padding-bottom: 2px;
}

.radio-option-wrp + label {
    width: calc( 100% - 46px);
}

.txt-spacer {
    margin-left: 10px;
}

#moreClassesArea,
#moreAttacksArea {
    margin-top: 25px;
    margin-bottom: 0;
    transition: all 1s ease;
}

#moreClassesArea.visible,
#moreAttacksArea.visible {
    margin-bottom: 25px;
    transition: all 2s ease;
}

.animate-appear {
    max-height: 0;
    overflow: hidden;
    transition: all .5s ease;
}

.animate-appear.visible {
    max-height: 2000px;
    transition: all 1s ease;
}

#showTotalSP {
    padding: 0 10px;
    background-color: #000;
    font-size: 24px;
}

#spWarning {
    float: right;
    display: block;
    transition: all .2s ease;
}

#spWarning.warn {
    float: none;
    position: fixed;
    top: 40vh;
    right: 12%;
    z-index: 200;
}

.side-warning-top-wrp {
    display: inline-flex;
    width: 100%;
}

.side-warning-top-wrp label {
    flex-grow: 2;
}

.alert-txt {
    color: #f00;
}

#ranksWarning > div {
    margin-top: 3px;
    padding: 2px 10px;
    background-color: #000;
    font-size: 16px;
}

#ranksWarning > div:empty {
    display: none;
}

#ranksWarning p {
    margin: 0;
}

/* ------------------------- TOOL PAGES: Character Sheet Generator (Character Sheet Area) ------------------------- */
#containerCharSheet {
    margin-top: 25px;
}

.generated-character-sheet-wrp {
    padding: 65px 35px 80px;
    background-color: #fff;
    color: #000;
}

.generated-character-sheet-wrp fieldset {
    border: 1px solid #000;
}

.generated-character-sheet-wrp legend {
    border: 3px solid #000;
    background-color: #fff;
    background-image: url('/sites/default/files/scroll-pattern.jpg');
    color: #000;
}

.generated-character-sheet-wrp h2 {
    margin-top: 0;
    color: #000;
}

.small-side-info {
    float: right;
    max-width: 40%;
    margin: 0 20px 15px 20px;
    border: 1px solid #000;
    padding: 15px 20px;
}

.small-side-info.portrait-wrp {
    margin: 0 10px 15px 20px;
    border: none;
    padding: 0;
}

.portrait-wrp img {
    --s: 10px; /* control the size */
    border: calc(2.1*var(--s)) solid #0000;
    padding: var(--s);
    outline: 1px solid #000;
    outline-offset: calc(-1*var(--s));
    background: conic-gradient(from 90deg at 1px 1px,#0000 25%,#000 0);
}

.large-num {
    font-size: 22px;
}

.small-txt {
    font-size: 12px;
}

.monoclass {
    font-size: 22px;
    font-weight: bold;
}

.p-subnotes {
    margin-left: 10px;
    border-left: 1px solid #000;
    padding-left: 10px;
}

.row-col-spells {
    margin-top: 30px;
}

.col-spells {
    flex-basis: 100%;
    padding: 0 25px;
}

p.spell-dc {
    border: 1px solid #000;
    text-align: center;
}

.col-spells:nth-of-type(2) {
    margin-top: 25px;
}

.col-spells:nth-of-type(1n+2) {
    margin-top: 25px;
}

/* ------------------------- BLOCK: Character Sheet Sidebar Links ------------------------- */
.sidebar-links ul {
    margin: 0;
    padding: 0;
    background-color: #000;
    list-style: none;
}

.sidebar-links li {
    font-size: 14px;
}

.sidebar-links li + li {
    margin-top: 2px;
}

.sidebar-links li a {
    display: block;
    padding: 5px 20px;
    background-color: #08f;
/*    background-image: linear-gradient(160deg, #0af, #05f, #0af);*/
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 5px #555;
    transition: all .3s ease;
}

.sidebar-links li a:hover,
.sidebar-links li a:active,
.sidebar-links li a:focus {
/*	background-image: linear-gradient(160deg, #08f, #05f, #09f, #0cd, #8f9, #fff);*/
    background-image: linear-gradient(160deg, #0af, #05f, #0af);
	text-decoration: none;
}

/* ------------------------- TOOL PAGES: Equipment List Generator ------------------------- */
#genEquipList .tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

#genEquipList .tabs li {
    flex-grow: 1;
}

#genEquipList .tab-link {
    display: block;
    border: 1px solid #0af;
    padding: 10px 20px;
    background-color: #08f;
    color: #fff;
    text-shadow: 0px 0px 5px #555;
    text-decoration: none;
    transition: all .2s ease;
}

#genEquipList .tab-link.active,
#genEquipList .tab-link:hover {
    background-color: #05e;
}

#genEquipList .tab-content {
    width: 0;
    height: 0;
    margin: 0 auto;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
    transition: width .4s ease;
}

#genEquipList .tab-content:first-child {
    width: 100%; /* Show the first tab content by default */
    height: auto;
}

#genEquipList .tab-content input {
    padding-left: 10px;
}

#genEquipList .tab-content br + label {
    margin-top: 15px;
}

#outputGenEquipList {
    margin-top: 25px;
}

#outputGenEquipList table td + td {
    padding-left: 25px;
}

/* ------------------------- TOOL PAGES: Dice Roller ------------------------- */
#diceForm {
    max-width: 450px;
    margin: 0 auto;
}

#diceForm + #output{
    max-width: 450px;
    margin: 25px auto 0;
}

/* ------------------------- TOOL PAGES: HP Calculator ------------------------- */
#calcHPForm {
    width: 450px;
    margin: 0 auto;
}

#outputCalcHP {
    display: flex;
    justify-content: center;
}

#outputCalcHP td {
    padding: 5px 5px 5px 0;
    font-size: 20px;
}

#outputCalcHP td + td {
    padding: 5px 0 5px 5px;
}

.hp-breakdown {
    font-size: 16px;
}

/* ------------------------- FOOTER ------------------------- */
footer ul.menu--main {
	float: none;
}

@media (max-width: 767px) {
    .main-container section.col-sm-12,
    #characterForm > .container-fluid,
    #characterForm > .container-fluid > .row > .col-xs-12,
    #characterForm > .container-fluid > .animate-appear > .row > .col-xs-12 {
        padding-left: 0;
        padding-right: 0;
    }

    #characterForm > .container-fluid > .row,
    #characterForm > .container-fluid > .animate-appear > .row {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 991px) {
    #charSheetInputForm div[class*="col-lg-"] + div[class*="col-lg-"],
    #containerCharSheet div[class*="col-lg-"] + div[class*="col-lg-"] {
        margin-top: 25px;
    }
}

@media (min-width: 768px) {
    /* ------------------------- SEARCH ------------------------- */
    .page-node-type-tool-page #block-truebacklog-searchform #search-block-form {
    	width: 350px;
    }

    /* ------------------------- BLOCK: Character Sheet Sidebar Links ------------------------- */
    .sidebar-links {
        position: fixed;
        top: 50%;
        top: max(400px, 50%);
        left: 25px;
        z-index: 100;
        max-width: calc(24% - 25px);
        transform: translateY(-50%);
    }
}

@media (min-width: 992px) {
    /* ------------------------- TOOL PAGES: Map Generator ------------------------- */
	.grid-input-form-inner-right-area-wrp {
		padding: 15px 0;
	}

	.form-btn-wrp {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}
	
	.form-btn-wrp button,
	.custom-import-btn {
		margin: 20px 10px;
	}

    /* ------------------------- TOOL PAGES: Character Sheet Generator ------------------------- */
	.color-field-wrp {
	    flex-direction: row;
	}

    .input-form-wrp label + input {
        width: 200px;
    }

    .input-form-wrp label + select {
    	width: auto;
    }
    
    /* ------------------------- TOOL PAGES: Equipment List Generator ------------------------- */
    #genEquipList .tab-content label {
        min-width: 380px;
    }

    #genEquipList .tab-content br + label {
        margin-top: 0;
    }
}

@media (min-width: 1200px) {
    /* ------------------------- TOOL PAGES: Character Sheet Generator (Character Sheet Area) ------------------------- */
    .col-spells {
        flex-basis: 50%;
    }

    .col-spells:nth-of-type(2) {
        margin-top: 0;
    }

    /* ------------------------- BLOCK: Character Sheet Sidebar Links ------------------------- */
    .sidebar-links {
        max-width: calc(15% - 25px);
    }
    
    /* ------------------------- TOOL PAGES: Equipment List Generator ------------------------- */
    #genEquipList .tab-content label {
        min-width: 440px;
    }

    #outputGenEquipList {
        margin-top: 0;
    }
}