@import url('../_content/VIVES.Styles.Library/css/VBranding.css');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.ssp-page-title {
    color: #1E1E1E;
    font-family: Poppins;
    font-size: 3rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    width: 75%;
}

body {
    margin: 0;
}

main {
    height: 100%; 
}

.page {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

.container {
    max-width: 1240px;
    margin: auto;
}

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

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

.page-title-spacing {
    margin-bottom: 1%;
}

.default-index-placeholder {
    position: absolute;
    top: 50%;
    left: 33.33%;
    font-weight: bold;
}

.vFooter {
    margin-top: auto;
    height: auto;
    width: 100%;
    bottom: 0px;
}

.vFooter .container {
    align-items: center;
}

.vFooter-info {
    border-top: none;
}

.vFooter-end-text {
    color: white;
    margin-bottom: 0 !important;
}

.vFooter-info {
    border-top: none !important;
}

.vGrid-table-td-index {
    white-space: nowrap;
}

.vrije-momenten-toelichting {
    margin-bottom: 2rem;
}

.vrije-momenten-toelichting .vBtn {
    margin-top: 2rem;
}

.errorMessage {
    color: var(--vives-red);
    font-weight: bold;
}

.successMessage {
    color: var(--vives-success);
    font-weight: bold;
}

.vBtn {
    align-items: center;
}

.vBtn i{
    margin-right: 5px;
}

/*
    Index
*/
.vComponent-multi-element-row {
    justify-content: unset;
}

.vComponent-multi-element {
    justify-content: center;
    align-items: center;
    width: unset;
}

/*
    BevragenDesiderata & raadplegen opdrachtenfiche onderzoek
*/

.bevragen-desiderata-combobox,
.bevragen-opdrachtenfiche-onderzoek-combobox {
    width: 25rem;
}

.desiderata-opvragen-input-container,
.opdrachtenfiche-onderzoek-opvragen-input-container {
    display: flex;
    justify-content: space-between;
    height: fit-content;
}

.desiderata-opvragen-input-container-right
.opdrachtenfiche-onderzoek-opvragen-input-container-right {
    display: flex;
    justify-content: right;
}

/*
    BevragenDesiderata
*/

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

.sap-sales-grid-container .vGrid-table-container {
    min-height: 0rem;
    overflow: visible;
}

#aanrekeningen-sap-sales-grid .vGrid-table-container {
    min-height: 0rem;
    overflow: visible;
}

.desiderata-opvragen-result-container {
    margin-top: 4rem;
    margin-bottom: 2rem;
}

/*
    BevragenDesiderataOnbeschikbaarheden
*/

#onbeschikbaarheden .vGrid-table-td {
    text-align: center;
}

/*
    BevragenDesiderataVrijeMomenten
*/

.vrije-momenten-verwerking {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 2rem;
}

/*
    Vrije momenten
*/

.gridOption__label {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 1rem;
}

    .gridOption__label::before {
        content: "Les";
        padding: 4px 8px;
        align-self: center;
    }

input:checked + .gridOption__label::before {
    content: "Vrij";
    color: var(--vives-red);
}

.hide-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.vrije-momenten-form .vBtn {
    margin-bottom: 2rem;
}

button {
    height: fit-content
}

.vGrid-table-td {
    width: auto;
    height: auto;
}
.gridOption {
    padding: .25rem;
    text-transform: uppercase;
    font-weight: normal;
    height: auto;
    background-color: white;
    border: none;
    width: 20%;
}

.gridOptionGewenst {
    background-color: rgba(253, 126, 20, 25%);
    padding: 1rem;
    color: #1E1E1E;
    font-weight: 600;
    font-size: .9rem;
    line-height: .9rem;
}

.gridOptionGeeist {
    background-color: rgba(224, 0, 32, 25%);
    padding: 1.5rem;
    color: #1E1E1E;
    font-weight: 600;
    font-size: .9rem;
    line-height: .9rem;
}

.gridOptionLes {
    padding: 1rem;
    color: #1E1E1E;
    font-weight: 600;
    font-size: .9rem;
    line-height: .9rem;
}

.gridOptionDrilldown {
    border-bottom: 1px #d3d0bb solid;
    text-align: center;
}


.desired-free-moments-mobile .vDrillDownItem-content {
    overflow: visible;
    overflow-y: visible;
    background-color: white;
    max-height: 100%;
}

.vrijmoment-mobile-option {
    width: 100%;
    padding: 0.25rem;
    background-color: white;
    display: flex;
    justify-content: center;
}

    .vrijmoment-mobile-option .gridOption {
        width: 100%;
    }

.desired-free-moments-desktop .vGrid-table-td {
    width: 20%;
    height: 3.1rem;
}


/*
    Opdrachtenfiche
*/

.header-elements-center {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.header-elements-right {
    display: flex;
    justify-content: right;
}

.opdrachtenfiche-beschrijving {
    width: 12.5rem !important;
    height: 5rem;
}

.desiderata-opdrachtenfiche-totals {
    margin-top: 2rem;
}

.desiderata-opdrachtenfiche-totals .vComponent-multi-element-row {
    justify-content: space-between;
}

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

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

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

/* page elements */
.ssp-action-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.vGrid{
    margin-bottom: 1rem;
}

.aj-container  {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    text-transform: uppercase;
    font-weight: 500;
}

.all-totals-container {
    padding-top: 2rem;
}

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

/* ExamenAanvragen */

#examenaanvragengrid .vGrid-action-controls{
    display: none;
}

