/* Write your custom CSS here */
@import url('https://fonts.googleapis.com/css2?family=Germania+One&display=swap');

body{
	overflow-y: scroll;
	font-family: "Open Sans", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 13px;
}
img{
	max-width: 100%;
}
*{
	scrollbar-width: thin;
}


/************************************************************************************************
	//	Custom
************************************************************************************************/

.center,
.centered{
	text-align: center;
}
.navbar.view-actions{
	top: 0;
	position: sticky;
	min-height: 0;
	z-index: 200;
}

.navbar.view-actions li{
	padding: 0;
}
.navbar.view-actions li a{
	padding: 1em 2em;
	margin: 0;
}
.navbar.view-actions li:hover{
	background-color: #2288AA22;
}

.page-header-fixed .page-sidebar, 
.page-sidebar-fixed .page-sidebar, 
.page-sidebar-fixed.page-header-fixed .page-sidebar{
	padding-top: 140px;
}
.page-sidebar-collapsed.page-header-fixed .page-sidebar, 
.page-sidebar-collapsed.page-sidebar-fixed .page-sidebar, 
.page-sidebar-collapsed.page-sidebar-fixed.page-header-fixed .page-sidebar{
	padding-top: 80px;
}

.page-sidebar-fixed .logo-box{
	text-align: center;
	border-bottom: 2px solid goldenrod;
	padding-bottom: 1em;
}
.page-sidebar-fixed .logo-box img{
	max-width: 50%;
	display: block;
	margin: 0 auto;
	clear: both;
}
.page-sidebar-collapsed .logo-box {
	padding: 20px 10px 20px;
	text-align: center;
	height: 80px;
}
.page-sidebar-collapsed.page-sidebar-fixed .logo-box img{
	max-width: 100%;
}
.dataTables_wrapper{
	min-width: 700px;
}

.page-inner{
	margin-top: 2em;
}

/******************************************************************************************
	//	Page TITLES
******************************************************************************************/
.panel-title{
	font-size: 24px;
	font-family: Germania One;
	color: darkgoldenrod;
}

/*******************************************************************************
	Tables
*******************************************************************************/
.panel.panel-white.stats-widget{
	padding: 15px;
}
.xt-view.xt-text .panel-white .panel-body table{
	margin-bottom: 1em;
}
.xt-view.xt-text .panel-white .panel-body table,
.xt-view.xt-text .panel-white .panel-body table td,
.xt-view.xt-text .panel-white .panel-body table th{
	border: 1px solid black;
	padding: 5px;
}
.xt-view.xt-text .panel-white .panel-body table th{
	background-color: #00000022;
}
.table > tbody > tr > td{
	padding: 10px;
}


/******************************************************************************************
	//	Admin Sidebar
******************************************************************************************/
li.active-page{
	background-color: steelblue;
}
li.active-page > a span{
	font-weight: bold;
	font-size: 1.2em;
}

li.active-page ul.sub-menu{
	display: block !important;
}
.accordion-menu .sub-menu li a{
	opacity: 1 !important;
}
/************************************************************************************************
	//	Editing
************************************************************************************************/
.editing-element-preview{
	position: sticky;
	top: 0;
}
.not-owned td.title{
/*	color: #BBB;*/
}
.xt-not-developer .not-owned td.title{
	color: #3d464c;
}
tr.active-NO td{
	color: #BBB;
}

.acf-fields > .acf-field.col-md-6,
.acf-fields > .acf-field.col-md-5,
.acf-fields > .acf-field.col-md-4,
.acf-fields > .acf-field.col-md-3,
.acf-fields > .acf-field.col-md-2,
.acf-fields > .acf-field.col-lg-9,
.acf-fields > .acf-field.col-lg-8,
.acf-fields > .acf-field.col-lg-7,
.acf-fields > .acf-field.col-lg-6,
.acf-fields > .acf-field.col-lg-5,
.acf-fields > .acf-field.col-lg-4,
.acf-fields > .acf-field.col-lg-3{
	clear: none;
}

.acf-fields > .acf-field[data-type="message"]{
	padding-top: 5px;
	padding-bottom: 0;
	border-bottom: 0;
}
.acf-fields > .acf-field[data-type="message"] .acf-label{
	font-size: 20px;
	margin-bottom: 0;
}


