:root {
    --Abo_Kleur: #ffb19d !important;
    --Background_Kleur: rgba(199, 90, 61, 0.9);
    --BtnSelected: #AEBBC6;
    --BtnWidth: 30em;
    --Button_Kleur: rgb(119, 160, 70) !important;
    --CardFontSize: 12pt;
    --CardSize: 300px;
    --CardTitleFontSize: 12pt;
    --Card_Visibility: 'block';
    --DesignValue_Visibility: 'none';
    --EditIcon_FontKleur: black;
    --ExpoBtn: 30px;
    --FontFamily: "Verdana", serif;
    --FontSize: 8pt;
    --FontSizePlus: 9pt;
    --HPimage: url("../data/Site/atelier2.png");
    --Item_Hover: rgb(181, 208, 149);
    --Item_Kleur: rgb(132, 177, 78);
    --Kleur1: #ED5C27;
    --Kleur10: #EA2328;
    --Kleur2: #F6AD3C;
    --Kleur3: #F6E91F;
    --Kleur4: #89C142;
    --Kleur5: #3AB149;
    --Kleur6: #00A899;
    --Kleur7: #1270B6;
    --Kleur8: #8F2A8A;
    --Menu: #d9edf7;
    --MenuSelected: #678fb5;
    --More_Visibility: 'block';
    --NoKleur: grey;
    --Pagina_Kleur: rgba(168, 167, 84, .3);
    --SortButton_Kleur: #e3dfaa;
    --Tip_Visibility: 'none';
    --UpdateSite: 'none';
    --keuze: #89c142;
}

body {
    font-family: var(--FontFamily);
    font-size: var(--FontSize);
    /*   overflow-y: hidden;*/
}


.nokleur {
    color: var(--NoKleur);
}

.tips {
    background-color: var(--Menu) !important;
    display: var(--Tip_Visibility) !important;
}

.table-condensed {
    font-size: var(--FontSize) !important;
}

.navbar {
    background-color: var(--Menu) !important;
    font-size: var(--FontSizePlus) !important;
    margin-bottom: 2px !important;
    padding-bottom: 3px;
    padding-top: 3px;
}

/*kleur van acief item bepalen*/

.nav-link.active {
    color: red !important;
}

.nav-link:hover {
    color: red !important;
}

.btn {
    font-size: var(--FontSize) !important;
}

.btn-info {
    background-color: var(--MenuSelected) !important;
}

.btn-info:hover {
    background-color: #aebbc6 !important;
    color: red !important;
}

.btn-info.sel {
    background-color: #AEBBC6 !important;
    color: red !important;
}

/* tot hier */

#sysinfo {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 40%;
    z-index: 10000;
}

button.greenok, button.success {
    background-color: var(--Item_Kleur);
    color: black !important;
    font-size: var(--FontSize);
}

button.greenok:hover, button.success:hover {
    background-color: var(--Item_Hover) !important;
    color: red !important;

}

.input-group-addon.required {
    color: red;
}

a.kleur {
    color: blueviolet;
}

.myform {
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
}

#logovak {
    display: grid;
    grid-area: logovak;
    margin: 0 auto;
    /*    max-width: 300px;
        padding: 10px 10px 10px 10px;
        width: 100%;*/
}

#tekst {
    grid-area: tekst;
    margin: 0 auto;
    width: 100%;
    /*    max-width: 300px;
        padding: 10px 10px 10px 10px;
        */
}

#footer {
    grid-area: footerbuttons;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    text-align: center;
}


#infoarea {
    background-color: var(--Background_Kleur);
    display: grid;
    grid-auto-flow: row;
    grid-row-gap: 0px;
    grid-template-areas:
    'tekst'
    'footerbuttons';
    grid-template-columns:  auto;
    margin: 0 auto;
    max-width: 80%;
    opacity: 1.0;
    padding: 10px;
    position: absolute;
    top: 20px;
    width: 100%;
}

a.email {
    color: red;
}

#editor {
    max-height: 250px;
    overflow: scroll;
}

