/* =========================================================
   GHOSTLIB CALENDAR
   FRUTIGER AERO // RAINBOW CLUNKY // WEB 1.0
========================================================= */

.calendar-widget {
    padding: 8px !important;

    background:
        radial-gradient(
            rgba(0,120,150,.08) 1px,
            transparent 1px
        );

    background-size: 5px 5px;
}


/* =========================================================
   CALENDAR FRAME
========================================================= */

.chinese-calendar {

    width: 100%;
    padding: 7px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #e5fbff 30%,
            #d9ffe0 65%,
            #fffde0 100%
        );

    border: 3px outset #d9fbff;

    box-shadow:
        3px 3px 0 #458b9c,
        inset 0 0 0 2px rgba(255,255,255,.9);

    color: #06364c;

    font-family:
        Tahoma,
        Verdana,
        Arial,
        sans-serif;

    overflow: hidden;
}


/* =========================================================
   TOP DECORATIONS
========================================================= */

.calendar-decoration {

    margin: 2px 0;
    padding: 3px;

    border: 1px solid #63a9b8;

    background:
        linear-gradient(
            to right,
            #b9f8ff,
            #ffffff,
            #c9ffb7,
            #fff58a
        );

    color: #0074ad;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;
    font-weight: bold;

    letter-spacing: 1px;

    text-align: center;

    text-shadow:
        1px 1px 0 white;
}


/* Primer adorno */

.calendar-decoration:first-child {
    color: #0073a8;

    border-color: #35c8e5;
}


/* Segundo adorno */

.calendar-decoration:nth-child(2) {
    color: #168e29;

    border-color: #58c957;

    background:
        linear-gradient(
            to right,
            #d9ffd2,
            #ffffb0,
            #ffffff
        );
}


/* =========================================================
   MONTH TITLE
========================================================= */

.calendar-title {

    margin: 6px 0;

    padding: 5px;

    color: white;

    background:
        linear-gradient(
            to right,
            #009ee5,
            #21c7e8,
            #46c72e,
            #ffe329
        );

    border:
        2px solid #005b91;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.9),
        2px 2px 0 #005475;

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 1px;

    text-align: center;

    text-shadow:
        1px 1px 0 #005071;
}


/* =========================================================
   TABLE
========================================================= */

.calendar-table {

    width: 100%;

    table-layout: fixed;

    border-collapse: separate;

    border-spacing: 2px;

    font-family:
        Tahoma,
        Verdana,
        Arial,
        sans-serif;
}


/* =========================================================
   WEEKDAYS
========================================================= */

.calendar-table .weekdays td {

    padding: 4px 1px;

    color: #075b7d;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #9ef3ff
        );

    border:
        2px outset #d5f7ff;

    box-shadow:
        1px 1px 0 #70aeba;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;
    font-weight: bold;

    text-align: center;
}


/* =========================================================
   INDIVIDUAL DAYS
========================================================= */

.calendar-table .day {

    height: 27px;

    padding: 2px;

    color: #17657d;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #d9f8fc
        );

    border:
        2px outset #c5f3fa;

    box-shadow:
        1px 1px 0 #78aebb;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
    font-weight: bold;

    text-align: center;
    vertical-align: middle;

    transition:
        transform .08s steps(2);
}


/* =========================================================
   COLORED COLUMNS
   ========================================================= */

/* Domingo — azul */

.calendar-table td:nth-child(1) {
    background:
        linear-gradient(
            135deg,
            #e5fbff,
            #a8efff
        );

    color: #006ca1;
}


/* Lunes — verde */

.calendar-table td:nth-child(2) {
    background:
        linear-gradient(
            135deg,
            #f0ffe9,
            #b8f3a8
        );

    color: #168e29;
}


/* Martes — amarillo */

.calendar-table td:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            #fffef0,
            #fff27a
        );

    color: #8d7000;
}


/* Miércoles — rosa */

.calendar-table td:nth-child(4) {
    background:
        linear-gradient(
            135deg,
            #fff3fa,
            #ffb7d9
        );

    color: #b30061;
}


/* Jueves — cyan */

.calendar-table td:nth-child(5) {
    background:
        linear-gradient(
            135deg,
            #efffff,
            #91f4ff
        );

    color: #00758f;
}


/* Viernes — naranja */

.calendar-table td:nth-child(6) {
    background:
        linear-gradient(
            135deg,
            #fff7e8,
            #ffc46b
        );

    color: #9b5700;
}


/* Sábado — verde/cyan */

.calendar-table td:nth-child(7) {
    background:
        linear-gradient(
            135deg,
            #ecfff5,
            #8ee9b5
        );

    color: #08743a;
}


/* =========================================================
   LINKS
========================================================= */

.calendar-table .day a {

    display: block;

    color: inherit;

    text-decoration: none;

    font-weight: bold;
}


.calendar-table .day a:hover {

    color: white;

    background:
        linear-gradient(
            135deg,
            #ff4fa3,
            #a84dff,
            #009ee5
        );

    text-shadow:
        1px 1px 0 #5b176d;

    transform:
        translate(-1px,-1px);
}


/* =========================================================
   TODAY
========================================================= */

.calendar-table .today {

    position: relative;

    background:
        linear-gradient(
            135deg,
            #fff35a,
            #ffcc20 45%,
            #ff9d27
        ) !important;

    color: #7d4800 !important;

    border:
        3px outset #fff7a0;

    box-shadow:
        2px 2px 0 #b87913,
        inset 0 0 0 1px white;

    font-weight: 900;
}


.calendar-table .today a {

    color: #7d4800;

    text-decoration: none;
}


.calendar-table .today::after {

    content: "★";

    position: absolute;

    top: -8px;
    right: -5px;

    color: #ff4fa3;

    font-size: 11px;

    text-shadow:
        1px 1px 0 white;
}


/* =========================================================
   EMPTY CELLS
========================================================= */

.calendar-table td:empty {

    background:
        rgba(190,225,235,.25) !important;

    border:
        1px dotted #8bbcc7;

    box-shadow: none;
}


/* =========================================================
   HOVER DAYS
========================================================= */

.calendar-table .day:not(:empty):hover {

    transform:
        translate(-1px,-1px);

    box-shadow:
        2px 2px 0 #458b9c;

    filter:
        brightness(1.06);
}


/* =========================================================
   BOTTOM DECORATION
========================================================= */

.chinese-calendar::after {

    content:
        "✦ ★ ✦ ★ ✦ ★ ✦";

    display: block;

    margin-top: 6px;

    padding: 5px 2px;

    border-top:
        2px dotted #54a8b8;

    color: #008ac1;

    background:
        linear-gradient(
            to right,
            #c9f7ff,
            #e7ffd8,
            #fff7a0,
            #ffd3e7
        );

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;
    font-weight: bold;

    letter-spacing: 1px;

    text-align: center;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 500px) {

    .calendar-widget {
        padding: 6px !important;
    }

    .chinese-calendar {
        padding: 5px;
    }

    .calendar-table {
        border-spacing: 1px;
    }

    .calendar-table .day {
        height: 24px;
        font-size: 9px;
    }

    .calendar-table .weekdays td {
        padding: 3px 1px;
        font-size: 8px;
    }

    .calendar-title {
        font-size: 10px;
    }
}