.editorjs-header-align-left {
	text-align: left;
}
.editorjs-header-align-center {
	text-align: center;
}
.editorjs-header-align-right {
	text-align: right;
}
		
		/* pointer */
.pointer-cursor {
	cursor:pointer;
}
.navigateElement {
	cursor:pointer;
}

.schBtn {
	display:inline-block;
	cursor:pointer;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.whitespace { 
    white-space: pre-wrap; 
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.optionsDivider {
	border-bottom: 1px solid gray;
}

/* CKEditor */ 
.image {
	display: table;
	clear: both;
	text-align: center;

	/* Make sure there is some space between the content and the image. Center image by default. */
	margin: 1em auto;
}

.image img {
		/* Prevent unnecessary margins caused by line-height (see #44). */
		display: block;

		/* Center the image if its width is smaller than the content's width. */
		margin: 0 auto;

		/* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */
		max-width: 100%;

		/* Make sure the caption will be displayed properly (See: https://github.com/ckeditor/ckeditor5/issues/1870). */
		min-width: 50px;
	}


.image > figcaption {

	caption-side: bottom;
	word-break: break-word;
	color: hsl(0, 0%, 20%);
	background-color: hsl(0, 0%, 97%);
	padding: .6em;
	font-size: .75em;
	outline-offset: -1px;
}

.ck.ck-image-insert__panel {
	padding: var(--ck-spacing-large);
}

.image.image_resized {
	max-width: 100%;
	/*
	The `<figure>` element for resized images must not use `display:table` as browsers do not support `max-width` for it well.
	See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
	Fortunately, since we control the width, there is no risk that the image will look bad.
	*/
	display: block;
	box-sizing: border-box;

}
.image.image_resized img {
		/* For resized images it is the `<figure>` element that determines the image width. */
		width: 100%;
	}

figure > figcaption {
		/* The `<figure>` element uses `display:block`, so `<figcaption>` also has to. */
		display: block;
	}

.elementOptionsDropdown {
	cursor:pointer;
}

:root {
	--ck-image-style-spacing: 1.5em;
}

.image-style-side {
		float: right;
		margin-left: var(--ck-image-style-spacing);
		max-width: 50%;
	}

.image-style-align-left {
		float: left;
		margin-right: var(--ck-image-style-spacing);
	}

.image-style-align-center {
		margin-left: auto;
		margin-right: auto;
	}

.image-style-align-right {
		float: right;
		margin-left: var(--ck-image-style-spacing);
	}

/* CKEDITOR text formats */
.text-tiny {
	font-size: 80%;
}
.text-small {
    font-size: 90%; 
}
	.tooltip-inner {
			background-color: darkslateblue !important;
			color:white !important;
			max-width:500px !important;
		}
	
		/* DataTables re-order styling */
		table.dt-rowReorder-float{position:absolute !important;opacity:0.2; table-layout:fixed; background-color:rgba(146,146,146,0.52); outline:2px solid #337ab7; outline-offset:-2px; z-index:2001}
		tr.dt-rowReorder-moving{outline:2px solid #888;outline-offset:-2px;}
		body.dt-rowReorder-noOverflow{overflow-x:hidden}
		table.dataTable td.reorder{text-align:center;cursor:move}
	
		iframe[id^='twitter-widget-0'] {
			 /*height:600px !important;*/
			 margin-bottom:10px !important;
			 width:100% !important;
		}
	
		.variableContent {
			background-color:yellow; 
			color: black; 
			border: solid thin black; 
			padding:5px;
			text-align:center; 
			font-size:x-large;
		}

/*	 CHECKBOX STYLING 
	input[type="checkbox"]{
  appearance:none;
width: 66px;
    height: 28px;  border:1px solid #aaa;
  border-radius:2px;
  background:#ebebeb;
  position:relative;
  display:inline-block;
  overflow:hidden;
  vertical-align:middle;
  transition: background 0.3s;
  box-sizing:border-box;
}
input[type="checkbox"]:after{
  content:'';
  position:absolute;
  top:-1px;
  left:-1px;
  width:33px;
  height:28px;
  background:white;
  border:1px solid #aaa;
  border-radius:2px;
  transition: left 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  text-align:center;
}
input[type="checkbox"]:checked{
  background:#a6c7ff;
  border-color:#8daee5;
}
input[type="checkbox"]:checked:after{
  font-family: 'Font Awesome 5 Pro'; 
  left:33px;
  border-color:#8daee5;
  content:'\f00c';
  color:green;
  font-weight:bold;
  
}

input[type="checkbox"]:hover:not(:checked):not(:disabled):after,
input[type="checkbox"]:focus:not(:checked):not(:disabled):after{
  left:0px;
}

input[type="checkbox"]:hover:checked:not(:disabled):after,
input[type="checkbox"]:focus:checked:not(:disabled):after{
  left:33px;
}

input[type="checkbox"]:disabled{
  opacity:0.5;
}*/

audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #b1cce7;
-webkit-box-shadow:  2px 2px 4px 0px #b1cce7;
box-shadow: 2px 2px 4px 0px #b1cce7;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}
    audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #b1cce7;
-webkit-box-shadow:  2px 2px 4px 0px #b1cce7;
box-shadow: 2px 2px 4px 0px #b1cce7;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}
    audio::-webkit-media-controls-panel {
        background-color:white;
    }