/*
*    $Revision$
*    $Id$
*/

h1, h2, h3, h4,
.card-header,
#portalmenu .menukop,
#menutabs .menukop,
div.filtermenukop,
.widget-type-mk .menukop,
.widget-type-mi .menulabel {
    font-weight: 600; /* SemiBold */
    font-style: normal;
    color: var(--headertextcolor);
}

/* wat tijdelijk controlestyles om te zijn of de code deze niet/goed gebruikt */

/* deze onderkennen we, dev-only (input.flduo is bedoeld als toevoeging) */
input.fld, input.suggest,
select.fld, select.fldmulti, select.multiSuggest,
textarea.fldtxt,
input.flddate,
input.fldtime,
input.fldshort,
input#autofilter,
input#autofilterExist
{
    background-color: #FFFFFF;
    border-top: 1px solid var(--fclt-border-color);
    border-left: 2px solid var(--fclt-border-color);
    border-right: 1px solid var(--fclt-border-color);
    border-radius: var(--fclt-border-radius-input);
}
.text-styles:not(.closed) + textarea.bb_enabled {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
input#autofilter,
input#autofilterExist {
    border: 1px solid var(--fclt-border-color);
}
input.suggest {
    padding-right: 20px; /* Voor het suggest-icoontje */
}

input.flddate, .fldflexD, .fldSflexD
{
    width: 11em;
}
input.fldtime, .fldflexT, .fldSflexT
{
    width: 6em;
}
input.fldshort
{
    width: 105px;
}
input.fldlong { /* Rapport */
    width: 460px;
    background-position: 448px !important;
}
.fldconsent{
    font-weight: bold;
}
/* deprecated (textarea.fldtxt is de default) en niet nodig (want 100%)
textarea.fld
{
  width: 340px;
} */


/* **************************************************** */
/* **************************************************** */
/* ******    ALGEMENE ZAKEN op TAGS            ******** */
/* **************************************************** */
/* **************************************************** */

/* bodystyles */
:root {
    overflow: auto;
    padding: 0;
    margin: 0;
}

*, *::before, *::after {
    --fclt-font-size-m: 13px; /* Desktop overrule, het default Desktop font is net wat groter */
}

body {
    font-family: var(--fontfamily);
    font-size: 0.75em;
    line-height: 1.8em;
    text-align: left;
    margin: 0;
    padding: 0;
    background-color: initial;
}

body:is(.fclt-modal,
        .showmode,
        .editmode,
        #searchbody) td:not(.rstable td, .readonly),
body.notesmode .card,
body#searchbody nav,
section#searchbody td /* voor de styling-preview */
{
    font-size: 13px;
    --fclt-td-line-height: 27px;
    line-height: var(--fclt-td-line-height);
    button,
    textarea,
    input,
    select {
        --fclt-input-padding-y: 4px;
        --fclt-input-border-y: 1px;
        line-height: calc(var(--fclt-td-line-height) - 2 * var(--fclt-input-padding-y) - 2 * var(--fclt-input-border-y));
    }
    &.flexlabel {
        line-height: calc(0.8 * var(--fclt-td-line-height)); /* Ik wil eigenlijk 12px font-size en dan 1.8em => 21.6px net zoals show-mode */
    }
}

/* heel algemene styles */
body.fclt-modal,
body.showmode,
body.editmode,
body#searchbody,
section#searchbody
{
    & td.label,
    & td.label label {
        font-weight: 600; /* semi-bold labels */
    }
}
.widgetbody { /* Mijn berichten en Mijn lopende zaken */
    border: var(--fclt-border);
    border-radius: 5px 5px 0 0;
    margin-bottom: 5px;
}

textarea,
input,
th,
td,
select { /* Deze moeten allemaal afzonderlijk */
    font-family: var(--fontfamily);
}

textarea {
    display: block;
}

h1, h2, h3 {
    font-size: revert; /* Bootstrap revert .. */
}

/* Deze op z'n minst toch wel */
td.label,
td.label ~ td
{
    color: var(--textcolor);
}

input, textarea, select {
    font-size: 1em;
    padding: var(--fclt-input-padding-y) 2px var(--fclt-input-padding-y) 4px;
    margin: 0;
    border: var(--fclt-input-border-y) solid transparent; /* KR; niet zonder overleg weghalen aub */
    border-bottom: 1px solid #aaa;
    border-radius: var(--fclt-border-radius-input);
}

textarea {
    overflow: auto; /* Anders default scrollbars bij IE11 */
}
td, th {
    font-size: 13px;
    padding: 0px 1px 1px 2px;
    margin: 0;
    border: 0;
    vertical-align: top;
    font-weight: normal;
}
/* Safari is ugly, dan maar zo voor iedereen */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("../Pictures/togglerdown.png");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 17px; /* voor het icoontje */
}

select[multiple] {
    background-image: none;
    padding-right: 0;
}

a {
    cursor: pointer;
}
a:hover {
    text-decoration: underline;
}

form {
    margin: 0;
    padding: 0;
}

div {
    border: 0;
    padding: 0;
    margin: 0;
}
table { /* om border om lege cellen te houden */
    border-collapse: collapse;
}

pre, xmp, code {
    font-size: 13px;
    line-height: 1.3em!important;
    font-style: normal;
    white-space: pre-wrap;
    display: block; /* Zo gebruiken wij <code> die eigenlijk inline is */
    color: var(--textcolor);
}
code {
    margin-left: 2em;
}
th {
    text-align: inherit;
    padding: 2px 3px 2px 3px;
    background-color: var(--tableheaderbackgroundcolor);
    color: var(--tableheadercolor);
}

img { /* tekst-eigenschap voor de alt als de afbeelding er niet is */
   text-transform: lowercase;
   font-style: italic;
   font-weight: 100;
}

#buttons ul li.btn_disabled,
i.btn_disabled
{
    cursor: default;
    pointer-events: none;
}

/* **************************************************** */
/* *****                                          ***** */
/* *****             LOGIN / PORTAL               ***** */
/* *****                                          ***** */
/* **************************************************** */
#myportalteaser, div#sfooter {
    text-align: center;
    font-size: 1.5em;
    padding-top: 70px;
    padding-bottom: 40px;
    color: var(--logincolor);
    margin: 0 10%; /* wat ruimte aan de zijkanten */
}
#myportalteaser a , div#sfooter a {
    color: var(--aareon-tangerine);
}
#loginhtml, #termshtml {
    height: 100%;
}
#termshtml { /* waar is deze van? */
    background-color: #F4F6F9; /* geen harde kleuren */
}
#loginhtml {
    background-color: var(--aareon-color-1);
}

.form-group,
.form-floating {
    font-size: 16px;
}

#loginbody {
    font-size: 0.75em;
    background: var(--loginbgimage);
    background-size: cover;
    min-height: 100%;
}
#loginbody .form-group {
    margin-bottom: 1rem;
}
#loginbody form {
    max-width: 330px;
    width: 90%;
    background-color: var(--loginbackgroundcolor);
    padding: 40px;
    border-radius: var(--fclt-border-radius-input);
    margin: auto;
    color: #ffffff !important; /* anders dan anders */
    box-shadow: 0 0 4px 4px var(--fclt-border-color);
}

#loginbody_sr form {
    max-width: 330px;
    width: 90%;
    background-color: rgb(0,44,103);
    padding: 40px;
    border-radius: var(--fclt-border-radius-input);
    margin: auto;
    color: black;
    box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
}

#loginbody form .form-control {
    background: none !important; /* als die color dat is, dan deze ook, anders ios wit-op-wit */
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.7);
    border-radius: 0;
    box-shadow: none;
}
#loginbody form a.form-control {
    border: 0;
}
#logindiv .illustration {
    text-align: center;
    padding: 15px 0 20px;
    font-size: 100px;
    color: var(--loginiconcolor);
}

#logindiv .loginname,
#logindiv .loginpass,
#logindiv #vismail,
#logindiv #vistoken,
#logindiv .visselfregister,
#logindiv #otpcode,
#logindiv #prsemail {
    width: 100%;
    &, #logindiv #remember {
        background-color: #FFF !important;
        color: #222 !important;
        line-height: 2rem;
        font-size: 16px;
    }
}

/* voor login "onthoud mij" label */
.rememberme {
    &, &.active {
        color: #FFFFFF;
    }
}

.otp label,
.otp label.active {
    color: #ffffff; /* todo */
    font-size: 1.25em;
}
#mobbutton { /* Todo; bestaat niet meer .. ? */
    cursor: pointer;
    padding: 0px 12px;
    color: var(--buttoncolor);
    background-color:var(--buttonbackgroundcolor);
    border: 1px solid transparent; /* dan blijft de grootte goed */
    text-align: center;
    border-radius: 2px;
    transition: color 0.2s, background-color 0.2s, background 0.2s;
    text-decoration: none;
    will-change: background-color, color;
}
#mobbutton:hover {
    color: var(--buttonhovercolor);
    background-color:var(--buttonhoverbackgroundcolor);
}
#logindiv .remember {
    text-align: center;
}
#logindiv #buttons.vertical {
    min-width: 0; /* overrule de normale regel van 300 */
}
#logindiv #buttons.vertical ul li {
    margin-bottom: 4px;
    height: 42px;
    align-items: center;
}
#loginfooter {
    position: fixed;
    bottom: 24px;
    height: 24px;
    width: 100%;
    clear: both;
    text-align: center;
    font-size: 12px;
    color: var(--logincolor);
}
.mobkey {
    float: right;
}

.userphoto[onclick] {
    cursor: pointer;
}

/* ---------------------------------------------------
   Ronde cirkels (bijv. avatars / initials)
--------------------------------------------------- */
.circle, #headerhelp {
    display:  inline-block;
    height: 2.5rem; /* 100% of parent */
    width: 2.5rem; /* 100% of parent */
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    /* Achtergrond een gradient van --menuiconcolor naar een donkere --menuiconcolor */
	background: var(--menuiconcolor-gradient);
    color: #FFFFFF; /* Witte tekst in cirkels */
}
.initials {
    position: relative;
    display: inline-block;
    font-size: 1.25rem; /* 50% of parent */
    line-height: 1;
    padding-top: 0.625rem; /* 25% of parent */
}

/* wat doen deze (hier)? */
#addroomslebuttons #buttons,
#addroomfaqbuttons #buttons {
    text-align: left;
    float: left;
}

/* headerstyles */
#headerblok {
    width:100%;
    float: right;
    background: var(--headerimage) no-repeat;
    background-position: left center;
    background-color: var(--headerbackgroundcolor);
    color: var(--headercolor);
}
div.new-headerSearch {
  display: inline-block;
}
div#loggedinuser div.userlocation {
  display: none;
}
div.new-layout {
  position: absolute;
  right: 0;
}
#headersearch {
    position: relative;
}

div#useroptions,
div.modules {
    position: absolute;
    z-index: 12;
    width: 220px;
    line-height: 1.9em;
    padding: 4px;
    color: var(--menucolor);
    background-color: var(--menubackgroundcolor);
    border: var(--fclt-border);
    box-shadow: 2px 2px 4px #888888;
}
div#useroptions {
    top: calc(50% + 0.95em + 5px); /* 50% plus de helft vd hoogte van .moduleselector */
    right: 2.5em;
    border-radius: var(--fclt-border-radius);
}
div.modules {
    top: 100%;
    right: -1.55em;
    border-radius: var(--fclt-border-radius);
}
div#useroptions > div,
div.modules > div.module {
    cursor: pointer;
    border-radius: var(--fclt-border-radius);
}
#useroptions > div > i,
.modules > .module > i,
.morelistitem > i {
    font-size: 15px;
    font-weight: 300;
    line-height: normal;
    margin: 5px;
    color: var(--menuiconcolor);
    transition: transform var(--fclt-animation-duration-s) ease;
}
div#useroptions > div:hover, div.test,
div.modules > div.module:hover,
.morelistitem:hover {
    color: var(--menukophovercolor);
    background-color: var(--menukophoverbackgroundcolor);
    & > i {
        transform: scale(1.2);
    }
}
#headersuggest input.fld,
#headersearch input.fld
{
    border: var(--fclt-border);
    width: 190px;
    line-height: 1.9em;
    padding-left: 6px;
    height: calc(1.9em + 10px); /* 10px = padding-top & -bottom en border-top & -bottom van een input */
    padding-right: 20px; /* Voor het icoontje */
}
#headersearch input.fld {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.hsspacer {
    height: 21px;
}

#headersuggest input {
    border-radius: var(--fclt-border-radius-input);
}
#productsearch {
    border-top-left-radius: var(--fclt-border-radius-input);
    border-bottom-left-radius: var(--fclt-border-radius-input);
}
.moduleselector {
    position: absolute;
    line-height: 1.9em;
    height: calc(1.9em + 10px); /* 10px = padding-top & -bottom en border-top & -bottom van een input */
    width: 2em;
    margin-left: -5px;
    border: var(--fclt-border);
    border-top-right-radius: var(--fclt-border-radius-input);
    border-bottom-right-radius: var(--fclt-border-radius-input);
    background-color: #FFFFFF;
}
.moduleselector:hover {
    cursor: pointer;
}
.moduleselector:active {
    box-shadow: inset 0 0 3px var(--fclt-border-color);
}
.moduleselector i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#headerprefix, #userimperson {
    font-weight: bold;
    text-align: center;
    color: #FFF;
    position: absolute;
    font-size: 2.0em;
    margin-left: 40%;
    margin-top: 10px;
    padding: 20px;
    box-shadow: 0px 0px 10px #515151;
    max-width: 40%;
    border-radius: 4px;
    background: linear-gradient(to right, #CC5252, #F59D04)
}
#headerfunctions {
    position: relative;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    float: right;
    height: 100%;
    color: var(--textcolor);
}
#headerfunctions > div {
    display: inline-block;
    margin: 0 1em;
}
#headerhelp {
    font-size: 1.25rem; /* 50% of parent */
    position: relative;
    line-height: 1;
    padding-top: 0.625rem; /* 25% of parent */
    margin-right: 0 !important;  /* minder dan 1em maar de >div hierboven blijkt sterker     */
    cursor: pointer;
}
#headerhelp:hover > i {
    font-weight: 600;
}
.userphoto:hover > .initials {
    font-weight: 600;
}

.headerToggle {
    display: inline-block;
    position: relative;
    font-size: 18px;
    text-shadow: 0px 0px 1px #fff; /* should the backgroundcolor be the same */
}

#loggedinuser {
    display: inline;
    text-align: right;
}
#loggedinuser div {
    display: inline;
}
div.userphoto img.profile {
    max-height: 39px;
    margin-right: 5px;
    cursor: pointer;
}
#langtoggle {
    display: inline-block; /* display:none to hide */
    padding: 1px 5px 0 4px;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}
#logindiv #langtoggle {
    text-align: center;
    width: 100%;
}
#langtoggle img {
    cursor: pointer;
    height: 20px;
    border: 1px solid #fff;
    margin-right: 1px;
}
#toggleInterface {
    display: inline-block; /* display:none to hide */
    padding: 1px 5px 0 4px;
    vertical-align: middle;
}
#logindiv #toggleInterface { float: right; }
#toggleInterface img {
    cursor: pointer;
    height: 12px;
    border: 1px solid #fff;
    margin-right: 1px;
}
div.username span {
    padding-left: 3px;
    padding-right: 1px;
}

div#loggers {
    position:absolute;
    top:5px;
    left:5px;
    z-index:99
}
button#loggingoff {
    display:none;
}
button#loggingoff,button#loggingshow {
    font-size:10px;
    background-color:#fdd; /* geen harde kleuren */
}
button#loggingoff {
    background-color:#f88; /* geen harde kleuren */
}
button#loggingon {
    font-size:10px;
}
#badschema {
    background-color: var(--fclt-color-red);
    font-size: 2.0em;
    z-index: 9999;
    left: 200px;
    position: absolute;
}
#badobjects {
    background-color: var(--fclt-color-red);
    color: white;
    font-size: 10px;
    z-index: 9999;
    left: 100px;
    top: 0px;
    position: absolute;
}

/* **************************************************** */
/* **************************************************** */
/* ******          VOOR ALLE PAGINA'S          ******** */
/* **************************************************** */
/* **************************************************** */

#mainbody {
  width: 100%;
  height: 100%;
}

#rejectbody,
body.editmode {
    border-left: 0px solid var(--frameheaderbackgroundcolor);
    border-right: 0px solid var(--frameheaderbackgroundcolor);
    border-radius: 4px;
}
.simpelpage {
    padding: 3em;
    font-size: 0.8em;
    line-height: 1.6em;
    font-weight: normal;
    vertical-align: middle;
}

/* **************************************************** */
/* **************************************************** */
/* ******          VOOR ??                     ******** */
/* **************************************************** */
/* **************************************************** */

.bes-menu-button,
.mld-menu-button {
    border-radius: var(--fclt-border-radius);
    background-color: var(--frameheaderbackgroundcolor);
    border-bottom: 1px solid #FFFFFE; /* backgroundcolor */
    cursor: pointer;
    transition: background-color var(--fclt-animation-duration-s),
                color var(--fclt-animation-duration-s);
    & > h3 {
        color: var(--frameheadercolor);
    }
}

.beta .bes-menu-button,
.beta .mld-menu-button {
    display: flex;
    flex-grow: 1;
    align-items: center;
}

.bes-menu-button:hover,
.mld-menu-button:hover {
    background-color: var(--buttonhoverbackgroundcolor);
    & > h3 {
        color: var(--buttonhovercolor);
    }
}

.bes-menu-button:active,
.mld-menu-button:active {
    transform: translateY(1px);
}
.beta .bes-menu-button:last-child:active,
.beta .mld-menu-button:last-child:active {
    transform: translateY(-1px);
}

.bes-menu-button h3,
.mld-menu-button h3 {
    margin: auto;
    min-height: calc(1.5em + 20px);
    padding: 10px;
}
.beta .bes-menu-button h3,
.beta .mld-menu-button h3 {
    margin: 0;
}

span.hide-more.visible {
    opacity: 1;
    transition: all 1s;
    transition-delay: 250ms;
}
span.hide-more.invisible {
    opacity: 0;
    transition: all 1s;
    transition-delay: 250ms;
}
div.clear-both {
    clear: both;
}
div.blockgraph {
    width: 16vw;
    height: 16vw;
    min-width: 16em;
    min-height: 16em;
    border: 1px solid black;
    display: inline-block;
    margin: 10px 10px 0 0;
    cursor:pointer;
}
div.blockgraph span {
    text-align: center;
    display: block;
    color: white; /* geen harde kleuren */
}
span.blockgraph-title {
    padding-top: 5%;
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
span.blockgraph-value {
    padding-top: 30%;
    font-size: 3em;
}

/* begin flexbox specific  */
div.res-menu-flex {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
}
.overlaying-back-button {
    position: fixed;
    z-index: 1;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    opacity: .3;
    display: flex;
    font-size: 4em;
    justify-content: center;
    align-items: center;
    height: 1.25em;
    width: 1.25em;
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--textcolor);
    cursor: pointer;
}
.overlaying-back-button:hover {
    opacity: 1;
}

div.seperator {
    width: 100%;
    font-size: 2.5em;
    padding: 10px 0px;
    color: var(--textcolor);
    text-align: center;
    border-bottom: 1px solid var(--fclt-border-color);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(255, 255, 255, 0) 70%);
}

.bes-menu-col,
.mld-menu-col,
#diagram {
    height: calc(100vh - var(--fclt-frameheader-height));
    overflow-y: auto;
}
#diagram {
    padding: 0;
}
.beta.bes-menu-col,
.beta.mld-menu-col {
    display: flex;
    flex-direction: column;
}

div.besicmenu,
div.mldicmenu {
    height: 250px;
    padding: 0px
}

div.besicmenu,
div.mldicmenu,
div.iconmenu {
    position: relative;
    cursor: pointer;
}

div.iconmenu,
.res-flex-recent {
    min-width: 200px;
    min-height: 120px;
    max-width: 600px;
    max-height: 440px;
}
.iconitem,
.res-flex-recent-card {
    height: calc(100% - 6px);
    width: calc(100% - 6px);
    margin: 3px;
    background-color: rgba(255, 255, 255, 0.8); /* transparant over de eventuele achtergrondfoto */
    border-radius: var(--fclt-border-radius-lg);
    overflow: hidden;
}
.iconitem,
.res-flex-recent-card,
.res-flex-recent-item {
    cursor: pointer;
    transition: 150ms opacity;
}
div.besicmenu div.iconitem,
div.mldicmenu div.iconitem {
    border: 1px solid var(--fclt-border-color);
}

:is(.mld-menu-col, .bes-menu-col) .row:hover .iconitem:not(:hover),
.res-menu-flex:hover > :not(.no-action) > :is(.iconitem:not(:hover), .res-flex-recent-card:not(:hover)),
.res-flex-recent-card:hover > .res-flex-recent-item:not(:hover) {
    opacity: .65;
}

:is(.mld-menu-col, .bes-menu-col) .row:hover .iconitem:hover :is(i, img),
.res-menu-flex:hover > :not(.no-action) > .iconitem:hover :is(i, img),
.res-flex-recent-card:hover > .res-flex-recent-item:hover :is(i, img) {
    scale: 1.025;
}

.iconimg,
.mld-icon-wrapper,
.bes-icon-wrapper,
.res-flex-recent-label {
    width: 100%;
    height: 60%;
    text-align: center;
    color: var(--menuiconcolor);
}
.res-flex-recent-label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 1.4em;
    height: 40%;
}
:is(.iconimg, .mld-icon-wrapper, .bes-icon-wrapper) img {
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
}
:is(.iconimg, .mld-icon-wrapper, .bes-icon-wrapper) i {
    font-size: 5em;
}
:is(.mld-icon-wrapper, .bes-icon-wrapper) :is(i, img),
.iconimg > * {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    transition: 150ms scale;
}

.res-iconlabel,
.res-flex-recent-item {
    text-overflow: ellipsis;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.res-iconlabel,
.bes-iconlabel,
.mld-iconlabel,
.res-flex-recent-item {
    width: 100%;
    height: 40%;
    padding: 0.5em;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    line-height: 1.4em;
    cursor: pointer;
}
.res-flex-recent-item {
    text-align: left;  /* toch niet center */
    position: relative;
    height: 20%;
    border-top: 1px dashed rgba(0, 0, 0, 0.5);
}
.res-iconlabel i,
.res-flex-recent-item i {
    margin-right: 6px;
}

span.highlight-text {
    background-color: yellow;
    color: black;
}
.no-action *,
.no-action div.vrijedag,
.no-action div.vrijweekend {
    cursor: not-allowed;
}
/* end flexbox specific */

.fclt-icon-close
{
    position: absolute;
    right: .3em;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: var(--tableheadercolor);
}

/* **************************************************** */
/* **************************************************** */
/* ******   TABS, Navigatie ed                 ******** */
/* **************************************************** */
/* **************************************************** */
/* tabs: sluitkruisje en pin */
.tabclose,
.tabpinned {
    line-height: 1;
    cursor: pointer;
    padding-left: 0.3em;
}
.tabclose {
    font-size: 1.1em;
    margin-right: -0.2em;
}
.tabpinned {
    font-size: 0.9em;
}
.hot {
    color: #ff5151 !important; /* harde kleur rood */
    opacity: 1 !important;
}
.card .hot {
    line-height: 1.5em;
}

.tabpinned:hover,
.tabclose:hover,
.tabcloseall:hover,
.pincurrenttab:hover {
    opacity: 1;
}

.tabcloseall, .pincurrenttab {
    background-color: var(--menubackgroundcolor);
    color: var(--menucolor);
    cursor: pointer;
    font-size: 1.5em;
    float: right;
    line-height: 31px;
    padding: 0px 4px 3px 1px;
}
.pincurrenttab {
   padding: 1px 1px 2px 4px;
}

.moretab {
    font-weight: 600;
    font-size: 1.05em;
    line-height: 2em;
    color: var(--inactivetabcolor);
    background-color: var(--inactivetabbackgroundcolor);
    border: 1px solid #d3d3d3;
    border-bottom-width: 0;
    border-top-right-radius: var(--fclt-border-radius);
    border-top-left-radius: var(--fclt-border-radius);
    float: left;
    cursor: pointer;
    padding: 2px 0.6em 0.5px 0.8em;
    margin: 4px 0.2em -1px 2.5px;
}

.moretab > span {
    margin-right: 0.2em;
}

.moretab:not(.moretab-active):hover {
    background-color: var(--buttonhoverbackgroundcolor);
    color: var(--buttonhovercolor);
}

.moretab-active {
    border: 1px solid #aaa;
    background-color: var(--activetabbackgroundcolor); /* sluit aan op pageheader */
    color: var(--activetabcolor);
}

div.morelist {
    position: absolute;
    overflow-y: auto;
    font-weight: 600;
    font-size: 1.05em;
    line-height: 2.2em;
    background-color: var(--menubackgroundcolor);
    color: var(--menucolor);
    border: var(--fclt-border);
    box-shadow: 2px 2px 4px #888888;
    margin: 35px 0 0 0.2em;
    min-width: 220px;
    max-height: calc(100% - 35px);
    padding: 4px;
    z-index: 12;
    pointer-events: none;
    transition: opacity 100ms ease-in-out,
                transform 100ms ease-in-out;
    opacity: 0;
    transform: translateY(-10px);
}

.moretab-active + .morelist {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
    border-radius: var(--fclt-border-radius);
}

div.morelistitem {
    cursor: pointer;
}

div.morelist > div.morelistitem:hover {
    background-color: var(--menukophoverbackgroundcolor);
    color: var(--menukophovercolor);
}

div.pindialog {
    margin-top: 10px;
}
ul#pinoptions {
    margin-top: 24px;
    list-style: none;
    padding-left: 12px;
}

.tabcloseall:hover,
.pincurrenttab:hover {
    color: var(--menukophovercolor);
    & > i {
        font-weight: 400;
    }
}
div#maintabs ul.ui-tabs-nav {
    margin-right: 59px; /* rechterruimte voor tabcloseall cs.*/
    border: 0;
    border-right: var(--fclt-border);
}
div#menutabs ul.ui-tabs-nav::after,
div#maintabs ul.ui-tabs-nav::after {
    content: "";
    height: 0;
    border-bottom: var(--fclt-border);
}

div#menutabs ul.ui-tabs-nav::after {
    width: calc(100% + .4em); /* 100% + padding-horizontaal */
}
div#maintabs ul.ui-tabs-nav::after {
    width: calc(100% + 62px + .4em); /* 100% + margin-right + padding-horizontaal */
}

/* **************************************************** */
/* **************************************************** */
/* ******          INPUTS E.D. (zonder sizing) ******** */
/* **************************************************** */
/* **************************************************** */

input[type=file] {
  border: 0;
  background-color: #FFFDF1; /* geen harde kleuren */
}

input[type=password] {
    border:1px solid #ccc;
    background-color: #FFFDF1; /* geen harde kleuren */
}

