:root
{
	--waitwindow-shadow: rgba(0,0,0,0.5);
	--waitwindow-msg-bgcolor: #fff;
	--waitwindow-msg-textcolor: #000;
	--waitwindow-progressbar-bgcolor: #e0e0e0;
	--waitwindow-progress-bgcolor: #99CCCC;
	--waitwindow-progress-textcolor: #fff;
	--waitwindow-progress-iconcolor: #fff;
}

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

*:before,
*:after
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

iframe
{
	overflow: hidden;
}

html
{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;

}

body
{
    border: none;
    background-color: var(--body-bg-color);
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

html,
body,
table
{
    font-size: 14px;
    color: var(--body-text-color);
	font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}

body.dialog
{
    padding: 0 0 5em 0;
    background-color: var(--dialog-bg-color);
    height: auto;
    width: auto;
    overflow: auto;
}

body.dialog > fieldset,
body.dialog > .tabs,
body.dialog > form > fieldset,
body.dialog > form > .tabs,
body.dialog .dialogcontent
{
	margin: 1em;
}

hr
{
	border: 0;
	height: 1px;
	background-color: transparent;
	border-top: 1px solid rgba(0,0,0,0.2);
}

body.settings
{
    background-color: var(--settings-bg-color);
}

a
{
	color: var(--link-text-color);
}

.content-height
{
	width: 100%;
	height: 100%;
	position: relative;
}

.content-scroll
{
	width: 100%;
	height: 100%;
	overflow: auto;
	position: relative;
}

.content-height .content-scroll
{
	position: absolute;
	top: 0 ;
	left: 0 ;
	bottom: 0 ;
	right: 0 ;
	overflow: auto;
}

body.settings .content-scroll
{
	padding: 1em;
}

.hiddenarea,
.hidden
{
    display     : none;
}

.visiblearea
{
    z-index     : 4;
    visibility : visible
}

.pagetopbutton
{
	position: absolute;
	right: 1px;
	top: 1px;
	color: var(--titlebar-text-color);
}

.pagetopbutton.refresh
{
	right: 5px;
}

.pagetopbutton ~ .pagetopbutton
{
	right: 1.5em;
}

.pagetopbutton.fa-fw
{
	/* line-height: 1.8em; */
	line-height: 2em;
	font-size: inherit;
}

.subtitlebar
{
	position: relative;
	white-space: nowrap;
    color:  var(--subtitle-text-color);
    background-color:  var(--subtitle-bg-color);
    border-bottom: 1px solid var(--subtitle-border-color);
    padding: 3px;
    font-weight: normal;
}
.subtitlebar + .subtitlebar
{
    border-right: 1px dotted var(--subtitle-border-color);
}


.subtitlebar .toggle
{
	position: absolute;
	right: 4px;
	left: 30px;
	text-align: right;
	cursor: pointer;
}

#elementsTree span
{
	border-left: 1px solid #fff;
	border-right: 1px solid #666;
	padding: 2px;
	cursor: pointer;
}

#htmlpopup-editor
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-image: url('/_contentmgr2/editor/images/alpha50_black.gif');
	border: 1px solid red;
	text-align: center;
}

#htmlpopup-editor iframe
{
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
}

form
{
	display: inline;
}

.waitwindow
{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 40vh 0;
	background-color: var(--waitwindow-shadow);
	text-align: center;
	z-index: 1000;
}

.waitwindow .waitmsg
{
	margin: 1em auto;
	line-height: 2em;
	font-size: larger;
	font-weight: bold;
	border-radius: 1em;
	background-color: var(--waitwindow-msg-bgcolor);
	color: var(--waitwindow-msg-textcolor);
	width: 50%;
}


.waitwindow .progressbar
{
	margin: 1em auto;
	height: 2em;
	background-color: var(--waitwindow-progressbar-bgcolor);
	width: 50%;
	border-radius: 1em;
	overflow: hidden;
}

.waitwindow .progressbar-progress
{
	height: 2em;
	line-height: 2em;
	border-radius: 1em;
	background-color: var(--waitwindow-progress-bgcolor);
	color: var(--waitwindow-progress-textcolor);
}

.waitwindow:before
{
	content: "";
	display: inline-block;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	border: 5px solid var(--waitwindow-progress-iconcolor);
	border-left-color: transparent;
	-webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
    clear: both;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.msgs-placeholder
{
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1100;
}

.msgs-placeholder .msg
{
	position: relative;
	margin: 0.5em;
	padding: 1em 2em 1em 1em;
	background-color: #d9edf7;
	border: 1px solid #bce8f1;
	color: #31708f;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	border-radius: 5px;
}

.msgs-placeholder .msg-close
{
	font-size: 1.5em;
	position: absolute;
	top: 0.25em;
	right: 0.25em;
	cursor: pointer;
	width: 1em;
	height: 1em;
	text-align: center;
}

.msgs-placeholder .msg-title
{
	font-weight: bold;
	margin-bottom:0.5em;
}

.msgs-placeholder .msg-error
{
	background-color: #f2dede;
	border-color: #ebccd1;
	color: #a94442;
}

.msgs-placeholder .msg-warning
{
	background-color: #fcf8e3;
	border-color: #faebcc;
	color: #8a6d3b;
}

.msgs-placeholder .msg-success
{
	background-color: #dff0d8;
	border-color: #d6e9c6;
	color: #3c763d;
}

.isDirty::after
{
	content: "\00a0[Niet opgeslagen]";
	font-style:  italic;
	color: #800;
}

.clearfix,
.clear
{
	clear: both;
}