body, *{
    padding:0px;
    margin:0px;
    box-sizing: border-box;
}
.calendar {
    background-color: white;
    padding: 20px;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
    font-size: xx-small;
}

    .calendar .dropdown {
        display: none;
        position: absolute;
        background-color: #fff;
		font-weight:bold;
        color: #1caff6;
        text-align: center;
        font-size: 13pt;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 30px;
        padding-right: 30px;
        width: 160px;
        left: 0px;
        z-index: 2000;
    }

.calendar .dropdown .dropdown-item
{
    cursor:pointer;
    opacity: .7;
    transition: .5s opacity;
}

.calendar .dropdown .dropdown-item:hover
{
    opacity: 1;
}

.calendar .years
{
    display:none;
}

    .calendar .title {
        text-align: center;
        font-size: xx-small;
    }

    .calendar .calendar-btn {
        float: left;
        background-color: #24aeff;
        color: white;
        text-align: center;
		font-weight:bold;
        font-size: 13pt;
		border-radius: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        position: relative;
        width: 20%;
        cursor: pointer;
        transition: .5s background-color;
    }

.calendar .calendar-btn:hover{
    background-color:#1f71a1;
}

.calendar .year-btn
{
    float:right;
}

    .calendar .calendar-dates .days .day {
        float: left;
        width: 12%;
        margin: 1%;
        padding: 1%;
        font-size: 10pt;
        text-align: center;
        border-radius: 10px;
        border: solid 1px #ddd;
    }

.calendar .calendar-dates .days .day.blank
{
    background-color: white;
    border:none;
}

.calendar .calendar-dates .days .day.selected
{
    background-color: #1caff6;
    color: white;
    cursor:pointer;
    /*opacity: .5;
    transition: .5s opacity;*/
}

    .calendar .calendar-dates .days .day.selectedclick {
        background-color: darkblue;
        color: white;
        cursor: pointer;
        /*opacity: .5;*/
        /*transition: .5s opacity;*/
    }

.calendar .calendar-dates .days .day.selected:hover
{
    opacity: 1;
}

.calendar .calendar-dates .days .day.label
{
    height: 40px;
    background-color: white;
    color: black;
    border:none;
    font-weight:bold;
}

.clear{
    clear:both;
}

@media only screen and (max-width: 960px) {
    .calendar{
        width: 100%;
        margin: 0px;
        margin: 0px;
        box-sizing: border-box;
        position: relative;
        left: 0px;
    }
}