body, td, th, a, input, button, select
{
	font-family: Open Sans, Verdana, Arial, Helvetica, sans-serif;
}

.footer
{
	font-size: small;
}

.clearfix:before, .clearfix:after {  content: "\0020"; display: block; height: 0; visibility: hidden;	 }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.flex-align-center {
	align-items: center;
}

input[type="text"],input[type="email"],input[type="password"]
{
	padding-left: 3px;
}
.roundbutton
{
	height: 40px;
	color: #fff;
	background-color: #09c;
	font-size: 16px;
	padding-left: 20px;
	padding-right: 20px;
	border: none;
	border-radius: 20px;
}
.roundbutton:hover
{
	background-color: #0be;
	color: #fff;
	text-decoration: none;
}
.roundbutton[disabled]:hover
{
	background-color: #09c;
}
.roundbutton.red
{
	background-color: #c33;
}
.roundbutton.red:hover
{
	background-color: #d65c5c;
}

a.roundbutton
{
	display: inline-block;
    vertical-align: middle;
    line-height: 40px;
}

#header
{
	margin-top: 15px;
	margin-bottom: 15px;
	vertical-align: middle;
	position: relative;
	background-color: #fff;
}
#header h1
{
	font-size: 30px;
	color: #666;
	font-weight: 200;
}
#header h1 img
{
	max-height: 40px;
	margin-left: 10px;
}
#header h1 a
{
	color: inherit;
	text-decoration: none;
}

#header .container
{
	position: relative;
}

body.content #footer
{
	border-top: 1px solid  #ccc;
	margin-top: 10px;
}
#footer{
	text-align: center;
}
#footer .container, #footer a
{
	font-size: 14px;
	color: #a2a2a2;
}

#breadcrumbs
{
	height: 64px;
	padding-top: 12px;
	background-color: #eee;
    vertical-align: middle;
}
#breadcrumbs a.crumb
{
	color: #09c;
}
#breadcrumbs .crumb
{
	margin: 0 5px;
}


div.background
{
	width: 100%;
	min-height: 600px;
}
body.login div.background
{
	border-bottom: 1px solid #ccc;
	background: transparent url(/public/images/klantenportaal/bg_wt.jpg) no-repeat center 40px;
	background-size: cover;
}
body.login img.extra
{
	position: absolute;
	right: 0;
	bottom: 0;
}

body.background div.background
{
	background: #eee url(/public/images/klantenportaal/bg_variant02_wt.png) no-repeat center 50px;
	background-size: cover;
}

div.logincontainer
{
	min-height: 520px;
}
div#loginframe, div#changepassswordframe
{
	background-color: rgba(255,255,255,0.8);
	padding: 40px;
	border: 1px solid #ccc;
	border-radius: 20px;
}

div#loginframe h1
{
	font-weight: bold;
	font-size: 26px;
}

form#forgot-password-form { display: none; }

span.logout
{
	position: absolute;
	top: 0;
	right: 10px;
	color: #333;
	font-size: 16px;
}
button.logout
{
	margin-left: 10px;
}

div.homepage
{
}
div.homepage h2
{
	font-size: 18px;
	font-weight: 600; /* semi-bold */
	color: #333;
	margin: 50px 0 35px 0;
}
div.contentpage h2
{
	font-size: 22px;
	font-weight: normal;
	line-height: 40px;
	margin: 36px 0 26px 0;
	color: #09c;
}
div.contentpage h3
{
	font-size: 18px;
	font-weight: 600; /* semi-bold */
	line-height: 40px;
	margin: 26px 0 20px 0;
	color: #333;
}

div.homepage .button
{
	display: inline-block;
	vertical-align: middle;

	min-height: 56px;
	/* line-height: 52px; */
	padding-top: 13px;

	border: 1px solid rgb(204,204,204); /* #ccc */
	border-radius: 10px;
	box-shadow: 0px 5px 8.1px 0.9px rgba(0,0,0,0.35);

	font-size: 18px;
	color: #666;
	text-align: left;

	padding-left: 55px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: left center;
}
div.homepage div.row .button:nth-child(2)
{
	margin-left: 20px;
}
div.homepage .button.enabled:hover
{
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.35);
	border: 1px solid #09c;
	text-decoration: none;
	cursor: pointer;
}
div.homepage .button[disabled], div.homepage .button.disabled
{
	opacity: 0.7;
	cursor: default;
}
div.homepage .button.disabled:hover
{
	text-decoration: none;
}
div.homepage .button.enabled::after
{
	content: url(/public/images/klantenportaal/icon_arrow.svg);
	/*loat: right;*/
	position: absolute;
    top: 30%;
    right: 10px;
}
div.homepage .button.enabled:hover::after
{
	content: url(/public/images/klantenportaal/icon_arrow_hl.svg);
}
.button#ordercodes,.button.ordercodes
{
	background-image: url(/public/images/klantenportaal/icon_codesTraining.svg);
}
.button#orderlearningitems
{
	background-image: url(/public/images/klantenportaal/icon_educationalResources.svg);
}
.button#useraccess
{
	background-image: url(/public/images/klantenportaal/icon_userAccess.svg);
}
.button#manuals
{
	background-image: url(/public/images/klantenportaal/icon_manuals.svg);
}
.button#theoryplatform
{
	background-image: url(/public/images/klantenportaal/icon_theoryClassroom.svg);
}
.button#plantraining
{
	background-image: url(/public/images/klantenportaal/icon_planTraining.svg);
}
.button#lvs
{
	background-image: url(/public/images/klantenportaal/icon_studentTracking.svg);
}
.button#ordermaterials
{
	background-image: url(/public/images/klantenportaal/icon_shopNecessities.svg);
}
.button#bklvs
{
	background-image: url(/public/images/klantenportaal/icon_studentTracking.svg);
}
.button#theorycompact
{
	background-image: url(/public/images/klantenportaal/icon_theoryCompact.svg);
}
.button#erportal,
.button#tpoportal,
.button#donportal,
.button#teacherportal
{
	background-image: url(/public/images/klantenportaal/icon_manuals.svg);
}
.button#mbolvs
{
	background-image: url(/public/images/klantenportaal/icon_studentTracking.svg);
}


/* useraccess */
.link
{
	text-decoration: underline;
	cursor: pointer;
}

.accountform
{
	background-color: #fff;
	padding: 3px;
}
.accountaccess,
.accountrights
{
	display: none;
}

.spinner
{
	width: 32px;
	height: 32px;
	background-image: url(/public/images/bezig.gif);
}

.erportalprogram label,
.tpoportalprogram label
{
	margin: 0.1rem 0;
}


/* orderlearningitems */

.learningitemform input[type='number']
{
	width: 50px;
}
.learningitemform tr.alertmessage
{
	display: none;
}
.learningitemform tr.alertmessage td
{
	border: none;
	text-align: right;
	padding-top: 0;
}
.learningitemform tr.alertmessage span
{
	padding: 5px 10px;
}

/* learningitemsorders */

.vieworder
{
	text-decoration: underline;
	cursor: pointer;
}
.table.ordertable
{
	font-size: 95%;
}
.table.ordertable th,
.table.ordertable td
{
	padding: 0.3rem;
}
.table.ordertable th
{
	border-top: 0px;
}

/* manuals */
.manuals .bullet
{
	color: #09c;
}
.manuals a
{
	line-height: 35px;
	font-size: 18px;
	color: #666;
}
.manuals __a:before
{
	content: '⬤';
	color: #09c;
	margin-right: 10px;
}

.form-label-group > label
{
	user-select: none;
}