input[type=checkbox], input[type=radio]{
  background-color:transparent;
  margin: 0 4px 0 2px;
}

input[type=submit] {
    margin: 0;
    padding: 0;
}
input[readonly], select[readonly], textarea[readonly] {
  color: var(--textcolor);
  background-color: transparent;
  border: 0;
}

/* label tag =  de tekst */
label {
  color: var(--textcolor);
  margin: 0;
  /*white-space: nowrap;*/
}
label.active {
  color: #00c;  /* geen harde kleuren */
}
label.selector {
  float: left; /* links in de td */
}

h3 {
    font-size: 1.2em;
    font-weight: bold;
    text-align:left;
}

/* ******* QUALIFIERS, algemene verbijzonderingen ***** */
.labelextra {
  color: #afc3d0;  /* geen harde kleuren?! */
  float: right; /* rechts in de td */
  cursor: pointer;
}
.labelextra:hover {
  color: #51768F;  /* geen harde kleuren?! */
  opacity: 1;
}
.labelaction {
  color: #FFBF00;
  float: right;
  cursor: pointer;
}
.labelaction:hover {
  color: #FFDD81;
  opacity: 1;
}
label.compactselector {
    padding: 0 0 2px 4px;
    line-height: 2em;
}
label.lt {
  font-weight: normal;
}

div.multitoggle,
div.advmultitoggle {
    position: relative;
    white-space: nowrap;
    /* font-size: 12px; */
}

select.advMultiSuggest {
    max-width: 100%;
}

span.multi_select_toggle,
span.multi_suggest_toggle {
    font-size: 1em;
    position: absolute;
    display: block;
    right: 20px;
    line-height: normal;
    margin-top: 3px;
    color: var(--textcolor);
    cursor: pointer;
}

span.multi_select_toggle > *,
span.multi_suggest_toggle > * {
    position: relative;
    padding-top: .125em;
}

span.multi_select_toggle::before,
span.multi_suggest_toggle::before {
    content: "";
    position: absolute;
    display: block;
    font-size: 1.3em;
    width: .75em;
    height: .75em;
    top: .125em;
    right: .125em;
    background-color: #FFFFFF;
    border-radius: 50%;
}

span.multi_select_toggle:hover .fa-fw,
span.multi_suggest_toggle:hover .fa-fw {
    /* color: var(--buttonhoverbackgroundcolor); */
    font-weight: 900;
}
span.multi_select_toggle.disabled,
span.multi_suggest_toggle.disabled,
div.note-icon.disabled {
    color: #aaa;  /* deze mag */
    pointer-events: none;
}

a[href^="mailto:"], a[href^="tel:"], a[href^="callto:"] {
    text-decoration: none;
    color: var(--textcolor);
}
a[href^="mailto:"].fldmailto {
    background-color: #fffffe; /*backgroundcolor*/
}

td.label:not(.flexsearch) + td div,
td.label:not(.flexsearch) + td span {
    word-break: break-word;
    line-break: initial;
}

/* ******* RESTANTEN ********************************** */

/* VOOR REGELS IN EEN OVERZICHT */
div.allactions {
    position: absolute;
    border: 0;
    padding: 5px 3px 9px 3px;
    height: 1em;
    border-radius: var(--fclt-border-radius-input);
    z-index: 10;
}

div.ias {
    visibility:hidden;
    padding: 0;
    white-space: nowrap;
    cursor: default;
    height: 1em;
    padding: 5px;
}
.rstable tbody tr:hover td div.ias
{
    visibility:visible;
}
.rstable tbody tr:not(:hover, .selected) td.dupe {
    color: transparent;
}
 th.multiselect:hover input[type='checkbox'] {
    outline: 1px solid var(--fclt-color-red);
}
th.multiselect, td.multiselect {
    width:3em;
    text-align: center;
}
td.multiselect:hover {
    cursor: pointer;
}
.rstable tbody tr.selected td {
    background-color: #DCE4FF !important;
}
#rstable td.emptyset {
    background-color: #FFFFFF;
    padding-left: 10px;
}
.ia { /* inline action span */
    cursor: pointer;
    color: blue;
}

span.ia2 { /* inline action v2 */
    cursor: pointer;
    color: var(--inlineactioncolor);
    border: 1px solid var(--inlineactioncolor);
    margin: 1px;
    padding: 2px 4px 2px 4px;
    background-color: var(--inlineactionbackgroundcolor);
    border-radius: var(--fclt-border-radius-input);
    box-shadow: 1px 2px 2px #333;
    white-space: nowrap;
}

span.ia2:hover {
    background-color: var(--inlineactioncolor);
    color: var(--inlineactionbackgroundcolor);
}

.afwijkopstel {
    font-weight: bold;
}
.dirty td {
    opacity: 0.5;
}
.highlite td {
    background-color: var(--buttonbackgroundcolor);
    color: var(--buttoncolor);
}

td.listid
{
    color: #ccc
}

.msb { /* mld subject in list */
  color: var(--textcolor);
}
.ac, .ac2, .ac4, .ac128, .ac256, .ac512 {
    color: var(--fclt-color-bad);
}
.opdrsubstatus,
.mldshowactie {
    display: inline-block;
    font-size: var(--fclt-font-size-m);
    padding: 0.35em 0.65em; /* var(--bs-badge-padding-y) var(--bs-badge-padding-x); */
    border-radius: var(--fclt-border-radius-lg);
}
.mldshowactie:is(.fclt-info, .fclt-warning) {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem;
    gap: 0.75rem;
    line-height: normal;
}
:is(.fclt-info, .fclt-warning)::before {
    font-size: 1.5rem;
    font-family: "Font Awesome 6 Pro";
}
.fclt-info::before {
    content: "\f05a";
}
.fclt-warning::before {
    content: "\f071";
}
/* blockstyles */

.fcltframe {
    text-align: right;
    padding: 2px;
}
div.fcltframe {
    font-size: 12pt;
    font-weight:bold;
    text-align:left;
}

#resselector,
.besartbtns,
.sidebar-toggler,
.recentlychanged,
.notificatiefailer,
.fcltframeheader,
.fcltfiller,
.fcltframefooter
{
    height: var(--fclt-frameheader-height);
}

.fcltfiller, .fcltframeheader, .fcltframefooter {
    width: 100%;
    left: 0; /* zzZ IE11 */
    font-size: 1.1em; /* fontafhankelijk*/
}

.order-first {
    order: -1;
}

#resselector,
.fcltframeheader,
.fcltframefooter {
    padding: 1px 5px 1px 1px;
    background-color: var(--frameheaderbackgroundcolor);
}

#resselector:empty {
    height: 0;
    padding: 0;
}

.hambdropdown {
    background-color: var(--activetabbackgroundcolor);
    position: absolute;
    z-index: 11;
    top: 100%;
    right: 0px;
}
.hambdropdown ul {
    display: flex;
    flex-direction: column;
}
.hambdropdown hr {
    border: 0 solid currentColor;
    margin: 0 .375rem;
}
.hambdropdown .ordered ~ hr {
    border-top-width: 1px;
}

.fcltframeheader .iframer-title {
    font-size: 1.2em;
}
.fcltframeheader .iframer-title,
.fcltframeheader #iframerextratitle,
.iframe-chb-toggle,
.fcltframeheader #autofilter,
.fcltframeheader #autofilterExist,
span.hints {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    float: left;
    margin-left: 0.5em;
}
.ui-dialog-titlebar .hints {
    position: absolute;
    right: 1.8em;
}
span.hints {
    float: right;
    margin-right: 0.5em;
}
span.hints .tinyhint {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-top: 0.5em;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: white;
    color: var(--aareon-grapefruit);
    font-weight: 900;
    border: 1px solid currentColor;
    opacity: 0;
    transition: opacity .05s;
}
span.hints.active .tinyhint {
    opacity: 1;
}

#iframerextratitle {
    font-weight: normal;
    font-style: italic;
    color: var(--frameheadercolor);
}

[id^=autofilter-], #autofilter,
[id^=autofilterExist-], #autofilterExist {
    font-family: var(--fontfamily_alt);
    padding: 3px 8px;
    margin-left: 1em;
    border: 0;
    border-radius: 16px;
    font-size: 1rem;
    opacity: 0.8;
}
div.collapsed #autofilter,
div.collapsed #autofilterExist {
    display: none
}

.fcltframeheader {
    color: var(--frameheadercolor);
    text-align: left;
    border-radius: 4px 4px 0 0;
}
.collapsible {
    cursor: pointer;
}

h2 {
    margin: 0; /* altijd? */
}

.buttoncontainer {
    position: relative;
}

.fcltframeheader.collapsed span, .fcltframeheader.collapsed i {
    opacity: .75;
    transition: opacity 1s ease-in-out;
}

div.fcltframefooter {
    cursor: default;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
.fcltframefooter #buttons {
  float: inherit;
  text-align: center;
}
div.widgetx {
  overflow: hidden;
}
div.widgetcontainer {
  float: left;
}
div.widget {
    border: 0px solid #f1f1f1;
    margin: 2px;
    border-radius: 4px;
}
.widgettitle {
    border-bottom: 0px solid #f1f1f1;
    background-color: white;
    text-align: center;
    font-weight: bold;
    line-height: 20px;
}

.recentlychangedcredentials {
    background-color: orange;
    color: black;
    padding: 1px 1px 1px 2px;
}
.expiredcredentials {
    background-color: var(--fclt-color-red);
    color: var(--fclt-color-red-contrast);
    padding: 1px 1px 1px 2px;
}
.recentlychanged {
    background-color: orange;
    color: white;
    padding: 1px 0px 1px 0px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recentlychanged #buttons {
    position: absolute;
    right: 1px; /* Todo; buttons */
}

tr.recentlychangedopdr td,
tr.recentlychangedmld td {
  background-color: #FDFF9F;
  color: var(--textcolor);
  opacity: 1.0;
}

.notificatiefailer {
    background-color: blue;
    color: white;
    padding: 1px 0px 1px 0px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submenu {
    position: absolute;
    top: 1px;
}
/* Modal windows (kalender, popups) */
.ui-dialog {
   box-shadow: 2px 2px 5px rgba(0,0,0, 0.5);
   padding: 0px;
   border: 0px;
   border-image-width: 0;
}

input#menufilter {
    width: 220px;
    border-radius: 8px;
    opacity: 0.8;
    margin: 5px;
    padding: 2px 6px 3px 6px;
    border: 1px solid #aaa;
}
div.filtermenukop {
    display: none;
    background-color: var(--menubackgroundcolor);
    color: var(--menucolor);
    border-bottom: var(--fclt-border);
    text-align: center;
}

/* oude jQuery ui kleurenfestijn tbv tab menu */
.tabclose,
.tabpinned {
  opacity: 0.4;  /* vager dan de titel zelf */
}
/* bedoeld voor de tabs */
.ui-tab.ui-state-default {
    background: var(--inactivetabbackgroundcolor);
    #menutabs & {
        background: #DDDDDD;
    }
    a,
    .tabclose,
    .tabpinned {
        color: var(--inactivetabcolor);
    }
}
.ui-tab.ui-state-hover,
.ui-tab.ui-state-focus {
    #menutabs &, & {
        background-color: var(--buttonhoverbackgroundcolor);
        color: var(--buttonhovercolor);
    }
}
.ui-tab.ui-state-hover {
    a,
    .tabclose,
    .tabpinned {
        color: var(--buttonhovercolor);
    }
}
.ui-tab.ui-state-active {
    border: 1px solid #aaa;
    background-color: var(--activetabbackgroundcolor); /* sluit aan op pageheader */
    font-weight: normal;
}
#menutabs .ui-tab.ui-state-active {
    background-color: var(--menubackgroundcolor); /* sluit aan op de menu-kleur */
}
.ui-tab.ui-state-active a {
    color: var(--activetabcolor);
}
.ui-tab.ui-state-active .tabclose,
.ui-tab.ui-state-active .tabpinned {
  color: var(--activetabcolor);
}

.ui-widget-header {
    border: 1px solid #aaa;
    font-weight: bold;
}
.ui-widget-header.ui-datepicker-header,
.ui-widget-header.ui-dialog-titlebar {
   background: none;
   border: none;
   border-bottom-right-radius: 0;  /* overrule voor .ui-corner-all */
   border-bottom-left-radius: 0;   /* overrule voor .ui-corner-all */
}
.ui-widget-header.ui-datepicker-header {
   color: var(--frameheadercolor)!important;
   background-color: var(--frameheaderbackgroundcolor)!important;
}
.ui-widget-header.ui-dialog-titlebar {
    background-color: var(--tableheaderbackgroundcolor)!important;
    color: var(--tableheadercolor)!important; /* denk ook aan fclt-icon-close */
}

.ui-widget-header.ui-dialog-titlebar.has-fclt-icon-close {
   padding-right: 0.4em;
}
.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{
    border-top-right-radius:2px;
    border-top-left-radius:2px;
}
.ui-tabs-hamburger {
    border-radius: 0px;
    padding: 0px;
    margin: 0px;
    border: 0px !important;
}
/* Anders lelijk in multi-dialoog */
.ui-datepicker-multi .ui-datepicker-group table td {
    padding: 1px;
}
.ui-datepicker-multi div.ui-datepicker-header {
    height: 33px;
}
.ui-datepicker-calendar th {
   background-color: white;
   color: var(--textcolor);
   font-weight: normal;
}

/* Een kader om velden in een view-editscherm */
.fcltblock {
    margin: 3px 0px 3px 0px;
    padding: 0px;
    text-align: left;
    border-radius: 4px;
    min-width: 500px; /* dev */
}
body.fclt-modal .fcltblock {
    background-color: #fffffe; /*backgroundcolor*/
    border:1px solid #eee;
}

table.fcltblocktab {
    width: 100%;
}
.advanced-header {
    padding: 0 0 0.25em 2px;
}
.advanced-header-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--textcolor);
}

/* #insLSF is specific for ins_search table after label "Taak". nth-child(2) = label text */
div#insLSF table > tbody tr td:nth-child(2) {
    width: 30%;
    min-width: 150px;
    max-width: 325px;
}
div#total_list table > tbody tr td {
    width: inherit;
}
/* (flex)-table in table uitlijning */
body:not(#listbody, #planbody) div#total_list td,       /* Factuurregels table in table uitlijning */
body:not(#listbody, #planbody) div#besItemsList td,     /* (Show) Bestelling tabel in tabel uitlijning */
body:not(#listbody, #planbody) div#bezBezoekersList td  /* (Edit) Bezoekers tabel in tabel uitlijning */
{
    width: auto;
}
/* Factuurregels btw tarief */
#sel_items select {
    width: auto;
}
#finItemsList input[id^=sum],
#total_list #totalEXC_txt,
#total_list #totalBTW_txt {
    text-align: right;
}

td.label.hashint label,
td.label.haspreview label,
div#insLSF table > tbody tr td.hashint:nth-child(2) label,
div#insLSF table > tbody tr td.haspreview:nth-child(2) label {
    line-height: 1.8em;
    display: inline-block;
    width: calc(100% - 22px);
}
td.label.hashint span.hint,
td.label.haspreview span.preview,
div#insLSF table > tbody tr td.hashint:nth-child(2) div,
div#insLSF table > tbody tr td.haspreview:nth-child(2) div {
    width: 22px;
    vertical-align: top;
}
td.label.hashint.haspreview label,
div#insLSF table > tbody tr td.hashint.haspreview:nth-child(2) label {
    width: calc(100% - 44px);
}
td.label.hashint.haspreview div,
div#insLSF table > tbody tr td.hashint.haspreview:nth-child(2) div {
    width: 44px;
}
td.label > span,
td.label div:not(.res_remark, .resartflexedit, .time-holder),
div#insLSF table > tbody tr div {
    display: inline-block;
}
td.hashint span:is(.hint, .hint_tz)::after {
    content: attr(data-title);
    position: absolute;
    opacity: 0;
    font-size: 0.8rem;
    font-weight: normal;
    z-index: 2; /* .endicon + 1 */
    pointer-events: none;
    white-space: pre-wrap;
    padding: .15rem .4rem;
    margin-left: .25em;
    border-radius: 0.25rem;
    border: 1px solid #ccc;
    box-shadow: 1.5px 1.5px 3px #ccc;
    color: var(--textcolor);
    background-color: #FFFFFF;
    transition: opacity .2s ease-in-out;    /* .2s fadeOut bij het verbergen */
}
td.hashint span:is(.hint, .hint_tz):hover::after {
    opacity: 1;
    transition: opacity 0s linear;          /* Geen fadeIn bij het tonen */
}

@media (max-width: 425px) {
    td.label {
        max-width: 150px;
    }
    td.flexlabel span {
        display: inline-block;
        max-width: 175px;
    }
}
/* specific for ins_search table after label "Taak" to keep checkboxes lined out*/
table > tbody tr.insD td:nth-child(1),
div#insLSF table > tbody tr td:nth-child(1) {
    width: 25px;
}

table[id^=searchblock] {
    table-layout: fixed;
}
table[id^=searchblock] td#usrrapinfo {
    overflow: visible;
}
#searchbody
{
    background-color: var(--activetabbackgroundcolor);
}
body#planbody.content-box,
body#mod_res_selectroom.deprecated {
    box-sizing: content-box;
}
/* Niet bij lijsten en het planbord */
section#searchbody td.label,
body:not(#listbody, #planbody) td.label {
    max-width: 250px;
    width: 30%;
}
section#searchbody td.label + td,
body:not(#listbody, #planbody) td.label:not(.flexsearch) + td:not(.iconpicker, .filepicker, [data-type]) {
    width: 70%;
    padding-top: 2px;
    padding-bottom: 2px;
}

@media (min-width: 0px) /* Vanaf bootstrap xs (geen Facilitor breakpoint) */
{
    .col-lg-6.col-xxl-4 .d-xs-none {
        display: none;
    }
    .col-lg-6.col-xxl-4 .d-xs-initial {
        display: initial;
    }
}
@media (min-width: 576px) /* Vanaf bootstrap sm (geen Facilitor breakpoint) */
{
    .col-lg-6.col-xxl-4 .d-sm-none {
        display: none;
    }
    .col-lg-6.col-xxl-4 .d-sm-initial {
        display: initial;
    }
}
@media (min-width: 768px) /* Vanaf bootstrap md (geen Facilitor breakpoint) */
{
    .col-lg-6.col-xxl-4 .d-md-none {
        display: none;
    }
    .col-lg-6.col-xxl-4 .d-md-initial {
        display: initial;
    }
}
@media (min-width: 992px) /* Vanaf bootstrap 2-koloms breakpoint (lg) */
{
    /* Correctie voor brede blokken (todo exact berekenen?) */
    body:not(#listbody, #planbody, .fclt-modal) .col-12:not([class*=col-lg]) td.label {
        width: 14.313%;
    }
    body:not(#listbody, #planbody, .fclt-modal) .col-12:not([class*=col-lg]) td.label + td:not(.iconpicker, .filepicker, [data-type]) {
        width: 85.687%;
    }
    .col-lg-6.col-xxl-4 .d-lg-none {
        display: none;
    }
    .col-lg-6.col-xxl-4 .d-lg-initial {
        display: initial;
    }
}
@media (min-width: 1200px) /* Vanaf bootstrap xl (geen Facilitor breakpoint) */
{
    .col-lg-6.col-xxl-4 .d-xl-none {
        display: none;
    }
    .col-lg-6.col-xxl-4 .d-xl-initial {
        display: initial;
    }
}
@media (min-width: 1488px) /* Vanaf bootstrap 3-koloms breakpoint (xxl) */
{
    /* Correctie voor brede blokken (todo exact berekenen?) */
    body:not(#listbody, #planbody, .fclt-modal) .col-12:not([class*=col-lg]) td.label {
        width: 9.218%;
    }
    body:not(#listbody, #planbody, .fclt-modal) .col-12:not([class*=col-lg]) td.label + td:not(.iconpicker, .filepicker, [data-type]) {
        width: 90.782%;
    }
    .col-lg-6.col-xxl-4 .d-xxl-none {
        display: none;
    }
    .col-lg-6.col-xxl-4 .d-xxl-initial {
        display: initial;
    }
}
@media (min-width: 1792px) /* Vanaf facilitor 3xl (custom -niet bootstrap- breakpoint) */
{
    .col-lg-6.col-xxl-4 .d-3xl-none {
        display: none;
    }
    .col-lg-6.col-xxl-4 .d-3xl-initial {
        display: initial;
    }
}

/* dialect table exceptions */
div#lcldialectList td.label label {
    white-space: normal;
}
div#lcldialectList td input {
    width: 400px;
}
div#lcldialectList td span,
/* styling table exception */
div#template_css td {
    width: inherit!important;
    span.input-icon-wrapper {
        width: 100%;
    }
}

td:not([colspan]).label label > span {
    max-width: 150px;
    width: 150px;
}
/* selectors below become higher with display: inline-block
    vertical-align: top prevents that according to https://stackoverflow.com/questions/27536428/inline-block-element-height-issue */
td.label,
td.label label {
    vertical-align: top;
    height: 22px;
}

td.label:not(.hasinlineflex),
td.label label,
td.label label > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
td.label label,
td.label label > span:not(.stdmjb, .orglcl) {
    max-width: 100%;
    display: inline-block;
}
td.label.flexlabel,
td.label.flexlabel label,
td.label.flexlabel label > span,
td.label.textarea,
td.label.textarea label,
td.label.textarea label > span {
    display: inline;
    white-space: normal;
    overflow: visible;
}
td.label.textarea.hashint > span {
    float: right;
    padding-right: 2px;
}
td.label.flexlabel[colspan],
td.label.textarea[colspan] {    /* Anders volgt de layout van de hele tabel-row een verkeerde column indeling */
    display: table-cell;        /* = initial */
}
/* Plaatje in de Artikelselectie moet wel groot kunnen worden */
#besItemSel td.label label,
#besItemSel td.label label > span {
    display: inline;
}
td.checkbox-td {
    width: 30px;
}

td.label div span:nth-child(1):not(.input-icon-wrapper) {
    max-width: 180px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
}
h2.page-header {
    --fclt-pageheader-padding-y: 14px;
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding: var(--fclt-pageheader-padding-y) 0;
    text-align: center;
    background-color: var(--activetabbackgroundcolor);
    color: var(--activetabcolor);
    &.animate-typing {
        justify-content: center;
    }
    & > .page-header-content {
        overflow: hidden;
        padding: var(--fclt-pageheader-padding-y) 0;
        margin: calc(-1 * var(--fclt-pageheader-padding-y)) 0;
        & > .page-header-title {
            overflow-x: clip;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 0 0.125em;
        }
    }
}

.admitscreen {
    font-family: var(--fontfamily_alt);
    font-size: 2rem;
    text-align: center;
}
.admitscreen h3 {
    text-align: center;
}
.admitscreen.ok {
    background-color: var(--aareon-pine-green);
    color: #fff;
}
.admitscreen.nok {
    background-color: #CC5252;
    color: #fff;
}
.admitscreen .interval {
    margin-top: 2em;
    text-transform: lowercase;
    font-size: .8em;
    line-height: 1.3em;
    color: #111;
}
.admitscreen .admitfooter {
    font-size: .5em;
    position: absolute;
    bottom: 10px;
    left: 10px;
}

/* En BINNEN het frame de blokken op de pagina's */
.mainpage:not(#mainbody) {
    margin: 0 1%;
}
.mainpage {
    background-color: var(--activetabbackgroundcolor);
    /* Deprecated; */
    background-image: var(--portalbgimage);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#frm_widget_page_frame,
#frametabs > .container-fluid {
    /* Deprecated; */
    background-image: var(--framebgimage);
    background-size: cover;
    background-repeat: no-repeat;
}
.fclt-container-md {
    max-width: 720px;
}
.notesmode {
    &,
    & .card {
        background-color: transparent;
    }
}
.notesmode .fcltblock,
.notesmode .fcltblock >div {
    background-color: #f0fffd; /* dev */
}

/*************** dit is bedoeld voor de subtabs, zo weinig mogelijk, verderop staat hetzelfde voor de grote frametabs *************/

.subtabs .ui-state-default {
    color: var(--textcolor);
    background-color: white;
}
.subtabs .ui-state-hover {
    background-color: white;
}
.subtabs.ui-tabs-nav,
.subtabs li.ui-tab {
    border: 0;
    padding: 0;
    text-transform: uppercase;
}
.subtabs li.ui-tab {
    border-left: 1px solid rgba(255,255,255,0.25);
    border-right: 1px solid rgba(0,0,0,0.25);
    border-radius: 0;
}

/* Alternatieve rechter-border (2/3 hoog ipv 100%) */
.subtabs li.ui-tab:not(:last-of-type) {
    position: relative;
    border-right: 1px solid transparent;
    margin-right: 0;
}
.subtabs li:not(:last-of-type)::after {
    content: "";
    position: absolute;
    height: calc(200% / 3);
    width: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    top: 50%;
    transform: translateY(-50%);
}
.subtabs li.ui-tab a {
    display: inline-flex;
    align-items: center;
    color: var(--textcolor);
}
.subtab-icon {
    margin-right: 4px;
}
/* Dit is de subtab-badge met het aantal regels */
span.summary-badge,
span.subtab-badge {
    font-family: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans",
                 "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    padding: 0.2em .4em;
    border: 0;
    box-shadow: 0 0 0 1px var(--textcolor);
    background-color: var(--textcolor);
    color: #fffffe; /*backgroundcolor*/
    white-space: nowrap;
    border-radius: .25rem;
    font-size: 0.8em;
    margin-left: 6px;
    line-height: 1.1em;
    opacity: 0.45;
}
[data-more='true'] > span.subtab-badge::after {
    content: '+';
}
.summary-badge {
    margin-right: 6px;
}
.subtab-badge-icon {
    margin-left: 2px;
}
.subtab-badge-missing {
    color: var(--fclt-color-red);
}
.subtabs li.ui-tab:not(.ui-state-active):hover a {
    background-color: var(--menukophoverbackgroundcolor);
    color: var(--menukophovercolor);
}
.subtabs li.ui-tab:not(.ui-state-active):hover span.subtab-badge {
    box-shadow: 0 0 0 1px var(--buttonhoverbackgroundcolor);
}
.subtabs li.ui-state-active a {
    font-weight: bold;
}

#insPlanList {
    height:300px;
}
.septop {
    border-top: 1px solid #ddd;
}

td.time {
    line-height: 1.2em!important;
}

.fcltblock .inside {
    padding: 1px 1px 2px 1px;
    background-color: #fffffe; /*backgroundcolor*/
    border-top: 0;
    border-bottom: 0;
}

.leftcontainer .fcltblock {
margin-bottom: 5px;
}

span.autoreport {
    padding-left: 8px;
    margin-top: 1px;
}

span.autoreport,
span.facautoreport {
    cursor: pointer;
    color: var(--textcolor);
    vertical-align: inherit;
}