.btn-space {
    float: left;
    margin-bottom: 5px;
    margin-right: 5px;
}

.btn-dialog {
    float: right;
    margin-right: 4px;
}

/*
#status {
    background-color: silver;
    color: red;
    display: inline-block;
    padding: 8px;
    width: 100%;
}*/

/*dit is om een scrolbar in het modal window te zetten als hij te lang wordt*/

.modal-body {
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

.modal-content.ui-resizable {
    overflow: scroll;
}

div.butbar {
    display: inline-block;
    justify-content: left;
    margin-bottom: 4px;
    vertical-align: top;
    width: 100%;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

.menubut {
    border: grey solid 1px;
}

.menubut.btn:hover {
    background-color: red;
    color: white;
}

.active a.frm {
    background-color: lightgray !important;
}

.slider .slider-selection {
    background: #BABABA;
}

.colorpicker-component {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.slidlabel {
    color: red;
    padding-right: 20px;
}

.colicoon {
    font-size: 17px;
    padding-right: 8px;
    vertical-align: bottom;
}

.colicoon.red {
    color: red;
}

.colicoon.blue {
    color: blue;
}

.reqfld {
    color: red;
}

.warning {
    color: red;
}

span.warning {
    background-color: white;
    padding: 10px;
}

span.info {
    color: red;
}

.changecolor {
    display: inline-block;
    float: left;
}

.slider.slider-horizontal {
    width: 50% !important;
}

.MyForm {
    position: relative;
}

span.select2-selection {
    vertical-align: top;
}

/*maakt bakje rood*/
.select2-selection__rendered {
    color: red;
    font-size: var(--FontSize);
}

.select2-container {
    margin-right: 4px;
}

.InfoClose {
    background-color: #8aafcf;
    float: left;
}

/*toegevoegd om de hoogte van de frmButtons gelijk te trekken */
.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

div.footer {
    text-align: center;
}

.footerlink {
    color: black;
    font-family: var(--FontFamily);
    font-size: small;
    margin-left: 25px;
    text-decoration: none;
}

.footerlink:link {
    color: black;
    text-decoration: none;
}

.footerlink:hover {
    color: white;
    text-decoration: none;
}

.helpbeeld {
    background-color: silver;
    margin-bottom: 20px;
    padding: 10px;
    width: 100%;
}

.helpmovie {
    margin: 0 auto;
    width: 100%;
}

.helpvideo {
    height: auto;
    width: 100%;
}

/*style van images in de editor*/
.note-float-left {
    padding-right: 15px !important;
}

a.info {
    color: red;
}

a.info:hover {
    font-weight: bold;
}

ul#adressee {
    -moz-columns: 2;
    -webkit-columns: 2;
    columns: 2;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li.plus {
    color: green;
    font-weight: bold;
}

li.min {
    color: red;
    font-weight: bold;
}

.logo {
    width: 280px;

}

.myFont {
    font-size: var(--FontSize) !important;
}

.dontshow {
    display: none;
}

.pull-right {
    float: right !important;
    margin-left: 4px;
}

.welldiv {
    background-color: white !important;
    display: block;
    margin-bottom: 5px !important;
    width: 100%;
}

.map {
    margin-right: 5px;
}

.closeme, .closealert {

    background: #ccc;
    display: inline-block;
    padding: 2px 5px;
}

.closeme:hover {
    color: #fff;
    cursor: pointer;
}

.closealert:hover {
    color: #fff;
    cursor: pointer;
}

.help {
    background-color: #3AB149 !important;
}

.help:hover {
    background-color: #d42e2e !important;

}

span.green {
    color: green;
}

span.green2 {
    color: green;
}

span.red {
    color: red;
}

.dt-buttons {
    float: right !important;
}

.dataTables_wrapper {
    font-size: var(--FontSize) !important;
}

.contact {
    background-color: #d77d7d;
}

.organisatie {
    background-color: #8aafcf;
}

.tab-content {
    padding-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0;
}

.dropdown-item, .form-control {
    font-size: var(--FontSize) !important;
}

.well {
    margin: 3px;
    padding: 5px;
}

/* tbv titel bootbox */
h5.modal-title {
    color: black;
    font-size: 10pt;
    font-style: normal;
}

#helpitemlist {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.helpitem {
    background-color: var(--BtnSelected) !important;
    border: black solid 1px;
    color: black;
    font-size: var(--FontSize);
    margin-bottom: 5px;
    max-width: 250px;
    min-width: 150px;
    padding: 4px;
    text-align: left;
}

.helpitem:hover {
    background-color: var(--Item_Hover);
    border: red solid 1px;
    color: white;
    cursor: pointer;
}

.modal-xl {
    max-width: 60%; /* New width for default modal */
}

/*#movtabs li a {
    font-size: 11pt;
    margin: 10px;
}

#movtabs li a:hover {
    background-color: green;
    color: white;
}*/

.closetip {
    font-size: var(--FontSize) !important;
}

.bootbox-close-button {
    font-size: var(--FontSize) !important;
}

.solo, .multi {
    margin: 3px;
    padding: 3px;
}

.hoofdmenu {
    background-color: var(--Menu);
    color: RED;
    padding: 2px;
}

/*
.knop {
    background-color: var(--MenuSelected);
    color: white;
    padding: 2px;
}
*/

.accent {
    font-weight: bold;
}

.accent2 {
    background-color: var(--SortButton_Kleur);
    color: black;
    padding: 2px
}

.tooltip {
    pointer-events: none;
}

.editicon {
    color: var(--EditIcon_FontKleur);
    height: 10px;
}

.trashicon {
    color: var(--EditIcon_FontKleur);
    height: 10px;
}

.editicon:hover {
    cursor: pointer;
}

.trashicon:hover {
    cursor: pointer;
}

.succ {
    background-color: #79b4dc !important;
}


.attention {
    font-style: italic;
}

li.plus {
    color: green;
    font-weight: bold;
}

li.min {
    color: red;
    font-weight: bold;
}

.btn-tag {
    font-size: 9pt;
    margin-bottom: 4px;
    margin-right: 4px;
    padding: 2px 3px;

}

/*.expobtn2 {
    max-width: var(--ExpoBtn) !important;
    overflow: hidden;
    white-space: nowrap;
}*/

#entreepage {
    background-attachment: fixed;
    background-color: var(--Pagina_Kleur);
    background-image: var(--HPimage);
    background-repeat: no-repeat;
    background-size: cover;
}

@font-face {
    font-family: "Orator Std";
    src: url("OratorStd.woff") format('woff');
    font-style: normal;
}

.fa.jumbo {
    font-size: 35px;
    text-align: center;
}

.sortable-placeholder {
    background-color: yellow;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 10px #888;
    -webkit-box-shadow: 0 0 10px #888;
    box-shadow: 0 0 10px #888;
    margin-left: 0 !important;
}

.dropzone {
    background-color: gainsboro;
    border: dashed red 1px;
    height: auto;
    margin-bottom: 5px;
    margin-top: 5px;
    min-height: 80px;
    padding: 5px;
    width: 100%;
}

.dropzone .dz-message {
    text-align: center;
}

.dropzone .dz-preview.dz-image-preview {
    background: transparent !important;

}

.dz-image {
    -webkit-appearance: none !important;
    -webkit-border-radius: 0 !important;
}

.thumbdiv {
    margin-right: 10px;
}

.thumbdiv:hover {
    cursor: pointer;
}

.bijschrift {
    font-size: 7pt;
    padding-bottom: 2px;
}

.fotografie {
    padding-bottom: 2px;
}

#brand {
    display: inline-block;
    float: left;
    height: 30px;
    padding-right: 10px;
}

