@charset "utf-8";

/* Default: Hide scrollbar but keep scrolling functional */
body {
  overflow: hidden auto; /* Horizontal hidden, vertical scrollable */
}

/* Hide scrollbar in WebKit browsers (Chrome, Safari, Edge) */
body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/* Show scrollbar ONLY when body has class 'trainer' */
body.trainer {
  overflow: auto; /* Enables scrollbar */
}

/* Show scrollbar in WebKit when 'trainer' class is present */
body.trainer::-webkit-scrollbar {
  width: auto;
}

body.trainer::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #d70000 0%, #e58000 99%); /* Scrollbar thumb color */
 }

body.trainer::-webkit-scrollbar-track {
  background: #f1f1f1;
}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main {display: block;}
figure{margin:40px 0 20px;}
html, body {font-size: 20px;line-height:36px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family:"vodafone_ltregular", tahoma;margin:0;color:#222;height:100%;}
* {box-sizing:border-box; -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  -webkit-overflow-scrolling: touch;}
 *:after, *:before {font-family: "Font Awesome 6 Pro";font-weight:400;line-height: 100%;position: relative;font-size:22px;display:inline-block;-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;box-sizing:border-box;}
 *:hover {-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;}
 :focus {outline: 0;}
 a {color:#de2226;}
p {margin:0 0 20px;line-height: 1.25rem;}
h1 {font-family: 'vodafone_rgbold';color: #de2226;position:relative;font-size:1rem;margin:0 0 20px;}
h2 {margin: 0 0 10px 0;}
h3 {margin:0 0 30px;font-size:.9rem;position:relative;line-height: 100%;}
h4 {margin:0 0 10px;}
h6 {font-size:1.25rem;font-weight: normal;margin:0 0 20px;position:relative;}
.c2a {padding:10px 20px; background: linear-gradient(to right, #d70000 0%, #e58000 99%); color: #fff; border-radius: 5px;display:inline-block!important;vertical-align: top;}
.c2a:hover {box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
.c2a a {text-decoration:none;color: #fff;}
.mobileonly {display:none;}
body.fixed { overflow: hidden;}
pre {font-size:0.6rem;}
button:hover {box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
a.disabled {pointer-events: none;}
div.content-container {max-width:1280px;width:100%;margin:0 auto;padding:20px;position: relative;}
body.coco div.content-container {}

.goud { background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 100%, #8A6E2F 100%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);}
.zilver { background: radial-gradient(circle, rgb(237, 237, 237), rgb(189, 189, 189));}
.brons {  background:  radial-gradient(circle, #cd7f32 , #af6114 );}
.vodabg { background: linear-gradient(to right, #d70000 0%,#e58000 99%);}

.deelnemernaam {font-weight:bold;}
.deelnemernaam span.locatie {font-weight:normal;}
ul.stages {list-style: none; display: grid; grid-template-columns: repeat(3, 33%); grid-gap: 40px;}
ul.stages li {text-align: center;color:#fff;border-radius:100%;padding:40px 0;}
ul.stages li span.circle {width:100px;height:100px;border-radius:100%;display:block;line-height:100px;} 

ul.takenlijst div.grid-2 {display:grid;grid-template-columns: 200px auto;column-gap: 40px;}
ul.takenlijst div.grid-2.noimage  {grid-template-columns:0 100%;column-gap: 0px;}
ul.takenlijst {list-style: none;padding:0;}
ul.takenlijst li {margin:0;position:relative;line-height: 34px;}
ul.takenlijst li.hide {display:none;}
ul.takenlijst li:after {content:' ';width:100%;height:1px;background: linear-gradient(to right, #d70000 0%,#e58000 99%);}
ul.takenlijst li:last-of-type:after {display: none;}
ul.takenlijst li:last-of-type {margin:0;}
ul.takenlijst span {display:block;line-height:100%;margin:0 0 20px;}
ul.takenlijst span.title, ul.takenlijst span.subtitle {font-family: 'vodafone_rgbold';margin:10px 0 0px 40px;position:relative;cursor:pointer;padding-left:20px;  display: inline-block;}
ul.takenlijst span.title:after, ul.takenlijst span.subtitle:after {content:'\f0d7';font-weight:300;position:absolute;top:50%;transform:translateY(-50%);left:-10px;background: linear-gradient(to right, #d70000 0%, #e58000 99%); font-size:26px; -webkit-background-clip: text;  -moz-background-clip: text;  -webkit-text-fill-color: transparent;  -moz-text-fill-color: transparent;}
ul.takenlijst span.title.active:after, ul.takenlijst span.subtitle.active:after {content:'\f0d8';}
ul.takenlijst span.speedquest {display:inline-block;margin:0 0 30px;}
ul.takenlijst span.speedquest a {text-decoration:none;}
ul.takenlijst li img {width:100%;height:auto;}
ul.takenlijst span.tag, div.smarttaak span.tag {position:absolute;top:10px;right:165px;font-size: .7rem;line-height:18px;background: linear-gradient(to right, #d70000 0%,#e58000 99%);padding:10px;color:#222;border-radius:10px;}
ul.takenlijst span.tag.light, div.smarttaak span.tag.light {color:#fff;}
ul.takenlijst span.tag:before, div.smarttaak span.tag:before {content:'\f02b';font-weight: 300;margin:0 5px 0 0;font-size: .7rem;}
span.begleider.desc {background: #eee; padding:20px; border-radius: 10px; margin: 0 0 20px; border: 1px solid #ddd;display:inline-block}
ul.takenlijst span.taakscore, div.smarttaak span.taakscore {position:absolute;top:10px;right:78px;font-size: .7rem;line-height:100%;background:#f9f7f7;padding:10px;border-radius:10px;color:#f48c00;font-weight: bold;width:80px;text-align: center;border:2px solid #f48c00;}
ul.takenlijst li.show.searchpositiveresult {display:block;}
ul.takenlijst li.show.searchnegativeresult {display:none;}
ul.takenlijst span.tag {cursor: pointer;}
ul.takenlijst span.level {position: absolute;  right: 10px;  top: 10px;  width:62px;padding: 10px;  border-radius: 10px;  font-size: .7rem;  line-height:18px;  color: #fff;    text-align: center;}
ul.takenlijst li span.level {   background: radial-gradient(circle, var(--level-color), color-mix(in srgb, var(--level-color) 60%, black));}


ul.takenlijst.bonus span.taakscore {right:0px;}
ul.takenlijst.bonus span.tag {right:85px;}

/* The switch - the box around the slider */
.switch { position: relative; display: inline-block; width: 60px; height: 34px;}

/* Hide default HTML checkbox */
.switch input {opacity: 0; width: 0; height: 0;}
/* The slider */
.slider { position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #c3dbda;-webkit-transition: .4s;transition: .4s;}
.slider:before {position: absolute;content: "";height: 26px;width: 26px;left: 4px;bottom: 4px;background-color: white;-webkit-transition: .4s;transition: .4s;}
input:checked + .slider {background:linear-gradient(to right, #d70000 0%,#e58000 99%)!important}
input:focus + .slider { box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {  -webkit-transform: translateX(26px);  -ms-transform: translateX(26px);  transform: translateX(26px);}
/* Rounded sliders */
.slider.round {  border-radius: 34px;margin: 0;}
.slider.round:before {  border-radius: 50%;}
div.taakinfo {display:none;margin:20px 0 0;font-size:.95rem;}
div.voltooiing {font-style: italic; color: #de2226;}
input:not([data-check-allow="1"]) + .slider {background:#ccc}

ul.usersbylocation, li.hastrajects, li.nonewcomers {list-style: none;background: linear-gradient(to right, #d70000 0%, #e58000 99%); color: #fff; padding: 20px; border-radius: 10px;position:relative;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);}
ul.usersbylocation input[type=radio] {display: none;}
ul.usersbylocation li.location span.manager {float:right;}
ul.usersbylocation li.werkstatus-2 label {cursor:pointer;}
ul.usersbylocation li.location, label.naam {margin:0 0 20px;display: block;}
ul.usersbylocation li.location:before {content:'\f54e';font-weight:300;margin:0 10px 0 0;}
li.werkstatus-1:before {content:'\f19d';font-weight:300;margin:0 10px 0 0;}
li.werkstatus-2:before {content:'\e5d2';font-weight:300;margin:0 10px 0 0;}
li.werkstatus-3:before {content:'\f51c';font-weight:300;margin:0 10px 0 0;}
li.werkstatus-4:before {content:'\f508';font-weight:300;margin:0 10px 0 0;}
li.werkstatus-3 {position: absolute; top: 20px; right: 20px; background: #fff; color: #de2226; padding: 5px 10px; border-radius: 10px;}
li.werkstatus-3 input {display: none;}
li.werkstatus {background: #fff;color: #222;border-radius: 10px;margin:0 0 10px;padding:20px;position:relative;}
ul.usersbylocation li.werkstatus-1:first-of-type {margin-top:20px;}



div.message {display:none; position: fixed;top:0;width:100%;z-index:10;height:100%;  background: rgba(0, 0, 0, 0.4);}
div.message div.inner { position: fixed; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 80%; max-width: 450px; left: 0; right: 0; background: rgba(255, 255, 255, 1); padding: 20px; border-radius: 10px;text-align: center;}
div.message div.inner p {line-height:1.5rem;}
div.message button, button.close {background: linear-gradient(to right, #d70000 0%, #e58000 99%); color: #fff; padding: 10px 20px; border-radius: 10px;border:0;margin:0 10px 0 0;cursor:pointer; display: inline-block; vertical-align: top;}
body.coco div.message div.inner {top:250px;}


div#searchuser, div#searchdelegate {display:none; position: fixed;top:0;width:100%;z-index:10;height:100%;  background: rgba(0, 0, 0, 0.4);}
div#searchuser div.inner, div#searchdelegate div.inner { position: fixed; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 80%; max-width: 475px; left: 0; right: 0; background: rgba(255, 255, 255, 1); padding: 20px; border-radius: 10px;text-align: left;    max-height: 50%; overflow-Y: auto;}
input#coach, input#delegated {border: 1px solid;  border-image-slice: 1;  border-width: 2px;  border-image-source: linear-gradient(to left, #d70000, #e58000);  padding: 10px;  font-size: .85rem;   font-family: 'vodafone_rgregular', arial;  position: relative; margin: 0 20px 0 0;width: 100%;  max-width: 200px;}

ul.coachlist {  list-style: none;  padding: 0;  font-size: .9rem;  line-height: 100%;}
ul.coachlist li {margin: 0 0 20px;font-weight:bold;}
ul.coachlist li span.locatie {display:block;font-size: .85rem;font-weight:normal;margin: 5px 0 0;}
ul.coachlist li a:before{content:'\f234';font-weight:300;margin:0 5px 0 0;font-size:16px;}

div.trajectcontainer {margin: 0 0 10px;position:relative;}
div.trajectcontainer select {margin:0 30px 0 0;}
div.calendar input {  padding: 10px;width: 100%;border: 0; font-size: .85rem; display: block; font-family: 'vodafone_rgregular', arial; background:#fff;position:relative;}
div.calendar {  border: 1px solid; border-image-slice: 1; border-width: 2px; border-image-source: linear-gradient(to left, #aca8a8, #c0bbbb);  display: inline-block;vertical-align: top;margin: 0 30px 0 0;}
input[type="date"]::-webkit-calendar-picker-indicator {  width: 100%;  position:absolute;  text-align:right;  padding:10px 10px 10px calc(100% - 40px);}
div.trajectcontainer label {display:inline-block;margin:0 10px 0 0;font-size:.9rem;}
div.select {vertical-align:top;border: 1px solid; border-image-slice: 1;  border-width: 2px; border-image-source: linear-gradient(white, white), linear-gradient(to left, #aca8a8, #c0bbbb);display:inline-block;margin:0 30px 0 0;  background-image:linear-gradient(white, white), linear-gradient(to left, #aca8a8, #c0bbbb);  display: inline-block; background-origin: border-box;  background-clip: content-box, border-box;  border: solid 3px transparent;  border-radius: 10px;}
div.select select {padding: 10px; width: 100%; border: 0;  font-size: .8rem;  display: block;  font-family: 'vodafone_rgregular', arial;  background: transparent;border-radius: 5px;}
div.manager div.select select {width:255px;} 
div.select.bonus {border: 0;  background: #db8196;  color: #fff;  font-weight: bold;  font-size: .9rem;  padding: 0 10px 0 40px;position:relative;cursor:pointer; line-height: 45px; float: right;margin:0;}  
div.select.bonus:before {content: '\f06b';font-weight: 300;position:absolute;left:10px;top:50%;transform:translateY(-50%);}


button[type=submit] {background: linear-gradient(to right, #d70000 0%, #e58000 99%); color: #fff;border-radius: 5px;font-size: .85rem;  cursor: pointer; padding: 0px 20px; line-height: 44px;border:0;margin:0 10px 0 0;font-family: "vodafone_ltregular", tahoma;}
button.finalize.requested {position: relative;animation: buttonScale 1s infinite;  background: #43c474;margin:20px 0 0;}
button.finalize_request {background: #43c474;line-height: 33px; margin: 20px 0 0;}
button.finalize.requested.rejected, button.finalize_request.rejected {background: #233688;position:relative;}
button.finalize_request.rejected {padding: 0px 20px 0 40px;}
button.finalize_request.rejected:before {content:'\f05a';font-weight:300;position:absolute;left:10px;top:50%;transform:translateY(-50%);}
textarea#comment {display:block;width:100%;margin:20px 0 0;font-family: "vodafone_ltregular", tahoma; padding: 10px; font-size: 14px;}
div.button.finalize {cursor:default;margin:0!important;}

div#progression {border: 1px solid #ddd; background: #e2efee; padding: 20px; margin: 30px 0; border-radius: 10px;position: relative;}
li.special label.naam, label.special {position:relative;padding:0 0 0 35px;}
div.personalia span.special {position:relative;}
div.personalia span.percentage.special span.perc {border:3px solid gray!important}
div.personalia span.percentage.special:before {content:none;}
li.special label.naam:before, label.special:before, div.personalia span.special:before  {content:'S';width:30px;height:30px;position:absolute;left: 0;top: 50%;transform: translateY(-50%);border-radius:100%;background:#f48c00;border:1px solid #fff;font-size:18px;text-align:center;line-height:28px;color:#fff;font-family: 'vodafone_rgbold';}
div.personalia span.special:before {top:5px;transform: none;}
div#progression.special div.calculated, li.special div.calculated, div.trajectcontainer.special div.calculated  {display:none;}
label.lt.special {padding:0 35px 0 0;}
label.lt.special:before {display:none;}
label.lt.special:after {content:'S';width:30px;height:30px;position:absolute;right:0;top: 50%;transform: translateY(-50%);border-radius:100%;background:#f48c00;border:1px solid #fff;font-size:18px;text-align:center;line-height:28px;color:#fff;font-family: 'vodafone_rgbold';}

div.journey {position:absolute;top:-50px;font-weight:bold;line-height: 100%;}
ul.progression {padding:0;list-style:none;margin:30px 0 0; grid-template-columns: repeat(3, 1fr); display: grid; column-gap: 30px;}
ul.progression.calculated {margin:0 0 40px!important;}
ul.progression li {height:20px;margin:0 40px 0px 0;background: #ddd;position:relative;}
ul.progression li:after {content:'\f132';font-weight:300;    position: absolute; right: -50px; color: #ddd; font-size: 36px; top: 0px;}

ul.progression li.completed:after {   content: '\f2f7';  background: radial-gradient(circle, var(--level-color), color-mix(in srgb, var(--level-color) 70%, black));    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;}
ul.progression li.showtaken {cursor: pointer;}
div.calculated {margin:30px 0 0 0;position:relative;height:5px;background: linear-gradient(to right, #5fd77e, #47b671);}
div.calculated.alert.oranje {background: linear-gradient(to right, orange, #f48c00);}
div.calculated.alert.rood {background: linear-gradient(to right, rgb(247, 104, 104), red);}
div.calculated span.bar {background:darkred;width:0px!important;height:7px!important;top:-2px;animation: progressafwijking 1500ms ease-in 1!important;}
div.calculated span.perc {top:10px;right: -13px;font-size: .8rem;}
div.calculated span.perc:after {content:'\f0d8';font-weight:900;position: absolute;right: 8px;top: -5px;}
div.alert.donkerrood {background: linear-gradient(to right, red, rgb(199, 4, 4));animation: bgalert 1s infinite;}

/*div.manager ul.progression:not(.calculated) li:after, div.topmanager ul.progression:not(.calculated) li:after, div.collega div#mynewcomers ul.progression:not(.calculated) li:after, div.begeleider ul.progression:not(.calculated) li:after {content:'';}*/

@-webkit-keyframes bgalert {
  0%, 49% {
    background: linear-gradient(to right, rgb(95, 3, 3),rgb(190, 3, 3));
  }
  50%, 100% {
    background: linear-gradient(to right, red, rgb(199, 4, 4));
  }
}


ul.progression.calculated li span.bar {background:#fff!important;}
ul.progression.calculated li {height:5px;}
ul.progression.deelnemer {margin:60px 0 40px;}


div.currenttaken div.tab { margin: 60px 0 0;}

ul.progression li span.bar {position: absolute;    height: 100%;    background: radial-gradient(circle, var(--level-color), color-mix(in srgb, var(--level-color) 60%, black));    animation: progress 1500ms ease-in 1;}

ul.progression li span.details {position:absolute;right: -35px;cursor: pointer;top:0;line-height: 100%;}
ul.progression li span.details:before {content:'\f6a3';font-weight:300;}
span.perc {position:absolute;right:-20px;top:-30px; counter-reset: my-counter var(--num);  content: counter(my-counter);  animation: count 10s ease-in-out infinite alternate;}
ul.progression.calculated li span.perc {top:0;}
div.tab {background:#fff;color:#222;padding:20px;border-radius:10px;display:none;}
div.content-container.manager div.tab {background: #fbfbfb; border: 1px solid #ddd;}



@keyframes progress {
  from {
  width: 0;
  }
}
@keyframes count {
  from { --num: 0; }
}
@keyframes progressafwijking {
  from {
  left: 0;
  }
}

div.location-container {margin:0 0 30px;}

button.plus {float:right; line-height: 30px; width: 30px;padding: 0;margin: 0;font-size:1.25rem;}
span.schemastatus {position:absolute;right:15px;top:15px;}
span.finished:before {content:'\e5d2';font-weight:300;font-size: 1.25rem;}
span.pending:before {content:'\f19d';font-weight:300;font-size: 1.25rem;}
ul.collegas, ul.champs {list-style: none;padding:0;margin:0;width:calc(100% - 10px);}
ul.collegas ul.progression {margin:20px 0 0;}
ul.collegas > li:not(.hastrajects, .nonewcomers) {display:none;}
li.hastrajects {margin:0 0 30px;}
ul.champs li.location {font-family: 'vodafone_rgbold';}
ul.champs div.notraject {display:none!important;}
div.district-container {display: none;}
span.more:before {content:'\f65e';font-weight:300;margin:0 0 0 20px;position: absolute; top: 50%; transform: translateY(-50%);background: linear-gradient(to right, #d70000 0%, #e58000 99%);  font-size: 26px;  -webkit-background-clip: text;  -moz-background-clip: text;  -webkit-text-fill-color: transparent;  -moz-text-fill-color: transparent;cursor:pointer;}
span.more.active:before {content:'\f65d';}

div.traject-container.switchtraject div.select {margin:0;}
div.traject-container.switchtraject label, div.trajecttitle label {margin:0 10px 0 0;font-weight:bold;}
div.trajecttitle {font-weight:bold;}

div.trajectinfo {grid-template-columns: repeat(3, 1fr);display: grid;column-gap: 30px; margin: 20px 0 0;}
div.content-container.topmanager div.trajectinfo {margin:0;}

div.filter { background: #eee; padding: 20px;border-radius: 10px;  margin: 0 0 30px;  border: 1px solid #ddd;}
div.filter span.mixer {cursor:pointer;padding:10px;display:inline-block;vertical-align: top;line-height:100%;}
div.filter span.mixer:before {content:'\f3f1';font-weight:300;}
div.filter div.inner {display: none;margin:20px 0 0;}
div#searchblock {margin:0 0 0 82px;}
input#searchText, input#searchKlassikaal {border: 1px solid;  border-image-slice: 1;  border-width: 2px;  border-image-source: linear-gradient(to left, #aca8a8, #c0bbbb);padding:0 10px;width: 100%; max-width: 250px;margin:0 0 20px;line-height: 39px;vertical-align: top;}
div.select.level {margin:0 40px;}
div.select.level, div.select.periode {width:200px;background-image: linear-gradient(white, white), linear-gradient(to left, #aca8a8, #c0bbbb);}

div.select.topics{margin:0 30px 0 82px;}
span.startdatum , span.begeleider, span.locatie {display:block;}
div.startdatum:before, span.startdatum:before {content:'\f073';font-weight:300;margin:0 10px 0 0;}
div.einddatum:before {content:'\f274';font-weight:300;margin:0 10px 0 0;}
div.einddatumatum {margin:0 0 30px;}

div.functionswitch {position:absolute;top:20px;right:20px;}
div.functionswitch span {display:inline-block;line-height:30px;vertical-align: top;font-size:.9rem;}
div.functionswitch span.functies {position:relative; margin:0 5px;border-radius:30px;background: linear-gradient(to right, #d70000 0%, #e58000 99%) !important;width:55px;height:30px;cursor:pointer;z-index:10;}
div.functionswitch span.functies:before {content:'';width:20px;height:20px;border-radius:100%;background:rgba(255,255,255,1);display:block;position:absolute;left:5px;top:50%;transform:translateY(-50%);-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;}
div.functionswitch.active span.functies:before {left:initial;left:30px;}
div.functionswitch span.begeleider {font-weight:normal;}
div.functionswitch span.deelnemer {font-weight:bold;}
div.functionswitch.active span.deelnemer {font-weight:normal;}
div.functionswitch.active span.begeleider {font-weight:bold;}

div.score.outside {position: absolute;right: 0;top: 0;background: linear-gradient(to right, #d70000 0%, #e58000 99%);border-radius: 0 0 15px 15px;color: #fff; padding: 0 10px;font-size: 0.8rem;text-align: center;box-shadow: 3px 3px 5px rgba(0,0,0,0.4);}
div#myscore {width:80px;height:30px;line-height:30px;text-align:center;border-radius:10px;background:#f48c00; margin: 5px auto 5px;font-size:.8rem;font-weight:bold;border:2px solid #fff;position:relative;}
div.score.outside span {line-height: 100%;display: block;margin: 0 0 5px;}
span.points {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);animation: counter 2s alternate ease-in-out forwards; counter-reset: num var(--num);}
span.points.active { animation: recounter 4s alternate ease-in-out forwards; counter-reset: num var(--num); }
span.points::after { content: counter(num); font-size: .8rem;font-weight: bold;}
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: var(--score);
  }
}
@keyframes recounter {
  from {
    --num: var(--oldscore);
  }
  to {
    --num: var(--score);
  }
}
div.claim {position: absolute;top: 0;right: 100px;color: #fff; padding: 0 10px 0 40px; border-radius: 0 0 0 10px; font-size: 0.8rem;cursor:pointer}
div.claim:before {content:'\f85c';font-weight:300;position:absolute;top:50%;left:10px;transform:translateY(-50%);}
div.claim:hover {box-shadow: 3px 3px 5px rgba(0,0,0,0.4);}
div.streakchart .datum {font-size:.8rem;}
ul.streak {padding:0;margin:0 0 30px 4px;line-height:0;position:relative; width: max-content;}
ul.streak:before {content:'';width:100%;height:1px;background:linear-gradient(to right, #d70000 0%, #e58000 99%);;position:absolute;top:50%;transform:translateY(-50%)}
ul.streak li {display:inline-block;margin-right:50px; position: relative;}
ul.streak li:last-of-type {margin:0;}
ul.streak li:before {content:''; width:10px;height:10px;border-radius:100%;background:#d70000;}
ul.streak li:after {content:''; width:20px;height:20px;border-radius:100%;background:transparent;border:2px solid #e58000;position:absolute;left:-5px;top:50%;transform:translateY(-50%);}
.streak-icon {font-weight:bold;background: linear-gradient(to right, #d70000 0%, #e58000 99%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.streak-icon:Before {content:'\f06d';font-weight: 300;background: linear-gradient(to right, #d70000 0%, #e58000 99%);   -webkit-background-clip: text;  -webkit-text-fill-color: transparent;margin:0 5px 0 0;}
.streak-icon.none:Before, div.streak-level:before {content:'\f06d  \f06d  \f06d  \f06d  \f06d  \f06d  \f06d';font-weight: 300;background: linear-gradient(to right, #999696 0%, #bdbcbb 99%);-webkit-background-clip: text;  -webkit-text-fill-color: transparent;margin:0 5px 0 0 }
div.streak-level:before {position:absolute;width:173px;top:5px;}
div.streak-level.max:before {display:none;}
div.streak-level.max {left:initial;right:310px;}
span.streakcount { margin: 3px 3px 0 0; background: linear-gradient(to right, #d70000 0%, #e58000 99%); color: #fff; width: 25px; height: 25px; border-radius: 100%; display: inline-block; font-weight: bold; font-size: .7rem; text-align: center; line-height: 25px; vertical-align: top;}
div.streak-level {position: absolute; top: 0; left: 800px;cursor:pointer;}
div.streakstory {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.4);}
div.streakstory div.inner { background:#fff; max-width: 800px; width: 100%;  margin: 0 auto;  padding: 20px; position: fixed; top: 50%; transform:translateY(-50%); left: 0; right: 0;border-radius:10px;}
body.coco div.streakstory div.inner {top: 250px; }
div.streakstory div.inner h3 {line-height: 100%;}
div.streakstory div.inner button.close {float:right;z-index:1;position:relative;}
div#smartboard {margin: 0 0 30px; padding: 20px; background: radial-gradient(circle at 10% 20%, rgb(254 236 226) 0%, rgb(255, 247, 228) 90%); border: 1px solid #ddd;  border-radius: 10px;}

div#smartboard h3 {margin:0 0 10px;}
div.smarttaak {cursor:pointer;position:relative;margin:0 0 10px;padding:0 0 0 30px;}
div.smarttaak:before {content: '\f0d7'; font-weight: 300; position: absolute;  top: 50%;  transform: translateY(-50%);  left: 0px;  background: linear-gradient(to right, #d70000 0%, #e58000 99%);  font-size: 26px;  -webkit-background-clip: text;  -moz-background-clip: text;  -webkit-text-fill-color: transparent;  -moz-text-fill-color: transparent;}
div.smarttaak span.taakscore, div.smarttaak span.tag {top:3px;}
div.smarttaak span.taakscore {right:0;}
div.smarttaak span.tag {right:90px;}
ul.takenlijst li.activated {background: radial-gradient(circle at 10% 20%, rgb(254 236 226) 0%, rgb(255, 247, 228) 90%);  border: 1px solid #ddd;  border-radius: 10px;padding:10px;margin:0 0 10px;}

div.errors.active {background: #FFEB3B;  padding: 10px 20px;  margin: 0 0 20px;  border-radius: 10px;  font-size: .9rem;  line-height: 1.2rem;  color: #222;}
div#bonustaken {padding:20px;background:#f9ecef;border-radius: 10px; margin: 40px 0 600px;border: 1px solid #ddd;position:relative;}
ul.takenlijst.bonus li {}
ul.bonustaken {padding:0;list-style:none;margin:0;}
ul.bonustaken li:before {content:'\f06b';font-weight:300;background: #db8196; color: #fff; width: 30px; height: 30px; border-radius: 100%;  text-align: center; line-height: 30px;  font-size: 18px;position:absolute;left:0;top:2px;}
ul.bonustaken li, span.close {cursor:pointer;}
ul.bonustaken li {position:relative; padding:0 0 0 40px;}
span.close:before {content:'\f057';font-weight: 300;position:absolute;right:10px;top:10px;}

div.bonusbegeleider {display:none;}
div.bonusbegeleider div#bonustaken {margin:20px 0 0 0;}
div.bonusbegeleider h3, div.bonusbegeleider ul.takenlijst li  {color:#222;}

span.searchuser {width:10px;height:10px;display:inline-block;cursor:pointer; margin: 0 50px 0 -20px; line-height: 45px;}
span.searchuser:before {content:'\e5c5';font-weight:300;line-height: 45px;vertical-align: top;}


div.content-container.manager label.naam  {margin:0 0 10px;line-height:100%;font-weight:bold;}
div.content-container.topmanager label.naam {margin:0 0 10px;line-height: 100%;font-weight:bold;}
li.hastrajects div.trajectcontainer { margin: 0 0 40px;position: relative;}
li.hastrajects div.trajectinfo {margin:0 0 60px;}


textarea[name="user_input"] {    width: 100%;  display: block;  padding: 10px;  border: 2px solid #eee;  outline: none !important;  border-radius: 5px;  margin: 0 0 5px;  height: 100px;}
div.minchar {margin:0 0 10px;font-size:14px;line-height:100%;}
span.c2a.button.sendcomment {display:inline-block;vertical-align: top;margin:0 0 0 20px;cursor:pointer;}
div.zelfreflectie div.error div.inner {color:red;margin:0 0 10px;}
div.quotes {padding: 10px 40px; border: 2px solid #eee;border-radius: 5px; position:relative;}
div.quotes:before  {content:'\f10d';position:absolute;top:10px;left:10px;font-weight: 600;}
div.quotes:after {content:'\f10e';position:absolute;bottom:10px;right:10px;font-weight: 600;}
div.ingezonden {font-size:.8rem;}
span.pauseswitch { width: 30px;  height: 30px;  position: absolute;  right: -10px;  top: -40px;  text-align: center; background: #222;  border-radius: 100%;  color: #fff;}
div.content-container.manager span.pauseswitch {cursor: pointer; }
div.collega span.pauseswitch {top:-10px;}
span.pauseswitch:before {content:'\f04c';font-weight:300; line-height: 30px;vertical-align: top;}
span.pauseswitch.play:before {content:'\f04b';font-size: 18px;left: 2px;}
span.pauseswitch.calendar:before {content:'\e0d2';font-size: 16px;  left: 2px;}
div.pausecontainer form label.date {position:relative;width:35%;display:inline-block;}
div.pausecontainer form {background: #eee; padding: 20px; margin: 0 0 40px; border: 1px solid #c0bbbb; border-radius: 5px;display:none;}
div.pausecontainer form input, div.delegate form input {padding: 10px; width: 100%; border: 0; font-size: .85rem; display: block; font-family: 'vodafone_rgregular', arial; background: #fff; position: relative;}
form.active[name="usertraject"] {position:relative;overflow:hidden;}
form.active[name="usertraject"]:before {content:' ';position:absolute;left:-20px;width:calc(100% + 40px); bottom:0;background:rgba(255,255,255,0.75); height: 500px; z-index: 1;}
div.content-container.newcomer.paused div#progression:before, div.content-container.begeleider.paused div#progression:before, div.content-container.collega.paused div#progression:before, div.trajectcontainer.paused:before, div.begeleider div.trajectcontainer.paused:before, div.collega div.trajectcontainer.paused:before {font-family: "Font Awesome 6 Pro";content:'\f04c';font-weight:300;width: 30px;height: 30px; position: absolute; right: 10px; top: 10px; text-align: center; background: #222;border-radius: 100%;color: #fff;line-height: 30px;}
div.content-container.newcomer.play div#progression:before, div.content-container.begleider.play div#progression:before, div.content-container.collega.play div#progression:before, div.trajectcontainer.play:before, div.begeleider div.trajectcontainer.play:before, div.collega div.trajectcontainer.paused:before {font-family: "Font Awesome 6 Pro";content:' \f04b';font-weight:300;width: 30px;height: 30px; position: absolute; right: 10px; top: 10px; text-align: center; background: #222;border-radius: 100%;color: #fff;line-height: 30px;padding: 0 0 0 5px;font-size: 18px;}
div.delegate {float:right;}

 div.trajectcontainer.special:before  {content:'S';width:30px;height:30px;position:absolute;right:30px;top: -40px;border-radius:100%;background:#f48c00;font-size:18px;text-align:center;line-height:28px;color:#fff;font-family: 'vodafone_rgbold';}
div.begeleider div.trajectcontainer.special:after {content:'S';width:30px;height:30px;position:absolute;    right: 50px;    border: 2px solid #fff;    top: 0px;border-radius:100%;background:#f48c00;font-size:18px;text-align:center;line-height:27px;color:#fff;font-family: 'vodafone_rgbold';}
 div.begeleider div.trajectcontainer.play:before {top:0;}
div.collega  div.trajectcontainer.special:before {top:-10px;    border: 2px solid #fff;    line-height: 27px;}

span.searchdelegate {color: #fff; padding: 5px 10px;  border-radius: 5px;background: linear-gradient(to right, #d70000 0%, #e58000 99%);cursor:pointer;position: relative;z-index: 10;}
span.searchdelegate:before {content:'\e5c5';font-weight:300;font-size: 18px;margin: 0 5px 0 0;line-height: 18px;}
span.searchdelegate.scheduled {background:linear-gradient(to right, orange 0%, #d98c08 99%)}
span.searchdelegate.scheduled:before {content:'\e0d2';}
span.searchdelegate.active {background:linear-gradient(to right, #54c552 0%, #2ea137 99%)}
span.searchdelegate.active:before {content:'\e630'}
div.delegate form {display:block;position: absolute;right: 20px; top: 65px; z-index: 10; width: 250px;padding:10px;background: #eee; border: 1px solid #c0bbbb; border-radius: 5px; font-size: .9rem;}
div.delegate form:not(.active) {display:none;}
div.delegate form label {display:block;margin: 0 0 10px;}
div.delegate form label.chosen {margin:0;}
button#setdelegated {margin:10px 0 0;padding: 10px; line-height: 100%;}
button.delegation {float:right;cursor: pointer;  position: relative;  z-index: 10;margin:0 0 0 20px;font-size:20px;line-height:33px;background:linear-gradient(to right, #54c552 0%, #2ea137 99%)}
.fa-spinner {display: block; background: linear-gradient(to right, #d70000 0%, #e58000 99%) !important; width: 40px; height: 40px;  border-radius: 100%; color: #fff; line-height: 40px;  vertical-align: middle; margin: 0 auto;}
.fa-spinner:before {  content: "\f021";font-style: normal;font-weight:600;animation: fa-spin 2s infinite linear;position: relative;top: 2px;}
ul.voorwaarden {list-style:none;margin: 0; padding: 0; color: #fff;max-height: 240px; overflow-y: auto;}
ul.voorwaarden li {background: linear-gradient(to right, #d70000 0%, #e58000 99%) !important;margin:0 0 10px;cursor:pointer;border-radius: 5px;}
ul.voorwaarden li:last-of-type {margin:0;}
div.message button.voorwaarden {    position: absolute;    right: -8px;    top: 3px;    font-size: 26px;    line-height: 100%;    padding: 0 5px;    color: #d70000;    background: transparent;}
p.voorwaarden.title {}

ul.subtaken {list-style: none; margin: 0;padding: 20px;background: #f3e8d8; border-radius: 10px; border: solid 2px #dfd2bf;}
ul.subtaken li:after {background:#dfd2bf}
ul.subtaken li {display:block!important;}

ul.trainer.alltrajects {list-style-type: none;padding:0;margin:0;font-size: .90rem;}
ul.trainer.alltrajects li {background:#fbfbfb;border:1px solid #e9e7e7;padding:10px;margin:0 0 5px;border-radius:5px;}
ul.trainer.alltrajects li.header {display:block!important;}
ul.trainer.alltrajects div.personalia {display:grid;  grid-template-columns: repeat(6, 1fr) 50px 1fr 50px; column-gap: 10px;}
ul.trainer.alltrajects div.personalia.klassikaal {grid-template-columns: 30px 175px 125px repeat(5, 1fr);}
ul.trainer.alltrajects div.personalia.klassikaal select { border: 1px solid #bbb;border-radius: 5px; padding: 5px 10px;width: 100%;appearance: none;  -webkit-appearance: none;  -moz-appearance: none;  padding-right: 30px;  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;}
ul.trainer.alltrajects div.personalia span.user {width:200px;}
ul.trainer.alltrajects div.personalia span.datum {width:85px;}
ul.trainer.alltrajects div.personalia span.schema {width:190px;}
ul.trainer.alltrajects div.personalia span.district, ul.trainer.alltrajects div.personalia span.regio {width:85px;}
ul.trainer.alltrajects div.personalia span.percentage {width:140px;}
ul.trainer.alltrajects div.personalia span.percentage span.perc {position:relative; top: initial;  right: inherit;    width: 42px;  display: inline-block; border-radius:100%; line-height: 36px;  text-align: center;  color: #222; font-size: .7rem;cursor:pointer;background:#fff;}
ul.trainer.alltrajects div.personalia span.percentage span.perc:not(:last-of-type) {margin:0 5px 0 0;}
ul.trainer.alltrajects div.personalia span.percentage span.perc.completed { color:#fff;background: radial-gradient(circle, var(--level-color), color-mix(in srgb, var(--level-color) 60%, black));}

ul.trainer.alltrajects div.personalia span.percentage span.perc.noalert {border:3px solid #5fd77e;}
ul.trainer.alltrajects div.personalia span.percentage span.perc.oranje {border:3px solid orange;}
ul.trainer.alltrajects div.personalia span.percentage span.perc.rood {border:3px solid red;}
ul.trainer.alltrajects div.personalia span.percentage span.perc.donkerrood {border:3px solid rgb(199, 4, 4);}
ul.trainer.alltrajects div.personalia span.examenstatus {text-align:center;}
span.inroosteren {cursor:pointer;}
span.inroosteren:before {content:'\f073';font-weight:300;font-size: 18px;margin: 0 5px 0 0;line-height: 18px;}
span.selectcontainer select {padding: 5px; border: 1px solid;  border-image-slice: 1;  border-width: 2px;  border-image-source: linear-gradient(to left, #aca8a8, #c0bbbb);font-family:"vodafone_ltregular", tahoma;font-size:.8rem;}
div.eindexamencontainer {display: inline-block;margin:0 0 0 40px}
div.eindexamencontainer span {display: inline-block;margin: 0 20px 0 0;}

.personalia.header span.asc:after { content: ' ▲'; font-size: 15px; color: #d70000; margin: 0 0 0 5px;}
.personalia.header span.desc:after { content: ' ▼'; font-size: 15px; color: #d70000; margin: 0 0 0 5px;}


ul.trainer.alltrajects div.personalia.header {font-family: 'vodafone_rgbold';}
ul.trainer.alltrajects ul.taken > li, ul.trainer.alltrajects.klassikaal > li {display:none;}
button.klassikaal {float:right;z-index: 10; position: relative;}
button.klassikaal:before {content:'\f63d';font-weight:300;line-height:100%; margin: 0px 10px 0 0; top: 2px;}
div.filter.klassikaal input#searchKlassikaal {margin:0 30px 0 0;display: none;}
div.filter.trainer input#searchText  {margin:0;}
div.filter div.row:first-of-type {margin:0 0 20px;}
ul.trainer.alltrajects ul.taken {list-style: none;padding: 20px;margin: 20px;background: #eeeeee;border-radius: 10px;border: 1px solid #ddd;}
ul.trainer.alltrajects ul.taken li.title {font-family: 'vodafone_rgbold';}
ul.trainer.alltrajects ul.taken li {border:0;margin:0;padding:0;background:transparent}
ul.trainer.alltrajects ul.taken li input[type="checkbox"] {margin:0 10px 0 0;}
div.actions {display:none;margin:0 0 20px;}
div.actions label {margin:0 20px 0 10px;}
div.showall {cursor:pointer;line-height: 25px;}
div.betweendates {display:inline-block;vertical-align:top;margin:0 30px 0 0; line-height: 44px;}
div.betweendates.klassikaal { display: none;}
div.betweendates div.calendar {margin:0;}
span.resetfilter { padding: 0 10px; cursor: pointer;  margin: 4px 0 0 20px;}
span.resetfilter:before {content:'\e17b';font-weight: 600;font-size: .9rem;position:relative;top:2px;}

label.hidespecials {line-height: 43px;    font-size: .9rem;    margin: 0 0 0 10px;}

form#trainer-comment-form h3 {margin:0 0 10px;}
form#trainer-comment-form button {font-size:.7rem;line-height:100%;font-family: "vodafone_ltregular", tahoma;}
form#trainer-comment-form textarea{   width: 100%;    padding: 10px;    font-family: "vodafone_ltregular", tahoma;    font-size: .9rem;    border: 2px solid #bbb;    border-radius: 5px;}
form#trainer-comment-form span.lastupdated {margin:0 0 10px;font-size:.85rem;display:block;}
span.user.open-comment {cursor:pointer;}
span.user.open-comment:before {content:'\f4ae';font-weight:300;margin:0 5px 0 0;  }
span.user.open-comment.commented::before {  content: '\e14d';background: linear-gradient(to right, #d70000 0%, #e58000 99%); -webkit-background-clip: text;  background-clip: text;  color: transparent;  -webkit-text-fill-color: transparent; }

ul.takenlijst:not(.regular):not(.bonus) li[data-checked="1"] {display:none;}
.showalltaken, .showbonus {  display:inline-flex;  border: 1px solid #d0d7de;  border-radius: 9999px;  overflow: hidden;  background: #f6f8fa; margin:0 0 20px;}
.showbonus {margin:0 0 20px 20px;}
div.filter .showalltaken {margin:10px 0 0 0;}
.showalltaken > label, .showbonus > label {  position: relative;  padding: 8px 14px;  cursor: pointer;  user-select: none;  display: inline-flex!important;  align-items: center;  gap: .5rem;  color: #445;  transition: background .15s ease, color .15s ease;font-family: "vodafone_ltregular", tahoma; font-size: .7rem!important; line-height: 100%;    margin: 0 !important;}
.showalltaken > label > input[type="radio"], .showbonus > label > input[type="radio"] {  position: absolute;  inset: 0;  opacity: 0;  pointer-events: none; }
.showalltaken > label:has(> input[type="radio"]:checked), .showalltaken > label.active, .showbonus > label:has(> input[type="radio"]:checked)  {  background: linear-gradient(to right, #d70000 0%, #e58000 99%); color: #fff;}
.showalltaken > label:has(> input[type="radio"]:focus-visible), .showbonus > label:has(> input[type="radio"]:focus-visible)  {  outline: 2px solid #d70000;  outline-offset: 2px;}
.showalltaken > label + label, .showbonus > label + label  {  border-left: 1px solid #e4e7ea;}

@font-face {
  font-family: 'vodafone_ltregular';
  src: url('../webfonts/vodafonelt-webfont.woff2') format('woff2'),
   url('../webfonts/vodafonelt-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'vodafone_rgregular';
  src: url('../webfonts/vodafonerg-webfont.woff2') format('woff2'),
   url('../webfonts/vodafonerg-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'vodafone_rgbold';
  src: url('../webfonts/vodafonergbd-webfont.woff2') format('woff2'),
   url('../webfonts/vodafonergbd-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@-webkit-keyframes fa-spin {
  0% {
  -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
  -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-display: block;
  font-weight: 400;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-display: block;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }


 @font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.ttf") format("truetype"); }
  

@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }


@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }


@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-style: normal;
  font-weight: 100;
  font-display: block;
  src: url("../webfonts/fa-thin-100.woff2") format("woff2"), url("../webfonts/fa-thin-100.ttf") format("truetype"); }
  
@font-face {
  font-family: 'Font Awesome 6 Duotone';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-duotone-900.woff2") format("woff2"), url("../webfonts/fa-duotone-900.ttf") format("truetype"); }
@font-face {
  font-family: 'Font Awesome 6 Sharp';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-sharp-regular-400.woff2") format("woff2"), url("../webfonts/fa-sharp-regular-400.ttf") format("truetype"); }
@font-face {
  font-family: 'Font Awesome 6 Sharp';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("../webfonts/fa-sharp-light-300.woff2") format("woff2"), url("../webfonts/fa-sharp-light-300.ttf") format("truetype"); }

@font-face {
  font-family: 'Font Awesome 6 Sharp';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-sharp-solid-900.woff2") format("woff2"), url("../webfonts/fa-sharp-solid-900.ttf") format("truetype"); }