.acf-fields > .acf-field[data-type="message"].break{
	padding: 0;
	height: 0;
	overflow: hidden;
}

.acf-fields > .acf-field.new-row{
	clear: left;
}

.acf-input .acf-true-false .checker{
	display: none;
}

.button{
	border-radius: 4px;
	padding: 5px 16px;
	box-shadow: none!important;
}
.button.button-primary{
	border-color: gray;
	background-color: gray;
	color: white;
	transition: all .2s ease-in-out;
}
.acf-fields > .acf-field.acf-field-repeater .acf-actions{
	float: left;
	width: 100%;
	padding: 1em;
	display: block;
}

.display.table label{
	cursor: pointer;
}

.display.table .item-check,
.display.table .item-id{
	width: 60px;
	text-align: center;
}
.display.table .item-code{
	width: 80px;
	text-align: center;
	background-color: #1F2A4011;
}
.mon-list .mon-type{
	width: 70px;
	text-align: center;
}
.display.table .action-buttons{
	text-align: center;
}

.display.table .action-buttons .element-action-links a{
	margin: 0 .5em;
}

.dataTables_length select{
	padding: .5em;
	margin: 0 1em;
}

.table thead,
.table tfoot{
	background-color: #1F2A40CC;
}
.table thead tr th,
.table tfoot tr th{
	color: #dce0ea;
}
.td-done{
	width: 100px;
}
.element-list-default th{
	text-align: center;
}

.dropdown-menu:before,
.dropdown-menu:after{
	display: none !important;
}

.dropdown-menu .fa{
	width: 1.5em;
}
.table-responsive.full-table{
	min-height: 75vh;
}

.milestone-table-responsive{
	width: 100%;
	overflow-x: scroll;
}
.milestone-table thead th{
	width: 200px;
}
.milestone-table.table tbody tr td{
	padding: 5px;
}
.milestone-table.table{
	margin-bottom: 0;
}



.writing-mode.xt-text .acf-form-submit{
	position: absolute;
	top: 20px;
	left: 50%;
	z-index: 100;
}
.writing-mode.xt-text .acf-form-submit .acf-button.btn{
	font-size: 1.2em;
}

.writing-mode.xt-text{
	padding-top: 0;
}
.mce-content-body{
	font-size: 2em;
}
/*******************************************************************************
	acf-fields
*******************************************************************************/
[data-name="chapters"] .acf-fields{
	
}

[data-name="chapters"] tbody{
	border-bottom: 15px solid steelblue;
}

[data-name="chapters"] div[data-name="title"] input{
	font-weight: bold;
}
.acf-fields .line-message{
	border-top: 15px solid steelblue;
	border-bottom: 15px solid steelblue;
}
[data-name="existing_monsters"]{
	background-color: #8FBC8F44;
}
.acf-row-handle.order:first-child{
	background-color: steelblue;
}
[data-name="srd_monsters"] .acf-row-handle.order:first-child,
.monster_prompt .acf-row-handle.order:first-child{
	background-color: #8FBC8F44;
}
.monster_prompt .acf-row .acf-fields{
	padding-bottom: 15px;
	border-bottom: 5px solid #8FBC8F44;
}
.acf-fields > .acf-tab-wrap .acf-tab-group li a{
	font-weight: normal;
	padding: 0 1em;
}
body .acf-button.btn-primary.btn.btn-block{
	background-color: steelblue !important;
}
/*******************************************************************************
	SPELLS
*******************************************************************************/
[data-name="existing_spells"]{
	background-color: #6A5ACD22;
}

.spell_prompt .acf-row-handle.order:first-child{
	background-color: #6A5ACD22;
}
.spell_prompt .acf-row .acf-fields{
	padding-bottom: 15px;
	border-bottom: 5px solid #6A5ACD22;
}

/*******************************************************************************
	Scalables
*******************************************************************************/
.scalable-monster{
	font-size: .9em;
}
.base-variant{
	background-color: #ABCABC44;
}
.damage-row{
	border-bottom: 2px solid lightgray;
	margin-bottom: .5em;
}

.xt-view.xt-mon table.scalable-monster.table thead tr th, 
.xt-view.xt-mon table.scalable-monster.table tfoot tr th{
	background-color: steelblue;
	color: whitesmoke;
	font-weight: bold;
}