/* formaat van video modal window */
.modal-xlg {
    width: 90% !important;
}

.video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.thumb2 {
    border: 0;
    max-height: 120px;
    max-width: 120px;
    padding: 3px;
}

#loginpage {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.colordiv {
    border: black 1px solid;
    height: 15px;
    width: 15px;
}

/*
.hplabel {
    color: black;
    font-size: 13pt;
    margin-right: 5px;
}
*/

/*.entree {
    border: solid black 1px;
    color: black;
    font-family: "Orator Std", serif;
    font-size: 12pt;
    !* opacity: 0.1;*!
    padding: 10px;
    text-align: center;
}

.entree:hover {
    border: solid white 1px;
    color: white;
    !*    background-color: var(--Item_Hover);*!
    cursor: pointer !important;
    opacity: 1.0;
}*/
/*
.entreesel {
    color: white;
}*/

#show {
    margin-top: 10px;
}

span.drag-source {
    background-color: silver;
    border: 1px solid grey;
    border-radius: 3px;
    padding: 5px;
}

.drag-source:hover {
    cursor: move !important;
}

.drag-source {
    list-style: none;
}

div.drag-source:hover {
    background-color: lightblue !important;
}

/*.wsbijschrift {
    font-size: 7pt;
}*/

/*
#faq {

    background-color: var(--Menu) !important;
    font-size: 10pt;
}

.faq {
    margin-bottom: 10px;
}
*/

