/*
input.date {
    width: 150px;
}*/

.mg_popup_cal {
    margin-top:  2px;
    position: absolute;
    /*top: 50px;
    left: 50px;*/
    width: 300px;
    /*height: 400px; */
    border: 1px solid #999;
    padding: 4px;
    background-color: #fff;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    /*z-index: 1;*/
}

.mg_cal_popup {
    width: 100%;
    height: 250px;
    /*font-size: 14px;*/
    border: none;
    border-collapse: collapse;
}

.mg_cal_popup tr td {
    /*width:  14.2%;*/
    /*border:  1px solid #e3e3e3;*/
    padding: 0;
    text-align: center;
    vertical-align: middle !important;
}

.mg_cal_weekdays td {
    color: #666;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    height: 30px;
}

.mg_cal_f td {
    border-top: 1px solid #CCC;
    height: 30px;
    cursor: pointer;
}

.mg_cal_f td:hover {
    background-color: #EEE;
}

.mg_cal_week td {
    width: 14.2%;
}

.mg_cal_week td.active {
    cursor: pointer;
}

.mg_cal_week td.active:hover {
    background-color: #EEE;
}
/* towa shte se puska sys script samo za kletkite w koito ima data
.mg_cal_week td:hover {
    cursor: pointer;
}
*/

tr.mg_cal_h td {
    color: #000;
    height: 30px;
    padding: 5px 0;
}

td.mg_cal_month {
    font-size: 18px;
    border-left: none;
    border-right: none;
    /* color: #aa0038; */
    /*cursor: pointer; */
}

td.mg_cal_week_today {
    background-color: #EEE;
    /* color: #fff; */
}

td.mg_cal_week_current {
    background-color: red;
}

.mg_cal_popup tr td.mg_cal_left_arrow,
.mg_cal_popup tr td.mg_cal_right_arrow {
    background-image: url(../img/cal_arrows.png);
    background-repeat: no-repeat;
    background-size: 120px 120px;
    cursor: pointer;
}

.mg_cal_popup tr td.mg_cal_left_arrow {
    background-position: top left;
}

.mg_cal_popup tr td.mg_cal_right_arrow {
    background-position: top right;
}

.mg_cal_popup tr td.mg_cal_left_arrow:hover {
    background-position: bottom left;
}

.mg_cal_popup tr td.mg_cal_right_arrow:hover {
    background-position: bottom right;
}

td.mg_cal_today { cursor: pointer; }

td.mg_cal_red_day {
    background-color: red;
    color: white;
}
td.mg_cal_red_day:hover,
td.mg_cal_red_day.active:hover {
    background-color: red;
    color: white;
    cursor: default;
}

@media only screen
and (max-width: 480px)
and (orientation: portrait) {
    .mg_popup_cal {
        left: 0;
        margin: 1% 3%;
        padding: 1%;
        width: 92%;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio:  1.5),
    only screen and (-o-min-device-pixel-ratio:  3/2),
    only screen and (min--moz-device-pixel-ratio:  1.5),
    only screen and (min-device-pixel-ratio:  1.5) {

    .mg_cal_popup { font-size: 16px; } /*TODO: -< MAIN.CSS*/

    .mg_cal_popup tr td.mg_cal_left_arrow,
    .mg_cal_popup tr td.mg_cal_right_arrow  {
        background-image: url(../img/cal_arrows@2x.png);
        background-size: 80px 80px;
    }
}