/* font */

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,300italic,300,600,600italic,700,700italic);

body, table {
	font-family: 'Source Sans Pro', sans-serif;
}

/* animate buttons and links */
a, button, input {
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
}

embed {
    margin-top: 30px;
}

.typeahead.dropdown-menu {
    transition: none;
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    -ms-transition: none;
}

/* general additions */
.bg-muted {	background-color: #f0f0f0; }

.panel {
    position: relative;
}

.panel-inverse {
	border-color: #e6e6e6;
}
.panel-inverse .panel-heading {
	background-color: #333b47;
	border-color: #333b47;
	color: #fff;
}

.panel-heading .panel-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'FontAwesome';  /* essential for enabling glyphicon */
    content: "\f0d7";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: #fff;         /* adjust as needed */
    display: inline-block;
    width: 20px;
    text-align: right;
}
.panel-heading .panel-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f0da";    /* adjust as needed, taken from bootstrap.css */
}

body .panel tr.top-border td {
	border-top: 1px solid #ddd !important;
}

body .panel tr.bottom-border td {
	border-bottom: 1px solid #ddd !important;
}

.btn.text-left {
    text-align: left !important;
}

.text-bold {
    font-weight: bold;
}

.d-inline {
    display: inline;
}

/* overlay + loader spinner */

.overlay {
	position: fixed;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	background-color: #000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
    cursor: wait;
    color: #ddd;
    font-size: 5em;
    text-align: center;
}

.overlay.partly {
    position: absolute;
}

.overlay i {
	display: block;
	position: relative;
	top: calc(50% - 35px);
	transform: perspective(1px) translateY(-50%);
}

/* padding classes */
.space-10 { padding: 10px !important; }
.space-20 { padding: 20px !important; }
.space-30 { padding: 30px !important; }
.space-40 { padding: 40px !important; }
.space-50 { padding: 50px !important; }
.space-60 { padding: 60px !important; }
.space-70 { padding: 70px !important; }
.space-80 { padding: 80px !important; }
.space-90 { padding: 90px !important; }
.space-100 { padding: 100px !important; }

.top-space-10 { padding-top: 10px !important; }
.top-space-20 { padding-top: 20px !important; }
.top-space-30 { padding-top: 30px !important; }
.top-space-40 { padding-top: 40px !important; }
.top-space-50 { padding-top: 50px !important; }
.top-space-60 { padding-top: 60px !important; }
.top-space-70 { padding-top: 70px !important; }
.top-space-80 { padding-top: 80px !important; }
.top-space-90 { padding-top: 90px !important; }
.top-space-100 { padding-top: 100px !important; }

.right-space-10 { padding-right: 10px !important; }
.right-space-20 { padding-right: 20px !important; }
.right-space-30 { padding-right: 30px !important; }
.right-space-40 { padding-right: 40px !important; }
.right-space-50 { padding-right: 50px !important; }
.right-space-60 { padding-right: 60px !important; }
.right-space-70 { padding-right: 70px !important; }
.right-space-80 { padding-right: 80px !important; }
.right-space-90 { padding-right: 90px !important; }
.right-space-100 { padding-right: 100px !important; }

.bottom-space-10 { padding-bottom: 10px !important; }
.bottom-space-20 { padding-bottom: 20px !important; }
.bottom-space-30 { padding-bottom: 30px !important; }
.bottom-space-40 { padding-bottom: 40px !important; }
.bottom-space-50 { padding-bottom: 50px !important; }
.bottom-space-60 { padding-bottom: 60px !important; }
.bottom-space-70 { padding-bottom: 70px !important; }
.bottom-space-80 { padding-bottom: 80px !important; }
.bottom-space-90 { padding-bottom: 90px !important; }
.bottom-space-100 { padding-bottom: 100px !important; }

.left-space-10 { padding-left: 10px !important; }
.left-space-20 { padding-left: 20px !important; }
.left-space-30 { padding-left: 30px !important; }
.left-space-40 { padding-left: 40px !important; }
.left-space-50 { padding-left: 50px !important; }
.left-space-60 { padding-left: 60px !important; }
.left-space-70 { padding-left: 70px !important; }
.left-space-80 { padding-left: 80px !important; }
.left-space-90 { padding-left: 90px !important; }
.left-space-100 { padding-left: 100px !important; }

/* margin classes */
.margin-10 { margin: 10px !important; }
.margin-20 { margin: 20px !important; }
.margin-30 { margin: 30px !important; }
.margin-40 { margin: 40px !important; }
.margin-50 { margin: 50px !important; }
.margin-60 { margin: 60px !important; }
.margin-70 { margin: 70px !important; }
.margin-80 { margin: 80px !important; }
.margin-90 { margin: 90px !important; }
.margin-100 { margin: 100px !important; }