/* APP VERSION FOOTER */

.vFooter-end {
    display: flex;
    align-items: center;
}

.ssp-info {
    padding-right: 1.5rem;
    display: flex;
    flex-direction: row;
    align-content: space-between;
}

.ssp-environment, .ssp-shorten-environment, .ssp-version {
    color: var(--white);
    font-style:italic;
}

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

.vSelect-nav {
    padding: .25rem;
    margin-left: 1rem;
    background-color: #4A4A4A;
    color: white;
    border: none;
    border-width: 0;
    outline: none;
}
/*.vSelect-nav-option {
    border: 1px solid #D8D8D8;
    padding-top: .05rem;
    padding: .25rem;
    color: white;
    outline: none;
    border-width: 0;
}
.vSelect-nav-link:active {
    font-weight: bold;
    text-decoration: none;
    color: white;
}
.vSelect-nav-link:hover {
    background-color: #EFEEE9;
    color: #1E1E1E;
    text-decoration: none;
}*/

/* SAP SALES */

.vBtn-secondary:disabled {
    background-color: #d3d0bb;
    cursor: not-allowed;
    opacity: 0.6;
    width: fit-content;
}

.vBtn-secondary {
    width: fit-content !important;
}

.sap-sales-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sap-sales-btn {
}

input::file-selector-button {
    background-color: #1E1E1E;
    font-weight: 500;
    color: white;
    text-transform: uppercase;
    padding: .5rem 1rem;
    border-radius: 4px;
    border: none;
    border-style: none;

}

.sap-sales-button-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.sap-sales-button-actions-left {
    display: flex;
    flex-direction: row;
    justify-content: left;
}

.templates-popup-save-buttons {
    padding-bottom: 2rem;
}

.sap-sales-footer-actions {
    margin-bottom: 2rem;
}


.sap-sales-button-group-left {
    display: flex;
    justify-content: left;
}

.sap-sales-button-group-right {
    display: flex;
    justify-content: right;
}

.sap-sales-button-group-popup {
    display: flex;
    justify-content: space-between;
}

.sap-sales-header {
    padding-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.sap-sales-header-title {
    display: flex; 
    justify-content: left;
    flex-direction: column;
}

.sap-sales-button-group-forward-to {
    display: flex;
    justify-content: right;
}

.sap-sales-header-buttons {
    display: flex;
    justify-content: right;
    flex-direction: column;
    align-items: end;
}

.spacing-nav-btn {
    margin-top: 1rem;
}


.sap-sales-intro-txt {
    margin: 0;
}

.sap-sales-data-content {
    margin: 1rem 0rem;
}

.sap-sales-btns-container {
    display: flex;
    justify-content: flex-end;
}

.sap-sales-btn-reset {
    height: 100%;
    margin-right: 1rem;
}

.sap-sales-inputs-container {
    display: flex;
    flex-direction: column;
    margin: 1rem 0rem;
}

.sap-sales-long-inputs {
    width: 100%;
}

.sap-sales-short-inputs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.sap-sales-shorter-inputs {
    display: flex;
    justify-content: space-between;
}

.sap-sales-long-input, .sap-sales-short-input {
    margin-bottom: 1rem;
}

.sap-sales-short-input {
    display: flex;
    flex-direction: column;
    width: 49%;
}

.sap-sales-popup-input {
    display: flex;
    flex-direction: column;
}

.sap-sales-long-input {
    display: flex;
    flex-direction: column;
}

.sap-sales-short-input-readonly {
    max-width: 10rem;
}

.sap-sales-long-input-read-only{
    max-width: max-content;
}

.sap-sales-short-horizontal-input {
    display: flex;
    width: fit-content;
}

.validation-errors {
    margin-bottom: 2rem;
}

.sap-sales-container .validation-message {
    color: #e00020;
}

#beheer-sap-sales-grid-selectViewButton, #aanrekeningen-sap-sales-grid-selectViewButton {
    display: none;
}

/* one button styling */

    input:: file-selector-button {
    border-radius: 4px;
    padding: 11px 22px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: .3px;
    text-transform: uppercase;
    cursor: pointer;

    color: white;
    background-color: #1E1E1E;
    border: none;
    border-style: none;
    text-transform: uppercase;
}

.ssp-onebutton-container {
    display: flex;
    justify-content: right;
    flex-direction: column;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    align-items: flex-end
}

.onebutton-title {
    color: #E00020;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: .25rem;
}

.ssp-onebutton-txt {
    color: #1E1E1E;
    font-weight: normal;
    text-transform: uppercase;
    padding-bottom: .5rem;

}

.onebutton-admin-link {
    text-decoration: none;
    color: #1E1E1E;
}

/*.onebutton-admin-link {
    font-size: 1rem;
    color: #1E1E1E;
    text-decoration: none;
}*/

/* SAP SALES */

.vBtn-secondary:disabled {
    background-color: #d3d0bb;
    cursor: not-allowed;
    opacity: 0.6;
    width: fit-content;
}