.rapportage {
    text-align: left;
}

.cleanAllDirs {
    color: red;
    font-weight: bold;
}

.support {
    color: maroon;
}

/*

.grey span.fa {
    display: none;
}

.grey {
    background-color: var(--Abo_Kleur);
    color: black;
    opacity: 0.7;
}
*/

/*.selme {
    background-color: white;
    color: black;
}

.selme span.ab {
    color: black;
    font-weight: bold;

}*/
/*
div.abkop {
    color: black;
    opacity: 1.0;
}
span.ab {
    font-size: 15px;

}
*/

/*span.cost {
    color: blue !important;
    font-weight: normal !important;
}*/
.information {
    color: black;
    margin-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}


div.info, form.info {
    background-color: var(--Abo_Kleur);
    font-size: 10pt; /*var(--FontSize);*/
    margin-bottom: 10px;
    padding: 10px;

}

span.rapporttitle {
    color: blue;
    display: block;
    font-size: 10pt;
    margin-top: 10px;
}

span.rapportsubtitle {
    color: red;
    display: block;
    font-size: 9pt;
}


.dragcase {
    color: white;
    display: block;
    font-size: 8pt;
    text-align: center;
}

/*
.sel div.ab {
    color: white;
    font-weight: bold;
}

div.ab {
    font-size: 12px;
    padding: 7px;
    text-align: center;
}
*/

/* vormgeving settings dialog */

.settingdiv {
    display: grid;
    grid-area: Rows;
    grid-column-gap: 3px;
    grid-template-columns: repeat(6, 1fr);
}

.settingkop {
    grid-row: 1;
}

.col {
    grid-row: 2;

}

#uploadzone {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* vormgeving settings dialog */

.imagebox {
    align-content: flex-start;
    background-color: white;
    border: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5px;
}

.kleur2 {
    background-color: var(--Background_Kleur);
    color: var(--Kleur2);
}

.kleur3 {
    background-color: var(--Background_Kleur);
    color: var(--Kleur3);
}

.kleur4 {
    background-color: var(--Background_Kleur);
    color: var(--Kleur5);
}

.kleur7 {
    background-color: var(--Background_Kleur);
    color: var(--Kleur7);
}

.kleur8 {
    background-color: var(--Background_Kleur);
    color: var(--Kleur8);
}

.kleur10 {
    background-color: var(--Background_Kleur);
    color: var(--Kleur10);
}

/*vormgeving cards*/

#gallery {
    display: grid;
}

#gallery.large {
    column-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1em;
}

#gallery.small, .extrasmall {
    column-gap: 10px;
    grid-template-columns: repeat(6, 1fr);
    row-gap: 1em;
}

#cards {
    box-sizing: border-box;
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-areas:
    'bovenrand bovenrand bovenrand'
    'content content content';

    /* toegevoegd om scrollbar te krijgen bij langere lijsten */
    padding: 5px;
}

#bovenrand {
    display: grid;
    grid-area: bovenrand;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-areas:
    'selection pagination searchcard';
}