span.far-alignment {
    margin-left: -3px;
}

table.preview {
    width: 100%;
}
table.preview tr td {
    padding: 1px;
    max-height: 170px;
    height: 100%;
    position: relative;
    text-align: center;
    vertical-align: bottom;
    cursor: pointer;
}

table.preview tr td {
    word-break: break-all;
}
table.preview img.preview {
    max-width: 100%;
    max-height: 100%;
}
table.preview img.preview:hover,
section.fullscreen img.preview {
    box-shadow: var(--buttonbackgroundcolor) 1px 1px 9px 1px;
}
/* uren registratie iconen. Moeten misschien een keer een autokleur krijgen */
.notperfect .fa-comment {
    padding-left: 8px;
    cursor: pointer;
    margin-top: 1px;
    color: #2b5797;
}

.preview i {
    color: var(--buttonbackgroundcolor); /* deze is niet zeker goed */
}
.preview:hover i {
    color: var(--buttonhoverbackgroundcolor);
}
span.flexsize,
span.fclt-tooltip {
    font-family: var(--fontfamily_alt);
    color: #808080;
    font-size: 0.8em;
    padding-left: 2px;
}

.besflex {
    padding: 1px 0 2px 0;
}
tr.bessrtgroepname td {
    font-weight: bold;
}

.info {
    padding: 4px 4px 12px 4px;
    font-size: 1.2em;
    color: #111111;
}

#selfInput.fcltblock td {
    padding: 2px;
}

.inside {
    margin:0;
    padding: 0;
}
/* For internal styling within textarea's */
.fclthtml {
    overflow-wrap: anywhere;
    line-height: 1.5em;
}
.fclthtml table, .fclthtml td, .fclthtml th {
    border: solid 1px #888;
}
.fclthtml th {
    background-color: #999;
}
.fclthtml td {
    opacity: 0.8;
}

.text-styles {
    position: relative;
    display: flex;
    line-height: 1.8em;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.03),
        rgba(0, 0, 0, 0.03));
    border-top-left-radius: 0.3em;
    border-left: 2px solid var(--fclt-border-color);
    border-top: 1px solid var(--fclt-border-color);
}
.text-styles.closed {
    border: 0;
    z-index: 1;
}
.text-style-button {
    border-radius: 0.3em;
    padding: 0.3em 0.6em;
}
.text-style-toggle {
    position: absolute;
    line-height: 0;
    top: 0.15em;
    right: 0.2em;
    padding: 0.15em;
    border-radius: 50%;
    color: var(--textcolor);
    opacity: 0.75;
}
.text-style-toggle > i {
    aspect-ratio: 1;
}
.text-style-button:hover {
    background-color: rgba(255, 255, 255, 0.25);
}
.text-styles.closed       .text-style-button,
.text-styles:not(.closed) .text-style-toggle {
    display: none;
}

/* For first use intropage*/
div.wbackground {
    background-image: url("../Pictures/welcomebg.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
    height: 100vh;
}
.transbox {
    position: absolute;
    width: 740px;
    color: #000;
    text-shadow: 1px 1px white;
    padding: 45px 60px 10px 60px;
    border-radius: 12px;
    box-shadow: 4px 4px 20px #111;
    margin: 30px 0px 30px 50px;
    /* background-color: rgba(247,243,240,0.97); */
    background-image: url("../Pictures/framebodybg.jpg");
}

.wtitle {
    font-weight: bold;
    font-size: 1.8em;
}
.wintro, .wlinebye {
    font-size: 1.4em;
    padding: 2em 0 1em 0;
}
.wline1, .wline2, .wline3, .wline4, .wline5 {
    font-size: 1.4em;
    line-height: 1.6em;
}


/* For my personalized homepage*/
#mywelcome , #mymessages, #myactions{
    background-color: var(--activetabbackgroundcolor);
    color: var(--textcolor);
    height: 10%;
    margin: 5px 3px 0 3px;
    padding: 0;
}
#mywelcomeframe {
    padding: 0;
}
#mywelcometitle{
    background-color: var(--welcomebackgroundcolor);
    color: var(--welcomecolor);
    font-size: 1.8em;
    line-height: 1.8em;
    text-align: center;
}
.fclt-news-body {
    &:not(.empty) {
        --fclt-news-card-spacing: 1rem;
        --fclt-news-card-height: 500px;
        margin: calc(2 * var(--fclt-news-card-spacing)) 0;
    }

    .fclt-news-counter::before {
        content: attr(data-counter);
    }

    .fclt-news-indicators {
        bottom: calc(-2 * var(--fclt-news-card-spacing));
        background-color: var(--fclt-body-color-25);
        opacity: .5;
        border-radius: 1em;
    }

    .card.fclt-news-card {
        display: flex;
        overflow: hidden;
        gap: var(--fclt-news-card-spacing);
        justify-content: space-between;
        margin: var(--fclt-news-card-spacing);
        padding: var(--fclt-news-card-spacing);
        width: calc(100% - 2* var(--fclt-news-card-spacing));
        border-radius: var(--fclt-border-radius-3xl);
        & > :first-child {
            &:is(img) {
                height: calc(var(--fclt-news-card-height) / 2);
                object-fit: cover;
                object-position: center;
                margin: calc(-1* var(--fclt-news-card-spacing));
                margin-bottom: 0;
            }
            &:is(i) {
                font-size: calc(var(--fclt-news-card-height) / 4);
                display: flex;
                justify-content: center;
                align-items: center;
                height: calc(var(--fclt-news-card-height) / 2);
                width: 100%;
                margin: 0;
            }
        }

        .fclt-news-body:not(.full) & {
            height: var(--fclt-news-card-height);
            .fclt-news-content {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 6;
                line-clamp: 6;
                -webkit-box-orient: vertical;
            }
        }

        .fclt-news-actions {
            font-size: var(--fclt-font-size-l);
            .fclt-actions > * + * {
                margin-left: calc(var(--fclt-news-card-spacing) / 2);
            }
        }
    }

    .carousel-control-prev,
    .carousel-control-next {
        background-color: var(--fclt-body-color-25);
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 1.75rem;
        top: calc(var(--fclt-news-card-height) / 2 + var(--fclt-news-card-spacing));
        transform: translateY(-50%);
    }
    .carousel-control-prev {
        left: -4rem;
    }
    .carousel-control-next {
        right: -4rem;
    }
}
.fclt-news-content {
    line-height: calc(1rem + 1px);
}
#mynewscontainer {
    display: inline;
}
#mynewsframe, #myactionsframe {
    padding: 0;
}
#myactionsinfo, #mywelcomeinfo, #mymessagesinfo {
    padding: 4px;
}
#myactionscontainer {
    display: inline;
}
.widget-title,
#mywelcomeinfo {
    background-color: var(--tableheaderbackgroundcolor);
    color: var(--tableheadercolor);
    border-radius: 4px 4px 0 0;
    margin-top: 1px;
    font-size: 1.2em;
}
#mywelcomeinfo.widget-title {
    font-size: 1.44em;
}
.ui-tabs-nav {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#facforum div {background-color: #FFFF80; background-image: none; padding:1em 2.2em;}
#facforum h5 {background-color: #FFFF80; background-image: none; font-weight: normal; font-size:100%;}
#facforum h5 a {color:#000;}
#facforum h5 .ui-icon {background-image: url(../Localscripts/theme/images/ui-icons_444444_256x240.png);}
#facforum div.hideNews { float: right; margin-right:30px; position: relative; }

.note-reply-container {
    > * {
        margin-top: 0.5em!important;
    }
}
.note-reply-submit > i {
    margin-right: 0.25em;
}
.msg-add-button {
    --fclt-msg-add-button-size: 2.5rem;
    border-radius: calc(var(--fclt-msg-add-button-size) / 2);
    display: flex;
    width: var(--fclt-msg-add-button-size);
    height: var(--fclt-msg-add-button-size);
    justify-content: center;
    align-items: center;
    background-color: var(--buttonbackgroundcolor);
    color: var(--buttoncolor);
    &:hover {
        background-color: var(--buttonhoverbackgroundcolor);
        color: var(--buttonhovercolor);
    }
}

.fclt-icon-counter {
    & > i {
        margin-right: 0.25em;
    }
    &::after {
        content: attr(data-count);
        line-height: 1rem;
    }
}
.page-header-title > .fclt-icon-counter {
    margin: -0.5em 0 -0.5em 0.5em;
}

#usermess td {
    line-height:1.7em;
}
.usermsgdate {
    white-space: nowrap;
}
.usermessage a {
    text-decoration: none;
    cursor:pointer;
}
.usermessage a:hover {
    text-decoration: underline;
    color: var(--linkhovercolor);
}

.newstextFreshBold td {
    font-weight: bold;
}

.flikehead, .flikefoot, .flikeopts, #flike_op {
   font-size: 1.1em;
   padding: 2px;
}
.flikefoot {
    margin-top: 10px;
}

ul.flikeopts {
    li {
        line-height: 2em;
        list-style-type: none;
        label {
            cursor: pointer;
        }
    }
    .rating {
        margin-right: .5em;
    }
}
#satisfaction {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50px;
    left: 100px;
}

.faclisticon {
    height: 16px;
}

/*ZOEKSCHERMEN*/
#searchbody *:not(.buttoncontainer) > #buttons {
    text-align: center;
    margin-top: 4px;
    margin-bottom: 12px;
}

.fclt-modal .simple-block-wrapper > #buttons,
.fclt-modal .simple-block-wrapper > #buttons1,
.fclt-modal .simple-block-wrapper > #buttons2,
.simple-block-wrapper.centered > #buttons,
.fclt-modal .block-wrapper > #buttons {
    margin: 4px 4px 1em 4px;
    text-align: center;
}

#filters {
    padding: 0 5px 0 5px;
}

/* zoekvelden die initieel en altijd zichtbaar zijn */
.primsearch {
  padding: 0;
  margin: 0;
}
/* zoekvelden die initieel niet en aan te zetten zijn */
.secsearch {
  display: none;
  margin: 0;
}
table.fill {
  width: 100%;
  height: 100%;
}

#accepttable {
    width: 100%;
}

.busyloading {
    color: #444;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 100%); /* Horizontaal in het midden, verticaal 1x spinner-hoogte naar onderen */
    z-index: 999;
}
.busyloading ~ #collapseblock td.emptyset {
    padding-bottom: 100px;
}
.busyoverlay {
    position: fixed;
    z-index: 100; /* modal -1 */
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: #aaa;
    opacity: 0.75;
}

.anointotext1 {
    font-weight: bold;
    color: var(--fclt-color-red);
}

/*
 *  THE BUTTONS
 */
/* het blok waarin de list met buttons  */
.notebuttons {
    float:left;
}
#buttons {
    font-size: .825rem; /* = 16px * 0.75em * 1.1em */
}
#buttons ul {
    padding: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 0;
    white-space: nowrap;
}

.alertOk, .alertCancel, .advOk, .advReset,
#besfavbtnall, .resultprintno, .resultprintcancel {
    background-image: none!important;
    outline-style:none;
    box-shadow:none;
    border-color:transparent;
}

/* een button */
#buttons ul li,
#buttons ul li a {
    font-style: normal;
    list-style-type: none;
    display: inline-block;
}

#buttons ul li,
#buttons ul li a,
.mv,
.mover,
.uploadbutton,
input[type=button],
input[type=text].button,
input.button,
span.button,
.alertCancel, .alertOk, .alertOk:active,
.advOk, .advReset, .resultprintno, .resultprintcancel,
#linkOk, #linkCancel, #besfavbtnall
{
    cursor: pointer;
    padding: 3px 14px 3px 10px;
    color: var(--buttoncolor);
    background-color: var(--buttonbackgroundcolor);
    border: 1px solid transparent; /* dan blijft de grootte goed */
    text-align: center;
    border-radius: var(--fclt-border-radius-input);
    font-size: 1.1em;
    transition:
        color var(--fclt-animation-duration-s) ease,
        background-color var(--fclt-animation-duration-s) ease,
        border-bottom-color, var(--fclt-animation-duration-s) ease,
        background var(--fclt-animation-duration-s) ease;
    text-decoration: none;
    text-transform: lowercase;
    will-change: background-color, color, border-bottom-color;
    background-position: center !important;
    font-weight: 600;
    &:focus,
    &:hover {
        font-weight: 600;
    }
}

/* Verticale knoppen in een dialog net iets anders (vaak veel boven elkaar) */
#buttons.vertical.dialog ul li {
    border-radius: calc(.25rem - 1px);
    border-bottom: 1px solid #FFFFFE; /* backgroundcolor */
}
#buttons.vertical.dialog ul li:hover .dialogtext {
    text-decoration: none;
}
#buttons.vertical.dialog ul li:active {
    transform: translateY(1px);
}

#buttons.vertical ul li,
#sel_room {
    text-transform: none;
}

span:is(.bijlage, .bijlage1, .endicon, .starticon) {
    color: var(--buttoncolor);
}

/* volgens mij willen we de tekst op een rij verticale buttons niet centreren */
#buttons.vertical ul li {
    text-align: left;
    padding: calc(1em / 3) 0.5em;
}
#buttons.vertical:not(.condensed) ul li {
    padding: 0.5em;
}

.alertOk:active {
    font-size: 12px;
}

#buttons ul li.emphasishigh, /* Nodig voor css specificity */
.emphasishigh,
.alertOk, .advOk, .resultprintno,
#linkOk, #besfavbtnall
{
    color: var(--buttoncolor);
    background-color: var(--buttonbackgroundcolor);
    border: 1px solid transparent;
}
#buttons ul li.emphasismedium, /* Nodig voor css specificity */
.emphasismedium,
.advReset
{
    color: var(--buttoncolormediumlow);
    background-color: var(--buttonbackgroundcolormediumlow);
    border: 1px solid transparent;
}

#buttons ul li.emphasislow, /* Nodig voor css specificity */
.emphasislow,
.emphasislow a, /* ook ja? */
.resultprintcancel,
.alertCancel,
#linkCancel
{
    color: var(--buttoncolormediumlow);
    background-color: var(--buttonbackgroundcolormediumlow);
    border: 1px solid transparent;
}

#buttons.hambdropdown > ul > li {
    text-align: left;
    margin-top: 1px;
    border-radius: var(--fclt-border-radius-input);
}

.button-icon-wrapper:hover > [type=button]:not([disabled]),
input[type=button]:hover:not([disabled]),
input[type=text].button:hover:not([disabled]),
.uploadbutton:hover,
span.button:hover {
    color: var(--buttonhovercolor);
    background-color: var(--buttonhoverbackgroundcolor);
}
.button-icon-wrapper:hover > :is(.starticon,
                                 [type=button]:not([disabled]) + :is(.bijlage, .bijlage1, .endicon)) {
    color: var(--buttonhovercolor);
}
td:is([data-type="1b"]) > .button-icon-wrapper.url-picker:hover > :is(.starticon) {
    color: var(--buttoncolor);
}

input[type=button][disabled] {
    cursor: default;
}

.blockbuttoncontainer #buttons ul li {
    transition: background-color 0.2s;
    display: inline;
    vertical-align: baseline;
}
.blockbuttoncontainer #buttons ul li > * {
    transition: color 0.2s;
}

/* is ook maar een button */
:is(.fclt-modal, .subframe) .blockbuttoncontainer #buttons ul li:is(*, :hover) {
    box-shadow: 1.5px 1.5px 3px #ccc;
    font-size: 0.9em;
    padding: 0.3em 1em 0.5em;
    border-radius: var(--fclt-border-radius-lg);
}
:is(.fclt-modal, .subframe) .blockbuttoncontainer #buttons ul li ~ li {
    margin-left: 0.3em;
}

#buttons ul li.byHamburger,
#buttons ul li.byHamburger a,
#buttons ul li.byDropdown,
#buttons ul li.byDropdown a {
    border: var(--fclt-border);
    border-radius: var(--fclt-border-radius-input);
    line-height: 1.5em;
    padding: 3px 6px;
    height: calc(1.8em + 6px); /* body(default) line-height + verticale padding (zie hierboven) */
}

#buttons ul li:hover,
.blockbuttoncontainer #buttons ul li:hover,
body.showmode #buttons ul li:hover {
    color: var(--buttonhovercolor);
    background-color: var(--buttonhoverbackgroundcolor);
}

/* verticale (dialog) buttons */
#buttons ul li.vertical {
    display: block;
}
#buttons.vertical {
    min-width: 300px;
}
#buttons ul li i + span {
    margin-left: .25em;
}
#buttons.vertical ul li:hover {
    background-color: var(--buttonhoverbackgroundcolor);
    color: var(--buttonhovercolor);
}

div#buttons.dialog {
   background-color: transparent;
   margin: 3px;
}

div#buttons.dialog a,
div#buttons.dialog img {
   margin-right: 20px;
}

.dialogtext {
    display: inline;
    font-weight: normal;
}
i + .dialogtext {
    margin-left: .5em;
}

#buttons ul li.dialog,
#buttons ul li.dialog a {
    text-align: left;
}

/* de submitbutton wil je onzichtbaar hebben, maar niet hidden!*/
#buttons ul li.hiddenbutton,
#buttons ul li.hiddenbutton input[type=submit] {
    position: absolute;
    display: flex;
    height: 0;
    width: 0;
    background-color: transparent;
    opacity: 0;
    border: 0;
    cursor: default;
    padding: 0;
    margin: 0;
}

/* een buttonhover */
#buttons ul li a:hover {
    color: var(--buttonhovercolor);
    background-color: var(--buttonhoverbackgroundcolor);
    text-decoration: none;
}
#buttons ul li.emphasislow:hover,
.alertCancel:hover,
.resultprintcancel:hover,
#linkCancel:hover {
    color: var(--buttonhovercolor);
    background-color: var(--buttonhoverbackgroundcolor);
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--buttonhoverbackgroundcolor);
}

#buttons ul li,
.mv,
.mover,
.alertOk,
.advOk,
.resultprintno,
.advReset,
#linkOk,
#besfavbtnall,
.sidebar-toggler {
    &:focus {
        color: var(--buttoncolor);
        background-color: var(--buttonbackgroundcolor);
    }
    &:hover {
        color: var(--buttonhovercolor);
        text-decoration: none;
        background: var(--buttonhoverbackgroundcolor) radial-gradient(circle, transparent 1%, var(--buttonhoverbackgroundcolor) 1%) center/15000%;
    }
}

#buttons ul li.emphasishigh,
#linkOk,
#besfavbtnall,
#buttons ul li.emphasismedium {
    &:active {
        background-color: var(--buttonhovercolor);
        background-size: 100%;
    }
}

#buttons ul li.emphasislow:active {
  color: var(--buttonhovercolor);
}

/* Hierin verandert de 'wijzigen' knop in het reserveringen-planbord */
#buttons ul li.noHover:hover {  /* een button waar je niet op moet klikken ..*/
    cursor: default;
    color: var(--buttoncolor);
    background-color: var(--buttonbackgroundcolor);
    border-color: var(--buttonbackgroundcolor);
}

.btn_disabled {
    opacity: 0.6;
}

.mbutton
{
    width: 20px;
    height: 20px;
    color: #7B7B7B;
    border: 0;
}
/* een inline button */
.ilbutton {
    cursor: pointer;
}
.ilbutton:hover {
    opacity: 0.7;
}

li.dialog span.default,
#buttons .default
{
    font-weight: 900;
    &:focus,
    &:hover {
        font-weight: 900;
    }
}

img.photo {
    border: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
    height: 100px;
    width: 100px;
}

img.kenmerk {
    border: 1px solid #ccc;
    max-height: 100px;
    max-width: 100px;
    display: block;
    cursor: pointer;
}

img.kenmerk:is(:not([src]), [src=""]) {
    display: none;
}

img.profile {
    border: 1px solid #fff;
    max-height: 200px;
    border-radius: 2px;
}

#mrkFotoList img.photo {
    height: auto;
    width: 220px;
}

