@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('../_content/VIVES.Styles.Library/css/VBranding.css');

:root {
    --sidebar-large-width: 18rem;
    --sidebar-medium-width: 13rem;
    --sidebar-small-width: 6rem;
    --navbar-height-flex-col: 75px;
    --navbar-height-flex-row: 150px;
    --border-radius: 0px;
    --icon-small: 24px;
    --icon-medium: 28px;
    --icon-large: 32px;
    --icon-margin-right: 0.5rem;
    --vh3-margin-bottom: 30px;
    --vh3-font-size-inherit-vh2: 1.875rem;
    --margin-between-main: 0.5rem;
}

html, body {
    font-family: var(--vives-font-family-poppins);
    background-color: var(--vives-sand-light);
    height: 100%;
    width: 100%;
    overflow: hidden;
}

h1, h2 {
    outline: none;
}

label:has(input){
    cursor: pointer;
}

.page {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.octoplus-sidebar-container {
    background-color: var(--vives-dark);
    padding: 2rem;
    width: var(--sidebar-large-width);
}

.octoplus-sidebar-container-collapsed {
    width: var(--sidebar-small-width);
}

.octoplus-navbarcontent-container {
    display: flex;
    flex-direction: column;
    width: calc(100% - var(--sidebar-large-width));
    height: 100%;
}

.octoplus-navbarcontent-container-collapsed {
    width: calc(100% - var(--sidebar-small-width));
}

.octoplus-navbar-container {
    background-color: var(--white);
}

.octoplus-content-container {
    overflow-y: auto;
    padding: 0.25rem;
    height: 100%;
}

.text--right{
    text-align: right;
}

.text--center{
    text-align: center;
}

button:disabled, button:disabled > * {
    cursor: not-allowed !important;
}
/*
    ---------------------------------------------------------------------------
    Blazor default error
    ---------------------------------------------------------------------------
*/

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        /*content: "An error has occurred."*/
    }

/*
    ---------------------------------------------------------------------------
    Main
    ---------------------------------------------------------------------------
*/

.vAlert {
    margin-bottom: var(--margin-between-main);
}

.vH1:before, .vH2:before {
    content: none;
}

.vH2 {
    margin-bottom: 0rem;
}

.vH3 {
    margin-top: var(--vh3-margin-bottom);
    font-size: var(--vh3-font-size-inherit-vh2);
}

.octoplus-page-content, .vGrid {
    background-color: var(--white);
}

.vToaster-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.custom-vToaster {
    right: 5rem;
    top: 5rem;
}

/*
    ---------------------------------------------------------------------------
    Sidebar
    ---------------------------------------------------------------------------
*/
.octoplus-sidebar-header {
    display: flex;
    justify-content: space-between;
}

    .octoplus-sidebar-header .navbar-toggler  {
        display: none;
    }

    .octoplus-sidebar-header-title {
        display: none;
    }

.octoplus-sidebar-logo-icon {
    display: none;
}

.octoplus-sidebar-collapsible-icon, .octoplus-sidebar-uncollapsible-icon {
    cursor: pointer;
}

.octoplus-sidebar-uncollapsible-icon-collapsed {
    rotate: 180deg;
    padding: 0.2rem;
}

.octoplus-info {
    display: flex;
    flex-direction: row;
    align-content: space-between;
}

.octoplus-environment, .octoplus-shorten-environment, .octoplus-version {
    color: var(--white);
    word-break: break-all;
}

.octoplus-version {
    font-size: 11px;
}

.octoplus-shorten-environment {
    display: none;
}

.octoplus-sidebar {
    display: flex;
    flex-direction: column;
}

.octoplus-sidebar-category-item {
    margin: 1.2rem 0;
}

.octoplus-sidebar-category-item-link {
    text-decoration: none;
}

.octoplus-sidebar-icon, .octoplus-sidebar-popup-icon {
    margin-right: var(--icon-margin-right);
}

.octoplus-sidebar-category-item-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.octoplus-sidebar-category-item-content-text {
    font-size: 1rem;
    color: var(--vives-gray);
    display: flex;
    justify-content: center;
    align-items: center;
}

.octoplus-sidebar-category-item-content:hover .octoplus-sidebar-category-item-content-text, .octoplus-sidebar-category-item-link-active {
    color: var(--white);
    font-weight: bold;
}

.octoplus-sidebar-icon, .octoplus-sidebar-collapsible-icon, .octoplus-sidebar-uncollapsible-icon {
    filter: invert(53%) sepia(80%) saturate(0%) hue-rotate(274deg) brightness(91%) contrast(94%);
}

.octoplus-sidebar-category-item-content:hover .octoplus-sidebar-icon, .octoplus-sidebar-icon-active {
    filter: brightness(0) invert(1);
}

.octoplus-sidebar-hr {
    color: var(--white);
}

.octoplus-sidebar-header {
    display: flex;
}

.octoplus-sidebar-branding {
    margin-right: 3rem;
}

.octoplus-sidebar-dashbord-large-mobile {
    display: none;
}

.popup-setting-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: normal;
    align-items: center;
    justify-content: left;
    padding: .5rem;
}

.setting-note {
    width: 50%;
    padding-left: 1rem;
    margin: 0;
}

.deadline-context {
    width: 50%;
}

.deadline-date {
    font-weight: bold;
    font-style:italic;
}

/* Collapsed sidebar only */
    .main-collapsed {
    margin-left: var(--sidebar-small-width);
}

.octoplus-sidebar-branding-link {
    display: flex !important;
    justify-content: center !important;
}

.octoplus-sidebar-category-item-content-collapsed {
    flex-direction: column !important;
    align-items: center !important;
}

