/*********************/
#calendar .panel-heading{
    background: #61bf32;
    background: -moz-linear-gradient(45deg,  #61bf32 0%, #2196f3 100%);
    background: -webkit-linear-gradient(45deg,  #61bf32 0%,#2196f3 100%);
    background: linear-gradient(45deg,  #61bf32 0%,#2196f3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61bf32', endColorstr='#2196f3',GradientType=1 );

}
#calendar .panel-heading .panel-title{
    color:#fff;
}
#calendar .panel-heading .panel-actions a,
#calendar .panel-heading .panel-actions .panel-action{
    color:#fff;
}
#calendar .panel-body{
    position: relative;
}
#calendar .btn-schedule{
    font-size: 16px;
    position: relative;
    border-radius: 10px;
    border-top: 3px solid #80c269;
    border-bottom: 3px solid #80c269;
    background-color: #feffa3;
    padding: 6px 12px 6px 40px;
    color:#212121;
    position: absolute;
    right:16px;
    top:20px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}
#calendar .btn-schedule:hover{
    border-top-color: #feffa3;
    border-bottom-color: #feffa3;
    background-color: #80c269;
    color:#fff;
}

#calendar .btn-schedule::before{
    background-color: #89c997;
    position: absolute;
    width: 25px;
    height: 25px;
    left:10px;
    top:5px;
    border-radius: 100%;
    content: "";
}
#calendar .btn-schedule::after{
    background-image: url(../images/calendar/pencil.svg);
    background-size: contain;
    left:12px;
    top:8px;
    width: 22px;
    height: 22px;
    position: absolute;
    background-repeat: no-repeat;
    content: "";
}

