/* ==========================
   Basis modules styling
========================== */
.bp-module {
    box-sizing: border-box;
	font-size: 14px;
}

.bp-module h1 {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 25px;
}

.bp-module h2 {
	margin-top: 1.2em;
}

.bp-module h2 a {
	padding: 0 0 20px 0;
    letter-spacing: 0.5px;
}

.bp-module h3 {
	font-size: 1.10em;
	margin-bottom: 0px !important;
}

.bp-module h4 {
	font-size: 1em;
}

.bp-module h5 {
	font-size: 0.83em;
}

.bp-module h6 {
	font-size: 0.75em;
}

.bp-module ul.rule, ol.rule {
	padding: 0 0 0 30px;
    list-style-type: lower-alpha;
}

.bp-module ol.list {
	font-size: 1.2em;
}

/* ==========================
   MENU STYLE
========================== */

.bp-menu {
    border-radius: 6px;
	background-color: rgba(0,0,0,0.03);
	font-size: 14px;
	padding: 15px 15px 10px 15px;
	margin-bottom: 15px;
}

.bp-menu ul {
    list-style: none;
    margin: 0;
}

.bp-menu li {
	border-bottom: 1px solid rgba(0,0,0,0.10);
    padding: 5px 0;
}

.bp-menu li a:hover {
    padding-left: 5px;
    transition: 0.2s;
}

.bp-menu li:last-child {
    border-bottom: none;
}

.bp-menu h3 {
	padding-bottom: 10px;
    text-transform: uppercase;
	color: #2563EB;
    letter-spacing: 0.5px;
}

/* ==========================
   RECENTE BERICHTEN FORUMOVERZICHT
========================== */

.portal-topic-list {
	list-style:none;
	margin:0;
	padding:0;
}

.portal-topic-row {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:6px 0;
	border-bottom:1px solid rgba(0,0,0,0.08);
}

.portal-topic-title {
	flex:1;
}

.portal-topic-title a {
	text-decoration:none;
}

.portal-topic-stats {
	font-variant-numeric: tabular-nums;
	white-space:nowrap;
	align-items:center;
	font-size:13px;
	opacity:0.6;
}

.portal-topic-stats span {
	margin-left:10px;
}

.portal-topic-stats i {
	margin-right:3px;
}

/* ==========================
   2 kolommen 50% / 50%
========================== */
.bp-layout-50-50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Tablet */
@media (max-width: 900px) {
    .bp-layout-50-50 {
        grid-template-columns: 1fr;
    }
}

/* ==========================
   2 kolommen 80% / 20%
========================== */
.bp-layout-80-20 {
	margin: 30px 0 30px 0;
    display: grid;
    grid-template-columns: 4fr 1fr; /* ongeveer 80% / 20% */
    gap: 20px;
}

/* Tablet */
@media (max-width: 900px) {
    .bp-layout-80-20 {
        grid-template-columns: 1fr;
    }
}

/* ==========================
   3 kolommen 40% / 40% / 20%
========================== */
.bp-layout-40-40-20 {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr; /* 40% / 40% / 20% */
    gap: 20px;
}

/* Tablet */
@media (max-width: 900px) {
    .bp-layout-40-40-20 {
        grid-template-columns: 1fr 1fr;
    }

    /* Sidebar gaat onder de twee modules */
    .bp-layout-40-40-20 .bp-sidebar {
        grid-column: 1 / -1;
    }
}

/* Mobiel */
@media (max-width: 600px) {
    .bp-layout-40-40-20 {
        grid-template-columns: 1fr;
    }
}