/* Calendar --------------------------- */
.calendar {
    box-sizing : border-box;
    width      : 92px;

    .calendar-header {
        position         : relative;
        width            : 100%;
        height           : 20px;
        background-color : @anl-consolidated-color;

        &:before,
        &:after {
            box-sizing       : border-box;
            content          : "";
            display          : block;
            position         : absolute;
            top              : -5px;
            left             : 11px;
            width            : 6px;
            height           : 17px;
            background-color : #ffffff;
            border-top       : 5px solid @anl-consolidated-color;
        }

        &:after {
            left  : auto;
            right : 11px;
        }
    }

    .calendar-content {
        box-sizing  : border-box;
        height      : 80px;
        padding-top : 10px;
        border      : 1px solid #dddddd;
        border-top  : 0;
        text-align  : center;
    }

    &.calendar-not-available {
        .calendar-header {
            background-color: #dddddd;

            &:before, &:after { border-color: #dddddd; }
        }

        .calendar-content { border-color: #eeeeee; }
        .title-metric { color: #dddddd; }
    }
}