.vBtn-secondary {
    width: fit-content !important;
}

.sap-sales-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sap-sales-btn {
}

input::file-selector-button {
    background-color: #1E1E1E;
    font-weight: 500;
    color: white;
    text-transform: uppercase;
    padding: .5rem 1rem;
    border-radius: 4px;
    border: none;
    border-style: none;

}

.sap-sales-button-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.sap-sales-button-actions-left {
    display: flex;
    flex-direction: row;
    justify-content: left;
}

.templates-popup-save-buttons {
    padding-bottom: 2rem;
}

.sap-sales-footer-actions {
    margin-bottom: 2rem;
}


.sap-sales-button-group-left {
    display: flex;
    justify-content: left;
}

.sap-sales-button-group-right {
    display: flex;
    justify-content: right;
}

.sap-sales-button-group-popup {
    display: flex;
    justify-content: space-between;
}

.sap-sales-header {
    padding-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.sap-sales-header-title {
    display: flex; 
    justify-content: left;
    flex-direction: column;
}

.sap-sales-button-group-forward-to {
    display: flex;
    justify-content: right;
}

.sap-sales-header-buttons {
    display: flex;
    justify-content: right;
    flex-direction: column;
    align-items: end;
}

.spacing-nav-btn {
    margin-top: 1rem;
}

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


.sap-sales-intro-txt {
    margin: 0;
}

.sap-sales-data-content {
    margin: 1rem 0rem;
}

.sap-sales-btns-container {
    display: flex;
    justify-content: flex-end;
}

.sap-sales-btn-reset {
    height: 100%;
    margin-right: 1rem;
}

.sap-sales-inputs-container {
    display: flex;
    flex-direction: column;
    margin: 1rem 0rem;
}

.sap-sales-long-inputs {
    width: 100%;
}

.sap-sales-short-inputs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.sap-sales-shorter-inputs {
    display: flex;
    justify-content: space-between;
}

.sap-sales-long-input, .sap-sales-short-input {
    margin-bottom: 1rem;
}

.sap-sales-short-input {
    display: flex;
    flex-direction: column;
    width: 49%;
}

.sap-sales-popup-input {
    display: flex;
    flex-direction: column;
}

.sap-sales-long-input {
    display: flex;
    flex-direction: column;
}

.sap-sales-short-input-readonly {
    max-width: 10rem;
}

.sap-sales-long-input-read-only{
    max-width: max-content;
}

.sap-sales-short-horizontal-input {
    display: flex;
    width: fit-content;
}

.validation-errors {
    margin-bottom: 2rem;
}

.sap-sales-container .validation-message {
    color: #e00020;
}

#beheer-sap-sales-grid-selectViewButton, #aanrekeningen-sap-sales-grid-selectViewButton {
    display: none;
}

/* one button styling */

    input:: file-selector-button {
    border-radius: 4px;
    padding: 11px 22px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: .3px;
    text-transform: uppercase;
    cursor: pointer;

    color: white;
    background-color: #1E1E1E;
    border: none;
    border-style: none;
    text-transform: uppercase;
}

.ssp-onebutton-container {
    display: flex;
    justify-content: right;
    flex-direction: column;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    align-items: flex-end
}

.onebutton-title {
    color: #E00020;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: .25rem;
}

.ssp-onebutton-txt {
    color: #1E1E1E;
    font-weight: normal;
    text-transform: uppercase;
    padding-bottom: .5rem;

}

.onebutton-admin-link {
    text-decoration: none;
    color: #1E1E1E;
}

/*.onebutton-admin-link {
    font-size: 1rem;
    color: #1E1E1E;
    text-decoration: none;
}*/

/* Start of POC */
.sap-sales-container .vBtn:disabled {
    background-color: #e00020;
    cursor: not-allowed;
    opacity: 0.6;
}

.sap-sales-container .vComponent-input .vInput:disabled,
.sap-sales-container select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sap-sales-container select:disabled,
.sap-sales-container .vTextarea:read-only {
    background-color: #EFEEE9;
    border: 1px #aaa68a solid;
    color: #C0C0C1;
}

 #beheer-sap-sales-docent-grid-selectViewButton,
 #beheer-sap-sales-docent-grid-saveButton,
#beheer-sap-sales-grid-saveButton,
#templates-sap-sales-grid-selectViewButton, #templates-sap-sales-grid-saveButton {
    display: none;
}

.vgrid-extra-btn-container {
    display: flex;
    justify-content: end;
}

.vgrid-extra-btn {
    display: flex;
    position: absolute;
    border-radius: 0;
    margin-top: .2rem;
}

.oneButton-btn-container {
    display: flex;
    justify-content: end;
}

.oneButton-align {
    display: flex;
    position: absolute;
    margin-top: .5rem;
}



/* button badge */
.vBtn-badge-button {
    position: relative;
}

.vBtn-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 25px;
    height: 25px;
    background-color: #E00020;
    color: white;
    border-radius: 25px;
    text-decoration: none;
}

    .vBtn-badge:hover {
        background-color: #AD0019;
        text-decoration: none;
        color: white;
    }

/* End of POC */