img.details, span.details, tr.details, i.details, div.ref, label.details {
    border: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
span.details:hover, label.details:hover {
    text-decoration: underline;
}
span.italic {
    font-style: italic;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dragdrop {
    cursor: auto;
    margin-top: 8px;
    text-align: center;
}

span.lendobj {
    padding: 0px;
    margin: 0px;
    margin-left: 5px;
    cursor: auto;
    height: 12px;
}

/* moreinfo als link ipv icon */
input.details,
span.details,
a.details,
label.cadselect,
.facmgtmultilang {
    cursor: pointer;
    color: var(--linkcolor);
}

input.details:hover,
span.details:hover,
label.cadselect:hover,
.facmgtmultilang:hover
{
    text-decoration: underline;
    color: var(--linkhovercolor);
}
.bedrijfdienstloc-wrapper {
    display: flex;
    justify-content: space-between;
}
.bedrijfdienstloc-select {
    flex-basis: calc(49% - 100px);
}
.bedrijfdienstloc-button {
    flex-basis: 200px;
    margin: auto;
}

.cnt-scope-buttons {
    text-align: center;
}
.mover {
    font-size: 20px;
}
.uploadbutton {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
input[type=file] {
    display: none;
}
.fileopen {
    position: relative;
    top: 1px;
    left: -17px;
    width: 16px;
    height: 16px;
    font-size: 1.2em;
}
.button-icon-wrapper,
.input-icon-wrapper {
    position: relative;
    white-space: nowrap;
}
:is(.button-icon-wrapper, .input-icon-wrapper) input:is([type=text], [type=button]) {
    padding-right: 2em; /* Voor het icoontje */
}
:is(.button-icon-wrapper, .input-icon-wrapper) > .starticon + input:is([type=text], [type=button]) {
    padding-left: 2em;
    padding-right: 10px; /* Button default */
}
:is(.button-icon-wrapper, .input-icon-wrapper) > .symbol-urlpicker + input:is([type=text], [type=button]) {
    padding-left: 2em;
    padding-right: 10px; /* Button default */
}

.symbol-delete {
    font-size: 1.2em;
}

/* Symbool knoppen */
td:is(.iconpicker, .filepicker, [data-type]) {
    display: grid;
    column-gap: 1px;
}
td:is(.iconpicker, .filepicker, [data-type]) .button-icon-wrapper {
    overflow: hidden;
}
td:is(.iconpicker, .filepicker, [data-type]) .button-icon-wrapper input[type=button] {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* type = 0 laat 2 gelijke knoppen zien */
[data-type="0"] {
    grid-template-columns: 1fr 1fr;
}

/* Anders 1 knop met 1 'delete'-icoontje */
:is([data-type="1"], [data-type="1a"], [data-type="1b"], [data-type="2"], .iconpicker, .filepicker) {
    grid-template-columns: 10fr .01fr;
}

:is([data-type="1"], [data-type="1a"], [data-type="1b"]) > .file-picker,
[data-type="1a"] > .url-picker > .value-urlpicker,
[data-type="1b"] > .url-picker > .symbol-urlpicker,
[data-type="2"] > .fa-picker,
[data-type="2"] > .url-picker,
:is([data-type="0"], .iconpicker, .filepicker) > [type=hidden][value=""] ~ .symbol-delete {
    display: none;
}

.fa-icon-picker {
    font-size: 1.5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
}

.fa-icon-picker > i {
    --fa-icon-picker-padding: 0.4em;
    --fa-icon-picker-line-height: 1.25em;
    --fa-icon-picker-border-width: 1px;
    --fa-icon-picker-height:
        calc(
            2 * var(--fa-icon-picker-padding) +
            2 * var(--fa-icon-picker-border-width) +
            var(--fa-icon-picker-line-height)
        );
    --fa-icon-picker-width: var(--fa-icon-picker-height);

    background-color: #FFFFFF;
    height: var(--fa-icon-picker-height);
    width: var(--fa-icon-picker-width);
    line-height: var(--fa-icon-picker-line-height);
    padding: var(--fa-icon-picker-padding);
    border: var(--fa-icon-picker-border-width) solid rgba(0, 0, 0, .25);
    border-radius: var(--fclt-border-radius-input);
    cursor: pointer;
    transition: transform .05s;
    transform: translateZ(0);       /* Deze laatste 2 verbeteren de performance enorm, aldus; */
    backface-visibility: hidden;    /* https://stackoverflow.com/questions/12969228/chrome-slow-scrolling-with-fixed-position-elements */
}

.fa-icon-picker > i:hover {
    z-index: 1;
    transform: scale(1.75);
    box-shadow: #FFFFFF 0 0 0 1px;
}

.bijlage, .bijlage1, .materiaal {
    background-repeat: no-repeat;
    background-position: 6px;
    text-align: left;
}

/* Als de handtekening er staat, onderdruk dan de 'toevoegen' knop */
img.kenmerk[src]:not([src=""]) + .flex-bijlage.button-icon-wrapper {
    display: none;
}

.button-icon-wrapper > span:is(.bijlage, .bijlage1, .endicon, .starticon) {
    position: absolute;
    font-size: 1.2em;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5em;
    transition: color 0.2s;
}
span.starticon {
    left: 0.5em;
    right: initial;
}

span:is(.starticon, .endicon) {
    pointer-events: none;
}

.card-header-content {
    position: relative;
}
.card-header-content > .btn-group,
.card-header-content > .blockbuttoncontainer
{
    position: absolute;
    font-size: 0.85em; /* todo, temp button fix */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.card-header-content > .filter {
    position: absolute;
    float: right;
    font-size: 1em;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.card-header-content > .filter.fa-search::before {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
}
.card-header-content > .filter > #autofilter,
.card-header-content > .filter > #autofilterExist {
    padding-right: 1.5em;
}

/* deze lijkt generiek maar valt in #mldHistory */
.btn-group > button
{
    background-color:   var(--buttonbackgroundcolormediumlow);
    transition:         background-color 0.2s, color 0.2s;
    color:              var(--buttoncolormediumlow);
    border:             0;
    height:             23px;
    width:              50px;
    cursor:             pointer;
    float:              left;
}

.btn-group > button:not(:last-child) {
    border-right: 1px solid #0FD3BB;
}

.btn-group > button:first-child
{
    border-top-left-radius:    2px;
    border-bottom-left-radius: 2px;
}
.btn-group > button:last-child
{
    border-top-right-radius:    2px;
    border-bottom-right-radius: 2px;
}

.btn-group > button:not(.selected) {
    opacity: 0.5;
}

.btn-group > button:hover {
    background-color: var(--buttonhoverbackgroundcolor);
    color: var(--buttonhovercolor);
    opacity: 1;
}

.span_treatable {
    position: absolute;
    top: .5px;
    right: 0;
    padding: 0.5rem 0;
    height: 100%;
    font-size: 0.7em;
    text-align: right;
    line-height: normal;
    display: flex;
    gap: 0.5em;
    justify-content: center;
    align-items: center;
    input.fld {
        width: 11em!important;
        padding: .2em;
    }
}

.mldProgress {
    position: relative;
    height: 1.8em;
    width: 70px;
    background-color: var(--aareon-color-8);
    color: var(--aareon-color-1);
    .mldBar {
        height: 100%;
        background-color: var(--aareon-color-7);
        text-align: center;
        float: left;
        &::after {
            content: attr(data-perc) '%';
            position: absolute;
            inset: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.mldProgress.alt1 {
    background-color: var(--aareon-color-6);
    color: var(--aareon-color-1);
    .mldBar {
        background-color: var(--aareon-color-3);
    }
}

.mldClosed,
.mldToBeClosed {
    text-align: center;
    > i {
        padding: .4em 0; /* lineheight = 1.8em, icon = 1em, dus 2x de helft van wat overblijft */
        width: 105px; /* = .fldshort */
    }
}
.mldClosed > i { /* fa-check */
    background-color: var(--aareon-color-8);
}

.card-header-content select.fld {
    width: auto;
    height: fit-content;
}

.uitvoerenden {
    padding: 4px 0 4px 25px;
    width: 140px;
    text-align: left;
}

.exceeded {
  color: var(--fclt-color-red);
  text-decoration: line-through;
}

#r_objs_button {
    background-repeat: no-repeat;
    background-position: 6px;
}

#r_objs_button:disabled,
#r_objs_button:disabled + span.endicon {
    opacity: 0.5;
}
#r_objs_button:disabled {
    font-style: italic;
    background-image: none;
}
div.r_objs.disabled { visibility: hidden; }

.fldr_objs, .fldr_objs:focus{
    background: none;
    border: 0px;
}
.frametab {
    width: 100%;
    padding: 0px!important;
}

div#result {
    width: 100%;
    & > iframe {
        display: block; /* to prevent the whitespace */
    }
}

div.mldhandlinghead {
    margin-top: 10px;
    border-bottom: 1px solid #ddd;
    opacity: 0.7;
}

.inlinedetails i {
    color: var(--textcolor);
    vertical-align: middle;
    font-size: 1.3em;
}

#flag-icon {
    float: left;
    margin-right: 2px;
}
#flag-icon + select { /* 100% - flag-icon-width - flag-icon-margin-right */
    width: calc(100% - 1.63em - 2px);
}

.fin-flag-icon {
    cursor: pointer;
}

.mldflag0,.mldflag1,.mldflag2,
.mldflag3,.mldflag4,.mldflag5,
.mldflag6,.mldflag7,.mldflag8,
.mldflag9,
.opdrflag0,.opdrflag1,.opdrflag2,
.opdrflag3,.opdrflag4,.opdrflag5,
.opdrflag6,.opdrflag7,.opdrflag8,
.opdrflag9,
.bezflag0,.bezflag1,.bezflag2,
.bezflag3,.bezflag4,.bezflag5,
.bezflag6,.bezflag7,.bezflag8,
.bezflag9,
.resflag0,.resflag1,.resflag2,
.resflag3,.resflag4,.resflag5,
.resflag6,.resflag7,.resflag8,
.resflag9,
.resfiat,
.finflag0,.finflag1,.finflag2,
.finflag3,.finflag4,.finflag5,
.finflag6,.finflag7,.finflag8,
.finflag9,
.besopdrflag0,.besopdrflag1,.besopdrflag2,
.besopdrflag3,.besopdrflag4,.besopdrflag5,
.besopdrflag6,.besopdrflag7,.besopdrflag8,
.besopdrflag9,
.insflag0,.insflag1,.insflag2,
.insflag3,.insflag4,.insflag5,
.insflag6,.insflag7,.insflag8,
.insflag9
{
    font-size: 1.3em;
}

.mldflag0, .resflag0, .opdrflag0, .bezflag0, .finflag0, .insflag0, .besopdrflag0 { color: #b0b0b0; }
.mldflag1, .resflag1, .opdrflag1, .bezflag1, .finflag1, .insflag1, .besopdrflag1 { color: #4d4d4d; }
.mldflag2, .resflag2, .opdrflag2, .bezflag2, .finflag2, .insflag2, .besopdrflag2, .resfiat2 { color: #f15854; }
.mldflag3, .resflag3, .opdrflag3, .bezflag3, .finflag3, .insflag3, .besopdrflag3 { color: #ffd600; }
.mldflag4, .resflag4, .opdrflag4, .bezflag4, .finflag4, .insflag4, .besopdrflag4 { color: #5da5da; }
.mldflag5, .resflag5, .opdrflag5, .bezflag5, .finflag5, .insflag5, .besopdrflag5, .resfiat1 { color: #60bd68; }
.mldflag6, .resflag6, .opdrflag6, .bezflag6, .finflag6, .insflag6, .besopdrflag6 { color: #673ab7; }
.mldflag7, .resflag7, .opdrflag7, .bezflag7, .finflag7, .insflag7, .besopdrflag7, .resfiat0 { color: #faa43a; }
.mldflag8, .resflag8, .opdrflag8, .bezflag8, .finflag8, .insflag8, .besopdrflag8 { color: #b276b2; }
.mldflag9, .resflag9, .opdrflag9, .bezflag9, .finflag9, .insflag9, .besopdrflag9 { color: #b2912f; }

.mlds, .ress, .opdrs, .bezs, .fins, .inss, .besopdrs {  /* small flags for search use*/
    font-size: 1em;
    vertical-align: inherit;
}
.respl {  /* small flags for planboard use*/
    font-size: 1em;
    vertical-align: top;
    margin-top: 3px;
}
/* headerstyles, usually to be overruled */
#header
{
    height: 125px;
    background-position: 0 0;
}

/*
 * OVERZICHTEN. Alle lijsten hebben class rstable
 */
#rstable,
#usermess {
   border-spacing: 0;
}

.rstable
{
    clear: both;
    border-style: solid;
    border-color: #ccc;
    border-width: 0px 1px 1px 1px;
    width: 100%;
    padding: 3px 3px 3px 3px;
    margin: 0px;
}
.rstable tr
{
    color: var(--textcolor); /* doet niets denk ik */
    vertical-align: top;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 4px;
    padding-right: 2px;
}
.rstable td {
    color: var(--textcolor);
    border-bottom: 1px solid #eee;
    padding: 4px 3px 7px 3px;
}
.rstable td.nopadding { /* Bijv. voor kolommen met een <input> */
    padding: 3px;
}

/* Under construction (not production-ready) */

.rstable :is(th > .primary-header,
             td > .primary-content):not(:only-child) {
    font-weight: 600;
}
.rstable td > :is(.primary-content,
                  .secondary-content) {
    position: relative;
    /* white-space: nowrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    max-width: calc(100vw / 8); */
    min-height: 1.35rem; /* 1.35rem = 1.35 * 16px = 21.6px  ==  1.8 * 12px */
}
.rstable td > [data-extended-content]::after {
    position: absolute;
    top: 100%;
    left: 0;
    max-width: 100%;
    opacity: 0;
    font-size: 0.8rem;
    font-weight: normal;
    z-index: 2; /* .endicon + 1 */
    pointer-events: none;
    white-space: pre-wrap;
    padding: .15rem .4rem;
    margin-left: .25em;
    border-radius: 0.25rem;
    border: 1px solid #ccc;
    box-shadow: 1.5px 1.5px 3px #ccc;
    color: var(--textcolor);
    background-color: #FFFFFF;
    transition: opacity .2s ease-in-out;    /* .2s fadeOut bij het verbergen */
}
.rstable td > [data-extended-content]:hover::after {
    content: attr(data-extended-content);
    opacity: 1;
    transition: opacity 0s linear;          /* Geen fadeIn bij het tonen */
}

/* \ Under construction */

.rstable thead th,
.rstable tfoot td
{
    color: var(--tableheadercolor);
    background-color: var(--tableheaderbackgroundcolor);
    border-top: 1px solid var(--fclt-color-grey-50);
    border-right: 1px ridge #ccc;
    border-bottom: 1px solid var(--fclt-color-grey-50);
    white-space: nowrap;
    padding: 2px 3px 2px 3px; /* want tfoot td = th */
    font-weight: normal;
    &:is(th) {
        font-weight: 600;
    }
}
.rstable :is(thead th,
             tfoot td):first-child {
    border-left: 1px ridge var(--tableheaderbackgroundcolor);
}
.rstable :is(thead th,
             tfoot td):last-child {
    border-right: 1px ridge var(--tableheaderbackgroundcolor);
}
.rstable tfoot .rsfooter
{
    padding: 0;
    color: var(--frameheadercolor);
    background-color: var(--frameheaderbackgroundcolor) !important;
}
.rstable tr.selectable
{ /* bijvoorbeeld badgenr */
    cursor: pointer;
}
:is(.rstable,
    .table-style) tbody {
    background-color: #ffffff;
}
:is(.rstable,
    .table-style) tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}
.rstable tbody tr:hover
{
    color: var(--menuitemhovercolor);
    background-color: var(--menuitemhoverbackgroundcolor);
}
.rstable.sortable thead
{
    cursor: pointer;
}
.rstable.sortable .clickaction
{
    cursor: pointer;
}
.rstable.sortable tfoot td img
{
    vertical-align: bottom;
}

/* Voor fin facturen */
.withinmargin td {
    background-color: var(--fclt-color-good-contrast);
    color: var(--fclt-color-good);
}
.outsidemargin td {
    background-color: var(--fclt-color-bad-contrast);
    color: var(--fclt-color-bad);
}
tr.rejected td {
    color: var(--fclt-color-red);
    text-decoration: line-through;
}
.finattention {
    color: var(--fclt-color-bad);
}
.finattentionlist td {
    box-shadow: inset 0 0 0 10em rgba(0, 0, 0, .1);
}
.tab_mld_materials tr.matline { background-color: #fffffe; /*backgroundcolor*/ border-bottom: #ccc; }
.tab_mld_uitvoerenden { width: 100%; }
.tab_mld_uitvoerenden tr.uitvline { background-color: #fffffe; /*backgroundcolor*/ border-bottom: #ccc; }

.nowrap { white-space: nowrap; }

/* all resulttables can be overruled by their id, like #algtable {} here */
#resvtabletiny, #resctabletiny {
    width: 55%;
}
#beztabletiny { width: 100%; }

#faqtable td { padding: 5px 10px 20px 10px; }
.faqq {
    font-size: 1.1em;
    font-weight: bold;
}
.faqa {
    font-size: 1.1em;
    font-style: normal;
}
#faqfooter {
    line-height: 25px;
    padding: 4px;
    font-size: 1.1em;
    font-weight: bold;
}
#mod_faq {
    min-width:700px;
}
#faqsubhead {
    font-size: 1.1em;
    padding-bottom: 8px;
}
#faqsolved {
    font-size: 1.2em;
    margin-top: 4px;
}
.faqantwoord {
    display:none;
    font-size: 1em;
}
.faqvraag {
    font-style: normal;
    font-size:1.1em;
}
.faqvraag:hover {
    text-decoration: underline;
}
#faqanswerlist {
    list-style-type: disclosure-closed; /* in feite een soort chevron */
}
#faqanswerlist li {
    margin-bottom: 10px;
}

.pricon {
    font-size: 1.2em;
}
#urg_prio1 {
    color: var(--fclt-color-red);
}
/* flexkenmerken voor alle modules */
#flextable {
    width: 100%;
}

#besfavtable {
    width: 100%;
}
#besfavtable tr td {
    cursor: pointer;
}
#besfavtable tr.selected td {
    background-color: #f4d767;
}
#besfavtable .disabled {
    color: #A0A0A0;
}

.besischange td, .besischange input {
    background-color: #E6FFBB;
}

.beshaschange td, .beshaschange input {
    color: #606060;
    background-color: #FFEEBB;
}

#prodtable td {
    vertical-align: middle;
    padding: 4px;
    border-bottom: 0;
}
#prodtable img {
    height: 100px;
    margin: 0px;
    border-radius:4px;
}

span.rater img {
    height: 16px!important;
}
span.rating {
    white-space: nowrap;
    color: gold;
}
input[type=radio] + span.rating:hover i { /* zoals de suggestklikker */
    color: var(--fclt-color-red);
}
.prodsrchmess {
    margin: 20px;
    font-size: 1.2em;
}
.prodicon {
    color: var(--buttonbackgroundcolor);
}
.pscapt {
    font-size: 1.3em;
    font-weight: normal;
}
.pscapt:hover {
    text-decoration: underline;
}

tr.expired2 {
    color: #990000 !important;
}
input.expired2,
span.expired2 {
    color: #CC0000 !important;
    font-weight: normal;
}
span.inactive {
    color: #CC0000 !important;
    font-weight: normal;
}
.opdrgtmld {
    color: #C05600 !important;
    font-weight: bold;
}
/* for colored rows and others*/ /* PF: ns even aanzien hoe de MS-kleuren uitpakken */
.cntrappel td,
.expired1 td,
.fclt-card.expired1 {
    background: linear-gradient(to top, var(--fclt-color-neutral-contrast), var(--fclt-color-neutral-contrast));
    color: var(--fclt-color-neutral);
}
.cntopzeg td,
.expired2 td,
.mjbexpired td,
.fclt-card.expired2 {
    background: linear-gradient(to top, var(--fclt-color-bad-contrast), var(--fclt-color-bad-contrast));
    color: var(--fclt-color-bad);
}
.expired3 td {
    background-color: #F1DCF6;
}
.pending td {
    font-weight: 700;
    color: #333;
}
.unsolved td,
.fclt-card.unsolved {
    background-color: #E4E8F8;
    font-weight: bold;
}
.unready td,
.fclt-card.unready {
    color: #030407;
    font-weight: bold;
}
.sleepy td,
.fclt-card.sleepy {
    color: #101010;
    background-color: #E0E0E0;
}
.orderready td {
    color: #101010;
    background-color: #FFCC88;
}
.past td {
    opacity: 0.7;
}
.today td {
    font-weight: bold;
}
.future td {
    opacity: 0.9;
}
.negative {
    color: #AB1455;
}
.notperfect td {
    background-color: #E4E8F8;
}
.confidential {
    text-transform: uppercase;
    opacity: 0.8;
}
tr.resR td {
    background-color: #e8e8e8;
}
tr.resC td {
    background-color: #fefefe;
}
tr.resV td {
    background-color: #fcfcfc;
}

/* fac_list*/
/* andere lists */
tr.editing td,
tr.updated td,
.fclt-card.updated {
    background-color: #FDFF9F!important;
    color: var(--textcolor);
    opacity: 1.0;
}
tr.updated10 td {
    background-color: #FFFFE1;
    color: var(--textcolor);
    opacity: 1.0;
}
tr.updated100 td {
    font-weight: 500;
    color: var(--textcolor);
    opacity: 1.0;
}

tr.lowlight td {
    opacity: 0.25;
}

tr.updated.dirty td {
    color: #808080
}
tr.vervolg { /* Deze niet in het mldbord? (Hij staat ook niet in de reguliere legenda overigens) */
    border-left: 2px solid #666;
}
tr.child,
.fclt-card.child {
    background-color: #CBCED2;
}
.cntfuture td {
    background-color: #E0E0E0;
}
.cntpast td {
    background-color: #666;
    color: #ffffff;
}
.cntinactive td {
    background-color: #76b0f7;
    color: #000000;
}

.divrstable .updated td {
    color: var(--textcolor);
}

#multires {
    color: var(--headertextcolor);
    font-size: 1.2em;
    font-weight: bold;
}

#resselector { position: relative; }
#selectedDates {
    margin-left: 3px;
    width: auto; /* uitzondering */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    outline: 1px solid var(--fclt-color-grey-25);
}
#resselector .buttoncontainer {
    float: right;
}
.resreado {
    color: #E40000;
    font-weight: bold;
}
#resafhbez span {
    color: var(--textcolor);
    font-weight: bold;
}
.facsetreado {
    color: #E40000;
    font-weight: bold;
}

.facmenuheaditem {
    font-weight: bold;
}
#rsMaxHistoryB, #rsMaxHistoryE, .resplanbordlimited {
    clear: both;
    padding: 1px 8px 1px 1px;
    margin: 0;
    line-height: 15px;
    font-size: 1em;
    text-align: center;
    background-color: #FFF; /* anders ongewenst transparent */
}

#rsMaxHistoryB a, #rsMaxHistoryE a, .resplanbordlimited a {
    text-decoration: none;
    color: var(--linkcolor);
}
#rsMaxHistoryB a:hover, #rsMaxHistoryE a:hover, .resplanbordlimited a:hover {
    text-decoration: underline;
}
div.res_remark {
    background-color: #fff;
    border-color: #ddd;
}

#rsEndText {
    color: white;
    background-color: var(--fclt-color-bad);
    font-weight: bold;
    padding: 1px 8px 2px 8px;
    margin: 0;
    text-align: center;
}

#resSummary {
    background-color: yellow;
    padding: 2px;
}

#multilabel{
    color: var(--headertextcolor);
    line-height: 2em;
    font-weight: bold;
}

#multiactiondiv {
    display: flex;
    visibility: hidden;
    float: left;
}

#phonebookteaser {
    font-size: 0.7em;
    padding-left: 4em;
}
#ph_gotoFgraph { text-decoration: underline; cursor: pointer; background-color: transparent; }

/* pas op: option's css kent alleen background-color by IE */

/* field colors for required fields */
input.required,
input[type=text].required,
input[type=password].required,
select.required:is([multiple], :not(.no-empty-option)),
textarea.required
{
    border-left: 2px solid var(--requiredbordercolor);
}
/* but maintain the button properties even if required */
input[type=button].required, input[type=text].button.required
{
    background-color: var(--buttonbackgroundcolor);
    border-left: 3px solid var(--requiredbordercolor);
}

input[type=button].mayberequired:hover,
input[type=text].button.mayberequired:hover
{
    color: var(--buttonhovercolor);
    background-color:var(--buttonhoverbackgroundcolor);
}

/* field colors for mayberequired fields */
input.mayberequired,
input[type=text].mayberequired,
input[type=password].mayberequired,
select.mayberequired:is([multiple], :not(.no-empty-option)),
textarea.mayberequired
{
    border-left: 2px dotted var(--requiredbordercolor);
}
/* but maintain the button properties even if mayberequired */
input[type=button].mayberequired, input[type=text].button.mayberequired
{
    background-color: var(--buttonbackgroundcolor);
    border-left: 3px dotted var(--requiredbordercolor);
}

input[type=button].mayberequired:hover,
input[type=text].button.mayberequired:hover
{
    color: var(--buttonhovercolor);
    background-color:var(--buttonhoverbackgroundcolor);
}

/* field colors for reqafm fields */
* html .reqafm,
*:not(option).reqafm,
*:not(option).reqafm:focus,
input.reqafm,
input[type=text].reqafm,
input[type=password].reqafm,
select.reqafm,
textarea.reqafm
{
    border-left: 2px solid blue;
}

* html .missing,
missing,
input[type=text].required.missing,
input[type=button].required.missing,
div[id^=req_].missing > input[type=text].required,
input[type=button].required.missing,
input[type=password].required.missing,
select.required.missing, option.required.missing,
textarea.required.missing,
.required.missing {
    background-color: #ff5050 !important;
    color: #fff;
}
input[type=radio].required.missing::after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-shadow: 0 0 4px 2px #ff5050
}

input[type=text].mayberequired.missing,
input[type=button].mayberequired.missing,
div[id^=req_].missing > input[type=text].mayberequired,
input[type=button].mayberequired.missing,
input[type=password].mayberequired.missing,
select.mayberequired.missing, option.mayberequired.missing,
textarea.mayberequired.missing,
.mayberequired.missing {
    background-color: #ffcc80 !important;
    color: #fff;
}

input.number.bad,
input.float.bad,
input.currency.bad,
input.flddate.bad,
input.fldtime.bad,
input.fldflexC.bad,
input.fldflexC50.bad {
    background-color: #ffb0b0 !important;
}

input.bad,
input[type=text].bad,
textarea.bad {
    background-color: #ffb0b0 !important;
}

div.bad {
    font-weight: bold;
    color: var(--fclt-color-red);
}
.subtab-missing

input[type=text].nomatch {
    background-color: #FEB0B0;
}

input[type=text].mldres {
    background-color: #EFBF2F;
}

/* datepicker calendar PF: ik twijfel */
.ui-datepicker td.calselected, .ui-datepicker td.calselected a
{
    background-color: #E37B00 !important;
}
.ui-datepicker-org247  a {
    opacity: 1 !important;
}
.ui-datepicker-vrije-dag a,
.ui-datepicker-week-end a {
    color: #FFFFFF;
    font-weight: bold;
    opacity: .35;
}
.ui-datepicker-trigger {
    float:left;
    margin: 2px 10px 0 2px;
}

/* handig om dynamisch toe te voegen? */
.res_nofit_hidden,
.hidden {
  display: none!important;
}
.visible {
  display: block;
}

.label {
    text-align: left;
    vertical-align: text-top;
    margin: 0;
    color: var(--textcolor);
}
.orglcl {
    font-style: italic;
    color: var(--textcolor);
    font-size: 0.8em;
}
.multi_cb {
    min-width: 20px;
    width: 0.1%;
}
td.label.flexsearch {
    width: 250px;
}
td.operand_td {
    width: 1px; /* = shrink to fit ? */
}
.opdrfooter {
    font-style: italic;
}
.score {
    min-width: 275px;
}

#goegel, img.blockrefresh {
    margin: 2px 12px 0 12px;
    color: #fff;
    float: right;
}

div#statusboxes {
    text-align:center;
    line-height:3em;
    float:right;
}

.bezflex {
    /* background-color: #eee; todo */
    margin: 4px;
}

#morebuttons { padding: 0 0 4px 2px; }

.bezBezoek {
    border: 2px;
    border-color: red blue;
}

.bezPoolBinnen td {
    color: var(--fclt-color-good);
    background-color: var(--fclt-color-good-contrast);
    font-weight: bold;
}

.bezPoolLoketself td {
    font-weight:bold;
}
.bezPoolLoketother td {
    color: #888;
}

.resflex {
    background-color:#eee;
    margin:4px;
}

#inssymbol {
   width: 96px;
   height: 96px;
   border: 1px solid #ccc;
}
.insphotowrap {
   position: fixed;
}
.objphoto {
    background-color: #fff;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 3px;
    max-width: 60px;
    vertical-align:top;
    box-shadow: 3px 3px 3px #eee;
}
.sensoralert, .completeblokalert {
    font-size: 1.4em;
    color: #d33121;
}
.sensorok {
    font-size: 1.4em;
    color: #45ca45;
}
.sensoruncertain {
    color: #888;
}

#insphoto {
   float: right;
   margin-right: 8px;
   width: 96px;
   border: 8px solid #fff;
   box-shadow: 3px 3px 2px #ccc;
}
#resphoto {
   width: 218px;
   border: 10px solid #fff;
   border-bottom-width: 40px;
   border-radius: 3px;
   box-shadow: 5px 5px 2px #888;
   cursor: pointer;
}
img.ins_deel {
   width: initial;
   max-width: 218px;
   max-height: 218px;
   padding: 5px;
   border: 1px solid #eee;
   box-shadow: 3px 3px 3px #888;
}
#resphoto_opstel {
   width: 218px;
   border: 10px solid #fff;
   border-bottom-width: 40px;
   border-radius: 3px;
   box-shadow: 5px 5px 2px #888;
   cursor: pointer;
}
.resroominfo {text-align: center;}
#resdescript, #opstelwarning {
    text-align: left;
    padding-top: 1em;
    font-size: 0.9em;
    line-height: 1.3em;
}
#resmakedates, #bezmakedates {
    padding-left: 3px;
    padding-top: 3px;
    font-size: 1.1em;
}
#usrrapinfo {
    font-style: italic;
    padding-left: 130px;
    padding-bottom: 16px;
}
#fldbehandel, #flddienst {
    color: #ADD8E6;
}
.finrtable
{
  width: 100%;
}

.finrtable img
{
  cursor: pointer;
}

#cntSplit {height: 264px;}
select.flddienstfilt { /* de filter van diensten in mldopdr*/
    background-color: #eee;
}

.fldnotresponsive {
    width: 218px !important;
}
table#vis_tab {
    width: 100%;
}
table#vis_tab .fldflexC {
    width: 218px !important;
}
/*
table#vis_tab .suggest,
table#vis_tab .suggestBusy,
table#vis_tab .suggestBad {
    width: 218px !important;
} vast niet zo !important .. */

.productklikker i {
  position: relative;
  z-index: 1;
  right: 20px;
  color: var(--textcolor);
  cursor: pointer;
  width: 0;
}

/* inputs en suggests: als we deze op een paar na eens allemaal wegflikkerden?
-> KR: graag, met een schone lei beginnen */
.mldid, .resid, .besid, .bezid
{
    text-transform: uppercase;
    font-size: 1.1em;
}
tr.mod_xcp .fldcontroletype, tr.mod_xcp .fldsel_srtcontrole, tr.mod_xcp .fldeenheid {
    width: 346px;
}
.suggest {
    background-position: right 4px center;
}
.fldflexD, .fldSflexD {
    width: 218px;
}

input.button {
    width: 100%;
}

#template_css th .button {
    width: 130px;
}

.fld_tiny,
.fld_dlvrnr {
    max-width: 50px;
}

/* gekoppelde meldingen zien er als readonly uit */
.child .card {
    background-color: #CBCED2;
}

/* kennisbank cards met post-it flavour */
.card-body {
    border-radius: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#mldFaq,
#mldFaqedit,
#bezFaq,
#bezFaqedit {
    background-color: #F7CE5F;
    .card-body {
        background-color: rgba(255, 255, 255, 0.95); /* 95% wit, 5% wat hierboven staat */
    }
}

/* Dit zijn readonly info-.card's */
#opdrMelding,
#finInvPartInfo,
#finRefInfo,
#bezResAfspraak {
    background-color: #EAEBED;
}

#opdrMelding    .card-body,
#finInvPartInfo .card-body,
#finRefInfo     .card-body,
#bezResAfspraak .card-body,
.child          .card-body
{
    background-color: rgba(255, 255, 255, 0.5); /* 50% wit, 50% wat hierboven staat */
}

.mldobj-container {
    background-color: #F5F5F6; /* = 50% #EAEBED */
}

.fcltframe.sidebar
{
    background: var(--notesbackgroundcolor);
    order: 6; /* Altijd rechts / als laatst */
}
.fcltframe.sidebar > iframe /* Geeft bovenstaande 40% opacity */
{
    background-color: rgba(255, 255, 255, 0.6);
}

/* In mobile popup, vooralsnog iets korter voor iPhone */
.fldtokenmail
{
    width: 200px;
}
.fldmsgsubj, .fldfac_query, .fldhaltnote
{
    width: 400px;
}
.fldstdopmerk
{
    width: 340px;
}
/* Rapport */
.fldusrrap {
    width: 460px;
    background-position: 448px !important;
}

.flddagbits, .fldweekbits, .flddayofmonth, .flddayofweek {
    width: 109px;
}

.fldobjrestrict {
    font-style: italic;
}

