﻿@font-face {
    	font-family: Calibri;
    	_font-family: Montserrat;
    	_src: url("/fonts/Montserrat-Light.otf") format("opentype");
	}
	
body {
	margin:0px;
	padding: 0px;
	font-family: ‘Arial Black’, Gadget, sans-serif;
	font-family: "Montserrat", sans-serif;
	font-size:12px;
	color: #093281;
	overflow: hidden;
}

input, select, textarea {
	font-family:Verdana, Arial, Helvetica, sans-serif;	
	font-size: 10px;
	border: 1px solid #e1007a;
	padding: 1px;
	transition: box-shadow 0.5s ease;
}
input:hover, select:hover, select:focus, textarea:hover, textarea:focus  {
	box-shadow: 0 0 10px #e1007a;
}
input[type=file] {
	font-size: 8px;
}

input[type=checkbox],input[type=radio],input[type=image] {
	border: 2px;
}

h3 {
	display: inline;
	font-size: 14px;
}

img {
	border: 0px;
}
a img{
	border: none;
}

div.wrapper {
	width: 100%;
	overflow-y: scroll;
	position: absolute;
	top: 0px;
	bottom: 30px;
}

div.header {
	height:104px;
	font-size:14px;
	border-top: 6px solid #e1007a;
	border-bottom: 6px solid #093281;
}
	div.header .logo {
		position: absolute;
		margin-top: 8px;
	}

div.inlogbox {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
	margin-top: 200px;
}
	div.inlogbox a {
		color: #e1007a;
		text-decoration: none;
	}

div.banner {
	float: right;
}
	div.banner .text {
		height:25px;
		margin-top: 70px;
		font-size: 22px;
	}
	div.banner .icon {
		position:fixed;
		top:130px;
		left:20px;
		width:80px;
		z-index:1;
	}
	div.banner .menu {
		padding-top: 45px;
		text-align: center;
		line-height: 28px;
		text-align: right;
		text-decoration: none;
	}
		div.banner .menu .item {
			float: left;
			margin-left: 10px;
			text-transform: uppercase;
		}
		div.banner .menu .item a {
			transition: color 1s ease;
		}
		div.banner .menu .item:hover {
			color: #e1007a;
			text-decoration: none;
		}
		div.banner .menu .actief a {
			color: #e1007a;
			text-decoration: none;
		}
		div.banner .menu .icon {
			float: left;
			margin-right: 20px;
			border: 2px solid black;
		}
		div.banner .menu .subitem {
			float: left;
			min-width: 80px;
			padding-left: 10px;
			font-size: 11px;
			text-align: left;
			text-transform: uppercase;
		}
		div.banner .menu .subitem:hover {
			text-decoration: none;
		}
		div.banner .menu .subactief a {
			color: #e1007a;
		}
	div.banner a {
		color: #093281;
		text-decoration: none;
	}
	div.banner a:hover {
		color: #e1007a;
	}
		
div.content {
	text-align: center;
}