.top-margin-10 { margin-top: 10px !important; }
.top-margin-20 { margin-top: 20px !important; }
.top-margin-30 { margin-top: 30px !important; }
.top-margin-40 { margin-top: 40px !important; }
.top-margin-50 { margin-top: 50px !important; }
.top-margin-60 { margin-top: 60px !important; }
.top-margin-70 { margin-top: 70px !important; }
.top-margin-80 { margin-top: 80px !important; }
.top-margin-90 { margin-top: 90px !important; }
.top-margin-100 { margin-top: 100px !important; }

.right-margin-10 { margin-right: 10px !important; }
.right-margin-20 { margin-right: 20px !important; }
.right-margin-30 { margin-right: 30px !important; }
.right-margin-40 { margin-right: 40px !important; }
.right-margin-50 { margin-right: 50px !important; }
.right-margin-60 { margin-right: 60px !important; }
.right-margin-70 { margin-right: 70px !important; }
.right-margin-80 { margin-right: 80px !important; }
.right-margin-90 { margin-right: 90px !important; }
.right-margin-100 { margin-right: 100px !important; }

.bottom-margin-10 { margin-bottom: 10px !important; }
.bottom-margin-20 { margin-bottom: 20px !important; }
.bottom-margin-30 { margin-bottom: 30px !important; }
.bottom-margin-40 { margin-bottom: 40px !important; }
.bottom-margin-50 { margin-bottom: 50px !important; }
.bottom-margin-60 { margin-bottom: 60px !important; }
.bottom-margin-70 { margin-bottom: 70px !important; }
.bottom-margin-80 { margin-bottom: 80px !important; }
.bottom-margin-90 { margin-bottom: 90px !important; }
.bottom-margin-100 { margin-bottom: 100px !important; }

.left-margin-10 { margin-left: 10px !important; }
.left-margin-20 { margin-left: 20px !important; }
.left-margin-30 { margin-left: 30px !important; }
.left-margin-40 { margin-left: 40px !important; }
.left-margin-50 { margin-left: 50px !important; }
.left-margin-60 { margin-left: 60px !important; }
.left-margin-70 { margin-left: 70px !important; }
.left-margin-80 { margin-left: 80px !important; }
.left-margin-90 { margin-left: 90px !important; }
.left-margin-100 { margin-left: 100px !important; }

/* parallax */
.parallax-window {
    min-height: 400px;
    background: transparent;
}

/* top header padding and font size */
.top-header {
	font-size: 13px;
}

.navbar-top {
	margin-bottom: 0px;
	min-height: 0px;
}

.navbar-top .navbar-nav {
	float: right;
}

.navbar-top .navbar-nav>li {
    float: left;
}

.navbar-top .navbar-nav>li>* {
	padding: 0px;
	margin: 5px;
}

.navbar-top .navbar-nav>li>*{
	border-left: 1px solid #fff;
	padding-left: 5px;
}
.navbar-top .navbar-nav>li:first-child>* {
	border: 0px none;
}

.navbar-top .navbar-right {
	margin-right: 0px;
}

.navbar-top .navbar-text {
	font-size: 13px;
	line-height: 20px;
}

/* navigation pull down with links */
ul.nav li.dropdown.dropdown-hover:hover ul.dropdown-menu {
    display: block;
}

/* logo size fix */
.navbar-brand {
	padding: 0px;
	height: 100px;
}
.navbar-brand>img {
	height: 100%;
	padding: 15px;
	width: auto;
}

/* navigation */
.navbar  {
	border-radius: 0px;
	border: 0px none;
}
.navbar-big .navbar-nav>li>a {
	padding: 40px;
}

.navbar .navbar-collapse .navbar-right {
	text-align: right;
}
.navbar .navbar-collapse .navbar-right > li {
	display: inline-block;
	float: none;
}

/* footer */
footer.footer {
	font-size: 13px;
	margin-top: 120px;
}
footer.footer > .container-fluid {
	padding-top: 10px;
	padding-bottom: 80px;
}
.navbar-footer ul {
	margin-left: -15px;
}

/* footer - quicknav */

