.mc-main.mini {
    font-family : "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-weight : normal;
    font-size   : 8px;
    margin      : 15px 0;

    .my-calendar-header {
        max-width     : 282px;
        height        : 25px;

        background    : none;
        border-top    : 1px solid #7d7d80;
        border-bottom : 1px solid #7d7d80;
        text-align    : center;

        .my-calendar-nav {
            position : relative;
            width    : 100%;
            margin   : 0;
            display  : block;

            ul {
                .my-calendar-prev {
                    float  : left;
                    margin : 0;
                    a {
                        display            : inline-block;
                        background         : none;
                        border-radius      : 0;
                        line-height        : 0;
                        padding            : 0;
                        margin-top         : 5px;
                        -webkit-transition : .25s ease-in-out;
                        -moz-transition    : .25s ease-in-out;
                        -o-transition      : .25s ease-in-out;
                        transition         : .25s ease-in-out;

                        width              : 0;
                        height             : 0;
                        border-style       : solid;
                        border-width       : 5px 10px 5px 0;
                        border-color       : transparent #009bde transparent transparent;

                        &:hover, &:focus {
                            text-decoration : none;
                            border-color    : transparent #c1c0c1 transparent transparent;
                        }

                        &:active {
                            border-color : transparent #000000 transparent transparent;
                        }

                        &:before {
                            content : '';
                        }
                    }

                }

                .my-calendar-next {
                    float  : right;
                    margin : 0;
                    a {
                        display            : inline-block;
                        background         : none;
                        border-radius      : 0;
                        line-height        : 0;
                        padding            : 0;
                        margin-top         : 5px;

                        -webkit-transition : .25s ease-in-out;
                        -moz-transition    : .25s ease-in-out;
                        -o-transition      : .25s ease-in-out;
                        transition         : .25s ease-in-out;

                        width              : 0;
                        height             : 0;
                        border-style       : solid;
                        border-width       : 5px 0 5px 10px;
                        border-color       : transparent transparent transparent #009bde;

                        &:hover, &:focus {
                            text-decoration : none;
                            border-color    : transparent transparent transparent #c1c0c1;
                        }

                        &:active {
                            &:after {
                                border-color : transparent transparent transparent #000000;
                            }
                        }

                        &:after {
                            content : '';
                        }
                    }

                }
            }
        }

        .month {
            display        : block;
            width          : 100%;
            margin         : 0 auto;
            text-align     : center;
            font-size      : 14px;
            text-transform : uppercase;
            color          : #55565a;
        }

    }

    .my-calendar-table {
        max-width : 282px;

        thead {
            tr {
                th:first-child {
                    width : inherit;
                }
                th {
                    background : none;
                    color      : #55565a !important;
                    padding    : 6px 0;
                    span {
                        abbr {
                            font-family     : "HelveticaNeue", Helvetica, Arial, sans-serif;
                            pointer-events  : none;
                            border-bottom   : none;
                            text-decoration : none;
                        }
                    }
                }
            }
        }

        tbody {

            tr {
                td:first-child {
                    width : inherit;
                }
                td {

                    .mc-date {
                        background : #e5e4e4;
                        color      : #55565a;
                        padding    : 16px 4px;
                        font-size  : 8px;
                        position   : relative;
                        span {
                            position : absolute;
                            top      : 2px;
                            left     : 2px;
                        }

                    }

                    .calendar-events {
                        z-index       : 3;
                        box-shadow    : none;
                        top           : 0;

                        font-size     : 12px;
                        overflow-x    : hidden;
                        overflow-y    : scroll;
                        text-overflow : ellipsis;

                        @media(min-width : 768px) {
                            top        : 30px;

                            left       : 312px;
                            width      : 281px;
                            height     : 180px;
                            background : none;

                        }

                        .mini-event {
                            .event-title.summary {
                                display : none;
                            }

                            .details {
                                .mc-toggle {
                                    top     : 0;
                                    right   : 10px;
                                    display : block;

                                    &:hover {
                                        background : none;
                                    }

                                    &:after {
                                        content   : "X";
                                        font-size : 16px;
                                        color     : #55565a;
                                        position  : absolute;
                                        top       : 0;
                                        right     : 0;
                                    }

                                    img {
                                        display : none;
                                    }
                                }

                                .time-block {
                                    margin-bottom : 10px;
                                    p {
                                        padding    : 0 !important;
                                        text-align : left;

                                        &:before {
                                            display : none;
                                        }

                                        .mc-event-date {
                                            font-size : 14px;
                                            color     : #55565a;
                                        }

                                        .event-time {
                                            display : none;
                                        }
                                    }
                                }
                                .title {
                                    color         : #55565a;
                                    margin-bottom : 13px;
                                    h3 {
                                        font-size   : 14px;
                                        line-height : 1.4;
                                        margin      : 0 !important;
                                    }
                                }

                                .description {
                                    h3 {
                                        font-size : 14px;
                                        float     : left;
                                        margin    : 0 5px 0 0 !important;
                                    }
                                }

                                .mc_edit_links {
                                    display : none;
                                }
                            }
                        }
                    }
                }

                td.past-day.nextmonth, td.future-day.nextmonth {
                    .mc-date {
                        span {
                            visibility : hidden;
                        }
                    }
                }

                td.current-day {
                    .mc-date {
                        background : #55565a !important;
                        color      : #ffffff;
                    }
                }

                td.has-events {
                    .mc-date {
                        background  : #a2cbef;
                        font-weight : normal;

                        &:hover, &:focus {
                            background : #a6a6a8;

                        }

                        &:active {
                            background : #000000;
                            color      : #ffffff;
                        }

                    }
                }
            }

        }

    }
}