body {
                background-color: gainsboro;
                /* font-family: 'Kanit', sans-serif; */
                /* font-family: 'Mandali', sans-serif; */
                font-family: 'Sarabun', sans-serif;
                /* font-family: 'Kanit', sans-serif; */
            }

            .bx {
                box-shadow: 2px 2px 18px rgba(0, 0, 0, 0.2);
            }

            .card-border {
                box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
                border: 0px;
            }

            .logo-nav {
                height: 50px;
                width: auto;
            }

            .headGroup {
                background-color: green !important;
                border-color: green !important;
            }

            tbody>tr:hover {
                background-color: lightcyan;
            }

            .shadow {
                box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
                margin-top: 10px
            }

            input[type="checkbox"] {
                cursor: pointer !important;
            }

            #new-search-area {
                width: 100%;
                clear: both;
                padding-top: 20px;
                padding-bottom: 20px;
            }

            #new-search-area input {
                width: 600px;
                font-size: 20px;
                padding: 5px;
            }

            .error {
                font-size: small;
                color: red;
                margin-left: 10px;
            }

            .success {
                font-size: small;
                color: green;
                margin-left: 10px;
            }

            .loading {
                position: fixed;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 999;
                background: rgba(255, 255, 255, 0.8) url("../img/loader.gif") center no-repeat;
            }

            .room_loading {
                /* position: fixed; */
                width: auto;
                height: auto;
                background: rgba(255, 255, 255, 0.8) url("../img/loader.gif");
            }

            .action {
                background-color: orange !important;
                border: 2px solid darkblue;
                border-radius: 5px;
                color: white;
            }

            select {
                cursor: pointer;
            }

            .navbar-nav {
                text-align: center;
            }

            input[type="date"]::-webkit-calendar-picker-indicator {
                background: transparent;
                bottom: 0;
                color: transparent;
                cursor: pointer;
                height: auto;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
                width: auto;
            }

            .text-error {
                color: red;
            }