@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap');
h1, h2, h3, h4, h5, h6 { 
    font-family: 'Fira Sans', sans-serif!important;
}

@media screen and (max-width: 600px) {
    body {
        margin-left:0px!important;
    }
    #freshworks-container {
        display:none;
    }
}



html {
    background-color: #f8f9fa;
    min-height: 100%;
}
html, body, div, p, input, div, select, table, tr, td, th, option, a {
    font-family: 'Fira Sans', sans-serif!important;
}

body {
    padding-bottom: 10%;
    overflow-y: scroll;
}

*+h1, *+h2, *+h3, *+h4, *+h5, *+h6 {margin-top:0px;}

.light {color:white!important;}

.headerbg { background-color: #2F48D1; }
.headerbgShop { background-color: #2F48D1; }
.headerbgGamification {background-color: #2F48D1;}

.headerbgWorkout {background-color: #2F48D1;}
.headerbgManagement {background-color: #1523FF;}
.headerbalk {height: 116px;}

.bg-purple { background-color: #400150!important; }
.bg-green { background-color: #2DD175!important; }
.grib-upgrade {color: #FFFFFF;}
.grib-upgrade a {padding:20px;color:#FFFFFF;font-size: 20pt;font-weight: 500;display: block;width: 100%;}

.upgrade-button {
    position: absolute;
    top:0px;
    right: 30px;
    color:white;
    padding:7px;
    border-radius: 5px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top:0px;display: block;
    background-color: #0f9e5b;
    font-size: 10pt;
    font-weight: 400;
    text-align: center;
    padding-right: 10px;
    padding-left: 10px;}

.upgrade-button:hover {
    background-color:#0eaa5c;
    color: #FFFFFF;}

.onboarding {
    position: fixed;
    opacity: 1!important;
    background-color:#FFFFFF;
    z-index: 2000;
    width: 100%;
    max-width: 350px;
    padding:10px;
    color:#444444;
    -webkit-box-shadow: 7px 4px 20px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 4px 20px -8px rgba(0,0,0,0.75);
box-shadow: 7px 4px 20px -8px rgba(0,0,0,0.75);
top:20%;
right: 30px;

}
.onboarding a {color:#444444!important;}
.onboarding .content {
    padding:20px;
}
.onboarding .content h5 {
    color:#6b46bc;
}
.onboarding ul {padding: 0px;margin:0px;margin-top: 20px;}
.onboarding ul li {list-style-type: none;padding-right: 10px;}
.onboarding .complete {color:lightgray;text-decoration: line-through;}
.onboarding .complete i {color:#19ccc1;}


/*gemiddelde op feedback statistieken pagina*/
.stats .period a{
 display: block;
 background-color: #ffffff;
 color:#6b46bc;
font-weight: 500;
 padding:5px;
border-bottom: 1px solid #0f9e5b;
margin-bottom: 4px;
}

.stats .period a:hover {
     background-color:#6b46bc;
     color:#FFFFFF;
}

.stats .period .active {
     background-color:#6b46bc;
     color:#FFFFFF;
}



.gemiddelde {display: table;}
.cijfer {
    display: table-cell;
    vertical-align: center;
    font-size: 40pt;
    text-align: center;
    width: 150px;
    height: 50px;
    margin:auto;
    float: left;
    clear: both;
    font-weight: 400;
    font-size: 45px;
    color: #44318d;
}

.uk-navbar {
    background-color: transparent;
}

.uk-navbar-nav>li>a {
    font-weight: 500;
    color:#fff;
    font-size: 16px;
}

.uk-navbar-nav>li.uk-active>a {background-color: transparent;}

.uk-navbar-nav>li:hover >a{color: #19CCC1; background-color: transparent;}

.navigatie, 
.navigatie li, 
.navigatie li a 
{
    height: 116px;line-height: 116px;
}

.bgimage {background-image: url(../images/sfeer.png);background-size: cover;}

.header {}

.gradient {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4787a4+0,19ccc1+100 */
    background: #1D4F96; /* Old browsers */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#400150', endColorstr='#1D4F96',GradientType=1 ); /* IE6-9 */
}

.gamificationGradient {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4787a4+0,19ccc1+100 */
    background: #e28327; /* Old browsers */
    background: -moz-linear-gradient(left, #e28327 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #e28327 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #e28327 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e28327', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.workoutGradient {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4787a4+0,19ccc1+100 */
    background: #400150; /* Old browsers */
    background: -moz-linear-gradient(left, #400150 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #400150 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #400150 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#400150', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.cashRegisterGradient {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4787a4+0,19ccc1+100 */
    background: #8CC14C; /* Old browsers */
    background: -moz-linear-gradient(left, #8CC14C 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #8CC14C 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #8CC14C 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8CC14C', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.managementGradient {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4787a4+0,19ccc1+100 */
    background: #1523FF; /* Old browsers */
    background: -moz-linear-gradient(left, #1523FF 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #1523FF 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #1523FF 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1523FF', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.header h1 {
    color:#FFFFFF;
    font-weight:400;
}

h2.line.uk-margin-large-bottom {
    font-size: 26px;
}

li.gradient {
    border-bottom:0px solid #44c0bd;
    border-top:0px solid #44c0bd;
    background: -moz-linear-gradient(left, transparent 0%, transparent 0%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, transparent 0%,transparent 0%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, transparent 0%,transparent 0%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='transparent',GradientType=0 ); /* IE6-9 */
    background: white; /* Old browsers */
    color:#2f3e46cc!important;
    font-weight: 400;
}


.ukbuttonmenu {
    padding-top:0px!important;
    padding-bottom:0px!important;
}


.tag {
    background-color: #E0E0E0;
    cursor: pointer;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding-left: 12px;
    padding-top:6px;
    padding-right: 12px;
    padding-bottom:6px;
    font-weight: 500;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.uk-button-gray {
    background-color: #E0E0E0;
    cursor: pointer;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding-left: 12px;
    padding-top:6px;
    padding-right: 12px;
    padding-bottom:6px;
    font-weight: 500;
    border: 1px solid transparent;
    box-sizing: border-box;
}
.uk-button-primary {
    background-color: #2f49d1;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding-left: 12px;
    padding-top:6px;
    padding-right: 12px;
    padding-bottom:6px;
    font-weight: 500;
    border: 1px solid transparent;
    color:#fff!important;
    /* box-shadow: inset 0px 0px 0px 1px white; */
    box-sizing: border-box;
}
.uk-button.uk-button-success {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 10;
    padding-left: 12px;
    padding-top:6px;
    padding-right: 12px;
    padding-bottom:6px;
    font-weight: 400;
    border: 1px solid #0f9e5b;
    /* box-shadow: inset 0px 0px 0px 1px white; */
    box-sizing: border-box;
}

.uk-button.uk-button-default {
    background-color: #00a8e6;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 10;
    padding-left: 12px;
    padding-bottom:6px;
    padding-right: 12px;
    padding-top:6px;
    font-weight: 400;
    border: 1px solid #00a8e6;
    color:white;
    /* box-shadow: inset 0px 0px 0px 1px white; */
    box-sizing: border-box;
}

.uk-button.uk-button-warning {
    background-color: #faa732;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 10;
    padding-left: 12px;
    padding-bottom:6px;
    padding-right: 12px;
    padding-top:6px;
    font-weight: 400;
    border: 1px solid #faa732;
    color:white;
    /* box-shadow: inset 0px 0px 0px 1px white; */
    box-sizing: border-box;
}

.dashboard .huge {
    font-size: 30pt;
    line-height: 130%;
    font-weight:400;
    color:#000;
}
.dashboard .uk-panel {
    text-align: center;
    padding-top:10%;
    padding-bottom: 10%;
    cursor: pointer;
}
.dashboard .uk-panel h2 {
    font-weight:400;
    font-size:23px;
}

.loaderParent {
    position: absolute;
    top: 0;
    left: 22%;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
  
    &__caption {
      background: red;
    }
  }
  
  .loaderIcon {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 100px auto;
  }
  
  .double-bounce1,
  .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
  
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
  }
  
  .double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }
  
  @-webkit-keyframes sk-bounce {
  
    0%,
    100% {
      -webkit-transform: scale(0.0)
    }
  
    50% {
      -webkit-transform: scale(1.0)
    }
  }
  
  @keyframes sk-bounce {
  
    0%,
    100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
    }
  
    50% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    }
  }
.loginpanel {
    color: white;
    border: 4px solid white;
    padding: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 5px;
}

.loginpanel a {color:white;}
.loginpanel label {margin-bottom: 10px;display: inline-block;}
.grib-login-button {width: 100%;}
.loginpanel .checkbox label {background-color: transparent;line-height: 100%;}
.loginpanel .checkbox span { display:inline-block; }
.loginpanel .checkbox input {vertical-align: middle;}

.uk-form {
    background-color: #fff;
    padding:2%;
}

.uk-form input:not([type]), .uk-form input[type=text], .uk-form input[type=password], .uk-form input[type=email], .uk-form input[type=url], .uk-form input[type=search], .uk-form input[type=tel], .uk-form input[type=number], .uk-form input[type=datetime], .uk-form input[type=datetime-local], .uk-form input[type=date], .uk-form input[type=month], .uk-form input[type=time], .uk-form input[type=week], .uk-form input[type=color], .uk-form select, .uk-form textarea, .uk-form-large {
    height: 35px;
    max-width: 100%;
    padding: 4px 6px;
    /* border: 5px solid #fff!important; */
    /* border: solid #ada8b5 1px; */
    background: #f7f7f7;
    box-shadow: -1px 1px 4px #0000000d;
    color: #2f3e46;
    -webkit-transition: all .2s linear;
    -webkit-transition-property: border,background,color,box-shadow,padding;
    transition: all .2s linear;
    transition-property: border,background,color,box-shadow,padding;
        margin-bottom: 10px;
        border-radius:10px;
}

input:disabled {
    cursor:not-allowed!important;
}

/* .uk-button.uk-button-primary:hover {
    background-color: #374F5D;
} */
.uk-link, a {
    color: #142A35;
    text-decoration: none;
    cursor: pointer;
}
.uk-button-grib {border:none;
background-color: transparent!important;}
.f-color-red {
    color:#E73D6D;
}

.f-color-purple {
    color:#400150!important;
}

.f-color-blue {
    color:#1D4F96;
}

.f-color-green {
    color:#0f9e5b;
}

.list-borders {
    border:none;
    box-shadow: -1px 1px 4px #0000000d;
}

.red {
    background-color:#E73D6D!important;
}
.green {
    background-color:#0f9e5b!important;
}
.purple {
    background-color:#400150!important;
}
.dark {
    background-color: #374F5D;
}
.blue {
    background-color: #0875ba;
}
.mint {
    background-color: #0f9e5b;
}
.warning {
    background-color: #e28327;
}
.uk-alert {padding:35px;font-size: 14pt;line-height: 140%;margin:0px!important;}
.profilepic {width: 40px;height: 40px;margin-top:5px;margin-bottom:5px!important;background-size: cover;float: left;border-radius: 50%;margin-left:5%;margin-right:2%;}

.dashboard .profilepic {width: 50px;height:50px;}
.gradient .profilepic   {width: 85px;height: 85px;}
/*ledenlijst opmaak*/
li.lid:hover {
    background-color:#f9f9fb!important;
}

/*STATISTIEKEN*/
.statsblok {
    border:0px solid #44c0bd;
    color:#44c0bd;
    background-color:white;
}
.statsblok:hover {
    box-shadow: 0px 0px 0px 3px #0875ba inset;
    border-radius: 5px;
}
.statsblok.active {
      box-shadow:0px 0px 0px 3px #0f9e5b inset;
      border-radius:5px;
}


.statsnav .uk-tab>li.uk-active>a {
    border-color: #0f9e5b;
    border-bottom-color: #0f9e5b;
    background: #0f9e5b;
    color: #fff!important;
}
.statsnav .uk-tab li {background-color:transparent;}
.statsnav .uk-tab li a {color:#44318d;text-transform: uppercase;font-weight: 400;}
.statsnav .uk-tab-left {border-width:0px;}
.blockpanel {z-index: -1;display: none;}
.blockpanel:target {z-index: 1; display: block;}

.borderright {border-right: 0px solid  #142A35!important;}


.paginationv2 {
    line-height: 30px!important;
    height: 60px !important;
    padding-top: 40px !important;
}
.paginationv2 .items {
    margin-left:8px;
    color: #999;
    font-size: 20px;
}

.paginationv2 .disabled {
    opacity: 0.3;
}

.paginationv2 .paginationDetails {
    width: 240px;
    display: inline-block;
}
.paginationv2 .beginBtn span {
    display: inline-block; 
    width: 20px; 
    height: 12px; 
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+CjxwYXRoIGQ9Ik0xMiA2Yy0xLjEwNCAwLTIgLjg5Ni0yIDJ2MzJjMCAxLjEwNC44OTYgMiAyIDJzMi0uODk2IDItMlY4QzE0IDYuODk2IDEzLjEwNCA2IDEyIDZ6TTM3LjQxNCA2LjU4NmMtLjc4MS0uNzgxLTIuMDQ3LS43ODEtMi44MjggMGwtMTYgMTZjLS43ODEuNzgxLS43ODEgMi4wNDcgMCAyLjgyOGwxNiAxNkMzNC45NzcgNDEuODA1IDM1LjQ4OCA0MiAzNiA0MnMxLjAyMy0uMTk1IDEuNDE0LS41ODZjLjc4MS0uNzgxLjc4MS0yLjA0NyAwLTIuODI4TDIyLjgyOCAyNCAzNy40MTQgOS40MTRDMzguMTk1IDguNjMzIDM4LjE5NSA3LjM2NyAzNy40MTQgNi41ODZ6Ij48L3BhdGg+Cjwvc3ZnPg==') 50% 50% no-repeat; 
    background-size: 100%;
    cursor: pointer;
}
.paginationv2 .beginBtn {
    display: inline-block; 
    background-color: #F3F3F3;
    padding-left:4px;
    padding-right:4px;
}

.paginationv2 .backBtn span {
    display: inline-block;
    width: 20px;
    height: 12px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+CjxwYXRoIGQ9Ik0gMzMuOTYwOTM4IDIuOTgwNDY4OCBBIDIuMDAwMiAyLjAwMDIgMCAwIDAgMzIuNTg1OTM4IDMuNTg1OTM3NSBMIDEzLjU4NTkzOCAyMi41ODU5MzggQSAyLjAwMDIgMi4wMDAyIDAgMCAwIDEzLjU4NTkzOCAyNS40MTQwNjIgTCAzMi41ODU5MzggNDQuNDE0MDYyIEEgMi4wMDAyIDIuMDAwMiAwIDEgMCAzNS40MTQwNjIgNDEuNTg1OTM4IEwgMTcuODI4MTI1IDI0IEwgMzUuNDE0MDYyIDYuNDE0MDYyNSBBIDIuMDAwMiAyLjAwMDIgMCAwIDAgMzMuOTYwOTM4IDIuOTgwNDY4OCB6Ij48L3BhdGg+Cjwvc3ZnPg==') 50% 50% no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.paginationv2 .backBtn {
    display: inline-block; 
    background-color: #F3F3F3;
    padding-left:4px;
    padding-right:4px;
    }

.paginationv2 .detailsBtn {
    background-color: #F3F3F3;
    display: inline-block;
    padding-left:4px;
    padding-right:4px;
    margin-left:-4px;
}
.paginationv2 .nextBtn span {
    display: inline-block;
    width: 20px;
    height: 12px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+CjxwYXRoIGQ9Ik0xNy41ODYsNDQuNDE0QzE3Ljk3Nyw0NC44MDUsMTguNDg4LDQ1LDE5LDQ1czEuMDIzLTAuMTk1LDEuNDE0LTAuNTg2bDE5LTE5YzAuNzgxLTAuNzgxLDAuNzgxLTIuMDQ3LDAtMi44MjhsLTE5LTE5IGMtMC43ODEtMC43ODEtMi4wNDctMC43ODEtMi44MjgsMHMtMC43ODEsMi4wNDcsMCwyLjgyOEwzNS4xNzIsMjRMMTcuNTg2LDQxLjU4NkMxNi44MDUsNDIuMzY3LDE2LjgwNSw0My42MzMsMTcuNTg2LDQ0LjQxNHoiPjwvcGF0aD4KPC9zdmc+') 50% 50% no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.paginationv2 .nextBtn {
    margin-left:-4px;
    display: inline-block; 
    background-color: #F3F3F3;
    padding-left:4px;
    padding-right:4px;
}

.paginationv2 .endBtn span {
    display: inline-block;
    width: 20px;
    height: 12px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+CjxwYXRoIGQ9Ik0zNiA2Yy0xLjEwNCAwLTIgLjg5Ni0yIDJ2MzJjMCAxLjEwNC44OTYgMiAyIDJzMi0uODk2IDItMlY4QzM4IDYuODk2IDM3LjEwNCA2IDM2IDZ6TTEzLjQxNCA2LjU4NmMtLjc4MS0uNzgxLTIuMDQ3LS43ODEtMi44MjggMHMtLjc4MSAyLjA0NyAwIDIuODI4TDI1LjE3MiAyNCAxMC41ODYgMzguNTg2Yy0uNzgxLjc4MS0uNzgxIDIuMDQ3IDAgMi44MjhDMTAuOTc3IDQxLjgwNSAxMS40ODggNDIgMTIgNDJzMS4wMjMtLjE5NSAxLjQxNC0uNTg2bDE2LTE2Yy43ODEtLjc4MS43ODEtMi4wNDcgMC0yLjgyOEwxMy40MTQgNi41ODZ6Ij48L3BhdGg+Cjwvc3ZnPg==') 50% 50% no-repeat;
    background-size: 100%;
    cursor: pointer;
}
.paginationv2 .endBtn {
    display: inline-block; 
    background-color: #F3F3F3;
    padding-left:4px;
    padding-right:4px;
}

.pagination {
    margin-bottom: 50px!important;
    margin-top: 50px!important;
    padding: 0;
    list-style: none;
    text-align: center;
    font-size: 0;
}

.pagination>li {
    display: inline-block;
    font-size: 1rem;
    vertical-align: top;
}

.pagination>li>a {
    display: inline-block;
    background: #44318d ;
    color: #FFFFFF;
    min-width: 16px;
    padding: 3px 5px;
    line-height: 20px;
    box-sizing: content-box;
    text-align: center;
    border-radius:5px;
}
.pagination>li>span {
    min-width: 23px;
    padding: 5px 5px;
    line-height: 20px;
    font-weight: 500;
    margin: 4px;
    display: inline-block;
    border-radius:5px;
}

.pagination>.active {
    margin-left: 5px;
}
.pagination>.active>span {
    background: #0f9e5b ;
    color: #fff;
}

.pagination>.disabled>span {
    background-color: #ddd;
    color: #6b46bc ;
}
.pagination>.disabled {
    display:none!important;
}

.pagination>li>a, .pagination>li>span {
    min-width: 23px;
    padding: 5px 5px;
    line-height: 20px;
    font-weight: 500;
    margin: 4px;
}

.pagination>li>a:focus, .pagination>li>a:hover {
    background: #0875ba ;
    color: #fff;
    outline: 0;
}

.ui-widget-header {
    border: 1px solid #0f9e5b !important;
    background: #0f9e5b !important;
}

.f-size-20 {font-size:15pt;}

.uk-dropdown {
    border: 2px solid white;
    border-radius: 5px;
    padding: 20%;
    font-size: 14px;
    font-weight: 400;
}
.uk-dropdown ul {margin-bottom: 0px;}
.uk-dropdown ul li a:hover {background-color:rgba(20,42,53,0.5);}
.action-drop-down ul li a:hover {background-color:none!important;}


.usermenu {
    position: absolute;
    cursor: pointer;
    top: 15px;
    right: 40px;
    padding-left: 1%;
}
.usermenu a.upgrade {
    background-color: #6b46bc!important;
    border-top:1px solid white;
    border-bottom:1px solid white;
    font-weight: bold;
    margin-top:5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/*zoekvelden opmaken*/
.uk-search-field {
    border:1px solid #4a89a4;
}
.uk-search-field:focus {
    background-color:#dff5f4!important;
    
    outline:none;
}

.uk-form label {
    display: block;
    clear:both;
    margin-bottom: 5px;
    color:#2f3e46;
    font-weight: 500;
    font-size: 15px;
}
.uk-form-row {min-height: 65px!important;}

.ql-editor h2, .ql-editor h2:after {
    color: #000!important;
    content: unset!important;
}

.uk-button-action {
    line-height:unset!important;
    padding-top:4px!important;
    padding-bottom:2px!important;
    padding-left:6px!important;
    padding-right:6px!important;
}
.uk-button {background-color: #2f49d1;}
.uk-button-small {padding-left: 10px!important;}
.uk-submit {
    background-color: #2f49d1;
    color:white!important;
    border-radius: 5px!important;
    font-weight:400!important;
}
.uk-submit:hover {
    background-color: #2f49d1;
    color:white!important;
    font-weight:400;
}



#camera {
  display: inline-block;
  background-color: none!important;
  width: 250px;
  height: 250px;
  margin: 0em;
  background-image: url(../images/camera_placeholder.png);background-size: cover;
}

#camera .placeholder {
  padding: 0.5em;
}

.g-submitgroup {margin-top:40px;}

.sideMenu .submenu {
    background-color: transparent;
    margin-left: 22px;
}
.sideMenu .submenu > li, .submenu > li > a {
    width: 100%;
    opacity: 0.7;
    height: 30px!important;
    line-height: 30px!important;
    color:#fff;
}
.sideMenu .submenu > li.uk-active > a {
    opacity: 1!important;
    color:#fff!important;
}

.navigatie li:hover {
    color:#fff!important;
}
.navigatie li a:hover {
    color:#fff!important;
}

.sideMenu .uk-navbar-nav {
    min-height: 70vh;
    overflow-y: scroll;
}

.sideMenu .uk-navbar-nav::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.sideMenu .uk-navbar-nav {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.uk-navbar > .headerTitle {
    font-size: 1.3em;
    color: #ffffffb0;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 7%;
    margin-bottom: 1%;
}

.menuLogo > img {
    max-height: 80px;
    max-width: 100%;
}

.menuLogo {
    padding-top:20%;
    padding-bottom:20%;
    padding-left:25%;
    padding-right:25%;
}

.subbalk .submenu > .uk-active {
    border-bottom: solid #2f49d1 1px;
    font-weight: bolder;
}
.submenu > .uk-active {
    opacity: 1!important;
}

.f-color-white {color:#FFFFFF!important;}
/* Details */
.details h2 {padding-bottom: 20px;}


/*opmaak subnavigatie onder andere op leden details*/
.subbalk {
    background-color: #fff;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: -1px 1px 4px #0000000d;
    border-radius: 6px;
}

.subbalk ul li a {
    color: #5c5c5c!important;
}

.subbalk li.uk-active a {
    color: #000!important;
}

.uk-active > a {
    color:white!important;
}


.subbalk ul {
    list-style-type:none;
}

/*opmaak subnavigatie onder andere op leden details*/
.subbalk-variant {background-color: #F8F9FA;padding-bottom: 0px;}
.subbalk-variant ul li {cursor:pointer;float:left;display:block;margin-right: 10px;color:white;list-style-type: none;min-height: 40px;padding:0px;}
.subbalk-variant ul li:hover {background-color:transparent!important;}
.subbalk-variant ul {list-style-type:none;}
.subbalk-variant ul li a {color:#0875ba;text-transform: uppercase;display: block;;height: 100%;line-height: 30px;padding:10px;text-decoration: none;
border-bottom: 3px solid transparent;padding-bottom: 5px;font-weight: 500;
}
.subbalk-variant ul li:hover a {border-bottom: 3px solid #0f9e5b;} 

.subbalk-variant .submenu li.uk-active  {background-color: #0f9e5b!important;}
.subbalk-variant .submenu li.uk-active a  {border-bottom: 3px solid #0f9e5b;color:#fff!important;}

/*tabelopmaak*/
.table-responsive {
    background-color: white;
    padding: 20px;
    border-radius:4px!important;
}
.table-responsive table td {
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
table {width: 100%}
table td {padding-right: 20px;}
table th {padding-right: 20px;}

.tabblad_1 .table-responsive table td {
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    width: 50%;
}

.uk-button-danger {
    background-color: #E73D6D;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid #E73D6D;
    /* box-shadow: inset 0px 0px 0px 1px white; */
    box-sizing: border-box;
    padding-left: 12px;
    padding-top:6px;
    padding-right: 12px;
    padding-bottom:6px;

}
.uk-text-primary {
    color: #3B24FF!important;
}
.uk-text-success {
    color: #2DD175!important;
}
.uk-text-purple {
    color: #400150!important;
}
.uk-text-lightblue {
    color: #2D76BA!important;
}
.uk-badge-primary, .uk-badge-default {
    background-color: #D9DDF2;
    color:#2f49d1;
}
.uk-badge-info {
    background-color: #daf0f7;
    color: #00a8e6;
}
.uk-badge-danger {
    background-color: #f9e4ea;
    color: #E73D6D;
}
.uk-badge-warning {
    background-color: #fae9d2;
    color: #faa732;
}
.uk-badge-success {
    background-color: #E3F8ED;
    color:#09d385;
}
address, blockquote, dl, fieldset, figure, ol, p, pre, ul {
    margin: 0 0 0 0;
}
tfoot {margin-top:20px;display: block;}
@media (max-width: 968px) {
    .uk-list-line>li:nth-child(n+2) {line-height: 50px;height: auto;}
    .profilepic {float:initial;margin:auto;margin-top:10px;}
    .borderright{border:none;}
}


.hide {
    display: none;
}

.table-header {
    font-family: 'Open Sans ExtraBold', sans-serif !important;
    text-transform: uppercase;
    color:white;    
}


.uk-list-line>li:nth-child(n+2) {
    border-top: 0px solid #ffffff;
    padding-top: 0px;
    margin-top: 0px;
    margin-left: 0px;
    line-height: 50px;
    min-height: 50px;
    background-color: #ffffff;
    margin-right: 0px;
}
.list-borders {
    border: 0px solid #ffffff;
}
.uk-list li.gradient {
    padding-top: 2%;
    padding-bottom: 2%;
    color: white;
}
.uk-list li.gradient .uk-grid div {border-right: 1px solid #efefef;}

.uk-list li.gradient .uk-grid div:last-child {border-right: 0px solid #efefef!important;}

/* TODO: remove borderright in list-views */
.borderright {
    border: 0px;
    border-right: 4px solid  #f9fafb;
}

.uk-search-field {
    border: 0px solid #fff;
}

.uk-search-field:focus {
    background-color: #fff!important;
    outline: none;
}

.uk-navbar-nav>li:hover >a {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2)!important;
}


.uk-navbar-nav>li.uk-active>a {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2)!important;

}

 .uk-button.uk-button-primary:hover {
    background-color: #2f49d1;
} 

.uk-list .uk-button.uk-button-primary:hover {
    background-color: #2f49d1;
} 
.uk-list .uk-button {
    max-width: 200px;
    border-radius:6px;
    font-weight: 500;
}
.uk-list {
    border: none;
    box-shadow: -1px 1px 4px #0000000d;
    border-radius: 6px;
    background-color: #fff;
}

h2, h3  {
    color: #000;
    font-weight: 400;
}

.table-separated{border-collapse:separate;border-spacing:0 8px;width:100%}
.table-separated.table-striped tbody tr:nth-of-type(odd),
.table-separated.table-hover tbody tr:hover{background-color:#f9fafb }
.table-separated tbody tr{background-color:#fcfdfe ;-webkit-transition:.5s;transition:.5s}
.table-separated tbody tr>*:first-child{border-top-left-radius:0px;border-bottom-left-radius:0px}
.table-separated tbody tr>*:last-child{border-top-right-radius:0px;border-bottom-right-radius:0px}
.table-separated tbody tr th,
.table-separated tbody tr td{border-top:none}
.table-separated thead th {
    border-bottom: none;
    width: 30%;
}

.onwhitebutton {
    color: white;
    font-weight: 400;
}

.onwhitebutton:hover {
    background-color: #0875BA;
    color:white;
}


.subbalk ul li {
    cursor: pointer;
    float: left;
    margin-left: 10px;
    color: white;
    list-style-type: none;
    min-height: 100%;
    padding: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    font-weight: 400;
}
a:hover {
  text-decoration: none!important;
}

/*.uk-width-large-1-2 {margin-top:2%!important;}*/

.uk-badge {
    padding: 6px !important;
    font-size: 12px;
    font-weight: 400;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    /* max-height: 17px!important; */
    overflow-y: hidden;
}

#checkin_list_data {width: 100%!important;}
#checkin_list_data table td{background-color:white;line-height: 25px;padding-left: 7px;padding-right: 7px;}
#checkin_list_data table {width: 100%!important;}

.uk-modal-dialog, .uk-modal-dialog-large {
    background-color: #F8F9FA;
}

select.uk-form-large {
    -webkit-appearance: menulist-button;
}

input:not([type]).uk-form-large, input[type].uk-form-large, select.uk-form-large, textarea.uk-form-large {
    height: 40px;
    padding-left: 8px;
    padding-right: 3%;
    font-size: 16px;
    font-weight: 400;
    color: #444;
    border-radius: 5px;
}

/*.top10 tr:nth-child(1) {
    font-size: 20px;
    font-weight: 400;
    color: #6b46bc!important;
}

 .top10 tr:nth-child(2) {
    font-size: 18px;
    font-weight: 400;
    color: #6b46bc!important;
}

 .top10 tr:nth-child(3) {
    font-size: 16px;
    font-weight: 400;
    color: #6b46bc!important;
}

 .top10 a:nth-child(1) {
    color: #6b46bc!important;
}

 .top10 a:nth-child(2) {
    color: #6b46bc!important;
}

 .top10 a:nth-child(3) {
    color: #6b46bc!important;
}*/



/*.top10 tr:nth-child(1):after {
    content: url(https://s3-eu-west-1.amazonaws.com/grib/website/statistics/goud.jpg);
}*/

.uk-table tr td {
    font-weight: 500;
}
.uk-table tr:nth-child(even) td{background-color:#f0f0f0;}
.uk-table tr td:last-child {
    font-weight: 500;
    color:#0875ba;
}

.grib-select-abonnement {padding-left: 5px!important;
border:1px solid #44318d;}


/* .top10 tr:nth-child(2):after {
    content: url(https://getgrib.nl/wp-content/uploads/zilver.jpg);
}

.top10 tr:nth-child(3):after {
    content: url(https://getgrib.nl/wp-content/uploads/brons.jpg);
} */



select {
    padding: 3px 10px 3px 10px;
    font-family: 'Open Sans';
    margin-bottom: 9px;
    margin-top: 5px;
    font-weight: 400;
    border-radius: 5px;
    color: #142a35;
    width: 100%;
}

input.uk-search-field {
    border-radius: 5px;
}

input.uk-search {
    height: 48px;
    min-height: 48px;
    width: 200px;
    padding-right: unset!important;
    min-width: 200px;
    margin-left:16px;
    border:none;
    border-radius: 6px;
    padding-left: 4px;
    font-size: 16px!important;
    font-weight: 500;
    padding-left: 30px!important;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAsMCwyNTUuOTk2MDksMjU1Ljk5NjA5IgpzdHlsZT0iZmlsbDojMDAwMDAwOyI+CjxnIGZpbGw9IiNiYWJhYmEiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxnIHRyYW5zZm9ybT0ic2NhbGUoNS4zMzMzMyw1LjMzMzMzKSI+PHBhdGggZD0iTTIwLjUsNmMtNy45ODQ0NCwwIC0xNC41LDYuNTE1NTYgLTE0LjUsMTQuNWMwLDcuOTg0NDQgNi41MTU1NiwxNC41IDE0LjUsMTQuNWMzLjI3MzE2LDAgNi4yODg5MiwtMS4xMDY5OCA4LjcyMDcsLTIuOTQ5MjJsOS4zNjUyMyw5LjM2MzI4YzAuNTAxNjMsMC41MjI0OCAxLjI0NjUzLDAuNzMyOTUgMS45NDc0MiwwLjU1MDI0YzAuNzAwODgsLTAuMTgyNzEgMS4yNDgyMywtMC43MzAwNiAxLjQzMDk0LC0xLjQzMDk0YzAuMTgyNzEsLTAuNzAwODggLTAuMDI3NzYsLTEuNDQ1NzggLTAuNTUwMjQsLTEuOTQ3NDJsLTkuMzYzMjgsLTkuMzY1MjNjMS44NDIyNCwtMi40MzE3OSAyLjk0OTIyLC01LjQ0NzU1IDIuOTQ5MjIsLTguNzIwN2MwLC03Ljk4NDQ0IC02LjUxNTU2LC0xNC41IC0xNC41LC0xNC41ek0yMC41LDEwYzUuODIyNjksMCAxMC41LDQuNjc3MzIgMTAuNSwxMC41YzAsMi43OTU3MSAtMS4wODU5Myw1LjMyMDYgLTIuODUxNTYsNy4xOTcyN2MtMC4xNzE4NywwLjEyNDQyIC0wLjMyMjg0LDAuMjc1NCAtMC40NDcyNywwLjQ0NzI3Yy0xLjg3NzA3LDEuNzY3ODcgLTQuNDAzNDYsMi44NTU0NyAtNy4yMDExNywyLjg1NTQ3Yy01LjgyMjY4LDAgLTEwLjUsLTQuNjc3MzIgLTEwLjUsLTEwLjVjMCwtNS44MjI2OCA0LjY3NzMyLC0xMC41IDEwLjUsLTEwLjV6Ij48L3BhdGg+PC9nPjwvZz4KPC9zdmc+') 3% 50% no-repeat;
    background-color: #F7F7F7;
    background-size: 20px;
}
input.uk-search-date {
    height: 48px;
    min-height: 48px;
    width: 200px;
    min-width: 200px;
    padding-right: unset!important;
    margin-left:16px;
    border:none;
    border-radius: 6px;
    padding-left: 4px;
    font-size: 16px!important;
    font-weight: 500;
    padding-left: 30px!important;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxwYXRoIGQ9Ik0xOCwyMUg2Yy0xLjY1NywwLTMtMS4zNDMtMy0zVjdoMTh2MTFDMjEsMTkuNjU3LDE5LjY1NywyMSwxOCwyMXoiIG9wYWNpdHk9Ii4zNSI+PC9wYXRoPjxwYXRoIGQ9Ik0xOCwzSDZDNC4zNDMsMywzLDQuMzQzLDMsNnYxaDE4VjZDMjEsNC4zNDMsMTkuNjU3LDMsMTgsM3oiPjwvcGF0aD48Y2lyY2xlIGN4PSIxNCIgY3k9IjE4IiByPSIxIj48L2NpcmNsZT48Y2lyY2xlIGN4PSIxMCIgY3k9IjE4IiByPSIxIj48L2NpcmNsZT48Y2lyY2xlIGN4PSI2IiBjeT0iMTgiIHI9IjEiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjYiIGN5PSIxNCIgcj0iMSI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTAiIGN5PSIxNCIgcj0iMSI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgcj0iMSI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTgiIGN5PSIxNCIgcj0iMSI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTgiIGN5PSIxMCIgcj0iMSI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTQiIGN5PSIxMCIgcj0iMSI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iMSI+PC9jaXJjbGU+Cjwvc3ZnPg==') 3% 50% no-repeat!important;
    background-color: #F7F7F7!important;
    background-size: 20px!important;
    float:unset!important;
}
select.uk-search {
    height: 48px;
    min-height: 48px;
    width: 200px;
    min-width: 200px;
    margin-left:16px;
    padding-right: unset!important;
    border:none;
    border-radius: 6px;
    padding-left: 4px;
    font-size: 16px!important;
    background-color: #F7F7F7;
}

.uk-button-dropdown a {
    font-weight: 400;
}

i.fa.fa-user {
    margin-right: 5px;
}

.huge.counter {
    color: #44318d;
    font-weight: 400;
}

/*filter teksten*/

a#buttonShowFilters {
    color: white;
}

div#filterOpties h4, div#filterOpties {
    color: white;
}

/*Kleuren kiezer*/

.appSettingsHeaderColor,.appSettingsBackgroundColor {
    font-weight:400;
}
 

.uk-tab {
    border-bottom: 1px solid #0875ba;
}
.grib-slideset {
    border-bottom: 1px solid #0875ba;
    margin:0px;
    line-height: 35px;
     border-top: 1px solid #0875ba;
     border-left: 1px solid #0875ba;
      border-right: 1px solid #0875ba;
}
.grib-slideset li{
    border-color: #0875ba;
    border-bottom-color: #0875ba;
    color: #0875ba;
    cursor: pointer;
    font-weight: 500;
}
.grib-slideset li:nth-child(even) {
    background-color: #f0f0f0;
}
.grib-slideset li:nth-child(odd) {
    background-color: white;
}
.grib-slideset li:hover {
    border-color: #2DD175;
    border-bottom-color: #2DD175;
    background: #2DD175;
    color: #fff!important;
}
.grib-slideset li.uk-active {
    border-color: #2DD175;
    border-bottom-color: #2DD175;
    background: #2DD175;
    color: #fff!important;
}
.grib-slideset-number {
    font-size: 9pt;
    line-height: 100%;
    margin-bottom: 14px!important;
}
.grib-slideset-arrow {
     width: 5%;float: left;margin-top:13px;
}
.grib-slideset-container {
    width: 90%;float: left;
}

/*.grib-slideset li:first-child {
     border-left: 0px solid #0875ba;
}
.grib-slideset li:last-child {
     border-right: 1px solid #0875ba;
}*/
.grib-slideset li.uk-active-item {
    background-color: #0875ba;
    color: #ffffff;

}
.grib-arrow-left,.grib-arrow-right {
    display:block;
    color:white;
        line-height: 35px;
         width: 100%;
          color: #0875ba;
         text-align: center;

    border-top-width: 0px;
}

.grib-arrow-left i, .grib-arrow-right i{
background-color:#0875ba;
color:white;
}
.grib-arrow-left i:hover, .grib-arrow-right i:hover {
    background-color: #0f9e5b;
    color:white;
}

.first-container {
    position: relative;
    min-height:400px;
    bottom: 0px;
}

.top3 {
    width:100%;
}
.top3profile {
    width: 100%;
    height:100px;
    text-align: center;
    margin-top: -231px;
    font-weight: 500;
    color: #0875ba;
    line-height: 100%;
}
.top3profile .rondje {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin:auto;
    margin-bottom: 10px;
    background-size: cover;
}
.top10 {
    width:100%;
    float:right;
}
.top3wrapper {
    position:relative;
    width: 100%;
    margin-top: 8px;
}
.top3wrapper > div {
    position:relative;
    width: 33%;
    display: inline-block;
}
.first {
    /*left: 150px;*/
    background-color: #0f9e5b;
    text-align:center;
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding-top:20px;
}
.second {
   /* left: 0px;*/
    background-color: #0875ba;
    text-align:center;  
     position: absolute;
    bottom: 0px;
    width: 100%;
    padding-top:20px;
}
.third {
   /* left: 300px;*/
    background-color: #3E3384;
    text-align:center;
     position: absolute;
    bottom: 0px;
    width: 100%;
    padding-top:20px;
}

.uk-tab-responsive .uk-dropdown {
    background-color: #0875ba;
}

.shadowExercise {
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
    cursor:move;
}

.enlargeExerciseImg {
    min-height:200px!important;
    min-width:90%!important;
    max-width: none;
    border-radius: 0%!important;
}
.enlargeExerciseGif {
    min-height:250px!important;
    min-width:90%!important;
    max-width: none;
    border-radius: 0%!important;
    background-position: center;
    background-repeat: no-repeat;
}

.defaultExerciseImg {
    height:80px;
    width:80px;
    border-radius: 50%!important;
}

@media (max-width: 540px) {
    .grib-slideset-arrow {
     width:10%;float: left;margin-top:13px;
}
.grib-arrow-left {margin-left: -6px;}
.grib-arrow-right {margin-left: 6px;}
.grib-slideset-container {
    width: 80%;float: left;
}
}

.uk-progress-bar {
    background-color:#0f9e5b;
    color:white;
    text-align:center;
    height:5px;
    margin-top:5px;
}

.uk-progress-bar-mail-attachment {
    background-color:#0f9e5b;   
    color:white;
    text-align:center;
    height:5px;
    margin-top:5px;
}


.action-drop-down ul li {
    line-height:29px!important;
    list-style: none!important;
    padding-left:5px!important;
    z-index: 200;
}
.action-drop-down ul li a {
    color:#000!important;
    text-transform: none!important;;
}
.action-drop-down ul li.menu-item:hover { 
  background-color: lightgrey!important;
  cursor: pointer;
}

.product :hover { 
    cursor: pointer;
}

.list-checked {
    background-color: #EEF6F6!important;
}

.ngLoader {
    position: absolute;
    top: 50%;
    right: 50%;
}

.usermenu {
    z-index: 100;
    width:100px;
}

.mobileMenu {
    color:white;
    z-index: 100;
    width:30px;
}

.memberListBlocked, .memberListBlocked :hover {
    background-color: #8b0000!important;
    color: white;
}


.animate-skeleton-background {
    -webkit-animation: infinite bgcolorchange 4s;
    animation: 4s infinite bgcolorchange;
    opacity: 0.5;
}
    
@keyframes bgcolorchange {
    0% {
        color: #f2f2f2;
    }
    25% {
        background: lightgray;
    }
    50% {
        background: #f2f2f2;
    }
    75% {
        background: lightgray;
    }
    100% {
        background-color: #f2f2f2;
    }
}
    
@-webkit-keyframes bgcolorchange {
    0% {
        background: #f2f2f2;
    }
    25% {
        background: lightgray;
    }
    50% {
        background: #f2f2f2;
    }
    75% {
        background: lightgray;
    }
    100% {
        background: #f2f2f2;
    }
}  

@media screen and (min-width: 2500px) {
    .mobileMenu {
        display:none!important;
    }

    .usermenu {
        position: absolute;
        right: 2%;
        margin-top: 0%;
    }

    .contentRight {
        max-width: 1600px!important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 2499px) {
    .mobileMenu {
        display:none!important;
    }

    .usermenu {
        position: absolute;
        right: 1%;
        margin-top: 0%;
    }
}


@media screen and (min-width: 951px) and (max-width: 1023px) {

    .mobileMenu {
        display:none!important;
    }

    .usermenu {
        position: absolute;
        right: 1%;
        margin-top: 5%;
    }
}


@media screen and (min-width: 768px) and (max-width: 950px) {
    body {
        margin-left:0px!important;
    }
    .mobileMenu {
        font-size: 2em!important;
        position: absolute;
        right: 5%;
        margin-top: 5%;
    }

    .contentRight {
        float:unset!important;
        margin-top: 50px!important;
        margin-left:0px!important;
    }

    .menuLeft {
        display: none;
    }

    .uk-container-grib {
        margin-left: 1px!important;
        max-width: 80vw!important;
    }

    #mobileMenu .uk-navbar-nav {
        max-width: 74%;
    }

    .navigatie, 
    .navigatie li, 
    .navigatie li a 
    {
        height: 40px;
        line-height: 40px;
    }

    .side-modules {
        width: 54px!important;
    }


    .menuLogo {
        display: none;
    }

    .loginpage .loginImg {
        display:none;
    }

    .loginpage .wave {
        width:100%!important;
    }
    .loginpage > .logindiv {
        width:100%!important;
    }

    .usermenu {
        position: absolute;
        right: 8%;
        top: 0.5%;
    }
    .onboardingMessage {
        width: 100vw!important;
        left:0vw!important;
        margin-left: 0vw!important;
    }
}

@media screen and (min-height: 10px) and (max-height: 780px) {
    body {
        margin-left:0px!important;
    }
    .loginpage .wave {
        display: none!important;
    }
}

@media screen and (min-width: 150px) and (max-width: 767px) {
    body {
        margin-left:0px!important;
    }
    .mobileMenu {
        font-size: 2em!important;
        position: absolute;
        right: 5%;
        margin-top: 5%;
    }

    .menuLeft {
        display: none;
    }

    .uk-container-grib {
        margin-left: 1px!important;
        max-width: 98vw!important;
    }

    #mobileMenu .uk-navbar-nav {
        max-width: 74%;
    }

    .navigatie, 
    .navigatie li, 
    .navigatie li a 
    {
        height: 40px;
        line-height: 40px;
    }

    .side-modules-parent {
        width: 26%;
    }

    .side-modules {
        width: 54px!important;
    }


    .menuLogo {
        display: none;
    }

    .loginpage .loginImg {
        display:none;
    }

    .loginpage .wave {
        width:100%!important;
    }
    .loginpage > .logindiv {
        width:100%!important;
    }

    .usermenu {
        position: absolute;
        right: 8%;
        top: 0.5%;
    }

    .contentRight {
        float:unset!important;
        margin-top: 50px!important;
        margin-left:0px!important;
        padding-bottom: 200px;
    }
    .onboardingMessage {
        width: 100vw!important;
        left:0vw!important;
        margin-left: 0vw!important;
    }
}

.noitemsfound {
    margin-left:15%;
    width:70%;
    border-radius: 25px;
    background-color: #dedede;
    padding:5%;
}


/**
sidemenu
**/
.sideMenu {
    height: 100%;
    position: fixed;
    z-index: 1000!important;
    box-sizing: border-box;
    float: left;
}

.menuHeader {
    position:relative; 
    box-sizing: border-box;
    float:left;
    width:304px;
}

.wrapper {
    margin-top: -50px;
}

.navigatie .fa {
    width: 20px!important;
    max-width: 20px!important;
}
.navigatie .menuItemIcon {
    width: 24px!important;
    height: 24px!important;
    max-width: 24px!important;
    display: inline-flex;
    transition: opacity .25s ease-in;
    margin-right: 12px;
}
.navigatie i.fa {
    margin-right: 12px;
}
.navigatie a {
    align-items: center!important;
    display: flex!important;
}
.navigatie .menuItemIcon svg {
    fill: #fff!important;
}

.sideMenu .navigatie, 
.sideMenu .navigatie li, 
.sideMenu .navigatie li a 
{
    height: 40px;
    line-height: 40px;
    /* margin-bottom: calc(1rem*1.25); */
}

.sideMenu .uk-navbar-nav > li > a {
    font-weight: 400;
    color:#fff;
    opacity: 0.7;
    font-size: 1.35rem;
    background-color: unset!important;
}
.sideMenu .uk-navbar-nav > li.uk-active > a {
    font-weight: 400;
    color:#fff;
    opacity: 1;
    background-color: unset!important;
}
.sideMenu .uk-navbar-nav > li, .sideMenu .uk-navbar-nav > li > a:active {
    background-color: unset!important;
}
.sideMenu .uk-navbar-nav > li.uk-active > a {
    opacity: 1!important;
}

.sideMenu .uk-navbar-nav>li:hover > a {
    opacity: 1!important;
    background-color: unset!important;
}


.side-modules-parent {
    height: 100%;
    width: 64px;
    float:left;
}

.side-modules {
    background-color: #475ED6;
    width:64px;
    height: 100%;
    margin-top:-7px;
}

.module-logo {
    padding-top:15px;
}

.side-modules .iconHeader {
    padding-right: 16%;
    padding-left: 16%;
    width:unset!important;

    svg {
        fill: #00000080!important;
    }
}

.module-item {
    padding:10px;
    text-align: center;
    border-radius: 5px;
    margin-top:20%;
    margin-left:13%;
    margin-right:13%;
    margin-bottom:13%;
    cursor: pointer;
}

.menuLeft {
    float: left!important;
    height: 100%;
    position: fixed;
    z-index: 1000!important;
    box-sizing: border-box;
    float: left;
}

.menuLeft .uk-navbar-nav>li.uk-active>a {
    border-right: solid #fff 3px;
    margin-right: 2%;
    background-color: unset!important;
}
.contentRight {
    float:unset!important;
    margin-top: 50px!important;
    margin-left:368px;
    padding-bottom: 200px;
}

.uk-container-grib {
    /* margin-left: 21%; */
    margin-right: unset!important;
    max-width: 80vw;
    padding-left:2%;
    padding-right:2%;
    padding-top: 1px;
}

.uk-block {
    background-color: #fff;
    padding:1%;
}


.activeBadge {
    background-color: #2f4bd2;
    color: #fff;
    border-radius: 10px;
    font-size: 0.8em;
    padding: 6px;
    border: none;
    cursor: pointer;
}

.inactiveBadge {
    background-color: #EEF1FB;
    color: #000;
    font-size: 0.8em;
    padding: 6px;
    border: none;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 10px;
}
.inactiveBadge > span {
    color: #2f4BD2
}

em {
    color:unset;
}


#mobileMenu .menuItemIcon {
    display: unset!important;
}


.uk-block-graph {
    margin-left: 35px;
    width: 95%;
}

.graphParent {
    width: 100%;
    height: 100%;
    background-color: #F7F7F7;
    border-radius: 6px;
    position: relative;

    .link {
        position: absolute;
        right: 4%;
        top: 4%;
        cursor: pointer;
        z-index: 100;

        svg {
            width: 16px;
        }
    }

    .graphHeader {
        float:left;
        height: 100%;
        width:20%;
        position: relative;

        h3 {
            position: absolute;
            top: 14px;
            left:14px;
            color:#bababa!important
        }

        .data {
            position: absolute;
            bottom: 10%;
            left:14px;
            color:#2f3e46!important;
            font-size: 4em;

            .subtitle {
                font-size: 0.4em;
                color:#2f3e46b3!important
            }
        }
    }

    .graphData {
        float:right;
        width:80%;
    }
}
.graph {
    background-color: #F7F7F7;
    border-radius: 6px;
}
.apexcharts-title-text {
	color: #bababa;
	font-size: 1rem
}

/**
BTNS
**/
.btn-small {
    cursor: pointer;
    transition: all .25s ease-in;
    border:unset;
    font-weight:500;
    background-color:#f1f1f4;
    color:#000!important;
    border-radius:6px;
    padding-top:0px;
    padding-bottom:0px;
    font-size:14px;
    padding: calc(1rem*.25) calc(1rem*.5);
}
.btn-small:hover {
    background-color:#ceced9!important;
}

/**
Notification
**/
.uk-notify-message-success {
    background-color: #000!important;
    color: #fff!important;
}
.uk-notify-message-danger {
    background-color: #e4354f!important;
    color: #fff!important;
}



.onboardingMessage {
    position: absolute;
    top: 0;
    left: 25vw;
    width: 17vw;
    text-align: center;
    background-color: #f9b74e;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bolder;
    cursor: pointer;
    margin-left: 20vw;
    margin-right: 20vw;
    border-radius: 24px;
}


/**
uk-modal v2
**/
.uk-modal-dialog-v2 {
    padding:0px!important;
}

.uk-modal-dialog-v2 .uk-modal-header {
    padding-left: 10px;
    padding-top: 20px;
}  
.uk-modal-dialog-v2 button.uk-modal-close {
    padding-right: 20px;
    padding-top: 35px;
}

.uk-modal-content-v2 {
    background-color: #fff;
}

.uk-modal-footer-v2 {
    padding-left: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.icon {
    cursor: pointer;
}


/**
ai loader
**/
.magic-loader-parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin: 0;
    color: #fff;
}
.magic-loader {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #2F48D1, #1d2a8a);
    box-shadow: 0 0 20px 5px #2F48D1aa, 0 0 40px 15px #2F48D1 inset;
    animation: spin 2s linear infinite;
}

.magic-loader::before,
.magic-loader::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
    opacity: 0.7;
    animation: sparkles 1.5s infinite ease-in-out;
}

.magic-loader::before {
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.magic-loader::after {
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0.75s;
}

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

@keyframes sparkles {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.4); }
}