@import url("variabelen.css");


html {overflow: -moz-scrollbars-vertical; overflow-y: scroll;}

:root {
    box-sizing: border-box;
    font-size: calc(0.7vw + 0.1em);
}
@media screen and (max-width: 1248px) { :root {font-size: calc(0.75vw + 0.25em);} }
@media screen and (max-width: 767px) { :root {font-size: calc(0.75vw + 0.65em);} }
@media screen and (min-width: 3200px) { :root {font-size: calc(0.6vw + 0.094em);} }
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) { html {-webkit-text-size-adjust: none;} }


/* =============================================================================
 * Misc
 * ========================================================================== */
body {
    margin-top: 1.25rem;
    margin-bottom: 5rem;
    background-color: #F3F3F3;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
}
.path-frontpage {
    animation: bodyIn 1s, ease-in-out;
}

@keyframes bodyIn {
    from {opacity:0;scale: .7;}
    to {opacity:1;scale: 1;}
}

h1 {
    font-size: 2.25rem;
}

h2, h3, h4, h5 {
    margin-top: 0;
    margin-bottom: 14px;
}

h2 {
    font-size: 2rem;
}

.contextual-region {
    position: initial;
}

/* =============================================================================
 * Content width
 * ========================================================================== */
.container {
    width: 87rem;
}

/* =============================================================================
 * Navbar
 * ========================================================================== */
.navbar {
    background-color: var(--navbar);
    border-radius: 1.25rem;
    margin-bottom: 2.5rem;
    max-width: calc(87rem - 30px) !important;
    padding: .625rem 2.5rem;
    width: auto;
}

.navbar.container-fluid {
    max-width: 100% !important;
    margin-right: 15px;
    margin-left: 15px;
}

/* Logo */
.logo {
    margin: 0;
}
.logo img {
    height: 3.75rem;
}

/* Navigatiemenu */
.navbar-default .navbar-nav {
    height: 3.75rem;
    display: flex;
    align-items: center;
}
.navbar-default .navbar-nav>li>a {
    color: #fff;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
    color: #fff;
    text-decoration: underline;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 0.625rem;
    color: #fff;
}

/* mobile menu button */
.navbar-default .navbar-toggle {
    border: none;
}

.navbar-toggle .icon-bar {
    width: 35px;
    height: 5px;
    border-radius: 6px;
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 6px;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: transparent;
    border: 1px solid #fff;
}



/* =============================================================================
 * Region header
 * ========================================================================== */
.region-header {
    /*background-color: #FADADD; /*roze*/
    /*color: #875559; /*roze*/
    background-color: #e3ede0;
    color: #3b5029;
    border-radius: 1.25rem;
    padding: 2.5rem;
    /*font-size: 2.25rem;*/
    margin-bottom: 2.5rem;
}

.region-header .page-header{
    border: none;
    margin: 0;
    padding: 0;
    font-weight: bold;
}

/* =============================================================================
 * Body view
 * ========================================================================== */
section.col-sm-12, section.col-sm-9, aside.col-sm-3 {
    padding: 2.5rem;
    border-radius: 1.25rem;
    background-color: #fff;
    margin-left: 15px;
}

section.col-sm-12 {
    width: calc(100% - 30px);
}

section.col-sm-9 {
    width: calc(70% - 30px);
}

aside.col-sm-3 {
    width: calc(30% - 30px);
    margin-left: 30px;
}

/* =============================================================================
 * Buttons
 * ========================================================================== */
.btn {
    border-radius: .375rem;
    border: none !important;
    padding: .625rem 1.25rem;
    font-size: 1.125rem;
    transition: all .3s;
}
.btn:hover {
    scale: 1.1;
}

.btn.edit-btn {
    background-color: var(--blauw);
}
.btn.edit-btn:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 13'%3E%3Cpath id='Icon_awesome-edit' data-name='Icon awesome-edit' d='M9.785,2.117l2.192,2.291a.256.256,0,0,1,0,.35L6.669,10.3l-2.256.262a.484.484,0,0,1-.523-.546l.25-2.357L9.45,2.117A.23.23,0,0,1,9.785,2.117Zm3.938-.582L12.537.3A.922.922,0,0,0,11.2.3l-.86.9a.256.256,0,0,0,0,.35l2.192,2.291a.23.23,0,0,0,.335,0l.86-.9a1.025,1.025,0,0,0,0-1.4ZM9.333,8.8v2.585H1.556V3.255H7.141a.292.292,0,0,0,.207-.089L8.32,2.15a.307.307,0,0,0-.207-.521H1.167A1.194,1.194,0,0,0,0,2.849v8.939a1.194,1.194,0,0,0,1.167,1.219H9.722a1.194,1.194,0,0,0,1.167-1.219V7.781a.291.291,0,0,0-.5-.216L9.418,8.581A.32.32,0,0,0,9.333,8.8Z' transform='translate(0 -0.007)' fill='%23fff'/%3E%3C/svg%3E%0A");
    width: 0.875rem;
    display: inline-block;
    margin-right: 0.55rem;
}