.center-studygroup-btn {
    display: flex;
    justify-content: center;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.warning-aanrekeningen {
    font-weight: bold;
    font-style: italic;
}

/* Indienen cursus */

.indienenCursus-container {
    flex-wrap: wrap;
    padding-bottom: 2em;
}

.indienenCursus-inputs-container {
    display: flex;
    flex-flow: column wrap;
    place-content: space-between flex-start;
    align-items: flex-start;
    justify-content: space-evenly;
    flex-direction: column;
    align-content: flex-start;
}

.indienenCursus-input-item,.indienenCursus-readonly-item {
    display: flex;
    flex-direction: column;
    margin-right: 1rem;
    width: 310px;
}

.indienenCursus-long-input-item {
    display: flex;
    flex-direction: column;
    margin-right: 1rem;
    width: 640px;
}

.indienenCursus-input-items, .indienenCursus-readonly-items {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

/* media query voor responsiveness */
@media (max-width: 940px) {
    .indienenCursus-input-items, .indienenCursus-readonly-items {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
    }

    .indienenCursus-long-input-item {
        display: flex;
        flex-direction: column;
        margin-right: 1rem;
        width: 300px;
    }

    .indienenCursus-input-item, .indienenCursus-readonly-item {
        display: flex;
        flex-direction: column;
        margin-right: 1rem;
        width: 300px;
    }



     }

.input-tooltip-info {
    font-size: .75rem;
    font-style:italic;
    color: #787878;
    margin-top: .25rem;
}

.btn-top-spacing {
    margin-top: 1.25rem;
}

.header-page-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .ssp-uploadCursus-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    /* styling opdrachtenfiche */


    .opdrachtenfiche-header-title {
        font-size: 1.875rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: -1px;
    }

    .opdrachtenfiche-header-container {
        padding-top: .5rem;
        padding-bottom: 1.5rem;
        display: flex;
        justify-content: right;
    }

    .vAlert-all-totals {
        background-color: #CFF4FC;
        color: #0083A0;
        border: 1px solid #0083A0;
        margin-bottom: 2rem;
    }

    .total-preview-alert-text {
        font-family: Poppins;
        font-style: italic;
        font-weight: 600;
        line-height: normal;
        text-transform: uppercase;
        margin-bottom: 0rem;
    }

    .opdrachtenfiche-grid-title {
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        color: #1E1E1E;
        font-size: 1.5rem;
    }

    .grid-header-title-container {
        display: flex;
        justify-content: space-between;
    }

    .opdrachtenfiche-grid-total {
        font-weight: normal;
        font-size: 1rem;
        font-weight: bold;
    }

    .vcollapse-header {
        align-items: baseline !important;
    }

    #algemeneOpdrachtenGrid-selectViewButton, #onderwijsOpdrachtenGrid-selectViewButton, #onderzoekOpdrachtenGrid-selectViewButton, #lllOpdrachtenGrid-selectViewButton,
    #dropdownMenuLink, #algemeneOpdrachtenGrid-shortcutsButton, #onderwijsOpdrachtenGrid-shortcutsButton, #onderzoekOpdrachtenGrid-shortcutsButton, #lllOpdrachtenGrid-shortcutsButton {
        display: none !important;
    }

    #personen #dropdownMenuLink {
        display: block !important;
    }

    /*
#algemeneOpdrachtenGrid-selectViewButton, #onderwijsOpdrachtenGrid-selectViewButton, #onderzoekOpdrachtenGrid-selectViewButton, #lllOpdrachtenGrid-selectViewButton,
#dropdownMenuLink, #algemeneOpdrachtenGrid-shortcutsButton, #onderwijsOpdrachtenGrid-shortcutsButton, #onderzoekOpdrachtenGrid-shortcutsButton, #lllOpdrachtenGrid-shortcutsButton {
    display: none !important;
}
*/
    .desired-free-moments-mobile {
        display: none;
    }

    .vH2 {
        margin-bottom: 0 !important;
    }

/*
    Aanwezigheden erkenningen VIVES Continue
*/

.accreditations-vives-continue-input-subcontainer {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.accreditations-vives-continue-submit-subcontainer {
    display: flex;
    justify-content: right;
    margin-top: 2rem;
}

.accreditations-vives-continue-input-subcontainer-space-between {
    justify-content: space-between;
}

.accreditations-vives-continue-input-academic-year, .accreditations-vives-continue-input-accreditation {
    width: 40%;
}

.accreditations-vives-continue-input-course {
    width: 100%;
}

/*
    Fotobeheer
*/

.photo-management-overview-container {
    overflow: hidden;
}

.photo-management-overview {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 2rem;
    margin-left: -3rem;
    margin-right: -3rem;
}

.photo-management-overview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 3rem;
    margin-right: 3rem;
    margin-bottom: 2rem;
}

.photo-management-overview-item-title {
    font-weight: bold;
}