/*********************/
.monthly{
    color:#212121;
}
.monthly .monthly-header{
    width: 100%;
    max-width: 200px;
    margin: 15px auto;
    padding: 0;
    display: block;
}
.monthly .monthly-header .monthly-header-title-date{
    font-size: 22px;
}
.monthly .monthly-header .monthly-prev,
.monthly .monthly-header .monthly-next{
    width: 25px;
    height: 25px;
    background-color: #2196f3;
    border-radius:100%;
    opacity: 1;
}
.monthly .monthly-header .monthly-prev:hover,
.monthly .monthly-header .monthly-next:hover{
    background-color: #186db0;
}
.monthly .monthly-header .monthly-prev::after,
.monthly .monthly-header .monthly-next::after{
    width: 22px;
    height: 22px;
    border: none;
    margin: 0;
    background: url(../images/calendar/right-arrow.svg) no-repeat center center;
    background-size: contain;
    transform: rotate(0);
    left:2px;
    top:2px;
}
.monthly .monthly-header .monthly-prev::after{
    transform: rotate(180deg);
    left:1px;
}
.monthly .monthly-day-title-wrap div{
    font-size: 14px;
    padding: 5px;
    color:#fff;
    border-right: 1px solid #fff; 
    background: #68d831;
    background: -moz-linear-gradient(top,  #93d970 0%, #68d831 100%);
    background: -webkit-linear-gradient(top,  #93d970 0%,#68d831 100%);
    background: linear-gradient(to bottom,  #93d970 0%,#68d831 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93d970', endColorstr='#68d831',GradientType=0 );
}
.monthly .monthly-day-title-wrap div:first{
    border-left: 1px solid #fff;
}
.monthly .monthly-day-title-wrap .bgR{
    background: -moz-linear-gradient(top,  #ffab7e 0%, #ff8b4e 100%);
    background: -webkit-linear-gradient(top,  #ffab7e 0%,#ff8b4e 100%);
    background: linear-gradient(to bottom,  #ffab7e 0%,#ff8b4e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffab7e', endColorstr='#ff8b4e',GradientType=0 );
}
.monthly .monthly-day-wrap{
    border-collapse: collapse;
}
.monthly .monthly-day-wrap .monthly-day,
.monthly .monthly-day-wrap .monthly-day-blank{
    padding: 10px;
    font-size: 22px;
    border: 1px solid #e2e2e2;
}
.monthly .monthly-day-wrap .monthly-day.monthly-today{
    background-color: #feffa3;
}

.monthly .monthly-day-wrap .monthly-day.dayR .monthly-day-number{
    color:#ffb187;
}
.monthly .monthly-day-wrap .monthly-day-number{
    position: static;
}
.monthly .monthly-day-wrap .monthly-day-blank{
    background-color: #f7f7f7;
}
.monthly .monthly-day-wrap .monthly-day-blank .monthly-day-number{
    color:#bdbdbf;
}
.monthly .monthly-day-wrap .monthly-indicator-wrap{
    line-height: 1.4;
}
.tag{
    font-size: 14px;
    border-left-style: solid;
    border-left-width: 3px;
    border-top-right-radius:10px;  
    border-bottom-right-radius:10px;
    margin: 10px 0 0 -10px;
    padding: 10px 6px 10px 35px;
    display: inline-block;
    position: relative;
    color:#212121;
    text-decoration: none;
    white-space: nowrap;
}
.tag:hover, .tag:focus{
    color:#212121;
    text-decoration: none;
}
.tag::before{
    position: absolute;
    width: 23px;
    height: 23px;
    left:7px;
    top:6px;
    border-radius: 100%;
    content: "";
}
.tag::after{
    position: absolute;
    background-repeat: no-repeat;
    content: "";
}
.tag.tag-g{
    background-color: #ecfbef;
    border-left-color: #93d970;
}
.tag.tag-g:hover{
    background-color: #d5f2da;
    text-decoration: none;
}
.tag.tag-g::before{
    background-color: #93d970;
}
.tag.tag-g::after{
    background-image: url(../images/calendar/completed-task.svg);
    background-size: contain;
    left:10px;
    top:13px;
    width: 20px;
    height: 20px;
}
.tag.tag-r{
    background-color: #ffeee8;
    border-left-color: #ffab7e;
    pointer-events: none;
}
.tag.tag-r:hover{
    background-color: #faddd4;
    text-decoration: none;
}
.tag.tag-r::before{
    background-color: #ffab7e;
}
.tag.tag-r::after{
    background-image: url(../images/calendar/student.svg);
    background-size: contain;
    left:7px;
    top:11px;
    width: 24px;
    height: 24px;
}
.monthly .monthly-day-wrap .monthly-indicator-wrap .btn-block .btn{
    font-size: 11px;
    margin: 5px 1px 0;
    padding: 6px 2px;
}
.monthly .monthly-day-wrap .monthly-indicator-wrap .btn-block .btn.btn-primary{
    background-color: #ff7930;
    border-color: #ff7930;

}
.monthly .monthly-day-wrap .monthly-indicator-wrap .btn-block .btn.btn-primary:hover{
    background-color: #e86e2c;
    border-color: #e86e2c!important;

}

.monthly .monthly-day-wrap .monthly-indicator-wrap .unit-text {
    font-size: 12px;
    padding: 5px 2px 0;
}

.calendar-popup{
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}
.calendar-popup h3{
    background-color: #61bf32;
    color:#fff;
    font-size: 20px;
    padding: 12px 15px 12px 50px;  
    position: relative;
    margin: 0;
}
.calendar-popup h3::before{
    position: absolute;
    width: 23px;
    height: 23px;
    left:15px;
    top:10px;
    border-radius: 100%;
    content: "";
}
.calendar-popup h3::after{
    position: absolute;
    background-repeat: no-repeat;
    content: "";
}
.calendar-popup .mfp-close, 
.calendar-popup .mfp-close-btn-in .mfp-close{
    color:#fff;
}
.calendar-popup .popup-content{
    padding: 15px;
}
.calendar-popup .btn-block{
    background-color: #f6f6f6;
    border-top: 1px solid #bfbfbf;
    padding: 10px 15px;
}
.calendar-popup .btn-block .btn{
    min-width: 100px;
    margin: 0 5px;
}
.calendar-popup .btn-block .btn.btn-primary{
    background-color: #61bf32;
    border-color: #ccc;
}
.calendar-popup .btn-block .btn.btn-primary:hover{
    background-color: #cc0000;
    border-color: #cc0000;
}
#multiple h3::before{
    background-color: #93d970;
}
#multiple h3::after{
    background-image: url(../images/calendar/completed-task.svg);
    background-size: contain;
    left:18px;
    top:14px;
    width: 20px;
    height: 20px;
}
#multiple table{
    border-collapse: collapse;
    border: 1px solid #dddddd;
    width: 100%;
}
#multiple table tr{
    border-top: 1px solid #dddddd;
}
#multiple table tr td{
    padding: 5px;
}
#multiple table tr td.name{
    background-color: #ff8453;
    color:#fff;
    font-size: 14px;
    text-align: center;
    width: 80px;
}
#multiple table tr td .tag{
    display: inline-block;
    vertical-align: top;
    margin: 0 5px 5px 0;
    padding: 7px 10px 9px 38px;
}
#single h3::before{
    background-color: #ffab7e;
}
#single h3::after{
    background-image: url(../images/calendar/student.svg);
    background-size: contain;
    left:15px;
    top:15px;
    width: 24px;
    height: 24px;
}
#single .btn-block{
    background-color: transparent;
    border-top: none;
}
#single .btn-block .btn{
    width: 100px;
    margin: 0 10px;
}
#single .btn-block .btn.btn-primary{
    background-color: #ff7930;
    border-color: #ff7930;
}
#schedule h3::before{
    background-color: #89c997;
}
#schedule h3::after{
    background-image: url(../images/calendar/pencil.svg);
    background-size: contain;
    left:20px;
    top:12px;
    width: 22px;
    height: 22px;
}
#schedule .form-group i{
    color:#84ccc9;
    margin-right: 3px;

}
#schedule .form-group label.control-label{
    padding: 6px 12px;
}
#schedule .form-group.schedule-time{
    position: relative;
}
#schedule .form-group.schedule-time span{
    position: absolute;
    left:100%;
    top:5px;
}
#schedule .form-group .form-group{
    margin-bottom: 0;
}
#schedule .form-group select{
    border: none;
    box-shadow:none;
    margin-bottom: 0!important;
}
#schedule .form-group.line{
    border-bottom: 1px solid #eff2f7;
    padding-bottom: 15px;
}
#schedule .form-group .input-checkbox{
    display: inline-block;
    vertical-align: top;
    padding-top: 6px;
    margin: 0 2px;
}
#schedule .form-group .input-checkbox input{
    display:none;
}
#schedule .form-group .input-checkbox label{
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: #e4e4e4;
    text-align: center;
}
#schedule .form-group .input-checkbox input:checked+label{
    background-color: #ff8453;
    color:#fff;
}