.navbar-nav.navbar-quick {
    margin-left: 22px;
}
.navbar-nav.navbar-quick>li {
	float: none;
}
.navbar-nav.navbar-quick>li:before {
	position: absolute;
    left: -2.14285714em;
    width: 2.14285714em;
    top: 5px;
    text-align: center;
    font: normal normal normal 10px/1 FontAwesome;
	content: "\f061";
}
.navbar-nav.navbar-quick>li>a {
	padding: 0px;
}
.navbar-top>ul>li>a:hover,
.navbar-top .nav .open>a,
.navbar-footer>ul>li>a:hover,
.navbar-footer .nav .open>a,
.navbar-quick>li>a:hover,
.navbar-quick .nav .open>a {
	background-color: transparent;
	text-decoration: underline;
}

/* some padding */
.row {
	padding-top: 3px;
	padding-bottom: 3px;
}

/* fixed columns */

.table-responsive>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #ffffff;
}
/*@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}
*/

.table .form-control {
	width: auto;
}
.table textarea.form-control {
    width: 100%;
}

select.form-control ~ i.form-control-feedback {
    right: 30px !important;
}

/* bijeenkomst - aanwezigheid */

.aanwezigheidgrid table th,
.aanwezigheidgrid table td {
	white-space: nowrap;
}

.aanwezigheidgrid i.aanwezigheid-item {
    color: #999999; 
    cursor: pointer;
    padding: 1px 0;
    margin-bottom: 2px;
}
.aanwezigheidgrid i.aanwezigheid-item:before {
    margin: .2em;
    width: 1em;
    line-height: 1em;
    display: inline-block;
    text-align: center;
}

.aanwezigheidgrid i.aanwezigheid-item:hover {
    color: #000000;   
}

.aanwezigheidgrid i.aanwezigheid-item.active {
    color: #FFFFFF;
    border-radius: 1px;
}

.aanwezigheidgrid[data-disabled] i.aanwezigheid-item {
	cursor: default;
}

.aanwezigheidgrid[data-disabled] i.aanwezigheid-item:hover {
	color: #999999;
}
.aanwezigheidgrid[data-disabled] i.aanwezigheid-item.active:hover {
	color: #FFFFFF;
}

.aanwezigheidgrid i.aanwezigheid-item[data-value="ja"].active {
    background-color: #339900;
}

.aanwezigheidgrid i.aanwezigheid-item[data-value="nee"].active {
   background-color: #cc0000;
}

.aanwezigheidgrid i.aanwezigheid-item[data-value="onbekend"].active {
    background-color: #ff9900;
}

.aanwezigheidgrid [name="opmerking"] {
	width: 100%;
	height: 34px;
	-webkit-transition: all 0.3s; /* Safari */
    transition: all 0.3s;
}

/* wizard v3 */

.cursist-verwijder-btn, .btn-search-cursist {
    cursor: pointer !important;
}
.cursisten-resultaat {
    display: none;
}

.cursisten-table .loader {
	text-align: center;
}

#akkoorden {
    margin-bottom: 30px;
}

/* dashboard tabbladen */
.dashboard-tabs > li {
    text-align: center;
}
.dashboard-tabs-content {
    clear: both;
}
.dashboard-tabs-content > .tab-pane > .panel > .panel-heading,
.dashboard-tabs-content > .tab-pane > .panel > .panel-body {
    padding: 0px;
}
.dashboard-tabs-content > .tab-pane > .panel > .panel-heading h1,
.dashboard-tabs-content > .tab-pane > .panel > .panel-heading h2,
.dashboard-tabs-content > .tab-pane > .panel > .panel-heading h3,
.dashboard-tabs-content > .tab-pane > .panel > .panel-heading h4 {
    display: none;
}

.dashboard-extra-buttons {
    margin-bottom: 10px;
}

/* dashboard lijst */

.dashboard .lijst table th {
    cursor: pointer;
    position: relative;
    margin-right: 13px;
    vertical-align: middle;
}
.dashboard .lijst table th .sort-icon {
    position: absolute;
    top: calc(50% - 7px);
    right: 0px;
}

/* dashboard info panel */

.panel .panel-heading a.meer-link  {
    font-size: 20px;
    margin-top: 5px;
    margin-right: 5px;
}
.info-panel-list:not(.fa-ul) {
    padding-left: 20px;
}
.info-panel-list.info-panel-list-noicons {
    padding-left: 0px;
    list-style: none;
}
.info-panel-list.fa-ul > li i.fa-li.fa-2x {
    left: -1.5em;
    width: 1.5em;    
}
.info-panel-list.fa-ul > li i.fa-li.fa-3x,
.info-panel-list.fa-ul > li i.fa-li.fa-4x,
.info-panel-list.fa-ul > li i.fa-li.fa-5x {
    left: -1em;
    width: 1em;
    top: 0px;
}

/* dashboard blokgrid */