.octoplus-sidebar-header-collapsed {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.octoplus-sidebar-logo-icon-collapsed, .octoplus-sidebar-icon-collapsed {
    display: block !important;
}

.octoplus-sidebar-collapsible-icon-collapsed, .octoplus-sidebar-uncollapsible-icon-collapsed {
    margin-top: 2rem !important;
}

.octoplus-sidebar-category-item-content-text-collapsed, .octoplus-sidebar-logo-collapsed, .octoplus-sidebar-dashbord-large-mobile-collapsed, .octoplus-environment-collapsed {
    display: none !important;
}

.octoplus-sidebar-category-item-collapsed img, .octoplus-sidebar-branding-collapsed {
    margin-right: 0 !important;
}

.octoplus-sidebar-container-collapsed .octoplus-sidebar-icon {
    height: var(--icon-medium) !important;
    width: var(--icon-medium) !important;
}

.octoplus-sidebar-dashboard-collapsed, .octoplus-sidebar-dashboard-hr-collapsed, .octoplus-shorten-environment-collapsed {
    display: block !important;
}

.octoplus-info-collapsed {
    display: flex;
    flex-direction: column;
}

.octoplus-shorten-environment-collapsed {
    text-align: center;
}

/*
    ---------------------------------------------------------------------------
    VDrilldown
    ---------------------------------------------------------------------------
*/

.hover-drilldown-item{
    cursor: pointer;
}

.hover-drilldown-item:hover {
    width: 100%;
    border-radius: 2px;
    font-weight: bold;
}

.vDrilldown-container {
    margin-bottom: 0rem !important;
}

/*.octoplus-drilldown {
    display: flex;
    flex-direction:row;
    justify-content:space-between;
 }*/

/*
    ---------------------------------------------------------------------------
    VTextarea
    ---------------------------------------------------------------------------
*/
.vTextarea-height{
    height:17rem; 
}

/*
    ---------------------------------------------------------------------------
    Navbar
    ---------------------------------------------------------------------------
*/

.octoplus-navbar .navbar-toggler {
    display: none;
}

.octoplus-navbar {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

.octoplus-navbar-page-title {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-left: 0.5rem;
}

.octoplus-navbar-page-title-icon {
    margin-right: var(--icon-margin-right);
}

.octoplus-navbar-fuctionality {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.octoplus-navbar-selects {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.octoplus-navbar-select {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-right: 1rem;
    max-width: 20rem;
}

.octoplus-navbar-select-for-vgrid-data {
    margin-top: 0rem;
    margin-bottom: 0rem;
}

.octoplus-navbar-icon {
    width: var(--icon-medium);
    height: var(--icon-medium);
}

.btn-spacing {
    margin-left: 1rem;
}

.btn-redirect::after {
    font-family: FontAwesome;
    content: "\f0a9";
    color: white;
    text-align: center;
    margin: auto;
    margin-left: 0.5rem;
}

.btn-redirect-back::before {
    font-family: FontAwesome;
    content: "\f0a8";
    color: white;
    text-align: center;
    margin: auto;
    margin-right: 0.5rem;
}

/*
    ---------------------------------------------------------------------------
    Page header
    ---------------------------------------------------------------------------
*/

.octoplus-page-header {
    background-color: var(--white);
    padding: 1rem 1rem;
    display: flex;
    margin-bottom: var(--margin-between-main);
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.octoplus-page-header-description {
    margin-left: 0.5rem;
}

.octoplus-page-header-btn {
    margin-left: 1rem;
}

/*
    ---------------------------------------------------------------------------
    Popups
    ---------------------------------------------------------------------------
*/

.octoplus-sidebar-popup {
    display: flex;
    flex-direction: row;
}

.octoplus-sidebar-popup-help-overview, .octoplus-sidebar-popup-help-detail, .octoplus-sidebar-popup-deadlines {
    margin-left: 0.5rem;
    margin-right: var(--margin-between-main);
    margin-bottom: var(--margin-between-main);
}

.octoplus-sidebar-popup-help-overview {
    width: 20%;
}

.octoplus-sidebar-popup-title {
    display: flex;
    flex-direction: row;
    margin-bottom: var(--margin-between-main);
}

.octoplus-sidebar-popup-title .vH2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.octoplus-sidebar-popup-help-categories, .octoplus-sidebar-popup-help-detail-description {
    display: flex;
    flex-direction: column;
}

.octoplus-sidebar-popup-help-categories {
    border-right: 2px var(--vives-gray) solid;
}

.octoplus-sidebar-popup-help-category, .octoplus-sidebar-popup-help-description-item {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.octoplus-sidebar-popup-help-category {
    border-left: 5px var(--vives-gray) solid;
}

.octoplus-sidebar-popup-help-category > span {
    cursor: pointer;
}

    .octoplus-sidebar-popup-help-category > span:hover {
        font-weight: bold;
    }

.octoplus-sidebar-popup-help-category-focus {
    border-left: 5px var(--vives-red) solid;
}

.shortcut-item {
    display: flex;
    text-align: left;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.octoplus-sidebar-popup-help-description-shortcut {
    font-weight: normal;
    color: #1E1E1E;
}

.octoplus-sidebar-popup-help-description-item {
    margin-right: 10px;
}

.help-shortcut-item {
    font-weight: normal;
    background-color: #EFEEE9;
    color: #4A4A4A;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    text-align: center;
}

.help-link {
    text-decoration: none;
}

.vPopup-button-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.octoplus-sidebar-popup {
    overflow-x: auto;
}

.octoplus-sidebar-popup-deadlines, .deadlines-table {
    width: 100%;
}

.btns-export-popup-vGrid {
    display: flex;
    justify-content: flex-end;
}

.btn-deny-export-vGrid {
    margin-right: 1.5rem;
}

/*
    ---------------------------------------------------------------------------
    Dashboard
    ---------------------------------------------------------------------------
*/

.octoplus-dashboard-banner {
    background-image: linear-gradient(0deg, rgba(30, 30, 30, 0.75), rgba(30, 30, 30, 0.75)), url("../assets/dashboard-banner.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

.octoplus-dashboard-banner-text {
    text-align: center;
    font-weight: bold;
    color: var(--white);
    font-size: 2rem;
    line-height: 2.5rem;
}

.octoplus-dashboard-items-container {
    display: flex;
    flex-wrap: wrap;
}

.octoplus-dashboard-deviating-percentage {
    font-weight: bold;
    text-align: right;
}

.octoplus-dashboard-deviating-percentage-placeholder {
    font-weight: bold;
}

.octoplus-dashboard-wrong-ola-row-action-btn {
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

/*
    other css elements
*/
.vBtn-back {
    background-color: #1E1E1E;
    border-radius: 100%;
    width: 45px;
    height: 45px;
    margin-right: 1rem;
}

/*
    ---------------------------------------------------------------------------
    Dienstonderbrekingen
    ---------------------------------------------------------------------------
*/

.link-to-opdrachtenfiche-row-action-btn {
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

.dienstonderbrekingen-overview-wizard-start-button {
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

.dienstonderbrekingen-wizard-content{
    display: flex;
    justify-content: space-between
}

.dienstonderbrekingen-wizard-grid-container{

}

.dienstonderbrekingen-wizard-totals-container{
    display: flex;
    gap: 1rem;
}

.dienstonderbrekingen-wizard-totals-title{
    flex-grow: 2;
}
/*
    ---------------------------------------------------------------------------
    VGrid
    ---------------------------------------------------------------------------
*/
.vgrid-col-icon-action, .vgrid-col-icon-action {
    width: 50px;
    max-width: 50px;
}

.vgrid-col-icon-ssp-action {
    width: 50px;
}

th.vgrid-col-icon-action .vGrid-filter-icon, th.vgrid-col-icon-ssp-action .vGrid-filter-icon {
    display: none;
}

td.vgrid-col-icon-action, td.vgrid-col-icon-ssp-action {
    text-align: center;
}

td.vgrid-col-icon-action a {
    color: var(--bs-body-color);
}

td.vgrid-col-icon-ssp-action img {
    height :10px;
}

td.vgrid-col-icon-ssp-action img:hover {
    cursor: pointer;
}

.custom-vgrid-field-width-base {
    min-width: 15rem;
}

.custom-vGrid-no-wrap {
    white-space: nowrap;
}

.custom-vgrid-select {
    min-width: 7.5rem;
}

#parametersLesgroepNrGrid .vGrid-table-container {
    min-height: 0;
}

#parametersWerkvormGrid .vGrid-table-container {
    min-height: 0;
}

#parameterBasisGrid .vGrid-table-container, #parameterESGrid .vGrid-table-container {
    min-height: 0;
}

.vGrid-line-status-container {
    width: 50px;
    max-width: 50px;
    text-align: center;
    margin:auto; /* In case parent is wider */
}

.vgrid-line-status--haserrors,
.vgrid-line-status--ismodified,
.vgrid-line-status--issaved {
    font-size: 1.2em;
    padding: 0 1rem;
    cursor: help;
}

.vgrid-line-status--haserrors {
    color: #E00020;
    cursor: pointer;
}

.vgrid-line-status--ismodified {
    color: #cc9a06;
}

.vgrid-line-status--issaved {
    color: #198754;
}

#opdrachtenGrid .vGrid-table-th:nth-last-child(1) .vGrid-thead-btn,
#opdrachtenGrid .vGrid-table-th:nth-last-child(1) .vGrid-filter-icon {
    display: none;
}

#opdrachtenGrid:has(+ .vGrid-table-th-actions) .vGrid-table-th:nth-last-child(2) .vGrid-thead-btn,
#opdrachtenGrid:has(+ .vGrid-table-th-actions) .vGrid-table-th:nth-last-child(2) .vGrid-filter-icon,
#opdrachtenficheGrid .vGrid-table-th:nth-last-child(2) .vGrid-thead-btn,
#opdrachtenficheGrid .vGrid-table-th:nth-last-child(2) .vGrid-filter-icon,
#opdrachtenGrid .vGrid-table-th:nth-child(2) .vGrid-thead-btn,
#opdrachtenGrid .vGrid-table-th:nth-child(2) .vGrid-filter-icon,
#opdrachtenficheGrid .vGrid-table-th:nth-child(2) .vGrid-thead-btn,
#opdrachtenficheGrid .vGrid-table-th:nth-child(2) .vGrid-filter-icon,
#functiesGrid .vGrid-table-th:first-child .vGrid-thead-btn,
#functiesGrid .vGrid-table-th:first-child .vGrid-filter-icon,
#eenheidFunctieGrid .vGrid-table-th:nth-child(2) .vGrid-thead-btn,
#eenheidFunctieGrid .vGrid-table-th:nth-child(2) .vGrid-filter-icon,
#financieleBronTypesGrid .vGrid-table-th:nth-child(2) .vGrid-thead-btn,
#financieleBronTypesGrid .vGrid-table-th:nth-child(2) .vGrid-filter-icon,
#financieleBronGrid .vGrid-table-th:nth-child(2) .vGrid-thead-btn,
#financieleBronGrid .vGrid-table-th:nth-child(2) .vGrid-filter-icon,
#enveloppeGrid .vGrid-table-th:first-child .vGrid-thead-btn,
#enveloppeGrid .vGrid-table-th:first-child .vGrid-filter-icon,
.onderzoek-opdrachten .vGrid-table-th:last-child .vGrid-thead-btn,
.onderzoek-opdrachten .vGrid-table-th:last-child .vGrid-filter-icon {
    display: none;
}

.vGrid .vHierarchy-selector-button, .vGrid .vHierarchy-selector-value{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.vGrid .vHierarchy-selector{
    border-radius: 0 !important;
}
/*
    ---------------------------------------------------------------------------
    Filters
    ---------------------------------------------------------------------------
*/
.vLabel {
    margin-bottom: .2rem !important;
}

.octoplus-filters--opdrachtenfiche {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

.octoplus-filters--opdrachten {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

.octoplus-filters--financielebronnen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

.onderzoeken-pageheader-container .octoplus-filters-actions, .financielebron-pageheader-container .octoplus-filters-actions {
    margin-top: 0.5rem;
}

.octoplus-filter label, .octoplus-filter select {
    width: 100%;
}

.octoplus-filter label {
    font-size: .9rem !important;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
}

.octoplus-filter select{
    cursor: pointer;
}

.octoplus-filters--opdrachtenfiche, .octoplus-filters--opdrachten {
    margin-bottom: 1rem;
}

.octoplus-filters-actions {
    padding: 0;
    margin: 0;
    margin-top: -.5rem;
    margin-bottom: -.5rem;
    text-align: right;
}

.octoplus-filter-clear {
    font-size: 0.8em;
    align-self: end;
    margin-left: 10px;
}

/*
    ---------------------------------------------------------------------------
    Opdrachtenfiche
    ---------------------------------------------------------------------------
*/

.opdrachtenfiche-person-summary {
    background-color: var(--white);
    padding: 0.5rem 1rem;
    margin-bottom: var(--margin-between-main);
    border-radius: var(--border-radius);
}

.opdrachtenfiche-person-summary-label {
    font-weight: bold;
}

.share-icon-opdrachtenfiche {
    padding: 0.25rem;
}

.persoon-info-opdrachtenfiche {
    width: 20rem;
}

/* TODO: update component in fwk to disable/enable default margin-bottom */
.opdrachtenfiche-person-summary .vComponent-multi-element-row {
    margin-bottom: 0;
}

.vacature-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.vacature-input-container {
    display: flex;
}

.vacature-input {
    width: 30rem;
    margin-right: 1rem;
}

.opdrachtenfiche-header {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

.opdrachtenfiche-header-searched-person-functionality {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 2.5rem;
}

.opdrachtenfiche-header-searched-person-functionality .vComponent-combobox {
    width: 20rem;
}

.opdrachtenfiche-header-searched-btns-start {
    display: flex;
}

.personeeloverzicht-btn-opdrachtenfiche, .personeeloverzicht-btn-vacature {
    width: 24px;
    height: 24px
}

.personeeloverzicht-vacaturelabel {
    white-space: nowrap;
}

/* Taalcerficaten in OpdrachtenVerdeelComponent */

/*.valid-attest::before {
    display: block;
    position: relative;
    background-image: url("../assets/icons/certificaat.svg");
    background-repeat: no-repeat;
    filter: invert(43%) sepia(62%) saturate(488%) hue-rotate(100deg) brightness(97%) contrast(96%);
    color: #1C985E;
}*/

.valid-attest {
    color: #1C985E;
}

.valid-attest::after {
    font-family:"FontAwesome";
    font-weight: 900;
    color: #1C985E;
    content: "\f00c";
}

/*.invalid-attest::before {
    background-image: url("../assets/icons/certificaat.svg");
    background-repeat: no-repeat;
    width: 1rem;
    height: auto;
    filter: invert(52%) sepia(60%) saturate(1716%) hue-rotate(351deg) brightness(101%) contrast(98%);
    color: #FD7E14;
}*/

.invalid-attest {
    color: #FD7E14;
}

.invalid-attest::after {
    font-family: "FontAwesome";
    font-weight: 900;
    color: #FD7314;
    content: '\f0a3';
}

/*.no-attest-found::before {
    background-image: url("../assets/icons/certificaat.svg");
    background-repeat: no-repeat;
    width: 1rem;
    height: auto;
    filter: invert(10%) sepia(93%) saturate(4695%) hue-rotate(344deg) brightness(110%) contrast(112%);
}*/

.no-attest-found::after {
    color: #1E1E1E;
}

.fontdoceertaal {
    width: fit-content;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.navlink-no-underline {
    text-decoration: none;
}

.vBtn-image-myvives-logo {
    height:23px;
    padding:5px;
}
/* tooltip */
/*
    ---------------------------------------------------------------------------
    ContractInfo
    ---------------------------------------------------------------------------
*/
.octoplus-contractinfo-container .vGrid-table-container {
    min-height: auto !important;
    overflow-x: auto;
}

.octoplus-contractinfo-container .vGrid-action-controls {
    display: none !important;
}

.total-opdrachten-contract {
    font-weight: bold;
    margin-bottom: 1rem;
}
/*
    ---------------------------------------------------------------------------
    Opdrachten
    ---------------------------------------------------------------------------
*/

.vCombobox-person-filter {
    z-index: 10;
}

.copy-opdracht-url-icon:hover {
    cursor: pointer
}

.vcombobox-input-suggestion {
    font-size: .9rem !important;
}

/*
    ---------------------------------------------------------------------------
    Opdrachten Percentages
    ---------------------------------------------------------------------------
*/

.OP-container {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: white;
    border-radius: var(--border-radius);
    padding-bottom: 0;
}

.contract-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    align-items: baseline;
    align-content: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0;
}

.contract-items-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;
}

.subtotal-preview-element {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center !important;
    text-align: center;
    margin-bottom: 0;
   
}

.subtotal-preview-element-contract {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    margin-bottom: 0;
    margin-left: 2rem;
}

.subtotal-preview-label {
    width: 100%;
    font-weight: bold;
    font-size: .75rem;
    color: #E00020;
    text-transform: uppercase;
}

.subtotal-preview-label-black {
    width: 100%;
    font-weight: bold;
    font-size: .75rem;
    color: #1E1E1E;
}

.subtotal-preview-perc {
    width: 100%;
    font-size: 1.5rem;
    font-weight: normal;
    margin-top: -1.5rem;
    margin-bottom: 0;
}

.subtotal-preview-perc-green {
    width: 100%;
    font-size: 2.5rem;
    font-weight: normal;
    margin-top: -1.5rem;
    margin-bottom: 0;
    color: green;
}
.subtotal-preview-perc-red {
    width: 100%;
    font-size: 2.5rem;
    font-weight: normal;
    margin-top: -1.5rem;
    margin-bottom: 0;
    color: red;
}

.subtotal-preview-perc-small {
    width: 100%;
    font-size: 1rem;
    font-weight: normal;
}

.subtotal-preview-perc-small-contract {
    width: 100%;
    font-size: 1rem;
    font-weight: normal;
    margin-top: -1rem;
}

.subtotal-label {
    font-weight: bold;
    width: 100%;
}

.subtotal-perc {
    font-weight: normal;
    width: 100%;
}

/*.subtotal-perc::after {
    content:"%";
}

.subtotal-preview-perc-small::after {
    content: "%";
}
*/

.subtotal-preview-perc-small-contract::after {
    content: none;
}

/*.subtotal-preview-perc::after {
    content: "%";
}*/

.vBg-Totals {
    color: #1E1E1E;
    padding: .5rem;
    border-radius: 5px;
}
    
&-primary
{
    background-color: #E00020;
    opacity: 50%
}

&-success {
    background-color: #198754;
    opacity: 50%
}

&-warning {
    background-color: #ff6a00;
    opacity: 50%
}

.vComponent-multi-element-row {
    margin-bottom: 0;
    width: 100%;
}

.otp-label {
    font-weight: bold;
}

.otp-perc {
    font-weight: normal;
}

.otp-perc::after {
    content:"%";
}

.data-description {
    font-size: .75rem;
    font-weight: normal;
    color: #AAA68A;
    font-style:italic;
}

.percentage-negative {
    color: #E00020;
}

/* vAccordeon Items styling */
.vAccordeon-preview-label {
    font-weight: bold;
}

.vAccordeon-preview-item {
    font-weight: normal;
}

  /*  .vAccordeon-preview-item::after {
        content: "%";
    }*/

.open-accordeon {
    margin-top: 0.75rem;
    margin-right: -1rem;
}

.open-accordeon:hover {
    opacity: 0.8;
}

/*
    ---------------------------------------------------------------------------
    OpdrachtVerdeelComponent
    ---------------------------------------------------------------------------
*/

.no-opdrachten-text {
    text-align: center;
    font-weight: bold;
}

.invalid-leeractiviteit {
    background-color: #E00020 !important;
}

    .invalid-leeractiviteit::placeholder {
        color: black;
    }

.no-formule-deviation {
    background-color: #90EE90;
}

.formule-deviation {
    background-color: #FFFFE0;
}

.octoplus-opdrachten-grid-container{
    position: relative;
}
  
.octoplus-opdrachten-actions-container{
    position: absolute;
    right: 0;
    top:0;
}

.octoplus-opdrachten-actions-container .surrounddropdowndiv {
    padding: 0;
    display: inline-block;
}

.octoplus-opdrachten-actions-container .dropdown-item{
    cursor: pointer;
}

.octoplus-opdrachten-actions-container .dropdown-item.dropdown-item--disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/*
    ---------------------------------------------------------------------------
    Onderzoeken
    ---------------------------------------------------------------------------
*/

.onderzoeken-pageheader-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/*
    ---------------------------------------------------------------------------
    Financiële bron
    ---------------------------------------------------------------------------
*/

.financielebron-pageheader-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/*
    ---------------------------------------------------------------------------
    Parameters
    ---------------------------------------------------------------------------
*/
    .vGrid-title {
        padding: 1rem;
        font-weight: bold;
        text-transform: uppercase;
    }

.vGrid-subtitle {
    padding: 1rem;
    padding-bottom: 0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.5rem;
}

.vGrid-spacing {
    margin-top: 2rem;
}

.tags-input {
    margin-left: 1rem;
    padding: 1rem;
}

.vInput-tags {
    padding: .5rem;
    border-radius: 4px;
    font-size: 1rem;
    background-color: #EFEEE9;
    border: 1px #d3d0bb solid;
    color: #1E1E1E;
}

.save-param {
    padding: 1rem;
}
/*
    ---------------------------------------------------------------------------
    Deadlines table
    ---------------------------------------------------------------------------
*/

.deadlines-table {
    border-collapse: collapse;
    width: 100%;
}

.deadlines-thead {
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    background-color: #1E1E1E;
    padding: 2rem;
}

.deadlines-table-title {
    font-weight: bolder;
    text-transform:uppercase
}

.deadlines-table-th, .deadlines-table-td {
    padding: .5rem;
}

.deadlines-table-td:nth-child(odd) {
    background-color: #EFEEE9;
}

/*
    ---------------------------------------------------------------------------
    Popups
    ---------------------------------------------------------------------------
*/

.btn-conversie-param {
    white-space: nowrap;
}

/*
    ---------------------------------------------------------------------------
    404 - not found
    ---------------------------------------------------------------------------
*/

.btn-not-found-page {
    text-decoration: none;
}
/*
    ---------------------------------------------------------------------------
    Media queries
    ---------------------------------------------------------------------------
*/

@media (max-width: 1350px) {

    .opdrachtenfiche-header {
        flex-direction: column;
    }

    .opdrachtenfiche-header-searched-person-functionality {
        margin-right: 0rem;
        justify-content: space-between;
    }

    .subtotal-preview-element-contract {
        margin-left: 0rem;
        margin-top: 1rem;
    }

    .financielebron-pageheader-container {
        flex-direction: column;
    }

    .financielebron-pageheader-container .octoplus-filters-container {
        margin-top: 1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .financielebron-pageheader-container .octoplus-filters-actions {
        margin-top: 1rem;
        margin-left: 1rem;
    }

    .financielebron-pageheader-container .octoplus-filters {
        flex-direction: row;
    }

    .vacature-container {
        flex-direction: column;
        align-items: center;
    }

    .vacature-save-btn {
        margin-top: 1rem;
    }
}

@media (max-width: 1200px){
    .onderzoeken-pageheader-container {
        flex-direction: column;
    }

        .onderzoeken-pageheader-container .octoplus-filters-container {
            margin-top: 1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .onderzoeken-pageheader-container .octoplus-filters-actions {
            margin-top: 1rem;
            margin-left: 1rem;
        }
}

@media (max-width: 1130px) {
    .octoplus-navbar {
        flex-direction: column;
    }

    .octoplus-navbar-page-title {
        margin-bottom: 1rem;
    }

    .octoplus-info {
        flex-direction: column;
    }

    .octoplus-environment {
        display: none;
    }

    .octoplus-shorten-environment {
        display: block;
        text-align: center;
    }

    .octoplus-sidebar-logo {
        display: none;
    }

    .octoplus-sidebar-logo-icon, .octoplus-sidebar-dashbord-large-mobile {
        display: block;
    }

    .octoplus-sidebar-category-item-content {
        flex-direction: column;
        align-items: center;
    }

    .octoplus-sidebar-branding-link {
        display: flex;
        justify-content: center;
    }

    .octoplus-sidebar-icon {
        display: none;
    }

    .octoplus-sidebar-category-item {
        margin: 1.2rem 0;
    }

    .octoplus-sidebar-container {
        width: var(--sidebar-small-width);
    }

    .octoplus-sidebar-collapsible-icon, .octoplus-sidebar-uncollapsible-icon {
        margin-top: 2rem;
    }

    .octoplus-sidebar-header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .octoplus-sidebar-collapsible-icon, .octoplus-sidebar-uncollapsible-icon, .octoplus-sidebar-category-item-content-text, .octoplus-sidebar-dashbord-large-mobile {
        display: none;
    }

    .octoplus-sidebar-branding, .octoplus-sidebar-category-item img {
        margin-right: 0rem;
    }

    .octoplus-sidebar-icon {
        display: block;
        height: var(--icon-medium);
        width: var(--icon-medium);
    }

    .octoplus-sidebar-dashboard, .octoplus-sidebar-dashboard-hr {
        display: inherit;
    }

    .octoplus-sidebar-log-out-icon, .octoplus-sidebar-dashbord-large-mobile-icon {
        height: var(--icon-large);
        width: var(--icon-large);
    }

    .octoplus-navbarcontent-container {
        width: calc(100% - var(--sidebar-small-width));
    }

    .octoplus-filters {
        grid-template-columns: repeat(2, 1fr);
    }

    .octoplus-filters.octoplus-filters--opdrachten {
        grid-template-columns: repeat(1, 1fr);
    }

    .octoplus-filters.octoplus-filters--opdrachten .octoplus-filters {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 900px) {

    .vacature-input {
        width: 25rem;
    }
}

@media (max-width: 800px){

    .vacature-input {
        width: 17.5rem;
    }
}

@media (max-width: 678px) {
    .btn-conversie-param {
        padding-left: 11px;
        padding-right: 11px;
    }
}

@media (max-width: 650px) {

    .btn-conversie-param {
        font-size: 0.75rem;
    }

    .octoplus-navbar-select {
        max-width: 15rem;
    }

    .vacature-input {
        width: 15rem;
    }
}
/* Small devices (portrait phones) */
@media (max-width: 575.98px) {

    .octoplus-sidebar-container-mobile {
        background-color: var(--vives-dark);
        width: 100%;
    }

    .octoplus-sidebar-header {
        margin-top: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

        .octoplus-sidebar-header .navbar-toggler {
            display: block;
        }

    .octoplus-sidebar-container, .octoplus-sidebar-icon {
        display: none;
    }

    .octoplus-sidebar-category-item-content-text {
        display: block;
    }

    .octoplus-navbar .navbar-toggler {
        display: block;
        margin-left: 1rem;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .navbar-toggler-icon-sidebar {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .octoplus-navbarcontent-container {
        width: 100%;
    }

    .octoplus-navbar-select {
        max-width: 8rem;
    }

    .octoplus-navbar-page-title .vH2 {
        font-size: 1.5rem;
    }

    .opdrachtenfiche-header-searched-person-functionality {
        flex-direction: column;
    }

    .vacature-input {
        width: 10rem;
    }

    .opdrachtenfiche-header-searched-btns-start {
        margin-top: 1rem;
    }

    .octoplus-filters, .octoplus-filters.octoplus-filters--opdrachten {
        grid-template-columns: repeat(1, 1fr);
    }

        .octoplus-filters.octoplus-filters--opdrachten .octoplus-filters {
            grid-template-columns: repeat(1, 1fr);
        }

    .onderzoeken-pageheader-btns {
        display: flex;
        flex-direction: column;
    }

    .btn-conversie-param {
        font-size: 1rem;
    }

    button.vBtn.vBtn-primary.btn-redirect.btn-conversie-param {
        margin-bottom: 1rem;
    }

    .onderzoeken-filter-startdate {
        margin-bottom: 1rem;
    }
}

/*

*/

.bodyColor {
    background-color: #1E1E1E;
}

.header-bg {
    padding: 0;
    margin: 0;
    position: absolute;
    background-image: linear-gradient(rgba(30, 30, 30, 0.5), rgba(30, 30, 30, 0.5)), url('https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer_public/85/f6/85f6d51a-096b-4c5a-a365-0ea0250e7304/octopus.gif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
}

.headerTitle-error-page, .headerTitle-error-page-inline {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}

    .headerTitle-error-page > h1, .headerTitle-error-page-inline > h1 {
        text-transform: uppercase;
        font-weight: 800;
    }

    .landing-page-blocks-title > h1, .headerTitle-error-page > h1 {
        color: white;
    }

.error-text-white {
    color: white;
}

.Error-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* 404 Spinner */
.Error-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1rem;
    margin: 1rem;
}

.Error-text {
    font-weight: bold;
    font-size: 15rem;
    padding: .5rem;
    margin: 1rem;
}

.Error-message {
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.spinner {
    border: 50px solid transparent;
    border-top: 50px solid #E00020;
    border-left: 50px solid #E00020;
    border-radius: 100%;
    width: 200px;
    height: 200px;
    -webkit-animation: spinner 1.5s linear infinite;
    animation: spinner 1.5s linear infinite;
}

.headerTitle-error-page > p {
    color: white;
    margin-left: 10rem;
    margin-right: 10rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 17px
}

.enveloppes-container {
    margin-left: 2rem;
}

@media (max-width: 700px) {
    .spinner {
        border: 20px solid transparent;
        border-top: 20px solid #E00020;
        border-left: 20px solid #E00020;
        border-radius: 100%;
        width: 75px;
        height: 75px;
        -webkit-animation: spinner 1.5s linear infinite;
        animation: spinner 1.5s linear infinite;
    }

    .Error-text {
        font-weight: bold;
        font-size: 6rem;
        padding: .25rem;
        margin: .5rem;
    }

    .headerTitle-error-page > p {
        margin-left: 2.5rem;
        margin-right: 2.5rem;
    }
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*
    ---------------------------------------------------------------------------
    TOE TE VOEGEN AAN FRAMEWORK
    ---------------------------------------------------------------------------
*/

th .vGrid-thead-btn {
    width: 150px;
    word-break: break-word;
    white-space: normal;
    vertical-align: middle;
}

@media (min-width: 1200px) {

    .modal-xl {
        max-width: 1425px;
    }
}

#personenlijstgridid .vGrid-table-container {
    overflow-x: visible;
    overflow-y: visible;
}

#personenlijstgridid th .vGrid-thead-btn {
    width: 150px;
}

#personenlijstgridid th .vGrid-thead-btn-vacature {
    width: 1500px;
}

.vGrid .vInput, .vGrid .vInput:read-only, .vGrid .vSelect, .vGrid .vSelect:read-only {
    width: 100%
}

/*
Page Header
*/

.pageheader-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.vBtnpersoneelslijst {
    border: none;
    border-style: none;
    border-radius: 4px;
    background-color: #E00020 !important;
    margin: 0.05rem;
}

/* Filmpjes */

.filmpjes-link {
    position: absolute;
    top: 20px;
    right: 1rem;
    opacity: 0.8;
}

.filmpje-container {
    position: relative;
    width: fit-content;
    height: fit-content;
}
/* Sync status */
.sync-status-header {
    display: grid;
    grid-template-columns: auto 120px 180px 180px 50px;
    width: 100%;
}


.sync-status-entry {
    display: grid;
    grid-template-columns: auto 120px 180px 180px 50px;
}

.uitstel-deadline {
    color: #E00020; 
    font-weight: bold;
}

/* Rapportering */

.octoplus-rapportering-banner {
    background-image: linear-gradient(0deg, rgba(30, 30, 30, 0.75), rgba(30, 30, 30, 0.75)), url("../assets/rapportering-banner.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

.rapportering-items-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: .1rem;
    padding-top: 1rem;
}

/* Tile Component */

.tile-container {
    padding: 1rem;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-right: .3rem;
    margin-top: .3rem;
    flex: 1 0 24%;
}

.tile-header-container {
    display: flex;
    justify-content: left;
    padding-bottom: .25rem;
    align-items: flex-start;
}

.tile-title {
    text-transform: uppercase;
    font-weight: bold;
    color: #1E1E1E;
}

.tile-icon {
    margin-right: 1rem;
    height: auto;
}

.tile-description {
    color: #4a4a4a;
}

.tile-btn {
    background-color: #E00020;
    padding: .5rem .5rem;
    color: white;
    border-radius: 4px;
    border-style: none;
    text-transform: uppercase;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
}

    .tile-btn:hover {
        background-color: #c4001c;
        padding: .5rem .5rem;
        color: white;
        border-radius: 4px;
        border-style: none;
        text-transform: uppercase;
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

/*
    ---------------------------------------------------------------------------
    Dashboard Progressbar and text classes
    ---------------------------------------------------------------------------
*/

.progress-bar-position {
    width: 100%;
    margin: 5px;
}

.progress-bar {
    height: 10px;
    float: left;
}

/*Progressbar color*/

/*Default*/
.progress-bar-negative {
    background: red;
}

.progress-bar-positive {
    background: green;
}

/*Custom*/
.progress-bar-dienstonderbrekingen-onderbroken {
    background: blue;
}

.progress-bar-dienstonderbrekingen-gekoppelde {
    background: darkturquoise;
}

/*Progressbar text color*/

/*Default*/
.progress-bar-text-negative {
    color: red;
}

.progress-bar-text-positive {
    color:green;
}

/*Custom*/
.progress-bar-text-dienstonderbrekingen-onderbroken {
    color: blue;
}

.progress-bar-text-dienstonderbrekingen-gekoppelde {
    color: darkturquoise;
}

/* Parameters sectie - Parameters */
.ssp-dates-container {
    padding: 1rem;
    margin-left: 1rem;
}

/* Select voor tags */

.options-list, .option-item {
    list-style: none;
    padding: 0;
}

.vTag-container {
    display: flex;
    margin-left: 1rem;
    padding-top: 0.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    margin: 0.5rem 1rem;
}

.tag-item {
    padding-left: 0.5rem;
    margin-top: 1.5rem;
}

.vTag {
    padding: .5rem;
    color: white;
    font-weight: 600;
    border-radius: 8px;
}

.vTag-name {
    padding: .5rem;
    color: white;
    font-weight: 600;
    border-radius: 8px;
}

.vTag-domain {
    padding: .5rem;
    color: white;
    font-weight: 600;
    border-radius: 8px;
}

.vCollapse-horizontal {
    padding: 0;
    background-color: white;
    text-align: left;


/*    border-top: dashed 1px #d3d0bb;
*/}

.vcollapse-header, .vCollapse-horizontal {
    margin-bottom: .5rem;
    padding-left: .5rem !important;

    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
    padding-right: 0rem !important;
}

.vcollapse-content {
    padding: 0 !important;
    margin: 0 !important;
}

.vCollapse-horizontal .vcollapse-header {
    justify-content: left;
}

.vCollapse-horizontal .vcollapse-header .vcollapse-header-text {
    text-transform: uppercase;
    flex: initial;
    font-weight: 500;
}

.vCollapse-horizontal .vcollapse-header .vcollapse-header-text:hover {
    font-weight: bold;
    animation: 0.5s slidein;
}

@keyframes slidein {
    from {
        font-weight: normal;
    }

    to {
        font-weight: bold;
    }
}
/* resizing vGrid */
    .vGrid-table-th, .vGrid-table-th-empty, .vGrid-table-th-actions, .vGrid-table-th-group, .vGrid-table-th-group-empty {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.vGrid-table-container, .vGrid, .vInput {
    font-size: .9rem;
}

.logout-link-unauthorized {
    text-decoration: none
}

table.pTags {
    text-align: center;
}

table.pTags > tr, table.pTags > tr > th, table.pTags > tr > td {
    border: 1px solid gray;
    padding: 0em 2em;
}

table.pTags > tr > th {
    background-color: var(--vives-sand-light);
}

.vTag-red-label {
    background: #e00020;
    color: white;
}

.vGrid-table-td > div > div.vComponent-multi-select-container {
    height: 2em;
    overflow: clip;
    padding: 0;
    line-height: 2em;
}

.vComponent-multi-select {
    margin: 0;
}

.vGrid-table-td > div > div.vComponent-multi-select-container.focused {
    height: auto;
}

.basis-perc-formule {
    display: flex;
    color: #1E1E1E;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.padding-basis-perc-icon {
    padding-left: .25rem;
    padding-right: .25rem;
}

.fte-info-input {
    background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSbUF8ijoIW-ZFNk-M-KT-J3uUAfl6bNrkTWPcr3tw1HMjqVoFAFcoKRTk);
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Styling formule */
.vFormule {
    text-align: left;
    padding: 1rem;
    font-style: italic;
    background-color: #efeee9;
    color: #5e5e5e;
    font-size: .9rem;
    border: 1px solid #c0c0c1;
    width: max-content;
    border-radius: 5px;
    margin-left: 1rem;
}

.vLink, .vLink-primary {
    background: none;
    border: none;
    border-style: none;
}

.align-title-btn {
    display: flex;
    justify-content: left;
    align-items: center;
    width: max-content;
}

/* Usefull links */

.linkedAppData-container {
    padding: 1rem;
}

.linkedAppData-title {
    font-weight: 700;
    color: #1E1E1E;
    text-transform: uppercase;
}

.linkedAppData-link-item {
    margin-left: .25rem;
    color: #1E1E1E;
    font-family: 'Poppins', sans-serif;
}

.linkedAppData-link:hover, .linkedAppData-link:checked {
    color: #E00020;
    font-family: 'Poppins', sans-serif;
}

.linkedAppData-icon {
    color: #1E1E1E;
}

.opdrachten-roosteringstatus--toreview {
    background-color: white;
}
.opdrachten-roosteringstatus--processed {
    background-color: green;
}
.opdrachten-roosteringstatus--inassessment {
    background-color: orange;
}
.opdrachten-roosteringstatus--error {
    background-color: red;
}

.opdrachten-roosteringstatus-fg--toreview {
    color: black;
}

.opdrachten-roosteringstatus-fg--processed {
    color: green;
}

.opdrachten-roosteringstatus-fg--inassessment {
    color: orange;
}

.opdrachten-roosteringstatus-fg--error {
    color: red;
}


/*
    ---------------------------------------------------------------------------
    Wizard
    ---------------------------------------------------------------------------
*/
.octoplus-wizard {
    height: calc(100vh - 78px - 0.25rem);
    position:relative;
}

.octoplus-wizard-header {
    width: 100%;
    background: var(--white);
    padding: 1rem;
    margin-bottom: 0.25rem;
    display: flex;
    justify-content: space-between;
}

.octoplus-wizard-header * {
    margin-bottom: 0;
}

.octoplus-wizard-content {
    width: 100%;
    background: var(--white);
    padding: 1rem;
    max-height: calc(100vh - 245px - 0.25rem);
    overflow: auto;
}

.octoplus-wizard-footer {
    width: 100%;
    display: flex;
    background: var(--white);
    padding: 1rem;
    margin-top: 0.25rem;
    position: absolute;
    bottom:0;
    gap: 1rem;
}