@CHARSET "UTF-8";

* {padding: 0; margin: 0;}
html {scroll-behavior: smooth;}
html, body {height: 100%;}
body {font-family: "fs_joeyregular"; line-height: 1.4em; color: #666; font-size: 20px; overflow-y: scroll;}


/* LOGIN SPECIFIC */
body.login {background-image: linear-gradient(to bottom,#7db63b,#619a33); background-attachment: fixed;}
body.login .menu {display: none;}
body.login .page {
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    max-width: 300px;
    margin: 0px auto 50px;
    position: relative;
    top: 50px;
    width: 100%;
    background: #f2f2f2;
    padding: 40px 100px 80px;
    border-radius: 5px;
}
body.login.docs .page { max-width: 1200px; padding: 40px 50px 80px;}
body.login .header .logo img {cursor: pointer; width: 100px; margin: 0 auto; display: block; margin-bottom: 22px;}
body.login .header p {color: white; font-size: 16px; width: 100%; left: 0; text-align: center; position: absolute; top: 0px; margin-top: -75px;}
body.login .header p span:first-child {display: none;}
body.login .header p span.visible-xs {display: inline;}
body.login .header p span.hidden-xs {display: none;}
body.login h1 {font-size: 53px; margin-bottom: 0.4em; white-space: nowrap;}
body.login .subtitle, body.login .title {display: none;}
body.login.docs .subtitle, body.login.docs .title {display: block}
body.login .loginfooter {text-align: center; color: white; font-size: 16px; padding-top: 8px;}
body.login .loginfooter a {color: white;}

/* DEFAULT SPECIFIC */
body.default .header {background-image: linear-gradient(to bottom,#7db63b,#619a33); margin-bottom: 40px;}
body.default .subtitle, body.default .title {display: block; color: white;}
body.default .title {font-family: "fs_joeybold"; padding: 40px 0 0; font-size: 40px; line-height: 1.1;}
body.default .subtitle {padding: 0 0 40px;}
body.default .header p {color: white; font-size: 16px; width: 100%; padding: 15px 0 5px;}
body.default .header p > span:first-child {display: block; float: right;}
body.default .header p span a {color: white;}
body.default .menu {display: block;}
body.default .header .logo img {z-index: 9; position: absolute; width: 50px; display: block; margin: 0; padding: 8px 20px 12px 30px; cursor: pointer;}
body.default .page {flex-direction: column; display: flex; height: 100%;}
body.default .page > .header, .page > .footer {flex: 0 0 auto;}
body.default .page > .body {flex: 1 1 auto; padding-bottom: 100px;}



.footer {background: #f2f2f2; padding: 30px 0; color: #aaa; font-size: 15px; line-height: 1.4;}
.footer ul {border-bottom: 1px solid #bbb; padding-bottom: 10px; margin-bottom: 6px;}
.footer ul li {list-style: none; display: inline-block;}
.footer ul li + li:before {content: "|"; display: inline-block; padding: 0 8px;}
.footer p span:first-child {float: right;}


#togglemenu {display: none; width: 35px; cursor: pointer;}
#togglemenu span {height: 3px; background: white; margin: 6px 0 0; display: block;}

.menupanel {
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    background: #f2f2f2;
    border-radius: 5px;
}
.login .menupanel {box-shadow: none;}
.menu {
    margin: 0px auto;
    display: block;
    padding-left: 100px;
    overflow: auto;
}
.menu > li {list-style: none; float: left; border-left: 1px solid #ddd; position: relative;}
.menu > li li {display: none; border: 0;}
.menu > li li a {border: 0; line-height: 30px; color: #666; font-size: 16px; font-family: "fs_joeyregular";}
.menu > li li:last-child {margin-bottom: 15px;}
.menu > li a {font-family: "fs_joeybold"; text-transform: uppercase; color: #000; border-left: 1px solid #fff; line-height: 60px; display: block; padding: 0 15px 2px; border-right: 1px solid transparent;}
.menu > li a.active {background: rgba(0,0,0,0.075);}
.menu > li > a.active {border-left: 1px solid #ddd;}
.menu > li:last-child:after {content: ""; position: absolute; top: 0; width: 1px; right: 0; height: 60px; background: white; border-left: 1px solid #ddd;}




.submenu {border-left: 1px solid #ddd; float: right; width: 300px; margin-top: 15px; padding-bottom: 100px;}
.submenu li {list-style: none;}
.submenu li a {font-family: "fs_joeybold"; display: block; padding: 0px 30px; height: 34px; line-height: 34px;}
.submenu li.active a {background: #009ac7; color: white;}
.submenu li.active:before {
    content: "";
    position: absolute;
    margin-left: -34px;
	border-top: 17px solid transparent;
	border-right: 17px solid #009ac7;
	border-bottom: 17px solid transparent;
	border-left: 17px solid transparent;
}
.submenubody {max-width: calc(100% - 400px); position: relative;}

.tiles {margin-left: 0!important; display: flex; flex-wrap: wrap; width: calc(100% + 15px);}
.tiles li {
    list-style: none; 
    position: relative; 
    flex: 0 0 calc(33.3% - 15px); 
    margin: 0 15px 15px 0;
}
.tiles li a {color: #666; display: block; height: calc(100% - 40px); border: 1px solid #e3e3e3; padding: 15px 10px 23px 82px; font-size: 16px; line-height: 1.2em;}
.tiles li a:hover {background: #e5f4f9; border: 1px solid #66c1e0;}
.tiles li span {font-family: "fs_joeybold"; color: #009ac7; font-size: 20px; display: block; line-height: 1.4;}
.tiles li img {position: absolute; top: 20px; left: 20px;}

.well {padding: 25px 30px 35px; background: #f2f2f2;}
.squares {display: flex; justify-content: space-between;}
.squares > div {width: calc(33.33% - 60px - 1vw); font-size: 16px; line-height: 1.2; text-align: center;}
.squares > div span {color: #000; font-size: 40px; display: block; opacity: 0.7;}
.squares > div img {display: block; margin: 0 auto; opacity: 0.7;}
@media only screen and (min-width: 1200px) {
    .squares > div {width: calc(33.33% - 60px - 12px);}
}
@media only screen and (max-width: 500px) {
    .squares {display: block;}
    .squares > div {width: calc(100% - 60px); margin-top: 12px;}
}


hr {margin: 20px 0; height: 1px; background: #ccc; border: 0;}
.container {margin: 0 auto; width: calc(100% - 30px); max-width: 1100px; padding: 0 15px; position: relative;}
#debugger-bar {position: fixed; z-index: 99!important; left: auto!important; right: 0!important; width: 400px!important; border-left: 1px solid silver;}

div.toggle {padding: 0;}
div.toggle + div.toggle {border-top: 1px solid #ccc;} 
div.toggle input[type="checkbox"] {position: absolute; bottom: auto; margin-top: 24px;}
div.toggle label {padding: 20px 0 20px 30px; cursor: pointer;}
div.toggle label > * {padding-right: 25px;}
div.toggle h3 {font-family: "fs_joeybold"; margin-bottom: 0.35em;}
div.toggle h3 a {
    border: 1px solid #009ac7;
    border-radius: 12px;
    font-size: 15px;
    line-height: 15px;
    width: 15px;
    text-align: center;
    display: inline-block;
    right: 0;
    position: absolute;
    margin-top: 5px;
    cursor: pointer;
}
.hidden {display: none;}

a {color: #009ac7; text-decoration: none; cursor: pointer;}
p, .body ul {margin-bottom: 1.4em;}
.body ul {margin-left: 1em;}
p:last-child {margin-bottom: 0;}
h1, h2, h3 {
    font-family: 'fs_joeylight';
    font-size: 60px;
    line-height: 1.1;
    color: #000;
    margin-bottom: 0.7em;
    font-weight: normal;
}
h2 {padding-top: 40px; font-family: 'fs_joeyregular'; font-size: 30px; line-height: 1.1;}
h3 {padding-top: 0px; font-family: 'fs_joeyregular'; font-size: 20px; line-height: 1.1;}

.has-error .help-block {color: red;}
.has-error select, .has-error textarea, .has-error input {border-color: red;}
.form-group.optional label::after {content: " (optioneel)";}
.form-group.disabled select,.form-group.disabled input {background-color: #eee;}

form p {font-size: 16px; line-height: 1.4; margin: 8px 0 0;}
form > div + div {padding-top: 10px;}
label, input {display: block;}
input, select {
    margin: 3px 0 0; 
    width: calc(100% - 16px); 
    padding: 7px;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 22px;
    color: #000000;
    border: 0;
    border: 1px solid #cccccc;
    background: white;
    border-radius: 3px;
}
select {width: 100%;}
input[type="checkbox"] {
    width: auto; 
    display: inline-block; 
    vertical-align: middle;
    position: relative;
    bottom: 2px;
}
input[type="submit"], .button {
padding: 12px 30px;
border: 0;
font-size: 20px;
font-weight: 600;
font-style: normal;
line-height: 20px;
color: #ffffff;
background-color: #009ac7;
width: auto;
cursor: pointer;
border-radius: 3px;
display: inline-block;
}
textarea {    
    margin: 3px 0 0;
    padding: 7px;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 22px;
    color: #000000;
    border: 1px solid #cccccc;
    background: white;
    border-radius: 3px;
    width: calc(100% - 16px);
    min-width: calc(100% - 16px);
    max-width: calc(100% - 16px);
}
.login input[type="submit"] {width: 100%;}

table {font-size: 16px; width: 100%; color: black;}
table thead tr th {font-family: "fs_joeybold"; font-weight: normal; text-align: left; padding: 2px 15px;}
table tbody tr.is_played td {color: rgba(0,0,0,0.4);}
table tbody tr td:not(:last-child) a, table thead tr th a {color: black;}
table tbody tr td {border-top: 1px solid #dcdcdc; padding: 2px 15px;}
table tbody tr:nth-child(odd) {background: #f2f2f2;}
table tbody tr:last-child td {border-bottom: 1px solid #dcdcdc;}

table.doublerows tbody tr {background: none;}
table.doublerows tbody tr:nth-child(4n+1) {background: #f2f2f2;}
table.doublerows tbody tr:nth-child(4n+2) {background: #f2f2f2;}
table.doublerows tbody tr:nth-child(odd) td {cursor: pointer;}
table.doublerows tbody tr:nth-child(even) td {display: none;}
table.doublerows tbody tr.visible:nth-child(even) td {display: table-cell;}
table.doublerows tbody tr:nth-last-child(2) td {border-bottom: 1px solid #dcdcdc;}
table.doublerows tbody tr:nth-last-child(1) td {border-top: 0;}

.switch {position: relative; display: inline-block; vertical-align: middle; height: 25px;}
.switch span {padding: 20px 0 0 35px; border-radius: 20px; width: 0; height: 0; overflow: hidden; display: inline-block; border: 1px solid rgba(0,0,0,0.15); background-color: rgba(0,0,0,0.1); transition: background-color 0.15s ease 0s;}
.switch::before {content: ""; position: absolute; margin: 0; left: 1px; top: 1px; width: 20px; height: 20px; background: white; border-radius: 20px; box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.4); z-index: 1; transition: margin-left 0.2s ease 0s;}
.switch.on span {background-color: rgb(0, 154, 201);}
.switch.on::before {margin-left: 15px;}

.star::before {content: "☆"; }
.star.on::before {content: "★"; }
.star span {display: none;}

audio {vertical-align: middle; margin: 15px 0;}

.half {width: 48%; float: left; margin-bottom: 15px;}
.half + .half {margin-left: 4%;}
.half.text-center {text-align: center;}
.halfs {display: flex;}
.halfs .half + .half {margin-left: 4%;}
.third .half {margin-bottom: 0;}

.thirds {overflow: auto; display: flex; align-items: flex-end;}
.third {width: 31%; float: left; margin-bottom: 15px;}
.third + .third {margin-left: 3.5%;}
.thirds .third {float: none;}

ul.floatright {text-align: right; margin-bottom: 15px; font-size: 16px; margin-left: 0; float: right;}
ul.floatright li {list-style: none; display: inline;}
ul.floatright li a {margin-left: 25px; display: inline-block;}

a.download {padding-left: 29px; background: url(../img/ic_download2x.png) left center / 20px auto no-repeat;}
ul.floatright li a.download {background: url(../img/ic_download2x.png) left 7px / 20px auto no-repeat;}

.graph {text-align: center; font-size: 16px; line-height: 1.4;}
.green {color: #5CA30A;}
svg.pie.chart {
    margin: 20px auto 10px;
    transform: rotate(0deg);
    width: 180px; 
    height: 180px;
    background: #cccccc;
    border-radius: 50%;
    display: block;
}
svg.pie.chart circle {
    fill: #cccccc;
    stroke: #5CA30A;
    stroke-width: 90;
    stroke-dasharray: 0 283;
}

dl {font-size: 16px; overflow: auto; }
dl dt {width: 125px; float: left;}
dl dd {width: calc(100% - 125px); float: left; text-align: left; padding: 0; overflow-wrap: break-word;}

.textbox {padding: 20px 30px 25px;}
.textbox.gray {background: #f2f2f2; color: #000;}
.textbox dl {font-size: 16px;}
.textbox dl dt {width: 35%;}
.textbox dl dt:nth-child(4n+1) {clear: left;}
.textbox dl dd {width: 10%; text-align: right; padding-right: 5%;}

.qrcode img {display: block;}
.progressbar {
    display: inline-block; 
    background: transparent; 
    border: 1px solid #ccc;
    position: relative; 
    height: 10px; 
    bottom: 1px; 
    width: 100px; 
    margin-right: 5px; 
    vertical-align: middle; 
    border-radius: 0px;
    overflow: hidden;
}
.progressbar > div {background-image: linear-gradient(to bottom,#7db63b,#619a33); height: 100%;}

.graphholder {position: relative; height: 250px; margin-bottom: 90px;}
.graphlegend {position: absolute; height: 100%; width: 30px;}
.graphlegend > div {position: absolute; line-height: 0.5; font-size: 14px; width: 25px; text-align: right; margin-top: -5px;}
.graphlegend > div:first-child {top: 0;}
.graphlegend > div:nth-child(2) {top: 25%;}
.graphlegend > div:nth-child(3) {top: 50%;}
.graphlegend > div:nth-child(4) {top: 75%;}
.graphlegend > div:last-child {top: 100%;}
.bargraph {width: calc(100% - 30px); margin-left: 30px; height: 100%; display: flex; align-items: flex-end;}
.gridlines {position: absolute; width: calc(100% - 30px); margin-left: 30px; height: 100%; z-index: 3; pointer-events: none;}
.gridlines > div {position: absolute; width: 100%; height: 1px; background: rgba(100,100,100,0.2);}
.gridlines > div:first-child {top: 0;}
.gridlines > div:nth-child(2) {top: 25%;}
.gridlines > div:nth-child(3) {top: 50%;}
.gridlines > div:nth-child(4) {top: 75%;}
.gridlines > div:last-child {top: 100%; background: rgba(100,100,100,0.65);}
.bargraph > div {position: relative; background-image: linear-gradient(to top,#619a33 0px,#7db63b 400px); background: #009ac778; flex-grow: 1; margin-right: 1px;}
.bargraph > div > span {position: absolute; left: 50%; transform: rotate(-90deg); bottom: -39px; margin-left: -2px; transform-origin: 0% 0%; line-height: 0; font-size: 14px;}
.narrow .bargraph > div > span {display: none;}
.narrow .bargraph > div:first-child > span,
.narrow .bargraph > div:last-child > span,
.narrow .bargraph > div.quart > span {display: block!important;}

.ticketview.label + div {margin-bottom: 1.5em;}

ul.paginationlinks {margin: 30px 0; padding: 0; text-align: center;}
ul.paginationlinks li {list-style: none; display: none;}
ul.paginationlinks li a {display: block; padding: 0 7px 2px; border: 1px solid #dcdcdc; font-size: 16px; line-height: 1.4em;}
ul.paginationlinks li:last-child,
ul.paginationlinks li:first-child {display: inline-block;}
ul.paginationlinks li.visible {display: inline-block;}
ul.paginationlinks li.current a {background: #009ac7; border-color: #009ac7;}
ul.paginationlinks li.current a {color: white;}
@media only screen and (max-width: 600px) {
    ul.paginationlinks li.visible {display: none;}
    ul.paginationlinks li.current,
    ul.paginationlinks li.isnearmobile,
    ul.paginationlinks li:last-child,
    ul.paginationlinks li:first-child {display: inline-block;}
}


@media only screen and (max-width: 600px) {
    .bargraph > div:nth-child(even) span {display: none;}
    .narrow .bargraph > div {margin-right: 0;}
}

@media only screen and (max-width: 1100px) {
    body.default .menupanel {position: absolute; left: 0; width: 300px; margin: 0 0 0 -300px; height: auto; transition: margin-left 0.3s ease-in-out; z-index: 99; top: 0;}
    body.menu_in .menupanel {margin: 0; height: auto; min-height: 100vh; border-radius: 0; }
    .menu {padding: 100px 0 0; margin: 0; height: auto;}
    body.default .header .logo img {z-index: 100; position: absolute; width: 75px!important; padding: 0!important; left: 17px; top: 15px;}
    .menu > li a {border: 0; border-bottom: 1px solid transparent; border-top: 1px solid white;}
    .menu > li {float: none; border: 0; border-top: 1px solid #ddd;}
    .menu > li li {display: block;}
    .menu > li > a.active, .menu > li > a:hover {border-left: 0; border-right: 0;}
    .menu > li > a.active {border-top: 1px solid #ddd;}
    .menu > li:last-child:after {content: none;}
    .submenu {display: none;}
    .submenubody {max-width: 100%;}
    body.default #togglemenu {display: block; margin-top: 22px;}
    body.default .title {padding-top: 15px;}
    body.default .subtitle {padding: 0 0 25px;}
    body.default .header p {font-size: 14px; line-height: 1.4; width: 100%; padding: 4px 15px 7px; margin: 0 -15px; background: rgba(0,0,0,0.15);}
}

@media only screen and (max-width: 900px) {
    .tiles li {flex: 0 1 calc(50% - 15px);}
    table thead {display: none;}
    table tbody tr td {display: block; border-top: 0; line-height: 1.4;}
    table tbody tr:last-child td {border-bottom: 0}
    table.doublerows tbody tr:nth-last-child(2) td {border-bottom: 0;}
    table tbody tr td:last-child, table tbody tr:last-child td:last-child, table.doublerows tbody tr:nth-last-child(2) td:last-child {border-bottom: 1px solid #dcdcdc; padding-bottom: 10px;}
    table tbody tr td:first-child {padding-top: 10px;}
    table tbody tr:first-child td:first-child {border-top: 1px solid #dcdcdc;}
    table tbody tr td:before {width: 40%; max-width: 150px; display: inline-block; font-family: "fs_joeybold";}
    table tbody tr td.Datum:before {content: "Datum";}
    table tbody tr td.Tijd:before {content: "Tijd";}
    table tbody tr td.Nummer:before {content: "Nummer";}
    table tbody tr td.Locatie:before {content: "Locatie";}
    table tbody tr td.Tarief:before {content: "Tarief";}
    table tbody tr td.Tijdsduur:before {content: "Tijdsduur";}
    table tbody tr td.Servicenummer:before {content: "Servicenummer";}
    table tbody tr td.Eindbestemming:before {content: "Eindbestemming";}
    table tbody tr td.Omschrijving:before {content: "Omschrijving";}
    table tbody tr td.Percentage:before {content: "Percentage";}
    table tbody tr td.Aantal:before {content: "Aantal";}
    table tbody tr td.Medewerker.ID:before {content: "Medew. ID";}
    table tbody tr td.Pin:before {content: "Pin";}
    table tbody tr td.Status:before {content: "Status";}
    table tbody tr td.Beller:before {content: "Beller";}
    table tbody tr td.Tijdstip:before {content: "Tijdstip";}
    table tbody tr td.Naam:before {content: "Naam";}
    table tbody tr td.Titel:before {content: "Titel";}
    table tbody tr td.Acties:before {content: "Acties";}
    table tbody tr td.Gespreksduur:before {content: "Gespreksduur";}
}
.visible-xs {display: none;}

@media only screen and (max-width: 650px) {
    .tiles li {flex: 0 1 calc(100% - 15px);}
    .hidden-xs {display: none;}
    .visible-xs {display: inline;}
    body.login .page {padding: 40px 10% 80px; width: calc(100% - 20% - 30px); max-width: 300px;}
    .thirds:not(.notresponsive) {display: block;}
    .thirds:not(.notresponsive) .third {width: 100%; float: none;}
    .thirds:not(.notresponsive) .third + .third {margin-left: 0%;}
    dl dt {width: 75%;}
    dl dd {width: 20%;}
}
@media only screen and (max-width: 500px) {
    .half {width: 100%; float: none;}
    .half + .half {margin-left: 0%;}
    ul.floatright.downloads {text-align: left; margin-bottom: 15px; font-size: 16px;}
    ul.floatright.downloads li a {margin-left: 0; display: block;}
}
@media only screen and (max-width: 440px) {
    ul.floatright li a {margin-left: 10px;}
}
.login.error {
    font-weight: bold;
    color: red;
}

.appstore { background-color: #17a0d4; color: white; font-size: 80%; line-height: 1.2; height: 100px; margin: 20px 0 40px 0; }
.appstore h2, .appstore p { padding: 7px 0 0 0; margin: 0 150px 0 150px; color: white; }
.appstore .appstore_left_image { display: block; float: left; width: 135px; height: 119px; background: url('/img/belfabriek_apps.png'); margin-top: -19px; }
.appstore .appstore_right_image { display: block; float: right; width: 135px; height: 119px; background: url('/img/belfabriek_apps.png') no-repeat -136px -25px; margin-top: 4px;}