.photo-management-overview-item-photo {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.photo-management-overview-item-download-link > i {
    margin-right: 0;
}

/*
    Nieuwsbrieven
*/

.newsletter-page-description {
    margin-bottom: .5rem;
}

.newsletter-campus {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    cursor: pointer;
}

/*
    Media queries
*/

@media (max-width: 992px) {
    .photo-management-overview {
        justify-content: space-around;
    }
}

    @media (min-width: 940px) {

        .desired-free-moments-desktop {
            display: block;
        }

        .desired-free-moments-mobile {
            display: none;
        }
    }

    @media (max-width: 940px) {

        .desired-free-moments-desktop {
            display: none;
        }

        .desired-free-moments-mobile {
            display: block;
        }
    }

    @media (max-width: 1200px) {
        .sap-sales-short-inputs {
            flex-direction: column;
        }

        .sap-sales-short-input, .sap-sales-short-input .sap-sales-leeractiviteiten-combobox, .sap-sales-short-input .vSelect {
            width: 100%;
        }

        .sap-sales-short-input-readonly {
            max-width: 100%;
        }
    }

.vComponent-multi-select.indienscherm {
    margin-bottom: 0;
    position: relative;
}

.vComponent-multi-select-container.indienscherm {
    text-wrap: nowrap;
    overflow: hidden;
    padding: .5em;
}

.vComponent-multi-select-selected-items.indienscherm {

}

.vComponent-multi-select-container-icon.indienscherm {
    top: 8px;
}

.vComponent-combobox-dropdown.indienscherm {
    position: absolute;
    z-index: 100;
    border: 0;
    overflow: auto;
}

.vComponent-multi-select-option-list.indienscherm {
    padding: .5rem 0;
    background: rgba(239, 238, 233, 1);
    margin-top: 0;
    position: absolute;
    z-index: 90;
    text-wrap: wrap;
    top: 4.9em;
    overflow: auto;
}

.indienenCursus-input-items-buttons {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    /* Style the buttons inside the tab */
    .indienenCursus-input-items-buttons button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
    }

        /* Change background color of buttons on hover */
        .indienenCursus-input-items-buttons button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .indienenCursus-input-items-buttons button.active {
            background-color: #ccc;
        }
        .active {

    background-color: #007bff; 
    font-weight:bold;
     
}

@media (max-width: 1200px) {
    .sap-sales-short-inputs {
        flex-direction: column;
    }

    .sap-sales-short-input, .sap-sales-short-input .sap-sales-leeractiviteiten-combobox, .sap-sales-short-input .vSelect {
        width: 100%;
    }

    .sap-sales-short-input-readonly {
        max-width: 100%;
    }
}

@media (max-width: 710px) {
    .accreditations-vives-continue-input-subcontainer {
        flex-direction: column;
    }

    .accreditations-vives-continue-input-academic-year {
        margin-bottom: 2rem;
        width: 100%;
    }

    .accreditations-vives-continue-input-accreditation {
        width: 100%;
    }
}

/* Indienen studiematerialen */

.studiematerialenIndienen-container {
    padding: 1rem;
}

.studiematerialenIndienen-gekoppeldeOLAs-container {
    padding: 1rem;
}

.gekoppeldeOLAs-title-item {
    text-transform: uppercase;
    color: #1E1E1E;
    font-weight: 600;
}

.indienen-studiemateriaal-subtitle-item {
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #1E1E1E;
    font-weight: bold;
}

.indienen-studiemateriaal-description-item {
    width: 50%;
    font-weight: normal;
    color: #1E1E1E;
}

.studiematerialenIndienen-form {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
}

.studiematerialenIndienen-form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.studiematerialenIndienen-input-item, 
.studiematerialenIndienen-select-item, 
.studiematerialenIndienen-textarea-item, 
.studiematerialenIndienen-submit-form-item {
    display: flex;
    flex-direction: column;
}

.gekoppeldeOLAs-subtitle, .ingediendeStudiematerialen-subtitle {
    text-transform: uppercase;
    font-weight: bold;
    color: #1E1E1E;
    font-size: 1rem;
}

.gekoppeldeOLAs-page, .ingediendeStudiematerialen-page {
    height: fit-content;
}

/* Studiematerialen Button Actions */

.buttonRow-container {
    display: flex;
    flex-direction:  row;
    justify-content: right;
}

.buttonRow-item {
    padding-right: 1rem;
    width: max-content;
}

.buttonRow-btn {
    background-color: #e00020;
    border: none !important;
    border-style: none !important;
    border-radius: 4px;

    color: white;
    padding: .5rem;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}

.buttonRow-btn-none {
    background-color: #1E1E1E;
    border: none !important;
    border-style: none !important;
    border-radius: 4px;
    color: white;
    padding: .5rem;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}

/* vakken dropdown */

.vakken-dropdown-container,
.indienen-studiemateriaal-cursusBestand-container {
    color: #1E1E1E;
    padding: 1rem;
    background-color: rgb(247 247 244 / 25%);
    border-radius: 5px;
    border: 2px solid rgba(0, 0, 12, 0.05);
    height: auto;
}

.vakken-dropdown {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
}

.vakken-dropdown-searchbar {
    color: #1E1E1E;
}

.vakken-dropdown-search-input {
    width: fit-content;
    color: #1E1E1E;
    padding: .5rem;

    border: 1px #c0c0c1 solid;
    border-radius: .5rem;
    background-color: #ededed;
}

.vakken-dropdown-search-input::after {
    content: "\1F50D";
    color: #1E1E1E;
    font-size: inherit;
}

.vakken-dropdown-expand-btn {
    background-color: transparent;
    padding: .5rem;
    color: #1E1E1E;
}

.vakken-dropdown-content-item {
    display: flex;
    padding: 1rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    
    border: 1px solid rgba(30, 30, 30, 0.25);
    background: #ededed;
}

/* Table styling for components */
.beschikbaarheidOla-item-thead,
.handboek-item-thead,
.cursusBestand-item-thead,
.cursus-item-thead,
.vakken-item-thead {
    background-color: #1E1E1E;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    font-size: 14px;
}

.beschikbaarheidOla-item-tbody,
.handboek-item-tbody,
.cursusBestand-item-tbody,
.cursus-item-tbody,
.vakken-item-tbody
{
    color: #1E1E1E;
    font-weight: normal;
}

.textarea-table-item {
    border: 1px #c0c0c1 solid;
    background-color: #ededed;
    border-radius: 2.5px;
    color: #1E1E1E;
    padding: .25rem;
}

.cursus-item-row {
    padding: 1rem;
    border-radius: 5px;
    background-color: white;
}

.cursus-item-span {
    font-style: italic;
    color: #1E1E1E;
}

/*.checkbox-table-item:before {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    border: 1px #C0C0C1 solid;
    content: "";
    background-color: #ededed;
}
 
.checkbox-table-item:after {
    position: relative;
    display: block;
    width: 10px;
    height: 1px;
    border-width: 1px;
    border-style: solid;
    border-color: #C0C0C1;
    content: "\2713";
    color: white;
    background-color: #1E1E1E;
}*/

.input-table-item {
    border: 1px #c0c0c1 solid;
    background-color: #ededed;
    border-radius: 2.5px;
    color: #1E1E1E;
    padding: .25rem;
}

.select-table-item {
    border: 1px #c0c0c1 solid;
    background-color: #ededed;
    border-radius: 2.5px;
    color: #1E1E1E;
    padding: .25rem;
}

.option-table-item {
    border: 1px #c0c0c1 solid;
    background-color: #ededed;
    border-radius: 2.5px;
    color: #1E1E1E;
    padding: .25rem;
}

.btn-action-item {
    background-color: #1E1E1E;
    border: none !important;
    border-style: none !important;
    border-radius: 3px;
    color: white;
    padding: .5rem;

    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}

.btn-symbol-action-item {
    background-color: transparent;
    border: none;
    border-style: none;

    color: #1E1E1E;
    padding: .5rem;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}

.vakken-item-table{
    table-layout: auto !important;
}

.vakken-dropdown-table {
    background-color: white;
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
}

@media screen and (max-width: 768px) {
    .vakken-dropdown-table > table {
        width: 100%;
        display: block;
        overflow-x: auto;
    }
}

.vakken-dropdown-item-thead {
    background-color: #1E1E1E;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    font-size: 14px;
}

    .vakken-dropdown-item-thead > tr > th {
        padding: 1rem !important;
    }


.vakken-dropdown-table-row > td {
    padding: 1rem;
}

.alert-geen-toegekende-vakken {
    background-color: #F8D7DA;
    color: #491217;
    border: 1px solid #F5C6CB;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    width: 100%;
}

.validation-summary-indienen {
    background-color: #F8D7DA;
    color: #491217;
    border: 1px solid #F5C6CB;
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    padding: 1rem;
    margin: 1rem;
}

.validation-file-indienen {
    background-color: #F8D7DA;
    color: #491217;
    border: 1px solid #F5C6CB;
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    padding: 1rem;
    margin: 1rem;
}

.vakken-item-table-actions {
    display: flex;
    justify-content: right;
    align-content: flex-end;
    align-items: flex-end;
    flex-wrap: nowrap;
}

/* Handboek-item component */
.handboek-item-table {
    padding: 1rem;
}

.handboek-item-isbn {
    justify-content: center;
    align-items: center;
}

/* Indienen studiemateriaal */
/* NOTE: Spreek af met Ruben V of we dit houden. */

/*table.vDataTable-table {
    border: 1px solid #1e1e1e0F;
    border-bottom: 2px solid #1e1e1e20;
    border-radius: .4rem;
    overflow: hidden;
}

.vDataTable {
    padding: .5rem;
}

.vDataTable-header {
    background-color: #1e1e1e;
    color: white;
}

.vDataTable th, .vDataTable td {
    border: 0px;
}

.vDataTable-body-row:hover {
    background-color: #1e1e1e0D;
}*/

/* Herwerking styling, repsonsiviteit testing */

.vDataTable-container,
.gekoppeldeOLAs-vDatatable,
.ingediende-studiematerialen-vDatatable {
    table-layout: auto;
    width: 100%;
    min-width: min-content;
}

.vDataTable-table {
    border-collapse: collapse;
    border-radius: .4rem;
    overflow: hidden;
}

.table.vDataTable-table {
    padding: .5rem;
    border-radius: 4px;
    border-bottom: 1px solid rgba(30, 30, 30, 0.25);
}


/*th.vDataTable-header-row-th,
.vDataTable-header-row-th-actions{
    border: none !important;
    border-bottom: none !important;
    background-color: #1E1E1E;
    color: white !important;
}*/

.custom-datatable-header,
.custom-datatable-filter-container {
    background-color: #1E1E1E;
    border: none !important;
    border-style: none !important;
    border-bottom: none !important;
    color: white !important;
}


button.vDataTable-body-row-td-action-btn,
td.vDataTable-body-row-td-actions-container,
vDataTable-body-row-td-actions-container {
    background-color: #4a4a4a;
    color: white;
    border: none;
    border-bottom: none;
    position: inherit;
}

.vDataTable-header-row-th,
.vDataTable-header-row-th-actions {
    border: none !important;
}

td.vDataTable-body-row-td {
    border: none;
    padding: 1rem;
}

tr.vDataTable-body-row:nth-child(odd) {
    background-color: #efeee980;
}

tr.vDataTable-body-row{
    border-bottom: 1px solid rgba(30, 30, 30, 0.25);
}

.indienen-studiemateriaal-container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.studiemateriaal-indienen-btn-actions {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    padding-bottom: 1rem;
}

.indienen-btn-spacing {
    margin-right: 1rem;
}

.indienen-studiemateriaal-form-group {
    display: flex;
    justify-content: flex-start;
    padding: 1rem;
}

.indienen-studiemateriaal-form-item {
    display: flex;
    flex-direction: column;
    margin-right: 1rem;

    flex-grow: 1;
}

.indienen-studiemateriaal-input-item,
.indienen-studiemateriaal-checkbox-item,
.indienen-studiemateriaal-textarea-item,
.indienen-studiemateriaal-select-item,
.indienen-studiemateriaal-form-readonly-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.indienen-studiemateriaal-handboek-items,
.indienen-studiemateriaal-cursus-items,
.indienen-studiemateriaal-cursusBestand-items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: center;
}

