.datepickerM-show {
        display: block;
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: rgba(255, 255, 255, 0.9);
    }
    
    .datepickerM-hide {
        visibility: hidden;
    }
    
    .coverback {
        display: block;
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(255, 255, 255, 0.9);
        z-index: 1000;
    }
    
    .datepickerM_box {
        display: inline-block;
        position: absolute;
        z-index: 11;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: white;
        filter: drop-shadow(0 0 10px rgb(200, 200, 200));
        border-radius: 25px;
        overflow-y: auto;
    }
    
    @media (max-width: 1000px) {
        .datepickerM_box {
            font-size: 80%;
            width: 90%;
            max-height: 90%;
            padding: 10px;
        }
    }
    
    @media (min-width: 1001px) {
        .datepickerM_box {
            font-size: 100%;
            width: 900px;
            max-height: 90%;
            padding: 25px;
        }
    }
    /* .datepickerM {
        position: fixed;
        height: 100%;
        width: 100%;
        background-color: rgba(255, 255, 255, 1);
        top: 0;
        left: 0;
        z-index: 10;
        padding: 30px 50px;
        font-size: 120%;
    }
    
    @media (max-width: 600px) {
        .datepickerM {
            padding: 20px;
            font-size: 80%;
        }
    }
    
    @media (min-width: 601px) {
        .datepickerM {
            padding: 20px;
            font-size: 100%;
        }
    } */
    
    .height_center {
        display: grid;
        grid-template-rows: auto 30px auto;
    }
    /* .datepickerM-hidden {
        visibility: hidden;
    } */
    
    .deyselect_grid_3 {
        display: grid;
        grid-gap: 5px;
        padding: 5px 0;
    }
    
    .grid_7_tem {
        display: grid;
        grid-template-columns: 13.7% 13.7% 13.7% 13.7% 13.7% 13.7% 13.7%;
        grid-gap: 3px;
        padding: 5px 0;
        margin: 5px 0;
        text-align: center;
    }
    
    @media (max-width:700px) {
        #largtext {
            display: none;
        }
        #smaltext {
            display: block;
        }
        .deyselect_grid_3 {
            grid-template-columns: 10px auto 10px;
        }
    }
    
    @media (min-width:701px) {
        #largtext {
            display: block;
        }
        #smaltext {
            display: none;
        }
        .deyselect_grid_3 {
            grid-template-columns: 20px auto 20px;
        }
    }
    
    .dey_item_style {
        padding: 10px 0;
        border-style: solid;
        border-radius: 5px;
        border-width: 1px;
        border-color: rgb(210, 210, 210);
        background-color: white;
        /* background-color: rgb(247, 235, 235); */
        /* background-image: url(pic/hatching_01/jpg); */
        background-repeat: no-repeat;
    }
    /* .dey_item_style,
    .dey_item_style-reg,
    .dey_item_style-this,
    .dey_item_style-sel,
    .dey_item_style-reserv {
        padding: 10px 0;
        border-style: solid;
        border-radius: 5px;
        border-width: 1px;
    }
    
    .dey_item_style {
        border-color: rgb(210, 210, 210);
    }
    
    .dey_item_style-reg {
        border-color: rgb(210, 210, 210);
    }
    
    .dey_item_style-this {
        border-color: rgb(110, 183, 118);
    }
    
    .dey_item_style-sel {
        border-color: rgb(180, 106, 106);
    }
    
    .dey_item_style-reserv {
        border-color: rgb(210, 210, 210);
        background-color: gray;
    } */
    
    .grid2item {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    
    .btnact,
    .btndes {
        /* padding: 10px 10px 7px 10px; */
        text-align: center;
    }
    
    .datetimecount,
    .btnact,
    .btndes {
        border-style: solid;
        border-color: grey;
    }
    
    .btnact {
        border-width: 1px 1px 0 1px;
        border-radius: 10px 10px 0 0;
        cursor: auto;
    }
    
    .btndes {
        border-width: 0 0 1px 0;
        cursor: pointer;
    }
    
    .grid2item2 {
        display: grid;
        /* grid-template-columns: auto 80px; */
    }
    
    @media (min-width:1000px) {
        .grid2item2 {
            display: grid;
            grid-template-columns: auto 80px;
        }
    }
    
    .appnameitem1 {
        grid-area: appname;
        margin: 5px;
        border-color: grey;
        border-width: 0 0 1px 0;
        border-style: solid;
        padding: 10px 0;
    }
    
    .pickerinputHeader {
        grid-area: input;
        margin: 5px;
    }
    
    .itembtn1 {
        grid-area: btn1;
        /* margin: 5px; */
    }
    
    .itembtn2 {
        grid-area: btn2;
        /* margin: 5px; */
    }
    
    .datetimecount {
        border-width: 0 1px 1px 1px;
        padding: 20px;
    }
    
    .datefields,
    .datefields2 {
        display: grid;
        grid-gap: 10px;
        padding: 20px 0;
        direction: ltr;
    }
    
    @media(max-width:500px) {
        .datefields,
        .datefields2 {
            padding: 10px 0;
        }
        .datetimecount {
            padding: 10px;
        }
    }
    
    @media(min-width:501px) {
        .datefields,
        .datefields2 {
            padding: 20px 0;
        }
        .datetimecount {
            padding: 20px;
        }
    }
    
    .datefields {
        grid-template-columns: auto auto auto auto;
    }
    
    .datefields2 {
        grid-template-columns: auto auto;
    }
    
    .input_field1,
    .input_field1-active {
        border-style: solid;
        border-color: rgb(167, 167, 167);
        border-radius: 15px 15px 0 0;
        padding: 10px;
        text-align: center;
        font-size: 120%;
        font-weight: bold;
        width: 100%;
        background-color: rgb(230, 230, 230);
    }
    
    .input_field1 {
        border-width: 0;
    }
    
    .input_field1-active {
        border-width: 0 0 5px 0;
    }
    
    @media (min-width: 1000px) {
        .grid2item4 {
            display: grid;
            grid-template-columns: auto auto 80px 80px;
            grid-template-areas: 'appname input btn1 btn2';
            grid-gap: 10px;
            padding: 10px 0 20px 0;
        }
        .grid2item .btndes {
            /* padding: 10px 10px 7px 10px; */
        }
    }
    
    @media (min-width:501px) and (max-width:999px) {
        .grid2item4 {
            display: grid;
            grid-template-columns: auto 80px 80px;
            grid-template-areas: 'appname appname appname''input btn1 btn2';
            padding: 10px 0 20px 0;
        }
        .grid2item .btndes {
            /* padding: 10px 10px 7px 10px; */
        }
    }
    
    @media (max-width:500px) {
        .grid2item4 {
            display: grid;
            grid-template-columns: 50% 50%;
            grid-template-areas: 'appname appname''input input''btn1 btn2';
            padding: 10px 0;
        }
        .grid2item .btndes {
            /* padding: 10px; */
        }
        .grid2item .btnact {
            /* padding: 10px; */
        }
    }
    
    .pickerinputHeader,
    .softbtn {
        border-width: 1px;
        border-style: solid;
        border-color: grey;
        border-radius: 15px;
        display: block;
    }
    
    .pickerinputHeader {
        padding: 5px;
        text-align: center;
        font-size: 120%;
        font-weight: bold;
    }
    
    .softbtn {
        /* border-width: 1px;
    border-style: solid;
    border-color: grey; */
        cursor: pointer;
        /* border-radius: 15px; */
        padding: 10px 5px;
        margin: 5px;
        background-color: rgb(242, 245, 247);
        transition: all 0.3s;
        text-align: center;
    }
    
    .softbtn:hover {
        background-color: rgb(229, 235, 239);
    }
    
    .datetime {
        font-size: 130%;
        font-weight: bold;
        padding: 5px;
    }
    
    @media (max-width: 600px) {
        .softbtn {
            padding: 7px 5px;
            margin: 5px;
        }
        .datetime {
            font-size: 100%;
            padding: 5px;
        }
    }