.fldmldhasopm {
    font-style: italic;
    font-weight: bold;
}

#kostenklant, #issuer_search {
    margin-right: 0;
}

.fldfinomsch, .flduitvExist
{
    width: 400px;
}
input.fldtime {
    cursor: pointer;
}

/* div = 100% */
span.input-icon-wrapper { display: inline-block; } /* Wrapt zo strak om de input heen (zonder inline-spacing) */
div.input-icon-wrapper  { display: block; } /* Overbodig maar ter verduidelijking */

.input-icon-wrapper > .dateklikker,
.input-icon-wrapper > .timeklikker,
.input-icon-wrapper > .default-clickable-icon {
    position: absolute;
    display: flex;
    font-size: 1.2em;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    right: 0.2em;
    color: var(--textcolor);
    cursor: pointer;
}
.input-icon-wrapper input[type=color] {
    height: 27px; /* = default line-height */
    padding-right: 2em;
}
input[type=color].unsupported + .default-clickable-icon {
    display: none;
}

.dateklikker:hover > i,
.timeklikker:hover > i {
    color: var(--buttonhoverbackgroundcolor);
    font-weight: 900;
}

.flddatetime, .fldresstatus, #existingDates, #newDates, .fldmsgprio, .fldafspnum, .flddeel, .fldcnttarief {
    width: 140px;
}

.fldregime {
    width: 210px;
}

.fldmatamount, .fldmatprice, .fldmattotal {
    text-align: right;
}

.fldfinbedrag, .fldfinamount {
    width: 75px;
    text-align:right;
}

.fldfinunit, .fldfinartcode {
    width: 75px;
}

.fldtxt, .fldresroomchange, .flddatechange, .fldcntperiod /*todo*/
{
    width: 100%;
}

.fld_catamount,
.fldmlduren,
.fldmldkosten,
.fldmldurentotal {
    width: 4em !important;
}
#fldmldurentotal.afwijk,
.fldtotalbtw.afwijk,
.fldexturl {
    color: var(--fclt-color-red);
}
.fldfacrefresh {
    font-size: 1.4em;
    font-weight: bold;
    color: #cc0000;
}

/* haltewerkzaamheden: jaar, km,
   bestellingen: retour */
.fldjaar, .fldkm, .fldmaterialen, .fldretour {
  width: 40px;
  text-align:right;
}

/* haltewerkzaamheden weeknummer */
.fldweeknr {
  width: 20px;
}

.btwdiv {
    width: 100px;
}

/* objectkeuze modal, nogal wat op af te dingen */
#fldobjExist {
    height: 200px;
}
.mldobj-container {
    min-height: 180px;
    padding: 2px;
}
.mldobj-info-wrapper {
    font-size: .9em;
    line-height: 1.2em;
}
.mldobj-has-photo {
    min-height: 100px;
    height: calc(100% - 1.3em);
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
    /* background-image-url wordt inline gezet want komt uit de DB */
}
.mldobj-has-photo .mldobj-info {
    background: rgba(255, 255, 255, 0.7);
    transition: background 150ms ease-out;
}
.mldobj-info {
    margin: 8px;
    border-radius: 4px;
    padding: 4px 6px;
}
.mldobj-info td {
    vertical-align: inherit;
}
.mldobj-has-photo:hover .mldobj-info {
    background: rgba(255, 255, 255, 0.95);
}
#lcllink
{
    cursor:pointer;
    background-color: #ff00ff;
}

div#lcldialect .label
{
    width: auto;
}
.color-preview {
    line-height: 1.3em;
}
.scf-color-preview {
    display: inline-block;
    margin-top: 0.2em;
}
.rstable .normal-padding {
    padding: 0 1px 1px 2px;
}
.iteminfo2 {
    font-weight: bold;
}
.iteminfo1 {
    font-weight: bold;
}
.iteminfo3 {
    font-style: italic;
}
.besitemflex
{
    margin-left:10px;
    color: #888
}
.besitemstotal td {
    font-weight: bold;
}
.besphoto {
    width: 100px;
    border: 8px solid #fff;
    box-shadow: 3px 3px 2px #ccc;
}
.besartbtns {
    text-align: center;
}

.addsub
 {
    float: left;
    text-align:left;
}
.besdetailtd {
    border: 0px solid #ccc;
    vertical-align: top;
    padding: 4px;
    box-shadow: 3px 3px 2px #ccc;
}
.besdetailtable {
    width: 100%;
}
/* prototype alext */
td.flexlabel.nohint {
    display: table-cell;
    overflow: visible;
}
td.flexlabel.nohint > label {
    display: inline-block;
    white-space: nowrap;
}
td.flexlabel label {
    font-weight: bold;
}
.readonly.flexvalue {
    padding-top: 2px !important;
}
/* Oude Blanco-kenmerk, nu een newline */
.flexspacer {
    margin-top: 1px;
}
tr.faqcollapsable td,
tr.flexcollapsable td {
    cursor: pointer;
    text-decoration: underline;
}

/* edit pencil 66057 */
.wrapper-span {
    cursor: pointer;
}

.image-edit {
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 2em;
    width: 2em;
    padding: 5px;
    border-radius: 50%;
    background-color: #FFFFFF;
    opacity: 0.8;
    margin-left: -1.8em;
}

.wrapper-span:hover .image-edit {
    background-color: var(--buttonbackgroundcolormediumlow);
}

.wrapper-span .image-edit:hover {
    opacity: 1;
    color: var(--buttonhovercolor);
    background-color: var(--buttonhoverbackgroundcolor);
}

body.showmode .lhint {
  background-image: none;
}
label.expression.flexexpr, .expression.flexexpr {
    font-style: italic;
}
.fldflexN, .fldSflexN {
    width: 100px;
}
.fldflexF.missing, .fldflexE.missing {
    color: #ff5050;
}
.fldflexR.inactive, .fldflexS.inactive {
    color: #FF4301;
}
.operand {
    background-color: #E1E894;
    vertical-align: top;
    width: 90px;
    border: 1px solid transparent; /* Focus heeft ook 1px border */
    margin-right: 2px;
    text-align: center;
}

span.besprijsup {
    color: var(--fclt-color-bad);
}
span.besprijsdown {
    color: var(--fclt-color-good);
}

tr.unauthorized {
  background-color:#ddd;
  color: var(--fclt-color-red);
}

#plaatsselect {
     border: 0;
     margin: 0;
}

/* left-to-right and right-to-left selectors */
#mldFrame { height: 800px; }
/* for modal-like tabs*/
.likemodal {
   background-color: #fffffe; /*backgroundcolor*/
   margin: 10px 20px 0 20px;
}

body.likemodal {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    }

/* styling for modal (popup) forms */
body.fclt-modal {
    padding: 2px 4px 0 4px;
}
/* blokken in modal altijd 100% */
body.fclt-modal .flexblock {
    max-width: 100%;
    flex-basis: 100%;
}

.fclt-modal th {
   background-color: var(--frameheaderbackgroundcolor);
   color: var(--frameheadercolor);
   border-right: 1px solid #ccc;
}
#bes_add_fav {min-width: 500px;}
#besrejectbody {min-width:500px;}
#fac_like {min-width:600px;}
#localebody {min-width:800px;}
#mld_opdrejectbody {min-width:600px;}
#mod_acceptofferte {min-width:600px;}
#mod_algfaq {min-width:500px;}
#mod_algmultiedit {min-width:500px; height:250px;}
#mod_authQR {min-width:500px; width:650px;}
#mod_bes_kenmerk {min-width:600px;}
#mod_beslever {min-width:800px;}
#mod_besprijs {min-width:350px;}
#mod_besretour {min-width:600px;}
#mod_besweging {min-width:500px;}
#mod_bezcheckin {min-width:600px;}
#mod_bezmultiedit {min-width:500px; height:250px;}
#mod_bijlagen {min-width:600px;}
#mod_caddoorvoeren {min-width:500px;}
#mod_changecnttype {min-width:450px;}
#mod_changeopdrtype {min-width:450px;}
#mod_changesrtdeel {min-width:450px;}
#mod_cntsplit .label {min-width: 180px;}
#mod_cntsplit {min-width:500px;}
#mod_dubrejectbody {min-width:600px;}
#mod_edit_prs_modal {min-width: 600px;}
#mod_favorites {min-width: 550px;}
#mod_grprecht {min-width: 600px;}
#mod_history {height: 300px;}
#mod_impbezoekers  {min-width:800px;}
#mod_impinlezen { min-width: 500px; }
#mod_impverwerken { min-width: 500px; }
#mod_insdeelkoppeling {min-width:700px;}
#mod_insmultiedit  {min-width:500px;height:250px;}
#mod_insonderdelen {min-width:700px;}
#mod_insxcp {min-width:800px;}
#mod_insxcpmultiedit {min-width:500px;height:250px;}
#mod_mjbinclscen {min-width:600px; min-height: 120px;}
#mod_mldaccept {min-width:500px;}
#mod_mldcancelworkflow {min-width:600px;}
#mod_mldclose {min-width:600px;}
#mod_mldcontinue {min-width:600px;}
#mod_mlddouble {min-width:800px;}
#mod_mldfixsla {min-width:500px;}
#mod_mldforward {min-width:600px;}
#mod_mldmat {min-width:900px;}
#mod_mldobj {min-width:900px;}
#mod_mldshiftdate {min-width:550px;}
#mod_mldstdmsrtruimte {min-width:500px;}
#mod_nieuws {min-width:800px;}
#mod_movewerkplek { min-width: 500px; }
#mod_noshow  {min-width:500px;}
#mod_opdraccept {min-width:540px; height: 260px;}
#mod_opdrcancel {min-width:600px;}
#mod_opdrclose {min-width:540px; height: 260px;}
#mod_opdrejectbody {min-width:600px;}
#mod_pass2mail  {min-width:500px;}
#mod_perslidwerkplek {min-width:500px;}
#mod_pnotes   {min-width:500px;}
#mod_preview  {min-width:650px;}
#mod_prs_pwdchange {min-width:700px;}
#mod_prsinzetbaar {min-width:500px;}
#mod_prsmultiedit { min-width: 520px; }
#mod_queuemail {min-width:600px;}
#mod_rejectbody {min-width:600px;}
#mod_rejectoffertebody {min-width:600px;}
#mod_req_move {min-width:500px;}
#mod_req_move2 {min-width:500px;}
#mod_req_move3 {min-width:500px;}
#mod_res_selectroom {min-width:600px;}
#mod_resafwijzen {min-width:650px; height: 250px;}
#mod_resdelete {min-width:500px;}
#mod_resmulti_save {min-width:500px;}
#mod_respool {min-width:600px;}
#mod_resupdateobj {min-width:500px;}
#mod_resupdateroom {min-width:500px;}
#mod_ruimteafdeling {min-width:700px;}
#mod_ruimtefunctie {min-width:650px; height:40px;}
#mod_ruimteresscope {min-width:500px;}
#mod_selfreg  {min-width:410px;}
#mod_signature { height: 320px; }
#mod_stdmeldingfaq .label {min-width: 0px;}
#mod_stdmeldingfaq {min-width:500px;}
#mod_substitutes {min-width: 650px;}
#mod_tekedit {min-width:500px;}
#mod_token2mail {min-width:250px;}
#mod_mlduitv {min-width:800px;}
#mod_urenremarkbody {min-width:500px;}
#mod_wfexpression { min-width: 700px; }
#prjeditbezet { min-width: 800px; }

/* modals met buttons. zouden ook een class buttonmodal oid mogen krijgen ipv stylen per id */
#act_modal { min-width: 300px; max-height: 80vh !important; overflow-y: scroll;}

.fclt-modal.scaffolding {min-width:500px;}
body#mod_resmulti { min-width: 690px; }
body.mod_edit_mandate {min-width:500px;}

#mod_resmulti div#List.inside { min-height: 490px;}
body#mod_resmulti div#show_date_from {
    min-height: 250px;
    display: flex;
    align-items: center;
}
div#mldsimilar { padding: 4px 4px 4px 10px; }
#prjeditbezet .label {
    width: auto !important;
    min-width: auto !important;
}

body.fclt-modal table.fcltblocktab  > tbody tr td.label label {
    display: inline-block;
    max-width: 100%;
    padding-right: 0;
}

#hinter {
    background-color: #eee092;
}
#hinter #hinttext {
    font-size: 1em;
    line-height: 1.5;
}
/* ==== menu styles ==== */
/* voor de tabjes boven het menu */
#maintabs .ui-tabs-anchor {
    padding: 0.45em 0.8em !important; /* durven we deze weg te laten? keuze */
    font-weight: 600;
    font-size: 1.05em;
}

div#menu {
    margin: 0;
    padding: 0;
    overflow: auto;
}

.scrollTopTab {
    position: fixed;
    display: flex;
    align-content: center;
    top: 0;
    left: 50%;
    width: 3rem;
    padding: 0;
    transform: translate(-50%, -50%);
    z-index: 2;
    overflow: hidden;
    background-color: white;
    border: 2px solid grey;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    transition: opacity 150ms ease-in-out;
    opacity: 0;
    margin-top: 0.9em;
}

.scrollTopTab:hover {
    margin-top: 1.3em;
}

.scrollTopTab.scrolled {
    opacity: 0.9;
    cursor: pointer;
}

/* Merk op dat heel veel afmetingen hieronder alleen zijn
   voor een initieel rustiger beeld. Vooral frheader.height
   en menutabs.width hebben echt effect */
div#frheader{
    height: 75px;
    width: 100%;
    line-height: 1.2em;
}
div#topdivider{
    position: absolute;
    height: 1px;
    width: 100%;
    z-index: 2;
    cursor: pointer;
    background-color: var(--fclt-border-color);
}
div#topdivider.dividerclosed{
    height: 0px;
}
div#menutabs {
    position: absolute;
    left: 0px;
    width: 257px; /* Wordt vergroot naar behoefte, nooit verkleind */
    top: 82px;
    border: 0;
}
div#menutabs ul {
    border: 0;
}
div.ui-tabs-submenu {
    position: absolute;
    min-width: 180px;
    z-index: 102; /* div#loggers + 1 */
}

div#menudivider{
    position: absolute;
    left: 259px;
    height: 400px;
    width: 1px;
    border: 0px;
    z-index: 2;
    cursor: pointer;
    background-color: var(--fclt-border-color);
}

div#maintabs{
    position: absolute;
    left: 265px;
    height: 400px;
    top: 82px;
    width: 800px;
    border: 0px;
}


.toggler {
    position: absolute;
    background-color: var(--fclt-border-color);
    z-index: 10;
    border: 1px solid grey;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
}

#menutoggler {
    display: flex;
    align-items: center;
    height: 22px;
    width: 13px;
    right: 1px;
    border-right: 0px;
    border-radius: 3px 0px 0px 3px;
    transition: background-color 75ms ease-in-out;
}
#menutoggler:hover {
    background-color:white;
}
#menudivider.dividerclosed #menutoggler {
    left: 0px;
    border-right: 1px solid gray;
    border-left: 1px;
    border-radius: 0px 3px 3px 0px;
}
/* headtoggler lijkt initieel niet zichtbaar, is dat de bedoeling? KR -> Ja, maar je ziet stiekem en onbedoeld toch een paar pixels. */
#headtoggler {
    height: 13px;
    width: 18px;
    top: -14px;
    left: 5px;
    display:none;
    border-bottom: 0px;
    border-radius: 3px 3px 0px 0px;
}
#headtoggler:hover {
    background-color:white;
}
#topdivider.dividerclosed #headtoggler {
    display: flex;
    top: 0px;
    border: 1px solid gray;
    border-top: 0px;
    border-radius: 0px 0px 3px 3px;
}

/* ook strak tegen de randen */
.ui-tabs {
    padding: 0;
}
/* Menu-items tegen linkerkant */
.ui-tabs .ui-tabs-panel {
    padding: 0; /* 2px padding vervangen door div.menuHeadSpacer */
}

.ui-tabs-nav .ui-tabs-tab {
    border-radius: var(--fclt-border-radius) var(--fclt-border-radius) 0 0;
    margin-right: 0.125rem;
}

div#menutabs {
    background-color: var(--menubackgroundcolor);
}

div#menutabs li.ui-state-active {
    background-image: none; /* Wit blok halverwege menu weghalen */
}

#menutabs .ui-menu-tabs ul,
#menutabs .ui-layout-content ul {
    padding: 0;
    margin: 0;
}

.ui-tabs-submenu ul {
    padding: 0;
    margin: 0;
}

#menutabs .ui-layout-content ul li,
#menutabs .ui-tabs-submenu ul li,
#menutabs .ui-menu-tabs ul li {
    list-style: none;
}
.menutab { /* die max 3 paneltabs, om het smaller te houden? */
   font-family: var(--fontfamily_alt);
}
div#ProfFAC ul li.mi,
div#PersFAC ul li.mi,
div#MgtFAC ul li.mi  {
    font-family: var(--fontfamily_alt);
    color: var(--menucolor);
    background-color: var(--menubackgroundcolor);
}
#menutabs span.menukop {
    color: var(--menucolor);
}
#menutabs span.micon i {
    font-size: 15px;    /* Grootte icon */
    vertical-align: middle;
    margin: 0 5px;      /* Spatie links/rechts */
}

#menutabs span.menukop {
  font-size: 1.15em;
}

span.menulabel,
span.menukop {
  background-repeat:no-repeat;
  background-position:left;
  vertical-align: middle;
}

span.menulinkkop {
    cursor: pointer;
    vertical-align: middle;
}

/* deze is voor kop en item */
li.mk {
    border-bottom: none;
    border-top: 1px solid #eee;
    cursor: pointer;
    line-height: 3.1em;
    padding: 1px 4px 4px 4px;
}
.ui-layout-content[aria-expanded="true"] > [role="tabpanel"] > ul > li.mk[aria-expanded="true"] {
    padding: 0;
    margin: 1px 4px 4px 4px; /* margin ipv padding om misclicks op de padding te voorkomen (die het menu weer sluiten) */
}
li.mk:hover {
    background-color: var(--menukophoverbackgroundcolor)!important;
}
li.mk:hover span.menukop,
.withaction:hover i {
    color: var(--menukophovercolor)!important;
}
.withaction { cursor: pointer; }

li.mi {
    font-size: var(--fclt-font-size-s);
    line-height: 1.85em;
    background-color: transparent;
    opacity: 1;
}
li.mi[data-value]::before {
    content: attr(data-value);
    display: block;
    font-weight: bold;
    height: 0px;
    overflow: hidden;
    visibility: hidden;
}
.menuDropdown li.mi {
    color: var(--menuitemhovercolor)!important;
    background-color: var(--menuitemhoverbackgroundcolor)!important;
}

/*  :only-child komt alleen voor bij een submenuitem met een plaatje en een link,
    dan wordt het label onderdrukt, bij een icoontje niet */
.micon:not(:only-child) img,
:is(.nomicon, .tabicon) {
    font-size: 2em;
    width: 1.25em; /* evenals de fa-fw */
    margin: 0 4px 0 0;
    vertical-align: middle;
}

.micon:only-child img {
    display: block; /* Voorkomt inline spacing */
}
li.header-tabs {
    display: flex;
}
:is(.nomicon, .tabicon) {
    aspect-ratio: 1;
    display: inline-block;
    text-align: center;
    line-height: 1.3em;
}
.nomicon, .tabicon {
    background-color: var(--frameheaderbackgroundcolor);
    border-radius: 2px;
    opacity: 0.8;
}
.tabicon {
    vertical-align: text-bottom;
}

.nomicon:hover {
    opacity: 1;
}
.menupinned {
    float: right;
    display: none;
}
li.mi:hover span.menupinned
{
    display: inline;
}

li.mi {
    cursor: pointer;
}
/* Menu tab icons hover effect */
#menutabs li:hover i {
    transform: scale(calc(4 / 3));
}
#menutabs,
#bijlagenList {
    li.mi:hover {
        color: var(--menuitemhovercolor)!important;
        background-color: var(--menuitemhoverbackgroundcolor)!important;
    }
}
.widget-type-mk li.mi:hover,
#portalmenu li.mi:hover {
    color: var(--linkcolor);
    font-weight: bold;
}

.guicnt {
    font-size: 0.6em;
    color: #888;
    line-height: normal;
}

#menutabs .ui-layout-content ul li li {
    font-weight: normal;
    color: var(--menuitemcolor);
    background-color: var(--menuitembackgroundcolor);
    list-style: none;
    border-top: 1px solid #eee;
    padding: 2px 0 3px var(--fclt-frameheader-height);
    text-decoration: none;
}

#menutabs .ui-tabs-submenu ul {
    border-left: 1px solid #ddd;
    box-shadow: 2px 2px #ccc;
}

#menutabs .ui-tabs-submenu ul li {
    font-weight: normal;
    color: var(--menuitemcolor);
    background-color: var(--menuitembackgroundcolor);
    list-style: none;
    border-top: 1px solid #ddd;
    padding: 0 3px 1px 3px;
    text-decoration: none;
    white-space: nowrap;
}

#menutabs .ui-tabs-submenu ul.menuDropDown li {
    background-color:var(--menuitembackgroundcolor) !important;
    padding: 4px 4px 4px 8px;
    cursor: pointer;
}
#menutabs .ui-tabs-submenu ul.menuDropDown li:hover {
    color:var(--menuitemhovercolor) !important;
    background-color:var(--menuitemhoverbackgroundcolor)!important;
}
#menutabs .ui-tabs-submenu ul.menuDropDown li.mks {
    list-style: none;
    display: list-item;
    background-color: var(--menukophoverbackgroundcolor)!important;
    color: var(--menukophovercolor)!important;
    border-top: 1px solid #ddd;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 4px 4px 8px;
    border-bottom: none;
    line-height: 2.1em;
    cursor: default;
}

.rate.fa-star, .rate.fa-star-o {
    color: #FFA500;
    font-size: 1.5em;
}

.rate.fa-question-circle {
  color: #51768F;
  font-size: 1.4em;
}
span.hint {
    color: var(--buttonbackgroundcolor);
    cursor: auto;
    line-height: inherit;
    font-size: 1.3em;
    cursor: help;
}
span.hint:hover {
    color: var(--buttonhoverbackgroundcolor);
}

/* TODO, minstens wat padding, prominenter. Zo? */
td > .bezflex td:first-child {
    min-width: 375px;
}
tr[id^=trbez]:not([id$=flex]) span > i.fa-fw {
    font-size: 1em;
    cursor: pointer;
    color: var(--buttoncolor);
    background-color: var(--buttonbackgroundcolor);
    line-height: 2em;
    width: 2em;
}
tr[id^=trbez]:not([id$=flex]) span > i.fa-fw:hover {
    color: var(--buttonhovercolor);
    background-color: var(--buttonhoverbackgroundcolor);
}

.flikeopts li i
{
    font-size: 1.3em;
}

/* workplace reservations */
th.placephoto {
    width: 90px;
}
td.placephoto img {
    max-width: 80px;
    max-height: 80px;
}

#iconbody .iconmenu,
#iconbody .res-flex-recent {
    width: 20%;
    height: 50vw; /* halve hoogte */
}
#iconbody .iconmenu .iconitem,
#iconbody .res-flex-recent .res-flex-recent-card {
    border: 2px solid #666;
}

/* voor iconmenu */
td.iconmenu {
    font-size: 1em;
    text-align:center;
    padding-bottom: 12px;
    vertical-align: top;
    cursor: pointer;
}

td.iconmenu h3 {
    font-weight: normal;
}
td.iconmenu img, td.bessrtdeelfoto img {
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid #ffffff;
}
td.bessrtdeelfoto {
    text-align: center;
}

.iprdvg { /* Product catalogus naam */
    display: block;
    font-size: 0.8em;
    font-weight: bold;
}
.iprs { /* Prijs */
    white-space: nowrap;
    margin-left: 0.5rem;
    /* font-size: 0.9em; */
}
.ieenh { /* Eenheid */
    display: none;
}
.iopm { /* Artikel opmerking */
    font-size: 10px;
    line-height: 12px;
}

/* portalmenu */
.widget-type-mk,
.widget-type-mi,
#portalmenu {
    text-align: center;
}

.widget-type-mi {
    padding: 6px;
}
#portalmenu h2 {
    font-size: 2em;
    color: var(--portalkopcolor);
    margin: 4px;
    padding: 9px 1px 5px 1px;
    font-weight: 800;
}

.widget-type-mk div.row,
#portalmenu div.row {
    padding-top: 0;
    padding-bottom: 6px;
}
.widget-type-mk div.row:first-child,
#portalmenu div.row:first-child {
    padding-top: 6px;
}

.widget-type-mk div.col,
#portalmenu div.col {
    padding-left: 0;
    padding-right: 6px;
}
.widget-type-mk div.col:first-child,
#portalmenu div.col:first-child {
    padding-left: 6px;
}
.widget-type-mk .container-fluid,
.widget-type-mk .row {
    height: 100%;
}

#portalmenu .menu-kop-content,
.widget-type-mk .menu-kop-content,
.widget-type-mi .menu-item-content {
    height: 100%;
    overflow: hidden;               /* Inhoud binnen tegel houden */

    border: var(--fclt-border);
    border-radius: var(--fclt-border-radius-3xl);   /* Afgeronde hoeken */
    padding: 1em;

    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparante achtergrond */

    text-align: left;       /* Tekst links uitlijnen */
    vertical-align: top;    /* Verticale uitlijning top */

    transition: transform var(--fclt-animation-duration-s) ease,
                box-shadow var(--fclt-animation-duration-s) ease;
}

.widget-menu-item,
.widget-menu-kop {
    display: flex;
    flex-direction: column;
}
.widget-menu-image {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#portalmenu span.menukop,
.widget-type-mk span.menukop,
.widget-type-mi span.menulabel {
    background-image: none;
    color: var(--menucolor);
    display: inline-block; /* om gewrapte tekst niet te veel hoogte per regel te geven */
    font-weight: bold;
    font-size: 1.5em; /* dapper?*/
    cursor: inherit;
    margin: 0;
    padding: 8px 1px 24px 0px;
}
.widget-type-mk .menu-kop-content.withaction span.menukop, /* Alleen de combined to single */
.widget-type-mi span.menulabel {
    align-self: center;
}

.widget-type-mk ul,
#portalmenu ul {
    margin: 0 0 5px 0;
    padding: 0;
}
.widget-type-mk li.mi,
#portalmenu li.mi {
    font-size: 1.2em;
    line-height: 1.3em;
    list-style: none;
}
.widget-type-mk li.more,
#portalmenu li.more {
    font-size: 0.9em;
    cursor: pointer;
    color:  #004f80;
}
.widget-type-mk a,
#portalmenu a {
    color: var(--textcolor);
    text-decoration: none;
}
.widget-type-mk a:hover,
.widget-type-mk .more:hover,
#portalmenu a:hover,
#portalmenu .more:hover {
    color: var(--linkhovercolor);
}
#portalmenu span.menuimg,
.widget-type-mk span.menuimg,
.widget-type-mi .menuimg {
    font-size: 13px;
    font-weight: bold;
    line-height: 100px;
    height: calc(100px + 1em); /* 1em voor inline spacing */
    display: block;
    float: left;
}
:is(#portalmenu, .widget-type-mk, .widget-type-mi) :is(.widget-menu-image, .menuimg) i {
    font-size: 4em;
    background: var(--menuiconcolor-gradient);
    background-clip: text;                  /* Gradient op tekst toepassen */
    -webkit-text-fill-color: transparent;   /* Tekstkleur transparant maken zodat gradient zichtbaar is */
}
#menutabs .micon i {
    color: var(--menuiconcolor);
}
:is(#portalmenu, .widget-type-mk, .widget-type-mi) :is(.widget-menu-image, .menuimg) i,
#menutabs .micon i {
    display: inline-block;                  /* Zorgt dat de icons inline met tekst blijven */
    line-height: 1.2;                       /* Verticale uitlijning binnen icon */
    padding-top: 2px;                       /* Ruimte boven icon */
    transition: transform var(--fclt-animation-duration-s) ease-in-out; /* Gestandaardiseerd (fclt-card) */
}

