body {
        font-family: Tahoma;
    }

    header {
        text-align: center;
    }

    #calendar {
        width: 100%;
    }

    #calendar a {

        /* color: #8e352e; */
        text-decoration: none;
    }

    #calendar map {
        color: white;
        text-decoration: none;
    }

    #calendar ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    #calendar li {
        display: block;
        float: left;
        width: 14.2%;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        margin-right: -1px;
        margin-bottom: -1px;
    }

    #calendar ul.weekdays {
        height: 40px;
        background: #8e352e;
    }

    #calendar ul.weekdays li {
        text-align: center;
        text-transform: uppercase;
        line-height: 20px;
        border: none !important;
        padding: 10px 6px;
        color: #fff;
        font-size: 13px;
    }

    #calendar .days li {
        height: 280px;
    }

    #calendar .days li:hover {
        background: #d3d3d3;
    }

    #calendar .date {
        border-radius: 50%;
        width: 18px;
        height: 18px;
        padding: 4px;
        background: #fff;
        border: 3px solid #000;
        color: #000;
        text-align: center;
        border-radius: 50%;
        float: right;
    }

    #calendar .datemap {
        border-radius: 50%;
        width: 18px;
        height: 18px;
        padding: 4px;
        background: sandybrown;
        border: 3px solid #000;
        color: #000;
        text-align: center;
        border-radius: 50%;
        float: right;
    }

    #calendar .datemo {
        text-align: center;
        margin-bottom: 5px;
        padding: 4px;
        background: #333;
        color: #fff;
        width: 44px;
        border-radius: 50%;
        float: right;
    }

    #calendar .event {
        clear: both;
        display: block;
        font-size: 12px;
        border-radius: 4px;
        padding: 5px;
        margin-top: 0px;
        margin-bottom: -20px;
        line-height: 14px;
        background: #e4f2f2;
        border: 1px solid #b5dbdc;
        color: #009aaf;
        text-decoration: none;
        position: relative;
        top: -24px;
    }

        #calendar .title {
          clear: both;
          display: block;
          font-size: 12px;
          border-radius: 3px;
          padding: 2px;
          margin-top: 2px;
          margin-bottom: 2px;
          line-height: 10px;
          background: #e4f2f2;
          border: 1px solid #b5dbdc;
          color: #009aaf;
          text-decoration: none;
          position: relative;
          top: -2px;
          width: 80%;
        }  
        
        #calendar .titleM {
            clear: both;
            display: block;
            font-size: 12px;
            border-radius: 3px;
            padding: 5px;
            margin-top: 5px;
            margin-bottom: 5px;
            line-height: 10px;
            background: #e4f2f2;
            border: 1px solid #fd0303;
            color: #009aaf;
            text-decoration: none;
            position: relative;
            top: -2px;
            width: 80%;
          }  
          
          #calendar .titleBack {
        clear: both;
        display: block;
        font-size: 12px;
        border-radius: 3px;
        padding: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 10px;
        line-height: 10px;
        background: #e4f2f2;
        border: 1px solid #b5dbdc;
        color: #009aaf;
        text-decoration: none;
        position: relative;
        width: 30px;
    }

    #calendar .event-desc {
        color: #666;
        margin: 3px 0 7px 0;
        text-decoration: none;
    }

    #calendar .other-month {
        color: #009aaf;
        color: #666;
    }

    a:link {
        color: blue;
        background-color: transparent;
        text-decoration: none;
    }

    a:visited {
        color: blue;
        background-color: transparent;
        text-decoration: none;
    }

    a:hover {
        color: red;
        background-color: transparent;
        text-decoration: underline;
    }

    a:active {
        color: blue;
        background-color: transparent;
        text-decoration: underline;
    }

    /* ============================
				Mobile Responsiveness
   ============================*/
    @media (max-width: 768px) {

        #calendar .weekdays,
        #calendar .other-month {
            display: none;
        }

        #calendar li {
            height: auto !important;
            border: 1px solid #ededed;
            width: 100%;
            padding: 10px;
            margin-bottom: -1px;
        }

        #calendar .date {
            float: none;
        }
    }