/* ==========================================================
   FATURA FÁCIL - CALENDÁRIO PADRÃO GLOBAL
   ========================================================== */

.ff-date-range{
    width:100%;
    height:31px;

    display:grid;
    grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 30px;
    align-items:center;

    background:#f7f7f7;
    border:1px solid #eef0f2;
    border-radius:5px;

    overflow:visible;
    position:relative;
}

.ff-date-side{
    height:29px;
    min-width:0;

    display:flex;
    align-items:center;

    padding:0 9px;

    border:0;
    background:transparent;

    font-family:inherit;
    font-size:11.5px;
    color:#30353a;

    cursor:pointer;
    text-align:left;
}

.ff-date-side.empty{
    color:#b9bec4;
}

.ff-date-side.active{
    color:#222;
    box-shadow:inset 0 -2px 0 #1677ff;
}

.ff-date-arrow{
    text-align:center;
    color:#9aa0a6;
    font-size:13px;
}

.ff-date-calendar-icon{
    width:30px;
    height:29px;

    border:0;
    background:transparent;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#92999f;
    cursor:pointer;
}

.ff-date-calendar-icon svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}


/* ==========================================================
   POPOVER
   ========================================================== */

.ff-picker{
    position:fixed;
    z-index:200000;

    width:438px;

    background:#fff;
    border:1px solid #edf0f3;
    border-radius:8px;

    box-shadow:
        0 10px 30px rgba(26,34,44,.16),
        0 2px 8px rgba(26,34,44,.08);

    display:none;
    overflow:hidden;

    font-family:"Segoe UI",Arial,sans-serif;
    color:#262b30;
}

.ff-picker.open{
    display:block;
}

.ff-picker-main{
    display:grid;
    grid-template-columns:288px 150px;
    min-height:310px;
}


/* ==========================================================
   CALENDÁRIO
   ========================================================== */

.ff-picker-calendar{
    border-right:1px solid #edf0f3;
}

.ff-picker-head{
    height:48px;

    display:grid;
    grid-template-columns:34px 34px 1fr 34px 34px;
    align-items:center;

    border-bottom:1px solid #edf0f3;
}

.ff-picker-head button{
    width:32px;
    height:32px;

    border:0;
    background:transparent;

    color:#8c949b;
    font-size:18px;

    cursor:pointer;
    border-radius:5px;
}

.ff-picker-head button:hover{
    background:#f3f6f8;
    color:#333;
}

.ff-picker-title{
    text-align:center;
    font-size:13px;
    font-weight:600;
}

.ff-picker-week{
    display:grid;
    grid-template-columns:repeat(7,1fr);

    padding:10px 10px 5px;
}

.ff-picker-week div{
    text-align:center;

    font-size:11.5px;
    color:#454a50;

    height:25px;
    line-height:25px;
}

.ff-picker-days{
    display:grid;
    grid-template-columns:repeat(7,1fr);

    padding:0 10px 10px;
}

.ff-picker-day{
    width:32px;
    height:32px;

    margin:1px auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid transparent;
    border-radius:5px;

    background:#fff;
    color:#333;

    font-size:11.5px;

    cursor:pointer;
}

.ff-picker-day:hover:not(.selected){
    background:#f0f6ff;
}

/* OUTRO MÊS */
.ff-picker-day.other-month{
    color:#c5c9cd;
}

/* HOJE */
.ff-picker-day.today{
    border-color:#1677ff;
    color:#1677ff;
}

/* SELECIONADO */
.ff-picker-day.selected{
    background:#1677ff;
    border-color:#1677ff;
    color:#fff;
    font-weight:600;
}

/* hoje + selecionado */
.ff-picker-day.today.selected{
    color:#fff;
}


/* ==========================================================
   HORA
   ========================================================== */

.ff-picker-time{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.ff-time-title{
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-bottom:1px solid #edf0f3;

    font-size:13px;
    font-weight:600;
}

.ff-time-columns{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    height:248px;
}

.ff-time-column{
    overflow-y:auto;
    border-right:1px solid #edf0f3;

    scrollbar-width:thin;
}

.ff-time-column:last-child{
    border-right:0;
}

.ff-time-item{
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:2px 4px;

    border-radius:4px;

    font-size:11.5px;
    cursor:pointer;
}

.ff-time-item:hover{
    background:#f3f6f8;
}

.ff-time-item.selected{
    background:#e3f2ff;
    color:#263238;
}


/* ==========================================================
   RODAPÉ
   ========================================================== */

.ff-picker-footer{
    height:42px;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    padding:0 10px;

    border-top:1px solid #edf0f3;
}

.ff-picker-ok{
    height:28px;

    padding:0 10px;

    border:0;
    border-radius:4px;

    background:#1677ff;
    color:#fff;

    font-size:11.5px;
    font-weight:600;

    cursor:pointer;
}

.ff-picker-ok:hover{
    background:#086be8;
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media(max-width:600px){

    .ff-picker{
        width:calc(100vw - 20px);
    }

    .ff-picker-main{
        grid-template-columns:1fr;
    }

    .ff-picker-calendar{
        border-right:0;
    }

    .ff-picker-time{
        border-top:1px solid #edf0f3;
    }
}