/* /Pages/Chat.razor.rz.scp.css */
.chat-user[b-f5shfqt4gp] { font-size: larger; text-transform: lowercase; }

/* Make the card body a flex container that can shrink its children properly */
.chat-body[b-f5shfqt4gp] { height: calc(100dvh - 180px); min-height: 0; }

/* Strong, consistent borders everywhere (override Bootstrap where needed) */
.card[b-f5shfqt4gp] { border: 1px solid #495057 !important; }
.card-header[b-f5shfqt4gp] { border-bottom: 1px solid #495057 !important; background-color: var(--bs-light, #f8f9fa); }

/* Inputs and groups */
.form-control[b-f5shfqt4gp] { border: 1px solid #495057 !important; box-shadow: none; }

/* Messages container: fills remaining space, borders visible, scroll only when overflow */
.messages[b-f5shfqt4gp] {
  display: flex;
  flex-direction: column;
  gap: .5rem;

  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;              /* scrollbar shows only when needed */
  scrollbar-gutter: stable;

  border: 1px solid #495057;
  border-radius: .5rem;
  background: var(--bs-body-bg, #fff);
  padding: .5rem;
}

/* Message rows */
.msg[b-f5shfqt4gp] { display: flex; }
.msg.system[b-f5shfqt4gp] { justify-content: center; color: var(--bs-secondary-color, #6c757d); font-style: italic; }
.msg.mine[b-f5shfqt4gp] { justify-content: flex-end; }
.msg.other[b-f5shfqt4gp] { justify-content: flex-start; }

/* Bubbles with strong borders */
.bubble[b-f5shfqt4gp] {
  max-width: 70ch;
  padding: .5rem .75rem;
  border-radius: .5rem;
  border: 1px solid #495057;
  background-color: var(--bs-light-bg-subtle, #f8f9fa);
}
.msg.mine .bubble[b-f5shfqt4gp] { background-color: var(--bs-success-bg-subtle, #e8f5e9); }
.msg.other .bubble[b-f5shfqt4gp] { background-color: var(--bs-body-bg, #fff); }

/* Bubble header (message header): strong separator line */
.meta[b-f5shfqt4gp] {
  font-size: .85rem;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: .25rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid #495057;
}

/* Text wrapping */
.text[b-f5shfqt4gp] { white-space: pre-wrap; word-break: break-word; }

.min-h-0[b-f5shfqt4gp] { min-height: 0 !important; }
/* /Pages/Components/AddWidgetPopup.razor.rz.scp.css */
.widget-popup[b-7hz2tx4k4o] {
    margin: 20px 10px 20px 10px;
}

.checkbox-container-widgets-columns[b-7hz2tx4k4o] {
    display: flex;
/*    justify-content: space-evenly;
*/}

.chart-type[b-7hz2tx4k4o] {
    display:flex;
    justify-content: space-evenly;
}

.chart-option[b-7hz2tx4k4o] {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    color: #3c4043;
    cursor: pointer;
    font-family: arial,sans-serif;
    font-size: 14px;
    height: 100%;
    padding: 20px;
    flex-grow: 2;
    margin: 10px;
}

.selected-chart[b-7hz2tx4k4o] {
    border: 2px solid blue;
}

.form-group[b-7hz2tx4k4o] {
    padding: 10px 0px 20px 0px;
    margin: 10px;
}

.titleLabel[b-7hz2tx4k4o] {
    color: black;
    font-weight: 500;
}

.button-group[b-7hz2tx4k4o] {
    display: flex;
    justify-content: center;
}

.tvgnButton[b-7hz2tx4k4o] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 100%;
    height: 44px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    text-transform: none;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 150px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    margin-right: 10px;
}
/* /Pages/Components/Charts/AreaChart.razor.rz.scp.css */
.container-flex[b-2b9zr4j1o0] {
    margin: 10px;
    background-color: white;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    flex: 0 0 40%;
    flex-grow: 4;
    height: 48vh;
}

.sortable-chosen[b-2b9zr4j1o0] {
    border: 2px solid dodgerblue;
    opacity: 1; /* Fully opaque */
    cursor: grabbing;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5); /* Very pronounced shadow */
}

.sortable-drag[b-2b9zr4j1o0] {
    border: 2px dashed dodgerblue; /* Green, less pronounced */
    opacity: 0.5;
    cursor: grabbing;
}

.sortable-ghost[b-2b9zr4j1o0] {
    border: 2px dashed black;
    opacity: 0.3;
    cursor: grabbing;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.item-info[b-2b9zr4j1o0] {
    display: flex;
    justify-content: space-between;
    margin: 30px 30px -40px 30px;
}

.data-labels-show-option[b-2b9zr4j1o0] {
    margin-right: 20px;
    margin-top: -3px;
}

.row[b-2b9zr4j1o0] {
    margin: 0px 20px -20px 20px;
}

.overlay[b-2b9zr4j1o0] {
    padding-left: 40px;
}

    .overlay p[b-2b9zr4j1o0] {
        font-weight: 400;
        text-align: center;
        margin: 20px 0 20px 0;
    }

    .overlay label[b-2b9zr4j1o0] {
        font-weight: 500;
        margin: 20px 0 0 20px
    }

label[b-2b9zr4j1o0] {
    font-size: 14px;
}

.toepassen-button[b-2b9zr4j1o0] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
/*    margin: auto;
*/    margin-top: 40px;
}

button[b-2b9zr4j1o0] {
    background-color: white;
    border: none;
    margin-top: -10px;
}

p[b-2b9zr4j1o0] {
    flex-grow: 1;
    font-weight: bold;
    font-size: 16px;
}

.custom-checkbox label[b-2b9zr4j1o0] {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
}

    .custom-checkbox input[type="checkbox"][b-2b9zr4j1o0] {
        opacity: 0; 
        position: absolute;
    }

    .custom-checkbox .checkmark[b-2b9zr4j1o0] {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee; 
    }

    /* Stijl voor de checkbox wanneer deze is aangevinkt */
    .custom-checkbox input[type="checkbox"]:checked + .checkmark[b-2b9zr4j1o0] {
        background-color: #007bff;
    }

    /* Stijl voor het vinkje binnen de checkbox */
    .custom-checkbox .checkmark[b-2b9zr4j1o0]::after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Stijl voor het vinkje wanneer de checkbox is aangevinkt */
    .custom-checkbox input[type="checkbox"]:checked + .checkmark[b-2b9zr4j1o0]::after {
        display: block;
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }

/* Media Queries*/
@media (max-width: 940px) {
    .container-flex[b-2b9zr4j1o0] {
        flex-direction: column;
    }
}

@media (max-width: 500px) {
    .item-info p[b-2b9zr4j1o0] {
        font-size: 14px;
    }

    .data-labels-show-option[b-2b9zr4j1o0] {
        font-size: 12px;
    }
}
/* /Pages/Components/Charts/BarChart.razor.rz.scp.css */
.container-flex[b-740wq1ydn1] {
    margin: 10px;
    background-color: white;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    flex: 0 0 35%;
    flex-grow: 2;
    height: 48vh;
}


.sortable-chosen[b-740wq1ydn1] {
    border: 2px solid dodgerblue;
    opacity: 1; /* Fully opaque */
    cursor: grabbing;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5); /* Very pronounced shadow */
}

.sortable-drag[b-740wq1ydn1] {
    border: 2px dashed dodgerblue; /* Green, less pronounced */
    opacity: 0.5;
    cursor: grabbing;
}

.sortable-ghost[b-740wq1ydn1] {
    border: 2px dashed black;
    opacity: 0.3;
    cursor: grabbing;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.item-info[b-740wq1ydn1] {
    display: flex;
    justify-content: space-between;
    margin: 30px 30px -40px 30px;
}

.data-labels-show-option[b-740wq1ydn1] {
    margin-right: 20px;
    margin-top: -3px;
}

p[b-740wq1ydn1] {
    flex-grow: 1;
    font-weight: bold;
    font-size: 16px;
}

button[b-740wq1ydn1] {
    background-color: white;
    border: none;
    margin-top: -10px;
}

.row[b-740wq1ydn1] {
    margin: 0px 20px -20px 20px;
}

.overlay[b-740wq1ydn1] {
    padding-left: 40px;
}

    .overlay p[b-740wq1ydn1] {
        font-weight: 400;
        text-align: center;
        margin: 20px 0 20px 0;
    }

    .overlay label[b-740wq1ydn1] {
        font-weight: 500;
        margin: 20px 0 0 20px
    }

label[b-740wq1ydn1] {
    font-size: 14px;
}

.toepassen-button[b-740wq1ydn1] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
/*    margin: auto;
*/    margin-top: 40px;
}

.custom-checkbox label[b-740wq1ydn1] {
    display: inline-block;
    position: relative;
    padding-left: 25px; 
    cursor: pointer;
}

    .custom-checkbox input[type="checkbox"][b-740wq1ydn1] {
        opacity: 0; 
        position: absolute;
    }

    /* Stijl voor de aangepaste checkbox */
    .custom-checkbox .checkmark[b-740wq1ydn1] {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee; 
    }

    /* Stijl voor de checkbox wanneer deze is aangevinkt */
    .custom-checkbox input[type="checkbox"]:checked + .checkmark[b-740wq1ydn1] {
        background-color: #007bff; 
    }

    /* Stijl voor het vinkje binnen de checkbox */
    .custom-checkbox .checkmark[b-740wq1ydn1]::after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Stijl voor het vinkje wanneer de checkbox is aangevinkt */
    .custom-checkbox input[type="checkbox"]:checked + .checkmark[b-740wq1ydn1]::after {
        display: block;
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }

/*Media Queries*/
@media (max-width: 940px) {
    .container-flex[b-740wq1ydn1] {
        flex-direction: column;
    }
}

@media (max-width: 1600px) {
    .item-3[b-740wq1ydn1] {
        flex: 0 0 66%;
    }
}

@media (max-width: 500px) {
    .item-info p[b-740wq1ydn1] {
        font-size: 14px;
    }

    .data-labels-show-option[b-740wq1ydn1] {
        font-size: 12px;
    }
}
/* /Pages/Components/Charts/CircleChart.razor.rz.scp.css */
.container-flex[b-catc23z3nm] {
    margin: 10px;
    background-color: white;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    flex: 0 0 26%;
    flex-grow: 1;
    transition: width 2s;
    height: 48vh;
}

.sortable-chosen[b-catc23z3nm] {
    border: 2px solid dodgerblue;
    opacity: 1; /* Fully opaque */
    cursor: grabbing;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5); /* Very pronounced shadow */
}

.sortable-drag[b-catc23z3nm] {
    border: 2px dashed dodgerblue; /* Green, less pronounced */
    opacity: 0.5;
    cursor: grabbing;
}

.sortable-ghost[b-catc23z3nm] {
    border: 2px dashed black;
    opacity: 0.3;
    cursor: grabbing;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.item-info[b-catc23z3nm] {
    display: flex;
    justify-content: space-between;
    margin: 30px 30px -40px 30px;
}

p[b-catc23z3nm] {
    flex-grow: 1;
    font-weight: bold;
    font-size: 16px;
}

.data-labels-show-option[b-catc23z3nm] {
    margin-right: 20px;
    margin-top: -3px;
}

button[b-catc23z3nm] {
    background-color: white;
    border: none;
    margin-top: -10px;
}

.pie-chart[b-catc23z3nm] {
    margin-left: -20px;
}

.overlay[b-catc23z3nm] {
    padding-left: 40px;
}

    .overlay p[b-catc23z3nm] {
        font-weight: 400;
        text-align: center;
        margin: 20px 0 20px 0;
    }

    .overlay label[b-catc23z3nm] {
        font-weight: 500;
        margin: 20px 0 0 20px
    }

label[b-catc23z3nm] {
    font-size: 14px;
}

.toepassen-button[b-catc23z3nm] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
/*    margin: auto;
*/    margin-top: 40px;
}

.custom-checkbox label[b-catc23z3nm] {
    display: inline-block;
    position: relative;
    padding-left: 25px; 
    cursor: pointer;
}

    .custom-checkbox input[type="checkbox"][b-catc23z3nm] {
        opacity: 0; 
        position: absolute;
    }

    /* Stijl voor de aangepaste checkbox */
    .custom-checkbox .checkmark[b-catc23z3nm] {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee; 
    }

    /* Stijl voor de checkbox wanneer deze is aangevinkt */
    .custom-checkbox input[type="checkbox"]:checked + .checkmark[b-catc23z3nm] {
        background-color: #007bff;
    }

    /* Stijl voor het vinkje binnen de checkbox */
    .custom-checkbox .checkmark[b-catc23z3nm]::after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Stijl voor het vinkje wanneer de checkbox is aangevinkt */
    .custom-checkbox input[type="checkbox"]:checked + .checkmark[b-catc23z3nm]::after {
        display: block;
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }

.week-dropdown[b-catc23z3nm] {
    margin-left: 35px;
}

/* Media Queries */
@media (max-width: 940px) {
    .container-flex[b-catc23z3nm] {
        flex-direction: column;
    }
}

@media (max-width: 1600px) {
    .container-flex[b-catc23z3nm] {
        flex: 1 0 40%;
        flex-grow: 3;
    }

    .pie-chart[b-catc23z3nm] {
        margin-left: 5px;
    }
}

@media (max-width: 500px) {
    .item-info p[b-catc23z3nm] {
        font-size: 14px;
    }

    .data-labels-show-option[b-catc23z3nm] {
        font-size: 12px;
    }
}

/* /Pages/Components/Charts/ColumnChart.razor.rz.scp.css */
.container-flex[b-m0yqkhht9e] {
    margin: 10px;
    background-color: white;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    flex: 0 0 35%;
    flex-grow: 2;
    height: 48vh;
}

.sortable-chosen[b-m0yqkhht9e] {
    border: 2px solid dodgerblue;
    opacity: 1; /* Fully opaque */
    cursor: grabbing;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5); /* Very pronounced shadow */
}

.sortable-drag[b-m0yqkhht9e] {
    border: 2px dashed dodgerblue; /* Green, less pronounced */
    opacity: 0.5;
    cursor: grabbing;
}

.sortable-ghost[b-m0yqkhht9e] {
    border: 2px dashed black;
    opacity: 0.3;
    cursor: grabbing;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.item-info[b-m0yqkhht9e] {
    display: flex;
    justify-content: space-between;
    margin: 30px 30px -40px 30px;
}
.settings-selected-container[b-m0yqkhht9e] {
    display: flex;
    justify-content: space-between;
}
p[b-m0yqkhht9e] {
    flex-grow: 1;
    font-weight: bold;
    font-size: 16px;
}

.data-labels-show-option[b-m0yqkhht9e] {
    margin-right: 20px;
    margin-top: -3px;
}
.row[b-m0yqkhht9e] {
    margin: 0px 20px -20px 20px;
}

.overlay[b-m0yqkhht9e] {
    padding-left: 40px;
}

    .overlay p[b-m0yqkhht9e] {
        font-weight: 400;
        text-align: center;
        margin: 20px 0 20px 0;
    }

    .overlay label[b-m0yqkhht9e] {
        font-weight: 500;
        margin: 20px 0 0 20px
    }

label[b-m0yqkhht9e] {
    font-size: 14px;
}

.toepassen-button[b-m0yqkhht9e] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
/*    margin: auto;
*/    margin-top: 40px;
}

.custom-checkbox label[b-m0yqkhht9e] {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"][b-m0yqkhht9e] {
    opacity: 0;
    position: absolute;
}

/* Stijl voor de aangepaste checkbox */
.custom-checkbox .checkmark[b-m0yqkhht9e] {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* Stijl voor de checkbox wanneer deze is aangevinkt */
.custom-checkbox input[type="checkbox"]:checked + .checkmark[b-m0yqkhht9e] {
    background-color: #007bff;
}

/* Stijl voor het vinkje binnen de checkbox */
.custom-checkbox .checkmark[b-m0yqkhht9e]::after {
    content: "";
    position: absolute;
    display: none;
}

/* Stijl voor het vinkje wanneer de checkbox is aangevinkt */
.custom-checkbox input[type="checkbox"]:checked + .checkmark[b-m0yqkhht9e]::after {
    display: block;
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}


button[b-m0yqkhht9e] {
    background-color: white;
    border: none;
    margin-top: -10px;
}




/* Media Queries */
@media (max-width: 500px) {
    .item-info p[b-m0yqkhht9e] {
        font-size: 14px;
    }

    .data-labels-show-option[b-m0yqkhht9e] {
        font-size: 12px;
    }
}
/* /Pages/Components/Charts/LineChart.razor.rz.scp.css */
.container-flex[b-6b18enktrl] {
    margin: 10px;
    background-color: white;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    flex: 0 0 48%;
    flex-grow: 4;
    height: 48vh;
}

.sortable-chosen[b-6b18enktrl] {
    border: 2px solid dodgerblue;
    opacity: 1; /* Fully opaque */
    cursor: grabbing;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5); /* Very pronounced shadow */
}

.sortable-drag[b-6b18enktrl] {
    border: 2px dashed dodgerblue; /* Green, less pronounced */
    opacity: 0.5;
    cursor: grabbing;
}

.sortable-ghost[b-6b18enktrl] {
    border: 2px dashed black;
    opacity: 0.3;
    cursor: grabbing;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.item-info[b-6b18enktrl] {
    display: flex;
    justify-content: space-between;
    margin: 30px 30px -40px 30px;
}

.data-labels-show-option[b-6b18enktrl] {
    margin-right: 20px;
    margin-top: -3px;
}

.row[b-6b18enktrl] {
    margin: 0px 20px -20px 20px;
}

.overlay[b-6b18enktrl] {
    padding-left: 40px;
}

    .overlay p[b-6b18enktrl] {
        font-weight: 400;
        text-align: center;
        margin: 20px 0 20px 0;
    }

    .overlay label[b-6b18enktrl] {
        font-weight: 500;
        margin: 20px 0 0 20px
    }

label[b-6b18enktrl] {
    font-size: 14px;
}

.toepassen-button[b-6b18enktrl] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
/*    margin: auto;
*/    margin-top: 40px;
}

button[b-6b18enktrl] {
    background-color: white;
    border: none;
    margin-top: -10px;
}

p[b-6b18enktrl] {
    flex-grow: 1;
    font-weight: bold;
    font-size: 16px;
}

.custom-checkbox label[b-6b18enktrl] {
    display: inline-block;
    position: relative;
    padding-left: 25px; 
    cursor: pointer;
}

    .custom-checkbox input[type="checkbox"][b-6b18enktrl] {
        opacity: 0;
    }

    /* Stijl voor de aangepaste checkbox */
    .custom-checkbox .checkmark[b-6b18enktrl] {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    /* Stijl voor de checkbox wanneer deze is aangevinkt */
    .custom-checkbox input[type="checkbox"]:checked + .checkmark[b-6b18enktrl] {
        background-color: #007bff; 
    }

    /* Stijl voor het vinkje binnen de checkbox */
    .custom-checkbox .checkmark[b-6b18enktrl]::after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Stijl voor het vinkje wanneer de checkbox is aangevinkt */
    .custom-checkbox input[type="checkbox"]:checked + .checkmark[b-6b18enktrl]::after {
        display: block;
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }

/* Media Queries */
@media (max-width: 940px) {
    .container-flex[b-6b18enktrl] {
        flex-direction: column;
    }
}

@media (max-width: 500px) {
    .item-info p[b-6b18enktrl] {
        font-size: 14px;
    }

    .data-labels-show-option[b-6b18enktrl] {
        font-size: 12px;
    }
}

/* /Pages/Components/Charts/LopendeZendingen.razor.rz.scp.css */
.container-flex[b-ljvsgsfqua] {
    margin: 10px;
    background-color: white;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    flex: 0 0 35%;
    flex-grow: 2;
    height: 48vh;
}

.sortable-chosen[b-ljvsgsfqua] {
    border: 2px solid dodgerblue;
    opacity: 1; /* Fully opaque */
    cursor: grabbing;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5); /* Very pronounced shadow */
}

.sortable-drag[b-ljvsgsfqua] {
    border: 2px dashed dodgerblue; /* Green, less pronounced */
    opacity: 0.5;
    cursor: grabbing;
}

.sortable-ghost[b-ljvsgsfqua] {
    border: 2px dashed black; 
    opacity: 0.3;
    cursor: grabbing;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.item-info[b-ljvsgsfqua] {
    display: flex;
    justify-content: space-between;
    margin: 30px 30px -40px 30px;
}

.settings-selected-container[b-ljvsgsfqua] {
    display: flex;
    justify-content: space-between;
}

p[b-ljvsgsfqua] {
    flex-grow: 0;
    font-weight: bold;
    font-size: 16px;
}

.statusPlaceholder[b-ljvsgsfqua] {
    align-items: flex-end;
    position: absolute;
    right: 5vh;

}


/* the inner texts in the "Most recent" widget that displays information*/
.order-location[b-ljvsgsfqua] { 
    display: inline-block; /* Allows us to set width and padding */
    padding: 3px 8px; /* Top/bottom and left/right padding around the text */
    text-align: center; /* Center-align the text */
    border-radius: 10px; /* Rounded corners */
    color: white; /* Text color */
    font-weight: bold; /* Make the text bold */
    margin-right: 10px; /* Add some margin if needed */
    /* Use different background colors based on status */
    background-color: #4CAF50; /* Default background color, e.g., for 'Voltooid' */
}

.order-number[b-ljvsgsfqua] {
    display: inline-block; /* Allows us to set width and padding */
    margin-left: 2vh;
    border-radius: 10px; /* Rounded corners */
    color: white; /* Text color */
    font-weight: bold; /* Make the text bold */
    background-color: gray; /* Default background color, e.g., for 'Voltooid' */
    padding: 3px 8px;
    margin-right: 50%; /* Add some margin if needed */
    white-space:nowrap;
}

.row[b-ljvsgsfqua] {
    margin: 0px 20px -20px 20px;
}

button[b-ljvsgsfqua] {
    background-color: white;
    border: none;
    margin-top: -10px;
}

.lpzending-row-order[b-ljvsgsfqua] {
    display: flex;
    flex-direction: column;
    justify-content: center;
/*    margin-top: 2.5vh;*/
}

.lpzending-row-order :hover[b-ljvsgsfqua] {
    background-color: #E8E8E8;
    cursor: pointer
}

.lpzending-row-factuur[b-ljvsgsfqua] {
    display: flex;
    flex-direction: column;
    justify-content: center;
/*    margin-top: 2.5vh;*/
}

    .lpzending-row-factuur :hover[b-ljvsgsfqua] {
        background-color: #E8E8E8;
        cursor: pointer
    }

.lpzending-container[b-ljvsgsfqua] {
    display: flex;
    justify-content: flex-start;
/*    background-color: #F8F8F8;
*/    padding-top: 20px;
    border-bottom: 1px solid #DFDFDF;
}


/* The status circles in different colors*/
.green-circle[b-ljvsgsfqua] {
    border-radius: 100%;
    background-color: limegreen;
    justify-content: center;
    align-items: center;
    border: 5px;
    width: 20px;
    height: 20px;
    margin-right: 2vh; /* Adjust the margin as needed */
    margin-left: 2vh;
}

.red-circle[b-ljvsgsfqua] {
    border-radius: 100%;
    background-color: red;
    justify-content: center;
    align-items: center;
    border: 5px;
    width: 20px;
    height: 20px;
    margin-right: 2vh; /* Adjust the margin as needed */
    margin-left: 2vh;
}

.yellow-circle[b-ljvsgsfqua] {
    border-radius: 100%;
    background-color: yellow;
    justify-content: center;
    align-items: center;
    border: 5px;
    width: 20px;
    height: 20px;
    margin-right: 2vh; /* Adjust the margin as needed */
    margin-left: 2vh;
}

.gray-circle[b-ljvsgsfqua] {
    border-radius: 100%;
    background-color: dimgray;
    justify-content: center;
    align-items: center;
    border: 5px;
    width: 20px;
    height: 20px;
    margin-right: 2vh; /* Adjust the margin as needed */
    margin-left: 2vh;
}

.white-circle[b-ljvsgsfqua] {
    border-radius: 100%;
    background-color: white;
    justify-content: center;
    align-items: center;
    border: 5px;
    width: 20px;
    height: 20px;
    margin-right: 2vh; /* Adjust the margin as needed */
    margin-left: 2vh;
}

.overlay[b-ljvsgsfqua] {
    padding-left: 40px;
}

    .overlay p[b-ljvsgsfqua] {
        font-weight: 400;
        text-align: center;
        margin: 20px 0 20px 0;
    }

    .overlay label[b-ljvsgsfqua] {
        font-weight: 500;
        margin: 20px 0 0 20px
    }

label[b-ljvsgsfqua] {
    font-size: 14px;
}

.toepassen-button[b-ljvsgsfqua] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
/*    margin: auto;
*/    margin-top: 40px;
}

.custom-checkbox label[b-ljvsgsfqua] {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"][b-ljvsgsfqua] {
    opacity: 0;
    position: absolute;
}

/* Stijl voor de aangepaste checkbox */
.custom-checkbox .checkmark[b-ljvsgsfqua] {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* Stijl voor de checkbox wanneer deze is aangevinkt */
.custom-checkbox input[type="checkbox"]:checked + .checkmark[b-ljvsgsfqua] {
    background-color: #007bff;
}

/* Stijl voor het vinkje binnen de checkbox */
.custom-checkbox .checkmark[b-ljvsgsfqua]::after {
    content: "";
    position: absolute;
    display: none;
}

/* Stijl voor het vinkje wanneer de checkbox is aangevinkt */
.custom-checkbox input[type="checkbox"]:checked + .checkmark[b-ljvsgsfqua]::after {
    display: block;
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
/* /Pages/Components/Charts/MiniWidgets.razor.rz.scp.css */
.container-flex[b-s89xbyz2a0] {
    margin: 10px;
    background-color: white;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    flex: 0 0 26%;
    flex-grow: 1;
    transition: width 2s;
    height: 48vh;
}

.checkbox-container-widgets-columns[b-s89xbyz2a0]{
    display:flex;
    justify-content:space-evenly;
}
.checkbox-container-widgets[b-s89xbyz2a0] {
    margin:auto;
}

.sortable-chosen[b-s89xbyz2a0] {
    border: 2px solid dodgerblue;
    opacity: 1; /* Fully opaque */
    cursor: grabbing;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5); /* Very pronounced shadow */
}

.sortable-drag[b-s89xbyz2a0] {
    border: 2px dashed dodgerblue; /* Green, less pronounced */
    opacity: 0.5;
    cursor: grabbing;
}

.sortable-ghost[b-s89xbyz2a0] {
    border: 2px dashed black;
    opacity: 0.3;
    cursor: grabbing;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.settings-selected-container[b-s89xbyz2a0] {
    display: flex;
    justify-content: space-between;
}


.item-info[b-s89xbyz2a0] {
    display: flex;
    justify-content: flex-end;
    margin: 30px 30px -40px 30px;
}

.data-labels-show-option[b-s89xbyz2a0] {
    margin-right: 20px;
    margin-top: -3px;
}

p[b-s89xbyz2a0] {
    font-weight: bold;
    font-size: 16px;
}

.grid2x2[b-s89xbyz2a0] {
    position: relative; /* Make this a positioning context */
    min-height: 80%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    gap:0.5vh;
}

    .grid2x2 > div[b-s89xbyz2a0] {
        display: flex;
        flex-basis: calc(50% - 10px);
        justify-content: center;
        flex-direction: column;
    }

        .grid2x2 > div > div[b-s89xbyz2a0] {
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

.checkbox-container[b-s89xbyz2a0] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
}

.settings-button[b-s89xbyz2a0] {
    background-color: transparent;
    border: none;
    cursor: pointer;
}


.overlay[b-s89xbyz2a0] {
    background-color:white;
    padding-left: 40px;
    min-width: 100%;
}

    .overlay p[b-s89xbyz2a0] {
        font-weight: 400;
        text-align: center;
        margin: 20px 0 20px 0;
    }

    .overlay label[b-s89xbyz2a0] {
        font-weight: 500;
        margin: 20px 0 0 20px
    }

label[b-s89xbyz2a0] {
    font-size: 14px;
}

.toepassen-button[b-s89xbyz2a0] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
/*    margin: auto;
*/    margin-top: 40px;
}

.custom-checkbox label[b-s89xbyz2a0] {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"][b-s89xbyz2a0] {
    opacity: 0;
    position: absolute;
}

/* Stijl voor de aangepaste checkbox */
.custom-checkbox .checkmark[b-s89xbyz2a0] {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* Stijl voor de checkbox wanneer deze is aangevinkt */
.custom-checkbox input[type="checkbox"]:checked + .checkmark[b-s89xbyz2a0] {
    background-color: #007bff;
}

/* Stijl voor het vinkje binnen de checkbox */
.custom-checkbox .checkmark[b-s89xbyz2a0]::after {
    content: "";
    position: absolute;
    display: none;
}

/* Stijl voor het vinkje wanneer de checkbox is aangevinkt */
.custom-checkbox input[type="checkbox"]:checked + .checkmark[b-s89xbyz2a0]::after {
    display: block;
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.box[b-s89xbyz2a0] {
    border: 1px solid #ccc;
    background-color: white;
    border: 1px solid #DEDEDE;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

/*.box1 {
    margin: 0px 7px 7px 0px;
}

.box2 {
    margin: 0px 0px 7px 7px;
}

.box3 {
    margin: 7px 7px 0px 0px;
}

.box4 {
    margin: 7px 0px 0px 7px;
}

.box5 {
    margin: 7px 0px 0px 0px;
}

.box6 {
    margin: 7px 0px 0px 7px;
}*/

p[b-s89xbyz2a0] {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
}

.result-truck[b-s89xbyz2a0],
.result-extra[b-s89xbyz2a0],
.result-orders[b-s89xbyz2a0],
.result-kosten[b-s89xbyz2a0],
.result-facturen[b-s89xbyz2a0],
.result-loadtime[b-s89xbyz2a0] {
    font-size: 26px;
    text-align: center;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    opacity: 0; /* make things invisible upon start */
    animation: fadeIn-b-s89xbyz2a0 ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: 1.4s;
    color: #482067;
}

.result-orders[b-s89xbyz2a0] {
    color: orangered;
}

.result-kosten[b-s89xbyz2a0] {
    color: rebeccapurple;
}

.result-facturen[b-s89xbyz2a0] {
    color: green;
}

.result-loadtime[b-s89xbyz2a0] {
    color: darkgoldenrod;
}
.result-extra[b-s89xbyz2a0] {
    color:black;
}
.result-truck[b-s89xbyz2a0] {
    color: dodgerblue;
}

/* Media Queries */
@keyframes fadeIn-b-s89xbyz2a0 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 1150px) {
    .box[b-s89xbyz2a0] {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (max-width: 1600px) {
    .item[b-s89xbyz2a0] {
        flex: 0 0 30%;
    }
}
/* /Pages/Components/ErrorPopup.razor.rz.scp.css */
.widget-popup[b-9ykz9wgtrt] {
    margin: 20px 10px 20px 10px;
}
/* /Pages/Components/HandleLogOut.razor.rz.scp.css */
div[b-g1kzsfqfpu] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

p[b-g1kzsfqfpu] {
   font-weight: 500;
   padding: 20px 0px 20px 0px;
}

button[b-g1kzsfqfpu] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
    margin: auto;
    margin-bottom: 20px;
}


/* /Pages/Components/ModifyUserPopup.razor.rz.scp.css */
.widget-popup[b-596q4r97x0] {
    margin: 20px 10px 20px 10px;
}

.checkbox-container-widgets-columns[b-596q4r97x0] {
    display: flex;
    /*    justify-content: space-evenly;
*/
}

.chart-type[b-596q4r97x0] {
    display: flex;
    justify-content: space-evenly;
}

.chart-option[b-596q4r97x0] {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    color: #3c4043;
    cursor: pointer;
    font-family: arial,sans-serif;
    font-size: 14px;
    height: 100%;
    padding: 20px;
    flex-grow: 2;
    margin: 10px;
}

.selected-chart[b-596q4r97x0] {
    border: 2px solid blue;
}

.form-group[b-596q4r97x0] {
    padding: 10px 0px 20px 0px;
    margin: 10px;
}

.titleLabel[b-596q4r97x0] {
    color: black;
    font-weight: 500;
}

.button-group[b-596q4r97x0] {
    display: flex;
    justify-content: center;
}

.tvgnButton[b-596q4r97x0] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 100%;
    height: 44px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    text-transform: none;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 150px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    margin-right: 10px;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* /Pages/Components/OrderItem.razor.rz.scp.css */

/* The cards per order */
.card[b-8pwy0m93w7] {
    border: 0px solid #ddd;
    padding: 1px;
    margin: 20px;
    border-radius: 15px;
    box-shadow: 0px 3px 3px 3px #aaa;
    /*width: 90%; use this if you choose container justify-content: space-around*/
    width:fit-content;
    display: inline-block;
    position: relative; /* added for positioning */
}

.card-header[b-8pwy0m93w7] {
    font-weight: bold;
    margin-bottom: 10px;
    padding: 7px;
    border-radius: 5vh;
    width: fit-content;
    margin-top: 0.4vh;
    margin-left: 0.5vh;
}

    .card-header:hover[b-8pwy0m93w7] {
        font-weight: bold;
        /* margin-bottom: 10px;*/
        cursor: pointer;
    }


.card-body[b-8pwy0m93w7] {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1px;
}

.card:hover[b-8pwy0m93w7] {
    border: 2px solid #161614a4; /* or any other desired color */
    transition: border 0.1s ease; /* Optional: for smooth transition */
}

/*Details popup*/
.detail-button[b-8pwy0m93w7] {
    position: absolute;
    top: 0.5vh;
    right: 1vh;
    background-color: #00000008; /* #8172728f darker gray or transparant*/
    color: black;
    font-weight: bold;
    font-size: 16px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    padding: 5px 8px;
}

.show-container-button[b-8pwy0m93w7] {
    background-color: #00000008; /* #8172728f darker gray or transparant*/
    color: black;
    font-weight: bold;
    font-size: 16px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    padding: 5px 8px;
}

/*Card footer*/

.card-footer[b-8pwy0m93w7] {
    padding: 10px;
    border-top: 1px solid #eee;
}

.toggle-button[b-8pwy0m93w7] {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
}

    .toggle-button:hover[b-8pwy0m93w7] {
        background-color: #0056b3;
    }

.collapsible-content p[b-8pwy0m93w7] {
    margin: 10px 0;
}



.popup[b-8pwy0m93w7] {
    position: fixed;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 125vh;
    height: 50vh;
    background-color: Background;
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 12px #aaa;
    z-index: 1000;
    border-radius: 30px 30px 30px 30px;
}

.close-popup[b-8pwy0m93w7] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

/*The table in the cards*/
.mini-table[b-8pwy0m93w7] {
    width: 100%;
    border-collapse: collapse;
}

    .mini-table th[b-8pwy0m93w7], .mini-table td[b-8pwy0m93w7] {
        padding: 8px;
    }

    .mini-table th[b-8pwy0m93w7] {
        background-color: #fff; /* You can choose any color you prefer for the header */
        text-align: left; /* Align text to the left */
        font-size: 90%; /* Makes the text smaller, adjust the percentage as needed */
        font-weight: bold; /* Removes bold styling, optional */
        width: auto; /* Adjusts the width of the th, optional */
    }

    .mini-table td[b-8pwy0m93w7] {
        width:auto;
        padding: 8px;
        border-bottom: 0.5px solid #e5e5e5; /* Add a thin light grey border to the bottom of each cell */
    }

    .mini-table tr[b-8pwy0m93w7] {
        padding: 8px;
        border-bottom: 0.5px solid #e5e5e5; /* Add a thin light grey border to the bottom of each cell */
    }

        .mini-table tr:last-child td[b-8pwy0m93w7] {
            border-bottom: none; /* Remove the bottom border for the last row */
        }

.card-container[b-8pwy0m93w7] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap:10vh;
}
.container-toggle[b-8pwy0m93w7] {
    cursor: pointer;
    padding: 10px;
    text-align: center;
    background-color: #4ca6ffa8;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    margin: 10px 0;
}
/* /Pages/Components/SwitchEndpoint.razor.rz.scp.css */

p[b-swgryom564] {
    font-weight: 500;
    padding: 20px 0px 20px 0px;
}

button[b-swgryom564] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
    margin: auto;
    margin-bottom: 20px;
}
/* /Pages/Components/SwitchRelatie.razor.rz.scp.css */

p[b-eubltjzb1h] {
    font-weight: 500;
    padding: 20px 0px 20px 0px;
}

button[b-eubltjzb1h] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
    margin: auto;
    margin-bottom: 20px;
}
/* /Pages/Components/SwitchVestiging.razor.rz.scp.css */

p[b-qp5vu5r2ot] {
   font-weight: 500;
   padding: 20px 0px 20px 0px;
}

button[b-qp5vu5r2ot] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 40px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.9;
    margin: auto;
    margin-bottom: 20px;
}


/* /Pages/Dashboard.razor.rz.scp.css */
.dash-intro-buttons[b-gu16h904z5] {
    margin-right: 12px;
}

.button-1[b-gu16h904z5], .button-2[b-gu16h904z5] {
    appearance: button;
    backface-visibility: hidden;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
    font-size: 13px;
    height: 35px;
    outline: none;
    overflow: hidden;
    padding: 0 25px;
    position: relative;
    text-align: center;
    text-transform: none;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 120px;
    font-weight: 500;
}

.button-2[b-gu16h904z5] {
    background-color: #374FCE;
    color: #fff;
    margin: 0 0 0 15px;
}

.button-1[b-gu16h904z5] {
    background-color: #F8F8F8;
    color: #616160;
    margin: 0 0 0 15px;
}

    .button-1:disabled[b-gu16h904z5], .button-2:disabled[b-gu16h904z5] {
        cursor: default;
    }

    .button-1:focus[b-gu16h904z5], .button-2:focus[b-gu16h904z5] {
        box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
    }

button[b-gu16h904z5] {
    background-color: white;
    border: none;
    margin-top: -10px;
}

rz-dialog custom-dialog-class[b-gu16h904z5] {
    height: auto !important;
}
.custom-dialog-class .rz-dialog[b-gu16h904z5] {
    width: auto !important;
    height: auto !important;
}

.toepassen-button[b-gu16h904z5] {
    background-color: #374FCE;
    color: white;
    display: flex;
    justify-content: center;
    line-height: 2.5;
    margin: auto;
    margin-top: 100px;
}

.dash-intro[b-gu16h904z5] {
    height: 4rem;
    padding: 0px 3px 0px 15px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: -20px;
    margin-top: 3px;
}

.dash-intro-text[b-gu16h904z5] {
    display: flex;
}

.dash-text[b-gu16h904z5] {
    font-size: 26px;
    font-weight: bold;
}

@keyframes fadeInUp-b-gu16h904z5 {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.container-flex[b-gu16h904z5] {
    display: flex;
    /*  background-color: #fefefe;*/
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    margin: -10px 0px 0px 10px;
    /*  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;*/
    animation: 1s fadeInUp-b-gu16h904z5;
    height:fit-content;
}



.sortable-chosen[b-gu16h904z5] {
    background-color: red; /* Test red to see what is happening */
    border: 2px dashed #666; /* Dashed border */
    opacity: 0.1; /* Slightly transparent */
    cursor:pointer;
    cursor:pointer;
}

.sortable-drag[b-gu16h904z5] {
    background-color: #f0f0f0; /* Darker grey background */
    border: 2px solid #333; /* Solid border */
    opacity: 0.5; /* More transparent */
    cursor: grabbing; /* Cursor indicates dragging */
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2); /* Shadow for 3D effect */
    cursor: pointer;
}

.sortable-ghost[b-gu16h904z5] {
    background-color: red;
    border: 2px solid #333;
    opacity: 0.5;
    cursor: grabbing;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
    cursor: pointer;
}

@media (max-width: 1150px) {
    .container-flex[b-gu16h904z5] {
        flex-direction: column;
    }
}

@media (max-width: 1600px) {
    .item-1[b-gu16h904z5] {
        flex: 1 0 40%;
        flex-grow: 3;
    }

    .pie-chart[b-gu16h904z5] {
        margin-left: 5px;
    }
}

@media (max-width: 800px) {
    .dash-intro-buttons[b-gu16h904z5] {
        display: none;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-ki56p73jl8] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.logo[b-ki56p73jl8] {
    flex: 1 0 40%;
    flex-grow: 3;
}

    .logo img[b-ki56p73jl8] {
        width: 150px;
        padding-right: 20px;
    }

.welcome-text[b-ki56p73jl8] {
    margin-top: 10px;
    margin-right: 20px;
}

.profile-button button[b-ki56p73jl8], .logout-button button[b-ki56p73jl8] {
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: none;
}

main[b-ki56p73jl8] {
    flex: 1;
}

.body[b-ki56p73jl8] {
    background-color: #FAFAFA;
    padding: 10px;
}

.sidebar[b-ki56p73jl8] {
    background-color: #121635;
    transition: width 0.05s;
    transition-timing-function: ease-out;
}

.top-row[b-ki56p73jl8] {
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 0px;
    border-bottom: 1px solid #d6d5d5;
    display: flex;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content:flex-end;
}

    .top-row[b-ki56p73jl8]  a, .top-row[b-ki56p73jl8]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row[b-ki56p73jl8]  a:hover, .top-row[b-ki56p73jl8]  .btn-link:hover {
            text-decoration: underline;
        }

        .top-row[b-ki56p73jl8]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-ki56p73jl8] {
        display: none;
    }

    .top-row.auth[b-ki56p73jl8] {
        justify-content: space-between;
    }

    .top-row[b-ki56p73jl8]  a, .top-row[b-ki56p73jl8]  .btn-link {
        margin-left: 0;
    }

    .sidebar[b-ki56p73jl8] {
        background-color: #121635;
    }
}

@media (min-width: 641px) {
    .page[b-ki56p73jl8] {
        flex-direction: row;
    }

    .sidebar[b-ki56p73jl8] {
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ki56p73jl8] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-ki56p73jl8]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-ki56p73jl8], article[b-ki56p73jl8] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 700px) {
    .welcome-text[b-ki56p73jl8] {
        visibility: hidden;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.top-row[b-srj7n49415] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.profile[b-srj7n49415] {
    display: none;
}

.logo[b-srj7n49415] {
    flex: 1 0 40%;
    flex-grow: 3;
}

    .logo img[b-srj7n49415] {
        width: 150px;
        padding-right: 20px;
    }

.profile-button button[b-srj7n49415], .logout-button button[b-srj7n49415] {
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: none;
}

.navbar-toggler[b-srj7n49415] {
    background-color: rgba(255, 255, 255, 0.1);
}

.bottom-row[b-srj7n49415] {
    position: absolute;
    bottom: 0;
    padding-bottom: 10px;
    text-align: right;
    width: 100%;
    padding-right: 28px;
}

.icon-menu-arrow[b-srj7n49415] {
    text-align: right;
}

.navbar-brand[b-srj7n49415] {
    font-size: 1.1rem;
}

.nav-item[b-srj7n49415] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-srj7n49415] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-srj7n49415] {
        padding-bottom: 1rem;
    }

    .nav-item[b-srj7n49415]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item[b-srj7n49415]  a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
        }

        .nav-item[b-srj7n49415]  a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

@media (min-width: 641px) {
    .navbar-toggler[b-srj7n49415] {
        display: none;
    }

    .collapse[b-srj7n49415] {
        /* Never collapse the sidebar for wide screens */
        display: flex;
    }
}

@media (max-width: 640px) {
    .bottom-row[b-srj7n49415] {
        display: flex;
    }

    .arrow[b-srj7n49415] {
        display: none;
    }

    .top-row[b-srj7n49415] {
        margin-bottom: 10px;
    }

    .profile[b-srj7n49415] {
        display: flex;
    }

    .logo img[b-srj7n49415] {
        flex: 1 0 20%;
        flex-grow: 3;
    }
}