jsc.css

/* Блок календаря вместе с кнопками переключения месяцев */
.jsc-block {
    padding: 30px 0px 30px 0px;
}

/* Задаем ширину блока месяца */
.jsc-month {
    width: 260px;
    text-align: center;

}
.tapl-cont .jsc-month {
    width: 320px;
    text-align: center;
}

/* Кнопки переключения месяцев */
.tap-change {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* Блок календарной сетки */
.jsc-calendar-wrapper {
    float: left;
}

/* Главный контейнер календаря */
table.jsc-calendar {
    margin: 0px 0px 0px 0px;
    cursor: default;
    border-collapse: collapse;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* TD - числа */
table.jsc-calendar tbody td {
    height: 25px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #DDD;
    /*font-weight: normal;*/
    font-size: 13px;
    width: 34px;
    color: #fff;
}
.tapl-cont table.jsc-calendar tbody td {
    height: 35px;
    width: 40px;
}

/* TH - дни недели и месяца*/
table.jsc-calendar thead th {
    height: 25px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #DDD;
    /*font-weight: normal;*/
    font-size: 13px;
    background-color: #fff;
    cursor: default;
}
.tapl-cont table.jsc-calendar thead th {
    height: 35px;
}

/* Даты в настоящих и будущих месяцах */
table.jsc-calendar tbody td.scope {
    color: #333;
}
table.jsc-calendar tbody td.scope:hover{
    background-color:#209be4;
    color: #fff;
    cursor: pointer;
}
table.jsc-calendar tbody td.scope.granted.include:hover{
    background-color:#209be4;
    color: #fff;
    cursor: pointer;
}

/*  Заблокированная дата */
table.jsc-calendar tbody td.scope.locked {
    color: #fff;
    background-image: url("../ico/lock.png");
    background-repeat: no-repeat;
    background-position: 8px 6px;
    background-color: #ec7777;
    font-size: 1px;
}
table.jsc-calendar tbody td.scope.locked:hover {
    color: #fff;
    background-image: url("../ico/lock.png");
    background-repeat: no-repeat;
    background-position: 8px 6px;
    background-color:#209be4;
    font-size: 1px;
}
.tapl-cont table.jsc-calendar tbody td.scope.locked {
    background-position: 14px 9px;
}

/* Выделяем дни недели */
table.jsc-calendar tbody td.scope.granted {
    color: #333;
    background-color: #6EC76E;
}

/*  Скрываем дни в прошедших датах в начале и конце месяца */
table.jsc-calendar tbody td.past {
    color: #fff;
    background-color: #fff;
}
table.jsc-calendar tbody td.past:hover {
    cursor: default;
    background-color: #fff;
    color: #fff;
}

/* Прошедшие даты */
table.jsc-calendar tbody td.past.scope {
    color: #ddd;
    background-color: #fff;
}


/* Заблокированная дата на прошедших днях */
table.jsc-calendar tbody td.past.scope.locked {
    color: #ddd;
    background-image: url("../ico/lock.png");
    background-repeat: no-repeat;
    background-position: 8px 6px;
    background-color:#eee;
    font-size: 1px;
}
table.jsc-calendar tbody td.past.scope.locked:hover {
    color: #ddd;
    background-image: url("../ico/lock.png");
    background-repeat: no-repeat;
    background-position: 8px 6px;
    background-color:#eee;
    font-size: 1px;
}
.tapl-cont table.jsc-calendar tbody td.past.scope.locked {
    background-position: 14px 9px;
}

/*  текущая дата  */
table.jsc-calendar tbody td.current {
    color: green;
}

/*  выделения цветом    */
table.jsc-calendar tbody td.include {
    background-color: #6EC76E;
}
table.jsc-calendar tbody td.scope.granted.exclude {
    background-color: #EC7777;
}
table.jsc-calendar tbody td.scope.exclude {
    background-color: #EC7777;
}
table.jsc-calendar tbody td.scope.exclude:hover {
    color: #333;
    background-color: #EC7777;
}

/*  обязательно последними temp и reselect  */
/* Выделение дат */
table.jsc-calendar tbody td.temp {
    background-color: #FFF691;
}
table.jsc-calendar tbody td.scope.granted.temp {
    background-color: #FFF691;
}
/* Ховер на блокированную дату */
/* table.jsc-calendar tbody td.temp.locked {
    background-color: #ddcf32;
} */

/* Перевыделение дат */
table.jsc-calendar tbody td.reselect {
    background-color: #1f7f3a;
}

/*  дни недели   */
table.jsc-calendar thead th {
    font-weight: normal;
    border-bottom: 1px solid #ccc;
    color: #333;
}

/* месяц */
table.jsc-calendar thead th.month-name {
    border-bottom: none;
    color: #333;
}

/* хз */
.jsc-calendar-white {
    border:1px solid #ccc;
    background: #fff;
    border-radius: 5px;
}

#jsc-calendar-container {

}

div.jsc-datepicker-container {

}

/* Дальше пошел css для большого календаря с ценами */
.full-size .jsc-month {
    width: 800px;
}
.full-size table.jsc-calendar thead th.month-name {
    border-bottom: none;
    /*    color: #333;
        border-left: none;
        border-right: none;*/
    font-size: 14px;
    background-color: #fafafa;
}
.full-size .calendar-btn.btn-next span {
    margin-left: -42px;

}
.full-size table.jsc-calendar tbody td {
    height: 40px;
    text-align: left;
    vertical-align: top;
    padding: 4px 3px 3px 7px;
    border: 1px solid #DDD;
    /* font-weight: normal; */
    font-size: 11px;
    width: 114px;
    /*color: #fff;*/
}
.full-size table.jsc-calendar tbody td.scope.granted {
    /*color: #000;*/
    /*background-color: #E7FFE7;*/
    background-color: #F5FFF5;
}
.full-size table.jsc-calendar tbody td.scope.granted.past {
    /*color: #000;*/
    /*background-color: #E7FFE7;*/
    background-color: #fafafa;
}
.tap-next {
    float: right;
    font-size: 12px;
    position: absolute;
    top: 0px;
    right: 180px;
    cursor: pointer;
    width: 60px;
    height: 26px;
    line-height: 26px;
    padding-top: 5px;
    text-align: center;
    /* border-left: 1px solid #ccc; */
    color: #333;
    background-color: #eee;
    border-bottom: 1px solid #E2E2E2;
    border-top: 1px solid #E2E2E2;
    border-left: 1px solid #E2E2E2;
}
.tap-prev {
    float: right;
    font-size: 12px;
    position: absolute;
    top: 0px;
    left: 1px;
    cursor: pointer;
    width: 60px;
    height: 26px;
    line-height: 26px;
    padding-top: 5px;
    text-align: center;
    /* border-left: 1px solid #ccc; */
    color: #333;
    background-color: #eee;
    border-bottom: 1px solid #E2E2E2;
    border-top: 1px solid #E2E2E2;
    border-right: 1px solid #E2E2E2;
}
.tap-next:hover, .tap-prev:hover {
    background-color: #e0e0e0;
}
.full-size table.jsc-calendar tbody td.past {
    /*color: #fff;*/
    background-color: #fff;
}
.full-size table.jsc-calendar tbody td .jsc-price-container {
    float: right;
    font-size: 14px;
    text-align: right;
    font-weight: 300;
}
.full-size table.jsc-calendar tbody td .jsc-price-container {
    display: none;
}
.full-size table.jsc-calendar tbody td.granted .jsc-price-container {
    display: block;
}
.full-size table.jsc-calendar tbody td .jsc-price-container .tap-currency {
    font-size: 8px;
    margin-right: 5px;
}


.full-size table.jsc-calendar tbody td .jsc-price-container .direct-sales {
    color: #4b8df8;
}
.full-size table.jsc-calendar tbody td .jsc-price-container .online-sales {
    color: #288A37;
}
.full-size table.jsc-calendar tbody td .jsc-price-container .agents-sales {
    color: #8e44ad;
}
.full-size table.jsc-calendar tbody td .jsc-price-container .suppliers-sales {
    color: #d84a38;
}