#pagination {
    display: flex;
    grid-area: pagination;
    justify-content: center;
}

.card-title {
    font-size: var(--CardTitleFontSize) !important;
}

@media (max-width: 700px) {
    #cards {
        display: grid;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        grid-template-areas:
    'selection'
    'pagination'
    'searchcard'
    'content';
    }

    #pagination {
        display: flex;
        grid-area: pagination;
        justify-content: left;
    }

    #gallery.small, .extrasmall {
        column-gap: 10px;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 1em;
    }

    #gallery.large {
        column-gap: 10px;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 1em;
    }

}

@media (min-width: 1200px) {

    #gallery.small {
        column-gap: 10px;
        grid-template-columns: repeat(8, 1fr);
        row-gap: 1em;
    }

    #gallery.extrasmall {
        column-gap: 5px;
        grid-template-columns: repeat(12, 1fr);
        row-gap: 1em;
    }

    #gallery.large {
        column-gap: 20px;
        grid-template-columns: repeat(4, 1fr);
        row-gap: 1em;
    }

}

#content {
    grid-area: content;
    height: calc(100vh - 120px);
    overflow-y: scroll;
}

#selection {
    grid-area: selection;

}

#searchcard {
    grid-area: searchcard;
}

.workcard.selected {
    background-color: white !important;
}

.cardmore {
    display: var(--More_Visibility) !important;
}

.card-text {
    display: flex;
    flex-direction: column;

}

.cards {
    background-color: var(--Menu) !important;
}

audio {
    width: 100%;
}

#dragrow {
    align-content: flex-start;
    align-items: flex-start;
    column-gap: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 5px;
    row-gap: 5px;
}

/*vormgeving cards*/

button.SM_ONDERDEEL, button.Indeling {
    background-color: var(--Kleur8) !important;
}

button.Historie {
    background-color: var(--Kleur4) !important;
}

button.DS_NIEUW {
    background-color: var(--Kleur7) !important;
}

button.addbut {
    background-color: var(--Kleur7) !important;
}

button.DS_KLEUR {
    background-color: var(--Kleur5) !important;
}

button.DS_FOTO {
    background-color: var(--Kleur1) !important;
}

button.DS_VORM {
    background-color: var(--Kleur6) !important;
}

button.DS_TEKST {
    background-color: var(--Kleur10) !important;
}

button.DS_RESET {
    background-color: var(--Kleur4) !important;
}

button.SM_RESET {
    background-color: var(--Kleur4) !important;
}

button.SM_PUBLICEER {
    background-color: var(--Kleur2) !important;
}

button.DS_BLADEREN {
    background-color: #ffc107 !important;
}


.dropzone .dz-preview .dz-error-message {
    top: 160px !important;
}

.dz-remove {
    font-size: 7pt !important;
}

.onlinemelder {
    background-color: red !important;
    color: white !important;
    display: var(--UpdateSite);
}

.onlinemelder:hover {
    background-color: green !important;
    color: white !important;
}

.half {
    background-color: var(--Menu) !important;
    margin-left: 15px;
    width: 50%;
}

.large {
    font-size: 20pt;
}

h5.titles {
    color: black;
    font-size: 10pt;
}

/* vormgeving settingsdialog */

#SettingForm {
    display: grid;
    grid-row-gap: 15px;
    grid-template-areas:
    'Rows'
    'Extra';
}

/*

div.ab {
    font-size: 12px;
    padding: 7px;
    text-align: center;
}
*/

.infobut {
    font-size: var(--FontSize);
    padding: 10px;
    white-space: normal !important;
    word-wrap: break-word;
}

.setting {
    background-color: silver;
    padding: 10px;
}

.note {
    display: block;
    float: left
}

/*.preview2, */
.implementSjabloon {
    border: 1px black solid;
    max-height: 80px;
    width: 100%;
}

.mobSjabloon {
    border: 1px black solid;
    height: 100%;
    max-width: 80px;
}

.scheme {
    border: 1px black solid;
    width: 100%;
}