.btn.add-btn {
    background-color: var(--groen);
}
.btn.add-btn:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cg id='Icon_ionic-md-add-circle-outline' data-name='Icon ionic-md-add-circle-outline' transform='translate(-3.375 -3.375)'%3E%3Cpath id='Path_1' data-name='Path 1' d='M17.164,14.477H14.477v2.688H13.164V14.477H10.477V13.164h2.688V10.477h1.313v2.688h2.688Z' transform='translate(-3.945 -3.945)' fill='%23fff'/%3E%3Cpath id='Path_2' data-name='Path 2' d='M9.875,4.688A5.185,5.185,0,1,1,6.206,6.206,5.166,5.166,0,0,1,9.875,4.688m0-1.312a6.5,6.5,0,1,0,6.5,6.5,6.5,6.5,0,0,0-6.5-6.5Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
    width: 0.875rem;
    display: inline-block;
    margin-right: 0.55rem;
}

.btn-link {
    color: var(--blauw);
    text-decoration: underline;
}

/* =============================================================================
 * Tiles
 * ========================================================================== */
.layout--twocol-section--50-50 {
    justify-content: space-between;
}
.layout--twocol-section--50-50 .layout__region {
    background-color: var(--grijs);
    flex: 0 1 49% !important;
    border-radius: .625rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
}

.layout--onecol .layout__region {
    background-color: var(--grijs);
    border-radius: .625rem;
    margin-bottom: 1.25rem;
    margin-top: 1.25rem;
    padding: 1.25rem;
    display: inline-block;
}

.no-background.layout--onecol .layout__region {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    margin-top: 0;
}

/* =============================================================================
 * Verzoek blokken
 * ========================================================================== */
/* Knoppen */
.button-sectie .block-views {
    float: left;
    margin-right: 1.25rem;
}
.button-sectie .block-views:last-of-type {
    margin-right: 0;
}

/* Contactbondgenoot */
.view-id-client_bondgenoot_relatie .views-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.view-id-client_bondgenoot_relatie .views-row .views-field:nth-of-type(1) {
    width: 44%;
}
.view-id-client_bondgenoot_relatie .views-row .views-field:nth-of-type(2) {
    width: 28%;
    font-size: .75rem;
}
.view-id-client_bondgenoot_relatie .views-row .views-field:nth-of-type(2) .field-content div {
    border-radius: 0.3745rem;
    padding: 0.3125rem 0.9375rem;
    max-width: 19rem;
    display: inline-block;
    color: #fff;
}
.view-id-client_bondgenoot_relatie .views-row .views-field:nth-of-type(2) .field-content .Geaccepteerd {
    background-color: #3B5029;
}
.view-id-client_bondgenoot_relatie .views-row .views-field:nth-of-type(2) .field-content .Voorgelegd {
    background-color: #AD868A;
}
.view-id-client_bondgenoot_relatie .views-row .views-field:nth-of-type(3) {
    width: 28%;
    text-align: right;
    text-decoration: underline;
}

/*.view-id-contactbondgenoot_dossiers .views-field-weergavenaam-2 {
    font-weight: bold;
    margin-top: .5rem;
}

.view-id-contactbondgenoot_dossiers .views-field-weergavenaam-2 a {
    color: #000;
    text-decoration: underline;
}

.view-id-contactbondgenoot_dossiers .views-row .views-field-status-relatie {
    background-color: #CCCCCC;
    border-radius: .3745rem;
    padding: .3125rem .9375rem;
    font-size: .75rem;
    display: inline-block;
    margin-top: 0.5rem;
}*/

/* Status verzoek */
.block-views-blockcontactbondgenoten-verzoeken-bevindingen-staf-block-3 h2 {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: .1rem;
}

