@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,800;1,400;1,500;1,600;1,700;1,800&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,800;1,900&display=swap');}
body, html, * {font-family:"Raleway", "Arial", "Helvetica"!important;font-size:1.15rem;font-weight:400;color:#000!important;}
body.crm {background:#f7f7f7;}
body li {color:#000;font-size:1.15rem;line-height: 1.74;}

main {background:#f7f7f7;}
h1 {font-size:3.0rem;font-family:"Raleway", "Arial";font-weight:800;padding-bottom:0px;color:#333333!important;}
h2 {font-size:2rem;font-weight:500;padding-bottom: 15px;margin-top: 32px;}
h3 {font-size:1.35rem;font-weight:800;line-height:1.35;padding-bottom:15px;margin-top: 20px;}
h4 {font-size:1.20rem;font-weight:800}
body p {font-size:16px;line-height:1.74;font-weight:400;color:#000;}
a {color:#008339;text-decoration:none;}
.space {width:100%;height:20px;clear:both;display:block;}

.button, .btn.btn-primary {cursor:pointer;background:#5cb039;color:#FFF;text-shadow:none;border:1px solid #64883f;padding:12px 30px 12px 30px;margin-top:0px;
	box-shadow:0px 2px 0px 0px rgba(0,0,0,0.1);border-radius:5px;font-size:14px;font-weight:bold;text-align:center;margin-bottom:10px;}
.button:hover, .btn.btn-primary:hover {background:#3d8a49;opacity:1;}
.button .btn-secondary, .btn-secondary {cursor:pointer;background:#FFF;color:#000;border:1px solid #d4d4d4;border-radius:5px;box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);padding:12px 30px 12px 30px;
  box-shadow:0px 2px 0px 0px rgba(0,0,0,0.1);border-radius:5px;font-size:14px;font-weight:bold;text-align:center;margin-bottom:10px;}
.button .btn-secondary:hover, .btn-secondary:hover {background:#f9f9f9;opacity:1;color:#000;}
.button .btn-danger, .btn-danger {background:#ae0005;color:#FFF;text-shadow:none;border:1px solid #7c0004;padding:7px 15px 8px 15px;margin:0px;
  box-shadow:0px 2px 0px 0px rgba(0,0,0,0.1);border-radius:5px;font-size:14px;font-weight:bold;text-align:center;margin-bottom:10px;}

.btn-success {cursor:pointer;background:#195518;color:#FFF;text-shadow:none;border:1px solid #144613;padding:7px 15px 8px 15px;margin-top:0px;
  box-shadow:0px 2px 0px 0px rgba(0,0,0,0.1);border-radius:5px;font-size:14px;font-weight:bold;text-align:center;margin-bottom:10px;}
.btn-success:hover {background:#144613;opacity:1;}

table .button, table .btn.btn-primary, table .button, table .btn.btn-secondary {padding:7px 30px 8px 30px;margin:0px;}
.btn-outline-primary {border-color:#5cb039;color:#5cb039;margin-top:0px;}
.btn-outline-primary:hover {background:#5cb039;color:#FFF;border-color:#3d8a49; }

.badge.bg-info {background-color:#CCC!important;}
.btn.btn-warning {background:#5cb039;border:1px solid #64883f;color:#FFF;}
.btn.btn-info  {background:#5cb039;border:1px solid #64883f;color:#FFF;}

.but-form {float:left;display:block;width:auto;}



.desktop {display:block;}
.mobile {display:none;}

.bd-placeholder-img {font-size:1.125rem;text-anchor:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;}
.bi {vertical-align:-.125em;fill:currentColor;}
.bi {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

.two_factor h1 {font-weight:bold;}
.two_factor div {margin:0 0 10px 0;}
.two_factor input {width:100%;border:1px solid #ebebeb;border-radius:5px;}
.two_factor input::focus {box-shadow:none;border:1px solid green;}
.two_factor .button {width:100%;}
/*
 * Sidebar
 */

@media (min-width: 768px) {
  .sidebar .offcanvas-lg {
    position: -webkit-sticky;
    position: sticky;
    top: 48px;
  }
  .navbar-search {
    display: block;
  }
}

@media (min-width:768px) {
  .bd-placeholder-img-lg {  font-size:3.5rem;}
}
.b-example-divider {width:100%;height:3rem;background-color:rgba(0, 0, 0, .1);border:solid rgba(0, 0, 0, .15);border-width:1px 0;box-shadow:inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);}
.b-example-vr {flex-shrink:0;width:1.5rem;height:100vh;}
.bi {vertical-align:-.125em;fill:currentColor;}
.nav-scroller {position:relative;z-index:2;height:2.75rem;overflow-y:hidden;}
.nav-scroller .nav {display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch;}

.bd-mode-toggle {z-index:1500;}
.bd-mode-toggle .dropdown-menu .active .bi {display:block !important;}

.sidebar {height:100%;position:fixed;border-left:0px!important;}
.sidebar #sidebarMenu {background:#0c2703!important;height:100%;}
.sidebar #sidebarMenu .nav-item {}
.sidebar .nav-link.active {color:#88de59;}
.sidebar .nav-link {color:#f5f7fa;padding:5px 30px;}
.sidebar .nav-link:hover {color:#88de59;}

/* Top header */
.navbar-brand {font-size:26px!important;}
.navbar-brand img {height:35px;margin-top:-7px;}
.navbar-brand span {color:;}

.navbar .profile {margin:0px 15px 0 0;}
.navbar .profile li {list-style:none;float:right;}
.navbar .profile li.logout {margin-left:15px;padding-left:15px;border-left:1px solid #333333;}
.navbar .profile li.notifications {margin:5px 15px 0 0;padding-right:15px;border-right:1px solid #333333;}
.navbar .profile li.notifications .badge {position:absolute;font-size:12px;border-radius:50%;padding:3px 6px;margin-left:-10px;margin-top:-5px;}
.navbar .profile li i {padding-right:3px;}
.navbar .profile li a {color:#f5f7fa;font-size:14px;text-decoration:none;}
.menu-btn {display:none;}

/* Algemeen */
.box {background:#FFF;display:block;border:1px solid #FFF;border-radius:10px;padding:0 20px 20px 20px;flex: 1 1 auto;margin-bottom:10px;}
.box h2 {text-transform:uppercase;font-size:16px;}
.box h2 i {float:right;opacity:0.33;}
.box .amount {font-size:34px;font-weight:bold;}
.box .button {width:100%;display:inline-block;}
.group.box {margin-top:0px;margin-bottom:30px;}
.group.box h3 {padding-bottom:0px;}
.group.bg {width:auto;height:122px;background-size:contain;background-repeat:no-repeat;background-position:center;margin:25px 0;}
.group.box p {font-size:14px;line-height:22px;}
.group.box .table {font-size:14px;}
table.table {width:100%;border:1px solid #ebebeb;border-radius:5px;border-collapse: collapse;border-style: hidden;box-shadow:0 0 0 1px rgba(100,136,63,0.35);}
table.table th {background:#1e2125;color:#f9f9f9;}
table.table th:first-child {border-top-left-radius:5px;}
table.table th:last-child {border-top-right-radius:5px;}
table.table tr:last-child td:first-child {border-bottom-left-radius:5px;}
table.table tr:last-child td:last-child {border-bottom-right-radius:5px;}
table.table tr td {background:#FFF;border-color:#ebebeb;}
table.table tr.even td {background:#f9f9f9;border-color:#ebebeb;}

td form .btn-danger {margin-top:10px;}


/* Registreren*/
.register-container {max-width:900px!important;}

/* Labcode */
.labcode_register  {margin-top:20px;max-width:900px;box-shadow:0px 0px 70px rgba(0,0,0,0.25)}
.labcode_register .row {background:#10672f;border-radius:15px;}
.labcode_register .col-md-6 {text-align:left;padding:30px;background:#0d7e33;border-top-right-radius:15px;border-bottom-right-radius:15px;}
.labcode_register .bloedtest_vb {text-align:center;padding:30px;background:#10672f;border-top-left-radius:15px;border-bottom-left-radius:15px;}
.labcode_register .bloedtest_vb img {margin:15px auto 0 auto;height:100px}
.labcode_register .bloedtest_vb hr {width:100%;max-width:300px;margin:0 auto;border-bottom:10px solid #95c34f;}
.labcode_register h1 {color:#FFF!important;font-size:34px;font-weight:900;margin-bottom:10px;}
.labcode_register .bloedtest_vb h2 {color:#FFF;font-size:44px;font-weight:900;text-transform:uppercase;padding-bottom:5px;}
.labcode_register .bloedtest_vb p {color:#0f2518;text-transform:uppercase;font-weight:bold;font-size:21px;}
.labcode_register .form-group label {font-weight:bold;color:#FFF;font-size:14px;}
.labcode_register .form-group input {background:#10672f;border:1px solid #0c5125;color:#FFF;transition: background 0.2s ease; }
.labcode_register .form-group input:focus {background:#148a3b;outline:none;outline:none;  box-shadow: 0 0 0 2px #5ab036;}
.labcode_register .btn {width:100%;margin:10px 0 0 0;text-transform:uppercase;font-weight:bold;}
.lab_thankyou {padding:60px;text-align:center;}
.lab_thankyou i {color:#10672f;}


/* speedometer  */
.resultaat {padding:0px 70px 30px 70px;position:relative;z-index:90;text-align:center;opacity:0;transition: opacity 1.5s ease-in-out;}
.resultaat h3 {margin-top:0px;}
.VitaAge {font-size:42px;font-weight:800;}

/*.speedometer-container{display:flex;justify-content:center;align-items:center;width:var(--container-width);height:var(--container-height);}
.title {position:absolute;top:30px;font-size:20px;}
.speedometer {position:relative;width:400px;height:300px;display:flex;justify-content:center;align-items:end;overflow:hidden;transform:scale(var(--meter-scale));}
.speedometer-background {position:absolute;width:250px;height:250px;border-radius:50%;background-image:radial-gradient(#f4433600,#f443361c, #f443365b);display:flex;justify-content:center;align-items:center;}
.speedometer-background-hide {position:absolute;width:400px;height:125px;background-color:#FFF;bottom:0;display:flex;justify-content:center;box-shadow:0px 0px 20px 10px #CCC;}
.status-txt{font-size:23px;color:#787B86;text-transform:uppercase;}
.speedometer-needle {background-image:url("../images/needle.svg");}
.speedometer-needle {position:absolute;bottom:125px;left:50%;width:11px;height:110px;transform-origin:bottom center;transform:rotate(0deg) translateX(-50%);transition:transform 0.5s ease-in-out;z-index:1;border-radius:15px;}
.speedometer-center{position:absolute;width:7px;height:7px;border-radius:50%;border:solid 2px #B7BBC7;background-color:#1e222d;outline:solid 7px #1E222D;z-index:2;}
.speedometer-ranges {position:absolute;width:264px;height:264px;bottom:-7px;background-image:url("../images/ranges.png");background-repeat:no-repeat;background-size:cover;}
.currentAge span {font-size:32px;font-style:normal;line-height:22px;}
.currentAge {font-style:italic;text-transform:uppercase;font-size:12px;margin-top:40px;font-weight:bold;color:#000;}
.range-text{font-size:10px;position:absolute;text-transform:uppercase;}
.range-text-1{left:0px;top:120px;}
.range-text-2{left:70px;top:55px;}
.range-text-3{left:50%;top:22px;transform:translateX(-50%);}
.range-text-4{right:77px;top:55px;}
.range-text-5{right:4px;top:120px;}*/

.biomarkers {height:auto;}
.biomarkers ul {padding:0px;}
.biomarkers li {background:none;border:none;list-style:none;padding:10px 0 12px 0;border-bottom:1px solid #ebebeb;font-size:16px;}
.biomarkers li::before {font-family:"Font Awesome 6 Free";content:"\f111";display:inline-block;vertical-align:middle;font-size:10px;font-weight:bold;
	box-shadow: 0px 0 10px 0px rgb(0, 0, 0,0.27);border-radius: 30px;width: auto;padding: 0px;margin-right:10px;height: 12px;line-height: 1;}
.biomarkers li span {font-weight:bold;float:right;}
.biomarkers li.too-low::before {color:#f6c2a4;border:1px solid #c50000;}
.biomarkers li.high::before {color:#c50000;border:1px solid red;}
.biomarkers li.too_high::before {color:#c50000;border:1px solid red;}
.biomarkers li.medium::before {color:#ffc500;border:1px solid yellow;}
.biomarkers li.good::before {color:#11bf70;border:1px solid #58c300;}

.biomarker_tips ul, .actiepunten ul {margin:0px;padding:0px;}
.biomarker_tips li, .actiepunten li {border:1px solid #ebebeb;padding:10px 15px;border-radius:5px;list-style:none;margin:0 0 10px 0;font-size:14px;}
.favorite-tip .fa-solid {font-weight: 500;}
.favorite-tip .fa-solid.fas {font-weight: 900;}

.biomarker_tips li.favoriet, .actiepunten li.favoriet {background:#f0f9ec;border-color:#e0ebdb;}
.biomarker_tips li:hover, .actiepunten li:hover {background:#f6f9fc;border-color:#1d4b7f;}
.biomarker_tips li strong, .actiepunten li strong {font-size:16px;}
.biomarker_tips h3, .actiepunten h3 {font-size:18px;color:#1d4b7f;padding-bottom:5px;margin-top:30px;}

.actiepunten h2::before {font-family:"Font Awesome 6 Free";content:"\f004";font-size:16px;padding:0 5px 0 0;}
.epiage h2::before {font-family:"Font Awesome 6 Free";content:"\f471";font-size:16px;padding:0 5px 0 0;font-weight:bold;}
.biomarkers h2::before {font-family:"Font Awesome 6 Free";content:"\f492";font-size:16px;padding:0 5px 0 0;font-weight:bold;}
.latest-tests h2::before {font-family:"Font Awesome 6 Free";content:"\f477";font-size:16px;padding:0 5px 0 0;font-weight:bold;}
.box.longevity-check h2::before {font-family:"Font Awesome 6 Free";content:"\f21e";font-size:16px;padding:0 5px 0 0;font-weight:bold;}

.biomarker_group {}
.biomarker_group .biomarker {width:47%;min-height:210px;border-radius:5px;padding:20px;float:left;background:#FFF;border:1px solid #ebebeb;margin:0 1% 1% 1%;}
.biomarker_group .biomarker h4 {min-height:40px;}
.biomarker_group .biomarker .value {float:left;}
.biomarker .range {float:right;font-size:11px;margin-top:12px;}
.biomarker .range span {background:#ebebeb;padding:4px;color:#515151;border-radius:3px;font-weight:bold;}
.biomarker_group .biomarker .info {clear:both;font-size:12px;margin:60px 0 0 0;}
.biomarker_group .biomarker .info a {}

#table-view .more_info a i {float:left;padding-right:7px;line-height:27px;}

.latest-tests {height:auto;}
.latest-tests ul {margin:0px;padding:0px;}
.latest-tests li {list-style:none;border:1px solid #ebebeb;border-radius:5px;padding:10px 15px;margin:0 0 10px 0;line-height:22px;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);}
.latest-tests li .test_title {width:50%;float:left;font-weight:bold;;}
.latest-tests li .type {width:50%;float:right;font-size:14px;color:#525b75;font-style:italic;text-align:right;padding-top:4px;}
.latest-tests li .date {font-size:12px;padding-top:5px;}
.latest-tests li .no-tests {font-size:14px;}


.lifestyle-icon {color: #f6c2a4;border: 1px solid #c50000;font-family: "Font Awesome 6 Free";content: "\f111";display: inline-block;vertical-align: middle;font-size:10px;font-weight:bold;
  box-shadow: 0px 0 10px 0px rgb(0, 0, 0,0.27);border-radius: 30px;width:12px;padding:0px;margin:7px 7px 0px 0px;height:12px;line-height:1;float:left;}

.lifestyle-icon.rood {background:#eb3223;border:1px solid darkred;}
.lifestyle-icon.oranje {background:#ff682c;border:1px solid #ed5f2a;}
.lifestyle-icon.geel {background:#fad978;border:1px solid #f7c222;}
.lifestyle-icon.groen {background:#11bf70;border:1px solid #64883f;}

.lifestyle-status {width:100%;margin-bottom:10px;}
.lifestyle-status span {color:#FFF;padding:8px 16px;border-radius:15px;font-size:11px;text-transform:uppercase;}
.lifestyle-status span.groen {background:#11bf70;}
.lifestyle-status span.oranje {background:#ff682c;}
.lifestyle-status span.geel {background:#f7c222;}
.lifestyle-status span.rood {background:#eb3223;}
.lifestyle-status span.grijs {background:#333333;;}

/* longevity-check */
/*.longevity-check .card.Beweging .progress-bar {background-color:#96bac9;}
.longevity-check .card.Stress .progress-bar {background-color:#9172ad;}
.longevity-check .card.Slaap .progress-bar {background-color:#e99471;}
.longevity-check .card.Voeding .progress-bar {background-color:#a8c387;}
.longevity-check .card.Persoonlijk .progress-bar {background-color:#85b9b6;}*/
.longevity-check .lifestyle-status {margin-top:10px;}
.longevity-check .lifestyle-status span {font-size:10px;padding:8px 12px;}
.longevity-check .card {border:0px;color:#000;padding:15px;cursor:pointer;}
.longevity-check .card:hover {background:#ebebeb;}
.longevity-check h2 {color:#000;margin:0px;padding:0px;font-size:22px;}
.longevity-check p {margin-top:5px;color:#333333;}
.longevity-check p.card-text {min-height:65px;font-size:15px;}
.longevity-check .icon {width:50px;height:50px;border-radius:25px;text-align:center;float:right;background:#f9f9f9;padding:5px 0 0 0;}
.longevity-check .icon::before {margin:0px;text-align:center;padding:2px 0 0 0;border-radius:30px;display:block;vertical-align:middle;font-size:24px;font-weight:bold;}
.longevity-check h5.card-title::before {font-size:16px;}
.icon.Beweging::before, .longevity-questions .icon.Beweging::before {font-family:"Font Awesome 6 Free";content:"\f554";}
.icon.Voeding::before, .longevity-questions .icon.Voeding::before {font-family:"Font Awesome 6 Free";content:"\f2e7";}
.icon.Stress::before, .longevity-questions .icon.Stress::before {font-family:"Font Awesome 6 Free";content:"\e064";}
.icon.Slaap::before, .longevity-questions .icon.Slaap::before {font-family:"Font Awesome 6 Free";content:"\f186";}
.icon.Persoonlijk::before, .longevity-questions .icon.Persoonlijk::before {font-family:"Font Awesome 6 Free";content:"\f004";}
.longevity-check .card-body {min-height:215px;padding:30px;}
.dashboard .longevity-check {display:inline-block;}
.dashboard .longevity-check h2 {padding-bottom:15px;margin-top:32px;font-size:16px;}
.dashboard .longevity-check .icon {width:36px;height:36px;margin-top:-5px;}
.dashboard .longevity-check .icon::before {font-size:16px;}
.dashboard .longevity-check .card {width:48%;margin:1%;float:left;padding:15px;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);border: 1px solid #ebebeb;}
.dashboard .longevity-check .card h5 {font-size:18px;color:#000;margin-bottom:15px;}
.dashboard .longevity-check .card-body {min-height:auto;padding:0px;}
.dashboard .longevity-check .card-title::before {width:30px;height:30px;display:inline-block;padding:7px 0 0 0;font-size:14px;}
.dashboard .longevity-check .lifestyle-status {margin-top:0px;}
.dashboard .longevity-check .lifestyle-status span {font-size:8px;padding:3px 6px;color:#FFF;}
.dashboard .personal-health .box.stappen {background:#ddd1e6;}
.dashboard .personal-health .box.hartslag {background:#f3dfdc;}
.dashboard .personal-health .box.calorieen {background:#dbe7ca;}
.dashboard .personal-health .box {text-align:center;}
.dashboard .personal-health .box h2 {padding:0px;}
.dashboard .personal-health .box p {font-size:12px;}
.dashboard .personal-health .box i {font-size:28px;}
.dashboard .personal-health .box span {font-weight:bold;}
.stappen-donut {width: 150px; height: 150px; position: relative;margin:0 auto;}
.donut-container {--p:0;width:150px;height:150px;position:relative;border-radius:50%;background:#bfb3c9; overflow:hidden;}
.donut-container::before {content:"";position:absolute;top:50%; left:50%;transform:translate(-50%, -50%) rotate(calc(var(--p)*3.6deg));width:200%;height:200%;border-radius:50%;background:conic-gradient(#9b7fb0 0deg, #9b7fb0 calc(var(--p)*3.6deg), transparent 0deg);transition:transform 1s ease-out;}
.donut-container::after {content:"";position:absolute;top:50%; left:50%;transform:translate(-50%, -50%);width:60%;height:60%;background:#fff; border-radius:50%;}
.donut-text {position:absolute;top:50%; left:50%;transform:translate(-50%, -50%);text-align:center;font-size:18px;}


.longevity-check .btn-ready {background:#00582b;}
.navigation-buttons #prevBtn {margin:0px;}
.navigation-buttons .btn-primary {margin:0px;}

.calorie-teller-section {background:#333333;border-radius:10px;padding:15px;margin-bottom:15px;color:#FFF;}
.calorie-teller-section h2 {padding:0px;margin-top:0px;text-align:left;}
.calorie-teller-section #result {margin:20px 0 15px 0;padding:20px;background-color:#FFF;border-radius:10px;display:none;text-align:left;}
.calorie-teller-section #result h3 {padding:0px;margin-top:0px;font-size:18px;}
.calorie-teller-section #result ul {padding:0px;}
.calorie-teller-section #result li {list-style:none;font-size:12px;padding:3px 6px;}
.calorie-teller-section #result li span {font-size:12px;}
.calorie-teller-section #result .aanbevolen {background:#ebebeb;font-size:14px;border-radius:5px;padding:5px 6px;}
.calorie-teller-section #result .aanbevolen span {font-size:16px;}
.calorie-teller-section .cal-item {text-align:left;width:100%;}
.calorie-teller-section .cal-item label {font-size:14px;}
.calorie-teller-section .button {font-size:14px;padding:12px 30px 12px 30px;margin-top:0px;}

.calorie-teller-section .result-section {margin-bottom:20px;}
.calorie-teller-section .result-section h3 {margin-bottom:10px;color:#333333;}
.calorie-teller-section .result-section p {margin:5px 0;color:#555555;}
.calorie-teller-section input, .calorie-teller-section select, .calorie-teller-section button {width:100%;padding:3px;margin-bottom:5px;border:1px solid #cccccc;border-radius:3px;
  font-size:14px;box-sizing: border-box;transition: border-color 0.3s;}
.calorie-teller-section select {padding:5px;}
.calorie-teller-section input:focus, .calorie-teller-section select:focus {border-color: #6dd5fa;outline: none;}
.calorie-teller-section button {background-color: #28a745;color: #ffffff;border: none;cursor: pointer;font-size: 18px;transition: background-color 0.3s;}
.calorie-teller-section button:hover {background-color: #218838;}
.bmi-display {position:relative;height:20px;margin-bottom:20px;}
.bmi-bar {display:flex;height:100%;border-radius:25px;overflow:hidden;background:linear-gradient(to right,     #f44336 0%,       /* Veel te Laag */    #f44336 16.67%,      #ffd800 16.67%,  /* Laag */    #ffd800 28.34%,      #4caf50 28.34%,  /* Goed */    #4caf50 50.01%,      #ffd800 50.01%,  /* Hoog */    #ffd800 66.68%,      #f44336 66.68%,  /* Veel te Hoog */    #f44336 100%);}
.bmi-segment {flex:0 0 16.67%; /* Veel te Laag */text-align:center;color:#000;font-size:12px;line-height:20px;pointer-events:none;}
.bmi-segment:nth-child(2) {flex:0 0 11.67%; /* Laag */}
.bmi-segment:nth-child(3) {flex:0 0 21.67%; /* Goed */}
.bmi-segment:nth-child(4) {flex:0 0 16.67%; /* Hoog */}
.bmi-segment:nth-child(5) {flex:0 0 33.33%; /* Veel te Hoog */}
.bmi-marker {position:absolute;top:-50px;width:30px;height:40px;background-color:transparent;transform:translateX(-50%);
    display:flex;justify-content:center;align-items:center;}

.bmi-value {position:absolute;top:15px;left:50%;transform:translateX(-50%);background-color:#000000;color:#000;padding:5px 8px;border-radius:5px;font-size:0.8em;font-weight:bold;white-space:nowrap;}
.bmi-value::after {content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);border-width:10px 5px 0 5px;
    border-style:solid;border-color:#000000 transparent transparent transparent;top:25px;}
.bmi-value.green {background-color:#4caf50;}
.bmi-value.green::after {border-color:#4caf50 transparent transparent transparent}
.bmi-value.orange {background-color:#ffd800;}
.bmi-value.orange::after {border-color:#ffd800 transparent transparent transparent}
.bmi-value.red {background-color:#f44336;}
.bmi-value.red::after {border-color:#f44336 transparent transparent transparent}
.info-section {background-color:#f1f1f1;padding:15px;border-radius:8px;margin-bottom:20px;color:#333333;}
.info-section h2 {margin-top:0;font-size:1.4em;}
.info-section ul {padding-left:20px;}
.info-section li {margin-bottom:8px;}

/* inventory */
.inventory form .btn-secondary {padding: 5px 25px;margin:-2px 0 0 0;}
.inventory table tr.table_odd td {background:#f9f9f9}
.inventory table td .btn-primary {margin-bottom:10px;}
.inventory table td .btn-outline-secondary {margin: 0 0 10px 0;padding: 8px;}

/* BEHEER */
.customer_details ul {list-style:none;padding:0px;}
.customer_details li {clear:both;}
.customer_details label {float:left;min-width:200px;font-weight:bold;}


@media (max-width:768px) {
.container {padding:30px 40px;}
.bmi-display {height:40px;}
.bmi-segment {font-size:0.7em;line-height:40px;}
.bmi-marker {width:20px;height:30px;}
.bmi-value {font-size:0.7em;padding:4px 6px;}
}
/* Uploaden */
.upload-container {width:60%;max-width:500px;padding:0px;text-align:center;font-size:14px;}
#drop-area {padding:50px;border:2px dashed #ccc;border-radius:2px;background:rgba(0, 0, 0, 0.02);cursor:pointer;}
#drop-area p {margin:0;font-size:14px;color:#333;}
#drop-area p.note {font-size:12px;color:#888;}
#file-select {color:#007bff;cursor:pointer;}
button {margin-top:20px;padding:10px 20px;font-size:16px;background-color:#c1e1c1;border:none;border-radius:5px;cursor:pointer;}
button:hover {background-color:#a3d2a3;}

/* Products */
.products .col-md-4 {margin:0 0 30px 0;}
.products .product_img {width:100%;height:250px;overflow:hidden;text-align:center;}
.products .product_img img {width:auto;height:100%;margin:0 auto;}
.products .description {height:110px;margin:10px 0 0 0;}
.products .price {font-size:28px;font-weight:700;}

/* check blood results */
.acties .btn {padding:12px 30px 12px 30px;margin:0px;}

/* Bloedresultaat */
.functions span {background:#ebebeb;font-size:12px;padding:5px 10px;border-radius:3px;margin:0 5px 0 0;}
.functions span::before {display:inline-block;vertical-align:middle;font-size:10px;font-weight:bold;padding-right:5px;color:#515151;}

span.icon {background:#f6f9fc;color:#1d4b7f;font-size:18px;padding:5px 10px;border-radius:3px;margin:0px;}
span.Heart::before, span.Hartgezondheid::before {font-family:"Font Awesome 6 Free";content:"\f004";font-weight:bold;}
span.Hormone::before, span.Hormoonbalans::before  {font-family:"Font Awesome 6 Free";content:"\f24e";font-weight:bold;}
span.Sleep::before, span.Slaap::before  {font-family:"Font Awesome 6 Free";content:"\f236";font-weight:bold;}
span.Inflammation::before, span.Onstekingen::before  {font-family:"Font Awesome 6 Free";content:"\f7fa";font-weight:bold;}
span.Metabolism::before, span.Metabolisme::before  {font-family:"Font Awesome 6 Free";content:"\f363";font-weight:bold;}
span.Recovery::before, span.Herstel::before  {font-family:"Font Awesome 6 Free";content:"\f6e3";font-weight:bold;}
span.Cognition::before, span.Cognitie::before  {font-family:"Font Awesome 6 Free";content:"\f5dc";font-weight:bold;}
span.Endurance::before, span.Uithoudingsvermogen::before  {font-family:"Font Awesome 6 Free";content:"\f70c";font-weight:bold;}
span.Fitness::before, span.Fitnes::before  {font-family:"Font Awesome 6 Free";content:"\f44b";font-weight:bold;}
span.Beweging::before {font-family:"Font Awesome 6 Free";content:"\f554";font-weight:bold;}
span.Voeding::before {font-family:"Font Awesome 6 Free";content:"\f2e7";font-weight:bold;}
span.Stress::before {font-family:"Font Awesome 6 Free";content:"\e064";font-weight:bold;}
span.Slaap::before {font-family:"Font Awesome 6 Free";content:"\f186";font-weight:bold;}
span.Persoonlijk::before {font-family:"Font Awesome 6 Free";content:"\f004";font-weight:bold;}

.nav-tabs {background:none;border:0px;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {background:#5db13d!important;color:#FFF;border:1px solid #64883f;box-shadow:0px 2px 0px 0px rgba(0,0,0,0.1);}
.nav-tabs .nav-link {background:#FFF;color:#FFF;text-shadow:none;border:1px solid #ebebeb;box-shadow:0px 2px 0px 0px rgba(0,0,0,0.1);border-radius:5px;
	font-size:14px;font-weight:bold;text-align:center;color:#000;margin-left:10px;}
.value {width:auto;height:auto;display:inline-block;}
.value.admin {background:#e0e0e0;border:1px solid #CCC;padding:3px 4px 2px 3px;border-radius:5px;}
.value.admin div {color:#FFF;z-index:90;position:relative;}
.value.admin .explain {font-size:12px;color:#333333;}
.value div {font-size:12px;font-weight:bold;padding:2px 5px;border-radius:5px;float: left;}
.value .explain {line-height:22px;padding:0 0 0 5px;}
.value.Goed div {background:#5cb039;color:#FFF;}
.value.Normaal div {background:#ffc500;color:#FFF;}
.value.Hoog div, .value.hHoog div {background:#eb3223;color:#FFF;}
.value.Laag div {background:#eb3223;color:#FFF;}

.too_low {background:#f6c2a4;border:1px solid #e3a877;}
.low {background:#eb3223;border:1px solid darkred;}
.high {background:#ed5f2a;border:1px solid #eb3223;}
.too_high {background:#eb3223;border:1px solid darkred;}
.normal {background:#fad978;border:1px solid #f7c222;}
.good {background:#5cb039;border:1px solid #64883f;}

.bloedresultaten .explain {font-size:8px;text-transform:uppercase;}
.bloedresultaten .box .button {width:auto;display:inline-block;}
.bloedresultaten td {padding-top:20px;}
.bloedresultaten .result h6 {margin:0px;}
.bloedresultaten .modal-body .result .explain {font-size:12px;}
.bloedresultaten .modal-content .value div {color:#FFF;}

.bloedresultaten .modal-content h5.good .icon {color:#5cb039;}
.bloedresultaten .modal-content h5.high .icon {color:#eb3223;}
.bloedresultaten .modal-content h5.low .icon {color:#eb3223;}
.bloedresultaten .modal-content h5.normal .icon {color:#f7c222;}
.bloedresultaten .modal-content .normal {background:#f7c222;}
.bloedresultaten .modal-content h5 {background:none!important;border:0px;}

.modal-dialog {max-width:600px;border-radius:10px;}
.modal-header {border:0px;padding-bottom:0px;}
.modal-header .btn-close {margin-top:0px;opacity:0.2;}
.modal-content {border-radius: 10px;}
.modal-content p {color:#434343;}
.modal-content img {border-radius:10px;}
.modal-footer .btn-secondary {padding:10px 45px;}



.pubmed_link {color:#1d4b7f;}
.pubmed_link a {color:#1d4b7f;}
#grouped-view {padding:30px 0 0 0;}


/* AI Advies */
.ai_advice_content {border:1px solid #CCC;border-radius:10px;padding:10px 20px 20px 20px;box-shadow:inset 0px 0px 15px rgba(0, 0, 0, 0.12);margin:0 0 30px 0;}
.ai_img {width:90px;height:90px;border-radius:50px;border:2px solid #FFF;box-shadow:0px 0px 5px rgba(0, 0, 0, 0.25);overflow:hidden;float:left;margin:0 20px 0 0;}
.ai_img img {width:100%;}
.ai_assistent {font-size:14px;color:#3d8a49;font-weight:bold;}
.chat {}
.chat-message {background:#f0f9ec;border:1px solid #e0ebdb;padding:10px;border-radius:8px;margin:20px 0;min-height:115px;}
.typing {font-style:italic;color:#555;}

/* Biologische leeftijd */
.aanbevelingen {display:inline-block;padding:0px;}
.aanbevelingen li {background:#F1F7F0;list-style:none;width:48%;margin:1%;padding:10px;float:left;border:1px solid #e7f0e6;border-radius:5px;font-size:14px;}
.aanbevelingen li:hover {background:#e7f0e6;border:1px solid #00582b;}
.aanbevelingen li h3 {margin:0px;padding:0px;color:#00582b;}
.aanbevelingen li .afb {width:25%;height:50px;float:left;padding:0 15px 0 0;}
.aanbevelingen li .info {width:75%;height:auto;float:left;}
.aanbevelingen li .info p {height:60px;margin:0px;padding:0px;}

/* Donut Chart Styling */
/*.donut-chart {position:relative;width:50px;height:50px;border-radius:50%;
  background:conic-gradient(#4caf50 var(--donut-percentage, 0%),#e0e0e0 var(--donut-percentage, 0%));align-items:center;justify-content:center;margin:0 15px 0 0;padding:5px;float:left;}
.donut-chart::before {content:"";position:absolute;width:80%;height:80%;background-color:white;border-radius:50%;}
.chart-content {position:relative;z-index:1;text-align:center;}
.chart-text {font-size:12px;font-weight:bold;color:#333;padding-left:2px;}
.icon {width:40px;height:44px;margin-bottom:8px;}
.donut-chart.groen {background:conic-gradient(#4caf50 var(--donut-percentage, 0%),#e0e0e0 var(--donut-percentage, 0%));border-radius:50%;}
.donut-chart.geel {background:conic-gradient(#ffeb3b var(--donut-percentage, 0%),#e0e0e0 var(--donut-percentage, 0%));border-radius:50%;}
.donut-chart.oranje {background:conic-gradient(#ff9800 var(--donut-percentage, 0%),#e0e0e0 var(--donut-percentage, 0%));border-radius:50%;}
.donut-chart.rood {background:conic-gradient(#f44336 var(--donut-percentage, 0%),#e0e0e0 var(--donut-percentage, 0%));border-radius:50%;}
*/

/* Progress Bar Styling */
.progress {height:20px;border-radius:10px;overflow:hidden;background-color:#e0e0e0;}
.progress-bar {height:100%;line-height:20px;color:white;text-align:center;white-space:nowrap;transition:width 0.6s ease;}
.progress-bar span {padding:0 10px;}
.progress-indicator-container {position:relative;width:100%;min-width:200px;margin-bottom:15px;}
.indicator {position:absolute;top:-15px;width:15px;height:15px;background-color:#333333;border-radius:50%;z-index:2;}
.indicator::before {content:'';position: absolute;bottom:-2px;left: 50%;transform: translateX(-50%);width:0;height:0;
  border-left: 6px solid transparent;border-right: 6px solid transparent;border-top:6px solid #333333;}
.progress {overflow:inherit;}
.progress-bar-container {position:relative;height:20px;width:100%;background-color:#ccc;color:#ccc;border-radius:10px;margin:5px 0;}
.progress .progress-bar:first-child {border-top-left-radius:5px!important;border-bottom-left-radius:5px!important;}
.progress .progress-bar:last-child {border-top-right-radius:5px!important;border-bottom-right-radius:5px!important;}
.progress-bar {height:100%;width:100%;overflow:inherit;background:#CCC;color:var(--bs-secondary-bg);border-right:0px;}
.progress-dot {position:absolute;top:50%;transform:translateY(-50%);width:10px;height:10px;background-color:#000;border-radius:50%;}

.progress-bar-low {background:#c50000!important;border-radius:0px;min-width:2%;}
.progress-bar-normal {background:#ffc500!important;border-radius:0px;}
.progress-bar-good {background:#4caf50!important;border-radius:0px;}
.progress-bar-high {background:#c50000!important;border-radius:0px;border-right:0px;}
.progress-bar {position: relative;}
.value {margin-top:5px;}
.value_max {position:absolute;bottom:-15px;left:100%;transform: translateX(-50%);font-size:10px;color:#ADADAD;}
.label_value {display: none;}
.label_values .label_value:first-child {display:block;padding:5px 0 0 0;color:#ADADAD;  fn-round: 2em;
  fn-floor: 1em;
  fn-ceil: 2em;}

/* Kleurklassen voor Progress Bar */
.progress-bar.groen {background-color:#4caf50;}
.progress-bar.geel {background-color:#ffeb3b;color:#333; /* Donkere tekst voor betere leesbaarheid op geel */}
.progress-bar.oranje {background-color:#ff9800;}
.progress-bar.rood {background-color:#f44336;}


/* Responsive Aanpassingen (optioneel) */
@media (max-width:768px) {.donut-chart {width:100px;height:100px;}
.chart-text {font-size:1rem;}
.progress {height:16px;}
.progress-bar {font-size:0.9rem;}}


/* longevity dashboard */
.longevity-questions {width:100%;display:inline-block;}
.longevity-questions h1 {margin-bottom:5px;}
.longevity-questions .icon {float:left;padding:0px;margin:0px;text-align:center;}
.longevity-questions .icon::before {font-family:"Font Awesome 6 Free";display:inline-block;vertical-align:middle;font-size:20px;font-weight:bold;padding:6px 0 0 0;}
.longevity-questions .vragen {background:#FFF;}
.longevity-questions .vragen .form-check {padding-left:0px;}


.longevity-dashboard {padding-top:10px;}
.longevity-dashboard .col {max-width:250px;min-height:100px;display:inline-block;margin:0 10px 15px 10px;padding:0px;}
.longevity-dashboard .col h4 {color:#000;font-size:13px;margin:0px;}
.longevity-dashboard .col .circle {height:80px;padding:15px;border-radius:10px;background:#FFF;}
.longevity-dashboard .col .ring {text-align:left;}
.longevity-dashboard .col .ring span {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;display:block;font-size:14px;}
.longevity-dashboard .col .ring.groen {border-color:#3d8a49;color:#3d8a49;font-weight:bold;}
.longevity-dashboard .col .ring.oranje {border-color:#ffa734;color:#ffa734;font-weight:bold;}
.longevity-dashboard .col .ring.geel {border-color:#ffe934;color:#ffe934;font-weight:bold;}
.longevity-dashboard .col .ring.rood {border-color:#ec3d2b;color:#ec3d2b;font-weight:bold;}

.carousel-control-next, .carousel-control-prev {margin-top:0px;border-radius:10px;}
.carousel-control-next:hover, .carousel-control-prev:hover {background:rgba(0, 0, 0, 0.1);}

/* custom styling rings*/
.longevity-dashboard .col .groen {background:#FFF;color:#11bf70;; }
.longevity-dashboard .col .oranje {background:#FFF;color:#ffa734; }
.longevity-dashboard .col .geel {background:#FFF;color:#ffe934;}
.longevity-dashboard .col .rood {background:#FFF;color:#ec3d2b; }
.longevity-dashboard .col .groen .ring::before {background:#f6f6f6;color:#11bf70;}
.longevity-dashboard .col .oranje .ring::before {background:#f6f6f6;color:#ffa734;}
.longevity-dashboard .col .geel .ring::before {background:#f6f6f6;color:#ffe934;}
.longevity-dashboard .col .rood .ring::before {background:#f6f6f6;color:#ec3d2b;}

.longevity-dashboard .col .ring::before {font-family:"Font Awesome 6 Free";display:inline-block;vertical-align:middle;font-size:14px;
  font-weight:bold;padding:10px 12px;margin:0 10px 0 0;border-radius:10px;float:left;}
.longevity-dashboard .col .ring.Sport::before {content:"\f1e3";}
.longevity-dashboard .col .ring.lang::before {content:"\f1e3";}
.longevity-dashboard .col .ring.vaak::before {content:"\f1e3";}
.longevity-dashboard .col .ring.stappen::before {content:"\f54b";}
.longevity-dashboard .col .ring.Krachttraining::before {content:"\f44b";}
.longevity-dashboard .col .ring.kracht::before {content:"\f44b";}
.longevity-dashboard .col .ring.zitten::before {content:"\f6c0";}

.longevity-dashboard .col .ring.Rook::before {content:"\f48d";}
.longevity-dashboard .col .ring.water::before {content:"\e4f4";}
.longevity-dashboard .col .ring.Bewerkt::before {content:"\f563";}
.longevity-dashboard .col .ring.Alcoholische::before {content:"\f4e3";}
.longevity-dashboard .col .ring.plantaardig::before {content:"\f787";}
.longevity-dashboard .col .ring.Omega-3::before {content:"\e4c6";}

.longevity-dashboard .col .ring.Stressniveau::before {content:"\e064";}
.longevity-dashboard .col .ring.stress::before {content:"\e064";}
.longevity-dashboard .col .ring.Mediatie::before {content:"\f4c2";}

.longevity-dashboard .col .ring.slaap::before {content:"\f236";}
.longevity-dashboard .col .ring.Hoeveel.slaap::before {content:"\f186";}
.longevity-dashboard .col .ring.Ontspan.voor::before {content:"\f017";}

.longevity-dashboard .col .ring.Mentale::before {content:"\f004";}


/* Advies section */
.longevity-questions .box {padding-top:10px;}
.longevity-questions .box h3 {font-weight:normal;}
.longevity-questions .box h3 i {padding-right:10px;}

#advies-section {font-size:13px;margin:0px;padding:0 15px 0 15px;}
#advies-section .feedback-list {padding:0px;margin:0px;}
#advies-section ul {padding:0px;display: inline-block;}
#advies-section li {background:#FFF;width:100%;display:flex;margin:0 0 15px 0;min-height:auto;float:left;padding:10px 15px;list-style:none;border-radius:5px;font-size:16px;}
#advies-section li:hover {background:#f1f6fb;}
#advies-section li i {font-size:15px;}
#advies-section li .feedback {width:100%;line-height:22px;}


.tips-section .box {background:none;border:0px;text-align:center;padding:0 0;}
.tips-section .box .tip-item {background:#e8f4da;min-height:300px;display:inline-block;border-radius:10px;}

.tips-section .box h4 {width:70%;text-align:center;padding:30px;color:#000;margin:0 auto;}
.tips-section .box h4::before {font-family:"Font Awesome 6 Free";display:inline-block;vertical-align:middle;font-size:36px;font-weight:bold;content:"\f0eb";
width:100px;height:100px;line-height:100px;border-radius:50px;display:block;margin:0 auto 15px auto;background:#FFF;color:#000;}

.tips-section .box h4.zitten::before {content:"\f6c0";}
.tips-section .box h4.bloedsuikerspiegel::before {content:"\f21e";}
.tips-section .box h4.Aerobe::before {content:"\f70c";}
.tips-section .box h4.Actieve::before {content:"\f554";}
.tips-section .box h4.Staand::before {content:"\f183";}
.tips-section .box h4.DNA-veroudering::before {content:"\f471";}


.example-section .box {background:#FFF;}
.example-section .box h2 {margin:15px 0 0 0;}
.example-section .box h2::before {font-family:"Font Awesome 6 Free";display:inline-block;vertical-align:middle;font-weight:bold;content:"\f0eb";font-size:16px;padding:0 5px 0 0;}


ul.examples-list {margin:0px;padding:0px;display:inline-block;}
.examples-list li {width:31%;margin:1%;float:left;list-style:none;background:#f9f9f9;color:#000;border-radius:10px;
  overflow:hidden;cursor:pointer;}
.examples-list li div {height:100px;padding:24px 20px;opacity:1;cursor:pointer;background-size:cover;background-position:0 -50px; }
.examples-list h4 {color:#000;font-size:13px;padding:15px;min-height:65px;}
.examples-list p {display:none;}

.examples-list .example-item .favorite {float:right;margin-top:-15px;color:#FFF;cursor:pointer;}
.examples-list .example-item .favorite:hover i {font-weight:700;cursor:pointer}
.card-img-top .favorite {float:right;margin:15px;color:#FFF;cursor:pointer;}
.card-img-top .favorite:hover i {font-weight:400;cursor:pointer}
.card-img-top .favorite i {cursor:pointer;}

.examples-list .example-item.fiets h4::before {font-family:"Font Awesome 6 Free";content:"\f206";}
.examples-list .example-item.squats h4::before, .examples-list .example-item.krachttraining h4::before {font-family:"Font Awesome 6 Free";content:"\f44b";}
.examples-list .example-item.trap h4::before {font-family:"Font Awesome 6 Free";content:"\e289";}
.examples-list .example-item.yoga h4::before {font-family:"Font Awesome 6 Free";content:"\f4c2";}
.examples-list .example-item.stappenteller h4::before {font-family:"Font Awesome 6 Free";content:"\f54b";}
.examples-list .example-item.pauzes h4::before {font-family:"Font Awesome 6 Free";content:"\f2f2";}
.examples-list .example-item.sportactiviteiten h4::before {font-family:"Font Awesome 6 Free";content:"\f1e3";}
.examples-list .example-item.hardlopen h4::before {font-family:"Font Awesome 6 Free";content:"\f70c";}
hardlopen

.open_close {color:#000;display:block;}
.feedback-list {max-height:0;overflow:hidden;transition:max-height 0.5s ease-out;}
.feedback-list li {opacity:0;transform:translateY(20px);transition:opacity 0.5s ease-out, transform 0.5s ease-out;}
.feedback-list li.visible {opacity:1;transform:translateY(0);}
.tips-list li, .examples-list li {opacity:0;transform:translateY(20px);transition:opacity 0.5s ease-out, transform 0.5s ease-out;}
.tips-list li.visible, .examples-list li.visible {opacity:1;transform:translateY(0);}
.feedback-list.expanded {max-height:2000px; /* Zorg dat dit groot genoeg is voor je content */}
.feedback-content p {margin:0px;}
.feedback-content p.feedback {margin-bottom:10px;}

/*gezondheidsplan */
.health-plan .col-md-9 .box {background: #FFF!important;border:0px;padding-top:1px;}
.health-plan .col-md-9 .box .icon {background:#ebebeb;width:32px;height:32px;line-height:30px;border-radius:20px;top:10px;right:10px;float:right;
  font-weight:bold;position:absolute;font-size:14px;opacity:0.5;text-align:center;}
.health-plan .box .score {color:#000;font-size:28px;font-weight:700;}
.health-plan .box h3 {text-transform:uppercase;text-align:left;font-size:12px;opacity:0.5;color:#000;margin-top:15px;}
.health-plan .box.Voeding {background:#C8E6C9;}
.health-plan .box.Beweging {background:#FFCC80;}
.health-plan .box.Slaap {background:#BBDEFB;}
.health-plan .box.Stress {background:#D1C4E9;}
.health-plan .box.Persoonlijk {background:#B2EBF2;}



.health-plan ul {padding:0px;margin:0px;}
.health-plan ul li {font-size:14px;list-style:none;padding:5px;border:1px solid #ebebeb;border-radius:5px;margin: 0 0 5px 0;}
.health-plan ul li .toggle-header {width:100%;display:inline-block;}
.health-plan ul li .toggle-header .icon {width:7px;height:7px;border-radius:5px;float:left;margin:10px 5px 0 0;text-shadow:0 0px 2px rgba(255,255,255,1);}
.health-plan ul li .toggle-header .question_title {float:left;font-size:14px;font-weight:400;text-shadow:0 0px 2px rgba(255,255,255,1);max-width:94%}
.health-plan ul li .toggle-header .question_title span {color:#007b3e;}
.health-plan ul li .toggle-header i {float:right;}
.health-plan ul li .feedback-text {font-size:12px;color:#5d5d5d;text-shadow:0 0px 2px rgba(255,255,255,1);}
.health-plan ul li.groen {background:#e1f2ec;border-color:#dff0ea;}
.health-plan ul li.groen .icon {background:#007b3e;}
.health-plan ul li.geel .icon {background:yellow;}
.health-plan ul li.oranje .icon {background:orange;}
.health-plan ul li.rood .icon {background:red;}

.health-plan .card {background:#f3f3f3;border-color:#ebebeb;} 
.health-plan .card.active {background:#FFF;border-color:#e6f1e2;}
.health-plan .card .toggle-header i {float:right;margin:-20px 0 0 0;}
.health-plan .card-footer {border:0px;background:none;}
.health-plan .card-title  {font-size:16px;font-weight:500;text-shadow:0 0px 2px rgba(255,255,255,1);}
.health-plan .card-text  {font-size:14px;color:#5d5d5d;}
.health-plan .card .add-goal-btn {background:#FFF;width:32px;height:32px;border-radius:25px;border:1px solid #CCC;color:#000;padding:0px;float:left;margin:0 10px 0 0;}
.health-plan .card .add-goal-btn i {margin:5px 0 0 0;float:none;color:#5f6d7a;font-size:14px;}
.health-plan .card .add-goal-btn i.fa-circle-check {color:#007b3e;}
.health-plan #add-custom-goal-btn {margin:0px;}
.health-plan .card-footer span::before {padding:0 5px 0 0;}

.health-plan #goals-list .icon {background:#FFF;width:32px;height:32px;border-radius:5px;border:1px solid #CCC;padding:0px;float:left;margin:0 10px 0 0;font-weight:bold;
text-align:center;line-height:30px;color:#5f6d7a;}
.health-plan #goals-list .list-group-item {height:40px;line-height:30px;}
.health-plan #goals-list .list-group-item .btn-danger {padding:5px 15px 5px 15px;margin:0px;}
.health-plan #goals-list .list-group-item .goal-status {font-size:13px;}

.donut-wrapper {position:relative;display:inline-block;}
.donut-text {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;font-size:14px;font-weight:bold;}
.donut {width:100px;height:100px;}
.donut-ring {stroke:#FFF;stroke-width:10;fill:transparent;}
.donut-segment {stroke:#4caf50;stroke-width:10;fill:transparent;stroke-linecap:round;}
.box.lifestyle-box {position:relative;}

.filter-btn.active {color:#fff;}
.category-btn-all, .category-btn, .group-btn, .group-btn-all {background:none;border-color:#000;color:#000;border-radius: 20px;}
.category-btn-all:hover, .category-btn:hover, .group-btn:hover, .category-btn-all:focus, .category-btn:focus, .group-btn:focus {background:#000;border-color:#000;}
.category-btn.active, .category-btn-all.active {background:#000;border-color:#000;}
.group-btn.active, .group-btn-all.active {background-color:#000;border-color:#000;}
.impact {float:right;}
.impact-icon { display: inline-block;width:20px;height:7px;margin-right:0px;background-color:#ccc;}
.impact-icon:first-child {border-top-left-radius:3px;border-bottom-left-radius:3px;}
.impact-icon:last-child {border-top-right-radius:3px;border-bottom-right-radius:3px;}
.impact-icon.filled {background-color:#11bf70;}

/* ADMIN AREA */
.admin_head {background:rgba(0, 0, 0, 0.5);!important;text-transform:uppercase;padding:12px 0 12px 0;color:#FFF!important;font-size:14px;margin-top:0px!important;}
.admin_head i {font-size:13px;}
.admin_dashboard .box {text-align:center;}
.admin_dashboard .box h2 {height:40px;}
.admin_dashboard .sold_products {text-align:left;}
.admin_dashboard .sold_products ul {padding:0px;margin:0px;}
.admin_dashboard .sold_products li {list-style:none;border-bottom:1px solid #ebebeb;padding:10px 0;}
.admin_dashboard .sold_products li .total {float:right;font-size:12px;margin-top:15px;}
.top_customers h2 {text-align:left;}
.top_customers table {text-align:left;font-size:14px;width:100%;}
.top_customers table td {border-bottom:1px solid #ebebeb;padding:10px 0 10px 0;}
.top_customers table tr:hover {background:#f9f9f9;}
.top_customers table ul {padding:0px;margin:0px;}
.top_customers table ul li {font-size:12px;list-style:none;padding:0px;}

/* stats */
.stats .card small {position:absolute;right:15px;top:15px;}
.stats .card {height:100px;}

/* customers */

.admin-tab-content {background:#FFF;border:1px solid #ebebeb;padding:15px;margin-top:0px!important;margin-bottom:15px;border-radius:5px;border-top-left-radius:0px;}
.admin-tab-nav.nav-tabs {margin-left:-10px;}
.admin-tab-nav.nav-tabs .nav-link {box-shadow:none;border-bottom-left-radius:0px;border-bottom-right-radius:0px;}
.admin-tab-nav.nav-tabs .nav-link.active { background: rgb(255,255,255);
background: -moz-linear-gradient(173deg, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%)!important;
background: -webkit-linear-gradient(173deg, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%)!important;
background: linear-gradient(173deg, rgba(255,255,255,1) 0%, rgba(235,235,235,1) 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ebebeb",GradientType=1)!important; border-color:#ebebeb!important;color:#000;}


/* Logboek */
#logbook .list-group-item {padding:15px;}
#logbook .list-group-item .person {float:left;}
#logbook .list-group-item .date {float:right;background:#ebebeb;border:1px solid #CCC;color:#333333;border-radius:5px;padding:2px 5px;font-size:12px;}
#logbook .list-group-item p {clear:both;width:100%;}
#logbook .list-group-item small {background:blue;color:#FFF;border:1px solid darkblue;padding:3px 6px;border-radius:5px;font-size:13px;}
/* Longevity check */
.category-section {border:1px solid #ebebeb;margin:0 0 15px 0;border-radius:10px;padding:15px;}
.category-section h4 {padding:10px;background:#ebebeb;border-top-left-radius:10px;border-top-right-radius:10px;border-radius:10px}
.category-section h4 span {padding:0 5px 0 5px;}
.category-section ul {padding:0 0 0 5px;}
.category-section li {padding:0 0 10px 0;line-height:22px;list-style:none;}
.category-section li i {color:#CCC;}
/*.category-section li strong::before {font-family:"Font Awesome 6 Free";content:"\f0da";padding:0 5px 0 0;}*/

/* Orders */
.orders_table ul {padding:0px;}
.orders_table li {list-style:none;font-size:14px;}
.orders_table {font-size:14px;}


/* Quiz */
.result-box {padding:30px 0 15px 0;}
.result-box .resultaat {opacity:1;padding:0px;font-weight:bold;}
.latest-result {text-align:center;}

/* Login Screen */
.screen .min-h-screen  { background: rgb(16,103,47);
background: -moz-radial-gradient(circle, rgba(16,103,47,1) 0%, rgba(5,61,25,1) 100%);
background: -webkit-radial-gradient(circle, rgba(16,103,47,1) 0%, rgba(5,61,25,1) 100%);
background: radial-gradient(circle, rgba(16,103,47,1) 0%, rgba(5,61,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10672f",endColorstr="#053d19",GradientType=1); }
.screen.login_screen .min-h-screen  {background:#000;}
.login-video {width:750px;}
.login_screen .min-h-screen {padding-top:50px;}
.login_screen .login-input {margin-top:10px;z-index: 9999;
  position: relative;
}


/* Donuts Bloedtest groepen */
.result_chart {margin:20px 0 0 0!important;float:right;}
.svg-item {width:100%;font-size:16px;margin:0 auto;animation:donutfade 1s;}

@keyframes donutfade {
0% {opacity:.2;}
100% {opacity:1;}
}

@media (min-width:992px) {
    .svg-item {width:90%;}

}



.donut-segment {transform-origin:center;}
.donut-segment-2 {animation:donut1 3s;}
.segment-1{fill:#ccc;}
.segment-2 {}
.donut.green .donut-segment-2 {stroke:#00913d;}
.donut.green .donut-percent {color:#00913d;fill:#00913d;}
.donut.yellow .donut-segment-2 {stroke:#fad978;}
.donut.yellow .donut-percent {color:#fad978;fill:#fad978;}
.donut.red .donut-segment-2 {stroke:red;}
.donut.red .donut-percent {color:red;fill:red;}

.donut-percent {animation:donutfadelong 1s;}

@keyframes donutfadelong {
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes donut1 {
    0% {stroke-dasharray:0, 100;}
    100% {stroke-dasharray:69, 31;}
}


.donut-text {font-family:Arial, Helvetica, sans-serif;}

.donut-label {font-size:0.28em;font-weight:700;line-height:1;fill:#000;transform:translateY(0.25em);}
.donut-percent {font-size:0.5em;line-height:1;transform:translateY(0.5em);font-weight:bold;}
.donut-data {font-size:0.12em;line-height:1;transform:translateY(0.5em);text-align:center;text-anchor:middle;color:#666;fill:#666;animation:donutfadelong 1s;}

.col-md-4 {margin-bottom:15px;}

.login_screen .login-input {width:90%;border-radius:5px;}

@media (min-width:992px) {
    .svg-item {width:90%;}

}
@media (max-width:1730px) {
  .longevity-dashboard .col .circle {padding:10px;}

}

@media only screen and (max-width: 980px) { /* Mobile */
    .menu-btn {display:block;}
    .user_name, li.logout {display:none;}
    .navbar-brand {background:none;box-shadow: none;}
    .sidebar {position:relative}
    .sidebar .btn-close {color:#CCC;}
    .navbar .profile {margin:0px;padding:0px!important;}
    .navbar .profile li {float:left;margin-left:0px;}
    .navbar .profile li.notifications {margin:5px 0px 0 15px;}
    .navbar .profile .nav-link {margin:0px;}
    .nav-tabs .nav-link {margin:0 10px 10px 0;}
    .sidebar .nav-link {font-size:18px;border-bottom:1px solid #333333}
    .sidebar .nav-link i {font-size:16px;width:20px;}
    .bi {vertical-align: -.625em;width: 2rem;height: 2rem;}
    .result_chart {max-width:150px;float:none;}
    .desktop {display:none;}
    th.group {display:none;}
    td.functions {display:none;}
    table.table th {font-size:12px;}
    .bloedresultaten .table {font-size:12px;}
    .group.box .table {font-size:12px;}
    .group.box .col-md-10 {text-align:center;}
    .dashboard .col-md-4 {padding:0px;}
    .dashboard .longevity-check h2 {margin-top:15px;}
    .dashboard .longevity-check { }
    .dashboard .longevity-check .card {}
    .open_close {}
    .row {width:100%;margin:0px;padding:0px;}
    main.col-md-9 {padding:0px!important;}

    .vitatrack_guest {max-height:100px;}
    .labcode_register {padding:0 10px;}
    .labcode_register .col-md-6 {border-radius:15px;}
    .labcode_register .bloedtest_vb {padding:15px;}
    .labcode_register .bloedtest_vb img {max-height:50px;}
    .labcode_register .col-md-6 h1 {display:none;}
    
    .lab_thankyou {padding:15px;}

    .bloedresultaten .col-md-12 {padding:0px;}
    .bloedresultaten #table-view  td {padding-top:10px;}
    #table-view .progress-indicator-container {display:none;}
    #table-view .more_info {padding:0px 0 0 10px;}
    #table-view .more_info a {text-align:center;background:#FFF;border: 1px solid #ebebeb;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);border-radius: 5px;padding:10px 10px 10px 10px;line-height:38px;}
    #table-view .more_info a i {float:inherit;padding:0px;}
    #table-view .n_waarden {max-width:50px;font-size:10px;}

    .group.bg {background-position:center;background-size:contain;height:100px;margin-bottom: 0px;}
    .biomarker_group .biomarker {width:100%;}
    .biomarker_group .biomarker h4 {min-height:55px;}
    .dashboard .longevity-check .card {width:100%;margin:1% 0;padding:15px 15px 10px 15px;}
    .dashboard .longevity-check .card h5 {margin-bottom:13px;}

    .calorie-teller-section .cal-item label {min-height:50px;}
    .calorie-teller-section .cal-item {padding:0 2px 0 2px;}

    .longevity-questions {margin:0px;}
    .longevity-dashboard {width:100%;display:block;}
    .longevity-dashboard .col {width:48%;margin:1%;float:left;min-height:auto;}
    .examples-list li {width:100%;margin:0 0 15px 0;}
    .examples-list h4 {min-height:auto;}
}