/* generated 2026-03-30 10:48:19 */
/* /custom_modules/trainingsmomenten/css/sass.css */
div.calender-contents {
margin: -16px;
padding: 52px;
margin-top: -35px;
}
div.calender-contents * {
box-sizing: content-box;
}
div.calender-contents .event-types {
background: #fff;
border: 1px solid #d2d2d2;
padding: 20px;
overflow: hidden;
position: relative;
}
div.calender-contents .event-types i.fas {
position: absolute;
top: 20px;
right: 20px;
color: #333;
font-size: 15px;
}
div.calender-contents .event-types i.fas:hover{
opacity: .6;
cursor: pointer;
}
div.calender-contents .event-types .event-type{
width: calc(50% - 5px);
float: left;
}
div.calender-contents .event-types .event-type:nth-of-type(2n-1){
margin-right: 10px;
}
div.calender-contents .event-types .event-type .item {
padding: 5px;
margin-top: 10px;
border-radius: 5px;
background-color: rgb(43,99,143);
padding: 7px 10px;
box-shadow: 0px 0px 0px 1px rgba(0,0,0,.5) inset;
}
div.calender-contents .event-types .event-type .item .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
font-weight: bold;
}
div.calender{
background-color: white;
}
div.calender,
#statistieken {
line-height: 1;
}
div.calender .extra-info,
#statistieken #bezetting .extra-info {
position: relative;
font-size: 12px;
padding: 0 0 20px 60px;
}
div.calender .extra-info span,
#statistieken #bezetting .extra-info span {
display: inline-block;
width: 90px;
}
div.calender .table,
#statistieken #bezetting .table {
width: 100%;
font-size: 14px;
display: flex;
-webkit-display: flex;
}
div.calender .table{
display: block;
-webkit-display: block;
}
div.calender .table.border-bottom,
#statistieken #bezetting .table.border-bottom {
/*border-bottom: 1px solid #aaa;*/
}
div.calender .table .cell,
#statistieken #bezetting .table .cell {
background-color: #444;
border: 1px solid #aaa;
border-style: none none solid solid;
min-height: 15px;
padding: 10px 5px;
flex: 1 1 0;
-webkit-flex: 1 1 0;
}
div.calender .table .col:nth-child(2) .cell{
border-left: none;
}
div.calender .table .col:nth-child(2) .cell.day{
border-left: 1px solid #aaa;
}
div.calender .table .cell.day,
#statistieken #bezetting .table .cell.day {
background-color: transparent;
text-align: center;
text-transform: uppercase;
font-weight: bold;
vertical-align: middle;
border-top: none;
border-bottom: none;
position: relative;
z-index: 1;
padding-bottom: 23px;
}
div.calender .table .cell.day.weekpatroon{
padding-bottom: 10px;
}
div.calender .table .col.times{
background: #fff;
}
div.calender .table .col.times .cell,
#statistieken #bezetting .table .col.times .cell {
background-color: transparent;
border: 1px solid #aaa;
border-style: solid none none;
margin-top: 0px;
}
div.calender .table .col.times .cell:first-child,
#statistieken #bezetting .table .col.times .cell:first-child {
border: none;
}
div.calender .table .les,
#statistieken #bezetting .table .les {
margin: 0 0 0 0;
position: absolute;
left: 0;
width: calc(100%);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
border-bottom: 1px solid rgba(255,255,255,0.5);
}
div.calender .table .les i.fa,
#statistieken #bezetting .table .les i.fa {
color: white;
}
div.calender.toon-alleen-highlights .table .les:not(.highlight)::after{
background: black;
position: absolute;
content: "";
width: 100%;
height: 100%;
opacity: .4;
}
div.calender .table .les .fa-lock{
position: absolute;
left: 6px;
font-size: 9px;
bottom: 6px;
}
div.calender .table .les.canceled span:last-child{
z-index: 2;
top: 50%;
transform: translateY(-50%);
opacity: 0.5;
overflow: visible;
}
div.calender .table .les.canceled span:last-child i{
overflow: visible;
}
div.calender:not(.toon-alleen-highlights) .table .les.canceled::before{
background: black;
position: absolute;
content: "";
width: 100%;
height: 100%;
opacity: .4;
z-index: 1;
}
div.calender .table .les.rescheduled{
background-image: url("/cbm/img/corner.png");
background-repeat: no-repeat;
background-position: top 4px right 4px;
box-sizing: border-box;
/*border: 1px solid #ddd;*/
/*border-radius: 10px;*/
/*box-shadow: 0px 0px 150px 0px rgba(255,255,255,0.4) inset;*/
}
div.calender .table .les .ico-attendees{
/*opacity: 0.6;*/
letter-spacing: -1px;
}
div.calender .table .les .ico-attendees i{
letter-spacing: 0;
display: inline-block;
margin: 0 2px 0px 0;
font-size: 9px;
}
div.calender .table .les .trainer,
#statistieken #bezetting .table .les .trainer {
font-size: 11px;
position: absolute;
padding-top: 5px;
height: 15px;
line-height: 1;
left: 5px;
right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/*opacity: 0.6*/
}
div.calender .table .les.selected .icon,
#statistieken #bezetting .table .les.selected .icon {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
background-image: url("/cbm/img/pencil.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
display: block;
z-index: 9;
}
div.calender .table .les span,
#statistieken #bezetting .table .les span {
font-size: 11px;
padding: 5px 5px 5px 4px;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
right: 1px;
}
div.calender .table .les.half,
#statistieken #bezetting .table .les.half {
width: 50%;
}
div.calender .table .les.half .trainer{
width: 50%;
}
div.calender .table .les.half.last,
#statistieken #bezetting .table .les.half.last {
width: calc(50% - 1px);
left: 50%;
}
div.calender .table .les.third,
#statistieken #bezetting .table .les.third {
width: calc(100% / 3);
}
div.calender .table .les.third.middle,
#statistieken #bezetting .table .les.third.middle {
left: calc(100% / 3);
}
div.calender .table .les.third.last,
#statistieken #bezetting .table .les.third.last {
left: calc(100% / 3 * 2);
width: calc(100% / 3 - 1px);
}
div.calender .col,
#statistieken #bezetting .col {
flex-direction: column;
-webkit-flex-direction: column;
position: relative;
flex: 1 1 0;
-webkit-flex: 1 1 0;
display: flex;
-webkit-display: flex;
}
.msie div.calender .col,
.msie #statistieken #bezetting .col {
width: calc((100% - 60px) / 7);
}
.msie div.calender .col .cell,
.msie #statistieken #bezetting .col .cell {
min-height: 23px;
}
div.calender .col.today .cell,
#statistieken #bezetting .col.today .cell {
}
div.calender .col.today .cell.day{
background-color: #fff;
}
div.calender .col.today .cell.day,
#statistieken #bezetting .col.today .day {
border-bottom: 4px solid #f58400;
box-sizing: border-box;
padding-top: 10px;
padding-bottom: 21px;
}
.safari div.calender .table .cell.day{
padding-bottom: 10px;
}
.safari div.calender .col.today .cell.day,
.safari #statistieken #bezetting .col.today .day{
padding-bottom: 6px;
}
div.calender .col:nth-child(n+7) .cell,
#statistieken #bezetting .col:nth-child(n+7) .cell {
background: #393939;
}
div.calender .col:nth-child(n+7) .cell.day,
#statistieken #bezetting .col:nth-child(n+7) .cell.day {
background: #ddd;
}
div.calender .col:last-child .cell.day,
#statistieken #bezetting .col:last-child .cell.day {
border-right: 1px solid #aaa;
}
.ipad div.calender .col,
.iphone div.calender .col,
.safari div.calender .col,
.ipad #statistieken #bezetting .col,
.iphone #statistieken #bezetting .col,
.safari #statistieken #bezetting .col {
display: block;
-webkit-display: block;
}
div.calender .col.times,
#statistieken #bezetting .col.times {
display: flex;
-webkit-display: flex;
max-width: 60px;
text-align: right;
border-left: 1px solid #aaa;
}
#statistieken #bezetting .table {
border-left: 1px solid #aaa;
}
#statistieken #bezetting .table .les {
box-shadow: none;
}
#statistieken #bezetting .table .les span {
min-width: 17px;
max-width: 26px;
font-size: 14px;
text-align: center;
line-height: 107%;
}
div.calender {
/*border: 1px solid #aaa;*/
width: calc(100% - 275px);
line-height: 1;
border-right: none;
}
div.calender .header {
display: flex;
-webkit-display: flex;
background: #444444;
height: 45px;
line-height: 45px;
color: #fff;
}
div.calender .header > a,
div.calender .header > div:not(.q-minical-wrapper) {
padding: 0 15px;
}
div.calender .header > a:hover,
div.calender .header > span:hover{
opacity: .7;
}
div.calender .header > div.flex {
flex: 1 1 0;
-webkit-flex: 1 1 0;
}
div.calender .header > #selected-week{
vertical-align: middle;
display: inline-block;
line-height: 44px;
cursor: pointer;
margin: 0 10px;
min-width: 80px;
padding-left: 10px;
padding-right: 1px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
div.calender .header > #selected-week i{
margin-right: 5px;
}
div.calender .table .cells{
border-top: 1px solid #444;
}
div.calender .table .cells .cell {
border-bottom-color: #666;
}
div.calender .table .cells .cell:hover {
background-color: #666;
cursor: pointer;
}
div.calender .table .cells .cell:nth-child(4n) {
border-bottom-color: #aaa;
}
div.calender .table .items {
position: relative;
z-index: 1;
/* height: 100%; uitgeschakeld na styling issues safari update */
}
div.calender .table .col.times .cell:first-child {
max-height: 15px;
}
div.calender .table .col.times .cell:last-child {
border-bottom: 1px solid #aaa;
}
div.calender .table .col:not(.times) .cell:not(.day) {
min-height: 10px;
padding: 0;
}
div.calender .table .les {
width: calc(100% - 30px);
margin: 0 0 0 1px;
left: 0;
cursor: pointer;
}
div.calender .table .les:hover::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.4);
}
div.calender .table .les.multi-3 {
width: 33.33333%;
}
div.calender .table .les.multi-3.les-m-0 {
left: calc(33.33333% * 0);
}
div.calender .table .les.multi-3.les-m-1 {
left: calc(33.33333% * 1);
}
div.calender .table .les.multi-3.les-m-2 {
left: calc(33.33333% * 2);
}
div.calender .table .les.multi-3.les-m-3 {
left: calc(33.33333% * 3);
}
div.calender .table .les.multi-3.les-m-4 {
left: calc(33.33333% * 4);
}
div.calender .table .les.multi-3.les-m-5 {
left: calc(33.33333% * 5);
}
div.calender .table .les.multi-3.les-m-6 {
left: calc(33.33333% * 6);
}
div.calender .table .les.multi-3.les-m-7 {
left: calc(33.33333% * 7);
}
div.calender .table .les.multi-3.les-m-8 {
left: calc(33.33333% * 8);
}
div.calender .table .les.multi-3.les-m-9 {
left: calc(33.33333% * 9);
}
div.calender .table .les.multi-3.les-m-10 {
left: calc(33.33333% * 10);
}
div.calender .table .les.multi-4 {
width: 25%;
}
div.calender .table .les.multi-4.les-m-0 {
left: calc(25% * 0);
}
div.calender .table .les.multi-4.les-m-1 {
left: calc(25% * 1);
}
div.calender .table .les.multi-4.les-m-2 {
left: calc(25% * 2);
}
div.calender .table .les.multi-4.les-m-3 {
left: calc(25% * 3);
}
div.calender .table .les.multi-4.les-m-4 {
left: calc(25% * 4);
}
div.calender .table .les.multi-4.les-m-5 {
left: calc(25% * 5);
}
div.calender .table .les.multi-4.les-m-6 {
left: calc(25% * 6);
}
div.calender .table .les.multi-4.les-m-7 {
left: calc(25% * 7);
}
div.calender .table .les.multi-4.les-m-8 {
left: calc(25% * 8);
}
div.calender .table .les.multi-4.les-m-9 {
left: calc(25% * 9);
}
div.calender .table .les.multi-4.les-m-10 {
left: calc(25% * 10);
}
div.calender .table .les.multi-5 {
width: 20%;
}
div.calender .table .les.multi-5.les-m-0 {
left: calc(20% * 0);
}
div.calender .table .les.multi-5.les-m-1 {
left: calc(20% * 1);
}
div.calender .table .les.multi-5.les-m-2 {
left: calc(20% * 2);
}
div.calender .table .les.multi-5.les-m-3 {
left: calc(20% * 3);
}
div.calender .table .les.multi-5.les-m-4 {
left: calc(20% * 4);
}
div.calender .table .les.multi-5.les-m-5 {
left: calc(20% * 5);
}
div.calender .table .les.multi-5.les-m-6 {
left: calc(20% * 6);
}
div.calender .table .les.multi-5.les-m-7 {
left: calc(20% * 7);
}
div.calender .table .les.multi-5.les-m-8 {
left: calc(20% * 8);
}
div.calender .table .les.multi-5.les-m-9 {
left: calc(20% * 9);
}
div.calender .table .les.multi-5.les-m-10 {
left: calc(20% * 10);
}
div.calender .table .les.multi-6 {
width: 16.66667%;
}
div.calender .table .les.multi-6.les-m-0 {
left: calc(16.66667% * 0);
}
div.calender .table .les.multi-6.les-m-1 {
left: calc(16.66667% * 1);
}
div.calender .table .les.multi-6.les-m-2 {
left: calc(16.66667% * 2);
}
div.calender .table .les.multi-6.les-m-3 {
left: calc(16.66667% * 3);
}
div.calender .table .les.multi-6.les-m-4 {
left: calc(16.66667% * 4);
}
div.calender .table .les.multi-6.les-m-5 {
left: calc(16.66667% * 5);
}
div.calender .table .les.multi-6.les-m-6 {
left: calc(16.66667% * 6);
}
div.calender .table .les.multi-6.les-m-7 {
left: calc(16.66667% * 7);
}
div.calender .table .les.multi-6.les-m-8 {
left: calc(16.66667% * 8);
}
div.calender .table .les.multi-6.les-m-9 {
left: calc(16.66667% * 9);
}
div.calender .table .les.multi-6.les-m-10 {
left: calc(16.66667% * 10);
}
div.calender .table .les.multi-7 {
width: 14.28571%;
}
div.calender .table .les.multi-7.les-m-0 {
left: calc(14.28571% * 0);
}
div.calender .table .les.multi-7.les-m-1 {
left: calc(14.28571% * 1);
}
div.calender .table .les.multi-7.les-m-2 {
left: calc(14.28571% * 2);
}
div.calender .table .les.multi-7.les-m-3 {
left: calc(14.28571% * 3);
}
div.calender .table .les.multi-7.les-m-4 {
left: calc(14.28571% * 4);
}
div.calender .table .les.multi-7.les-m-5 {
left: calc(14.28571% * 5);
}
div.calender .table .les.multi-7.les-m-6 {
left: calc(14.28571% * 6);
}
div.calender .table .les.multi-7.les-m-7 {
left: calc(14.28571% * 7);
}
div.calender .table .les.multi-7.les-m-8 {
left: calc(14.28571% * 8);
}
div.calender .table .les.multi-7.les-m-9 {
left: calc(14.28571% * 9);
}
div.calender .table .les.multi-7.les-m-10 {
left: calc(14.28571% * 10);
}
div.calender .table .les.multi-8 {
width: 12.5%;
}
div.calender .table .les.multi-8.les-m-0 {
left: calc(12.5% * 0);
}
div.calender .table .les.multi-8.les-m-1 {
left: calc(12.5% * 1);
}
div.calender .table .les.multi-8.les-m-2 {
left: calc(12.5% * 2);
}
div.calender .table .les.multi-8.les-m-3 {
left: calc(12.5% * 3);
}
div.calender .table .les.multi-8.les-m-4 {
left: calc(12.5% * 4);
}
div.calender .table .les.multi-8.les-m-5 {
left: calc(12.5% * 5);
}
div.calender .table .les.multi-8.les-m-6 {
left: calc(12.5% * 6);
}
div.calender .table .les.multi-8.les-m-7 {
left: calc(12.5% * 7);
}
div.calender .table .les.multi-8.les-m-8 {
left: calc(12.5% * 8);
}
div.calender .table .les.multi-8.les-m-9 {
left: calc(12.5% * 9);
}
div.calender .table .les.multi-8.les-m-10 {
left: calc(12.5% * 10);
}
div.calender .table .les.multi-9 {
width: 11.11111%;
}
div.calender .table .les.multi-9.les-m-0 {
left: calc(11.11111% * 0);
}
div.calender .table .les.multi-9.les-m-1 {
left: calc(11.11111% * 1);
}
div.calender .table .les.multi-9.les-m-2 {
left: calc(11.11111% * 2);
}
div.calender .table .les.multi-9.les-m-3 {
left: calc(11.11111% * 3);
}
div.calender .table .les.multi-9.les-m-4 {
left: calc(11.11111% * 4);
}
div.calender .table .les.multi-9.les-m-5 {
left: calc(11.11111% * 5);
}
div.calender .table .les.multi-9.les-m-6 {
left: calc(11.11111% * 6);
}
div.calender .table .les.multi-9.les-m-7 {
left: calc(11.11111% * 7);
}
div.calender .table .les.multi-9.les-m-8 {
left: calc(11.11111% * 8);
}
div.calender .table .les.multi-9.les-m-9 {
left: calc(11.11111% * 9);
}
div.calender .table .les.multi-9.les-m-10 {
left: calc(11.11111% * 10);
}
div.calender .table .les.multi-10 {
width: 10%;
}
div.calender .table .les.multi-10.les-m-0 {
left: calc(10% * 0);
}
div.calender .table .les.multi-10.les-m-1 {
left: calc(10% * 1);
}
div.calender .table .les.multi-10.les-m-2 {
left: calc(10% * 2);
}
div.calender .table .les.multi-10.les-m-3 {
left: calc(10% * 3);
}
div.calender .table .les.multi-10.les-m-4 {
left: calc(10% * 4);
}
div.calender .table .les.multi-10.les-m-5 {
left: calc(10% * 5);
}
div.calender .table .les.multi-10.les-m-6 {
left: calc(10% * 6);
}
div.calender .table .les.multi-10.les-m-7 {
left: calc(10% * 7);
}
div.calender .table .les.multi-10.les-m-8 {
left: calc(10% * 8);
}
div.calender .table .les.multi-10.les-m-9 {
left: calc(10% * 9);
}
div.calender .table .les.multi-10.les-m-10 {
left: calc(10% * 10);
}
div.calender .table .les.half {
width: calc(50% - 15px);
}
div.calender .table .les.half.last {
width: calc(50% - 15px);
left: calc(50% - 15px);
}
div.calender .table .les.third {
width: calc((100% - 30px) / 3);
}
div.calender .table .les.third.middle {
left: calc(((100% - 30px) / 3));
}
div.calender .table .les.third.last {
width: calc((100% - 30px) / 3);
left: calc(((100% - 30px) / 3 * 2));
}
.calender-event-toggle strong,
.calender-event-toggle i {
margin: 0 0 0 20px;
}
.calender-event-toggle .empty {
display: none;
}
.calender-event-toggle.empty > .empty {
display: block;
}
.calender-event-toggle.empty > .data {
display: none;
}
.calender-event-toggle .data strong {
display: inline-block;
min-width: 40px;
padding-right: 5px;
}
.calender-event-toggle .data .count-attendees {
float: none;
}
.calender-event-toggle table {
border-collapse: collapse;
}
.calender-event-toggle table td,
.calender-event-toggle table th {
margin: 0;
padding: 5px 0;
}
.calender-event-toggle table th {
vertical-align: center;
min-width: 45px;
margin-bottom: 5px;
padding-right: 5px;
}
.calender-event-toggle table tr {
text-align: left;
}
.calender-event-toggle table td.event-type{
font-size: 24px;
font-weight: bold;
}
.calender-event-toggle table td.event-date{
padding: 0 0 15px;
}
.calender-event-toggle table i{
font-size: 18px;
margin: 0;
width: 41px;
float: left;
text-align: center;
margin-bottom: -1px;
vertical-align: middle;
margin-left: -9px;
}
.margin-left {
margin-left: 20px;
}
div.calender .table .col.today .cells .cell{
opacity: 0.85;
}
div.calender .table .col.holiday .cells .cell{
opacity: 0.5;
}
div.calender .table .col.holiday.today .cells .cell{
opacity: 0.65;
}
div.calender .col.holiday .cell.day{
opacity: 0.5;
background-color: white;
}
div.calender .col.holiday:nth-child(n+7) .cell.day{
opacity: 0.5;
background-color: #ddd;
}
div.calender .col.holiday.today .cell.day{
opacity: 1;
background-color: #b8cbcf;
}
div.calender .col.holiday:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #326975;
opacity: 0.7;
}
div.calender .col.holiday:after {
writing-mode: lr-tb;
content: attr(data-holiday);
font-size: 30px;
font-weight: bold;
opacity: 0.7;
position: absolute;
text-transform: uppercase;
z-index: 0;
top: 50%;
left: 50%;
white-space: nowrap;
transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
/*# sourceMappingURL=sass.css.map */
div.calender-contents #calender-event-info > div:first-child,
div.calender-contents #calender-event-info-multiselect > div:first-child{
background-color: #ededed;
}
/* /custom_modules/trainingsmomenten/css/calender.css */
div.calender{
position: relative;
overflow: visible;
}
div.calender .table{
/*display: block;*/
overflow: hidden;
overflow-x: auto;
}
div.calender .table.header{
overflow: visible;
}
div.calender .table .table-container{
min-width: 835px;
display: flex;
position: relative;
}
div.calender .fixed-col.times{
background-color: white;
width: 60px;
border-left: 1px solid #aaaaaa;
position: absolute;
z-index: 9;
}
div.calender .fixed-col.times .cell{
height: 44px;
border: 1px solid #aaa;
border-style: solid none none;
font-size: 14px;
text-align: right;
padding: 10px 5px;
box-sizing: border-box;
}
div.calender .fixed-col.times .cell:first-child{
border-top: none;
height: 48px;
}
div.calender .fixed-col.times .cell.weekpatroon:first-child{
border-top: none;
height: 35px;
}
div.custom-plugin {
}
.hasEvent .ui-state-default{
background: #f58400 url("/dexos/images/ui-bg_inset-soft_30_f58400_1x100.png") repeat-x scroll 50% 50%;
border: 1px solid #ffaf0f;
color: #fff;
}
.holiday .ui-state-default{
opacity: 0.5;
}
.hasEvent .ui-state-default:hover{
opacity: 0.8;
}
a.ui-state-default.ui-state-active{
background-image: inherit;
}
.hasEvent .ui-state-default.ui-state-highlight,
a.ui-state-default.ui-state-highlight{
border: 1px solid #fff;
}
#text-period {
font-size: 11px;
height: 47px;
margin-left: 20px;
overflow: hidden;
text-align: center;
width: 160px;
}
.q-minical-wrapper{
position: absolute;
right: -10px;
margin-top: 53px;
z-index: 9;
text-transform: none;
line-height: normal;
font-size: 10px;
font-weight: normal;
-webkit-box-shadow: 0px 0px 30px -6px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 30px -6px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 30px -6px rgba(50, 50, 50, 0.75);
}
#next,
#prev {
color: #fff;
float: left;
font-size: 20px;
font-weight: 700;
height: 42px;
line-height: 45px;
margin: -2px -4px 0;
text-decoration: none;
}
.calender-options{
padding: 20px 0px;
border: 1px solid #d2d2d2;
background-color: #fff;
overflow:hidden;
}
.calender-options {
margin-bottom: 20px;
}
.calender-options > strong ,
.calender-options > i {
margin-left: 20px;
}
.calender-options input{
width: auto;
height: auto;
float: left;
margin-right: 10px;
}
.calender-options span{
line-height: auto;
float:left;
margin-top: 2px;
}
.calender-options .radio{
overflow: hidden;
float:none;
margin-left: 20px;
margin-bottom: 10px;
}
.calender-options .exec{
padding: 21px;
padding-bottom: 0;
}
.calender-options .exec button{
width: calc(100% - 42px);
margin-bottom: 10px;
}
.calender-options .exec button i{
margin-left: 0;
}
.calender-options .exec .submit.noMarginTop {
margin-top: 5px;
}
.feestdagen{
margin-top: 20px;
padding: 20px 0px;
border: 1px solid #d2d2d2;
background-color: #fff;
}
.feestdagen > strong {
margin-left: 20px;
}
.feestdagen > strong a {
color: #000;
}
.feestdagen span{
display: block;
margin-left: 20px;
margin-bottom: 5px;
font-size: 11px;
}
.feestdagen span em{
color: #0066ff;
}
form[name=calendar] a.add{
margin: 4px 0 0 10px;
background-image: url("/dexos/images/add.gif");
background-repeat: no-repeat;
background-position: center;
width: 14px;
height: 14px;
color: transparent;
float:left;
}
form[name=calendar] a.edit{
margin: 4px 0 0 10px;
background-image: url("/cbm/img/edit.png");
background-repeat: no-repeat;
background-position: center;
width: 14px;
height: 14px;
color: transparent;
float:left;
}
form[name=calendar] a.add:hover{
background-image: url("/dexos/images/add_hover.gif");
}
/* /custom_modules/rooster/css/calender.css */
div.custom-plugin {
}
/* /custom_modules/whiteboard/css/whiteboard.css */
@charset "UTF-8";
.whiteboard {
margin: -16px;
padding: 52px;
margin-top: -35px;
box-sizing: border-box; }
.whiteboard h2, .whiteboard h3, .whiteboard p {
color: #404041;
margin-top: 0px; }
.whiteboard h3 {
margin-bottom: 50px; }
.whiteboard #whiteboard-calview {
display: flex;
flex-direction: row-reverse;
align-items: stretch; }
.whiteboard #whiteboard-calview .calview-side {
border: 1px solid #b4b4b4;
background-color: #ededed;
width: 430px;
margin: 0;
margin-left: 23px;
padding: 30px;
box-sizing: border-box;
transition: width 0.2s; }
@media screen and (max-width: 1186px) {
.whiteboard #whiteboard-calview .calview-side {
display: none; } }
.whiteboard #whiteboard-calview .calview-side h2 {
font-size: 21px;
color: #484848;
position: relative; }
.whiteboard #whiteboard-calview .calview-side h2 i {
margin-right: 10px;
vertical-align: middle;
margin-top: -6px; }
.whiteboard #whiteboard-calview .calview-side h2 .published {
position: absolute;
right: 0;
top: 0;
margin-top: -5px; }
.whiteboard #whiteboard-calview .calview-side h2 .published .sbm-state-container {
overflow: visible;
height: 31px; }
.whiteboard #whiteboard-calview .calview-side h3 {
margin-bottom: 30px;
border-bottom: 1px solid #484848;
padding-bottom: 10px;
font-size: 24px; }
.whiteboard #whiteboard-calview .calview-side .workouts {
line-height: 30px;
margin-bottom: 30px;
font-size: 14px; }
.whiteboard #whiteboard-calview .calview-side .workouts a {
display: block;
color: #484848;
text-decoration: none; }
.whiteboard #whiteboard-calview .calview-side .workouts a:hover {
text-decoration: underline; }
.whiteboard #whiteboard-calview .calview-side .notes {
line-height: 18px;
color: #484848;
margin-bottom: 30px; }
.whiteboard #whiteboard-calview .calview-side .notes a {
border-top: 1px solid #c3c3c3;
margin-top: 10px;
padding-top: 10px;
display: block;
color: #484848;
text-align: center; }
.whiteboard #whiteboard-calview .calview-side .options strong {
line-height: 34px; }
.whiteboard #whiteboard-calview .calview-side .options button {
display: block;
width: 100%;
text-align: center;
cursor: pointer; }
.whiteboard #whiteboard-calview .calview-container {
border: 1px solid #b1b1b1;
border-right: none;
border-bottom: none;
border-top: none;
width: 100%; }
.whiteboard #whiteboard-calview .calview-container .m-options {
background-color: #484848;
border: 1px solid #b1b1b1;
padding: 14px;
border-top: none;
border-left: none;
overflow: hidden;
position: relative; }
.whiteboard #whiteboard-calview .calview-container .m-options .m-navigate, .whiteboard #whiteboard-calview .calview-container .m-options .w-navigate {
width: 200px;
position: absolute;
right: 20px;
margin-top: -2px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
color: #fff;
line-height: 22px;
padding: 5px 10px; }
.whiteboard #whiteboard-calview .calview-container .m-options .m-navigate a, .whiteboard #whiteboard-calview .calview-container .m-options .w-navigate a {
color: #fff;
text-decoration: none;
font-size: 16px; }
.whiteboard #whiteboard-calview .calview-container .m-options .m-navigate span, .whiteboard #whiteboard-calview .calview-container .m-options .w-navigate span {
float: none; }
.whiteboard #whiteboard-calview .calview-container .m-options .c-view {
font-size: 18px;
font-weight: bold;
line-height: 22px;
float: left;
margin-left: 20px;
margin-top: 6px;
color: #fff; }
.whiteboard #whiteboard-calview .calview-container .m-options .c-view a {
text-transform: uppercase;
text-decoration: none;
color: #fff; }
.whiteboard #whiteboard-calview .calview-container .m-options .c-view a.selected {
color: #ff9600; }
.whiteboard #whiteboard-calview .calview-container .m-days {
overflow: hidden;
display: flex; }
.whiteboard #whiteboard-calview .calview-container .m-days div {
flex-grow: 1;
flex-basis: 14%;
height: 39px;
line-height: 39px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
color: #81827a;
border: 1px solid #b2b3ae;
border-left: none;
border-top: none; }
.whiteboard #whiteboard-calview .calview-container .m-items, .whiteboard #whiteboard-calview .calview-container .w-items {
overflow: hidden;
display: flex;
flex-wrap: wrap; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item, .whiteboard #whiteboard-calview .calview-container .m-items .w-item, .whiteboard #whiteboard-calview .calview-container .w-items .m-item, .whiteboard #whiteboard-calview .calview-container .w-items .w-item {
flex-grow: 1;
flex-basis: 14%;
height: 125px;
border: 1px solid #b1b1b1;
border-left: none;
border-top: none;
background-color: #eaeae9;
position: relative;
cursor: pointer;
overflow: hidden; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item .m-daynr, .whiteboard #whiteboard-calview .calview-container .m-items .m-item .w-daynr, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .m-daynr, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .w-daynr, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .m-daynr, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .w-daynr, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .m-daynr, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .w-daynr {
position: absolute;
bottom: 5px;
left: 5px;
color: #81827a;
font-size: 10px;
z-index: 1; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item .m-program, .whiteboard #whiteboard-calview .calview-container .m-items .m-item .w-program, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .m-program, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .w-program, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .m-program, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .w-program, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .m-program, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .w-program {
background-color: #33a3e3;
margin: 5px 5px 5px 5px;
padding: 5px;
color: #fff;
font-size: 10px;
font-weight: bold;
cursor: pointer;
z-index: 2;
position: relative;
min-height: 50px; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item .m-program:hover, .whiteboard #whiteboard-calview .calview-container .m-items .m-item .w-program:hover, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .m-program:hover, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .w-program:hover, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .m-program:hover, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .w-program:hover, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .m-program:hover, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .w-program:hover {
opacity: 0.9; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item .m-program.nopublish, .whiteboard #whiteboard-calview .calview-container .m-items .m-item .w-program.nopublish, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .m-program.nopublish, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .w-program.nopublish, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .m-program.nopublish, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .w-program.nopublish, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .m-program.nopublish, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .w-program.nopublish {
opacity: 0.5; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item .m-program .icon, .whiteboard #whiteboard-calview .calview-container .m-items .m-item .w-program .icon, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .m-program .icon, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .w-program .icon, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .m-program .icon, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .w-program .icon, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .m-program .icon, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .w-program .icon {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item .m-program.selected .icon, .whiteboard #whiteboard-calview .calview-container .m-items .m-item .w-program.selected .icon, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .m-program.selected .icon, .whiteboard #whiteboard-calview .calview-container .m-items .w-item .w-program.selected .icon, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .m-program.selected .icon, .whiteboard #whiteboard-calview .calview-container .w-items .m-item .w-program.selected .icon, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .m-program.selected .icon, .whiteboard #whiteboard-calview .calview-container .w-items .w-item .w-program.selected .icon {
background-color: rgba(0, 0, 0, 0.3);
background-image: url("/cbm/img/pencil.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
display: block;
z-index: 9; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item:hover, .whiteboard #whiteboard-calview .calview-container .m-items .w-item:hover, .whiteboard #whiteboard-calview .calview-container .w-items .m-item:hover, .whiteboard #whiteboard-calview .calview-container .w-items .w-item:hover {
background-color: #fff; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item.today, .whiteboard #whiteboard-calview .calview-container .m-items .w-item.today, .whiteboard #whiteboard-calview .calview-container .w-items .m-item.today, .whiteboard #whiteboard-calview .calview-container .w-items .w-item.today {
background-color: #bfbfbf; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item.today .m-daynr, .whiteboard #whiteboard-calview .calview-container .m-items .m-item.today .w-daynr, .whiteboard #whiteboard-calview .calview-container .m-items .w-item.today .m-daynr, .whiteboard #whiteboard-calview .calview-container .m-items .w-item.today .w-daynr, .whiteboard #whiteboard-calview .calview-container .w-items .m-item.today .m-daynr, .whiteboard #whiteboard-calview .calview-container .w-items .m-item.today .w-daynr, .whiteboard #whiteboard-calview .calview-container .w-items .w-item.today .m-daynr, .whiteboard #whiteboard-calview .calview-container .w-items .w-item.today .w-daynr {
color: #000; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item.white, .whiteboard #whiteboard-calview .calview-container .m-items .w-item.white, .whiteboard #whiteboard-calview .calview-container .w-items .m-item.white, .whiteboard #whiteboard-calview .calview-container .w-items .w-item.white {
background-color: #fff; }
.whiteboard #whiteboard-calview .calview-container .m-items .m-item.white .m-program, .whiteboard #whiteboard-calview .calview-container .m-items .m-item.white .w-program, .whiteboard #whiteboard-calview .calview-container .m-items .w-item.white .m-program, .whiteboard #whiteboard-calview .calview-container .m-items .w-item.white .w-program, .whiteboard #whiteboard-calview .calview-container .w-items .m-item.white .m-program, .whiteboard #whiteboard-calview .calview-container .w-items .m-item.white .w-program, .whiteboard #whiteboard-calview .calview-container .w-items .w-item.white .m-program, .whiteboard #whiteboard-calview .calview-container .w-items .w-item.white .w-program {
opacity: 0.5;
cursor: pointer; }
.whiteboard #whiteboard-calview .calview-container .m-items .w-item, .whiteboard #whiteboard-calview .calview-container .w-items .w-item {
min-height: 427px;
height: calc(100% - 96px); }
.whiteboard #whiteboard-calview .calview-container .w-items {
height: 100%; }
#whiteboard-program {
overflow: visible; }
.whiteboard-program {
background-color: #eeeeee;
padding: 20px;
overflow: visible !important; }
.whiteboard-program .program-tabs a {
display: block;
float: left;
background-color: #f4f4f4;
padding: 15px 40px;
font-size: 14px;
color: black;
font-weight: bold;
text-decoration: none;
margin-right: 3px;
margin-bottom: 3px; }
.whiteboard-program .program-tabs a.selected {
background-color: white;
border-bottom: 3px solid white;
margin-bottom: 0; }
.whiteboard-program .flex {
display: flex;
overflow: visible; }
@media screen and (max-width: 1186px) {
.whiteboard-program .flex {
flex-wrap: wrap; } }
.whiteboard-program .flex > * {
flex-grow: 1; }
.whiteboard-program .form-box {
background: white;
overflow: visible;
margin: 0;
display: block;
position: relative;
vertical-align: top;
padding: 10px;
padding-right: 10px; }
.whiteboard-program .form-box input, .whiteboard-program .form-box select, .whiteboard-program .form-box textarea {
float: none;
margin-bottom: 10px;
display: block; }
.whiteboard-program .form-box.center {
text-align: center; }
.whiteboard-program .form-box.border {
border: 1px solid #81827a;
padding: 30px; }
.whiteboard-program .form-box.top {
margin-bottom: -1px; }
.whiteboard-program .form-box textarea {
width: 85%;
resize: none;
border: 1px solid #81827a; }
.whiteboard-program .form-box input, .whiteboard-program .form-box select {
padding: 9px;
height: auto;
width: 85%; }
.whiteboard-program .form-box input[type=checkbox], .whiteboard-program .form-box select[type=checkbox] {
margin: 0;
margin-top: 5px;
width: auto; }
.whiteboard-program .form-box input.datepick + img {
position: absolute;
margin: 0;
margin-top: 11px;
margin-left: -25px; }
.whiteboard-program .form-box input.datepick + img + a {
position: absolute;
margin: 0;
margin-top: -25px;
right: -3px; }
.whiteboard-program .form-box select {
width: calc(85%); }
.whiteboard-program .form-box select + a {
position: absolute;
margin: 0;
margin-top: -36px;
right: 10px; }
.whiteboard-program .form-box label {
display: block;
float: none;
margin-bottom: 0px;
margin-top: 10px;
width: auto; }
.whiteboard-program .form-box label:first-child {
margin-top: 0px; }
.whiteboard-program .form-box .plugin {
margin-bottom: 20px; }
.whiteboard-program .form-box .plugin .radio {
height: 100px; }
.whiteboard-program .form-box .plugin .radio input {
float: left;
margin-left: 5px;
margin-right: 5px; }
.whiteboard-program .form-box .plugin .radio label {
float: left;
margin-top: 1px;
margin-bottom: 10px; }
.whiteboard-program .form-box .button {
font-size: 12px; }
.whiteboard-program .form-box.program-info {
padding: 40px; }
.whiteboard-program .form-box.program-info .sbm-formrow select {
margin-bottom: 10px; }
.whiteboard-program .form-box.program-info .sbm-formrow .calender-ico {
margin-top: -30px;
transform: scale(0.7);
position: absolute;
right: 50px; }
.whiteboard-program .form-box.program-info * {
overflow: visible; }
.whiteboard-program .cal-filter {
border-top: 1px solid #b1b1b1;
padding-top: 30px;
display: flex; }
.whiteboard-program .cal-filter * {
flex-grow: 1; }
.whiteboard-program input, .whiteboard-program select {
margin-top: 1px;
margin-bottom: 10px;
border-color: #b4b4b4; }
.whiteboard-program input.search, .whiteboard-program select.search {
flex-grow: 2;
margin-left: 0;
margin-right: 0px;
text-align: left;
padding: 9px 20px 9px 45px;
background-image: url("/dexos/images/search.gif");
background-repeat: no-repeat;
background-position: 10px center; }
.whiteboard-program input#sortering, .whiteboard-program select#sortering {
width: 100px;
padding: 10px 5px;
height: auto;
margin-right: 20px; }
.whiteboard-program input.m-select, .whiteboard-program select.m-select {
margin: 0;
margin-right: 386px;
height: auto;
width: 208px;
padding: 9px; }
.whiteboard-program .row {
overflow: auto;
/*input, select
* margin-bottom: 20px */ }
.whiteboard-program .row:last-of-type {
margin-bottom: 20px; }
.whiteboard-program .form_row.white {
background-color: #fff;
margin-top: -20px;
padding-top: 20px;
background-image: none; }
.whiteboard-program .delete-date {
margin-left: 5px;
height: 30px;
width: 30px; }
.whiteboard-program .workout-manager {
flex-grow: 2;
display: flex;
overflow: visible;
background-color: white;
padding: 20px; }
.whiteboard-program #work-out {
flex-grow: 2;
margin-right: 0;
max-width: 100%;
width: 100%;
overflow: visible; }
.whiteboard-program #work-out.sticky {
height: calc(100% - 121px);
position: fixed;
top: 40px; }
.whiteboard-program #work-out .program {
margin-top: 10px;
overflow: visible; }
.whiteboard-program #work-out .program .work-out-dummy {
width: 440px;
min-height: 110px;
height: 110px;
border: 1px dashed #d4d4d4;
color: #d4d4d4;
position: relative;
margin-top: 10px;
margin-bottom: 20px;
transition: height 0.2s, padding 0.2s; }
.whiteboard-program #work-out .program .work-out-dummy::before {
content: attr(data-onderdeel);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
line-height: 110px;
font-size: 24px;
text-transform: uppercase;
margin-top: -5px; }
.whiteboard-program #work-out .program .work-out-dummy::after {
content: attr(data-voorbeeld);
position: absolute;
transform: translateX(-50%);
margin-top: 65px; }
.whiteboard-program #work-out .program .work-out-dummy:first-of-type {
margin-top: 0; }
.whiteboard-program #work-out .program .work-out-dummy.dropzone {
height: 150px;
color: #eab600;
border-color: #eab600;
background-color: #fff3ca; }
.whiteboard-program #work-out .program .work-out-dummy.dropzone::before {
content: "Hier plaatsen...";
text-transform: none;
margin-top: 0; }
.whiteboard-program #work-out .program .work-out-dummy.dropzone::after {
display: none; }
.whiteboard-program #work-out .program .workoutsection {
margin: 20px 0 0;
border-bottom: 2px solid #404041;
padding-bottom: 10px; }
.whiteboard-program #work-out .program .sets-vs-reps {
background-color: #eeeeee;
padding: 20px;
position: relative;
transform: translateY(-27px); }
.whiteboard-program #work-out .program .sets-vs-reps .svsr-row {
display: flex;
justify-content: flex-start; }
.whiteboard-program #work-out .program .sets-vs-reps .svsr-row a.cancel {
color: #666; }
.whiteboard-program #work-out .program .sets-vs-reps .svsr-row .svsr-col {
flex-grow: 1; }
.whiteboard-program #work-out .program .sets-vs-reps .svsr-row .svsr-col:last-child {
flex-basis: 40%; }
.whiteboard-program #work-out .program .sets-vs-reps .svsr-row .svsr-col label {
color: #81827a; }
.whiteboard-program #work-out .program .sets-vs-reps .svsr-row .svsr-col input {
width: calc(100% - 20px);
box-sizing: border-box;
margin-right: 20px;
margin-top: -3px; }
.whiteboard-program #work-out .program .sets-vs-reps .svsr-row .svsr-col .button {
width: 100%;
height: 35px;
margin-top: 23px;
text-align: center;
padding: 9px; }
.whiteboard-program #work-out .program .sets-vs-reps .svsr-row .svsr-col span {
position: absolute;
margin-left: -14px;
margin-top: 8px; }
.whiteboard-program #work-out .program .sets-vs-reps .svsr-row .svsr-col:only-child input {
width: 100%; }
.whiteboard-program #work-out .work-out {
box-sizing: border-box;
display: block;
position: relative;
border-bottom: 1px solid #eee;
padding: 10px 0 20px;
margin: 10px 0 26px 0;
font-size: 18px;
font-weight: bold;
text-align: left;
min-height: 80px;
overflow: visible; }
.whiteboard-program #work-out .work-out::before {
height: 1px;
overflow: hidden;
content: "";
display: block;
box-sizing: border-box;
position: relative;
transition: height 0.2s;
line-height: 150px;
font-size: 24px;
color: #d4d4d4;
width: 100%;
color: #eab600; }
.whiteboard-program #work-out .work-out i.rep-scheme {
float: left;
font-style: normal;
font-size: 18px;
margin-left: 10px; }
.whiteboard-program #work-out .work-out span {
float: left; }
.whiteboard-program #work-out .work-out:hover i.rep-scheme {
color: #000;
font-style: normal; }
.whiteboard-program #work-out .work-out:hover i.rep-scheme:hover {
text-decoration: underline; }
.whiteboard-program #work-out .work-out.last {
margin-bottom: 40px;
border: none; }
.whiteboard-program #work-out .work-out.dropzone {
min-height: auto;
background: transparent;
border-top: none;
border-left: none;
border-right: none; }
.whiteboard-program #work-out .work-out.dropzone::before {
content: "Hier plaatsen...";
background-color: #fff3ca;
height: 150px;
border: 1px dashed #eab600;
position: relative;
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
font-weight: normal; }
.whiteboard-program #work-out .work-out + .dropzone:before {
margin-top: -10px; }
.whiteboard-program #work-out .work-out.drag {
pointer-events: none; }
.whiteboard-program #work-out .work-out.drag .fas.fa-bars {
cursor: grab;
pointer-events: auto; }
.whiteboard-program #work-out .work-out.drag a {
cursor: pointer;
pointer-events: auto; }
.whiteboard-program #work-out .work-out.drag.duplicate {
position: absolute;
border: 0;
width: 440px !important;
height: 40px !important;
padding-left: 20px;
margin: 0;
z-index: 9;
background-color: #ccc;
opacity: 0.5;
transform: rotate(-5deg); }
.whiteboard-program #work-out .work-out.drag.duplicate a {
display: none; }
.whiteboard-program #work-out .work-out.drag.duplicate i.fas {
color: black;
bottom: 50%;
transform: translateY(50%);
right: 25px; }
.whiteboard-program #work-out .work-out a.notes {
font-size: 12px;
margin-top: 13px;
float: left;
color: #ce8b30;
margin-left: 25px;
position: relative;
overflow: visible; }
.whiteboard-program #work-out .work-out a.notes i {
font-size: 16px;
vertical-align: bottom;
margin-right: 4px; }
.whiteboard-program #work-out .work-out a.notes.first {
clear: left;
margin-left: 0; }
.whiteboard-program #work-out .work-out a.notes:hover {
opacity: 0.7; }
.whiteboard-program #work-out .work-out a.notes.active::before {
font-family: "Font Awesome 5 Free";
content: "";
font-size: 5px;
position: absolute;
margin-left: -10px;
margin-top: 6px; }
.whiteboard-program #work-out .work-out .fa-bars {
font-size: 12px;
color: #ccc;
position: absolute;
bottom: 10px;
right: 0; }
.whiteboard-program #work-out .work-out.ui-droppable-active a.delete, .whiteboard-program #work-out .work-out.ui-droppable-active i.fa-bars, .whiteboard-program #work-out .work-out.ghost a.delete, .whiteboard-program #work-out .work-out.ghost i.fa-bars {
display: none; }
.whiteboard-program #work-out .button {
font-size: 14px;
cursor: pointer; }
.whiteboard-program #program {
position: relative;
max-width: 400px;
margin: 0;
margin-left: 30px;
margin-right: 10px;
margin-top: -70px;
margin-bottom: -20px;
border-left: 2px solid white;
padding-left: 30px;
padding-top: 30px;
overflow: visible; }
.whiteboard-program #program.disabled::before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
background-color: #eee;
opacity: 0.6;
z-index: 1; }
.whiteboard-program #program .new-workout-btn-container {
border: 1px solid #ccc;
height: 100px;
background-color: #fff;
padding-top: 30px;
margin-bottom: 20px; }
.whiteboard-program #program .new-workout-btn-container a {
text-align: center;
margin-left: 50%;
transform: translateX(-50%);
border-radius: 5px;
background-color: black; }
.whiteboard-program #program .new-workout-btn-container a:hover {
opacity: 0.6; }
.whiteboard-program #program .new-workout-btn-container a i {
vertical-align: middle;
margin-top: -2px;
margin-right: 3px; }
.whiteboard-program #program select {
width: 242px;
padding: 9px;
height: auto;
float: right;
margin-top: -41px; }
.whiteboard-program #program label {
line-height: 38px; }
.whiteboard-program #program #wbsearch {
margin-top: 10px; }
.whiteboard-program #program input.search {
width: 100%;
box-sizing: border-box;
height: 40px;
margin-bottom: 15px;
float: none; }
.whiteboard-program #program input.search::placeholder {
color: #999; }
.whiteboard-program #program .benchmark-check {
margin-bottom: 40px; }
.whiteboard-program #program .benchmark-check input[type=checkbox] {
width: auto;
margin-top: -1px;
margin-right: 10px;
margin-left: 0px; }
.whiteboard-program #program .wbsearch-results {
width: calc(100% + 17px); }
.whiteboard-program #program .wbsearch-results p.nores {
display: none; }
.whiteboard-program #program .wbsearch-results h3 i.fas {
vertical-align: middle;
margin-top: -4px;
margin-right: 3px; }
.whiteboard-program #program .wbsearch-results hr {
position: relative;
color: #ccc;
background-color: #ccc;
height: 1px;
border: 0;
margin: 0;
margin-right: 17px;
padding: 0; }
.whiteboard-program #program .wbsearch-results .workouts {
margin-top: -1px;
max-height: 247px;
overflow-y: scroll; }
.whiteboard-program #program .wbsearch-results .workouts + hr {
margin-top: -1px;
margin-bottom: 20px; }
.whiteboard-program #program .wbsearch-results .workouts td {
overflow: hidden; }
.whiteboard-program #program .wbsearch-results .workouts div:hover {
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
font-weight: bold; }
.whiteboard-program .tab {
display: inline-block;
box-sizing: border-box;
width: 50%;
border: 1px solid #484848;
padding: 10px 0;
margin-bottom: 30px;
text-align: center;
color: #484848;
text-decoration: none;
font-size: 1.2em;
font-weight: bold; }
.whiteboard-program .tab:first-child {
margin-right: -4px; }
.whiteboard-program .tab.selected {
background: #484848;
color: white; }
.whiteboard-program .tab:hover {
background: #ff9600;
color: white; }
.whiteboard-program .tab.single-row {
margin-bottom: 0; }
.whiteboard-program .add {
background-image: url("/dexos/images/add.gif");
background-position: center center;
background-repeat: no-repeat;
display: inline-block;
height: 22px;
width: 14px;
line-height: 22px; }
.whiteboard-program .add:hover {
background-image: url("/dexos/images/add_hover.gif"); }
.whiteboard-program .edit {
background-image: url("/cbm/img/edit.png");
background-position: center center;
background-repeat: no-repeat;
display: inline-block;
height: 22px;
width: 14px;
line-height: 22px; }
.whiteboard-program .delete {
display: inline-block;
line-height: 22px;
color: black;
font-size: 15px; }
.whiteboard-program .delete:hover {
color: red; }
.whiteboard-program #whiteboard-listview .delete {
background-image: url("/dexos/images/delete_hover.gif"); }
.whiteboard-program #whiteboard-listview .delete.grey {
background-image: url("/dexos/images/delete.gif"); }
.whiteboard-program #whiteboard-listview .delete.grey:hover {
cursor: default;
background-color: white; }
.whiteboard-program .copy {
background-image: url("/dexos/images/copy.gif");
background-position: center center;
background-repeat: no-repeat;
display: inline-block;
height: 22px;
width: 14px;
line-height: 22px; }
.whiteboard-program .cal {
background-image: url("/dexos/images/cal.png");
background-position: center center;
background-repeat: no-repeat;
display: inline-block;
height: 22px;
width: 14px;
line-height: 22px; }
.whiteboard-program .edit:hover, .whiteboard-program .delete:hover, .whiteboard-program .copy:hover, .whiteboard-program .cal:hover {
background-color: #f6f6f6; }
.whiteboard-program .button {
box-sizing: border-box;
display: inline-block;
background: #000;
border-radius: 5px;
color: white;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
font-size: 14px;
font-weight: bold; }
.whiteboard-program .button.facebook {
background: #3b5998; }
.whiteboard-program .button:hover {
opacity: 0.6; }
.whiteboard-program .button.full {
width: calc(100% - 80px); }
.whiteboard-program .button:last-of-type {
margin-bottom: 0; }
.whiteboard-program .button img {
vertical-align: middle; }
.whiteboard-program .button.red {
background: #d35050; }
.whiteboard-program .button.grey {
background: #484848; }
.whiteboard-program .list {
border: 1px solid #81827a;
height: 60px;
padding-left: 20px;
margin-top: -1px;
overflow: hidden; }
.whiteboard-program .list h3, .whiteboard-program .list p {
line-height: 20px;
margin: 0; }
.whiteboard-program .list h3 {
margin-top: 10px; }
.whiteboard-program .list p {
margin-bottom: 10px;
line-height: 23px;
margin-right: 170px; }
.whiteboard-program .list a {
border-left: 1px solid #81827a;
height: 60px;
width: 40px; }
.whiteboard-program table {
min-width: 351px;
width: 100%;
background: white;
height: 100%; }
.whiteboard-program table, .whiteboard-program td {
border-collapse: collapse;
padding: 0;
vertical-align: middle; }
.whiteboard-program td {
line-height: 40px;
border: 1px solid #eee;
font-size: 12px;
font-weight: bold;
color: #81827a; }
.whiteboard-program td:first-child {
border-left: 1px solid #ccc; }
.whiteboard-program td:last-child {
border-right: 1px solid #ccc; }
.whiteboard-program td .drag {
height: 100%;
width: 100%;
padding: 0 20px;
margin: 0;
cursor: pointer; }
.whiteboard-program td .drag.duplicate {
position: absolute;
border: 0;
background-color: #ccc;
height: 40px;
width: 311px;
padding-left: 20px;
z-index: 9;
background-color: #fff;
opacity: 0.5;
transform: rotate(-5deg); }
.whiteboard-program td.img {
width: 40px;
text-align: center;
line-height: 0;
padding: 0; }
.whiteboard-program td.img a {
height: 30px;
width: 30px; }
/*# sourceMappingURL=whiteboard.css.map */
/* /custom_modules/berichten/css/messages.css */
.messages {
}
.messages .item {
float:left;
width: calc( 100% );
}
.messages .item:last-child {
border-bottom: 1px solid #000;
}
.messages .item.header div {
border-left: 1px solid #fff;
}
.messages .item.header {
text-height:700;
background: #acacac;
color:white;
border-bottom: 1px solid #000;
}
.messages .item div{
width: 70px;
float:right;
margin:0 10px;
padding:8px 10px;
border-left: 1px solid #acacac;
}
.messages .item div:first-child{
width: auto;
float:left;
border-left: none;
}
/* /custom_modules/berichten/css/berichten.css */
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Dec 3, 2017, 7:49:54 PM
Author : Dave Spaans
*/
.sbm-container .ontvangers #sel_ontvangers {
width: 50%; }
.sbm-container .ontvangers label {
min-width: 50% !important; }
.sbm-container .ontvangers input[type=checkbox] {
margin-left: 0px; }
.sbm-container .ontvangers .filter i {
line-height: 30px;
cursor: pointer;
margin-left: 10px; }
.sbm-container .ontvangers .filter i:hover {
color: red; }
.sbm-container .ontvangers .event-info {
margin-top: 20px; }
.sbm-container .ontvangers .event-info th:first-child {
width: 200px; }
.sbm-container .ontvangers .event-info th:nth-child(2) {
width: 100px; }
.sbm-container .ontvangers .totaaloverzicht {
position: relative; }
.sbm-container .ontvangers .totaaloverzicht .headers {
overflow: hidden; }
.sbm-container .ontvangers .totaaloverzicht .headers label {
font-size: 18px;
margin-bottom: 10px; }
.sbm-container .ontvangers .totaaloverzicht .headers .totaal {
color: #bc0000;
font-size: 30px;
font-weight: 600;
padding: 0;
display: block;
line-height: 2rem; }
.sbm-container .ontvangers .totaaloverzicht .headers .refresh {
float: right;
padding: 10px 10px 2px;
background-color: #fff;
border: 1px solid #d0d0d0;
border-radius: 4px; }
.sbm-container .ontvangers .totaaloverzicht .headers .refresh a {
color: #bc0000;
font-weight: bold;
text-transform: uppercase; }
.sbm-container .ontvangers .totaaloverzicht .tabs {
margin-top: 16px;
position: absolute;
width: 100%; }
.sbm-container .ontvangers .totaaloverzicht .tabs a {
border: 1px solid #d0d0d0;
display: inline-block;
padding: 8px 16px 5px;
background-color: #e8e8e8;
text-decoration: none;
color: black; }
.sbm-container .ontvangers .totaaloverzicht .tabs a.selected {
background-color: white;
border-bottom-color: white; }
.sbm-container .ontvangers .totaaloverzicht .tabs a:last-child {
float: right;
margin-right: 20px; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst {
margin-top: 50px;
background-color: #fff;
border: 1px solid #d0d0d0;
padding: 15px;
max-height: 250px;
overflow-y: auto;
overflow-x: hidden; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table {
width: 100%;
font-size: 11px;
line-height: normal;
border-spacing: 0; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table tr:first-child::after {
position: relative;
height: 100px; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table tr:hover {
opacity: .7; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table tr:nth-child(2):hover,
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table tr:first-child:hover {
opacity: 1; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table th {
padding-bottom: 10px;
border-bottom: 1px solid #999; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table th:last-child {
color: #bc0000;
text-decoration: underline; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table th:last-child i.fa {
vertical-align: middle;
margin-left: 4px; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table td {
max-width: 325px; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table td i.fa {
cursor: pointer;
color: #bc0000; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table div[data-tonenBijLeeg] {
display: none; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table div[data-tonenBijNietLeeg] {
display: block; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table tr:only-child div[data-tonenBijLeeg] {
display: block; }
.sbm-container .ontvangers .totaaloverzicht .ontvangerslijst table tr:only-child div[data-tonenBijNietLeeg] {
display: none; }
.sbm-container .ontvangers .totaaloverzicht .extraontvangers {
display: inline-block;
width: 100%;
padding-right: 1rem; }
.sbm-container .ontvangers .totaaloverzicht .extraontvangers h2 {
margin-top: 1.5rem;
border-bottom: unset;
padding-bottom: unset; }
.sbm-container .ontvangers .totaaloverzicht .extraontvangers .member-search input {
width: 100%; }
@media screen and (max-width: 1286px) {
div.content div.extra-form .actions.new {
width: 100%; }
div.content div.extra-form .actions.new button {
float: left; } }
.tbody_group::after {
content: "\A";
white-space: pre-wrap; }
/*# sourceMappingURL=berichten.css.map */
/* /custom_modules/lidgeschiedenis/css/event-history.css */
.lid-zoeken a{
overflow: hidden;
}
.lid-zoeken span.mail{
float: left;
}
.lid-zoeken span.naam{
float: left;
width: 250px;
}
.lid-zoeken span.regnr{
float: left;
width: 60px;
margin-right: 10px;
}
.lid-zoeken .ac-header{
font-weight: bold;
}
.lid-zoeken .ac-header .ui-state-active{
background-color: transparent;
border: none;
color: black;
font-weight: bold;
cursor: default;
margin: 0;
}
.dropit{
height: 40px;
width: 250px;
border: 1px solid #999;
border-radius: 5px;
margin-bottom: 29px;
cursor: pointer;
position: relative;
}
.dropit *{
display:none;
}
.dropit:after{
position: absolute;
left: 0;
width: 100%;
height: 100%;
line-height: 40px;
content: attr(data-label);
font-size: 11px;
font-weight: normal;
font-style: italic;
text-align: center;
}
.tablesorter-default{
margin-bottom:0;
}
.user-history p.sbm-error{
background-color: #ffdee2;
color: #aa0000;
border: 1px solid #aa0000;
margin: 0 0 20px 0;
padding: 20px;
background-image: url("/dexos/images/warning.gif");
background-position: 20px center;
background-repeat: no-repeat;
padding-left: 65px;
font-weight: bold;
}
.overflowX-hidden {
overflow-x: hidden !important;
}
table.event-history {
width: 100%;
border-collapse: collapse;
}
table.event-history th {
padding: 5px 15px;
background: #dadada;
height: 30px;
color: #434343;
}
table.event-history th.asc:after {
content: "▲";
}
table.event-history th.desc:after {
content: "▼";
}
table.event-history td {
height: 30px;
padding: 5px 15px;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 250px;
}
table.event-history tr.clickable{
cursor: pointer;
background-color: transparent;
}
table.event-history tr.clickable:hover td{
background-color: rgba(0,0,0, 0.18) !important;
}
@media screen and (max-width: 1600px) {
table.event-history th.tablet-hide,
table.event-history td.tablet-hide{
display:none;
}
}
@media screen and (max-width: 1286px) {
table.event-history th.mobile-hide,
table.event-history td.mobile-hide{
display:none;
}
}
table.event-history tr.even td {
vertical-align: middle;
}
table.event-history tr.even td,
table.event-history tr.odd td {
background: #fff
}
table.event-history tr.even td {
background: #fff
}
table.event-history tr.even:nth-child(2n) td,
table.event-history tr.odd:nth-child(2n) td{
background: #eeeeee;
}
table.event-history td.row-check {
padding: 0;
margin: 0;
width: 10px;
}
table.event-history th.row-check{
padding-right: 0;
}
table.event-history th.row-check,
table.event-history td.row-check{
/* >>> aanzetten als selecties geprogrammeerd worden */
/*display:none;*/
}
table.event-history th.row-check .squaredThree,
table.event-history td.row-check .squaredThree {
opacity: .7;
}
table.event-history th.row-check .squaredThree label,
table.event-history td.row-check .squaredThree label{
width: 16px !important;
height: 16px !important;
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #fff 0%, #fff 100%);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3);
}
table.event-history th.row-check .squaredThree label:after,
table.event-history td.row-check .squaredThree label:after{
width: 7px;
height: 3px;
top: 4px;
left: 3px;
border-color: black;
}
table.event-history .row-check .squaredThree{
margin: 0;
top: 4px;
}
table.event-history td.row-check:not(:first-child) .squaredThree{
margin-left: 15px;
}
table.event-history tr.even td.row-check{
background-color: #e2e2e2;
}
table.event-history tr.odd td.row-check{
background-color: #ebebeb;
}
table.event-history tr.even td.row-check {
background: #fff;
}
table.event-history tr.even:nth-child(2n) td.row-check,
table.event-history tr.odd:nth-child(2n) td.row-check{
background: #eeeeee;
}
table.event-history.leden-table tr.even:nth-child(2n) td.row-check{
background: #e2e2e2;
}
table.event-history.reservations tr.odd td{
background: #fff;
}
table.event-history.reservations tr.even td{
background: #eeeeee;
}
table.event-history tr th:first-child,
table.event-history tr td:first-child{
padding-left: 30px;
}
table.event-history tr td:last-child {
/*text-align: right;*/
padding-right: 32px;
}
div.content .user-history table.event-history .regNr{
/*padding-left: 5px; >>> aanzetten als selecties geprogrammeerd worden */
/*padding-left: 30px;*/
}
div.content .user-history table.event-history tr.even td.regNr{
background-color: #e2e2e2;
}
div.content .user-history table.event-history tr.odd td.regNr{
background-color: #ebebeb;
}
div.content .user-history table.event-history tr.even td.regNr:hover,
div.content .user-history table.event-history tr.odd td.regNr:hover{
font-weight: bold;
}
div.content .user-history table.event-history tr.even:hover td,
div.content .user-history table.event-history tr.odd:hover td,
div.content .user-history table.event-history tr.even:active td,
div.content .user-history table.event-history tr.odd:active td {
background-image: url("/dexos/images/transbg.png");
background-color: transparent;
}
td.table-actions{
padding: 0 !important;
border: none !important;
position: relative;
}
td.table-actions *{
visibility: hidden;
}
div.content .user-history table.event-history tr:hover td.table-actions *{
visibility: visible;
}
td.table-actions > div {
box-sizing: border-box;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-moz-box-align: stretch;
box-align: stretch;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
-ms-flex-align: stretch;
margin: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
td.table-actions > div a,
td.table-actions > div > i {
box-sizing: border-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 0 auto;
-moz-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
height: 100%;
text-align: center;
vertical-align: middle;
border-right: 1px solid #cf5454;
text-decoration: none;
font-weight: bold;
background-color: #575757;
color: #aaa;
width: 100%;
position: relative;
padding: 15px 10px;
}
tr.odd td.table-actions > div a,
tr.odd td.table-actions > div > i{
background-color: #737373;
color: #ccc;
}
td.table-actions > div a span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*padding: 0 10px;*/
width: 100%;
}
td.table-actions > div a:nth-child(1):nth-last-child(2),
td.table-actions > div > i:nth-child(1):nth-last-child(2),
td.table-actions > div a:nth-child(2):nth-last-child(1),
td.table-actions > div > i:nth-child(2):nth-last-child(1) {
width: 50%;
padding: 15px 10px;
}
td.table-actions > div a:nth-child(1):nth-last-child(3),
td.table-actions > div > i:nth-child(1):nth-last-child(3),
td.table-actions > div a:nth-child(2):nth-last-child(2),
td.table-actions > div > i:nth-child(2):nth-last-child(2),
td.table-actions > div a:nth-child(3):nth-last-child(3),
td.table-actions > div > i:nth-child(3):nth-last-child(3) {
width: 33.33333%;
padding: 15px 5px;
}
tr.even:hover td.table-actions > div a,
tr.odd:hover td.table-actions > div a {
background-color: #f28282 !important;
color: #fff !important;
}
tr.even td.table-actions > div a:hover,
tr.odd td.table-actions > div a:hover {
background-color: #f28282 !important;
color: #fff !important;
}
.table-icon {
position: absolute;
top: 30px;
right: 30px;
}
.fa {
font-size: 1.2em;
}
button .fa {
font-size: 1.5em;
}
table.event-history tr.week td {
background: #e5eaea;
height: 20px;
color: #000;
font-weight: bold;
font-size: 11px;
text-align: left;
}
div.content .user-history table tr.week:hover td {
background: #e5eaea;
color: #000;
}
div.content .user-history {
margin-bottom: -22px;
}
table.event-history tr td.actions > *:first-child {
margin-left: 0px;
}
table.event-history tr td.actions > * {
margin-left: 10px;
}
table.event-history tr td.actions .red {
color: red;
}
table.event-history tr td.actions .black {
color: black;
}
table.event-history td.products {
padding: 0px;
width: 350px;
}
table.event-history td.products ul {
font-size: 11px;
line-height: 18px;
list-style: outside none none;
padding-left: 15px;
max-width: 80px;
text-overflow: ellipsis;
}
table.event-history td.products ul li a {
color: #849755;
text-decoration: none;
}
table.event-history td.products ul li a:hover {
text-decoration: underline;
}
div.content .user-history div.total {
font-style: italic;
padding: 25px 30px;
position :relative;
}
div.content .user-history .search {
border-color: #bbb;
width: calc(100% - 364px);
margin: 0px 20px 10px 8px;
text-align: left;
padding: 11px 20px 10px 45px;
background: #fff url("/dexos/images/search.gif") no-repeat 10px center;
background-size: 25px auto;
}
div.content .user-history .member-search{
overflow: hidden;
}
/*
background-color: #e6f0d4;
border-color: #b4c88c;
border-bottom-color: #bbb;
*/
div.content .user-history .member-search .search {
background-size: 25px auto;
margin-bottom: 40px;
margin-top: 10px;
width: calc(100% - 84px);
/*max-width: 1035px;*/
}
div.content .user-history .member-search .search.member-selected{
background-color: #ebebeb;
font-weight: bold;
}
div.content .user-history .member-search .member-add-account button.sa.add_new{
top: 80px;
right: 56px;
}
div.content .user-history .clearuser {
display: inline-block;
margin-left: -58px;
margin-top: 21px;
padding: 1px 0 0 10px;
position: relative;
}
div.content div.extra-form {
padding: 25px 30px 0;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
div.content div.extra-form .advanced{
min-width: 150px;
padding-left: 10px;
line-height: 80px;
}
div.content div.extra-form .actions{
align-self: flex-start;
text-align: right;
}
div.content div.extra-form .actions button.sa:first-child{
margin-left: 0px;
}
div.content div.extra-form .actions.new{
flex-grow: 2;
}
div.content div.extra-form .actions button.sa{
position: relative;
top: auto;
right: auto;
margin: 20px auto;
margin-left: 10px;
}
div.content div.extra-form button {
flex: 1 1 0;
}
div.content div.extra-form div.spacer {
position: none;
width: auto;
flex: 1 1 0;
-webkit-flex: 1 1 0;
}
div.content div.extra-form:nth-child(2) {
margin-top: 0;
padding-top: 0;
}
div.content div.extra-form:nth-child(2) select {
margin-top: 0;
}
div.content div.extra-form .search-content {
padding-top: 0;
flex: 1 1 0;
}
div.content div.extra-form .search-content input.search {
margin-left: 0;
margin-right: 0;
height: 20px;
width: calc(100% - 71px);
}
div.content div.extra-form > div {
position: relative;
background: none;
}
div.content div.extra-form div.calender-content .calender-ico{
margin-top: 26px;
position: absolute;
left: 8px;
}
div.content div.extra-form div.calender-content .clear-field{
position: absolute;
right: 20px;
margin-top: 31px;
}
div.content div.extra-form > div > input,
div.content div.extra-form > div > select {
height: 29px;
width: 200px;
margin: 20px 10px 20px 0;
background: #fff;
border: 1px solid rgb(0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.25em;
padding: 5px 8px;
}
div.content div.extra-form > div > select {
height: 41px;
}
div.content div.extra-form > div > label {
position: absolute;
width: auto;
top: 0;
left: 0px;
font-size: 11px;
}
button.sa,
div.content div.new_buttons > button,
div.content.user-history div.extra-form > button {
background: #82aaf2;
color: white;
border: 1px solid rgb(0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.25em;
height: 41px;
line-height: 2.5;
margin: 0.25em;
width: auto;
padding: 0 20px;
margin: 20px 5px 10px;
cursor: pointer;
font-weight: bold;
}
button.sa.sa__small {
padding: 0 10px;
line-height: 2.5;
height: auto;
}
button.sa i{
font-size: 14px;
margin: 0 2px;
}
button.sa:hover,
div.content div.new_buttons > button:hover,
div.content.user-history div.extra-form > button:hover{
opacity: 0.9;
}
div.content.user-history div.extra-form > button.selected {
background: #365ea6;
}
.extra-filter-opties{
margin: 0 31px;
display:flex;
margin-bottom: 20px;
overflow: visible;
margin-left: 0;
opacity: 0.7;
flex-basis: 100%;
}
.extra-filter-opties .topcaret{
color: #666;
position: absolute;
top: -17px;
font-size: 24px;
left: 87px;
}
.extra-filter-opties div{
padding: 10px 12px;
background-color: #666;
color: white;
margin-right: 2px;
position: relative;
}
.extra-filter-opties div:first-of-type{
border-radius: 5px 0 0 5px;
}
.extra-filter-opties div:last-of-type{
border-radius: 0 5px 5px 0;
}
.extra-filter-opties label,
.extra-filter-opties input{
width: auto;
float: left;
clear: none;
}
.extra-filter-opties label{
line-height: 30px;
margin: 0 10px 0 0 !important;
}
.extra-filter-opties input{
margin-right: 10px;
margin-top: 6px;
}
div.content div.popup.list {
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
div.content div.popup.list button {
flex: 1 1 0;
-webkit-flex: 1 1 0;
margin: 0px 30px;
height: 50px;
}
div.content .user-history table tr td:not(:last-child) {
cursor: pointer;
}
div.content.user-history div.actions-info {
position: absolute;
right: 29px;
top: -15px;
width: 180px;
text-align: right;
}
div.content.user-history div.actions-info div.sub-info {
position: absolute;
width: 320px;
right: 0;
top: 40px;
}
div.content.user-history div.actions-info div.sub-info span{
display: inline;
width: auto;
float: none;
margin-left: 20px;
}
div.content.user-history div.actions-info span{
display:block;
width: 100%;
}
div.content.user-history div.actions-info > strong {
margin-bottom: 5px;
}
.container .content div.tab-frame ul.tabs li.selected,
.container .content div.tab-frame div.content {
background-color: #ebebeb;
}
/*
Eventueel klanten kaart tab in andere kleur
background-color: #e6f0d4;
border-color: #b4c88c;
border-bottom-color: #bbb;
*/
table.event-history tr.selected td{
/*background-color: rgba(242,130,130,.25) !important;
background-color: rgba(255,198,0,.25) !important;*/
background-image: url("/cbm/img/backoffice/row-selected.png") !important;
}
/* /custom_modules/dashboard/css/dashboard.css */
.sportbit-warning {
background-color: #fff2c1;
color: #9c7c05;
margin: 0 0 30px;
padding: 29px;
border: 1px solid #f7d450;
font-size: 16px;
position: absolute;
width: calc(100% - 68px);
left: 34px;
right: 34px;
margin-top: -78px;
padding-left: 99px;
min-height: 78px; }
.sportbit-warning i {
color: #f7d450;
font-size: 34px;
vertical-align: middle;
display: inline-block;
position: absolute;
left: 33px;
top: 50%;
transform: translateY(-50%); }
.sbm-bo.padding {
margin-left: 14px;
margin-right: 14px;
margin-top: 30px;
margin-bottom: 15px; }
.sbm-bo .samenvattingen.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.sbm-bo .samenvattingen > div {
width: calc(50% - 25px); }
.sbm-bo .samenvattingen > div h2 {
font-size: 18px;
line-height: 24px;
padding-bottom: 15px;
overflow: visible; }
.sbm-bo .samenvattingen > div h2 i {
font-size: 30px;
vertical-align: middle;
margin-right: 9px; }
.sbm-bo .samenvattingen > div .flex {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; }
.sbm-bo .samenvattingen > div .flex.nowrap {
flex-wrap: nowrap; }
.sbm-bo .samenvattingen > div .flex .stat {
width: 50%;
border-top: 1px solid #cacaca;
border-left: 1px solid #cacaca; }
.sbm-bo .samenvattingen > div .flex .stat.mb {
margin-bottom: 20px;
border-bottom: 1px solid #cacaca; }
.sbm-bo .samenvattingen > div .flex .stat .res {
padding: 17px;
font-size: 24px;
font-weight: bold;
position: relative;
color: #4f4f4f; }
.sbm-bo .samenvattingen > div .flex .stat .res:hover {
background-color: #f5f5f5;
/*color: darkorange;*/ }
.sbm-bo .samenvattingen > div .flex .stat .res sub {
font-size: 18px;
display: inline-block;
line-height: 23px; }
.sbm-bo .samenvattingen > div .flex .stat .res a {
position: absolute;
right: 17px;
top: 50%;
transform: translateY(-50%); }
.sbm-bo .samenvattingen > div .flex .stat .res a i {
vertical-align: middle;
font-size: 21px;
color: #d3d3d3; }
.sbm-bo .samenvattingen > div .flex .stat .res a:hover i {
color: #afafaf; }
.sbm-bo .samenvattingen > div .flex .stat .res span {
font-size: 12px;
font-weight: normal;
display: block;
margin: 5px 0px; }
.sbm-bo .samenvattingen > div .flex .stat label {
padding: 17px;
padding-right: 75px;
background-color: #d8d8d8;
color: #636363;
font-size: 16px;
display: block;
position: relative; }
.sbm-bo .samenvattingen > div .flex .stat label span {
color: white;
padding: 5px;
border-radius: 5px;
display: inline-block;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
line-height: 12px;
min-width: 45px;
text-align: center;
position: absolute;
right: 17px;
top: 50%;
transform: translateY(-50%); }
.sbm-bo .samenvattingen > div .flex .stat label span.pos {
background-color: #a3cb31; }
.sbm-bo .samenvattingen > div .flex .stat label span.pos:empty {
display: none; }
.sbm-bo .samenvattingen > div .flex .stat label span.neg {
background-color: #cb3131; }
.sbm-bo .samenvattingen > div .flex .stat label span.neg:empty {
display: none; }
.sbm-bo .samenvattingen > div .flex .stat label span.neutraal {
background-color: gray; }
.sbm-bo .samenvattingen > div .flex .stat label span.neutraal:empty {
display: none; }
.sbm-bo .samenvattingen > div .flex .stat i.fa {
color: #636363; }
.sbm-bo .workflow {
overflow: visible; }
.sbm-bo .workflow.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.sbm-bo .workflow > div {
width: calc(50% - 25px);
overflow: visible; }
.sbm-bo .workflow > div h2 {
font-size: 18px;
line-height: 24px;
padding-bottom: 15px;
overflow: visible;
position: relative; }
.sbm-bo .workflow > div h2 i {
font-size: 30px;
vertical-align: middle;
margin-right: 9px; }
.sbm-bo .workflow > div h2 a {
float: right;
color: black; }
.sbm-bo .workflow > div .row {
border: 1px solid #cacaca;
border-bottom: none;
padding: 15px;
overflow: visible; }
.sbm-bo .workflow > div .row:last-of-type {
border-bottom: 1px solid #cacaca; }
.sbm-bo .workflow > div .row .head {
line-height: 18px;
overflow: visible;
position: relative; }
.sbm-bo .workflow > div .row .head label {
font-size: 14px;
font-weight: bold; }
.sbm-bo .workflow > div .row .head span {
font-style: italic;
float: right;
line-height: 20px; }
.sbm-bo .workflow > div .row .head a {
float: right;
background-color: #111;
color: white;
padding: 2px 6px;
border-radius: 5px;
line-height: 17px;
margin-left: 15px;
margin-right: 10px; }
.sbm-bo .workflow > div .row .head a i {
vertical-align: middle; }
.sbm-bo .workflow > div .row table {
width: 100%;
margin-bottom: 1px;
margin-top: 15px;
overflow: visible; }
.sbm-bo .workflow > div .row table tr td {
background-color: #f0cbcb;
color: #7f1818;
padding: 14px 16px;
font-weight: bold;
font-size: 13px;
border-bottom: 2px solid white;
vertical-align: middle;
position: relative;
overflow: visible; }
.sbm-bo .workflow > div .row table tr td a {
color: #7f1818; }
.sbm-bo .workflow > div .row table tr td a i {
vertical-align: middle; }
.sbm-bo .workflow > div .row table tr td a + .opties-uitklapmenu {
top: 38px;
margin-right: 5px; }
.sbm-bo .workflow > div .row table tr td:last-of-type {
text-align: right; }
.sbm-bo .workflow > div .row table tr td sub {
display: inline-block; }
.sbm-bo .workflow > div .row .view-all-action {
padding: 15px;
background-color: #ededed; }
.sbm-bo .workflow > div .row .view-all-action a {
float: right;
text-decoration: none;
color: black; }
.sbm-bo .workflow > div .row .view-all-action a i {
vertical-align: middle;
margin-right: 4px; }
.sbm-bo .workflow > div .row .view-all-action a span {
color: blue;
color: black;
font-weight: bold;
text-decoration: underline; }
.sbm-bo .workflow .opties-uitklapmenu {
display: none;
background-color: black;
border-radius: 5px;
position: absolute;
right: 10px;
top: 44px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
min-width: 200px;
z-index: 1;
overflow: visible; }
.sbm-bo .workflow .opties-uitklapmenu::after {
content: " ";
height: 40px;
width: 40px;
position: absolute;
bottom: -40px;
left: 0; }
.sbm-bo .workflow .opties-uitklapmenu button {
display: block;
width: 100%;
margin: 0 !important;
border-radius: 0;
background: #4a4a4a;
border-color: #111;
border-bottom: none; }
.sbm-bo .workflow .opties-uitklapmenu button i {
font-size: 15px; }
.sbm-bo .workflow .opties-uitklapmenu button:first-child {
border-top-right-radius: 5px;
border-top-left-radius: 5px; }
.sbm-bo .workflow .opties-uitklapmenu button:last-child {
border-bottom: 1px solid #111;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; }
.dashboard-container {
padding: 30px;
border-bottom: none;
background-color: rgba(0, 0, 0, 0.05);
min-width: 750px; }
.dashboard-container .date-header {
position: relative;
padding-bottom: 30px;
border-bottom: 1px solid #bec0c0; }
.dashboard-container .date-header .datum-weergave {
padding-top: 5px; }
.dashboard-container .date-header .datum-weergave label {
margin-top: -5px;
font-size: 30px;
color: white;
background-color: #2b638f;
display: inline-block;
padding: 15px 15px 15px 13px;
text-align: center;
border-radius: 10px;
letter-spacing: -2px;
float: left;
font-weight: bold;
margin-right: 13px;
width: auto; }
.dashboard-container .date-header .datum-weergave .maand {
font-weight: bold;
font-size: 22px; }
.dashboard-container .date-header .datum-weergave .dag {
display: block;
color: #7c7c7c; }
.dashboard-container .date-header .datum-interactie {
position: absolute;
top: 0px;
right: 0px;
text-align: center; }
.dashboard-container .date-header .datum-interactie i {
font-size: 32px;
margin-right: 5px;
overflow: visible;
cursor: pointer; }
.dashboard-container .date-header .datum-interactie a {
text-decoration: none;
font-size: 28px;
color: black;
font-weight: bold; }
.dashboard-container .date-header .datum-interactie span {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
padding: 5px 15px 0px;
cursor: pointer; }
.dashboard-container .date-header .datum-interactie span:hover {
text-decoration: underline; }
.dashboard-container .date-header .datum-interactie > div {
margin-top: 0px; }
.dashboard-container .date-header .datum-interactie > div * {
vertical-align: middle;
display: inline-block; }
.dashboard-container .dash-samenvattingen {
margin-top: 30px;
display: flex; }
.dashboard-container .dash-samenvattingen .mflex {
flex: 1; }
@media screen and (max-width: 1286px) {
.dashboard-container .dash-samenvattingen {
flex-wrap: wrap; }
.dashboard-container .dash-samenvattingen .mflex {
flex: unset;
width: 100%; } }
.dashboard-container .dash-samenvattingen .lijsten {
flex: 1;
display: flex;
flex-wrap: wrap; }
@media screen and (max-width: 1286px) {
.dashboard-container .dash-samenvattingen .lijsten {
order: 2;
flex-basis: 100%;
margin-top: 40px; } }
.dashboard-container .dash-samenvattingen .lijsten .lijst {
box-shadow: 0px 0px 0px 1px #bec0c0 inset;
width: calc(50% - 20px);
margin-bottom: 40px;
display: flex;
flex-direction: column;
background-color: white; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .icon {
font-size: 42px;
text-align: center;
height: 100px;
line-height: 92px;
color: #2b638f;
border-bottom: 1px solid #bec0c0; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .icon i {
vertical-align: middle; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .icon span {
font-weight: bold;
font-size: 24px; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item {
border-bottom: 1px solid #bec0c0;
font-size: 16px;
padding: 20px;
position: relative;
cursor: pointer;
width: calc(100% - 2px);
margin-left: 1px; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item.unavailable {
background-color: rgba(0, 0, 0, 0.05);
order: 2; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item.unavailable * {
opacity: 0.5; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item span.res {
font-weight: bold;
font-size: 20px;
width: 50px;
text-align: center;
margin-right: 14px;
color: #2b638f;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%); }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item span.res + span {
display: inline-block;
height: 100%;
vertical-align: middle; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item span.titel {
display: inline-block;
margin-left: 55px;
margin-right: 35px;
margin-top: 3px;
vertical-align: middle; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item span.titel em {
display: block;
margin-top: 3px;
font-size: 12px;
color: #2b638f; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item a {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
margin-top: 3px;
font-weight: bold;
color: #b2b2b2; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item:last-child {
/*border-bottom: none;
margin-bottom: 1px;*/
flex-grow: 1; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item:hover {
background-color: #e9e9e9; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item.pro::after {
position: absolute;
width: 105px;
height: 30px;
content: "PRO";
background-color: #970000;
color: white;
font-weight: bold;
line-height: 32px;
top: 42px;
text-align: center;
transform: rotate(45deg) translateX(-50%);
right: -69px;
font-size: 14px; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item.pro a {
display: none; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item.basic::after {
position: absolute;
width: 105px;
height: 30px;
content: "BASIC";
background-color: #970000;
color: white;
font-weight: bold;
line-height: 32px;
top: 42px;
text-align: center;
transform: rotate(45deg) translateX(-50%);
right: -69px;
font-size: 14px; }
.dashboard-container .dash-samenvattingen .lijsten .lijst .item.basic a {
display: none; }
.dashboard-container .dash-samenvattingen .lijsten .lijst.pro h2::after {
position: absolute;
width: 105px;
height: 30px;
content: "PRO";
background-color: #970000;
color: white;
font-weight: bold;
line-height: 32px;
top: 42px;
text-align: center;
transform: rotate(45deg) translateX(-50%);
right: -69px;
font-size: 14px; }
.dashboard-container .dash-samenvattingen .lijsten .lijst.basic h2::after {
position: absolute;
width: 105px;
height: 30px;
content: "BASIC";
background-color: #970000;
color: white;
font-weight: bold;
line-height: 32px;
top: 42px;
text-align: center;
transform: rotate(45deg) translateX(-50%);
right: -69px;
font-size: 14px; }
.dashboard-container .dash-samenvattingen .lijsten .lijst h2 {
position: relative;
background-color: #404143;
color: #d4d4d4;
padding: 15px 25px;
margin: 0; }
.dashboard-container .dash-samenvattingen .lijsten .lijst h2 a {
color: #d4d4d4;
float: right;
line-height: 0; }
.dashboard-container .dash-samenvattingen .lijsten .lijst h2 a:hover {
color: white; }
.dashboard-container .dash-samenvattingen .lijsten .lijst:nth-child(2n-1) {
margin-right: 40px; }
.dashboard-container .dash-samenvattingen .lijsten .lijst:last-child, .dashboard-container .dash-samenvattingen .lijsten .lijst:nth-last-child(2) {
margin-bottom: 0px; }
.dashboard-container .dash-samenvattingen .lijsten .lijst:nth-child(2) .icon {
color: #cd8f17; }
.dashboard-container .dash-samenvattingen .lijsten .lijst:nth-child(2) span.res,
.dashboard-container .dash-samenvattingen .lijsten .lijst:nth-child(2) span.titel em {
color: #cd8f17; }
.dashboard-container .dash-samenvattingen .lijsten .lijst.actueel:nth-child(1) .icon {
color: #75aa1a; }
.dashboard-container .dash-samenvattingen .lijsten .lijst.actueel:nth-child(1) span.res,
.dashboard-container .dash-samenvattingen .lijsten .lijst.actueel:nth-child(1) span.titel em {
color: #75aa1a; }
.dashboard-container .dash-samenvattingen .lijsten .lijst.actueel:nth-child(2) .icon {
color: #6f1777; }
.dashboard-container .dash-samenvattingen .lijsten .lijst.actueel:nth-child(2) span.res,
.dashboard-container .dash-samenvattingen .lijsten .lijst.actueel:nth-child(2) span.titel em {
color: #6f1777; }
@media screen and (max-width: 1600px) {
.dashboard-container .dash-samenvattingen .lijsten .lijst {
/* flex-basis: calc(50% - 15px);*/
width: calc(100%); }
.dashboard-container .dash-samenvattingen .lijsten .lijst:nth-child(2n-1) {
margin-right: 0px; }
.dashboard-container .dash-samenvattingen .lijsten .lijst:last-child, .dashboard-container .dash-samenvattingen .lijsten .lijst:nth-last-child(2) {
margin-bottom: 40px; } }
.dashboard-container .dash-samenvattingen .blokken {
flex: 1;
align-content: stretch;
position: relative;
box-shadow: 0px 0px 0px 1px #bec0c0 inset;
border-bottom: 0;
background-color: transparent;
margin-left: 40px;
/* @media screen and (max-width: 856px) {
.samenvatting{
width: 100%;
border-left: 1px solid #bec0c0;
border-right: 2px solid #bec0c0;
&:nth-child(2n-1){
border-left: 1px solid #bec0c0;
border-right: 1px solid #bec0c0;
}
}
}*/ }
@media screen and (max-width: 1600px) {
.dashboard-container .dash-samenvattingen .blokken {
flex-basis: 30%; } }
@media screen and (max-width: 1286px) {
.dashboard-container .dash-samenvattingen .blokken {
order: 1;
flex-basis: 100%;
margin-left: 0; } }
.dashboard-container .dash-samenvattingen .blokken h2 {
background-color: #404143;
color: #d4d4d4;
padding: 15px 25px;
margin: 0; }
.dashboard-container .dash-samenvattingen .blokken h2 a {
color: #d4d4d4;
float: right;
line-height: 0; }
.dashboard-container .dash-samenvattingen .blokken h2 a:hover {
color: white; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting {
position: relative;
float: left;
width: 50%;
height: 246px;
border-right: 1px solid #bec0c0;
border-bottom: 1px solid #bec0c0;
color: #404143;
cursor: pointer;
width: calc(50% - 1px);
margin-left: 1px;
background-color: white; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting.red {
color: #970000; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting.pro.red {
color: rgba(151, 0, 0, 0.4); }
.dashboard-container .dash-samenvattingen .blokken .samenvatting.pro::before {
content: "PRO";
position: absolute;
top: 0;
height: 20px;
width: 100%;
background-color: #970000;
color: white;
font-weight: bold;
font-size: 15px;
padding: 9px 0;
text-align: center;
transform: rotate(45deg);
margin-right: 31px;
margin-top: 10px;
right: -50%; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting.basic.red {
color: rgba(151, 0, 0, 0.4); }
.dashboard-container .dash-samenvattingen .blokken .samenvatting.basic::before {
content: "BASIC";
position: absolute;
top: 0;
height: 20px;
width: 100%;
background-color: #970000;
color: white;
font-weight: bold;
font-size: 15px;
padding: 9px 0;
text-align: center;
transform: rotate(45deg);
margin-right: 31px;
margin-top: 10px;
right: -50%; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting:hover {
background-color: #e9e9e9; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting > div {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
text-align: center;
padding: 0 30px; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting > div i {
display: block;
font-size: 36px;
margin-bottom: 15px;
overflow: visible; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting > div a {
display: block;
font-size: 36px;
font-weight: bold;
margin-bottom: 5px; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting > div a span {
font-size: 22px;
display: inline-block;
vertical-align: bottom;
margin-bottom: 4px; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting > div > span {
display: block;
font-size: 18px;
font-weight: bold;
margin-bottom: 7px; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting > div > span:last-child {
font-size: 14px;
margin-bottom: 0;
font-weight: normal; }
.dashboard-container .dash-samenvattingen .blokken .samenvatting:nth-child(2n-1) {
border-right: none;
margin-left: 0px;
margin-right: 1px; }
#dashboard {
box-sizing: border-box; }
#dashboard * {
box-sizing: border-box;
overflow: initial; }
#dashboard .dash-welcome {
width: 35%;
margin-bottom: 40px; }
#dashboard .dash-welcome h2 {
font-size: 32px;
margin-top: 10px; }
@media screen and (max-width: 1256px) {
#dashboard .dash-welcome h2 {
font-size: 24px; } }
#dashboard .dash-summary {
width: 35%;
margin-bottom: 40px; }
#dashboard .dash-summary h3 {
font-size: 16px;
margin-bottom: 10px; }
#dashboard .dash-summary ul {
padding: 0; }
@media screen and (max-width: 1256px) {
#dashboard .dash-summary ul {
margin-right: 10px; } }
#dashboard .dash-summary ul li {
list-style-type: none;
border-bottom: 1px solid #b0b0b1;
padding: 5px 0; }
#dashboard .dash-summary ul li a {
text-decoration: none;
line-height: 26px;
color: #0066ff; }
#dashboard .dash-summary ul li a:hover {
text-decoration: underline; }
#dashboard .dash-summary ul li:first-of-type {
border-top: 1px solid #b0b0b1; }
#dashboard .dash-summary ul li .dash-info-click {
color: #000;
opacity: .5;
float: right;
font-size: 16px;
margin-top: 1px; }
#dashboard .dash-summary ul li .dash-info-click:hover {
opacity: .8; }
#dashboard .dash-summary ul li .dash-info-click.selected {
opacity: 1;
position: relative; }
#dashboard .dash-summary ul li .dash-info-click.selected::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 20px 15px 0;
border-color: transparent #ededed transparent transparent;
right: -32px;
top: -3px; }
#dashboard .dash-graph {
width: 63%;
float: right; }
#dashboard .dash-info {
width: 63%;
float: right;
background-color: #ededed;
padding: 28px;
min-height: 650px;
margin-top: 15px; }
#dashboard .dash-info div {
display: none;
line-height: 20px; }
#dashboard .dash-info div h3 {
font-size: 24px;
margin-top: 0; }
#dashboard .dash-info p.error {
background-color: #ffdee2;
color: #aa0000;
border: 1px solid #aa0000;
margin: 0 0 20px 0;
padding: 20px;
background-image: url("/dexos/images/warning.gif");
background-position: 20px center;
background-repeat: no-repeat;
padding-left: 65px;
font-weight: bold; }
#dashboard .dash-info p.warning {
background-color: #fff2c1;
color: #332c0d;
border: 1px solid #DBD4BF;
margin: 0 0 20px 0;
padding: 20px;
padding-left: 65px;
font-weight: bold;
position: relative; }
#dashboard .dash-info p.warning::before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 65px;
height: 100%;
background-image: url("/dexos/images/warning.gif");
background-position: 20px center;
background-repeat: no-repeat;
opacity: .3;
filter: grayscale(100%); }
#dashboard .dash-info p.warning a {
color: red; }
#dashboard .dash-actions {
width: 100%;
clear: both; }
#dashboard .dash-action-box {
position: relative;
width: 265px;
height: 265px;
background-color: #ececec;
border: 1px solid #d6d6d6;
cursor: pointer;
display: inline-block;
margin: 0 20px 20px 0;
position: relative;
transition: box-shadow 0.2s; }
#dashboard .dash-action-box::before {
position: absolute;
width: 100%;
height: 100%;
content: "Geen actiepunten";
line-height: 265px;
text-align: center;
font-weight: bold;
font-size: 24px;
color: #d6d6d6; }
#dashboard .dash-action-box .fa {
position: absolute;
top: 20px;
right: 20px;
font-size: 3.5em; }
#dashboard .dash-action-box span {
text-align: center;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
#dashboard .dash-action-box .number {
position: absolute;
top: 33%;
font-size: 37px;
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-weight: bold; }
#dashboard .dash-action-box .title {
position: absolute;
top: 51%;
font-size: 1.5em;
font-weight: bold;
width: 100%; }
#dashboard .dash-action-box .info {
position: absolute;
bottom: 30px;
font-size: 11px;
text-transform: uppercase;
font-style: italic;
width: 100%; }
#dashboard .dash-action-box > div {
position: absolute;
width: 100%;
height: 100%; }
#dashboard .dash-action-box > div.alert1 {
background-color: #ff4747;
color: #fff; }
#dashboard .dash-action-box > div.alert2 {
background-color: #8a292b;
color: #fff; }
#dashboard .dash-action-box > div.alert3 {
background-color: #522323;
color: #fff; }
#dashboard .dash-action-box > div:hover {
opacity: 0.9; }
/*# sourceMappingURL=dashboard.css.map */
/* /custom_modules/statistieken/css/statistieken.css */
#statistieken {
margin-top: 60px;
}
.container .content form[name=cbm_stats]{
margin-bottom: -22px;
}
#statistieken p.warning{
background-color: #fff2c1;
color: #332c0d;
border: 1px solid #DBD4BF;
margin: 0 0 20px 0;
padding: 20px;
padding-left: 65px;
font-weight: bold;
position: relative;
font-size: 12px;
line-height: 16px;
}
#statistieken p.warning::before{
content: " ";
position: absolute;
left: 0;
top: 0;
width: 65px;
height: 100%;
background-image: url("/dexos/images/warning.gif");
background-position: 20px center;
background-repeat: no-repeat;
opacity: .3;
filter: grayscale(100%);
}
#statistieken p.warning a{
color: red;
font-size: 12px;
}
#statistieken,
#statistieken * {
box-sizing: border-box;
}
#statistieken #inkomsten{
min-height: 493px;
}
#statistieken #inkomsten,
#statistieken #leden,
#statistieken #bezetting {
padding: 20px;
font-size: 0;
}
#statistieken p,
#statistieken a {
font-size: 14px;
}
#statistieken .legenda{
margin-top: 30px;
}
#statistieken .tag{
font-size: 11px;
font-weight: bold;
color: white;
border-radius: 10px;
padding: 5px 10px;
margin-right: 5px;
}
#statistieken .tag.blue{
background-color: #3792cc;
}
#statistieken .tag.red{
background-color: #ff6384;
}
#statistieken .tag.green{
background-color: #a6cc38;
}
#statistieken #instellingen {
margin-bottom: 20px;
display:flex;
flex-direction: row;
-webkit-flex-direction: row;
}
#statistieken #instellingen label {
display: inline;
font-size: 14px;
float: none;
vertical-align: middle;
}
#statistieken #instellingen #view-select {
display: inline-block;
margin-right: 10px;
}
#statistieken #instellingen #view-select [type='radio'] {
display: none;
}
#statistieken #instellingen #view-select label {
display: inline-block;
border: 1px solid #b2b2b2;
border-left-width: 0px;
text-align: center;
width: 30px;
height: 30px;
margin: 0;
padding: 2px 0;
cursor:pointer;
}
#statistieken #instellingen #view-select [type='radio']:checked + label {
background-color: #fff;
cursor:default;
}
#statistieken #instellingen #view-select label:first-of-type {
border-left-width: 1px;
border-radius: 2px 0 0 2px;
}
#statistieken #instellingen #view-select label:last-of-type {
border-radius: 0 2px 2px 0;
}
#statistieken #instellingen #view-select label:hover {
background-color:#dfdfdf;
}
#statistieken #instellingen #view-select label img {
vertical-align: middle;
}
#statistieken #instellingen #view-select [type='checkbox'] {
display: none;
}
#statistieken #instellingen select,
#statistieken #instellingen input {
float: none;
height: 30px;
vertical-align: middle;
margin-right: 10px;
border: 1px solid #b2b2b2;
padding: 0px 10px;
}
#statistieken #instellingen option {
padding: 5px 10px;
}
#statistieken #instellingen select:last-child,
#statistieken #instellingen input:last-child {
margin-right: 0;
}
#statistieken #instellingen select#producten,
#statistieken #instellingen input#search {
width: auto;
flex:1 1 0;
-webkit-flex:1 1 0;
}
#statistieken #instellingen select#VAT {
width: 150px;
}
#statistieken #leden .search input,
#statistieken #instellingen input#search {
padding: 0 30px 0 10px;
background-image: url("/cbm/img/search-light.png");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 25px 20px;
}
#statistieken #jaar,
#statistieken #tabel #legenda {
border: 1px solid #b2b2b2;
border-bottom: none;
text-align: center;
padding: 7px;background-color: #fff;
margin-left: 70px;
}
#statistieken #leden #jaar {
margin-left: 0;
}
#statistieken #jaar .spacer {
display:inline-block;
width:50px;
}
#statistieken .jaar-prev,
#statistieken .jaar-next,
#statistieken .jaartal {
vertical-align: middle;
}
#statistieken .jaartal {
display: inline;
font-size: 18px;
font-weight: bold;
margin: 0;
}
#statistieken .jaar-prev,
#statistieken .jaar-next {
color: #b2b2b2;
font-size: 20px;
margin: 0 20px;
text-decoration: none;
}
#statistieken #grafiek #x-as,
#statistieken #tabel #x-as {
width: 70px;
height: 330px;
display: flex;
flex-direction: column;
display: -webkit-flex;
-webkit-flex-direction: column;
float: left;
}
#statistieken #grafiek #x-as p,
#statistieken #tabel #x-as a {
text-align: right;
vertical-align: top;
margin: 0 10px 0 0;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
}
#statistieken #tabel #x-as a {
height: calc(100% / 12);
text-align: left;
display: block;
font-size: 12px;
cursor:pointer;
}
#statistieken #tabel #x-as a.selected {
color:blue;
}
#statistieken #tabel #x-as span {
height: calc(100% / 12);
margin-top:-25px;
margin-bottom:5px;
text-align: left;
display: block;
font-size: 12px;
font-style:italic;
}
#statistieken #grafiek-rechts {
width: calc(100% - 70px);
display: inline-block;
height: 360px;
vertical-align: top;
}
#statistieken #grafiek #dataset {
border: 1px solid #b2b2b2;
padding: 0 10px;
height: 330px;
background-color: #fff;
}
#statistieken #grafiek #y-as {
padding: 0 10px;
height: 30px;
}
#statistieken #grafiek .colom,
#statistieken #grafiek .maand {
display: inline-block;
width: calc(100% / 12);
width: 8.3%\9;
}
#statistieken #grafiek .colom {
height: 100%;
position: relative;
padding: 0 10px;
}
#statistieken #grafiek .colom span {
font-size: 13px !important;
opacity: 0;
margin-top: -40px;
font-weight: bold;
float:left;
width: 100%;
text-align:center;
color: black;
}
#statistieken #grafiek .colom:hover span {
opacity: 0.7;
}
#statistieken #grafiek .data-1,
#statistieken #grafiek .data-2,
#statistieken #grafiek .data-3,
#statistieken #grafiek .data-4,
#statistieken #grafiek .data-5 {
height: 20px;
display: inline-block;
width: calc(100% - 20px);
position: absolute;
cursor: pointer;
}
#statistieken #grafiek .data-1:hover,
#statistieken #grafiek .data-2:hover,
#statistieken #grafiek .data-3:hover,
#statistieken #grafiek .data-4:hover,
#statistieken #grafiek .data-5:hover {
opacity: 0.7;
}
#statistieken #grafiek .data-1 {
background-color: #a6cc37;
bottom: 0;
height: 80px;
}
#statistieken #grafiek .data-2 {
background-color: #c9de8c;
bottom: 0;
height: 40px;
opacity: .5;
}
#statistieken #grafiek .maand {
font-size: 14px;
font-weight: bold;
text-align: center;
padding: 10px 10px 0;
}
#statistieken #tabel #legenda{
text-align: left;
}
#statistieken #tabel #legenda p {
position: relative;
padding-left: 20px;
display: inline-block;
text-align: left;
font-size: 12px;
width: 120px;
}
#statistieken #tabel #legenda p.gestopt:before,
#statistieken #tabel #legenda p.nieuw:before {
content: '';
position: absolute;
top: calc(50% - 7px);
left: 0;
width: 10px;
height: 10px;
border-width: 1px;
border-style: solid;
}
#statistieken #tabel #legenda p.gestopt {
color: #aa0000;
font-weight: bold;
text-transform: uppercase;
margin-left: 20px;
}
#statistieken #tabel #legenda p.gestopt:before,
#statistieken #tabel table tr.gestopt {
border-color: #aa0000;
background-color: rgba(221, 0, 0, 0.15);
color: #aa0000;
}
#statistieken #tabel table tr.gestopt:hover {
background-color: rgba(221, 0, 0, 0.3);
}
#statistieken #tabel #legenda p.nieuw {
color: #008800;
font-weight: bold;
text-transform: uppercase;
}
#statistieken #tabel #legenda p.nieuw:before,
#statistieken #tabel table tr.nieuw {
border-color: #008800;
background-color: rgba(0, 221, 0, 0.15);
color: #008800;
}
#statistieken #tabel table tr.nieuw:hover {
background-color: rgba(0, 221, 0, 0.3);
}
#statistieken #tabel #legenda p.notas {
float: right;
width: auto;
margin-right: 20px;
}
#statistieken #tabel #legenda p.notas span {
color: #aa0000;
font-weight: bold;
}
#statistieken #tabel .table-container {
overflow: auto;
border: 1px solid #b2b2b2;
min-height: 305px;
background-color: #fff;
}
#statistieken #tabel table {
width: 100%;
font-size: 12px;
line-height: 1.2;
border-collapse: collapse;
border-spacing: 0;
text-align: left;
}
#statistieken #tabel table thead{
background-color: #dadada;
}
#statistieken #tabel table th {
padding: 10px 5px;
}
#statistieken #tabel table tbody tr {
cursor: pointer;
position: relative;
}
#statistieken #tabel table tbody tr:nth-child(odd) {
background:#eeeeee;
}
#statistieken #tabel table tbody tr:hover {
background-color: rgba(0, 0, 0, 0.2 );
margin: 0;
padding: 0;
}
#statistieken #tabel table td {
padding: 5px;
}
#statistieken #tabel table th:first-child ,
#statistieken #tabel table td:first-child {
padding-left:10px;
}
#statistieken #tabel table td.lidnr {
text-align: right;
width: 30px;
padding-right: 0;
}
#statistieken #leden .trend table td:not([onclick='']){
cursor: pointer;
}
#statistieken #leden .trend table td:not([onclick='']):hover{
/*-webkit-box-shadow: inset 0px -1px 0px 0px rgba(55,146,204,1);
-moz-box-shadow: inset 0px -1px 0px 0px rgba(55,146,204,1);
box-shadow: inset 0px -1px 0px 0px rgba(55,146,204,1);*/
text-decoration: underline;
color: #3792cc;
font-weight: bold;
background-color: #d2e8f6;
}
#statistieken #leden .trend table td:first-of-type,
#statistieken #leden .trend table th:first-of-type{
width: 150px;
text-align: left;
padding-left: 25px;
}
#statistieken #tabel table th.producttype,
#statistieken #tabel table td.producttype,
#statistieken #tabel table th.datum,
#statistieken #tabel table td.datum,
#statistieken #tabel table th.bedrag,
#statistieken #tabel table td.bedrag {
width: 100px;
}
#statistieken #tabel table th.count,
#statistieken #tabel table td.count{
width: 50px;
/*text-align: right;*/
}
#statistieken #bezetting .extra-info {
position:relative;
font-size:12px;
padding:0 0 20px 60px;
}
#statistieken #bezetting .extra-info span{
display:inline-block;
width:90px;
}
#statistieken #bezetting #instellingen {
padding-left: 60px;
font-size: 12px;
line-height: 22px;
}
#statistieken #bezetting .table {
width: 100%;
font-size: 14px;
display: flex;
-webkit-display: flex;
padding-right: 20px;
}
#statistieken #bezetting .col {
display: flex;
-webkit-display: flex;
flex-direction: column;
-webkit-flex-direction: column;
position: relative;
flex: 1 1 0;
-webkit-flex: 1 1 0;
}
#statistieken #bezetting .col.times {
max-width: 60px;
text-align: right;
background-color: #393939;
color: rgba(255,255,255,.5);
}
#statistieken #bezetting .table .cell {
background-color: #444;
border: 1px solid #aaa;
min-height: 40px;
padding: 10px 5px;
margin: 0 0 -1px -1px;
flex: 1 1 0;
-webkit-flex: 1 1 0;
}
#statistieken #bezetting .col.times .cell {
background-color: transparent;
border: 1px solid #aaa;
z-index: 10;
padding: 10px 12px;
}
#statistieken #bezetting .col.times .cell:first-child {
border: none;
}
#statistieken #bezetting .table .cell.day {
text-align: center;
text-transform: uppercase;
font-weight: bold;
vertical-align: middle;
line-height: 136%;
background-color: #393939;
color: rgba(255,255,255,.5);
border-bottom: 1px solid #aaa;
}
#statistieken #bezetting .col:nth-child(n+7) .cell.day {
background-color: #4C4C4C;
color: rgba(255,255,255,.5);
}
#statistieken #bezetting .table .les {
position: absolute;
left: 0;
width: calc(100% - 1px);
z-index: 10;
background-color: rgba(200, 0, 0, 0.8);
}
#statistieken #bezetting .table .les span{
background-color: rgba(255,255,255,.6);
border-radius: 13px;
padding: 5px 6px 5px 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 26px;
height: 26px;
text-align: center;
letter-spacing: -1px;
color: rgba(0,0,0,.8);
}
#statistieken #bezetting .table .les.half {
width: 50%;
}
#statistieken #bezetting .table .les.half.last {
width: calc(50% - 1px);
left: 50%;
}
#statistieken #bezetting .table .les.third {
width: calc(100% / 3);
}
#statistieken #bezetting .table .les.third.middle {
left: calc(100% / 3);
}
#statistieken #bezetting .table .les.third.last {
left: calc(100% / 3 * 2);
width: calc(100% / 3 - 1px);
}
#statistieken #leden #views {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: 1px solid #b2b2b2;
font-size: 13px;
background-color: #fff;
}
#statistieken #leden #member-pie-chart {
width: 500px;
min-height: 500px;
padding: 50px;
}
#statistieken #leden #member-bar-chart {
min-width: 65%;
padding: 0 21px 20px 13px;
}
#statistieken #leden #table {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
border-left: 1px solid #b2b2b2;
}
#statistieken #leden .table-totals {
text-align: right;
padding: 20px 0;
}
#statistieken #leden .table-totals span {
margin-right: 50px;
float: none;
}
#statistieken #leden table {
width: 100%;
border-collapse: collapse;
}
#statistieken #leden table thead {
background-color: #dadada;
}
#statistieken #leden table thead th {
padding: 7px 10px;
border-bottom: 1px solid #b2b2b2;
}
#statistieken #leden table tbody tr:nth-child(odd) {
background-color: #f1f1f1;
}
#statistieken #leden table th,
#statistieken #leden table td {
padding: 7px 10px;
border-right: 1px solid #b2b2b2;
text-align: center;
height: 35px;
}
#statistieken #leden table th:last-child,
#statistieken #leden table td:last-child{
border-right: none;
}
#statistieken #leden .legenda{
margin-bottom: 40px;
padding-left: 28px;
}
/* /custom_modules/sepa/css/view.css */
.sepa a.submit {
margin-top: 0px; }
.sepa a.submit.green {
background-color: #96cd8f;
background-image: none;
border-radius: 5px; }
.sepa .form_row.white {
background-color: #fff;
margin-top: -20px;
padding-top: 20px; }
.sepa .form_row.white:nth-of-type(2n+1) {
background-color: #eee; }
.sepa .form_row.titles span {
font-weight: bold; }
.sepa .form_row .condition {
display: none;
position: relative; }
.sepa .form_row .filter {
margin-bottom: 4px;
overflow: auto; }
.sepa .form_row .filter .condition .equals-sign {
font-size: 16px;
margin-left: 10px;
margin-right: 10px; }
.sepa .form_row .filter .condition span.between {
float: left;
line-height: 22px;
margin-left: 10px;
margin-right: 10px; }
.sepa .form_row .filter a {
float: left;
height: 22px;
line-height: 22px;
margin-left: 4px;
margin-right: 5px;
text-align: center;
text-decoration: none;
width: 12px; }
.sepa .form_row .search-box {
display: none; }
.sepa .form_row .search-box a.submit {
margin-top: 30px; }
.sepa .search-box {
padding-bottom: 20px; }
.sepa .search-box label {
float: none;
display: block; }
.sepa .results .row {
overflow: hidden;
min-height: 82px;
border-top: 1px solid #cbcfd6;
line-height: 82px; }
.sepa .results .row:first-child {
border: none; }
.sepa .results .row img {
float: left;
margin-top: 23px;
margin-right: 20px; }
.sepa .results .row span.sepa_date {
width: 200px;
margin-right: 5px;
margin-top: -7px; }
.sepa .results .row span.sepa_date span {
line-height: normal;
margin-top: -31px;
font-size: 11px;
font-weight: normal;
color: #f47900; }
.sepa .results .row span.sepa_amount {
font-weight: normal;
width: 140px;
margin-right: 35px;
color: #0e7500; }
.sepa .results .row span.sepa_status {
color: #0e7500;
margin-right: 0px; }
.sepa .results .row span {
line-height: 82px;
float: left;
margin-right: 45px;
font-size: 12px;
font-weight: bold; }
.sepa .results .row em {
font-style: normal; }
.sepa .results .row button {
float: right; }
.sepa .buttons {
height: auto;
overflow: visible;
padding-bottom: 30px; }
.sepa .buttons a {
padding: 15px 30px;
line-height: 2;
border-style: solid;
border-width: 1px;
margin: 0 55px 0 20px;
text-decoration: none; }
.sepa .buttons a img {
vertical-align: middle; }
.sepa .buttons a.blue {
color: blue;
border-color: blue; }
.sepa .buttons a.red {
color: red;
border-color: red; }
.sepa .batch-form {
height: 100%;
margin: 0 22px 20px 22px;
float: left;
width: 240px; }
.sepa .batch-form .submit {
float: none;
display: inline-block;
margin-left: 0;
margin-top: 10px; }
.sepa .batch-form input {
margin-bottom: 14px; }
.sepa .batch-form h4 {
margin-top: 0; }
.sepa .batch-form label {
margin: 0; }
.sepa .batch-info {
height: 100%;
margin: 0 22px 20px 22px;
float: left;
width: 500px; }
.sepa .batch-info .submit {
float: none;
display: inline-block;
margin-left: 0;
margin-top: 10px; }
.sepa .batch-info input {
margin-bottom: 14px; }
.sepa .batch-info h4 {
margin-top: 0; }
.sepa .batch-info label {
margin: 0; }
.sepa.batch .form_row.white:nth-of-type(2n) {
background-color: #eee; }
.sepa.batch .form_row.white:nth-of-type(2n+1) {
background-color: #fff; }
.sepa.batch .form_row span {
float: left;
margin-left: 20px; }
.sepa.batch .form_row span:nth-child(1) {
width: 90px; }
.sepa.batch .form_row span:nth-child(2) {
width: 150px; }
.sepa.batch .form_row span:nth-child(3) {
width: 170px; }
.sepa.batch .form_row span:nth-child(4) {
width: 90px; }
.sepa.batch .form_row span:nth-child(5) {
width: 80px; }
.sepa.batch .form_row span:last-of-type {
margin-right: 20px; }
/*# sourceMappingURL=view.css.map */
/* /custom_modules/sepa/css/view-check.css */
form[name=sepa-check] {
margin: -22px;
}
form[name=sepa-check] * {
box-sizing: border-box;
overflow: hidden;
}
form[name=sepa-check] button {
background: #82aaf2;
color: white;
border: 1px solid black;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.25em;
height: 41px;
line-height: 2.5;
width: 11em;
cursor: pointer;
font-weight: bold;
}
form[name=sepa-check] button.red {
background: #f28282;
border-color: #cc6565;
}
form[name=sepa-check] .sepa-check-container {
padding: 30px;
background-color: #fff;
margin-bottom: 0px;
}
form[name=sepa-check] .sepa-check-container h2 {
margin-top: 0px;
font-size: 24px;
}
form[name=sepa-check] .sepa-check-container h2 i {
font-size: 1.2em;
}
form[name=sepa-check] .sepa-check-container p {
margin: 30px 0px;
}
form[name=sepa-check] .sepa-check-container .sepa-warnings {
float: left;
margin-right: 0;
width: 50%;
padding-right: 10px;
}
form[name=sepa-check] .sepa-check-container .sepa-warnings .sepa-warning {
cursor: pointer;
background-color: white;
border-radius: 5px;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
border-top: 1px solid #c4c4c4;
padding: 20px;
line-height: 18px;
margin-bottom: 5px;
}
form[name=sepa-check] .sepa-check-container .sepa-warnings .sepa-warning:first-of-type {
border-top: none;
}
form[name=sepa-check] .sepa-check-container .sepa-warnings .sepa-warning:hover {
opacity: 0.8;
}
form[name=sepa-check] .sepa-check-container .sepa-warnings .sepa-warning .sepa-user {
float: left;
width: 35%;
}
form[name=sepa-check] .sepa-check-container .sepa-warnings .sepa-warning .sepa-user span {
display: block;
}
form[name=sepa-check] .sepa-check-container .sepa-warnings .sepa-warning .sepa-user span:first-child {
color: #000;
}
form[name=sepa-check] .sepa-check-container .sepa-warnings .sepa-warning .sepa-user span:nth-child(2) {
color: #888;
}
form[name=sepa-check] .sepa-check-container .sepa-warnings .sepa-warning .sepa-user span:nth-child(3) {
color: #000;
font-weight: bold;
}
form[name=sepa-check] .sepa-check-container .sepa-warnings .sepa-warning .sepa-user-warnings {
float: left;
width: 65%;
display: flex;
justify-content: center;
flex-direction: column;
min-height: 54px;
}
form[name=sepa-check] .sepa-check-container .sepa-warnings .sepa-warning .sepa-user-warnings span {
display: block;
color: #f00;
}
form[name=sepa-check] .sepa-check-container .sepa-sum .sepa-sum-amount {
font-size: 21px;
color: #888;
margin-bottom: 60px;
}
form[name=sepa-check] .sepa-check-container .sepa-sum .sepa-check-force label {
display: block;
float: none;
}
form[name=sepa-check] .sepa-check-container .sepa-sum .sepa-check-force .custom-checkbox {
line-height: 21px;
}
form[name=sepa-check] p.remark {
display: none;
background-color: #d9d9d9;
color: #3c3c3c;
padding: 15px;
border-radius: 5px;
position: relative;
overflow: visible;
}
form[name=sepa-check] p.remark:before {
left: 22px;
top: -10px;
position: absolute;
height: 0px;
width: 0px;
content: "";
border-style: solid;
border-width: 0 16px 16px 16px;
border-color: transparent transparent #d9d9d9;
}
form[name=sepa-check] a.remark {
background-color: #888;
border-radius: 50%;
width: 21px;
height: 21px;
color: #fff;
float: left;
text-align: center;
position: absolute;
margin-left: 10px;
text-decoration: none;
}
form[name=sepa-check] a.remark.open {
opacity: 0.5;
}
form[name=sepa-check] .sepa-row-wrapper {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 0.5rem 0;
margin: 0.5rem 0;
}
/* .squaredThree */
.squaredThree {
position: relative;
float: left;
margin-right: 10px;
}
.squaredThree label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
border-radius: 4px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}
.squaredThree label:after {
content: "";
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
width: auto;
}
.squaredThree input[type=checkbox]:checked + label:after {
opacity: 1;
}
/* /custom_modules/configuratie/css/config.css */
@charset "UTF-8";
code {
background-color: #fff;
padding: 5px;
border: 1px solid #ccc;
color: #900;
font-size: 14px;
font-weight: bold;
margin: 0 5px;
font-style: italic;
}
.vert-tab-frame {
border: 1px solid #c4c4c4;
display: flex;
margin-bottom: 20px;
}
.vert-tab-frame .vert-tabs {
list-style: none;
padding: 0 0 20px 0;
margin: 0;
width: 235px;
background-color: #fff;
}
.vert-tab-frame .vert-tabs li {
border-color: #c4c4c4;
border-style: solid;
border-width: 0 1px 1px 0;
background-color: #f2f2f2;
}
.vert-tab-frame .vert-tabs li.selected {
background-color: #fff;
border-right: 1px solid #fff;
}
.vert-tab-frame .vert-tabs li a {
text-decoration: none;
color: #000;
text-transform: uppercase;
padding: 15px 20px;
display: inline-block;
width: 100%;
}
.vert-tab-frame .content {
flex: 1 0 auto;
margin: 0 !important;
background-color: #fff !important;
}
.sub-tabs {
width: 100%;
border-bottom: 1px solid #c4c4c4;
padding: 0 20px 15px 7px;
margin-bottom: 20px;
margin-top: 16px;
}
.sub-tabs a {
text-transform: uppercase;
font-size: 12px;
margin-right: 40px;
text-decoration: none;
color: #000;
line-height: 30px;
}
.sub-tabs a.selected {
font-weight: bold;
}
form.config {
box-sizing: border-box;
background-color: white;
margin: -34px -22px -22px -22px;
padding: 22px;
}
form.config * {
box-sizing: inherit;
}
form.config .form_row {
height: 50px;
padding: 0;
margin-top: -22px;
line-height: 1;
display: flex;
justify-content: end;
padding: 10px;
}
form.config .form_row button {
background: #f00;
width: 200px;
height: 30px;
color: white;
margin: 0 30px;
cursor: pointer;
font-weight: 700;
border-radius: 2px;
}
form.config .form_row button:hover {
background: #f33;
}
form.config .column-container {
background-color: #fff;
padding: 30px;
}
form.config .config2-content {
background-color: #fff;
padding: 22px;
margin-left: 20px;
width: 82%;
}
form.config .config2-columns {
display: flex;
overflow: hidden;
margin-left: -10px;
width: 100%;
}
form.config .config2-columns .config2-column {
background-color: #ededed;
margin-left: 10px;
flex: 1;
border: 1px solid #d9d9d9;
border-radius: 2px;
display: flex;
flex-direction: column;
position: relative;
}
form.config .config2-columns .config2-column:last-child {
border: none;
margin-left: 20px;
background-color: transparent;
max-width: 250px;
}
form.config .config2-columns .config2-column:last-child .fixed-save-btn {
position: fixed;
}
form.config .config2-columns .config2-column:last-child .fixed-save-btn p {
width: 280px;
}
@media screen and (max-width: 1286px) {
form.config .config2-columns .config2-column:last-child .fixed-save-btn p {
width: 200px;
}
form.config .config2-columns .config2-column:last-child .fixed-save-btn p br {
display: none;
}
}
form.config .config2-columns .config2-column h2 {
font-size: 22px;
}
form.config .config-title {
position: relative;
font-weight: bold;
margin-bottom: 6px;
width: 100%;
font-size: 16px;
}
form.config .config-title > .permission {
position: absolute;
right: 0;
text-transform: uppercase;
font-size: 10px;
color: transparent;
}
@media screen and (max-width: 1286px) {
form.config .config-title > .permission {
position: relative;
display: block;
margin-top: 4px;
}
}
form.config .config-title > .permission.admin {
color: #960404;
}
form.config .config-title > .permission:after {
content: " permission";
}
form.config .config-item {
padding: 20px 30px 30px;
border-bottom: 1px solid #d9d9d9;
}
form.config .config-item:nth-child(2n) {
background-color: rgba(0, 0, 0, 0.03);
}
form.config .config-item p .fa.fa-envelope {
margin-right: 5px;
}
form.config .config-item p .fa.fa-envelope + a {
color: #00f;
font-weight: bold;
text-decoration: none;
}
form.config .config-item p .fa.fa-envelope + a:hover {
text-decoration: underline;
}
form.config .config-item i.fas {
font-size: 24px;
margin-right: 5px;
vertical-align: middle;
padding: 0px 0 6px;
}
form.config .config-item:last-child {
border-bottom: none;
}
form.config .config-group {
background-color: #dddddd;
border: 1px solid #c7c7c7;
}
form.config .config-group .config-item {
border-color: #c7c7c7;
}
form.config .config-interaction {
width: 300px;
display: flex;
}
form.config .config-interaction.boolean {
margin-top: 30px;
}
form.config .config-interaction.wrap {
flex-wrap: wrap;
gap: 15px;
width: auto;
}
form.config .config-interaction div {
display: flex;
}
form.config .config-interaction div.wrap {
flex-wrap: wrap;
gap: 15px;
width: auto;
}
form.config .config-interaction #div_starttijdkeuze label {
width: 100%;
margin-bottom: -5px;
}
form.config .config-interaction .dagen span {
line-height: 38px;
}
form.config .config-input input, form.config .config-input select, form.config .config-input textarea {
border-color: #ccc;
height: auto;
margin-bottom: 9px;
padding: 10px;
flex: 1;
max-width: 100%;
width: auto;
}
form.config .config-input radio-item {
display: block;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
cursor: pointer;
}
form.config .config-input radio-item.selected {
background-color: antiquewhite;
}
form.config .config-input radio-item:not(.selected) *:not(input[type=radio]) {
opacity: 0.6;
pointer-events: none;
}
form.config .config-input radio-item select {
margin-bottom: 0;
}
form.config .config-input radio-item span {
white-space: nowrap;
line-height: 38px;
margin-left: 5px;
margin-right: 5px;
}
form.config .config-input radio-item input[type=radio] {
width: 40px;
cursor: pointer;
height: 18px;
padding: 20px;
margin: 10px -5px 0 -15px;
}
form.config textarea {
border-color: #ccc;
height: auto;
margin-bottom: 9px;
padding: 10px;
flex: 1;
max-width: 80%;
width: auto;
}
form.config button {
background: #82aaf2 none repeat scroll 0 0;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: white;
cursor: pointer;
height: 36px;
line-height: 2.5;
}
form.config .config-radio label {
border-radius: 5px 0px 0px 5px;
cursor: pointer;
flex: 1;
text-align: center;
background-color: #676767;
padding: 7px 5px;
border: 1px solid #676767;
border-left: none;
color: #fff;
margin-right: 0;
}
form.config .config-radio label:first-of-type {
border-left: 1px solid #a6a6a6;
}
form.config .config-radio label.red {
border-radius: 0px 5px 5px 0px;
}
form.config .config-radio input {
display: none;
}
form.config .config-radio input:checked + label {
background-color: #459604;
border-color: #459604;
}
form.config .config-radio input:checked + label.red {
background-color: #960404;
border-color: #960404;
}
form.config .config-desc {
/* max-height: 0;*/
overflow: hidden;
margin: 0 0 10px 0;
transition: all 0.3s;
flex: 0 1 100%;
-webkit-flex: 0 1 100%;
}
form.config .config-desc-toggle {
display: none;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #676767;
color: #fff;
line-height: 25px;
font-size: 13px;
text-align: center;
font-weight: bold;
margin-top: 7px;
margin-left: 15px;
cursor: pointer;
}
form.config .config-desc-toggle.open {
background-color: #d4d4d4;
}
form.config .config-desc-toggle.open + .config-desc {
max-height: 400px;
margin: 12px 0;
}
form.config .config-desc a {
color: #000;
font-weight: bold;
}
form.config .config-desc i + a {
color: #00f;
text-decoration: none;
}
form.config .config-desc i + a:hover {
text-decoration: underline;
}
.touchMultiSelect {
cursor: pointer;
margin-left: 0;
margin-top: 0;
padding: 5px 20px 2px 5px;
background-color: #fff;
border: 1px solid #a6a6a6;
flex: 1;
position: relative;
}
.touchMultiSelect:after {
content: "⌄";
position: absolute;
top: -10px;
right: 5px;
font-family: sans-serif;
font-size: 30px;
font-weight: bold;
color: #a6a6a6;
}
.touchMultiSelect li {
list-style: none;
display: none;
padding: 5px;
border: 1px solid #a6a6a6;
border-radius: 2px;
color: #a6a6a6;
margin-bottom: 3px;
margin-right: 5px;
}
.touchMultiSelect li.selected {
display: inline-block;
background-color: #a6a6a6;
color: white;
padding: 5px;
}
.touchMultiSelect.opened:after {
content: "⌃";
top: 5px;
}
.touchMultiSelect.opened li {
display: inline-block;
margin-bottom: 5px;
}
.top-content {
margin-bottom: 30px;
}
.top-content p {
padding-left: 78px;
min-height: 45px;
font-size: 12px;
line-height: 18px;
position: relative;
}
.top-content:after {
content: "";
background-image: url("/dexos/skins/crossbit/desktop_icons/desktop_icon_config_hover.png");
background-repeat: no-repeat;
background-position: 10px top;
background-size: 45px;
opacity: 0.5;
width: 65px;
height: 65px;
top: 100px;
left: 55px;
position: absolute;
z-index: 1;
opacity: 0.6;
}
/*# sourceMappingURL=config.css.map */
/* /custom_modules/_skin/css/sbm-skin.css */
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Jun 12, 2018, 5:25:40 PM
Author : Dave Spaans
*/
html,
body {
/*background-image: none;*/
background-color: white;
font-family: "Roboto", sans-serif;
/* background-color: #e9e9e9; /* 233,233,233 */
}
body.entered::before {
width: 100%;
height: 100%;
background-color: white;
/* background-color: #e9e9e9; /* 233,233,233 */
content: " ";
top: 0;
left: 0;
position: fixed;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Jun 16, 2018, 4:43:36 PM
Author : Dave Spaans
*/
#webspace_meter {
display: none;
}
#header {
padding-left: 140px;
box-sizing: border-box;
transition: padding 0.2s;
}
body.dock_wrapped #header {
padding-left: 62px;
}
#header .body_header {
background-image: none;
background-color: #332d2d;
height: 58px;
line-height: 58px;
width: calc(100% - 140px);
box-sizing: border-box;
padding: 0 8px 0 20px;
transition: width 0.2s;
}
body.dock_wrapped #header .body_header {
width: calc(100% - 62px);
}
#header .body_header > li {
color: white;
font-size: 14px;
text-transform: uppercase;
height: 100%;
line-height: 58px;
background-position: 8px center !important;
}
#header .body_header > li span {
margin: 0 20px 0 20px;
}
#header .body_header > li:hover {
background-color: #333;
color: white;
}
#header .body_header > li:hover#main_menu {
background-image: url("/dexos/skins/crossbit/header_images/toothwheel_white.gif");
}
#header .body_header > li:hover span {
background-image: url("/dexos/skins/crossbit/header_images/dropdown_arrow_white.gif");
}
#header .body_header > li > a {
height: 100%;
padding: 0 20px;
line-height: 58px;
}
#header .body_header > li a.partnerportal {
color: #fff;
text-decoration: none;
line-height: 58px;
position: relative;
}
#header .body_header > li a.partnerportal .fa {
vertical-align: sub;
margin-right: 5px;
font-size: 22px;
}
#header .body_header > li a.partnerportal.selected {
background-color: black;
}
#header .body_header > li a.partnerportal badge {
background-color: red;
font-size: 12px;
border-radius: 50%;
width: 19px;
height: 19px;
line-height: 19px;
text-align: center;
font-weight: bold;
position: absolute;
top: 10px;
right: 10px;
}
#header .body_header > li i.fa {
margin-right: 10px;
}
#header .body_header > li#day {
margin: 0;
height: 100%;
}
#header .body_header > li#day:hover {
background-color: #333;
}
#header .body_header > li#login_menu {
float: right;
}
#header .body_header > li#login_menu > ul {
margin-top: -2px;
}
#header .body_header > li ul {
background-color: #333;
box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.5);
}
#header .body_header > li ul li {
color: white;
padding: 0;
text-transform: none;
margin: 0;
font-size: 12px;
background-image: none;
height: auto;
}
#header .body_header > li ul li a {
color: white;
height: auto;
text-indent: 21px;
line-height: 46px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
#header .body_header > li ul li:hover {
background-color: transparent !important;
}
#desktop {
margin-left: 305px;
transition: margin 0.2s;
}
body.dock_wrapped #desktop {
margin-left: 142px;
}
#desktop .buttons {
margin-top: 110px;
}
#desktop .buttons a {
background-image: none;
color: white;
background-color: #332d2d;
}
#desktop .buttons a:hover {
background-image: none;
color: white;
background-color: #333;
}
#desktop .buttons a:hover span {
color: white;
}
ul.body_header li ul {
/*display:block;*/
}
.loading_transparent {
background-image: none;
background-color: rgba(255, 255, 255, 0.5);
/* background-color: rgba(233,233,233,.5); /* 233,233,233 */
opacity: 1;
}
.loading_transparent .lds-facebook {
display: inline-block;
position: fixed;
width: 64px;
height: 64px;
left: 50%;
top: 50%;
margin-top: 30px;
margin-left: 112px;
transform: translate(-50%, -50%);
}
body.dock_wrapped .loading_transparent .lds-facebook {
margin-top: 30px;
margin-left: 31px;
}
.loading_transparent .lds-facebook div {
display: inline-block;
position: absolute;
left: 6px;
width: 13px;
background: #000;
animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
border: 1px solid white;
}
.loading_transparent .lds-facebook div:nth-child(1) {
left: 6px;
animation-delay: -0.24s;
}
.loading_transparent .lds-facebook div:nth-child(2) {
left: 26px;
animation-delay: -0.12s;
}
.loading_transparent .lds-facebook div:nth-child(3) {
left: 45px;
animation-delay: 0;
}
@keyframes lds-facebook {
0% {
top: 6px;
height: 51px;
}
50%, 100% {
top: 19px;
height: 26px;
}
}
.overlay {
width: calc(100% - 140px);
margin-left: 140px;
transition: margin 0.2s, width 0.2s;
}
body.dock_wrapped .overlay {
width: calc(100% - 62px);
margin-left: 62px;
}
.overlay .dialog .container {
min-height: 80vh;
border-radius: 0;
background-color: white;
border-color: #ccc;
background-color: transparent;
border: none;
padding-bottom: 5px;
}
.overlay .dialog .container > h1 {
background-color: transparent;
color: #333;
}
.overlay .dialog .container > h1 a {
color: #333;
font-size: 14px;
/*&.close_window{
display: none;
}*/
}
.overlay .dialog .container > h1 a.close_window, .overlay .dialog .container > h1 a.reload_window {
color: black;
background-image: none;
margin-right: 15px;
margin-left: 15px;
padding: 0;
}
.overlay .dialog .container.ultra, .overlay .dialog .container.sultra {
min-width: 1250px;
width: calc(100vw - 100px);
max-width: 1650px;
}
.overlay .dialog .container.ultra .ultra, .overlay .dialog .container.ultra .sultra, .overlay .dialog .container.sultra .ultra, .overlay .dialog .container.sultra .sultra {
width: calc(80vw - 100px);
}
.overlay .dialog .container.ultra .ultra .ultra, .overlay .dialog .container.ultra .ultra .sultra, .overlay .dialog .container.ultra .sultra .ultra, .overlay .dialog .container.ultra .sultra .sultra, .overlay .dialog .container.sultra .ultra .ultra, .overlay .dialog .container.sultra .ultra .sultra, .overlay .dialog .container.sultra .sultra .ultra, .overlay .dialog .container.sultra .sultra .sultra {
width: calc(60vw - 100px);
}
.overlay .dialog .container.ultra .ultra .ultra .ultra, .overlay .dialog .container.ultra .ultra .ultra .sultra, .overlay .dialog .container.ultra .ultra .sultra .ultra, .overlay .dialog .container.ultra .ultra .sultra .sultra, .overlay .dialog .container.ultra .sultra .ultra .ultra, .overlay .dialog .container.ultra .sultra .ultra .sultra, .overlay .dialog .container.ultra .sultra .sultra .ultra, .overlay .dialog .container.ultra .sultra .sultra .sultra, .overlay .dialog .container.sultra .ultra .ultra .ultra, .overlay .dialog .container.sultra .ultra .ultra .sultra, .overlay .dialog .container.sultra .ultra .sultra .ultra, .overlay .dialog .container.sultra .ultra .sultra .sultra, .overlay .dialog .container.sultra .sultra .ultra .ultra, .overlay .dialog .container.sultra .sultra .ultra .sultra, .overlay .dialog .container.sultra .sultra .sultra .ultra, .overlay .dialog .container.sultra .sultra .sultra .sultra {
width: calc(40vw - 100px);
}
.overlay .dialog .container.sultra {
min-width: initial;
/*
@media screen and (min-width: 1186px) {
width: initial; //Is nodig voor de ledentab op ipad
//op ipad moet dit niet toegepast worden, mediaquerie??
}*/
}
.overlay .dialog .container.sultra .sultra.fs {
width: calc(100vw - 100px) !important;
min-width: 916px !important;
}
.overlay .dialog .container .content {
border-radius: 0;
border-color: #ccc;
background-color: white;
}
.overlay .dialog .container .content:blank {
visibility: hidden;
}
.overlay .dialog .container .container {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.overlay .dialog .container .inner_overlay {
box-sizing: border-box;
background-image: none;
padding: 15px;
background-color: transparent;
/*
margin-left: -39px;
padding-right: 63px;
margin-top: -40px;
border-radius: 0;
*/
}
.overlay .dialog .container .inner_overlay::before {
content: " ";
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
}
.overlay .dialog .container .inner_overlay .inner_overlay {
background-color: rgba(0, 0, 0, 0.5);
padding: 0;
border-radius: 0;
}
.overlay .dialog .container .inner_overlay .inner_overlay::before {
display: none;
}
.overlay .dialog .container .inner_overlay .dialog .container {
background-color: #e9e9e9;
}
.overlay .dialog .container .inner_overlay .dialog .container > h1 {
height: 50px;
line-height: 50px;
color: white;
background: #222;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.overlay .dialog .container .inner_overlay .dialog .container > h1 a {
line-height: 50px;
}
.overlay .dialog .container .inner_overlay .dialog .container > h1 a.close_window, .overlay .dialog .container .inner_overlay .dialog .container > h1 a.reload_window {
color: white;
}
.overlay .dialog .container .inner_overlay .dialog .container > h1 a.close_window {
display: inline;
}
.overlay .dialog .container .inner_overlay .dialog .container > h1 a.close_window::after {
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: 10px;
vertical-align: top;
visibility: visible;
font-size: 18px;
border: 1px solid white;
padding: 3px 8px;
border-radius: 10px;
}
.overlay .dialog .container .inner_overlay .dialog .container > h1 a.close_window:hover {
text-decoration: none;
opacity: 0.85;
}
.overlay .dialog .container .inner_overlay .loading_transparent .lds-facebook {
margin: 0;
}
.overlay > .dialog > .container {
padding-left: 30px;
padding-right: 30px;
}
.overlay > .dialog > .container > h1 {
font-size: 32px;
margin-bottom: 30px;
}
.overlay > .dialog > .container.sultra {
width: initial; /* Nodig voor ipad voor ledentab */
}
.dock_categories {
height: 100%;
width: 140px;
transition: width 0.2s;
background-color: #fff;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
text-align: left;
z-index: 39;
top: -2px;
padding: 0.5rem;
box-sizing: border-box;
overflow: hidden;
overflow-y: hidden;
overflow-y: auto;
-ms-overflow-style: thin;
scrollbar-width: thin;
scrollbar-color: #cecece white;
}
.dock_categories .dock_logo {
transition: width 0.2s, margin 0.2s;
text-align: center;
padding: 0.75rem;
height: 125px;
}
@media screen and (max-height: 850px) {
.dock_categories .dock_logo {
height: 62px;
}
}
.dock_categories .dock_logo img {
max-width: 150px;
max-height: 150px;
transition: width 0.2s, height 0.2s;
width: 100%;
height: 100%;
object-fit: contain;
}
.dock_categories a {
color: black;
display: block;
font-size: 12px;
margin: 0;
font-weight: 500;
text-indent: unset;
text-transform: capitalize;
background-image: none;
border-bottom: 1px solid white;
white-space: nowrap;
text-align: center;
border-radius: 4px;
padding: 1.5rem;
padding-bottom: 0.063rem;
margin-bottom: .36rem;
}
.dock_categories a.highlight {
background-color: #f1f1f1;
position: relative;
}
.dock_categories a.highlight span::after {
background-color: red;
content: attr(data-badge);
font-size: 10px;
font-weight: bold;
color: white;
position: absolute;
top: 9px;
line-height: normal;
padding: 2px 5px;
border-radius: 7px;
}
.dock_categories a .fa, .dock_categories a .fas {
display: block;
margin-left: 50%;
transform: translateX(-50%);
width: 30px;
text-align: center;
font-size: 24px;
vertical-align: middle;
margin-bottom: -8px;
}
@media screen and (max-height: 850px) {
.dock_categories a .fa, .dock_categories a .fas {
font-size: 18px;
}
}
.dock_categories a.pin {
display: none;
font-weight: normal;
font-style: italic;
font-size: 12px;
}
.dock_categories a.pin .fa {
transform: rotate(45deg);
padding-left: 5px;
width: auto;
margin-right: 23px;
font-weight: bold;
}
.dock_categories a.pin.selected {
background-color: #222;
}
.dock_categories a.pin.selected .fa {
transform: none;
width: 15px;
}
.dock_categories a:hover {
color: black;
opacity: 0.8;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
}
.dock_categories a.selected {
color: white;
background-image: none;
background-color: #332d2d;
}
.dock_categories a.selected:hover {
opacity: 1;
}
body.dock_wrapped .dock_categories {
width: 62px;
}
body.dock_wrapped .dock_categories .dock_logo {
margin-top: 20px;
margin-bottom: 50px;
}
body.dock_wrapped .dock_categories .dock_logo img {
width: 60%;
}
body.dock_wrapped .dock_categories a .fa, body.dock_wrapped .dock_categories a .fas {
margin-right: 14px;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Jun 16, 2018, 4:43:36 PM
Author : Dave Spaans
*/
.overlay .dialog {
width: auto;
min-width: 100%;
}
.overlay .dialog .container .inner_overlay .dialog {
min-width: auto;
}
@media screen and (max-width: 1286px) {
.container .content div.tab-frame ul.tabs li {
width: auto;
font-size: 11px;
}
}
@media screen and (max-width: 1286px) {
form.sbm-bo .sbm-container .sbm-formgroup-col {
width: 100% !important;
}
}
form.sbm-bo .sbm-container .options button {
margin-bottom: 15px;
}
@media screen and (max-width: 1286px) {
.overlay .dialog .container.xl,
.overlay .dialog .container.xxl {
width: calc(80vw - 100px);
}
}
/*# sourceMappingURL=sbm-skin.css.map */
/* /custom_modules/abonnementen/css/sbm-forms.css */
.sbm-bo {
margin: -22px; }
.sbm-bo * {
box-sizing: border-box;
overflow: hidden; }
.sbm-bo .extra-form {
overflow: visible; }
.sbm-bo .extra-form .actions.new {
overflow: visible; }
.sbm-bo .extra-form label {
left: 0px; }
.sbm-bo .extra-form input[type="text"] {
height: 40px;
margin: 20px 10px 20px 0; }
.sbm-bo .extra-form input[type="text"].search {
margin: 20px 10px 20px 0; }
.sbm-bo .sbm-ck * {
overflow: initial; }
.sbm-bo .sbm-ck .cke_top {
overflow: hidden; }
.sbm-bo a.link {
color: #33a3e3;
font-weight: bold; }
.sbm-bo button {
background: #82aaf2;
color: white;
border: 1px solid black;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.25em;
height: 40px;
/* min-width: 11em; */
width: auto;
padding: 0px 20px;
cursor: pointer;
font-weight: bold; }
.sbm-bo button i {
vertical-align: middle;
margin-top: -3px;
margin-right: 5px;
font-size: 15px; }
.sbm-bo button.red {
background: #f28282;
border-color: #cc6565; }
.sbm-bo button.black {
background: #000;
border-color: #111; }
.sbm-bo button.grey {
background: #4a4a4a;
border-color: #111; }
.sbm-bo button.warning i {
font-size: 18px; }
.sbm-bo button:hover {
opacity: 0.9; }
.sbm-bo p.sbm-error {
background-color: #ffdee2;
color: #aa0000;
border: 1px solid #aa0000;
margin: 0 0 20px 0;
padding: 20px;
background-image: url("/dexos/images/warning.gif");
background-position: 20px center;
background-repeat: no-repeat;
padding-left: 65px;
font-weight: bold; }
.sbm-bo p.sbm-success {
background-color: #f0f6dd;
color: #769618;
border: 1px solid #769618;
margin: 0 0 20px 0;
padding: 20px;
background-image: url("/dexos/images/succes.gif");
background-position: 20px center;
background-repeat: no-repeat;
padding-left: 65px;
font-weight: bold; }
.sbm-bo p.sbm-warning {
background-color: #fff2c1;
color: #332c0d;
border: 1px solid #dbd4bf;
margin: 0 0 20px 0;
padding: 20px;
padding-left: 65px;
font-weight: bold;
position: relative; }
.sbm-bo p.sbm-warning::before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 65px;
height: 100%;
background-image: url("/dexos/images/warning.gif");
background-position: 20px center;
background-repeat: no-repeat;
opacity: 0.3;
filter: grayscale(100%); }
.sbm-bo p.sbm-warning a {
color: red; }
.sbm-bo .sbm-container {
padding: 30px;
background-color: #fff;
margin-bottom: 0px; }
.sbm-bo .sbm-container .blok-grijs {
background-color: #e8e8e8;
padding: 25px; }
.sbm-bo .sbm-container .blok-grijs hr {
border: none;
border-top: 1px solid #d6d6d6;
margin-bottom: 14px;
margin-top: 11px; }
.sbm-bo .sbm-container .blok-grijs.samengevoegd {
margin-top: -70px; }
.sbm-bo .sbm-container .kolomlijst {
column-count: 2; }
.sbm-bo .sbm-container .kolomlijst span {
display: block; }
.sbm-bo .sbm-container .right {
float: right !important;
position: absolute;
right: 0; }
.sbm-bo .sbm-container h2 {
margin-top: 0px;
font-size: 24px; }
.sbm-bo .sbm-container p {
margin: 30px 0px; }
.sbm-bo .sbm-container .hidden {
display: none; }
.sbm-bo .sbm-container label {
float: none;
width: auto;
display: block;
margin-bottom: 4px; }
.sbm-bo .sbm-container label i {
font-weight: normal; }
.sbm-bo .sbm-container .sbm-formgroup h2 {
font-size: 18px;
border-bottom: 1px solid #c9c9c9;
padding-bottom: 15px;
overflow: visible;
line-height: 24px; }
.sbm-bo .sbm-container .sbm-formgroup h2 i {
margin-right: 5px;
overflow: visible;
padding: 2px 0; }
.sbm-bo .sbm-container .sbm-formgroup h2 span {
float: right;
font-size: 0.85rem;
padding: 3px 1rem 0; }
.sbm-bo .sbm-container .sbm-formgroup-row {
overflow: hidden; }
.sbm-bo .sbm-container .sbm-formgroup-row .sbm-formrow {
width: 50%;
float: left; }
.sbm-bo .sbm-container .sbm-formgroup-row h2 {
font-size: 18px;
border-bottom: 1px solid #c9c9c9;
padding-bottom: 15px;
overflow: visible;
line-height: 24px; }
.sbm-bo .sbm-container .sbm-formgroup-row h2 i {
margin-right: 5px;
overflow: visible; }
.sbm-bo .sbm-container .sbm-formgroup-col {
width: calc(50% - 40px);
margin-right: 40px;
margin-bottom: 22px;
float: left;
line-height: 20px; }
.sbm-bo .sbm-container .sbm-formgroup-col:last-of-type {
margin-right: 0; }
.sbm-bo .sbm-container .sbm-formgroup-col.bb {
border-bottom: 1px solid #ddd;
padding-bottom: 15px; }
.sbm-bo .sbm-container .sbm-formgroup-col.stretch {
width: auto;
margin: initial;
float: none;
margin-bottom: 20px; }
.sbm-bo .sbm-container .sbm-formgroup-col .logs {
padding: 0 20px 20px;
background: #eee;
border-radius: 10px;
margin-top: 10px;
overflow: hidden; }
.sbm-bo .sbm-container .sbm-formgroup-col .logs > div {
padding-right: 130px;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
padding-top: 21px;
margin: 0; }
.sbm-bo .sbm-container .sbm-formgroup-col .logs > div > span {
padding-top: 0 !important;
line-height: normal !important; }
.sbm-bo .sbm-container .sbm-formgroup-col .logs > div > span:last-child {
color: white !important;
background-color: black;
border-radius: 10px;
font-size: 11px;
padding: 2px 7px !important;
font-weight: bold;
top: 50%;
transform: translateY(-50%); }
.sbm-bo .sbm-container .sbm-formgroup-col .logs > div:last-child {
border-bottom: none;
padding-bottom: 0; }
.sbm-bo .sbm-container .sbm-formgroup-col .logs > div:last-child > span:last-child {
margin-top: 7px; }
.sbm-bo .sbm-container .sbm-formgroup-col h2 {
font-size: 18px;
border-bottom: 1px solid #c9c9c9;
padding-bottom: 15px;
overflow: visible;
line-height: 24px; }
.sbm-bo .sbm-container .sbm-formgroup-col h2 i {
margin-right: 5px;
vertical-align: top;
overflow: visible; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow {
display: flex;
margin-top: 2px;
overflow: hidden;
margin-bottom: 5px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .is-disabled {
background-color: #f8f8f8; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .calender-ico {
margin-left: -30px;
margin-top: 1px;
transform: scale(0.7); }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .datum-invoer {
flex-grow: 1; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .datum-invoer input {
width: 100%;
box-sizing: border-box;
height: 30px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .member-select-ico {
color: grey;
margin-left: -24px;
margin-top: 8px;
margin-right: 7px;
width: 20px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .ico-lock {
margin-left: 10px;
margin-top: 8px;
display: inline-block;
cursor: pointer;
color: #f28282; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .ico-lock:hover {
color: darkred; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .ico-lock i {
position: unset !important;
margin: 0 !important; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .delete-file {
margin-top: 12px;
display: inline-block;
cursor: pointer; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow #lbl_bestandsnaamUpload {
color: darkred;
line-height: 40px;
width: auto;
min-width: auto; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow div.sbm-image-container {
padding: 20px;
border: 1px solid lightgrey;
width: 100%;
text-align: center; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow label {
width: 180px;
min-width: 180px;
float: left;
line-height: 30px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow label.breder {
width: 280px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow label a.remark {
line-height: 19px;
width: 17px;
height: 17px;
margin-top: 0;
opacity: 0.8; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow label a.remark--alert {
color: #888;
background-color: unset; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow label a.remark--alert i {
font-weight: 900; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow.wrap label {
line-height: 20px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow span:not(.cke_reset_all):not(.cke_toolbox):not(.cke_toolbar):not(.cke_toolbar_start
):not(.cke_toolgroup):not(.cke_button_label) {
float: left;
line-height: 18px;
padding-top: 7px;
color: #646464; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow span:not(.cke_reset_all):not(.cke_toolbox):not(.cke_toolbar):not(.cke_toolbar_start
):not(.cke_toolgroup):not(.cke_button_label).input-replacement {
/*display: none;*/ }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .fa-pencil {
position: absolute;
right: 0px;
width: 62px;
margin-top: 8px;
color: #646464;
cursor: pointer;
opacity: 0.5;
overflow: visible; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .fa-pencil:hover {
opacity: 1; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .fa-pencil + * {
display: none; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow input,
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow select,
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow textarea {
float: left;
width: 180px;
padding: 5px 8px;
flex-grow: 1;
margin-bottom: 0;
margin-top: 0px;
margin-right: 1px;
/* rechter lijn fix */ }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow textarea {
margin-bottom: 4px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow textarea.large {
min-height: 190px;
margin-bottom: 20px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow .sbm-ck {
flex-grow: 1;
margin-right: 1px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow select {
padding: 3px 5px;
width: 186px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow.vragenlijst {
margin-bottom: 2px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow.vragenlijst > label {
line-height: 29px;
background-color: #e0e0e0;
padding: 10px 3px 10px 10px;
margin: 0 2px 0 0;
box-sizing: content-box;
margin-right: 2px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow.vragenlijst > label em {
vertical-align: middle;
display: inline-block;
line-height: normal; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow.vragenlijst .antwoorden {
display: flex; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow.vragenlijst .antwoorden label {
font-weight: normal;
background-color: #eee;
padding: 10px 15px;
margin: 0 2px 0 0; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow table.productlijst {
width: 100%; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow table.productlijst td {
padding: 20px;
vertical-align: top;
background-color: #f0f0f0;
position: relative; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow table.productlijst td strong {
display: block; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow table.productlijst td span {
padding: 0 !important; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow table.productlijst td:first-child {
width: 50px; }
.sbm-bo .sbm-container .sbm-formgroup-col .sbm-formrow table.productlijst td:first-child input {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); }
.sbm-bo .sbm-container .sbm-formgroup-col.small .sbm-formrow label {
line-height: 18px;
padding-top: 7px; }
.sbm-bo .sbm-container .sbm-formgroup-col.input-xl > div:not(.blok-grijs).sbm-formrow input,
.sbm-bo .sbm-container .sbm-formgroup-col.input-xl > div:not(.blok-grijs).sbm-formrow select {
width: 234px; }
.sbm-bo .sbm-container .sbm-formgroup-col.input-xl > div:not(.blok-grijs).sbm-formrow textarea {
width: 237px;
min-height: 80px; }
.sbm-bo .sbm-container .sbm-formgroup-col.input-xl > div:not(.blok-grijs).sbm-formrow select {
width: 241px; }
.sbm-bo .sbm-container .sbm-formgroup-col.input-xl > div.blok-grijs.sbm-formrow input,
.sbm-bo .sbm-container .sbm-formgroup-col.input-xl > div.blok-grijs.sbm-formrow select {
width: 100%; }
.sbm-bo .sbm-container .sbm-formrow {
margin-bottom: 22px;
position: relative; }
.sbm-bo .sbm-container .sbm-formrow div {
overflow: visible; }
@media screen and (max-width: 1186px) {
.sbm-bo .sbm-container .sbm-formrow div {
margin-right: 1px;
/* rechter lijn fix */ } }
.sbm-bo .sbm-container .sbm-formrow__radio-wrap {
display: flex;
flex-flow: row;
justify-content: space-evenly; }
.sbm-bo .sbm-container .sbm-formrow__radio-wrap label {
margin-left: 10px; }
.sbm-bo .sbm-container .sbm-formrow.column {
display: flex;
flex-flow: column; }
.sbm-bo .sbm-container .sbm-formrow.column input,
.sbm-bo .sbm-container .sbm-formrow.column select,
.sbm-bo .sbm-container .sbm-formrow.column textarea {
width: calc(100% - 20px); }
.sbm-bo .sbm-container .sbm-formrow.wrap {
flex-direction: column;
margin-bottom: 20px; }
.sbm-bo .sbm-container .sbm-formrow.wrap label {
line-height: 20px; }
.sbm-bo .sbm-container .sbm-formrow.extra-margin {
min-height: 140px;
margin-bottom: 20px; }
.sbm-bo .sbm-container .sbm-formrow.bb {
border-bottom: 1px solid #c9c9c9;
padding-bottom: 15px; }
.sbm-bo .sbm-container .sbm-formrow.bt {
border-top: 1px solid #c9c9c9;
padding-top: 15px; }
.sbm-bo .sbm-container .sbm-formrow input,
.sbm-bo .sbm-container .sbm-formrow select,
.sbm-bo .sbm-container .sbm-formrow textarea {
background-color: white;
padding: 7px;
box-sizing: content-box;
border: 1px solid #dfdfdf;
font-family: arial, ubuntu;
font-size: 12px;
margin-bottom: 0;
margin-top: 0px; }
.sbm-bo .sbm-container .sbm-formrow .embed {
display: block;
color: grey;
padding: 10px;
max-height: 200px;
margin: 0 0 40px;
overflow-y: auto;
background-color: #efefef;
width: calc(100% - 17px);
border-color: #ccc;
float: none;
font-size: 11px; }
.sbm-bo .sbm-container .sbm-formrow textarea {
margin-bottom: 4px;
min-height: 80px;
outline: none;
resize: vertical; }
.sbm-bo .sbm-container .sbm-formrow input[type="checkbox"],
.sbm-bo .sbm-container .sbm-formrow input[type="radio"] {
width: auto !important;
margin-top: 3px;
margin-left: 0; }
.sbm-bo .sbm-container .sbm-formrow .tinymce {
width: 430px; }
.sbm-bo .sbm-container .sbm-formrow .radio .sbm-radio-option {
overflow: hidden;
clear: both;
height: 30px; }
.sbm-bo .sbm-container .sbm-formrow .radio input {
width: auto !important; }
.sbm-bo .sbm-container .sbm-formrow .radio label {
width: auto;
/*line-height: 24px;*/
margin: 0 0 0 5px; }
.sbm-bo .sbm-container .sbm-formrow .radio label a.remark {
margin-top: 6px; }
.sbm-bo .sbm-container .sbm-formrow .calender-ico {
margin-left: -32px;
margin-top: 3px;
transform: scale(0.8); }
.sbm-bo .sbm-container .sbm-formrow p.error {
background-color: #ffdee2;
color: #aa0000;
border: 1px solid #aa0000;
margin: 0 0 20px 0;
padding: 20px;
background-image: url("/dexos/images/warning.gif");
background-position: 20px center;
background-repeat: no-repeat;
padding-left: 65px;
font-weight: bold; }
.sbm-bo .sbm-container .sbm-formrow p.success {
background-color: #f0f6dd;
color: #769618;
border: 1px solid #769618;
margin: 0 0 20px 0;
padding: 20px;
background-image: url("/dexos/images/succes.gif");
background-position: 20px center;
background-repeat: no-repeat;
padding-left: 65px;
font-weight: bold; }
.sbm-bo .sbm-container .sbm-formrow p.warning {
background-color: #fff2c1;
color: #332c0d;
border: 1px solid #dbd4bf;
margin: 0 0 20px 0;
padding: 20px;
padding-left: 65px;
font-weight: bold;
position: relative; }
.sbm-bo .sbm-container .sbm-formrow p.warning::before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 65px;
height: 100%;
background-image: url("/dexos/images/warning.gif");
background-position: 20px center;
background-repeat: no-repeat;
opacity: 0.3;
filter: grayscale(100%); }
.sbm-bo .sbm-container .sbm-formrow p.warning a {
color: red; }
.sbm-bo .sbm-container .sbm-formrow .plugin {
border: 1px solid #dfdfdf; }
.sbm-bo .sbm-container .sbm-formrow .plugin.sporten {
width: 100%;
overflow: hidden;
column-count: 3;
padding: 20px; }
@media screen and (max-width: 1186px) {
.sbm-bo .sbm-container .sbm-formrow .plugin.sporten {
column-count: 2; } }
.sbm-bo .sbm-container .sbm-formrow .plugin.sporten .radio {
float: none;
overflow: hidden; }
.sbm-bo .sbm-container .sbm-formrow .plugin.sporten .radio label {
line-height: 31px;
margin-left: 22px; }
.sbm-bo .sbm-container .sbm-formrow .image img {
max-width: 209px;
max-height: 420px;
min-height: 100px;
min-width: 209px;
border: 1px solid #dfdfdf; }
.sbm-bo .sbm-container .sbm-formrow .image a.submit {
background: none;
background-color: #666;
height: 30px;
line-height: 30px; }
.sbm-bo .sbm-container .sbm-formrow .image a.submit:first-of-type {
background-color: #33a3e3;
margin-bottom: 5px; }
.sbm-bo .sbm-container .sbm-formrow.valuta span:first-of-type {
margin-left: -20px; }
.sbm-bo .sbm-container .sbm-formrow.valuta span {
margin-right: 3px;
margin-left: -2px; }
.sbm-bo .sbm-container .sbm-formrow.valuta input {
width: 30px !important; }
.sbm-bo .sbm-container .sbm-formrow.valuta input:first-of-type {
margin-right: 5px;
width: 50px !important; }
.sbm-bo .sbm-container .sbm-formrow.tijd span:first-of-type {
margin-left: -7px; }
.sbm-bo .sbm-container .sbm-formrow.tijd span {
margin-right: 3px;
margin-left: -2px; }
.sbm-bo .sbm-container .sbm-formrow.tijd input {
width: 20px !important; }
.sbm-bo .sbm-container .sbm-formrow.tijd input:first-of-type {
margin-right: 11px;
width: 20px !important; }
.sbm-bo .sbm-container .sbm-formrow ol {
-moz-column-count: 2;
-moz-column-gap: 40px;
-webkit-column-count: 1;
-webkit-column-gap: 40px;
column-count: 2;
column-gap: 40px;
padding: 0 0 0 20px;
color: #646464;
width: 100%; }
.sbm-bo .sbm-container .sbm-formrow ol.one-column {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1; }
.sbm-bo .sbm-container .sbm-formrow ol.unhide .hidden {
display: list-item; }
.sbm-bo .sbm-container .sbm-formrow ol li {
overflow: visible;
margin-bottom: 5px; }
.sbm-bo .sbm-container .sbm-formrow ol li a {
width: 110px;
vertical-align: bottom;
display: inline-block;
color: #646464;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.sbm-bo .sbm-container .sbm-formrow ol li a:hover {
text-decoration: underline; }
.sbm-bo .sbm-container .sbm-formrow ol li span {
padding: 1px 5px !important;
font-size: 10px;
font-weight: bold;
color: #fff !important;
border-radius: 5px;
float: none !important;
margin-left: 5px; }
.sbm-bo .sbm-container .sbm-formrow ol li.afgemeld {
color: #aa0000; }
.sbm-bo .sbm-container .sbm-formrow ol li.afgemeld a {
color: #aa0000; }
.sbm-bo .sbm-container .sbm-formrow ol li.afgemeld span {
background-color: #aa0000; }
.sbm-bo .sbm-container .sbm-formrow ol li.wachtlijst {
color: #33a3e3; }
.sbm-bo .sbm-container .sbm-formrow ol li.wachtlijst a {
color: #33a3e3; }
.sbm-bo .sbm-container .sbm-formrow ol li.wachtlijst span {
background-color: #33a3e3; }
.sbm-bo .sbm-container .sbm-formrow ol li.proefles {
color: #4dbb52; }
.sbm-bo .sbm-container .sbm-formrow ol li.proefles a {
color: #4dbb52; }
.sbm-bo .sbm-container .sbm-formrow ol li.proefles span {
background-color: #4dbb52; }
.sbm-bo .sbm-container .sbm-formrow ol li.dropin {
color: darkturquoise; }
.sbm-bo .sbm-container .sbm-formrow ol li.dropin a {
color: darkturquoise; }
.sbm-bo .sbm-container .sbm-formrow ol li.dropin span {
background-color: darkturquoise; }
.sbm-bo .sbm-container .options {
padding-top: 10px; }
.sbm-bo .sbm-container .options button {
margin-right: 10px; }
.sbm-bo .sbm-container .sbm-mini-view {
line-height: 30px; }
.sbm-bo .sbm-container .sbm-mini-view a {
display: flex;
text-decoration: none;
color: #6d6d6d; }
.sbm-bo .sbm-container .sbm-mini-view a span {
flex-grow: 1;
white-space: nowrap;
overflow: hidden; }
.sbm-bo .sbm-container .sbm-mini-view a span.title {
text-overflow: ellipsis;
width: 34%;
max-width: 200px;
margin-right: 30px; }
.sbm-bo .sbm-container .sbm-mini-view a span.title.subtitel {
display: flex;
flex-direction: column;
font-size: 11px;
line-height: 18px;
margin-bottom: 15px; }
.sbm-bo .sbm-container .sbm-mini-view a span.title.subtitel::before {
content: attr(data-lidnaam);
line-height: normal;
font-weight: bold; }
.sbm-bo .sbm-container .sbm-mini-view a span.status {
min-width: 50px; }
.sbm-bo .sbm-container .sbm-mini-view a span.methode {
width: 50px; }
.sbm-bo .sbm-container .sbm-mini-view a span.amount {
text-align: right;
width: 60px; }
.sbm-bo .sbm-container .sbm-mini-view a span img {
vertical-align: middle; }
.sbm-bo .sbm-container .sbm-mini-view a.actief {
color: #4dbb52; }
.sbm-bo .sbm-container .sbm-mini-view a.pauze {
color: #ffb400; }
.sbm-bo .sbm-container .sbm-mini-view a.niet-actief {
color: #f00; }
.sbm-bo .sbm-container .sbm-mini-view a:hover {
text-decoration: underline; }
.sbm-bo .custom-checkbox {
margin-top: 5px;
line-height: 21px; }
.sbm-bo p.remark {
display: none;
background-color: #d9d9d9;
color: #3c3c3c;
padding: 15px;
border-radius: 5px;
position: relative;
overflow: visible;
line-height: normal; }
.sbm-bo p.remark:before {
left: 22px;
top: -10px;
position: absolute;
height: 0px;
width: 0px;
content: "";
border-style: solid;
border-width: 0 16px 16px 16px;
border-color: transparent transparent #d9d9d9; }
.sbm-bo p.remark a {
font-weight: bold;
text-decoration: underline; }
.sbm-bo a.remark {
background-color: #888;
border-radius: 50%;
width: 21px;
height: 21px;
color: #fff;
float: left;
text-align: center;
position: absolute;
margin-left: 10px;
text-decoration: none; }
.sbm-bo a.remark.open {
opacity: 0.5; }
.sbm-bo a.remark--alert {
color: #888;
background-color: unset; }
.sbm-bo a.remark--alert i {
font-weight: 900; }
.sbm-bo .sbm-state {
border-radius: 5px;
text-transform: uppercase;
color: #fff;
background-color: #82aaf2;
padding: 5px 10px;
font-size: 11px;
font-weight: bold; }
.sbm-bo .sbm-state.actief {
background-color: #4dbb52; }
.sbm-bo .sbm-state.pauze {
background-color: #ffb400; }
.sbm-bo .sbm-state.niet-actief {
background-color: #f00; }
.sbm-bo .clear {
clear: both;
margin-top: 40px; }
/* Abonnement */
form.sbm-bo .abo-header {
position: relative; }
form.sbm-bo .abo-header h2 {
font-size: 18px;
margin-bottom: 0px;
max-width: calc(50% - 30px); }
form.sbm-bo .abo-header h2:nth-child(3) {
position: absolute;
font-size: 14px;
top: 0px;
left: 50%; }
form.sbm-bo .abo-header h2:nth-child(5) {
position: absolute;
font-size: 14px;
top: 0px;
right: 0; }
form.sbm-bo .abo-header span:nth-child(6) {
position: absolute;
font-size: 14px;
top: 30px;
right: 0;
color: #646464; }
form.sbm-bo .abo-header .sbm-state-container {
position: absolute;
top: 25px;
left: 50%;
padding-top: 7px; }
form.sbm-bo .abo-header .sbm-state-container a {
margin-right: 5px; }
form.sbm-bo .abo-header .product-name {
font-size: 16px;
color: #9f9f9f;
margin-top: 10px;
max-width: 45%; }
form.sbm-bo #berekendeBedragen {
text-align: center; }
form.sbm-bo #berekendeBedragen label {
float: left;
margin-bottom: 0; }
form.sbm-bo #berekendeBedragen label.berekendeTotaal {
font-size: 16px;
margin-top: 10px;
margin-bottom: 10px; }
form.sbm-bo #berekendeBedragen span {
line-height: 22px;
float: right;
text-align: left;
width: 54%; }
form.sbm-bo #berekendeBedragen span.berekendeTotaal {
margin-top: 10px;
margin-bottom: 10px;
font-size: 19px; }
form.sbm-bo #berekendeBedragen span::before {
content: attr(data-valuta); }
form.sbm-bo #meeropties {
position: absolute; }
table.sbmtags {
font-size: 12px;
margin-top: 20px; }
table.sbmtags th {
text-align: left;
padding-bottom: 10px; }
table.sbmtags td {
text-align: left;
padding-bottom: 10px;
padding-top: 10px;
border-top: 1px solid #ddd; }
table.sbmtags td:nth-child(1) {
width: 250px; }
table.sbmtags td a {
color: #33a3e3; }
/* .squaredThree */
.squaredThree {
position: relative;
float: left;
margin-right: 10px; }
.squaredThree label {
width: 20px !important;
min-width: auto !important;
height: 20px !important;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
border-radius: 4px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4); }
.squaredThree label:after {
content: "";
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0.3;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.squaredThree label:hover::after {
opacity: 0.3; }
.squaredThree input[type="checkbox"] {
visibility: hidden;
width: auto !important; }
.squaredThree input[type="checkbox"]:checked + label:after {
opacity: 1; }
.ui-menu .ui-menu-item {
overflow: hidden; }
a.ui-menu-item-wrapper {
display: block; }
/*# sourceMappingURL=sbm-forms.css.map */
/* /custom_modules/rapportages/css/sbm-rapportage.css */
@charset "UTF-8";
form.sbm-bo #rapport {
margin-left: -30px;
margin-right: -30px;
}
form.sbm-bo #rapport.geen-paginasering {
margin-bottom: -30px;
}
form.sbm-bo #rapport .paginasering {
padding-left: 30px;
border-top: 1px solid #ddd;
}
form.sbm-bo #rapport .agenda-nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
padding-bottom: 30px;
margin: 0 30px 30px 30px;
}
form.sbm-bo #rapport .agenda-nav button,
form.sbm-bo #rapport .agenda-nav h2 {
position: relative;
margin: 0 0 0 0;
}
form.sbm-bo .search-content {
flex: none !important;
}
form.sbm-bo .search-content input.sbm-search {
height: 41px !important;
border-color: #bbb;
margin: 20px 20px 10px 0px;
text-align: left;
padding: 9px 20px 9px 45px !important;
background: #fff url("/dexos/images/search.gif") no-repeat 10px center !important;
background-size: auto auto;
background-size: 25px auto;
}
form.sbm-bo .opties-uitklapmenu {
display: none;
background-color: black;
border-radius: 5px;
position: absolute;
right: 0px;
margin-top: -10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
min-width: 200px;
z-index: 1;
}
form.sbm-bo .opties-uitklapmenu button {
display: block;
width: 100%;
margin: 0 !important;
border-radius: 0;
background: #4a4a4a;
border-color: #111;
border-bottom: none;
}
form.sbm-bo .opties-uitklapmenu button:first-child {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
form.sbm-bo .opties-uitklapmenu button:last-child {
border-bottom: 1px solid #111;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
form.sbm-bo .calender-content input {
height: 40px !important;
}
form.sbm-bo .calender-content .calender-ico {
margin-left: -45px;
margin-top: 26px;
position: absolute;
}
form.sbm-bo .total {
font-style: italic;
padding: 25px 30px;
position: relative;
}
form.sbm-bo .total .scroll {
float: right;
}
form.sbm-bo .total .scroll a {
color: #000;
text-decoration: none;
background-color: #ccc;
padding: 7px 7px 0 9px;
display: inline-block;
line-height: 20px;
border-radius: 13px;
}
form.sbm-bo .total .scroll a:first-of-type {
padding-right: 9px;
padding-left: 7px;
}
form.sbm-bo .total .scroll a:hover {
opacity: .7;
}
form.sbm-bo .paginasering + .scroll {
float: right;
margin-right: 30px;
margin-top: -80px;
}
form.sbm-bo .paginasering + .scroll a {
color: #000;
text-decoration: none;
background-color: #ccc;
padding: 7px 7px 0 9px;
display: inline-block;
line-height: 20px;
border-radius: 13px;
}
form.sbm-bo .paginasering + .scroll a:first-of-type {
padding-right: 9px;
padding-left: 7px;
}
form.sbm-bo .paginasering + .scroll a:hover {
opacity: .7;
}
form.sbm-bo table.report-results td {
padding-top: 15px;
padding-bottom: 15px;
position: relative;
}
form.sbm-bo table.report-results td.special img {
filter: invert(100%);
}
form.sbm-bo table.report-results td.special::after {
top: 15px;
left: 30px;
z-index: 5;
position: absolute;
font-weight: bold;
font-size: 29px;
height: 50px;
width: 50px;
border-radius: 50%;
color: white;
text-align: center;
line-height: 50px;
text-shadow: 0px 0px 5px black;
padding-top: 1px;
}
form.sbm-bo table.report-results td.special.proefles::after {
background-color: rgba(0, 255, 0, 0.5);
content: "P";
}
form.sbm-bo table.report-results td.special.dropin::after {
background-color: darkcyan;
background-color: rgba(0, 255, 255, 0.5);
content: "D";
}
form.sbm-bo table.report-results td img {
border-radius: 50%;
object-fit: cover;
width: 50px;
height: 50px;
}
form.sbm-bo table.report-results td a {
color: darkgoldenrod;
}
form.sbm-bo table.report-results td a.edit {
color: inherit;
text-align: right;
float: right;
color: #a3a3a3;
}
form.sbm-bo table.report-results td a.edit i {
font-size: 14px;
}
form.sbm-bo table.report-results td a.edit.big i {
font-size: 23px;
}
form.sbm-bo table.report-results td a.edit:hover {
opacity: 0.7;
}
form.sbm-bo table.report-results td i.popupicon {
/*color: #a3a3a3;*/
opacity: 0.7;
margin-right: 5px;
vertical-align: middle;
margin-bottom: 1px;
}
form.sbm-bo table.report-results td.foto {
width: 80px;
}
form.sbm-bo table.report-results td.foto img {
border-radius: 50%;
object-fit: cover;
width: 50px;
height: 50px;
}
form.sbm-bo table.report-results td a.doorklik {
visibility: hidden;
float: right;
}
form.sbm-bo table.report-results td a.doorklik::before {
content: "←";
margin-right: 10px;
font-weight: bold;
position: absolute;
margin-left: -29px;
font-size: 18px;
margin-top: -5px;
}
form.sbm-bo table.report-results td:hover a.doorklik {
visibility: visible;
}
form.sbm-bo table.report-results td span.subdatum {
background-color: lightcoral;
color: white;
border-radius: 5px;
padding: 3px 5px;
font-size: 11px;
font-weight: bold;
margin-top: 3px;
display: inline-block;
opacity: 2.3;
}
form.sbm-bo table.report-results td span.status {
color: white;
padding: 5px;
border-radius: 5px;
display: inline-block;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
line-height: 12px;
min-width: 45px;
text-align: center;
position: absolute;
left: 17px;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
}
form.sbm-bo table.report-results td span.status.neutraal {
background-color: gray;
}
form.sbm-bo table.report-results td span.status.pos {
background-color: #a3cb31;
}
form.sbm-bo table.report-results td span.status.neg {
background-color: #cb3131;
}
form.sbm-bo table.report-results tr.wrap td {
text-overflow: unset;
white-space: unset;
}
form.sbm-bo table.report-results thead tr:hover a.edit {
color: black;
}
@media screen and (max-width: 1578px) {
div.content div.extra-form > div.actions.absolute {
position: absolute;
right: 30px;
top: 77px;
z-index: 1;
}
}
div.content div.extra-form .custom-checkbox {
margin-right: 40px;
}
.sbm-warning-popup a.btn {
background-color: #970000;
color: white;
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
.sbm-warning-popup .succes {
background-color: #f0f6dd;
color: #769618;
border: 1px solid #769618;
margin: 0 0 20px 0;
padding: 20px;
background-image: url("/dexos/images/succes.gif");
background-position: 20px center;
background-repeat: no-repeat;
padding-left: 65px;
font-weight: bold;
}
.sbm-warning-popup .fas {
font-size: 31px;
margin-top: 6px;
}
/*# sourceMappingURL=sbm-rapportage.css.map */
/* /custom_modules/rooster2/css/eventtypes.css */
.sbm-bo .sbm-event-permissions {
border: 1px solid #ccc; }
.sbm-bo .sbm-product-flexrow {
display: flex;
justify-content: space-between;
margin-bottom: -1px;
position: relative;
z-index: 2; }
.sbm-bo .sbm-product-flexrow .sbm-product-table {
width: 215px;
flex-grow: 1; }
.sbm-bo .sbm-product-flexrow .sbm-product-table:not(:first-of-type) {
/*
> div:empty{
height: 60px;
position: relative;
border: 1px solid #969696;
border-top: none;
&::after{
position: absolute;
left: 50%;
top: 50%;
content: " ";
font-style: italic;
transform: translate(-50%,-50%);
font-size: 11px;
}
}
*/ }
.sbm-bo .sbm-product-flexrow .sbm-product-table:first-of-type {
background-color: #eee;
flex-grow: 2;
/*box-shadow: 0px 0px 0px 1px #969696 inset;*/
min-height: 90px;
position: relative; }
.sbm-bo .sbm-product-flexrow .sbm-product-table:first-of-type::after {
position: absolute;
left: 50%;
height: 56px;
line-height: 56px;
content: " ";
font-style: italic;
transform: translateX(-50%);
font-size: 11px;
top: 33px; }
.sbm-bo .sbm-product-flexrow .sbm-product-table:nth-child(3) {
box-shadow: 1px 0px 0px 0px #ccc inset; }
.sbm-bo .sbm-product-flexrow .sbm-product-table:nth-child(4) {
box-shadow: 1px 0px 0px 0px #ccc inset; }
.sbm-bo .sbm-product-flexrow .sbm-product-table:last-child {
/*margin-left: 15px;*/ }
.sbm-bo .sbm-product-flexrow .sbm-product-table .top-label {
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .top-label span {
color: white;
padding: 7px 12px;
border-radius: 10px;
font-size: 14px;
margin-bottom: 20px; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .top-label i {
vertical-align: middle;
margin-top: -2px;
margin-right: 3px; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-head {
background-color: #cccccc;
color: black;
display: block;
line-height: 34px;
font-weight: bold;
padding-left: 15px;
margin-top: -1px;
position: relative; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-head::before {
content: "";
position: absolute;
width: 1px;
height: 100%;
background-color: #cccccc;
left: 0;
top: 0; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-head a {
position: absolute;
right: 0;
transform: translateX(-50%);
cursor: pointer;
opacity: .25; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-head a i {
margin-right: 5px;
margin-left: 5px;
font-size: 17px;
vertical-align: middle; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-head a:hover,
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-head a .active {
opacity: 1; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-row {
min-height: 60px;
padding: 15px 0px 14px 15px;
position: relative;
z-index: 1;
border-bottom: 1px solid #ccc; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-row span,
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-row a {
float: left; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-row span {
width: 175px;
font-size: 11px; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-row .sbm-pt-btn-pay {
background-color: #c91f1f;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
margin-left: 20px;
text-align: center;
float: right;
cursor: pointer; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-row .sbm-pt-btn-pay i {
margin-top: 8px;
margin-left: -1px; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-row .sbm-pt-btn-pay:hover {
opacity: 0.8; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-row .sbm-pt-btn-free {
background-color: #93c91f;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
margin-left: 5px;
text-align: center;
float: right;
margin-right: 15px;
cursor: pointer; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-row .sbm-pt-btn-free i {
margin-top: 8px;
margin-left: 1px; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-row .sbm-pt-btn-free:hover {
opacity: 0.8; }
.sbm-bo .sbm-product-flexrow .sbm-product-table .sbm-pt-row .sbm-pt-btn-del {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
margin-top: 2px; }
.sbm-bo .sbm-product-flexrow .sbm-product-table-arrow {
display: none;
color: #b8b8b8;
width: 65px;
position: relative;
font-size: 18px; }
.sbm-bo .sbm-product-flexrow .sbm-product-table-arrow i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 17px; }
.sbm-bo .event-row {
background-color: #e9e9e9;
/*background-color: #A5A5A5;*/
color: #808080;
/*color: #2E2E2E;*/
border-top: 1px solid #dad8d8;
/*border-bottom: 1px solid white;*/
font-size: 14px;
font-weight: bold; }
.sbm-bo .event-row:hover td {
box-shadow: none !important; }
.sbm-bo .event-row i {
vertical-align: middle;
font-size: 18px;
overflow: visible;
margin-right: 5px; }
.sbm-bo .event-row i:last-child {
margin-right: 0; }
.sbm-bo .event-row span {
font-size: 23px;
vertical-align: middle;
display: inline-block;
margin-top: -7px;
margin-left: 10px;
position: absolute; }
.sbm-bo thead.tbody_deelnemers th {
/*background-color: #A5A5A5;
color: white;*/ }
.sbm-bo thead.opened .event-row span {
transform: rotate(90deg);
margin-top: -4px;
margin-left: 16px; }
/*# sourceMappingURL=eventtypes.css.map */
/* /custom_modules/klantenkaart/css/klantenkaart.css */
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Jul 17, 2018, 10:24:45 AM
Author : Dave Spaans
*/
.sbm-flex {
display: flex;
flex-wrap: nowrap; }
label.sbm-uploadmachtiging {
background-color: #4a4a4a;
color: white;
width: unset !important;
min-width: unset !important;
flex: none;
display: inline-block;
line-height: 1em !important;
height: 1.5rem;
cursor: pointer;
display: flex !important;
align-items: center;
padding: .25rem .5rem;
margin: .5rem 0;
border: 1px solid black;
border-radius: .25rem;
font-weight: 400; }
#directDebitMandate {
display: none; }
.sbm-incassowrapper {
display: flex;
align-items: center;
gap: 1rem; }
.sbm-incassowrapper .file-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px; }
.sbm-klantenkaart {
background-color: white;
box-sizing: border-box !important; }
.sbm-klantenkaart * {
box-sizing: border-box !important; }
@media screen and (max-width: 1600px) {
.sbm-klantenkaart .tablet-hide {
display: none; } }
@media screen and (max-width: 1286px) {
.sbm-klantenkaart .mobile-hide {
display: none; } }
.sbm-klantenkaart .sbm-state {
border-radius: 5px;
text-transform: uppercase;
color: #fff;
background-color: #82aaf2;
padding: 5px 10px;
font-size: 11px;
font-weight: bold; }
.sbm-klantenkaart .sbm-state.actief {
background-color: #4dbb52; }
.sbm-klantenkaart .sbm-state.niet-inloggen {
background-color: #ffb400; }
.sbm-klantenkaart .sbm-state.niet-actief {
background-color: #f00; }
.sbm-klantenkaart .sbm-kk-edit {
width: 30px;
height: 30px;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 6px;
border-radius: 5px;
color: rgba(0, 0, 0, 0.5);
cursor: pointer; }
.sbm-klantenkaart .sbm-kk-edit i {
margin-left: 1px;
margin-top: 1px; }
.sbm-klantenkaart .sbm-kk-edit:hover {
opacity: 0.7; }
.sbm-klantenkaart .sbm-klantenkaart-header {
padding: 40px 30px;
position: relative;
background-color: white;
z-index: 1;
overflow: visible;
height: 175px; }
.sbm-klantenkaart .sbm-klantenkaart-header * {
overflow: visible; }
.sbm-klantenkaart .sbm-klantenkaart-header::before {
height: 160px;
background-color: #ebebeb;
content: " ";
width: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-pasfoto {
float: left;
width: 163px;
height: 163px;
margin-right: 30px;
position: relative;
border-radius: 50%;
background-color: white;
border: 3px solid white;
box-sizing: border-box; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-pasfoto::before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0px 0px 0px 13px #ebebeb;
border-radius: 50%; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-pasfoto img {
width: 101%;
height: 101%;
object-fit: cover;
border-radius: 50%;
display: block;
overflow: clip;
box-sizing: border-box;
cursor: pointer;
margin-left: -1px;
margin-top: -1px;
padding: 3px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-pasfoto i {
display: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 28px;
color: white;
margin: 0;
padding: 0;
cursor: pointer; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-pasfoto:hover {
background-color: black; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-pasfoto:hover img {
opacity: 0.5; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-pasfoto:hover i {
display: block; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid {
flex: 1;
float: left;
margin-top: 5px; }
@media screen and (min-width: 1286px) {
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid {
min-width: 1022px; } }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .sbm-kk-lid-naam {
position: relative;
font-size: 24px;
display: block;
height: 90px;
margin-bottom: 5px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .sbm-kk-lid-naam span.naam {
margin-right: 20px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .sbm-kk-lid-naam .sbm-kk-edit {
font-size: 12px;
width: 16px;
height: 18px;
padding: 8px 8px 6px 8px;
bottom: -40px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .sbm-kk-lid-naam .gebruikersnaam {
position: absolute;
bottom: -2px;
font-size: 12px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .sbm-kk-lid-naam .gebruikersnaam strong {
display: block;
margin-bottom: 2px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .sbm-kk-lid-status {
position: relative;
font-size: 12px;
float: left; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .sbm-kk-lid-periode {
font-size: 14px;
float: left;
display: inline-block;
margin-right: 20px;
padding-top: 5px;
color: #909090; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .info-left {
margin-right: 0px;
float: left; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .info-right {
float: right;
font-size: 14px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .info-right .col {
float: right; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .info-right .col:last-child {
margin-right: 45px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .info-right .col:last-child:first-child {
margin-right: 0; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .info-right .col label,
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .info-right .col span {
display: block;
width: 100%;
float: none;
text-align: right;
margin-bottom: 0;
margin-right: 0 !important; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .info-right .details-top {
border-bottom: 1px solid #cecece;
overflow: hidden;
margin-bottom: 10px;
padding-bottom: 10px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .info-right .details-bottom {
float: right; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .info-right .details-bottom i {
background-color: #787878;
color: white;
padding: 7px 8px 8px 8px;
border-radius: 50%;
font-size: 13px;
margin-right: 10px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-lid .info-right .details-bottom i.fa-paper-plane::before {
content: "@";
font-family: Arial, Helvetica, sans-serif;
font-weight: bold; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-interactief {
clear: left;
margin-left: 190px;
margin-top: -60px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-interactief label {
display: block;
float: none;
font-size: 11px;
font-weight: bold;
color: grey;
text-transform: uppercase;
margin-bottom: 5px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-interactief .sbm-kk-tags {
float: left;
max-width: calc(50% - 109px);
padding-bottom: 35px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-interactief .sbm-kk-tags a {
padding: 5px 20px;
background-color: #6ebfce;
border-radius: 5px;
color: white;
font-weight: bold;
font-size: 11px;
margin-right: 3px;
display: inline-block;
margin-bottom: 5px; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-interactief .sbm-kk-options {
float: right;
margin-bottom: 45px;
max-width: calc(50% + 82px); }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-interactief .sbm-kk-options button {
margin: 0 7px 5px 0; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-interactief .sbm-kk-options button:last-child {
margin-right: 0; }
@media screen and (max-width: 1286px) {
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-interactief .sbm-kk-options button.mob-auto-width {
width: auto !important; }
.sbm-klantenkaart .sbm-klantenkaart-header .sbm-kk-interactief .sbm-kk-options button.mob-auto-width i {
margin-right: -4px; } }
.sbm-klantenkaart .sbm-klantenkaart-blokken {
background-color: white;
min-height: 400px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 30px 30px 30px;
clear: both; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok {
background-color: #f2f2f2;
flex-basis: calc(25% - 20px);
position: relative;
margin-bottom: 30px;
/*.sbm-kk-blok-head{
background-color: #828282;
color: white;
.sbm-kk-edit{
border: 1px solid rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.8);
}
}*/ }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok:nth-child(9), .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok:nth-child(10) {
flex-basis: calc(50% - 15px); }
@media screen and (max-width: 1286px) {
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok {
flex-basis: calc(50% - 15px); } }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok span.right {
float: right;
text-align: right;
position: relative; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sb-kk-blok-bottom {
position: absolute;
bottom: 18px;
left: 18px;
color: grey;
font-size: 12px; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sb-kk-blok-bottom a {
color: #0048ff;
text-decoration: underline;
cursor: pointer; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-blok-head {
position: relative;
height: 45px;
background-color: #dadada;
overflow: hidden; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-blok-head label {
font-size: 16px;
line-height: 45px;
text-indent: 18px;
width: auto;
font-weight: bold; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-blok-head .sbm-kk-edit {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-blok-head span.right {
height: 45px;
line-height: 45px;
margin-right: 18px; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok:nth-child(5) .sbm-kk-blok-head, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok:nth-child(6) .sbm-kk-blok-head, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok:nth-child(7) .sbm-kk-blok-head, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok:nth-child(8) .sbm-kk-blok-head {
background-color: #828282;
color: white; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok:nth-child(5) .sbm-kk-blok-head .sbm-kk-edit, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok:nth-child(6) .sbm-kk-blok-head .sbm-kk-edit, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok:nth-child(7) .sbm-kk-blok-head .sbm-kk-edit, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok:nth-child(8) .sbm-kk-blok-head .sbm-kk-edit {
border: 1px solid rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.8); }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content {
padding: 18px;
line-height: 18px;
overflow: hidden;
position: relative; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .content-row {
overflow: hidden;
padding-bottom: 10px;
border-bottom: 1px solid #cecece;
margin-bottom: 10px;
line-height: 18px; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .content-row:last-child {
border: none; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .content-row > strong {
float: left;
width: 40%; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .content-row > div {
width: 60%;
float: left; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .sbm-val {
float: none;
line-height: 18px; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .sbm-val:empty::after {
content: "-"; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .upload-machtiging {
width: auto;
padding-left: 10px;
padding-right: 10px;
height: 34px;
background-color: #4a4a4a;
color: white;
margin-right: -2px;
font-weight: bold;
margin-top: 9px;
position: relative;
float: left; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .upload-machtiging i {
margin-right: 5px; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row {
display: block;
overflow: hidden;
width: 100%;
border-bottom: 1px solid #c6c6c6;
height: 28px;
margin-bottom: 7px;
padding-top: 2px; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .left,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .right {
color: grey; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row.clickable {
cursor: pointer; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row.clickable:hover .left,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row.clickable:hover .right {
color: black; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row a {
cursor: pointer; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-file,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-clock-o,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-user,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-file-text,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-external-link,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-link {
color: grey;
margin-right: 10px;
min-width: 1rem; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-file + a,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-clock-o + a,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-user + a,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-file-text + a,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-external-link + a,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-link + a {
color: grey; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-file + a:hover,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-clock-o + a:hover,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-user + a:hover,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-file-text + a:hover,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-external-link + a:hover,
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-link + a:hover {
color: black; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-pencil {
color: grey;
margin-left: 20px; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content .row .fa-pencil:hover {
color: black; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.bestellingen .row, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.reserveringen .row, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.producten .row {
margin-top: -10px; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.bestellingen .row span, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.reserveringen .row span, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.producten .row span {
line-height: normal; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.bestellingen .row span span, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.reserveringen .row span span, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.producten .row span span {
float: none;
font-size: 10px; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.bestellingen .left, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.reserveringen .left, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.producten .left {
max-width: calc(100% - 100px);
padding-left: 25px;
position: relative;
padding-bottom: 10px;
padding-top: 10px;
color: grey; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.bestellingen .right, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.reserveringen .right, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.producten .right {
padding-bottom: 10px;
padding-top: 10px; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.bestellingen .fa, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.reserveringen .fa, .sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content.producten .fa {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content-left {
float: left;
width: 50%; }
.sbm-klantenkaart .sbm-klantenkaart-blokken .sbm-kk-blok .sbm-kk-content-right {
float: left;
width: 50%; }
.sbm-klantenkaart button.red {
background: #f28282;
border-color: #cc6565; }
.sbm-klantenkaart button.grey {
background: #4a4a4a;
border-color: #111; }
.sbm-klantenkaart button.black {
background: #000;
border-color: #111; }
.sbm-klantenkaart button.hidden {
display: none; }
.sbm-klantenkaart .opties-uitklapmenu {
display: none;
background-color: rgba(255, 0, 0, 0.2);
position: absolute;
right: 30px !important;
margin-top: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
.sbm-klantenkaart .opties-uitklapmenu button {
display: block;
width: 100%;
margin: 0 !important;
border-radius: 0;
background: #4a4a4a;
border-color: #111;
border-bottom: none; }
.sbm-klantenkaart .opties-uitklapmenu button:first-child {
border-top-right-radius: 5px;
border-top-left-radius: 5px; }
.sbm-klantenkaart .opties-uitklapmenu button:last-child {
border-bottom: 1px solid #111;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; }
/*# sourceMappingURL=klantenkaart.css.map */
/* /custom_modules/webintegratie/css/webintegratie.css */
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Aug 13, 2018, 4:45:49 PM
Author : Dave Spaans
*/
.webintegratie .embed {
display: block;
color: grey;
padding: 10px;
max-height: 200px;
margin: 0 0 40px;
overflow-y: auto;
background-color: #efefef;
width: calc(100% - 17px);
border-color: #ccc;
float: none; }
/*# sourceMappingURL=webintegratie.css.map */
/* /custom_modules/shop/css/shop.css */
.sbm-bo.popup {
margin-left: -21px;
margin-right: -21px; }
.sbm-bo.popup .sbm-settings.flex {
margin-left: -2px;
width: calc(100% + 4px); }
.sbm-bo.popup .sbm-klantenkaart {
margin-left: -1px;
width: calc(100% + 2px); }
.sbm-bo.popup .sbm-results {
overflow: visible; }
.sbm-bo .sbm-formrow .product-afbeelding {
cursor: pointer;
background-color: black;
position: relative; }
.sbm-bo .sbm-formrow .product-afbeelding img {
width: 250px;
height: 133px;
object-fit: cover;
display: block; }
.sbm-bo .sbm-formrow .product-afbeelding i {
display: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 28px;
color: white !important;
margin: 0 !important;
padding: 0;
cursor: pointer;
width: 25px !important;
opacity: 1 !important; }
.sbm-bo .sbm-formrow .product-afbeelding:hover {
background-color: black; }
.sbm-bo .sbm-formrow .product-afbeelding:hover img {
opacity: 0.5; }
.sbm-bo .sbm-formrow .product-afbeelding:hover i {
display: block; }
.sbm-bo .sbm-formrow .product-afbeelding__text {
display: block;
position: absolute;
top: 80%;
color: rgba(255, 255, 255, 0.8) !important;
transform: translate(-50%, -50%);
left: 50%;
font-weight: 600; }
.sbm-bo .sbm-formrow .product-afbeelding__hoofdafbeelding {
aspect-ratio: 16/9;
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: #ddd;
min-height: 250px; }
.sbm-bo .sbm-formrow .product-afbeelding__hoofdafbeelding::before {
opacity: 0;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transition: all .25s ease-in-out; }
.sbm-bo .sbm-formrow .product-afbeelding__hoofdafbeelding img {
object-fit: cover;
width: 100%; }
.sbm-bo .sbm-formrow .product-afbeelding__hoofdafbeelding:hover::before {
opacity: 1; }
.sbm-bo .sbm-formrow .product-afbeelding__hoofdafbeelding:hover::after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f303";
position: absolute;
transform: translateY(-50%);
color: white;
font-size: 2rem;
margin-top: 1rem; }
.sbm-bo .sbm-formrow .product-afbeelding__hoofdafbeelding__wrapper {
flex: none;
width: 100%; }
.sbm-bo .sbm-formrow .product-afbeelding__hoofdafbeelding__placeholder {
display: block;
width: unset !important;
height: unset !important;
font-size: 3rem;
color: #9a9a9a; }
.sbm-bo .sbm-formrow .ondersteunde-afbeeldingen {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1rem;
margin-top: .75rem;
width: 100%; }
.sbm-bo .sbm-formrow .ondersteunde-afbeeldingen__item {
aspect-ratio: 16/9;
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: #f4f4f4;
min-height: 100px; }
.sbm-bo .sbm-formrow .ondersteunde-afbeeldingen__item::before {
opacity: 0;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transition: all .25s ease-in-out; }
.sbm-bo .sbm-formrow .ondersteunde-afbeeldingen__item img {
object-fit: cover;
width: 100%; }
.sbm-bo .sbm-formrow .ondersteunde-afbeeldingen__item:hover::before {
opacity: 1; }
.sbm-bo .sbm-formrow .ondersteunde-afbeeldingen__item:hover::after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f303";
position: absolute;
transform: translateY(-50%);
color: white;
font-size: 2rem;
margin-top: 1rem; }
.sbm-bo .sbm-formrow .ondersteunde-afbeeldingen__item__placeholder {
display: block;
width: unset !important;
height: unset !important;
font-size: 3rem;
color: #d6d6d6; }
.sbm-bo .sbm-formrow .thumbnails {
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer; }
.sbm-bo .sbm-formrow .thumbnails:hover {
opacity: .9; }
.sbm-bo .sbm-formrow .thumbnails img {
width: 100px;
height: 100px;
object-fit: cover; }
.sbm-bo .sbm-formrow .variant_wrapper {
display: flex;
align-items: center;
height: 100%;
padding: 0 0 0.5rem; }
.sbm-bo .sbm-formrow .variant_wrapper i {
cursor: pointer; }
.sbm-bo .sbm-formrow .variant_input_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 250px; }
.sbm-bo .sbm-formrow .variant_input_wrapper > input.variant_input {
flex-basis: 200px;
flex-shrink: 1;
flex-grow: 0; }
.sbm-bo .sbm-formrow .variant_input_wrapper .verwijderVariant {
flex-basis: 1rem;
cursor: pointer;
display: block; }
.sbm-bo.new-top {
margin-top: -35px; }
.sbm-bo.new-top.newer {
margin: -160px 15px 20px; }
.sbm-bo.new-top.newer.popup {
margin-left: 16px;
margin-right: 16px; }
.sbm-bo .sbm-supertabs {
position: relative;
transform: translate(250px, -45px);
margin-top: -44px;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
z-index: 1;
overflow: hidden;
height: 45px;
margin-bottom: -46px; }
.sbm-bo .sbm-supertabs a {
text-decoration: none;
color: #b7b7b7;
height: 45px;
padding: 14px 30px;
display: inline-block; }
.sbm-bo .sbm-supertabs a.selected, .sbm-bo .sbm-supertabs a:hover {
color: #4c8f2b; }
.sbm-bo .sbm-supertabs a.selected {
border-radius: 4px 4px 0 0;
border: 1px solid #ccc;
border-bottom: 2px solid white;
box-shadow: 0px 4px 0px 0px #4c8f2b inset;
background-color: white; }
.sbm-bo .sbm-supertabs a span.label--red {
background-color: #CD0101;
color: white;
border-radius: 4px;
font-size: 10px;
padding: 4px 8px;
color: white;
text-transform: uppercase;
margin-left: .5rem;
position: relative;
top: -2px; }
.sbm-bo .sbm-tabs {
position: relative;
border-top: 1px solid #cecece;
font-size: 14px;
font-weight: bold;
margin-right: 45px;
position: absolute;
width: calc(100% - 88px);
background: white;
margin-left: -1px;
margin-top: -1px;
height: 57px;
padding: 25px 0 40px;
border-bottom: 1px solid #cecece; }
.sbm-bo .sbm-tabs.flex {
width: calc(100% + 2px);
height: auto;
padding: 0;
display: flex;
position: relative; }
.sbm-bo .sbm-tabs.flex.popup {
padding: 0px 25px; }
.sbm-bo .sbm-tabs.flex a {
margin-top: 24px;
display: inline-block;
margin-bottom: 20px; }
.sbm-bo .sbm-tabs.flex .member-search {
float: right;
flex-grow: 1;
order: 99;
min-width: 254px;
align-self: center;
position: relative;
border-left: 40px solid white;
/*
float: left;
flex-basis: 100%;
margin-bottom: 26px;
margin-top: 18px;
*/ }
.sbm-bo .sbm-tabs.flex .member-search input {
border-color: #bbb;
width: 100%;
max-width: 364px;
text-align: left;
padding: 11px 20px 10px 45px;
background: #fff url("/dexos/images/search.gif") no-repeat 10px center;
background-size: auto auto;
background-size: 25px auto;
border: 1px solid rgba(0, 0, 0, 0.2);
height: 41px;
float: right; }
.sbm-bo .sbm-tabs.flex .member-search input.member-selected {
background-color: #ebebeb;
font-weight: bold; }
.sbm-bo .sbm-tabs.flex .member-search .clearuser {
margin: 0;
right: 10px;
position: absolute;
top: 12px; }
.sbm-bo .sbm-tabs.flex .administratie::before {
position: absolute;
height: 1px;
background-color: grey;
opacity: 0.4;
width: 100%;
content: " ";
top: 65px;
left: 0; }
.sbm-bo .sbm-tabs.flex .administratie::after {
position: absolute;
height: 1px;
background-color: grey;
opacity: 0.4;
width: 100%;
content: " ";
top: 130px;
left: 0; }
.sbm-bo .sbm-tabs a {
position: relative;
color: black;
margin-right: 47px;
text-decoration: none; }
.sbm-bo .sbm-tabs a.selected {
color: #4c8f2b;
box-shadow: 0px 2px; }
.sbm-bo .sbm-tabs a:hover:not(.selected) {
opacity: 0.8; }
.sbm-bo .sbm-tabs a.pro::before {
content: "PRO";
background-color: #970000;
padding: 3px 5px;
border-radius: 5px;
color: white;
font-size: 11px;
font-weight: bold;
/*position: absolute;
top: -13px;
right: -34px;*/
margin-right: 5px; }
.sbm-bo .sbm-tabs a.basic::before {
content: "BASIC";
background-color: #970000;
padding: 3px 5px;
border-radius: 5px;
color: white;
font-size: 11px;
font-weight: bold;
margin-right: 5px; }
.sbm-bo .sbm-tabs a i.far {
vertical-align: middle;
margin-bottom: 2px;
margin-right: 3px; }
.sbm-bo .sbm-tabs-spacer {
height: 66px; }
.sbm-bo .sbm-settings {
padding: 30px 30px 15px;
background-color: #ededed;
border: 1px solid #cecece; }
.sbm-bo .sbm-settings.flex,
.sbm-bo .sbm-settings .flex {
display: flex;
flex-wrap: wrap;
width: calc(100% + 2px);
margin-left: -1px;
margin-top: -1px; }
.sbm-bo .sbm-settings.flex.flex-nowrap,
.sbm-bo .sbm-settings .flex.flex-nowrap {
flex-wrap: nowrap; }
.sbm-bo .sbm-settings.flex > div:not(.flex),
.sbm-bo .sbm-settings .flex > div:not(.flex) {
margin-right: 15px;
margin-bottom: 15px; }
.sbm-bo .sbm-settings.flex > div:not(.flex):last-child,
.sbm-bo .sbm-settings .flex > div:not(.flex):last-child {
flex: 1;
text-align: right;
margin-right: 0px; }
.sbm-bo .sbm-settings.flex > .flex,
.sbm-bo .sbm-settings .flex > .flex {
margin-bottom: 0; }
.sbm-bo .sbm-settings.flex.geavanceerd,
.sbm-bo .sbm-settings .flex.geavanceerd {
width: 100%;
padding-top: 16px; }
.sbm-bo .sbm-settings.flex.geavanceerd > div,
.sbm-bo .sbm-settings .flex.geavanceerd > div {
width: 250px;
text-align: left; }
.sbm-bo .sbm-settings.flex.geavanceerd a,
.sbm-bo .sbm-settings .flex.geavanceerd a {
font-weight: bold;
color: black;
text-decoration: none; }
.sbm-bo .sbm-settings.flex.geavanceerd a i,
.sbm-bo .sbm-settings .flex.geavanceerd a i {
vertical-align: sub;
margin-right: 10px;
font-size: 16px; }
.sbm-bo .sbm-settings button {
margin: 0;
white-space: nowrap; }
.sbm-bo .sbm-settings button * {
pointer-events: none; }
.sbm-bo .sbm-settings button.add_new {
color: #336600;
border-color: #acc285;
background-color: #cbe1a4;
position: relative; }
.sbm-bo .sbm-settings button.small {
padding: 5px 10px;
height: auto; }
.sbm-bo .sbm-settings button.small i {
vertical-align: text-bottom; }
.sbm-bo .sbm-settings select {
height: 41px;
width: 250px;
background: #fff;
border: 1px solid black;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.25em;
padding: 5px 8px; }
.sbm-bo .sbm-settings select.locatie-dropdown {
text-indent: 27px; }
.sbm-bo .sbm-settings select.trainer-dropdown {
text-indent: 34px; }
.firefox .sbm-bo .sbm-settings select.locatie-dropdown {
text-indent: 11px; }
.firefox .sbm-bo .sbm-settings select.trainer-dropdown {
text-indent: 14px; }
.sbm-bo .sbm-settings input[type=text] {
border-color: #bbb;
width: calc(250px);
text-align: left;
padding: 11px 20px 10px 45px;
background: #fff url("/dexos/images/search.gif") no-repeat 10px center;
background-size: auto auto;
background-size: 25px auto;
border: 1px solid rgba(0, 0, 0, 0.2);
height: 41px; }
.sbm-bo .sbm-settings div.calender-content {
position: relative; }
.sbm-bo .sbm-settings div.calender-content input {
background-image: none;
width: calc(250px); }
.sbm-bo .sbm-settings div.calender-content .calender-ico {
position: absolute;
left: 8px;
margin-top: 6px; }
.sbm-bo .sbm-settings .custom-checkbox {
margin-top: 10px;
width: 225px;
float: left; }
.sbm-bo .sbm-settings label {
margin-bottom: 5px;
font-weight: bold;
display: block;
font-size: 13px;
float: none; }
.sbm-bo .sbm-settings label.gray {
color: gray; }
.sbm-bo .sbm-settings .modus {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
line-height: 22px;
font-size: 14px;
padding: 8px 18px; }
.sbm-bo .sbm-settings .modus strong {
float: left; }
.sbm-bo .sbm-settings .switch {
position: relative;
display: inline-block;
width: 36px;
height: 22px;
margin: 0;
clear: none;
float: left;
margin-left: 20px; }
.sbm-bo .sbm-settings .switch input {
opacity: 0;
width: 0;
height: 0; }
.sbm-bo .sbm-settings .switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s; }
.sbm-bo .sbm-settings .switch .slider::before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s; }
.sbm-bo .sbm-settings .switch .slider.round {
border-radius: 21px; }
.sbm-bo .sbm-settings .switch .slider.round::before {
border-radius: 50%; }
.sbm-bo .sbm-settings .switch input:checked + .slider {
background-color: #2196F3; }
.sbm-bo .sbm-settings .switch input:focus + .slider {
box-shadow: 0 0 1px #2196F3; }
.sbm-bo .sbm-settings .switch input:checked + .slider:before {
transform: translateX(12px); }
.sbm-bo .sbm-settings .filterpopup-form {
display: none;
padding: 20px;
background-color: #ededed;
border: 1px solid #bbb;
position: absolute;
width: 100%;
min-width: 762px;
margin-top: -1px;
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 2; }
.sbm-bo .sbm-settings .filterpopup-form .popup-header {
margin: -20px -20px 20px;
background-color: #444444;
padding: 15px 20px;
font-weight: bold;
color: white;
text-decoration: none; }
.sbm-bo .sbm-settings .filterpopup-form .popup-header i {
vertical-align: sub;
margin-right: 10px;
font-size: 16px; }
.sbm-bo .sbm-settings .filterpopup-form .popup-header i:last-child {
margin-right: 0; }
.sbm-bo .sbm-settings .filterpopup-form .popup-header a {
color: white; }
.sbm-bo .sbm-settings .filterpopup-form select {
width: 223px; }
.sbm-bo .sbm-settings .filterpopup-form label {
color: black; }
.sbm-bo .sbm-settings .filterpopup-form .extra-filter-opties {
overflow: visible;
margin-bottom: 0;
clear: left;
margin-right: 0; }
.sbm-bo .sbm-settings .filterpopup-form .extra-filter-opties label {
color: white; }
.sbm-bo .sbm-settings.small select {
width: 200px; }
.sbm-bo .sbm-filtertags {
max-width: 50vw;
float: left;
margin-bottom: 40px;
position: relative;
z-index: 1; }
.sbm-bo .sbm-filtertags-label {
margin: 0 0 5px !important; }
.sbm-bo .sbm-filtertags .filtertag {
float: left;
font-size: 11px;
margin-right: 10px;
margin-bottom: 10px;
white-space: nowrap;
position: relative; }
.sbm-bo .sbm-filtertags .filtertag span {
background-color: white;
border: 1px solid #999;
color: #444;
display: block;
padding: 7px 25px 6px 10px;
text-overflow: ellipsis; }
.sbm-bo .sbm-filtertags .filtertag span label {
display: inline-block;
background-color: #666;
color: white;
padding: 2px 10px;
vertical-align: middle;
margin: -8px 8px -6px -10px; }
.sbm-bo .sbm-filtertags .filtertag.geen-actieve-filters span, .sbm-bo .sbm-filtertags .filtertag.pinned span {
padding: 7px 10px 6px; }
.sbm-bo .sbm-filtertags .filtertag:not(.geen-actieve-filters):not(.pinned)::after {
height: 10px;
width: 1px;
background-color: black;
transform: rotate(45deg);
content: '';
display: block;
position: absolute;
top: 10px;
right: 13px;
margin-left: 0px; }
.sbm-bo .sbm-filtertags .filtertag:not(.geen-actieve-filters):not(.pinned)::before {
height: 10px;
width: 1px;
background-color: black;
transform: rotate(135deg);
content: '';
display: block;
position: absolute;
top: 10px;
right: 13px; }
.sbm-bo .sbm-filtertags .filtertag i {
position: absolute;
background-color: white;
cursor: pointer;
opacity: 0;
height: calc(100% - 2px);
width: 26px;
top: 1px;
right: 1px;
z-index: 1; }
.sbm-bo .sbm-filtertags .filtertag i:hover {
opacity: 0.5; }
.sbm-bo .sbm-filtertags .filtertag.reset {
background-color: #666;
padding-right: 17px;
padding-top: 1px;
padding-bottom: 1px;
cursor: pointer; }
.sbm-bo .sbm-filtertags .filtertag.reset:hover {
opacity: 0.8; }
.sbm-bo .sbm-filtertags .filtertag.reset span {
background-color: #666;
color: white;
font-weight: bold;
border: none; }
.sbm-bo .sbm-filtertags .filtertag.reset i {
opacity: 1;
background-color: #666;
color: white;
top: 50%;
transform: translateY(-25%);
right: -6px; }
.sbm-bo .paginasering {
background-color: #fff;
height: 104px;
line-height: 100px; }
.sbm-bo .paginasering .arrow {
float: none;
font-size: 24px;
font-weight: bold;
margin-right: 20px;
padding: 3px 16px 5px;
background-color: #dadada;
border-radius: 5px;
text-decoration: none;
color: #333333; }
.sbm-bo .paginasering .arrow:hover {
opacity: .8; }
.sbm-bo .paginasering .arrow.not-active, .sbm-bo .paginasering .arrow.not-active:hover {
cursor: default;
opacity: .5; }
.sbm-bo .paginasering span {
float: none;
margin-right: 30px;
margin-left: 10px; }
.sbm-bo .sbm-results {
margin: 36px;
padding: 0;
padding-top: 40px;
overflow: visible; }
.sbm-bo .sbm-results * {
box-sizing: content-box; }
.sbm-bo .sbm-results.popup {
padding-top: 20px;
margin-top: 21px;
border: 1px solid #cecece; }
.sbm-bo .sbm-results.popup .leden-stat {
border-left: none !important;
border-right: none !important;
border-bottom: none !important; }
.sbm-bo .sbm-results.popup .sbm-filtertags {
margin: 0px 30px 0; }
.sbm-bo .sbm-results.popup .sbm-filtertags-label {
margin: 30px 0 5px 30px !important; }
.sbm-bo .sbm-results.popup .sbm-results-totaal {
margin: 30px 30px 0; }
.sbm-bo .sbm-results.popup .paginasering {
padding-left: 30px;
padding-right: 30px; }
.sbm-bo .sbm-results-totaal {
padding-bottom: 40px;
position: relative;
overflow: visible; }
.sbm-bo .sbm-results-totaal a.sum {
float: right;
background-color: #cfcfcf;
color: black;
border-radius: 5px;
padding: 5px 10px;
font-weight: bold;
margin-bottom: 15px; }
.sbm-bo .sbm-results-totaal a.sum * {
pointer-events: none; }
.sbm-bo .sbm-results-totaal a.sum span {
display: inline-block;
background-color: #444;
color: white;
margin: -5px -10px -5px 10px;
padding: 5px 10px; }
.sbm-bo .sbm-results-totaal a.sum span i {
vertical-align: text-top;
margin-left: 5px; }
.sbm-bo .sbm-results-totaal span {
clear: right;
float: right; }
.sbm-bo .sbm-results-totaal .extra-info {
display: none;
width: 360px;
border: 1px solid #ccc;
padding: 20px;
position: absolute;
background-color: white;
right: 0px;
z-index: 1;
top: 38px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
background-color: #444;
color: white; }
.sbm-bo .sbm-results-totaal .extra-info .header {
font-size: 22px;
font-weight: bold;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc; }
.sbm-bo .sbm-results-totaal .extra-info .header span.label {
float: left; }
.sbm-bo .sbm-results-totaal .extra-info .header span.label i {
vertical-align: text-top;
margin-right: 5px;
overflow: visible; }
.sbm-bo .sbm-results-totaal .extra-info table {
float: left;
font-size: 14px; }
.sbm-bo .sbm-results-totaal .extra-info table td:first-child {
width: 120px;
font-weight: bold; }
.sbm-bo .sbm-results .leden-stat {
clear: left; }
.sbm-bo .sbm-results #rapport,
.sbm-bo .sbm-results #leden {
border: 1px solid #cecece;
/*margin-top: -20px;*/ }
.sbm-bo .sbm-results #rapport .total,
.sbm-bo .sbm-results #leden .total {
margin: 30px; }
.sbm-bo .sbm-results #rapport .total .actions-info,
.sbm-bo .sbm-results #leden .total .actions-info {
float: right;
position: relative;
text-align: right; }
.sbm-bo .sbm-results #rapport .total .actions-info span,
.sbm-bo .sbm-results #leden .total .actions-info span {
display: block;
width: 100%; }
.sbm-bo .sbm-results #rapport .total .actions-info > strong,
.sbm-bo .sbm-results #leden .total .actions-info > strong {
margin-bottom: 5px; }
.sbm-bo .sbm-results #rapport .total .actions-info .sub-info,
.sbm-bo .sbm-results #leden .total .actions-info .sub-info {
width: 320px;
right: 0;
top: 40px; }
.sbm-bo .sbm-results #rapport .total .actions-info .sub-info span,
.sbm-bo .sbm-results #leden .total .actions-info .sub-info span {
display: inline;
width: auto;
float: none;
margin-left: 20px; }
.sbm-bo .sbm-results table.event-history td.products * {
overflow: visible; }
.sbm-bo .sbm-results table.event-history td.products * li {
width: 200px;
overflow: hidden;
text-overflow: ellipsis; }
.sbm-bo .sbm-results table.event-history tr.even td.regNr {
background-color: #e2e2e2; }
.sbm-bo .sbm-results table.event-history tr.odd td.regNr {
background-color: #ebebeb; }
.sbm-bo .sbm-results table.event-history tr.even td.regNr:hover:not(.noclick),
.sbm-bo .sbm-results table.event-history tr.odd td.regNr:hover:not(.noclick) {
font-weight: bold; }
.sbm-bo .opties-uitklapmenu {
display: none;
background-color: rgba(255, 0, 0, 0.2);
position: absolute;
margin-top: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
z-index: 2;
right: 227px; }
.sbm-bo .opties-uitklapmenu button {
display: block;
width: 100%;
margin: 0 !important;
border-radius: 0;
background: #4a4a4a;
border-color: #111;
border-bottom: none; }
.sbm-bo .opties-uitklapmenu button:first-child {
border-top-right-radius: 5px;
border-top-left-radius: 5px; }
.sbm-bo .opties-uitklapmenu button:last-child {
border-bottom: 1px solid #111;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; }
.sbm-bo .opties-uitklapmenu button:hover {
background-color: grey;
opacity: 1; }
.sbm-bo .cornered::before, .sbm-bo .cornered::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-color: transparent;
border-style: solid; }
.sbm-bo .cornered::after {
border-width: 1.35em;
border-right-color: #929292;
border-top-color: #929292; }
.sbm-bo .sbm-shop-legenda {
padding: 30px;
color: #929292;
font-size: 11px; }
.sbm-bo .sbm-shop-legenda span {
margin-right: 40px;
line-height: 30px; }
.sbm-bo .sbm-shop-legenda span i {
vertical-align: middle;
margin-right: 5px; }
.sbm-bo .sbm-shop-legenda span i.cornered {
display: inline-block;
width: 14px;
height: 14px;
position: relative; }
.sbm-bo .sbm-shop-legenda span i.cornered::after {
border-width: 6px; }
.sbm-bo .sbm-shop-legenda span i.fa-eye-slash {
font-size: 12px; }
.sbm-bo .sbm-shop-legenda span.red {
color: red; }
.sbm-bo .sbm-shop-producten-box {
padding: 0px 30px 10px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten {
display: flex;
flex-wrap: wrap; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten-groepnaam {
display: flex;
margin-top: 20px;
margin-bottom: 30px;
position: relative;
cursor: pointer; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten-groepnaam strong {
font-size: 18px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten-groepnaam .line {
flex-grow: 1;
height: 1px;
background-color: #d1d1d1;
margin-top: 9px;
margin-right: 30px;
margin-left: 15px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten-groepnaam .line:first-child {
flex-grow: 0;
margin-left: 0px;
margin-right: 15px;
width: 20px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten-groepnaam a {
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
margin-top: 2px;
font-size: 18px;
color: #8a8a8a; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product {
margin-right: 20px;
margin-bottom: 20px;
position: relative;
margin-bottom: 30px;
width: 300px;
height: 270.5px;
cursor: pointer; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product img {
height: 150px;
width: 300px;
object-fit: cover; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .img-overlay {
width: 300px;
height: 150px;
background: white;
background: radial-gradient(circle, white 0%, rgba(66, 75, 87, 0) 80%, rgba(24, 36, 50, 0) 100%);
position: absolute;
top: 0;
left: 0;
background-position: -88px;
opacity: 0.5;
background-repeat: no-repeat; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product label {
background-color: #222222;
padding: 10px 15px;
color: white;
font-size: 18px;
margin-top: -65px;
float: left;
position: relative;
cursor: pointer;
min-width: 150px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .pid {
position: absolute;
z-index: 1;
top: 68px;
font-size: 11px;
font-weight: bold;
left: 15px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product.red label {
background-color: red; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .info {
background-color: #ededed;
border: 1px solid #cecece;
border-top: none;
padding: 15px;
height: 120px;
position: relative;
margin-top: -4px;
float: left;
width: 100%; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .info .groepnaam {
font-size: 16px;
font-weight: bold;
display: block;
margin-bottom: 8px;
max-width: 190px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .info .titel {
font-size: 14px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .info .cotractperiode {
position: absolute;
top: 15px;
right: 15px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .info .totaal-klanten {
position: absolute;
bottom: 15px;
left: 15px;
font-weight: bold;
font-style: italic;
color: #4c8f2b; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .info .iconen {
position: absolute;
bottom: 15px;
right: 15px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .info .iconen i {
margin-left: 5px;
vertical-align: middle; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .info .iconen i.fa-eye-slash {
font-size: 16px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .info.cornered::before, .sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .info.cornered::after {
top: 3px;
right: 3px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product .info.cornered::after {
border-width: 8px; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product:hover .info {
background-color: #e2e2e2; }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product.add .info {
border-top: 1px solid #cecece;
margin-top: 1px;
height: calc(100% - 1px); }
.sbm-bo .sbm-shop-producten-box .sbm-shop-producten .sbm-shop-product.add .info .groepnaam {
position: absolute;
width: 80%;
max-width: none;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #a1a4a5;
font-size: 18px;
font-weight: normal; }
/*# sourceMappingURL=shop.css.map */
/* /custom_modules/huisstijl/css/huisstijl.css */
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Nov 6, 2018, 9:22:43 AM
Author : Dave Spaans
*/
.sbm-huisstijl-uploads {
border: 1px solid #bbbbbb;
margin-bottom: 40px;
margin-right: 0px !important; }
.sbm-huisstijl-uploads .dz-preview {
display: none; }
.sbm-huisstijl-uploads .dropit {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: -3px; }
.sbm-huisstijl-uploads-tabs {
display: flex; }
.sbm-huisstijl-uploads-tabs a {
color: black;
text-decoration: none;
line-height: 44px;
flex: 1;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #bbbbbb;
cursor: pointer;
border-right: 1px solid #bbbbbb; }
.sbm-huisstijl-uploads-tabs a .sbmh-warning {
display: inline-block;
border-radius: 50%;
background-color: red;
width: 18px;
height: 18px;
color: white;
font-weight: bold;
line-height: 18px;
font-size: 14px;
vertical-align: middle;
margin-top: -4px;
margin-left: 4px; }
.sbm-huisstijl-uploads-tabs a:last-child {
border-right: none; }
.sbm-huisstijl-uploads-tabs a.selected {
border-bottom: 1px solid #dedede;
background-color: #dedede; }
.sbm-huisstijl-uploads-tabs a span {
font-weight: normal; }
.sbm-huisstijl-uploads .dropper {
display: none; }
.sbm-huisstijl-uploads-dummy {
height: 552px;
background-color: #dedede;
overflow: hidden;
position: relative;
padding-bottom: 80px; }
.sbm-huisstijl-uploads-dummy .sbm-state {
position: absolute;
top: 47px;
left: 50%;
transform: translateX(-50%);
z-index: 1; }
.sbm-huisstijl-uploads-dummy .sbmhd-logo-png {
height: 100%;
position: relative; }
.sbm-huisstijl-uploads-dummy .sbmhd-logo-png * {
pointer-events: none; }
.sbm-huisstijl-uploads-dummy .sbmhd-logo-png img {
max-width: 80%;
max-height: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); }
.sbm-huisstijl-uploads-dummy .sbmhd-logo-svg {
height: 100%;
position: relative; }
.sbm-huisstijl-uploads-dummy .sbmhd-logo-svg * {
pointer-events: none; }
.sbm-huisstijl-uploads-dummy .sbmhd-logo-svg .SVG {
width: 500px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80%;
max-height: 50%; }
.sbm-huisstijl-uploads-dummy .sbmhd-logo-svg .SVG svg {
width: 100%;
height: 100%; }
.sbm-huisstijl-uploads-dummy .sbmhd-color-hex {
position: relative;
height: 100%;
overflow: hidden !important; }
.sbm-huisstijl-uploads-dummy .sbmhd-color-hex .kleurinvoer {
position: absolute;
top: 50%;
left: 65px;
transform: translateY(-50%); }
.sbm-huisstijl-uploads-dummy .sbmhd-color-hex .kleurinvoer input {
width: 100%;
box-sizing: border-box !important;
margin-bottom: 10px;
height: 38px;
font-size: 14px;
text-transform: uppercase; }
.sbm-huisstijl-uploads-dummy .sbmhd-color-hex .kleurinvoer button {
width: 100%; }
.sbm-huisstijl-uploads-dummy .sbmhd-color-hex .color-example {
width: 247px;
height: 240px;
background-color: blue;
position: absolute;
top: 60px;
right: 0;
color: white;
font-weight: bold;
font-size: 58px;
line-height: 250px;
text-align: center;
padding-left: 58px; }
.sbm-huisstijl-uploads-dummy .sbmhd-color-hex img {
position: absolute;
right: -215px;
top: 50%;
transform: translateY(-50%); }
.sbm-huisstijl-uploads-dummy .sbmhd-background-jpeg {
top: 50%;
transform: translateY(-50%);
height: 373px;
position: relative; }
.sbm-huisstijl-uploads-dummy .sbmhd-background-jpeg * {
pointer-events: none; }
.sbm-huisstijl-uploads-dummy .sbmhd-background-jpeg img {
max-width: 80%;
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); }
.sbm-huisstijl-uploads-dummy .sbmhd-background-jpeg img:first-of-type {
height: 300px;
width: 435px;
margin-top: -34px;
object-fit: cover; }
.sbm-huisstijl-uploads-dummy .sbmhd-opties {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background-color: white;
border-top: 1px solid #bbbbbb;
text-align: center;
line-height: 62px;
padding-top: 8px; }
.sbm-huisstijl-uploads.dragging .sbm-huisstijl-uploads-dummy {
background-color: #191919; }
.sbm-huisstijl-uploads.dragging .sbm-huisstijl-uploads-dummy .dropper {
display: block;
position: absolute;
width: 80%;
height: 59%;
border: 4px dashed rgba(255, 255, 255, 0.5);
border-radius: 20px;
left: 0;
top: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: -40px;
color: rgba(255, 255, 255, 0.5);
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-top: 22%;
font-size: 32px; }
.sbm-huisstijl-uploads.dragging .sbm-huisstijl-uploads-dummy img, .sbm-huisstijl-uploads.dragging .sbm-huisstijl-uploads-dummy svg {
opacity: 0; }
.sbm-huisstijl-uploads.dragging .sbm-huisstijl-uploads-tabs a.selected {
background-color: #191919;
border-bottom-color: #191919;
color: white; }
.sbm-huisstijl-instructie {
padding: 23px 420px 23px 0;
position: relative;
border-bottom: 1px solid #7a7a7a; }
.sbm-huisstijl-instructie strong {
font-size: 14px;
margin-bottom: 5px;
display: block; }
.sbm-huisstijl-instructie span {
display: block; }
.sbm-huisstijl-instructie button {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%); }
.sbm-huisstijl-instructie:last-child {
border: none; }
/*# sourceMappingURL=huisstijl.css.map */
/* /custom_modules/_styleguide/css/styleguide.css */
@charset "UTF-8";
body .overlay * {
transition: all .35s ease-in-out; }
body .overlay * > * {
transition: unset; }
body.dark-mode {
background-image: none;
background-color: black;
color: white;
transition: all .25s ease-in-out; }
body.dark-mode.dock_wrapped .dock_categories a span {
visibility: collapse; }
body.dark-mode.dock_wrapped .dock_categories a span i {
visibility: visible; }
body.dark-mode .dock_categories {
background-color: #cacaca; }
body.dark-mode .dock_categories a {
color: white;
background-color: #a0a0a0;
border-bottom: 1px solid #cacaca; }
body.dark-mode .dock_categories a.selected:not(.pin) {
background-color: #33566c; }
body.dark-mode .overlay .dialog .container h1 {
color: unset;
background-color: unset; }
body.dark-mode .overlay .dialog .container h1 > span, body.dark-mode .overlay .dialog .container h1 > i, body.dark-mode .overlay .dialog .container h1 > a {
color: white; }
body.dark-mode .overlay .dialog .container .inner_overlay .dialog .container {
background-color: #2b2a2a; }
body.dark-mode .overlay,
body.dark-mode .overlay .dialog,
body.dark-mode .overlay .dialog .container {
background-image: none;
background-color: black;
transition: all .25s ease-in-out; }
body.dark-mode .overlay .content,
body.dark-mode .overlay .dialog .content,
body.dark-mode .overlay .dialog .container .content {
border: 1px solid #292929;
background-color: #202020;
transition: all .25s ease-in-out; }
body.dark-mode .overlay .content > h1, body.dark-mode .overlay .content > h2, body.dark-mode .overlay .content > h3, body.dark-mode .overlay .content > h4, body.dark-mode .overlay .content > p, body.dark-mode .overlay .content > span, body.dark-mode .overlay .content > a,
body.dark-mode .overlay .dialog .content > h1,
body.dark-mode .overlay .dialog .content > h2,
body.dark-mode .overlay .dialog .content > h3,
body.dark-mode .overlay .dialog .content > h4,
body.dark-mode .overlay .dialog .content > p,
body.dark-mode .overlay .dialog .content > span,
body.dark-mode .overlay .dialog .content > a,
body.dark-mode .overlay .dialog .container .content > h1,
body.dark-mode .overlay .dialog .container .content > h2,
body.dark-mode .overlay .dialog .container .content > h3,
body.dark-mode .overlay .dialog .container .content > h4,
body.dark-mode .overlay .dialog .container .content > p,
body.dark-mode .overlay .dialog .container .content > span,
body.dark-mode .overlay .dialog .container .content > a {
color: white; }
body.dark-mode .overlay .content > h1 span, body.dark-mode .overlay .content > h1 i, body.dark-mode .overlay .content > h1 a, body.dark-mode .overlay .content > h2 span, body.dark-mode .overlay .content > h2 i, body.dark-mode .overlay .content > h2 a, body.dark-mode .overlay .content > h3 span, body.dark-mode .overlay .content > h3 i, body.dark-mode .overlay .content > h3 a, body.dark-mode .overlay .content > h4 span, body.dark-mode .overlay .content > h4 i, body.dark-mode .overlay .content > h4 a, body.dark-mode .overlay .content > p span, body.dark-mode .overlay .content > p i, body.dark-mode .overlay .content > p a, body.dark-mode .overlay .content > span span, body.dark-mode .overlay .content > span i, body.dark-mode .overlay .content > span a, body.dark-mode .overlay .content > a span, body.dark-mode .overlay .content > a i, body.dark-mode .overlay .content > a a,
body.dark-mode .overlay .dialog .content > h1 span,
body.dark-mode .overlay .dialog .content > h1 i,
body.dark-mode .overlay .dialog .content > h1 a,
body.dark-mode .overlay .dialog .content > h2 span,
body.dark-mode .overlay .dialog .content > h2 i,
body.dark-mode .overlay .dialog .content > h2 a,
body.dark-mode .overlay .dialog .content > h3 span,
body.dark-mode .overlay .dialog .content > h3 i,
body.dark-mode .overlay .dialog .content > h3 a,
body.dark-mode .overlay .dialog .content > h4 span,
body.dark-mode .overlay .dialog .content > h4 i,
body.dark-mode .overlay .dialog .content > h4 a,
body.dark-mode .overlay .dialog .content > p span,
body.dark-mode .overlay .dialog .content > p i,
body.dark-mode .overlay .dialog .content > p a,
body.dark-mode .overlay .dialog .content > span span,
body.dark-mode .overlay .dialog .content > span i,
body.dark-mode .overlay .dialog .content > span a,
body.dark-mode .overlay .dialog .content > a span,
body.dark-mode .overlay .dialog .content > a i,
body.dark-mode .overlay .dialog .content > a a,
body.dark-mode .overlay .dialog .container .content > h1 span,
body.dark-mode .overlay .dialog .container .content > h1 i,
body.dark-mode .overlay .dialog .container .content > h1 a,
body.dark-mode .overlay .dialog .container .content > h2 span,
body.dark-mode .overlay .dialog .container .content > h2 i,
body.dark-mode .overlay .dialog .container .content > h2 a,
body.dark-mode .overlay .dialog .container .content > h3 span,
body.dark-mode .overlay .dialog .container .content > h3 i,
body.dark-mode .overlay .dialog .container .content > h3 a,
body.dark-mode .overlay .dialog .container .content > h4 span,
body.dark-mode .overlay .dialog .container .content > h4 i,
body.dark-mode .overlay .dialog .container .content > h4 a,
body.dark-mode .overlay .dialog .container .content > p span,
body.dark-mode .overlay .dialog .container .content > p i,
body.dark-mode .overlay .dialog .container .content > p a,
body.dark-mode .overlay .dialog .container .content > span span,
body.dark-mode .overlay .dialog .container .content > span i,
body.dark-mode .overlay .dialog .container .content > span a,
body.dark-mode .overlay .dialog .container .content > a span,
body.dark-mode .overlay .dialog .container .content > a i,
body.dark-mode .overlay .dialog .container .content > a a {
color: white; }
body.dark-mode .entered::before {
background-image: none;
background-color: black;
color: white;
transition: all .25s ease-in-out; }
.styleguide {
margin-bottom: 1.5rem;
/* Reset */
/* Wrapper voor Styleguide */
/*
==== Core ====
*/
/*
Variables
*/
/* Form */
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/*
GRID
- .column
- .row
*/
/* row, space-between */
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/* Kleine font size. 75% van de basis font size: 16px.
Uiteindelijke grootte 12px
*/
/*
Buttons
- buttons (grootte, kleur)
*/
/*
Variables
*/
/* Form */
/* Kleur lettertype op basis van achtergrondkleur */
/* Basis button */
/* Grootte button */
/* Button */
/* vierkante tegel buttons */
/* Samengesteld */
/*
Labels
- labels
Deze haalt de eigenschappen op van de buttons en krijgt een overschrijving
zoals het weghalen van de hoverstate en de cursor eigenschap.
*/
/*
Variables
*/
/* Form */
/*
Buttons
- buttons (grootte, kleur)
*/
/*
Variables
*/
/* Form */
/* Kleur lettertype op basis van achtergrondkleur */
/* Basis button */
/* Grootte button */
/* Button */
/* vierkante tegel buttons */
/* Samengesteld */
/* Kleur lettertype op basis van achtergrondkleur */
/* basis label */
/* Label */
/* Samengesteld */
/*
Filters
*/
/*
Variables
*/
/* Form */
/*
Buttons
- buttons (grootte, kleur)
*/
/*
Variables
*/
/* Form */
/* Kleur lettertype op basis van achtergrondkleur */
/* Basis button */
/* Grootte button */
/* Button */
/* vierkante tegel buttons */
/* Samengesteld */
/* Kleur lettertype op basis van achtergrondkleur */
/* basis label */
/* Label */
/* Samengesteld */
/*
==== Forms ====
*/
/*
Forms
- fieldset
- label
- formgroup / infogroup
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/*
Variables
*/
/* Form */
/*
Forms - input
*/
/* Label */
/* Formgroup (wrapper voor label en input) */
/* formgroup / infogroup */
/* Samengesteld */
/*
Variables
*/
/* Form */
/*
Forms - input
*/
/*
Variables
*/
/* Form */
/* INFO BOX
.formgroup__info content box die tevoorschijn komt wanneer je op de bol met vraagteken in een formulier klikt.
*/
/*
==== Tabs ====
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/*
==== Components ====
*/
/*
Paginering
Navigatie buttons om te pagineren. (naar links, rechts of direct naar een bepaalde paginanummer.
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/*
Zebralist
Wanneer er diverse regels zijn en onderling om en om een grijze kleur geven moet worden.
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/* Grote kans dat er meerdere cards in de toekomst komen. vandaar de _all.scss */
/*
Card
- standaard
- product card
- product (toevoegen) card
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/* Card */
/* Content gedeelte van de card. */
/* De gehele card door een loop zodat deze alle gedefineerde kleuren krijgt.
De kleuren zijn terug te vinden in /secure/plugins/custom_modules/_css_backoffic/core/variables.scss
*/
/* Samengesteld */
/*
List Group
Lijst met diverse eigenschappen zoals teller, content en icoon.
Voor bijvoorbeeld roosterbezetting onder Management.
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/* variabele voor hergebruik in diepere lagen */
/* .list-group - basis */
/*
Tiles
Wordt momenteel gebruikt in list-group--tiles
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/* variabele voor hergebruik in diepere lagen */
/* .tiles - basis */
/*
Calendar
Alle benodigdheden voor calender eigenschappen.
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/* Kleur lettertype op basis van achtergrondkleur */
/*
Actionbar
Content met info en een actiebutton waarbij de gehele content een achtergrondkleur heeft.
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/*
Variables
*/
/* Form */
/*
GRID
- .column
- .row
*/
/* row, space-between */
/*
Forms
- fieldset
- label
- formgroup / infogroup
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/*
Variables
*/
/* Form */
/*
Forms - input
*/
/* Label */
/* Formgroup (wrapper voor label en input) */
/* formgroup / infogroup */
/* Samengesteld */
/*
Variables
*/
/* Form */
/*
Forms - input
*/
/* variabele voor hergebruik in diepere lagen */
/* .list-group - basis */
/* Samengesteld */
/*
Tabel
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/* Samengesteld */
/*
Tabel
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/*
Headers
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/*
Filters
*/
/*
Variables
*/
/* Form */
/*
Alert
Voor succes, waarschuwingen en errors.
*/
/*
BASE
Algemeen: body, hr, .bg--grey
*/
/*
Variables
*/
/* Form */
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700");
/*
Variables
*/
/* Form */
/* Kleur lettertype op basis van achtergrondkleur */
/*
Variables
*/
/* Form */
/*
==== Important ====
*/
/*
Important komt onderaan de stijling die ervoor zorgt dat het op een nette manier de stijling overschrijft.
Op deze manier is er nog altijd ruimte voor een !important mocht dat echt nodig zijn.
*/
/*
Variables
*/
/* Form */ }
.styleguide--wrapper {
max-width: 100%;
padding-bottom: 3rem;
margin: -21px 14px 0; }
.styleguide h1,
.styleguide h2,
.styleguide h3,
.styleguide h4,
.styleguide h5,
.styleguide h6,
.styleguide code *,
.styleguide pre *,
.styleguide form,
.styleguide input,
.styleguide select {
all: initial; }
.styleguide *:not(form) {
box-sizing: border-box; }
.styleguide .sg__example {
display: flex;
flex-direction: column;
width: 100%;
padding: 3rem 0 5rem 1rem;
border-left: 0.5rem solid #ececec; }
.styleguide .html-snippet {
margin: 2rem 0 1rem 0; }
.styleguide .html-snippet > button {
transition: opacity 0.5s ease-in-out;
display: inline-block; }
.styleguide textarea#insluitCodeWebInt, .styleguide pre {
opacity: 0;
height: 0px; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
.styleguide .d-flex {
display: flex; }
.styleguide .align-items-start {
align-items: flex-start; }
.styleguide .align-items-center {
align-items: center; }
.styleguide .align-items-end {
align-items: flex-end; }
.styleguide .justify-content-center {
justify-content: center; }
.styleguide .justify-content-start {
justify-content: flex-start; }
.styleguide .justify-content-end {
justify-content: flex-end; }
.styleguide .flex-column {
flex-direction: column; }
.styleguide .flex-row, .styleguide .actionbar--variant-1 > div > div, .styleguide .actionbar--variant-2 > div > div, .styleguide .actionbar--variant-2 > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div:nth-child(2) > div:nth-child(1), .styleguide .table__video-title {
flex-direction: row; }
.styleguide .gap-1 {
gap: 0.25rem; }
.styleguide .gap-2 {
gap: 0.5rem; }
.styleguide .gap-3 {
gap: 0.75rem; }
.styleguide .gap-4 {
gap: 1rem; }
.styleguide .column, .styleguide .financieel-table > div > div:nth-of-type(2) > div {
display: flex;
flex-direction: column;
flex-wrap: wrap; }
.styleguide .column > div, .styleguide .financieel-table > div > div:nth-of-type(2) > div > div {
display: flex;
flex-grow: 0;
flex-shrink: 0;
margin: 0 0 1rem;
padding: 0.75rem;
align-items: flex-start; }
.styleguide .column > span, .styleguide .financieel-table > div > div:nth-of-type(2) > div > span {
display: flex;
flex-grow: 0;
flex-shrink: 0;
margin: 0 0 0.25rem;
align-items: space-between; }
.styleguide .row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
position: relative;
/* ipv space-between forceren dat het links wordt uitgelijnd */
/* Onderliggende div automatisch column */
/* Genereren van 12 kolommen */ }
.styleguide .row--start {
justify-content: start; }
.styleguide .row--end {
justify-content: flex-end; }
.styleguide .row--no-gap {
margin-bottom: 1rem; }
.styleguide .row > div {
display: flex;
flex-flow: column;
flex-grow: 1;
flex-shrink: 0;
flex: 0 0 100%;
margin: 0 0 1rem;
padding: 0.75rem;
box-sizing: border-box;
overflow: hidden; }
.styleguide .row > div.flex-grow, .styleguide .actionbar--variant-1.row > div, .styleguide .actionbar--variant-1 > div > div.row > div:nth-child(2), .styleguide .actionbar--variant-2.row > div, .styleguide .actionbar--variant-2 > div > div.row > div:nth-child(2), .styleguide .row > div.header__profiel__edit, .styleguide .row > div.header__profiel__contact {
flex-grow: 1; }
.styleguide .row > div.flex-shrink {
flex-shrink: 1; }
.styleguide .row > div.align-start {
align-items: flex-start; }
.styleguide .row > div.no-flex {
display: unset;
flex: unset; }
.styleguide .row--no-margin {
padding-left: 0;
padding-right: 0; }
.styleguide .row--no-margin > div {
padding-left: 0;
padding-right: 0; }
.styleguide .row--1 > div {
flex: 0 0 calc(100% / 1 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--1 > div {
flex: 0 0 100%; } }
.styleguide .row--1--no-gap {
margin-bottom: 1rem; }
.styleguide .row--1--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--1--no-gap > ul:nth-of-type(1) {
margin-right: 0; }
.styleguide .row--2 > div {
flex: 0 0 calc(100% / 2 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--2 > div {
flex: 0 0 100%; } }
.styleguide .row--2--no-gap {
margin-bottom: 1rem; }
.styleguide .row--2--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--2--no-gap > ul:nth-of-type(2) {
margin-right: 0; }
.styleguide .row--3 > div {
flex: 0 0 calc(100% / 3 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--3 > div {
flex: 0 0 100%; } }
.styleguide .row--3--no-gap {
margin-bottom: 1rem; }
.styleguide .row--3--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--3--no-gap > ul:nth-of-type(3) {
margin-right: 0; }
.styleguide .row--4 > div {
flex: 0 0 calc(100% / 4 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--4 > div {
flex: 0 0 100%; } }
.styleguide .row--4--no-gap {
margin-bottom: 1rem; }
.styleguide .row--4--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--4--no-gap > ul:nth-of-type(4) {
margin-right: 0; }
.styleguide .row--5 > div {
flex: 0 0 calc(100% / 5 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--5 > div {
flex: 0 0 100%; } }
.styleguide .row--5--no-gap {
margin-bottom: 1rem; }
.styleguide .row--5--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--5--no-gap > ul:nth-of-type(5) {
margin-right: 0; }
.styleguide .row--6 > div {
flex: 0 0 calc(100% / 6 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--6 > div {
flex: 0 0 100%; } }
.styleguide .row--6--no-gap {
margin-bottom: 1rem; }
.styleguide .row--6--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--6--no-gap > ul:nth-of-type(6) {
margin-right: 0; }
.styleguide .row--7 > div {
flex: 0 0 calc(100% / 7 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--7 > div {
flex: 0 0 100%; } }
.styleguide .row--7--no-gap {
margin-bottom: 1rem; }
.styleguide .row--7--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--7--no-gap > ul:nth-of-type(7) {
margin-right: 0; }
.styleguide .row--8 > div {
flex: 0 0 calc(100% / 8 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--8 > div {
flex: 0 0 100%; } }
.styleguide .row--8--no-gap {
margin-bottom: 1rem; }
.styleguide .row--8--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--8--no-gap > ul:nth-of-type(8) {
margin-right: 0; }
.styleguide .row--9 > div {
flex: 0 0 calc(100% / 9 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--9 > div {
flex: 0 0 100%; } }
.styleguide .row--9--no-gap {
margin-bottom: 1rem; }
.styleguide .row--9--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--9--no-gap > ul:nth-of-type(9) {
margin-right: 0; }
.styleguide .row--10 > div {
flex: 0 0 calc(100% / 10 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--10 > div {
flex: 0 0 100%; } }
.styleguide .row--10--no-gap {
margin-bottom: 1rem; }
.styleguide .row--10--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--10--no-gap > ul:nth-of-type(10) {
margin-right: 0; }
.styleguide .row--11 > div {
flex: 0 0 calc(100% / 11 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--11 > div {
flex: 0 0 100%; } }
.styleguide .row--11--no-gap {
margin-bottom: 1rem; }
.styleguide .row--11--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--11--no-gap > ul:nth-of-type(11) {
margin-right: 0; }
.styleguide .row--12 > div {
flex: 0 0 calc(100% / 12 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--12 > div {
flex: 0 0 100%; } }
.styleguide .row--12--no-gap {
margin-bottom: 1rem; }
.styleguide .row--12--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--12--no-gap > ul:nth-of-type(12) {
margin-right: 0; }
.styleguide .flex-row, .styleguide .actionbar--variant-1 > div > div, .styleguide .actionbar--variant-2 > div > div, .styleguide .actionbar--variant-2 > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div:nth-child(2) > div:nth-child(1), .styleguide .table__video-title {
display: flex;
flex-direction: row;
max-width: 100%; }
.styleguide .flex-column {
display: flex;
flex-direction: column; }
.styleguide .space-between {
flex-flow: row wrap;
justify-content: space-between; }
.styleguide .inline-space-between {
display: inline-flex;
flex: 0 1 100%;
flex-flow: row wrap;
justify-content: space-between; }
.styleguide .flex-center {
display: flex;
justify-content: center;
align-items: center; }
.styleguide .flex-start {
display: flex;
justify-content: flex-start; }
.styleguide .flex-end, .styleguide .actionbar--variant-1 > div > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div > div:nth-child(2) {
display: flex;
justify-content: flex-end; }
.styleguide .flex-grow, .styleguide .actionbar--variant-1 > div, .styleguide .actionbar--variant-1 > div > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div, .styleguide .actionbar--variant-2 > div > div > div:nth-child(2), .styleguide .header__profiel__edit, .styleguide .header__profiel__contact {
flex: 1 0; }
.styleguide .flex-shrink {
flex: 0 1; }
.styleguide .align-start {
align-items: flex-start;
place-self: flex-start; }
.styleguide .align-center, .styleguide .actionbar--variant-1 > div > div, .styleguide .actionbar--variant-1 > div > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div, .styleguide .actionbar--variant-2 > div > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div:nth-child(2) > div:nth-child(1) {
align-items: center; }
.styleguide .align-end {
align-items: flex-end; }
.styleguide .row-align-center {
display: flex;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.5rem; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
.styleguide h1, .styleguide h2, .styleguide h3, .styleguide h4, .styleguide h5, .styleguide h6, .styleguide p, .styleguide a, .styleguide label, .styleguide strong, .styleguide em, .styleguide button {
font: normal normal normal 14px/20px Arial, Helvetica, sans-serif;
line-height: 1.2em;
color: #222222; }
body.dark-mode .styleguide h1,
body.dark-mode .styleguide h2,
body.dark-mode .styleguide h3,
body.dark-mode .styleguide h4,
body.dark-mode .styleguide h5,
body.dark-mode .styleguide h6,
body.dark-mode .styleguide p,
body.dark-mode .styleguide a,
body.dark-mode .styleguide label,
body.dark-mode .styleguide strong,
body.dark-mode .styleguide em,
body.dark-mode .styleguide button {
color: #ffffff; }
.styleguide .color {
color: #222222; }
.styleguide .color--white {
color: #ffffff !important; }
.styleguide .color--black {
color: #222222 !important; }
body.dark-mode .styleguide .color--black {
color: #ffffff !important; }
.styleguide .color--cyaan {
color: #6ebfce !important; }
.styleguide .color--grey {
color: #f3f3f3 !important; }
.styleguide .color--grey-70 {
color: #d5d5d5 !important; }
.styleguide .color--grey-dark, .styleguide .add-new--product i, .styleguide .add-new--product h2 {
color: #a2a2a2 !important; }
.styleguide .color--grey-darker {
color: #6f6f6f !important; }
body.dark-mode .styleguide .color--grey-darker {
color: #ffffff !important; }
.styleguide .color--primary {
color: #33566c !important; }
.styleguide .color--red {
color: #f28282 !important; }
.styleguide .color--red-dark {
color: #ed5454 !important; }
.styleguide .color--green {
color: #96e094 !important; }
.styleguide .color--green-darker {
color: #34aa31 !important; }
.styleguide .color--avocado {
color: #8eb03a !important; }
.styleguide .color--yellow {
color: #f0f282 !important; }
.styleguide .color--yellow-darken {
color: #eaed54 !important; }
.styleguide .color--orange {
color: #cd8f17 !important; }
.styleguide .color--blue {
color: #79afe2 !important; }
.styleguide .color--light-blue {
color: #82aaf2 !important; }
.styleguide .color--niet-actief {
color: #f28282 !important; }
.styleguide .color--actief {
color: #96e094 !important; }
.styleguide .color--vimeo {
color: #02ADEF !important; }
.styleguide .color--youtube {
color: #FF0200 !important; }
.styleguide p, .styleguide a, .styleguide span, .styleguide label {
font: .75rem/1.5 Arial, Helvetica, sans-serif;
color: #222222;
margin: 0;
padding: 0; }
body.dark-mode .styleguide p,
body.dark-mode .styleguide a,
body.dark-mode .styleguide span,
body.dark-mode .styleguide label {
color: #ffffff; }
.styleguide p.no-underline, .styleguide a.no-underline, .styleguide span.no-underline, .styleguide label.no-underline {
text-decoration: none; }
.styleguide label {
font: .75rem/1.5 'Roboto', sans-serif;
margin: 0;
padding: 0; }
.styleguide p.error {
background-color: #ffdee2;
color: #aa0000;
border: 1px solid #aa0000;
margin: 0 0 20px 0;
padding: 20px;
background-image: url("/dexos/images/warning.gif");
background-position: 20px center;
background-repeat: no-repeat;
padding-left: 65px;
font-weight: bold;
display: flex; }
.styleguide p.success {
background-color: #f0f6dd;
color: #8eb03a;
border: 1px solid #8eb03a;
margin: 0 0 20px 0;
padding: 20px;
background-image: url("/dexos/images/succes.gif");
background-position: 20px center;
background-repeat: no-repeat;
padding-left: 65px;
font-weight: bold; }
.styleguide p.warning {
background-color: #fff2c1;
color: #332c0d;
border: 1px solid #DBD4BF;
margin: 0 0 20px 0;
padding: 20px;
padding-left: 65px;
font-weight: bold;
position: relative; }
.styleguide p.warning::before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 65px;
height: 100%;
background-image: url("/dexos/images/warning.gif");
background-position: 20px center;
background-repeat: no-repeat;
opacity: .3;
filter: grayscale(100%); }
.styleguide p.warning a {
color: red; }
.styleguide strong {
font-weight: 600; }
.styleguide em {
font-style: italic; }
.styleguide a {
color: #222222;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
position: relative; }
.styleguide .icon-link {
text-decoration: none; }
.styleguide .icon-link i {
margin: 0 .25rem;
text-decoration: none; }
.styleguide .icon-link span {
text-decoration: underline;
font-weight: 700; }
.styleguide h1, .styleguide .h1, .styleguide .overlay .dialog .container h1 {
display: block;
font-size: 2rem;
line-height: 1.2em;
font-weight: 600;
border-bottom: 0 solid #c9c9c9;
margin-bottom: 1rem;
padding-bottom: .5rem;
overflow: visible;
background-color: unset !important;
color: #222222 !important;
font-size: 2rem !important;
line-height: 1.2em !important;
padding-left: 0 !important;
margin: 0 0 1rem 0 !important; }
.styleguide h1 i,
.styleguide .h1 i,
.styleguide .overlay .dialog .container h1 i {
font-size: calc($fontsize + .125rem);
line-height: calc($fontsize + .25rem);
margin-right: .5rem;
width: 1.25rem;
display: inline-block;
position: relative; }
.styleguide h1--line, .styleguide .h1--line, .styleguide .overlay .dialog .container h1--line {
border-bottom: 1px solid #c9c9c9;
width: 100%; }
body.dark-mode .styleguide h1--line,
body.dark-mode .styleguide .h1--line,
body.dark-mode .styleguide .overlay .dialog .container h1--line {
border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
body.dark-mode .styleguide h1,
body.dark-mode .styleguide .h1,
body.dark-mode .styleguide .overlay .dialog .container h1 {
color: #ffffff !important; }
.styleguide h2,
.styleguide .h2 {
display: block;
font-size: 1.25rem;
line-height: 1.2em;
font-weight: 600;
border-bottom: 0 solid #c9c9c9;
margin-bottom: 1rem;
padding-bottom: .5rem;
overflow: visible; }
.styleguide h2 i,
.styleguide .h2 i {
font-size: calc($fontsize + .125rem);
line-height: calc($fontsize + .25rem);
margin-right: .5rem;
width: 1.25rem;
display: inline-block;
position: relative; }
.styleguide h2--line, .styleguide .h2--line {
border-bottom: 1px solid #c9c9c9;
width: 100%; }
body.dark-mode .styleguide h2--line,
body.dark-mode .styleguide .h2--line {
border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.styleguide h2--no-margin,
.styleguide .h2--no-margin {
margin-bottom: 0; }
.styleguide h2--no-m-p,
.styleguide .h2--no-m-p {
margin: 0;
padding: 0; }
.styleguide h3,
.styleguide .h3,
.styleguide .calendar__nav-arrow {
display: block;
font-size: 1.125rem;
line-height: 1.2em;
font-weight: 600;
border-bottom: 0 solid #c9c9c9;
margin-bottom: 1rem;
padding-bottom: .5rem;
overflow: visible; }
.styleguide h3 i,
.styleguide .h3 i,
.styleguide .calendar__nav-arrow i {
font-size: calc($fontsize + .125rem);
line-height: calc($fontsize + .25rem);
margin-right: .5rem;
width: 1.25rem;
display: inline-block;
position: relative; }
.styleguide h3--line, .styleguide .h3--line {
border-bottom: 1px solid #c9c9c9;
width: 100%; }
body.dark-mode .styleguide h3--line,
body.dark-mode .styleguide .h3--line {
border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.styleguide h3--no-margin,
.styleguide .h3--no-margin {
margin-bottom: 0; }
.styleguide h3--no-m-p,
.styleguide .h3--no-m-p {
margin: 0;
padding: 0; }
.styleguide h3--modal,
.styleguide .h3--modal {
margin-bottom: 0; }
.styleguide h4, .styleguide .h4, .styleguide .calendar__nav-day {
display: inline-block;
font-size: 1rem;
line-height: 1.2em;
font-weight: 400;
border-bottom: 0 solid #c9c9c9;
margin-bottom: 1rem;
padding-bottom: .5rem;
overflow: visible; }
.styleguide h4 i,
.styleguide .h4 i,
.styleguide .calendar__nav-day i {
font-size: calc($fontsize + .125rem);
line-height: calc($fontsize + .25rem);
margin-right: .5rem;
width: 1.25rem;
display: inline-block;
position: relative; }
.styleguide h4--line, .styleguide .h4--line {
border-bottom: 1px solid #c9c9c9;
width: 100%; }
body.dark-mode .styleguide h4--line,
body.dark-mode .styleguide .h4--line {
border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.styleguide h4--no-margin,
.styleguide .h4--no-margin {
margin-bottom: 0; }
.styleguide h4--no-m-p,
.styleguide .h4--no-m-p {
margin: 0;
padding: 0; }
body.dark-mode .styleguide h4,
body.dark-mode .styleguide .h4,
body.dark-mode .styleguide .calendar__nav-day {
color: #ffffff; }
.styleguide h5, .styleguide .h5 {
display: inline-block;
font-size: 1rem;
line-height: 1.2em;
font-weight: 400;
border-bottom: 0 solid #c9c9c9;
margin-bottom: 1rem;
padding-bottom: .5rem;
overflow: visible;
text-transform: uppercase; }
.styleguide h5 i,
.styleguide .h5 i {
font-size: calc($fontsize + .125rem);
line-height: calc($fontsize + .25rem);
margin-right: .5rem;
width: 1.25rem;
display: inline-block;
position: relative; }
.styleguide h5--line, .styleguide .h5--line {
border-bottom: 1px solid #c9c9c9;
width: 100%; }
body.dark-mode .styleguide h5--line,
body.dark-mode .styleguide .h5--line {
border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.styleguide h5--no-margin,
.styleguide .h5--no-margin {
margin-bottom: 0; }
.styleguide h5--no-m-p,
.styleguide .h5--no-m-p {
margin: 0;
padding: 0; }
body.dark-mode .styleguide h5,
body.dark-mode .styleguide .h5 {
color: #ffffff; }
.styleguide .text-line {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), silver calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));
margin-bottom: 1rem;
padding: 0;
position: relative;
border-bottom: 0;
text-decoration: none; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--white {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #ffffff calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--white > span, .styleguide .text-line--white > a {
color: #ffffff !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--black {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #222222 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--black > span, .styleguide .text-line--black > a {
color: #222222 !important; }
body.dark-mode .styleguide .text-line--black > span, body.dark-mode .styleguide .text-line--black > a {
color: #ffffff !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--cyaan {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #6ebfce calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--cyaan > span, .styleguide .text-line--cyaan > a {
color: #6ebfce !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--grey {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #f3f3f3 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--grey > span, .styleguide .text-line--grey > a {
color: #f3f3f3 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--grey-70 {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #d5d5d5 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--grey-70 > span, .styleguide .text-line--grey-70 > a {
color: #d5d5d5 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--grey-dark {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #a2a2a2 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--grey-dark > span, .styleguide .text-line--grey-dark > a {
color: #a2a2a2 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--grey-darker {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #6f6f6f calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--grey-darker > span, .styleguide .text-line--grey-darker > a {
color: #6f6f6f !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--primary {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #33566c calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--primary > span, .styleguide .text-line--primary > a {
color: #33566c !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--red {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #f28282 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--red > span, .styleguide .text-line--red > a {
color: #f28282 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--red-dark {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #ed5454 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--red-dark > span, .styleguide .text-line--red-dark > a {
color: #ed5454 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--green {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #96e094 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--green > span, .styleguide .text-line--green > a {
color: #96e094 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--green-darker {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #34aa31 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--green-darker > span, .styleguide .text-line--green-darker > a {
color: #34aa31 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--avocado {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #8eb03a calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--avocado > span, .styleguide .text-line--avocado > a {
color: #8eb03a !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--yellow {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #f0f282 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--yellow > span, .styleguide .text-line--yellow > a {
color: #f0f282 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--yellow-darken {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #eaed54 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--yellow-darken > span, .styleguide .text-line--yellow-darken > a {
color: #eaed54 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--orange {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #cd8f17 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--orange > span, .styleguide .text-line--orange > a {
color: #cd8f17 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--blue {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #79afe2 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--blue > span, .styleguide .text-line--blue > a {
color: #79afe2 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--light-blue {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #82aaf2 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--light-blue > span, .styleguide .text-line--light-blue > a {
color: #82aaf2 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--niet-actief {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #f28282 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--niet-actief > span, .styleguide .text-line--niet-actief > a {
color: #f28282 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--actief {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #96e094 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--actief > span, .styleguide .text-line--actief > a {
color: #96e094 !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--vimeo {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #02ADEF calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--vimeo > span, .styleguide .text-line--vimeo > a {
color: #02ADEF !important; }
.styleguide .text-line span {
font-size: inherit;
line-height: 1em;
font-weight: inherit;
padding: 0 1rem 0;
margin-left: 1rem;
margin-bottom: 0;
background: #ffffff;
color: #222222; }
body.dark-mode .styleguide .text-line span {
background: #202020 !important;
color: #ffffff; }
.styleguide .text-line a {
padding: 0 1rem 0;
background: #ffffff;
position: absolute;
right: 0;
font-size: 1rem;
top: calc(50% - 2px);
transform: translate(0, calc(-50% + 1px));
color: #222222;
text-decoration: none; }
body.dark-mode .styleguide .text-line a {
background: #202020 !important; }
.styleguide .text-line--youtube {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), #FF0200 calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px)); }
.styleguide .text-line--youtube > span, .styleguide .text-line--youtube > a {
color: #FF0200 !important; }
.styleguide .text-line--toggle {
cursor: pointer; }
.styleguide .small-text {
font-size: 0.75rem !important;
font-weight: 100 !important; }
body.dark-mode .styleguide .small-text {
color: #ffffff; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #33566c;
border: 1px solid #233a49;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .button i, .styleguide .button > i {
color: #ffffff;
cursor: pointer; }
.styleguide .button span, .styleguide .button > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .button {
justify-content: center; } }
.styleguide .button:hover {
background-color: #1a2d38;
color: #ffffff; }
.styleguide .button:hover i, .styleguide .button:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #46a0d9;
border: 1px solid #2887c3;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button i, body.dark-mode .styleguide .button > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button span, body.dark-mode .styleguide .button > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button {
justify-content: center; } }
body.dark-mode .styleguide .button:hover {
background-color: #2479ae;
color: #ffffff; }
body.dark-mode .styleguide .button:hover i, body.dark-mode .styleguide .button:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button, body .styleguide .button {
/* Kleur button genereren */ }
body.dark-mode .styleguide .button--white, body .styleguide .button--white {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #ffffff;
border: 1px solid #e6e6e6;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
border: 1px solid #f2f2f2; }
body.dark-mode .styleguide .button--white i, body.dark-mode .styleguide .button--white > i, body .styleguide .button--white i, body .styleguide .button--white > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--white span, body.dark-mode .styleguide .button--white > span, body .styleguide .button--white span, body .styleguide .button--white > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--white, body .styleguide .button--white {
justify-content: center; } }
body.dark-mode .styleguide .button--white:hover, body .styleguide .button--white:hover {
background-color: #fafafa;
border: 1px solid #e6e6e6;
color: #222222; }
body.dark-mode .styleguide .button--white:hover i, body.dark-mode .styleguide .button--white:hover span, body .styleguide .button--white:hover i, body .styleguide .button--white:hover span {
color: #222222; }
body.dark-mode .styleguide .button--black, body .styleguide .button--black {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #222222;
border: 1px solid #090909;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
border: 1px solid rgba(255, 255, 255, 0.3); }
body.dark-mode .styleguide .button--black i, body.dark-mode .styleguide .button--black > i, body .styleguide .button--black i, body .styleguide .button--black > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--black span, body.dark-mode .styleguide .button--black > span, body .styleguide .button--black span, body .styleguide .button--black > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--black, body .styleguide .button--black {
justify-content: center; } }
body.dark-mode .styleguide .button--black:hover, body .styleguide .button--black:hover {
background-color: black;
color: #ffffff; }
body.dark-mode .styleguide .button--black:hover i, body.dark-mode .styleguide .button--black:hover span, body .styleguide .button--black:hover i, body .styleguide .button--black:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--cyaan, body .styleguide .button--cyaan {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #6ebfce;
border: 1px solid #48aec1;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--cyaan i, body.dark-mode .styleguide .button--cyaan > i, body .styleguide .button--cyaan i, body .styleguide .button--cyaan > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--cyaan span, body.dark-mode .styleguide .button--cyaan > span, body .styleguide .button--cyaan span, body .styleguide .button--cyaan > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--cyaan, body .styleguide .button--cyaan {
justify-content: center; } }
body.dark-mode .styleguide .button--cyaan:hover, body .styleguide .button--cyaan:hover {
background-color: #3ca0b3;
color: #ffffff; }
body.dark-mode .styleguide .button--cyaan:hover i, body.dark-mode .styleguide .button--cyaan:hover span, body .styleguide .button--cyaan:hover i, body .styleguide .button--cyaan:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--grey, body .styleguide .button--grey {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f3f3f3;
border: 1px solid #dadada;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey i, body.dark-mode .styleguide .button--grey > i, body .styleguide .button--grey i, body .styleguide .button--grey > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--grey span, body.dark-mode .styleguide .button--grey > span, body .styleguide .button--grey span, body .styleguide .button--grey > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey, body .styleguide .button--grey {
justify-content: center; } }
body.dark-mode .styleguide .button--grey:hover, body .styleguide .button--grey:hover {
background-color: #cdcdcd;
color: #222222; }
body.dark-mode .styleguide .button--grey:hover i, body.dark-mode .styleguide .button--grey:hover span, body .styleguide .button--grey:hover i, body .styleguide .button--grey:hover span {
color: #222222; }
body.dark-mode .styleguide .button--grey-70, body .styleguide .button--grey-70 {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #d5d5d5;
border: 1px solid #bbbbbb;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey-70 i, body.dark-mode .styleguide .button--grey-70 > i, body .styleguide .button--grey-70 i, body .styleguide .button--grey-70 > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--grey-70 span, body.dark-mode .styleguide .button--grey-70 > span, body .styleguide .button--grey-70 span, body .styleguide .button--grey-70 > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey-70, body .styleguide .button--grey-70 {
justify-content: center; } }
body.dark-mode .styleguide .button--grey-70:hover, body .styleguide .button--grey-70:hover {
background-color: #aeaeae;
color: #222222; }
body.dark-mode .styleguide .button--grey-70:hover i, body.dark-mode .styleguide .button--grey-70:hover span, body .styleguide .button--grey-70:hover i, body .styleguide .button--grey-70:hover span {
color: #222222; }
body.dark-mode .styleguide .button--grey-dark, body .styleguide .button--grey-dark {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #a2a2a2;
border: 1px solid #888888;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey-dark i, body.dark-mode .styleguide .button--grey-dark > i, body .styleguide .button--grey-dark i, body .styleguide .button--grey-dark > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--grey-dark span, body.dark-mode .styleguide .button--grey-dark > span, body .styleguide .button--grey-dark span, body .styleguide .button--grey-dark > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey-dark, body .styleguide .button--grey-dark {
justify-content: center; } }
body.dark-mode .styleguide .button--grey-dark:hover, body .styleguide .button--grey-dark:hover {
background-color: #7b7b7b;
color: #ffffff; }
body.dark-mode .styleguide .button--grey-dark:hover i, body.dark-mode .styleguide .button--grey-dark:hover span, body .styleguide .button--grey-dark:hover i, body .styleguide .button--grey-dark:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--grey-darker, body .styleguide .button--grey-darker {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #6f6f6f;
border: 1px solid #555555;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey-darker i, body.dark-mode .styleguide .button--grey-darker > i, body .styleguide .button--grey-darker i, body .styleguide .button--grey-darker > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--grey-darker span, body.dark-mode .styleguide .button--grey-darker > span, body .styleguide .button--grey-darker span, body .styleguide .button--grey-darker > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey-darker, body .styleguide .button--grey-darker {
justify-content: center; } }
body.dark-mode .styleguide .button--grey-darker:hover, body .styleguide .button--grey-darker:hover {
background-color: #484848;
color: #ffffff; }
body.dark-mode .styleguide .button--grey-darker:hover i, body.dark-mode .styleguide .button--grey-darker:hover span, body .styleguide .button--grey-darker:hover i, body .styleguide .button--grey-darker:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--primary, body .styleguide .button--primary {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #33566c;
border: 1px solid #233a49;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--primary i, body.dark-mode .styleguide .button--primary > i, body .styleguide .button--primary i, body .styleguide .button--primary > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--primary span, body.dark-mode .styleguide .button--primary > span, body .styleguide .button--primary span, body .styleguide .button--primary > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--primary, body .styleguide .button--primary {
justify-content: center; } }
body.dark-mode .styleguide .button--primary:hover, body .styleguide .button--primary:hover {
background-color: #1a2d38;
color: #ffffff; }
body.dark-mode .styleguide .button--primary:hover i, body.dark-mode .styleguide .button--primary:hover span, body .styleguide .button--primary:hover i, body .styleguide .button--primary:hover span {
color: #ffffff; }
body.dark-mode body.dark-mode .styleguide .button--primary, body.dark-mode body .styleguide .button--primary {
background-color: #46a0d9; }
body.dark-mode .styleguide .button--red, body .styleguide .button--red {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626;
color: #ffffff; }
body.dark-mode .styleguide .button--red i, body.dark-mode .styleguide .button--red > i, body .styleguide .button--red i, body .styleguide .button--red > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--red span, body.dark-mode .styleguide .button--red > span, body .styleguide .button--red span, body .styleguide .button--red > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--red, body .styleguide .button--red {
justify-content: center; } }
body.dark-mode .styleguide .button--red:hover, body .styleguide .button--red:hover {
background-color: #e82626;
border: 1px solid #c61515; }
body.dark-mode .styleguide .button--red > i, body.dark-mode .styleguide .button--red > span, body .styleguide .button--red > i, body .styleguide .button--red > span {
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover, body .styleguide .button--red:hover {
background-color: #eb3d3d;
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover i, body.dark-mode .styleguide .button--red:hover span, body .styleguide .button--red:hover i, body .styleguide .button--red:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--red span, body.dark-mode .styleguide .button--red i, body .styleguide .button--red span, body .styleguide .button--red i {
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover, body .styleguide .button--red:hover {
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover span, body.dark-mode .styleguide .button--red:hover i, body .styleguide .button--red:hover span, body .styleguide .button--red:hover i {
color: #ffffff; }
body.dark-mode .styleguide .button--red-dark, body .styleguide .button--red-dark {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #ed5454;
border: 1px solid #e82626;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--red-dark i, body.dark-mode .styleguide .button--red-dark > i, body .styleguide .button--red-dark i, body .styleguide .button--red-dark > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--red-dark span, body.dark-mode .styleguide .button--red-dark > span, body .styleguide .button--red-dark span, body .styleguide .button--red-dark > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--red-dark, body .styleguide .button--red-dark {
justify-content: center; } }
body.dark-mode .styleguide .button--red-dark:hover, body .styleguide .button--red-dark:hover {
background-color: #dd1717;
color: #ffffff; }
body.dark-mode .styleguide .button--red-dark:hover i, body.dark-mode .styleguide .button--red-dark:hover span, body .styleguide .button--red-dark:hover i, body .styleguide .button--red-dark:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--green, body .styleguide .button--green {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--green i, body.dark-mode .styleguide .button--green > i, body .styleguide .button--green i, body .styleguide .button--green > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--green span, body.dark-mode .styleguide .button--green > span, body .styleguide .button--green span, body .styleguide .button--green > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--green, body .styleguide .button--green {
justify-content: center; } }
body.dark-mode .styleguide .button--green:hover, body .styleguide .button--green:hover {
background-color: #5ccf59;
color: #ffffff; }
body.dark-mode .styleguide .button--green:hover i, body.dark-mode .styleguide .button--green:hover span, body .styleguide .button--green:hover i, body .styleguide .button--green:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--green-darker, body .styleguide .button--green-darker {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #34aa31;
border: 1px solid #288226;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--green-darker i, body.dark-mode .styleguide .button--green-darker > i, body .styleguide .button--green-darker i, body .styleguide .button--green-darker > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--green-darker span, body.dark-mode .styleguide .button--green-darker > span, body .styleguide .button--green-darker span, body .styleguide .button--green-darker > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--green-darker, body .styleguide .button--green-darker {
justify-content: center; } }
body.dark-mode .styleguide .button--green-darker:hover, body .styleguide .button--green-darker:hover {
background-color: #226e20;
color: #ffffff; }
body.dark-mode .styleguide .button--green-darker:hover i, body.dark-mode .styleguide .button--green-darker:hover span, body .styleguide .button--green-darker:hover i, body .styleguide .button--green-darker:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--avocado, body .styleguide .button--avocado {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #8eb03a;
border: 1px solid #6f8a2d;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--avocado i, body.dark-mode .styleguide .button--avocado > i, body .styleguide .button--avocado i, body .styleguide .button--avocado > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--avocado span, body.dark-mode .styleguide .button--avocado > span, body .styleguide .button--avocado span, body .styleguide .button--avocado > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--avocado, body .styleguide .button--avocado {
justify-content: center; } }
body.dark-mode .styleguide .button--avocado:hover, body .styleguide .button--avocado:hover {
background-color: #607627;
color: #ffffff; }
body.dark-mode .styleguide .button--avocado:hover i, body.dark-mode .styleguide .button--avocado:hover span, body .styleguide .button--avocado:hover i, body .styleguide .button--avocado:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--yellow, body .styleguide .button--yellow {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f0f282;
border: 1px solid #eaed54;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #eaed54; }
body.dark-mode .styleguide .button--yellow i, body.dark-mode .styleguide .button--yellow > i, body .styleguide .button--yellow i, body .styleguide .button--yellow > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--yellow span, body.dark-mode .styleguide .button--yellow > span, body .styleguide .button--yellow span, body .styleguide .button--yellow > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--yellow, body .styleguide .button--yellow {
justify-content: center; } }
body.dark-mode .styleguide .button--yellow:hover, body .styleguide .button--yellow:hover {
background-color: #686a0b;
border: 1px solid #c3c615; }
body.dark-mode .styleguide .button--yellow:hover i, body.dark-mode .styleguide .button--yellow:hover span, body .styleguide .button--yellow:hover i, body .styleguide .button--yellow:hover span {
color: #222222; }
body.dark-mode .styleguide .button--yellow:hover, body .styleguide .button--yellow:hover {
background-color: #e8eb3d;
color: #ffffff; }
body.dark-mode .styleguide .button--yellow:hover i, body.dark-mode .styleguide .button--yellow:hover span, body .styleguide .button--yellow:hover i, body .styleguide .button--yellow:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--yellow-darken, body .styleguide .button--yellow-darken {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #eaed54;
border: 1px solid #e5e826;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--yellow-darken i, body.dark-mode .styleguide .button--yellow-darken > i, body .styleguide .button--yellow-darken i, body .styleguide .button--yellow-darken > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--yellow-darken span, body.dark-mode .styleguide .button--yellow-darken > span, body .styleguide .button--yellow-darken span, body .styleguide .button--yellow-darken > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--yellow-darken, body .styleguide .button--yellow-darken {
justify-content: center; } }
body.dark-mode .styleguide .button--yellow-darken:hover, body .styleguide .button--yellow-darken:hover {
background-color: #dadd17;
color: #ffffff; }
body.dark-mode .styleguide .button--yellow-darken:hover i, body.dark-mode .styleguide .button--yellow-darken:hover span, body .styleguide .button--yellow-darken:hover i, body .styleguide .button--yellow-darken:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--orange, body .styleguide .button--orange {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #cd8f17;
border: 1px solid #9f6f12;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--orange i, body.dark-mode .styleguide .button--orange > i, body .styleguide .button--orange i, body .styleguide .button--orange > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--orange span, body.dark-mode .styleguide .button--orange > span, body .styleguide .button--orange span, body .styleguide .button--orange > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--orange, body .styleguide .button--orange {
justify-content: center; } }
body.dark-mode .styleguide .button--orange:hover, body .styleguide .button--orange:hover {
background-color: #885f0f;
color: #ffffff; }
body.dark-mode .styleguide .button--orange:hover i, body.dark-mode .styleguide .button--orange:hover span, body .styleguide .button--orange:hover i, body .styleguide .button--orange:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--blue, body .styleguide .button--blue {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #79afe2;
border: 1px solid #4f96d9;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--blue i, body.dark-mode .styleguide .button--blue > i, body .styleguide .button--blue i, body .styleguide .button--blue > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--blue span, body.dark-mode .styleguide .button--blue > span, body .styleguide .button--blue span, body .styleguide .button--blue > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--blue, body .styleguide .button--blue {
justify-content: center; } }
body.dark-mode .styleguide .button--blue:hover, body .styleguide .button--blue:hover {
background-color: #3a89d4;
color: #ffffff; }
body.dark-mode .styleguide .button--blue:hover i, body.dark-mode .styleguide .button--blue:hover span, body .styleguide .button--blue:hover i, body .styleguide .button--blue:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue, body .styleguide .button--light-blue {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #82aaf2;
border: 1px solid #548bed;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue i, body.dark-mode .styleguide .button--light-blue > i, body .styleguide .button--light-blue i, body .styleguide .button--light-blue > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--light-blue span, body.dark-mode .styleguide .button--light-blue > span, body .styleguide .button--light-blue span, body .styleguide .button--light-blue > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--light-blue, body .styleguide .button--light-blue {
justify-content: center; } }
body.dark-mode .styleguide .button--light-blue > i, body.dark-mode .styleguide .button--light-blue > span, body .styleguide .button--light-blue > i, body .styleguide .button--light-blue > span {
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue:hover, body .styleguide .button--light-blue:hover {
background-color: #3d7beb;
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue:hover i, body.dark-mode .styleguide .button--light-blue:hover span, body .styleguide .button--light-blue:hover i, body .styleguide .button--light-blue:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--niet-actief, body .styleguide .button--niet-actief {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626; }
body.dark-mode .styleguide .button--niet-actief i, body.dark-mode .styleguide .button--niet-actief > i, body .styleguide .button--niet-actief i, body .styleguide .button--niet-actief > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--niet-actief span, body.dark-mode .styleguide .button--niet-actief > span, body .styleguide .button--niet-actief span, body .styleguide .button--niet-actief > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--niet-actief, body .styleguide .button--niet-actief {
justify-content: center; } }
body.dark-mode .styleguide .button--niet-actief:hover, body .styleguide .button--niet-actief:hover {
background-color: #e82626;
border: 1px solid #c61515; }
body.dark-mode .styleguide .button--niet-actief > i, body.dark-mode .styleguide .button--niet-actief > span, body .styleguide .button--niet-actief > i, body .styleguide .button--niet-actief > span {
color: #ffffff; }
body.dark-mode .styleguide .button--niet-actief:hover, body .styleguide .button--niet-actief:hover {
background-color: #eb3d3d;
color: #ffffff; }
body.dark-mode .styleguide .button--niet-actief:hover i, body.dark-mode .styleguide .button--niet-actief:hover span, body .styleguide .button--niet-actief:hover i, body .styleguide .button--niet-actief:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--actief, body .styleguide .button--actief {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--actief i, body.dark-mode .styleguide .button--actief > i, body .styleguide .button--actief i, body .styleguide .button--actief > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--actief span, body.dark-mode .styleguide .button--actief > span, body .styleguide .button--actief span, body .styleguide .button--actief > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--actief, body .styleguide .button--actief {
justify-content: center; } }
body.dark-mode .styleguide .button--actief:hover, body .styleguide .button--actief:hover {
background-color: #5ccf59;
color: #ffffff; }
body.dark-mode .styleguide .button--actief:hover i, body.dark-mode .styleguide .button--actief:hover span, body .styleguide .button--actief:hover i, body .styleguide .button--actief:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--vimeo, body .styleguide .button--vimeo {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #02ADEF;
border: 1px solid #0288bc;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--vimeo i, body.dark-mode .styleguide .button--vimeo > i, body .styleguide .button--vimeo i, body .styleguide .button--vimeo > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--vimeo span, body.dark-mode .styleguide .button--vimeo > span, body .styleguide .button--vimeo span, body .styleguide .button--vimeo > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--vimeo, body .styleguide .button--vimeo {
justify-content: center; } }
body.dark-mode .styleguide .button--vimeo:hover, body .styleguide .button--vimeo:hover {
background-color: #0176a3;
color: #ffffff; }
body.dark-mode .styleguide .button--vimeo:hover i, body.dark-mode .styleguide .button--vimeo:hover span, body .styleguide .button--vimeo:hover i, body .styleguide .button--vimeo:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--youtube, body .styleguide .button--youtube {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #FF0200;
border: 1px solid #cc0200;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--youtube i, body.dark-mode .styleguide .button--youtube > i, body .styleguide .button--youtube i, body .styleguide .button--youtube > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--youtube span, body.dark-mode .styleguide .button--youtube > span, body .styleguide .button--youtube span, body .styleguide .button--youtube > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--youtube, body .styleguide .button--youtube {
justify-content: center; } }
body.dark-mode .styleguide .button--youtube:hover, body .styleguide .button--youtube:hover {
background-color: #b30100;
color: #ffffff; }
body.dark-mode .styleguide .button--youtube:hover i, body.dark-mode .styleguide .button--youtube:hover span, body .styleguide .button--youtube:hover i, body .styleguide .button--youtube:hover span {
color: #ffffff; }
.styleguide .button--no-margin {
margin-right: 0 !important; }
.styleguide .button--no-margin--bottom {
margin-bottom: 0 !important; }
.styleguide .button--10 {
padding: 0.5rem 0.625rem;
font-size: 0.687rem;
line-height: 0.687rem;
font-weight: normal; }
.styleguide .button--20 {
padding: 0.5rem 1rem;
font-size: 0.65rem;
line-height: 0.65rem;
font-weight: normal; }
.styleguide .button--30 {
padding: 0.65rem 1.25rem;
font-size: 0.65rem;
line-height: 0.65rem;
font-weight: 600; }
.styleguide .button--40 {
padding: 0.7rem 1.5rem;
font-size: 0.7rem;
line-height: 0.7rem;
font-weight: 600; }
.styleguide .button--60 {
padding: 0.8rem 1.5rem;
font-size: 0.8rem;
line-height: 0.8rem;
font-weight: 600; }
.styleguide .button--70 {
padding: 0.85rem 1.5rem;
font-size: 0.85rem;
line-height: 0.85rem;
font-weight: 600; }
.styleguide .button--80 {
padding: 0.9rem 1.5rem;
font-size: 0.9rem;
line-height: 0.9rem;
font-weight: 600; }
.styleguide .button--input {
height: 1.75rem !important; }
.styleguide .icon-button {
text-decoration: none;
width: 2rem;
height: 2rem;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 1rem 0 0;
border-radius: .25rem;
border: 1px solid #bbbbbb;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .icon-button > i {
font-size: 1rem;
line-height: 1rem;
width: 1rem;
height: 1rem;
color: #a2a2a2;
text-decoration: none; }
.styleguide .icon-button:hover i {
color: #888888; }
.styleguide .annuleer-button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626;
padding: 0.7rem 1.5rem;
font-size: 0.7rem;
line-height: 0.7rem;
font-weight: 600; }
.styleguide .annuleer-button i, .styleguide .annuleer-button > i {
color: #222222;
cursor: pointer; }
.styleguide .annuleer-button span, .styleguide .annuleer-button > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .annuleer-button {
justify-content: center; } }
.styleguide .annuleer-button:hover {
background-color: #e82626;
border: 1px solid #c61515; }
.styleguide .annuleer-button > i, .styleguide .annuleer-button > span {
color: #ffffff; }
.styleguide .annuleer-button:hover {
background-color: #eb3d3d;
color: #ffffff; }
.styleguide .annuleer-button:hover i, .styleguide .annuleer-button:hover span {
color: #ffffff; }
.styleguide .succes-button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
padding: 0.7rem 1.5rem;
font-size: 0.7rem;
line-height: 0.7rem;
font-weight: 600; }
.styleguide .succes-button i, .styleguide .succes-button > i {
color: #222222;
cursor: pointer; }
.styleguide .succes-button span, .styleguide .succes-button > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .succes-button {
justify-content: center; } }
.styleguide .succes-button:hover {
background-color: #5ccf59;
color: #ffffff; }
.styleguide .succes-button:hover i, .styleguide .succes-button:hover span {
color: #ffffff; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #33566c;
border: 1px solid #233a49;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .button i, .styleguide .button > i {
color: #ffffff;
cursor: pointer; }
.styleguide .button span, .styleguide .button > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .button {
justify-content: center; } }
.styleguide .button:hover {
background-color: #1a2d38;
color: #ffffff; }
.styleguide .button:hover i, .styleguide .button:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #46a0d9;
border: 1px solid #2887c3;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button i, body.dark-mode .styleguide .button > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button span, body.dark-mode .styleguide .button > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button {
justify-content: center; } }
body.dark-mode .styleguide .button:hover {
background-color: #2479ae;
color: #ffffff; }
body.dark-mode .styleguide .button:hover i, body.dark-mode .styleguide .button:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button, body .styleguide .button {
/* Kleur button genereren */ }
body.dark-mode .styleguide .button--white, body .styleguide .button--white {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #ffffff;
border: 1px solid #e6e6e6;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
border: 1px solid #f2f2f2; }
body.dark-mode .styleguide .button--white i, body.dark-mode .styleguide .button--white > i, body .styleguide .button--white i, body .styleguide .button--white > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--white span, body.dark-mode .styleguide .button--white > span, body .styleguide .button--white span, body .styleguide .button--white > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--white, body .styleguide .button--white {
justify-content: center; } }
body.dark-mode .styleguide .button--white:hover, body .styleguide .button--white:hover {
background-color: #fafafa;
border: 1px solid #e6e6e6;
color: #222222; }
body.dark-mode .styleguide .button--white:hover i, body.dark-mode .styleguide .button--white:hover span, body .styleguide .button--white:hover i, body .styleguide .button--white:hover span {
color: #222222; }
body.dark-mode .styleguide .button--black, body .styleguide .button--black {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #222222;
border: 1px solid #090909;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
border: 1px solid rgba(255, 255, 255, 0.3); }
body.dark-mode .styleguide .button--black i, body.dark-mode .styleguide .button--black > i, body .styleguide .button--black i, body .styleguide .button--black > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--black span, body.dark-mode .styleguide .button--black > span, body .styleguide .button--black span, body .styleguide .button--black > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--black, body .styleguide .button--black {
justify-content: center; } }
body.dark-mode .styleguide .button--black:hover, body .styleguide .button--black:hover {
background-color: black;
color: #ffffff; }
body.dark-mode .styleguide .button--black:hover i, body.dark-mode .styleguide .button--black:hover span, body .styleguide .button--black:hover i, body .styleguide .button--black:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--cyaan, body .styleguide .button--cyaan {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #6ebfce;
border: 1px solid #48aec1;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--cyaan i, body.dark-mode .styleguide .button--cyaan > i, body .styleguide .button--cyaan i, body .styleguide .button--cyaan > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--cyaan span, body.dark-mode .styleguide .button--cyaan > span, body .styleguide .button--cyaan span, body .styleguide .button--cyaan > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--cyaan, body .styleguide .button--cyaan {
justify-content: center; } }
body.dark-mode .styleguide .button--cyaan:hover, body .styleguide .button--cyaan:hover {
background-color: #3ca0b3;
color: #ffffff; }
body.dark-mode .styleguide .button--cyaan:hover i, body.dark-mode .styleguide .button--cyaan:hover span, body .styleguide .button--cyaan:hover i, body .styleguide .button--cyaan:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--grey, body .styleguide .button--grey {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f3f3f3;
border: 1px solid #dadada;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey i, body.dark-mode .styleguide .button--grey > i, body .styleguide .button--grey i, body .styleguide .button--grey > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--grey span, body.dark-mode .styleguide .button--grey > span, body .styleguide .button--grey span, body .styleguide .button--grey > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey, body .styleguide .button--grey {
justify-content: center; } }
body.dark-mode .styleguide .button--grey:hover, body .styleguide .button--grey:hover {
background-color: #cdcdcd;
color: #222222; }
body.dark-mode .styleguide .button--grey:hover i, body.dark-mode .styleguide .button--grey:hover span, body .styleguide .button--grey:hover i, body .styleguide .button--grey:hover span {
color: #222222; }
body.dark-mode .styleguide .button--grey-70, body .styleguide .button--grey-70 {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #d5d5d5;
border: 1px solid #bbbbbb;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey-70 i, body.dark-mode .styleguide .button--grey-70 > i, body .styleguide .button--grey-70 i, body .styleguide .button--grey-70 > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--grey-70 span, body.dark-mode .styleguide .button--grey-70 > span, body .styleguide .button--grey-70 span, body .styleguide .button--grey-70 > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey-70, body .styleguide .button--grey-70 {
justify-content: center; } }
body.dark-mode .styleguide .button--grey-70:hover, body .styleguide .button--grey-70:hover {
background-color: #aeaeae;
color: #222222; }
body.dark-mode .styleguide .button--grey-70:hover i, body.dark-mode .styleguide .button--grey-70:hover span, body .styleguide .button--grey-70:hover i, body .styleguide .button--grey-70:hover span {
color: #222222; }
body.dark-mode .styleguide .button--grey-dark, body .styleguide .button--grey-dark {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #a2a2a2;
border: 1px solid #888888;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey-dark i, body.dark-mode .styleguide .button--grey-dark > i, body .styleguide .button--grey-dark i, body .styleguide .button--grey-dark > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--grey-dark span, body.dark-mode .styleguide .button--grey-dark > span, body .styleguide .button--grey-dark span, body .styleguide .button--grey-dark > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey-dark, body .styleguide .button--grey-dark {
justify-content: center; } }
body.dark-mode .styleguide .button--grey-dark:hover, body .styleguide .button--grey-dark:hover {
background-color: #7b7b7b;
color: #ffffff; }
body.dark-mode .styleguide .button--grey-dark:hover i, body.dark-mode .styleguide .button--grey-dark:hover span, body .styleguide .button--grey-dark:hover i, body .styleguide .button--grey-dark:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--grey-darker, body .styleguide .button--grey-darker {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #6f6f6f;
border: 1px solid #555555;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey-darker i, body.dark-mode .styleguide .button--grey-darker > i, body .styleguide .button--grey-darker i, body .styleguide .button--grey-darker > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--grey-darker span, body.dark-mode .styleguide .button--grey-darker > span, body .styleguide .button--grey-darker span, body .styleguide .button--grey-darker > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey-darker, body .styleguide .button--grey-darker {
justify-content: center; } }
body.dark-mode .styleguide .button--grey-darker:hover, body .styleguide .button--grey-darker:hover {
background-color: #484848;
color: #ffffff; }
body.dark-mode .styleguide .button--grey-darker:hover i, body.dark-mode .styleguide .button--grey-darker:hover span, body .styleguide .button--grey-darker:hover i, body .styleguide .button--grey-darker:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--primary, body .styleguide .button--primary {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #33566c;
border: 1px solid #233a49;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--primary i, body.dark-mode .styleguide .button--primary > i, body .styleguide .button--primary i, body .styleguide .button--primary > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--primary span, body.dark-mode .styleguide .button--primary > span, body .styleguide .button--primary span, body .styleguide .button--primary > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--primary, body .styleguide .button--primary {
justify-content: center; } }
body.dark-mode .styleguide .button--primary:hover, body .styleguide .button--primary:hover {
background-color: #1a2d38;
color: #ffffff; }
body.dark-mode .styleguide .button--primary:hover i, body.dark-mode .styleguide .button--primary:hover span, body .styleguide .button--primary:hover i, body .styleguide .button--primary:hover span {
color: #ffffff; }
body.dark-mode body.dark-mode .styleguide .button--primary, body.dark-mode body .styleguide .button--primary {
background-color: #46a0d9; }
body.dark-mode .styleguide .button--red, body .styleguide .button--red {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626;
color: #ffffff; }
body.dark-mode .styleguide .button--red i, body.dark-mode .styleguide .button--red > i, body .styleguide .button--red i, body .styleguide .button--red > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--red span, body.dark-mode .styleguide .button--red > span, body .styleguide .button--red span, body .styleguide .button--red > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--red, body .styleguide .button--red {
justify-content: center; } }
body.dark-mode .styleguide .button--red:hover, body .styleguide .button--red:hover {
background-color: #e82626;
border: 1px solid #c61515; }
body.dark-mode .styleguide .button--red > i, body.dark-mode .styleguide .button--red > span, body .styleguide .button--red > i, body .styleguide .button--red > span {
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover, body .styleguide .button--red:hover {
background-color: #eb3d3d;
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover i, body.dark-mode .styleguide .button--red:hover span, body .styleguide .button--red:hover i, body .styleguide .button--red:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--red span, body.dark-mode .styleguide .button--red i, body .styleguide .button--red span, body .styleguide .button--red i {
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover, body .styleguide .button--red:hover {
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover span, body.dark-mode .styleguide .button--red:hover i, body .styleguide .button--red:hover span, body .styleguide .button--red:hover i {
color: #ffffff; }
body.dark-mode .styleguide .button--red-dark, body .styleguide .button--red-dark {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #ed5454;
border: 1px solid #e82626;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--red-dark i, body.dark-mode .styleguide .button--red-dark > i, body .styleguide .button--red-dark i, body .styleguide .button--red-dark > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--red-dark span, body.dark-mode .styleguide .button--red-dark > span, body .styleguide .button--red-dark span, body .styleguide .button--red-dark > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--red-dark, body .styleguide .button--red-dark {
justify-content: center; } }
body.dark-mode .styleguide .button--red-dark:hover, body .styleguide .button--red-dark:hover {
background-color: #dd1717;
color: #ffffff; }
body.dark-mode .styleguide .button--red-dark:hover i, body.dark-mode .styleguide .button--red-dark:hover span, body .styleguide .button--red-dark:hover i, body .styleguide .button--red-dark:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--green, body .styleguide .button--green {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--green i, body.dark-mode .styleguide .button--green > i, body .styleguide .button--green i, body .styleguide .button--green > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--green span, body.dark-mode .styleguide .button--green > span, body .styleguide .button--green span, body .styleguide .button--green > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--green, body .styleguide .button--green {
justify-content: center; } }
body.dark-mode .styleguide .button--green:hover, body .styleguide .button--green:hover {
background-color: #5ccf59;
color: #ffffff; }
body.dark-mode .styleguide .button--green:hover i, body.dark-mode .styleguide .button--green:hover span, body .styleguide .button--green:hover i, body .styleguide .button--green:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--green-darker, body .styleguide .button--green-darker {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #34aa31;
border: 1px solid #288226;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--green-darker i, body.dark-mode .styleguide .button--green-darker > i, body .styleguide .button--green-darker i, body .styleguide .button--green-darker > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--green-darker span, body.dark-mode .styleguide .button--green-darker > span, body .styleguide .button--green-darker span, body .styleguide .button--green-darker > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--green-darker, body .styleguide .button--green-darker {
justify-content: center; } }
body.dark-mode .styleguide .button--green-darker:hover, body .styleguide .button--green-darker:hover {
background-color: #226e20;
color: #ffffff; }
body.dark-mode .styleguide .button--green-darker:hover i, body.dark-mode .styleguide .button--green-darker:hover span, body .styleguide .button--green-darker:hover i, body .styleguide .button--green-darker:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--avocado, body .styleguide .button--avocado {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #8eb03a;
border: 1px solid #6f8a2d;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--avocado i, body.dark-mode .styleguide .button--avocado > i, body .styleguide .button--avocado i, body .styleguide .button--avocado > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--avocado span, body.dark-mode .styleguide .button--avocado > span, body .styleguide .button--avocado span, body .styleguide .button--avocado > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--avocado, body .styleguide .button--avocado {
justify-content: center; } }
body.dark-mode .styleguide .button--avocado:hover, body .styleguide .button--avocado:hover {
background-color: #607627;
color: #ffffff; }
body.dark-mode .styleguide .button--avocado:hover i, body.dark-mode .styleguide .button--avocado:hover span, body .styleguide .button--avocado:hover i, body .styleguide .button--avocado:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--yellow, body .styleguide .button--yellow {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f0f282;
border: 1px solid #eaed54;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #eaed54; }
body.dark-mode .styleguide .button--yellow i, body.dark-mode .styleguide .button--yellow > i, body .styleguide .button--yellow i, body .styleguide .button--yellow > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--yellow span, body.dark-mode .styleguide .button--yellow > span, body .styleguide .button--yellow span, body .styleguide .button--yellow > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--yellow, body .styleguide .button--yellow {
justify-content: center; } }
body.dark-mode .styleguide .button--yellow:hover, body .styleguide .button--yellow:hover {
background-color: #686a0b;
border: 1px solid #c3c615; }
body.dark-mode .styleguide .button--yellow:hover i, body.dark-mode .styleguide .button--yellow:hover span, body .styleguide .button--yellow:hover i, body .styleguide .button--yellow:hover span {
color: #222222; }
body.dark-mode .styleguide .button--yellow:hover, body .styleguide .button--yellow:hover {
background-color: #e8eb3d;
color: #ffffff; }
body.dark-mode .styleguide .button--yellow:hover i, body.dark-mode .styleguide .button--yellow:hover span, body .styleguide .button--yellow:hover i, body .styleguide .button--yellow:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--yellow-darken, body .styleguide .button--yellow-darken {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #eaed54;
border: 1px solid #e5e826;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--yellow-darken i, body.dark-mode .styleguide .button--yellow-darken > i, body .styleguide .button--yellow-darken i, body .styleguide .button--yellow-darken > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--yellow-darken span, body.dark-mode .styleguide .button--yellow-darken > span, body .styleguide .button--yellow-darken span, body .styleguide .button--yellow-darken > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--yellow-darken, body .styleguide .button--yellow-darken {
justify-content: center; } }
body.dark-mode .styleguide .button--yellow-darken:hover, body .styleguide .button--yellow-darken:hover {
background-color: #dadd17;
color: #ffffff; }
body.dark-mode .styleguide .button--yellow-darken:hover i, body.dark-mode .styleguide .button--yellow-darken:hover span, body .styleguide .button--yellow-darken:hover i, body .styleguide .button--yellow-darken:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--orange, body .styleguide .button--orange {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #cd8f17;
border: 1px solid #9f6f12;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--orange i, body.dark-mode .styleguide .button--orange > i, body .styleguide .button--orange i, body .styleguide .button--orange > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--orange span, body.dark-mode .styleguide .button--orange > span, body .styleguide .button--orange span, body .styleguide .button--orange > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--orange, body .styleguide .button--orange {
justify-content: center; } }
body.dark-mode .styleguide .button--orange:hover, body .styleguide .button--orange:hover {
background-color: #885f0f;
color: #ffffff; }
body.dark-mode .styleguide .button--orange:hover i, body.dark-mode .styleguide .button--orange:hover span, body .styleguide .button--orange:hover i, body .styleguide .button--orange:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--blue, body .styleguide .button--blue {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #79afe2;
border: 1px solid #4f96d9;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--blue i, body.dark-mode .styleguide .button--blue > i, body .styleguide .button--blue i, body .styleguide .button--blue > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--blue span, body.dark-mode .styleguide .button--blue > span, body .styleguide .button--blue span, body .styleguide .button--blue > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--blue, body .styleguide .button--blue {
justify-content: center; } }
body.dark-mode .styleguide .button--blue:hover, body .styleguide .button--blue:hover {
background-color: #3a89d4;
color: #ffffff; }
body.dark-mode .styleguide .button--blue:hover i, body.dark-mode .styleguide .button--blue:hover span, body .styleguide .button--blue:hover i, body .styleguide .button--blue:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue, body .styleguide .button--light-blue {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #82aaf2;
border: 1px solid #548bed;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue i, body.dark-mode .styleguide .button--light-blue > i, body .styleguide .button--light-blue i, body .styleguide .button--light-blue > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--light-blue span, body.dark-mode .styleguide .button--light-blue > span, body .styleguide .button--light-blue span, body .styleguide .button--light-blue > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--light-blue, body .styleguide .button--light-blue {
justify-content: center; } }
body.dark-mode .styleguide .button--light-blue > i, body.dark-mode .styleguide .button--light-blue > span, body .styleguide .button--light-blue > i, body .styleguide .button--light-blue > span {
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue:hover, body .styleguide .button--light-blue:hover {
background-color: #3d7beb;
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue:hover i, body.dark-mode .styleguide .button--light-blue:hover span, body .styleguide .button--light-blue:hover i, body .styleguide .button--light-blue:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--niet-actief, body .styleguide .button--niet-actief {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626; }
body.dark-mode .styleguide .button--niet-actief i, body.dark-mode .styleguide .button--niet-actief > i, body .styleguide .button--niet-actief i, body .styleguide .button--niet-actief > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--niet-actief span, body.dark-mode .styleguide .button--niet-actief > span, body .styleguide .button--niet-actief span, body .styleguide .button--niet-actief > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--niet-actief, body .styleguide .button--niet-actief {
justify-content: center; } }
body.dark-mode .styleguide .button--niet-actief:hover, body .styleguide .button--niet-actief:hover {
background-color: #e82626;
border: 1px solid #c61515; }
body.dark-mode .styleguide .button--niet-actief > i, body.dark-mode .styleguide .button--niet-actief > span, body .styleguide .button--niet-actief > i, body .styleguide .button--niet-actief > span {
color: #ffffff; }
body.dark-mode .styleguide .button--niet-actief:hover, body .styleguide .button--niet-actief:hover {
background-color: #eb3d3d;
color: #ffffff; }
body.dark-mode .styleguide .button--niet-actief:hover i, body.dark-mode .styleguide .button--niet-actief:hover span, body .styleguide .button--niet-actief:hover i, body .styleguide .button--niet-actief:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--actief, body .styleguide .button--actief {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--actief i, body.dark-mode .styleguide .button--actief > i, body .styleguide .button--actief i, body .styleguide .button--actief > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--actief span, body.dark-mode .styleguide .button--actief > span, body .styleguide .button--actief span, body .styleguide .button--actief > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--actief, body .styleguide .button--actief {
justify-content: center; } }
body.dark-mode .styleguide .button--actief:hover, body .styleguide .button--actief:hover {
background-color: #5ccf59;
color: #ffffff; }
body.dark-mode .styleguide .button--actief:hover i, body.dark-mode .styleguide .button--actief:hover span, body .styleguide .button--actief:hover i, body .styleguide .button--actief:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--vimeo, body .styleguide .button--vimeo {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #02ADEF;
border: 1px solid #0288bc;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--vimeo i, body.dark-mode .styleguide .button--vimeo > i, body .styleguide .button--vimeo i, body .styleguide .button--vimeo > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--vimeo span, body.dark-mode .styleguide .button--vimeo > span, body .styleguide .button--vimeo span, body .styleguide .button--vimeo > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--vimeo, body .styleguide .button--vimeo {
justify-content: center; } }
body.dark-mode .styleguide .button--vimeo:hover, body .styleguide .button--vimeo:hover {
background-color: #0176a3;
color: #ffffff; }
body.dark-mode .styleguide .button--vimeo:hover i, body.dark-mode .styleguide .button--vimeo:hover span, body .styleguide .button--vimeo:hover i, body .styleguide .button--vimeo:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--youtube, body .styleguide .button--youtube {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #FF0200;
border: 1px solid #cc0200;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--youtube i, body.dark-mode .styleguide .button--youtube > i, body .styleguide .button--youtube i, body .styleguide .button--youtube > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--youtube span, body.dark-mode .styleguide .button--youtube > span, body .styleguide .button--youtube span, body .styleguide .button--youtube > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--youtube, body .styleguide .button--youtube {
justify-content: center; } }
body.dark-mode .styleguide .button--youtube:hover, body .styleguide .button--youtube:hover {
background-color: #b30100;
color: #ffffff; }
body.dark-mode .styleguide .button--youtube:hover i, body.dark-mode .styleguide .button--youtube:hover span, body .styleguide .button--youtube:hover i, body .styleguide .button--youtube:hover span {
color: #ffffff; }
.styleguide .button--no-margin {
margin-right: 0 !important; }
.styleguide .button--no-margin--bottom {
margin-bottom: 0 !important; }
.styleguide .button--10 {
padding: 0.5rem 0.625rem;
font-size: 0.687rem;
line-height: 0.687rem;
font-weight: normal; }
.styleguide .button--20 {
padding: 0.5rem 1rem;
font-size: 0.65rem;
line-height: 0.65rem;
font-weight: normal; }
.styleguide .button--30 {
padding: 0.65rem 1.25rem;
font-size: 0.65rem;
line-height: 0.65rem;
font-weight: 600; }
.styleguide .button--40 {
padding: 0.7rem 1.5rem;
font-size: 0.7rem;
line-height: 0.7rem;
font-weight: 600; }
.styleguide .button--60 {
padding: 0.8rem 1.5rem;
font-size: 0.8rem;
line-height: 0.8rem;
font-weight: 600; }
.styleguide .button--70 {
padding: 0.85rem 1.5rem;
font-size: 0.85rem;
line-height: 0.85rem;
font-weight: 600; }
.styleguide .button--80 {
padding: 0.9rem 1.5rem;
font-size: 0.9rem;
line-height: 0.9rem;
font-weight: 600; }
.styleguide .button--input {
height: 1.75rem !important; }
.styleguide .icon-button {
text-decoration: none;
width: 2rem;
height: 2rem;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 1rem 0 0;
border-radius: .25rem;
border: 1px solid #bbbbbb;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .icon-button > i {
font-size: 1rem;
line-height: 1rem;
width: 1rem;
height: 1rem;
color: #a2a2a2;
text-decoration: none; }
.styleguide .icon-button:hover i {
color: #888888; }
.styleguide .annuleer-button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626;
padding: 0.7rem 1.5rem;
font-size: 0.7rem;
line-height: 0.7rem;
font-weight: 600; }
.styleguide .annuleer-button i, .styleguide .annuleer-button > i {
color: #222222;
cursor: pointer; }
.styleguide .annuleer-button span, .styleguide .annuleer-button > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .annuleer-button {
justify-content: center; } }
.styleguide .annuleer-button:hover {
background-color: #e82626;
border: 1px solid #c61515; }
.styleguide .annuleer-button > i, .styleguide .annuleer-button > span {
color: #ffffff; }
.styleguide .annuleer-button:hover {
background-color: #eb3d3d;
color: #ffffff; }
.styleguide .annuleer-button:hover i, .styleguide .annuleer-button:hover span {
color: #ffffff; }
.styleguide .succes-button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
padding: 0.7rem 1.5rem;
font-size: 0.7rem;
line-height: 0.7rem;
font-weight: 600; }
.styleguide .succes-button i, .styleguide .succes-button > i {
color: #222222;
cursor: pointer; }
.styleguide .succes-button span, .styleguide .succes-button > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .succes-button {
justify-content: center; } }
.styleguide .succes-button:hover {
background-color: #5ccf59;
color: #ffffff; }
.styleguide .succes-button:hover i, .styleguide .succes-button:hover span {
color: #ffffff; }
.styleguide .label, .styleguide .combi-label {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #33566c;
border: 1px solid #233a49;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #1a2d38;
border-radius: .5rem;
pointer-events: none; }
.styleguide .label i, .styleguide .combi-label i, .styleguide .label > i, .styleguide .combi-label > i {
color: #ffffff;
cursor: pointer; }
.styleguide .label span, .styleguide .combi-label span, .styleguide .label > span, .styleguide .combi-label > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .label, .styleguide .combi-label {
justify-content: center; } }
.styleguide .label:hover, .styleguide .combi-label:hover {
background-color: #1a2d38;
color: #ffffff; }
.styleguide .label:hover i, .styleguide .combi-label:hover i, .styleguide .label:hover span, .styleguide .combi-label:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label, body.dark-mode .styleguide .combi-label {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #46a0d9;
border: 1px solid #2887c3;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #2479ae;
border-radius: .5rem; }
body.dark-mode .styleguide .label i, body.dark-mode .styleguide .combi-label i, body.dark-mode .styleguide .label > i, body.dark-mode .styleguide .combi-label > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .label span, body.dark-mode .styleguide .combi-label span, body.dark-mode .styleguide .label > span, body.dark-mode .styleguide .combi-label > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label, body.dark-mode .styleguide .combi-label {
justify-content: center; } }
body.dark-mode .styleguide .label:hover, body.dark-mode .styleguide .combi-label:hover {
background-color: #2479ae;
color: #ffffff; }
body.dark-mode .styleguide .label:hover i, body.dark-mode .styleguide .combi-label:hover i, body.dark-mode .styleguide .label:hover span, body.dark-mode .styleguide .combi-label:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--white, body .styleguide .label--white {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #ffffff;
border: 1px solid #e6e6e6;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
border: 1px solid #f2f2f2;
border-radius: .5rem; }
body.dark-mode .styleguide .label--white i, body.dark-mode .styleguide .label--white > i, body .styleguide .label--white i, body .styleguide .label--white > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--white span, body.dark-mode .styleguide .label--white > span, body .styleguide .label--white span, body .styleguide .label--white > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--white, body .styleguide .label--white {
justify-content: center; } }
body.dark-mode .styleguide .label--white:hover, body .styleguide .label--white:hover {
background-color: #fafafa;
border: 1px solid #e6e6e6;
color: #222222; }
body.dark-mode .styleguide .label--white:hover i, body.dark-mode .styleguide .label--white:hover span, body .styleguide .label--white:hover i, body .styleguide .label--white:hover span {
color: #222222; }
body.dark-mode .styleguide .label--black, body .styleguide .label--black {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #222222;
border: 1px solid #090909;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: black;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: .5rem; }
body.dark-mode .styleguide .label--black i, body.dark-mode .styleguide .label--black > i, body .styleguide .label--black i, body .styleguide .label--black > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .label--black span, body.dark-mode .styleguide .label--black > span, body .styleguide .label--black span, body .styleguide .label--black > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--black, body .styleguide .label--black {
justify-content: center; } }
body.dark-mode .styleguide .label--black:hover, body .styleguide .label--black:hover {
background-color: black;
color: #ffffff; }
body.dark-mode .styleguide .label--black:hover i, body.dark-mode .styleguide .label--black:hover span, body .styleguide .label--black:hover i, body .styleguide .label--black:hover span {
color: #ffffff; }
body.dark-mode body.dark-mode .styleguide .label--black, body.dark-mode body .styleguide .label--black {
border: 1px solid rgba(255, 255, 255, 0.3); }
body.dark-mode .styleguide .label--cyaan, body .styleguide .label--cyaan {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #6ebfce;
border: 1px solid #48aec1;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #3ca0b3;
border-radius: .5rem; }
body.dark-mode .styleguide .label--cyaan i, body.dark-mode .styleguide .label--cyaan > i, body .styleguide .label--cyaan i, body .styleguide .label--cyaan > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--cyaan span, body.dark-mode .styleguide .label--cyaan > span, body .styleguide .label--cyaan span, body .styleguide .label--cyaan > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--cyaan, body .styleguide .label--cyaan {
justify-content: center; } }
body.dark-mode .styleguide .label--cyaan:hover, body .styleguide .label--cyaan:hover {
background-color: #3ca0b3;
color: #ffffff; }
body.dark-mode .styleguide .label--cyaan:hover i, body.dark-mode .styleguide .label--cyaan:hover span, body .styleguide .label--cyaan:hover i, body .styleguide .label--cyaan:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--grey, body .styleguide .label--grey {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f3f3f3;
border: 1px solid #dadada;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #cdcdcd;
border-radius: .5rem; }
body.dark-mode .styleguide .label--grey i, body.dark-mode .styleguide .label--grey > i, body .styleguide .label--grey i, body .styleguide .label--grey > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--grey span, body.dark-mode .styleguide .label--grey > span, body .styleguide .label--grey span, body .styleguide .label--grey > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--grey, body .styleguide .label--grey {
justify-content: center; } }
body.dark-mode .styleguide .label--grey:hover, body .styleguide .label--grey:hover {
background-color: #cdcdcd;
color: #222222; }
body.dark-mode .styleguide .label--grey:hover i, body.dark-mode .styleguide .label--grey:hover span, body .styleguide .label--grey:hover i, body .styleguide .label--grey:hover span {
color: #222222; }
body.dark-mode .styleguide .label--grey-70, body .styleguide .label--grey-70 {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #d5d5d5;
border: 1px solid #bbbbbb;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #aeaeae;
border-radius: .5rem; }
body.dark-mode .styleguide .label--grey-70 i, body.dark-mode .styleguide .label--grey-70 > i, body .styleguide .label--grey-70 i, body .styleguide .label--grey-70 > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--grey-70 span, body.dark-mode .styleguide .label--grey-70 > span, body .styleguide .label--grey-70 span, body .styleguide .label--grey-70 > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--grey-70, body .styleguide .label--grey-70 {
justify-content: center; } }
body.dark-mode .styleguide .label--grey-70:hover, body .styleguide .label--grey-70:hover {
background-color: #aeaeae;
color: #222222; }
body.dark-mode .styleguide .label--grey-70:hover i, body.dark-mode .styleguide .label--grey-70:hover span, body .styleguide .label--grey-70:hover i, body .styleguide .label--grey-70:hover span {
color: #222222; }
body.dark-mode .styleguide .label--grey-dark, body .styleguide .label--grey-dark {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #a2a2a2;
border: 1px solid #888888;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #7b7b7b;
border-radius: .5rem; }
body.dark-mode .styleguide .label--grey-dark i, body.dark-mode .styleguide .label--grey-dark > i, body .styleguide .label--grey-dark i, body .styleguide .label--grey-dark > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--grey-dark span, body.dark-mode .styleguide .label--grey-dark > span, body .styleguide .label--grey-dark span, body .styleguide .label--grey-dark > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--grey-dark, body .styleguide .label--grey-dark {
justify-content: center; } }
body.dark-mode .styleguide .label--grey-dark:hover, body .styleguide .label--grey-dark:hover {
background-color: #7b7b7b;
color: #ffffff; }
body.dark-mode .styleguide .label--grey-dark:hover i, body.dark-mode .styleguide .label--grey-dark:hover span, body .styleguide .label--grey-dark:hover i, body .styleguide .label--grey-dark:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--grey-darker, body .styleguide .label--grey-darker {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #6f6f6f;
border: 1px solid #555555;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #484848;
border-radius: .5rem; }
body.dark-mode .styleguide .label--grey-darker i, body.dark-mode .styleguide .label--grey-darker > i, body .styleguide .label--grey-darker i, body .styleguide .label--grey-darker > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .label--grey-darker span, body.dark-mode .styleguide .label--grey-darker > span, body .styleguide .label--grey-darker span, body .styleguide .label--grey-darker > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--grey-darker, body .styleguide .label--grey-darker {
justify-content: center; } }
body.dark-mode .styleguide .label--grey-darker:hover, body .styleguide .label--grey-darker:hover {
background-color: #484848;
color: #ffffff; }
body.dark-mode .styleguide .label--grey-darker:hover i, body.dark-mode .styleguide .label--grey-darker:hover span, body .styleguide .label--grey-darker:hover i, body .styleguide .label--grey-darker:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--primary, body .styleguide .label--primary {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #33566c;
border: 1px solid #233a49;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #1a2d38;
border-radius: .5rem; }
body.dark-mode .styleguide .label--primary i, body.dark-mode .styleguide .label--primary > i, body .styleguide .label--primary i, body .styleguide .label--primary > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .label--primary span, body.dark-mode .styleguide .label--primary > span, body .styleguide .label--primary span, body .styleguide .label--primary > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--primary, body .styleguide .label--primary {
justify-content: center; } }
body.dark-mode .styleguide .label--primary:hover, body .styleguide .label--primary:hover {
background-color: #1a2d38;
color: #ffffff; }
body.dark-mode .styleguide .label--primary:hover i, body.dark-mode .styleguide .label--primary:hover span, body .styleguide .label--primary:hover i, body .styleguide .label--primary:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--red, body .styleguide .label--red {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626;
background-color: #eb3d3d;
border-radius: .5rem; }
body.dark-mode .styleguide .label--red i, body.dark-mode .styleguide .label--red > i, body .styleguide .label--red i, body .styleguide .label--red > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--red span, body.dark-mode .styleguide .label--red > span, body .styleguide .label--red span, body .styleguide .label--red > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--red, body .styleguide .label--red {
justify-content: center; } }
body.dark-mode .styleguide .label--red:hover, body .styleguide .label--red:hover {
background-color: #e82626;
border: 1px solid #c61515; }
body.dark-mode .styleguide .label--red > i, body.dark-mode .styleguide .label--red > span, body .styleguide .label--red > i, body .styleguide .label--red > span {
color: #ffffff; }
body.dark-mode .styleguide .label--red:hover, body .styleguide .label--red:hover {
background-color: #eb3d3d;
color: #ffffff; }
body.dark-mode .styleguide .label--red:hover i, body.dark-mode .styleguide .label--red:hover span, body .styleguide .label--red:hover i, body .styleguide .label--red:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--red-dark, body .styleguide .label--red-dark {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #ed5454;
border: 1px solid #e82626;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #dd1717;
border-radius: .5rem; }
body.dark-mode .styleguide .label--red-dark i, body.dark-mode .styleguide .label--red-dark > i, body .styleguide .label--red-dark i, body .styleguide .label--red-dark > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--red-dark span, body.dark-mode .styleguide .label--red-dark > span, body .styleguide .label--red-dark span, body .styleguide .label--red-dark > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--red-dark, body .styleguide .label--red-dark {
justify-content: center; } }
body.dark-mode .styleguide .label--red-dark:hover, body .styleguide .label--red-dark:hover {
background-color: #dd1717;
color: #ffffff; }
body.dark-mode .styleguide .label--red-dark:hover i, body.dark-mode .styleguide .label--red-dark:hover span, body .styleguide .label--red-dark:hover i, body .styleguide .label--red-dark:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--green, body .styleguide .label--green {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #5ccf59;
border-radius: .5rem; }
body.dark-mode .styleguide .label--green i, body.dark-mode .styleguide .label--green > i, body .styleguide .label--green i, body .styleguide .label--green > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--green span, body.dark-mode .styleguide .label--green > span, body .styleguide .label--green span, body .styleguide .label--green > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--green, body .styleguide .label--green {
justify-content: center; } }
body.dark-mode .styleguide .label--green:hover, body .styleguide .label--green:hover {
background-color: #5ccf59;
color: #ffffff; }
body.dark-mode .styleguide .label--green:hover i, body.dark-mode .styleguide .label--green:hover span, body .styleguide .label--green:hover i, body .styleguide .label--green:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--green-darker, body .styleguide .label--green-darker {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #34aa31;
border: 1px solid #288226;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #226e20;
border-radius: .5rem; }
body.dark-mode .styleguide .label--green-darker i, body.dark-mode .styleguide .label--green-darker > i, body .styleguide .label--green-darker i, body .styleguide .label--green-darker > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .label--green-darker span, body.dark-mode .styleguide .label--green-darker > span, body .styleguide .label--green-darker span, body .styleguide .label--green-darker > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--green-darker, body .styleguide .label--green-darker {
justify-content: center; } }
body.dark-mode .styleguide .label--green-darker:hover, body .styleguide .label--green-darker:hover {
background-color: #226e20;
color: #ffffff; }
body.dark-mode .styleguide .label--green-darker:hover i, body.dark-mode .styleguide .label--green-darker:hover span, body .styleguide .label--green-darker:hover i, body .styleguide .label--green-darker:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--avocado, body .styleguide .label--avocado {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #8eb03a;
border: 1px solid #6f8a2d;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #607627;
border-radius: .5rem; }
body.dark-mode .styleguide .label--avocado i, body.dark-mode .styleguide .label--avocado > i, body .styleguide .label--avocado i, body .styleguide .label--avocado > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .label--avocado span, body.dark-mode .styleguide .label--avocado > span, body .styleguide .label--avocado span, body .styleguide .label--avocado > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--avocado, body .styleguide .label--avocado {
justify-content: center; } }
body.dark-mode .styleguide .label--avocado:hover, body .styleguide .label--avocado:hover {
background-color: #607627;
color: #ffffff; }
body.dark-mode .styleguide .label--avocado:hover i, body.dark-mode .styleguide .label--avocado:hover span, body .styleguide .label--avocado:hover i, body .styleguide .label--avocado:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--yellow, body .styleguide .label--yellow {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f0f282;
border: 1px solid #eaed54;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #eaed54;
background-color: #e8eb3d;
border-radius: .5rem; }
body.dark-mode .styleguide .label--yellow i, body.dark-mode .styleguide .label--yellow > i, body .styleguide .label--yellow i, body .styleguide .label--yellow > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--yellow span, body.dark-mode .styleguide .label--yellow > span, body .styleguide .label--yellow span, body .styleguide .label--yellow > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--yellow, body .styleguide .label--yellow {
justify-content: center; } }
body.dark-mode .styleguide .label--yellow:hover, body .styleguide .label--yellow:hover {
background-color: #686a0b;
border: 1px solid #c3c615; }
body.dark-mode .styleguide .label--yellow:hover i, body.dark-mode .styleguide .label--yellow:hover span, body .styleguide .label--yellow:hover i, body .styleguide .label--yellow:hover span {
color: #222222; }
body.dark-mode .styleguide .label--yellow:hover, body .styleguide .label--yellow:hover {
background-color: #e8eb3d;
color: #ffffff; }
body.dark-mode .styleguide .label--yellow:hover i, body.dark-mode .styleguide .label--yellow:hover span, body .styleguide .label--yellow:hover i, body .styleguide .label--yellow:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--yellow-darken, body .styleguide .label--yellow-darken {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #eaed54;
border: 1px solid #e5e826;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #dadd17;
border-radius: .5rem; }
body.dark-mode .styleguide .label--yellow-darken i, body.dark-mode .styleguide .label--yellow-darken > i, body .styleguide .label--yellow-darken i, body .styleguide .label--yellow-darken > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--yellow-darken span, body.dark-mode .styleguide .label--yellow-darken > span, body .styleguide .label--yellow-darken span, body .styleguide .label--yellow-darken > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--yellow-darken, body .styleguide .label--yellow-darken {
justify-content: center; } }
body.dark-mode .styleguide .label--yellow-darken:hover, body .styleguide .label--yellow-darken:hover {
background-color: #dadd17;
color: #ffffff; }
body.dark-mode .styleguide .label--yellow-darken:hover i, body.dark-mode .styleguide .label--yellow-darken:hover span, body .styleguide .label--yellow-darken:hover i, body .styleguide .label--yellow-darken:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--orange, body .styleguide .label--orange {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #cd8f17;
border: 1px solid #9f6f12;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #885f0f;
border-radius: .5rem; }
body.dark-mode .styleguide .label--orange i, body.dark-mode .styleguide .label--orange > i, body .styleguide .label--orange i, body .styleguide .label--orange > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .label--orange span, body.dark-mode .styleguide .label--orange > span, body .styleguide .label--orange span, body .styleguide .label--orange > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--orange, body .styleguide .label--orange {
justify-content: center; } }
body.dark-mode .styleguide .label--orange:hover, body .styleguide .label--orange:hover {
background-color: #885f0f;
color: #ffffff; }
body.dark-mode .styleguide .label--orange:hover i, body.dark-mode .styleguide .label--orange:hover span, body .styleguide .label--orange:hover i, body .styleguide .label--orange:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--blue, body .styleguide .label--blue {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #79afe2;
border: 1px solid #4f96d9;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #3a89d4;
border-radius: .5rem; }
body.dark-mode .styleguide .label--blue i, body.dark-mode .styleguide .label--blue > i, body .styleguide .label--blue i, body .styleguide .label--blue > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--blue span, body.dark-mode .styleguide .label--blue > span, body .styleguide .label--blue span, body .styleguide .label--blue > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--blue, body .styleguide .label--blue {
justify-content: center; } }
body.dark-mode .styleguide .label--blue:hover, body .styleguide .label--blue:hover {
background-color: #3a89d4;
color: #ffffff; }
body.dark-mode .styleguide .label--blue:hover i, body.dark-mode .styleguide .label--blue:hover span, body .styleguide .label--blue:hover i, body .styleguide .label--blue:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--light-blue, body .styleguide .label--light-blue {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #82aaf2;
border: 1px solid #548bed;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #3d7beb;
border-radius: .5rem; }
body.dark-mode .styleguide .label--light-blue i, body.dark-mode .styleguide .label--light-blue > i, body .styleguide .label--light-blue i, body .styleguide .label--light-blue > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--light-blue span, body.dark-mode .styleguide .label--light-blue > span, body .styleguide .label--light-blue span, body .styleguide .label--light-blue > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--light-blue, body .styleguide .label--light-blue {
justify-content: center; } }
body.dark-mode .styleguide .label--light-blue > i, body.dark-mode .styleguide .label--light-blue > span, body .styleguide .label--light-blue > i, body .styleguide .label--light-blue > span {
color: #ffffff; }
body.dark-mode .styleguide .label--light-blue:hover, body .styleguide .label--light-blue:hover {
background-color: #3d7beb;
color: #ffffff; }
body.dark-mode .styleguide .label--light-blue:hover i, body.dark-mode .styleguide .label--light-blue:hover span, body .styleguide .label--light-blue:hover i, body .styleguide .label--light-blue:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--niet-actief, body .styleguide .label--niet-actief {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626;
background-color: #eb3d3d;
border-radius: .5rem; }
body.dark-mode .styleguide .label--niet-actief i, body.dark-mode .styleguide .label--niet-actief > i, body .styleguide .label--niet-actief i, body .styleguide .label--niet-actief > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--niet-actief span, body.dark-mode .styleguide .label--niet-actief > span, body .styleguide .label--niet-actief span, body .styleguide .label--niet-actief > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--niet-actief, body .styleguide .label--niet-actief {
justify-content: center; } }
body.dark-mode .styleguide .label--niet-actief:hover, body .styleguide .label--niet-actief:hover {
background-color: #e82626;
border: 1px solid #c61515; }
body.dark-mode .styleguide .label--niet-actief > i, body.dark-mode .styleguide .label--niet-actief > span, body .styleguide .label--niet-actief > i, body .styleguide .label--niet-actief > span {
color: #ffffff; }
body.dark-mode .styleguide .label--niet-actief:hover, body .styleguide .label--niet-actief:hover {
background-color: #eb3d3d;
color: #ffffff; }
body.dark-mode .styleguide .label--niet-actief:hover i, body.dark-mode .styleguide .label--niet-actief:hover span, body .styleguide .label--niet-actief:hover i, body .styleguide .label--niet-actief:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--actief, body .styleguide .label--actief {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #5ccf59;
border-radius: .5rem; }
body.dark-mode .styleguide .label--actief i, body.dark-mode .styleguide .label--actief > i, body .styleguide .label--actief i, body .styleguide .label--actief > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .label--actief span, body.dark-mode .styleguide .label--actief > span, body .styleguide .label--actief span, body .styleguide .label--actief > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--actief, body .styleguide .label--actief {
justify-content: center; } }
body.dark-mode .styleguide .label--actief:hover, body .styleguide .label--actief:hover {
background-color: #5ccf59;
color: #ffffff; }
body.dark-mode .styleguide .label--actief:hover i, body.dark-mode .styleguide .label--actief:hover span, body .styleguide .label--actief:hover i, body .styleguide .label--actief:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--vimeo, body .styleguide .label--vimeo {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #02ADEF;
border: 1px solid #0288bc;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #0176a3;
border-radius: .5rem; }
body.dark-mode .styleguide .label--vimeo i, body.dark-mode .styleguide .label--vimeo > i, body .styleguide .label--vimeo i, body .styleguide .label--vimeo > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .label--vimeo span, body.dark-mode .styleguide .label--vimeo > span, body .styleguide .label--vimeo span, body .styleguide .label--vimeo > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--vimeo, body .styleguide .label--vimeo {
justify-content: center; } }
body.dark-mode .styleguide .label--vimeo:hover, body .styleguide .label--vimeo:hover {
background-color: #0176a3;
color: #ffffff; }
body.dark-mode .styleguide .label--vimeo:hover i, body.dark-mode .styleguide .label--vimeo:hover span, body .styleguide .label--vimeo:hover i, body .styleguide .label--vimeo:hover span {
color: #ffffff; }
body.dark-mode .styleguide .label--youtube, body .styleguide .label--youtube {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #FF0200;
border: 1px solid #cc0200;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #b30100;
border-radius: .5rem; }
body.dark-mode .styleguide .label--youtube i, body.dark-mode .styleguide .label--youtube > i, body .styleguide .label--youtube i, body .styleguide .label--youtube > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .label--youtube span, body.dark-mode .styleguide .label--youtube > span, body .styleguide .label--youtube span, body .styleguide .label--youtube > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .label--youtube, body .styleguide .label--youtube {
justify-content: center; } }
body.dark-mode .styleguide .label--youtube:hover, body .styleguide .label--youtube:hover {
background-color: #b30100;
color: #ffffff; }
body.dark-mode .styleguide .label--youtube:hover i, body.dark-mode .styleguide .label--youtube:hover span, body .styleguide .label--youtube:hover i, body .styleguide .label--youtube:hover span {
color: #ffffff; }
.styleguide .label--10 {
padding: 0.5rem 0.625rem;
font-size: 0.687rem;
line-height: 0.687rem;
font-weight: normal;
border-radius: .5rem; }
.styleguide .label--20 {
padding: 0.5rem 1rem;
font-size: 0.65rem;
line-height: 0.65rem;
font-weight: normal;
border-radius: .5rem; }
.styleguide .label--30 {
padding: 0.65rem 1.25rem;
font-size: 0.65rem;
line-height: 0.65rem;
font-weight: 600;
border-radius: .5rem; }
.styleguide .label--40 {
padding: 0.7rem 1.5rem;
font-size: 0.7rem;
line-height: 0.7rem;
font-weight: 600;
border-radius: .5rem; }
.styleguide .label--60 {
padding: 0.8rem 1.5rem;
font-size: 0.8rem;
line-height: 0.8rem;
font-weight: 600;
border-radius: .25rem; }
.styleguide .label--70 {
padding: 0.85rem 1.5rem;
font-size: 0.85rem;
line-height: 0.85rem;
font-weight: 600;
border-radius: .25rem; }
.styleguide .label--80 {
padding: 0.9rem 1.5rem;
font-size: 0.9rem;
line-height: 0.9rem;
font-weight: 600;
border-radius: .25rem; }
.styleguide .label.color, .styleguide .color.combi-label {
color: #222222; }
.styleguide .label.color--white, .styleguide .color--white.combi-label {
color: #ffffff !important; }
.styleguide .label.color--white > *, .styleguide .color--white.combi-label > * {
color: #ffffff !important; }
.styleguide .label.color--black, .styleguide .color--black.combi-label {
color: #222222 !important; }
body.dark-mode .styleguide .label.color--black, body.dark-mode .styleguide .color--black.combi-label {
color: #ffffff !important; }
.styleguide .label.color--black > *, .styleguide .color--black.combi-label > * {
color: #222222 !important; }
.styleguide .label.color--cyaan, .styleguide .color--cyaan.combi-label {
color: #6ebfce !important; }
.styleguide .label.color--cyaan > *, .styleguide .color--cyaan.combi-label > * {
color: #6ebfce !important; }
.styleguide .label.color--grey, .styleguide .color--grey.combi-label {
color: #f3f3f3 !important; }
.styleguide .label.color--grey > *, .styleguide .color--grey.combi-label > * {
color: #f3f3f3 !important; }
.styleguide .label.color--grey-70, .styleguide .color--grey-70.combi-label {
color: #d5d5d5 !important; }
.styleguide .label.color--grey-70 > *, .styleguide .color--grey-70.combi-label > * {
color: #d5d5d5 !important; }
.styleguide .label.color--grey-dark, .styleguide .color--grey-dark.combi-label, .styleguide .add-new--product i.combi-label, .styleguide .add-new--product h2.combi-label, .styleguide .add-new--product i.label, .styleguide .add-new--product h2.label {
color: #a2a2a2 !important; }
.styleguide .label.color--grey-dark > *, .styleguide .color--grey-dark.combi-label > *, .styleguide .add-new--product i.combi-label > *, .styleguide .add-new--product h2.combi-label > *, .styleguide .add-new--product i.label > *, .styleguide .add-new--product h2.label > * {
color: #a2a2a2 !important; }
.styleguide .label.color--grey-darker, .styleguide .color--grey-darker.combi-label {
color: #6f6f6f !important; }
body.dark-mode .styleguide .label.color--grey-darker, body.dark-mode .styleguide .color--grey-darker.combi-label {
color: #ffffff !important; }
.styleguide .label.color--grey-darker > *, .styleguide .color--grey-darker.combi-label > * {
color: #6f6f6f !important; }
.styleguide .label.color--primary, .styleguide .color--primary.combi-label {
color: #33566c !important; }
.styleguide .label.color--primary > *, .styleguide .color--primary.combi-label > * {
color: #33566c !important; }
.styleguide .label.color--red, .styleguide .color--red.combi-label {
color: #f28282 !important; }
.styleguide .label.color--red > *, .styleguide .color--red.combi-label > * {
color: #f28282 !important; }
.styleguide .label.color--red-dark, .styleguide .color--red-dark.combi-label {
color: #ed5454 !important; }
.styleguide .label.color--red-dark > *, .styleguide .color--red-dark.combi-label > * {
color: #ed5454 !important; }
.styleguide .label.color--green, .styleguide .color--green.combi-label {
color: #96e094 !important; }
.styleguide .label.color--green > *, .styleguide .color--green.combi-label > * {
color: #96e094 !important; }
.styleguide .label.color--green-darker, .styleguide .color--green-darker.combi-label {
color: #34aa31 !important; }
.styleguide .label.color--green-darker > *, .styleguide .color--green-darker.combi-label > * {
color: #34aa31 !important; }
.styleguide .label.color--avocado, .styleguide .color--avocado.combi-label {
color: #8eb03a !important; }
.styleguide .label.color--avocado > *, .styleguide .color--avocado.combi-label > * {
color: #8eb03a !important; }
.styleguide .label.color--yellow, .styleguide .color--yellow.combi-label {
color: #f0f282 !important; }
.styleguide .label.color--yellow > *, .styleguide .color--yellow.combi-label > * {
color: #f0f282 !important; }
.styleguide .label.color--yellow-darken, .styleguide .color--yellow-darken.combi-label {
color: #eaed54 !important; }
.styleguide .label.color--yellow-darken > *, .styleguide .color--yellow-darken.combi-label > * {
color: #eaed54 !important; }
.styleguide .label.color--orange, .styleguide .color--orange.combi-label {
color: #cd8f17 !important; }
.styleguide .label.color--orange > *, .styleguide .color--orange.combi-label > * {
color: #cd8f17 !important; }
.styleguide .label.color--blue, .styleguide .color--blue.combi-label {
color: #79afe2 !important; }
.styleguide .label.color--blue > *, .styleguide .color--blue.combi-label > * {
color: #79afe2 !important; }
.styleguide .label.color--light-blue, .styleguide .color--light-blue.combi-label {
color: #82aaf2 !important; }
.styleguide .label.color--light-blue > *, .styleguide .color--light-blue.combi-label > * {
color: #82aaf2 !important; }
.styleguide .label.color--niet-actief, .styleguide .color--niet-actief.combi-label {
color: #f28282 !important; }
.styleguide .label.color--niet-actief > *, .styleguide .color--niet-actief.combi-label > * {
color: #f28282 !important; }
.styleguide .label.color--actief, .styleguide .color--actief.combi-label {
color: #96e094 !important; }
.styleguide .label.color--actief > *, .styleguide .color--actief.combi-label > * {
color: #96e094 !important; }
.styleguide .label.color--vimeo, .styleguide .color--vimeo.combi-label {
color: #02ADEF !important; }
.styleguide .label.color--vimeo > *, .styleguide .color--vimeo.combi-label > * {
color: #02ADEF !important; }
.styleguide .label.color--youtube, .styleguide .color--youtube.combi-label {
color: #FF0200 !important; }
.styleguide .label.color--youtube > *, .styleguide .color--youtube.combi-label > * {
color: #FF0200 !important; }
.styleguide .combi-label {
/* Als er geen 2e item aanwezig moet deze zich gedragen als een normale label*/ }
.styleguide .combi-label:first-of-type {
margin-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
font-weight: 600;
max-height: 2rem; }
body.dark-mode .styleguide .combi-label:first-of-type {
color: #484848; }
.styleguide .combi-label:nth-of-type(2) {
margin-left: 0;
margin-right: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
font-weight: 600;
max-height: 2rem; }
.styleguide .combi-label:last-of-type {
margin-left: 0;
margin-right: 0;
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
font-weight: 600; }
.styleguide .onvoldaan {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626;
background-color: #eb3d3d;
border-radius: .5rem;
padding: 0.5rem 0.625rem;
font-size: 0.687rem;
line-height: 0.687rem;
font-weight: normal;
text-transform: uppercase;
pointer-events: none; }
.styleguide .onvoldaan i, .styleguide .onvoldaan > i {
color: #222222;
cursor: pointer; }
.styleguide .onvoldaan span, .styleguide .onvoldaan > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .onvoldaan {
justify-content: center; } }
.styleguide .onvoldaan:hover {
background-color: #e82626;
border: 1px solid #c61515; }
.styleguide .onvoldaan > i, .styleguide .onvoldaan > span {
color: #ffffff; }
.styleguide .onvoldaan:hover {
background-color: #eb3d3d;
color: #ffffff; }
.styleguide .onvoldaan:hover i, .styleguide .onvoldaan:hover span {
color: #ffffff; }
.styleguide .status {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #3c3c3c;
border: 1px solid #222222;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #151515;
border-radius: .5rem;
padding: 0.5rem 0.625rem;
font-size: 0.687rem;
line-height: 0.687rem;
font-weight: normal;
pointer-events: none; }
.styleguide .status i, .styleguide .status > i {
color: #ffffff;
cursor: pointer; }
.styleguide .status span, .styleguide .status > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .status {
justify-content: center; } }
.styleguide .status:hover {
background-color: #151515;
color: #ffffff; }
.styleguide .status:hover i, .styleguide .status:hover span {
color: #ffffff; }
body.dark-mode .styleguide .status {
border: 1px solid rgba(255, 255, 255, 0.3); }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #33566c;
border: 1px solid #233a49;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .button i, .styleguide .button > i {
color: #ffffff;
cursor: pointer; }
.styleguide .button span, .styleguide .button > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .button {
justify-content: center; } }
.styleguide .button:hover {
background-color: #1a2d38;
color: #ffffff; }
.styleguide .button:hover i, .styleguide .button:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #46a0d9;
border: 1px solid #2887c3;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button i, body.dark-mode .styleguide .button > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button span, body.dark-mode .styleguide .button > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button {
justify-content: center; } }
body.dark-mode .styleguide .button:hover {
background-color: #2479ae;
color: #ffffff; }
body.dark-mode .styleguide .button:hover i, body.dark-mode .styleguide .button:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button, body .styleguide .button {
/* Kleur button genereren */ }
body.dark-mode .styleguide .button--white, body .styleguide .button--white {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #ffffff;
border: 1px solid #e6e6e6;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
border: 1px solid #f2f2f2; }
body.dark-mode .styleguide .button--white i, body.dark-mode .styleguide .button--white > i, body .styleguide .button--white i, body .styleguide .button--white > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--white span, body.dark-mode .styleguide .button--white > span, body .styleguide .button--white span, body .styleguide .button--white > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--white, body .styleguide .button--white {
justify-content: center; } }
body.dark-mode .styleguide .button--white:hover, body .styleguide .button--white:hover {
background-color: #fafafa;
border: 1px solid #e6e6e6;
color: #222222; }
body.dark-mode .styleguide .button--white:hover i, body.dark-mode .styleguide .button--white:hover span, body .styleguide .button--white:hover i, body .styleguide .button--white:hover span {
color: #222222; }
body.dark-mode .styleguide .button--black, body .styleguide .button--black {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #222222;
border: 1px solid #090909;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
border: 1px solid rgba(255, 255, 255, 0.3); }
body.dark-mode .styleguide .button--black i, body.dark-mode .styleguide .button--black > i, body .styleguide .button--black i, body .styleguide .button--black > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--black span, body.dark-mode .styleguide .button--black > span, body .styleguide .button--black span, body .styleguide .button--black > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--black, body .styleguide .button--black {
justify-content: center; } }
body.dark-mode .styleguide .button--black:hover, body .styleguide .button--black:hover {
background-color: black;
color: #ffffff; }
body.dark-mode .styleguide .button--black:hover i, body.dark-mode .styleguide .button--black:hover span, body .styleguide .button--black:hover i, body .styleguide .button--black:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--cyaan, body .styleguide .button--cyaan {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #6ebfce;
border: 1px solid #48aec1;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--cyaan i, body.dark-mode .styleguide .button--cyaan > i, body .styleguide .button--cyaan i, body .styleguide .button--cyaan > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--cyaan span, body.dark-mode .styleguide .button--cyaan > span, body .styleguide .button--cyaan span, body .styleguide .button--cyaan > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--cyaan, body .styleguide .button--cyaan {
justify-content: center; } }
body.dark-mode .styleguide .button--cyaan:hover, body .styleguide .button--cyaan:hover {
background-color: #3ca0b3;
color: #ffffff; }
body.dark-mode .styleguide .button--cyaan:hover i, body.dark-mode .styleguide .button--cyaan:hover span, body .styleguide .button--cyaan:hover i, body .styleguide .button--cyaan:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--grey, body .styleguide .button--grey {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f3f3f3;
border: 1px solid #dadada;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey i, body.dark-mode .styleguide .button--grey > i, body .styleguide .button--grey i, body .styleguide .button--grey > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--grey span, body.dark-mode .styleguide .button--grey > span, body .styleguide .button--grey span, body .styleguide .button--grey > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey, body .styleguide .button--grey {
justify-content: center; } }
body.dark-mode .styleguide .button--grey:hover, body .styleguide .button--grey:hover {
background-color: #cdcdcd;
color: #222222; }
body.dark-mode .styleguide .button--grey:hover i, body.dark-mode .styleguide .button--grey:hover span, body .styleguide .button--grey:hover i, body .styleguide .button--grey:hover span {
color: #222222; }
body.dark-mode .styleguide .button--grey-70, body .styleguide .button--grey-70 {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #d5d5d5;
border: 1px solid #bbbbbb;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey-70 i, body.dark-mode .styleguide .button--grey-70 > i, body .styleguide .button--grey-70 i, body .styleguide .button--grey-70 > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--grey-70 span, body.dark-mode .styleguide .button--grey-70 > span, body .styleguide .button--grey-70 span, body .styleguide .button--grey-70 > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey-70, body .styleguide .button--grey-70 {
justify-content: center; } }
body.dark-mode .styleguide .button--grey-70:hover, body .styleguide .button--grey-70:hover {
background-color: #aeaeae;
color: #222222; }
body.dark-mode .styleguide .button--grey-70:hover i, body.dark-mode .styleguide .button--grey-70:hover span, body .styleguide .button--grey-70:hover i, body .styleguide .button--grey-70:hover span {
color: #222222; }
body.dark-mode .styleguide .button--grey-dark, body .styleguide .button--grey-dark {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #a2a2a2;
border: 1px solid #888888;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey-dark i, body.dark-mode .styleguide .button--grey-dark > i, body .styleguide .button--grey-dark i, body .styleguide .button--grey-dark > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--grey-dark span, body.dark-mode .styleguide .button--grey-dark > span, body .styleguide .button--grey-dark span, body .styleguide .button--grey-dark > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey-dark, body .styleguide .button--grey-dark {
justify-content: center; } }
body.dark-mode .styleguide .button--grey-dark:hover, body .styleguide .button--grey-dark:hover {
background-color: #7b7b7b;
color: #ffffff; }
body.dark-mode .styleguide .button--grey-dark:hover i, body.dark-mode .styleguide .button--grey-dark:hover span, body .styleguide .button--grey-dark:hover i, body .styleguide .button--grey-dark:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--grey-darker, body .styleguide .button--grey-darker {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #6f6f6f;
border: 1px solid #555555;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--grey-darker i, body.dark-mode .styleguide .button--grey-darker > i, body .styleguide .button--grey-darker i, body .styleguide .button--grey-darker > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--grey-darker span, body.dark-mode .styleguide .button--grey-darker > span, body .styleguide .button--grey-darker span, body .styleguide .button--grey-darker > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--grey-darker, body .styleguide .button--grey-darker {
justify-content: center; } }
body.dark-mode .styleguide .button--grey-darker:hover, body .styleguide .button--grey-darker:hover {
background-color: #484848;
color: #ffffff; }
body.dark-mode .styleguide .button--grey-darker:hover i, body.dark-mode .styleguide .button--grey-darker:hover span, body .styleguide .button--grey-darker:hover i, body .styleguide .button--grey-darker:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--primary, body .styleguide .button--primary {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #33566c;
border: 1px solid #233a49;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--primary i, body.dark-mode .styleguide .button--primary > i, body .styleguide .button--primary i, body .styleguide .button--primary > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--primary span, body.dark-mode .styleguide .button--primary > span, body .styleguide .button--primary span, body .styleguide .button--primary > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--primary, body .styleguide .button--primary {
justify-content: center; } }
body.dark-mode .styleguide .button--primary:hover, body .styleguide .button--primary:hover {
background-color: #1a2d38;
color: #ffffff; }
body.dark-mode .styleguide .button--primary:hover i, body.dark-mode .styleguide .button--primary:hover span, body .styleguide .button--primary:hover i, body .styleguide .button--primary:hover span {
color: #ffffff; }
body.dark-mode body.dark-mode .styleguide .button--primary, body.dark-mode body .styleguide .button--primary {
background-color: #46a0d9; }
body.dark-mode .styleguide .button--red, body .styleguide .button--red {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626;
color: #ffffff; }
body.dark-mode .styleguide .button--red i, body.dark-mode .styleguide .button--red > i, body .styleguide .button--red i, body .styleguide .button--red > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--red span, body.dark-mode .styleguide .button--red > span, body .styleguide .button--red span, body .styleguide .button--red > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--red, body .styleguide .button--red {
justify-content: center; } }
body.dark-mode .styleguide .button--red:hover, body .styleguide .button--red:hover {
background-color: #e82626;
border: 1px solid #c61515; }
body.dark-mode .styleguide .button--red > i, body.dark-mode .styleguide .button--red > span, body .styleguide .button--red > i, body .styleguide .button--red > span {
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover, body .styleguide .button--red:hover {
background-color: #eb3d3d;
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover i, body.dark-mode .styleguide .button--red:hover span, body .styleguide .button--red:hover i, body .styleguide .button--red:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--red span, body.dark-mode .styleguide .button--red i, body .styleguide .button--red span, body .styleguide .button--red i {
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover, body .styleguide .button--red:hover {
color: #ffffff; }
body.dark-mode .styleguide .button--red:hover span, body.dark-mode .styleguide .button--red:hover i, body .styleguide .button--red:hover span, body .styleguide .button--red:hover i {
color: #ffffff; }
body.dark-mode .styleguide .button--red-dark, body .styleguide .button--red-dark {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #ed5454;
border: 1px solid #e82626;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--red-dark i, body.dark-mode .styleguide .button--red-dark > i, body .styleguide .button--red-dark i, body .styleguide .button--red-dark > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--red-dark span, body.dark-mode .styleguide .button--red-dark > span, body .styleguide .button--red-dark span, body .styleguide .button--red-dark > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--red-dark, body .styleguide .button--red-dark {
justify-content: center; } }
body.dark-mode .styleguide .button--red-dark:hover, body .styleguide .button--red-dark:hover {
background-color: #dd1717;
color: #ffffff; }
body.dark-mode .styleguide .button--red-dark:hover i, body.dark-mode .styleguide .button--red-dark:hover span, body .styleguide .button--red-dark:hover i, body .styleguide .button--red-dark:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--green, body .styleguide .button--green {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--green i, body.dark-mode .styleguide .button--green > i, body .styleguide .button--green i, body .styleguide .button--green > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--green span, body.dark-mode .styleguide .button--green > span, body .styleguide .button--green span, body .styleguide .button--green > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--green, body .styleguide .button--green {
justify-content: center; } }
body.dark-mode .styleguide .button--green:hover, body .styleguide .button--green:hover {
background-color: #5ccf59;
color: #ffffff; }
body.dark-mode .styleguide .button--green:hover i, body.dark-mode .styleguide .button--green:hover span, body .styleguide .button--green:hover i, body .styleguide .button--green:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--green-darker, body .styleguide .button--green-darker {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #34aa31;
border: 1px solid #288226;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--green-darker i, body.dark-mode .styleguide .button--green-darker > i, body .styleguide .button--green-darker i, body .styleguide .button--green-darker > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--green-darker span, body.dark-mode .styleguide .button--green-darker > span, body .styleguide .button--green-darker span, body .styleguide .button--green-darker > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--green-darker, body .styleguide .button--green-darker {
justify-content: center; } }
body.dark-mode .styleguide .button--green-darker:hover, body .styleguide .button--green-darker:hover {
background-color: #226e20;
color: #ffffff; }
body.dark-mode .styleguide .button--green-darker:hover i, body.dark-mode .styleguide .button--green-darker:hover span, body .styleguide .button--green-darker:hover i, body .styleguide .button--green-darker:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--avocado, body .styleguide .button--avocado {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #8eb03a;
border: 1px solid #6f8a2d;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--avocado i, body.dark-mode .styleguide .button--avocado > i, body .styleguide .button--avocado i, body .styleguide .button--avocado > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--avocado span, body.dark-mode .styleguide .button--avocado > span, body .styleguide .button--avocado span, body .styleguide .button--avocado > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--avocado, body .styleguide .button--avocado {
justify-content: center; } }
body.dark-mode .styleguide .button--avocado:hover, body .styleguide .button--avocado:hover {
background-color: #607627;
color: #ffffff; }
body.dark-mode .styleguide .button--avocado:hover i, body.dark-mode .styleguide .button--avocado:hover span, body .styleguide .button--avocado:hover i, body .styleguide .button--avocado:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--yellow, body .styleguide .button--yellow {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f0f282;
border: 1px solid #eaed54;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #eaed54; }
body.dark-mode .styleguide .button--yellow i, body.dark-mode .styleguide .button--yellow > i, body .styleguide .button--yellow i, body .styleguide .button--yellow > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--yellow span, body.dark-mode .styleguide .button--yellow > span, body .styleguide .button--yellow span, body .styleguide .button--yellow > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--yellow, body .styleguide .button--yellow {
justify-content: center; } }
body.dark-mode .styleguide .button--yellow:hover, body .styleguide .button--yellow:hover {
background-color: #686a0b;
border: 1px solid #c3c615; }
body.dark-mode .styleguide .button--yellow:hover i, body.dark-mode .styleguide .button--yellow:hover span, body .styleguide .button--yellow:hover i, body .styleguide .button--yellow:hover span {
color: #222222; }
body.dark-mode .styleguide .button--yellow:hover, body .styleguide .button--yellow:hover {
background-color: #e8eb3d;
color: #ffffff; }
body.dark-mode .styleguide .button--yellow:hover i, body.dark-mode .styleguide .button--yellow:hover span, body .styleguide .button--yellow:hover i, body .styleguide .button--yellow:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--yellow-darken, body .styleguide .button--yellow-darken {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #eaed54;
border: 1px solid #e5e826;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--yellow-darken i, body.dark-mode .styleguide .button--yellow-darken > i, body .styleguide .button--yellow-darken i, body .styleguide .button--yellow-darken > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--yellow-darken span, body.dark-mode .styleguide .button--yellow-darken > span, body .styleguide .button--yellow-darken span, body .styleguide .button--yellow-darken > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--yellow-darken, body .styleguide .button--yellow-darken {
justify-content: center; } }
body.dark-mode .styleguide .button--yellow-darken:hover, body .styleguide .button--yellow-darken:hover {
background-color: #dadd17;
color: #ffffff; }
body.dark-mode .styleguide .button--yellow-darken:hover i, body.dark-mode .styleguide .button--yellow-darken:hover span, body .styleguide .button--yellow-darken:hover i, body .styleguide .button--yellow-darken:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--orange, body .styleguide .button--orange {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #cd8f17;
border: 1px solid #9f6f12;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--orange i, body.dark-mode .styleguide .button--orange > i, body .styleguide .button--orange i, body .styleguide .button--orange > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--orange span, body.dark-mode .styleguide .button--orange > span, body .styleguide .button--orange span, body .styleguide .button--orange > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--orange, body .styleguide .button--orange {
justify-content: center; } }
body.dark-mode .styleguide .button--orange:hover, body .styleguide .button--orange:hover {
background-color: #885f0f;
color: #ffffff; }
body.dark-mode .styleguide .button--orange:hover i, body.dark-mode .styleguide .button--orange:hover span, body .styleguide .button--orange:hover i, body .styleguide .button--orange:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--blue, body .styleguide .button--blue {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #79afe2;
border: 1px solid #4f96d9;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--blue i, body.dark-mode .styleguide .button--blue > i, body .styleguide .button--blue i, body .styleguide .button--blue > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--blue span, body.dark-mode .styleguide .button--blue > span, body .styleguide .button--blue span, body .styleguide .button--blue > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--blue, body .styleguide .button--blue {
justify-content: center; } }
body.dark-mode .styleguide .button--blue:hover, body .styleguide .button--blue:hover {
background-color: #3a89d4;
color: #ffffff; }
body.dark-mode .styleguide .button--blue:hover i, body.dark-mode .styleguide .button--blue:hover span, body .styleguide .button--blue:hover i, body .styleguide .button--blue:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue, body .styleguide .button--light-blue {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #82aaf2;
border: 1px solid #548bed;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue i, body.dark-mode .styleguide .button--light-blue > i, body .styleguide .button--light-blue i, body .styleguide .button--light-blue > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--light-blue span, body.dark-mode .styleguide .button--light-blue > span, body .styleguide .button--light-blue span, body .styleguide .button--light-blue > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--light-blue, body .styleguide .button--light-blue {
justify-content: center; } }
body.dark-mode .styleguide .button--light-blue > i, body.dark-mode .styleguide .button--light-blue > span, body .styleguide .button--light-blue > i, body .styleguide .button--light-blue > span {
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue:hover, body .styleguide .button--light-blue:hover {
background-color: #3d7beb;
color: #ffffff; }
body.dark-mode .styleguide .button--light-blue:hover i, body.dark-mode .styleguide .button--light-blue:hover span, body .styleguide .button--light-blue:hover i, body .styleguide .button--light-blue:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--niet-actief, body .styleguide .button--niet-actief {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626; }
body.dark-mode .styleguide .button--niet-actief i, body.dark-mode .styleguide .button--niet-actief > i, body .styleguide .button--niet-actief i, body .styleguide .button--niet-actief > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--niet-actief span, body.dark-mode .styleguide .button--niet-actief > span, body .styleguide .button--niet-actief span, body .styleguide .button--niet-actief > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--niet-actief, body .styleguide .button--niet-actief {
justify-content: center; } }
body.dark-mode .styleguide .button--niet-actief:hover, body .styleguide .button--niet-actief:hover {
background-color: #e82626;
border: 1px solid #c61515; }
body.dark-mode .styleguide .button--niet-actief > i, body.dark-mode .styleguide .button--niet-actief > span, body .styleguide .button--niet-actief > i, body .styleguide .button--niet-actief > span {
color: #ffffff; }
body.dark-mode .styleguide .button--niet-actief:hover, body .styleguide .button--niet-actief:hover {
background-color: #eb3d3d;
color: #ffffff; }
body.dark-mode .styleguide .button--niet-actief:hover i, body.dark-mode .styleguide .button--niet-actief:hover span, body .styleguide .button--niet-actief:hover i, body .styleguide .button--niet-actief:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--actief, body .styleguide .button--actief {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--actief i, body.dark-mode .styleguide .button--actief > i, body .styleguide .button--actief i, body .styleguide .button--actief > i {
color: #222222;
cursor: pointer; }
body.dark-mode .styleguide .button--actief span, body.dark-mode .styleguide .button--actief > span, body .styleguide .button--actief span, body .styleguide .button--actief > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--actief, body .styleguide .button--actief {
justify-content: center; } }
body.dark-mode .styleguide .button--actief:hover, body .styleguide .button--actief:hover {
background-color: #5ccf59;
color: #ffffff; }
body.dark-mode .styleguide .button--actief:hover i, body.dark-mode .styleguide .button--actief:hover span, body .styleguide .button--actief:hover i, body .styleguide .button--actief:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--vimeo, body .styleguide .button--vimeo {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #02ADEF;
border: 1px solid #0288bc;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--vimeo i, body.dark-mode .styleguide .button--vimeo > i, body .styleguide .button--vimeo i, body .styleguide .button--vimeo > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--vimeo span, body.dark-mode .styleguide .button--vimeo > span, body .styleguide .button--vimeo span, body .styleguide .button--vimeo > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--vimeo, body .styleguide .button--vimeo {
justify-content: center; } }
body.dark-mode .styleguide .button--vimeo:hover, body .styleguide .button--vimeo:hover {
background-color: #0176a3;
color: #ffffff; }
body.dark-mode .styleguide .button--vimeo:hover i, body.dark-mode .styleguide .button--vimeo:hover span, body .styleguide .button--vimeo:hover i, body .styleguide .button--vimeo:hover span {
color: #ffffff; }
body.dark-mode .styleguide .button--youtube, body .styleguide .button--youtube {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #FF0200;
border: 1px solid #cc0200;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .button--youtube i, body.dark-mode .styleguide .button--youtube > i, body .styleguide .button--youtube i, body .styleguide .button--youtube > i {
color: #ffffff;
cursor: pointer; }
body.dark-mode .styleguide .button--youtube span, body.dark-mode .styleguide .button--youtube > span, body .styleguide .button--youtube span, body .styleguide .button--youtube > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
body.dark-mode .styleguide .button--youtube, body .styleguide .button--youtube {
justify-content: center; } }
body.dark-mode .styleguide .button--youtube:hover, body .styleguide .button--youtube:hover {
background-color: #b30100;
color: #ffffff; }
body.dark-mode .styleguide .button--youtube:hover i, body.dark-mode .styleguide .button--youtube:hover span, body .styleguide .button--youtube:hover i, body .styleguide .button--youtube:hover span {
color: #ffffff; }
.styleguide .button--no-margin {
margin-right: 0 !important; }
.styleguide .button--no-margin--bottom {
margin-bottom: 0 !important; }
.styleguide .button--10 {
padding: 0.5rem 0.625rem;
font-size: 0.687rem;
line-height: 0.687rem;
font-weight: normal; }
.styleguide .button--20 {
padding: 0.5rem 1rem;
font-size: 0.65rem;
line-height: 0.65rem;
font-weight: normal; }
.styleguide .button--30 {
padding: 0.65rem 1.25rem;
font-size: 0.65rem;
line-height: 0.65rem;
font-weight: 600; }
.styleguide .button--40 {
padding: 0.7rem 1.5rem;
font-size: 0.7rem;
line-height: 0.7rem;
font-weight: 600; }
.styleguide .button--60 {
padding: 0.8rem 1.5rem;
font-size: 0.8rem;
line-height: 0.8rem;
font-weight: 600; }
.styleguide .button--70 {
padding: 0.85rem 1.5rem;
font-size: 0.85rem;
line-height: 0.85rem;
font-weight: 600; }
.styleguide .button--80 {
padding: 0.9rem 1.5rem;
font-size: 0.9rem;
line-height: 0.9rem;
font-weight: 600; }
.styleguide .button--input {
height: 1.75rem !important; }
.styleguide .icon-button {
text-decoration: none;
width: 2rem;
height: 2rem;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 1rem 0 0;
border-radius: .25rem;
border: 1px solid #bbbbbb;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .icon-button > i {
font-size: 1rem;
line-height: 1rem;
width: 1rem;
height: 1rem;
color: #a2a2a2;
text-decoration: none; }
.styleguide .icon-button:hover i {
color: #888888; }
.styleguide .annuleer-button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626;
padding: 0.7rem 1.5rem;
font-size: 0.7rem;
line-height: 0.7rem;
font-weight: 600; }
.styleguide .annuleer-button i, .styleguide .annuleer-button > i {
color: #222222;
cursor: pointer; }
.styleguide .annuleer-button span, .styleguide .annuleer-button > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .annuleer-button {
justify-content: center; } }
.styleguide .annuleer-button:hover {
background-color: #e82626;
border: 1px solid #c61515; }
.styleguide .annuleer-button > i, .styleguide .annuleer-button > span {
color: #ffffff; }
.styleguide .annuleer-button:hover {
background-color: #eb3d3d;
color: #ffffff; }
.styleguide .annuleer-button:hover i, .styleguide .annuleer-button:hover span {
color: #ffffff; }
.styleguide .succes-button {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
padding: 0.7rem 1.5rem;
font-size: 0.7rem;
line-height: 0.7rem;
font-weight: 600; }
.styleguide .succes-button i, .styleguide .succes-button > i {
color: #222222;
cursor: pointer; }
.styleguide .succes-button span, .styleguide .succes-button > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .succes-button {
justify-content: center; } }
.styleguide .succes-button:hover {
background-color: #5ccf59;
color: #ffffff; }
.styleguide .succes-button:hover i, .styleguide .succes-button:hover span {
color: #ffffff; }
.styleguide .filter, .styleguide .combi-filter {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #33566c;
border: 1px solid #233a49;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #1a2d38;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter i, .styleguide .combi-filter i, .styleguide .filter > i, .styleguide .combi-filter > i {
color: #ffffff;
cursor: pointer; }
.styleguide .filter span, .styleguide .combi-filter span, .styleguide .filter > span, .styleguide .combi-filter > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter, .styleguide .combi-filter {
justify-content: center; } }
.styleguide .filter:hover, .styleguide .combi-filter:hover {
background-color: #1a2d38;
color: #ffffff; }
.styleguide .filter:hover i, .styleguide .combi-filter:hover i, .styleguide .filter:hover span, .styleguide .combi-filter:hover span {
color: #ffffff; }
.styleguide .filter:hover, .styleguide .combi-filter:hover {
color: #ffffff; }
.styleguide .filter:hover i, .styleguide .combi-filter:hover i, .styleguide .filter:hover span, .styleguide .combi-filter:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter > i, .styleguide .combi-filter > i, .styleguide .filter > span, .styleguide .combi-filter > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--white {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #ffffff;
border: 1px solid #e6e6e6;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
border: 1px solid #f2f2f2;
cursor: pointer;
color: #222222;
border-radius: 0;
color: #555555;
border: 1px solid #555555; }
.styleguide .filter--white i, .styleguide .filter--white > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--white span, .styleguide .filter--white > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--white {
justify-content: center; } }
.styleguide .filter--white:hover {
background-color: #fafafa;
border: 1px solid #e6e6e6;
color: #222222; }
.styleguide .filter--white:hover i, .styleguide .filter--white:hover span {
color: #222222; }
.styleguide .filter--white:hover {
color: #222222; }
.styleguide .filter--white:hover i, .styleguide .filter--white:hover span {
color: #222222;
cursor: default; }
.styleguide .filter--white > i, .styleguide .filter--white > span {
color: #222222;
cursor: pointer; }
.styleguide .filter--white:hover {
background-color: #b3b3b3;
cursor: pointer; }
.styleguide .filter--white:hover span, .styleguide .filter--white:hover i {
cursor: pointer; }
.styleguide .filter--white span, .styleguide .filter--white i {
color: #555555; }
.styleguide .filter--white:hover {
background-color: #ffffff;
color: #3c3c3c;
border: 1px solid #3c3c3c; }
.styleguide .filter--white:hover span, .styleguide .filter--white:hover i {
color: #222222; }
.styleguide .filter--black {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #222222;
border: 1px solid #090909;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: black;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--black i, .styleguide .filter--black > i {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--black span, .styleguide .filter--black > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--black {
justify-content: center; } }
.styleguide .filter--black:hover {
background-color: black;
color: #ffffff; }
.styleguide .filter--black:hover i, .styleguide .filter--black:hover span {
color: #ffffff; }
.styleguide .filter--black:hover {
color: #ffffff; }
.styleguide .filter--black:hover i, .styleguide .filter--black:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--black > i, .styleguide .filter--black > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--black:hover {
background-color: black;
cursor: pointer; }
.styleguide .filter--black:hover span, .styleguide .filter--black:hover i {
cursor: pointer; }
.styleguide .filter--cyaan {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #6ebfce;
border: 1px solid #48aec1;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #3ca0b3;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--cyaan i, .styleguide .filter--cyaan > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--cyaan span, .styleguide .filter--cyaan > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--cyaan {
justify-content: center; } }
.styleguide .filter--cyaan:hover {
background-color: #3ca0b3;
color: #ffffff; }
.styleguide .filter--cyaan:hover i, .styleguide .filter--cyaan:hover span {
color: #ffffff; }
.styleguide .filter--cyaan:hover {
color: #ffffff; }
.styleguide .filter--cyaan:hover i, .styleguide .filter--cyaan:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--cyaan > i, .styleguide .filter--cyaan > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--cyaan:hover {
background-color: #296d7a;
cursor: pointer; }
.styleguide .filter--cyaan:hover span, .styleguide .filter--cyaan:hover i {
cursor: pointer; }
.styleguide .filter--grey {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f3f3f3;
border: 1px solid #dadada;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #cdcdcd;
cursor: pointer;
color: #222222;
border-radius: 0; }
.styleguide .filter--grey i, .styleguide .filter--grey > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--grey span, .styleguide .filter--grey > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--grey {
justify-content: center; } }
.styleguide .filter--grey:hover {
background-color: #cdcdcd;
color: #222222; }
.styleguide .filter--grey:hover i, .styleguide .filter--grey:hover span {
color: #222222; }
.styleguide .filter--grey:hover {
color: #222222; }
.styleguide .filter--grey:hover i, .styleguide .filter--grey:hover span {
color: #222222;
cursor: default; }
.styleguide .filter--grey > i, .styleguide .filter--grey > span {
color: #222222;
cursor: pointer; }
.styleguide .filter--grey:hover {
background-color: #a7a7a7;
cursor: pointer; }
.styleguide .filter--grey:hover span, .styleguide .filter--grey:hover i {
cursor: pointer; }
.styleguide .filter--grey-70 {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #d5d5d5;
border: 1px solid #bbbbbb;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #aeaeae;
cursor: pointer;
color: #222222;
border-radius: 0; }
.styleguide .filter--grey-70 i, .styleguide .filter--grey-70 > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--grey-70 span, .styleguide .filter--grey-70 > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--grey-70 {
justify-content: center; } }
.styleguide .filter--grey-70:hover {
background-color: #aeaeae;
color: #222222; }
.styleguide .filter--grey-70:hover i, .styleguide .filter--grey-70:hover span {
color: #222222; }
.styleguide .filter--grey-70:hover {
color: #222222; }
.styleguide .filter--grey-70:hover i, .styleguide .filter--grey-70:hover span {
color: #222222;
cursor: default; }
.styleguide .filter--grey-70 > i, .styleguide .filter--grey-70 > span {
color: #222222;
cursor: pointer; }
.styleguide .filter--grey-70:hover {
background-color: #888888;
cursor: pointer; }
.styleguide .filter--grey-70:hover span, .styleguide .filter--grey-70:hover i {
cursor: pointer; }
.styleguide .filter--grey-dark {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #a2a2a2;
border: 1px solid #888888;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #7b7b7b;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--grey-dark i, .styleguide .filter--grey-dark > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--grey-dark span, .styleguide .filter--grey-dark > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--grey-dark {
justify-content: center; } }
.styleguide .filter--grey-dark:hover {
background-color: #7b7b7b;
color: #ffffff; }
.styleguide .filter--grey-dark:hover i, .styleguide .filter--grey-dark:hover span {
color: #ffffff; }
.styleguide .filter--grey-dark:hover {
color: #ffffff; }
.styleguide .filter--grey-dark:hover i, .styleguide .filter--grey-dark:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--grey-dark > i, .styleguide .filter--grey-dark > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--grey-dark:hover {
background-color: #555555;
cursor: pointer; }
.styleguide .filter--grey-dark:hover span, .styleguide .filter--grey-dark:hover i {
cursor: pointer; }
.styleguide .filter--grey-darker {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #6f6f6f;
border: 1px solid #555555;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #484848;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--grey-darker i, .styleguide .filter--grey-darker > i {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--grey-darker span, .styleguide .filter--grey-darker > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--grey-darker {
justify-content: center; } }
.styleguide .filter--grey-darker:hover {
background-color: #484848;
color: #ffffff; }
.styleguide .filter--grey-darker:hover i, .styleguide .filter--grey-darker:hover span {
color: #ffffff; }
.styleguide .filter--grey-darker:hover {
color: #ffffff; }
.styleguide .filter--grey-darker:hover i, .styleguide .filter--grey-darker:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--grey-darker > i, .styleguide .filter--grey-darker > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--grey-darker:hover {
background-color: #222222;
cursor: pointer; }
.styleguide .filter--grey-darker:hover span, .styleguide .filter--grey-darker:hover i {
cursor: pointer; }
.styleguide .filter--primary {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #33566c;
border: 1px solid #233a49;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #1a2d38;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--primary i, .styleguide .filter--primary > i {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--primary span, .styleguide .filter--primary > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--primary {
justify-content: center; } }
.styleguide .filter--primary:hover {
background-color: #1a2d38;
color: #ffffff; }
.styleguide .filter--primary:hover i, .styleguide .filter--primary:hover span {
color: #ffffff; }
.styleguide .filter--primary:hover {
color: #ffffff; }
.styleguide .filter--primary:hover i, .styleguide .filter--primary:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--primary > i, .styleguide .filter--primary > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--primary:hover {
background-color: #020304;
cursor: pointer; }
.styleguide .filter--primary:hover span, .styleguide .filter--primary:hover i {
cursor: pointer; }
.styleguide .filter--red {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626;
background-color: #eb3d3d;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--red i, .styleguide .filter--red > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--red span, .styleguide .filter--red > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--red {
justify-content: center; } }
.styleguide .filter--red:hover {
background-color: #e82626;
border: 1px solid #c61515; }
.styleguide .filter--red > i, .styleguide .filter--red > span {
color: #ffffff; }
.styleguide .filter--red:hover {
background-color: #eb3d3d;
color: #ffffff; }
.styleguide .filter--red:hover i, .styleguide .filter--red:hover span {
color: #ffffff; }
.styleguide .filter--red:hover {
color: #ffffff; }
.styleguide .filter--red:hover i, .styleguide .filter--red:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--red > i, .styleguide .filter--red > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--red:hover {
background-color: #c61515;
cursor: pointer; }
.styleguide .filter--red:hover span, .styleguide .filter--red:hover i {
cursor: pointer; }
.styleguide .filter--red-dark {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #ed5454;
border: 1px solid #e82626;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #dd1717;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--red-dark i, .styleguide .filter--red-dark > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--red-dark span, .styleguide .filter--red-dark > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--red-dark {
justify-content: center; } }
.styleguide .filter--red-dark:hover {
background-color: #dd1717;
color: #ffffff; }
.styleguide .filter--red-dark:hover i, .styleguide .filter--red-dark:hover span {
color: #ffffff; }
.styleguide .filter--red-dark:hover {
color: #ffffff; }
.styleguide .filter--red-dark:hover i, .styleguide .filter--red-dark:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--red-dark > i, .styleguide .filter--red-dark > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--red-dark:hover {
background-color: #981010;
cursor: pointer; }
.styleguide .filter--red-dark:hover span, .styleguide .filter--red-dark:hover i {
cursor: pointer; }
.styleguide .filter--green {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #5ccf59;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--green i, .styleguide .filter--green > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--green span, .styleguide .filter--green > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--green {
justify-content: center; } }
.styleguide .filter--green:hover {
background-color: #5ccf59;
color: #ffffff; }
.styleguide .filter--green:hover i, .styleguide .filter--green:hover span {
color: #ffffff; }
.styleguide .filter--green:hover {
color: #ffffff; }
.styleguide .filter--green:hover i, .styleguide .filter--green:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--green > i, .styleguide .filter--green > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--green:hover {
background-color: #34aa31;
cursor: pointer; }
.styleguide .filter--green:hover span, .styleguide .filter--green:hover i {
cursor: pointer; }
.styleguide .filter--green-darker {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #34aa31;
border: 1px solid #288226;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #226e20;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--green-darker i, .styleguide .filter--green-darker > i {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--green-darker span, .styleguide .filter--green-darker > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--green-darker {
justify-content: center; } }
.styleguide .filter--green-darker:hover {
background-color: #226e20;
color: #ffffff; }
.styleguide .filter--green-darker:hover i, .styleguide .filter--green-darker:hover span {
color: #ffffff; }
.styleguide .filter--green-darker:hover {
color: #ffffff; }
.styleguide .filter--green-darker:hover i, .styleguide .filter--green-darker:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--green-darker > i, .styleguide .filter--green-darker > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--green-darker:hover {
background-color: #10330f;
cursor: pointer; }
.styleguide .filter--green-darker:hover span, .styleguide .filter--green-darker:hover i {
cursor: pointer; }
.styleguide .filter--avocado {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #8eb03a;
border: 1px solid #6f8a2d;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #607627;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--avocado i, .styleguide .filter--avocado > i {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--avocado span, .styleguide .filter--avocado > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--avocado {
justify-content: center; } }
.styleguide .filter--avocado:hover {
background-color: #607627;
color: #ffffff; }
.styleguide .filter--avocado:hover i, .styleguide .filter--avocado:hover span {
color: #ffffff; }
.styleguide .filter--avocado:hover {
color: #ffffff; }
.styleguide .filter--avocado:hover i, .styleguide .filter--avocado:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--avocado > i, .styleguide .filter--avocado > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--avocado:hover {
background-color: #313d14;
cursor: pointer; }
.styleguide .filter--avocado:hover span, .styleguide .filter--avocado:hover i {
cursor: pointer; }
.styleguide .filter--yellow {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f0f282;
border: 1px solid #eaed54;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #eaed54;
background-color: #e8eb3d;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--yellow i, .styleguide .filter--yellow > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--yellow span, .styleguide .filter--yellow > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--yellow {
justify-content: center; } }
.styleguide .filter--yellow:hover {
background-color: #686a0b;
border: 1px solid #c3c615; }
.styleguide .filter--yellow:hover i, .styleguide .filter--yellow:hover span {
color: #222222; }
.styleguide .filter--yellow:hover {
background-color: #e8eb3d;
color: #ffffff; }
.styleguide .filter--yellow:hover i, .styleguide .filter--yellow:hover span {
color: #ffffff; }
.styleguide .filter--yellow:hover {
color: #ffffff; }
.styleguide .filter--yellow:hover i, .styleguide .filter--yellow:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--yellow > i, .styleguide .filter--yellow > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--yellow:hover {
background-color: #c3c615;
cursor: pointer; }
.styleguide .filter--yellow:hover span, .styleguide .filter--yellow:hover i {
cursor: pointer; }
.styleguide .filter--yellow-darken {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #eaed54;
border: 1px solid #e5e826;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #dadd17;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--yellow-darken i, .styleguide .filter--yellow-darken > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--yellow-darken span, .styleguide .filter--yellow-darken > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--yellow-darken {
justify-content: center; } }
.styleguide .filter--yellow-darken:hover {
background-color: #dadd17;
color: #ffffff; }
.styleguide .filter--yellow-darken:hover i, .styleguide .filter--yellow-darken:hover span {
color: #ffffff; }
.styleguide .filter--yellow-darken:hover {
color: #ffffff; }
.styleguide .filter--yellow-darken:hover i, .styleguide .filter--yellow-darken:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--yellow-darken > i, .styleguide .filter--yellow-darken > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--yellow-darken:hover {
background-color: #969810;
cursor: pointer; }
.styleguide .filter--yellow-darken:hover span, .styleguide .filter--yellow-darken:hover i {
cursor: pointer; }
.styleguide .filter--orange {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #cd8f17;
border: 1px solid #9f6f12;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #885f0f;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--orange i, .styleguide .filter--orange > i {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--orange span, .styleguide .filter--orange > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--orange {
justify-content: center; } }
.styleguide .filter--orange:hover {
background-color: #885f0f;
color: #ffffff; }
.styleguide .filter--orange:hover i, .styleguide .filter--orange:hover span {
color: #ffffff; }
.styleguide .filter--orange:hover {
color: #ffffff; }
.styleguide .filter--orange:hover i, .styleguide .filter--orange:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--orange > i, .styleguide .filter--orange > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--orange:hover {
background-color: #432f08;
cursor: pointer; }
.styleguide .filter--orange:hover span, .styleguide .filter--orange:hover i {
cursor: pointer; }
.styleguide .filter--blue {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #79afe2;
border: 1px solid #4f96d9;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #3a89d4;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--blue i, .styleguide .filter--blue > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--blue span, .styleguide .filter--blue > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--blue {
justify-content: center; } }
.styleguide .filter--blue:hover {
background-color: #3a89d4;
color: #ffffff; }
.styleguide .filter--blue:hover i, .styleguide .filter--blue:hover span {
color: #ffffff; }
.styleguide .filter--blue:hover {
color: #ffffff; }
.styleguide .filter--blue:hover i, .styleguide .filter--blue:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--blue > i, .styleguide .filter--blue > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--blue:hover {
background-color: #23639f;
cursor: pointer; }
.styleguide .filter--blue:hover span, .styleguide .filter--blue:hover i {
cursor: pointer; }
.styleguide .filter--light-blue {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #82aaf2;
border: 1px solid #548bed;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #3d7beb;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--light-blue i, .styleguide .filter--light-blue > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--light-blue span, .styleguide .filter--light-blue > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--light-blue {
justify-content: center; } }
.styleguide .filter--light-blue > i, .styleguide .filter--light-blue > span {
color: #ffffff; }
.styleguide .filter--light-blue:hover {
background-color: #3d7beb;
color: #ffffff; }
.styleguide .filter--light-blue:hover i, .styleguide .filter--light-blue:hover span {
color: #ffffff; }
.styleguide .filter--light-blue:hover {
color: #ffffff; }
.styleguide .filter--light-blue:hover i, .styleguide .filter--light-blue:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--light-blue > i, .styleguide .filter--light-blue > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--light-blue:hover {
background-color: #1554c6;
cursor: pointer; }
.styleguide .filter--light-blue:hover span, .styleguide .filter--light-blue:hover i {
cursor: pointer; }
.styleguide .filter--niet-actief {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #f28282;
border: 1px solid #ed5454;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
color: #ffffff;
background-color: #ed5454;
border: 1px solid #e82626;
background-color: #eb3d3d;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--niet-actief i, .styleguide .filter--niet-actief > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--niet-actief span, .styleguide .filter--niet-actief > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--niet-actief {
justify-content: center; } }
.styleguide .filter--niet-actief:hover {
background-color: #e82626;
border: 1px solid #c61515; }
.styleguide .filter--niet-actief > i, .styleguide .filter--niet-actief > span {
color: #ffffff; }
.styleguide .filter--niet-actief:hover {
background-color: #eb3d3d;
color: #ffffff; }
.styleguide .filter--niet-actief:hover i, .styleguide .filter--niet-actief:hover span {
color: #ffffff; }
.styleguide .filter--niet-actief:hover {
color: #ffffff; }
.styleguide .filter--niet-actief:hover i, .styleguide .filter--niet-actief:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--niet-actief > i, .styleguide .filter--niet-actief > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--niet-actief:hover {
background-color: #c61515;
cursor: pointer; }
.styleguide .filter--niet-actief:hover span, .styleguide .filter--niet-actief:hover i {
cursor: pointer; }
.styleguide .filter--actief {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #96e094;
border: 1px solid #6fd56c;
background-image: unset;
color: #222222;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #5ccf59;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--actief i, .styleguide .filter--actief > i {
color: #222222;
cursor: pointer; }
.styleguide .filter--actief span, .styleguide .filter--actief > span {
color: #222222;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--actief {
justify-content: center; } }
.styleguide .filter--actief:hover {
background-color: #5ccf59;
color: #ffffff; }
.styleguide .filter--actief:hover i, .styleguide .filter--actief:hover span {
color: #ffffff; }
.styleguide .filter--actief:hover {
color: #ffffff; }
.styleguide .filter--actief:hover i, .styleguide .filter--actief:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--actief > i, .styleguide .filter--actief > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--actief:hover {
background-color: #34aa31;
cursor: pointer; }
.styleguide .filter--actief:hover span, .styleguide .filter--actief:hover i {
cursor: pointer; }
.styleguide .filter--vimeo {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #02ADEF;
border: 1px solid #0288bc;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #0176a3;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--vimeo i, .styleguide .filter--vimeo > i {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--vimeo span, .styleguide .filter--vimeo > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--vimeo {
justify-content: center; } }
.styleguide .filter--vimeo:hover {
background-color: #0176a3;
color: #ffffff; }
.styleguide .filter--vimeo:hover i, .styleguide .filter--vimeo:hover span {
color: #ffffff; }
.styleguide .filter--vimeo:hover {
color: #ffffff; }
.styleguide .filter--vimeo:hover i, .styleguide .filter--vimeo:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--vimeo > i, .styleguide .filter--vimeo > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--vimeo:hover {
background-color: #013f57;
cursor: pointer; }
.styleguide .filter--vimeo:hover span, .styleguide .filter--vimeo:hover i {
cursor: pointer; }
.styleguide .filter--youtube {
display: flex;
column-gap: .5rem;
align-items: center;
background-color: #FF0200;
border: 1px solid #cc0200;
background-image: unset;
color: #ffffff;
border-radius: 0.25em;
padding: .5rem 1.25rem;
margin: 0 1rem 1rem 0;
text-decoration: none;
height: unset;
width: auto;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background-color: #b30100;
cursor: pointer;
color: #ffffff;
border-radius: 0; }
.styleguide .filter--youtube i, .styleguide .filter--youtube > i {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--youtube span, .styleguide .filter--youtube > span {
color: #ffffff;
cursor: pointer; }
@media only screen and (min-width: 1024px) {
.styleguide .filter--youtube {
justify-content: center; } }
.styleguide .filter--youtube:hover {
background-color: #b30100;
color: #ffffff; }
.styleguide .filter--youtube:hover i, .styleguide .filter--youtube:hover span {
color: #ffffff; }
.styleguide .filter--youtube:hover {
color: #ffffff; }
.styleguide .filter--youtube:hover i, .styleguide .filter--youtube:hover span {
color: #ffffff;
cursor: default; }
.styleguide .filter--youtube > i, .styleguide .filter--youtube > span {
color: #ffffff;
cursor: pointer; }
.styleguide .filter--youtube:hover {
background-color: #660100;
cursor: pointer; }
.styleguide .filter--youtube:hover span, .styleguide .filter--youtube:hover i {
cursor: pointer; }
.styleguide .filter--geen {
cursor: default; }
.styleguide .filter--geen:hover {
cursor: default; }
.styleguide .filter--10 {
padding: 0.5rem 0.625rem;
font-size: 0.687rem;
line-height: 0.687rem;
font-weight: normal;
border-radius: 0; }
.styleguide .filter--20 {
padding: 0.5rem 1rem;
font-size: 0.75rem;
line-height: 0.75rem;
font-weight: normal;
border-radius: 0; }
.styleguide .filter--30 {
padding: 0.65rem 1.25rem;
font-size: 0.65rem;
line-height: 0.65rem;
font-weight: 600;
border-radius: 0; }
.styleguide .filter--40 {
padding: 0.7rem 1.5rem;
font-size: 0.7rem;
line-height: 0.7rem;
font-weight: 600;
border-radius: 0; }
.styleguide .filter--60 {
padding: 0.8rem 1.5rem;
font-size: 0.8rem;
line-height: 0.8rem;
font-weight: 600;
border-radius: 0; }
.styleguide .filter--70 {
padding: 0.85rem 1.5rem;
font-size: 0.85rem;
line-height: 0.85rem;
font-weight: 600;
border-radius: 0; }
.styleguide .filter--80 {
padding: 0.9rem 1.5rem;
font-size: 0.9rem;
line-height: 0.9rem;
font-weight: 600;
border-radius: 0; }
.styleguide .combi-filter {
/* Als er geen 2e item aanwezig moet deze zich gedragen als een normale label*/ }
.styleguide .combi-filter:first-of-type {
margin-right: 0; }
.styleguide .combi-filter:nth-of-type(2) {
margin-left: 0;
margin-right: 1rem; }
.styleguide .combi-filter:last-of-type {
margin-left: 0;
margin-right: 1rem; }
.styleguide .aspect-ratio__16-9 {
max-height: 200px;
aspect-ratio: 16/9; }
.styleguide .margin-bottom {
margin-bottom: 1.5rem; }
.styleguide .margin-top {
margin-top: 1.5rem; }
.styleguide .margin-0 {
margin: 0 !important; }
.styleguide .padding-0 {
padding: 0 !important; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .formgroup__input {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c;
background-color: #ffffff;
border: 1px solid #d5d5d5;
padding: .5rem .75rem;
flex: 0 1 65%;
max-height: 2rem;
box-sizing: border-box;
align-items: center;
z-index: 1;
/* SELECT */
/* SEARCH */
/* PLACEHOLDER */ }
.styleguide .formgroup__input:focus {
background-color: #ffffff; }
.styleguide .formgroup__input.error {
border: 1px solid #ed5454; }
.styleguide .formgroup__input > option {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c; }
.styleguide .formgroup__input--search {
height: 2rem; }
.styleguide .formgroup__input[type=date] {
padding: .25rem .75rem;
height: 2rem;
color: #6f6f6f;
flex: 0 1 calc(50% + 7px); }
.styleguide .formgroup__input[type=date]:invalid::-webkit-datetime-edit {
color: #6f6f6f; }
.styleguide .formgroup__input::placeholder {
color: #6f6f6f; }
.styleguide .formgroup__input--wrapper {
position: relative; }
.styleguide .formgroup__input--radio {
display: flex;
flex-flow: row wrap;
flex: 0 0 100%;
justify-content: space-evenly; }
.styleguide .formgroup__input--radio > div {
flex: 0 1 65%;
display: flex;
justify-content: flex-start;
padding: .25rem 0; }
.styleguide .formgroup__input--radio > div > label {
cursor: pointer; }
.styleguide .formgroup__input--radio input[type='radio'] {
position: relative;
margin: 0 .5rem 0 0;
cursor: pointer;
width: .75rem;
height: .75rem;
min-width: .75rem;
min-height: .75rem;
border: 1px solid #bbbbbb;
border-radius: 50%; }
.styleguide .formgroup__input--radio input[type='radio']:checked:before {
position: absolute;
content: "";
height: .5rem;
width: .5rem;
border: .125rem solid white;
border-radius: 50%;
background-color: #3c3c3c;
box-shadow: 0 0 0 1px #3c3c3c; }
.styleguide .formgroup__input--number {
display: inline-flex;
flex: 0 1 70px;
width: 70px; }
.styleguide .formgroup__input--number + span {
margin: 0 .5rem;
flex-shrink: 1;
font-weight: 600; }
.styleguide .formgroup__input--valuta {
display: inline-flex;
flex: 0 1 auto;
width: 70px; }
.styleguide .formgroup__input--valuta + span {
margin: 0 .5rem;
flex-shrink: 1;
font-weight: 600; }
.styleguide select.formgroup__input {
position: relative;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-position: right 1rem top 50%;
box-sizing: border-box;
flex: 0 0 100%;
background-color: white;
height: 2rem; }
.styleguide input[type='checkbox'] {
flex: none;
position: relative;
display: inline-block;
min-width: 1.125rem;
width: 1.125rem;
min-height: 1.125rem;
height: 1.125rem;
margin-right: 0.5rem;
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
border-radius: 0.25rem;
border: none;
outline: none; }
.styleguide input[type='checkbox']:before {
content: "";
width: 9px;
height: 5px;
position: absolute;
bottom: .4rem;
right: .2rem;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0.3;
transform: rotate(-45deg); }
.styleguide input[type='checkbox']:checked:before {
opacity: 1; }
.styleguide input[type='checkbox'].error {
border: 1px solid #ed5454; }
.styleguide .checkbox-dark {
position: relative;
margin-right: 10px;
width: 1.25rem;
background: black;
border-radius: .25rem;
height: 1.25rem; }
.styleguide .checkbox-dark input[type=checkbox] {
visibility: hidden;
width: auto !important; }
.styleguide .checkbox-dark input[type=checkbox]:checked + label:after {
opacity: 1; }
.styleguide .checkbox-dark label {
font-weight: bold;
display: block;
font-size: 13px;
line-height: 1em; }
.styleguide .checkbox-dark label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0.3;
transform: rotate(-45deg); }
.styleguide fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0; }
.styleguide .formgroup, .styleguide .infogroup {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin-bottom: .5rem;
/* voorstel
icon in input. bijv.: zoeken [zoekicon]
*/
/* icoon + button in input */
/* indien een i in een a zit */
/* verticale opzet label + input */
/* label */
justify-content: flex-start; }
.styleguide .formgroup--textarea-wrapper, .styleguide .infogroup--textarea-wrapper {
align-items: flex-start; }
.styleguide .formgroup > div, .styleguide .infogroup > div {
display: flex;
flex-flow: row wrap;
flex: 0 1 65%;
justify-content: flex-start; }
.styleguide .formgroup > div span, .styleguide .infogroup > div span {
color: #555555; }
body.dark-mode .styleguide .formgroup > div span, body.dark-mode .styleguide .infogroup > div span {
color: #d5d5d5; }
.styleguide .formgroup > div.formgroup__input__number-wrapper, .styleguide .infogroup > div.formgroup__input__number-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .formgroup > div.formgroup__input__valuta-wrapper, .styleguide .infogroup > div.formgroup__input__valuta-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .formgroup > div.formgroup__input__valuta-wrapper::before, .styleguide .infogroup > div.formgroup__input__valuta-wrapper::before {
position: absolute;
left: -1.5rem;
content: "€";
width: 1rem;
height: 1rem;
font: normal normal normal .875rem/1rem 'Roboto', sans-serif; }
body.dark-mode .styleguide .formgroup > div.formgroup__input__valuta-wrapper::before, body.dark-mode .styleguide .infogroup > div.formgroup__input__valuta-wrapper::before {
color: #ffffff; }
.styleguide .formgroup__time-wrapper, .styleguide .infogroup__time-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .formgroup__time-wrapper input, .styleguide .infogroup__time-wrapper input {
flex: 0 0;
margin-right: 0.45rem;
display: inline-flex;
width: 3.6rem;
padding-right: 0.125rem; }
.styleguide .formgroup--icon-link > div, .styleguide .infogroup--icon-link > div {
position: relative; }
.styleguide .formgroup--icon-link > div a, .styleguide .infogroup--icon-link > div a {
position: absolute;
z-index: 2;
top: .5rem;
right: .75rem;
font-size: .8rem;
text-decoration: none;
transform: scale(1);
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .formgroup--icon-link > div a:hover, .styleguide .infogroup--icon-link > div a:hover {
transform: scale(1.15); }
.styleguide .formgroup--icon-link > div input, .styleguide .infogroup--icon-link > div input {
flex: 1; }
.styleguide .formgroup--icon-link > div button, .styleguide .infogroup--icon-link > div button {
position: absolute;
z-index: 2;
top: .15rem;
right: -.75rem; }
.styleguide .formgroup--icon > div, .styleguide .infogroup--icon > div {
position: relative; }
.styleguide .formgroup--icon > div i, .styleguide .infogroup--icon > div i {
position: absolute;
z-index: 2;
top: .6rem;
left: .75rem;
font-size: 0.8rem; }
.styleguide .formgroup--icon > div input, .styleguide .infogroup--icon > div input {
padding-left: 2.25rem;
flex: 1; }
.styleguide .formgroup--icon > div button, .styleguide .infogroup--icon > div button {
position: absolute;
z-index: 2;
top: .15rem;
right: -.85rem;
font-size: .75rem; }
.styleguide .formgroup a i, .styleguide .infogroup a i {
color: #888888;
cursor: pointer; }
.styleguide .formgroup a i:hover, .styleguide .infogroup a i:hover {
color: #6f6f6f; }
.styleguide .formgroup--column, .styleguide .infogroup--column {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin: 0 0 1rem; }
.styleguide .formgroup--column .formgroup__label, .styleguide .infogroup--column .formgroup__label {
padding: .25rem 0 .55rem; }
.styleguide .formgroup--column .formgroup__input, .styleguide .infogroup--column .formgroup__input {
flex: 0 1 100%; }
.styleguide .formgroup .formgroup__label, .styleguide .formgroup .infogroup__label, .styleguide .infogroup .formgroup__label, .styleguide .infogroup .infogroup__label {
position: relative;
display: flex;
flex: 1 0;
max-width: 100%;
font-weight: bold;
align-items: center;
line-height: 1em;
/* Bol met vraagteken. (.formgroup__label__remark) */ }
body.dark-mode .styleguide .formgroup .formgroup__label, body.dark-mode .styleguide .formgroup .infogroup__label, body.dark-mode .styleguide .infogroup .formgroup__label, body.dark-mode .styleguide .infogroup .infogroup__label {
color: #ffffff; }
.styleguide .formgroup .formgroup__label__remark, .styleguide .formgroup .infogroup__label__remark, .styleguide .infogroup .formgroup__label__remark, .styleguide .infogroup .infogroup__label__remark {
background-color: #888;
border-radius: 50%;
width: 1.25rem;
padding-right: 1px;
height: 1.25rem;
color: #ffffff;
display: flex;
text-align: center;
margin-left: .5rem;
margin-right: .5rem;
text-decoration: none;
cursor: pointer;
justify-content: center;
align-items: center; }
body.dark-mode .styleguide .formgroup .formgroup__label__remark, body.dark-mode .styleguide .formgroup .infogroup__label__remark, body.dark-mode .styleguide .infogroup .formgroup__label__remark, body.dark-mode .styleguide .infogroup .infogroup__label__remark {
background-color: #ffffff;
color: #3c3c3c; }
.styleguide .formgroup__image-wrapper, .styleguide .action-afbeelding-edit, .styleguide .infogroup__image-wrapper {
flex: 0 1 65%;
max-height: 180px;
overflow: hidden;
z-index: 0; }
.styleguide .formgroup__image-wrapper img, .styleguide .action-afbeelding-edit img, .styleguide .infogroup__image-wrapper img {
object-fit: cover;
width: 100%; }
.styleguide .formgroup__image-wrapper--16-9, .styleguide .action-afbeelding-edit, .styleguide .infogroup__image-wrapper--16-9 {
position: relative;
flex: unset;
height: 180px;
aspect-ratio: 16/9; }
.styleguide .formgroup__image-wrapper--16-9 img, .styleguide .action-afbeelding-edit img, .styleguide .infogroup__image-wrapper--16-9 img {
object-fit: unset;
width: unset;
height: 100%;
position: absolute;
aspect-ratio: 16/9; }
.styleguide .formgroup__image-wrapper--16-9 i, .styleguide .action-afbeelding-edit i, .styleguide .infogroup__image-wrapper--16-9 i {
position: absolute;
right: 1rem;
bottom: 1rem;
cursor: pointer; }
.styleguide .formgroup__image-wrapper--edit, .styleguide .action-afbeelding-edit, .styleguide .infogroup__image-wrapper--edit {
transition: all .35s ease-in-out; }
.styleguide .formgroup__image-wrapper--edit::before, .styleguide .action-afbeelding-edit::before, .styleguide .infogroup__image-wrapper--edit::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "\f303";
/* pencil */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 2rem;
line-height: 11rem;
text-align: center;
color: #ffffff;
width: 100%;
height: 100%;
background-color: rgba(34, 34, 34, 0.75);
z-index: 1;
transition: all .15s ease-in-out;
opacity: 0;
cursor: pointer; }
.styleguide .formgroup__image-wrapper--edit:hover::before, .styleguide .action-afbeelding-edit:hover::before, .styleguide .infogroup__image-wrapper--edit:hover::before {
opacity: 1; }
.styleguide .standaard-form, .styleguide .actionbar--variant-3 > div:not(:last-child) {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin-bottom: .5rem;
/* voorstel
icon in input. bijv.: zoeken [zoekicon]
*/
/* icoon + button in input */
/* indien een i in een a zit */
/* verticale opzet label + input */
/* label */ }
.styleguide .standaard-form--textarea-wrapper {
align-items: flex-start; }
.styleguide .standaard-form > div, .styleguide .actionbar--variant-3 > div:not(:last-child) > div {
display: flex;
flex-flow: row wrap;
flex: 0 1 65%;
justify-content: flex-start; }
.styleguide .standaard-form > div span, .styleguide .actionbar--variant-3 > div:not(:last-child) > div span {
color: #555555; }
body.dark-mode .styleguide .standaard-form > div span, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) > div span {
color: #d5d5d5; }
.styleguide .standaard-form > div.formgroup__input__number-wrapper, .styleguide .actionbar--variant-3 > div:not(:last-child) > div.formgroup__input__number-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .standaard-form > div.formgroup__input__valuta-wrapper, .styleguide .actionbar--variant-3 > div:not(:last-child) > div.formgroup__input__valuta-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .standaard-form > div.formgroup__input__valuta-wrapper::before, .styleguide .actionbar--variant-3 > div:not(:last-child) > div.formgroup__input__valuta-wrapper::before {
position: absolute;
left: -1.5rem;
content: "€";
width: 1rem;
height: 1rem;
font: normal normal normal .875rem/1rem 'Roboto', sans-serif; }
body.dark-mode .styleguide .standaard-form > div.formgroup__input__valuta-wrapper::before, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) > div.formgroup__input__valuta-wrapper::before {
color: #ffffff; }
.styleguide .standaard-form__time-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .standaard-form__time-wrapper input {
flex: 0 0;
margin-right: 0.45rem;
display: inline-flex;
width: 3.6rem;
padding-right: 0.125rem; }
.styleguide .standaard-form--icon-link > div {
position: relative; }
.styleguide .standaard-form--icon-link > div a {
position: absolute;
z-index: 2;
top: .5rem;
right: .75rem;
font-size: .8rem;
text-decoration: none;
transform: scale(1);
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .standaard-form--icon-link > div a:hover {
transform: scale(1.15); }
.styleguide .standaard-form--icon-link > div input {
flex: 1; }
.styleguide .standaard-form--icon-link > div button {
position: absolute;
z-index: 2;
top: .15rem;
right: -.75rem; }
.styleguide .standaard-form--icon > div {
position: relative; }
.styleguide .standaard-form--icon > div i {
position: absolute;
z-index: 2;
top: .6rem;
left: .75rem;
font-size: 0.8rem; }
.styleguide .standaard-form--icon > div input {
padding-left: 2.25rem;
flex: 1; }
.styleguide .standaard-form--icon > div button {
position: absolute;
z-index: 2;
top: .15rem;
right: -.85rem;
font-size: .75rem; }
.styleguide .standaard-form a i, .styleguide .actionbar--variant-3 > div:not(:last-child) a i {
color: #888888;
cursor: pointer; }
.styleguide .standaard-form a i:hover, .styleguide .actionbar--variant-3 > div:not(:last-child) a i:hover {
color: #6f6f6f; }
.styleguide .standaard-form--column {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin: 0 0 1rem; }
.styleguide .standaard-form--column .formgroup__label {
padding: .25rem 0 .55rem; }
.styleguide .standaard-form--column .formgroup__input {
flex: 0 1 100%; }
.styleguide .standaard-form .formgroup__label, .styleguide .actionbar--variant-3 > div:not(:last-child) .formgroup__label, .styleguide .standaard-form .infogroup__label, .styleguide .actionbar--variant-3 > div:not(:last-child) .infogroup__label {
position: relative;
display: flex;
flex: 1 0;
max-width: 100%;
font-weight: bold;
align-items: center;
line-height: 1em;
/* Bol met vraagteken. (.formgroup__label__remark) */ }
body.dark-mode .styleguide .standaard-form .formgroup__label, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) .formgroup__label, body.dark-mode .styleguide .standaard-form .infogroup__label, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) .infogroup__label {
color: #ffffff; }
.styleguide .standaard-form .formgroup__label__remark, .styleguide .actionbar--variant-3 > div:not(:last-child) .formgroup__label__remark, .styleguide .standaard-form .infogroup__label__remark, .styleguide .actionbar--variant-3 > div:not(:last-child) .infogroup__label__remark {
background-color: #888;
border-radius: 50%;
width: 1.25rem;
padding-right: 1px;
height: 1.25rem;
color: #ffffff;
display: flex;
text-align: center;
margin-left: .5rem;
margin-right: .5rem;
text-decoration: none;
cursor: pointer;
justify-content: center;
align-items: center; }
body.dark-mode .styleguide .standaard-form .formgroup__label__remark, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) .formgroup__label__remark, body.dark-mode .styleguide .standaard-form .infogroup__label__remark, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) .infogroup__label__remark {
background-color: #ffffff;
color: #3c3c3c; }
.styleguide .standaard-form label, .styleguide .actionbar--variant-3 > div:not(:last-child) label {
position: relative;
display: flex;
flex: 1 0;
max-width: 100%;
font-weight: bold;
align-items: center;
line-height: 1em;
/* Bol met vraagteken. (.formgroup__label__remark) */ }
body.dark-mode .styleguide .standaard-form label, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) label {
color: #ffffff; }
.styleguide .standaard-form label__remark, .styleguide .actionbar--variant-3 > div:not(:last-child) label__remark {
background-color: #888;
border-radius: 50%;
width: 1.25rem;
padding-right: 1px;
height: 1.25rem;
color: #ffffff;
display: flex;
text-align: center;
margin-left: .5rem;
margin-right: .5rem;
text-decoration: none;
cursor: pointer;
justify-content: center;
align-items: center; }
body.dark-mode .styleguide .standaard-form label__remark, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) label__remark {
background-color: #ffffff;
color: #3c3c3c; }
.styleguide .standaard-form input, .styleguide .actionbar--variant-3 > div:not(:last-child) input {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c;
background-color: #ffffff;
border: 1px solid #d5d5d5;
padding: .5rem .75rem;
flex: 0 1 65%;
max-height: 2rem;
box-sizing: border-box;
align-items: center;
z-index: 1;
/* SELECT */
/* SEARCH */
/* PLACEHOLDER */ }
.styleguide .standaard-form input:focus, .styleguide .actionbar--variant-3 > div:not(:last-child) input:focus {
background-color: #ffffff; }
.styleguide .standaard-form input.error, .styleguide .actionbar--variant-3 > div:not(:last-child) input.error {
border: 1px solid #ed5454; }
.styleguide .standaard-form input > option, .styleguide .actionbar--variant-3 > div:not(:last-child) input > option {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c; }
.styleguide .standaard-form input--search, .styleguide .actionbar--variant-3 > div:not(:last-child) input--search {
height: 2rem; }
.styleguide .standaard-form input[type=date], .styleguide .actionbar--variant-3 > div:not(:last-child) input[type=date] {
padding: .25rem .75rem;
height: 2rem;
color: #6f6f6f;
flex: 0 1 calc(50% + 7px); }
.styleguide .standaard-form input[type=date]:invalid::-webkit-datetime-edit, .styleguide .actionbar--variant-3 > div:not(:last-child) input[type=date]:invalid::-webkit-datetime-edit {
color: #6f6f6f; }
.styleguide .standaard-form input::placeholder, .styleguide .actionbar--variant-3 > div:not(:last-child) input::placeholder {
color: #6f6f6f; }
.styleguide .standaard-form input--wrapper, .styleguide .actionbar--variant-3 > div:not(:last-child) input--wrapper {
position: relative; }
.styleguide .standaard-form input--radio, .styleguide .actionbar--variant-3 > div:not(:last-child) input--radio {
display: flex;
flex-flow: row wrap;
flex: 0 0 100%;
justify-content: space-evenly; }
.styleguide .standaard-form input--radio > div, .styleguide .actionbar--variant-3 > div:not(:last-child) input--radio > div {
flex: 0 1 65%;
display: flex;
justify-content: flex-start;
padding: .25rem 0; }
.styleguide .standaard-form input--radio > div > label, .styleguide .actionbar--variant-3 > div:not(:last-child) input--radio > div > label {
cursor: pointer; }
.styleguide .standaard-form input--radio input[type='radio'], .styleguide .actionbar--variant-3 > div:not(:last-child) input--radio input[type='radio'] {
position: relative;
margin: 0 .5rem 0 0;
cursor: pointer;
width: .75rem;
height: .75rem;
min-width: .75rem;
min-height: .75rem;
border: 1px solid #bbbbbb;
border-radius: 50%; }
.styleguide .standaard-form input--radio input[type='radio']:checked:before, .styleguide .actionbar--variant-3 > div:not(:last-child) input--radio input[type='radio']:checked:before {
position: absolute;
content: "";
height: .5rem;
width: .5rem;
border: .125rem solid white;
border-radius: 50%;
background-color: #3c3c3c;
box-shadow: 0 0 0 1px #3c3c3c; }
.styleguide .standaard-form select, .styleguide .actionbar--variant-3 > div:not(:last-child) select {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c;
background-color: #ffffff;
border: 1px solid #d5d5d5;
padding: .5rem .75rem;
flex: 0 1 65%;
max-height: 2rem;
box-sizing: border-box;
align-items: center;
z-index: 1;
/* SELECT */
/* SEARCH */
/* PLACEHOLDER */
position: relative;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-position: right 1rem top 50%;
box-sizing: border-box;
flex: 0 0 100%;
background-color: white;
height: 2rem; }
.styleguide .standaard-form select:focus, .styleguide .actionbar--variant-3 > div:not(:last-child) select:focus {
background-color: #ffffff; }
.styleguide .standaard-form select.error, .styleguide .actionbar--variant-3 > div:not(:last-child) select.error {
border: 1px solid #ed5454; }
.styleguide .standaard-form select > option, .styleguide .actionbar--variant-3 > div:not(:last-child) select > option {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c; }
.styleguide .standaard-form select--search, .styleguide .actionbar--variant-3 > div:not(:last-child) select--search {
height: 2rem; }
.styleguide .standaard-form select[type=date], .styleguide .actionbar--variant-3 > div:not(:last-child) select[type=date] {
padding: .25rem .75rem;
height: 2rem;
color: #6f6f6f;
flex: 0 1 calc(50% + 7px); }
.styleguide .standaard-form select[type=date]:invalid::-webkit-datetime-edit, .styleguide .actionbar--variant-3 > div:not(:last-child) select[type=date]:invalid::-webkit-datetime-edit {
color: #6f6f6f; }
.styleguide .standaard-form select::placeholder, .styleguide .actionbar--variant-3 > div:not(:last-child) select::placeholder {
color: #6f6f6f; }
.styleguide .standaard-form select--wrapper, .styleguide .actionbar--variant-3 > div:not(:last-child) select--wrapper {
position: relative; }
.styleguide .standaard-form select--radio, .styleguide .actionbar--variant-3 > div:not(:last-child) select--radio {
display: flex;
flex-flow: row wrap;
flex: 0 0 100%;
justify-content: space-evenly; }
.styleguide .standaard-form select--radio > div, .styleguide .actionbar--variant-3 > div:not(:last-child) select--radio > div {
flex: 0 1 65%;
display: flex;
justify-content: flex-start;
padding: .25rem 0; }
.styleguide .standaard-form select--radio > div > label, .styleguide .actionbar--variant-3 > div:not(:last-child) select--radio > div > label {
cursor: pointer; }
.styleguide .standaard-form select--radio input[type='radio'], .styleguide .actionbar--variant-3 > div:not(:last-child) select--radio input[type='radio'] {
position: relative;
margin: 0 .5rem 0 0;
cursor: pointer;
width: .75rem;
height: .75rem;
min-width: .75rem;
min-height: .75rem;
border: 1px solid #bbbbbb;
border-radius: 50%; }
.styleguide .standaard-form select--radio input[type='radio']:checked:before, .styleguide .actionbar--variant-3 > div:not(:last-child) select--radio input[type='radio']:checked:before {
position: absolute;
content: "";
height: .5rem;
width: .5rem;
border: .125rem solid white;
border-radius: 50%;
background-color: #3c3c3c;
box-shadow: 0 0 0 1px #3c3c3c; }
.styleguide .standaard-form input[type='checkbox'], .styleguide .actionbar--variant-3 > div:not(:last-child) input[type='checkbox'] {
flex: none;
padding: 0;
flex: none;
position: relative;
display: inline-block;
min-width: 1.125rem;
width: 1.125rem;
min-height: 1.125rem;
height: 1.125rem;
margin-right: 0.5rem;
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
border-radius: 0.25rem;
border: none;
outline: none; }
.styleguide .standaard-form input[type='checkbox']:before, .styleguide .actionbar--variant-3 > div:not(:last-child) input[type='checkbox']:before {
content: "";
width: 9px;
height: 5px;
position: absolute;
bottom: .4rem;
right: .2rem;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0.3;
transform: rotate(-45deg); }
.styleguide .standaard-form input[type='checkbox']:checked:before, .styleguide .actionbar--variant-3 > div:not(:last-child) input[type='checkbox']:checked:before {
opacity: 1; }
.styleguide .standaard-form input[type='checkbox'].error, .styleguide .actionbar--variant-3 > div:not(:last-child) input[type='checkbox'].error {
border: 1px solid #ed5454; }
.styleguide .standaard-form .datepicker__wrapper, .styleguide .actionbar--variant-3 > div:not(:last-child) .datepicker__wrapper {
position: relative;
z-index: 0;
color: #6f6f6f;
flex: 0 1 calc(50% + 7px); }
.styleguide .standaard-form .datepicker__wrapper:before, .styleguide .actionbar--variant-3 > div:not(:last-child) .datepicker__wrapper:before {
position: absolute;
right: 0.75rem;
top: 50%;
font-family: "Font Awesome 5 Free";
font-size: .875rem;
font-weight: 400;
content: "\f133";
height: 1rem;
width: 1rem;
color: black;
z-index: 2;
transform: translateY(-50%); }
.styleguide .standaard-form .datepicker__wrapper input, .styleguide .actionbar--variant-3 > div:not(:last-child) .datepicker__wrapper input {
width: 100%;
height: 2rem;
padding: .25rem .75rem; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .formgroup__input {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c;
background-color: #ffffff;
border: 1px solid #d5d5d5;
padding: .5rem .75rem;
flex: 0 1 65%;
max-height: 2rem;
box-sizing: border-box;
align-items: center;
z-index: 1;
/* SELECT */
/* SEARCH */
/* PLACEHOLDER */ }
.styleguide .formgroup__input:focus {
background-color: #ffffff; }
.styleguide .formgroup__input.error {
border: 1px solid #ed5454; }
.styleguide .formgroup__input > option {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c; }
.styleguide .formgroup__input--search {
height: 2rem; }
.styleguide .formgroup__input[type=date] {
padding: .25rem .75rem;
height: 2rem;
color: #6f6f6f;
flex: 0 1 calc(50% + 7px); }
.styleguide .formgroup__input[type=date]:invalid::-webkit-datetime-edit {
color: #6f6f6f; }
.styleguide .formgroup__input::placeholder {
color: #6f6f6f; }
.styleguide .formgroup__input--wrapper {
position: relative; }
.styleguide .formgroup__input--radio {
display: flex;
flex-flow: row wrap;
flex: 0 0 100%;
justify-content: space-evenly; }
.styleguide .formgroup__input--radio > div {
flex: 0 1 65%;
display: flex;
justify-content: flex-start;
padding: .25rem 0; }
.styleguide .formgroup__input--radio > div > label {
cursor: pointer; }
.styleguide .formgroup__input--radio input[type='radio'] {
position: relative;
margin: 0 .5rem 0 0;
cursor: pointer;
width: .75rem;
height: .75rem;
min-width: .75rem;
min-height: .75rem;
border: 1px solid #bbbbbb;
border-radius: 50%; }
.styleguide .formgroup__input--radio input[type='radio']:checked:before {
position: absolute;
content: "";
height: .5rem;
width: .5rem;
border: .125rem solid white;
border-radius: 50%;
background-color: #3c3c3c;
box-shadow: 0 0 0 1px #3c3c3c; }
.styleguide .formgroup__input--number {
display: inline-flex;
flex: 0 1 70px;
width: 70px; }
.styleguide .formgroup__input--number + span {
margin: 0 .5rem;
flex-shrink: 1;
font-weight: 600; }
.styleguide .formgroup__input--valuta {
display: inline-flex;
flex: 0 1 auto;
width: 70px; }
.styleguide .formgroup__input--valuta + span {
margin: 0 .5rem;
flex-shrink: 1;
font-weight: 600; }
.styleguide select.formgroup__input {
position: relative;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-position: right 1rem top 50%;
box-sizing: border-box;
flex: 0 0 100%;
background-color: white;
height: 2rem; }
.styleguide input[type='checkbox'] {
flex: none;
position: relative;
display: inline-block;
min-width: 1.125rem;
width: 1.125rem;
min-height: 1.125rem;
height: 1.125rem;
margin-right: 0.5rem;
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
border-radius: 0.25rem;
border: none;
outline: none; }
.styleguide input[type='checkbox']:before {
content: "";
width: 9px;
height: 5px;
position: absolute;
bottom: .4rem;
right: .2rem;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0.3;
transform: rotate(-45deg); }
.styleguide input[type='checkbox']:checked:before {
opacity: 1; }
.styleguide input[type='checkbox'].error {
border: 1px solid #ed5454; }
.styleguide .checkbox-dark {
position: relative;
margin-right: 10px;
width: 1.25rem;
background: black;
border-radius: .25rem;
height: 1.25rem; }
.styleguide .checkbox-dark input[type=checkbox] {
visibility: hidden;
width: auto !important; }
.styleguide .checkbox-dark input[type=checkbox]:checked + label:after {
opacity: 1; }
.styleguide .checkbox-dark label {
font-weight: bold;
display: block;
font-size: 13px;
line-height: 1em; }
.styleguide .checkbox-dark label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0.3;
transform: rotate(-45deg); }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .formgroup__info {
position: relative;
display: none;
font-family: Arial, Helvetica, sans-serif;
font: 12px/15px sans-serif;
font-weight: 300;
opacity: 0;
max-width: 100%;
color: #222222;
background-color: #eeeeee;
padding: 1rem;
margin: .5rem 0;
border-radius: 4px;
overflow: visible;
line-height: normal;
transform: scale(0);
height: 0;
width: 100%;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .formgroup__info.active {
display: block;
transform: scale(1);
height: auto;
opacity: 1;
margin: .75rem 0 0 0; }
body.dark-mode .styleguide .formgroup__info.active {
color: #222222; }
.styleguide .formgroup__info::before {
left: 1.5rem;
top: -.5rem;
position: absolute;
height: 0px;
width: 0px;
content: "";
border-style: solid;
border-width: 0 .5rem .5rem .5rem;
border-color: transparent transparent #eeeeee; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .tabs {
display: flex;
flex-flow: row wrap; }
.styleguide .tabs__tab {
flex: 0 1 auto;
background-color: #ffffff;
padding: 1rem 2rem .75rem;
border-bottom: 0.25rem solid #d5d5d5;
text-decoration: none;
letter-spacing: 0.1em;
font-size: .875rem;
font-weight: 600;
text-transform: uppercase;
color: #d5d5d5;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .tabs__tab {
background-color: #202020;
color: #bfbfbf;
border-bottom: 0.25rem solid #6f6f6f; }
.styleguide .tabs__tab:hover {
color: #33566c; }
body.dark-mode .styleguide .tabs__tab:hover {
color: #ffffff; }
.styleguide .tabs__tab:hover span {
color: #33566c; }
body.dark-mode .styleguide .tabs__tab:hover span {
color: #ffffff; }
.styleguide .tabs__tab--active {
border-bottom: 0.25rem solid #33566c;
color: #33566c; }
body.dark-mode .styleguide .tabs__tab--active {
border-bottom: 0.25rem solid #46a0d9;
color: #ffffff; }
.styleguide .tabs__tab--active span {
color: #33566c; }
body.dark-mode .styleguide .tabs__tab--active span {
color: #ffffff; }
.styleguide .tabs--verticaal {
display: flex;
flex-flow: column wrap;
flex: 1 0 20%; }
.styleguide .tabs--verticaal h3 {
margin: 1.5rem 0 .125rem 0;
padding: 0;
font-size: 1rem;
line-height: 1rem;
color: #555555; }
.styleguide .tabs--verticaal h3:first-child {
margin-top: 0; }
.styleguide .tabs--verticaal a {
font-weight: 400; }
.styleguide .tabs--verticaal__content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center; }
.styleguide .tabs--verticaal__content__info {
display: flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
background-color: #888888;
border-radius: 50%;
cursor: pointer;
color: white;
transition: all .2s ease-in-out; }
.styleguide .tabs--verticaal__content__info i {
font-size: 0.6rem;
width: .2rem;
height: .5rem;
line-height: 1em;
position: relative; }
.styleguide .tabs--verticaal__content__info:hover {
background-color: #33566c; }
body.dark-mode .styleguide .tabs--verticaal__content__info:hover {
background-color: #46a0d9; }
.styleguide .tabs--verticaal__tab {
flex: 0 1 auto;
background-color: #ffffff;
padding: 1rem 2rem .75rem;
border-bottom: 0.25rem solid #d5d5d5;
text-decoration: none;
letter-spacing: 0.1em;
font-size: .875rem;
font-weight: 600;
text-transform: uppercase;
color: #d5d5d5;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
text-transform: unset;
border-bottom: 1px solid #f3f3f3;
transition: all .1s ease-in-out;
padding-top: .75rem; }
body.dark-mode .styleguide .tabs--verticaal__tab {
background-color: #202020;
color: #bfbfbf;
border-bottom: 0.25rem solid #6f6f6f; }
.styleguide .tabs--verticaal__tab:hover {
color: #33566c; }
body.dark-mode .styleguide .tabs--verticaal__tab:hover {
color: #ffffff; }
.styleguide .tabs--verticaal__tab:hover span {
color: #33566c; }
body.dark-mode .styleguide .tabs--verticaal__tab:hover span {
color: #ffffff; }
body.dark-mode .styleguide .tabs--verticaal__tab {
border-bottom: 1px solid #6f6f6f; }
.styleguide .tabs--verticaal__tab::before {
content: "";
border-style: solid;
border-width: .5rem .5rem .5rem 0;
border-color: transparent #bbbbbb transparent transparent;
position: absolute;
right: -1.25rem;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all .1s ease-in-out; }
.styleguide .tabs--verticaal__tab--active {
color: #33566c;
position: relative; }
.styleguide .tabs--verticaal__tab--active::before {
opacity: 1; }
.styleguide .tabs--verticaal__tab--active .tabs--verticaal__content__info {
background-color: #33566c; }
body.dark-mode .styleguide .tabs--verticaal__tab--active .tabs--verticaal__content__info {
background-color: #46a0d9; }
.styleguide .tabs--verticaal__tab__container {
flex: 1 0 55%;
margin-left: 1rem;
padding: 1.75rem 6rem 1rem 1.5rem;
background: #f3f3f3;
border-left: 0.25rem solid #bbbbbb; }
body.dark-mode .styleguide .tabs--verticaal__tab__container {
background-color: #151515; }
.styleguide .tabs--border {
border-bottom: 1px solid #d5d5d5; }
body.dark-mode .styleguide .tabs--border {
border-bottom: 1px solid #6f6f6f; }
.styleguide .tabs--border > .tabs__tab {
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
padding-top: .85rem;
border-bottom: 1px solid #d5d5d5;
margin-bottom: -1px;
margin-top: -1px; }
body.dark-mode .styleguide .tabs--border > .tabs__tab {
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
padding-top: .85rem;
border-bottom: 1px solid #6f6f6f;
margin-bottom: -1px;
margin-top: -1px; }
.styleguide .tabs--border > .tabs__tab--active {
border-bottom: 1px solid transparent;
border-top: 0.25rem solid #33566c;
border-left: 1px solid #d5d5d5;
border-right: 1px solid #d5d5d5;
padding-top: calc(.65rem + 1px);
padding-bottom: .75rem; }
body.dark-mode .styleguide .tabs--border > .tabs__tab--active {
border-bottom: 1px solid transparent;
border-top: 0.25rem solid #46a0d9;
border-left: 1px solid #6f6f6f;
border-right: 1px solid #6f6f6f;
padding-top: calc(.65rem + 1px);
padding-bottom: .75rem; }
.styleguide .tabs__tab-container {
padding: 2rem; }
.styleguide .secondary-tabs {
margin-bottom: 0;
padding-bottom: 0;
display: flex;
flex-direction: row;
align-items: center; }
.styleguide .secondary-tabs a {
text-decoration: none;
font-weight: 600;
font-size: .875rem;
line-height: 1.3em;
margin-right: 2.5rem;
border-bottom: .125rem solid transparent; }
.styleguide .secondary-tabs a.selected {
color: #33566c;
border-bottom: 0.13rem solid #33566c; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .pagination {
display: flex;
flex-wrap: wrap;
margin: 0.5rem -0.25rem;
align-items: center;
/* pagination__left */
/* pagination__double-left */
/* pagination__right */
/* pagination__double-right */ }
.styleguide .pagination > * {
margin: 0.25rem; }
.styleguide .pagination span {
margin: 0 1rem; }
.styleguide .pagination__left::after {
content: "\00276E"; }
.styleguide .pagination__double-left::after {
content: "\00276E \00276E"; }
.styleguide .pagination__right::after {
content: "\00276F"; }
.styleguide .pagination__double-right::after {
content: "\00276F \00276F"; }
.styleguide .pagination a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
text-decoration: none;
color: #222222;
white-space: nowrap;
background-color: #f3f3f3;
border-radius: .125rem;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
body.dark-mode .styleguide .pagination a {
background-color: #6f6f6f;
color: #ffffff; }
.styleguide .pagination a.disabled {
cursor: default;
opacity: 0.5; }
body.dark-mode .styleguide .pagination a.disabled {
opacity: 0.5;
color: #ffffff; }
.styleguide .pagination a.disabled:hover {
background-color: #f3f3f3;
opacity: 0.5; }
body.dark-mode .styleguide .pagination a.disabled:hover {
background-color: #6f6f6f;
opacity: 0.5; }
.styleguide .pagination a.active {
background-color: #33566c;
color: white;
border: 1px solid #33566c; }
body.dark-mode .styleguide .pagination a.active {
background-color: #46a0d9; }
.styleguide .pagination a:hover:not(.active) {
background-color: #dadada; }
body.dark-mode .styleguide .pagination a:hover:not(.active) {
background-color: #a2a2a2; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
.styleguide .zebralist {
display: flex;
flex-flow: column;
width: 100%;
box-sizing: border-box;
/* Heading */ }
body.dark-mode .styleguide .zebralist {
background: #ffffff; }
body.dark-mode .styleguide .zebralist label.formgroup__label {
color: #222222; }
.styleguide .zebralist > div {
padding: .5rem .75rem .5rem .75rem;
margin-bottom: 0; }
.styleguide .zebralist > div:nth-child(odd) {
background-color: #f2f2f2; }
.styleguide .zebralist > div:first-child {
padding: .75rem;
margin: 0;
background-color: #d5d5d5; }
body.dark-mode .styleguide .zebralist > div:first-child {
background-color: #6f6f6f;
color: #ffffff; }
body.dark-mode .styleguide .zebralist > div:first-child span {
color: #ffffff; }
.styleguide .zebralist > div:first-child span {
font-weight: 600; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .card-wrapper {
display: grid;
grid-template-columns: auto;
grid-gap: 0;
margin-bottom: 1rem;
max-width: 100%; }
@media screen and (min-width: 768px) {
.styleguide .card-wrapper {
grid-template-columns: 50% 50%;
grid-gap: 1rem;
max-width: 90%; } }
@media screen and (min-width: 1200px) {
.styleguide .card-wrapper {
grid-template-columns: 300px 300px 300px 300px;
grid-gap: 1rem;
max-width: 85%; } }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--white {
background-color: #d9d9d9;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--white.card--product:hover .card__body, .styleguide .card--white.product-card:hover .card__body, .styleguide .card--white.add-new--product:hover .card__body, .styleguide .card--white.video-card:hover .card__body, .styleguide .card--white.card--product:hover .add-new--product > div, .styleguide .card--white.product-card:hover .add-new--product > div, .styleguide .card--white.add-new--product:hover .add-new--product > div, .styleguide .card--white.video-card:hover .add-new--product > div, .styleguide .card--white.card--product:hover .video-card > div:nth-child(2), .styleguide .card--white.product-card:hover .video-card > div:nth-child(2), .styleguide .card--white.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--white.video-card:hover .video-card > div:nth-child(2) {
background-color: #f2f2f2;
border-color: #cccccc; }
.styleguide .card--white.card--product:hover .card__image::after, .styleguide .card--white.product-card:hover .card__image::after, .styleguide .card--white.add-new--product:hover .card__image::after, .styleguide .card--white.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--white.card--product-add .card__body, .styleguide .card--white.add-new--product .card__body, .styleguide .card--white.card--product-add .add-new--product > div, .styleguide .card--white.add-new--product .add-new--product > div, .styleguide .card--white.card--product-add .video-card > div:nth-child(2), .styleguide .card--white.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #e6e6e6; }
.styleguide .card--white .card__body, .styleguide .card--white .add-new--product > div, .styleguide .card--white .video-card > div:nth-child(2) {
background-color: #ffffff;
border-color: #e6e6e6; }
.styleguide .card--white .card__body h2, .styleguide .card--white .add-new--product > div h2, .styleguide .card--white .video-card > div:nth-child(2) h2, .styleguide .card--white .card__body p, .styleguide .card--white .add-new--product > div p, .styleguide .card--white .video-card > div:nth-child(2) p, .styleguide .card--white .card__body span, .styleguide .card--white .add-new--product > div span, .styleguide .card--white .video-card > div:nth-child(2) span, .styleguide .card--white .card__body i, .styleguide .card--white .add-new--product > div i, .styleguide .card--white .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--white .card__body h2, body.dark-mode .styleguide .card--white .add-new--product > div h2, body.dark-mode .styleguide .card--white .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--white .card__body p, body.dark-mode .styleguide .card--white .add-new--product > div p, body.dark-mode .styleguide .card--white .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--white .card__body span, body.dark-mode .styleguide .card--white .add-new--product > div span, body.dark-mode .styleguide .card--white .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--white .card__body i, body.dark-mode .styleguide .card--white .add-new--product > div i, body.dark-mode .styleguide .card--white .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--white .card__body .color--grey-darker, body.dark-mode .styleguide .card--white .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--white .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--black {
background-color: black;
color: #ffffff; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--black.card--product:hover .card__body, .styleguide .card--black.product-card:hover .card__body, .styleguide .card--black.add-new--product:hover .card__body, .styleguide .card--black.video-card:hover .card__body, .styleguide .card--black.card--product:hover .add-new--product > div, .styleguide .card--black.product-card:hover .add-new--product > div, .styleguide .card--black.add-new--product:hover .add-new--product > div, .styleguide .card--black.video-card:hover .add-new--product > div, .styleguide .card--black.card--product:hover .video-card > div:nth-child(2), .styleguide .card--black.product-card:hover .video-card > div:nth-child(2), .styleguide .card--black.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--black.video-card:hover .video-card > div:nth-child(2) {
background-color: #151515;
border-color: black; }
.styleguide .card--black.card--product:hover .card__image::after, .styleguide .card--black.product-card:hover .card__image::after, .styleguide .card--black.add-new--product:hover .card__image::after, .styleguide .card--black.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--black.card--product-add .card__body, .styleguide .card--black.add-new--product .card__body, .styleguide .card--black.card--product-add .add-new--product > div, .styleguide .card--black.add-new--product .add-new--product > div, .styleguide .card--black.card--product-add .video-card > div:nth-child(2), .styleguide .card--black.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #090909; }
.styleguide .card--black .card__body, .styleguide .card--black .add-new--product > div, .styleguide .card--black .video-card > div:nth-child(2) {
background-color: #222222;
border-color: #090909; }
.styleguide .card--black .card__body h2, .styleguide .card--black .add-new--product > div h2, .styleguide .card--black .video-card > div:nth-child(2) h2, .styleguide .card--black .card__body p, .styleguide .card--black .add-new--product > div p, .styleguide .card--black .video-card > div:nth-child(2) p, .styleguide .card--black .card__body span, .styleguide .card--black .add-new--product > div span, .styleguide .card--black .video-card > div:nth-child(2) span, .styleguide .card--black .card__body i, .styleguide .card--black .add-new--product > div i, .styleguide .card--black .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--black .card__body h2, body.dark-mode .styleguide .card--black .add-new--product > div h2, body.dark-mode .styleguide .card--black .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--black .card__body p, body.dark-mode .styleguide .card--black .add-new--product > div p, body.dark-mode .styleguide .card--black .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--black .card__body span, body.dark-mode .styleguide .card--black .add-new--product > div span, body.dark-mode .styleguide .card--black .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--black .card__body i, body.dark-mode .styleguide .card--black .add-new--product > div i, body.dark-mode .styleguide .card--black .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--black .card__body .color--grey-darker, body.dark-mode .styleguide .card--black .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--black .video-card > div:nth-child(2) .color--grey-darker {
color: #ffffff !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--cyaan {
background-color: #3ca0b3;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--cyaan.card--product:hover .card__body, .styleguide .card--cyaan.product-card:hover .card__body, .styleguide .card--cyaan.add-new--product:hover .card__body, .styleguide .card--cyaan.video-card:hover .card__body, .styleguide .card--cyaan.card--product:hover .add-new--product > div, .styleguide .card--cyaan.product-card:hover .add-new--product > div, .styleguide .card--cyaan.add-new--product:hover .add-new--product > div, .styleguide .card--cyaan.video-card:hover .add-new--product > div, .styleguide .card--cyaan.card--product:hover .video-card > div:nth-child(2), .styleguide .card--cyaan.product-card:hover .video-card > div:nth-child(2), .styleguide .card--cyaan.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--cyaan.video-card:hover .video-card > div:nth-child(2) {
background-color: #5bb7c8;
border-color: #368fa0; }
.styleguide .card--cyaan.card--product:hover .card__image::after, .styleguide .card--cyaan.product-card:hover .card__image::after, .styleguide .card--cyaan.add-new--product:hover .card__image::after, .styleguide .card--cyaan.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--cyaan.card--product-add .card__body, .styleguide .card--cyaan.add-new--product .card__body, .styleguide .card--cyaan.card--product-add .add-new--product > div, .styleguide .card--cyaan.add-new--product .add-new--product > div, .styleguide .card--cyaan.card--product-add .video-card > div:nth-child(2), .styleguide .card--cyaan.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #48aec1; }
.styleguide .card--cyaan .card__body, .styleguide .card--cyaan .add-new--product > div, .styleguide .card--cyaan .video-card > div:nth-child(2) {
background-color: #6ebfce;
border-color: #48aec1; }
.styleguide .card--cyaan .card__body h2, .styleguide .card--cyaan .add-new--product > div h2, .styleguide .card--cyaan .video-card > div:nth-child(2) h2, .styleguide .card--cyaan .card__body p, .styleguide .card--cyaan .add-new--product > div p, .styleguide .card--cyaan .video-card > div:nth-child(2) p, .styleguide .card--cyaan .card__body span, .styleguide .card--cyaan .add-new--product > div span, .styleguide .card--cyaan .video-card > div:nth-child(2) span, .styleguide .card--cyaan .card__body i, .styleguide .card--cyaan .add-new--product > div i, .styleguide .card--cyaan .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--cyaan .card__body h2, body.dark-mode .styleguide .card--cyaan .add-new--product > div h2, body.dark-mode .styleguide .card--cyaan .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--cyaan .card__body p, body.dark-mode .styleguide .card--cyaan .add-new--product > div p, body.dark-mode .styleguide .card--cyaan .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--cyaan .card__body span, body.dark-mode .styleguide .card--cyaan .add-new--product > div span, body.dark-mode .styleguide .card--cyaan .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--cyaan .card__body i, body.dark-mode .styleguide .card--cyaan .add-new--product > div i, body.dark-mode .styleguide .card--cyaan .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--cyaan .card__body .color--grey-darker, body.dark-mode .styleguide .card--cyaan .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--cyaan .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--grey {
background-color: #cdcdcd;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--grey.card--product:hover .card__body, .styleguide .product-card:hover .card__body, .styleguide .card--grey.add-new--product:hover .card__body, .styleguide .add-new--product.product-card:hover .card__body, .styleguide .add-new--product.video-card:hover .card__body, .styleguide .video-card:hover .card__body, .styleguide .card--grey.card--product:hover .add-new--product > div, .styleguide .product-card:hover .add-new--product > div, .styleguide .card--grey.add-new--product:hover .add-new--product > div, .styleguide .video-card:hover .add-new--product > div, .styleguide .card--grey.card--product:hover .video-card > div:nth-child(2), .styleguide .product-card:hover .video-card > div:nth-child(2), .styleguide .card--grey.add-new--product:hover .video-card > div:nth-child(2), .styleguide .video-card:hover .video-card > div:nth-child(2) {
background-color: #e6e6e6;
border-color: silver; }
.styleguide .card--grey.card--product:hover .card__image::after, .styleguide .product-card:hover .card__image::after, .styleguide .card--grey.add-new--product:hover .card__image::after, .styleguide .add-new--product.product-card:hover .card__image::after, .styleguide .add-new--product.video-card:hover .card__image::after, .styleguide .video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--grey.card--product-add .card__body, .styleguide .card--product-add.product-card .card__body, .styleguide .product-card.add-new--product .card__body, .styleguide .card--grey.add-new--product .card__body, .styleguide .add-new--product.video-card .card__body, .styleguide .card--product-add.video-card .card__body, .styleguide .card--grey.card--product-add .add-new--product > div, .styleguide .card--product-add.product-card .add-new--product > div, .styleguide .product-card.add-new--product .add-new--product > div, .styleguide .card--grey.add-new--product .add-new--product > div, .styleguide .add-new--product.video-card .add-new--product > div, .styleguide .card--product-add.video-card .add-new--product > div, .styleguide .card--grey.card--product-add .video-card > div:nth-child(2), .styleguide .card--product-add.product-card .video-card > div:nth-child(2), .styleguide .product-card.add-new--product .video-card > div:nth-child(2), .styleguide .card--grey.add-new--product .video-card > div:nth-child(2), .styleguide .add-new--product.video-card .video-card > div:nth-child(2), .styleguide .card--product-add.video-card .video-card > div:nth-child(2) {
border-top: 1px solid #dadada; }
.styleguide .card--grey .card__body, .styleguide .product-card .card__body, .styleguide .video-card .card__body, .styleguide .card--grey .add-new--product > div, .styleguide .product-card .add-new--product > div, .styleguide .video-card .add-new--product > div, .styleguide .card--grey .video-card > div:nth-child(2), .styleguide .product-card .video-card > div:nth-child(2), .styleguide .video-card > div:nth-child(2) {
background-color: #f3f3f3;
border-color: #dadada; }
.styleguide .card--grey .card__body h2, .styleguide .product-card .card__body h2, .styleguide .video-card .card__body h2, .styleguide .card--grey .add-new--product > div h2, .styleguide .product-card .add-new--product > div h2, .styleguide .video-card .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2, .styleguide .card--grey .card__body p, .styleguide .product-card .card__body p, .styleguide .video-card .card__body p, .styleguide .card--grey .add-new--product > div p, .styleguide .product-card .add-new--product > div p, .styleguide .video-card .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p, .styleguide .card--grey .card__body span, .styleguide .product-card .card__body span, .styleguide .video-card .card__body span, .styleguide .card--grey .add-new--product > div span, .styleguide .product-card .add-new--product > div span, .styleguide .video-card .add-new--product > div span, .styleguide .video-card > div:nth-child(2) span, .styleguide .card--grey .card__body i, .styleguide .product-card .card__body i, .styleguide .video-card .card__body i, .styleguide .card--grey .add-new--product > div i, .styleguide .product-card .add-new--product > div i, .styleguide .video-card .add-new--product > div i, .styleguide .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--grey .card__body h2, body.dark-mode .styleguide .product-card .card__body h2, body.dark-mode .styleguide .video-card .card__body h2, body.dark-mode .styleguide .card--grey .add-new--product > div h2, body.dark-mode .styleguide .product-card .add-new--product > div h2, body.dark-mode .styleguide .video-card .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--grey .card__body p, body.dark-mode .styleguide .product-card .card__body p, body.dark-mode .styleguide .video-card .card__body p, body.dark-mode .styleguide .card--grey .add-new--product > div p, body.dark-mode .styleguide .product-card .add-new--product > div p, body.dark-mode .styleguide .video-card .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--grey .card__body span, body.dark-mode .styleguide .product-card .card__body span, body.dark-mode .styleguide .video-card .card__body span, body.dark-mode .styleguide .card--grey .add-new--product > div span, body.dark-mode .styleguide .product-card .add-new--product > div span, body.dark-mode .styleguide .video-card .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--grey .card__body i, body.dark-mode .styleguide .product-card .card__body i, body.dark-mode .styleguide .video-card .card__body i, body.dark-mode .styleguide .card--grey .add-new--product > div i, body.dark-mode .styleguide .product-card .add-new--product > div i, body.dark-mode .styleguide .video-card .add-new--product > div i, body.dark-mode .styleguide .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--grey .card__body .color--grey-darker, body.dark-mode .styleguide .product-card .card__body .color--grey-darker, body.dark-mode .styleguide .video-card .card__body .color--grey-darker, body.dark-mode .styleguide .card--grey .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .product-card .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .video-card .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--grey-70 {
background-color: #aeaeae;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--grey-70.card--product:hover .card__body, .styleguide .card--grey-70.product-card:hover .card__body, .styleguide .card--grey-70.add-new--product:hover .card__body, .styleguide .card--grey-70.video-card:hover .card__body, .styleguide .card--grey-70.card--product:hover .add-new--product > div, .styleguide .card--grey-70.product-card:hover .add-new--product > div, .styleguide .card--grey-70.add-new--product:hover .add-new--product > div, .styleguide .card--grey-70.video-card:hover .add-new--product > div, .styleguide .card--grey-70.card--product:hover .video-card > div:nth-child(2), .styleguide .card--grey-70.product-card:hover .video-card > div:nth-child(2), .styleguide .card--grey-70.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--grey-70.video-card:hover .video-card > div:nth-child(2) {
background-color: #c8c8c8;
border-color: #a2a2a2; }
.styleguide .card--grey-70.card--product:hover .card__image::after, .styleguide .card--grey-70.product-card:hover .card__image::after, .styleguide .card--grey-70.add-new--product:hover .card__image::after, .styleguide .card--grey-70.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--grey-70.card--product-add .card__body, .styleguide .card--grey-70.add-new--product .card__body, .styleguide .card--grey-70.card--product-add .add-new--product > div, .styleguide .card--grey-70.add-new--product .add-new--product > div, .styleguide .card--grey-70.card--product-add .video-card > div:nth-child(2), .styleguide .card--grey-70.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #bbbbbb; }
.styleguide .card--grey-70 .card__body, .styleguide .card--grey-70 .add-new--product > div, .styleguide .card--grey-70 .video-card > div:nth-child(2) {
background-color: #d5d5d5;
border-color: #bbbbbb; }
.styleguide .card--grey-70 .card__body h2, .styleguide .card--grey-70 .add-new--product > div h2, .styleguide .card--grey-70 .video-card > div:nth-child(2) h2, .styleguide .card--grey-70 .card__body p, .styleguide .card--grey-70 .add-new--product > div p, .styleguide .card--grey-70 .video-card > div:nth-child(2) p, .styleguide .card--grey-70 .card__body span, .styleguide .card--grey-70 .add-new--product > div span, .styleguide .card--grey-70 .video-card > div:nth-child(2) span, .styleguide .card--grey-70 .card__body i, .styleguide .card--grey-70 .add-new--product > div i, .styleguide .card--grey-70 .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--grey-70 .card__body h2, body.dark-mode .styleguide .card--grey-70 .add-new--product > div h2, body.dark-mode .styleguide .card--grey-70 .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--grey-70 .card__body p, body.dark-mode .styleguide .card--grey-70 .add-new--product > div p, body.dark-mode .styleguide .card--grey-70 .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--grey-70 .card__body span, body.dark-mode .styleguide .card--grey-70 .add-new--product > div span, body.dark-mode .styleguide .card--grey-70 .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--grey-70 .card__body i, body.dark-mode .styleguide .card--grey-70 .add-new--product > div i, body.dark-mode .styleguide .card--grey-70 .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--grey-70 .card__body .color--grey-darker, body.dark-mode .styleguide .card--grey-70 .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--grey-70 .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--grey-dark {
background-color: #7b7b7b;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--grey-dark.card--product:hover .card__body, .styleguide .card--grey-dark.product-card:hover .card__body, .styleguide .card--grey-dark.add-new--product:hover .card__body, .styleguide .card--grey-dark.video-card:hover .card__body, .styleguide .card--grey-dark.card--product:hover .add-new--product > div, .styleguide .card--grey-dark.product-card:hover .add-new--product > div, .styleguide .card--grey-dark.add-new--product:hover .add-new--product > div, .styleguide .card--grey-dark.video-card:hover .add-new--product > div, .styleguide .card--grey-dark.card--product:hover .video-card > div:nth-child(2), .styleguide .card--grey-dark.product-card:hover .video-card > div:nth-child(2), .styleguide .card--grey-dark.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--grey-dark.video-card:hover .video-card > div:nth-child(2) {
background-color: #959595;
border-color: #6f6f6f; }
.styleguide .card--grey-dark.card--product:hover .card__image::after, .styleguide .card--grey-dark.product-card:hover .card__image::after, .styleguide .card--grey-dark.add-new--product:hover .card__image::after, .styleguide .card--grey-dark.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--grey-dark.card--product-add .card__body, .styleguide .card--grey-dark.add-new--product .card__body, .styleguide .card--grey-dark.card--product-add .add-new--product > div, .styleguide .card--grey-dark.add-new--product .add-new--product > div, .styleguide .card--grey-dark.card--product-add .video-card > div:nth-child(2), .styleguide .card--grey-dark.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #888888; }
.styleguide .card--grey-dark .card__body, .styleguide .card--grey-dark .add-new--product > div, .styleguide .card--grey-dark .video-card > div:nth-child(2) {
background-color: #a2a2a2;
border-color: #888888; }
.styleguide .card--grey-dark .card__body h2, .styleguide .card--grey-dark .add-new--product > div h2, .styleguide .card--grey-dark .video-card > div:nth-child(2) h2, .styleguide .card--grey-dark .card__body p, .styleguide .card--grey-dark .add-new--product > div p, .styleguide .card--grey-dark .video-card > div:nth-child(2) p, .styleguide .card--grey-dark .card__body span, .styleguide .card--grey-dark .add-new--product > div span, .styleguide .card--grey-dark .video-card > div:nth-child(2) span, .styleguide .card--grey-dark .card__body i, .styleguide .card--grey-dark .add-new--product > div i, .styleguide .card--grey-dark .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--grey-dark .card__body h2, body.dark-mode .styleguide .card--grey-dark .add-new--product > div h2, body.dark-mode .styleguide .card--grey-dark .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--grey-dark .card__body p, body.dark-mode .styleguide .card--grey-dark .add-new--product > div p, body.dark-mode .styleguide .card--grey-dark .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--grey-dark .card__body span, body.dark-mode .styleguide .card--grey-dark .add-new--product > div span, body.dark-mode .styleguide .card--grey-dark .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--grey-dark .card__body i, body.dark-mode .styleguide .card--grey-dark .add-new--product > div i, body.dark-mode .styleguide .card--grey-dark .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--grey-dark .card__body .color--grey-darker, body.dark-mode .styleguide .card--grey-dark .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--grey-dark .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--grey-darker {
background-color: #484848;
color: #ffffff; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--grey-darker.card--product:hover .card__body, .styleguide .card--grey-darker.product-card:hover .card__body, .styleguide .card--grey-darker.add-new--product:hover .card__body, .styleguide .card--grey-darker.video-card:hover .card__body, .styleguide .card--grey-darker.card--product:hover .add-new--product > div, .styleguide .card--grey-darker.product-card:hover .add-new--product > div, .styleguide .card--grey-darker.add-new--product:hover .add-new--product > div, .styleguide .card--grey-darker.video-card:hover .add-new--product > div, .styleguide .card--grey-darker.card--product:hover .video-card > div:nth-child(2), .styleguide .card--grey-darker.product-card:hover .video-card > div:nth-child(2), .styleguide .card--grey-darker.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--grey-darker.video-card:hover .video-card > div:nth-child(2) {
background-color: #626262;
border-color: #3c3c3c; }
.styleguide .card--grey-darker.card--product:hover .card__image::after, .styleguide .card--grey-darker.product-card:hover .card__image::after, .styleguide .card--grey-darker.add-new--product:hover .card__image::after, .styleguide .card--grey-darker.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--grey-darker.card--product-add .card__body, .styleguide .card--grey-darker.add-new--product .card__body, .styleguide .card--grey-darker.card--product-add .add-new--product > div, .styleguide .card--grey-darker.add-new--product .add-new--product > div, .styleguide .card--grey-darker.card--product-add .video-card > div:nth-child(2), .styleguide .card--grey-darker.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #555555; }
.styleguide .card--grey-darker .card__body, .styleguide .card--grey-darker .add-new--product > div, .styleguide .card--grey-darker .video-card > div:nth-child(2) {
background-color: #6f6f6f;
border-color: #555555; }
.styleguide .card--grey-darker .card__body h2, .styleguide .card--grey-darker .add-new--product > div h2, .styleguide .card--grey-darker .video-card > div:nth-child(2) h2, .styleguide .card--grey-darker .card__body p, .styleguide .card--grey-darker .add-new--product > div p, .styleguide .card--grey-darker .video-card > div:nth-child(2) p, .styleguide .card--grey-darker .card__body span, .styleguide .card--grey-darker .add-new--product > div span, .styleguide .card--grey-darker .video-card > div:nth-child(2) span, .styleguide .card--grey-darker .card__body i, .styleguide .card--grey-darker .add-new--product > div i, .styleguide .card--grey-darker .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--grey-darker .card__body h2, body.dark-mode .styleguide .card--grey-darker .add-new--product > div h2, body.dark-mode .styleguide .card--grey-darker .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--grey-darker .card__body p, body.dark-mode .styleguide .card--grey-darker .add-new--product > div p, body.dark-mode .styleguide .card--grey-darker .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--grey-darker .card__body span, body.dark-mode .styleguide .card--grey-darker .add-new--product > div span, body.dark-mode .styleguide .card--grey-darker .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--grey-darker .card__body i, body.dark-mode .styleguide .card--grey-darker .add-new--product > div i, body.dark-mode .styleguide .card--grey-darker .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--grey-darker .card__body .color--grey-darker, body.dark-mode .styleguide .card--grey-darker .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--grey-darker .video-card > div:nth-child(2) .color--grey-darker {
color: #ffffff !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--primary {
background-color: #1a2d38;
color: #ffffff; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--primary.card--product:hover .card__body, .styleguide .card--primary.product-card:hover .card__body, .styleguide .card--primary.add-new--product:hover .card__body, .styleguide .card--primary.video-card:hover .card__body, .styleguide .card--primary.card--product:hover .add-new--product > div, .styleguide .card--primary.product-card:hover .add-new--product > div, .styleguide .card--primary.add-new--product:hover .add-new--product > div, .styleguide .card--primary.video-card:hover .add-new--product > div, .styleguide .card--primary.card--product:hover .video-card > div:nth-child(2), .styleguide .card--primary.product-card:hover .video-card > div:nth-child(2), .styleguide .card--primary.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--primary.video-card:hover .video-card > div:nth-child(2) {
background-color: #2b485b;
border-color: #121f27; }
.styleguide .card--primary.card--product:hover .card__image::after, .styleguide .card--primary.product-card:hover .card__image::after, .styleguide .card--primary.add-new--product:hover .card__image::after, .styleguide .card--primary.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--primary.card--product-add .card__body, .styleguide .card--primary.add-new--product .card__body, .styleguide .card--primary.card--product-add .add-new--product > div, .styleguide .card--primary.add-new--product .add-new--product > div, .styleguide .card--primary.card--product-add .video-card > div:nth-child(2), .styleguide .card--primary.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #233a49; }
.styleguide .card--primary .card__body, .styleguide .card--primary .add-new--product > div, .styleguide .card--primary .video-card > div:nth-child(2) {
background-color: #33566c;
border-color: #233a49; }
.styleguide .card--primary .card__body h2, .styleguide .card--primary .add-new--product > div h2, .styleguide .card--primary .video-card > div:nth-child(2) h2, .styleguide .card--primary .card__body p, .styleguide .card--primary .add-new--product > div p, .styleguide .card--primary .video-card > div:nth-child(2) p, .styleguide .card--primary .card__body span, .styleguide .card--primary .add-new--product > div span, .styleguide .card--primary .video-card > div:nth-child(2) span, .styleguide .card--primary .card__body i, .styleguide .card--primary .add-new--product > div i, .styleguide .card--primary .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--primary .card__body h2, body.dark-mode .styleguide .card--primary .add-new--product > div h2, body.dark-mode .styleguide .card--primary .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--primary .card__body p, body.dark-mode .styleguide .card--primary .add-new--product > div p, body.dark-mode .styleguide .card--primary .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--primary .card__body span, body.dark-mode .styleguide .card--primary .add-new--product > div span, body.dark-mode .styleguide .card--primary .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--primary .card__body i, body.dark-mode .styleguide .card--primary .add-new--product > div i, body.dark-mode .styleguide .card--primary .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--primary .card__body .color--grey-darker, body.dark-mode .styleguide .card--primary .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--primary .video-card > div:nth-child(2) .color--grey-darker {
color: #ffffff !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--red {
background-color: #eb3d3d;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--red.card--product:hover .card__body, .styleguide .card--red.product-card:hover .card__body, .styleguide .card--red.add-new--product:hover .card__body, .styleguide .card--red.video-card:hover .card__body, .styleguide .card--red.card--product:hover .add-new--product > div, .styleguide .card--red.product-card:hover .add-new--product > div, .styleguide .card--red.add-new--product:hover .add-new--product > div, .styleguide .card--red.video-card:hover .add-new--product > div, .styleguide .card--red.card--product:hover .video-card > div:nth-child(2), .styleguide .card--red.product-card:hover .video-card > div:nth-child(2), .styleguide .card--red.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--red.video-card:hover .video-card > div:nth-child(2) {
background-color: #f06b6b;
border-color: #e82626; }
.styleguide .card--red.card--product:hover .card__image::after, .styleguide .card--red.product-card:hover .card__image::after, .styleguide .card--red.add-new--product:hover .card__image::after, .styleguide .card--red.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--red.card--product-add .card__body, .styleguide .card--red.add-new--product .card__body, .styleguide .card--red.card--product-add .add-new--product > div, .styleguide .card--red.add-new--product .add-new--product > div, .styleguide .card--red.card--product-add .video-card > div:nth-child(2), .styleguide .card--red.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #ed5454; }
.styleguide .card--red .card__body, .styleguide .card--red .add-new--product > div, .styleguide .card--red .video-card > div:nth-child(2) {
background-color: #f28282;
border-color: #ed5454; }
.styleguide .card--red .card__body h2, .styleguide .card--red .add-new--product > div h2, .styleguide .card--red .video-card > div:nth-child(2) h2, .styleguide .card--red .card__body p, .styleguide .card--red .add-new--product > div p, .styleguide .card--red .video-card > div:nth-child(2) p, .styleguide .card--red .card__body span, .styleguide .card--red .add-new--product > div span, .styleguide .card--red .video-card > div:nth-child(2) span, .styleguide .card--red .card__body i, .styleguide .card--red .add-new--product > div i, .styleguide .card--red .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--red .card__body h2, body.dark-mode .styleguide .card--red .add-new--product > div h2, body.dark-mode .styleguide .card--red .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--red .card__body p, body.dark-mode .styleguide .card--red .add-new--product > div p, body.dark-mode .styleguide .card--red .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--red .card__body span, body.dark-mode .styleguide .card--red .add-new--product > div span, body.dark-mode .styleguide .card--red .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--red .card__body i, body.dark-mode .styleguide .card--red .add-new--product > div i, body.dark-mode .styleguide .card--red .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--red .card__body .color--grey-darker, body.dark-mode .styleguide .card--red .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--red .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--red-dark {
background-color: #dd1717;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--red-dark.card--product:hover .card__body, .styleguide .card--red-dark.product-card:hover .card__body, .styleguide .card--red-dark.add-new--product:hover .card__body, .styleguide .card--red-dark.video-card:hover .card__body, .styleguide .card--red-dark.card--product:hover .add-new--product > div, .styleguide .card--red-dark.product-card:hover .add-new--product > div, .styleguide .card--red-dark.add-new--product:hover .add-new--product > div, .styleguide .card--red-dark.video-card:hover .add-new--product > div, .styleguide .card--red-dark.card--product:hover .video-card > div:nth-child(2), .styleguide .card--red-dark.product-card:hover .video-card > div:nth-child(2), .styleguide .card--red-dark.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--red-dark.video-card:hover .video-card > div:nth-child(2) {
background-color: #eb3d3d;
border-color: #c61515; }
.styleguide .card--red-dark.card--product:hover .card__image::after, .styleguide .card--red-dark.product-card:hover .card__image::after, .styleguide .card--red-dark.add-new--product:hover .card__image::after, .styleguide .card--red-dark.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--red-dark.card--product-add .card__body, .styleguide .card--red-dark.add-new--product .card__body, .styleguide .card--red-dark.card--product-add .add-new--product > div, .styleguide .card--red-dark.add-new--product .add-new--product > div, .styleguide .card--red-dark.card--product-add .video-card > div:nth-child(2), .styleguide .card--red-dark.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #e82626; }
.styleguide .card--red-dark .card__body, .styleguide .card--red-dark .add-new--product > div, .styleguide .card--red-dark .video-card > div:nth-child(2) {
background-color: #ed5454;
border-color: #e82626; }
.styleguide .card--red-dark .card__body h2, .styleguide .card--red-dark .add-new--product > div h2, .styleguide .card--red-dark .video-card > div:nth-child(2) h2, .styleguide .card--red-dark .card__body p, .styleguide .card--red-dark .add-new--product > div p, .styleguide .card--red-dark .video-card > div:nth-child(2) p, .styleguide .card--red-dark .card__body span, .styleguide .card--red-dark .add-new--product > div span, .styleguide .card--red-dark .video-card > div:nth-child(2) span, .styleguide .card--red-dark .card__body i, .styleguide .card--red-dark .add-new--product > div i, .styleguide .card--red-dark .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--red-dark .card__body h2, body.dark-mode .styleguide .card--red-dark .add-new--product > div h2, body.dark-mode .styleguide .card--red-dark .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--red-dark .card__body p, body.dark-mode .styleguide .card--red-dark .add-new--product > div p, body.dark-mode .styleguide .card--red-dark .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--red-dark .card__body span, body.dark-mode .styleguide .card--red-dark .add-new--product > div span, body.dark-mode .styleguide .card--red-dark .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--red-dark .card__body i, body.dark-mode .styleguide .card--red-dark .add-new--product > div i, body.dark-mode .styleguide .card--red-dark .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--red-dark .card__body .color--grey-darker, body.dark-mode .styleguide .card--red-dark .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--red-dark .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--green {
background-color: #5ccf59;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--green.card--product:hover .card__body, .styleguide .card--green.product-card:hover .card__body, .styleguide .card--green.add-new--product:hover .card__body, .styleguide .card--green.video-card:hover .card__body, .styleguide .card--green.card--product:hover .add-new--product > div, .styleguide .card--green.product-card:hover .add-new--product > div, .styleguide .card--green.add-new--product:hover .add-new--product > div, .styleguide .card--green.video-card:hover .add-new--product > div, .styleguide .card--green.card--product:hover .video-card > div:nth-child(2), .styleguide .card--green.product-card:hover .video-card > div:nth-child(2), .styleguide .card--green.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--green.video-card:hover .video-card > div:nth-child(2) {
background-color: #83da80;
border-color: #48c945; }
.styleguide .card--green.card--product:hover .card__image::after, .styleguide .card--green.product-card:hover .card__image::after, .styleguide .card--green.add-new--product:hover .card__image::after, .styleguide .card--green.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--green.card--product-add .card__body, .styleguide .card--green.add-new--product .card__body, .styleguide .card--green.card--product-add .add-new--product > div, .styleguide .card--green.add-new--product .add-new--product > div, .styleguide .card--green.card--product-add .video-card > div:nth-child(2), .styleguide .card--green.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #6fd56c; }
.styleguide .card--green .card__body, .styleguide .card--green .add-new--product > div, .styleguide .card--green .video-card > div:nth-child(2) {
background-color: #96e094;
border-color: #6fd56c; }
.styleguide .card--green .card__body h2, .styleguide .card--green .add-new--product > div h2, .styleguide .card--green .video-card > div:nth-child(2) h2, .styleguide .card--green .card__body p, .styleguide .card--green .add-new--product > div p, .styleguide .card--green .video-card > div:nth-child(2) p, .styleguide .card--green .card__body span, .styleguide .card--green .add-new--product > div span, .styleguide .card--green .video-card > div:nth-child(2) span, .styleguide .card--green .card__body i, .styleguide .card--green .add-new--product > div i, .styleguide .card--green .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--green .card__body h2, body.dark-mode .styleguide .card--green .add-new--product > div h2, body.dark-mode .styleguide .card--green .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--green .card__body p, body.dark-mode .styleguide .card--green .add-new--product > div p, body.dark-mode .styleguide .card--green .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--green .card__body span, body.dark-mode .styleguide .card--green .add-new--product > div span, body.dark-mode .styleguide .card--green .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--green .card__body i, body.dark-mode .styleguide .card--green .add-new--product > div i, body.dark-mode .styleguide .card--green .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--green .card__body .color--grey-darker, body.dark-mode .styleguide .card--green .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--green .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--green-darker {
background-color: #226e20;
color: #ffffff; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--green-darker.card--product:hover .card__body, .styleguide .card--green-darker.product-card:hover .card__body, .styleguide .card--green-darker.add-new--product:hover .card__body, .styleguide .card--green-darker.video-card:hover .card__body, .styleguide .card--green-darker.card--product:hover .add-new--product > div, .styleguide .card--green-darker.product-card:hover .add-new--product > div, .styleguide .card--green-darker.add-new--product:hover .add-new--product > div, .styleguide .card--green-darker.video-card:hover .add-new--product > div, .styleguide .card--green-darker.card--product:hover .video-card > div:nth-child(2), .styleguide .card--green-darker.product-card:hover .video-card > div:nth-child(2), .styleguide .card--green-darker.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--green-darker.video-card:hover .video-card > div:nth-child(2) {
background-color: #2e962b;
border-color: #1c5b1a; }
.styleguide .card--green-darker.card--product:hover .card__image::after, .styleguide .card--green-darker.product-card:hover .card__image::after, .styleguide .card--green-darker.add-new--product:hover .card__image::after, .styleguide .card--green-darker.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--green-darker.card--product-add .card__body, .styleguide .card--green-darker.add-new--product .card__body, .styleguide .card--green-darker.card--product-add .add-new--product > div, .styleguide .card--green-darker.add-new--product .add-new--product > div, .styleguide .card--green-darker.card--product-add .video-card > div:nth-child(2), .styleguide .card--green-darker.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #288226; }
.styleguide .card--green-darker .card__body, .styleguide .card--green-darker .add-new--product > div, .styleguide .card--green-darker .video-card > div:nth-child(2) {
background-color: #34aa31;
border-color: #288226; }
.styleguide .card--green-darker .card__body h2, .styleguide .card--green-darker .add-new--product > div h2, .styleguide .card--green-darker .video-card > div:nth-child(2) h2, .styleguide .card--green-darker .card__body p, .styleguide .card--green-darker .add-new--product > div p, .styleguide .card--green-darker .video-card > div:nth-child(2) p, .styleguide .card--green-darker .card__body span, .styleguide .card--green-darker .add-new--product > div span, .styleguide .card--green-darker .video-card > div:nth-child(2) span, .styleguide .card--green-darker .card__body i, .styleguide .card--green-darker .add-new--product > div i, .styleguide .card--green-darker .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--green-darker .card__body h2, body.dark-mode .styleguide .card--green-darker .add-new--product > div h2, body.dark-mode .styleguide .card--green-darker .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--green-darker .card__body p, body.dark-mode .styleguide .card--green-darker .add-new--product > div p, body.dark-mode .styleguide .card--green-darker .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--green-darker .card__body span, body.dark-mode .styleguide .card--green-darker .add-new--product > div span, body.dark-mode .styleguide .card--green-darker .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--green-darker .card__body i, body.dark-mode .styleguide .card--green-darker .add-new--product > div i, body.dark-mode .styleguide .card--green-darker .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--green-darker .card__body .color--grey-darker, body.dark-mode .styleguide .card--green-darker .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--green-darker .video-card > div:nth-child(2) .color--grey-darker {
color: #ffffff !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--avocado {
background-color: #607627;
color: #ffffff; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--avocado.card--product:hover .card__body, .styleguide .card--avocado.product-card:hover .card__body, .styleguide .card--avocado.add-new--product:hover .card__body, .styleguide .card--avocado.video-card:hover .card__body, .styleguide .card--avocado.card--product:hover .add-new--product > div, .styleguide .card--avocado.product-card:hover .add-new--product > div, .styleguide .card--avocado.add-new--product:hover .add-new--product > div, .styleguide .card--avocado.video-card:hover .add-new--product > div, .styleguide .card--avocado.card--product:hover .video-card > div:nth-child(2), .styleguide .card--avocado.product-card:hover .video-card > div:nth-child(2), .styleguide .card--avocado.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--avocado.video-card:hover .video-card > div:nth-child(2) {
background-color: #7f9d34;
border-color: #506321; }
.styleguide .card--avocado.card--product:hover .card__image::after, .styleguide .card--avocado.product-card:hover .card__image::after, .styleguide .card--avocado.add-new--product:hover .card__image::after, .styleguide .card--avocado.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--avocado.card--product-add .card__body, .styleguide .card--avocado.add-new--product .card__body, .styleguide .card--avocado.card--product-add .add-new--product > div, .styleguide .card--avocado.add-new--product .add-new--product > div, .styleguide .card--avocado.card--product-add .video-card > div:nth-child(2), .styleguide .card--avocado.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #6f8a2d; }
.styleguide .card--avocado .card__body, .styleguide .card--avocado .add-new--product > div, .styleguide .card--avocado .video-card > div:nth-child(2) {
background-color: #8eb03a;
border-color: #6f8a2d; }
.styleguide .card--avocado .card__body h2, .styleguide .card--avocado .add-new--product > div h2, .styleguide .card--avocado .video-card > div:nth-child(2) h2, .styleguide .card--avocado .card__body p, .styleguide .card--avocado .add-new--product > div p, .styleguide .card--avocado .video-card > div:nth-child(2) p, .styleguide .card--avocado .card__body span, .styleguide .card--avocado .add-new--product > div span, .styleguide .card--avocado .video-card > div:nth-child(2) span, .styleguide .card--avocado .card__body i, .styleguide .card--avocado .add-new--product > div i, .styleguide .card--avocado .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--avocado .card__body h2, body.dark-mode .styleguide .card--avocado .add-new--product > div h2, body.dark-mode .styleguide .card--avocado .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--avocado .card__body p, body.dark-mode .styleguide .card--avocado .add-new--product > div p, body.dark-mode .styleguide .card--avocado .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--avocado .card__body span, body.dark-mode .styleguide .card--avocado .add-new--product > div span, body.dark-mode .styleguide .card--avocado .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--avocado .card__body i, body.dark-mode .styleguide .card--avocado .add-new--product > div i, body.dark-mode .styleguide .card--avocado .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--avocado .card__body .color--grey-darker, body.dark-mode .styleguide .card--avocado .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--avocado .video-card > div:nth-child(2) .color--grey-darker {
color: #ffffff !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--yellow {
background-color: #e8eb3d;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--yellow.card--product:hover .card__body, .styleguide .card--yellow.product-card:hover .card__body, .styleguide .card--yellow.add-new--product:hover .card__body, .styleguide .card--yellow.video-card:hover .card__body, .styleguide .card--yellow.card--product:hover .add-new--product > div, .styleguide .card--yellow.product-card:hover .add-new--product > div, .styleguide .card--yellow.add-new--product:hover .add-new--product > div, .styleguide .card--yellow.video-card:hover .add-new--product > div, .styleguide .card--yellow.card--product:hover .video-card > div:nth-child(2), .styleguide .card--yellow.product-card:hover .video-card > div:nth-child(2), .styleguide .card--yellow.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--yellow.video-card:hover .video-card > div:nth-child(2) {
background-color: #edf06b;
border-color: #e5e826; }
.styleguide .card--yellow.card--product:hover .card__image::after, .styleguide .card--yellow.product-card:hover .card__image::after, .styleguide .card--yellow.add-new--product:hover .card__image::after, .styleguide .card--yellow.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--yellow.card--product-add .card__body, .styleguide .card--yellow.add-new--product .card__body, .styleguide .card--yellow.card--product-add .add-new--product > div, .styleguide .card--yellow.add-new--product .add-new--product > div, .styleguide .card--yellow.card--product-add .video-card > div:nth-child(2), .styleguide .card--yellow.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eaed54; }
.styleguide .card--yellow .card__body, .styleguide .card--yellow .add-new--product > div, .styleguide .card--yellow .video-card > div:nth-child(2) {
background-color: #f0f282;
border-color: #eaed54; }
.styleguide .card--yellow .card__body h2, .styleguide .card--yellow .add-new--product > div h2, .styleguide .card--yellow .video-card > div:nth-child(2) h2, .styleguide .card--yellow .card__body p, .styleguide .card--yellow .add-new--product > div p, .styleguide .card--yellow .video-card > div:nth-child(2) p, .styleguide .card--yellow .card__body span, .styleguide .card--yellow .add-new--product > div span, .styleguide .card--yellow .video-card > div:nth-child(2) span, .styleguide .card--yellow .card__body i, .styleguide .card--yellow .add-new--product > div i, .styleguide .card--yellow .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--yellow .card__body h2, body.dark-mode .styleguide .card--yellow .add-new--product > div h2, body.dark-mode .styleguide .card--yellow .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--yellow .card__body p, body.dark-mode .styleguide .card--yellow .add-new--product > div p, body.dark-mode .styleguide .card--yellow .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--yellow .card__body span, body.dark-mode .styleguide .card--yellow .add-new--product > div span, body.dark-mode .styleguide .card--yellow .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--yellow .card__body i, body.dark-mode .styleguide .card--yellow .add-new--product > div i, body.dark-mode .styleguide .card--yellow .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--yellow .card__body .color--grey-darker, body.dark-mode .styleguide .card--yellow .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--yellow .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--yellow-darken {
background-color: #dadd17;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--yellow-darken.card--product:hover .card__body, .styleguide .card--yellow-darken.product-card:hover .card__body, .styleguide .card--yellow-darken.add-new--product:hover .card__body, .styleguide .card--yellow-darken.video-card:hover .card__body, .styleguide .card--yellow-darken.card--product:hover .add-new--product > div, .styleguide .card--yellow-darken.product-card:hover .add-new--product > div, .styleguide .card--yellow-darken.add-new--product:hover .add-new--product > div, .styleguide .card--yellow-darken.video-card:hover .add-new--product > div, .styleguide .card--yellow-darken.card--product:hover .video-card > div:nth-child(2), .styleguide .card--yellow-darken.product-card:hover .video-card > div:nth-child(2), .styleguide .card--yellow-darken.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--yellow-darken.video-card:hover .video-card > div:nth-child(2) {
background-color: #e8eb3d;
border-color: #c3c615; }
.styleguide .card--yellow-darken.card--product:hover .card__image::after, .styleguide .card--yellow-darken.product-card:hover .card__image::after, .styleguide .card--yellow-darken.add-new--product:hover .card__image::after, .styleguide .card--yellow-darken.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--yellow-darken.card--product-add .card__body, .styleguide .card--yellow-darken.add-new--product .card__body, .styleguide .card--yellow-darken.card--product-add .add-new--product > div, .styleguide .card--yellow-darken.add-new--product .add-new--product > div, .styleguide .card--yellow-darken.card--product-add .video-card > div:nth-child(2), .styleguide .card--yellow-darken.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #e5e826; }
.styleguide .card--yellow-darken .card__body, .styleguide .card--yellow-darken .add-new--product > div, .styleguide .card--yellow-darken .video-card > div:nth-child(2) {
background-color: #eaed54;
border-color: #e5e826; }
.styleguide .card--yellow-darken .card__body h2, .styleguide .card--yellow-darken .add-new--product > div h2, .styleguide .card--yellow-darken .video-card > div:nth-child(2) h2, .styleguide .card--yellow-darken .card__body p, .styleguide .card--yellow-darken .add-new--product > div p, .styleguide .card--yellow-darken .video-card > div:nth-child(2) p, .styleguide .card--yellow-darken .card__body span, .styleguide .card--yellow-darken .add-new--product > div span, .styleguide .card--yellow-darken .video-card > div:nth-child(2) span, .styleguide .card--yellow-darken .card__body i, .styleguide .card--yellow-darken .add-new--product > div i, .styleguide .card--yellow-darken .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--yellow-darken .card__body h2, body.dark-mode .styleguide .card--yellow-darken .add-new--product > div h2, body.dark-mode .styleguide .card--yellow-darken .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--yellow-darken .card__body p, body.dark-mode .styleguide .card--yellow-darken .add-new--product > div p, body.dark-mode .styleguide .card--yellow-darken .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--yellow-darken .card__body span, body.dark-mode .styleguide .card--yellow-darken .add-new--product > div span, body.dark-mode .styleguide .card--yellow-darken .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--yellow-darken .card__body i, body.dark-mode .styleguide .card--yellow-darken .add-new--product > div i, body.dark-mode .styleguide .card--yellow-darken .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--yellow-darken .card__body .color--grey-darker, body.dark-mode .styleguide .card--yellow-darken .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--yellow-darken .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--orange {
background-color: #885f0f;
color: #ffffff; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--orange.card--product:hover .card__body, .styleguide .card--orange.product-card:hover .card__body, .styleguide .card--orange.add-new--product:hover .card__body, .styleguide .card--orange.video-card:hover .card__body, .styleguide .card--orange.card--product:hover .add-new--product > div, .styleguide .card--orange.product-card:hover .add-new--product > div, .styleguide .card--orange.add-new--product:hover .add-new--product > div, .styleguide .card--orange.video-card:hover .add-new--product > div, .styleguide .card--orange.card--product:hover .video-card > div:nth-child(2), .styleguide .card--orange.product-card:hover .video-card > div:nth-child(2), .styleguide .card--orange.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--orange.video-card:hover .video-card > div:nth-child(2) {
background-color: #b67f14;
border-color: #714f0d; }
.styleguide .card--orange.card--product:hover .card__image::after, .styleguide .card--orange.product-card:hover .card__image::after, .styleguide .card--orange.add-new--product:hover .card__image::after, .styleguide .card--orange.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--orange.card--product-add .card__body, .styleguide .card--orange.add-new--product .card__body, .styleguide .card--orange.card--product-add .add-new--product > div, .styleguide .card--orange.add-new--product .add-new--product > div, .styleguide .card--orange.card--product-add .video-card > div:nth-child(2), .styleguide .card--orange.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #9f6f12; }
.styleguide .card--orange .card__body, .styleguide .card--orange .add-new--product > div, .styleguide .card--orange .video-card > div:nth-child(2) {
background-color: #cd8f17;
border-color: #9f6f12; }
.styleguide .card--orange .card__body h2, .styleguide .card--orange .add-new--product > div h2, .styleguide .card--orange .video-card > div:nth-child(2) h2, .styleguide .card--orange .card__body p, .styleguide .card--orange .add-new--product > div p, .styleguide .card--orange .video-card > div:nth-child(2) p, .styleguide .card--orange .card__body span, .styleguide .card--orange .add-new--product > div span, .styleguide .card--orange .video-card > div:nth-child(2) span, .styleguide .card--orange .card__body i, .styleguide .card--orange .add-new--product > div i, .styleguide .card--orange .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--orange .card__body h2, body.dark-mode .styleguide .card--orange .add-new--product > div h2, body.dark-mode .styleguide .card--orange .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--orange .card__body p, body.dark-mode .styleguide .card--orange .add-new--product > div p, body.dark-mode .styleguide .card--orange .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--orange .card__body span, body.dark-mode .styleguide .card--orange .add-new--product > div span, body.dark-mode .styleguide .card--orange .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--orange .card__body i, body.dark-mode .styleguide .card--orange .add-new--product > div i, body.dark-mode .styleguide .card--orange .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--orange .card__body .color--grey-darker, body.dark-mode .styleguide .card--orange .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--orange .video-card > div:nth-child(2) .color--grey-darker {
color: #ffffff !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--blue {
background-color: #3a89d4;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--blue.card--product:hover .card__body, .styleguide .card--blue.product-card:hover .card__body, .styleguide .card--blue.add-new--product:hover .card__body, .styleguide .card--blue.video-card:hover .card__body, .styleguide .card--blue.card--product:hover .add-new--product > div, .styleguide .card--blue.product-card:hover .add-new--product > div, .styleguide .card--blue.add-new--product:hover .add-new--product > div, .styleguide .card--blue.video-card:hover .add-new--product > div, .styleguide .card--blue.card--product:hover .video-card > div:nth-child(2), .styleguide .card--blue.product-card:hover .video-card > div:nth-child(2), .styleguide .card--blue.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--blue.video-card:hover .video-card > div:nth-child(2) {
background-color: #64a2dd;
border-color: #2c7dc9; }
.styleguide .card--blue.card--product:hover .card__image::after, .styleguide .card--blue.product-card:hover .card__image::after, .styleguide .card--blue.add-new--product:hover .card__image::after, .styleguide .card--blue.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--blue.card--product-add .card__body, .styleguide .card--blue.add-new--product .card__body, .styleguide .card--blue.card--product-add .add-new--product > div, .styleguide .card--blue.add-new--product .add-new--product > div, .styleguide .card--blue.card--product-add .video-card > div:nth-child(2), .styleguide .card--blue.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #4f96d9; }
.styleguide .card--blue .card__body, .styleguide .card--blue .add-new--product > div, .styleguide .card--blue .video-card > div:nth-child(2) {
background-color: #79afe2;
border-color: #4f96d9; }
.styleguide .card--blue .card__body h2, .styleguide .card--blue .add-new--product > div h2, .styleguide .card--blue .video-card > div:nth-child(2) h2, .styleguide .card--blue .card__body p, .styleguide .card--blue .add-new--product > div p, .styleguide .card--blue .video-card > div:nth-child(2) p, .styleguide .card--blue .card__body span, .styleguide .card--blue .add-new--product > div span, .styleguide .card--blue .video-card > div:nth-child(2) span, .styleguide .card--blue .card__body i, .styleguide .card--blue .add-new--product > div i, .styleguide .card--blue .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--blue .card__body h2, body.dark-mode .styleguide .card--blue .add-new--product > div h2, body.dark-mode .styleguide .card--blue .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--blue .card__body p, body.dark-mode .styleguide .card--blue .add-new--product > div p, body.dark-mode .styleguide .card--blue .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--blue .card__body span, body.dark-mode .styleguide .card--blue .add-new--product > div span, body.dark-mode .styleguide .card--blue .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--blue .card__body i, body.dark-mode .styleguide .card--blue .add-new--product > div i, body.dark-mode .styleguide .card--blue .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--blue .card__body .color--grey-darker, body.dark-mode .styleguide .card--blue .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--blue .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--light-blue {
background-color: #3d7beb;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--light-blue.card--product:hover .card__body, .styleguide .card--light-blue.product-card:hover .card__body, .styleguide .card--light-blue.add-new--product:hover .card__body, .styleguide .card--light-blue.video-card:hover .card__body, .styleguide .card--light-blue.card--product:hover .add-new--product > div, .styleguide .card--light-blue.product-card:hover .add-new--product > div, .styleguide .card--light-blue.add-new--product:hover .add-new--product > div, .styleguide .card--light-blue.video-card:hover .add-new--product > div, .styleguide .card--light-blue.card--product:hover .video-card > div:nth-child(2), .styleguide .card--light-blue.product-card:hover .video-card > div:nth-child(2), .styleguide .card--light-blue.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--light-blue.video-card:hover .video-card > div:nth-child(2) {
background-color: #6b9af0;
border-color: #266be8; }
.styleguide .card--light-blue.card--product:hover .card__image::after, .styleguide .card--light-blue.product-card:hover .card__image::after, .styleguide .card--light-blue.add-new--product:hover .card__image::after, .styleguide .card--light-blue.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--light-blue.card--product-add .card__body, .styleguide .card--light-blue.add-new--product .card__body, .styleguide .card--light-blue.card--product-add .add-new--product > div, .styleguide .card--light-blue.add-new--product .add-new--product > div, .styleguide .card--light-blue.card--product-add .video-card > div:nth-child(2), .styleguide .card--light-blue.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #548bed; }
.styleguide .card--light-blue .card__body, .styleguide .card--light-blue .add-new--product > div, .styleguide .card--light-blue .video-card > div:nth-child(2) {
background-color: #82aaf2;
border-color: #548bed; }
.styleguide .card--light-blue .card__body h2, .styleguide .card--light-blue .add-new--product > div h2, .styleguide .card--light-blue .video-card > div:nth-child(2) h2, .styleguide .card--light-blue .card__body p, .styleguide .card--light-blue .add-new--product > div p, .styleguide .card--light-blue .video-card > div:nth-child(2) p, .styleguide .card--light-blue .card__body span, .styleguide .card--light-blue .add-new--product > div span, .styleguide .card--light-blue .video-card > div:nth-child(2) span, .styleguide .card--light-blue .card__body i, .styleguide .card--light-blue .add-new--product > div i, .styleguide .card--light-blue .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--light-blue .card__body h2, body.dark-mode .styleguide .card--light-blue .add-new--product > div h2, body.dark-mode .styleguide .card--light-blue .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--light-blue .card__body p, body.dark-mode .styleguide .card--light-blue .add-new--product > div p, body.dark-mode .styleguide .card--light-blue .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--light-blue .card__body span, body.dark-mode .styleguide .card--light-blue .add-new--product > div span, body.dark-mode .styleguide .card--light-blue .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--light-blue .card__body i, body.dark-mode .styleguide .card--light-blue .add-new--product > div i, body.dark-mode .styleguide .card--light-blue .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--light-blue .card__body .color--grey-darker, body.dark-mode .styleguide .card--light-blue .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--light-blue .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--niet-actief {
background-color: #eb3d3d;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--niet-actief.card--product:hover .card__body, .styleguide .card--niet-actief.product-card:hover .card__body, .styleguide .card--niet-actief.add-new--product:hover .card__body, .styleguide .card--niet-actief.video-card:hover .card__body, .styleguide .card--niet-actief.card--product:hover .add-new--product > div, .styleguide .card--niet-actief.product-card:hover .add-new--product > div, .styleguide .card--niet-actief.add-new--product:hover .add-new--product > div, .styleguide .card--niet-actief.video-card:hover .add-new--product > div, .styleguide .card--niet-actief.card--product:hover .video-card > div:nth-child(2), .styleguide .card--niet-actief.product-card:hover .video-card > div:nth-child(2), .styleguide .card--niet-actief.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--niet-actief.video-card:hover .video-card > div:nth-child(2) {
background-color: #f06b6b;
border-color: #e82626; }
.styleguide .card--niet-actief.card--product:hover .card__image::after, .styleguide .card--niet-actief.product-card:hover .card__image::after, .styleguide .card--niet-actief.add-new--product:hover .card__image::after, .styleguide .card--niet-actief.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--niet-actief.card--product-add .card__body, .styleguide .card--niet-actief.add-new--product .card__body, .styleguide .card--niet-actief.card--product-add .add-new--product > div, .styleguide .card--niet-actief.add-new--product .add-new--product > div, .styleguide .card--niet-actief.card--product-add .video-card > div:nth-child(2), .styleguide .card--niet-actief.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #ed5454; }
.styleguide .card--niet-actief .card__body, .styleguide .card--niet-actief .add-new--product > div, .styleguide .card--niet-actief .video-card > div:nth-child(2) {
background-color: #f28282;
border-color: #ed5454; }
.styleguide .card--niet-actief .card__body h2, .styleguide .card--niet-actief .add-new--product > div h2, .styleguide .card--niet-actief .video-card > div:nth-child(2) h2, .styleguide .card--niet-actief .card__body p, .styleguide .card--niet-actief .add-new--product > div p, .styleguide .card--niet-actief .video-card > div:nth-child(2) p, .styleguide .card--niet-actief .card__body span, .styleguide .card--niet-actief .add-new--product > div span, .styleguide .card--niet-actief .video-card > div:nth-child(2) span, .styleguide .card--niet-actief .card__body i, .styleguide .card--niet-actief .add-new--product > div i, .styleguide .card--niet-actief .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--niet-actief .card__body h2, body.dark-mode .styleguide .card--niet-actief .add-new--product > div h2, body.dark-mode .styleguide .card--niet-actief .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--niet-actief .card__body p, body.dark-mode .styleguide .card--niet-actief .add-new--product > div p, body.dark-mode .styleguide .card--niet-actief .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--niet-actief .card__body span, body.dark-mode .styleguide .card--niet-actief .add-new--product > div span, body.dark-mode .styleguide .card--niet-actief .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--niet-actief .card__body i, body.dark-mode .styleguide .card--niet-actief .add-new--product > div i, body.dark-mode .styleguide .card--niet-actief .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--niet-actief .card__body .color--grey-darker, body.dark-mode .styleguide .card--niet-actief .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--niet-actief .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--actief {
background-color: #5ccf59;
color: #222222; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--actief.card--product:hover .card__body, .styleguide .card--actief.product-card:hover .card__body, .styleguide .card--actief.add-new--product:hover .card__body, .styleguide .card--actief.video-card:hover .card__body, .styleguide .card--actief.card--product:hover .add-new--product > div, .styleguide .card--actief.product-card:hover .add-new--product > div, .styleguide .card--actief.add-new--product:hover .add-new--product > div, .styleguide .card--actief.video-card:hover .add-new--product > div, .styleguide .card--actief.card--product:hover .video-card > div:nth-child(2), .styleguide .card--actief.product-card:hover .video-card > div:nth-child(2), .styleguide .card--actief.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--actief.video-card:hover .video-card > div:nth-child(2) {
background-color: #83da80;
border-color: #48c945; }
.styleguide .card--actief.card--product:hover .card__image::after, .styleguide .card--actief.product-card:hover .card__image::after, .styleguide .card--actief.add-new--product:hover .card__image::after, .styleguide .card--actief.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--actief.card--product-add .card__body, .styleguide .card--actief.add-new--product .card__body, .styleguide .card--actief.card--product-add .add-new--product > div, .styleguide .card--actief.add-new--product .add-new--product > div, .styleguide .card--actief.card--product-add .video-card > div:nth-child(2), .styleguide .card--actief.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #6fd56c; }
.styleguide .card--actief .card__body, .styleguide .card--actief .add-new--product > div, .styleguide .card--actief .video-card > div:nth-child(2) {
background-color: #96e094;
border-color: #6fd56c; }
.styleguide .card--actief .card__body h2, .styleguide .card--actief .add-new--product > div h2, .styleguide .card--actief .video-card > div:nth-child(2) h2, .styleguide .card--actief .card__body p, .styleguide .card--actief .add-new--product > div p, .styleguide .card--actief .video-card > div:nth-child(2) p, .styleguide .card--actief .card__body span, .styleguide .card--actief .add-new--product > div span, .styleguide .card--actief .video-card > div:nth-child(2) span, .styleguide .card--actief .card__body i, .styleguide .card--actief .add-new--product > div i, .styleguide .card--actief .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--actief .card__body h2, body.dark-mode .styleguide .card--actief .add-new--product > div h2, body.dark-mode .styleguide .card--actief .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--actief .card__body p, body.dark-mode .styleguide .card--actief .add-new--product > div p, body.dark-mode .styleguide .card--actief .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--actief .card__body span, body.dark-mode .styleguide .card--actief .add-new--product > div span, body.dark-mode .styleguide .card--actief .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--actief .card__body i, body.dark-mode .styleguide .card--actief .add-new--product > div i, body.dark-mode .styleguide .card--actief .video-card > div:nth-child(2) i {
color: #222222; }
body.dark-mode .styleguide .card--actief .card__body .color--grey-darker, body.dark-mode .styleguide .card--actief .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--actief .video-card > div:nth-child(2) .color--grey-darker {
color: #222222 !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--vimeo {
background-color: #0176a3;
color: #ffffff; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--vimeo.card--product:hover .card__body, .styleguide .card--vimeo.product-card:hover .card__body, .styleguide .card--vimeo.add-new--product:hover .card__body, .styleguide .card--vimeo.video-card:hover .card__body, .styleguide .card--vimeo.card--product:hover .add-new--product > div, .styleguide .card--vimeo.product-card:hover .add-new--product > div, .styleguide .card--vimeo.add-new--product:hover .add-new--product > div, .styleguide .card--vimeo.video-card:hover .add-new--product > div, .styleguide .card--vimeo.card--product:hover .video-card > div:nth-child(2), .styleguide .card--vimeo.product-card:hover .video-card > div:nth-child(2), .styleguide .card--vimeo.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--vimeo.video-card:hover .video-card > div:nth-child(2) {
background-color: #029bd6;
border-color: #01648a; }
.styleguide .card--vimeo.card--product:hover .card__image::after, .styleguide .card--vimeo.product-card:hover .card__image::after, .styleguide .card--vimeo.add-new--product:hover .card__image::after, .styleguide .card--vimeo.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--vimeo.card--product-add .card__body, .styleguide .card--vimeo.add-new--product .card__body, .styleguide .card--vimeo.card--product-add .add-new--product > div, .styleguide .card--vimeo.add-new--product .add-new--product > div, .styleguide .card--vimeo.card--product-add .video-card > div:nth-child(2), .styleguide .card--vimeo.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #0288bc; }
.styleguide .card--vimeo .card__body, .styleguide .card--vimeo .add-new--product > div, .styleguide .card--vimeo .video-card > div:nth-child(2) {
background-color: #02ADEF;
border-color: #0288bc; }
.styleguide .card--vimeo .card__body h2, .styleguide .card--vimeo .add-new--product > div h2, .styleguide .card--vimeo .video-card > div:nth-child(2) h2, .styleguide .card--vimeo .card__body p, .styleguide .card--vimeo .add-new--product > div p, .styleguide .card--vimeo .video-card > div:nth-child(2) p, .styleguide .card--vimeo .card__body span, .styleguide .card--vimeo .add-new--product > div span, .styleguide .card--vimeo .video-card > div:nth-child(2) span, .styleguide .card--vimeo .card__body i, .styleguide .card--vimeo .add-new--product > div i, .styleguide .card--vimeo .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--vimeo .card__body h2, body.dark-mode .styleguide .card--vimeo .add-new--product > div h2, body.dark-mode .styleguide .card--vimeo .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--vimeo .card__body p, body.dark-mode .styleguide .card--vimeo .add-new--product > div p, body.dark-mode .styleguide .card--vimeo .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--vimeo .card__body span, body.dark-mode .styleguide .card--vimeo .add-new--product > div span, body.dark-mode .styleguide .card--vimeo .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--vimeo .card__body i, body.dark-mode .styleguide .card--vimeo .add-new--product > div i, body.dark-mode .styleguide .card--vimeo .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--vimeo .card__body .color--grey-darker, body.dark-mode .styleguide .card--vimeo .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--vimeo .video-card > div:nth-child(2) .color--grey-darker {
color: #ffffff !important; }
.styleguide .card, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
position: relative;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
max-width: 100%;
background-clip: border-box;
display: flex;
margin-bottom: .25rem;
/* VARIANT:
- product card | .card--product
- product-add | .card--product-add
*/
/* product add/toevoegen card */
/* einde product card */
/* Video card */
/* einde product card */ }
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
position: relative;
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
background-color: #eeeeee; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card img, .styleguide .product-card img, .styleguide .add-new--product img, .styleguide .video-card img {
height: 145px; } }
.styleguide .card__group-container {
padding: 1.5rem 2rem;
border: 1px solid #eeeeee; }
.styleguide .card__image {
position: relative; }
.styleguide .card__image::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff; }
body.dark-mode .styleguide .card__body, body.dark-mode .styleguide .add-new--product > div, body.dark-mode .styleguide .video-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .card__body h2, body.dark-mode .styleguide .add-new--product > div h2, body.dark-mode .styleguide .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card__body p, body.dark-mode .styleguide .add-new--product > div p, body.dark-mode .styleguide .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card__body span, body.dark-mode .styleguide .add-new--product > div span, body.dark-mode .styleguide .video-card > div:nth-child(2) span {
color: #222222; }
.styleguide .card__body .row, .styleguide .add-new--product > div .row, .styleguide .video-card > div:nth-child(2) .row {
flex-wrap: nowrap; }
.styleguide .card__body p, .styleguide .add-new--product > div p, .styleguide .video-card > div:nth-child(2) p {
flex-grow: 0;
flex-shrink: 1; }
.styleguide .card__body h2, .styleguide .add-new--product > div h2, .styleguide .video-card > div:nth-child(2) h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .card__body__contractperiode {
flex-shrink: 0; }
.styleguide .card__body__icon .fa, .styleguide .card__body__icon .fas {
font-size: .75rem;
margin-left: .5rem; }
.styleguide .card--product-add, .styleguide .add-new--product, .styleguide .card--product, .styleguide .product-card, .styleguide .add-new--product, .styleguide .video-card {
cursor: pointer; }
.styleguide .card--product-add > .card__body, .styleguide .add-new--product > .card__body, .styleguide .add-new--product > div, .styleguide .video-card.card--product-add > div:nth-child(2), .styleguide .video-card.add-new--product > div:nth-child(2), .styleguide .card--product > .card__body, .styleguide .product-card > .card__body, .styleguide .add-new--product > .card__body, .styleguide .video-card > .card__body, .styleguide .add-new--product > div, .styleguide .video-card > div:nth-child(2) {
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .card__productnr {
bottom: 3.5rem;
left: 1.25rem;
position: absolute;
color: #ffffff;
z-index: 1; }
.styleguide .card__price {
bottom: .75rem;
left: 0;
position: absolute;
padding: .5rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: #ffffff;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
z-index: 1; }
.styleguide .card__price--youtube {
background-color: #b30100;
color: #ffffff; }
.styleguide .card--product-add .card__body, .styleguide .add-new--product .card__body, .styleguide .card--product-add .add-new--product > div, .styleguide .add-new--product > div, .styleguide .card--product-add .video-card > div:nth-child(2), .styleguide .add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
min-height: 250px;
flex-direction: column; }
.styleguide .card--product-add .card__body i, .styleguide .add-new--product .card__body i, .styleguide .card--product-add .add-new--product > div i, .styleguide .add-new--product > div i, .styleguide .card--product-add .video-card > div:nth-child(2) i, .styleguide .add-new--product .video-card > div:nth-child(2) i {
font-size: 1.25rem; }
.styleguide .card--product-add .card__body h2, .styleguide .add-new--product .card__body h2, .styleguide .card--product-add .add-new--product > div h2, .styleguide .add-new--product > div h2, .styleguide .card--product-add .video-card > div:nth-child(2) h2, .styleguide .add-new--product .video-card > div:nth-child(2) h2 {
margin: 1rem 0 0 0; }
.styleguide .card--product-add .card__body div, .styleguide .add-new--product .card__body div, .styleguide .card--product-add .add-new--product > div div, .styleguide .add-new--product > div div, .styleguide .card--product-add .video-card > div:nth-child(2) div, .styleguide .add-new--product .video-card > div:nth-child(2) div {
text-align: center; }
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
overflow: hidden;
background: #8c8c8c;
position: relative;
margin-bottom: -4px;
aspect-ratio: 16 / 9; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #ddd; }
@supports not (aspect-ratio: 16/9) {
.styleguide .card--video__image, .styleguide .video-card > div:nth-child(1) {
padding-top: 56.25%; }
.styleguide .card--video__image img, .styleguide .video-card > div:nth-child(1) img {
height: 100%; } }
.styleguide .card--video__folder {
position: absolute;
bottom: 1.25rem;
left: 1.5rem;
color: #222222;
z-index: 1; }
body.dark-mode .styleguide .card--video__folder {
color: #222222; }
.styleguide .card--video__folder i {
font-size: 2rem;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); }
.styleguide .card--youtube.card--product:hover .card__body, .styleguide .card--youtube.product-card:hover .card__body, .styleguide .card--youtube.add-new--product:hover .card__body, .styleguide .card--youtube.video-card:hover .card__body, .styleguide .card--youtube.card--product:hover .add-new--product > div, .styleguide .card--youtube.product-card:hover .add-new--product > div, .styleguide .card--youtube.add-new--product:hover .add-new--product > div, .styleguide .card--youtube.video-card:hover .add-new--product > div, .styleguide .card--youtube.card--product:hover .video-card > div:nth-child(2), .styleguide .card--youtube.product-card:hover .video-card > div:nth-child(2), .styleguide .card--youtube.add-new--product:hover .video-card > div:nth-child(2), .styleguide .card--youtube.video-card:hover .video-card > div:nth-child(2) {
background-color: #e60200;
border-color: #990100; }
.styleguide .card--youtube.card--product:hover .card__image::after, .styleguide .card--youtube.product-card:hover .card__image::after, .styleguide .card--youtube.add-new--product:hover .card__image::after, .styleguide .card--youtube.video-card:hover .card__image::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .card--youtube.card--product-add .card__body, .styleguide .card--youtube.add-new--product .card__body, .styleguide .card--youtube.card--product-add .add-new--product > div, .styleguide .card--youtube.add-new--product .add-new--product > div, .styleguide .card--youtube.card--product-add .video-card > div:nth-child(2), .styleguide .card--youtube.add-new--product .video-card > div:nth-child(2) {
border-top: 1px solid #cc0200; }
.styleguide .card--youtube .card__body, .styleguide .card--youtube .add-new--product > div, .styleguide .card--youtube .video-card > div:nth-child(2) {
background-color: #FF0200;
border-color: #cc0200; }
.styleguide .card--youtube .card__body h2, .styleguide .card--youtube .add-new--product > div h2, .styleguide .card--youtube .video-card > div:nth-child(2) h2, .styleguide .card--youtube .card__body p, .styleguide .card--youtube .add-new--product > div p, .styleguide .card--youtube .video-card > div:nth-child(2) p, .styleguide .card--youtube .card__body span, .styleguide .card--youtube .add-new--product > div span, .styleguide .card--youtube .video-card > div:nth-child(2) span, .styleguide .card--youtube .card__body i, .styleguide .card--youtube .add-new--product > div i, .styleguide .card--youtube .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--youtube .card__body h2, body.dark-mode .styleguide .card--youtube .add-new--product > div h2, body.dark-mode .styleguide .card--youtube .video-card > div:nth-child(2) h2, body.dark-mode .styleguide .card--youtube .card__body p, body.dark-mode .styleguide .card--youtube .add-new--product > div p, body.dark-mode .styleguide .card--youtube .video-card > div:nth-child(2) p, body.dark-mode .styleguide .card--youtube .card__body span, body.dark-mode .styleguide .card--youtube .add-new--product > div span, body.dark-mode .styleguide .card--youtube .video-card > div:nth-child(2) span, body.dark-mode .styleguide .card--youtube .card__body i, body.dark-mode .styleguide .card--youtube .add-new--product > div i, body.dark-mode .styleguide .card--youtube .video-card > div:nth-child(2) i {
color: #ffffff; }
body.dark-mode .styleguide .card--youtube .card__body .color--grey-darker, body.dark-mode .styleguide .card--youtube .add-new--product > div .color--grey-darker, body.dark-mode .styleguide .card--youtube .video-card > div:nth-child(2) .color--grey-darker {
color: #ffffff !important; }
.styleguide .product-card {
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .product-card h2 {
border-bottom: none;
margin-bottom: 0;
font-size: .875rem; }
.styleguide .product-card:hover > div:nth-child(1)::after {
background: linear-gradient(rgba(0, 0, 0, 0), 55%, black); }
.styleguide .product-card:hover > div:nth-child(2) {
background-color: #e6e6e6;
border-color: #bbbbbb; }
.styleguide .product-card > div:nth-child(1) {
position: relative; }
.styleguide .product-card > div:nth-child(1)::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34);
background: linear-gradient(rgba(0, 0, 0, 0), 65%, black); }
.styleguide .product-card > div:nth-child(2) {
position: relative;
flex: 1 0 auto;
padding: 1.25rem;
border: 1px solid #eeeeee;
border-top: 0;
background-color: #ffffff;
background-color: #f3f3f3;
border-color: #eeeeee; }
body.dark-mode .styleguide .product-card > div:nth-child(2) {
color: #222222; }
body.dark-mode .styleguide .product-card > div:nth-child(2) h2, body.dark-mode .styleguide .product-card > div:nth-child(2) p, body.dark-mode .styleguide .product-card > div:nth-child(2) span {
color: #222222; }
.styleguide .add-new--product {
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .add-new--product > div {
background-color: #f3f3f3;
border-color: #d5d5d5; }
.styleguide .add-new--product i, .styleguide .add-new--product h2 {
cursor: pointer; }
.styleguide .add-new--product:hover > div {
background-color: #e6e6e6;
border-color: #bbbbbb; }
.styleguide .video-card {
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .video-card:hover > div:nth-child(2) {
background-color: #e6e6e6;
border-color: #bbbbbb; }
.styleguide .video-card > div:nth-child(2) {
background-color: #f3f3f3;
border-color: #eeeeee; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .list-group {
display: inline-flex;
flex-direction: column;
flex: 1 0;
margin: 0 0 1px;
padding: 0 0;
/* .listgroup__item */
/* Tegels
Let op! Voor de tegels zelf is er een aparte tiles sheet. tiles.scss
Dit is dus puur een wrapper voor de tegels.
*/
/* VERKOOP
statistische korte lijsten met info over omzet en verkoop data
.list-group__verkoop
*/
/* ALGEMEEN: Kleur listgroup genereren
.list-group--{color}
*/ }
.styleguide .list-group * {
color: #3c3c3c; }
body.dark-mode .styleguide .list-group * {
color: #e6e6e6; }
.styleguide .list-group__item {
position: relative;
flex: 1 1;
padding: 1rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125);
font-size: 1rem;
font-weight: 400;
/* Wrapper voor titel met eventuele icoon aan de rechterkant. */
/* Grote iconen / Tegels */
/* Onderliggende link items */
/* list-group__item__number */
/* list-group__item__label | Content */
/* list-group__item__icon | pijl icoon */ }
body.dark-mode .styleguide .list-group__item {
background-color: #222222;
border: 1px solid #555555; }
.styleguide .list-group__item:first-child {
display: flex;
justify-content: space-between;
background-color: #3c3c3c;
flex-shrink: 1;
flex-grow: 0;
/* Titel, Icoon */ }
body.dark-mode .styleguide .list-group__item:first-child {
background-color: #151515; }
.styleguide .list-group__item:first-child span, .styleguide .list-group__item:first-child i {
color: #e6e6e6;
font-size: 1.125rem;
font-weight: 600; }
.styleguide .list-group__item:nth-of-type(2) {
/* Tegel */ }
.styleguide .list-group__item:nth-of-type(2) span, .styleguide .list-group__item:nth-of-type(2) i {
font-size: 2rem;
font-weight: 600;
padding: .5rem; }
.styleguide .list-group__item:nth-of-type(2).tiles span {
font-size: 1rem;
font-weight: 400; }
.styleguide .list-group__item__link {
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .list-group__item__link:hover {
background-color: #f3f3f3; }
body.dark-mode .styleguide .list-group__item__link:hover {
background-color: #3c3c3c; }
.styleguide .list-group__item__link--unavailable {
background-color: #fafafa;
opacity: 0.5; }
.styleguide .list-group__item__number {
align-items: center;
min-width: 3rem;
text-align: center;
font-size: 1.25rem;
font-weight: 600; }
.styleguide .list-group__item__label {
flex-grow: 1;
margin: .25rem 1rem;
font-size: .875rem;
line-height: .875rem; }
.styleguide .list-group__item__label em {
display: block;
font-size: .75rem;
margin: .5rem 0 0; }
.styleguide .list-group__item__icon {
color: #bbbbbb;
font-size: .875rem;
line-height: .875rem; }
.styleguide .list-group--tiles {
/* list-group--tiles -> list-group__item */
/* list-group--tiles -> list-group__item:first-child */ }
.styleguide .list-group--tiles .list-group__item:nth-of-type(2) {
display: grid;
padding-right: 1px; }
.styleguide .list-group--tiles .list-group__item:nth-of-type(2) .list-group__item__price {
font-size: 1.75rem;
font-weight: 600; }
.styleguide .list-group--tiles .list-group__item:nth-of-type(2) .list-group__item__price--decimal {
font-size: 1.25rem;
font-weight: 600;
padding: 0; }
.styleguide .list-group--tiles .list-group__item:nth-of-type(2) .list-group__item__vat {
font-size: .875rem; }
.styleguide .list-group--tiles .list-group__item:first-child {
flex-grow: 0; }
.styleguide .list-group__verkoop {
/* .list-group__verkoop -> list-group__item:first-child
Titel
*/
/* .list-group__verkoop -> list-group__verkoop__item
Content
*/ }
.styleguide .list-group__verkoop:hover li {
background-color: rgba(243, 243, 243, 0.5); }
body.dark-mode .styleguide .list-group__verkoop:hover li {
background-color: #3c3c3c; }
.styleguide .list-group__verkoop .list-group__item:first-child {
flex-grow: 0;
background-color: #eeeeee; }
body.dark-mode .styleguide .list-group__verkoop .list-group__item:first-child {
background-color: #151515; }
.styleguide .list-group__verkoop .list-group__item:first-child span {
color: #555555;
font-weight: 400;
font-size: 1rem; }
body.dark-mode .styleguide .list-group__verkoop .list-group__item:first-child span {
color: #e6e6e6; }
.styleguide .list-group__verkoop .list-group__verkoop__item {
align-items: center; }
.styleguide .list-group__verkoop .list-group__verkoop__item h2, .styleguide .list-group__verkoop .list-group__verkoop__item h3 {
margin-bottom: 0;
padding: 0; }
.styleguide .list-group__verkoop .list-group__verkoop__item h2 span, .styleguide .list-group__verkoop .list-group__verkoop__item h3 span {
font-size: 0.75em; }
.styleguide .list-group__verkoop .list-group__verkoop__item span {
color: #555555;
font-weight: 600;
font-size: 1.5rem;
padding: .5rem 0 0; }
body.dark-mode .styleguide .list-group__verkoop .list-group__verkoop__item span {
color: #e6e6e6; }
.styleguide .list-group__verkoop .list-group__verkoop__item i {
font-size: 1.25rem; }
.styleguide .list-group--white .list-group__item:first-child {
background-color: #ffffff; }
.styleguide .list-group--white .list-group__item:nth-of-type(2) span, .styleguide .list-group--white .list-group__item:nth-of-type(2) i {
color: #ffffff; }
.styleguide .list-group--white .list-group__item__number, .styleguide .list-group--white .list-group__item__label em {
color: #ffffff; }
.styleguide .list-group--black .list-group__item:first-child {
background-color: #222222; }
.styleguide .list-group--black .list-group__item:nth-of-type(2) span, .styleguide .list-group--black .list-group__item:nth-of-type(2) i {
color: #222222; }
.styleguide .list-group--black .list-group__item__number, .styleguide .list-group--black .list-group__item__label em {
color: #222222; }
.styleguide .list-group--cyaan .list-group__item:first-child {
background-color: #6ebfce; }
.styleguide .list-group--cyaan .list-group__item:nth-of-type(2) span, .styleguide .list-group--cyaan .list-group__item:nth-of-type(2) i {
color: #6ebfce; }
.styleguide .list-group--cyaan .list-group__item__number, .styleguide .list-group--cyaan .list-group__item__label em {
color: #6ebfce; }
.styleguide .list-group--grey .list-group__item:first-child {
background-color: #f3f3f3; }
.styleguide .list-group--grey .list-group__item:nth-of-type(2) span, .styleguide .list-group--grey .list-group__item:nth-of-type(2) i {
color: #f3f3f3; }
.styleguide .list-group--grey .list-group__item__number, .styleguide .list-group--grey .list-group__item__label em {
color: #f3f3f3; }
.styleguide .list-group--grey-70 .list-group__item:first-child {
background-color: #d5d5d5; }
.styleguide .list-group--grey-70 .list-group__item:nth-of-type(2) span, .styleguide .list-group--grey-70 .list-group__item:nth-of-type(2) i {
color: #d5d5d5; }
.styleguide .list-group--grey-70 .list-group__item__number, .styleguide .list-group--grey-70 .list-group__item__label em {
color: #d5d5d5; }
.styleguide .list-group--grey-dark .list-group__item:first-child {
background-color: #a2a2a2; }
.styleguide .list-group--grey-dark .list-group__item:nth-of-type(2) span, .styleguide .list-group--grey-dark .list-group__item:nth-of-type(2) i {
color: #a2a2a2; }
.styleguide .list-group--grey-dark .list-group__item__number, .styleguide .list-group--grey-dark .list-group__item__label em {
color: #a2a2a2; }
.styleguide .list-group--grey-darker .list-group__item:first-child {
background-color: #6f6f6f; }
.styleguide .list-group--grey-darker .list-group__item:nth-of-type(2) span, .styleguide .list-group--grey-darker .list-group__item:nth-of-type(2) i {
color: #6f6f6f; }
.styleguide .list-group--grey-darker .list-group__item__number, .styleguide .list-group--grey-darker .list-group__item__label em {
color: #6f6f6f; }
.styleguide .list-group--primary .list-group__item:first-child {
background-color: #33566c; }
body.dark-mode .styleguide .list-group--primary .list-group__item:first-child {
background-color: #46a0d9; }
.styleguide .list-group--primary .list-group__item:nth-of-type(2) span, .styleguide .list-group--primary .list-group__item:nth-of-type(2) i {
color: #33566c; }
body.dark-mode .styleguide .list-group--primary .list-group__item:nth-of-type(2) span, body.dark-mode .styleguide .list-group--primary .list-group__item:nth-of-type(2) i {
color: #46a0d9; }
.styleguide .list-group--primary .list-group__item__number, .styleguide .list-group--primary .list-group__item__label em {
color: #33566c; }
body.dark-mode .styleguide .list-group--primary .list-group__item__number, body.dark-mode .styleguide .list-group--primary .list-group__item__label em {
color: #46a0d9; }
.styleguide .list-group--red .list-group__item:first-child {
background-color: #f28282; }
.styleguide .list-group--red .list-group__item:nth-of-type(2) span, .styleguide .list-group--red .list-group__item:nth-of-type(2) i {
color: #f28282; }
.styleguide .list-group--red .list-group__item__number, .styleguide .list-group--red .list-group__item__label em {
color: #f28282; }
.styleguide .list-group--red-dark .list-group__item:first-child {
background-color: #ed5454; }
.styleguide .list-group--red-dark .list-group__item:nth-of-type(2) span, .styleguide .list-group--red-dark .list-group__item:nth-of-type(2) i {
color: #ed5454; }
.styleguide .list-group--red-dark .list-group__item__number, .styleguide .list-group--red-dark .list-group__item__label em {
color: #ed5454; }
.styleguide .list-group--green .list-group__item:first-child {
background-color: #96e094; }
.styleguide .list-group--green .list-group__item:nth-of-type(2) span, .styleguide .list-group--green .list-group__item:nth-of-type(2) i {
color: #96e094; }
.styleguide .list-group--green .list-group__item__number, .styleguide .list-group--green .list-group__item__label em {
color: #96e094; }
.styleguide .list-group--green-darker .list-group__item:first-child {
background-color: #34aa31; }
.styleguide .list-group--green-darker .list-group__item:nth-of-type(2) span, .styleguide .list-group--green-darker .list-group__item:nth-of-type(2) i {
color: #34aa31; }
.styleguide .list-group--green-darker .list-group__item__number, .styleguide .list-group--green-darker .list-group__item__label em {
color: #34aa31; }
.styleguide .list-group--avocado .list-group__item:first-child {
background-color: #8eb03a; }
.styleguide .list-group--avocado .list-group__item:nth-of-type(2) span, .styleguide .list-group--avocado .list-group__item:nth-of-type(2) i {
color: #8eb03a; }
.styleguide .list-group--avocado .list-group__item__number, .styleguide .list-group--avocado .list-group__item__label em {
color: #8eb03a; }
.styleguide .list-group--yellow .list-group__item:first-child {
background-color: #f0f282; }
.styleguide .list-group--yellow .list-group__item:nth-of-type(2) span, .styleguide .list-group--yellow .list-group__item:nth-of-type(2) i {
color: #f0f282; }
.styleguide .list-group--yellow .list-group__item__number, .styleguide .list-group--yellow .list-group__item__label em {
color: #f0f282; }
.styleguide .list-group--yellow-darken .list-group__item:first-child {
background-color: #eaed54; }
.styleguide .list-group--yellow-darken .list-group__item:nth-of-type(2) span, .styleguide .list-group--yellow-darken .list-group__item:nth-of-type(2) i {
color: #eaed54; }
.styleguide .list-group--yellow-darken .list-group__item__number, .styleguide .list-group--yellow-darken .list-group__item__label em {
color: #eaed54; }
.styleguide .list-group--orange .list-group__item:first-child {
background-color: #cd8f17; }
.styleguide .list-group--orange .list-group__item:nth-of-type(2) span, .styleguide .list-group--orange .list-group__item:nth-of-type(2) i {
color: #cd8f17; }
.styleguide .list-group--orange .list-group__item__number, .styleguide .list-group--orange .list-group__item__label em {
color: #cd8f17; }
.styleguide .list-group--blue .list-group__item:first-child {
background-color: #79afe2; }
.styleguide .list-group--blue .list-group__item:nth-of-type(2) span, .styleguide .list-group--blue .list-group__item:nth-of-type(2) i {
color: #79afe2; }
.styleguide .list-group--blue .list-group__item__number, .styleguide .list-group--blue .list-group__item__label em {
color: #79afe2; }
.styleguide .list-group--light-blue .list-group__item:first-child {
background-color: #82aaf2; }
.styleguide .list-group--light-blue .list-group__item:nth-of-type(2) span, .styleguide .list-group--light-blue .list-group__item:nth-of-type(2) i {
color: #82aaf2; }
.styleguide .list-group--light-blue .list-group__item__number, .styleguide .list-group--light-blue .list-group__item__label em {
color: #82aaf2; }
.styleguide .list-group--niet-actief .list-group__item:first-child {
background-color: #f28282; }
.styleguide .list-group--niet-actief .list-group__item:nth-of-type(2) span, .styleguide .list-group--niet-actief .list-group__item:nth-of-type(2) i {
color: #f28282; }
.styleguide .list-group--niet-actief .list-group__item__number, .styleguide .list-group--niet-actief .list-group__item__label em {
color: #f28282; }
.styleguide .list-group--actief .list-group__item:first-child {
background-color: #96e094; }
.styleguide .list-group--actief .list-group__item:nth-of-type(2) span, .styleguide .list-group--actief .list-group__item:nth-of-type(2) i {
color: #96e094; }
.styleguide .list-group--actief .list-group__item__number, .styleguide .list-group--actief .list-group__item__label em {
color: #96e094; }
.styleguide .list-group--vimeo .list-group__item:first-child {
background-color: #02ADEF; }
.styleguide .list-group--vimeo .list-group__item:nth-of-type(2) span, .styleguide .list-group--vimeo .list-group__item:nth-of-type(2) i {
color: #02ADEF; }
.styleguide .list-group--vimeo .list-group__item__number, .styleguide .list-group--vimeo .list-group__item__label em {
color: #02ADEF; }
.styleguide .list-group--youtube .list-group__item:first-child {
background-color: #FF0200; }
.styleguide .list-group--youtube .list-group__item:nth-of-type(2) span, .styleguide .list-group--youtube .list-group__item:nth-of-type(2) i {
color: #FF0200; }
.styleguide .list-group--youtube .list-group__item__number, .styleguide .list-group--youtube .list-group__item__label em {
color: #FF0200; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
.styleguide .tiles {
display: grid;
grid-gap: 1px;
grid-template-columns: 100%;
background-color: #d5d5d5;
padding: 0;
margin: 0;
border: 1px solid #d5d5d5;
/* 2 kolommen vanaf 992px */
/* Tegel
.tiles__tile
*/ }
body.dark-mode .styleguide .tiles {
background-color: #555555;
border: 1px solid #555555; }
@media screen and (min-width: 992px) {
.styleguide .tiles {
grid-template-columns: 50% 50%; } }
.styleguide .tiles__tile {
background-color: white;
display: flex;
flex-grow: 1;
flex-flow: column;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
padding: 1.5rem;
min-height: 200px;
height: 100%;
/* ALGEMEEN: font color in tegels genereren
.tiles__tile--{color}
*/ }
body.dark-mode .styleguide .tiles__tile {
background-color: #222222; }
.styleguide .tiles__tile a {
font-size: 1.5rem;
font-weight: 500;
text-decoration: none; }
.styleguide .tiles__tile em {
display: block;
font-size: .75rem;
margin: 0 0 .5rem;
padding: 0; }
.styleguide .tiles__tile--white a, .styleguide .tiles__tile--white em, .styleguide .tiles__tile--white span, .styleguide .tiles__tile--white i {
color: #ffffff; }
.styleguide .tiles__tile--black a, .styleguide .tiles__tile--black em, .styleguide .tiles__tile--black span, .styleguide .tiles__tile--black i {
color: #222222; }
.styleguide .tiles__tile--cyaan a, .styleguide .tiles__tile--cyaan em, .styleguide .tiles__tile--cyaan span, .styleguide .tiles__tile--cyaan i {
color: #6ebfce; }
.styleguide .tiles__tile--grey a, .styleguide .tiles__tile--grey em, .styleguide .tiles__tile--grey span, .styleguide .tiles__tile--grey i {
color: #f3f3f3; }
.styleguide .tiles__tile--grey-70 a, .styleguide .tiles__tile--grey-70 em, .styleguide .tiles__tile--grey-70 span, .styleguide .tiles__tile--grey-70 i {
color: #d5d5d5; }
.styleguide .tiles__tile--grey-dark a, .styleguide .tiles__tile--grey-dark em, .styleguide .tiles__tile--grey-dark span, .styleguide .tiles__tile--grey-dark i {
color: #a2a2a2; }
.styleguide .tiles__tile--grey-darker a, .styleguide .tiles__tile--grey-darker em, .styleguide .tiles__tile--grey-darker span, .styleguide .tiles__tile--grey-darker i {
color: #6f6f6f; }
.styleguide .tiles__tile--primary a, .styleguide .tiles__tile--primary em, .styleguide .tiles__tile--primary span, .styleguide .tiles__tile--primary i {
color: #33566c; }
.styleguide .tiles__tile--red a, .styleguide .tiles__tile--red em, .styleguide .tiles__tile--red span, .styleguide .tiles__tile--red i {
color: #f28282; }
.styleguide .tiles__tile--red-dark a, .styleguide .tiles__tile--red-dark em, .styleguide .tiles__tile--red-dark span, .styleguide .tiles__tile--red-dark i {
color: #ed5454; }
.styleguide .tiles__tile--green a, .styleguide .tiles__tile--green em, .styleguide .tiles__tile--green span, .styleguide .tiles__tile--green i {
color: #96e094; }
.styleguide .tiles__tile--green-darker a, .styleguide .tiles__tile--green-darker em, .styleguide .tiles__tile--green-darker span, .styleguide .tiles__tile--green-darker i {
color: #34aa31; }
.styleguide .tiles__tile--avocado a, .styleguide .tiles__tile--avocado em, .styleguide .tiles__tile--avocado span, .styleguide .tiles__tile--avocado i {
color: #8eb03a; }
.styleguide .tiles__tile--yellow a, .styleguide .tiles__tile--yellow em, .styleguide .tiles__tile--yellow span, .styleguide .tiles__tile--yellow i {
color: #f0f282; }
.styleguide .tiles__tile--yellow-darken a, .styleguide .tiles__tile--yellow-darken em, .styleguide .tiles__tile--yellow-darken span, .styleguide .tiles__tile--yellow-darken i {
color: #eaed54; }
.styleguide .tiles__tile--orange a, .styleguide .tiles__tile--orange em, .styleguide .tiles__tile--orange span, .styleguide .tiles__tile--orange i {
color: #cd8f17; }
.styleguide .tiles__tile--blue a, .styleguide .tiles__tile--blue em, .styleguide .tiles__tile--blue span, .styleguide .tiles__tile--blue i {
color: #79afe2; }
.styleguide .tiles__tile--light-blue a, .styleguide .tiles__tile--light-blue em, .styleguide .tiles__tile--light-blue span, .styleguide .tiles__tile--light-blue i {
color: #82aaf2; }
.styleguide .tiles__tile--niet-actief a, .styleguide .tiles__tile--niet-actief em, .styleguide .tiles__tile--niet-actief span, .styleguide .tiles__tile--niet-actief i {
color: #f28282; }
.styleguide .tiles__tile--actief a, .styleguide .tiles__tile--actief em, .styleguide .tiles__tile--actief span, .styleguide .tiles__tile--actief i {
color: #96e094; }
.styleguide .tiles__tile--vimeo a, .styleguide .tiles__tile--vimeo em, .styleguide .tiles__tile--vimeo span, .styleguide .tiles__tile--vimeo i {
color: #02ADEF; }
.styleguide .tiles__tile--youtube a, .styleguide .tiles__tile--youtube em, .styleguide .tiles__tile--youtube span, .styleguide .tiles__tile--youtube i {
color: #FF0200; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .calendar__header {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: .75rem; }
.styleguide .calendar__number {
display: inline-flex;
justify-content: center;
align-items: center;
align-content: center;
border-radius: 0.5rem;
margin-right: 0.75rem;
background-color: #33566c;
height: 3.5rem;
width: 3.5rem; }
.styleguide .calendar__number span {
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5rem;
line-height: 1em;
font-weight: bold;
letter-spacing: -2px;
color: #ffffff; }
.styleguide .calendar__month {
margin: .6rem 0 0;
padding: 0; }
.styleguide .calendar__nav-wrapper {
align-self: flex-end;
flex: 0 0 150px; }
.styleguide .calendar__nav-wrapper i {
font-size: 1.75rem; }
.styleguide .calendar__nav-day {
flex-grow: 1;
text-transform: uppercase;
margin: 0 .75rem;
padding-bottom: 0; }
.styleguide .calendar__nav-arrow {
text-decoration: none;
margin-bottom: 0;
padding-bottom: 0; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .d-flex {
display: flex; }
.styleguide .align-items-start {
align-items: flex-start; }
.styleguide .align-items-center {
align-items: center; }
.styleguide .align-items-end {
align-items: flex-end; }
.styleguide .justify-content-center {
justify-content: center; }
.styleguide .justify-content-start {
justify-content: flex-start; }
.styleguide .justify-content-end {
justify-content: flex-end; }
.styleguide .flex-column {
flex-direction: column; }
.styleguide .flex-row, .styleguide .actionbar--variant-1 > div > div, .styleguide .actionbar--variant-2 > div > div, .styleguide .actionbar--variant-2 > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div:nth-child(2) > div:nth-child(1), .styleguide .table__video-title {
flex-direction: row; }
.styleguide .gap-1 {
gap: 0.25rem; }
.styleguide .gap-2 {
gap: 0.5rem; }
.styleguide .gap-3 {
gap: 0.75rem; }
.styleguide .gap-4 {
gap: 1rem; }
.styleguide .column, .styleguide .financieel-table > div > div:nth-of-type(2) > div {
display: flex;
flex-direction: column;
flex-wrap: wrap; }
.styleguide .column > div, .styleguide .financieel-table > div > div:nth-of-type(2) > div > div {
display: flex;
flex-grow: 0;
flex-shrink: 0;
margin: 0 0 1rem;
padding: 0.75rem;
align-items: flex-start; }
.styleguide .column > span, .styleguide .financieel-table > div > div:nth-of-type(2) > div > span {
display: flex;
flex-grow: 0;
flex-shrink: 0;
margin: 0 0 0.25rem;
align-items: space-between; }
.styleguide .row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
position: relative;
/* ipv space-between forceren dat het links wordt uitgelijnd */
/* Onderliggende div automatisch column */
/* Genereren van 12 kolommen */ }
.styleguide .row--start {
justify-content: start; }
.styleguide .row--end {
justify-content: flex-end; }
.styleguide .row--no-gap {
margin-bottom: 1rem; }
.styleguide .row > div {
display: flex;
flex-flow: column;
flex-grow: 1;
flex-shrink: 0;
flex: 0 0 100%;
margin: 0 0 1rem;
padding: 0.75rem;
box-sizing: border-box;
overflow: hidden; }
.styleguide .row > div.flex-grow, .styleguide .actionbar--variant-1.row > div, .styleguide .actionbar--variant-1 > div > div.row > div:nth-child(2), .styleguide .actionbar--variant-2.row > div, .styleguide .actionbar--variant-2 > div > div.row > div:nth-child(2), .styleguide .row > div.header__profiel__edit, .styleguide .row > div.header__profiel__contact {
flex-grow: 1; }
.styleguide .row > div.flex-shrink {
flex-shrink: 1; }
.styleguide .row > div.align-start {
align-items: flex-start; }
.styleguide .row > div.no-flex {
display: unset;
flex: unset; }
.styleguide .row--no-margin {
padding-left: 0;
padding-right: 0; }
.styleguide .row--no-margin > div {
padding-left: 0;
padding-right: 0; }
.styleguide .row--1 > div {
flex: 0 0 calc(100% / 1 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--1 > div {
flex: 0 0 100%; } }
.styleguide .row--1--no-gap {
margin-bottom: 1rem; }
.styleguide .row--1--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--1--no-gap > ul:nth-of-type(1) {
margin-right: 0; }
.styleguide .row--2 > div {
flex: 0 0 calc(100% / 2 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--2 > div {
flex: 0 0 100%; } }
.styleguide .row--2--no-gap {
margin-bottom: 1rem; }
.styleguide .row--2--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--2--no-gap > ul:nth-of-type(2) {
margin-right: 0; }
.styleguide .row--3 > div {
flex: 0 0 calc(100% / 3 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--3 > div {
flex: 0 0 100%; } }
.styleguide .row--3--no-gap {
margin-bottom: 1rem; }
.styleguide .row--3--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--3--no-gap > ul:nth-of-type(3) {
margin-right: 0; }
.styleguide .row--4 > div {
flex: 0 0 calc(100% / 4 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--4 > div {
flex: 0 0 100%; } }
.styleguide .row--4--no-gap {
margin-bottom: 1rem; }
.styleguide .row--4--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--4--no-gap > ul:nth-of-type(4) {
margin-right: 0; }
.styleguide .row--5 > div {
flex: 0 0 calc(100% / 5 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--5 > div {
flex: 0 0 100%; } }
.styleguide .row--5--no-gap {
margin-bottom: 1rem; }
.styleguide .row--5--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--5--no-gap > ul:nth-of-type(5) {
margin-right: 0; }
.styleguide .row--6 > div {
flex: 0 0 calc(100% / 6 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--6 > div {
flex: 0 0 100%; } }
.styleguide .row--6--no-gap {
margin-bottom: 1rem; }
.styleguide .row--6--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--6--no-gap > ul:nth-of-type(6) {
margin-right: 0; }
.styleguide .row--7 > div {
flex: 0 0 calc(100% / 7 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--7 > div {
flex: 0 0 100%; } }
.styleguide .row--7--no-gap {
margin-bottom: 1rem; }
.styleguide .row--7--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--7--no-gap > ul:nth-of-type(7) {
margin-right: 0; }
.styleguide .row--8 > div {
flex: 0 0 calc(100% / 8 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--8 > div {
flex: 0 0 100%; } }
.styleguide .row--8--no-gap {
margin-bottom: 1rem; }
.styleguide .row--8--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--8--no-gap > ul:nth-of-type(8) {
margin-right: 0; }
.styleguide .row--9 > div {
flex: 0 0 calc(100% / 9 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--9 > div {
flex: 0 0 100%; } }
.styleguide .row--9--no-gap {
margin-bottom: 1rem; }
.styleguide .row--9--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--9--no-gap > ul:nth-of-type(9) {
margin-right: 0; }
.styleguide .row--10 > div {
flex: 0 0 calc(100% / 10 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--10 > div {
flex: 0 0 100%; } }
.styleguide .row--10--no-gap {
margin-bottom: 1rem; }
.styleguide .row--10--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--10--no-gap > ul:nth-of-type(10) {
margin-right: 0; }
.styleguide .row--11 > div {
flex: 0 0 calc(100% / 11 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--11 > div {
flex: 0 0 100%; } }
.styleguide .row--11--no-gap {
margin-bottom: 1rem; }
.styleguide .row--11--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--11--no-gap > ul:nth-of-type(11) {
margin-right: 0; }
.styleguide .row--12 > div {
flex: 0 0 calc(100% / 12 - 0.5rem); }
@media screen and (max-width: 1600px) {
.styleguide .row--12 > div {
flex: 0 0 100%; } }
.styleguide .row--12--no-gap {
margin-bottom: 1rem; }
.styleguide .row--12--no-gap > ul {
margin-right: -1px;
padding-right: 0;
padding-left: 0; }
.styleguide .row--12--no-gap > ul:nth-of-type(12) {
margin-right: 0; }
.styleguide .flex-row, .styleguide .actionbar--variant-1 > div > div, .styleguide .actionbar--variant-2 > div > div, .styleguide .actionbar--variant-2 > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div:nth-child(2) > div:nth-child(1), .styleguide .table__video-title {
display: flex;
flex-direction: row;
max-width: 100%; }
.styleguide .flex-column {
display: flex;
flex-direction: column; }
.styleguide .space-between {
flex-flow: row wrap;
justify-content: space-between; }
.styleguide .inline-space-between {
display: inline-flex;
flex: 0 1 100%;
flex-flow: row wrap;
justify-content: space-between; }
.styleguide .flex-center {
display: flex;
justify-content: center;
align-items: center; }
.styleguide .flex-start {
display: flex;
justify-content: flex-start; }
.styleguide .flex-end, .styleguide .actionbar--variant-1 > div > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div > div:nth-child(2) {
display: flex;
justify-content: flex-end; }
.styleguide .flex-grow, .styleguide .actionbar--variant-1 > div, .styleguide .actionbar--variant-1 > div > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div, .styleguide .actionbar--variant-2 > div > div > div:nth-child(2), .styleguide .header__profiel__edit, .styleguide .header__profiel__contact {
flex: 1 0; }
.styleguide .flex-shrink {
flex: 0 1; }
.styleguide .align-start {
align-items: flex-start;
place-self: flex-start; }
.styleguide .align-center, .styleguide .actionbar--variant-1 > div > div, .styleguide .actionbar--variant-1 > div > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div, .styleguide .actionbar--variant-2 > div > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div:nth-child(2), .styleguide .actionbar--variant-2 > div > div:nth-child(2) > div:nth-child(1) {
align-items: center; }
.styleguide .align-end {
align-items: flex-end; }
.styleguide .row-align-center {
display: flex;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.5rem; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .formgroup__input {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c;
background-color: #ffffff;
border: 1px solid #d5d5d5;
padding: .5rem .75rem;
flex: 0 1 65%;
max-height: 2rem;
box-sizing: border-box;
align-items: center;
z-index: 1;
/* SELECT */
/* SEARCH */
/* PLACEHOLDER */ }
.styleguide .formgroup__input:focus {
background-color: #ffffff; }
.styleguide .formgroup__input.error {
border: 1px solid #ed5454; }
.styleguide .formgroup__input > option {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c; }
.styleguide .formgroup__input--search {
height: 2rem; }
.styleguide .formgroup__input[type=date] {
padding: .25rem .75rem;
height: 2rem;
color: #6f6f6f;
flex: 0 1 calc(50% + 7px); }
.styleguide .formgroup__input[type=date]:invalid::-webkit-datetime-edit {
color: #6f6f6f; }
.styleguide .formgroup__input::placeholder {
color: #6f6f6f; }
.styleguide .formgroup__input--wrapper {
position: relative; }
.styleguide .formgroup__input--radio {
display: flex;
flex-flow: row wrap;
flex: 0 0 100%;
justify-content: space-evenly; }
.styleguide .formgroup__input--radio > div {
flex: 0 1 65%;
display: flex;
justify-content: flex-start;
padding: .25rem 0; }
.styleguide .formgroup__input--radio > div > label {
cursor: pointer; }
.styleguide .formgroup__input--radio input[type='radio'] {
position: relative;
margin: 0 .5rem 0 0;
cursor: pointer;
width: .75rem;
height: .75rem;
min-width: .75rem;
min-height: .75rem;
border: 1px solid #bbbbbb;
border-radius: 50%; }
.styleguide .formgroup__input--radio input[type='radio']:checked:before {
position: absolute;
content: "";
height: .5rem;
width: .5rem;
border: .125rem solid white;
border-radius: 50%;
background-color: #3c3c3c;
box-shadow: 0 0 0 1px #3c3c3c; }
.styleguide .formgroup__input--number {
display: inline-flex;
flex: 0 1 70px;
width: 70px; }
.styleguide .formgroup__input--number + span {
margin: 0 .5rem;
flex-shrink: 1;
font-weight: 600; }
.styleguide .formgroup__input--valuta {
display: inline-flex;
flex: 0 1 auto;
width: 70px; }
.styleguide .formgroup__input--valuta + span {
margin: 0 .5rem;
flex-shrink: 1;
font-weight: 600; }
.styleguide select.formgroup__input {
position: relative;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-position: right 1rem top 50%;
box-sizing: border-box;
flex: 0 0 100%;
background-color: white;
height: 2rem; }
.styleguide input[type='checkbox'] {
flex: none;
position: relative;
display: inline-block;
min-width: 1.125rem;
width: 1.125rem;
min-height: 1.125rem;
height: 1.125rem;
margin-right: 0.5rem;
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
border-radius: 0.25rem;
border: none;
outline: none; }
.styleguide input[type='checkbox']:before {
content: "";
width: 9px;
height: 5px;
position: absolute;
bottom: .4rem;
right: .2rem;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0.3;
transform: rotate(-45deg); }
.styleguide input[type='checkbox']:checked:before {
opacity: 1; }
.styleguide input[type='checkbox'].error {
border: 1px solid #ed5454; }
.styleguide .checkbox-dark {
position: relative;
margin-right: 10px;
width: 1.25rem;
background: black;
border-radius: .25rem;
height: 1.25rem; }
.styleguide .checkbox-dark input[type=checkbox] {
visibility: hidden;
width: auto !important; }
.styleguide .checkbox-dark input[type=checkbox]:checked + label:after {
opacity: 1; }
.styleguide .checkbox-dark label {
font-weight: bold;
display: block;
font-size: 13px;
line-height: 1em; }
.styleguide .checkbox-dark label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0.3;
transform: rotate(-45deg); }
.styleguide fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0; }
.styleguide .formgroup, .styleguide .infogroup {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin-bottom: .5rem;
/* voorstel
icon in input. bijv.: zoeken [zoekicon]
*/
/* icoon + button in input */
/* indien een i in een a zit */
/* verticale opzet label + input */
/* label */
justify-content: flex-start; }
.styleguide .formgroup--textarea-wrapper, .styleguide .infogroup--textarea-wrapper {
align-items: flex-start; }
.styleguide .formgroup > div, .styleguide .infogroup > div {
display: flex;
flex-flow: row wrap;
flex: 0 1 65%;
justify-content: flex-start; }
.styleguide .formgroup > div span, .styleguide .infogroup > div span {
color: #555555; }
body.dark-mode .styleguide .formgroup > div span, body.dark-mode .styleguide .infogroup > div span {
color: #d5d5d5; }
.styleguide .formgroup > div.formgroup__input__number-wrapper, .styleguide .infogroup > div.formgroup__input__number-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .formgroup > div.formgroup__input__valuta-wrapper, .styleguide .infogroup > div.formgroup__input__valuta-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .formgroup > div.formgroup__input__valuta-wrapper::before, .styleguide .infogroup > div.formgroup__input__valuta-wrapper::before {
position: absolute;
left: -1.5rem;
content: "€";
width: 1rem;
height: 1rem;
font: normal normal normal .875rem/1rem 'Roboto', sans-serif; }
body.dark-mode .styleguide .formgroup > div.formgroup__input__valuta-wrapper::before, body.dark-mode .styleguide .infogroup > div.formgroup__input__valuta-wrapper::before {
color: #ffffff; }
.styleguide .formgroup__time-wrapper, .styleguide .infogroup__time-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .formgroup__time-wrapper input, .styleguide .infogroup__time-wrapper input {
flex: 0 0;
margin-right: 0.45rem;
display: inline-flex;
width: 3.6rem;
padding-right: 0.125rem; }
.styleguide .formgroup--icon-link > div, .styleguide .infogroup--icon-link > div {
position: relative; }
.styleguide .formgroup--icon-link > div a, .styleguide .infogroup--icon-link > div a {
position: absolute;
z-index: 2;
top: .5rem;
right: .75rem;
font-size: .8rem;
text-decoration: none;
transform: scale(1);
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .formgroup--icon-link > div a:hover, .styleguide .infogroup--icon-link > div a:hover {
transform: scale(1.15); }
.styleguide .formgroup--icon-link > div input, .styleguide .infogroup--icon-link > div input {
flex: 1; }
.styleguide .formgroup--icon-link > div button, .styleguide .infogroup--icon-link > div button {
position: absolute;
z-index: 2;
top: .15rem;
right: -.75rem; }
.styleguide .formgroup--icon > div, .styleguide .infogroup--icon > div {
position: relative; }
.styleguide .formgroup--icon > div i, .styleguide .infogroup--icon > div i {
position: absolute;
z-index: 2;
top: .6rem;
left: .75rem;
font-size: 0.8rem; }
.styleguide .formgroup--icon > div input, .styleguide .infogroup--icon > div input {
padding-left: 2.25rem;
flex: 1; }
.styleguide .formgroup--icon > div button, .styleguide .infogroup--icon > div button {
position: absolute;
z-index: 2;
top: .15rem;
right: -.85rem;
font-size: .75rem; }
.styleguide .formgroup a i, .styleguide .infogroup a i {
color: #888888;
cursor: pointer; }
.styleguide .formgroup a i:hover, .styleguide .infogroup a i:hover {
color: #6f6f6f; }
.styleguide .formgroup--column, .styleguide .infogroup--column {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin: 0 0 1rem; }
.styleguide .formgroup--column .formgroup__label, .styleguide .infogroup--column .formgroup__label {
padding: .25rem 0 .55rem; }
.styleguide .formgroup--column .formgroup__input, .styleguide .infogroup--column .formgroup__input {
flex: 0 1 100%; }
.styleguide .formgroup .formgroup__label, .styleguide .formgroup .infogroup__label, .styleguide .infogroup .formgroup__label, .styleguide .infogroup .infogroup__label {
position: relative;
display: flex;
flex: 1 0;
max-width: 100%;
font-weight: bold;
align-items: center;
line-height: 1em;
/* Bol met vraagteken. (.formgroup__label__remark) */ }
body.dark-mode .styleguide .formgroup .formgroup__label, body.dark-mode .styleguide .formgroup .infogroup__label, body.dark-mode .styleguide .infogroup .formgroup__label, body.dark-mode .styleguide .infogroup .infogroup__label {
color: #ffffff; }
.styleguide .formgroup .formgroup__label__remark, .styleguide .formgroup .infogroup__label__remark, .styleguide .infogroup .formgroup__label__remark, .styleguide .infogroup .infogroup__label__remark {
background-color: #888;
border-radius: 50%;
width: 1.25rem;
padding-right: 1px;
height: 1.25rem;
color: #ffffff;
display: flex;
text-align: center;
margin-left: .5rem;
margin-right: .5rem;
text-decoration: none;
cursor: pointer;
justify-content: center;
align-items: center; }
body.dark-mode .styleguide .formgroup .formgroup__label__remark, body.dark-mode .styleguide .formgroup .infogroup__label__remark, body.dark-mode .styleguide .infogroup .formgroup__label__remark, body.dark-mode .styleguide .infogroup .infogroup__label__remark {
background-color: #ffffff;
color: #3c3c3c; }
.styleguide .formgroup__image-wrapper, .styleguide .action-afbeelding-edit, .styleguide .infogroup__image-wrapper {
flex: 0 1 65%;
max-height: 180px;
overflow: hidden;
z-index: 0; }
.styleguide .formgroup__image-wrapper img, .styleguide .action-afbeelding-edit img, .styleguide .infogroup__image-wrapper img {
object-fit: cover;
width: 100%; }
.styleguide .formgroup__image-wrapper--16-9, .styleguide .action-afbeelding-edit, .styleguide .infogroup__image-wrapper--16-9 {
position: relative;
flex: unset;
height: 180px;
aspect-ratio: 16/9; }
.styleguide .formgroup__image-wrapper--16-9 img, .styleguide .action-afbeelding-edit img, .styleguide .infogroup__image-wrapper--16-9 img {
object-fit: unset;
width: unset;
height: 100%;
position: absolute;
aspect-ratio: 16/9; }
.styleguide .formgroup__image-wrapper--16-9 i, .styleguide .action-afbeelding-edit i, .styleguide .infogroup__image-wrapper--16-9 i {
position: absolute;
right: 1rem;
bottom: 1rem;
cursor: pointer; }
.styleguide .formgroup__image-wrapper--edit, .styleguide .action-afbeelding-edit, .styleguide .infogroup__image-wrapper--edit {
transition: all .35s ease-in-out; }
.styleguide .formgroup__image-wrapper--edit::before, .styleguide .action-afbeelding-edit::before, .styleguide .infogroup__image-wrapper--edit::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "\f303";
/* pencil */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 2rem;
line-height: 11rem;
text-align: center;
color: #ffffff;
width: 100%;
height: 100%;
background-color: rgba(34, 34, 34, 0.75);
z-index: 1;
transition: all .15s ease-in-out;
opacity: 0;
cursor: pointer; }
.styleguide .formgroup__image-wrapper--edit:hover::before, .styleguide .action-afbeelding-edit:hover::before, .styleguide .infogroup__image-wrapper--edit:hover::before {
opacity: 1; }
.styleguide .standaard-form, .styleguide .actionbar--variant-3 > div:not(:last-child) {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin-bottom: .5rem;
/* voorstel
icon in input. bijv.: zoeken [zoekicon]
*/
/* icoon + button in input */
/* indien een i in een a zit */
/* verticale opzet label + input */
/* label */ }
.styleguide .standaard-form--textarea-wrapper {
align-items: flex-start; }
.styleguide .standaard-form > div, .styleguide .actionbar--variant-3 > div:not(:last-child) > div {
display: flex;
flex-flow: row wrap;
flex: 0 1 65%;
justify-content: flex-start; }
.styleguide .standaard-form > div span, .styleguide .actionbar--variant-3 > div:not(:last-child) > div span {
color: #555555; }
body.dark-mode .styleguide .standaard-form > div span, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) > div span {
color: #d5d5d5; }
.styleguide .standaard-form > div.formgroup__input__number-wrapper, .styleguide .actionbar--variant-3 > div:not(:last-child) > div.formgroup__input__number-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .standaard-form > div.formgroup__input__valuta-wrapper, .styleguide .actionbar--variant-3 > div:not(:last-child) > div.formgroup__input__valuta-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .standaard-form > div.formgroup__input__valuta-wrapper::before, .styleguide .actionbar--variant-3 > div:not(:last-child) > div.formgroup__input__valuta-wrapper::before {
position: absolute;
left: -1.5rem;
content: "€";
width: 1rem;
height: 1rem;
font: normal normal normal .875rem/1rem 'Roboto', sans-serif; }
body.dark-mode .styleguide .standaard-form > div.formgroup__input__valuta-wrapper::before, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) > div.formgroup__input__valuta-wrapper::before {
color: #ffffff; }
.styleguide .standaard-form__time-wrapper {
display: flex;
flex: 0 1 65%;
flex-flow: row;
align-items: center;
justify-content: flex-start;
position: relative; }
.styleguide .standaard-form__time-wrapper input {
flex: 0 0;
margin-right: 0.45rem;
display: inline-flex;
width: 3.6rem;
padding-right: 0.125rem; }
.styleguide .standaard-form--icon-link > div {
position: relative; }
.styleguide .standaard-form--icon-link > div a {
position: absolute;
z-index: 2;
top: .5rem;
right: .75rem;
font-size: .8rem;
text-decoration: none;
transform: scale(1);
transition: all 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.34); }
.styleguide .standaard-form--icon-link > div a:hover {
transform: scale(1.15); }
.styleguide .standaard-form--icon-link > div input {
flex: 1; }
.styleguide .standaard-form--icon-link > div button {
position: absolute;
z-index: 2;
top: .15rem;
right: -.75rem; }
.styleguide .standaard-form--icon > div {
position: relative; }
.styleguide .standaard-form--icon > div i {
position: absolute;
z-index: 2;
top: .6rem;
left: .75rem;
font-size: 0.8rem; }
.styleguide .standaard-form--icon > div input {
padding-left: 2.25rem;
flex: 1; }
.styleguide .standaard-form--icon > div button {
position: absolute;
z-index: 2;
top: .15rem;
right: -.85rem;
font-size: .75rem; }
.styleguide .standaard-form a i, .styleguide .actionbar--variant-3 > div:not(:last-child) a i {
color: #888888;
cursor: pointer; }
.styleguide .standaard-form a i:hover, .styleguide .actionbar--variant-3 > div:not(:last-child) a i:hover {
color: #6f6f6f; }
.styleguide .standaard-form--column {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin: 0 0 1rem; }
.styleguide .standaard-form--column .formgroup__label {
padding: .25rem 0 .55rem; }
.styleguide .standaard-form--column .formgroup__input {
flex: 0 1 100%; }
.styleguide .standaard-form .formgroup__label, .styleguide .actionbar--variant-3 > div:not(:last-child) .formgroup__label, .styleguide .standaard-form .infogroup__label, .styleguide .actionbar--variant-3 > div:not(:last-child) .infogroup__label {
position: relative;
display: flex;
flex: 1 0;
max-width: 100%;
font-weight: bold;
align-items: center;
line-height: 1em;
/* Bol met vraagteken. (.formgroup__label__remark) */ }
body.dark-mode .styleguide .standaard-form .formgroup__label, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) .formgroup__label, body.dark-mode .styleguide .standaard-form .infogroup__label, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) .infogroup__label {
color: #ffffff; }
.styleguide .standaard-form .formgroup__label__remark, .styleguide .actionbar--variant-3 > div:not(:last-child) .formgroup__label__remark, .styleguide .standaard-form .infogroup__label__remark, .styleguide .actionbar--variant-3 > div:not(:last-child) .infogroup__label__remark {
background-color: #888;
border-radius: 50%;
width: 1.25rem;
padding-right: 1px;
height: 1.25rem;
color: #ffffff;
display: flex;
text-align: center;
margin-left: .5rem;
margin-right: .5rem;
text-decoration: none;
cursor: pointer;
justify-content: center;
align-items: center; }
body.dark-mode .styleguide .standaard-form .formgroup__label__remark, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) .formgroup__label__remark, body.dark-mode .styleguide .standaard-form .infogroup__label__remark, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) .infogroup__label__remark {
background-color: #ffffff;
color: #3c3c3c; }
.styleguide .standaard-form label, .styleguide .actionbar--variant-3 > div:not(:last-child) label {
position: relative;
display: flex;
flex: 1 0;
max-width: 100%;
font-weight: bold;
align-items: center;
line-height: 1em;
/* Bol met vraagteken. (.formgroup__label__remark) */ }
body.dark-mode .styleguide .standaard-form label, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) label {
color: #ffffff; }
.styleguide .standaard-form label__remark, .styleguide .actionbar--variant-3 > div:not(:last-child) label__remark {
background-color: #888;
border-radius: 50%;
width: 1.25rem;
padding-right: 1px;
height: 1.25rem;
color: #ffffff;
display: flex;
text-align: center;
margin-left: .5rem;
margin-right: .5rem;
text-decoration: none;
cursor: pointer;
justify-content: center;
align-items: center; }
body.dark-mode .styleguide .standaard-form label__remark, body.dark-mode .styleguide .actionbar--variant-3 > div:not(:last-child) label__remark {
background-color: #ffffff;
color: #3c3c3c; }
.styleguide .standaard-form input, .styleguide .actionbar--variant-3 > div:not(:last-child) input {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c;
background-color: #ffffff;
border: 1px solid #d5d5d5;
padding: .5rem .75rem;
flex: 0 1 65%;
max-height: 2rem;
box-sizing: border-box;
align-items: center;
z-index: 1;
/* SELECT */
/* SEARCH */
/* PLACEHOLDER */ }
.styleguide .standaard-form input:focus, .styleguide .actionbar--variant-3 > div:not(:last-child) input:focus {
background-color: #ffffff; }
.styleguide .standaard-form input.error, .styleguide .actionbar--variant-3 > div:not(:last-child) input.error {
border: 1px solid #ed5454; }
.styleguide .standaard-form input > option, .styleguide .actionbar--variant-3 > div:not(:last-child) input > option {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c; }
.styleguide .standaard-form input--search, .styleguide .actionbar--variant-3 > div:not(:last-child) input--search {
height: 2rem; }
.styleguide .standaard-form input[type=date], .styleguide .actionbar--variant-3 > div:not(:last-child) input[type=date] {
padding: .25rem .75rem;
height: 2rem;
color: #6f6f6f;
flex: 0 1 calc(50% + 7px); }
.styleguide .standaard-form input[type=date]:invalid::-webkit-datetime-edit, .styleguide .actionbar--variant-3 > div:not(:last-child) input[type=date]:invalid::-webkit-datetime-edit {
color: #6f6f6f; }
.styleguide .standaard-form input::placeholder, .styleguide .actionbar--variant-3 > div:not(:last-child) input::placeholder {
color: #6f6f6f; }
.styleguide .standaard-form input--wrapper, .styleguide .actionbar--variant-3 > div:not(:last-child) input--wrapper {
position: relative; }
.styleguide .standaard-form input--radio, .styleguide .actionbar--variant-3 > div:not(:last-child) input--radio {
display: flex;
flex-flow: row wrap;
flex: 0 0 100%;
justify-content: space-evenly; }
.styleguide .standaard-form input--radio > div, .styleguide .actionbar--variant-3 > div:not(:last-child) input--radio > div {
flex: 0 1 65%;
display: flex;
justify-content: flex-start;
padding: .25rem 0; }
.styleguide .standaard-form input--radio > div > label, .styleguide .actionbar--variant-3 > div:not(:last-child) input--radio > div > label {
cursor: pointer; }
.styleguide .standaard-form input--radio input[type='radio'], .styleguide .actionbar--variant-3 > div:not(:last-child) input--radio input[type='radio'] {
position: relative;
margin: 0 .5rem 0 0;
cursor: pointer;
width: .75rem;
height: .75rem;
min-width: .75rem;
min-height: .75rem;
border: 1px solid #bbbbbb;
border-radius: 50%; }
.styleguide .standaard-form input--radio input[type='radio']:checked:before, .styleguide .actionbar--variant-3 > div:not(:last-child) input--radio input[type='radio']:checked:before {
position: absolute;
content: "";
height: .5rem;
width: .5rem;
border: .125rem solid white;
border-radius: 50%;
background-color: #3c3c3c;
box-shadow: 0 0 0 1px #3c3c3c; }
.styleguide .standaard-form select, .styleguide .actionbar--variant-3 > div:not(:last-child) select {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c;
background-color: #ffffff;
border: 1px solid #d5d5d5;
padding: .5rem .75rem;
flex: 0 1 65%;
max-height: 2rem;
box-sizing: border-box;
align-items: center;
z-index: 1;
/* SELECT */
/* SEARCH */
/* PLACEHOLDER */
position: relative;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-position: right 1rem top 50%;
box-sizing: border-box;
flex: 0 0 100%;
background-color: white;
height: 2rem; }
.styleguide .standaard-form select:focus, .styleguide .actionbar--variant-3 > div:not(:last-child) select:focus {
background-color: #ffffff; }
.styleguide .standaard-form select.error, .styleguide .actionbar--variant-3 > div:not(:last-child) select.error {
border: 1px solid #ed5454; }
.styleguide .standaard-form select > option, .styleguide .actionbar--variant-3 > div:not(:last-child) select > option {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c; }
.styleguide .standaard-form select--search, .styleguide .actionbar--variant-3 > div:not(:last-child) select--search {
height: 2rem; }
.styleguide .standaard-form select[type=date], .styleguide .actionbar--variant-3 > div:not(:last-child) select[type=date] {
padding: .25rem .75rem;
height: 2rem;
color: #6f6f6f;
flex: 0 1 calc(50% + 7px); }
.styleguide .standaard-form select[type=date]:invalid::-webkit-datetime-edit, .styleguide .actionbar--variant-3 > div:not(:last-child) select[type=date]:invalid::-webkit-datetime-edit {
color: #6f6f6f; }
.styleguide .standaard-form select::placeholder, .styleguide .actionbar--variant-3 > div:not(:last-child) select::placeholder {
color: #6f6f6f; }
.styleguide .standaard-form select--wrapper, .styleguide .actionbar--variant-3 > div:not(:last-child) select--wrapper {
position: relative; }
.styleguide .standaard-form select--radio, .styleguide .actionbar--variant-3 > div:not(:last-child) select--radio {
display: flex;
flex-flow: row wrap;
flex: 0 0 100%;
justify-content: space-evenly; }
.styleguide .standaard-form select--radio > div, .styleguide .actionbar--variant-3 > div:not(:last-child) select--radio > div {
flex: 0 1 65%;
display: flex;
justify-content: flex-start;
padding: .25rem 0; }
.styleguide .standaard-form select--radio > div > label, .styleguide .actionbar--variant-3 > div:not(:last-child) select--radio > div > label {
cursor: pointer; }
.styleguide .standaard-form select--radio input[type='radio'], .styleguide .actionbar--variant-3 > div:not(:last-child) select--radio input[type='radio'] {
position: relative;
margin: 0 .5rem 0 0;
cursor: pointer;
width: .75rem;
height: .75rem;
min-width: .75rem;
min-height: .75rem;
border: 1px solid #bbbbbb;
border-radius: 50%; }
.styleguide .standaard-form select--radio input[type='radio']:checked:before, .styleguide .actionbar--variant-3 > div:not(:last-child) select--radio input[type='radio']:checked:before {
position: absolute;
content: "";
height: .5rem;
width: .5rem;
border: .125rem solid white;
border-radius: 50%;
background-color: #3c3c3c;
box-shadow: 0 0 0 1px #3c3c3c; }
.styleguide .standaard-form input[type='checkbox'], .styleguide .actionbar--variant-3 > div:not(:last-child) input[type='checkbox'] {
flex: none;
padding: 0;
flex: none;
position: relative;
display: inline-block;
min-width: 1.125rem;
width: 1.125rem;
min-height: 1.125rem;
height: 1.125rem;
margin-right: 0.5rem;
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
border-radius: 0.25rem;
border: none;
outline: none; }
.styleguide .standaard-form input[type='checkbox']:before, .styleguide .actionbar--variant-3 > div:not(:last-child) input[type='checkbox']:before {
content: "";
width: 9px;
height: 5px;
position: absolute;
bottom: .4rem;
right: .2rem;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0.3;
transform: rotate(-45deg); }
.styleguide .standaard-form input[type='checkbox']:checked:before, .styleguide .actionbar--variant-3 > div:not(:last-child) input[type='checkbox']:checked:before {
opacity: 1; }
.styleguide .standaard-form input[type='checkbox'].error, .styleguide .actionbar--variant-3 > div:not(:last-child) input[type='checkbox'].error {
border: 1px solid #ed5454; }
.styleguide .standaard-form .datepicker__wrapper, .styleguide .actionbar--variant-3 > div:not(:last-child) .datepicker__wrapper {
position: relative;
z-index: 0;
color: #6f6f6f;
flex: 0 1 calc(50% + 7px); }
.styleguide .standaard-form .datepicker__wrapper:before, .styleguide .actionbar--variant-3 > div:not(:last-child) .datepicker__wrapper:before {
position: absolute;
right: 0.75rem;
top: 50%;
font-family: "Font Awesome 5 Free";
font-size: .875rem;
font-weight: 400;
content: "\f133";
height: 1rem;
width: 1rem;
color: black;
z-index: 2;
transform: translateY(-50%); }
.styleguide .standaard-form .datepicker__wrapper input, .styleguide .actionbar--variant-3 > div:not(:last-child) .datepicker__wrapper input {
width: 100%;
height: 2rem;
padding: .25rem .75rem; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .formgroup__input {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c;
background-color: #ffffff;
border: 1px solid #d5d5d5;
padding: .5rem .75rem;
flex: 0 1 65%;
max-height: 2rem;
box-sizing: border-box;
align-items: center;
z-index: 1;
/* SELECT */
/* SEARCH */
/* PLACEHOLDER */ }
.styleguide .formgroup__input:focus {
background-color: #ffffff; }
.styleguide .formgroup__input.error {
border: 1px solid #ed5454; }
.styleguide .formgroup__input > option {
font: 12px/1 'Roboto', sans-serif;
font-weight: 300;
color: #3c3c3c; }
.styleguide .formgroup__input--search {
height: 2rem; }
.styleguide .formgroup__input[type=date] {
padding: .25rem .75rem;
height: 2rem;
color: #6f6f6f;
flex: 0 1 calc(50% + 7px); }
.styleguide .formgroup__input[type=date]:invalid::-webkit-datetime-edit {
color: #6f6f6f; }
.styleguide .formgroup__input::placeholder {
color: #6f6f6f; }
.styleguide .formgroup__input--wrapper {
position: relative; }
.styleguide .formgroup__input--radio {
display: flex;
flex-flow: row wrap;
flex: 0 0 100%;
justify-content: space-evenly; }
.styleguide .formgroup__input--radio > div {
flex: 0 1 65%;
display: flex;
justify-content: flex-start;
padding: .25rem 0; }
.styleguide .formgroup__input--radio > div > label {
cursor: pointer; }
.styleguide .formgroup__input--radio input[type='radio'] {
position: relative;
margin: 0 .5rem 0 0;
cursor: pointer;
width: .75rem;
height: .75rem;
min-width: .75rem;
min-height: .75rem;
border: 1px solid #bbbbbb;
border-radius: 50%; }
.styleguide .formgroup__input--radio input[type='radio']:checked:before {
position: absolute;
content: "";
height: .5rem;
width: .5rem;
border: .125rem solid white;
border-radius: 50%;
background-color: #3c3c3c;
box-shadow: 0 0 0 1px #3c3c3c; }
.styleguide .formgroup__input--number {
display: inline-flex;
flex: 0 1 70px;
width: 70px; }
.styleguide .formgroup__input--number + span {
margin: 0 .5rem;
flex-shrink: 1;
font-weight: 600; }
.styleguide .formgroup__input--valuta {
display: inline-flex;
flex: 0 1 auto;
width: 70px; }
.styleguide .formgroup__input--valuta + span {
margin: 0 .5rem;
flex-shrink: 1;
font-weight: 600; }
.styleguide select.formgroup__input {
position: relative;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-position: right 1rem top 50%;
box-sizing: border-box;
flex: 0 0 100%;
background-color: white;
height: 2rem; }
.styleguide input[type='checkbox'] {
flex: none;
position: relative;
display: inline-block;
min-width: 1.125rem;
width: 1.125rem;
min-height: 1.125rem;
height: 1.125rem;
margin-right: 0.5rem;
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
border-radius: 0.25rem;
border: none;
outline: none; }
.styleguide input[type='checkbox']:before {
content: "";
width: 9px;
height: 5px;
position: absolute;
bottom: .4rem;
right: .2rem;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0.3;
transform: rotate(-45deg); }
.styleguide input[type='checkbox']:checked:before {
opacity: 1; }
.styleguide input[type='checkbox'].error {
border: 1px solid #ed5454; }
.styleguide .checkbox-dark {
position: relative;
margin-right: 10px;
width: 1.25rem;
background: black;
border-radius: .25rem;
height: 1.25rem; }
.styleguide .checkbox-dark input[type=checkbox] {
visibility: hidden;
width: auto !important; }
.styleguide .checkbox-dark input[type=checkbox]:checked + label:after {
opacity: 1; }
.styleguide .checkbox-dark label {
font-weight: bold;
display: block;
font-size: 13px;
line-height: 1em; }
.styleguide .checkbox-dark label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0.3;
transform: rotate(-45deg); }
.styleguide .actionbar, .styleguide .actionbar--variant-1, .styleguide .actionbar--variant-2, .styleguide .actionbar--variant-3 {
background: #eeeeee;
border: 1px solid #bbbbbb;
padding: 2.25rem 2rem 1.5rem;
margin: 0 0 3rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
min-height: 100px;
/* ALGEMEEN: Kleur genereren
.actionbar--{color}
*/ }
body.dark-mode .styleguide .actionbar, body.dark-mode .styleguide .actionbar--variant-1, body.dark-mode .styleguide .actionbar--variant-2, body.dark-mode .styleguide .actionbar--variant-3 {
background-color: #3c3c3c;
border: 1px solid #888888; }
.styleguide .actionbar--no-margin {
margin-bottom: -1px;
border-bottom: 2px solid #bbbbbb; }
@media screen and (min-width: 768px) {
.styleguide .actionbar, .styleguide .actionbar--variant-1, .styleguide .actionbar--variant-2, .styleguide .actionbar--variant-3 {
flex-direction: row;
justify-content: space-between;
align-items: center; } }
.styleguide .actionbar__info {
color: #eeeeee;
display: flex;
align-items: center;
flex: 0 0 100%;
margin-bottom: 1.5rem; }
.styleguide .actionbar__info > p {
margin: 0; }
@media screen and (min-width: 768px) {
.styleguide .actionbar__info {
color: #eeeeee;
display: flex;
align-items: center;
flex: 0 0 48%;
margin-bottom: 0; } }
@media screen and (min-width: 1380px) {
.styleguide .actionbar__info {
color: #eeeeee;
display: flex;
align-items: center;
flex: 0 0 35%; } }
.styleguide .actionbar__form {
display: flex;
align-items: center;
flex: 0 1 100%;
flex-flow: row;
margin: 0 0 0 0;
padding-right: 1rem;
justify-content: flex-start; }
@media screen and (min-width: 768px) {
.styleguide .actionbar__form {
align-items: center;
flex: 0 1 48%;
justify-content: flex-end; } }
@media screen and (min-width: 1380px) {
.styleguide .actionbar__form {
align-items: center;
flex: 0 1 25%;
justify-content: center; } }
.styleguide .actionbar__form select {
box-sizing: border-box;
min-width: 190px;
flex-basis: auto; }
.styleguide .actionbar__form--filter-bundle {
justify-content: flex-start !important;
padding: 0 1rem 0 0;
width: auto;
flex: 0 0 auto; }
.styleguide .actionbar__buttons {
display: flex;
align-items: center;
flex: 1 0 100%;
justify-content: flex-start;
padding-top: 1rem;
border-top: 1px solid #bfbfbf;
margin-top: 1rem;
width: 100%; }
.styleguide .actionbar__buttons button {
margin: 0 1rem 0 0; }
@media screen and (min-width: 768px) {
.styleguide .actionbar__buttons {
flex: 1 0 30%;
width: auto;
justify-content: flex-end; }
.styleguide .actionbar__buttons button {
margin: 0 0 0 1rem; } }
@media screen and (min-width: 1380px) {
.styleguide .actionbar__buttons {
padding-top: 0;
margin-top: 0;
border-top: 0px; } }
.styleguide .actionbar__settings {
margin: 0 0.5rem 0 1.5rem;
font-size: 1.2rem;
line-height: 1em;
display: flex;
align-items: center;
text-decoration: none; }
.styleguide .actionbar__settings__text {
line-height: 1em;
margin-right: .75rem;
text-decoration: underline; }
.styleguide .actionbar--white {
background-color: #ffffff;
border-color: 1px solid #cccccc; }
.styleguide .actionbar--white .actionbar__info p {
color: #222222; }
.styleguide .actionbar--black {
background-color: #222222;
border-color: 1px solid black; }
.styleguide .actionbar--black .actionbar__info p {
color: #ffffff; }
.styleguide .actionbar--cyaan {
background-color: #6ebfce;
border-color: 1px solid #368fa0; }
.styleguide .actionbar--cyaan .actionbar__info p {
color: #222222; }
.styleguide .actionbar--grey {
background-color: #f3f3f3;
border-color: 1px solid silver; }
.styleguide .actionbar--grey .actionbar__info p {
color: #222222; }
.styleguide .actionbar--grey-70 {
background-color: #d5d5d5;
border-color: 1px solid #a2a2a2; }
.styleguide .actionbar--grey-70 .actionbar__info p {
color: #222222; }
.styleguide .actionbar--grey-dark {
background-color: #a2a2a2;
border-color: 1px solid #6f6f6f; }
.styleguide .actionbar--grey-dark .actionbar__info p {
color: #222222; }
.styleguide .actionbar--grey-darker {
background-color: #6f6f6f;
border-color: 1px solid #3c3c3c; }
.styleguide .actionbar--grey-darker .actionbar__info p {
color: #ffffff; }
.styleguide .actionbar--primary {
background-color: #33566c;
border-color: 1px solid #121f27; }
.styleguide .actionbar--primary .actionbar__info p {
color: #ffffff; }
.styleguide .actionbar--red {
background-color: #f28282;
border-color: 1px solid #e82626; }
.styleguide .actionbar--red .actionbar__info p {
color: #222222; }
.styleguide .actionbar--red-dark {
background-color: #ed5454;
border-color: 1px solid #c61515; }
.styleguide .actionbar--red-dark .actionbar__info p {
color: #222222; }
.styleguide .actionbar--green {
background-color: #96e094;
border-color: 1px solid #48c945; }
.styleguide .actionbar--green .actionbar__info p {
color: #222222; }
.styleguide .actionbar--green-darker {
background-color: #34aa31;
border-color: 1px solid #1c5b1a; }
.styleguide .actionbar--green-darker .actionbar__info p {
color: #ffffff; }
.styleguide .actionbar--avocado {
background-color: #8eb03a;
border-color: 1px solid #506321; }
.styleguide .actionbar--avocado .actionbar__info p {
color: #ffffff; }
.styleguide .actionbar--yellow {
background-color: #f0f282;
border-color: 1px solid #e5e826; }
.styleguide .actionbar--yellow .actionbar__info p {
color: #222222; }
.styleguide .actionbar--yellow-darken {
background-color: #eaed54;
border-color: 1px solid #c3c615; }
.styleguide .actionbar--yellow-darken .actionbar__info p {
color: #222222; }
.styleguide .actionbar--orange {
background-color: #cd8f17;
border-color: 1px solid #714f0d; }
.styleguide .actionbar--orange .actionbar__info p {
color: #ffffff; }
.styleguide .actionbar--blue {
background-color: #79afe2;
border-color: 1px solid #2c7dc9; }
.styleguide .actionbar--blue .actionbar__info p {
color: #222222; }
.styleguide .actionbar--light-blue {
background-color: #82aaf2;
border-color: 1px solid #266be8; }
.styleguide .actionbar--light-blue .actionbar__info p {
color: #222222; }
.styleguide .actionbar--niet-actief {
background-color: #f28282;
border-color: 1px solid #e82626; }
.styleguide .actionbar--niet-actief .actionbar__info p {
color: #222222; }
.styleguide .actionbar--actief {
background-color: #96e094;
border-color: 1px solid #48c945; }
.styleguide .actionbar--actief .actionbar__info p {
color: #222222; }
.styleguide .actionbar--vimeo {
background-color: #02ADEF;
border-color: 1px solid #01648a; }
.styleguide .actionbar--vimeo .actionbar__info p {
color: #ffffff; }
.styleguide .actionbar--youtube {
background-color: #FF0200;
border-color: 1px solid #990100; }
.styleguide .actionbar--youtube .actionbar__info p {
color: #ffffff; }
.styleguide .actionbar--variant-1 > div {
display: flex;
flex-direction: column; }
.styleguide .actionbar--variant-2 > div {
display: flex;
flex-direction: column; }
.styleguide .actionbar--variant-3 {
margin: 0;
flex-direction: row;
justify-content: flex-end;
align-items: center; }
.styleguide .actionbar--variant-3 > div:not(:last-child) {
min-width: 180px;
width: auto;
margin-right: 1rem; }
.styleguide .actionbar--variant-3 > div:not(:last-child).formgroup--icon input {
padding-left: 2.25rem;
flex: 1; }
.styleguide .actionbar--variant-3 > div:last-child {
display: flex;
margin-left: auto; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
.styleguide .table, .styleguide .standaard-table, .styleguide .simple-table, .styleguide .financieel-table {
display: table;
width: 100%;
position: relative; }
.styleguide .table__video-title {
align-items: center;
height: auto;
margin-top: -1px; }
@media only screen and (min-width: 1024px) {
.styleguide .table__video-title {
height: 0; } }
.styleguide .table__line-clamp {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
height: 1rem;
padding-left: .5rem; }
.styleguide .table__line-clamp--2 {
-webkit-line-clamp: 2; }
.styleguide .table__line-clamp--3 {
-webkit-line-clamp: 3; }
.styleguide .table__row, .styleguide .standaard-table > div {
display: flex;
flex-flow: row wrap;
border: 1px solid #d5d5d5;
transition: box-shadow .25s ease-in-out; }
@media only screen and (min-width: 1024px) {
.styleguide .table__row, .styleguide .standaard-table > div {
display: table-row;
border: none; } }
.styleguide .table__row > div:last-child, .styleguide .standaard-table > div > div:last-child {
/* cell */
padding-right: 1.5rem; }
.styleguide .table__row.ui-sortable-handle:not(.header), .styleguide .standaard-table > div.ui-sortable-handle:not(.header) {
cursor: grab; }
.styleguide .table__row.ui-sortable-handle:not(.header) .fa-edit, .styleguide .standaard-table > div.ui-sortable-handle:not(.header) .fa-edit {
cursor: pointer; }
.styleguide .table__row.ui-sortable-handle:not(.header):active, .styleguide .standaard-table > div.ui-sortable-handle:not(.header):active {
cursor: grabbing; }
.styleguide .table__row.ui-sortable-handle.ui-sortable-helper, .styleguide .standaard-table > div.ui-sortable-handle.ui-sortable-helper, .styleguide .table__row.ui-sortable-helper:active, .styleguide .standaard-table > div.ui-sortable-helper:active {
cursor: grabbing;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2); }
.styleguide .table .ui-sortable-placeholder.ui-state-highlight, .styleguide .standaard-table .ui-sortable-placeholder.ui-state-highlight, .styleguide .simple-table .ui-sortable-placeholder.ui-state-highlight, .styleguide .financieel-table .ui-sortable-placeholder.ui-state-highlight {
height: 3rem;
border: 0px; }
.styleguide .table .ui-sortable-placeholder.ui-state-highlight:before, .styleguide .standaard-table .ui-sortable-placeholder.ui-state-highlight:before, .styleguide .simple-table .ui-sortable-placeholder.ui-state-highlight:before, .styleguide .financieel-table .ui-sortable-placeholder.ui-state-highlight:before {
display: table-caption;
caption-side: bottom;
content: "Hier plaatsen...";
left: 0;
right: 0;
position: absolute;
text-align: center;
padding: .5rem 0;
font: 1.125rem/1.75 'Roboto', sans-serif;
color: #cd8f17;
border: 1px dashed #cd8f17;
background: #fcf5e7;
width: calc(100% -2px);
height: 2rem; }
.styleguide .table__row:nth-child(odd):not(.header), .styleguide .standaard-table > div:nth-child(odd):not(.header) {
background-color: #f2f2f2; }
.styleguide .table__cell, .styleguide .standaard-table > div > div, .styleguide .simple-table > div > div, .styleguide .financieel-table > div > div {
flex-flow: column wrap;
padding: .5rem 1.75rem;
font-family: Arial, Helvetica, sans-serif;
font: 0.75rem/1.2 sans-serif; }
@media only screen and (min-width: 1024px) {
.styleguide .table__cell, .styleguide .standaard-table > div > div, .styleguide .simple-table > div > div, .styleguide .financieel-table > div > div {
vertical-align: middle;
height: 2.875rem;
display: table-cell;
min-width: 160px; }
.styleguide .table__cell--33 {
width: 100%;
min-width: 100%; } }
@media only screen and (min-width: 1024px) and (min-width: 667px) {
.styleguide .table__cell--33 {
width: 50%;
min-width: 50%; } }
@media only screen and (min-width: 1024px) and (min-width: 1024px) {
.styleguide .table__cell--33 {
width: 33%;
min-width: 33%; } }
@media only screen and (min-width: 1024px) {
.styleguide .table__cell--50 {
width: 100%;
min-width: 100%; } }
@media only screen and (min-width: 1024px) and (min-width: 667px) {
.styleguide .table__cell--50 {
width: 50%;
min-width: 50%; } }
@media only screen and (min-width: 1024px) {
.styleguide .table__cell--75 {
width: 100%;
min-width: 100%; } }
@media only screen and (min-width: 1024px) and (min-width: 667px) {
.styleguide .table__cell--75 {
width: 50%;
min-width: 50%; } }
@media only screen and (min-width: 1024px) and (min-width: 1024px) {
.styleguide .table__cell--75 {
width: 75%;
min-width: 75%; } }
@media only screen and (min-width: 1024px) {
.styleguide .table__cell--100, .styleguide .financieel-table > div > div:last-child {
width: 100%; } }
.styleguide .table__cell--center, .styleguide .financieel-table > div > div:nth-of-type(3), .styleguide .financieel-table > div > div:nth-of-type(4) {
text-align: center; }
.styleguide .table__cell--right, .styleguide .financieel-table > div > div:last-child {
text-align: right; }
.styleguide .table__cell--icon, .styleguide .financieel-table > div > div:nth-of-type(1) {
display: none;
vertical-align: middle;
min-height: 2.5rem;
width: 50px;
text-align: center;
padding-left: 1rem; }
.styleguide .table__cell--icon input, .styleguide .financieel-table > div > div:nth-of-type(1) input {
margin: 0 0 -.5rem 0; }
@media only screen and (min-width: 1024px) {
.styleguide .table__cell--icon, .styleguide .financieel-table > div > div:nth-of-type(1) {
display: table-cell; } }
.styleguide .table__cell button, .styleguide .standaard-table > div > div button, .styleguide .simple-table > div > div button, .styleguide .financieel-table > div > div button {
margin: .5rem .5rem .5rem 0; }
@media only screen and (min-width: 1024px) {
.styleguide .table__cell i, .styleguide .standaard-table > div > div i, .styleguide .simple-table > div > div i, .styleguide .financieel-table > div > div i {
font-size: 1.5rem;
line-height: 1em; } }
.styleguide .table .header, .styleguide .standaard-table .header, .styleguide .simple-table .header, .styleguide .financieel-table .header {
background-color: #444444; }
.styleguide .table .header span, .styleguide .standaard-table .header span, .styleguide .simple-table .header span, .styleguide .financieel-table .header span {
color: #ffffff; }
.styleguide .simple-table > div, .styleguide .financieel-table > div, .styleguide .simple-table__row:nth-child(odd), .styleguide .simple-table__row:first-child {
background-color: #ffffff;
border-bottom: 1px solid #d9d9d9; }
body.dark-mode .styleguide .simple-table > div, body.dark-mode .styleguide .financieel-table > div, body.dark-mode .styleguide .simple-table__row:nth-child(odd), body.dark-mode .styleguide .simple-table__row:first-child {
background-color: rgba(255, 255, 255, 0.1);
border-bottom: 1px solid #999999; }
.styleguide .simple-table > div > div, .styleguide .financieel-table > div > div {
vertical-align: middle; }
.styleguide .simple-table > div .table__cell--icon, .styleguide .financieel-table > div .table__cell--icon, .styleguide .financieel-table > div > div:nth-of-type(1) {
min-width: unset; }
.styleguide .financieel-table > div > div {
vertical-align: middle; }
.styleguide .financieel-table > div > div:nth-of-type(1) {
min-width: unset; }
.styleguide .financieel-table > div > div:nth-of-type(4) span {
font-weight: 600; }
.styleguide .financieel-table > div .table__cell--icon, .styleguide .financieel-table > div > div:nth-of-type(1) {
min-width: unset; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
.styleguide .tablesorter__total {
font-size: .75rem;
font-weight: 600; }
.styleguide .tablesorter-default th, .styleguide .tablesorter-default thead td {
background-color: #555555;
color: white;
padding: 0.5rem 1rem; }
.styleguide .tablesorter-default .tablesorter-header.tablesorter-headerUnSorted {
position: relative;
background-image: none;
border-bottom: 0; }
.styleguide .tablesorter-default .tablesorter-header.tablesorter-headerUnSorted::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1rem;
position: absolute;
top: .5rem;
right: 3rem;
content: "\0f078";
width: 1rem;
height: 1rem;
opacity: 0.75;
transition: all .25s ease-in-out; }
.styleguide .tablesorter-default .headerSortDown,
.styleguide .tablesorter-default .tablesorter-headerDesc,
.styleguide .tablesorter-default .tablesorter-headerSortDown {
position: relative;
background-image: none;
border-bottom: 0; }
.styleguide .tablesorter-default .headerSortDown::before,
.styleguide .tablesorter-default .tablesorter-headerDesc::before,
.styleguide .tablesorter-default .tablesorter-headerSortDown::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1rem;
position: absolute;
top: .5rem;
right: 3rem;
content: "\0f077";
width: 1rem;
height: 1rem; }
.styleguide .tablesorter-default .headerSortUp,
.styleguide .tablesorter-default .tablesorter-headerAsc,
.styleguide .tablesorter-default .tablesorter-headerSortUp {
position: relative;
background-image: none;
border-bottom: 0; }
.styleguide .tablesorter-default .headerSortUp::before,
.styleguide .tablesorter-default .tablesorter-headerAsc::before,
.styleguide .tablesorter-default .tablesorter-headerSortUp::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1rem;
position: absolute;
top: .5rem;
right: 3rem;
content: "\0f078";
width: 1rem;
height: 1rem; }
.styleguide .tablesorter-default th[data-sorter='false']::before {
visibility: hidden; }
.styleguide .tablesorter-default td {
padding: .5rem 1rem; }
.styleguide .tablesorter-default tr.even > td {
background-color: white; }
.styleguide .tablesorter-default tr.odd > td {
background-color: #f2f2f2; }
.styleguide .tablesorter-default tr:hover.odd > td, .styleguide .tablesorter-default tr:hover.even > td {
background-color: #dddddd; }
.styleguide .tablesorter-default input {
margin: 0 0 0 0;
font-family: "Roboto", sans-serif;
font-size: .75rem;
line-height: 1em;
padding: .25rem .5rem;
height: 2rem;
border: 0px solid; }
.styleguide .tablesorter-default .tablesorter-filter-row td {
text-align: left; }
.styleguide .tablesorter__highlight__total {
font-size: .75rem;
font-weight: 600; }
.styleguide .tablesorter__highlight-default th, .styleguide .tablesorter__highlight-default thead td {
background-color: #555555;
color: white;
padding: 0.5rem 1rem; }
.styleguide .tablesorter__highlight-default .tablesorter-header.tablesorter-headerUnSorted {
position: relative;
background-image: none;
border-bottom: 0; }
.styleguide .tablesorter__highlight-default .tablesorter-header.tablesorter-headerUnSorted::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1rem;
position: absolute;
top: .5rem;
right: 3rem;
content: "\0f078";
width: 1rem;
height: 1rem;
opacity: 0.75;
transition: all .25s ease-in-out; }
.styleguide .tablesorter__highlight-default .headerSortDown,
.styleguide .tablesorter__highlight-default .tablesorter-headerDesc,
.styleguide .tablesorter__highlight-default .tablesorter-headerSortDown {
position: relative;
background-image: none;
border-bottom: 0; }
.styleguide .tablesorter__highlight-default .headerSortDown::before,
.styleguide .tablesorter__highlight-default .tablesorter-headerDesc::before,
.styleguide .tablesorter__highlight-default .tablesorter-headerSortDown::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1rem;
position: absolute;
top: .5rem;
right: 3rem;
content: "\0f077";
width: 1rem;
height: 1rem; }
.styleguide .tablesorter__highlight-default .headerSortUp,
.styleguide .tablesorter__highlight-default .tablesorter-headerAsc,
.styleguide .tablesorter__highlight-default .tablesorter-headerSortUp {
position: relative;
background-image: none;
border-bottom: 0; }
.styleguide .tablesorter__highlight-default .headerSortUp::before,
.styleguide .tablesorter__highlight-default .tablesorter-headerAsc::before,
.styleguide .tablesorter__highlight-default .tablesorter-headerSortUp::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1rem;
position: absolute;
top: .5rem;
right: 3rem;
content: "\0f078";
width: 1rem;
height: 1rem; }
.styleguide .tablesorter__highlight-default th[data-sorter='false']::before {
visibility: hidden; }
.styleguide .tablesorter__highlight-default td {
padding: .5rem 1rem; }
.styleguide .tablesorter__highlight-default tr.even > td {
background-color: white; }
.styleguide .tablesorter__highlight-default tr.odd > td {
background-color: #f2f2f2; }
.styleguide .tablesorter__highlight-default tr:hover.odd > td, .styleguide .tablesorter__highlight-default tr:hover.even > td {
background-color: #dddddd; }
.styleguide .tablesorter__highlight-default input {
margin: 0 0 0 0;
font-family: "Roboto", sans-serif;
font-size: .75rem;
line-height: 1em;
padding: .25rem .5rem;
height: 2rem;
border: 0px solid; }
.styleguide .tablesorter__highlight-default .tablesorter-filter-row td {
text-align: left; }
.styleguide .tablesorter__highlight.tablesorter-default tr td {
position: relative;
overflow: hidden;
transition: all .15s ease-in-out; }
.styleguide .tablesorter__highlight.tablesorter-default tr td::after {
display: block;
content: attr(title);
font-weight: 600;
color: transparent;
height: 1px;
margin-bottom: -1px;
visibility: hidden;
overflow: hidden; }
.styleguide .tablesorter__highlight.tablesorter-default tr.even > td {
background-color: white; }
.styleguide .tablesorter__highlight.tablesorter-default tr.even > td:first-child {
background-color: #f9f9f9;
border-right: 1px solid #d5d5d5;
transition: all .15s ease-in-out; }
.styleguide .tablesorter__highlight.tablesorter-default tr.odd > td {
background-color: #f2f2f2; }
.styleguide .tablesorter__highlight.tablesorter-default tr.odd > td:first-child {
background-color: #e4e4e4;
border-right: 1px solid #d5d5d5;
transition: all .15s ease-in-out; }
.styleguide .tablesorter__highlight.tablesorter-default tr:hover.odd > td, .styleguide .tablesorter__highlight.tablesorter-default tr:hover.even > td {
background-color: #dddddd; }
.styleguide .tablesorter__highlight.tablesorter-default tr:hover td:first-child {
font-weight: 600; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .header {
/* PROFIEL */
/* EINDE PROFIEL */ }
.styleguide .header__profiel {
background-color: #eeeeee;
display: flex;
flex-flow: row;
width: 100%;
position: relative;
padding: 2rem 1.25rem; }
body.dark-mode .styleguide .header__profiel {
background-color: #3c3c3c; }
.styleguide .header__profiel__image-column {
position: relative;
width: 150px;
margin-top: -.5rem; }
.styleguide .header__profiel__image-wrapper {
border-radius: 50%;
background: #eeeeee;
border: 0.75rem solid #eeeeee;
width: 200px;
height: 200px;
overflow: hidden;
position: absolute;
left: .25rem;
margin: 0 0 0 0;
cursor: pointer; }
.styleguide .header__profiel__image-wrapper::before {
position: absolute;
content: "";
right: 0;
top: 0;
height: 100%;
width: 100%;
margin: auto;
background: #e4e4e4;
background: linear-gradient(90deg, #c5c5c5 0%, #dadada 33%, #ececec 66%, #eeeeee 100%);
background-size: 300% 100%;
z-index: 0;
-webkit-animation: progress 3s 2;
-moz-animation: progress 3s 2;
-ms-animation: progress 3s 2;
-o-animation: progress 3s 2;
animation: progress 3s 2; }
.styleguide .header__profiel__image-wrapper:hover img {
filter: blur(2px) opacity(0.5) grayscale(100%); }
.styleguide .header__profiel__image-wrapper:hover::after {
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-shadow: 0 0 .25rem #000000;
content: "\f303";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 2rem;
text-shadow: 0 0 .25rem #000000; }
.styleguide .header__profiel__image-wrapper > img {
position: relative;
object-fit: cover;
width: 100%;
height: 100%;
background: #222222;
z-index: 1;
transition: all .1s ease; }
.styleguide .header__profiel__content {
padding: .5rem 2rem 0 5rem;
border-right: 1px solid #ccc; }
body.dark-mode .styleguide .header__profiel__content {
border-right: 1px solid rgba(255, 255, 255, 0.4); }
.styleguide .header__profiel__content > div {
display: flex;
flex-flow: column wrap;
justify-content: space-between; }
.styleguide .header__profiel__content > div h3 {
margin: 0 0 0 0; }
.styleguide .header__profiel__edit {
padding: .5rem 1rem 0 2rem; }
.styleguide .header__profiel__edit > div {
display: flex;
flex-flow: column wrap;
justify-content: space-between; }
.styleguide .header__profiel__edit > div > div {
padding-bottom: .95rem; }
.styleguide .header__profiel__contact {
margin-left: auto; }
.styleguide .header__profiel__contact > div {
display: flex;
flex-flow: column; }
.styleguide .header__profiel__contact__registratie {
align-self: flex-end;
text-align: right;
font-size: 1rem; }
.styleguide .header__profiel__contact__item {
text-decoration: none;
font-size: 1rem;
display: inline-flex;
align-items: center; }
.styleguide .header__profiel__contact__icon, .styleguide .header__profiel__contact__icon--phone {
display: inline-flex;
align-items: center;
justify-content: center;
background: #999;
width: 2rem;
height: 2rem;
color: white;
border-radius: 50%;
padding: .5rem;
margin: 0 .5rem 0 0; }
.styleguide .header__profiel__contact__icon--phone {
transform: rotate(90deg); }
.styleguide .header__profiel__contact__icon i, .styleguide .header__profiel__contact__icon--phone i {
font-size: 1rem;
line-height: 1rem;
width: 1rem;
height: 1rem; }
.styleguide .header__profiel__tags {
margin: 1.5rem 0 1rem 250px;
display: flex;
flex-flow: column; }
.styleguide .header__profiel__tags span {
color: #a2a2a2;
font-weight: 600; }
.styleguide .header__profiel__options {
margin-left: auto; }
.styleguide .header__profiel__options > div {
margin: 1.5rem 0 1rem auto;
display: flex;
flex-flow: column; }
.styleguide .header__profiel__options > div > span {
margin: 0 0 .5rem; }
.styleguide .header__profiel__options span {
color: #a2a2a2;
font-weight: 600; }
.styleguide .header__filter {
background-color: #eeeeee;
display: flex;
flex-flow: column;
width: 100%;
padding: 2rem 1.25rem; }
body.dark-mode .styleguide .header__filter {
background-color: #3c3c3c; }
.styleguide .header__filter > div {
display: flex;
flex-flow: row;
padding: .25rem 0;
align-items: flex-end; }
.styleguide .header__filter > div > div:nth-of-type(1) {
flex: 0 1 20%;
padding-right: 3rem;
z-index: 1; }
.styleguide .header__filter > div > div:nth-of-type(2) {
flex: 0 1 20%;
z-index: 0; }
.styleguide .header__filter > div > div:nth-of-type(3) {
margin-left: auto; }
.styleguide .header__filter > div > div > span {
margin-bottom: .5rem;
display: inline-block; }
.styleguide .header__filter > div > div button {
margin: 0 0 0 0; }
.styleguide .header__filter > div > div > .standaard-form, .styleguide .header__filter > div > div.actionbar--variant-3 > div:not(:last-child) {
margin-bottom: 0; }
.styleguide .header__filter-info {
display: flex;
flex-flow: row;
justify-content: space-between;
width: 100%; }
.styleguide .header__filter-info__title {
display: block;
font-weight: 600;
margin-bottom: .5rem; }
.styleguide .header__legenda {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin: 2rem 0; }
@media screen and (min-width: 992px) {
.styleguide .header__legenda {
width: 50%; } }
.styleguide .header__legenda span {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
color: #555555;
margin: 0 1.5rem 1rem 0; }
.styleguide .header__legenda i {
margin-right: .5rem; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide #openMeerFilters {
cursor: pointer; }
.styleguide #closeMeerFilters {
cursor: pointer; }
.styleguide #closeMeerFilters span, .styleguide #closeMeerFilters i {
cursor: pointer; }
.styleguide .filter-window {
position: absolute;
top: 0;
left: 0;
border: 0px;
max-height: 0;
transition: all 0.25s ease-in-out;
box-shadow: 0 0 0.25rem rgba(111, 111, 111, 0);
border: 0px solid #a2a2a2;
overflow: hidden; }
.styleguide .filter-window--active {
max-height: 100vh;
transition: all 0.6s ease-in-out;
border: 1px solid #a2a2a2;
box-shadow: 0 0 0.25rem rgba(111, 111, 111, 0.5); }
.styleguide .filter-window > div {
display: flex;
flex-flow: column;
min-width: 700px; }
.styleguide .filter-window > div > div:first-child {
display: flex;
background-color: #3c3c3c;
padding: 1rem;
flex-flow: row;
justify-content: space-between; }
body.dark-mode .styleguide .filter-window > div > div:first-child {
background: #222222; }
.styleguide .filter-window > div > div:first-child > div {
display: flex;
align-items: center; }
.styleguide .filter-window > div > div:first-child > div span {
font-weight: 600;
color: #ffffff;
margin: 0 .5rem; }
.styleguide .filter-window > div > div:first-child > div i {
color: #ffffff; }
.styleguide .filter-window > div > div:nth-of-type(2) {
display: flex;
background: #f3f3f3;
flex-flow: column;
padding: 1rem; }
body.dark-mode .styleguide .filter-window > div > div:nth-of-type(2) {
background: #3c3c3c; }
.styleguide .filter-window__row {
display: flex;
flex-flow: row;
align-items: flex-end; }
.styleguide .filter-window__row__item {
flex: 0 0 33%; }
.styleguide .filter-window__row__item > div {
display: block;
padding-right: 1rem; }
.styleguide .filter-window__row__item--double {
flex: 0 0 66%; }
.styleguide .filter-window__row__item--double span {
display: inline-block;
margin: .5rem 0; }
.styleguide .filter-window__row__item--double > div {
display: block;
padding-right: 1rem; }
.styleguide .filter-window__row__item input {
width: 100%; }
.styleguide .filter-window__row__item .button {
margin-bottom: .5rem;
height: 2rem; }
.styleguide .filter-window__row__item span {
margin: .5rem 0; }
.styleguide body {
margin: 0px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.2;
color: #222222; }
body.dark-mode .styleguide body {
color: #ffffff; }
.styleguide .fa, .styleguide .fas, .styleguide .far {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1em; }
.styleguide .fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 900; }
.styleguide hr,
.styleguide .hr {
height: 1px;
background: #dfdfdf;
border: none;
display: block;
margin: 1rem 0; }
.styleguide hr__50,
.styleguide .hr__50 {
margin-bottom: 1.7rem; }
.styleguide hr__60,
.styleguide .hr__60 {
margin: 3.5rem 0; }
.styleguide hr--white, .styleguide .hr--white {
background: white; }
body.dark-mode .styleguide hr--white,
body.dark-mode .styleguide .hr--white {
background: rgba(255, 255, 255, 0.4); }
.styleguide .bg--grey {
display: block;
padding: 2rem 1.25rem;
background-color: #eeeeee; }
body.dark-mode .styleguide .bg--grey {
background-color: #151515; }
.styleguide .bg--grey.row,
.styleguide .bg--grey.column,
.styleguide .financieel-table > div > div:nth-of-type(2) > div.bg--grey {
display: flex;
padding: 0 0; }
@-webkit-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-moz-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-ms-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@-o-keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
@keyframes progress {
from {
background-position: 100%; }
to {
background-position: 0%; } }
.styleguide .alert {
padding: .75rem 1rem;
border: 1px solid #eeeeee;
color: #6f6f6f;
font-size: .875rem;
line-height: 1em;
width: auto;
margin: 1.5rem 0 1rem;
border-radius: .25rem;
display: inline-block;
/* Kleuren genereren */ }
.styleguide .alert--absolute {
position: absolute;
width: 100%;
text-align: center;
font-size: 1.25rem;
color: #a2a2a2; }
.styleguide .alert--white {
background-color: white;
border-color: #ffffff;
color: black; }
.styleguide .alert--black {
background-color: #555555;
border-color: #222222;
color: white; }
.styleguide .alert--cyaan {
background-color: #bae1e8;
border-color: #6ebfce;
color: black; }
.styleguide .alert--grey {
background-color: white;
border-color: #f3f3f3;
color: black; }
.styleguide .alert--grey-70 {
background-color: white;
border-color: #d5d5d5;
color: black; }
.styleguide .alert--grey-dark {
background-color: #d5d5d5;
border-color: #a2a2a2;
color: black; }
.styleguide .alert--grey-darker {
background-color: #a2a2a2;
border-color: #6f6f6f;
color: white; }
.styleguide .alert--primary {
background-color: #568daf;
border-color: #33566c;
color: white; }
.styleguide .alert--red {
background-color: #fcdede;
border-color: #f28282;
color: black; }
.styleguide .alert--red-dark {
background-color: #f7b0b0;
border-color: #ed5454;
color: black; }
.styleguide .alert--green {
background-color: #e4f7e3;
border-color: #96e094;
color: black; }
.styleguide .alert--green-darker {
background-color: #6fd56c;
border-color: #34aa31;
color: white; }
.styleguide .alert--avocado {
background-color: #bbd47c;
border-color: #8eb03a;
color: white; }
.styleguide .alert--yellow {
background-color: #fbfcde;
border-color: #f0f282;
color: black; }
.styleguide .alert--yellow-darken {
background-color: #f6f7b0;
border-color: #eaed54;
color: black; }
.styleguide .alert--orange {
background-color: #edbc5d;
border-color: #cd8f17;
color: white; }
.styleguide .alert--blue {
background-color: #cde1f4;
border-color: #79afe2;
color: black; }
.styleguide .alert--light-blue {
background-color: #dee9fc;
border-color: #82aaf2;
color: black; }
.styleguide .alert--niet-actief {
background-color: #fcdede;
border-color: #f28282;
color: black; }
.styleguide .alert--actief {
background-color: #e4f7e3;
border-color: #96e094;
color: black; }
.styleguide .alert--vimeo {
background-color: #59d0fe;
border-color: #02ADEF;
color: white; }
.styleguide .alert--youtube {
background-color: #ff6766;
border-color: #FF0200;
color: white; }
.styleguide .snelfilter {
display: inline-block;
position: relative;
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style: none;
transition: all .64s ease-in-out; }
.styleguide .snelfilter > li > ul {
display: block;
position: absolute;
min-width: 200px;
list-style: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.25s ease-in-out, opacity 0.2s ease-in-out; }
.styleguide .snelfilter > li > ul > li {
padding: .5rem 0 0; }
.styleguide .snelfilter:hover > li > ul {
max-height: 100vh;
opacity: 1;
transition: max-height 0.6s ease-in-out, opacity 0.3s ease-in-out; }
.styleguide .video-preview {
position: relative; }
.styleguide .video-preview__16-9 {
max-height: 200px;
aspect-ratio: 16/9; }
.styleguide .video-preview::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: transform .15s ease-in-out;
content: url('data:image/svg+xml; utf8, ');
z-index: 1; }
.styleguide .video-preview:hover::before {
transform: translate(-50%, -50%) scale(1.1); }
.styleguide .error,
.styleguide input[type='radio'].error,
.styleguide input[type='checkbox'].error {
border-color: #ed5454;
color: #ed5454; }
/*# sourceMappingURL=styleguide.css.map */
/* /custom_modules/referral/css/referral.css */
.sbm-bo[name=frmReferral] .sbm-container {
position: relative; }
.sbm-bo[name=frmReferral] .sbm-container h2 {
font-size: 30px; }
.sbm-bo[name=frmReferral] .sbm-container p {
line-height: 18px; }
.sbm-bo[name=frmReferral] .sbm-container img.referral {
position: absolute;
bottom: 0;
right: 0;
z-index: 1; }
@media screen and (max-width: 1280px) {
.sbm-bo[name=frmReferral] .sbm-container img.referral {
scale: 0.9;
margin-right: -40px;
transform-origin: 50% 100%; } }
/*# sourceMappingURL=referral.css.map */
/* /custom_modules/coachkantoor/css/coachkantoor.css */
@charset "UTF-8";
.sbm-bo a {
cursor: pointer;
color: inherit;
}
.sbm-bo h3 i {
font-size: 16px;
line-height: 16px;
margin: 0 8px -2px 0;
}
.sbm-bo.content {
padding: 0 !important;
border: none !important;
}
.sbm-bo span.tag.status {
color: white;
padding: 5px;
border-radius: 5px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
line-height: 12px;
min-width: 45px;
text-align: center;
font-weight: bold;
background-color: gray;
}
.sbm-bo span.tag.status.neutraal {
background-color: gray;
}
.sbm-bo span.tag.status.pos {
background-color: #a3cb31;
}
.sbm-bo span.tag.status.neg {
background-color: #cb3131;
}
.sbm-bo span.tag.status i {
vertical-align: text-top;
line-height: 12px;
font-size: 0.8em;
margin-left: 4px;
margin-right: 3px;
}
.sbm-bo .sbm-form input[type=text] {
border-color: #bbb;
width: 100%;
text-align: left;
padding: 11px 20px 10px 45px;
background: #fff url("/dexos/images/search.gif") no-repeat 10px center;
background-size: auto auto;
background-size: 25px auto;
border: 1px solid rgba(0, 0, 0, 0.2);
height: 41px;
}
.sbm-bo .sbm-form select {
height: 41px;
width: 100%;
background: #fff;
border: 1px solid black;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.25em;
padding: 5px 8px;
}
.sbm-bo .sbm-form__group {
display: flex;
justify-content: flex-start;
align-items: center;
padding-right: 10px;
}
.sbm-bo .sbm-form__group input {
padding: 5px 20px 5px 8px;
margin-right: 10px;
box-sizing: content-box;
border: 1px solid #dfdfdf;
max-width: 60px;
}
.sbm-bo .sbm-form__prefix {
position: relative;
}
.sbm-bo .sbm-form__prefix::before {
position: absolute;
right: 10px;
bottom: 6px;
color: #757575;
}
.sbm-bo .sbm-form__prefix--kg::before {
content: "Kg";
}
.sbm-bo .sbm-form__prefix--cm::before {
content: "cm";
}
.sbm-bo .sbm-form__prefix--perc::before {
content: "%";
}
.sbm-bo .flex {
display: flex;
justify-content: space-between;
}
.sbm-bo .flex.wrap {
flex-wrap: wrap;
}
.sbm-bo .flex.row {
flex-flow: row wrap;
}
.sbm-bo .flex.column {
flex-flow: column wrap;
}
.sbm-bo .flex.f50 > * {
flex: 0 1 50%;
margin-bottom: 1rem;
padding-right: 1rem;
}
.sbm-bo .flex.g10 > *:not(:last-child) {
padding-right: 20px;
}
.sbm-bo__flex--basic {
display: flex;
flex-grow: 0;
justify-content: flex-start;
}
.sbm-bo .chkr-overzicht .trainersprofiel,
.sbm-bo .chkr-overzicht .lidprofiel,
.sbm-bo .chkr-lidprofiel .trainersprofiel,
.sbm-bo .chkr-lidprofiel .lidprofiel,
.sbm-bo .chkr-benchmarks .trainersprofiel,
.sbm-bo .chkr-benchmarks .lidprofiel {
display: flex;
padding: 20px 0;
}
.sbm-bo .chkr-overzicht .trainersprofiel div:first-child,
.sbm-bo .chkr-overzicht .lidprofiel div:first-child,
.sbm-bo .chkr-lidprofiel .trainersprofiel div:first-child,
.sbm-bo .chkr-lidprofiel .lidprofiel div:first-child,
.sbm-bo .chkr-benchmarks .trainersprofiel div:first-child,
.sbm-bo .chkr-benchmarks .lidprofiel div:first-child {
text-align: left;
}
.sbm-bo .chkr-overzicht .trainersprofiel div:first-child img,
.sbm-bo .chkr-overzicht .lidprofiel div:first-child img,
.sbm-bo .chkr-lidprofiel .trainersprofiel div:first-child img,
.sbm-bo .chkr-lidprofiel .lidprofiel div:first-child img,
.sbm-bo .chkr-benchmarks .trainersprofiel div:first-child img,
.sbm-bo .chkr-benchmarks .lidprofiel div:first-child img {
float: left;
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 20px 0 0;
border: 4px solid black;
object-fit: cover;
object-position: center center;
}
.sbm-bo .chkr-overzicht .trainersprofiel div:first-child label,
.sbm-bo .chkr-overzicht .lidprofiel div:first-child label,
.sbm-bo .chkr-lidprofiel .trainersprofiel div:first-child label,
.sbm-bo .chkr-lidprofiel .lidprofiel div:first-child label,
.sbm-bo .chkr-benchmarks .trainersprofiel div:first-child label,
.sbm-bo .chkr-benchmarks .lidprofiel div:first-child label {
margin-top: 12px;
font-size: 24px;
}
.sbm-bo .chkr-overzicht .trainersprofiel div:first-child span,
.sbm-bo .chkr-overzicht .lidprofiel div:first-child span,
.sbm-bo .chkr-lidprofiel .trainersprofiel div:first-child span,
.sbm-bo .chkr-lidprofiel .lidprofiel div:first-child span,
.sbm-bo .chkr-benchmarks .trainersprofiel div:first-child span,
.sbm-bo .chkr-benchmarks .lidprofiel div:first-child span {
overflow: visible;
display: block;
margin-top: 4px;
}
.sbm-bo .chkr-overzicht .trainersprofiel div:first-child span i,
.sbm-bo .chkr-overzicht .lidprofiel div:first-child span i,
.sbm-bo .chkr-lidprofiel .trainersprofiel div:first-child span i,
.sbm-bo .chkr-lidprofiel .lidprofiel div:first-child span i,
.sbm-bo .chkr-benchmarks .trainersprofiel div:first-child span i,
.sbm-bo .chkr-benchmarks .lidprofiel div:first-child span i {
background-color: #787878;
color: white;
padding: 5px;
border-radius: 50%;
font-size: 9px;
margin-bottom: 4px;
margin-right: 4px;
vertical-align: middle;
}
.sbm-bo .trainersprofiel {
margin-bottom: 20px;
}
.sbm-bo .trainersprofiel__edit {
border-left: 1px solid #cecece;
padding-left: 20px;
margin-left: 40px;
padding-top: 9px;
height: 50px;
margin-top: 13px;
}
.sbm-bo .trainersprofiel__edit__button {
cursor: pointer;
padding: 9px 8px 7px 8px;
width: 16px;
height: 18px;
font-size: 12px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
color: rgba(0, 0, 0, 0.5);
}
.sbm-bo .trainersprofiel__edit__button:hover {
background-color: #ddd;
}
.sbm-bo .calender-contents .event-type {
position: relative;
}
.sbm-bo .calender-contents .event-type.bezet .item {
background-color: #282828 !important;
}
.sbm-bo .calender-contents .event-type.bezet .item .name {
color: #aaa !important;
}
.sbm-bo .calender-contents .event-type.coach-ingepland .item, .sbm-bo .calender-contents .event-type.lid-coach-ingepland .item {
background-color: #8eaf3a !important;
}
.sbm-bo .calender-contents .event-type.coach-ingepland .item .name, .sbm-bo .calender-contents .event-type.lid-coach-ingepland .item .name {
color: #fff !important;
}
.sbm-bo .calender-contents .event-type.lid-coach-ingepland::after {
width: 0;
height: 0;
content: "";
top: 11px;
right: 1px;
position: absolute;
border-style: solid;
border-width: 0 15px 15px 0;
border-color: transparent #fff transparent transparent;
border-radius: 0 3px 0 0;
}
@supports (-webkit-appearance: none) and (not (overflow: -webkit-marquee)) and (not (-ms-ime-align: auto)) and (not (-moz-appearance: none)) {
.sbm-bo .calender-contents .event-type.lid-coach-ingepland::after {
border-radius: 0;
top: 12px;
right: 2px;
}
}
.sbm-bo .calender-contents .event-type.lid-ingepland .item {
background-color: #fff !important;
}
.sbm-bo .calender-contents .event-type.lid-ingepland .item .name {
color: #000 !important;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .coachkantoor-multi {
/*position: absolute;
width: 100%;*/
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .coachkantoor-multi .les {
width: calc(100% - 30px) !important;
left: 0px !important;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .coachkantoor-multi .les.coach-ingepland, .sbm-bo .calender-contents .calender .table .table-container .col .items .coachkantoor-multi .les.lid-coach-ingepland, .sbm-bo .calender-contents .calender .table .table-container .col .items .coachkantoor-multi .les.lid-ingepland {
z-index: 9999999999 !important;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les .titel,
.sbm-bo .calender-contents .calender .table .table-container .col .items .les .ruimte {
display: none;
position: absolute;
font-size: 11px;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.bezet, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.coach-ingepland, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-coach-ingepland, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-ingepland {
border-bottom: 1px solid #333;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.bezet .trainer, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.coach-ingepland .trainer, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-coach-ingepland .trainer, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-ingepland .trainer {
right: 10px;
top: 6px;
left: unset;
display: none;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.bezet .titel, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.coach-ingepland .titel, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-coach-ingepland .titel, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-ingepland .titel {
display: block;
top: 25px;
left: 10px;
opacity: 0.6;
font-size: 10px;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.bezet .ruimte, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.coach-ingepland .ruimte, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-coach-ingepland .ruimte, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-ingepland .ruimte {
display: block;
font-weight: bold;
top: 11px;
left: 10px;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.bezet .event-iconen, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.coach-ingepland .event-iconen, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-coach-ingepland .event-iconen, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-ingepland .event-iconen {
display: none;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.bezet .ico-attendees, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.coach-ingepland .ico-attendees, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-coach-ingepland .ico-attendees, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-ingepland .ico-attendees {
display: none;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.bezet.small .ruimte, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.coach-ingepland.small .ruimte, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-coach-ingepland.small .ruimte, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-ingepland.small .ruimte {
top: 6px;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.bezet {
background-color: #282828 !important;
color: #aaa !important;
border-bottom-color: #aaaaaa70;
box-shadow: none;
cursor: default;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.bezet:hover::before {
display: none !important;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.coach-ingepland, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-coach-ingepland {
background-color: #8eaf3a !important;
color: #fff !important;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.coach-ingepland.half, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.coach-ingepland.third, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-coach-ingepland.half, .sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-coach-ingepland.third {
left: calc(50% - 15px) !important;
width: calc(50% - 15px) !important;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-coach-ingepland::after {
width: 0;
height: 0;
content: "";
top: 0;
right: 0;
position: absolute;
border-style: solid;
border-width: 0 15px 15px 0;
border-color: transparent #fff transparent transparent;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-ingepland {
background-color: #fff !important;
color: #000 !important;
}
.sbm-bo .calender-contents .calender .table .table-container .col .items .les.lid-ingepland .trainer {
display: none;
}
.sbm-bo .calender-contents .calender.kopieermodus .table.header {
background-color: #2e78b2;
}
.sbm-bo .calender-contents .calender.kopieermodus .les {
cursor: default;
}
.sbm-bo .calender-contents .calender.kopieermodus .les.coach-ingepland:hover::before, .sbm-bo .calender-contents .calender.kopieermodus .les.lid-coach-ingepland:hover::before {
display: none;
}
.sbm-bo .chkr-overzicht,
.sbm-bo .chkr-lidprofiel {
overflow: visible;
position: relative;
}
.sbm-bo .chkr-overzicht i,
.sbm-bo .chkr-lidprofiel i {
overflow: visible;
}
.sbm-bo .chkr-overzicht label,
.sbm-bo .chkr-lidprofiel label {
margin-bottom: 0;
}
.sbm-bo .chkr-overzicht .chkr-lidprofiel-inactief,
.sbm-bo .chkr-lidprofiel .chkr-lidprofiel-inactief {
border-top: 1px solid #cecece;
height: 400px;
position: relative;
width: 100%;
}
.sbm-bo .chkr-overzicht .chkr-lidprofiel-inactief p,
.sbm-bo .chkr-lidprofiel .chkr-lidprofiel-inactief p {
font-style: italic;
font-size: 24px;
color: #ccc;
text-align: center;
top: 50%;
margin-top: -30px;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
overflow: visible;
}
.sbm-bo .chkr-overzicht .chkr-lidprofiel-inactief p i,
.sbm-bo .chkr-lidprofiel .chkr-lidprofiel-inactief p i {
display: block;
margin-bottom: 20px;
font-size: 100px;
color: #ccc;
}
.sbm-bo .chkr-overzicht .chkr-lidprofiel-inactief button,
.sbm-bo .chkr-lidprofiel .chkr-lidprofiel-inactief button {
top: 50%;
left: 50%;
margin-top: 120px;
transform: translate(-50%, -50%);
position: absolute;
}
.sbm-bo .chkr-overzicht-samenvattingen,
.sbm-bo .chkr-lidprofiel-samenvattingen {
display: flex;
justify-content: space-between;
overflow: visible;
flex-wrap: wrap;
margin-bottom: -40px;
}
.sbm-bo .chkr-overzicht-samenvatting,
.sbm-bo .chkr-lidprofiel-samenvatting {
display: flex;
flex-direction: column;
text-align: left;
padding: 10px 10px 20px 10px;
border-radius: 5px;
background-color: white;
width: calc(25% - 15px);
margin-bottom: 40px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
position: relative;
}
@media only screen and (max-width: 1440px) {
.sbm-bo .chkr-overzicht-samenvatting,
.sbm-bo .chkr-lidprofiel-samenvatting {
width: calc(50% - 15px);
}
}
.sbm-bo .chkr-overzicht-samenvatting::before,
.sbm-bo .chkr-lidprofiel-samenvatting::before {
content: "";
height: 6px;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: black;
}
.sbm-bo .chkr-overzicht-samenvatting__pro::after,
.sbm-bo .chkr-lidprofiel-samenvatting__pro::after {
position: absolute;
width: 105px;
height: 30px;
content: "PRO";
background-color: #970000;
color: white;
font-weight: bold;
line-height: 32px;
top: 48px;
text-align: center;
transform: rotate(45deg) translateX(-50%);
right: -70px;
font-size: 14px;
}
.sbm-bo .chkr-overzicht-samenvatting__link,
.sbm-bo .chkr-lidprofiel-samenvatting__link {
overflow: visible;
}
.sbm-bo .chkr-overzicht-samenvatting__link--disable,
.sbm-bo .chkr-lidprofiel-samenvatting__link--disable {
overflow: visible;
color: #bbb;
}
.sbm-bo .chkr-overzicht-samenvatting__link--disable span:last-child,
.sbm-bo .chkr-lidprofiel-samenvatting__link--disable span:last-child {
background-color: #bbb !important;
}
.sbm-bo .chkr-overzicht-samenvatting__link__pro,
.sbm-bo .chkr-lidprofiel-samenvatting__link__pro {
overflow: hidden;
position: absolute;
width: 35px;
height: 35px;
right: -10px;
top: 0;
flex: unset;
order: unset;
}
.sbm-bo .chkr-overzicht-samenvatting__link__pro::after,
.sbm-bo .chkr-lidprofiel-samenvatting__link__pro::after {
position: absolute;
width: 60px;
height: 16px;
content: "PRO";
background-color: #970000;
color: white;
font-weight: bold;
line-height: 2.25em;
top: 25px;
text-align: center;
transform: rotate(45deg) translateX(-50%);
right: -40px;
font-size: 8px;
}
.sbm-bo .chkr-overzicht-samenvatting .samenvatting-leden,
.sbm-bo .chkr-lidprofiel-samenvatting .samenvatting-leden {
padding: 20px 0;
text-align: center;
}
.sbm-bo .chkr-overzicht-samenvatting .samenvatting-leden label,
.sbm-bo .chkr-lidprofiel-samenvatting .samenvatting-leden label {
font-size: 24px;
margin-bottom: 9px;
}
.sbm-bo .chkr-overzicht-samenvatting .samenvatting-leden label i,
.sbm-bo .chkr-lidprofiel-samenvatting .samenvatting-leden label i {
vertical-align: text-bottom;
font-size: 28px;
margin-right: 10px;
}
.sbm-bo .chkr-overzicht-samenvatting .samenvatting-leden span,
.sbm-bo .chkr-lidprofiel-samenvatting .samenvatting-leden span {
color: #8eaf3a;
font-size: 48px;
font-weight: bold;
}
.sbm-bo .chkr-overzicht-samenvatting .samenvatting-titel,
.sbm-bo .chkr-lidprofiel-samenvatting .samenvatting-titel {
padding: 20px 10px;
min-height: 68.5px;
}
.sbm-bo .chkr-overzicht-samenvatting .samenvatting-titel label,
.sbm-bo .chkr-lidprofiel-samenvatting .samenvatting-titel label {
font-size: 24px;
}
.sbm-bo .chkr-overzicht-samenvatting .samenvatting-titel label i,
.sbm-bo .chkr-lidprofiel-samenvatting .samenvatting-titel label i {
vertical-align: text-bottom;
font-size: 28px;
margin-right: 10px;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg),
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) {
min-height: 64px;
border-top: 1px solid #ccc;
padding: 15px 10px;
display: flex;
line-height: 24px;
position: relative;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg) > *,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) > * {
align-self: center;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg) .icon,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) .icon {
width: 30px;
order: 1;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg) .icon i,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) .icon i {
font-size: 18px;
overflow: visible;
vertical-align: sub;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg) > i,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) > i {
order: 4;
font-size: 18px;
overflow: visible;
font-weight: normal;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg) > label,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) > label {
flex-grow: 1;
font-weight: bold;
overflow: visible;
order: 2;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg) > label strong,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) > label strong {
font-weight: bold;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg) > label strong i,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) > label strong i {
font-size: 15px;
overflow: visible;
margin-left: 5px;
opacity: 0.8;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg) > label span,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) > label span {
display: block;
margin-top: -7px;
font-size: 12px;
font-weight: normal;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg) > label span:nth-child(3),
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) > label span:nth-child(3) {
font-size: 11px;
font-style: italic;
font-weight: bold;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg) > span:last-child,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) > span:last-child {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #8eaf3a;
color: white;
text-align: center;
font-weight: bold;
order: 4;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg) > div:last-child,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg) > div:last-child {
order: 4;
border-top: none;
line-height: 16px;
text-align: right;
display: flex;
justify-content: center;
flex-direction: column;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg):hover:not(:last-child),
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg):hover:not(:last-child) {
cursor: pointer;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg):hover:not(:last-child)::before,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg):hover:not(:last-child)::before {
font-family: "Font Awesome 5 Free";
content: "";
font-weight: 900;
font-size: 14px;
margin-right: 10px;
order: 3;
align-self: center;
}
.sbm-bo .chkr-overzicht-samenvatting div:not(:first-child):not(.leeg):hover:not(:last-child)::after,
.sbm-bo .chkr-lidprofiel-samenvatting div:not(:first-child):not(.leeg):hover:not(:last-child)::after {
background-color: black;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 10px);
margin: 5px 0;
opacity: 0.05;
border-radius: 5px;
}
.sbm-bo .chkr-overzicht-samenvatting > div:last-child,
.sbm-bo .chkr-lidprofiel-samenvatting > div:last-child {
min-height: 100px !important;
text-align: center;
display: block;
flex: 1;
padding: 0;
position: relative;
}
.sbm-bo .chkr-overzicht-samenvatting > div:last-child button,
.sbm-bo .chkr-lidprofiel-samenvatting > div:last-child button {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 70%;
}
.sbm-bo .chkr-overzicht-samenvatting > div:last-child button i,
.sbm-bo .chkr-lidprofiel-samenvatting > div:last-child button i {
float: right;
margin-top: 10px;
}
.sbm-bo .chkr-overzicht-samenvatting div.leeg,
.sbm-bo .chkr-lidprofiel-samenvatting div.leeg {
flex-basis: 100%;
position: relative;
}
.sbm-bo .chkr-overzicht-samenvatting div.leeg > div,
.sbm-bo .chkr-lidprofiel-samenvatting div.leeg > div {
width: 200px;
margin-top: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #999;
}
.sbm-bo .chkr-overzicht-samenvatting div.leeg > div i,
.sbm-bo .chkr-lidprofiel-samenvatting div.leeg > div i {
font-size: 64px;
font-weight: normal;
}
.sbm-bo .chkr-overzicht-samenvatting div.leeg > div p.kop,
.sbm-bo .chkr-lidprofiel-samenvatting div.leeg > div p.kop {
font-weight: bold;
font-size: 18px;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child),
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) {
position: relative;
overflow: visible;
padding: 5px 10px;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child)::before,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child)::before {
content: "" !important;
display: block;
height: calc(100% + 2px);
width: 58px;
background-color: white;
position: absolute;
top: -1px;
left: 0;
z-index: 1;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon {
margin-left: 2px;
margin-right: 15px;
text-align: center;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-green::before,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-green::before {
background-color: #8baf0d;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-black::before,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-black::before {
background-color: #000;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-red::before,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-red::before {
background-color: #d54346;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-purple::before,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-purple::before {
background-color: purple;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-orange::before,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-orange::before {
background-color: orange;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-blue::before,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon.bg-blue::before {
background-color: blue;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon::after,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon::after {
position: absolute;
width: 2px;
content: "";
background-color: black;
top: -50%;
height: 100%;
left: 26px;
z-index: 1;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon i,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon i {
position: relative;
color: white;
z-index: 3;
font-size: 16px;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon::before,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) span.icon::before {
content: "";
height: 35px;
width: 35px;
border-radius: 50%;
position: absolute;
margin-left: -10px;
margin-top: -5px;
z-index: 2;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child):nth-child(2) span.icon::after,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child):nth-child(2) span.icon::after {
display: none;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child):hover::after,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child):hover::after {
width: calc(100% - 58px);
margin-left: 58px;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) > label,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) > label {
margin-left: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.sbm-bo .chkr-overzicht-samenvatting.logboek div:not(:first-child):not(:last-child) > div:last-child,
.sbm-bo .chkr-lidprofiel-samenvatting.logboek div:not(:first-child):not(:last-child) > div:last-child {
width: 110px;
}
.sbm-bo .chkr-overzicht-samenvattingen .dubbel,
.sbm-bo .chkr-lidprofiel-samenvattingen .dubbel {
width: calc(25% - 15px);
min-height: 800px;
}
@media only screen and (max-width: 1440px) {
.sbm-bo .chkr-overzicht-samenvattingen .dubbel,
.sbm-bo .chkr-lidprofiel-samenvattingen .dubbel {
width: calc(50% - 15px);
}
}
.sbm-bo .chkr-overzicht-samenvattingen .dubbel .chkr-lidprofiel-samenvatting,
.sbm-bo .chkr-lidprofiel-samenvattingen .dubbel .chkr-lidprofiel-samenvatting {
width: 100%;
height: calc(50% - 30px);
}
.sbm-bo .chkr-overzicht-samenvattingen .dubbel .chkr-lidprofiel-samenvatting:first-child,
.sbm-bo .chkr-lidprofiel-samenvattingen .dubbel .chkr-lidprofiel-samenvatting:first-child {
margin-bottom: 20px;
}
.sbm-bo .chkr-benchmarks {
overflow: visible;
}
.sbm-bo .chkr-benchmarks label {
margin-bottom: 0;
}
.sbm-bo .chkr-benchmarks .lidprofiel {
padding-bottom: 0;
}
.sbm-bo .chkr-benchmarks-filters {
margin: 20px 0 30px;
width: calc(50% - 12px);
column-count: 2;
column-gap: 24px;
}
.sbm-bo .chkr-benchmarks p.niets-gevonden {
font-style: italic;
font-size: 24px;
color: #ccc;
text-align: center;
padding: 100px 0;
border: 1px solid #d0d0d0;
border-top-width: 37px;
margin-top: 0;
}
.sbm-bo .chkr-benchmarks p.niets-gevonden i {
display: block;
margin-bottom: 20px;
font-size: 100px;
color: #ddd;
}
.sbm-bo .chkr-benchmarks-overzicht {
column-count: 2;
column-gap: 24px;
}
.sbm-bo .chkr-benchmarks-overzicht > div {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.sbm-bo .chkr-benchmarks-overzicht table {
font-size: 14px;
border-spacing: 0px;
border-collapse: separate;
width: 100%;
margin-bottom: 24px;
}
.sbm-bo .chkr-benchmarks-overzicht table tr td {
border: 1px solid #bfbfbf;
}
.sbm-bo .chkr-benchmarks-overzicht table tr td {
border: 1px solid #ddd;
border-top: 0;
}
.sbm-bo .chkr-benchmarks-overzicht table tr td:not(:first-child) {
border-left: 0;
}
.sbm-bo .chkr-benchmarks-overzicht table tr td:not(:last-child) {
border-right: 0;
}
.sbm-bo .chkr-benchmarks-overzicht table th {
background-color: #d0d0d0;
padding: 10px 15px;
}
.sbm-bo .chkr-benchmarks-overzicht table th:first-child {
width: 33%;
}
.sbm-bo .chkr-benchmarks-overzicht table th:last-child {
width: 33%;
text-align: right;
}
.sbm-bo .chkr-benchmarks-overzicht table td {
padding: 15px 15px;
}
.sbm-bo .chkr-benchmarks-overzicht table td:last-child {
width: 55px;
padding-left: 0;
text-align: right;
}
.sbm-bo .chkr-benchmarks-overzicht table td:nth-child(3) {
text-align: right;
}
.sbm-bo.chkr-logboek {
padding: 20px;
}
.sbm-bo.chkr-logboek > div:first-child {
margin-bottom: 10px;
position: relative;
border-bottom: 3px solid black;
padding: 5px 0;
}
.sbm-bo.chkr-logboek > div:first-child label {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
display: block;
}
.sbm-bo.chkr-logboek > div:first-child label i {
font-size: 28px;
margin-right: 8px;
vertical-align: sub;
}
.sbm-bo.chkr-logboek > div:first-child div {
position: absolute;
top: 0;
right: 0;
}
.sbm-bo.chkr-logboek > div:first-child div strong {
margin-right: 10px;
}
.sbm-bo.chkr-logboek > div:first-child div select {
padding: 10px 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.25em;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs {
display: flex;
flex-direction: column;
text-align: left;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div {
min-height: 64px;
border-bottom: 1px solid #ccc;
position: relative;
overflow: visible;
padding: 5px 10px 5px 0;
display: flex;
line-height: 24px;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div:last-child {
border: none;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div > * {
align-self: center;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div span.icon {
margin-left: 4px;
margin-right: 15px;
text-align: center;
width: 30px;
order: 1;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div span.icon.bg-green::before {
background-color: #8baf0d;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div span.icon.bg-black::before {
background-color: #000;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div span.icon.bg-red::before {
background-color: #d54346;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div span.icon.bg-purple::before {
background-color: purple;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div span.icon.bg-orange::before {
background-color: orange;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div span.icon.bg-blue::before {
background-color: blue;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div span.icon::after {
position: absolute;
width: 2px;
content: "";
background-color: black;
top: -50%;
height: 100%;
left: 16px;
z-index: 1;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div span.icon i {
position: relative;
color: white;
z-index: 3;
font-size: 18px;
overflow: visible;
vertical-align: sub;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div span.icon::before {
content: "";
height: 35px;
width: 35px;
border-radius: 50%;
position: absolute;
margin-left: -9px;
margin-top: -6px;
z-index: 2;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div > label {
flex-grow: 1;
font-weight: bold;
margin-left: 20px;
order: 2;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div > label strong {
font-weight: bold;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div > label span {
display: block;
margin-top: -7px;
font-size: 12px;
font-weight: normal;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div > label span:nth-child(3) {
font-size: 11px;
font-style: italic;
font-weight: bold;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div > div:nth-child(3),
.sbm-bo.chkr-logboek .chkr-logboek-logs > div > div:nth-child(4) {
order: 4;
border-top: none;
line-height: 16px;
text-align: right;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div .opties {
display: none;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div:hover {
cursor: pointer;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div:hover::after {
background-color: black;
content: "";
position: absolute;
top: 0;
left: 0;
height: calc(100% - 10px);
margin: 5px 0;
width: calc(100% - 58px);
margin-left: 58px;
opacity: 0.05;
border-radius: 5px;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div:hover .opties {
display: block;
margin-left: 20px;
margin-right: -10px;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div:hover .opties a {
padding: 18px 20px;
border-left: 2px solid white;
height: 100%;
float: left;
vertical-align: middle;
position: relative;
color: black;
font-size: 16px;
float: left;
z-index: 1;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div:hover .opties a i {
vertical-align: middle;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div:hover .opties a:hover {
background-color: #ddd;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div:hover .opties a:last-child {
border-radius: 0 5px 5px 0;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div::before {
content: "";
display: block;
height: calc(100% + 2px);
width: 58px;
background-color: white;
position: absolute;
top: -1px;
left: 0;
z-index: 1;
}
.sbm-bo.chkr-logboek .chkr-logboek-logs > div:nth-child(1) span.icon::after {
display: none;
}
.sbm-bo.chktr-meetmomenten {
min-width: 1024px;
display: flex;
justify-content: space-between;
background-color: #e9e9e9;
}
.sbm-bo.chktr-meetmomenten::after {
content: "";
position: absolute;
width: 20px;
background-color: #e9e9e9;
height: calc(100% - 51px);
left: 355px;
margin-top: -1px;
bottom: 0;
}
.sbm-bo.chktr-meetmomenten .sbm-container {
padding: 0;
}
.sbm-bo.chktr-meetmomenten > div {
padding: 30px;
background-color: white;
}
.sbm-bo.chktr-meetmomenten > div:first-child {
width: 340px;
margin-right: 20px;
border-right: 1px solid #ccc;
}
.sbm-bo.chktr-meetmomenten > div:first-child h2 {
font-size: 24px;
margin-top: 0;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten a {
background-color: #f3f3f3;
padding: 16px 19px;
color: black;
display: block;
margin-bottom: 10px;
font-weight: bold;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
position: relative;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten a:not(.selected):hover {
background-color: #ddd;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten a.selected {
cursor: default;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten a.selected::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: black;
font-size: 18px;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten a.nieuw {
background-color: black;
color: white;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten a.nieuw i {
vertical-align: text-top;
margin-right: 5px;
overflow: visible;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten a.nieuw:not(.selected):hover {
color: black;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten a.nieuw::after {
color: white;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten + div {
border-bottom: 1px solid #ccc;
padding: 15px 0 20px;
margin-bottom: 20px;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten + div a {
color: #5d9fd3;
cursor: pointer;
font-weight: bold;
text-decoration: underline;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten + div a:hover {
opacity: 0.8;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten + div a:first-child {
float: left;
}
.sbm-bo.chktr-meetmomenten > div:first-child .meetmomenten + div a:last-child {
float: right;
}
.sbm-bo.chktr-meetmomenten > div:last-child {
flex-grow: 1;
border-left: 1px solid #ccc;
}
.sbm-bo.chktr-meetmomenten > div:last-child h2 {
display: flex;
font-size: 24px;
margin-top: 0;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.sbm-bo.chktr-meetmomenten > div:last-child h2 span {
flex: 1 0 auto;
}
.sbm-bo.chktr-meetmomenten > div:last-child h2 i {
vertical-align: text-top;
margin-right: 10px;
font-size: 30px;
}
.sbm-bo.chktr-meetmomenten > div:last-child h2 i:last-of-type {
align-self: flex-end;
cursor: pointer;
font-size: 1.2rem;
}
.sbm-bo.chktr-meetmomenten > div:last-child h3 {
font-size: 16px;
}
.sbm-bo.chktr-meetmomenten > div:last-child h3 i {
font-size: 18px;
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos {
display: grid;
grid-column-gap: 1rem;
grid-template-columns: auto auto auto;
margin: 40px 0;
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos > div {
position: relative;
cursor: pointer;
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos > div::before {
font-size: 30px;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transition: opacity 0.1s ease;
transform: translate(-50%, calc(-50% - 10px));
content: "";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
z-index: 1;
color: white;
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos > div::after {
opacity: 0;
content: attr(data-titel);
transition: opacity 0.1s ease;
display: block;
position: absolute;
background-color: #222222;
color: rgba(255, 255, 255, 0.8);
text-align: center;
line-height: 165px;
width: 100%;
height: 100%;
top: 0;
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos > div:hover::after {
opacity: 1;
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos > div:hover::before {
opacity: 0.8;
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos img {
display: block;
width: 196px;
height: 122px;
background-color: #f3f3f3;
border: 1px solid #ccc;
object-fit: cover;
cursor: pointer;
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos a {
display: block;
width: 196px;
height: 122px;
background-color: #f3f3f3;
border: 1px solid #ccc;
position: relative;
transition: opacity 0.1s ease;
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos a i {
font-size: 30px;
opacity: 0.5;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% - 10px));
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos a::after {
content: attr(data-titel);
position: absolute;
left: 50%;
top: 50%;
opacity: 0.5;
transform: translate(-50%, calc(-50% + 20px));
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos a:hover {
opacity: 0.5;
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos.geblokkeerd a:hover {
opacity: 1;
}
.sbm-bo.chktr-meetmomenten > div:last-child .voortgangfotos.geblokkeerd a:hover::before {
content: "Sla eerst de metingen op.";
color: rgba(255, 255, 255, 0.9);
background-color: #222222;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 122px;
z-index: 1;
}
.sbm-bo.chktr-meetmomenten > div:last-child table {
border-spacing: 0px;
border-collapse: separate;
width: 100%;
}
.sbm-bo.chktr-meetmomenten > div:last-child table tr th, .sbm-bo.chktr-meetmomenten > div:last-child table tr td {
border-bottom: 1px solid #ccc;
padding: 20px 0;
}
.sbm-bo.chktr-meetmomenten > div:last-child table tr th {
font-size: 16px;
font-weight: bold;
}
.sbm-bo.chktr-meetmomenten > div:last-child table tr th:first-child {
width: 200px;
}
.sbm-bo.chktr-meetmomenten > div:last-child table tr th:nth-child(2) {
width: 100px;
}
.sbm-bo.chktr-meetmomenten > div:last-child table tr td {
font-size: 14px;
position: relative;
}
.sbm-bo.chktr-meetmomenten > div:last-child table tr td > div.sbm-formrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.sbm-bo.chktr-meetmomenten > div:last-child table tr td > div.sbm-formrow input {
background-color: #efefef;
}
.sbm-bo.chktr-meetmomenten > div:last-child table tr td > div.sbm-formrow .calender-ico {
position: absolute;
}
.sbm-bo.chktr-meetmomenten > div:last-child table tr td button.small {
height: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top: 2px;
}
.sbm-bo.chktr-meetmomenten > div:last-child table tr:last-child td {
border: none;
}
.sbm-bo.chktr-meetmomenten > div:last-child table.invoer tr td:nth-child(2) {
width: 210px;
}
.sbm-bo.voortgangfotos {
padding: 20px;
}
.sbm-bo.voortgangfotos select {
padding: 10px 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.25em;
}
.sbm-bo.voortgangfotos > div:first-child {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.sbm-bo.voortgangfotos > div:nth-child(2) {
display: grid;
grid-column-gap: 1rem;
grid-template-columns: repeat(3, calc(31% + 5px));
width: 100%;
}
.sbm-bo.voortgangfotos > div:nth-child(2) .foto {
width: 100%;
height: 360px;
background-color: #eee;
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
.sbm-bo.voortgangfotos > div:nth-child(2) .foto > * {
width: 100%;
}
.sbm-bo.voortgangfotos > div:nth-child(2) .foto label {
padding: 20px;
padding-bottom: 50px;
display: block;
height: 75px;
}
.sbm-bo.voortgangfotos > div:nth-child(2) .foto label span:first-child {
font-weight: bold;
font-size: 16px;
display: block;
margin-bottom: 2px;
}
.sbm-bo.voortgangfotos > div:nth-child(2) .foto label span:last-child {
font-size: 11px;
font-weight: normal;
display: block;
}
.sbm-bo.voortgangfotos > div:nth-child(2) .foto img {
width: 100%;
border: none;
object-fit: contain;
flex-grow: 1;
border-top: 1px solid #fff;
background-color: #fff;
border: 1px solid #eee;
}
.collapse {
display: flex;
flex-flow: column;
margin-top: 1px;
cursor: pointer;
}
.collapse * {
cursor: pointer;
}
.collapse.closed .collapse__header > div i {
transform: rotate(270deg);
}
.collapse.closed .collapse__body {
overflow: hidden !important;
padding-top: 0;
padding-bottom: 0;
transform-origin: top;
height: 0;
margin-bottom: 0;
margin-top: 0;
}
.collapse__header {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
background: #e8e8e8;
font-size: 1rem;
height: 4rem;
border-bottom: 1px solid white;
}
.collapse__header > div {
display: flex;
flex-flow: row;
align-items: center;
flex: 1 0 auto;
padding-left: 1.5rem;
}
.collapse__header > div i {
transition: all 0.2s ease-in-out;
transform: rotate(360deg);
font-size: 1rem;
vertical-align: middle;
}
.collapse__header > div label {
margin: 0 0 0 1.5rem !important;
}
.collapse__header a {
border-left: 2px solid white;
padding: 0 1.5rem;
height: 100%;
align-items: center;
display: flex;
text-decoration: none;
color: black;
}
.collapse__header a:hover {
background: #dddddd;
}
.collapse__header__title-wrap label {
flex-basis: 85%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 0 !important;
}
.collapse__body {
padding: 1.5rem 6rem 1.5rem 1.5rem;
background: #f1f1f1;
font-size: 0.75rem;
transition: padding-top 0.2s ease-in-out, padding-bottom 0.2s ease-in-out;
height: auto;
margin-bottom: 1px;
margin-top: 1px;
}
.chktr-flex {
display: flex;
}
.chktr-flex--end {
justify-content: flex-end;
}
.chktr-flex--end > * {
margin: 0 10px;
}
.chktr-empty {
min-width: 768px;
display: flex;
justify-content: space-between;
flex-flow: column wrap;
align-items: center;
padding: 6rem 5rem;
}
.chktr-empty__icon i {
font-size: 8rem;
color: #bbbbbb;
}
.chktr-empty__melding__wrapper {
padding: 1.25rem 0 1.5rem;
border-bottom: 1px solid #e2e2e2;
width: 100%;
text-align: center;
margin: 0 0 2rem;
}
.chktr-empty__melding {
font-size: 1.25rem;
color: #bbbbbb;
}
/* /custom_modules/systeemberichten/css/systeemberichten.css */
@keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; } }
.SBMNOTIFY {
position: fixed;
z-index: 40;
top: 0;
right: 0;
width: 0;
padding: 30px 0;
height: calc(100vh - 60px);
margin-top: 60px;
box-sizing: border-box;
transition: width 0.5s, padding 0.5s;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); }
.SBMNOTIFY .foutmelding {
padding: 115px 20px 40px 20px;
color: #aa0000;
border-radius: 10px;
font-weight: bold;
min-width: 410px;
text-align: center;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
opacity: 0.5;
font-size: 14px; }
.SBMNOTIFY .foutmelding i {
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
font-size: 56px; }
.SBMNOTIFY * {
box-sizing: border-box; }
.SBMNOTIFY.notificaties {
background-color: rgba(0, 0, 0, 0.6);
width: 426px;
padding: 40px 30px 30px 0; }
.SBMNOTIFY.notificaties > p {
margin-left: 30px;
color: white;
width: 365px;
white-space: nowrap;
background-color: #414141;
border-radius: 5px;
text-align: center;
line-height: 50px;
font-size: 14px; }
.SBMNOTIFY.notificaties > p.ongelezen {
font-weigth: bold;
cursor: pointer; }
.SBMNOTIFY.notificaties > p.ongelezen:hover {
opacity: 0.8; }
.SBMNOTIFY.notificaties .notificatie {
background-color: white;
border-radius: 5px;
padding: 20px;
margin-left: 30px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.25);
min-width: 364px;
margin-top: 0px;
transition: margin 0.5s;
position: relative; }
.SBMNOTIFY.notificaties .notificatie::before {
opacity: 0;
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
position: absolute;
top: -2px;
right: 20px;
margin-top: 9px;
transform: rotate(135deg);
transition: top 0.5s, margin 0.5s; }
.SBMNOTIFY.notificaties .notificatie:first-child::before {
opacity: 1;
margin-top: -10px; }
.SBMNOTIFY.notificaties .notificatie.sluiten::before {
top: 17px; }
.SBMNOTIFY.notificaties .notificatie h1 {
margin: 0;
position: relative;
font-size: 16px; }
.SBMNOTIFY.notificaties .notificatie .samenvatting {
width: 300px;
margin: 20px 0 20px;
line-height: 16px; }
.SBMNOTIFY.notificaties .notificatie .badge {
float: right;
border-radius: 50%;
background-color: red;
color: white;
height: 18px;
width: 18px;
line-height: 18px;
text-align: center; }
.SBMNOTIFY.notificaties .notificatie a.leesmeer,
.SBMNOTIFY.notificaties .notificatie a.sluiten {
display: inline-block;
padding: 7px 10px;
background-color: black;
color: white;
font-weight: bold;
width: 140px;
text-align: center;
border-radius: 5px;
text-decoration: none; }
.SBMNOTIFY.notificaties .notificatie a.leesmeer:hover,
.SBMNOTIFY.notificaties .notificatie a.sluiten:hover {
opacity: 0.7; }
.SBMNOTIFY.notificaties .notificatie a.sluiten {
background-color: grey;
margin-left: 10px; }
.SBMNOTIFY.notificaties .notificatie a.sluiten:hover {
opacity: 0.9; }
.SBMNOTIFY.notificaties p.alles-sluiten {
padding: 54px 0 20px;
position: relative;
cursor: pointer; }
.SBMNOTIFY.notificaties p.alles-sluiten:hover {
opacity: 0.8; }
.SBMNOTIFY.notificaties p.alles-sluiten i {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 31px;
margin-top: -23px; }
.SBMNOTIFY.notificaties p.alles-sluiten a {
color: white;
border-bottom: 1px solid white;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
margin-top: 40px; }
.SBMNOTIFY.notificaties.sluiten {
width: 0;
padding: 40px 0 30px; }
.SBMNOTIFY.berichten {
background-color: white;
transition: width 0.5s;
width: 465px;
padding: 0; }
.SBMNOTIFY.berichten::before {
content: "";
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
z-index: -1;
transition: opacity 0.5s;
animation: fadeIn 0.5s linear; }
.SBMNOTIFY.berichten .titel {
font-size: 24px;
font-weight: bold;
min-width: 465px;
padding: 20px 30px;
background-color: #ededed; }
.SBMNOTIFY.berichten .titel i {
font-size: 20px; }
.SBMNOTIFY.berichten .pagina {
display: flex;
flex-direction: column;
height: calc(100% - 148px);
align-content: stretch;
background-color: white;
width: 100%;
overflow: hidden;
overflow-y: auto;
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: thin;
/* IE and Edge */
scrollbar-width: thin;
/* Firefox */
scrollbar-color: #cecece white;
/* Hide scrollbar for Chrome, Safari and Opera */
/* Track */
/* Handle */ }
.SBMNOTIFY.berichten .pagina::-webkit-scrollbar {
width: 5px; }
.SBMNOTIFY.berichten .pagina::-webkit-scrollbar-track {
background: #fff; }
.SBMNOTIFY.berichten .pagina::-webkit-scrollbar-thumb {
background: #cecece; }
.SBMNOTIFY.berichten .paginasering {
position: relative;
background-color: #ededed;
height: 80px;
line-height: 70px;
padding-left: 30px;
padding-top: 4px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); }
.SBMNOTIFY.berichten .paginasering .arrow {
float: none;
font-size: 24px;
font-weight: bold;
margin-right: 20px;
padding: 3px 16px 5px;
background-color: #dadada;
border-radius: 5px;
text-decoration: none;
color: #333333; }
.SBMNOTIFY.berichten .paginasering .arrow:hover {
opacity: .8; }
.SBMNOTIFY.berichten .paginasering .arrow.not-active,
.SBMNOTIFY.berichten .paginasering .arrow.not-active:hover {
cursor: default;
opacity: .5; }
.SBMNOTIFY.berichten .paginasering span {
float: none;
margin-right: 30px;
margin-left: 10px; }
.SBMNOTIFY.berichten .bericht {
padding: 30px;
min-width: 465px;
flex-grow: 1; }
.SBMNOTIFY.berichten .bericht:nth-child(2n) {
background-color: #ededed; }
.SBMNOTIFY.berichten .bericht h1 {
margin: 0;
font-size: 16px; }
.SBMNOTIFY.berichten .bericht .tag {
float: right;
border-radius: 5px;
font-size: 10px;
padding: 4px 8px;
text-transform: uppercase; }
.SBMNOTIFY.berichten .bericht .tag + .badge {
margin-right: -8px;
margin-top: -8px;
font-size: 13px; }
.SBMNOTIFY.berichten .bericht .tag.releasenotes {
background-color: #dde4fe;
color: #0029c3;
border: 1px solid #0029c310; }
.SBMNOTIFY.berichten .bericht .tag.nieuws {
color: #518618;
background-color: #cee5b5;
border: 1px solid #51861810; }
.SBMNOTIFY.berichten .bericht .tag.belangrijk {
background-color: #ffd5d5;
border: 1px solid #ff000010;
color: #ff0000; }
.SBMNOTIFY.berichten .bericht .samenvatting {
width: 300px;
margin: 20px 0 20px;
line-height: 16px; }
.SBMNOTIFY.berichten .bericht .badge {
float: right;
border-radius: 50%;
background-color: red;
color: white;
height: 18px;
width: 18px;
line-height: 18px;
text-align: center; }
.SBMNOTIFY.berichten .bericht .datum {
float: right;
font-size: 11px; }
.SBMNOTIFY.berichten .bericht a.leesmeer {
display: inline-block;
padding: 7px 10px;
background-color: black;
color: white;
font-weight: bold;
width: 140px;
text-align: center;
border-radius: 5px;
text-decoration: none; }
.SBMNOTIFY.berichten .bericht a.leesmeer:hover {
opacity: 0.7; }
.SBMNOTIFY.berichten.sluiten {
width: 0; }
.SBMNOTIFY.berichten.sluiten::before {
opacity: 0; }
.SBMNOTIFY.berichten.sluiten .berichtopen {
width: 0;
padding: 30px 0; }
.SBMNOTIFY .berichtopen {
position: absolute;
top: 0;
height: 100%;
right: 100%;
background-color: white;
padding: 30px 40px 30px 0;
width: 517px;
border-right: 1px solid #ddd;
transition: width 0.5s, padding 0.5s;
overflow: hidden;
overflow-y: auto;
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: thin;
/* IE and Edge */
scrollbar-width: thin;
/* Firefox */
scrollbar-color: #cecece white;
/* Hide scrollbar for Chrome, Safari and Opera */
/* Track */
/* Handle */ }
.SBMNOTIFY .berichtopen::-webkit-scrollbar {
width: 5px; }
.SBMNOTIFY .berichtopen::-webkit-scrollbar-track {
background: #fff; }
.SBMNOTIFY .berichtopen::-webkit-scrollbar-thumb {
background: #cecece; }
.SBMNOTIFY .berichtopen.leeg {
width: 0;
padding: 30px 0; }
.SBMNOTIFY .berichtopen h1 {
min-width: 450px;
margin-left: 30px; }
.SBMNOTIFY .berichtopen .content {
font-size: 14px;
margin-top: 20px;
min-width: 450px;
margin-left: 30px;
padding-bottom: 20px; }
.SBMNOTIFY .berichtopen .content figure {
margin: 0; }
.SBMNOTIFY .berichtopen .content img {
max-width: 100%;
margin: 20px 0;
border: 1px solid #ccc;
padding: 3px;
cursor: pointer; }
.SBMNOTIFY .berichtopen .content img:hover {
opacity: 0.8; }
/*# sourceMappingURL=systeemberichten.css.map */