.checkbox-tools[type="checkbox"]:checked,
.checkbox-tools[type="checkbox"]:not(:checked),
.checkbox-tools[type="radio"]:checked,
.checkbox-tools[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    visibility: hidden;
}

.checkbox-tools:checked + label,
.checkbox-tools:not(:checked) + label {
    position: relative;
    display: inline-block;
    padding: 20px;
    width: 50px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1px;
    margin: 0 auto;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    text-transform: uppercase;
    color: #fff;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}

.checkbox-tools:not(:checked) + label {
    background-color: #000;
}

.checkbox-tools:checked + label {
    background-color: #ad2222;
}

    .checkbox-tools:checked + label::before,
    .checkbox-tools:not(:checked) + label::before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        background-color: #ccc;
        z-index: -1;
    }

    .checkbox-tools:checked + label .ul,
    .checkbox-tools:not(:checked) + label .ul {
        font-size: 24px;
        line-height: 24px;
        display: block;
        padding-bottom: 10px;
    }

#calendarMonth {
    display: flex;
    width: 100%;
    margin: auto;
    font-size: 1.5em;
}

    #calendarMonth h2 {
        font-size: 150%;
        color: #265e00;
        background-color: #c5dfb4;
        padding: 10px 20px;
    }

    #calendarMonth .calendar {
        width: 48%;
        margin: 10px;
        background: #fff;
        box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    }

        #calendarMonth .calendar .body-list ul {
            width: 100%;
            font-family: arial;
            font-weight: bold;
            font-size: 130%;
            padding: 0;
            min-width: 440px;
        }

            #calendarMonth .calendar .body-list ul li {
                width: 12%;
                line-height: 100%;
                list-style-type: none;
                display: block;
                box-sizing: border-box;
                float: left;
                text-align: center;
                padding: 10px;
                margin: 5px;
                max-width: 12%;
                min-width: 12%;
                flex: 1;
            }

        #calendarMonth .calendar .body-list.day ul li {
            border: 1px solid #ccc;
            color: #565656;
        }

            #calendarMonth .calendar .body-list.day ul li:hover {
                background: #ad2222;
                color: #fff;
            }

            #calendarMonth .calendar .body-list.day ul li.okDay {
                cursor: pointer;
            }

        #calendarMonth .calendar .lightgrey {
            background: #a8a8a8; /*浅灰色*/
            color: #565656 !important;
        }

        #calendarMonth .calendar .darkgrey {
            background: #9f9f9f; /*深灰色*/
            color: #fff !important;
        }

        #calendarMonth .calendar .lightGreen {
            background: #6ac13c; /*绿色*/
            color: #fff !important;
        }

        #calendarMonth .calendar .lightRed {
            background: red; /*紅色*/
            color: #fff !important;
        }

        #calendarMonth .calendar .darkRed {
            background: #9f0505; /*暗紅色*/
            color: #fff !important;
        }

        #calendarMonth .calendar .lightOrange {
            background: #f98700; /*暗紅色*/
            color: #fff !important;
        }

        #calendarMonth .calendar .darkGreen {
            /*border:1px solid #6ac13c;*/
            background: #265e00; /*深绿色背景*/
            color: #fff !important;
        }

        #calendarMonth .calendar .fontDarkGreen {
            /*border:1px solid #6ac13c;*/
            color: #265e00; /*深绿色字體*/
        }

        #calendarMonth .calendar .del {
            text-decoration: line-through;
            cursor: default;
            /*background: #7c7c7c;
                    color: #fff;*/
        }

        #calendarMonth .calendar .title {
            text-align: center;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: baseline;
            margin: 20px 0;
            padding-bottom: 20px;
        }

            #calendarMonth .calendar .title span {
                display: none;
            }

            #calendarMonth .calendar .title .btn {
                border: 1px solid #6ac13c;
                background: #e9f8df;
                padding: 5px 20px;
                margin: 5px 20px;
                line-height: 150%;
                cursor: pointer;
            }

            #calendarMonth .calendar .title .btnQ {
                padding: 5px 20px;
                margin: 0 20px;
                line-height: 150%;
            }

        #calendarMonth .calendar .note {
            clear: both;
            padding-top: 50px;
            padding-bottom: 50px;
            font-size:18px;
        }
            #calendarMonth .calendar .note div {
                margin: 20px 10px;
                line-height: 180%;

            }
                #calendarMonth .calendar .note div.list {
                    margin: 5px 10px;
                    background: url(../../images/icon-list.png) no-repeat 0 5px;
                    padding-left: 35px;
                }



    #calendarMonth .order {
        width: 48%;
        margin: 10px;
    }

        #calendarMonth .order div {
            display: flex;
            margin: 10px;
            line-height: 130%;
        }

        #calendarMonth .order .radiogroup {
            flex-wrap: wrap;
        }

        #calendarMonth .order label {
            width: 150px;
            font-size: 130%;
            margin: 5px 10px 5px 0;
        }

            #calendarMonth .order label i {
                color: #ad2222;
                padding: 0 5px;
                font-weight: bold;
            }

        #calendarMonth .order input, #calendarMonth .order textarea {
            border-radius: 0.25rem;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #babfc7;
            font-size: 150%;
            padding: 5px;
        }

            #calendarMonth .order input[type='button'] {
                background-color: #265e00;
                color: #fff;
                font-weight: bold;
            }

                #calendarMonth .order input[type='button']:hover {
                    background-color: #e9f8df;
                    color: #265e00;
                    font-weight: bold;
                    cursor: pointer;
                }

    #calendarMonth .orderResult{
        width:80%;
        margin:0 auto;

    }
        #calendarMonth .orderResult ul {
            margin: 20px;
            line-height: 180%;
            list-style: none;
            border: 1px solid #ccc;
            padding: 10px 20px;
        }

    #calendarMonth .orderResult ul li label{
        font-weight:bold;
    }

    @media screen and (max-width: 1200px) {
        #calendarMonth {
        flex-direction: column;
    }

        #calendarMonth .order, #calendarMonth .calendar {
            width: 95%;
            margin: 10px;
            clear: both;
        }

        #calendarMonth .order {
            padding-top: 50px;
        }

            #calendarMonth .order label {
                width: 40%;
            }

            #calendarMonth .order .radiogroup label {
                width: 150px;
            }

}

@media screen and (max-width: 510px) {
    #calendarMonth .calendar .body-list ul {
        min-width: 275px;
        font-weight: 100;
        font-size: 120%;
    }

        #calendarMonth .calendar .body-list ul li {
            width: 10.5%;
            padding: 5px 0;
            max-width: 10.5%;
            min-width: 10.5%;
        }
    #calendarMonth .calendar .note {
        font-size: 15px;
    }

    #calendarMonth .order div {
        flex-wrap: wrap;
        line-height: 150%;
    }

    #calendarMonth .order label {
        width: 100%;
    }

    #calendarMonth .order input, #calendarMonth .order textarea {
        width: 100%;
    }
}