.indienen-studiemateriaal-oplijsting-gelinkte-items {
    display: flex;
    flex-direction: column;
}

.indienen-cursus-cursusBestand-container,
.indienen-cursus-vakkenDropdown-container,
.indienen-cursus-beschikbaarheden-container
{
    margin: .25rem;
}

.vakkenDropdown-title,
.cursusBestand-title {
    font-size: 1.25rem;
    color: #1E1E1E;
    font-weight: 800;
    padding-bottom: .5rem;
    text-transform: uppercase;
}

.indienen-cursus-cursusBestand-container {
    background-color: rgb(247 247 244 / 25%);
    border-radius: 5px;
    border: 2px solid rgba(0, 0, 12, 0.05);
    padding: 1rem;
}

.ingediende-studiematerialen-container,
.gekoppelde-olas-container{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.gekoppelde-olas-page-container {
    display: flex;
    max-width: 1240px;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.indienen-studiemateriaal-form-item-long {
    width: 100%;
}

.indienen-studiemateriaal-container .vBtn {
    padding: 11px 22px !important;
    margin-bottom: 1rem !important;
}

.indienen-studiemateriaal-container .vakkenDropdown-input > input {
    padding: .5rem !important;
}

.indienen-studiemateriaal-container .vInput {
    padding: .5rem !important;
}

.indienen-studiemateriaal-container .vSelect {
    padding: .5rem !important;
}

.indienen-cursus-cursusBestand-container .vBtn {
    margin-right: 4px;
}

.indienen-studiemateriaal-bestand-item {
    background-color: white;
    border-radius: 5px;
    border: 2px solid rgba(0, 0, 12, 0.05);
    padding: 1rem;
}

.indienen-button-actions {
    padding: 1rem;
    margin-bottom: .5rem;
}

.li.validation-summary-container {
    list-style: none !important;
    list-style-position: inside;
    font-weight: normal;
}

.validation-summary-alert {
    background-color: #F8D7DA;
    color: #491217;
    border: 1px solid #F5C6CB;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    width: 100%;
    padding-left: 40px;
}

.geenStudiemateriaalBtn-container {
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 768px) {

    .studiemateriaal-indienen-btn-actions {
        display: flex;
        justify-content: right;
        flex-direction: column;
        padding-top: 1rem;
        padding-bottom: 1rem;
        align-items: flex-end;
    }

    .header-page-content {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: left;
    }

    .indienen-btn-spacing {
        margin-top: 1rem;
    }
}

/* OpleidingItemComponent Styling */

.opleiding-item {
    width: 20rem;
    height: 1.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.opleiding-item:hover {
    height: auto;
    word-break: break-word;
    white-space: normal;
}

.vakken-dropdown-actions > select, 
.vakken-dropdown-actions > textarea, 
.vakken-dropdown-actions > button {
    margin-right: 1rem;
}

.vDataTable-header-row-th .vDataTable-header-row-th-txt, .vDataTable-header-row-th .fa {
    color: white;
}

.vDataTable-actions-container {
    display: none;
}

.cursus_saving_modal {
    position: fixed;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.vDataTable-body-row-td-content-txt {
    white-space: pre-line;
}

.new-isbn-input-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.new-isbn-button-group {
    display: flex;
    justify-content: flex-end;
}

.new-isbn-button-spacing {
    margin-left: 1rem;
}

.isbn-alert-items {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0 !important;
    align-items: center;
}

.aanbod-soort-select { 
    display: flex;
    flex-direction: column;
}

.vDetailPanel-body {
    overflow: inherit;
}

.vakken-dropdown-content-items {
    overflow-y: scroll;
    max-height: 60vh;
}

.edit-content-btns {
    display: flex;
    justify-content: flex-end;
}

.edit-content-btn-item {
    margin-left: .5rem;
}

.reeds-gekoppelde-olas-header-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}

.alert-uitklappen-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
}

.alert-uitklappen-text {
    margin-left: 1rem;
}

.ola-ontkoppeld-alert {
    font-size: .9rem;
    font-style: italic;
    font-weight: bold;
}

.ola-gekoppeld-alert {
    font-size: .9rem;
    font-style: italic;
    font-weight: bold;
}

.ontkoppeld-alert {
    position: relative;
    padding: .5rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: #e00020;
    background-color: #f8d7da;
    border-color: #e00020;
}


.gekoppeld-alert {
    position: relative;
    padding: .5rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.opmerking-textarea-width {
    width: 100%;
}

.remove-ola-item {
    display: flex;
    justify-content: flex-end;

}

.select-aanbeveling-width {
    min-width: 15rem;
    margin-right: 0 !important;
}

/* Cursuslijst pagina */

.cursuslijsten-filters-container {
    padding: 1rem;
    margin-bottom: 1rem;
    /* testing container */
    background-color: #F7F7F4;
    border: 1px solid rgb(30, 30, 30, 25%);
    border-radius: 12px;
}

.cursuslijsten-filter-info {
    margin-bottom: .5rem;
}

.cursuslijsten-filter-info-title {
    font-weight: bold;
}

.cursuslijsten-filter-info-summary {
    font-weight: normal;
    margin: 0 !important;
}

.cursuslijsten-filter-head-group {
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;
}

.cursuslijsten-filter-sub-group {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.cursuslijsten-filter-item {
    display: flex;
    flex-direction: column;
    margin-right: .5rem;
}

.cursuslijsten-filter-btn {
    margin-right: 1rem;
}

.cursuslijsten-table-container {
    padding: 1rem;
    margin-bottom: 1rem;
}

.cursuslijsten-title {
    font-weight: bold;
    text-transform: uppercase;
}

.cursuslijsten-table-sub-title {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.cursuslijsten-table-opleiding-item {
    padding: 1rem;
}

.cursuslijsten-table-gem-vakken-item {
    background-color: #efeee9;
    padding: 1rem;
}

.cursuslijsten-table-gem-vakken-title {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 0 !important;
}

.cursuslijsten-table-opleiding-title,
.cursuslijsten-table-diploma-title {
    font-weight: bold;
    text-transform: uppercase;
    color: #1E1E1E;
    margin-bottom: 0 !important;
}


.cursuslijsten-table-sub-info-item {
    padding: 1rem;
}

.cursuslijsten-table-jaarvakken-title,
.cursuslijsten-table-semester-title {
    font-weight: bold;
    text-transform: uppercase;
    color: #E00020;
    margin-top: .25rem;
}

.cursuslijsten-table-fase-item,
.cursuslijsten-table-modulegroep-item {
    margin-top: .5rem;
    margin-bottom: 1rem;
}

.cursuslijsten-table-semester-item,
.cursuslijsten-table-jaarvakken-item {
}

.cursuslijsten-table-fase-title {
    text-transform: none;
    color: white;
    background-color: #1E1E1E;
    text-transform: uppercase;
    padding: .5rem;
    width: fit-content;
}

.cursuslijsten-table-modulegroep-title {
    color: white;
    padding: .5rem;
    background-color: #e00020;
    font-weight: bold;
    text-transform: uppercase;
}


.cursuslijsten-table-studiematerialen-item {
    padding: 1rem;
}

.cursuslijsten-table-studiematerialen-title {
    background-color: #1E1E1E !important;
    color: white;
    font-weight: bold;
    text-transform: uppercase !important;
    padding: .75rem;
    margin: 0 !important;
}

/*.cursuslijsten-studiematerialen-row:nth-child(even) {
    background-color: #F7F7F4;
    color: #1E1E1E;
}*/

.cursuslijsten-studiematerialen-row {
    background-color: #F7F7F4;
    color: #1E1E1E;
}

.cursuslisjten-studiematerialen-row {
    color: #1E1E1E;
}

.table-cursuslijsten {
    background-color: white !important;
    color: #1E1E1E;
}

.cursuslijst-filters-title {
    font-weight: bold;
    margin-bottom: .25rem;
}

.alert-cursuslijst-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem !important;
}


.alert-btn-info-close {
    color: #055160;
    background-color: transparent !important;
    border: none !important;
    border-style: none !important;
}

.vakken-dropdown-table-row:nth-child(even) {
    background-color: #F7F7F4 !important;
}

.vDataTable-header-row-th-sort-icon-container,
.vDataTable-header-row-th-sort-btn,
.vDataTable-header-row-th-sort-icon,
.vDataTable-header-row-th-sort-order {
    color: white !important;
}

.custom-datatable-filter-container {
    background-color: white !important;
    color: #1E1E1E !important;
}

.alert-studiemateriaal-ingediend {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.btn-spacing-indienen-handboek {
    margin-left: .5rem;
}

.vakkenDropdown-input > .vComponent-combobox-dropdown {
    max-height: 35rem !important;
}