/************************************************************************************************
	//	VIEWS
**********************************************************************************************
.xt-view.xt-prod .panel-white .col-sm-10,
.xt-view.xt-prod .panel-white .col-sm-2{
	padding-top: .5em;
	padding-bottom: .5em;
	border-bottom: 2px solid #5e7bb1;
}
.xt-view.xt-prod .panel-white .col-sm-2{
	text-align: right;
}
.xt-view.xt-prod .panel-white .col-sm-10{
	border-left: 2px solid #5e7bb1;
}
.xt-view.xt-prod .panel-white h4{
	padding: .5em 0;
	border-bottom: 2px solid #5e7bb1;
}
**/
.xt-view.xt-prod table th{
	text-align: center;
	background-color: #34567822;
}
.xt-view.xt-prod table td{
	text-align: center;
	vertical-align: middle;
}
.panel-body a:not(.btn){
	color: steelblue;
}

/*******************************************************************************
	PROMPTS
*******************************************************************************/
.monster-done{
	color: #AAAAAA;
}
.monster-done td{
	background-color: #00000011;
}


/************************************************************************************************
	//	COLs for VIEWS
************************************************************************************************/
.xt-view.xt-prod .row.row-flex{
	display: flex;
	flex-wrap: wrap;
}
.xt-view.xt-prod .row.row-flex > *{
	float: none; 
	display: flex;
	flex-grow: 1;
}
.xt-view.xt-prod .row.row-flex > * > .panel{
	width: 100%;
}

body.xt-edit.xt-text [data-name="name"] input{
	font-size: 1.5em;
	border: 1px solid #CCC;
}

/************************************************************************************************
	//	Writing Mode
************************************************************************************************/
.screen-management-menu .writing-mode{
	display: none;
}
.xt-edit.xt-text .screen-management-menu .writing-mode{
	display: block;
}
body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .editing-element-preview,
body.writing-mode.xt-edit.xt-text .page-inner .page-title,
body.writing-mode.xt-edit.xt-text .page-inner .acf-field[data-name="name"],
body.writing-mode.xt-edit.xt-text .page-inner .acf-label,
body.writing-mode.xt-edit.xt-text .logo-box,
body.writing-mode.xt-edit.xt-text .page-footer{
	display: none;
}

body .page-sidebar,
body .page-sidebar .logo-box,
body .page-sidebar .logo-box img{
	transition: all .5s;
}

body.writing-mode.xt-edit.xt-text .page-header{
	height: auto;
}

body.writing-mode.xt-edit.xt-text .acf-field[data-name="text"]{
}

body.writing-mode.xt-edit.xt-text .page-sidebar{
	width: 0;
	overflow: hidden;
}

body.writing-mode.xt-edit.xt-text .page-header{
	transition: all .5s;
	padding: 0;
	margin: 0;
}
body.writing-mode.xt-edit.xt-text.page-sidebar-fixed .page-content{
	margin-left: 0;
	width: 100%;
}
body.writing-mode.xt-edit.xt-text.page-sidebar-fixed .page-content,
body.writing-mode.xt-edit.xt-text.page-sidebar-fixed .page-content .page-header,
body.writing-mode.xt-edit.xt-text.page-sidebar-fixed .page-content .page-inner,
body.writing-mode.xt-edit.xt-text.page-sidebar-fixed .navbar.navbar-default{
	background: white !important;
}
body.writing-mode.xt-edit.xt-text.page-sidebar-fixed .page-content .page-inner .panel-white{
	padding-top: 5px;
	margin-top: 5px;
}
body.writing-mode.xt-edit.xt-text.page-sidebar-fixed .page-content .page-inner{
	padding: 0 15px;
	margin: 0;
}

body .page-inner #main-wrapper .col-lg-9.col-md-12{
	max-width: 100%;
	transition: all .5s;
}
body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .col-lg-9.col-md-12{
	margin: 0 auto;
	width: 100%;
	max-width: 900px;
	float: none;
}
body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .col-lg-9.col-md-12 .panel{
	padding: 0;
	border: 0;
}

body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .col-lg-9.col-md-12 .acf-field.acf-field-wysiwyg{
	height: calc( 100vh - 150px) !important;
}

