/* HTML5 ✰ Boilerplate */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
body { font:13px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
body, select, input, textarea { color: #444; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { overflow-y: scroll;}
a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #333; }
ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; }
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre { padding: 15px; white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid { }
/*input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }*/
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid { background-color: #f0dddd; }
/*::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; } */
a:link { -webkit-tap-highlight-color: #FF5E99; }
button { width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/**
*
* Body and elements
*
*************************************************************************************************/
body {
font-family: 'Open Sans', Arial, Helvetica;
font-size: 14px;
color: #333;
background-color: #e5f4fb;
}
a, a:active {
outline: none;
}
.messageborder {
border: 2px solid #0294d0;
}
.messageborder.retraining
{
margin-top: 30px;
/*margin-right: 10px;*/
max-width: 820px;
padding: 10px 10px;
}
#logo,
.abutton
{
background-color: #0099cc;
}
.abutton:hover
{
background-color: #00bbee;
}
/**
*
* Container
*
*************************************************************************************************/
#container {
width: 100%;
min-width: 360px;
margin: 0 auto;
position: relative;
background-color: #fff;
}
.content #container,
.helpdesk #container
{
overflow: hidden;
}
.portal #container,
.helpdesk #container,
.cbrquestion #container,
.remark #container
{
max-width: 1610px;
}
/**
*
* Header
*
*************************************************************************************************/
header {
height: 153px;
/*height: 171px; AANZETTEN VOOR BLAUWE STYLING */
width: 100%;
background: #fff;
}
.home header {
height: 85px;
}
/* VOOR ALS BLAUWE STYLING GEKOZEN WORDT
#logo {
width: 100%;
margin: 0 auto;
font-size: 24px;
padding-top: 15px;
text-align: center;
height: 84px;
}*/
#logo {
width: 280px;
padding-top: 15px;
padding-bottom: 12px;
margin: 0 auto;
background: #fff;
}
body.transportacademy header
{
background-color: white;
}
body.transportacademy #logo
{
width: fit-content;
padding: 5px;
margin: 0 0 0 25px;
}
body.transportacademy #logo a img
{
max-height: 75px;
display: block;
}
body.transportacademy #produced-by
{
display: none;
}
header .textlogo {
font-family: 'Arial Rounded MT Bold', Arial, Helvetica;
font-size: 34px;
color: #000;
text-decoration: none;
display: inline-block;
margin-top: 15px;
}
/* VOOR ALS BLAUWE STYLING GEKOZEN WORDT
header #produced-by {
margin-top: 5px;
position: absolute;
top: 0;
right: 20px;
line-height: 50px;
font-size: 11px;
color: #8f8f8f;
overflow: hidden;
}*/
header #produced-by {
margin-top: 15px;
height: 55px;
position: absolute;
top: 0;
right: 20px;
line-height: 50px;
font-size: 11px;
color: #8f8f8f;
overflow: hidden;
display: none;
}
header #produced-by img {
vertical-align: middle;
margin-left: 10px;
max-height: 50px; /* VOOR BLAUWE STYLING WEGHALEN */
}
.ie6 header #produced-by img, .ie7 header #produced-by img {
vertical-align: middle;
}
@media screen and (max-width: 630px) {
#produced-by
{
display: none;
}
}
header #illu
{
height: 72px;
text-align: center;
background: #0099cc url(../images/shop/illu_top_road-left.svg) center top repeat-x;
}
header #illu img
{
width: 100%;
max-width: 1020px;
}
#masthead {
height: 30px;
position: relative;
}
#masthead.large
{
height: 60px;
}
#userstatus {
width: 310px;
position: absolute;
right: 10px;
top: 0;
padding: 0 0 0 10px;
background-color: #fff;
border: 1px solid #ccc;
border-right-width: 0;
overflow-x: hidden;
overflow-y: auto;
}
#status #__roc-timers {
width: 280px;
margin-left: 20px;
}
#__roc-timers th {
color: #0099cc;
}
#__roc-timers span {
color: #038;
float: right;
}
#__portal-button, #logout-button, #logout-button:visited, #logout-button-sso, #logout-button:visited,
#__tell-a-friend-button, #__tell-a-friend-button:visited,
#refreshtime, #startbook-button, #close-tab-button, #close-tab-button:visited {
display: inline-block;
width: 98px;
height: 30px;
line-height: 30px;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 14px;
background-color: #0099cc;
border-radius: 15px;
/*box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.75);*/
}
#logout-button:hover,
#__tell-a-friend-button:hover,
#refreshtime:hover, #startbook-button:hover,
#close-tab-button:hover
{
/*background-position: bottom left;*/
background-color: #00bbee;
}
#close-tab-button {
position: absolute;
right: 10px;
top: -10px;
}
#portal-button {
/*background-color: #606060;*/
margin-bottom: 20px;
}
#__portal-button:hover {
/*background-position: bottom left;*/
background-color: #888888;
}
#logout-button, #logout-button:visited, #logout-button-sso, #logout-button:visited, #__tell-a-friend-button, #__tell-a-friend-button:visited {
position: absolute;
right: 10px;
top: 15px;
}
#status #logout-button{
position: relative;
right: 0;
top: 0;
}
#startbook-button {
margin-top: 2em;
}
#refreshtime
{
width: 160px;
margin-left: 20px;
}
#__tell-a-friend-button, #__tell-a-friend-button:visited {
position: static;
}
a#portal-button
{
top: 0;
/*width: 160px;
background: url(../images/button-longer.png) top left no-repeat;
*/
}
/**
* Breadcrumbs
************************************************************************************************/
#breadcrumbs {
width: 419px;
height: 19px;
padding: 0;
margin: 0 0 20px 0;
list-style: none;
}
#breadcrumbs li {
display: inline;
}
#breadcrumbs li,
#breadcrumbs a, #breadcrumbs a:visited {
color: #666;
font-size: 13px;
}
#breadcrumbs a:hover {
text-decoration: underline;
}
#examtraining #breadcrumbs
{
color: #ffffff;
}
#examtraining #breadcrumbs a, #examtraining #breadcrumbs a:visited
{
color: #cccccc;
}
/**
*
* Columns
*
*************************************************************************************************/
.column {
position: relative;
}
.left {
width: 60%;
float: left;
}
.right {
width: 36%;
float: right;
padding-top: 30px;
}
#register-form .left,
#register-form .right
{
padding-top: 0;
}
#register-form .left
{
width: 49%;
}
#register-form .right
{
width: 49%;
margin-top: 20px;
}
#register-form .innerleft
{
float: right;
margin-right: 6%;
}
#register-form .left
{
min-width: 300px;
margin-right: 1%;
}
#register-form .right
{
float: left;
}
/**
*
* Main (content)
*
*************************************************************************************************/
body.content
{
line-height: 1.5;
}
body.content #main
{
max-width: 850px;
margin-right: 20px;
}
#main {
padding-bottom: 10px;
background-color: #fff;
/*background: url(../images/stippen.jpg) right 96px no-repeat;*/
}
.home #main,
.login #main {
position: relative;
background: #fff url(../images/home/deco_banner-top.jpg) 0px 0px no-repeat;
padding-top: 36px;
}
.ie6 .home #main, .ie7 .home #main {
height: 505px;
}
.light-blue,
a.light-blue {
color: #0099cc;
}
.lighter-blue
{
background-color: #ccebf5;
}
.dark-blue {
color: #333;
}
#message {
width: 200px;
padding: 10px;
position: absolute;
top: 100px;
left: 50%;
margin: 0 0 0 -200px;
background-color: #f5cccc;
border: 1px solid #ff7c7c;
color: #000;
font-size: 11px;
}
img#decohome
{
position: absolute;
top: 107px;
left: 200px;
z-index: 2;
}
img#decologin
{
position: absolute;
top: 17px;
left: 0px;
}
/**
*
* Articles (main content)
*
*************************************************************************************************/
article {
margin-top: 0px;
padding: 0px 0 10px 30px;
min-height: 300px;
background: #fff;
clear: both;
position: relative;
}
#examtraining, #examtraining article
{
background: #0099cc;
}
#examtraining
{
position: relative;
min-height: 500px;
}
#examtraining article
{
border-left: 0;
margin: 10px 0 0 290px;
padding: 0;
width: 700px;
}
.home article,
.login article
{
line-height: 20px;
border: none;
margin: 0;
padding: 0;
background: none;
color: #666;
}
.home article
{
height: 458px;
border-bottom: 1px solid #ddd;
}
h1, h2 {
font-size: 18px;
margin: 0 0 10px 0;
font-weight: 100;
}
#to-webshop,
#to-webshop-link {
position: absolute;
top: 10px;
height: 104px;
}
#to-webshop {
width: 100%;
display: block;
background-image: linear-gradient(to right, #022F6A 392px, #fff);
}
#to-webshop-link {
width: 392px;
z-index: 10;
cursor: pointer;
}
#welcome
{
/*-moz-box-shadow: inset 0px 0px 5px #888, 0 0 0 #fff, 0 0 0 #fff, 0 0 0 #fff;
-webkit-box-shadow: inset 0px 0px 5px #888, 0 0 0 #fff, 0 0 0 #fff, 0 0 0 #fff;
*/
-moz-box-shadow: inset 4px 4px 7px #aaa;
-webkit-box-shadow: inset 4px 4px 7px #aaa;
box-shadow: inset 4px 4px 7px #aaa;
position: absolute;
top: 137px;
padding: 20px;
width: 400px;
height: 281px;
overflow: hidden;
}
.home h1 {
margin: 0 0 20px 0;
font-size: 26px;
}
#welcome h1 {
font-family: Arial;
margin: 0;
}
.home .left p {
font-family: Arial;
font-size: 13px;
padding: 20px 0 0 0;
}
p.setbuttons
{
margin: 15px 0;
}
p.setbuttons button,
p.setbuttons a
{
margin: 0.5rem 1rem 0 0;
}
p.setbuttons button.activeset
{
font-size: 120%;
}
/**
*
* Register form
*
*************************************************************************************************/
.column.right form
{
z-index: 10;
}
#optin-holder,#terms-holder,#parentcheck-holder {
height: auto;
max-width: 468px;
padding: 15px 10px;
}
#optin-holder p,#terms-holder p {
padding: 0 0 0 20px;
}
#optin,#accept_terms {
height: auto;
margin: 4px 5px 0 0;
}
#optin-holder label, #terms-holder label {
height: auto;
width: auto;
float: none;
margin: 0;
}
input {
width: 224px;
}
#check-code-form input,
#login-form input,
#forgot-password-form input
{
border: 1px solid #b6b6b6;
background: #fff;
border-radius: 4px;
}
#register-form select {
margin: 0 10px 0 0;
}
#school {
width: 224px;
}
#register-form .radio {
background: #fff;
}
#register-form .input-holder.group {
display: inline-block;
}
#register-warning {
padding: 20px 10px 0 10px;
}
label {
width: 151px;
height: 27px;
line-height: 27px;
text-indent: 10px;
display: block;
float: left;
color: #333;
}
.loading {
background: url(../images/ajax-loader.gif) 95% 5px no-repeat;
}
#register-form #credentials input {
width: 191px;
margin-bottom: 10px;
background-color: #fff;
}
#credentials {
padding: 10px 0 10px 10px;
background: #09c;
max-width: 380px;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
}
#register-form #credentials {
padding: 10px;
}
#register-form
{
margin-bottom: 25px;
}
#register-form .doubleline
{
height: 37px;
line-height: 18px;
}
#register-form .error-holder {
top: 150px;
left: 0;
}
#__register-form #explainbutton {
width: 240px;
height: 20px;
line-height: 20px;
margin-top: 0px;
background: #0294d0;
border-radius: 10px;
box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.75);
}
#__register-form #explainbutton:hover {
background: #003366;
}
#explainretrainingdate {
display: none;
max-width: 400px;
padding: 10px;
/*margin-right: 10px;*/
position: absolute;
top: 130px;
right: 0;
background: #fff;
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.25);
}
#explainretrainingdate .close {
width: 24px;
height: 24px;
border-radius: 12px;
line-height: 24px;
position: absolute;
top: -12px;
right: -12px;
background: #0294d0;
color: #fff;
text-align: center;
cursor: pointer;
}
#tell-a-friend-form .error-holder {
left: 200px;
top: auto;
bottom: 160px;
}
#categories {
height: 112px;
/*width: 593px;*/
margin: 29px 0 10px 0;
}
#categories h2 {
height: 112px;
line-height: 112px;
font-size: 20px;
color: #003365;
text-indent: 14px;
}
#categories ul {
float: left;
margin: 0;
list-style: none;
}
#categories li {
float: left;
width: 128px;
height: 0;
margin-top: 10px;
margin-bottom: 100px;
padding-top: 70px;
text-decoration: none;
float: left;
text-align: center;
background-position: top left;
color: #000;
}
#categories li input {
vertical-align: middle;
height: auto;
line-height: 1;
}
#cat-car {
background-image: url(../images/cat-b-icon.png);
background-repeat: no-repeat;
}
#cat-moped {
background-image: url(../images/cat-am-icon.png);
background-repeat: no-repeat;
}
#cat-bike {
background-image: url(../images/cat-a-icon.png);
background-repeat: no-repeat;
}
#cat-trekker {
background-image: url(../images/cat-a-icon.png);
background-repeat: no-repeat;
}
#cat-taxi {
background-image: url(../images/cat-a-icon.png);
background-repeat: no-repeat;
}
#categories li
{
border-right: 1px solid #999;
}
#categories li:last-child
{
border-right: 0px solid #999;
}
#categories a:hover, #categories a.selected {
color: #003365;
background-position: bottom left;
}
/**
*
* Forms
*
*************************************************************************************************/
form {
position: relative;
}
.field {
height: 27px;
width: 143px;
margin-right: 10px;
position: relative;
background: #fff;
line-height: 27px;
float: left;
}
.field label, .field input { position: absolute; left: 0; top: 0; width: 100% }
.field label { opacity: 0.4; text-indent: 8px; filter: alpha(opacity=40) }
input {
max-width: 315px;
height: 27px;
line-height: 27px;
display: block;
padding: 0;
text-indent: 8px;
border: none;
font-family: Arial;
font-size: 14px;
margin: 0 0 5px 0;
background: url(../images/input-bg.png) top left no-repeat;
}
.input-holder {
height: 27px;
}
.input-holder input {
float: left;
}
.input-holder label.auto-width {
height: 27px;
width: auto;
float: left;
line-height: 27px;
margin: 0 10px;
text-indent: 0;
}
input[type="radio"], input[type="checkbox"] {
display: inline;
width: auto;
line-height: 27px;
background: #fff;
}
button {
height: 33px;
width: 33px;
line-height: 33px;
/*background: url(../images/button-arrow02.png) top center no-repeat;*/
border: none;
font-weight: 700;
color: #333;
}
button:hover {
background-position: bottom right;
}
input:focus, input.has-text {
background: #fff url(../images/input-bg.png) top left no-repeat;
}
body.helpdesk article
{
/* background-image: url(/public/images/shop/illu_helpdesk-xl.png);
*/
background-repeat: no-repeat;
background-position: 750px bottom;
}
body.helpdesk article > p,
body.cbrquestion article > p,
body.remark article > p
{
margin-right: 20px;
line-height: 1.6;
}
#helpdeskillu
{
position: absolute;
/*left: 750px;*/
right: 10px;
bottom: 11px;
}
@media screen and (max-width: 1000px) {
body.helpdesk article > p {
margin-right: 220px;
}
}
@media screen and (max-width: 850px) {
body.helpdesk article > p {
margin-right: 20px;
}
#helpdeskillu {
display: none;
}
}
body.helpdesk hr
{
height: 1px;
}
#helpdeskform,
#cbrquestionform,
#remarkform
{
display: inline-block;
position: relative;
}
#helpdeskform
{
max-width: 530px;
}
#cbrquestionform
{
max-width: 950px;
}
#register-form.retraining
{
/* padding-right: 10px;*/
max-width: 845px;
}
#register-form.retraining > p
{
max-width: 800px;
}
#helpdeskform label,
#cbrquestionform label,
#remarkform label,
#register-form label
{
text-indent: 0;
font-weight: bold;
}
#helpdeskform label
{
width: 151px;
}
#cbrquestionform label
{
width: 300px;
}
#remarkform label
{
width: 250px;
}
#register-form label
{
height: 20px;
line-height: 15px;
}
#register-form .input-holder.gender label,
#register-form #optin-holder label,
#register-form #terms-holder label
{
font-weight: normal;
}
#register-form .input-holder.gender label
{
line-height: 27px;
}
#register-form #optin-holder label,
#register-form #terms-holder label
{
height: auto;
line-height: 19px;
}
#register-form.retraining label
{
font-weight: normal;
width: auto;
height: auto;
padding-right: 5px;
line-height: 20px;
margin: 10px 0 0 0;
}
#credentials label {
width: 170px;
color: #fff;
margin-left: 0px;
margin-top: 7px;
font-weight: normal;
}
#helpdeskform input,
#helpdeskform textarea,
#cbrquestionform input,
#cbrquestionform textarea,
#cbrquestionform select,
#remarkform input[type="text"],
#remarkform input[type="email"],
#remarkform textarea,
#register-form input[type="text"],
#register-form input[type="password"],
#register-form input[type="email"],
#register-form select
{
border: 1px solid #b6b6b6;
background: #fff;
border-radius: 4px;
padding: 2px;
}
#helpdeskform input,
#helpdeskform textarea,
#cbrquestionform input,
#cbrquestionform textarea,
#cbrquestionform select,
#remarkform input[type="text"],
#remarkform input[type="email"],
#remarkform textarea,
#register-form input[type="text"],
#register-form input[type="password"],
#register-form input[type="email"],
#register-form .input-holder.group
{
width: 296px;
max-width: 296px;
}
#helpdeskform textarea,
#cbrquestionform textarea,
#remarkform textarea
{
height: 110px;
display:block;
}
#cbrquestionform textarea,
#remarkform textarea
{
width: 95%;
max-width: 592px;
}
#cbrquestionform input.email,
#cbrquestionform input#school
{
width: 95%;
max-width: 450px;
}
#remarkform input[type="text"]
{
width: 292px;
max-width: 292px;
}
#cbrquestionform input#firstname,
#cbrquestionform input#lastname,
#remarkform input#firstname,
#remarkform input#lastname,
#remarkform input#email
{
display:inline;
margin-bottom: 0;
width: 292px;
max-width: 292px;
}
#register-form.retraining input
{
width: auto;
display: inline;
margin: 5px 0 5px 0;
}
#cbrquestionform input,
#cbrquestionform textarea,
#cbrquestionform select,
#cbrquestionform label
{
font-size: 14px;
}
#cbrquestionform select
{
height: 30px;
border: 1px solid #b6b6b6;
background: #fff;
border-radius: 4px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
#helpdeskform p.small,
#cbrquestionform p.small,
#remarkform p.small {
font-size: 80%;
margin-top: 15px;
}
#helpdeskform button[type="submit"],
#cbrquestionform button[type="submit"],
#remarkform button[type="submit"]
{
float: right;
margin-top: -15px;
}
#remarkform input#school
{
display: inline;
margin-left: 10px;
}
@media screen and (max-width: 960px) {
#cbrquestionform button[type="submit"],
#remarkform button[type="submit"]
{
margin-right: 20px;
}
}
@media screen and (max-width: 660px) {
#cbrquestionform textarea,
#remarkform textarea {
width: 95%;
}
}
@media screen and (max-width: 500px) {
#helpdeskform button[type="submit"] {
margin-right: 20px;
}
}
@media screen and (max-width: 470px) {
#helpdeskform input,
#cbrquestionform select,
#cbrquestionform input#firstname,
#cbrquestionform input#lastname,
#remarkform input#firstname,
#remarkform input#lastname
{
width: 95%;
}
}
#cbrquestionform .clearfix,
#remarkform .clearfix
{
margin-top: 5px;
}
#hrtop
{
margin: 20px 0;
}
#hrbottom
{
margin: 20px 0 0 0;
}
#helpdeskform div.g-recaptcha {
margin-left: 150px;
margin-top: 5px;
/*
width: 370px;
height: 100px;
transform: scale(1.25);
transform-origin: 0 0;
*/
}
@media screen and (max-width: 570px) {
#helpdeskform div.g-recaptcha {
margin-left: 0;
}
}
/* update register-page 2022-02 */
body.register header
{
height: 80px;
background-color: #408DCD;
}
body.register.school header,
body.register.wegrijden header
{
height: 76px;
background-color: #fff;
border-bottom: 4px solid #408DCD;
}
body.register header #produced-by,
body.register header #illu
{
display: none;
}
body.register header #logo
{
background: transparent;
}
#register-form
{
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 1rem;
/*align-items: flex-start;*/
}
#register-form.retraining
{
display: block;
margin: 0 auto;
}
#register-form .column
{
/*max-width: 360px;*/
flex-basis: 360px;
}
#register-form .column.paytype,
#register-form .column.personal
{
padding-left: 1rem;
padding-right: 1rem;
}
#register-form .column.account,
#register-form .column.personal
{
}
#register-form .column
{
border-right: none;
}
#register-form .column h1,
#register-form.retraining h1
{
font-weight: bold;
}
#register-form #credentials
{
background-color: #00BBEE;
margin-bottom: 2rem;
}
#categories li
{
border: none;
width: 190px;
}
#register-form .light-blue
{
color: #408DCD;
}
#register-form .abutton
{
background: #408DCD;
}
#register-form .column.paytype label,
#register-form .column.account #credentials label,
#register-form .column.account label,
#register-form .column.personal label
{
width: auto;
margin-left: 0px;
margin-top: 1rem;
text-indent: 0;
float: none;
color: #408DCD;
}
#register-form .column.account #categories label
{
margin-top: 0;
}
#register-form .column h1 span,
#register-form .column label span,
#register-form #register-warning span
{
font-weight: normal;
}
#register-form .column.personal h1 span,
#register-form .column.account label span,
#register-form .column.personal label span
{
color: #00bbee;
}
#register-form .column.account .reg-cat.disabled label,
#register-form .column.account .reg-cat.disabled label span
{
color: #A09E9E;
}
#register-form .column.account #credentials h1,
#register-form .column.account #credentials label,
#register-form .column.account #credentials label span,
#register-form .column.account #register-warning
{
color: #fff;
}
#register-form .column.account #credentials label,
#register-form #register-warning
{
font-weight: bold;
}
#register-form #credentials input,
#register-form input[type="text"],
#register-form input[type="password"],
#register-form input[type="email"],
#register-form .input-holder.group
{
width: calc(100% - 10px);
max-width: calc(100% - 10px);
}
#register-form.retraining input[type="text"]
{
width: auto;
max-width: inherit;
}
#register-form .column.account #register-warning
{
min-height: 70px;
padding: 0 0 0 80px;
background-image: url(/public/images/register/icon_lock.svg);
background-repeat: no-repeat;
background-size: 70px 70px;
background-position: left center;
margin-top: 1rem;
}
#register-form #optin-holder label,
#register-form #terms-holder label
{
font-weight: bold;
}
#register-form .error-holder
{
position: fixed;
top: 100px;
left: calc(50% - 140px);
}
#register-form #categories
{
margin-top: 5px;
}
#register-form #categories ul
{
display: flex;
flex-flow: row wrap;
justify-content: left;
gap: 1rem;
width: 100%;
}
#register-form #categories li
{
width: auto;
flex-basis: 150px;
cursor: pointer;
}
#categories li.reg-cat
{
height: 22px;
padding: 80px 0 0 0;
margin-bottom: auto;
background-repeat: no-repeat;
background-size: auto;
position: relative;
}
#categories li.reg-cat::before
{
content: "";
background-image: url(/public/images/register/pijl_right.svg);
width: 5px;
height: 11px;
position: absolute;
left: -20px;
top: 35px;
opacity: 0;
transition: opacity 0.5s, left 0.5s;
}
#categories li.reg-cat:hover::before
{
opacity: 1;
left: -2px;
}
#categories #reg-car
{
background-image: url(/public/images/register/auto.svg);
background-position: center 15px;
}
#categories #reg-car.disabled
{
background-image: url(/public/images/register/auto_grey.svg);
}
#categories #reg-bike
{
background-image: url(/public/images/register/motor.svg);
background-position: center 15px;
}
#categories #reg-bike.disabled
{
background-image: url(/public/images/register/motor_grey.svg);
}
#categories #reg-moped
{
background-image: url(/public/images/register/bromfiets.svg);
background-position: center 15px;
}
#categories #reg-moped.disabled
{
background-image: url(/public/images/register/bromfiets_grey.svg);
}
#categories #reg-trekker
{
background-image: url(/public/images/register/tractor.svg);
background-position: top center;
}
#categories #reg-trekker.disabled
{
background-image: url(/public/images/register/tractor_grey.svg);
}
#categories #reg-taxi
{
background-image: url(/public/images/register/taxi.svg);
background-position: center 15px;
}
#categories #reg-taxi.disabled
{
background-image: url(/public/images/register/taxi_grey.svg);
}
#categories div.reg-subcat
{
opacity: 0;
display: inline-block;
width: 30px;
height: 22px;
margin: 0 2px;
background-repeat: no-repeat;
background-size: 30px 22px;
position: relative;
}
#categories div.reg-subcat.show
{
opacity: 1;
}
#categories div.reg-subcat::before
{
content: "";
background-image: url(/public/images/register/pijl_dwn.svg);
width: 11px;
height: 5px;
position: absolute;
top: -15px;
left: calc(50% - 6px);
opacity: 0;
transition: opacity 0.5s, top 0.5s;
}
#categories div.reg-subcat:hover::before
{
opacity: 1;
top: -5px;
}
#categories div.reg-subcat.greyed::before
{
background-image: url(/public/images/register/pijl_dwn_grey.svg);
}
#subcat_car {
background-image: url(/public/images/register/nl.svg);
}
#subcat_bike {
background-image: url(/public/images/register/nl.svg);
}
#subcat_moped {
background-image: url(/public/images/register/nl.svg);
}
#subcat_turkish {
background-image: url(/public/images/register/tr.svg);
}
#subcat_polish {
background-image: url(/public/images/register/pl.svg);
}
#subcat_english {
background-image: url(/public/images/register/gb.svg);
}
#subcat_englishbike {
background-image: url(/public/images/register/gb.svg);
}
#subcat_englishmoped {
background-image: url(/public/images/register/gb.svg);
}
#subcat_trekker {
background-image: url(/public/images/register/nl.svg);
}
#subcat_taxi {
background-image: url(/public/images/register/nl.svg);
}
#subcat_car.greyed {
background-image: url(/public/images/register/nl_grey.svg);
}
#subcat_bike.greyed {
background-image: url(/public/images/register/nl_grey.svg);
}
#subcat_moped.greyed {
background-image: url(/public/images/register/nl_grey.svg);
}
#subcat_turkish.greyed {
background-image: url(/public/images/register/tr_grey.svg);
}
#subcat_polish.greyed {
background-image: url(/public/images/register/pl_grey.svg);
}
#subcat_english.greyed {
background-image: url(/public/images/register/gb_grey.svg);
}
#subcat_englishbike.greyed {
background-image: url(/public/images/register/gb_grey.svg);
}
#subcat_englishmoped.greyed {
background-image: url(/public/images/register/gb_grey.svg);
}
#subcat_trekker.greyed {
background-image: url(/public/images/register/nl_grey.svg);
}
#subcat_taxi.greyed {
background-image: url(/public/images/register/nl_grey.svg);
}
#register-form.upgrade a.abutton,
#register-form button[type="submit"]
{
margin-top: 1rem;
}
/* upgradescreens */
#register-form.upgrade h1.centered
{
flex-basis: 100%;
text-align: center;
}
#register-form.upgrade h1 small
{
font-size: 0.7em;
font-weight: normal;
}
#register-form.upgrade .bold
{
font-weight: bold;
}
#register-form.upgrade label
{
font-weight: normal;
height: auto;
line-height: inherit;
}
#register-form.upgrade input[type="radio"],
#register-form.upgrade input[type="text"],
#register-form.upgrade input[type="email"],
#register-form.upgrade input[type="password"],
#register-form.upgrade select,
#register-form.upgrade img,
#register-form.upgrade label
{
display: inline;
vertical-align: text-bottom;
}
#register-form.upgrade input[type="radio"]
{
margin: 0 0.25rem 0 0;
}
#register-form.upgrade select,
#register-form.upgrade button[type="submit"]
{
float: right;
}
#register-form.upgrade select
{
margin-right: 4px;
}
#register-form.demoupgrade .column.personal label
{
font-weight: 600; /* semibold */
display: block;
margin-top: 0.75rem;
margin-bottom: 0.35em;
}
body.register #container
{
min-width: 250px;
}
@media only screen and (max-width: 1090px) {
body.register article
{
padding: 0px 10px 10px 10px;
}
}
html.login
{
height: 100%;
min-height: 630px;
}
body.login
{
height: 100%;
}
.login #container
{
background-image: url(/public/images/backgrounds/TL_bg_car01.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
body.login.onlinetheorieles
{
background: #fff;
}
.login.onlinetheorieles #container
{
background-image: url(/public/images/backgrounds/onlinetheorieles.png);
background-size: 100% 300px;
background-position: 0 290px;
}
.login header
{
height: 81px;
}
.login body.transportacademy header
{
height: 80px;
}
.login.onlinetheorieles header
{
background: #408DCD url(/public/images/loginpagina/logo_theorieleren_light.svg) no-repeat 30px center;
}
.login.onlinetheorieles header #logo
{
width: 660px;
max-width: 90%;
background-color: transparent;
}
.login.onlinetheorieles header #logo img
{
width: 100%;
background-color: initial;
}
.login.onlinetheorieles header #schoollogo
{
display: none;
}
@media screen and (max-width: 1200px) {
.login.onlinetheorieles header
{
background-image: none;
}
}
.login footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
}
.login #main
{
background: transparent;
width: 100%;
min-height: 500px;
padding-top: 0;
padding-bottom: 90px;
z-index: 2;
flex: auto;
}
.login article
{
width: 92%;
max-width: 980px;
margin: 0 auto;
}
#logincontainer
{
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.login #intro
{
color: #fff;
width: 100%;
border-bottom: 1px solid #ccc;
padding-top: 40px;
padding-bottom: 20px;
margin-bottom: 20px;
font-size: 13px;
line-height: 1.375;
}
.login.onlinetheorieles #intro
{
visibility: hidden;
height: 70px;
}
.login #intro h1
{
font-size: 36px;
font-weight: 600;
}
.login #intro p
{
text-shadow: 1px 1px 2px #000;
}
#logincontainer #rest-school,
#logincontainer form,
#freepackage {
height: 240px;
padding: 20px;
margin: 20px 0 0 0;
background-color: #fff;
background-position: 95% bottom;
background-repeat: no-repeat;
background-size: 120px 210px;
border-radius: 15px;
}
body.onlinetheorieles #logincontainer form
{
background-color: #EDF7FF;
box-shadow: 0px 3px 10px #0000004D;
border-radius: 0px;
}
#logincontainer #rest-school,
#logincontainer form
{
width: 45%;
max-width: 450px;
}
#logincontainer #rest-school
{
height: 316px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255,255,255,0.7);
}
#logincontainer #rest-school img
{
max-width: 100%;
max-height: 100%;
}
#check-code-form
{
background-image: url(/public/images/shop/illu_bord-straight.svg);
order: 1;
}
#check-code-form.cake {
background-image: url(/public/images/shop/cake_login.png);
background-size: 55%;
background-position: 100% 30%;
}
#login-form, #forgot-password-form
{
background-image: url(/public/images/shop/illu_bord-right.svg);
order: 2;
}
.login.onlinetheorieles #check-code-form,
.login.onlinetheorieles #login-form,
.login.onlinetheorieles #forgot-password-form
{
background-position: center top, 95% bottom;
background-size: 100% 40px, 120px 210px;
}
.login.onlinetheorieles #check-code-form
{
background-image: url(/public/images/loginpagina/otl_new_account.svg), url(/public/images/loginpagina/otl_illu_bord_straight.svg);
}
.login.onlinetheorieles #login-form
{
background-image: url(/public/images/loginpagina/otl_login_account.svg), url(/public/images/loginpagina/otl_illu_bord_right.svg);
}
.login.onlinetheorieles #forgot-password-form
{
background-image: url(/public/images/loginpagina/otl_password_forgot.svg), url(/public/images/loginpagina/otl_illu_bord_right.svg);
height: 316px;
}
.login.onlinetheorieles #check-code-form::before
{
content: '';
background-image: url(/public/images/loginpagina/otl_illu_left.svg);
width: 356px;
height: 416px;
position: absolute;
left: -366px;
top: -30px;
}
body.login.nujetheoriehalen,
body.login.vaarbewijs
{
background: #fff;
}
.login.nujetheoriehalen #container
{
background-image: url(/public/images/nujetheoriehalen/BG_rijbewijs_72dpi.jpg);
}
.login.vaarbewijs #container
{
background-image: url(/public/images/nujetheoriehalen/BG_vaarbewijs_72dpi.jpg);
}
.login.nujetheoriehalen #container::after,
.login.vaarbewijs #container::after
{
content: '';
position: absolute;
width: 220px;
height: 21px;
left: calc(50% - 100px);
bottom: 50px;
background-image: url(/public/images/nujetheoriehalen/nujetheorieleren_footer.svg);
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
}
.login.nujetheoriehalen header,
.login.nujetheoriehalen footer,
.login.vaarbewijs header,
.login.vaarbewijs footer
{
display: none;
}
.login.nujetheoriehalen #intro,
.login.vaarbewijs #intro
{
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
color: transparent;
text-indent: -1000%;
border-bottom: none;
height: 200px;
padding: 0;
margin: 0 auto;
max-width: 600px;
}
.login.nujetheoriehalen #intro
{
background-image: url(/public/images/nujetheoriehalen/NuJeTheorieHalen_Logo3@2x.png);
}
.login.vaarbewijs #intro
{
background-image: url(/public/images/nujetheoriehalen/Vaarbewijs_Logo@2x.png);
}
.login.nujetheoriehalen #intro p,
.login.vaarbewijs #intro p
{
text-shadow: none;
}
.login.nujetheoriehalen #logincontainer form,
.login.vaarbewijs #logincontainer form
{
border-radius: 24px;
padding: 20px 30px;
width: calc(100% - 60px);
max-width: 420px;
}
.login.nujetheoriehalen #check-code-form .field,
.login.nujetheoriehalen #login-form .field,
.login.nujetheoriehalen #forgot-password-form .field,
.login.vaarbewijs #check-code-form .field,
.login.vaarbewijs #login-form .field,
.login.vaarbewijs #forgot-password-form .field
{
width: 100%;
}
.login.nujetheoriehalen #check-code-form input,
.login.nujetheoriehalen #login-form input,
.login.nujetheoriehalen #forgot-password-form input,
.login.vaarbewijs #check-code-form input,
.login.vaarbewijs #login-form input,
.login.vaarbewijs #forgot-password-form input
{
border-color: #C6C6C6;
border-radius: 10px;
max-width: 100%;
padding: 3px 0;
}
.login.nujetheoriehalen #logincontainer .abutton,
.login.vaarbewijs #logincontainer .abutton
{
background-color: #008BFF;
}
.login.nujetheoriehalen #register-submit,
.login.vaarbewijs #register-submit
{
float: right;
}
.login.nujetheoriehalen #login-form a#forgot-password,
.login.vaarbewijs #login-form a#forgot-password,
.login.nujetheoriehalen #forgot-password-form a#back-to-login,
.login.vaarbewijs #forgot-password-form a#back-to-login
{
color: #008BFF;
font-weight: 600;
}
.login.nujetheoriehalen #login-form a#forgot-password,
.login.vaarbewijs #login-form a#forgot-password
{
float: right;
}
.login.nujetheoriehalen #check-code-form,
.login.nujetheoriehalen #login-form,
.login.nujetheoriehalen #forgot-password-form
{
background: white;
box-shadow: inset 0 0 0 10px #45BFFF, inset 0px 50px 0 10px #45BFFF, 0px 6px 8px #00000029;
}
.login.vaarbewijs #check-code-form,
.login.vaarbewijs #login-form,
.login.vaarbewijs #forgot-password-form
{
background: white;
box-shadow: inset 0 0 0 10px #008BFF, inset 0px 50px 0 10px #008BFF, 0px 6px 8px #00000029;
}
.login.nujetheoriehalen legend strong,
.login.vaarbewijs legend strong
{
color: white;
}
.login.nujetheoriehalen fieldset p,
.login.vaarbewijs fieldset p
{
font-weight: 600; /* semibold */
}
#forgot-password-form .error-holder.permanent
{
top: 65px;
bottom: auto;
}
.login form legend
{
font-size: 24px;
margin-bottom: 30px;
}
.login form legend strong
{
color: #0099cc;
}
.login.onlinetheorieles #check-code-form legend,
.login.onlinetheorieles #login-form legend,
.login.onlinetheorieles #forgot-password-form legend
{
visibility: hidden;
}
.login.onlinetheorieles #forgot-password-form fieldset.goback
{
position: absolute;
bottom: 10px;
}
.login fieldset p
{
font-weight: bold;
}
.login #forgot-password-form fieldset p
{
max-width: 300px;
}
.login form .field
{
margin: 5px 0 5px 0;
height: 45px;
float: none;
background: transparent;
}
#login-form .field,
#forgot-password-form .field {
width: 250px;
}
#check-code-form .field {
width: 200px;
}
.login form .field label
{
display: none;
}
.login button.abutton
{
margin: 0;
}
.login.onlinetheorieles button#register-submit,
.login.onlinetheorieles button#login-submit,
.login.onlinetheorieles form#forgot-password-form button[type="submit"],
.login.onlinetheorieles #logincontainer a.google,
.login.onlinetheorieles #logincontainer a.facebook
{
border-radius: 0;
background-repeat: no-repeat;
background-size: contain;
color: transparent;
background-color: transparent;
background-position: center center;
}
.login.onlinetheorieles button#register-submit
{
background-image: url(/public/images/loginpagina/otl_btn_register.svg);
}
.login.onlinetheorieles button#register-submit:hover
{
background-image: url(/public/images/loginpagina/otl_btn_register_hover.svg);
}
.login.onlinetheorieles button#login-submit
{
background-image: url(/public/images/loginpagina/otl_btn_login.svg);
}
.login.onlinetheorieles button#login-submit:hover
{
background-image: url(/public/images/loginpagina/otl_btn_login_hover.svg);
}
.login.onlinetheorieles form#forgot-password-form button[type="submit"]
{
background-image: url(/public/images/loginpagina/otl_btn_send.svg);
}
.login.onlinetheorieles form#forgot-password-form button[type="submit"]:hover
{
background-image: url(/public/images/loginpagina/otl_btn_send_hover.svg);
}
.login.onlinetheorieles #logincontainer a.google
{
width: 120px;
background-image: url(/public/images/loginpagina/otl_google.svg);
}
.login.onlinetheorieles #logincontainer a.google:hover
{
background-image: url(/public/images/loginpagina/otl_google_hover.svg);
}
.login.onlinetheorieles #logincontainer a.facebook
{
width: 120px;
background-image: url(/public/images/loginpagina/otl_facebook.svg);
}
.login.onlinetheorieles #logincontainer a.facebook:hover
{
background-image: url(/public/images/loginpagina/otl_facebook_hover.svg);
}
.login form legend span {
color: #fff;
}
a#forgot-password {
margin-left: 15px;
}
.login form a, .login form a:visited {
font-size: 14px;
color: #0099cc;
text-decoration: none;
}
.login form legend strong,
.login.onlinetheorieles form a,
.login.onlinetheorieles form a:visited {
color: #408DCD;
}
.login form a:hover {
text-decoration: underline;
}
.lock
{
display: none;
position: absolute;
right: 0px;
top: 5px;
width: 17px;
height:22px;
background: transparent url(/public/images/locked.png) no-repeat center center;
}
.locked
{
opacity: 0.5;
}
button.locked:hover
{
background-position: inherit;
cursor: default;
}
/* choose product */
#connect_popup.logoutpopup p, .syncpopup p {
font-size: 14px;
color: #666;
line-height: 20px;
font-weight: bold;
}
.logoutpopup p, .syncpopup p
{
font-size: 18px;
line-height: 24px;
}
.logoutpopup small, .syncpopup small
{
font-size: 15px;
line-height: 1;
}
.hulpdienstpopup p
{
font-size: 16px;
line-height: 1.3;
}
.logoutpopup, .syncpopup, .hulpdienstpopup
{
position: absolute;
top: 0;
left: 0;
}
.logoutpopup, .syncpopup, .hulpdienstpopup
{
position: fixed;
display: none;
width: 100%;
height: 100%;
}
.logoutpopup .overlay, .syncpopup .overlay, .hulpdienstpopup .overlay
{
position: fixed;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
.logoutpopup .content, .syncpopup .content, .hulpdienstpopup .content
{
height: 380px;
width: 570px;
display: none;
max-height: 100%;
overflow: auto;
padding: 15px;
position: fixed; /* absolute; */
top: 50%;
left: 50%;
background-color: #fff;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
border: 1px solid #707070;
border-radius: 15px;
box-shadow: 0px 5px 10px #00000029;
z-index:1001;
}
.hulpdienstpopup .content
{
max-width: 90%;
}
#logoutpopup.logoutpopup .content
{
height: 151px;
width: 373px;
}
.logoutpopup .content .buttons, .syncpopup .content .buttons
{
position: absolute;
width: 349px;
bottom: 0px;
}
.logoutpopup .content div:not(.error-holder)
{
font-size: 16px;
margin: 0px 12px 20px 12px;
line-height: 22px;
color: #000000;
}
.logoutpopup .content .buttons a, .logoutpopup .content button
{
width: 107px;
}
.logoutpopup .content a.uitloggen
{
float: left;
}
.logoutpopup .content a.keuzescherm
{
float: right;
}
.logoutpopup .close, .hulpdienstpopup .close
{
position: absolute;
top: 10px;
right: 10px;
font-weight: bold;
cursor: pointer;
width: 25px;
height: 25px;
cursor: pointer;
text-indent: -99999px;
background: #666 url(/public/images/portal/icon_close_light.svg) no-repeat top left;
background-size: 25px 25px;
border-radius: 50%;
opacity: 1;
}
.logoutpopup .portretright
{
position: absolute;
bottom: 0;
right: 0;
}
.logoutpopup .contentinner1
{
width: 100%;
min-height: 370px;
position: relative;
background-size: cover;
padding-top: 10%;
padding-left: 10%;
padding-bottom: 5%;
}
.logoutpopup.motor .contentinner1
{
background-image: url(/public/images/niv/bike.jpg);
}
.logoutpopup .contentinner1text
{
position: relative;
width: 65%;
min-height: 200px;
color: #fff;
background-color: rgba(0,153,204,0.9);
padding: 20px 60px 20px 20px;
border-radius: 10px;
}
.logoutpopup.motor .contentinner1text
{
background-color: rgba(0,153,0,0.9);
}
.logoutpopup .contentinner1text h1
{
font-size: 40px;
font-weight: normal;
font-style: normal;
letter-spacing: 1.5px;
font-family: 'VAGRoundedLTPro-Bold','Open Sans', Arial, Helvetica, sans-serif;
margin-bottom: 20px;
}
.logoutpopup .contentinner1text p
{
font-size: 16px;
line-height: 24px;
}
.logoutpopup .contentinner1text .yellowbutton
{
position: absolute;
right: -60px;
top: 50px;
}
.logoutpopup .contentinnerimg,
.logoutpopup .contentinner3
{
display: none;
width: 100%;
}
.logoutpopup .contentinner3
{
position: relative;
height: 170px;
}
.logoutpopup .contentinner3 .portretright
{
height: 220px;
}
.logoutpopup .contentinner3 button.order
{
height: 40px;
line-height: 40px;
border-radius: 20px;
font-size: 18px;
margin-top: 60px;
margin-left: 10%;
padding: 0 40px;
}
.logoutpopup .contentinner2
{
position: relative;
width: calc(100% - 310px);
padding: 20px 20px 20px 10px;
}
.logoutpopup .contentinner2 .nivlogo
{
position: absolute;
top: 20px;
left: 10px;
}
#content .logoutpopup .contentinner2 > p
{
margin-left: 90px;
}
.logoutpopup button.order
{
margin-top: 1.5em;
}
.logoutpopup.motor button.order
{
background-color: #009900;
}
.logoutpopup.motor button.order:hover
{
background-color: #00bb00;
}
#connect_popup_first_timer .content .popup {
margin: 0px 12px 20px 12px;
}
#connect_popup .content {
height: 494px !important;
}
#connect_popup {
height: 420px !important;
}
#product_container.popup .column {
border: none !important;
}
#product_container
{
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 1rem;
/*align-items: flex-start;*/
}
#product_container .column
{
/*max-width: 360px;*/
flex-basis: 620px;
/*padding-top: 16px;
padding-bottom: 16px; */
border-top: 2px solid #D7D7D7;
border-bottom: 2px solid #D7D7D7;
}
#product_container .column h1
{
margin-top: 16px;
color: #408DCD;
}
.column span.instruction
{
color: #666666;
font-weight: bold;
}
#product_container .column form#check-code-form, #product_container .column form#login-form
{
margin-top: 16px;
margin-bottom: 40px;
}
#product_container .column form#login-form
{
margin-top: 40px;
margin-bottom: 40px;
}
#product_container .column form input#register-code
{
width: 253px;
}
.column table
{
table-layout: auto;
width: 620px;
margin-bottom: 16px;
}
.column .restapi table
{
margin: 1.5em 0;
}
#product_container .column table tr
{
width: 466px;
}
.column table tr
{
height: 30px;
border-top: 1px solid #D7D7D7;
border-bottom: 1px solid #D7D7D7;
}
.column table
{
width: 100%;
}
.column table tr:nth-child(odd)
{
background-color:#F8F8F8;
}
.column table tr:nth-child(even)
{
background-color: #ffffff;
}
table tr td div.description, table tr td.description, table tr td.icon {
vertical-align: middle;
}
table tr td div.description, table tr td.icon input[type='checkbox'] {
margin-left: 8px;
}
#product_container .column table tr td div, #product_container .column table tr td div, table tr td div:not(.description)
{
height: 30px;
width: 30px;
padding: 2px;
background-position: center;
background-repeat: no-repeat;
}
#product_container .column table tr td.icon, table tr td.icon
{
width: 40px;
text-align: left;
}
#product_container .column table tr td.remove
{
width: 40px;
text-align: right;
}
table tr td div.icon_auto, table tr td div.icon_auto_be, table tr td div.icon_auto_fr
{
background-image: url("/public/images/choose_product/auto.svg");
}
table tr td div.icon_motor, table tr td div.icon_motor_be, table tr td div.icon_motor_fr
{
background-image: url("/public/images/choose_product/motor.svg");
}
table tr td div.icon_bromfiets, table tr td div.icon_bromfiets_be, table tr td div.icon_bromfiets_fr
{
background-image: url("/public/images/choose_product/bromfiets.svg");
}
table tr td div.icon_professional
{
background-image: url("/public/images/choose_product/prof.svg");
}
table tr td div.icon_cluster
{
background-image: url("/public/images/choose_product/cluster.svg");
}
table tr td div.icon_deactivated_auto
{
background-image: url("/public/images/choose_product/auto_deactivated.svg");
}
table tr td div.icon_deactivated_motor
{
background-image: url("/public/images/choose_product/motor_deactivated.svg");
}
table tr td div.icon_deactivated_bromfiets
{
background-image: url("/public/images/choose_product/bromfiets_deactivated.svg");
}
table tr td div.icon_deactivated_professional
{
background-image: url("/public/images/choose_product/prof_deactivated.svg");
}
table tr td div.icon_deactivated_cluster
{
background-image: url("/public/images/choose_product/cluster_deactivated.svg");
}
#product_container table tr td a
{
text-decoration: none;
}
#product_container table tr td a div.description, table tr td div.description
{
width: auto;
line-height: 30px;
padding: 2px;
color: #666666;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#product_container .column table tr td a div.description:hover
{
font-weight: bold;
}
#product_container .column table tr td button.delete, #connect_popup .content button.close, #connect_popup_first_timer .content button.close
{
height: 30px;
width: 30px;
padding: 2px;
background-image: url("/public/images/choose_product/close.svg");
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
background-size: auto;
}
#connect_popup .content button.close
{
display: block;
margin-right: 0px;
}
#product_container .column form button.google, form button.google
{
width: 253px;
height: 30px;
margin-top: 12px;
background: #CD4438 0% 0% no-repeat padding-box;
border-radius: 15px;
opacity: 1;
/* background-image: url("/public/images/choose_product/meld_je_aan_met_google.svg"); */
background: #CD4438 url('/public/images/loginpagina/btn_google.svg') 6px 4.5px no-repeat;
}
#product_container .column form button.google:hover, form button.google:hover
{
background: #993329 url('/public/images/loginpagina/btn_google.svg') 6px 4.5px no-repeat;;
}
#product_container .column form button.facebook
{
width: 253px;
height: 30px;
margin-top: 12px;
background: #408DCD 0% 0% no-repeat padding-box;
border-radius: 15px;
opacity: 1;
/* background-image: url("/public/images/choose_product/meld_je_aan_met_facebook.svg"); */
background: #106FB4 url('/public/images/loginpagina/btn_facebook.svg') 6px 4.5px no-repeat;
}
#product_container .column form button.facebook:hover
{
background-color: #2F6999;
}
#product_container .column.personal
{
padding-left: 1rem;
padding-right: 1rem;
}
#product_container .column.account,
#product_container .column.personal
{
}
#product_container .column
{
border-right: none;
}
.column h1
{
font-weight: bold;
}
/* Facebook */
.loginBtn--facebook {
display: block;
margin-bottom: 10px;
height: 30px;
width: 240px;
line-height: 30px;
border-radius: 15px;
background-color: #4C69BA;
text-align: center;
background-image: linear-gradient(#4C69BA, #3B55A0);
/*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
text-shadow: 0 -1px 0 #354C8C;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png');
background-repeat: no-repeat;
background-position: 6px 6px;
}
/* Google */
.loginBtn--google {
/*font-family: "Roboto", Roboto, arial, sans-serif;*/
display: block;
margin-bottom: 10px;
height: 30px;
width: 240px;
line-height: 30px;
border-radius: 15px;
background-color: #DD4B39;
text-align: center;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png');
background-repeat: no-repeat;
background-position: 6px 6px;
}
#logincontainer a.google, #logincontainer a.facebook
{
display: inline-block;
width: 140px;
height: 30px;
margin-top: 12px;
margin-right: 15px;
text-align:center;
line-height: 30px;
color: #fff;
text-decoration: none;
border-radius: 15px;
opacity: 1;
}
#logincontainer a.google
{
background: #CD4438 url('/public/images/loginpagina/btn_google.svg') 6px 4.5px no-repeat;
/*background-image: url("/public/images/loginpagina/google.svg"); */
}
#logincontainer a.google:hover
{
background-color: #993329;
}
#logincontainer a.facebook
{
background: #106FB4 url('/public/images/loginpagina/btn_facebook.svg') 6px 4.5px no-repeat;
/* background-image: url("/public/images/loginpagina/facebook.svg"); */
}
#logincontainer a.facebook:hover
{
background-color: #2F6999;
}
#logincontainer .fb_iframe_widget
{
display: inline-block;
width: 120px;
height: 30px;
margin-top: 12px;
margin-left: 15px;
background: #408DCD 0% 0% no-repeat padding-box;
border-radius: 15px;
opacity: 1;
background-image: url("/public/images/loginpagina/facebook.svg");
}
@media screen and (max-width: 700px) {
.logoutpopup .portret, .syncpopup .portret
{
display: none;
}
.logoutpopup .contentinner1text, .syncpopup .contentinner1text
{
width: 85%;
}
.logoutpopup .contentinner2, .syncpopup .contentinner2
{
width: 95%;
}
#product_container .column form input
{
width: auto;
}
}
@media screen and (max-width: 500px) {
.logoutpopup .content, #connectpopup .content, .syncpopup .content, .hulpdienstpopup .content
{
width: 100%;
}
.logoutpopup .contentinner1, .syncpopup .contentinner1
{
padding: 0;
background-image: none;
min-height: initial;
}
.logoutpopup .contentinner1text, .syncpopup .contentinner1text
{
width: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.logoutpopup .contentinner1text .yellowbutton, .syncpopup .contentinner1text .yellowbutton
{
display: none;
}
.logoutpopup .contentinnerimg, .syncpopup .contentinnerimg
{
display: block;
}
.logoutpopup .contentinner2, .syncpopup .contentinner2
{
width: 100%;
background-color: #eee;
}
.logoutpopup .contentinner2 .nivlogo, .syncpopup .contentinner2 .nivlogo
{
display: none;
}
#content .logoutpopup .contentinner2 > p, #content .syncpopup .contentinner2 > p
{
margin-left: 10px;
}
.logoutpopup .contentinner3, .syncpopup .contentinner3
{
display: block;
}
#product_container .column form input
{
width: auto;
}
}
table {
margin-top: 12px;
}
@media only screen and (max-width: 1090px) {
#product_container {
flex-flow: column wrap;
flex-direction: column-reverse;
align-items: center;
}
#connect_popup_first_timer #connect_popup #product_container {
flex-direction: unset;
}
#product_container .column {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
flex-basis: unset;
/* border-top: 1px solid #D7D7D7;
border-bottom: 1px solid #D7D7D7;
*/ }
#product_container .column .accounts {
order: -1;
}
#product_container .column .accounts, #product_container .column .connect, #product_container .column .register {
width: 100%;
border: unset;
border-top: unset;
border-bottom: unset;
}
#product_container .column .accounts table, #connect_popup_first_timer .content .column table {
width: 100%;
table-layout: fixed;
}
#product_container .column table tr td.description {
width: auto;
}
#product_container .column table tr td a div.description {
width: auto;
}
#product_container .column .accounts.restapi table
{
table-layout: auto;
}
}
@media screen and (max-width: 1000px) {
html.login {
min-height: 1130px;
}
.login article {
margin: 0 0 0 20px;
}
.login.freepackage article {
margin: auto;
left: -2%;
}
#logincontainer {
display: block;
}
#logincontainer #rest-school,
#logincontainer form {
width: 100%;
}
#check-code-form, #login-form, #forgot-password-form {
order: 0;
}
.login.nujetheoriehalen #logincontainer form,
.login.vaarbewijs #logincontainer form,
.login.onlinetheorieles #logincontainer form {
margin-left: auto;
margin-right: auto;
}
.login.onlinetheorieles #logincontainer #check-code-form::before {
background-image: none;
}
}
@media screen and (max-width: 768px) {
@media (orientation: portrait) {
.login.freepackage article {
margin: 0;
left: 0;
width: calc(100% - 20px);
padding: 0 10px;
}
.login.freepackage #freepackage {
width: calc(100% - 40px);
}
#logincontainer a.google, #logincontainer a.facebook {
width: 120px;
}
}
}
@media screen and (max-width: 550px) {
#logincontainer #rest-school,
#logincontainer form {
width: 90%;
padding: 20px 10px;
}
.login #intro
{
width: 95%;
}
}
@media screen and (max-width: 500px) {
.login #intro
{
padding-top: 20px;
margin-bottom: 20px;
}
}
@media screen and (max-width: 450px) {
#logincontainer #rest-school,
#logincontainer form {
background-size: 50px auto;
background-position: 99% bottom;
}
.login form legend
{
font-size: 18px;
margin-bottom: 30px;
}
}
.login.freepackage #container
{
background-image: url(/public/images/backgrounds/TL_bg_speedtheorie.jpg);
}
#freepackage
{
width: 92%;
max-width: 670px;
height: auto;
min-height: 360px;
background: #fff url(/public/images/shop/illu_blokvlag.png) no-repeat bottom center;
}
#freepackage,
#freepackage a
{
color: #333;
}
#freepackage h3
{
color: #52b63b;
font-size: 24px;
line-height: 1.4;
margin-bottom: 20px;
}
#freepackage p
{
font-size: 14px;
margin: 20px 0;
}
#freepackage p.try {
font-size: 18px;
font-weight: bold;
margin: 30px 0;
}
#freepackage a
{
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}
#freepackage a:hover .icon { opacity: 0.8; }
#freepackage a span
{
vertical-align: middle;
}
#freepackage a span.icon {
display: inline-block;
width: 50px;
height: 50px;
background-color: #52b63b;
background-repeat: no-repeat;
background-position: center center;
border-radius: 50%;
}
#freepackage a span.text {
padding-left: 5px;
margin-right: 16px;
}
span#freedemo_car { background-image: url(/public/images/shop/icon_free-car.svg); }
span#freedemo_bike { background-image: url(/public/images/shop/icon_free-motor.svg); }
span#freedemo_moped { background-image: url(/public/images/shop/icon_free-scooter.svg); }
a.abutton.backtoshop,
#freepackage a.abutton.backtoshop
{
font-size: 14px;
background-color: #000;
color: #fff;
}
a.abutton.backtoshop:hover,
#freepackage a.abutton.backtoshop:hover
{
opacity: 0.7;
}
@media screen and (max-width: 550px) {
#freepackage a
{
font-size: 15px;
}
#freepackage a span.icon
{
width: 42px;
height: 42px;
background-size: 42px 42px;
}
#freepackage a span.text {
padding-left: 3px;
margin-right: 10px;
}
}
@media screen and (max-width: 430px) {
#freepackage a
{
font-size: 13px;
}
#freepackage a span.icon
{
width: 40px;
height: 40px;
background-size: 40px 40px;
}
#freepackage a span.text {
padding-left: 2px;
margin-right: 6px;
}
}
@media screen and (max-width: 390px) {
#freepackage a span.icon
{
width: 35px;
height: 35px;
background-size: 35px 35px;
}
#close-tab-button {
top: -28px;
}
}
#startflash {
position: absolute;
float: left;
left: 150px;
width: 150px;
color: #fff;
font-size: 14px;
cursor: pointer;
}
#startflash a {
color: #fff;
}
#balloon {
height: 56px;
margin-bottom: 50px;
overflow: hidden;
}
#balloon ul {
margin: 0 0 0 150px;
list-style: none;
}
#balloon li {
width: 300px;
font-family: 'Arial Rounded MT Bold', Arial, Helvetica;
font-size: 14px;
font-weight: 700;
line-height: 18px;
display: none;
}
#loginvto, #loginvto:visited {
color: #fff;
text-decoration: none;
position:relative;
top:-4px;
}
#loginvto:hover {
text-decoration: underline;
}
#register-form input.error, input.error {
background-color: #f5cccc;
}
.error-holder {
width: 280px;
color: #333;
font-size: 11px;
border: 1px solid #ff7c7c;
background: #ffcece;
display: none;
position: absolute;
top: 0px;
left: -150px;
padding: 10px;
}
@media screen and (max-width: 767px)
{
#helpdeskform > .error-holder {
left: 0 !important;
}
@media screen and (orientation: landscape) {
#helpdeskform > .error-holder {
left: 151px !important;
}
}
}
@media screen and (min-width: 768px)
{
#helpdeskform > .error-holder {
left: 151px !important;
}
}
.error-holder ul {
padding: 0;
}
#login-form .error-holder {
left: 5%;
top: auto;
bottom: 50px;
z-index: 10;
}
#check-code-form .error-holder {
left: 5% !important;
top: auto;
left: 150px;
bottom: 60px;
}
#forgot-password-form .error-holder {
top: auto;
bottom: 30px;
left: 87px;
z-index: 10;
}
#links .link
{
border-top: 1px solid #ccc;
padding: 10px 0 10px 0;
}
#links h3
{
font-weight: bold;
padding: 3px 0;
}
#links h4
{
font-weight: normal;
padding: 2px 0;
}
#links .abutton
{
margin-top: 5px;
}
#links .helpdesk
{
background-image: url(/public/images/shop/illu_helpdesk-xl.png);
background-repeat: no-repeat;
background-position: 180px 5px;
background-size: 52px 91px; /* 20% */
background-size: 65px 114px; /* 25% */
background-size: 78px 137px; /* 30% */
background-size: 91px 159px; /* 35% */
xbackground-size: 104px 182px; /* 40% */
}
#_links .helpdesk
{
background-image: url(/public/images/portal/illu_helpdesk-s.png);
background-repeat: no-repeat;
background-position: 160px 5px;
}
/*#helpdesk {
background: url(../images/helpdesk-icon.png) top left no-repeat;
}
#tell-a-friend {
background: url(../images/tell-a-friend-icon.png) top left no-repeat;
}
#algemene-info {
background: url(../images/meer-informatie-icon.png) top left no-repeat;
}*/
/**
*
* Select product
*
*************************************************************************************************/
.delete {
text-indent: -999em;
margin: 0 auto;
background-image: url(/public/images/shop/icon_winkel-remove.svg);
background-size: 18px;
background-position: center center;
background-repeat: no-repeat;
}
.delete,
.basket-add-item, .basket-remove-item,
.faux-delete {
display: inline-block;
height: 25px;
width: 25px;
}
/**
*
* Portal home
*
*************************************************************************************************/
.portal article {
padding-right: 330px; /* ruimte voor sidebar */
min-width: 340px;
}
.portal article,
#buttons,
#risclips,
#practiceitems,
#retrainingstatus,
#extracontent
{
min-width: 310px;
}
.portal-header {
margin: 10px 0;
}
.portalitem h1,
.portalitem h2
{
font-weight: bold;
}
#books, #retraining3chapters {
display: block;
margin-top: 15px;
border-top: 1px solid #ccc;
padding-top: 5px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
#books ul {
margin: 10px 0 0 0;
list-style: none;
}
#books li {
width: 101px;
min-height: 142px;
margin: 0 5px 0 0;
background: url(../images/book-shadow.jpg) top left no-repeat;
display: inline-block;
vertical-align: top;
}
#books .docreader
{
display: block;
margin-top: 10px;
margin-left: 35px;
}
#buttons,
#risclips,
#taxiclips,
#practiceitems,
#retrainingstatus,
#extracontent
{
width: 45%;
margin-right: 4%;
margin-top: 15px;
margin-bottom: 20px;
padding: 0;
float: left;
}
#buttons,
#risclips,
#extracontent
{
border-bottom: 1px solid #0294d0;
}
div.button {
padding: 8px 0 8px 20px;
text-decoration: none;
display: block;
position: relative;
border-top: 1px solid #0294d0;
}
.button a, .button a:visited {
text-decoration: none;
color: #333;
}
.button a:hover {
text-decoration: underline;
}
#retraining3chapters table
{
width: 100%;
}
#retraining3chapters .abutton, #retraining3certificate, .hulpdienstcertificaat
{
height: 25px;
line-height: 23px;
border-radius: 10px;
margin: 5px 0;
}
#retraining3certificate, .hulpdienstcertificaat
{
display: inline;
float: right;
margin-right: 10px;
margin-top: 0px;
height: auto;
}
#retraining3certificate.message
{
border: 2px solid #aaa;
border-radius: 0px;
color: #888;
padding: 5px 8px;
max-width: 580px;
/*
margin-top: -32px;
margin-bottom: -5px;
*/
}
#retraining3chapters .abutton[disabled],
#retraining3chapters .abutton.disabled
{
background: #f5f5f5;
color: #ccc;
opacity: 0.5;
cursor: default;
}
#retraining3chapters .link
{
text-align: center;
}
#retraining3chapters .chaptertitle
{
min-width: 20%;
text-align: left;
vertical-align: middle;
}
.status
{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
}
.status.disabled, .status.unavailable
{
background-color: #ccc;
}
#retraining3chapters .status.disabled, #retraining3chapters .status.unavailable
{
background-color: #f5f5f5;
}
.status.available
{
background-color: #777;
}
.status.started
{
background-color: #f60;
}
.status.wrong
{
background-color: #c55;
}
.status.correct, .status.done
{
background-color: #0c0;
}
#extracontent {
background: #fff;
}
#extralinks, .extralinks {
position: relative;
width: 100%;
height: 135px;
border: 1px solid #0294d0;
}
#extralinks a,
#extralinks div,
.extralinks a,
.extralinks div {
display: block;
position: absolute;
width: 235px;
height: 25px;
text-align: center;
line-height: 26px;
text-decoration: none;
color: #fff;
border: 1px solid #0294d0;
border-radius: 5px;
box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.75);
}
#extralinks a,
.extralinks a {
background-color: #0294d0;
}
#extracontent1,
#extracontent2,
#extracontent3
{
left: 20px;
}
#extracontent4,
#extracontent5,
#extracontent6
{
left: 280px;
}
#extracontent1,
#extracontent4
{
top: 10px;
}
#extracontent2,
#extracontent5
{
top: 53px;
}
#extracontent3,
#extracontent6
{
top: 96px;
}
#taxiclips
{
width: 100%;
border-top: 1px solid #ccc;
padding-top: 15px
}
#taxiclips > p
{
max-width: 830px;
}
#taxiclips a
{
text-decoration: underline;
}
#taxiclips a:hover,#taxiclips a:focus
{
text-decoration-style: dotted;
}
.taxiclipslist
{
margin: 0.75em 0 0.75em 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-auto-flow: column;
grid-gap: 0.75em;
}
@media screen and (max-width: 1200px) {
.taxiclipslist
{
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(8, 1fr);
}
}
@media screen and (max-width: 800px) {
.taxiclipslist
{
grid-template-columns: 1fr;
grid-template-rows: repeat(15, 1fr);
}
}
/**
*
* Video
*
*************************************************************************************************/
#videos {
position: relative;
font-family: 'Open Sans', Arial, Helvetica;
line-height: 20px;
font-size: 14px;
}
#videos, #videos ul {
margin: 0;
list-style: none;
/*display: flex;
justify-content: center;
align-items: center;*/
}
#videos li {
position: relative;
/*width: 248px;*/
width: 350px;
padding: 10px 28px;
/*color: #000;
font-size: 12px;*/
/*font-family: Arial;*/
/*background: url(../images/video-item-bg.jpg) top left repeat-x;*/
color: #666;
border-left: 1px solid #b0b0b0;
border-right: 1px solid #b0b0b0;
border-bottom: 1px solid #d0d0d0;
border-top: none;
background: white;
}
#videos>li{
display: flex;
justify-content: center;
flex-direction: column;
}
#videos li:first-child{
border-top: 1px solid #b0b0b0;
}
#videos li.module {
height: 65px;
}
video#html5video {
max-width: 100%;
}
.film-icon, #videos .serie.selected .movie .film-icon {
height: 26px;
width: 26px;
background: url(../images/film-icon_hl.png) top left no-repeat;
position: absolute;
right: 5px;
margin-top: -13px;
top: 50%;
}
.sub-icon {
height: 26px;
width: 26px;
background: url(../images/sub-icon_hl.png) top left no-repeat;
position: absolute;
right: 5px;
margin-top: -13px;
top: 50%;
}
.digibookdone-icon {
height: 20px;
width: 20px;
background: url(../images/digibook_done.png) top left no-repeat;
position: absolute;
right: 35px;
margin-top: -11px;
top: 50%;
}
#videos li:hover, #videos li.selected {
cursor: pointer;
/*background-position: bottom;*/
background: #e0e0e0;
}
#videos li.inactive:hover {
cursor: default;
/*background-position: top left;*/
}
#videos li:hover p, #videos li.selected p {
/*color: #fff;*/
color:#000;
}
#videos li h3 {
font-size: 16px;
font-weight: 100;
text-transform: lowercase;
}
#videos li h4 {
font-weight: 100;
}
#videos .serie:hover, #videos .serie.selected {
/*color: #fff;*/
color:#000;
}
#videos .serie:hover .film-icon,
#videos .serie.selected .film-icon,
#videos .serie.selected .movie:hover .film-icon,
#videos .serie.selected .movie.selected .film-icon{
background: url(../images/film-icon_on.png) top left no-repeat;
}
#videos .serie:hover .sub-icon,
#videos .serie.selected .sub-icon {
/*background-position: bottom left;*/
background: url(../images/sub-icon_on.png) top left no-repeat;
}
#videos .movie:hover, #videos .movie.selected {
/*color: #fff;*/
color:#000;
}
/*#videos .serie.selected .movie .film-icon {
background-position: top left;
}
#videos .serie.selected .movie:hover .film-icon,
#videos .serie.selected .movie.selected .film-icon {
background-position: bottom left;
}
*/
#videos li h3 span, #videos li h4 span {
font-weight: 700;
}
#videos li h4 span {
margin: 0 0 0 13px;
}
#videos li h3 span {
font-weight: 700;
}
#videos li ul {
position: absolute;
/*top: 0;
left: 310px;*/
top: -1px;
left: 412px;
}
#_videos li ul ul {
border-top: 2px solid #333;
border-bottom: 2px solid #333;
width: 270px;
position: relative;
/*left: 245px;*/
left: 254px;
top: -20px;
}
#videos li ul ul {
width: 270px;
position: relative;
/*left: 245px;*/
left: 356px;
top: -33px;
}
#_videos li li {
height: 18px;
padding: 12px 0;
text-indent: 10px;
line-height: 9px;
position: relative;
}
#videos li li {
padding: 12px 0;
position: relative;
}
#videos li li li {
padding: 12px 0;
width: 270px;
}
#_videos li li li {
padding: 8px 0;
width: 270px;
text-indent: 10px;
background: none;
}
#_videos li li li {
color: #000;
text-decoration: none;
}
#_videos li li li:hover {
background: none;
}
#_videos li li li.selected, #_videos li li li:hover {
/*color: #fff;*/
color:#000;
}
#videos li.chapter {
padding: 14px 28px 14px 34px;
}
#videos li.chapter h3 {
text-indent: -26px;
}
#videos li.chapter li {
padding: 14px 0;
}
#videos li td.description {
width: 235px;
}
#videos li td.moviedescription {
width: 210px;
}
/*video menu for mobile and tablet */
@media only screen and (max-width: 1090px) {
article{
padding: 0px 30px 10px 30px;
}
#videos li{
width: initial;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
#videos li.module {
height: initial;
}
#videos li ul {
position: relative;
top: initial;
left: initial;
}
#videos>li>ul{
margin-top: 30px;
margin-bottom: 30px;
}
#videos .serie.selected{
height: initial!important;
}
#videos li ul ul {
width: initial;
position: relative;
left: initial;
top: initial;
}
.sub-icon {
top: 22px;
}
.serie.selected .sub-icon{
transform: rotateZ(90deg);
}
#videos li li ul {
padding: 20px 0 20px 20px;
}
#videos li li li {
width:initial;
}
#videos li ul li.selected {
cursor: pointer;
background: #f0f0f0;
}
#videos li td.description,
#videos li td.moviedescription
{
width: auto;
}
#videos li, #videos li li, #videos li li li {
padding-right: 30px;
}
}
.serietitle, .movietitle { padding-left: 10px; }
.overlay {
background: #000;
position: fixed;
top: 0;
left: 0;
z-index: 50;
}
#video-player {
height: 361px;
width: 546px;
padding: 42px 0 0 18px;
position: absolute;
top: 50%;
left: 50%;
margin: -190px 0 0 -285px;
z-index: 1050;
background: url(../images/player.png) top left no-repeat;
}
#video-player5 {
max-height: 334px;
width: 100%;
max-width: 540px;
padding: 15px 40px 15px 40px;
position: fixed;
top: calc( 50vh - 176px);
left: calc( 50vw - 310px );
z-index: 1050;
/* background: url(../images/player.png) top left no-repeat; */
background-size: 100% 100%;
background: white;
border: 1px solid #b0b0b0;
border-radius: 15px;
text-align: center;
}
#video_player5_close{
z-index: 5000;
}
@media only screen and (max-width: 625px) {
#video-player5{
left: calc( 50vw - 270px );
width: 100%;
text-align: center;
padding: 0;
border-radius: 0;
border:0;
max-height: 300px;
max-width: 532px;
background:transparent;
}
#html5video{
border: 3px solid white;
}
}
@media only screen and (max-width: 538px) {
#video-player5{
left:0px;
width:calc(100% - 6px);
text-align: center;
padding: 0;
}
}
.player-button {
height: 40px;
width: 42px;
display: block;
position: absolute;
bottom: 18px;
text-indent: -999em;
}
#play {
left: 64px;
background: url(../images/play-button.png) bottom left no-repeat;
bottom: 15px;
}
#stop {
left: 18px;
background: url(../images/stop-button.png) bottom left no-repeat;
bottom: 15px;
}
#close {
width:36px;
height:32px;
position:absolute;
top: 10px;
right: 9px;
background: url(../images/close-button.png) bottom left no-repeat;
}
#play:hover, #stop:hover, #close:hover {
background-position: top left;
}
#screen {
}
#status {
padding: 5px 0 0 0;
}
#status ul {
list-style: none;
float: left;
margin: 0;
}
#status table th,
#status table td
{
font-size: 12px;
text-align: left;
vertical-align: middle;
height: 30px;
}
#status table td
{
padding-left: 5px;
}
#user-status, #time-left, #time-left-training, #time-left-books, #time-left-digibooks, #time-left-videos, #log-time {
height: 22px;
line-height: 22px;
color: #000;
}
#status th.loggedin,
#status th.digibooks,
#status th.videos,
#status th.logtime,
#status th.coursedate
{
padding-left: 29px;
vertical-align: middle;
height: 40px;
}
#status th.loggedin {
background: url(../images/portal/icon-right-login_small.svg) left center no-repeat;
}
#status th.digibooks {
background: url(../images/portal/icon-right-digibook.svg) left center no-repeat;
}
#status th.videos {
background: url(../images/portal/icon_risclip.svg) left center no-repeat;
}
#status th.logtime {
background: url(../images/portal/icon_studytime.svg) left center no-repeat;
}
#status th.coursedate {
background: url(../images/portal/icon_opwaarderen-clock_black.svg) left center no-repeat;
}
#status th {
color: #0099cc;
}
#status th.neutral
{
color: #333;
}
#status tr.logtimeexplain th,
#status tr.logtimeexplain td
{
height: auto;
padding-top: 5px;
}
#status td.logtimeexplain
{
padding-left: 0px;
padding-bottom: 10px;
}
#user-status {
height: 22px;
line-height: 22px;
}
#logtimeexplain
{
position: absolute;
top: 10px;
right: 8px;
width: 88%;
background: #fff;
padding: 25px 10px 10px 10px;
box-shadow: 3px 3px 15px rgba(0,0,0,0.5);
display:none;
}
#logtimeexplain .close
{
position: absolute;
top: 5px;
right: 5px;
padding: 0;
width: 20px;
height: 20px;
cursor: pointer;
text-indent: -99999px;
background: transparent url(/public/images/portal/icon_close.svg) no-repeat top left;
background-size: 20px 20px;
}
#time-left, #time-left-training, #log-time {
height: 19px;
line-height: 19px;
}
#time-left, #time-left-training, #log-time {
margin: 0 0 0px 0;
background: url(../images/klokje.png) top left no-repeat;
}
#user-status span, #time-left span, #time-left-training span, #log-time span {
color: #333;
}
#log-time.reached, #log-time.reached span
{
color: #0c0;
}
#log-time.notreached, #log-time.notreached span
{
color: red;
}
footer {
clear: both;
color: #333;
font-size: 14px;
text-indent: 0px;
background: #fff;
}
footer a, footer a:visited {
text-decoration: none;
color: #333;
}
footer a:hover {
text-decoration: underline;
color: #333;
}
div.footerbottom
{
background: #151515;
font-size: 12px;
line-height: 80px;
color: #565656;
text-align: center;
}
.login.onlinetheorieles div.footerbottom
{
background: #fff;
}
div.footerbottom img
{
margin-right: 20px;
vertical-align: middle;
}
#__status.professional {
width: 845px;
height: 80px;
position: absolute;
top: 0;
right: 0;
background: #0294d0;
padding-left: 169px;
}
@media all and (orientation:portrait) {
}
@media all and (orientation:landscape) {
}
@media screen and (max-device-width: 480px) {
/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}
@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a:after { content: " (" attr(href) ")"; }
abbr:after { content: " (" attr(title) ")"; }
.ir a:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
/* exam-items */
#mainmenubutton, #exammenubutton, #closebutton
{
position: absolute;
top: 2px;
right: 10px;
height: 22px;
padding: 0;
margin: 0;
text-transform: capitalize;
cursor: pointer;
border: 0;
text-indent: -9999px;
}
#mainmenubutton
{
background: #333 url(/public/images/exams/btn_hoofdmenu_on.png) no-repeat;
width: 160px;
}
#mainmenubutton:hover
{
background-image: url(/public/images/exams/btn_hoofdmenu_hl.png);
}
body.pl #mainmenubutton
{
background: #333 url(/public/images/exams/polish/btn_hoofdmenu_on.png) no-repeat;
width: 212px;
}
body.pl #mainmenubutton:hover
{
background-image: url(/public/images/exams/polish/btn_hoofdmenu_hl.png);
}
body.tr #mainmenubutton
{
background: #333 url(/public/images/exams/turkish/btn_hoofdmenu_on.png) no-repeat;
width: 163px;
}
body.tr #mainmenubutton:hover
{
background-image: url(/public/images/exams/turkish/btn_hoofdmenu_hl.png);
}
#exammenubutton
{
background: #333 url(/public/images/exams/btn_examenmenu_on.png) no-repeat;
width: 170px;
}
#exammenubutton:hover
{
background-image: url(/public/images/exams/btn_examenmenu_hl.png);
}
body.pl #exammenubutton
{
background: #333 url(/public/images/exams/polish/btn_examenmenu_on.png) no-repeat;
width: 212px;
}
body.pl #exammenubutton:hover
{
background-image: url(/public/images/exams/polish/btn_examenmenu_hl.png);
}
body.tr #exammenubutton
{
background: #333 url(/public/images/exams/turkish/btn_examenmenu_on.png) no-repeat;
width: 176px;
}
body.tr #exammenubutton:hover
{
background-image: url(/public/images/exams/turkish/btn_examenmenu_hl.png);
}
#closebutton
{
background: #333 url(/public/images/exams/bttn_stoppen_on.png) no-repeat;
width: 98px;
}
#closebutton:hover
{
background-image: url(/public/images/exams/bttn_stoppen_hl.png);
}
body.pl #closebutton
{
background: #333 url(/public/images/exams/polish/bttn_stoppen_on.png) no-repeat;
width: 108px;
}
body.pl #closebutton:hover
{
background: #333 url(/public/images/exams/polish/bttn_stoppen_hl.png) no-repeat;
}
body.tr #closebutton
{
background: #333 url(/public/images/exams/turkish/bttn_stoppen_on.png) no-repeat;
width: 83px;
}
body.tr #closebutton:hover
{
background: #333 url(/public/images/exams/turkish/bttn_stoppen_hl.png) no-repeat;
}
#practicenextbutton, #practicedonebutton
{
position: absolute;
left: 730px;
top: 460px;
width: 220px;
height: 40px;
background: url(/public/images/exams/fwd_on.png) no-repeat right top;
}
#practicenextbutton:hover, #practicedonebutton:hover
{
background-image: url(/public/images/exams/fwd_hl.png);
}
.coachleft,
#btnExtracredit
{
position: absolute;
left: 0;
background-color: #0099cc;
background-image: url(/public/images/exams/coach.png);
padding: 16px 0px 5px 10px;
width: 249px;
color: #ffffff;
}
.coachleft
{
top: 70px;
height:67px;
}
.header
{
color: #003366
}
p.paragraph
{
margin: 15px 0;
}
#btnExtracredit
{
top: 170px;
height:30px;
cursor:pointer;
}
#extracredit
{
position:fixed;
display:none;
width:100%;
height:100%;
}
#extracredit .overlay
{
position:fixed;
width:100%;
height:100%;
opacity:0.5;
}
#extracredit #content
{
position:absolute;
display:none;
left:250px;
top:60px;
width:480px;
height:330px;
padding: 20px 0 0 10px;
background-color:white;
color:#000099;
z-index:1001;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#extracredit #content p
{
font-weight:bold;
margin: 10px 0;
}
#extracredit #content table
{
margin-top: 20px;
}
#extracredit #content td
{
vertical-align: middle;
height:50px;
}
#extracredit #content td button
{
width: 80px;
height: 33px;
font-weight:normal;
background: #0a0;
color: #fff;
}
#extracredit #content #ideallogo,
#extracredit #content #paypallogo,
#extracredit #content #bancontactlogo
{
position:absolute;
bottom:10px;
}
#extracredit #content #ideallogo
{
right:10px;
}
#extracredit #content #paypallogo
{
right: 70px;
}
#extracredit #content #bancontactlogo
{
right: 130px;
}
#extracredit #bttn_close
{
background:#fff url(/exams/images/bttn_close_on.png) no-repeat;
position:absolute;
width: 32px;
height:32px;
top:10px;
right:8px;
padding: 0;
margin: 0;
text-transform: capitalize;
cursor: pointer;
border: 0;
text-indent: -9999px;
}
#extracredit #bttn_close:hover {
background-image:url(/exams/images/bttn_close_hl.png);
}
/* resultclasses */
.lightbgcolor
{
background-color: #23ACDA;
}
#scoreinfo
{
width: 250px;
color: #fff;
background-color: #1F3664;
padding: 10px;
position: absolute;
left: 0;
bottom: 10px;
}
#warnmessage
{
position: absolute;
color: red;
top: 20px;
left: 280px;
}
/* redesign */
.abutton,
button.abutton[disabled]:hover
{
background: #0099cc;
}
.abutton:hover
{
background: #00bbee;
}
.login.onlinetheorieles .abutton
{
background: #408DCD;
}
.login.onlinetheorieles .abutton:hover
{
background: #2173AA;
}
a.abutton,
button.abutton
{
display: inline-block;
text-indent: 0;
color: #fff;
text-align: center;
vertical-align: middle;
width: auto;
height: 30px;
line-height: 30px;
border-radius: 15px;
font-size: 14px;
font-weight: normal;
padding: 0 20px;
text-decoration: none;
}
.abutton:hover
{
text-decoration: none;
}
body.notfound #main
{
min-height: 500px;
text-align: center;
}
/*
* drive! practice-invite
*/
#practiceitems {
/*float: right;
padding-left: 10px;
*/
width: 100%;
min-width: 310px;
margin-top: 20px;
background: #fff;
z-index: 2;
}
#practiceitems h1
{
position: relative;
}
#practiceitems a.info
{
display: inline-block;
width: 20px;
height: 20px;
/*
background: transparent url(/public/images/meer-informatie-icon.png) no-repeat left top;
background-size: 20px;
*/
background: #0294d0;
position: absolute;
right: 0;
}
#practiceitems a.info:hover
{
background-position: left bottom;
}
#practiceitems table
{
float: left;
}
#practiceitems th,
#practiceitems td {
padding: 10px 0;
border: 2px solid #0294d0;
}
#practiceitems th {
font-weight: normal;
color:#888;
}
#practiceitems th.widehead {
text-align: left;
padding: 0 0 0 0px;
border: 0;
}
#practiceitems td {
text-align: center;
}
#practiceitems th:first-child,
#practiceitems td:first-child {
border-left-width: 0;
}
.practiceitem { width: 120px; }
.practiceheader span {
width: 86px;
display: inline-block;
text-align: center;
}
.practiceitem a, .practiceitem span {
width: 80px;
display: inline-block;
color: #fff;
padding: 3px;
border-radius: 11px;
text-align: center;
box-shadow: 1px 2px 3px #777;
}
.practiceitem a {
text-decoration: none;
}
.practiceitem .blocked { background-color: #ccc; box-shadow: none; }
.practiceitem .todo { background-color: #d00; }
.practiceitem .done { background-color: #0a0; }
.practiceitem .report { background-color: #777; }
#practiceinvite {
display: inline-block;
text-align: left;
z-index: 3;
margin-top: 40px;
margin-left: 10px;
}
#practiceinvitepopup {
position: relative;
display: none;
background: #fff;
text-align: left;
box-shadow: 1px 3px 6px #777;
padding: 15px;
margin-top: 7px;
}
#practiceinvitepopup .close
{
position: absolute;
top: 0;
right: 0;
width: 25px;
height: 25px;
background: transparent url(/public/images/gray_dark/x_11x11.png) no-repeat center center;
cursor: pointer;
}
#practiceinviteemail
{
min-width: 270px;
}
#practiceinvitebutton, #sendpracticeinvitebutton
{
width: auto;
height: auto;
line-height: 18px;
border-radius: 15px;
font-weight: normal;
padding: 3px 15px;
text-decoration: none;
font-size: 11px;
text-transform: uppercase;
outline: none;
}
#practiceinvitebutton
{
background: #fff;
color: #333;
border: 1px solid #888;
/*box-shadow: 1px 3px 6px #777;*/
}
#sendpracticeinvitebutton
{
background: #0294d0;
color: #fff;
/*box-shadow: 1px 2px 3px #000;*/
margin-top: 10px;
}
#practiceinvitemessage
{
margin: 5px 0;
}
.docreader
{
margin-top: 5px;
margin-left: 42px;
}
#retrainingstatus h1
{
display: inline-block;
}
.retraining_status
{
display: inline-block;
margin: 5px 10px 5px 0px;
color: #fff;
width: 24px;
height: 21px;
padding-top: 3px;
border: 1px solid #777;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
background-color: #aaa;
text-decoration: none;
font-weight: bold;
}
.retraining_status.todo { background-color: #aaa; color:#000; }
.retraining_status.viewed { background-color: #ee0; color:#000; border-color: #aa0;}
.retraining_status.redo { background-color: #f93; color:#000; border-color: #a62;}
.retraining_status.done { background-color: #0c0; color: #fff; border-color: #090;}
#trialperiod header,
#trialperiod #logo
{
height: auto;
}
#trialperiod #trialhead
{
background-color: #0294d0;
color:#fff;
padding: 3px 10px;
font-size:16px;
}
#trialperiod #trialhead .abutton
{
float: right;
background-color: #fff;
color: #0294d0;
margin-top: 4px;
}
@media screen and (max-width: 720px) {
.portal article {
padding-right: 30px;
}
#userstatus {
min-width: 300px;
width: 45%;
margin-right: 5%;
position: relative;
top: inherit;
right: inherit;
border-right-width: 1px;
}
}
@media screen and (max-width: 500px) {
#breadcrumbs {
width: auto;
height: auto;
}
.portal article {
padding-left: 15px;
padding-right: 15px;
}
#trialperiod #produced-by
{
display: none;
}
}
#books:hover,
#buttons:hover,
#practiceitems:hover,
#risclips:hover,
#retrainingstatus:hover,
#extracontent:hover
{
/*background-color: #f8f8f8;*/
}
@media screen and (max-width: 767px) {
.cbrquestion #container #main form label,
.cbrquestion #container #main form select,
.cbrquestion #container #main form input,
.cbrquestion #container #main form textarea {
box-sizing: border-box;
width: 96%;
max-width: 96%;
}
.cbrquestion #container #main form .not-mobile {
display: none;
}
.cbrquestion #container #main form .is-mobile {
display: block;
}
.cbrquestion #container #main form button[type="submit"] {
margin-right: 13px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.cbrquestion #container #main form textarea {
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
.cbrquestion #container #main form .not-mobile {
display: block;
width: 100%;
}
.cbrquestion #container #main form .is-mobile {
display: none;
}
.cbrquestion #container #main form .inline-inputs {
width: 100%;
flex-direction: row;
justify-content: space-between;
}
.cbrquestion #container #main form .inline-inputs input {
width: 48.5%;
max-width: 48.5%;
}
.cbrquestion #container #main form #q_email {
width: 100%;
max-width: 99%;
}
.cbrquestion #container #main form #schoolname {
width: 49.5%;
max-width: 49.5%;
}
#cbrquestionform label {
width: 289px;
}
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
#cbrquestionform textarea,
.cbrquestion #container #main form #schoolname,
.cbrquestion #container #main form #q_email {
width: 100%;
max-width: 592px;
}
}
@media screen and (min-width: 1024px) {
.cbrquestion #container #main form .is-mobile {
display: none;
}
.cbrquestion #container #main form .inline-inputs {
display: inline-block;
}
.cbrquestion #container #main form #schoolname,
.cbrquestion #container #main form #q_email {
width: 100%;
max-width: 592px;
}
}
/* online theorieles B */
body.onlinetheorieles.helpdesk #container,
body.onlinetheorieles.cbrquestion #container,
body.onlinetheorieles.remark #container,
body.onlinetheorieles.content #container
{
max-width: 1135px;
}
body.onlinetheorieles #helpdeskillu
{
right: 0;
}
body.level
{
background-color: #fff;
}
body.level article
{
padding-left: 15px;
padding-right: 6px;
}
body.level #illu,
body.level #closebutton
{
background-color: #AFAFAF;
}
body.level #logout-button
{
display: none;
}
body.level #illu
{
height: 30px;
position: relative;
background-image: url(/onlinetheorieles/assets/bar_top_level.png);
background-repeat: no-repeat;
background-position: 6px 3px;
background-size: calc(100% - 12px) 24px;
}
body.level #illu img
{
display: none;
}
body.level .level_resulttext
{
max-width: 100%;
}
body.level #container
{
max-width: 1014px;
margin: 0 auto;
}
body.level #logo
{
margin: 0;
}
body.level #closebutton
{
width: 40px;
height: 30px;
top: 0;
right: 0;
background-image: url(/onlinetheorieles/assets/btn_question_results_close.svg);
background-repeat: no-repeat;
background-position: center center;
}
body.level #closebutton:hover
{
background-image: url(/onlinetheorieles/assets/btn_question_results_close_hover.svg);
}
body.level .questionresults
{
margin-bottom: 1rem;
}
body.level .questionresult img
{
vertical-align: top;
}
/* hulpdiensten */
#hulpdiensten .abutton
{
display: inline-block;
width: 90%;
/* height: 25px;
line-height: 23px;
*/
height: auto;
min-height: 23px;
line-height: 1.4;
padding: 3px 0;
margin: 3px 0;
padding: 5px 3px;
border-radius: 5px;
text-align: center;
color: #fff;
}
#hulpdiensten .abutton.white
{
background-color: transparent;
color: #000;
border: none;
}
#hulpdiensten table.hascertificate .abutton
{
width: calc(100% - 10px);
}
#hulpdiensten #readhulpdienstintro.abutton
{
width: auto;
height: 30px;
padding: 5px 1rem;
border-radius: 15px;
}
body.hulpdiensten p.msg_intro
{
font-weight: bold;
}
#hulpdiensten .contentdisabled
{
opacity: 0.3;
pointer-events: none;
}
#hulpdiensten div.intest,
#hulpdiensten div.endtest
{
margin-top: 0.75rem;
padding: 0.75rem 0;
border-top: 1px solid #D5D5D5;
}
#hulpdiensten div.intest
{
border-bottom: 1px solid #D5D5D5;
}
.modulestitle
{
margin-top: 0.75rem;
}
#hulpdiensten table
{
width: 47%;
min-width: 380px;
}
#hulpdiensten table.modules
{
margin-top: 0;
float: left;
}
#hulpdiensten table.modules.left
{
margin-right: 3%;
}
#hulpdiensten table.modules tbody tr td
{
padding: 2px 0;
}
#hulpdiensten table.modules tbody tr:nth-child(odd)
{
background-color: #F7F7F7;
}
#hulpdiensten table th
{
vertical-align: bottom;
font-size: 11px;
padding-bottom: 6px;
}
.modulestitle,
#hulpdiensten table th.title
{
font-size: 16px;
}
.modulestitle
{
font-weight: bold;
margin-bottom: 0.5em;
}
#hulpdiensten table td
{
vertical-align: middle;
text-align: center;
}
#hulpdiensten table th:first-child,
#hulpdiensten table td:first-child
{
text-align: left;
width: 50%;
}
#hulpdiensten table th:nth-child(2),
#hulpdiensten table td:nth-child(2)
{
width: 16%;
}
#hulpdiensten table th:nth-child(2),
#hulpdiensten table td:nth-child(2),
#hulpdiensten table th:nth-child(3),
#hulpdiensten table td:nth-child(3)
{
width: 19%;
}
#hulpdiensten table th:nth-child(4),
#hulpdiensten table td:nth-child(4)
{
width: 15%;
}
#hulpdiensten table th.small,
#hulpdiensten table td.small
{
max-width: 60px;
}
#hulpdiensten table td.count
{
font-size: 14px;
font-weight: bold;
}
.questionserie
{
display: inline-block;
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-position: center center;
border-radius: 50%;
text-indent: -9999px;
background-image: url(/public/images/hulpdiensten/btn_start_default.svg);
}
.questionserie.serielink:hover
{
background-image: url(/public/images/hulpdiensten/btn_start_default_hl.svg);
}
.questionserie.disabled
{
opacity: 0.5;
cursor: default;
}
#hulpdiensten .abutton[disabled],
#hulpdiensten .abutton.disabled,
button.hulpdiensten[disabled]
{
opacity: 0.5;
cursor: default;
}
.hulpdiensten .status
{
width: 14px;
height: 14px;
border-radius: 50%;
}
.hulpdienstenselector button,
.hulpdienstenselector a
{
margin-top: 0.5rem;
}
@media screen and (max-width: 900px) {
#hulpdiensten table
{
width: 100%;
}
#hulpdiensten table.modules.left
{
margin-left: 0;
}
#hulpdiensten table.modules.right thead
{
display: none;
}
}
/* hide opdracht, extra info */
body.transportacademy #retraining3chapters th:nth-child(4),
body.transportacademy #retraining3chapters td:nth-child(4),
body.transportacademy #retraining3chapters th:nth-child(5),
body.transportacademy #retraining3chapters td:nth-child(5)
{
display: none;
}
body.transportacademy #links .linkalginfo,
body.transportacademy #links .linkremark,
body.transportacademy #links .linknews,
body.transportacademy #links .linkcbrquestion
{
display: none;
}
body.transportacademy.helpdesk article > p
{
max-width: 700px;
}