/*
==========================================================
TTV DE KRUISKAMP '81
Agenda
Auteur: ChatGPT
==========================================================
*/

:root{

    --primary:#1F2F73;
    --primary-hover:#303792;

    --white:#FFFFFF;

    --text:#1F2937;

    --muted:#64748B;

    --border:#E5EAF3;

}

/* ======================================================
   Algemeen
====================================================== */

.ics-calendar{

    font-family:'Montserrat',sans-serif;

    background:#FFFFFF;

    color:var(--text);

}

.ics-calendar-label{

    display:none !important;

}

/* ======================================================
   Dropdown
====================================================== */

.ics-calendar select{

    background:#FFFFFF;

    color:var(--primary);

    border:2px solid var(--primary);

    padding:12px 18px;

    font-weight:600;

    font-size:15px;

    transition:.2s;

}

.ics-calendar select:hover{

    border-color:var(--primary-hover);

}

/* ======================================================
   Kalender
====================================================== */

.ics-calendar-month-grid{

    width:100%;

    border-collapse:collapse !important;

}

/* Weekdagen */

.ics-calendar-month-grid thead th{

    background:#FFFFFF;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.6px;

    padding:16px;

    border-bottom:2px solid var(--primary);

    border-left:1px solid var(--border);

    border-right:1px solid var(--border);

}

/* Dag */

.ics-calendar-month-grid td{

    background:#FFFFFF;

    border:1px solid var(--border);

    vertical-align:top;

    padding:12px;

    height:145px;

    transition:.15s;

}

/* Hover */

.ics-calendar-month-grid td:hover{

    background:#F8FAFF;

}

/* Vandaag */

.today{

    background:#FFFFFF !important;

}

/* Plugin achtergrond verwijderen */

.today .day,
.today .date,
.today .date_label{

    background:transparent !important;

}

/* Dagnummer */

.day{

    display:flex;

    justify-content:flex-end;

    margin-bottom:10px;

}

.no_phone{

    font-size:16px;

    font-weight:700;

    color:var(--primary);

}

/* Vandaag */

.today .no_phone{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#FFFFFF;

    border-radius:50%;

}

/* ======================================================
   Events
====================================================== */

.events{

    margin-top:10px;

}

.events dt{

    display:none;

}

/* Event */

.events .event{

    background:#FFFFFF;

    border-left:4px solid var(--primary);

    padding:10px 12px;

    margin-bottom:8px;

}

/* Tijd */

.events .time{

    display:block;

    font-size:11px;

    color:var(--primary);

    font-weight:700;

    margin-bottom:4px;

}

/* Titel */

.events .title{

    display:block;

    color:var(--text) !important;

    font-size:14px;

    font-weight:700;

    line-height:1.45;

}

/* Omschrijving */

.eventdesc{

    margin-top:8px;

    color:var(--muted);

    line-height:1.6;

    font-size:14px;

}

/* Hover */

.events .event:hover{

    border-left-width:6px;

}

/* ======================================================
   Popup
====================================================== */

.hover_block{

    background:#FFFFFF;

    border:1px solid var(--border);

    box-shadow:0 10px 25px rgba(31,47,115,.10);

}

/* ======================================================
   Links
====================================================== */

.ics-calendar a{

    color:var(--primary);

    text-decoration:none;

}

.ics-calendar a:hover{

    color:var(--primary-hover);

}

/* ======================================================
   Responsive
====================================================== */

@media(max-width:768px){

    .ics-calendar-month-grid td{

        height:95px;

        padding:8px;

    }

}