/* licenced under EUPL, https://eupl.eu/1.2/nl/*/

:root {
    --tileBottomColor: #e8eaee;
    --hoverShadow: 0px 3px 5px rgb(0 0 0 / 20%);
    --bluePrimary: #062a64;
    --bluePrimary-Tint1: #3a5f99;
    --bluePrimary-Tint2: #a7b7d2;
}
/*******************************kanboard***********************************/
#portal_content .tile_wrapper.kanboard {
    padding-left: 0;
}

portal_tile_content {
    margin: 15px 0 15px 0;
}

#portal_content .kanboard{
    /*overflow-y: auto;*/
}


.kanboard .tile{
    padding: 0 !important;
}

.tile_text {
    width: 100%;
    height: auto;
    font-size: 11px;
    line-height: 0.9rem;
    /*even uitgezet*/
    /*overflow: hidden;*/
}

/*padding*/
.tile .top, .tile .center, .tile .bottom {
    padding: 5px;
}

/*top stijling*/
.tile .top {
    display: flex;
    align-items: center;
}

/*top links icoon*/
.tile_icon {
    color: var(--bluePrimary);
    font-size: 0.8em;
    font-weight: bold;
    width: fit-content;
    padding: 0.2em;
    border: 2px solid var(--bluePrimary-Tint1);
    background-color: var(--bluePrimary-Tint2);
}

/*top rechts vetgedrukt*/
.tile .top div:nth-of-type(2) {
    color: var(--bluePrimary-Tint1);
    font-weight: bold;
}

/*center stijling*/
.tile .center {
    border-top: 2px solid white;
    display: flex;
    flex-direction: row;
    min-height: 60px;

}

/*center > links wrapt wél*/
.tile .center .left .tile_text {
    /*text-wrap: wrap;*/
    white-space: break-spaces;
}

/*center > rechts wrapt niet*/
.tile .center .right .tile_text {
    font-style: italic;
}

/*bottom stijling*/
.tile .bottom {
    border-top: 2px solid white;
    background-color: var(--tileBottomColor);
    display: flex;
    flex-direction: row-reverse;
    min-height: 14.391px; /*hetzelfde als een gevulde ".bottom"*/
}

/*alle tekst in bottom iets kleiner*/
.tile .bottom > * {
    font-size: 10px;
}

/*tweede vak in bottom bold*/
.tile .bottom div:nth-of-type(2)  {
    font-weight: bold;
}


/*margin-right kanboard*/
#portal_content .tile_wrapper .kanboard_column{
    overflow-x:hidden;
    position: relative;
}

/*flexportal:179 margin aan elkaar gelinkt moet groter worden i.c.m bredere tegel*/
#portal_content .tile_wrapper .kanboard_column:not(:last-of-type){
    /*margin-right: 15px !important;*/
    margin-right: 0px !important;                                               /*scroll-demo*/
}
#portal_content .tile_wrapper .kanboard_column:last-of-type {
    margin-right: 0;
}



/*tegel hover kanboard*/
#portal_content .tile_wrapper .kanboard_column .tile:hover:not(.disabled) {
    background-color: var(--tileBottomColor) !important;
    box-shadow: var( --hoverShadow);
}

#portal_content .kanboard{
    overflow-y:auto;
}

#portal_content .kanboard .tile_wrapper .columns .tile {
    margin-bottom: 13px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.kanboard .columns::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.kanboard .columns {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/*knoppen in header align rechts*/
.portal_header_icons {
    display: flex;
    flex-direction: row;
    gap: 10px !important;
    margin-right: 20px !important;
}
/*ruimte weg voor flexbox*/
.portal_header_icons div {
    float: none !important;
    margin-left: 0 !important;
    position: unset !important;
}

div.icon {
    gap: 0;
}

/*************************kolom scroll gedrag*************************************/

#portal_content .tile_wrapper.kanboard {
    /*padding-top: 10px;*/    /*voor scroll schaduw even op 0 gezet*/
    padding-top: 0;
}

.kanboard_column .tile_container .tile {
    margin-bottom: 15px !important;
}

/*flex: anders vallen kolommen onder elkaar in dit scenario*/
.tile_wrapper.kanboard {
    display: flex;
    gap: 11.6px;
}

.scroll-wrapper {
    position: relative;
    width: auto;
    height: calc(100% + 10px);
    overflow: hidden;
}

.scroll-area {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 20px;
}

.scroll-area.top {
    top: 0;
}
.scroll-area.bottom {
    bottom: 0;
}

button.scroll {
    width: 98%;
    height: 12px;
    margin: 5px 2px 5px 2px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: none;
}

.scroll svg  {
    width: 12px;
    height: auto;
    fill: var(--bluePrimary-Tint2);
    transition: 500ms;
}


button.scroll:hover {
    background: transparent                                                                  !important;
    border: none !important;

}

button.scroll:hover svg.up, button.scroll:hover svg.down {
    fill:  var(--bluePrimary)                                                                       !important;
    transform: scale(1.3);
}

/*fixme deze weer uitzetten ivm scrollbalk elders*/
.portal_tile_content {
    height: auto !important;
}


.columns.kanboard_column {
    margin-top: 25px;
    margin-bottom: 25px;
}