/* ---------------------------------------------------
   Hover effect voor menu-tegels, gelijk aan de kaarten uit het kaartenoverzicht
--------------------------------------------------- */
#portalmenu .menu-kop-content:hover,
.widget-type-mk .menu-kop-content:hover,
.widget-type-mi .menu-item-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--fclt-body-color);
    span.menuimg i {
        transform: scale(1.2);
    }
}

#portalmenu span.menuimg {
    width: calc(100px - 1.5em); /* waarom? */
    text-align: center;
}
.widget-type-mk span.menuimg,
.widget-type-mi .menuimg {
    min-width: 100px;
    max-width: 95%;
    text-align: center;
}
.widget-type-mk span.menuimg li.mi,
#portalmenu span.menuimg li.mi {
    font-weight: normal;
}
.widget-type-mk div.portalmenukop,
#portalmenu div.portalmenukop {
    max-width: calc(100% - 100px);
    padding-left: 0.5em;
    padding-right: 0.5em;
    float: left;
    background-color: rgba(255, 255, 255, 0); /* Voor leesbaarheid, uitgezet */
    border-radius: 5px;
}
#portalmenu div.portalmenukop {
    margin-left: 1.5em;
}
.widget-type-mk div.portalmenukop.withimg,
#portalmenu div.portalmenukop.withimg {
    float: none;
    text-align: center;
    margin: auto;
}

.widget-type-mk span.menuimg img,
#portalmenu span.menuimg img {
    max-width: 95%;
    max-height: 100px;
}

/* Anders onder elkaar */
@media all and (max-width: 85em) {
    .widget-type-mk span.menuimg,
    .widget-type-mk div.portalmenukop,
    #portalmenu span.menuimg,
    #portalmenu div.portalmenukop {
        display: block;
        float: none;
        margin-left: 0;
        width: auto;
        max-width: none;
    }

    #portalmenu span.menuimg {
        text-align: center;
    }
}

.widget-type-mk .portalmenukop.withimg span.menuimg,
.widget-type-mi span.menuimg,
#portalmenu .portalmenukop.withimg span.menuimg {
    float: none;
    margin: auto;
    padding-right: 0;
}

#portalmenu .portalmenukop.withimg span.menuimg {
    line-height: normal;
}
.deleted {
    text-decoration: line-through;
}
.alg_deleted, .cnt_deleted, .prs_deleted, .res_deleted, .cnt_inactive, .ins_deleted {
    background-color: var(--fclt-color-red);
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 4px;
    margin-top: 2px;
    font-variant: small-caps;
}
.outofbounds {
    color: var(--fclt-color-red);
    font-weight: bold;
}

input.activeinterval,
span.activeinterval,
input[readonly].activeinterval,
input.notapproved,
span.notapproved {
    font-weight: bold;
    color: var(--fclt-color-red);
}

:is(select, *).fatal { /* select specifiek benoemd zodat het select.fld overruled */
    background-color: var(--fclt-color-red);
    color: yellow;
    font-weight: bold;
    text-align: center;
    & > option:not(.fatal) { /* Deze gewoon normaal houden */
        background-color: #FFFFFF;
        color: var(--textcolor);
    }
}
div.fatal {
    padding: 5px;
}

tr.res_fatal td {  background-color: var(--fclt-color-bad-contrast)!important; }

tr.res_fatal td:before {
    content: "\f00d";
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    color: var(--fclt-color-bad);
    font-size: 1.25em;
    white-space: nowrap;
    padding: 0 3px 0 1px;
    vertical-align: top;
}

tr.resactive td {
    background-color: #444444;
    color: #e0e0e0;
}
tr.respast td {
    background-color: #bb3446;
    color: #f0f0f0;
}
tr.respast.updated td {
    color: var(--textcolor);
}

/* geen kruizen in de multiselect/hamburger kolom ivm uitlijning */
tr.res_fatal td.multiselect:before, tr.res_fatal td.hambCont:before, tr.res_fatal td.inlinedetails:before {
    content: none;
}
.warning-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--notesbackgroundcolor);
}
#lock-warning {
    display: flex;
    align-items: center;
    height: 26px;
    margin: auto;
    padding: 0 0.5em;
    overflow: hidden;
    white-space: nowrap;
    font-weight: bold;
    color: white;
}
.warning {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    font-size: initial; /* mag best nadrukkelijker toch? */
    font-weight: bold;
    background-color: orange;
    color: white;
}
.warning > i.fa-fw {
    margin-right: 0.5em;
}
tr.listfatal td {
    background-color: var(--fclt-color-red);
    color: yellow;
    font-weight: bold;
}
tr.listfatal.updated td {
    color: blue;
}
.noshow, #fldnoshow {
    color: yellow;
    font-weight: bold;
    background-color: var(--fclt-color-red);
}
.rsSummary {
    float: left;
    background-color: #808080;
    color: #FFFFFF;
    padding: 0; /* moet 0, anders zie je nog iets als-ie hidden is */
}
.rsTruncmore {
    color: #888;
    cursor: pointer;
}

.mldpublic td {
    background-color: #E0E0E0;
}
.mldsubject {
    font-weight: bold;
}
.mldopdruren {
    background-color: #F5F5F5;
}
.mldimpropdruren {
    background-color: #F7C39D;
}
.mldopdrurenkosten {
    background-color: #9EADF6;
}
#legenda {
    background-color: #fffffe; /*backgroundcolor*/
}
.legendatitel {
    font-weight: bold;
    white-space: nowrap;
}
.legendaregel
{
    vertical-align: top;
    width: 25px;
    padding: 0;
    cursor: default;
}
.legendakleur {
    width: 16px;
    height: 16px;
    box-shadow: 1px 1px 1px #888888;
    margin-bottom: 2px;
    .legendakleurblokje {
        font-size: 0;
        line-height: 0;
        border-width: 8px;
        border-style: solid;
    }
}
.legendselectable .legendakleur {
    cursor: pointer; /* je kunt er op klikken */
}
.legendaupdatable .legendakleur {
    cursor: grab; /* je kunt er mee slepen */
}
.legendatekst {
    font-size: 0.9em;
    white-space: nowrap;
    padding-left: 2px;
    cursor: default;
}
#legenda, #meldinglegenda, #opdrachtlegenda, #inslegenda, #planbordlegenda, #contractlegenda {
    width:100%;
    background-color: #ffffff;
    border: 1px solid #eee;
    border-collapse: separate;
    border-spacing: 1px;
}
#legenda td, #meldinglegenda td, #opdrachtlegenda td, #inslegenda td, #planbordlegenda td {
  padding-left: 6px;
}

/* Facilitor Graphics classes*/
#navigationCell {
    float: left;
    width: 240px;
    overflow: auto;
    overflow-x: hidden;
    background-color: #fffffe; /*backgroundcolor*/
    padding-left:1px;
    padding-right:2px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: absolute;
    top: 0px;
    left: 0px;
}

.fgdatumfilter select {
    width: 105px;
    font-weight: bold;
}
.fgdiscblock {
    padding-left: 10px;
}
#LinkerNavi {
    vertical-align: top;
    width: 220px;
    background-color: #fffffe; /*backgroundcolor*/
}

#mapCell  {
      border: 0px;
      margin-left: 223px;
      height: 800px;
}
.fgindicator {
    position:absolute;
    right: 0;
    z-index:1;
    cursor:pointer;
}
#mapCell3D {
      border: 0px;
      margin-left: 223px;
      height: 800px;
}
#tabsCell {
   border-top:1px solid black;
}
/* Graphics */
td.selectable {
    padding: 0;
    cursor: pointer;
}
#docBody {
    margin: 0;
    padding: 0;
    width: 700px;
    height: 400px;
}
#theTabs {
    height:100%;
    padding-top:1px;
}
.fglock {
    cursor: pointer;
    float: left;
    margin-left: -0.75em;
    padding: 0.5em 1em 0.5em 0;
}
.fginconsistent {
    background-color: #CC0000;
    color: white;
    font-weight: bold;
    padding: 1px 4px;
}
.draggable {
    color: var(--fclt-color-red);
    text-decoration: none !important;
    font-weight: bold;
    cursor: grab !important;
}
.drag {
    position: relative;
    cursor: pointer;
    color: var(--fclt-color-red);
}
.dragging {
    color: var(--fclt-color-red);
    font-weight: bold;
    cursor: move;
    padding: 0 4px;
}

#navigationCell.collapsed {
    display:none;
}
#fgmenutoggler {
    display: flex;
    align-items: center;
    background-color: white;
    height: 20px;
    width: 15px;
    top: 1px;
    border-right-style: none;
    border-radius: 3px 0px 0px 3px;
}
#fgmenutoggler.collapsed {
    border-left: 0px;
    border-right-style: solid;
    border-radius: 0px 3px 3px 0px;
}
#fgmenutoggler:hover {
    background-color:#ddd;
}
#fgtabtoggler {
    background-color: white;
    height: 20px;
    width: 18px;
    border-top-style: none;
    border-radius: 0px 0px 3px 3px;
}
#fgtabtoggler:hover {
    background-color:#ddd;
}
#fgtabtoggler.collapsed {
    border-top-style: solid;
    border-bottom: 1px;
    border-radius: 3px 3px 0px 0px;
}
#legendCell {
    position: absolute;
    top: var(--fclt-frameheader-height);
    left: 246px;
    min-width: 100px;
    overflow-y: auto;
    background-color:rgba(255,255,255,0.95);
    padding: 4px;
    box-shadow: 1px 1px 5px #666;
    border-radius: 3px;
}
#legendCell #titel {
    position: relative;
    font-weight: bold;
    text-indent: 2em;
}
#legendCell #titel[data-toggle="collapse"]::after {
    font-family: 'Font Awesome 6 Pro';
    font-weight: 300;
    content: "\f13a"; /* chevron-down */
    font-size: 1.2em;
    position: absolute;
    left: -1.5em;
    top: 50%;
    transform: translateY(-50%);
}
#legendCell #titel[data-toggle="collapse"][aria-expanded="false"]::after {
    content: "\f138";  /* chevron-right */
}

#fLegenda1, #fLegenda2 {
    padding: 2px;
}
#legendMore {
    float: right;
    padding-right: 2px;
}
.legendtitle {
    font-weight: bold; /* bijvoorbeeld, mag anders*/
}
#flegendaseparator {
    height: 6px;
}
/* Enkele 'vieze' overrules, te verfijnen */
#navigationCell .fld
{
    width: 225px;
}

#navigationCell .fldsDiscsIn,
#navigationCell .fldrooms,
#navigationCell select,
#fLegenda select
{
    width: 226px;
}
/* note: the order is which the next definitions appear is
   significant, and more of these are defined in slnkdwf.css
 */
.openFG, .closedFG, .fixedFG {
    width: 228px;
    background-color: var(--frameheaderbackgroundcolor);
    color: var(--frameheadercolor);
}
.openFG, .closedFG {
    transition: background-color 0.2s;
    cursor: pointer;
}
.openFG:hover, .closedFG:hover {
    background-color: var(--buttonhoverbackgroundcolor);
    color: var(--buttonhovercolor);
}
.openFG td, .closedFG td, .fixedFG {
    line-height: 2em;
    padding-left: 0.4em;
    border-top: 2px solid white;
    font-weight: bold;
}
.openFG td i, .closedFG td i, .fixedFG i{
    vertical-align: inherit;
}
.legdisc {
    font-weight: bold;
    text-align: center;
}
.legins {
    height: 36px;
    border-radius: 2px;
    padding: 2px;
    box-shadow: 1px 1px 2px #999;
}
.legins.draggable {
    background-color: #fbff83; /* stickyyellow */
}
.leginsname {
    font-family: var(--fontfamily_alt);
    vertical-align: middle;
    padding-left: 8px;
}
.leginsnr {
    opacity: 0.8;
    font-size: 0.8em;
    margin-left: 3px;
}
#navbuttons {
    background-color: var(--frameheaderbackgroundcolor);
    color: var(--frameheadercolor);
}
#navbuttons span.active {
    background-color: var(--frameheadercolor);
    color: var(--frameheaderbackgroundcolor);
}
#navbuttons span:hover {
    color: var(--buttonhovercolor);
    background-color: var(--buttonhoverbackgroundcolor);
}
#toggler {
    float: left;
    width: 12px;
    height: 100%;
    cursor: pointer;
}
#SearchCode, #SearchLbl {
    opacity: 0.7;
}
.area_diff {
    color: var(--fclt-color-red);
}

label > span.facmgtmultilang::before,
.facmgtmultilangheader::before
{
    content: "";
    display: inline-block;
    height: 1em;
    width:  calc(1.5em + 3px);
    background-image:    url("../Pictures/nl.png");
    background-repeat:   no-repeat;
    background-size:     contain;
    background-position: left;
}

/* phonebook API */
#phonebookdetails {
    background-color:#fff;
    padding: 5px 5px 10px 5px;
    border: 1px solid #888;
}
#phonebookdetails .label {
    text-align: right;
    padding-right: 5px;
}
#phonebookdetails th {
    background-color: #fff;
}
#phonebookdetails .title,
#phonebookdetails .title a {
    text-align: left;
    font-size: 1.1em;
}
#phonebookdetails  td {
    padding: 3px;
}

table.filter {
    background-color: #fffffe; /*backgroundcolor*/
    border: 1px solid #ccc;
    margin-bottom: 10px;
}
table.filter th {
    background-color: var(--tableheaderbackgroundcolor);
    color: var(--tableheadercolor);
    font-weight: normal;
    font-size: 1.1em;
    margin-bottom: 2px;
}
table.filter td {
     cursor: pointer;
     padding: 3px 2px 1px 4px;
     color: var(--textcolor);
     line-height: 18px;
}
table.filter td.count {
    font-size: 0.9em;
    text-align: right;
}
table.filter td.meer {
    font-size: 0.9em;
    cursor: default;
}
table.filter img {
     padding-right: 4px;
     vertical-align: bottom
}
  span.wisFilter {
     color: #888;
     cursor: pointer;
  }
.simple-content-wrapper {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
}
.prodsearch-widget,
.input-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 10px);
}
.input-button-wrapper input.fld {
    line-height: 1.6em;
}

.search-container {
    position: relative;
    --fclt-search-input-spacing: 0.5rem;
    padding: var(--fclt-search-input-spacing);
}
.search-input {
    --fclt-search-input-height: 3rem;
    height: var(--fclt-search-input-height);
    border-radius: calc(var(--fclt-search-input-height) / 2 + 0.375rem);
    padding-left: 1.25rem;
    padding-right: 2.25rem;
    box-shadow: 0 0 var(--fclt-search-input-spacing) var(--fclt-body-color-10);
}
.search-input:is(*, :focus) {
    border: none;
}
.search-icon {
    position: absolute;
    top: 50%;
    right: calc(1rem + var(--fclt-search-input-spacing));
    transform: translateY(-50%);
}

#breadcrums {
    padding: 10px;
}
.tag {
    color: #3e6d8e;
    margin: 2px 4px 2px 1px;
    padding: 2px 3px 2px 3px;
}
#prodtable {
   border: 1px solid #f1f1f1;
}
#prodtable th {
    background-color: #fafafa;
    color: var(--textcolor);
    border: none;
    border-bottom: 1px solid #f1f1f1;
}
.qrcode {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
}
@media not print {
    .show-on-print {
        display: none;
    }
}
@media print { /* Alleen de QR-code zelf printen */
    #mod_qrcode {
        visibility: hidden;
    }
    .qrcode,
    .show-on-print {
        visibility: visible;
        width: 5cm;
        text-align: center;
    }
}
.droppable {
    opacity: inherit;
    transition: opacity 0.2s ease;
}
.droppable.dragon {
    opacity: 0.5;
}
.otptoken {
    color: #ddd;
}
.otptokencurrent {
    color: #000;
}
#uitleen_restxt {
    font-size: 9pt;
    line-height: 12pt;
    padding-top: 10px;
    padding-bottom: 10px;
}

p.trunc {
    white-space: nowrap;
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.filter p { margin: 0px; }

#hidFrame { display: none; }

input:focus, textarea:focus, select:focus {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-left-width: 2px;
}
/*
input[type=radio]:focus,
input[type=checkbox]:focus {
    border: 1px solid transparent;
    box-shadow: 0 0 0px #888;
}
*/
input[readonly], select[readonly], textarea[readonly] {
    box-shadow: none;
    border:none;
}
/* touch colors are defined here to allow customisation */
#tabletmenu {
    color: var(--textcolor);
}

/* floorscreen */
.floorscreen input[type=button] {
    background-color: #CC5252; /*configurable*/
    color: #fffffe; /*backgroundcolor*/
    margin: 2px;
    font-weight: bold;
    padding: 12px;
    box-shadow: 1px 1px 1px #888888;
    margin-bottom: 12px;
    font-size: 1.3em;
    border-radius: var(--fclt-border-radius-input);
}
.floorscreen input[type=button]:hover {
    background-color:#F59D04;  /*configurable*/
}
.floorscreen input[type=button].selected {
    background-color:#fffffe;  /*backgroundcolor*/
    color:#CC5252;  /*configurable*/
    box-shadow: 1px 1px 1px #888888 inset;
}
.flrbutton {
    width: 150px;  /* default */
}
.floorscreen #fsmenu {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: auto;
    overflow-x: hidden;
    background-color: #fffffe; /*backgroundcolor*/
    border-right: 1px solid var(--textcolor);
}
.floorscreen #fsmenu #fsnavigation {
    text-align: center;
}
.floorscreen #fsmenu #fslegenda {
    position: relative;
    bottom: 15px;
    left: 5px;
    background-color: rgba(255, 255, 255, 0.9);  /* soms gaat het over de buttons */
    padding: 5px;
}

.floorscreen #verdiepingen {
    margin-top: 8px;
}

.floorscreen #theReport
{
    background-color: #f0f0f0;
    width: 650px;
    position: absolute;
    bottom: 10px;
    right: 25px;
    box-shadow: 2px 2px 2px #888888;
    border: 1px solid #888888;
}

.floorscreen #theClock
{
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 20px;
    background-color: transparent;
    color: #888;
    text-align: right;
    z-index: 999;
}

.infodatumfilter
{
    color: #d01111;
}

.rflrscreen #rstable th
{
    background-color: #fffffe; /*backgroundcolor*/
    color: var(--textcolor);
}
.rflrscreen #rstable td
{
    padding: 2px;
    background-color: transparent;
}
.rflrscreen #iframerextratitle
{
    color: var(--frameheaderbackgroundcolor);
}

body.floorscreen3d {
    background-color: #fff;
    margin: 0px;
    overflow: hidden;
}
.bord3d {
    padding: 2px 4px 2px 4px;
    border: 1px outset #fff;
    background-color: rgba(253, 249, 0, 0.7);
    color: #555;
    font-size: 0.8em;
    font-family: Calibri,Tahoma, Arial, Helvetica, Sans-serif;
    line-height: 1.3em;
    border-radius: 4px;
    box-shadow: #333 2px 2px;
    text-align: center;
}
.bord3d .title {
    text-decoration: underline;
    cursor: pointer;
}
.bord3d .body {
   font-weight: bold;
}
#xsldata {
    min-height: 550px;
    font-family: Courier;
}
#req_srtnoti { display: inline; }
/* Tabgrootte zetten werkt helaas niet in IE */
#xsldata, pre {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}
#xsledit label, #xslview label {padding-right: 10px;}
#xslview {padding: 8px 0 10px 0;}
#sDocuments {width: 200px;}

#scfcolpicker {
    padding: 10px;
    border: 1px solid black;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f0f0f0;
    z-index: 103;
    box-shadow: 2px 2px 10px #aaa;
}
.scfcolpicker {
    padding: 10px;
    border: 1px solid black;
    position: relative;
    bottom: 100px;
    right: 100px;
    white-space: nowrap;
    background-color: #f0f0f0;
    z-index: 103;
    box-shadow: 2px 2px 10px #aaa;
}
.scfcolpicker td {
    cursor: pointer;
}
#scfcolpicker select, #rscolpicker select {
    width:150px;
}

#scfcolpicker td:hover, #rscolpicker td:hover, #rscolpicker td label:hover {
   cursor: move;
}

#scfcolpicker td input {
   cursor: pointer;
}
#scfcolpicker .buttons {
    text-align: center;
}
#scfcolpicker .button {
    width: auto;
}
tr.rscols_combined td {
   padding-left: 10px;
}

#btn_bez_morevis, #btn_bez_morevis span, #btn_bez_import, #btn_bez_import span, #btn_add_sub,
#prsBedrijfadres fa-folder-open, #btn_sle_morerooms, #btn_bes_del_complete, #ins_add_object_connect, #btn_faq_add_room, #btn_faq_add_stdm
{
    border-color: transparent!important;
}

.ui-widget-content {
    border: 1px solid #eee;
}
.ui-dialog:not(.ui-resizable) .ui-dialog-content {
    position: static;
}

li.hiddenbutton {
   padding: 0!important;
}

.ui-widget,
.ui-widget button.ui-widget { /* Voor button is dat dus bewust 1.1em * 1.1em */
   font-size: 1.1em;
}

#prodsearchsearch {
   border: 0px;
   line-height: 30px;
}

#showlink {
    border: 0px solid #ccc!important;
    box-shadow: 4px 4px 8px rgba(0,0,0, 0.5);
    text-align: right!important;
    }

tr.report_V td,tr.report_C td {
  background-color: #FEFFBB;
  color: #000;
}
tr.report_S td {
  background-color: #FEFFBB;
}
tr.report_I td {
  background-color: #FEFFBB;
  color: #606060;
}
tr.report_U td {
  background-color: #FEFFBB;
  color: #606060;
}
tr.report_H td {
  color: #a0a0a0;
}

tr.report_H:hover td {
  color: var(--menuitemhovercolor);
}

/* KPI module; niet alles even noodzakelijk */
.kpitcol1, .kpicol1 {
    width: 20%;
}
.kpicol2 {
    width: 45%;
}
table.kpidetails {
    width: 100%;
    margin: 0;
    padding: 0;
}
td.kpidetails {
    font-size: 8pt;
    vertical-align: top;
}
.kpisec_heading {
    background-color: var(--tableheaderbackgroundcolor);
    color: var(--tableheadercolor);
    font-size: 1.8em;
    vertical-align: bottom;
    padding: 4px 0 0 15px;
}
.kpiavg {
    color: #fff;
    font-size: 2em;
    text-align: center;
    vertical-align: middle;
    width: 100px;
    height: 80px;
}
.kpiscore {
    width: 50px;
    text-align: right;
}
.kpioms {
    min-width: 300px;
}

.mjbtotal {
    border-left:1px solid #aaa;
    vertical-align: middle;
}
.mjbjaar, .mjbgeraamd {
    border-left:1px solid #eee;
    vertical-align: middle;
}
.mjbplanned td {
    background-color:  #FCF2E5;
}

/* Conditiescore dcscore1 t/m dcscore6 */
td.dcscore1, td.dcscore2, td.dcscore1_5, td.dcscore2_5 {
    background-color:  #87DD87;
}
td.dcscore3, td.dcscore4, td.dcscore3_5, td.dcscore4_5 {
    background-color:  #FFC859;
}
td.dcscore5, td.dcscore6, td.dcscore5_5 {
    background-color:  #FD7878;
}

/* Prioriteit dpscore1 t/m dpscore9 */

/* Urgentie xcp_prio_1 t/m xcp_prio_3 */
td.xcp_prio_3 {
    background-color: #F00;
    color: #FFF;
}

.fcltscenario, .fcltactsit {
    font-weight: bold;
    font-size: 1.1em;
    padding: 12px;
    text-align: center;
}

.stdmjb {
    color: #aaa;
    font-size: 0.9em;
}
.scenerized1 td, .fcltscenario {
    background-color:  #EEB066;
}
.mjbstd td {
    opacity: 0.9;
}
.mjbxcp td {
    opacity: 1.0;
}

.mjbwaiting td {
    background-color:  #F0F0FA;
}

span.mjborgbedrag {
    color: #ccc;
    font-size: 0.9em;
}
span.draggable .mjborgbedrag {
    color: var(--linkcolor);
}
.mjbafbouw,
.mjbverval,
.mjbplanned.mjbverval {
  vertical-align: middle;
  text-align: center !important;   /* overrule the hardcoded right */

}

td.mjbfreezed {
    background-color: rgba(185, 215, 255, 1);
    color: #000061;
}

td.mjbexecute {
    background-color: rgba(255, 255, 200, 1);
    color: #505000;
}

td.mjbcompleted {
    background-color: var(--fclt-color-good-contrast);
    color: var(--fclt-color-good);
}

td.mjbrejected {
    background-color: rgba(255, 180, 180, 1);
    color: #610000;
}

/* toaster stuff */
.jq-icon-info    {  background-color: #31708f; color: #d9edf7; border-color: #bce8f1; }
.jq-icon-warning {  background-color: #8a6d3b; color: #fcf8e3; border-color: #faebcc; }
.jq-icon-error   {  background-color: #a94442; color: #f2dede; border-color: #ebccd1; }
.jq-icon-success {  background-color: var(--frameheaderbackgroundcolor); color: var(--frameheadercolor); border-color: var(--frameheaderbackgroundcolor); }


.resartikelfoto {
    padding: 2px 2px 2px 20px;
}

.tableFloatingHeader {
    z-index: 10;
}

.hamburger {
    cursor:pointer;
}
.frametabs.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0; /* Niet bij Graphics */
}
td.multi_cb, th.multi_cb {
    text-align: center;
}

span#multilabel, span.footerbutton {
    padding: 3px 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

#termshtml body {
    width: 96%;
    margin-left: 2.5%;
    margin-top:5%;
}
div#terms {
    height: 40em;
    overflow-y:scroll;
    padding: 1em;
}
div#prsAV {
    border: 2px solid #aaa;
}