.blokgrid-blok {
    padding: 0px;
}
/* {# 300 x 246 #} */
.blokgrid-blok .inner,
.blokgrid-blok .inner .static,
.blokgrid-blok .inner .front,
.blokgrid-blok .inner .back {
    position: absolute !important;
    top: 0px;
    right: 1px;
    bottom: 1px;
    left: 0px;
    overflow: hidden;
    background-color: #e3ebef;
}
.blokgrid-blok .inner .back,
.blokgrid-blok .inner:hover .front {
    display: none;
}
.blokgrid-blok .inner:hover .back {
    display: block;
}

.blokgrid-blok:before {
    content: '';
    display: block;
    padding-top: 82%;
}
.blokgrid-blok .panel {
    background-color: transparent;
    border: 0px none;
    box-shadow: none;
}
.blokgrid-blok .inner .static .panel-heading,
.blokgrid-blok .inner .front .panel-heading {
    border: 0px none;
}
.blokgrid-blok .inner .static,
.blokgrid-blok .inner .front {
    color: #D7D7D7;
}
.blokgrid-blok .inner .panel-heading h2 {
    color: #fff;
}
.blokgrid-blok .inner .static .panel-heading h2,
.blokgrid-blok .inner .front .panel-heading h2 {
    background-color: transparent;
    font-size: 24px;
}
.blokgrid-blok .panel-body + .panel-body {
    padding-top: 0px;
}
.blokgrid-blok table {
    margin-bottom: 10px;
}
.blokgrid-blok table,
.blokgrid-blok table .cell-value,
.detail table,
.detail table .cell-value {
    vertical-align: top;
    font-size: 16px;
}
.blokgrid-blok table .cell-label,
.detail table .cell-label {
    width: 10px;
    vertical-align: top;
    white-space: nowrap;
    font-weight: bold;
}
.blokgrid-blok .subtitel,
.terug-naar-dashboard {
    margin-right: 5px;
    margin-top: 5px;
}

/* dashboard grid - spinner */
.wcp-dynamic-lijst {
    position: relative;
    height: 80px;
}
.wcp-dynamic-lijst .fa-spinner {
    position: absolute;
    left:calc(50% - 20px);
    top:20px;
    font-size: 40px;
}

/* menu icons */

ul.has-icons > li > a {
    position: relative;
    padding-left: 30px;
}
ul.has-icons > li > a > i.fa {
   position: absolute;
   top: 5px;
   left: 10px;
}
ul.no-icons > li > a {
    padding-left: 15px;
}

/* filter boomstructuur */
.list-group-item > .checkbox {
    margin-top: 0px;
    margin-bottom: 0px;
}
.list-group-item-level1 { padding-left: 35px; }
.list-group-item-level2 { padding-left: 55px; }
.list-group-item-level3 { padding-left: 75px; }
.list-group-item-level4 { padding-left: 95px; }
.list-group-item-level5 { padding-left: 115px; }

/* fullcalendar */

.fc-other-month {
    opacity: 0.3;
}

.dashboard-filter .form-group.search {
    padding: 10px 10px 0 10px;
}

.list-group-item {
    overflow: hidden;
}

/* wizard progressbar */

.wizard-progressbar {
    padding: 0px;
    margin: 0px;
    display: block;
    margin-bottom: 30px;
    font-size: 11px;
}
.wizard-progressbar li {
    display: inline-block;
    list-style: none;
    position: relative;
    text-align: center;
    vertical-align: top;
    padding-left: 10px;
}
.wizard-progressbar .number {
    height: 4px;
    background-color: #999999;
    margin-bottom: 5px;
}
.wizard-progressbar .number span {
    position: absolute;
    left: 0px;
    top: -12px;
    display: block;
    font-size: 20px;
    background-color: #999999;
    border-radius: 14px;
    width: 28px;
    height: 28px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.wizard-progressbar .active .number,
.wizard-progressbar .active .number span {
    background-color: #70a9de;
}

/* blink */

.blink {
    animation: blink 1s;
    animation-iteration-count: infinite;
}
@keyframes blink { 50% { background-color: #f2dede; }  }

/* datepicker z-index */
.ui-datepicker { z-index: 1000 !important; }

/* Evaluatierapportage */

#evaluatierapportage .row.vraag > div {
    margin-left: 2%;
}
#evaluatierapportage .row.vraag .vraag_inner {
    margin-left: 2%;
}
#evaluatierapportage .row.vraag .vraag_inner .graph_container {
    width: 100%;
    height: 300px;
}
#evaluatierapportage .row.vraag .vraag_inner canvas {
    width: 100%;
    height: 300px;
}

input[type="date"].has-icon::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 105px;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}