.block-views-blockcontactbondgenoten-verzoeken-bevindingen-staf-block-3 a {
    color: #000;
    text-decoration: underline;
}

.block-views-blockcontactbondgenoten-verzoeken-bevindingen-staf-block-3 .views-field-dossiertype .views-label {
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: .1rem;
}

/* Vraagsteller */
.block-views-blockbondgenootverzoeken-block-4, .block-views-blockcontactbondgenoten-themas-block-3 {
    position: relative;
}

.block-views-blockbondgenootverzoeken-block-4 h4 {
    display: inline-block;
    font-size: 2rem;
    float: left;
}

.block-views-blockbondgenootverzoeken-block-4 .views-field-naam {
    font-weight: bold;
}

.block-views-blockbondgenootverzoeken-block-4 .views-col,
.block-views-blockcontactbondgenoten-themas-block-3 .views-col {
    font-size: 1rem;
}

.block-views-blockbondgenootverzoeken-block-4 .views-col > div,
.block-views-blockcontactbondgenoten-themas-block-3 .views-col > div {
    margin-bottom: .5rem;
}
.block-views-blockbondgenootverzoeken-block-4 .views-col > div:last-of-type {
    margin-bottom: 0;
}

.block-views-blockbondgenootverzoeken-block-4 .views-field-betrokkenheid-vraagsteller {
    font-size: .75rem;
    display: flex;
    margin-top: .4rem;
}
.block-views-blockbondgenootverzoeken-block-4 .views-field-betrokkenheid-vraagsteller .field-content {
    background-color: #CCCCCC;
    border-radius: 0.3745rem;
    padding: 0.3125rem 0.9375rem;
    max-width: 19rem;
    display: inline-block;
}

.block-views-blockbondgenootverzoeken-block-4 .views-field-betrokkenheid-vraagsteller:before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    display: inline-block;
    background-color: #000;
    border-radius: 50%;
    margin-right: 2rem;
    margin-left: 2rem;
    margin-top: .5rem;
}

.block-views-blockbondgenootverzoeken-block-4 .views-field-naam {
    clear: both;
}

.contact-bewerken {
    position: absolute;
    top: .3rem;
    right: 0;
}

/* Voorkeuren */
.block-views-blockbondgenootverzoeken-block-3 .views-label,
.block-views-blockcontactbondgenoot-pauze-block-1 .views-label {
    font-weight: bold;
}

/* Vraag */
.block-views-blockbondgenootverzoeken-block-2 h4 {
    font-size: 2rem;
}

/* Reactie Aanspreekpunt */
.block-views-blockcontactbondgenoten-verzoeken-bevindingen-staf-block-2,
.block-views-blockcontactbondgenoten-themas-block-2 {
    position: relative;
}

.block-views-blockcontactbondgenoten-verzoeken-bevindingen-staf-block-1 .views-col.col-1,
.block-views-blockcontactbondgenoten-themas-block-2 .views-col.col-1 {
    display: flex;
    flex-wrap: wrap;
}

.block-views-blockcontactbondgenoten-verzoeken-bevindingen-staf-block-1 .views-col.col-1 .views-field,
.block-views-blockcontactbondgenoten-themas-block-2 .views-col.col-1 .views-field {
    width: 30%;
    margin-top: 2.5rem;
    margin-right: 5%;
}
.block-views-blockcontactbondgenoten-verzoeken-bevindingen-staf-block-1 .views-col.col-1 .views-field:nth-of-type(3n+4),
.block-views-blockcontactbondgenoten-themas-block-2 .views-col.col-1 .views-field:nth-of-type(3n+4){
    margin-right: 0;
}
.block-views-blockcontactbondgenoten-verzoeken-bevindingen-staf-block-1 .views-col.col-1 .views-field h4,
.block-views-blockcontactbondgenoten-themas-block-2 .views-col.col-1 .views-field h4 {
    font-weight: bold;
}
.block-views-blockcontactbondgenoten-verzoeken-bevindingen-staf-block-1 .views-col.col-1 .views-field-indruk,
.block-views-blockcontactbondgenoten-themas-block-2 .views-col.col-1 .views-field-indruk {
    width: 100%;
    margin-right: 0;
}

.bevinding-toevoegen {
    position: absolute;
    top: .3rem;
    right: 0;
}

/* Dossier acties */
.block-views-blockbondgenootverzoeken-block-5 {
    display: flex;
    justify-content: space-between;
}
.block-views-blockbondgenootverzoeken-block-5.clearfix:before,
.block-views-blockbondgenootverzoeken-block-5.clearfix:after {
    display: none;
}

