@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-italic-webfont.woff2') format('woff2'),
         url('fonts/roboto-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/roboto-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

body { margin: 0; padding: 0; background-color: white; color: #333; font-size: 16px; font-family: "Roboto", sans-serif; }

h1 { font-size: 2rem; font-weight: bold; margin: 0 0 1rem 0; }
h2 { font-size: 1.5rem; font-weight: bold; margin: 1rem 0 .5rem 0; }
h3 { font-size: 1.25rem; font-weight: bold; margin: 1rem 0 .5rem 0; }
h4 { font-size: 1rem; font-weight: bold; margin: 1rem 0 .5rem 0; }
p, li { line-height: 1.75em; }
ul, ol { margin: 0; padding: 0; padding-inline-start: 2rem; }
p, ul, ol { margin: .5rem 0; }
a, a:visited, a:active { text-decoration: none; color: #3f5fff; outline: none; }
a:hover { text-decoration: underline; color: #0000bf; }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], input[type=time], textarea, select { background-color: white; padding: 4px 6px;  border: solid #bfbfbf 1px; border-radius: 4px; font-family: "Roboto", sans-serif; font-size: 1rem; }
form .redactor-box.redactor-styles-on { border: solid #bfbfbf 1px !important; border-radius: 4px; font-family: "Roboto", sans-serif; }
form .redactor-box.redactor-focus { border: solid black 2px !important; margin: -1px !important; }
select { width: 600px; padding: 4px 4px; }

div#header { background: #ed2939; color: white; padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 0 8px rgba(0, 0, 0, .5); position: fixed; top: 0; left: 0; right: 0; z-index: 150; }
div#header a { color: white; }
div#header a:hover { text-decoration: none; color: #AED6F1; }
div#htitle { font-size: 2rem; font-weight: bold; flex: 1 0; }
div#hmenu { text-align: right; padding-right: 1rem; }
div#hmenu p { margin: .5rem 0 0 0; }
div#hmenu p:first-child { margin-top: 0; }

div#ctsc { display: flex; min-height: 100vh; }
div#lmenu { flex: 14rem 0 0; border-right: solid 1px #ed2939; font-weight: bold; padding: 5rem 0 0 0; }
div#lmenu > a { display: block; padding: .75rem 0 .75rem 1rem; }
div#lmenu > a i { margin-right: 1rem; }
div#lmenu > a, div#lmenu > a:active, div#lmenu > a:visited  { color: #666; text-decoration: none; }
div#lmenu > a:hover { color: #ed2939; text-decoration: none; }
div#lmenu > a:hover::after  { content: " »" }
div#cts { flex: 1176 1 0; padding: 5rem 1.5rem 1rem 2rem; }

#quick_search { width: 360px; position: relative; }
#quick_search > input { width: 100%; box-sizing: border-box; border-radius: 0; border: 0; outline: 0; }
#quick_search > input::placeholder { color: #ccc; }
#quick_search > ul { width: 100%; position: absolute; top: 100%; list-style-type: none; margin: 0; padding: 0; z-index: 1; border-style: solid; border-color: #ddd; border-width: 1px 1px 0 1px; box-sizing: border-box; box-shadow: 0 8px 8px rgba(0, 0, 0, .2);  }
#quick_search > ul li { display: block; margin: 0; padding: .25rem .5rem; color: #333; background: white; border-bottom: solid 1px #ddd; }
#quick_search > ul li.error_msg { font-style: italic; }
#quick_search > ul li.result:hover { color: #ed2939; cursor: pointer; }
#quick_search > ul li.result::before { font-family: 'Font Awesome 5 Pro'; font-weight: 900; margin-right: .75rem; color: #bbb; }
#quick_search > ul li.result.persoon::before { content: '\f007'; }
#quick_search > ul li.result.organisatie::before { content: '\f0e8'; }
#quick_search > ul li.result.parochiekerk::before { content: '\f67f'; }
#quick_search > ul li.result.project::before { content: '\f0ad'; }
#quick_search > ul li.result.algemeengebouw::before { content: '\f67f'; }
#quick_search > ul li.result.tag::before { content: '\f02b'; }

.dqs_wrapper { position: relative; }
.dqs_label { width: 100%; box-sizing: border-box; }
.dqs_popout { width: 100%; box-sizing: border-box; position: absolute; top: 100%; margin: 0; padding: 0; z-index: 120; border-style: solid; border-color: #ddd; border-width: 0 1px 1px 1px; background-color: white; box-shadow: 0 8px 8px rgba(0, 0, 0, .2); border-radius: 4px; display: none; }
.dqs_popout > .dqs_sb { padding: 6px 8px; display: flex; }
.dqs_popout > .dqs_sb > input[type=text] { flex: 0 1 100% }
.dqs_popout > .dqs_sb > .dqs_clear { flex: 1 0; padding: 4px 4px 4px 12px; font-weight: bold; }
.dqs_popout > .dqs_sb > .dqs_clear:hover { color: #a20e1a; cursor: pointer; }
.dqs_popout > ul li { display: block; margin: 0; padding: .25rem .5rem; color: #333; background: white; border-top: solid 1px #ddd; text-align: left; }
.dqs_popout > ul li.error_msg { font-style: italic; }
.dqs_popout > ul li:hover { color: #ed2939; cursor: pointer; }
.dqs_item, .dqs_add {
    display: inline-block;
    font-family: "Roboto", sans-serif;
    border-radius: 8px;
    font-size: .75rem;
    line-height: normal;
    background-color: white;
    margin: .25rem .5rem 0 0;
}
.dqs_item {
    border: #333 solid 1px;
    padding: 0 2px;
}
.dqs_remove_item { display: inline-block; border-right: solid 1px #333; padding: 4px 6px; }
.dqs_remove_item:hover { color: #ed2939; cursor: pointer; }
.dqs_multi_label { display: inline-block; color: black; padding: 4px; }
.dqs_add {
    transition-duration: .1s;
    padding: 4px 6px;
    margin-right: 0;
    border: #ed2939 solid 1px;
    color: #ed2939;
    outline: none;
}
.dqs_add:hover { background-color: #edbec1; color: #a20e1a; border-color: #a20e1a; cursor: pointer; text-decoration: none; }

div.btns_center { text-align: center; margin: 1rem 0; padding: 0 1rem 0 0; }
div.btns_left { text-align: left; margin: 1rem 0; }
div.btns_right { text-align: right; margin: 1rem 0; }
div.btns_floatleft { float: left; }
div.btns_floatright { float: right; }
span.btns_inline, span.btns_small_inline { display: inline-block; }

div.btns_center button, div.btns_left button, div.btns_right button, div.btns_floatleft button,
div.btns_floatright button, span.btns_inline button, span.btns_small_inline button,
div.btns_center a, div.btns_left a, div.btns_right a, div.btns_floatleft a,
div.btns_floatright a, span.btns_inline a, span.btns_small_inline a
    {
        display: inline-block;
        font-family: "Roboto", sans-serif;
        font-size: 1rem;
        font-weight: bold;
        background-color: #ed2939;
        color: white;
        transition-duration: .1s;
        margin: 0 0 0 1em;
        padding: .75rem 1.5rem;
        border-radius: 8px;
        border: 0;
        outline: none;
    }
div.btns_left button:first-child, div.btns_left a:first-child { margin-left: 0; }

div#lmenu div.btns_center { margin: .5rem 0 1.5rem 0; padding: 0; }
div#lmenu div.btns_center a {
    display: block;
    width: 8rem;
    margin: 0 auto 1rem auto;
    padding: .5rem 0 .5rem 1rem;
    text-align: left;
}

div.btns_center i, div.btns_left i, div.btns_right i, div.btns_floatleft i,
div.btns_floatright i, span.btns_inline i
    { margin-right: 1rem; }

span.btns_small_inline i { margin-right: .5rem; }

span.btns_small_inline button, span.btns_small_inline a {
    padding: 4px 6px;
    margin: 0;
    line-height: normal;
    font-size: .75rem;
    font-weight: 400;
    border: #ed2939 solid 1px;
    background-color: white;
    color: #ed2939;
}

div.btns_center button:hover, div.btns_left button:hover, div.btns_right button:hover, div.btns_floatleft button:hover,
div.btns_floatright button:hover, span.btns_inline button:hover,
div.btns_center a:hover, div.btns_left a:hover, div.btns_right a:hover, div.btns_floatleft a:hover,
div.btns_floatright a:hover, span.btns_inline a:hover
    { background-color: #a20e1a; cursor: pointer; text-decoration: none; }

span.btns_small_inline button:hover, span.btns_small_inline a:hover
    { background-color: #edbec1; color: #a20e1a; border-color: #a20e1a; cursor: pointer; text-decoration: none; }

div.btns_center .btnCancel, div.btns_left .btnCancel, div.btns_right .btnCancel, div.btns_floatleft .btnCancel, div.btns_floatright .btnCancel, span.btns_inline .btnCancel , span.btns_small_inline .btnCancel { background-color: #5f5f5f; }
div.btns_center .btnCancel:hover, div.btns_left .btnCancel:hover, div.btns_right .btnCancel:hover, div.btns_floatleft .btnCancel:hover, div.btns_floatright .btnCancel:hover, span.btns_inline .btnCancel:hover , span.btns_small_inline .btnCancel:hover { background-color: #7f7f7f; cursor: pointer; }

div.toolbar_center { text-align: center; margin: 2rem 0; padding: 0 .75rem 0 0; }

div.toolbar_center button {
    display: inline-block;
    color: #21618C;
    text-decoration: none;
    transition-duration: .1s;
    margin: 0 .75em;
    padding: .5rem .75rem;
    border-radius: 8px;
    border: solid 2px #21618C;
}
div.toolbar_center button .fas { margin-right: .5rem; }
div.toolbar_center button:hover { background-color: #C2DDF0; color: #174361; text-decoration: none; }

table.edit { margin: 1em auto; clear: both; }
table.edit td, table.edit th {
    text-align: left;
}
table.edit tr td { padding: 16px; font-weight: normal; }
table.edit tr th { padding: 16px 16px 16px 0; font-weight: bold; text-align: right; }
table.edit input[type=text], table.edit input[type=password], table.edit input[type=email], table.edit textarea, table.edit select { width: 480px; box-sizing: border-box; font-size: 1rem; }
table.edit input[type=date] { width: 180px; box-sizing: border-box; font-size: 1rem; }
table.edit textarea { height: 120px; }
table.edit .helptext { font-size: 1rem; color: gray; display: block; margin: 4px 0 0 0; }

table.view { margin: .5rem 0 1.5rem 0; clear: both; width: 100%; border-collapse: collapse; }
table.view td, table.view th { text-align: left; padding: .5rem; }
table.view thead th { font-weight: bold; }
table.view tbody tr:nth-child(odd) td { background-color: #e7e7e7; }
table.view tbody tr:nth-child(even) td { background-color: #f3f3f3; }
ul.with_icons { list-style-type: none; padding: 0 0 0 1rem; }
table.view a.far, .with_icons a.far, a.action_icon, span.action_icon, .wel_favo, .niet_favo { color: #ed2939; }
table.view a.far { margin-right: .25em; }
table.view a.far:hover, .with_icons a.far:hover, a.action_icon:hover, span.action_icon:hover, .wel_favo:hover, .niet_favo:hover { color: #a20e1a; text-decoration: none; cursor: pointer; }

table.view thead tr .sorting, table.view thead tr .sorting_asc, table.view thead tr .sorting_desc {
    background-repeat: no-repeat;
    background-position: center left;
    cursor: pointer;
    padding-left: 20px;
}
table.view thead tr .sorting { background-image: url('/static/lib/datatables/images/sort_both.png'); }
table.view thead tr .sorting_asc { background-image: url('/static/lib/datatables/images/sort_asc.png'); }
table.view thead tr .sorting_desc { background-image: url('/static/lib/datatables/images/sort_desc.png'); }

h2.vttitel  { margin: 1rem 0 1rem 0; text-align: center; }
h2.vttitel a.bladeren { font-size: 1rem; font-weight: normal; }
h2.vttitel a.bladeren:first-child { margin-right: 2rem; }
h2.vttitel a.bladeren:last-child { margin-left: 2rem; }

form ul:not(.with_bullets) { margin: 0; padding: 0; list-style-type: none; }
form ul:not(.with_bullets) li { display: block; }
form .redactor-box ul { padding-left: 2rem; list-style-type: disc; }
form .redactor-box ol { padding-left: 2rem; }
form .redactor-box ul li { display: list-item; }
form .redactor-styles ul, form .redactor-styles ol, form .redactor-styles p { margin: .5rem 0; }
form .redactor-styles { font-family: 'Roboto', sans-serif; }
.ta_redactor, #id_uitgebreide_omschr { width: 100%; margin: 0; height: 6rem; }

.errorlist { margin: 0; padding: 0; list-style-type: none; }
.errorlist li { margin: 0; padding: 0; display: block; color: red; }

.linktabs { border-bottom: solid 2px #ed2939; padding: 0 0 0 1rem; margin: 0; }
.linktabs a { display: inline-block; padding: .5em 1em .4em 1em; color: black; }
.linktabs a:hover { color: #ed2939; text-decoration: none; }
.linktabs a.active { margin-bottom: -3px; border-style: solid; border-color: #ed2939 #ed2939 #edbec1 #ed2939; border-width: 2px; background-color: #edbec1; }

p.djmsg { margin: 0 0 1rem 0; text-align: center; }
p.djmsg span { display: inline-block; border-radius: 8px; padding: .5rem 1rem; }
p.djmsg span::before { font-family: 'Font Awesome 5 Pro'; margin-right: .75rem; }
p.djmsg span.info { background-color: #bec2ed; }
p.djmsg span.info::before { content: '\f05a'; }
p.djmsg span.success { background-color: #c2edbe; }
p.djmsg span.success::before { content: '\f058'; }
p.djmsg span.warning { background-color: #edb791; }
p.djmsg span.warning::before { content: '\f5f2'; }
p.djmsg span.error { background-color: #ed9191; }
p.djmsg span.error::before { content: '\f06a'; font-weight:900; font-size: 1.25rem; }

div.kolommen { display: flex; }
div.kolommen > div:not(:first-child) { margin-left: 3rem; }

.modal_container {
    display: none;
    position: relative;
}

.modal_container > div {
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal_container > div > div {
    background-color: white;
    padding: 1rem 2rem;
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

#chooseTagDialog .cat { background: #ed2939; color: white; padding: .5rem 1rem; margin: 1rem 0 0 0; border-radius: 6px; font-weight: bold; text-align: center; }
#chooseTagDialog .cat:hover { background-color: #a20e1a; cursor: pointer; }
#chooseTagDialog ul { list-style-type: none; padding: 0; margin: 0; display: none; }
#chooseTagDialog ul li:not(.nieuw) { margin: 0; text-align: center; padding: .25rem .5rem; border-radius: 6px; }
#chooseTagDialog ul li:not(.nieuw):hover { background-color: #dfdfdf; cursor: pointer; }
#chooseTagDialog .nieuw input { width: 12rem; border-radius: 8px 0 0 8px; border-right: 0; outline: none; }
#chooseTagDialog .nieuw button {
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    font-weight: normal;
    background-color: #ed2939;
    color: white;
    transition-duration: .1s;
    margin: 0 0 0;
    padding: 5px 12px 5px 10px;
    border-radius: 0 8px 8px 0;
    border: 0;
}
#chooseTagDialog .nieuw button:hover { background-color: #a20e1a; cursor: pointer; text-decoration: none; }

#mwKiezenDialog ul { list-style-type: none; padding: 0; margin: 0; }
#mwKiezenDialog ul li { margin: 0; text-align: center; padding: .25rem .5rem; border-radius: 6px; min-width: 12rem; }
#mwKiezenDialog ul li:hover { background-color: #dfdfdf; cursor: pointer; }

.item_with_x { display: inline-block; border-radius: 8px; padding: 0 2px; margin: 0 .5rem 0 0; font-size: .75rem; border: #333 solid 1px; line-height: normal; }
.x_for_item { display: inline-block; border-right: solid 1px #333; padding: 4px 6px; }
.x_for_item:hover { color: #ed2939; cursor: pointer; }
.item_with_x a, .item_with_x span.desc_for_item_with_x { display: inline-block; color: black; padding: 4px; }
.item_with_x a:hover { color: #ed2939; text-decoration: none; }

.card { display: inline-block; width: 100%; margin: 0 0 1rem 0; }
.card .title { background: #ed2939; color: white; padding: .5rem 1rem; margin: 0; border-radius: 6px 6px 0 0; font-weight: bold; }
.card .cts { padding: .5rem 1rem; margin: 0; border-radius: 0 0 6px 6px; border: solid 1px #777; border-top: 0; }
.card .cts ul { margin: 0 0 0 1rem; padding: 0; }
.card .cts ul li { margin: 0; padding: 0; }

.taak_nv { color: #ed2939; }
.taak_vol { color: #00bf00; }
.taak_nv:hover { color: #a20e1a; }
.taak_vol:hover { color: #007f00; }
.taak_nv:hover, .taak_vol:hover { cursor: pointer; }
.taak_nv::before, .taak_vol::before { font-family: 'Font Awesome 5 Pro'; font-weight: 400; }
.taak_nv::before { content: '\f0c8'; }
.taak_vol::before { content: '\f14a'; }

.wel_favo::before { font-family: 'Font Awesome 5 Pro'; font-weight: 900; }
.niet_favo::before { font-family: 'Font Awesome 5 Pro'; font-weight: 400; }
.wel_favo::before, .niet_favo::before { content: '\f005'; }

#agenda_huidige_sessies, #agenda_voorbije_sessies { margin-top: 0; }
.lnk_agenderen, .lnk_agenda_annuleren { color: #3f5fff; }
.lnk_agenderen:hover, .lnk_agenda_annuleren:hover { text-decoration: underline; color: #0000bf; cursor: pointer; }

div#agendapunten { position: relative; }
div#agendapunten > div:not(.ap_drop) { width: 100%; margin: 0 0 1rem 0; position: relative; }
div#agendapunten > div > .titel { padding: .5rem 1rem; margin: 0; cursor: default; display: flex; justify-content: space-between; }
div#agendapunten > div > .titel > div:last-child { text-align: right; }
div#agendapunten > div > .titel > div:last-child > * { cursor: pointer; }

div#agendapunten > div:not(.open) > .titel { border-radius: 6px; border: solid #ed2939 2px; }
div#agendapunten > div.behandeld:not(.open) > .titel { border-color: #999; }
div#agendapunten > div:not(.open) .cts { display: none; }

div#agendapunten > div.open > .titel { background: #ed2939; color: white; border-radius: 6px 6px 0 0; }
div#agendapunten > div.behandeld.open > .titel { background: #999; }
div#agendapunten > div.open .cts { padding: .5rem 1rem; margin: 0; border-radius: 0 0 6px 6px; border: solid 1px #ed2939; border-top: 0; }
div#agendapunten > div.behandeld.open .cts { border-color: #999; }

div#agendapunten > div:not(.open) > .titel a.far { color: #333; }
div#agendapunten > div.open > .titel a.far { color: white; }
div#agendapunten > div > .titel a.far:hover { color: #0000df; }

div#agendapunten > div > .titel .volgorde_ctrl { display: inline-block; width: 1rem; }
div#agendapunten > div > .titel .volgorde_ctrl > i { cursor: pointer; }
div#agendapunten > div:not(.open) > .titel .volgorde_ctrl > i { color: #333; }
div#agendapunten > div:not(.open) > .titel .volgorde_ctrl > i:hover { color: #ed2939; }
div#agendapunten > div.open > .titel .volgorde_ctrl > i { color: white; }
div#agendapunten > div.open > .titel .volgorde_ctrl > i:hover { color: #0000df; }

div#agendapunten .ap_drop { position: absolute; top: -1.5rem; left: -1.75rem; cursor: pointer; }
div#agendapunten .ap_drop::before { content: '\f356'; font-size: 2rem; color: #777; font-family: 'Font Awesome 5 Pro'; font-weight: 900; transition: 0.25s padding-left ease-out; }
div#agendapunten .ap_drop:hover::before { color: #ed2939; padding-left: .25rem; }
div#agendapunten .ap_drop.laatste_positie { top: unset; bottom: -1.5rem; }

ul#agendapunten, ul#agendapunten > li { position: relative; }
ul#agendapunten .ap_drop { position: absolute; top: -.75rem; left: -1.0rem; cursor: pointer; }
ul#agendapunten .ap_drop::before { content: '\f356'; font-size: 1rem; color: #777; font-family: 'Font Awesome 5 Pro'; font-weight: 900; transition: 0.25s padding-left ease-out; }
ul#agendapunten .ap_drop:hover::before { color: #ed2939; padding-left: .25rem; }
ul#agendapunten .ap_drop.laatste_positie { top: unset; bottom: -0.5rem; left: 1rem; }

.los_agendapunt_details { padding: 0 0 0 2rem; }
.notitie { margin: 0 0 1.5rem 2rem; }
.notitie_toevoegen_uitklappen { color: #3f5fff; }
.notitie_toevoegen_uitklappen:hover { text-decoration: underline; color: #0000bf; cursor: pointer; }