/*   
Template Name: Color Admin - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.5
Version: 1.9.0
Author: Sean Ngu
Website: http://www.seantheme.com/color-admin-v1.9/admin/

NOTE: copy of 'red', with following replacements:
f_f5b57 >> e_b5c24

orange      = #eb5c24
dark orange = #cf4813 (hover)
light blue  = #aecce8
dark blue   = #00204e

*/

/* oxygen-300 - latin-ext_latin */
@font-face {
    font-family: 'Oxygen';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/oxygen-v15-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
    src: local(''), url('/fonts/oxygen-v15-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/oxygen-v15-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/oxygen-v15-latin-ext_latin-300.svg#Oxygen') format('svg'); /* Legacy iOS */
}
/* oxygen-regular - latin-ext_latin */
@font-face {
    font-family: 'Oxygen';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/oxygen-v15-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''), url('/fonts/oxygen-v15-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/oxygen-v15-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/oxygen-v15-latin-ext_latin-regular.svg#Oxygen') format('svg'); /* Legacy iOS */
}
/* oxygen-700 - latin-ext_latin */
@font-face {
    font-family: 'Oxygen';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/oxygen-v15-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
    src: local(''), url('/fonts/oxygen-v15-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/oxygen-v15-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/oxygen-v15-latin-ext_latin-700.svg#Oxygen') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: "Corbel V2";
    src: url("/fonts/corbel/51ee907427c788c3ab4442e73286d641.eot"); /* IE9*/
    src: url("/fonts/corbel/51ee907427c788c3ab4442e73286d641.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/fonts/corbel/51ee907427c788c3ab4442e73286d641.woff2") format("woff2"), /* chrome、firefox */
    url("/fonts/corbel/51ee907427c788c3ab4442e73286d641.woff") format("woff"), /* chrome、firefox */
    url("/fonts/corbel/51ee907427c788c3ab4442e73286d641.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("/fonts/corbel/51ee907427c788c3ab4442e73286d641.svg#Corbel V2") format("svg"); /* iOS 4.1- */
}

body {
    height: auto;
    min-height: 100% !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.pmo h1, .pmo h2, .pmo h3, .pmo h4, .pmo h5, .pmo h6 {
    font-family: "Oxygen", sans-serif;
}

@media (max-width: 768px)
{
    body.anonymous {
	padding-top: 0;
    }
}

.bg-black,
.sidebar, 
.sidebar-bg {
    background: #f1f6f9 !important;
}

.navbar-logo,
.coming-soon .brand .logo,
.login .login-header .brand .logo {
    border-color: #F8504B #cc4946 #993734;
}

.login .login-header .icon {  
    display: none;
}

.navbar.navbar-inverse .navbar-brand,
.sidebar .nav > li.active > a,
.sidebar .nav > li.active > a:focus,
.sidebar .nav > li.active > a:hover,
.page-sidebar-minified .sidebar .nav > li.has-sub.active:focus > a,
.page-sidebar-minified .sidebar .nav > li.has-sub.active:hover > a,
.page-sidebar-minified .sidebar .nav > li.has-sub.active > a,
.label.label-theme,
.btn.btn-scroll-to-top {
    background: #024D90;
}
.navbar.navbar-inverse .navbar-brand {
    color: #fff !important;
}
.text-theme,
.sidebar .sub-menu > li.active > a:before {
    color: var(--orange);
}
@media (max-width: 767px) {
    .navbar-inverse .navbar-header {
        background: var(--orange);
    }
}

body.volledige-breedte .content {
    margin-left: 0;
}
/* Added in v1.5 */

.gradient-enabled .navbar.navbar-inverse .navbar-brand,
.gradient-enabled .sidebar .nav > li.active > a, 
.gradient-enabled .sidebar .nav > li.active > a:focus, 
.gradient-enabled .sidebar .nav > li.active > a:hover,
.gradient-enabled.page-sidebar-minified .sidebar .nav > li.has-sub.active:focus > a, 
.gradient-enabled.page-sidebar-minified .sidebar .nav > li.has-sub.active:hover > a, 
.gradient-enabled.page-sidebar-minified .sidebar .nav > li.has-sub.active > a,
.gradient-enabled .label.label-theme,
.gradient-enabled .btn.btn-scroll-to-top {
    background: rgb(253,128,125); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkODA3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjViNTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(253,128,125,1) 0%, rgba(255,91,87,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,128,125,1)), color-stop(100%,rgba(255,91,87,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(253,128,125,1) 0%,rgba(255,91,87,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(253,128,125,1) 0%,rgba(255,91,87,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(253,128,125,1) 0%,rgba(255,91,87,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(253,128,125,1) 0%,rgba(255,91,87,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd807d', endColorstr='var(--orange)',GradientType=0 ); /* IE6-8 */
}
.pace-progress {
    background: var(--orange);
}
.pace .pace-activity {
    border-top-color: var(--orange);
    border-left-color: var(--orange);
}


/* Added in v1.7 */

.page-with-light-sidebar .sidebar .nav > li.active > a > i {
    color: var(--orange);
}
.page-with-light-sidebar .sidebar .nav > li.active > a .badge,
.page-with-light-sidebar .sidebar .nav > li.active > a .label.label-theme {
    background: var(--orange);
}


/* CUSTOM ADDED */

@media (min-width: 768px)
{
    .container {
        width: 530px; /* 750 - 220 */
    }
}

@media (min-width: 992px) {
    .container {
        width: 750px; /* 970 - 220 */
    }
}

@media (min-width: 1200px) {
    .container {
        width: 950px; /* 1170 - 220 */
    }
}

@media (min-width: 1320px) {
    .sidebar, .sidebar-bg {
        width: 350px;
    }

    .content {
        margin-left: 350px;
    }
}

@media (max-width: 768px) {
    .sidebar, .sidebar-bg {
        width: 350px;
            left: -350px;
    }
}


body {
    padding-top: 72px;
}

body,
.form-control {
    font-size: 15px;
}

.pmo .form-control {
    font-weight: 600;
    padding: 0.5em !important;
}

.pmo input::-webkit-outer-spin-button,
.pmo input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.pmo input[type=number] {
    -moz-appearance: textfield;
}

select.form-control {
    padding: 0.6em;
    height: auto;
}

a, a:hover, a:focus, a:active {
    color: var(--orange);
}

.spinner, 
.spinner-small {
    border-top: 2px solid var(--orange);
}

.hide-default {
    display: none;
}

.sidebar {
    padding-top: 72px;
    position: fixed;
    height: 100%;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .125);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .125);
}

    .sidebar .nav>li.nav-profile .image {
        background-position: 50% 50%;
        background-size: cover;
    }

.pmo .sidebar .nav > li.nav-profile .info {
    font-size: 14px;
    height: 100%;
    line-height: 18px;
}

.form-group h4 {
	padding-left:30px;
}

    .form-group h4 span {
        color: var(--orange);
        margin-left: -30px;
        width: 30px;
        display: block;
        float: left;
        font-weight: 600;
    }

.navbar-brand,
.navbar-company {
    width: 360px;
    height: 72px;
    line-height: 41px;
    padding: 10px;
}

.navbar-company {
    margin-right: -15px;
    height: 72px;
    padding: 20px 10px;
}

    body.anonymous .navbar-company {
        top: 0px;
        right: 0px;
        position: absolute;
        margin: 0;
    }

	@media (max-width: 768px)
	{
	    body .navbar-company {
		display: none;
	    }
	}

.navbar-logo,
.coming-soon .brand .logo,
.login .login-header .brand .logo {
    border: none;
    background: url(/images/logo-wvm.svg) 0 0 no-repeat;
    background-size: contain;
    height: 100%;
    width: 270px;
    border-radius: initial;
    margin-top: 0;
}



    @media (max-width: 768px) {
        .navbar-brand,
        .navbar-logo {
            width: 200px;
        }
    }

    .navbar-nav>li>a.navbar-company {
    padding-top: 14px;
}

.navbar-company-logo {
    border: none;question-progress-holder
    background: url(/images/logo.png) top right no-repeat;
    background-size: contain;
    height: 100%;
    width: 185px;
    border-radius: initial;
    float: right;
}

.display-box {
	color: var(--orange);
	line-height: 30px;
	vertical-align: bottom;
}

.question-progress-holder {
    position: relative;
}

.question-progress {
	margin-top: 10px;
}

.question-progress-percentage {
    position: absolute;
    position: absolute;
    color: #024D90;
    font-weight: bold;
    z-index: -1;
    width: 100%;
    line-height: 175px;
    margin-top: 10px;
    text-align: center;
}

	@media (max-width: 1320px)
	{
	    .question-progress-percentage  {
		line-height: 112px;
	    }
	}
	
	@media (max-width: 768px)
	{
	    .question-progress-percentage  {
		line-height: 175px;
	    }
	}

.sidebar .nav li.nav-header {
    background: #1a2229;
    display: none;
}

.sidebar .sub-menu {
    background: none;
}

    .sidebar .sub-menu:before {
        background: none;
    }

    .sidebar .sub-menu > li.active > a:before {
        content: '\f111';
    }

.sidebar .sub-menu>li.done>a:before {
	    content: '\f00c';
}


.sidebar .nav li,
.sidebar .nav li li {
    position: relative;
    width: 100%;
}

    .sidebar .nav li a,
    .sidebar .nav li li a {
        white-space: nowrap;
        /*overflow: hidden;*/
        width: 100%;
        color: #024D90;
    }

.sidebar .sub-menu > li.active > a,
.sidebar .sub-menu > li.active > a:focus,
.sidebar .sub-menu > li.active > a:hover,
.sidebar .sub-menu > li > a:focus,
.sidebar .sub-menu > li > a:hover {
    color: #7ea3d3;
}

.sidebar .sub-menu > li.active > a {
    color: #024D90;
}

.sidebar .nav li a:after {
    width: 100px;
    height: 36px;
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
}

    .sidebar .nav li.active a:first-child:after {
        background: none;
        color: #fff;
    }

.sidebar .nav > li.expand > a, .sidebar .nav > li > a:focus, .sidebar .nav > li > a:hover {
    background: #024D90;
}

.sidebar .nav > li.nav-profile {
    background: none;
    color: #024D90;
}

    .sidebar .nav > li.nav-profile .info small {
        color: #024D90;
    }

.sidebar .nav li.nav-profile a:after {
    background: none;
}

.sidebar .nav li.active > a:before {
    color: #024D90;
}

    .btn {
        border-radius: 5px;
    }

.btn-holder {
    clear: both;
    display: block;
    height: 45px;
    margin-top: 30px;
}

.btn.btn-success {
    background: var(--orange);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
    transition: all 0.5s ease 0s;
}

.pmo .btn.btn-success {
    font-weight: 600;
}

    /*
    .login-content .btn.btn-success,
    .login-content .btn.btn-success:hover {
        border-color: var(--orange);
    } */

     .login-content p.error {
         color: rgba(255,255,255,0.9);
     }

.login-content h1 {
    color: #024D90;
}

.btn.btn-success:hover {
    background: var(--dark-orange);
    color: #fff;
    border-color: #fff;
}

.btn-group .btn.btn-success {
    color: #2d353c;
    background: var(--light-blue-bg);
    border-color: #fff;
}

	@media (max-width: 500px)
	{
		.btn-group {
			width: 100%;
		}
		
	    	.btn-group .btn.btn-success  {
			width: 100%;
			border-color: #fff;
	    	}
	}

.btn-group .btn.btn-success:hover {
    background: #2d353c;
    color: #fff;
    border-color: #fff;
}

.btn.btn-success.clicked {
    background: #2d353c;
}

.btn.btn-next {
    position: absolute;
    right: 0;
    bottom: 0;
}

.btn.btn-prev {
    position: absolute;
    left: 0;
    bottom: 0;
}

.btn.btn-success.active,
.btn.btn-success:active,
.btn.btn-success:focus,
.open .dropdown-toggle.btn-success {
    background: var(--orange);
    color: #fff;
    border-color: #fff;
}

.btn-group .btn.btn-success:not(.active)+.btn.btn-success, .input-group-btn .btn.btn-success:not(.active)+.btn.btn-success {
    border-left-color: #fff;
}

.footer-copyright {
    bottom: 0;
    width: 100%;
    font-size: 12px;
    z-index: 999;
}

.content {
	padding-top: 0;
	position: relative;
}

.header-image {
	height: 200px;
	margin: 0 0 30px 0;
	background-position: 50% 0;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

    .header-image h1 {
        color: var(--orange);
        white-space: nowrap;
        margin-top: 20px;
        font-size: 3.5rem;
        font-weight: 400;
    }

	@media (max-width: 768px)
	{
	    .header-image h1 {
		font-size: 16px;
        margin-top: 28px;
		line-height: 1.3;
		overflow: hidden;
		text-overflow: ellipsis;
	    }
	}

.header-image h1 strong {
	text-transform: uppercase;
	color: var(--dark-blue);
	font-size: 16px;	
	padding-left: 2px;
    display: none;
}

.header-image .header-placeholder:before {
    content: '';
    background: url(/assets/img/transparent/white-0.8.png);
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0;
    bottom: 0;
    overflow: hidden;
    height: 75px;
}

.header-image .header-text {
	padding-top: 125px;
	overflow: hidden;
}

.vraag-container.hide {
    display: none;
}

.vraag-container.show {
    display: block;
}

.answer-container {
    padding-left: 30px;
}

.btn-group {
	/* padding-left: 10px;*/
}

.range-quantity {
	background: var(--orange) !important;
}

.checkbox .input-helper:before, .radio .input-helper:before, .checkbox .input-helper:after, .radio .input-helper:after {
    -webkit-transition: all;
    -o-transition: all;
    transition: all;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    content: "";
}

.checkbox .input-helper:before, .radio .input-helper:before {
    left: 0;
    border: 1px solid #ccc;
}

.radio .input-helper:before {
    top: -1px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
}

.checkbox .input-helper:before {
    top: -1px;
    width: 19px;
    height: 19px;
}

.radio .input-helper:after {
    width: 11px;
    height: 11px;
    background: var(--orange);
    border-radius: 50%;
    top: 3px;
    left: 4px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.checkbox .input-helper:after {
    width: 11px;
    height: 11px;
    background: var(--orange);
    top: 3px;
    left: 4px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.radio input:checked + .input-helper:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.checkbox input:checked + .input-helper:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.checkbox input, .radio input {
    top: 0;
    left: 0;
    margin-left: 0 !important;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    margin-top: 0;
}

.radio input {
    width: 19px;
    height: 19px;
}

.checkbox input {
    width: 19px;
    height: 19px;
}

.checkbox label, .radio label {
    padding-left: 30px;
    position: relative;
}

textarea {
    width: 80%;
    height: 100px;
    padding: 0.6em;
}

.toelichtingvraag {
    padding-left: 30px;
}

label.error {
    color: red;
    margin-top: 10px;
    margin-left: 30px;
}

[data-toggle="buttons"]>.btn>input[type="radio"], [data-toggle="buttons"]>.btn>input[type="checkbox"] {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.col-md-8.panel-content {
    padding-bottom: 80px;
    margin-bottom: 20px;
}

.module-intro {
    margin: 0 0 20px;
}

.ingevuld-overlay {
    display:block;
    width: 100%;
    position:absolute;
    top:0px;
    left:0px;
    height: 100%;
    z-index: 99999;
}

.rainbowslider {
    width: 100%;
    margin: 0 0 10px 0;
}

    .rainbowslider-labels label {
        float: left;
        color: #999;
        text-align: center;
        position: relative;
        font-size: 13px;
        padding: 0 0 5px;
        margin: 0 0 2px 0;
    }

        .rainbowslider-labels-3 label {
            width: 33.33333%;
        }

        .rainbowslider-labels-4 label {
            width: 25%;
        }

        .rainbowslider-labels-5 label {
            width: 20%;
        }

	@media (max-width: 768px)
	{
	    .rainbowslider-labels-4 label {
		font-size: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
	    }
	    
	    .rainbowslider-labels-5 label {
		font-size: 8px;
		overflow: hidden;
		text-overflow: ellipsis;
	    }
	}

    .rainbowslider-labels label span {
        border-top: 1px solid #bbb;
        border-left: 1px solid #bbb;
        border-right: 1px solid #bbb;
        width: 95%;
        height: 5px;
        position: absolute;
        bottom: 0;
        left: 2.5%;
    }

    .rainbowslider-back {
        background: #8edb7f;
        background: -moz-linear-gradient(left,  #80C634 0%, #FF8837 50%, #EE1020 100%);
        background: -webkit-linear-gradient(left,  #80C634 0%,#FF8837 50%,#EE1020 100%);
        background: linear-gradient(to right,  #80C634 0%,#FF8837 50%,#EE1020 100%);
        height: 30px;
        position: relative;
        clear: both;
        border-radius: 4px;
    }

    .rainbowslider-back-reverse {
        background: #8edb7f;
        background: -moz-linear-gradient(left, #EE1020 0%, #FF8837 50%, #80C634 100%);
        background: -webkit-linear-gradient(left, #EE1020 0%, #FF8837 50%, #80C634 100%);
        background: linear-gradient(to right, #EE1020 0%, #FF8837 50%, #80C634 100%);
        height: 30px;
        position: relative;
        clear: both;
        border-radius: 4px;
    }

    .rainbowslider-back.rainbowslider-double {
        background: #8edb7f;
        background: -moz-linear-gradient(left, #EE1020 0%, #FF8837 25%, #80C634 50%, #FF8837 75%, #EE1020 100%);
        background: -webkit-linear-gradient(left, #EE1020 0%, #FF8837 25%, #80C634 50%, #FF8837 75%, #EE1020 100%);
        background: linear-gradient(to right, #EE1020 0%, #FF8837 25%, #80C634 50%, #FF8837 75%, #EE1020 100%);
        height: 30px;
        position: relative;
        clear: both;
        border-radius: 4px;
    }

    .rainbowslider-arrow {
        background: rgba(255,255,255,0.75);
        height: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
    }

        .rainbowslider-arrow:after {
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 7px 10px 7px;
            border-color: transparent transparent #bbb transparent;
            display: block;
            position: absolute;
            bottom: -10px;
            left: -7px;
        }

.circle-in-circle {
    width: 260px;
    height: 260px;
    position: relative;
    margin: 0 auto;
}

    .circle-in-circle div {
        position: absolute;
        color: #fff;
        border-radius: 50%;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        font-size: 13px;
        border: 5px solid #fff;
        box-sizing: content-box;
    }

        .circle-in-circle div span {
            font-weight: 600;
            color: rgba(0,0,0,0.5);
        }

        .circle-in-circle .cic-outer {
            width: 200px;
            height: 200px;
            border: 5px solid #ddd;
            left: 25px;
            top: 25px;
            background: transparent;
        }

        .circle-in-circle .cic-center {
            width: 100px;
            height: 100px;
            top: 75px;
            left: 75px;
        }

            .circle-in-circle .cic-center span {
                line-height: 100px;
            }

        .circle-in-circle .cic-top,
        .circle-in-circle .cic-left,
        .circle-in-circle .cic-right {
            width: 75px;
            height: 75px;
        }

            .circle-in-circle .cic-top span,
            .circle-in-circle .cic-left span,
            .circle-in-circle .cic-right span {
                line-height: 75px;
            }

        .circle-in-circle .cic-top{
            top: -10px;
            left: 87.5px;
        }

        .circle-in-circle .cic-left {
            top: 130px;
            left: -5px;
        }

        .circle-in-circle .cic-right {
            top: 130px;
            left: 180px;
        }

    .circle-in-circle div.red {
        background: #EE1020;
    }

    .circle-in-circle div.orange {
        background: #FF8837;
    }

    .circle-in-circle div.green {
        background: #80C634;
    }

.alert.alert-success {
    background: #80C634;
}

.alert.alert-info {
    background: #f1f6f9;
    color: #46535d;
    overflow: hidden;
}

    .alert.alert-info + .alert.alert-info {
        margin-top: 20px;
    }

.alert.alert-warning {
    background: #FF8837;
}

.alert.alert-danger {
    background: #EE1020;
}

.text-success {
    color: #80C634 !important;
}

.text-info {
    color: #61a4d7 !important;
}

.text-warning {
    color: #FF8837 !important;
}

.text-danger {
    color: #EE1020 !important;
}

.table>tbody>tr>td.alert {
    vertical-align: middle;
}

td.td-top {
    vertical-align: top;
}

td.td-right-15 {
    padding-right: 15px;
}

.feedback {
    margin-bottom: 15px;
}

ul.content-table {
    margin-bottom: 10px;
}

.content-table a {
    color: -var(orange);
}

.report-section {
    margin: 20px 0;
    page-break-inside: avoid;
}

    .report-section-header {
        background: #024D90;
        padding: 5px 15px;
        color: #fff;
        border-radius: 5px 5px 0 0;
    }

        .report-section-header h4 {
            color: #fff;
        }

        .report-section-header a {
            font-size: 12px;
            padding: 10px 0 0;
            color: #fff;
        }

        .report-section-header a.btn {
            background: #fff;
            color: #242a30;
            margin: 10px 0 0;
        }

    .report-section-body {
        padding: 15px;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-radius: 0 0 5px 5px;
    }

        .report-section-body table {
            margin-bottom: 0;
        }

        .report-section-body .alert {
            font-size: 15px;
            text-align: left;
        }

            .report-section-body .alert p:last-child {
                margin-bottom: 0;
            }

        .report-section-body p+h4 {
            margin-top: 20px;
        }

        .report-section-body table+p {
            margin-top: 20px;
        }

        .report-section-body > table tr td:first-child {
            font-weight: bold;
        }

        .report-section-body > table.table-small {
            font-size: 12px;
        }

        .report-section-body .progress {
            height: 30px;
        }

            .report-section-body .progress-bar {
                border-radius: 4px;
                background: #61a4d7;
                text-align: left;
                padding: 5px 0 5px 10px;
            }

        .report-section-body .progress-group label {
            color: #999;
            font-size: 13px;
        }

.note-info {
    page-break-inside: avoid;
}
.note.note-info .btn-icon {
    background: #fff;
    color: #31708f;
}

.login-header .brand {
    background: url(/images/logo-wvm.svg) 0 0 no-repeat;
    background-size: contain;
    width: 270px;
    height: 70px;
}


.login {
    margin-bottom: 50px;
}

.login-information {
    text-align: center;
}

.slimScrollBar, .slimScrollRail {
    width: 10px !important;
}

#footer-copyright {
    padding: 20px;
    opacity: 0.5;
    font-size: 10px;
    background: #f1f6f9;
    color: #024D90;
    font-size: 11px;
    font-weight:bold;
}

.footer-copyright a,
.footer-copyright a + a {
    float: none;
    margin: 0;
    color: #024D90;
}

    .footer-copyright a:hover {
        color: #fff;
        color: #024D90;
    }

table.scroll {
  display: table;
  width: 100%;
}

table.scroll thead,
table.scroll tbody {
  width: 100%;
}

table.scroll thead {
  overflow-y: scroll;
  display: table;
  table-layout: fixed;
  width: calc(100% - 16px); /* assuming scrollbar width as 16px */
}

table.scroll tbody {
  overflow: auto;
  height: 150px;
  display: block;
}

table.scroll tr {
  width: 100%;
  text-align: left;
  display: table;
  table-layout: fixed;
}


form .voorwaarden input {
    float: left;
}

form .voorwaarden label {
    float: left;
    width: 90%;
    margin-left: 10px;
    margin-bottom: 15px;
}

.header-season {
    position: absolute;
    margin-left: 15px;
    margin-top: 15px;
    font-size: 30px;
    color: grey;
    font-weight: lighter;
}

.nav.nav-justified > li > a {
    position: relative;
}

    .nav.nav-justified > li > a:hover,
    .nav.nav-justified > li > a:focus {
        background-color: transparent;
    }

    .nav.nav-justified > li > a > .quote {
        position: absolute;
        left: 0px;
        top: 0;
        opacity: 0;
        width: 30px;
        height: 30px;
        padding: 5px;
        background-color: #13c0ba;
        border-radius: 15px;
        color: #fff;
    }

.nav.nav-justified > li.active > a > .quote {
    opacity: 1;
}

.nav.nav-justified > li > a > img.icon-like {
    box-shadow: 0 0 0 5px #80C634;
}

.nav.nav-justified > li > a > img.icon-bell {
    box-shadow: 0 0 0 5px #FF8837;
}

.nav.nav-justified > li > a > img.icon-bell-light {
    box-shadow: 0 0 0 5px #fbdc88;
}

.nav.nav-justified > li > a > img.icon-dislike {
    box-shadow: 0 0 0 5px #EE1020;
}

.nav.nav-justified > li > a > img {
    max-width: 100%;
    opacity: .3;
    -webkit-transform: scale(.8,.8);
    transform: scale(.8,.8);
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav.nav-justified > li.active > a > img,
.nav.nav-justified > li:hover > a > img,
.nav.nav-justified > li:focus > a > img {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#nav-tabs img.img-circle {
    width: 69px;
    height: 69px;
}

.tab-content {
    padding: 0;
    padding-top: 10px;
    margin-bottom: 0;
}

.tab-pane .tab-inner {
    position: relative;
}

.rainbowgaug1,
.rainbowgaug2 {
    background: url(/images/half-circle-back.svg) no-repeat top left;
    height: 135px;
    width: 250px;
    background-size: contain;
    background-position: 50% 100%;
    position: relative;
    margin-bottom: 12px;
}

    .rainbowgaug1 .rainbowgaug-label,
    .rainbowgaug2 .rainbowgaug-label {
        position: absolute;
        font-family: 'Open Sans';
        color: #bbb;
        font-size: 12px;
        position: absolute;
        text-align: center;
        width: 110px;
        transform-origin: 0 0;
    }

    .rainbowgaug1 .rainbowgaug-label-1,
    .rainbowgaug2 .rainbowgaug-label-1 {
        transform: rotate(-60deg);
        bottom: 0px;
        left: -20px;
    }

    .rainbowgaug1 .rainbowgaug-label-2,
    .rainbowgaug2 .rainbowgaug-label-2 {
        bottom: 120px;
        left: calc((250px - 100px) / 2);
    }

    .rainbowgaug1 .rainbowgaug-label-3,
    .rainbowgaug2 .rainbowgaug-label-3 {
        transform-origin: 100% 0;
        transform: rotate(60deg);
        bottom: 3px;
        right: -23px;
    }

.gaug-arrow {
    transform-origin: 90% 50%;
    background: url(/images/half-circle-pointer.svg) no-repeat top left;
    height: 22px;
    width: 100px;
    position: absolute;
    bottom: -12px;
    left: 40px;
    -webkit-transition:2s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
}

@media (min-width: 768px) {
    .nav.nav-justified > li > a > .quote {
        left: auto;
        top: auto;
        right: 20px;
        bottom: 0px;
    }
}

.btn-gesprek-aanvragen {
    width: 100%;
    font-weight: bold;
    font-size: 20px;
}

/* PMO */

.login-header .brand.pmo {
    background: url(/images/logo-pmo.svg) 0 0 no-repeat;
}

.navbar-logo.pmo {
    background: url(/images/logo-pmo.svg) 0 0 no-repeat;
}

.checkbox-pmo {
    width: 25px;
    margin-left: 25px;
}

.vraag-container .pmo-vraag {
    margin-bottom: 30px;
}

.vraag-container.disabled .pmo-vraag {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.pmo-error {
    font-size: 16px;
    color: #cc0000;
    font-weight: 600;
    padding: 8px;
    background-color: #ffd0d0;
    border: 1px solid #cc0000;
    border-radius: 5px;
    margin-bottom: 20px;
    padding-left: 15px;
}

/* Customize the label (the container) */
.checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 15px;
}

    /* Hide the browser's default checkbox */
    .checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Create a custom checkbox */
    .checkbox-container .checkmark {
        position: absolute;
        top: 8px;
        left: 8px;
        height: 25px;
        width: 25px;
        background-color: #fff;
        border: 2px solid #b9b9b9;
        border-radius: 5px;
    }

    /* On mouse-over, add a grey background color */
    .checkbox-container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .checkbox-container input.error ~ .checkmark {
        border-color: #cc0000;
    }

    /* When the checkbox is checked, add a blue background */
    .checkbox-container input:checked ~ .checkmark,
    .checkbox-container input.error:checked ~ .checkmark {
        border: 2px solid #d7d7d7;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkbox-container .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .checkbox-container input:checked ~ .checkmark:after {
        display: inline-block;
    }

    /* Style the checkmark/indicator */
    .checkbox-container .checkmark:after {
        left: -5px;
        top: -3px;
        width: 5px;
        height: 10px;
        content: "\f00c";
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform: translate(0, 0);
        text-align: center;
        line-height: 20px;
        font-size: 34px;
        color: #004d90;
    }

.panel-content h3 {
    padding-left: 10px;
}

.pmo .swal2-popup #swal2-content {
    text-align: center;
    font-size: 1.2em;
}

.pmo .swal2-popup .swal2-styled.swal2-confirm {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: var(--orange);
    color: #fff;
    font-size: 1.2em;
    font-weight: bolder;
}