/* =====================================================
   WEEKLY PLANNER
   ===================================================== */
:root{

    --slot-height: 42px;
}

.agenda{

    margin:50px auto;
    background:white;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    overflow:hidden;
}

/* ---------- HEADER ---------- */

.agenda-header{

    display:grid;
    grid-template-columns:80px repeat(7,1fr);
    border-bottom:1px solid #d9e7ef;
    font-weight:600;
    text-align:center;
}

.agenda-time-header{

    background:#f7fbfd;
}

/* Day names */

.agenda-day{

    padding:18px 10px;
    color:#006a9d;
    border-left:1px solid #d9e7ef;
}


/* Slightly different blue for every day */

.segunda{ background:#eef8fd; }
.terca{ background:#e8f5fc; }
.quarta{ background:#e3f2fb; }
.quinta{ background:#def0fa; }
.sexta{ background:#d8edf9; }
.sabado{ background:#d3eaf8; }
.domingo{ background:#cde7f7; }

/* ---------- BODY ---------- */

.agenda-body{

    display:grid;
    grid-template-columns:80px 1fr;
}

/* ---------- HOURS ---------- */

.agenda-times{

    display:flex;
    flex-direction:column;

}

/*.agenda-times div{

    height:var(--slot-height);
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
	padding-right:12px;
    padding-top:6px;
    border-bottom:1px solid #ececec;
}

.agenda-times .hour{

    font-size:.90rem;
    font-weight:700;
    color:#3b3b3b;
}*/

.agenda-times .half{

    font-size:.78rem;
    font-weight:400;
    color:#999;
}

.agenda-hours .hour{

    height:var(--slot-height);
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    padding-right:12px;
	position:relative;
	transform: translateY(-3px);
    font-size:.92rem;
    font-weight:700;
    color:#333;
/*    border-bottom:1px solid #ececec;*/
}

.agenda-hours .half{

    height:var(--slot-height);
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    padding-right:12px;
	position:relative;
	transform: translateY(-3px);	
    font-size:.78rem;
    font-weight:400;
    color:#999;
/*    border-bottom:1px solid #ececec;*/
}

/* ---------- GRID ---------- */

.agenda-grid{

    position:relative;
    height:calc(var(--slot-height) * 22);
    background:white;
    overflow:hidden;
}

.agenda-grid::before{

    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(to right,
            #eef8fd 0%,      #eef8fd 14.285%,
            #e8f5fc 14.285%, #e8f5fc 28.57%,
            #e3f2fb 28.57%,  #e3f2fb 42.855%,
            #def0fa 42.855%, #def0fa 57.14%,
            #d8edf9 57.14%,  #d8edf9 71.425%,
            #d3eaf8 71.425%, #d3eaf8 85.71%,
            #cde7f7 85.71%,  #cde7f7 100%);
    z-index:0;
}

.agenda-grid::after{

    content:"";
    position:absolute;
    inset:0;
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--slot-height) - 1px),
            rgba(0,0,0,.08) calc(var(--slot-height) - 1px),
            rgba(0,0,0,.08) var(--slot-height)
        );
    pointer-events:none;
    z-index:1;
}

.agenda-background{

    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    grid-template-rows:repeat(25,var(--slot-height));
    pointer-events:none;
}

.agenda-background div{

    border-right:1px solid #d9e7ef;
    border-bottom:1px solid #ececec;
}

.agenda-title{

    font-size:.70rem;
    font-weight:700;
    line-height:1;
    color:#2e2e2e;
    margin-bottom:10px;
}

.agenda-time{

    font-size:.80rem;
    font-weight:600;
    color:#008dd2;
}

/* ---------- EVENTS ---------- */

.agenda-events{

    display:contents;
}

.agenda-event{

    position:absolute;
    width:calc((100% / 7) - 12px);
    padding:8px;
    background:#fff;
    border-top:4px solid #008dd2;
    border-radius:16px;
    box-shadow:0 8px 22px rgba(0,0,0,.08);
    box-sizing:border-box;
    overflow:hidden;
    z-index:5;
    transition:.25s;
}

.agenda-event:hover{

    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,.18);
    /*border-top-color:#00a7f5;*/
}

/* ---------- MOBILE ---------- */

@media (max-width:900px){
    .agenda{
        overflow-x:auto;
    }

    .agenda-header{
        min-width:1100px;
    }

    .agenda-body{
        min-width:1100px;
    }
}