/**
*
* @package phpBB Extension - Board Magic
* @copyright (c) 2024 SpIdErPiGgY - https://www.phpbbnextl.be
* @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2
*
*/

/** Place your custom CCS under this line */

html, body {
    background-color: #424251 !important;
    background: url('https://www.phpbbextnl.be/images/Background2.jpg') no-repeat center center fixed !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

.headerlink-link {
    background-color: var(--headerlink-bg);
    border-radius: 4px;
    box-shadow: #005cb9 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    display: block;
    font-size: 13px;
    padding: 6px;
    height: 13px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.postprofile dt.no-profile-rank, .postprofile dd.profile-rank, .postprofile .search-result-date {
    font-size: 0 !important;
}

.profile-rank img {
    max-width: 160px;
    margin-top: 5px;
    margin-bottom: 1px;
}

ul.forums {
    background-color: #DDDDDD;
    /* Old browsers */
    /* FF3.6+ */
    background-image: -webkit-linear-gradient(top, #D2E0EB 0%, #DDDDDD 100%);
    background-image: linear-gradient(to bottom, #D2E0EB 0%, #DDDDDD 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D2E0EB', endColorstr='#DDDDDD', GradientType=0);
    /* IE6-9 */
}

.cp-mini {
    background-color: #DDDDDD;
}

li.row {
    border-top-color: #d3d3d3;
    border-bottom-color: #00608F;
}

/** Github milestones on portal */
ul.topiclist.milestone li.header dd {
    display: block !important;
}
/** Github milestones on portal */

/** Round avatar */
img.avatar {
    border-radius: 20px !important;
}

img[src*="gravatar"] {
    border-radius: 50px !important;
}

/** ___________________ */

/** Fa Fa roll effect */
.fa:hover {
    display: inline-block;
    cursor: default;
    transform: rotate(360deg);
    transition: all 0.9s ease-in-out 0s;
}

.fa-fw:hover {
    display: inline-block;
    cursor: default;
    transform: rotate(360deg);
    transition: all 0.9s ease-in-out 0s;
}
/** ___________________ */

/** Fa color effect */
.fa-paypal {
    color: #ff3535;
}

.fa-users {
    color: #0080c0;
}

.fa-globe {
    color: #0000ff;
}

.fa-calendar {
    color: #ff0000;
}

.fa-comments-o {
    color: #ff8000;
}
/** ___________________ */

/** Add icon to pdf link */
a[href*=".pdf"] {
    background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
    /* @noflip */
    padding: 8px 18px 8px 0;
}
/** ___________________ */

/** Hulp bbcode */
.dangerhulp {
    background-color: #a8d3ff;
    border-left: 6px solid #000000;
    border-style: inset;
}
/** ___________________ */

.chat-link .chat-text {
    font-weight: 700;
    font-size: 0.95rem;
    margin-left: 1px; /* minimale ruimte */
}

.postcontent {
    padding: 10px !important;
    border: 3px solid #9dceff !important;
    border-style: dotted dashed solid double !important;
    border-radius: 10px !important;
    background-color: #E8EFF0 !important;
}

.badge1 {
    border: 2px solid #9dceff;
    background-color: #d1d1d1;
    color: #232323;
}

.count {
    float: none;
    font-weight: bold;
}

.badge1 {
    border-radius: 10px;
    opacity: 0.8;
    text-align: center;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1;
    float: center;
    display: inline-block;
    margin-left: 3px;
    vertical-align: baseline;
    position: relative;
    top: 3px;
    padding: 4px 6px;
}

.badge1.hidden {
    display: none;
}

.thankyou-card {
    max-width: 95%;
    margin: 20px auto;
    padding: 15px 20px;
    text-align: center;
    background: linear-gradient(135deg, #a6d8ff, #d0ebff);
    /* lichtere kleuren */
    color: #000000cc;
    /* iets zachter zwart */
    border-radius: 16px;
    border: 1px solid #a0c4ff;
    /* subtielere rand */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    /* zachte schaduw voor diepte */
}

.thankyou-title {
    font-size: clamp(1.6rem, 4.5vw, 2.2rem);
    font-weight: 600;
    text-shadow: 1px 1px 1px #ffffff55;
    /* minder harde text-shadow */
    margin-bottom: 8px;
}

.thankyou-subtitle {
    font-size: clamp(0.95rem, 2.5vw, 1.3rem);
    margin: 6px 0;
    font-weight: 400;
    /* iets lichter */
}

.rainbow-text {
    background-image: linear-gradient(270deg, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.myButton {
    box-shadow: 3px 7px 7px 0px #1564ad !important;
    background: linear-gradient(to bottom, #79bbff 5%, #378de5 100%) !important;
    background-color: #79bbff !important;
    display: inline-block !important;
    cursor: pointer !important;
    color: #ffffff !important;
    font-family: Georgia !important;
    font-size: 19px !important;
    font-weight: bold !important;
    padding: 4px 15px !important;
    text-decoration: none !important;
    text-shadow: 1px -2px 23px #528ecc !important;
}
.myButton:hover {
    background: linear-gradient(to bottom, #378de5 5%, #79bbff 100%) !important;
    background-color: #378de5 !important;
}
.myButton:active {
    position: relative !important;
    top: 1px !important;
}

/* 
* Header buttons

.header-buttons-container {
	font-family: 'Roboto', Arial, sans-serif !important;
	text-align: center !important;
}
	
.header-buttons {
	display: inline-block !important;
	padding: 4px 5px !important;		  
	background-color: #6d8fba !important;
	color: #ffffff !important;			  
	font-size: 15px !important;			 
	font-weight: 700 !important;			
	border-radius: 5px !important;
	text-decoration: none !important;
	text-align: center !important;
	margin: 5px !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.header-buttons:hover {
	color: #e7e7e7 !important; 
	background-color: #7092ba !important;  
	transform: translateY(-1px) !important; 
}

.header-buttons:active {
    color: #ffffff !important;
}

* Header buttons
*/

/* === Indexstats === */
.stat-block.statistics {
    background: var(--bg2, #EBF2F3);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-family: "Inter", system-ui, sans-serif;
    color: #222;
    text-align: left;
}

.stat-block.statistics h3 {
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #003366;
    margin-bottom: 1rem;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
    text-transform: uppercase;
}

.stat-block.statistics p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.stat-block.statistics strong {
    color: #007bff;
    font-weight: 600;
}

/* === MOBILE VIEW: Compact Layout === */
@media (max-width: 768px) {
    .stat-block.statistics {
        padding: 0.9rem 1rem;
    }

    .stat-block.statistics h3 {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
        padding-bottom: 0.4rem;
    }

    .stat-block.statistics p {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    /* Hide long spans and show simpler layout */
    .responsive-hide {
        display: none;
    }

    /* Compact spacing between lines */
    .stat-block.statistics p br {
        display: block;
        margin-bottom: 0.3rem;
    }
}

/*
* Cleansilver
*/
.global_read,
.global_read_mine,
.global_read_locked,
.global_read_locked_mine,
.global_unread,
.global_unread_mine,
.global_unread_locked,
.global_unread_locked_mine,
.announce_read,
.announce_read_mine,
.announce_read_locked,
.announce_read_locked_mine,
.announce_unread,
.announce_unread_mine,
.announce_unread_locked,
.announce_unread_locked_mine,
.forum_link,
.forum_read,
.forum_read_locked,
.forum_read_subforum,
.forum_unread,
.forum_unread_locked,
.forum_unread_subforum,
.sticky_read,
.sticky_read_mine,
.sticky_read_locked,
.sticky_read_locked_mine,
.sticky_unread,
.sticky_unread_mine,
.sticky_unread_locked,
.sticky_unread_locked_mine,
.topic_moved,
.topic_read,
.topic_read_mine,
.topic_read_hot,
.topic_read_hot_mine,
.topic_read_locked,
.topic_read_locked_mine,
.topic_unread,
.topic_unread_mine,
.topic_unread_hot,
.topic_unread_hot_mine,
.topic_unread_locked,
.topic_unread_locked_mine,
.pm_read,
.pm_unread {
    background-image: none;
}
.row-item:before {
    font-size: 30px;
    left: 15px;
    padding: 0px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: FontAwesome;
}
.global_read:before,
.global_read_mine:before {
    content: "\f0ac";
    color: #0076b1;
}
.announce_read:before,
.announce_read_mine:before {
    content: "\f0a1";
    color: #0076b1;

}

.sticky_read:before,
.sticky_read_mine:before {
    content: "\f08d";
    color: #0076b1;
    left: 18px;
}
.global_unread:before,
.global_unread_mine:before {
    content: "\f0ac";
    color: #0076b1;
}
.announce_unread:before,
.announce_unread_mine:before {
    content: "\f0a1";
    color: #CC0000;
    -webkit-animation: flash 2s ease infinite;
    animation: flash 2s ease infinite;
}

.sticky_unread:before,
.sticky_unread_mine:before {
    content: "\f08d";
    color: #CC0000;
    left: 18px;
}
.global_read_locked:before,
.global_read_locked_mine:before,
.announce_read_locked:before,
.announce_read_locked_mine:before,
.forum_read_locked:before,
.sticky_read_locked:before,
.sticky_read_locked_mine:before,
.topic_read_locked:before,
.topic_read_locked_mine:before {
    content: "\f023";
    color: #0076b1;
    font-size: 40px;

}
.global_unread_locked:before,
.global_unread_locked_mine:before,
.announce_unread_locked:before,
.announce_unread_locked_mine:before,
.forum_unread_locked:before,
.sticky_unread_locked:before,
.sticky_unread_locked_mine:before,
.topic_unread_locked:before,
.topic_unread_locked_mine:before {
    content: "\f023";
    color: #CC0000;
    font-size: 40px;

}
.forum_link:before {
    content: '\f08e';
    color: #0076b1;
    left: 10px;
}
.forum_read:before {
    content: "\f039";
    color: #0076b1;
    left: 10px;
}

.topic_read:before,
.topic_read_mine:before {
    content: "\f15c";
    color: #0076b1;
}
.forum_read_subforum:before {
    content: "\f03a";
    color: #0076b1;
    left: 10px;
}
.forum_unread_subforum:before {
    content: "\f03a";
    color: #CC0000;
    left: 10px;
}
.forum_unread:before {
    content: "\f039";
    color: #CC0000;
    left: 10px;
    mask: linear-gradient(-45deg, #000 30%, #0005, #000 70%) right/350% 100%;
    animation: shimmer 2.5s infinite;
    animation-iteration-count: 3;
}

@keyframes shimmer {
    100% {
        mask-position: left;
    }
}

.topic_unread:before,
.topic_unread_mine:before {
    content: "\f15c";
    color: #CC0000;
}

.topic_moved:before {
    content: "\f04e";
    color: #0076b1;
}
.topic_read_hot:before,
.topic_read_hot_mine:before {
    content: '\f0e7';
    color: #0076b1;
    left: 20px;
}
.topic_unread_hot:before,
.topic_unread_hot_mine:before {
    content: '\f0e7';
    color: #CC0000;
    left: 20px;
    -webkit-animation: flash 2s ease infinite;
    animation: flash 2s ease infinite;
}
.pm_read:before {
    content: "\f086";
    color: #0076b1;

}
.pm_unread:before {
    content: "\f086";
    color: #CC0000;
    -webkit-animation: flash 2s ease infinite;
    animation: flash 2s ease infinite;
}
.topic_unread_hot_mine:before,
.topic_unread_mine:before,
.topic_unread_locked_mine:before,
.sticky_unread_locked_mine:before,
.sticky_unread_mine:before,
.announce_unread_mine:before,
.announce_unread_locked_mine:before,
.global_unread_mine:before,
.global_unread_locked_mine:before {
    color: #CC0000;
}

/* ===== Milestones widget (Stoker) ===== */
#stoker-ms {
    font: 14px/1.45 system-ui, Segoe UI, Arial, sans-serif;
    width: 100%;
    margin: 0;
    margin-top: 12px;
}
#stoker-ms .stoker-ms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 4px;
}
@media (max-width: 700px) {
    #stoker-ms .stoker-ms-grid {
        grid-template-columns: 1fr;
    }
}
#stoker-ms .stoker-ms-card {
    border: 1px solid #d0d7de;
    border-radius: 12px;
    padding: 10px;
    background: #EBF2F3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}
#stoker-ms .stoker-ms-card:focus-within {
    outline: 2px solid #1f6feb;
    outline-offset: 2px;
}
#stoker-ms .stoker-ms-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
#stoker-ms .stoker-ms-title {
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
    font-size: 19px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#stoker-ms .stoker-ms-title a {
    color: inherit;
    text-decoration: none;
}
#stoker-ms .stoker-ms-title .fa {
    margin-right: .4em;
}
#stoker-ms .stoker-ms-badge {
    font-size: 12px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #303972;
    border: 1px solid #c7d2fe;
    white-space: nowrap;
}
#stoker-ms .stoker-ms-desc {
    color: #444;
    margin: 6px 0 10px;
    white-space: pre-wrap;
    max-height: 5.6em;
    overflow: hidden;
}
#stoker-ms .stoker-ms-meta-top {
    margin: 6px 0 8px;
    line-height: 1.35;
    overflow: auto;
    color: #57606a;
}
#stoker-ms .stoker-ms-left {
    float: left;
    white-space: nowrap;
}
#stoker-ms .stoker-ms-right {
    float: right;
    white-space: nowrap;
}
#stoker-ms .stoker-ms-bar {
    height: 12px;
    background: #eef1f3;
    border-radius: 6px;
    overflow: hidden;
}
#stoker-ms .stoker-ms-fill {
    height: 100%;
    background: #3fb950;
    transition: width .3s ease;
}
#stoker-ms .stoker-ms-updated {
    margin-top: 6px;
    color: #57606a;
    overflow: auto;
}
#stoker-ms .stoker-ms-updated-right {
    float: right;
    white-space: nowrap;
    font-style: italic;
}
#stoker-ms .stoker-ms-card a {
    outline: none;
    text-decoration: none;
}
#stoker-ms .stoker-ms-card a:focus {
    outline: 2px solid #1f6feb;
    outline-offset: 2px;
    border-radius: 6px;
}
@media (max-width: 500px) {
    #stoker-ms .stoker-ms-left,
    #stoker-ms .stoker-ms-right,
    #stoker-ms .stoker-ms-updated-right {
        float: none;
        display: block;
    }
    #stoker-ms .stoker-ms-meta-top {
        margin-bottom: 6px;
    }
    #stoker-ms .stoker-ms-updated {
        text-align: right;
    }
}
.stoker-ms-hdr * {
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}
i.fa-github.biggithubportal {
    font-size: 40px;
}
h3.stoker-ms-title {
    text-transform: none;
}
html.phpbb-dark-mode #stoker-ms .stoker-ms-card {
    background: #0d1117;
    border-color: #30363d;
    box-shadow: none;
}
html.phpbb-dark-mode #stoker-ms .stoker-ms-title,
html.phpbb-dark-mode #stoker-ms .stoker-ms-title a {
    color: #e6edf3;
}
html.phpbb-dark-mode #stoker-ms .stoker-ms-desc {
    color: #c9d1d9;
}
html.phpbb-dark-mode #stoker-ms .stoker-ms-meta-top,
html.phpbb-dark-mode #stoker-ms .stoker-ms-updated {
    color: #8b949e;
}
html.phpbb-dark-mode #stoker-ms .stoker-ms-bar {
    background: #21262d;
}
html.phpbb-dark-mode #stoker-ms .stoker-ms-fill {
    background: #2ea043;
}
html.phpbb-dark-mode #stoker-ms .stoker-ms-badge {
    background: #111827;
    color: #d1d5db;
    border-color: #374151;
}
html.phpbb-dark-mode #stoker-ms .stoker-ms-card a:focus {
    outline-color: #4493f8;
}
html.phpbb-dark-mode #stoker-ms i.fa-github.biggithubportal {
    color: #8b949e;
}


.mededeling-banner {
    background: linear-gradient(to right, #EFBA60, #D49A42);
    /* warmer goud verloop */
    color: #134B9C;
    /* iets lichter/blauwer voor betere leesbaarheid */
    text-align: center;
    padding: 6px 0 7px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 3px solid #082D60;
    /* donkerblauw accent */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    max-width: 1152px;
    margin: 0 auto;
    border-radius: 7px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    /* subtiele highlight */
}

.mededeling-banner a {
    color: #082D60;
    /* links iets donkerder blauw */
    text-decoration: underline;
    font-weight: 700;
    margin-left: 8px;
    transition: color 0.2s ease;
}

.mededeling-banner a:hover {
    color: #000000;
    /* hover duidelijk donker */
}

@media (max-width: 768px) {
    .mededeling-banner {
        display: none;
    }
}