div.ui-menu-tabs {
    background-color: var(--menubackgroundcolor);
    color: var(--menucolor);
}

div.menuHeadSpacer
{
    background-color: var(--menubackgroundcolor);
    cursor: pointer;
    padding: 0;
    margin: 0;
    height: 2px;
}

.fldissuetype {
    width: 80%;
}

@media all and (min-width: 40em){
    #termshtml body {
        width: 60%;
        margin-left: 20%;
        margin-top:10%;
    }
}
select[multiple]#authorizationgroup {
   height: 150px;
}
img.bb-image,
img.note-image {
    display: block;
    max-height: 800px;
    max-width: 100%;
    border-radius: var(--fclt-border-radius);
    cursor: pointer;
}
section.fullscreen {
    position: fixed;
    inset: 0;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 105;
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(5px);
}
section.fullscreen .top-right {
    position: absolute;
    top: .4em;
    right: .4em;
    font-size: 3em;
    color: white;
}
section.fullscreen .top-right i {
    filter: drop-shadow(0 0 1px black);
}
section.fullscreen img {
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-in;
    transition: transform 50ms ease-in-out;
    border-radius: var(--fclt-border-radius-lg);
}
section.fullscreen img.zoomed {
    transform: scale(2);
    cursor: zoom-out;
}
table#useroptionstable {
    width: 100%;
    cursor: pointer;
}
table#useroptionstable tr {
    color: var(--menuitemcolor);
    background-color:var(--menuitembackgroundcolor);
}
table#useroptionstable tr:hover {
    color: var(--menukophovercolor);
    background-color:var(--menukophoverbackgroundcolor);
}

/* res_rsv_deel_by_placetime.asp */
div.icondate {
    padding-top: 18%;
    font-weight: bold;
    font-size: 1.3em;
}
div.beschikb0 {
    color: #FFF;
    background-color: #E50012;
}
span.beschikb0 {
    color: #E50012;
}
div.beschikb10 {
    color: #FFF;
    background-color: #FF8504;
}
span.beschikb10 {
    color: #FF8504;
}
div.beschikb50 {
    color: #FFF;
    background-color: #A5D200;
}
span.beschikb50 {
    color: #A5D200;
}
div.beschikb100 {
    color : #FFF;
    background-color : #0AAA32;
}
span.beschikb100 {
    color: #0AAA32;
}
div.vrijedag {
    color : #333;
    background-color : #eee;
    cursor: auto;
}
div.vrijweekend {
    color : #f33;
    background-color : #eee;
    cursor: auto;
}
div.werkweekend {
    color : #f33;
    background-color : inherit;
}

.flooravatar {
    display: flex;
    justify-content: center;
    font-size: 17px;
    background-color: rgba(0,0,0,0.3) ;
    font-weight: bold;
    border-radius: 40px;
    padding: 11px;
    width: 48px;
    text-align: center;
    text-wrap: nowrap;
    margin: auto auto;
}

@media all and (min-width: 69em) {
    .flooravatar {
        font-size: 22px;
        padding: 13px;
        width: 58px;
    }
}

@media all and (min-width: 90em) {
    .flooravatar {
        font-size: 28px;
        padding: 18px;
        width: 76px;
    }
}

/* melding afmeld-/samenvattings teksten */
.afmeld-teksten,
.mld-summary {
    display: flex;
    flex-direction: column;
    flex: 1;

    label,
    .header {
        font-weight: 600;
    }
    .header,
    .body {
        font-size: var(--fclt-font-size-s);
        overflow: hidden;
        padding-right: 3.5em;
    }
    .card {
        display: flex;
        cursor: pointer;
        gap: .25em;
        padding: .5em;
    }

    .card::after {
        font-family: "Font Awesome 6 Pro";
        font-size: 2.5em;
        font-weight: 300;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        padding: 0 .5em;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--linkcolor);
    }
    .card:hover {
        &::after {
            font-weight: 400;
            color: var(--linkhovercolor);
        }
        .header {
            text-decoration: underline;
        }
    }
}
.afmeld-teksten {
    .header,
    .body {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    .body {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    .card::after {
        content: "\2b"; /* fa-plus */
    }
}
.mld-summary {
    white-space: pre-wrap;
    .card::after {
        content: "\f737"; /* fa-clipboard-list-check */
    }
}

/* chatter */
#chat .card-header,
#chatwait .card-header {
    background-color: var(--aareon-fuchsia);
    color: #FFF;
}
#chat .text-wrapper {
    display: flex;
}
#chat textarea {
    transition: box-shadow 150ms ease-in-out;
    background-color: var(--fclt-color-grey-5);
}
#chat .cancelbutton,
#chat .spinnerbutton,
#chat .sendbutton {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    transition: box-shadow 150ms ease-in-out;
}
#chat .cancelbutton:active,
#chat .spinnerbutton:active,
#chat .sendbutton:active,
#chat textarea:focus {
    box-shadow: 0 0 0 3px var(--aareon-fuchsia);
}
#chatqueue tr[title] {
    cursor: pointer;
}

.chatmodal {
    background-color: var(--aareon-tangerine);
}
.chatbody {
    background-color: #ddd;
}
.chatdisclaimer {
    font-size: 1.1em;
    padding-bottom: 20px;
}
.chatinitialmsg {
    padding-bottom: 4px;
    font-style: oblique;
}
.chatbody .fldpers {
    text-align: center;
    padding: 5px;
    width: 90%;
    display: inline-block;
    font-weight: bold;
    text-decoration: underline;
}
.chattime {
    font-size: 0.8em;
    padding-right: 6px;
    opacity: 0.8;
    float: right;
}
.chatmsg {
    display: block;
    padding: 0 4px 0 4px;
    border-radius: 4px;
    padding: 5px;
}
.chatmsg.self {
    margin: 0 30px 0 5px;
    background-color: #ebf6ff; /* geen harde kleuren */
}
.chatmsg.other {
    margin: 0 5px 0 30px;
    background-color: #96cbfb;/* geen harde kleuren */
}
.chathistory {
    overflow: auto;
    width:100%;
    margin-bottom: 10px;
}
.chatinput {
    margin: 0 10px 0 10px;
}
.chatinput textarea {
    height: 80px;
    width: 100%;
}
.chatbuttons {
    min-width: 30px;
}
.chatwaiting {
    height: 200px;
    text-align: center;
    padding-left: 20%;
    display: flex;
    align-items: center;
}
.chatwaitingstop {
    display: flex;
    align-items: center;
    padding-left: 45%;
}
.chatmsg.system {
    font-style: italic;
    background-color: silver;
}
.chatmsg.inactive {
    background-color: beige;
}
.chatmsg.aborted {
    background-color: orange;
}

/*////////////////////////////////////////////////////////
//                                                      //
// New design classes voor Detailschermen (show & edit) //
//                                                      //
////////////////////////////////////////////////////////*/

/*  ==============================
    Globals
    ==============================  */

iframe.inactive {
    pointer-events: none;
}

.ui-widget-overlay {
    pointer-events: none;
}

/* Voor vervolg pop-ups wel de achtergrond onbeschikbaar maken */
.ui-dialog:not([aria-describedby="fcltmodal1"]) + .ui-widget-overlay {
    pointer-events: auto;
}

.fcltframe.hot-overlay::after {
    content: "";
    z-index: 100; /* modal -1 */
    pointer-events: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #ffffff;
    opacity: .4;
}

.no-select {
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
}

/*  ==============================
    Layout
    ==============================  */

/* Sidebar wordt gebruikt voor het notitie-iframe (in IFRAMER) */
/* Resize Section */
.sidebar.sidebar-transition {
    transition: flex-basis 150ms ease-in-out;
}
.sidebar.collapsed {
    flex-basis: 40px;
}

.sidebar-toggler {
    position: absolute;
    display: flex;
    align-items: center;
    padding: 0 0.35em;
    color: var(--buttoncolor);
    background-color:var(--buttonbackgroundcolor);
    cursor: pointer;
    border-radius: 4px 2px 2px 4px;
    transition: background-color 0.2s;
}

.resize-area,
.sidebar .resizeHandle {
    position: absolute;
    height: 100%;
    cursor: ew-resize;
}

/* Gewoon alles hiden in logboek modus */
.logboek .content-wrapper > *:not(.fcltframeheader) {
    display: none;
}

/* Logboek modus; maak dan notitieframe 100% breed (en override opgeslagen breedtes) */
[aria-hidden="false"].col-12 ~ .sidebar {
    max-width: 100%!important;
    flex-basis: 100%!important;
}

/* Logboek modus of scherm zo smal dat de frames onder elkaar wrappen; hide resize handlers */
[aria-hidden="false"].col-12 ~ .sidebar > .resizeHandle,
[aria-hidden="false"].col-12 ~ .sidebar > .sidebar-toggler {
    display: none;
}

.resize-area {
    width: 100%;
    z-index: 104;
    top: 0;
    left: 0;
}

.sidebar .resizeHandle {
    width: 0.5em;
    font-size: 1.1em;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: calc(0.5em / 2 / 1.1 - 2px);
    border-left: 1px solid rgba(0, 0, 0, 0.05);
}
/* \End Resize Section */

.flex-center {
    justify-content: center;
}

.block-wrapper {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    min-width: 368px; /* is sowieso nooit kleiner, en zo 'pre-render' je, sortof, en voorkom je HELEMAAL in elkaar gedrukte pagina's tijdens het renderen (is de bedoeling) */
}

/* Deze lost het pre-render verhaal aardig op */
.container-fluid form, .tabbody {
    display: contents;
    width: 100%;
}

/* Niet-bootstrap div's die zich toch in de bootstrap container bevinden (lijsten bijv.) moeten zich nog als div gedragen (block = width 100%) */
.container-fluid > .row > div:not(.block-wrapper, .col, [class^="col-"], [class*=" col-"]) {
    flex-basis: 100%;
}

.search-block-wrapper {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.search-block-wrapper table {
    width: 100%;
}

.simple-block-wrapper {
    padding: 0;
}

/*  ==============================
    Headers
    ==============================  */

.search-page-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--tableheaderbackgroundcolor);
    color: var(--tableheadercolor);
    margin: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--fclt-border-radius);
}

.scf_extrafilter {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
}

select.fld.extrafilter {
    width: auto;
    min-width: 130px;
}

.buttoncontainer.smallbuttons > #buttons:not(.hambdropdown) > ul > li {
    font-size: 0;
    display: inline-flex;
    padding: 3px 12px;
}

.buttoncontainer.smallbuttons > #buttons:not(.hambdropdown) > ul > li > i {
    font-size: calc(1rem * 0.75 /* body */ * 1.1 * 1.1); /* todo; simplify; 14.52px */
    line-height: calc(1.8rem * 0.75 /* body */); /* todo; simplify, 1.35rem */
}

/*  ==============================
    BLOCK
    ==============================  */

.block-sizer {
    position: absolute; /* Zodat het de document flow niet beinvloed onload */
    left: 0; /* zzZ IE11 */
    border: 0;
    margin: 0;
    padding: 0;
    height: 0;
    visibility: hidden;
}

/*  ==============================
    Card
    ==============================  */

.card {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 0 1px 0 rgba(48,49,51,0.05), 0 8px 16px 0 rgba(48,49,51,0.1); /* extracted from Aareon mockups */
}

.card-header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.3em; /* fontafhankelijk */
}

/* Om resultsettables binnen een card strak aan de borders te zetten (want card-body heeft 20px padding) */
.card-body:not(.nopadding) > *:nth-child(n+1):nth-child(-n+5).divrstable, /* Alleen als ik tussen de eerste 5 children zit */
.card-body:not(.nopadding) > table > tbody > tr:first-child > td:first-child > .divrstable {
    margin: -1.25rem;
}

/* voor niet-resultsets (tables?) die ook geen padding willen */
[class^=col-].nopadding,
.card-body.nopadding {
    padding: 0;
}

/*  ==============================
    Content
    ==============================  */

input.fld:not([type='checkbox']):not([type='submit']),
select.fld, select.fldmulti, select.multiSuggest,
textarea.fldtxt
{
    width: 100%;
}

input.fld.fld.flduo.flduo,  /* Deze input (classes dubbel benoemd om css-specificity te verhogen) */
input.flduo + select.fld {  /* En zijn opvolger */
    width: 50%;
}

.button-spacer {
    height: 30px;
    width: 100%;
    position: relative;
    visibility: hidden;
}

/* Bootstrap's collapse */
.collapse:not(.show) {
    display: none;
}

/* Is bootstrap collapsible */
[data-toggle="collapse"] {
    cursor: pointer;
    .span_treatable {
        right: 1rem;
    }
}
[data-toggle="collapse"] > .card-header-content::after {
    font-family: 'Font Awesome 6 Pro';
    font-weight: 300;
    content: "\f078";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
[data-toggle="collapse"][aria-expanded="false"] > .card-header-content::after {
    content: "\f053";
}

span.default-clickable-icon,
label[for] {
    cursor: pointer;
}
span.default-clickable-icon:hover > i {
    color: var(--buttonhoverbackgroundcolor);
    font-weight: 900;
}

/*////////////////////////////////////////////////////////
//                                                      //
//                  Framework Setup                     //
//                                                      //
////////////////////////////////////////////////////////*/
.steps,
.frameworks {
    display: flex;
    gap: var(--fclt-gap-xl);
    justify-content: space-around;
}
.frameworks {
    flex-wrap: wrap;
}

.steps > .step,
.frameworks > .framework {
    position: relative;
    flex-basis: calc(100% / 3 - var(--fclt-gap-xl) * 2 / 3);
}
.steps > .step {
    font-size: 1.5em;
    font-weight: 600;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: var(--fclt-gap-sm);
    padding: 1em;
}
.setupBlock .card-body {
    font-size: 1rem;
}
.frameworks > .framework {
    display: flex;
    flex-direction: column;
    border: 0;
}
.framework > * {
    flex-basis: 50%;
}
.framework figure {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    max-width: 100%;
    margin: 0;
    overflow: hidden;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
figure img {
    max-width: 100%;
}
.framework figcaption {
    font-size: 2em;
    position: absolute;
    bottom: 1em;
    right: 1em;
    font-weight: 600;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 .25em .25em rgba(0, 0, 0, 0.5);
}
.framework .content {
    padding: 0 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card.selectable {
    cursor: pointer;
}
.step.active {
    background-color: var(--aareon-color-1);
    color: #FFFFFF;
    box-shadow: var(--aareon-color-1) 0 0 16px 0;
}
.framework.disabled {
    opacity: .6;
    cursor: not-allowed;
}
.framework.disabled::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0,   0,   0,   0.05),
        rgba(0,   0,   0,   0.05) 10px,
        rgba(255, 255, 255, 0.05) 10px,
        rgba(255, 255, 255, 0.05) 20px);
    border-radius: inherit;
}
.card.selectable.active,
.card.selectable:hover {
    box-shadow: var(--aareon-color-2) 0 0 16px 0;
}
.card.selectable.active {
    background-color: var(--aareon-color-2);
    color: #FFFFFF;
}
.card.selectable.active figcaption {
    background-color: var(--aareon-color-2);
    box-shadow: 0 0 .25em .25em var(--aareon-color-2);
}

.setup-buttons > #buttons > ul {
    display: flex;
    justify-content: space-evenly;
}
.attention {
    font-size: 1.5em;
    font-weight: 600;
    color: #e60404;
    padding: 2em;
    line-height: 1.3em;
}

/*////////////////////////////////////////////////////////
//                                                      //
//                   Notitie frame                      //
//                                                      //
////////////////////////////////////////////////////////*/

[id$="Historie"].card {
    background-color: transparent; /* anti-bootstrap-default-white */
    border: 0;
    box-shadow: none;
}

[id$="Historie"] > .card-header {
    background-color: var(--notesbackgroundcolor);
    color: var(--main-color-contrast);
    border-bottom: 1px solid transparent;
}

[id$="HistorieList"].card-body {
    font-family: var(--fontfamily), "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans",
                    "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

[id$="HistorieList"] input[type=checkbox]:checked:before,
[id$="HistorieList"] input[type=radio]:checked:before {
    color: var(--notesbackgroundcolor);
}

section.edit-note,
.mldshowactie:is(.fclt-info, .fclt-warning) {
    border: 1px solid var(--notesbackgroundcolor);
    border-radius: 0 0 var(--fclt-border-radius-lg) var(--fclt-border-radius-lg);
    transition: filter 150ms ease;
}

section.edit-note {
    background-color: rgba(255, 255, 255, 0.5);
}
.mldshowactie.fclt-info {
    background-color: var(--fclt-color-neutral-contrast);
    color: var(--fclt-color-neutral);
}
.mldshowactie.fclt-warning {
    background-color: var(--fclt-color-bad-contrast);
    color: var(--fclt-color-bad);
}
.noti-info + .mldshowactie:is(.fclt-info, .fclt-warning) {
    border-radius: var(--fclt-border-radius-lg);
}

section.edit-note.dragon {
    filter: brightness(.9);
}

/* Als ik na een niet-lege en zichtbare div kom, maar dan ook mijn bovenste borders rond */
:is(div, span):not([style*="display: none"]):not(:empty) ~ form > section.edit-note {
    border-radius: var(--fclt-border-radius-lg);
    margin-top: 0.5em;
}

/*  =================
    Extra notificatie
    ================= */

.note-notification {
    font-style: italic;
}

/*  =============
    Textarea blok
    ============= */

.note-textarea {
    position: relative;
}

.edit-note .text-styles {
    border: 0;
    line-height: unset;
    background-image: none;
    background-color: transparent;
}
.edit-note .text-styles.closed + .note-textarea > textarea {
    border-top: 0;
}
.edit-note .text-styles.closed > .text-style-toggle {
    background-color: #f7f1e6 !important; /* Harde kleur */
}

.note-textarea > textarea {
    resize: vertical;
    width: 100%;
    margin: 0;
    border-bottom: 1px solid var(--notesbackgroundcolor);
    border-top: 1px solid var(--notesbackgroundcolor);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    transition: box-shadow 150ms ease-in-out;
    outline: 0;
}

.note-textarea > textarea {
    display: block;
    min-height: 5em;
    padding: 0.5em;
}

.note-textarea > textarea.mentioning {
    caret-color: var(--notesbackgroundcolor);
    cursor: wait;
}

.note-edit > textarea {
    min-height: 8.4em;
}
.note-textarea > textarea:focus {
    box-shadow: inset 0 0 0 2px var(--notesbackgroundcolor);
}

.note-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    padding: 0.5em 0;
    margin: 0 0.5em;
    border-bottom: 1px dotted var(--notesbackgroundcolor);
}
.note-body > .note-attachments {
    padding: 0.5em 0 .125em;
    margin: 0;
    border-top: 1px dotted var(--notesbackgroundcolor);
    border-bottom: 0;
}
.note-attachments:empty {
    padding: 0;
    border: 0;
}
.note-attachment {
    display: inline;
    border: 1px solid var(--notesbackgroundcolor);
    padding-left: 0.75em;
    border-radius: var(--fclt-border-radius);
    background-color: rgba(255, 255, 255, .5);
    color: var(--textcolor);
}
.note-body .note-attachment {
    padding: .125em .5em .125em .25em
}
.note-body .note-attachment:hover {
    box-shadow: inset 0 0 2px -1px black;
}
.note-body .note-attachment,
.note-attachment-image {
    cursor: pointer;
}
.note-attachment-delete {
    border-left: 1px solid var(--notesbackgroundcolor);
    padding: 0.4em;
    margin-left: 0.5em;
}
.note-attachment-delete > * {
    pointer-events: none;
}

.note-icon {
    font-size: 16px;
    color: var(--textcolor);
    outline-color: var(--textcolor); /* Als je er naar tab't */
    margin: auto 0 auto 0.25em;
}
.note-submit-wrapper {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: flex-end;
}
.note-icon.submit {
    margin-right: 0.5em;
}
.note-icon i {
    cursor: pointer;
    padding: 6px;
}
.note-icon.close i {
    padding: 6px 10.5px; /* Deze is iets dunner, dit maakt hem vierkant */
}

.note-icon i:hover {
    font-weight: 400;
}
.note-icon i:active {
    font-weight: 900;
}

/*  ===========
    Reply-block
    =========== */

.note-textarea > .reply-wrapper + textarea {
    padding-top: 6.5em;
}

.reply-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: 4.5em;
    width: 100%;
    margin: 1em 0;
}
.note-textarea > .reply-wrapper {
    position: absolute;
}

.reply-container {
    width: calc(100% - 2em);
    max-height: 4.5em;
    border-radius: 5px;
    padding: 0.25em;
    margin: 0 1em;
    background-color: rgba(0, 0, 0, 0.03);
    border-left: 0.3em solid var(--notesbackgroundcolor);
}

div.reply-header,
.reply-body {
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 .25em;
}

.reply-body {
    display: block;
    color: var(--textcolor);
}

/* Onderstaande werkt niet in IE11, maar boeie, het gaat alleen om de ellipsis [...] */
.reply-body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    max-height: 1.8em; /* Dit is de IE11 fallback, hoogte = 1 line-height */
}

div.reply-header > .default-clickable-icon {
    position: absolute;
    top: 0;
    right: 0;
}

.note-body .reply-container {
    cursor: alias;
}
.note-body .reply-container:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/*  =======
    Toggles
    ======= */

.note-options-groups-wrapper {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-height: 4em;
}

.note-options,
.note-groups {
    position: relative;
    padding: 0.5em 0;
}
.note-groups {
    padding: 0.5em;
}

/* DEPRECATED */
.note-options > div,
.note-groups > div {
    position: relative;
    white-space: nowrap;
}
.switch-container ~ div > label {
    padding-left: 2.25em;
}
.switch-container ~ div > input[type=checkbox] {
    position: absolute;
    transform: translateY(40%);
    margin-left: 0.33333em;
}

/* Kleuren voor de switch-toggler binnen de noteFrame */
.note-options .switch-checkbox:checked ~ .switch-label::before {
    background-color: var(--notesbackgroundcolor);
}
.note-options .switch-label.active,
.note-options .switch-label:active {
    color: var(--notesbackgroundcolor);
}
/* \DEPRECATED */

/*  ===========
    Toggles new
    =========== */

.note-option-group {
    padding: 0.5em;
    height: 3em;
    max-width: 275px;
    font-size: 0.75rem;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 .25em .25em 0.5em;
    cursor: pointer;
}
.note-option-group > .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0.25em;
    padding-right: 0.5em;
}
.note-option-group .fa-stack {
    opacity: 1;
    flex-shrink: 0;
    height: 3em;
    width: 2.5em;
    line-height: 3em;
    cursor: pointer;
    transition: opacity 150ms;
}
/* Kleur van de tekst en de icoontjes */
.note-option-group,
.note-option-group .fa-stack.off {
    color: #aaa;
}

.note-option-group .fa-stack .fa-slash {
    transition: opacity .1s,
                transform .1s;
    transform: scaleX(-1); /* = fa-flip-horizontal */
}
.note-option-group .fa-stack .fa-lock,
.note-option-group .fa-stack .fa-unlock {
    transition: opacity .1s;
}
.note-option-group .fa-stack.on .fa-slash,
.note-option-group .fa-stack:not(.on) .fa-unlock,
.note-option-group .fa-stack.on .fa-lock {
    opacity: 0;
    z-index: -1;
}
.note-option-group .fa-stack.on .fa-slash {
    transform: scale3d(-1.5, 1.5, 1.5);
}
.note-option-group .name.disabled,
.fa-stack.disabled {
    cursor: not-allowed;
}
.note-option-group.anySelected,
.note-option-group.anySelected .fa-stack.on,
.note-option-group .fa-lock,    /* lock en unlock gewoon altijd */
.note-option-group .fa-unlock {
    background-color: transparent;
    color: var(--textcolor);
}

.note-option-group .fa-stack:not(.disabled):hover {
    animation: wiggle 150ms 2;
}

label[data-toggle-type] + input[type=checkbox] {
    display: none;
}

.note-options {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-basis: 0;
    flex-grow: 100;
}

.animate-typing { /* De flex-container */
    display: flex;
    & > div { /* De inner-container, zodat de werkelijke tekst naar 100% van deze breedte kan groeien */
        overflow: hidden;
        & > div { /* Hierin staat de daadwerkelijke tekst */
            overflow-x: clip;
            white-space: nowrap;
            text-overflow: ellipsis;
            border-right: 0.125em solid transparent;
            padding: 0 0.125em;
            animation:
                typing 1.5s steps(40, end),
                blink-caret .75s step-end 4;
        }
    }
}

@keyframes typing {
    from, to { text-overflow: clip; }
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--textcolor); }
}

@keyframes reply-icon {
    33% { transform: rotate(45deg)  scale(1.25); }
    50% { transform: rotate(-15deg) scale(1.5); }
    67% { transform: rotate(30deg)  scale(1.25); }
}

@keyframes wiggle {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(-5deg); }
}

@keyframes overlay-lowlight {
    0% { opacity: 0; }
    25% { opacity: 0.25; }
    75% { opacity: 0.25; }
    100% { opacity: 0; }
}

/*  ==========
    De notitie
    ========== */

.note-date-wrapper,
.note-wrapper {
    position: relative;
    display: flex;
}

/*  =============
    Notitie datum
    ============= */

.note-date-wrapper {
    border-top: 1px solid var(--fclt-border-color);
    margin: 0.75em 2%;
}

.note-date {
    background-color: #f5faf9;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    height: 1em;
    line-height: 1em;
    padding: 8px 2%;
    border-radius: var(--fclt-border-radius);
}

/*  ===============
    Notitie wrapper
    =============== */

.notes-wrapper {
    padding: 0 1em;
}
.fclt-news-card + .notes-wrapper {
    margin-bottom: var(--fclt-news-card-spacing);
}

.notes-wrapper.collapsed {
    display: none;
}

/* Notities van jezelf */
.note-type-self {
    justify-content: flex-end;
}

/*  =================
    Notitie container
    ================= */

.note-container {
    position: relative;
    width: 85%;
    padding: 0.5em 1em;
    margin: 0.5em 0;
    box-shadow: -0.1em 0.2em 0.2em rgb(0, 0, 0, 0.2);
    .nieuwsitem & {
        box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15),
                    -4px 4px 8px rgba(0, 0, 0, 0.1);
    }
    border-radius: var(--fclt-border-radius);
}

.note-container .lowlight-overlay {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background-color: black;
    border-radius: inherit;
    animation: overlay-lowlight 1s;
}

/*  =============
    Notitie types
    ============= */

/* Eigen notities */
.note-type-self > .note-container {
    box-shadow: 0.1em 0.2em 0.2em rgb(0, 0, 0, 0.2);
    .nieuwsitem & {
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15),
                    4px 4px 8px rgba(0, 0, 0, 0.1);
    }
}

/* Tracking */
.note-container.note-type-tracking {
    box-shadow: none;
}