body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .col-lg-9.col-md-12 .acf-field.acf-field-wysiwyg div.mce-edit-area.mce-container.mce-panel.mce-stack-layout-item,
body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .col-lg-9.col-md-12 .acf-field.acf-field-wysiwyg div.mce-edit-area.mce-container.mce-panel.mce-stack-layout-item > iframe{
	height: calc( 100vh - 350px) !important;
}

body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .acf-fields > .acf-field{
	border: 0;
}


body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .col-lg-8{
	width: 100%;
}
body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .col-lg-8 .panel-white{
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	border: 0;
}

body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .col-lg-8 .panel-white iframe,
body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .col-lg-8 .panel-white textarea{
	height: 70vh;
	min-height: calc(100vh - 200px );
	border: 0;
}
body.writing-mode.xt-edit.xt-text .page-inner #main-wrapper .col-lg-8 .panel-white .wp-editor-container{
	border: 0;
}


a[data-name="add"].acf-button{
	border-radius: 4px;
	padding: 5px 16px;
	box-shadow: none !important;
	border-color: steelblue;
	background-color: steelblue;
	transition: all .2s ease-in-out;
	color: white;
}


/*******************************************************************************
	TEXT EDITOR
*******************************************************************************/
.the-post-title{
	font-size: 2em;
	padding: 1em;
}
.note-editor.note-frame.panel.panel-default{
	padding: .1em;
}
.element-title{
	font-size: 1.7em;
	padding: 1em .7em;
	margin-bottom: 1em;
}
/*******************************************************************************
	SCREEN OPTIONS MENU
*******************************************************************************/



/************************************************************************************************
	//	Editing WP Fixes
************************************************************************************************/
.media-frame-toolbar .search-form{
	opacity: 1;
	margin-top: 0;
}
body .media-frame-toolbar{
	bottom: 45px;
}
body .media-frame-toolbar .media-toolbar{
	background-color: #f6f7f7;
	height: 100px;
}
body .media-frame-toolbar .search-form{
	background-color: #f6f7f7;
}
.media-selection .attachment .thumbnail{
	padding: 0;
	width: 40px;
	height: 40px;
}
body .media-frame-toolbar .media-selection:after{
	display: none;
}