div.home {
	width: 870px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
	div.home a {
		color: #e1007a;
		text-decoration: none;
	}
	div.home a:hover {
		text-decoration: underline;
	}
div.detail {
	margin-left: auto;
	/*margin-left: calc(50% - 435px);*/
	width: 90%;
	margin-right: auto;
	text-align: left;
}

div.headercenterwrapper {
	/*width: 870px;*/
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
div.footercenterwrapper {
	/*width: 870px;*/
	width: 90%;
	margin-left: auto;
	/*margin-left: calc(50% - 445px);*/
	margin-right: auto;
	text-align: left;
}

div.demo {
	background: url('/img/demo.png') repeat;
}

div.messagebox {
	background: #5EA91A;
	color: #FFFFFF;
	line-height: 20px;
	padding: 5px;
	margin-bottom: 5px;
}
div.messagebox_error {
	background: #D92626;
	color: #FFFFFF;
	line-height: 20px;
	padding: 5px;
	margin-bottom: 5px;
}

div.footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 30px;
	background: #e1007a;
	font-size:14px;
	line-height: 30px;
}
	div.footer a {
		color: #ffffff;
		text-decoration: none;
	}
	div.home a:hover {
		text-decoration: underline;
	}
	div.footer	.item { width:70px; }
	div.footer	img { max-height: 24px; padding-top: 3px; }

.klikbox { width: 255px; background: #e1007a; color: #ffffff; line-height:24px; padding:15px; min-height:50px; }
.klikbox input { width:99%; font-size: 12px; border-radius: 0px; padding:1px; }

.uitklapregel_roze { cursor:pointer; }
.uitklapregel { height:50px; background-color:#eeeeee; border:1px solid #e1007a; cursor:pointer; transition: box-shadow 0.5s ease; }
.uitklapregel:hover { box-shadow: 0 0 5px; }
.uitklapregel_roze h3 { float:left; margin:0px; font-size:24px; width:150px;  }
.uitklapregel h3 { display:inline; line-height:50px; margin-left:10px; }
.uitklapregel_roze .uitklapbox { float:right; margin-top:5px; }
.uitklapregel .uitklapbox { float:right; margin-top:3px; margin-right:10px; background-color:#e1007a; }
.uitklapregel_roze .uitklapbox img,
.uitklapregel .uitklapbox img { margin: 10px; transition: rotate 0.5s ease; }
.uitklapregel:hover { color: #e1007a; }
.uitklapregel_roze:hover > .uitklapbox img { transform: rotate(90deg); }
.uitklapregel:hover > .uitklapbox img { transform: rotate(90deg); }

div.importbox {
	background: #e1007a;
	color: #ffffff;
	margin-left: auto;
	margin-right: auto;
	width: 840px;
	padding: 15px;
	font-size: 14px;
}
	div.importbox a {
		color: #ffffff;
	}
	div.importbox input {
		font-size: 12px;
		border-radius: 0px;
		border-color: #093281;
		padding: 1px;
	}
	div.importbox select {
		font-size: 12px;
		border-radius: 0px;
		border-color: #093281;
		padding: 1px;
	}
	div.importbox .knop {
		background-color: #093281;
		color: #ffffff;
		width: 150px;
		height: 30px;
		font-size: 15px;
		cursor: pointer;
	}
	div.importbox .knop:hover {
		box-shadow: 0 0 20px;
	}

div#popup {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: none;
	background: url('/img/popup_bg.png') repeat-x;
	overflow: auto;
	font-size: 12px;
}
	div#popup table#popup_table {
		height: 100%;
	}
	div#popup table#popup_table td#popup_content {
		vertical-align: top;
		border: 1px solid #e1007a;
		background-color: #FFFFFF;
		height: 400px;
		width: 600px;
		padding: 0px;
	}
	div.popuptitel {
		padding: 5px 10px;
		background-color: #093281;
		border-bottom: 1px solid #e1007a;
		color: #FFFFFF;
	}

table.calendar {
	border: 1px solid #000000;
	background-color: #FFFFFF;
}
	table.calendar td {
		width: 20px;
		cursor: pointer;
		border: 1px solid white;
		text-align: center;
	}
	table.calendar td:hover {
		color: blue;
		font-weight: bold;
	}
	table.calendar td.currentday {
		color: #C00000;
	}
	table.calendar td.selectedday {
		color: #e1007a;
		font-weight: bold;
		border: 1px solid #0000C0;
	}
	table.calendar tr.week {
		background-color: #CCCCCC;	
	}
	table.calendar tr.footer th {
		cursor: pointer;	
	}

table.tabbladmenu {
	/*border: 1px solid #e1007a;*/
}
	table.tabbladmenu td {
		background-color: #8e004f;
		border: 1px solid #e1007a;
		color: #FFFFFF;
	}
	table.tabbladmenu td:hover {
		cursor: pointer;
		border: 1px solid #093281;
	}
	table.tabbladmenu td.active {
		background-color: #093281;
	}

.schaduwveld
{
	border:1px solid #e1007a;
	/*border-radius:5px 5px 5px 5px;*/
	box-shadow:2px 2px 5px rgba(0,0,0,0.3);
}

.knop
{
	background: #8e004f;
	width: 150px;
	padding:1px;
	color:#FFFFFF;
	cursor: pointer;
	height: 20px;
	transition: box-shadow 0.5s ease;
}
.knop:hover {
	box-shadow: 0 0 20px #e1007a;
}
.knopblauw {
	background: #093281;
	width: 150px;
	padding: 1px;
	color: #FFFFFF;
}
.knopblauw:hover {
	box-shadow: 0 0 20px #0d49b9;
}
.oplichten:hover
{
	background: #e1007a;
}
.blauwoplichten:hover
{
	background: #0d49b9;
}
.knopdisabled
{
	background: #093281;
	width: 150px;
	padding:1px;
	color:#FFFFFF;
}

.zichtbaar {
	display:block;
}
.verborgen {
	display:none;
	height:100%;
}

.links { float: left; }
.rechts { float: right; }

.klikbaar {
	cursor:pointer;
}
.klikbaar:hover {
	text-decoration: underline;
}

.mooiroze {
	color: #e1007a;
}
.mooiblauw {
	color: #093281;
}

.klikbaarmooiroze {
	cursor: pointer;
	color: #e1007a;
	text-decoration: none;
}

.klikbaarmooiroze:hover {
	text-decoration: underline;
}

.deleted {
	color: #ff0000;
	text-decoration: line-through;
}

table {
	font-size: 12px;
}

table.sorteertabel { padding-top:5px; padding-bottom:5px; }
table.sorteertabel thead tr.sorteerheader td { background: #093281; color: #ffffff; font-weight:bold; border-top-style:solid; border-top-width:1px; /*padding-top:2px;*/ border-bottom-style:solid; border-bottom-width:1px; /*padding-bottom:2px;*/ border-color:#e1007a; }
table.sorteertabel thead tr.sorteerheader td.sorteerbaar { cursor: pointer; background: #093281 url('/img/sort.png') no-repeat top right; color: #ffffff; }
table.sorteertabel thead tr.sorteerheader td.sorteerbaar:hover { color: #ffbfe2; }
table.sorteertabel thead tr.sorteerexport { background: #cdddfc; height:10px; }
table.sorteertabel tbody tr.selecteerbaar:hover { background:#ffbfe2; cursor:pointer; } 
table.sorteertabel td { padding-right: 7px; }
table.sorteertabel td:last-child { padding-right:0px; }
table.sorteertabel tfoot td { font-weight:bold; border-top: 1px solid #e1007a; padding-top:2px; }
.subitemstabel { padding-left: 10px; border-left: 4px solid #e1007a; }


.statusicon {
	position: absolute;
	bottom: 3px;
	right: 3px;
	max-height: 40px;
}

div.grijs {
	filter: gray;
}

.inputerror {
	border: 1px solid red;
	color: #ff0000;
}

div.letterknop {
	position: relative;
	display: inline;
	width: 10px;
	margin-right: 10px;
	padding: 2px 5px 2px 5px;
	font-weight: bolder;
	background-color: #8e004f;
	border: 1px solid #e1007a;
	color: #FFFFFF;
	transition: box-shadow 0.5s ease;
}
div.letterknop:hover {
	box-shadow: 0 0 10px #e1007a;
	text-decoration: none;
}
	div.letterknop a {
		color: #FFFFFF;
		text-decoration: none;
	}
div.letterknop_inactief {
	position: relative;
	display: inline;
	width: 10px;
	margin-right: 10px;
	padding: 2px 5px 2px 5px;
	font-weight: bolder;
	background-color: #9c9a9b;
	border: 1px solid #e1007a;
	color: #FFFFFF;
}

div.ValutaItem {
	float: left;
	padding: 5px;
	margin: 0px 10px 10px 0px;
	box-shadow: 0 0 3px #e1007a;
}
div.ValutaItem_Inactief {
	float: left;
	padding: 5px;
	margin: 0px 10px 10px 0px;
	cursor: pointer;
	border:1px solid #7a7a7a;
	color: #808080;
	transition: box-shadow 0.5s ease;
}
div.ValutaItem_Inactief:hover {
	border:1px solid #e1007a;
	box-shadow: 0 0 5px #e1007a;
}

div.ValutaItem_Inactief .img_add {
	float: right;
	display: none;
}
div.ValutaItem_Inactief:hover > .img_add {
	display: block;
}

div.loading-widget{
    width: 60px;
    height: 60px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
div.loading-widget-spinner {
    border: 6px solid #f3f3f3;
                border-top: 6px solid #233775;
                border-radius: 50%;
                width: 60px;
                height: 60px;
                animation: spin 1s linear infinite;
                position:absolute;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
