.chsuCalendare
{
    all: initial;
    display: inline-block;
    font-size: medium;
    min-width: 16em;
    //max-height: 18em;
    background-color: #ebe9eb;
    margin: 1em;
    position: relative;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
    padding-bottom: 0.35em;

    .header
    {
        width: 100%;
        height: 2.25em;
        font-size: 1em;
        background-color: #ef3841;
        cursor: default;
        background: linear-gradient(0deg, #b32b0c, #cd310d);
        position: relative;
        color: #fff;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-weight: bold;
        text-shadow: 0px -1px 0 #87260C;
        text-transform: uppercase;

        span
        {
            display: inline-block;
            line-height: 2.25em;
            user-select: none;
        }

        .hook
        {
            width: 0.595em;
            height: 1.853em;
            position: absolute;
            bottom: 60%;
            border-radius: 0.6em;
            background: #ececec;
            background: linear-gradient(to right top, #fff, #827e7d);
            box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.65);
        }

        .right.hook
        {
            right: 15%;
        }

        .left.hook
        {
            left: 15%;
        }

        .button
        {
            width: 1.853em;
            text-align: center;
            position: absolute;

            &:hover
            {
                background: linear-gradient(0deg, #d94215, #bb330f);
            }
        }

        .left.button
        {
            left: 0;
            border-top-left-radius: 5px;
            border-right: 1px solid #ae2a0c;
        }

        .right.button
        {
            right: 0;
            top: 0;
            border-left: 1px solid #ae2a0c;
            border-top-right-radius: 5px;
        }

        .monthYear
        {
            letter-spacing: 1px;
            width: 100%;
            text-align: center;
        }


    }

    .body
    {
        max-height: calc(100% - 2.25em);
        padding-left: 0.25em;
        padding-right: 0.25em;

        table
        {
            background: #fff;
            border-collapse: collapse;
            //margin-left: calc(100% - 15.65em);
            display: table-cell;

        }

        td,
        th
        {
            color: #2b2b2b;
            width: 2em;
            height: 2em;
            line-height: 2em;
            text-align: center;
            border: 1px solid #e6e6e6;
            cursor: default;
        }

        td
        {
            height: 1.95em;
            line-height: 1.35em;
            text-transform: uppercase;
            font-size: 90%;
            color: #9e9e9e;
            position: relative;

            label
            {
                font-size: 0.75em;
                padding-left: 0.25em;
                padding-right: 0.25em;
                line-height: 1.7em;
            }

            div
            {
                width: 100%;
            }
        }

        td:last-child
        {
            border-right: 1px solid #fff;
        }

        td.today
        {
            background: #ededed;
            color: #8c8c8c;
            box-shadow: 1px 1px 0px #fff inset;
        }

        td:not(.nil):hover
        {
            color: #fff;
            text-shadow: #6C1A07 0px -1px;
            background: #CD310D;
            background: linear-gradient(0deg, #b32b0c, #cd310d);
        }
    }
}