@import url(https://fonts.googleapis.com/icon?family=Material+Icons&display=swap);

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

:root {
  interpolate-size: allow-keywords;
}

html {
	padding: 0;
	margin: 0;
	border: 0;
	scroll-behavior: smooth;
	width: 100%;
	min-height: 100vh;
}

body {
	padding: 0;
	margin: 0;
	border: 0;

	width: 100%;
	min-height: 100dvh;
	
	background-color: rgba(255,255,255,1.00);
	color: rgba(100,100,100,1.00);
	font-family: 'Arial';
	font-weight: normal;
	
}

button {
	vertical-align: middle;
}

button img{
	height: 1.5em;
}
.button-container {
	display: flex;
}

h1, .h1 {
	margin: 0;
	font-family: 'Arial';
	text-align: left;
	color: rgba(0,0,0,1.00);
}

h2, .h2 {
	margin: 0;
	font-family: 'Arial';
	color: rgba(80,80,80,1.00);
}

h1 + h2 {
	margin-bottom: 1em;
}

h3 {
	color: rgba(80,80,80,1);
}

iframe {
	border: none;0
}

p {
	margin: 0 0 1em 0;
}

img, svg {vertical-align: top;}

label{
	font-weight: bold;
}

.tbl{display: table}
.tr{display: table-row}
.td{display: table-cell; vertical-align: top;}



/* ---------------------------------- NL CONTAINER ----------------------------------------- */

#editor {
	outline: none;
	margin: 0;
	tab-size: 3;
	min-height: 100%;
	font-size: 10pt;
}
#editor * {
	color: white!important;
}
#editor table {
	border: 1px dotted rgba(255,255,255,0.5);
	border-width: 1px 0 0 1px;
	border-collapse: collapse;
}
#editor table td {
	border: 1px dotted rgba(255,255,255,0.5);
	border-width: 0 1px 1px 0;
	height: 1em;
}
.imgTable {
	text-align: center;
	font-size: 85%; 
	font-style: italic;
	margin-bottom: 1em;
}
.imgTable img {
	max-width: 100%;
}
.imgTable td {
	padding: 0 20px;
}

.edit .new-date-container{
	position: fixed;
	top: 0;
	left: -10000px;
	width: 100%;
	height: 100dvh;
	background-color: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	text-align: center;
	opacity: 0;
	transition: opacity 0.5s 0s, left 0s 0.5s;
}
.new-date-container.visible{
	left: 0;
	opacity: 1;
	transition: opacity 0.5s 0s, left 0s 0s;
}
.new-date-container > div {
	padding: 2em;
	background-color: rgba(200,200,200,1);
	filter: drop-shadow(0 0 50px black);
	border-radius: 5px;
	line-height: 2em;
}

.nl-container {
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: 1fr 1fr;
	gap: 0.5em 1em;
	padding: 1em;
	background-color: rgba(220,220,220,1);
	height: 100dvh;
}

.nl-controls {
	grid-row: 1;
	grid-column: 1 / 3;
	padding: 0;
	background-color: rgba(220,220,220,1);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nl-editor {
	background-color: black;
	color: white;
	height: 100%;
	overflow: hidden;
	padding: 0;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: 1fr;
}
.nl-editor .label {
	background-color: rgba(190,190,190,1.00);
	text-align: center;
	display: flex;
	justify-content: space-between;
}
.nl-editor #editor{
	position: relative;
	cursor: text;
	padding: 1em;
	overflow-y: auto;
}
.nl-editor #editor:empty::before{
	content: 'New Section';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3em;
	line-height: 1.2em;
	color: rgba(120,120,120,0.5);
}

.nl-preview {
	background-color: black;
}
.nl-preview table {
	border: 1px dotted rgba(0,0,0,0.5);
}
.volissinput {
	width: 4em;
}


/* --------------- BGM TEXT EDITOR ----------------------- */