/* Gemailde notities */
.note-wrapper > .note-container.note-uitv-hidden.note-type-email,
.note-wrapper.note-type-self > .note-container.note-uitv-hidden.note-type-email,
.note-wrapper > .note-container.note-fe-hidden.note-type-email,
.note-wrapper.note-type-self > .note-container.note-fe-hidden.note-type-email {
    background-color: #dee6ee;
    color: var(--textcolor);
 }
.note-wrapper.note-type-self > .note-container.note-type-email,
.note-wrapper > .note-container.note-type-email {
    background-color: #C1DCF7;
}

/* Gewone notities, geen onderscheid meer tussen eigen en andermans */
.note-wrapper > .note-container, /* note_fe_visible is impliciet */
.note-wrapper.note-type-self > .note-container {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Opdracht notities bij de melding iets lichter dan normaal (de background-image conflicteert niet met de reeds gesette background-color) */
#mldHistorie .note-wrapper > .note-container.note-module-ord, /* note_fe_visible is impliciet */
#mldHistorie .note-wrapper.note-type-self > .note-container.note-module-ord {
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0.25));
}

/* Niet zichtbaar voor FE / UITV */
.note-wrapper > .note-container.note-uitv-hidden,
.note-wrapper.note-type-self > .note-container.note-uitv-hidden,
.note-wrapper > .note-container.note-fe-hidden,
.note-wrapper.note-type-self > .note-container.note-fe-hidden {
    background-color: #D9E4E3;
    color: var(--textcolor);
}
/* Tracking */
.note-wrapper > .note-container.note-type-tracking {
    background-color: #fffffe; /* backgroundcolor */
}

.note-wrapper.highlight > .note-container {
    background-color: #D9E4E3;
}

/* Lowlight voor uitgezette vragen (de background-image conflicteert niet met de reeds gesette background-color) */
#opdrHistorie .note-wrapper.note-marked > .note-container,
#mldHistorie .note-wrapper.note-marked.note-type-self > .note-container {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0,   0,   0,   0.05),
        rgba(0,   0,   0,   0.05) 10px,
        rgba(255, 255, 255, 0.05) 10px,
        rgba(255, 255, 255, 0.05) 20px);
}
/* En bijbehorende hover */
#opdrHistorie .note-wrapper.note-marked > .note-container:hover,
#mldHistorie .note-wrapper.note-marked.note-type-self > .note-container:hover {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0,   0,   0,   0.02),
        rgba(0,   0,   0,   0.02) 10px,
        rgba(255, 255, 255, 0.02) 10px,
        rgba(255, 255, 255, 0.02) 20px);
}

/* Highlight voor 'onbeantwoordde'-vragen (alleen bij MLD) */
#mldHistorie .note-wrapper.note-marked:not(.note-type-self) > .note-container {
    box-shadow: 0 0 .4em .25em var(--aareon-grapefruit);
    transition: box-shadow 150ms;
}
/* En bijbehorende hover */
#mldHistorie .note-wrapper.note-marked:not(.note-type-self) > .note-container:hover {
    box-shadow: 0 0 .25em .15em var(--aareon-grapefruit);
}

/* Animatie voor het reply icoontje bij onbeantwoordde notities (alleen bij MLD) */
#mldHistorie .note-wrapper.note-marked:not(.note-type-self) .note-button-more.open:hover .fa-reply,                                              /* In de dropdown */
#mldHistorie .note-wrapper.note-marked:not(.note-type-self) .note-container:hover .note-header-right-wrapper > .note-button-reply > .fa-reply {  /* Directe actie */
    animation: reply-icon 0.75s 1;
}

/*  ==============
    Notitie header
    ============== */

.note-header {
    display: flex;
    justify-content: space-between;
}

/* Ruimte tussen spans rechts in de notitie header */
.note-header-right-wrapper > span:first-child ~ span {
    margin-left: 2px;
}

/* Notitie auteur icoontje */
.note-author-icon {
    font-size: 1.2em;
    margin-right: .25em;
}

/* Notitie auteur */
.note-author {
    font-size: 1.2em;
    color: var(--aareon-ink-blue);
}

/* Notitie tijd */
.note-timestamp {
    margin-left: auto;
}

/* Gewijzigd-tekst */
.note-edited {
    color: #A0A0A0;
    font-size: 10px;
    padding-top: 4px !important;
}

/* Dropdown-knop/icoon */
:is([class$=-button-more], [class*=-button-more ]) {
    position: relative;
}

/* Dit element zorgt ervoor dat je met een klik op de achtergrond het dropdownmenu dichtklapt */
:is([class$=-button-more], [class*=-button-more ]).open::after {
    content: "";
    z-index: 11;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    cursor: auto;
}

/* Het actiemenu bij individuele notities (alleen als meer dan 1 actie mogelijk is) */
[class$=-action-menu] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -1;
    min-width: 200px;
    border-radius: var(--fclt-border-radius);
    padding: .8em 0;
    background-color: var(--notesbackgroundcolor);
    background-image: linear-gradient(
                        rgba(255, 255, 255, 0.98),
                        rgba(255, 255, 255, 0.98));
    box-shadow: 0 0 .3em rgba(255, 255, 255, 0.5),
                0 0 .3em var(--notesbackgroundcolor);
    opacity: 0;
}

:is([class$=-button-more], [class*=-button-more ]).open > [class$=-action-menu] {
    z-index: 12;
    opacity: 1;
}

[class$=-action-menu] > [class*=-button-] {
    z-index: 13;
    line-height: 2.8em;
    padding: 0 0.75em;
}

[class$=-action-menu] > [class*=-button-]:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

[class$=-action-menu] > [class*=-button-] > i {
    margin-right: 0.5em;
    color: var(--notesbackgroundcolor);
}

/*  ============
    Notitie body
    ============ */

.note-body {
    position: relative;
    line-height: 1.4em; /* Pas ook autocollapse en collapsed height aan */
}

/* Hier zit de notitie-tekst in */
.note-text {
    overflow: hidden;
    max-height: 175em; /* = 125 regels x1.4em */
    transition: max-height 150ms cubic-bezier(1, 0, 0, 0);
}
.note-text table {
    table-layout: fixed;
    width: 100%;
}

/* Inline-reply */
.note-body > .reply-wrapper,
.note-body > .reply-wrapper > .reply-container {
    width: 100%;
    margin: 0;
    line-height: 1.8em;
}
.note-body > .reply-wrapper {
    margin-bottom: .5em;
}
.note-text.note-autocollapse,
.note-text.note-collapsed {
    transition: max-height 150ms cubic-bezier(0, 1, 0, 1);
}

/* Autocollapse is verder ingeklapt dan collapsed */
.note-text.note-autocollapse {
    max-height: 2.8em; /* 2 regels x1.4em */
}

/* Na 'minder' toggle */
.note-text.note-collapsed {
    max-height: 7em; /* 5 regels x1.4em */
}

.note-text > .bold {
    font-weight: 600;
}

/*  ==============
    Notitie footer
    ============== */

/* De ...meer/...minder toggle */
.note-toggler {
    float: right;
    padding-left: 2em;
    cursor: pointer;
}

/*  ================
    Notitie Top-knop
    ================ */

.note-top-button {
    display: none;
}

@media (min-width: 23em) /* Anders is deze niet echt nodig */
{
    .note-top-button {
        position: fixed;
        right: 1rem;
        top: 3rem;
        z-index: 1;
        height: 2.25rem;
        width: 2.25rem;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: white;
        opacity: 0.6;
        border: 1px solid var(--textcolor);
        cursor: pointer;
    }
    .notes-wrapper .note-top-button:hover {
        opacity: 1;
        color: #fff;
        background: var(--notesbackgroundcolor) radial-gradient(circle, transparent 1%, var(--notesbackgroundcolor) 1%) center/15000%;
    }
}

/*////////////////////////////////////////////////////////
//                                                      //
//                   Widgetpage styles                  //
//                                                      //
////////////////////////////////////////////////////////*/

.widget-container,
.widget-row {
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
}

.widget-title {
    min-height: 24px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.widget-container > div[class*=-col-wrapper] {
    position: relative;
}

.empty-col,
.widget-col {
    height: calc(100% - 10px);
}

[class^=widget-type-] {
    height: 100%;
}

.widget-body [class^=widget-type-] {
    pointer-events: none;
}

.widget-title + [class^=widget-type-] {
    height: calc(100% - 24px);
}

[class^=widget-type-] > * {
    display: block; /* iframe is default inline, maar dat hebben we hier liever niet */
}

.resizing-col-wrapper > .widget-col,
.widget-col-wrapper > .widget-col,
.empty-col-wrapper > .empty-col {
    border: 3.5px solid var(--fclt-color-grey-25);
    margin: 5px;
    background-color: #ffffff;
}

.widget-col-wrapper:not(.resizing-col-wrapper, .ui-draggable-dragging):hover > .widget-col,
.empty-col-wrapper:not(.resizing-col-wrapper ~ .empty-col-wrapper):hover > .empty-col {
    border-color: var(--fclt-color-grey-40);
}

.empty-col-wrapper > .empty-col {
    position: relative;
    border-style: dashed;
}

.empty-col-wrapper .widget-tooltip {
    max-width: 83px;
    text-align: center;
    visibility: hidden;
    overflow: hidden;
}

.widget-container:not(.low-clearance) > .empty-col-wrapper:hover .widget-tooltip {
    visibility: visible;
}
.resizing-col-wrapper ~ .empty-col-wrapper:hover .widget-tooltip,
.widget-container:not(.low-clearance) > .empty-col-wrapper:hover i {
    visibility: hidden;
}

.widget-container:not(.low-clearance) > .resizing-col-wrapper ~ .empty-col-wrapper:hover i {
    visibility: visible;
}

.widget-new-wrapper > .widget-col {
    min-height: 5em;
    border-style: dashed;
}

.big-tooltip {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    overflow: hidden;
}

.big-tooltip > i {
    margin: 0 0.5em;
}

.widget-container + .widget-container .big-tooltip {
    font-size: 0;
    min-height: 150px;
}

.widget-new-wrapper,
.empty-col-wrapper > .empty-col {
    cursor: pointer;
}

.resizing-col-wrapper > .widget-col {
    border-style: dotted;
}

.widget-type-flr img,
.widget-type-img img {
    max-height: 100%;
    max-width: 100%;
}

[class*=widget-type-] iframe {
    width: 100%;
    border: 0;
}

.ui-draggable-handle {
    cursor: -webkit-grab;
    cursor: grab;
}

.ui-draggable-handle:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.ui-droppable-hover > .widget-col,
.ui-droppable-hover > .empty-col {
    opacity: 0.5;
    border-style: dashed;
}

.widget-col-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    font-size: 80px;
    background-color: white;
    pointer-events: none;
}

.ui-droppable-hover .widget-col-bg {
    opacity: 1;
}

.ui-resizable-handle {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    color: var(--textcolor);
}

.ui-resizable-handle.ui-resizable-e {
    right: -3.5px;
}

.ui-resizable-handle.ui-resizable-s {
    bottom: -3.5px;
}

.ui-draggable-dragging > .ui-resizable-handle,  /* Hide eigen column resizer-handle tijdens draggen */
.ui-droppable-active > .ui-resizable-handle,    /* En ook de andere column resizer-handle's */
.ui-draggable-dragging ~ .ui-resizable-s,       /* En ook de eigen row resizer-handle */
.ui-droppable-active ~ .ui-resizable-s {        /* En ook de row resizer-handles */
    visibility: hidden;
}

/* Widget-icon styling */
.icons-wrapper {
    position: absolute;
    top: 4px;
    right: 4px;
    margin-top: 5px;
    margin-right: 5px;
}

.icons-wrapper > .widget-icon {
    display: none;
    width: 35px;
    height: 35px;
    background-color: #ffffff;
    text-align: center;
    color: var(--textcolor);
    border: 1px dashed #ffffff;
    border-radius: 50%;
    cursor: pointer;
}

.widget-icon:hover {
    border-color: var(--textcolor);
}

.widget-container:not(.ui-resizable-resizing) .widget-col-wrapper:not(.resizing-col-wrapper, .ui-draggable-dragging):hover .widget-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.widget-container.ui-resizable-resizing .widget-size {
    display: block;
}
.widget-size {
    display: none;
    background-color: #fff;
    padding: 0 0.2em 0 0.5em;
    margin: 0.2em;
    opacity: 0.8;
    border-radius: 0.2em;
    color: var(--aareon-urban-grey);
}

.widget-size-value::after {
    content: "px";
}

.empty-col {
    color: var(--textcolor);
}

.empty-col > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Met deze is bootstrap niet nodig (beter goed gejat ..) */
.item-width-0 {  flex: 0 0 100px;  visibility: hidden; }
.item-width-1 {  width: 8.33333%;  width: calc(99.98% / 12 * 1);   }
.item-width-2 {  width: 16.66666%; width: calc(99.98% / 12 * 2);   }
.item-width-3 {  width: 25%;       width: calc(99.98% / 12 * 3);   }
.item-width-4 {  width: 33.33333%; width: calc(99.98% / 12 * 4);   }
.item-width-5 {  width: 41.66666%; width: calc(99.98% / 12 * 5);   }
.item-width-6 {  width: 50%;       width: calc(99.98% / 12 * 6);   }
.item-width-7 {  width: 58.33333%; width: calc(99.98% / 12 * 7);   }
.item-width-8 {  width: 66.66666%; width: calc(99.98% / 12 * 8);   }
.item-width-9 {  width: 75%;       width: calc(99.98% / 12 * 9);   }
.item-width-10 { width: 83.33333%; width: calc(99.98% / 12 * 10);  }
.item-width-11 { width: 91.66666%; width: calc(99.98% / 12 * 11);  }
.item-width-12 { width: 100%;      width: calc(99.98% / 12 * 12);  }

.widget-col-wrapper {
    flex-grow: 0;
}

.filler-col-wrapper {
    flex: 1 0 0px;
}

/* Edit-mode */
.widget-container.editable .item-width-0 { visibility: visible; }
.widget-container .item-width-1 {  width: calc((99.98% - 100px) / 12 * 1);   }
.widget-container .item-width-2 {  width: calc((99.98% - 100px) / 12 * 2);   }
.widget-container .item-width-3 {  width: calc((99.98% - 100px) / 12 * 3);   }
.widget-container .item-width-4 {  width: calc((99.98% - 100px) / 12 * 4);   }
.widget-container .item-width-5 {  width: calc((99.98% - 100px) / 12 * 5);   }
.widget-container .item-width-6 {  width: calc((99.98% - 100px) / 12 * 6);   }
.widget-container .item-width-7 {  width: calc((99.98% - 100px) / 12 * 7);   }
.widget-container .item-width-8 {  width: calc((99.98% - 100px) / 12 * 8);   }
.widget-container .item-width-9 {  width: calc((99.98% - 100px) / 12 * 9);   }
.widget-container .item-width-10 { width: calc((99.98% - 100px) / 12 * 10);  }
.widget-container .item-width-11 { width: calc((99.98% - 100px) / 12 * 11);  }
.widget-container .item-width-12 { width: calc((99.98% - 100px) / 12 * 12);  }

.low-clearance .widget-tooltip {
    height: 0;
    font-size: 0;
}

/*////////////////////////////////////////////////////////
//                                                      //
//                    Probeersels                       //
//                                                      //
////////////////////////////////////////////////////////*/

/* Niet getabt? dan frames onder elkaar */
.col:not([aria-hidden], .sidebar) ~ .col[aria-hidden="false"],
.col[aria-hidden="false"] ~ .col:not([aria-hidden], .sidebar),
.fcltframe.col:not([aria-hidden], .sidebar) ~ .fcltframe.col:not([aria-hidden], .sidebar) {
    flex-basis: 100%;
}

#productsearch {
    font-family: var(--fontfamily), 'Font Awesome 6 Pro';
}

.notransition {
  transition: none !important;
}

/* Voor de resize/scrollbars */
.fcltframe {
    position: relative;
    padding: 0px;
    overflow: auto;
}

.fcltframe > iframe {
    display: block;
    width: 100%;
}

/*////////////////////////////////////////////////////////
//                                                      //
//                Bootstrap overrules                   //
//                                                      //
////////////////////////////////////////////////////////*/

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: auto;
    }
}

.col { /* We willen dat deze class wel wrapt indien nodig, met flex-basis: 0 (default) is de width gewoon 0% en wordt er niet ge-wrapt */
    flex-basis: 0.01%;
}

/* Als ik onder col-lg kom dan wrappen de frame onder elkaar, dan moet de onthouden breedte van de sidebar niet gelden en mogen de resizehandlers weg */
@media (max-width: 991.98px)
{
    .sidebar.col-12 {
        flex-basis: 100%!important;
        max-width: 100%!important;
    }
    .sidebar > .resizeHandle,
    .sidebar > .sidebar-toggler {
        display: none;
    }
}

/*////////////////////////////////////////////////////////
//                                                      //
//                jQuery-ui overrules                   //
//                                                      //
////////////////////////////////////////////////////////*/

.ui-widget,
.ui-widget textarea,
.ui-widget button,
.ui-widget input,
.ui-widget th,
.ui-widget td,
.ui-widget select {
    font-family: var(--fontfamily);
}

#ui-datepicker-div {
    z-index: 101!important; /* div.fcltframeheader.floating +1 */
}

li[inmore]:not([inmore="0"]) {
    display: none;
}

/* Want we willen FA icons in, bijvoorbeeld, de FcltMgr.confirm() */
.ui-dialog .ui-dialog-buttonpane {
    display: flex;
    justify-content: center;
    padding-right: 0.4em;
}

.fclt-modal #buttons ul li,
.ui-dialog .ui-dialog-buttonpane button {
    min-width: 7.5rem;
}
.ui-dialog .ui-dialog-buttonpane button:last-of-type {
    margin-right: 0;
}

.ui-dialog-buttonset > .ui-button {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.8em;
}

.ui-dialog-buttonset > .ui-button > .ui-icon {
    line-height: 1em;
    font-size: 1.1em;
    text-indent: 0;
    margin-top: -0.05em;
    background-image: none!important;
}

/* Want jQuery-ui maakt hier telkens 'auto' van maar dat gaat niet goed */
.fcltmodal {
    display: block; /* Prevents inline spacing */
    width: inherit!important;
}

/*////////////////////////////////////////////////////////
//                                                      //
//                Desktop scrollbalk                    //
//                                                      //
////////////////////////////////////////////////////////*/

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--fclt-color-grey-25) rgba(0, 0, 0, 0);
}
*:hover {
    scrollbar-color: var(--fclt-color-grey-40) rgba(0, 0, 0, 0);
}

/* De rest (excl IE11) */
*:not(textarea)::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

/* Het beweegbare gedeelte vd scrollbalk */
*:not(textarea)::-webkit-scrollbar-thumb {
    background-color: var(--fclt-color-grey-25);
    border-radius: 3px;
}

body::-webkit-scrollbar:horizontal:hover { height: 12px; }
body::-webkit-scrollbar-thumb:vertical { border-radius: 50%/3px; }
body::-webkit-scrollbar-thumb:horizontal { border-radius: 4px/50%; }

*:not(textarea)::-webkit-scrollbar-thumb:hover,
*:not(textarea):hover::-webkit-scrollbar-thumb {
    background-color: var(--fclt-color-grey-40);
}

/* De balk zelf */
*:not(textarea)::-webkit-scrollbar-track {
    opacity: 0;
}

#mldbordbody {
    --bord-border-radius: var(--fclt-border-radius-xl);
    background-color: var(--fclt-bg-lowlight);
    #rsMaxHistoryB {
        background-color: transparent;
    }
}

/* Scrollbalk bovenaan voor planbord */
#planbodylist,
#planbodylist > table {
    /* omkeren zodat horizontale scrollbar bovenaan zit */
    transform: rotateX(180deg);
}

#planbodylist,
.mldbord,
.fclt-scrollbar {
    /* horizontaal scrollen */
    overflow: auto hidden;
}

.mldbord {
    scrollbar-width: none;
}
.mldbord::-webkit-scrollbar {
    display: none;
}
.fclt-scrollbar {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    scrollbar-width: auto;
    & > .content-width-clone {
        min-height: 1px; /* width wordt met javascript gezet */
        @-moz-document url-prefix() {
            & {
                min-height: 12px; /* Anders collapsed de scrollbalk naar ~0px */
            }
        }
    }
}
.fclt-scrollbar::-webkit-scrollbar {
    height: 12px;
}

.mldbord-content {
    /* kolommen naast elkaar houden */
    white-space: nowrap;
    font-size: var(--fclt-font-size-m);
}

/* ---------- Cardbox (kolommen) ---------- */
.fclt-cardbox {
    --fclt-cardbox-header-margin-bottom: 1rem;

    /* Layout & boxmodel */
    display: inline-flex;
    flex-direction: column;
    width: 300px;
    min-height: 120px;
    padding: 1rem;
    margin: 0.5rem;
    overflow: hidden;

    /* Revert de nowrap van .mldbord-content */
    white-space: normal;

    /* Visueel */
    background-color: var(--fclt-body-bg);
    border: var(--fclt-border);
    border-radius: var(--bord-border-radius);

    /* Animaties */
    .mldbord-content:not(.no-transition) & {
        transition:
            /* Drag-over */
            box-shadow var(--fclt-animation-duration-s) ease,
            /* Collapse */
            width var(--fclt-animation-duration-l) ease-in-out,
            padding-left var(--fclt-animation-duration-l) ease-in-out,
            padding-right var(--fclt-animation-duration-l) ease-in-out,
            margin-left var(--fclt-animation-duration-l) ease-in-out,
            margin-right var(--fclt-animation-duration-l) ease-in-out,
            border-left-width var(--fclt-animation-duration-l) ease-in-out,
            border-right-width var(--fclt-animation-duration-l) ease-in-out;
    }
}

.compact {
    .fclt-cardbox.empty {
        width: 0;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        border-left-width: 0;
        border-right-width: 0;
        .fclt-cardbox-header-wrapper {
            visibility: hidden;
        }
    }
}

.dragging-content .fclt-cardbox.fclt-drag-over {
    box-shadow: 0 4px 12px var(--fclt-body-color);
}

.fclt-cardbox-header {
    border-bottom: 1px solid var(--fclt-body-color-25);
    line-height: normal;
    padding: .25rem 0 1.25rem 2px;
    margin-bottom: var(--fclt-cardbox-header-margin-bottom);
}
.fclt-cardbox-header-wrapper {
    position: relative;
}
.fclt-cardbox-counter {
    position: absolute;
    font-size: var(--fclt-font-size-s);
    bottom: var(--fclt-cardbox-header-margin-bottom);
    left: 50%;
    transform: translate(-50%, 50%);
    background-color: var(--fclt-body-bg);
    color: var(--fclt-body-color);
    border: var(--fclt-border);
}

/* ---------- Kaarten en 'meer'-knop ---------- */
/* gedeelde transities */
.fclt-card,
.fclt-card-more {
    border: var(--fclt-border);
    margin: 0.5rem 0;
    .mldbord-content:not(.dragging-content, .no-transition) & {
        transition:
            /* Hover */
            transform var(--fclt-animation-duration-s) ease,
            box-shadow var(--fclt-animation-duration-s) ease,
            /* Collapse */
            margin-top var(--fclt-animation-duration) ease-in-out,
            margin-bottom var(--fclt-animation-duration) ease-in-out,
            padding-top var(--fclt-animation-duration) ease-in-out,
            padding-bottom var(--fclt-animation-duration) ease-in-out,
            max-height var(--fclt-animation-duration) ease-in-out,
            border-top-width var(--fclt-animation-duration) ease-in-out,
            border-bottom-width var(--fclt-animation-duration) ease-in-out;
    }
}

/* Kaart */
.fclt-card {
    --fclt-card-body-line-gap: 0.1em;
    /* Layout & boxmodel */
    display: flex;
    flex-direction: column;
    gap: var(--fclt-card-body-line-gap);
    max-height: 7.5rem; /* Voor de transition */
    padding: 10px 12px;
    margin: 0.5rem 0;

    /* Visueel */
    background-color: var(--fclt-body-bg);
    border-radius: var(--bord-border-radius);

    /* Interactie */
    cursor: grab;
}

/* Laatste zichtbare card of toggle geen margin-bottom */
:is(.fclt-card, .fclt-card-more):nth-last-child(1 of .open) {
    margin-bottom: 0;
}

/* 'meer'-knop */
.fclt-card-more {
    /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 0;

    /* Visueel (overgenomen van .fclt-cardbox) */
    background-color: var(--fclt-body-bg);
    border-radius: var(--bord-border-radius);
}

/* Onzichtbare state */
.fclt-card.closed,
.fclt-card-more.closed {
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}

/* hover effecten */
.fclt-card-more:not(.pressed):hover,
.mldbord-content:not(.dragging-content) .fclt-card:not(.pressed):hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px var(--fclt-body-color);
}

/* tijdens drag */
:not(.fclt-drag-over) > .fclt-card.pressed {
    transition: none;
}
.fclt-card.fclt-dragging {
    opacity: 0.5;
}


/* ---------- Bord card header/body ---------- */
.bord-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bord-card-header .icons {
    display: flex;
    align-items: center;
    gap: 0.25em;
}

.bord-card-body {
    line-height: normal;
}

.bord-card-body-line + .bord-card-body-line {
    margin-top: var(--fclt-card-body-line-gap); /* Beetje ruimte tussen de regels */
}

.bord-card-body-line > i + * {
    margin-left: 0.25em;
}

/* De fullcalender-overrules zonder dat we fullcalendar.css aanpassen */
.fc-event-inner {
    font-family: var(--fontfamily_alt);
    font-size: 1.2em;
}

/*////////////////////////////////////////////////////////
//                                                      //
//                 Utility classes                      //
//                                                      //
////////////////////////////////////////////////////////*/
.pointer {
    cursor: pointer;
}

.limit-lines-1,
.limit-lines-2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.limit-lines-1 {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}
.limit-lines-2 {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.semibold {
    font-weight: 600;
}

.default-clickable-button {
    cursor: pointer;
    box-shadow: 0 1px 2px var(--fclt-body-color-25);
    transition:
        transform var(--fclt-animation-duration-xs) ease-in-out,
        box-shadow var(--fclt-animation-duration-xs) ease-in-out;
    &:active {
        transform: scale(98%);
        box-shadow: inset 1px 1px 2px var(--fclt-body-color);
    }
    [tabindex="0"]&:focus {
        outline: 2px solid var(--fclt-body-color);
        outline-offset: 2px;
    }
}


/*////////////////////////////////////////////////////////
//                                                      //
//              Zwaar wegende styling                   //
//                                                      //
////////////////////////////////////////////////////////*/

/* Hieronder alle zwaar wegende styling zodat !important niet nodig is */

/* Expliciet dubbel gedefinieerd (met span erbij om zwaarder te wegen) */
.input-icon-wrapper > span.secsearch {
  display: none;
}