@media screen and (max-width: 1024px) {
    .monthly .monthly-day-wrap .monthly-indicator-wrap .btn-block .btn{
        margin: 0 10px 0 0;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    #calendar .panel-heading .panel-actions{
        position: absolute;
    }
    .monthly .monthly-header{
        margin-left: 0;
        margin-right: 0;
        max-width: 175px;
    }
    .monthly .monthly-header .monthly-header-title-date{
        font-size: 20px;
    }
    .monthly .monthly-day-title-wrap div span{
        display: none;
    }
    .monthly .monthly-day-wrap .monthly-day, 
    .monthly .monthly-day-wrap .monthly-day-blank{
        padding: 5px 5px 15px;
        font-size: 12px;
    }
    .monthly .monthly-day-wrap .monthly-indicator-wrap{
        padding-top: 0;
    }
    .monthly .monthly-day-wrap .monthly-indicator-wrap .btn-block,
    .monthly .monthly-day-wrap .monthly-indicator-wrap .unit-text,
    .monthly .monthly-day-wrap .monthly-indicator-wrap .tag::before,
    .monthly .monthly-day-wrap .monthly-indicator-wrap .tag::after {
        display: none;
    }
    .tag{
        margin-left: -5px;
        font-size: 12px;
        padding: 5px;
        margin-top: 5px;
    }
    .tag.tag-r{
        pointer-events: auto;
    }
    #multiple table tr td.name{
        font-size: 12px;
    }
    #schedule .form-group{
        margin-left: -15px;
    }
    #schedule .form-group .form-group{
        margin-right: 0;
    }
    #schedule .form-group label.control-label{
        padding-left: 15px;
        padding-right: 15px;
    }
    #schedule .form-group.schedule-time span{
        display: none;
    }
    #schedule .form-group.schedule-time .col-sm-4{
        display: inline-block;
        vertical-align: top;
        width: 40%;
        margin-bottom: 10px;
    }
    #schedule .form-group.schedule-time .col-sm-5{
        display: inline-block;
        vertical-align: top;
        width: 50%;
        margin-bottom: 10px;
    }
}