.scheme.sel {
    border: 2px red solid;
}

.errordiv {
    background-color: silver;
    color: black;
    display: none;
}

/*
span.wvk {
    font-family: "Orator Std";
    font-weight: bold;
}*/

.hashtagbtn.selected {
    background-color: #8aafcf;
}

[placeholder]:empty::before {
    color: #555;
    content: attr(placeholder);
}

[placeholder]:empty:focus::before {
    content: "";
}

.functie {
    display: none;
}

.zijmenutips:hover {
    background-color: lightgrey;
    color: red;
}

.lefttab {
    color: #0c0c0c !important;
}

#study {
    display: grid;
    grid-column-gap: 5px;
    grid-template-areas:
    'leftmenu cards';
    grid-template-columns: 25% 1fr;
}

#leftmenu {
    background-color: white;
    border: 1px black solid;
    box-sizing: border-box;
    display: grid;
    grid-area: leftmenu;
    grid-row-gap: 5px;
    grid-template-areas:
    'filter'
    'selectors'
    'discussion';
    max-height: calc(100vh - 80px);
    overflow-y: scroll !important;
    padding: 5px;
}

.longlist {
    background-color: #d9edf7;
}

#discussion {
    grid-area: discussion;
}

.werkseriebtn {
    clear: left;
    float: left;
    max-width: var(--BtnWidth);
    overflow: hidden;
    white-space: nowrap;
}

.expobtn {
    clear: left;
    float: left;
    max-width: var(--BtnWidth);
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
}

.expobtnstyl {
    background-color: #dadada;
    color: black;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
}

.publibtnstyl {
    background-color: #a5bfd5;
    color: black;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
}

.publibtnstylpresent {
    background-color: #cca2a2;
    color: black;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
}

.wsbtnstyl1 {
    background-color: #a6a6a6;
    color: black;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;

}

.wsbtnstyl2 {
    background-color: #dadada;
    color: black;
    overflow: hidden;
    text-align: left;
}

.publibtn {
    clear: left;
    float: left;
    max-width: var(--BtnWidth);
    overflow: hidden;
    white-space: nowrap;
}

button.filter {
    max-width: var(--ExpoBtn);
}


.srchFieldsButtons {
    padding: 5px;
}

.leftbutton {
    margin-bottom: 5px;
    margin-top: 5px;
}

.collector {
    float: left
}

span.greencard {
    color: red;
    display: none;
}

span.greenspan {
    color: red;
}

span.greencard2 {
    color: green;
    display: none;
}

#collection {
    display: grid;
    grid-row-gap: 5px;
    grid-template-areas:
    'instruction'
    'helptekst'
    'werkserielist'
    'listcollection'
}

.exposorter.selected, .publisorter.selected, .werkseriesorter.selected, .sortcards.selected, .selectorsorter.selected, .zijmenusorter.selected, .notesorter.selected {
    color: red !important;
}

.exposorter, .publisorter, .werkseriesorter, .sortcards, .selectorsorter, .zijmenusorter, .notesorter {
    background-color: var(--SortButton_Kleur) !important;
    color: #000000 !important;
}

#functionButtons {
    list-style: none;
    padding-left: 0;
}

#selectionlist, #workslist, #sjabloon {
    column-gap: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    list-style: none;
    padding-left: 0;
    row-gap: 5px;
    width: 100%;
}

#expolist, #publicatielist, #werkserielist, #designhelplist, #cardhelplist, #notelist {
    column-gap: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    padding-left: 0;
    row-gap: 2px;
    width: 100%;
}

#werkserielist {
    grid-template-columns: 1fr 1fr 1fr;
}

#publicatielist, #expolist, #notelist {
    grid-template-columns: 1fr;
}

h3.discussion {
    color: darkred;
    font-size: 8pt;
}

#kosten {
    list-style: none;
}

.barelist {
    list-style: none;
    padding-left: 0;
}

.barelist li {
    margin-bottom: 5px;
}

#filter {
    background-color: var(--Menu);
    display: none;
    grid-area: filter;
    padding: 5px;
}