.BGM-CMS-anchorEdit, .BGM-CMS-tableEdit {
   border: 1px solid rgb(200,200,200);
   background-color: rgba(240,240,240, 1);
	color: black;
   padding: 2px 1em;
   margin: 0 auto;
   text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.BGM-CMS-anchorEdit input, .BGM-CMS-tableEdit>input{
   border-width: 1px;
   border-style: solid;
   border-color: rgb(200,200,200);
   border-radius: 3px;
   line-height: 1.4em;
   padding: 0 5px;
	font-family: inherit;
	font-size: inherit;
}
.BGM-CMS-anchorEdit input{
	width: 30em;
	max-width: 100%;
}
.BGM-CMS-tableEdit{
   width: 100%;
}
.BGM-CMS-tableEdit input{
   width: 2em;
	text-align: center;
	vertical-align: text-bottom;
}
.BGM-CMS-tableEdit label{
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
	margin: 0 3px;
}
.BGM-CMS-tableEdit>div{
   display: inline-block;
   white-space: nowrap;
	vertical-align: middle;
}
.BGM-CMS-editor{
	position: relative;
   vertical-align: middle;
   height: auto;
   text-align: left;
	border-radius: 0;
	background-color: white;;
	border: none;
	display: inline-block;
}

.BGM-CMS-editor>div {
   position: absolute;
   left: 50%;
   top: 100%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   z-index: 2;
   height: 0;
   overflow: hidden;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
   padding: 0;
   width: 100%;
	font-size: 11pt;
}
.BGM-CMS-editor input[data-attr='insertRow'],
.BGM-CMS-editor input[data-attr='deleteRow'],
.BGM-CMS-editor input[data-attr='insertCol'],
.BGM-CMS-editor input[data-attr='deleteCol']{
	font-size: 1em!important;
}
.BGM-CMS-editor input[data-attr='deleteRow'],
.BGM-CMS-editor input[data-attr='deleteCol'],
.BGM-CMS-editor input[data-attr='deleteTable']{
	color: rgb(150,0,0);
}
.BGM-CMS-editor input[type=button]{
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 3px;
	padding: 0;
	text-align: center;
	background-color: rgba(200,200,200, 0);
	font-family: 'Material Icons';
	font-size: 19px;
	vertical-align: bottom;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
}
.BGM-CMS-editor input[type=button]:hover{
   background-color: rgba(200,200,200,1);
}
.BGM-CMS-editor input[type=button]:focus{
   outline: none;
   border: none;
}
.BGM-editor-btnClicked{
   background-color: rgb(50,50,50)!important;
   color: white;
}
.BGM-editor-btnClicked + div {
   height: auto;
	background-color: rgba(240,240,240);
}
.BGM-editor-btnDisabled{
   opacity: 0.5;
   pointer-events: none;
}
.BGM-editor-codeEnabled{
   background-color: rgb(50,50,50)!important;
   color: white;
}

.BGM-CMS-editor .image-container {
	overflow: auto;
   border: 1px solid rgb(200, 200, 200);
   background-color: rgba(240, 240, 240, 1);
	padding: 3px;
	white-space: nowrap;
	margin: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
}
.BGM-CMS-editor .image-container label > img{
	height: 150px;
}
.BGM-CMS-editor .image-container input[type=radio] {
	position: fixed;
	left: -10000px;
}
.BGM-CMS-editor .image-container label {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	border: 2px solid transparent;
	position: relative;
}
.BGM-CMS-editor .image-container label:has(input[type=radio]:checked) {
	border: 2px solid black;
}
.image-container label button{
	position: absolute;
	bottom: 5px;
	right: 5px;
	background-color: white;
	padding: 5px;
	border: none;
	filter: drop-shadow(0 0 10px black);
	opacity: 0;
	transition: all 0.5s;
	border-radius: 5px;
}
.image-container label:hover button{
	opacity: 1;
}
.image-container label button > img{
	width: 24px;
	height: 24px;
}

.upload-container{
	color: black;
	text-align: center;
	padding: 0 0 10px 0;
	border-bottom: 1px solid rgb(200, 200, 200);
}
.upload-container label {
	border: 1px solid rgb(150,150,150);
	padding: 3px 5px;
	border-radius: 5px;
	background-color: white;
	font-weight: normal;
	display: inline-block;
}
.upload-container input[type=file] {
	position: fixed;
	left: -10000px;
}

.BGM-CMS-editor .image-details{
	color: black;
	font-size: 80%;
	text-align: center;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.BGM-CMS-editor .image-detail-btns label {
	vertical-align: middle;
	display: inline-block;
	border: 1px solid transparent;
}
.BGM-CMS-editor .image-detail-btns label:has(input[type=radio]:checked) {
	border-color: black;
}
.BGM-CMS-editor .image-detail-btns input[type=radio] {
	position: absolute;
	left: -10000px;
}
.BGM-CMS-editor .image-details button {
	border: none;
	padding: 0;
}
.BGM-CMS-editor .image-details button img {
	height: 28px;
}


/* ------------------- IMAGE LIBRARY --------------------- */


.BGM-CMS-editor .image-library {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	max-height: none;
	background-color: rgba(0,0,0,0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(0,0);
}
.library-container {
	background-color: rgba(240,240,240,1);
	padding:2em;
	max-width: 100%;
	width: 1000px;
	max-height: 80dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	overflow: auto;
	border: 20px solid rgb(150,150,150);
	filter: drop-shadow(0 0 50px rgba(0,0,0,0.5));
	border-radius: 7px;
	background-image: linear-gradient(30deg, rgb(50,50,50), rgb(0,0,0),rgb(70,70,70));
}
.library-container figure{
	margin: 0;
	display: inline-table;
	position: relative;
}
.library-container figure button{
	position: absolute;
	bottom: 10px;
	right: 10px;
	background-color: white;
	padding: 5px;
	border: none;
	filter: drop-shadow(0 0 10px black);
	opacity: 0;
	transition: all 0.5s;
	border-radius: 5px;
}
.library-container figure:hover button{
	opacity: 1;
}
.library-container > figure > img {
	height: 175px;
	width: auto;
}


/*----------------------BGM ALERT BOX STYLES --------------------------------*/

.BGM-alert{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-display: flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	background-color: rgba(0,0,0,0.4);
	z-index: 2000000000;
	margin: 0!important;
}
.BGM-alert>div{
	position: relative;
	width: 95%;
    max-width: 600px;
	min-height: 250px;
	max-height: 50%;
	border: 1px solid rgb(200,200,200);
	background-color: white;
	padding: 5em 3em;
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.8);
	box-shadow: 0 0 15px rgba(0,0,0,0.8);
	color: black;
	font-family:inherit;
	margin: auto;
	border-radius: 0.5em;
	-webkit-display: flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.BGM-alert>div>div:nth-of-type(1){
	position: relative;
	width: 100%;
	background-color: rgb(250,240,240);
	overflow: auto;
	padding: 0.5em;
	color: black;
}
.BGM-alert>div>div:nth-of-type(2){
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.5em 0 0 0.5em;
	line-height: 1em;
	font-size: 2.6em;
	font-weight: lighter;
}
	.BGM-alert>div>div:nth-of-type(2) i{
		font-size: inherit;
		color: rgb(150,0,0);
	}
.BGM-alert>div>div:nth-of-type(3){
	position: absolute;
	right: 3em;
	bottom: 1em;
	white-space: nowrap;
	width: auto;
}
.BGM-alert>div>div:nth-of-type(3)>div{
	padding: 0.25em 2em;
	background-color: rgb(0,200,0);
	border-radius: 5px;
	color: white;
	font-weight: bold;
	cursor: default;
	margin-left: 0.5em;
	display:inline-block;
	text-align:center;
}
.BGM-alert>div>div:nth-of-type(3)>div:first-of-type{
	background-color: rgb(0,200,0);
	width: auto;
}
.BGM-alert>div>div:nth-of-type(3)>div:nth-of-type(2){
	background-color: rgb(200,0,0);
}