.table {
    table-layout: fixed;
}

/*td.views-field-vraag-verhaal {
    white-space: nowrap;
    overflow: hidden;
    width: 190px;
    height: 80px;
    text-overflow: ellipsis;
}*/

.table-striped>tbody>tr:nth-of-type(odd) {
    /*background-color: #FFF7F8;/*roze*/
    background-color: #f6f9f6;
}

.table>thead>tr>th {
    border-bottom: none;
    width: 20%;
}

.table .btn {
    font-size: 16px;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    padding: 20px;
    border-top: none;
    font-size: 16px;
    vertical-align: middle;
    word-break: break-word;
}
th#view-postcode-table-column {
    width: 10%;
}

.dossier-acties {
    margin-top: 2.5rem;
}
.block-views-blockcontactbondgenoten-themas-block-7 {
    position: relative;
}
.bio-bewerken {
    position: absolute;
    top: .3rem;
    right: 0;
}

/* Acties */
.block-views-blockvrijwilligeracties-block-1 {
    background-color: var(--grijs);
    border-radius: .625rem;
    margin-bottom: 1.25rem;
    margin-top: 1.25rem;
    padding: 1.25rem;
    display: inline-block;
    position: relative;
}
.block-views-blockvrijwilligeracties-block-1 .actie-toevoegen {
    position: absolute;
    top: 1.55rem;
    right: 1.25rem;
}
.block-views-blockvrijwilligeracties-block-1 .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #fff;
}

/* =============================================================================
 * Pagination
 * ========================================================================== */
