/*
=========================================================================
    Controls
=========================================================================
*/
.responsive-calendar .controls {
    text-align: center;
}

.responsive-calendar .controls a {
    cursor: pointer;
}

.responsive-calendar .controls h4 {
    display: inline;
}

.responsive-calendar hr {
    margin-bottom: 10px;
}


/*
=========================================================================
    Days header
=========================================================================
*/
.responsive-calendar .day-headers {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.responsive-calendar .header {
    text-align: center;
    font-weight: bold;
}


/*
=========================================================================
    Days cells
=========================================================================
*/
.responsive-calendar .day,
.responsive-calendar.inSidebar .day {
    display: inline-block;
    position: relative;
    font-size: 14px;
    width: 14.285714285714286%;
    overflow: hidden;
    float: left;
}

.responsive-calendar.inSidebar .day.header {
    font-size: 12px;
}

.responsive-calendar .day a {
    color: #4a4a4a;
    font-size: 14px;
    display: block;
    position: absolute;
    text-align: center;
    width: 75%;
    height: 75%;
}

.responsive-calendar .day a:hover {
    cursor: default;
    text-decoration: none;
}

.responsive-calendar .day.active a {
    color: #FFF;
    background: #108CC8;
    border-radius: 50%;
}

.responsive-calendar .day.active a:hover {
    cursor: pointer;
    text-decoration: none;
}

.responsive-calendar .day a .dNum {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
}    

.responsive-calendar .day a .dName,
.responsive-calendar .day a .dayEvent,
.responsive-calendar .day.active a:before,
.responsive-calendar .day .badge {
	display: none;
}

.responsive-calendar .days .day:after{
	content: "";
  	display: block;
  	padding-bottom: 100%;
}

.responsive-calendar .day a .dName {
    display: none;
    font-size: 12px;
}


/*
=========================================================================
    Past days
=========================================================================
*/
.responsive-calendar .day.active .not-current {
    background-color: #8fcaef;
    color: #FFF;
}

.responsive-calendar .day.active .not-current:hover {
    background-color: #bcdff5;
}

.responsive-calendar .day.not-current a {
    color: #DDD;
}


@media only screen and (min-width: 480px) {

}



@media only screen and (min-width: 768px) {

    /*
    =========================================================================
        Days header
    =========================================================================
    */

    .responsive-calendar .day-headers {
        border: 0;
        padding-bottom: 10px;
        margin-bottom: 5px;
    }

    .responsive-calendar.inMainContent .day.header {
        text-align: left;
        padding-left: 18px;
        border: 0 none;
        box-shadow: none;
        font-size: 16px;
    }

    .responsive-calendar.inMainContent .day {
        box-shadow: 0px 0 0 0 #ddd, 0 0px 0 0 #ddd, 1px 1px 0 0 #ddd, 1px 0 0 0 #ddd inset, 0 1px 0 0 #ddd inset;
    }

    .responsive-calendar.inMainContent .day a .dayEvent,
    .responsive-calendar.inMainContent .day.active a:before,
    .responsive-calendar.inMainContent .day .badge {
        display: block;
    }

    .responsive-calendar .day:hover {
        overflow: visible;
        z-index: 999;
    }

    .responsive-calendar.inMainContent .day a {
        width: 100%;
        height: 100%;
        text-align: left;
        font-size: 18px;
        padding: 5px 10px;
    }
    
    .responsive-calendar.inMainContent .day a:hover {
        text-decoration: none;
        box-shadow: 0 0 0 1px #444 inset;
    }

    .responsive-calendar.inMainContent .day.active a{
        background: transparent;
        border-radius: 0;
    }

    .responsive-calendar.inMainContent .day.active a {
        color: #4a4a4a;
    }

    .responsive-calendar.inMainContent .day.active a:hover {
        box-shadow: 0 0 0 1px #1d86c8 inset;
    }

    .responsive-calendar .day.active a:before {
        border-color: #1d86c8 #1d86c8 transparent transparent;
        border-style: solid;
        border-width: 15px;
        content: "";
        width: 0px;
        height: 0px;
        line-height: 0px;
        border-radius: 0;
        position: absolute;
        top: 0;
        right: 0;
    }    

    .responsive-calendar.inMainContent .day a .dNum {
        position: static;
    }

    .responsive-calendar.inSidebar .day a .dNum {
        font-size: 11px;
    }

    .responsive-calendar .day a .dayEvent {
        font-size: 11px;
        z-index: -999;
        position: absolute;
        background: #eee;
        top: 35px;       
    }

    .responsive-calendar .day a .dayEvent span {
        margin-bottom: 4px;
        padding: 1px 2px;
        display: block;
        white-space: nowrap;
    }

    .responsive-calendar .day a .dayEvent span:before {
        content: "\2022\a0";
    }

    .responsive-calendar .day a:hover .dayEvent {
        overflow: visible;
        width: 400px;
        z-index: 999;
        border: 1px solid #555;
        background-color: #000;
        color: #FFF;
        padding: 10px;
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
        left: -5px;
        top: 45px;
        font-size: 14px;
    }

    .responsive-calendar .day a:hover .dayEvent:after,
    .responsive-calendar .day a:hover .dayEvent:before {
        bottom: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .responsive-calendar .day a:hover .dayEvent:after {
        border-color: rgba(136, 183, 213, 0);
        border-bottom-color: #000;
        border-width: 10px;
        margin-left: 3px;
    }

    .responsive-calendar .day a:hover .dayEvent:before {
        border-color: rgba(194, 225, 245, 0);
        border-bottom-color: #000;
        border-width: 11px;
        margin-left: 2px;
    }

    .responsive-calendar .day a:hover .dayEvent span {
        white-space: normal;
    }

    .responsive-calendar .day .badge {
        position: absolute;
        top: 2px;
        right: 2px;
        background: transparent;
        min-width: auto;
        padding: 2px 3px 0 0;
        font-weight: normal;
        font-size: 11px;
    }
    
    .inSidebar .controls h4 {
        font-size: 12px;
    }

    .inSidebar .controls .btn {
        padding: 3px 6px;
        font-size: 12px;
    }

}