/*******************************************************************************
	COLUMNS
*******************************************************************************/
.flex{
	display: flex;
	gap: 0.5em;
}
.flex-vertical{
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.flex .grow{
	flex-grow: 1;
}
.col-1{
	flex-basis: calc( 1% / 12 * 100 );
}
.col-2{
	flex-basis: calc( 2% / 12 * 100 );
}
.col-3{
	flex-basis: calc( ( 3% / 12 ) * 100 );
}
.col-4{
	flex-basis: calc( ( 4 / 12 ) * 100% );
}
.col-5{
	flex-basis: calc( 5% / 12 * 100 );
}
.col-6{
	flex-basis: calc( 6% / 12 * 100 );
}
.col-7{
	flex-basis: calc( 7% / 12 * 100 );
}
.col-8{
	flex-basis: calc( 8% / 12 * 100 );
}
.col-9{
	flex-basis: calc( 9% / 12 * 100 );
}
.col-10{
	flex-basis: calc( 10% / 12 * 100 );
}
.col-11{
	flex-basis: calc( 11% / 12 * 100 );
}
.col-12{
	flex-basis: 100%;
}
.my{
	margin: .5em 0;
}
.checkboxes{
	text-align: left;
}

/*******************************************************************************
	OSR Statblocks
*******************************************************************************/
.osr-mon{
	width: 400px;
	max-width: 100%;
	margin: 1em auto;
	border: 1px solid black;
	padding: .3em;
}
.osr-mon.variants{
	width: 100%;
}
.osr-mon.variants h3{
	font-size: 1.2em;
	font-weight: normal;
}

.osr-mon .definitions{
	margin-top: .5em;
	border: 1px solid black;
	padding: 1em;
}
.osr-mon.variants .definitions{
	column-count: 2;
	column-gap: 1em;
}
.osr-mon .definitions dl{
	margin-bottom: 0;
}
.osr-mon .definitions dl dt:after{
	content: ':';
	break-after: avoid-column;
}
.osr-mon .definitions dl dd{
	padding-left: 2em;
	break-before: avoid-column;
	break-inside: avoid-column;
}

.osr-mon .definitions dl dt span{
	font-weight: normal;
	font-style: italic;
}

.osr-monster-separator{
	margin: 2px;
	padding: 0;
	border-top: 2px solid slategray;
}

.osr-monster-table{
	width: 100%;
}

.osr-monster-table,
.osr-monster-table td{
	border: 1px solid white;
}
.osr-monster-table td{
	height: 2.5em;
	padding: .3em 1em;
	font-size: .9em;
}

.osr-monster-table tbody tr:nth-child(odd){
	background-color: #00000011;
}
.osr-monster-table:first-child td:nth-child(1){
	font-weight: bold;
}
/*
.osr-monster-table:first-child td:nth-child(3),
.osr-monster-table:not(:first-child) td:nth-child(2){
	background-color: #99999922;
}
*/
.osr-monster-table td{
	text-align: center;
}
.osr-monster-table td:first-child{
	text-align: right;
}
.osr-monster-table thead th{
	text-overflow: ellipsis;
	white-space: nowrap;
}
.osr-mon.variants .osr-monster-table tbody td:first-child{
	width: 20%;
}
.osr-mon.variants .osr-monster-table{
	table-layout: fixed;
}

.osr-monster-table h3{
	text-align: center;
	margin: .1em;
	font-family: Germania One;
	padding: .2em .5em;
}

.osr-mon .generic-element{
	border: 1px solid black;
	padding: .5em;
}
.osr-mon .generic-element label{
	display: none;
}

.variants-container .single-variant{
	background-color: #34568811;
	padding: .5em 1em;
	margin: .5em 0;
}

.osr-monster.dragon-wrapper .variant-tables{
	display: flex;
	column-gap: 0;
}



/************************************************************************************************
	//	Element List
************************************************************************************************/
.element-list .products{
	text-align: center;
}
.element-list.table>tbody>tr>td{
	padding: .3em .4em;
}
.element-list.table>tbody>tr>td:nth-child(odd){
	background-color: #4682b422;
}
.list-element{
	padding: 1em;
	margin-bottom: 1em;
	background-color: #4682b422;
}
.list-element textarea{
	min-height: 80px;
}
.list-element:first-child .move-up{
	display: none;
}
.list-element:last-child .move-down{
	display: none;
}

/*******************************************************************************
	Admin Bar
*******************************************************************************/
.admin-bar{
	min-height: 3em;
	width: 100%;
	padding: 1em;
	background-color: lightsteelblue;
	margin-bottom: 1em;
}
/************************************************************************************************
	//	ICONS
************************************************************************************************/
.fa.alert-success,
.fa.alert-default,
.fa.alert-info,
.fa.alert-danger,
.fa.alert-warning{
	background-color: transparent;
}

@media screen and (max-width: 650px) {
	.page-inner,
	.page-inner:not(.login-page){ 
		padding: 20px;
	}
}
@media screen and (min-width: 950px) {
	.table-responsive{
		overflow: visible;
	}
}

/*******************************************************************************
	Dashboard
*******************************************************************************/
.task-list .task-item,
.task-list .task-item:last-child{
	border: 2px solid #5599CC99;
	margin: 1em 0;
	border-radius: 3px;
	padding: 1em;
}
.task-list .task-item .progress{
	height: 15px;
}
.progress-bar{
	font-size: .9em;
	line-height: 15px;
}


/*******************************************************************************
	PRINT
*******************************************************************************/

@media print{
	html,body{
		padding-top: 0;
		background-color: white;
		font-size: 11px;
	}
	.body-container.container,
	.app-content,
	.col-xl-10,
	.row.justify-content-center{
		padding: 1em !important;
		width: 100% !important;
	}
	.new-monster-stats{
		margin-top: 1em;
		page-break-after: always;
		width: 100%;
	}

	.main-menu,
	.main-nav-menu.nav-menu.text-center,
	.crystal-color.crystal-bordered,
	footer,
	.top-navbar,
	.nav-actions,
	.filter-content{
		display: none;
	}
	.logo-box{
		display: none;
	}
	.new-monster-stats{
		background-color: white;
	}
}