.pagination>li>a,
.pagination>li>span {
    border: none;
    padding: .7rem 1.25rem;
    color: #000;
    font-weight: bold;
    border-radius: 0.375rem;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover {
    background-color: var(--blauw);
}

/* =============================================================================
 * Filters
 * ========================================================================== */
.well {
    background-color: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.views-exposed-form {
    font-size: 1rem;
}

.views-exposed-form .form-item {
    margin-top: 1rem;
}
.views-exposed-form .form-item,
.views-exposed-form .form-item label,
.views-exposed-form .form-item input,
.views-exposed-form .form-item .select-wrapper {
    width: 100%;
}

.select2-selection {
    padding-top: 5px;
    height: auto;
    min-height: 34px;
}

.select2-selection__arrow {
    display: none;
}

select {
    width: 100% !important;
}

/* Sorteerveld bovenaan lijstje tonen */
.form-inline {
    display: flex;
    flex-direction: column;
}

.form-inline .form-item {
    order: 2;
}

.form-inline .form-item.form-item-sort-by {
    order: 1;
}

.view-filters .form-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3.125rem;
}
.view-filters .form-inline .form-actions {
    display: none;
}
.view-filters .form-inline:before, .view-filters .form-inline:after {
    display: none;
}
.view-filters .form-inline .form-item-activiteitstype {
    width: 15%;
}
.view-filters .form-inline .form-item-onderwerp {
    width: 30%;
}

/* =============================================================================
 * Vrijwilliger thema's bewerken
 * ========================================================================== */
.thema-wijzigen .form-wrapper {
    margin-bottom: 2rem;
}

/* =============================================================================
 * Mobile
 * ========================================================================== */
@media screen and (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    .navbar {
        margin-bottom: 3rem;
    }

    .region-header {
        padding: 1.5rem;
    }

    section.col-sm-9, aside.col-sm-3, section.col-sm-12 {
        width: calc(100% - 30px);
        margin: 2rem 15px;
        padding: 1.5rem;
    }

    .button-sectie .block-views {
        width: 100%;
        margin-bottom: 1rem;
    }

    .layout--twocol-section--50-50 .layout__region {
        flex: 0 1 100% !important;
    }

    .block-views-blockbondgenootverzoeken-block-4 h4 {
        float: none;
    }
    .block-views-blockbondgenootverzoeken-block-4 .views-field-betrokkenheid-vraagsteller {
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 1rem;
        display: block;
    }
    .block-views-blockbondgenootverzoeken-block-4 .views-field-betrokkenheid-vraagsteller:before {
        display: none;
    }

    .block-views-blockdossier-acties-block-1 {
        margin-top: 2rem;
    }

    /* responsive tabel */
    .table-responsive {
        border: none;
    }

    thead {
        display: none;
    }

    td {
        display: flex;
        flex-direction: column;
    }
    td:before {
        font-weight: bold;
    }

    td.views-field-vraag-verhaal {
        width: 100%;
        height: auto;
        overflow: auto;
        text-overflow: initial;
    }
    /* sticky filter block */
    .col-sm-3 form {
        height: auto;
    }

    .views-exposed-form .form-item {
        margin-top: 0;
    }

    .col-sm-3 #views-exposed-form-bondgenootverzoeken-page-1 .form--inline > div {
        display: block;
    }

    .col-sm-3 form .form--inline > div {
        display: none;
    }
    .col-sm-3 form .form--inline > div:first-of-type {
        display: block;
    }

    /* tabel bondgenootverzoeke homepage */
    .view-id-bondgenootverzoeken td:nth-of-type(1):before {content: "Begindatum";}
    .view-id-bondgenootverzoeken td:nth-of-type(2):before {content: "Naam";}
    .view-id-bondgenootverzoeken td:nth-of-type(3):before {content: "Status";}
    .view-id-bondgenootverzoeken td:nth-of-type(4):before {content: "Vraag";}
    .view-id-bondgenootverzoeken td:nth-of-type(5):before {content: "Contact bondgenoot";}
    /* tabel dossier acties */
    .view-id-dossier_acties td:nth-of-type(1):before {content: "Datum actie";}
    .view-id-dossier_acties td:nth-of-type(2):before {content: "Type";}
    .view-id-dossier_acties td:nth-of-type(3):before {content: "Onderwerp";}
    .view-id-dossier_acties td:nth-of-type(4):before {content: "Details";}
    .view-id-dossier_acties td:nth-of-type(5):before {content: "Door";}
    /* tabel contactbondgenoten */
    .view-id-contactbondgenoten_themas td:nth-of-type(1):before {content: "Naam";}
    .view-id-contactbondgenoten_themas td:nth-of-type(2):before {content: "Provincie";}
    .view-id-contactbondgenoten_themas td:nth-of-type(3):before {content: "Betrokkenheid";}
    /* tabel vrijwilligers */
    .view-id-vrijwilligers td:nth-of-type(1):before {content: "Naam";}
    .view-id-vrijwilligers td:nth-of-type(2):before {content: "Adres";}
    .view-id-vrijwilligers td:nth-of-type(3):before {content: "Telefoon";}
    .view-id-vrijwilligers td:nth-of-type(4):before {content: "E-mail";}

    .table-responsive>.table>tbody>tr>td,
    .table-responsive>.table>tbody>tr>th,
    .table-responsive>.table>tfoot>tr>td,
    .table-responsive>.table>tfoot>tr>th,
    .table-responsive>.table>thead>tr>td,
    .table-responsive>.table>thead>tr>th {
        white-space: initial;
    }

    .table>tbody>tr>td,
    .table>tbody>tr>th,
    .table>tfoot>tr>td,
    .table>tfoot>tr>th,
    .table>thead>tr>td,
    .table>thead>tr>th {
        padding: .625rem 1.25rem;
    }

    .table>tbody>tr>td:first-of-type {
        padding-top: 2rem;
    }
    .table>tbody>tr>td:last-of-type {
        padding-bottom: 2rem;
    }

    .row {
        display: flex;
        flex-direction: column;
    }

    .col-sm-12 {order: 1;}
    .col-sm-9 {order: 3;}
    .col-sm-3 {order: 2;}

    .block-views-blockcontactbondgenoten-verzoeken-bevindingen-staf-block-1 .views-col.col-1 .views-field,
    .block-views-blockcontactbondgenoten-themas-block-2 .views-col.col-1 .views-field {
        width: 100%;
    }

    .block-views-blockbondgenootverzoeken-block-5 {
        flex-direction: column;
    }

    .bevinding-toevoegen {
        position: initial;
        display: inline-block;
        margin-bottom: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .navbar-default .navbar-nav {
        height: auto;
        flex-direction: column;
    }

    .view-filters .form-inline .form-item-activiteitstype {
        width: 100%;
    }
    .view-filters .form-inline .form-item-onderwerp {
        width: 100%;
    }
    .bio-bewerken {
        position: initial;
    }
}

@media screen and (max-width: 1248px) {
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fff;
    }

    .dialog-off-canvas-main-canvas {
        padding: 0 1.5rem;
    }

    .container {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .navbar {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}