*											{font-family:Roboto, sans-serif;box-sizing:border-box;}

html										{position:relative;display:block;height:100%;}
body										{position:relative;display:block;}
body										{margin-left:100px;padding:100px 30px 20px;background:#F5F5F5;}

.pointer									{cursor:pointer;}
.silver										{color:silver;}
.color										{color:#FF6600;}

header										{position:fixed;top:0;left:0;bottom:0;width:100px;background:#FF6600;padding:20px 10px;z-index:100;box-shadow:0 0 5px rgba(0, 0, 0, 0.25);}
header nav a								{display:block;color:white;font-size:14px;font-weight:300;text-decoration:none;text-align:center;opacity:0.9;margin-bottom:50px;}
header nav a:hover							{text-decoration:none;opacity:1;color:white;}
header nav a i.fa							{display:block;font-size:36px;margin:10px 0;}
header .container							{display:none;}

#menu										{display:none;position:fixed;top:0;right:0;width:80px;height:80px;line-height:80px;color:#FF6600;font-size:32px;text-align:center;z-index:101;}

h1											{font-family:Orbitron;font-size:24px;font-weight:700;position:fixed;top:0;left:100px;right:0;height:80px;line-height:80px;background:rgba(255, 255, 255, 0.8);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:0 45px;z-index:100;color:#303030;box-shadow:0 0 5px rgba(0, 0, 0, 0.25);}
h2											{font-family:Orbitron;font-size:18px;font-weight:700;color:#909090;}
h3											{font-family:Orbitron;font-size:18px;font-weight:700;color:#B0B0B0;}

fieldset									{position:relative;background:white;padding:60px 35px 25px;margin:10px 10px 30px;border-radius:5px;box-shadow:0 2px 5px rgba(0, 0, 0, 0.15);overflow:hidden;}
fieldset > *								{position:relative;z-index:10;}
fieldset legend								{position:absolute;display:block;top:0;left:15px;right:15px;width:auto;font-family:Orbitron;text-transform:uppercase;font-weight:700;font-size:18px;line-height:30px;padding:20px 40px 0 20px;color:#FF7700;white-space:nowrap;}
fieldset legend i.fa						{position:absolute;display:block;top:15px;right:0px;height:120px;text-align:center;color:rgba(0, 0, 0, 0.05);font-size:150px;z-index:-1;}

fieldset .form-control[readonly],
fieldset .form-control						{border-color:transparent;background:rgba(255, 255, 255, 0.65);}
fieldset #form_username,
fieldset #form_password						{box-shadow:inset 0 0 0 25px white !important;}

fieldset div.form-control					{height:auto;background:none;}

/* Knoppen */
#buttons									{position:fixed;z-index:100;top:20px;height:35px;left:140px;right:40px;text-align:center;}
#buttons .buttons							{display:inline-block;}
#buttons .divider							{display:inline-block;border-left:1px solid #E0E0E0;width:0;height:25px;margin:0 7px;vertical-align:middle;}
fieldset .buttons							{position:absolute;top:-45px;left:0;right:0;text-align:right;}
fieldset button.btn							{cursor:pointer;text-transform:uppercase;border-color:#D0D0D0;background:white;}
fieldset button.btn.back					{position:absolute;top:0;left:-32px;background:none;border:none;color:#D0D0D0;padding:.375rem .5rem;cursor:pointer;}
#buttons button i,
fieldset button i							{margin-right:5px;}
fieldset button.btn.back i					{margin:0;}
fieldset button.btn.back:hover				{background:none;border:none;color:#6C757D;}

.table-form									{table-layout:fixed;width:100%;}
.table-form th,
.table-form td								{width:auto;}
.table-form tbody th label					{margin-top:8px;cursor:pointer;}
.table-form tbody .form-control				{border-color:transparent;}
.table-form tbody .cke_1					{padding:3px;}
.table-form tbody .cke_1,
.table-form tbody select.form-control,
.table-form tbody input.form-control,
.table-form tbody textarea.form-control,
.table-form tbody div.form-editable.form-control
											{border-color:#F0F0F0;box-shadow:none;border-radius:.25rem;}
.table-form tbody textarea.form-control		{height:110px;min-height:37px;}
.table-form tbody .cke_1:hover,
.table-form tbody .cke_1:focus,
.table-form tbody select.form-control:hover,
.table-form tbody input.form-control:hover,
.table-form tbody textarea.form-control:hover,
.table-form tbody select.form-control:focus,
.table-form tbody input.form-control:focus,
.table-form tbody textarea.form-control:focus,
.table-form tbody div.form-editable.form-control:focus,
.table-form tbody div.form-editable.form-control:hover
											{outline:none;border-color:#C0C0C0;box-shadow:none;}

.table-data thead                           {vertical-align: top;}
.table-data thead th						{border-bottom:1px solid #C0C0C0;}
.table-data thead th.sort					{cursor:pointer;}
.table-data thead th.sort-asc:before		{font-family:"FontAwesome";content:"\f063";float:left;color:#FF6600;margin-right:8px;}
.table-data thead th.sort-desc:before		{font-family:"FontAwesome";content:"\f062";float:left;color:#FF6600;margin-right:8px;}
.table-data tbody tr						{cursor:pointer;}
.table-data tbody tr:hover					{background:rgba(0, 0, 0, 0.05);}
.table-data .row-bold td					{font-weight:bold;}

.table-paging-buttons						{margin-top:10px;text-align:center;}
.table-paging-buttons input.selected 		{color:#FF6600;}

.textcomplete-field i						{cursor:pointer;}
.textcomplete-field textarea				{display:none;}
.textcomplete-condition						{width:100%;border:1px solid silver;line-height:20px;font-size:14px;font-family:Arial;height:auto;min-height:34px;}
.textcomplete-condition input[type=button]	{border:none;background:#6C767D;color:white;border-radius:3px;line-height:20px;padding:0 5px;margin:0 5px;font-size:14px;}
.textcomplete-condition input[type=text]	{border:none;background:#6C767D;color:white;border-radius:3px;line-height:20px;padding:0 5px;margin:0 5px;font-size:14px;width:auto;min-width:50px;text-align:center;}
.textcomplete-condition select				{border:none;background:#6C767D;color:white;border-radius:3px;line-height:20px;padding:0 5px;margin:0 5px;font-size:14px;}
.dropdown-menu								{max-width:300px;max-height:200px;overflow:auto;overflow-x:hidden;}
.textcomplete-item							{padding:0 5px;}
.textcomplete-item.active					{background:#FF6600;color:white;}

body.inloggen								{margin:0;padding:0;height:100%;background:#FF6600 url(../graphics/login-background.jpg) center no-repeat;background-size:cover;box-shadow:inset 50px 0 250px black;display:flex;justify-content:center;align-items:center;}
body.inloggen h1,
body.inloggen header						{display:none;}
body.inloggen #siteform						{display:block;width:100%;max-width:500px;display:none;}

body::after									{position:fixed;right:35px;top:15px;display:block;content:"";background:url(../graphics/roes-logo.png) center no-repeat;background-size:contain;width:150px;height:50px;z-index:100;}
body.inloggen::after						{background-image:url(../graphics/roes-logo-white.png);opacity:0.5;}

#popup		        						{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.05);z-index:1000;}
#popup > div		    					{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;width:80%;height:80%;background:white;border:2px solid #FF6600;border-radius:5px;overflow:hidden;/*box-shadow:0 10px 500px rgba(0, 0, 0, 0.75);*/box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 22px 70px 4px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0.0);}
#popup iframe			    			    {display:block;width:100%;height:100%;border:none;border-radius:1px;}
#popup button								{display:block;position:absolute;top:0;right:0;width:80px;height:80px;border:none;background:none;color:white;opacity:0.8;font-size:32px;}
#popup button:hover							{opacity:1;}

body.popup									{margin-left:0;}
body.popup::after							{display:none;}
body.popup header							{display:none;}
body.popup h1								{left:0;color:white;background:#FF6600;}
body.popup #buttons							{display:none;}

@media only screen and (min-width: 1001px) and (max-width: 1200px)
{
	.table-form								{table-layout:fixed;}
	.table-form > colgroup					{display:none;}
	.table-form > tbody > tr > th,
	.table-form > tbody > tr > td			{display:block;float:left;width:100%;}
}

@media only screen and (max-width: 1000px)
{
	#siteform > table > tbody > tr > td		{display:block;float:left;width:100%;}
								
	.table-data								{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;width:100%;max-width:100%;table-layout:auto;}
	.table-data colgroup					{display:none;}
	.table-data thead,
	.table-data tbody,
	.table-data tr							{width:100%;min-width:100%;}
	.table-data th,
	.table-data td							{width:100%;}
}

@media only screen and (max-width: 600px)
{
	header									{left:-120px;z-index:102;box-shadow:0 0 5px rgba(0, 0, 0, 0.25);transition:0.5s;}
	header.active							{left:0;transition:0.5s;}
	h1										{left:0;}
	body									{margin-left:0;padding-left:10px;padding-right:10px;}
	body.inloggen							{min-width:0;}
	#menu									{display:block;}
	body.inloggen #menu						{display:none;}
	body::after								{right:75px;}

	.table-form								{table-layout:fixed;}
	.table-form > colgroup					{display:none;}
	.table-form > tbody > tr > th,
	.table-form > tbody > tr > td,
	#siteform > table > tbody > tr > td		{display:block;float:left;width:100%;}
}