#filterlist {
    list-style: none;
    padding: 2px;
    width: 100%;
}

#filterlist > li {
    display: inline-block;
}

.loginvak {
    max-width: 400px;
}

.tekst {
    background-color: rgba(255, 255, 255, 0.5);;
    color: black;
    left: 50%;
    padding: 10px;
    position: absolute;
    top: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translate(-50%, -50%);

}

.textspan {
    margin-right: 10px;
    padding-left: 10px
}

.butblok {
    display: inline-block;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

.cardlist {
    border: 0;
    max-height: 120px;
    max-width: 120px;
    padding: 2px;
}

.radioselector {
    display: none;
}

.card {
    border: 1px solid white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.card.selected {
    border: 1px solid red;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card-body {
    font-size: var(--FontSize);
    padding: 8px !important;
}

.subcard {
    background-color: lightgray;
}

.nav-tabs .nav-item .nav-link.active {
    font-weight: bold;
}

.selectordiv {
    margin-right: 2px;
}

.selectordiv:hover {
    cursor: pointer;
}

span.redspan {
    color: red;
    float: left;
    font-size: 8pt;
}

.imageboxdiv {
    font-size: 7pt !important;
    margin-bottom: 5px;
    margin-top: 5px;;
}

.lb:hover {
    cursor: pointer;
}

#selectorcount {
    display: none;
}

.exportdiv {
    display: grid;
    float: left !important;
    grid-column-gap: 10px;
    grid-template-areas:
    'boottips boottips'
    'flds choice';
    grid-template-columns: 200px auto;
    margin-bottom: 10px;
    width: 100%;
}

.pdfdiv {
    display: grid;
    float: left !important;
    grid-column-gap: 10px;
    grid-template-areas:
    'boottips boottips'
    'flds choice';
    grid-template-columns: 200px auto;
    margin-bottom: 10px;
    width: 100%;
}

.boottips {
    grid-area: boottips;
}

.other {
    grid-area: other;
}

.flds {
    grid-area: flds;

}

.choice {
    grid-area: choice;
}

.instellingencol {
    list-style: none;
    padding-left: 0;
}

li.instelling.selected {
    background-color: var(--Kleur4) !important;
    color: black !important;
    font-weight: bold;
}

li.instelling {
    background-color: silver;
    color: white;
    font-size: 8pt !important;
    margin-bottom: 1px;
    padding: 6px;
}

.colkop {
    color: red;
    font-size: 12px !important;
    padding: 5px;
    text-align: left;
}

.greenicon {
    color: var(--keuze);
}

.cardedit {
    font-size: 6pt !important;
}

.selector, .selectorlightbox {
    font-size: 6pt !important;
}

.helpbtn {
    clear: left;
    float: left;
    /* max-width: 250px;
     min-width: 150px;*/
    font-size: 8pt !important;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
}

.helpbtnstyl {
    background-color: var(--keuze);
    color: black;
    display: inline-block;
    width: auto;
}

.worksbtn {
    position: relative;
}

.cntworkseries {
    left: 5px;
    position: absolute;
    top: 5px;
}

#worksbuts {
    margin-bottom: 5px !important;
}

.boxschrift {
    display: var(--Card_Visibility) !important;
}

button.activews {
    color: blue !important;
}

.discussionlist {
    list-style: none;
    padding-left: 10px;
}

.discus {
    display: grid;
    grid-template-areas:
    'disctextarea'
    'discbuts';
    width: 100%;
}

.discbuts {
    grid-area: discbuts;

}

.disctextarea {
    grid-area: disctextarea;
}


h3 {
    font-size: 12pt;
}

.actionrow, .addrow, .designrow, .keuzerow {
    display: grid;
    grid-column-end: 3;
    grid-column-start: 1;
}

.searchbalk {
    margin-bottom: 5px;
}

ul.buts {
    list-style: none;
    padding-left: 0;
}

.buticon {
    margin-right: 3px;
}

.zijmenucaret {
    margin-left: 3px;
}

.videobg {
    background-color: blanchedalmond;
}