@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.clr-padding-left {
    padding-left: 0;
}
html {
    /*background-color: #212121;*/
    background-color: #625f59;
    /*background: url("../../asset/img/mountain-2.jpg");*/
    /*background-attachment: fixed;*/
    /*background-size: cover;*/
    /*height: -webkit-fill-available;*/
    height: 100%;
}
body {
    /*background-color: #222;*/
    background-color: #212121;

    /*background: url("../../asset/img/loft-bg.jpg");*/
    background: url("../../asset/img/loft-bg-2.jpg");
    /*background: url("../../asset/img/mountain-2.jpg");*/
    /*background: url("../../asset/img/raindrop.jpg");*/

    background-attachment: fixed;
    /*background-size: cover;*/
    background-size: 100% 100%;
    /*height: -webkit-fill-available;*/
    height: 100%;
}
.float-right {
    float: right;
}
.float-left {
    float: left;
}
/*table {
    -webkit-animation: fadein 0.5s;
       -moz-animation: fadein 0.5s;
        -ms-animation: fadein 0.5s;
         -o-animation: fadein 0.5s;
            animation: fadein 0.5s;
}*/
.img-invert {
    filter: brightness(1) invert(1);
}
.login-container {
    color: white;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 70px;
}
.kd-home-logo {
    filter: brightness(1) invert(1);
    margin-top: -2px;
}
/*.navbar-light .navbar-brand {
    color: white;
}*/
.navbar {
    /*background-color: #563d7c;
    border-bottom: 1px solid #6500ff;*/
    background-color: #02291b;
    /*background-color: #02291bc9;*/
    /*border-bottom: 1px solid #000;*/
    /*border-bottom: 2px solid #006a44;*/
    /*border-bottom: 1px solid #006e47;*/
    border-bottom: 1px solid #005e3c;
    box-shadow: 0px 4px 14px #111;
    padding: 0rem 1rem;
}
/*.navbar-light .navbar-nav .nav-link {
    color: white;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: rgba(245, 245, 245, 0.7);
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: rgb(0, 0, 0);
    background-color: #ddc7ff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-right: 0.8rem;
    padding-left: .8rem;
}*/
.navbar-nav {
    /*padding-left: 26px;*/
    /*margin-bottom: -16px;*/
}
.submenu-container {
    margin-right: auto;
    margin-left: auto;
    /*padding: 10px 5px 15px 5px;*/
    padding: 18px 5px 15px 5px;
    color: white;
    /*height: 52px;*/
    height: 58px;
    -webkit-animation: fadein 0.5s;
       -moz-animation: fadein 0.5s;
        -ms-animation: fadein 0.5s;
         -o-animation: fadein 0.5s;
            animation: fadein 0.5s;
}
.submenu-container .date-title {
    float: left;
    font-size: 1.6em;
    margin-left: 8px;
    color: #fff;
    text-shadow: 2px 1px #000000;
    width: 370px;
    /*width: 680px;*/
    white-space: nowrap;
}
.submenu-container .btn-group {
    float: left;
    margin-left: 30px;
}
.submenu-container .btn-item {
    margin-right: 10px;
}
.submenu-container .submenu-btn {
    min-width: 55px;
    /*background-color: #3f2b5f;*/
    background-color: #30302e;
    /*background-color: #1b1a19;*/
    color: #ccc;
    border: none;
    height: 45px;
    /*border-top-left-radius: 8px;*/
    /*border-top-right-radius: 8px;*/
    /*border-bottom-left-radius: 8px;*/
    /*border-bottom-right-radius: 8px;*/
    font-size: 1.3em;
    padding-top: 2px;
    /*box-shadow: 0px 1px 13px #333;*/
    /*padding-left: 18px;*/
    /*padding-right: 18px;*/
}
.submenu-container .submenu-btn:hover {
    background-color: #7453a9;
}
/*.submenu-container .page-btn {
    border: 2px solid #ccc;
}*/
.submenu-container .submenu-input {
    margin-right: 5px;
    height: 45px;
    /*border-radius: 30px;*/
    border-radius: 0.5rem;
    padding-left: 19px;
    width: 333px;
}
.main-container {
    margin-right: auto;
    margin-left: auto;
    padding: 15px;
    padding-bottom: 0;
    color: white;
}
.all-room-content {
    /*margin-left: 30px;*/
    margin-left: 22px;
    /*margin-top: 45px;*/
    margin-top: 30px;
}
.room-item {
    /*margin-left: 0px;*/
    margin-left: -5px;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 8px;
    padding-right: 8px;
    /*background-color: #444;*/
    background-color: #555;
    /*background-color: #737373;*/
    width: 141px;
    /*min-height: 109px;*/
    min-height: 140px;
    /* height: 120px; */
    /* height: 92px; */
    /* height: 65px; */
    /*height: 88px;*/
    float: left;
    /*box-shadow: 0px 2px 2px #111;*/
    box-shadow: 0px 2px 0px #2a2a2a;
    cursor: pointer;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
/*    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;*/

    /*border-top: 3px solid #49ff00;*/
    /*border-top: 3px solid #444;*/
    border-top: 3px solid #555;
    /*border-bottom: 3px solid #6500ff;*/

/*    -webkit-animation: fadein 0.5s;
       -moz-animation: fadein 0.5s;
        -ms-animation: fadein 0.5s;
         -o-animation: fadein 0.5s;
            animation: fadein 0.5s;*/
}
.room-item:hover {
    background-color: #333;
}
.room-item:active {
    background-color: #555;
}
.room-item .room-id {
    /*font-size: 1.4em;*/
    font-size: 1.7em;
    font-weight: bold;
    /*color: #c39bff;*/
    /*color: #d5ff33;*/
    /*color: #b7e600;*/
    /*color: #49ff00;*/
    text-shadow: 2px 1px #000000;
    background: none;
    line-height: 1em;
}
.room-item .room-status {
    text-align: right;
    background: none;
}
.room-row {
    /*margin-bottom: 18px;*/
    /*margin-bottom: 30px;*/
    margin-bottom: 10px;
    /*margin-bottom: 60px;*/
    /*margin-top: 20px;*/
    /*width: 100%;*/
}
.total-free-room {
    font-weight: bold;
}
.modal-content {
    border-radius: 0.4rem;
}
.modal-body {
    padding: 0.5rem;
}
.modal.show .modal-dialog {
    box-shadow: 0px 8px 18px #111;
    border-radius: 0.4rem;
}
.modal-header {
    /*background-color: #333;*/
    /*color: #eee;*/
    background-color: #563d7c;
    color: #eee;
    padding: 4px 4px 4px 15px;
}
.modal-footer {
    border-top: 0;
    padding: 0.5rem;
}
.modal-room-id-title {
    font-size: 3em;
    line-height: 25px;
    font-weight: bold;
}
.form-control {
    color: blueviolet;
    font-weight: bold;
    padding: 4px 4px 4px 8px;
}
.form-control:focus {
    color: blueviolet;
}
.form-control::placeholder {
    color: #bbb;
    font-weight: normal;
}
.form-checkbox {
    width: 24px;
}
.form-checkbox:focus {
    box-shadow: none;
}
.custom-select {
    color: blueviolet;
    font-weight: bold;
    padding: 4px 4px 4px 8px;
}
.custom-control {
    margin-top: 5px;
    padding-left: 0;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: blueviolet;
}
.custom-control-input:checked~.custom-control-label::before {
    background-color: blueviolet;
}
.col-form-label {
    text-align: right;
    padding-right: 0;
}
.btn {
    /*min-width: 115px;*/
    min-width: 100px;
    /*border-bottom: 3px solid #6500ff;*/
    /*border-radius: 1.25rem;*/
    border-radius: 0.5rem;
    padding: 2px 10px 2px 10px;
    /*box-shadow: 2px 3px 8px #202020;*/
}
.btn-primary {
    /*border-bottom: 3px solid #6500ff;*/
    background-color: #563d7c;
    border: 0;
    border-bottom: 3px solid #2e056b;
}
.btn-primary.focus, .btn-primary:focus {
    box-shadow: none;
}

.btn-reserve {
    background-color: #e95900;
    border: 0;
    border-bottom: 3px solid #632600;
    color: white;
}

.btn.btn-delete {
    min-width: 100px;
}
.btn-danger {
    border-bottom: 3px solid #9e0312;
}
hr.style1 {
    border-top: 2px dashed #d0d0d0;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;

    /*height: 6px;*/
    /*border: 0;*/
    /*background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;*/
    /*background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;*/
}
hr.style2 {
    border-top: 2px dashed #454545;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.form-group {
    margin-bottom: 2px;
}
/*.form-control {
    box-shadow: 0px 0px 13px #ddd;
}
*/
.room_status_free {
    /*color: #49ff00;*/
    color: #44ee00;
}
.room_status_reserve {
    color: #ffe200;
    background-color: RGBA(0,0,0,0.8);
    border-top: 3px solid RGBA(0,0,0,0);
}
.room_status_checkin {
    color: #ff1c1c;
    /*background-color: #252525;*/
    background-color: RGBA(0,0,0,0.8);
    border-top: 3px solid RGBA(0,0,0,0);
}
.room_status_checkout {
    color: #31ceff;
}
.room_status_finish {
    color: #31ceff;
}
.room_status_oldday {
    color: #888;
    text-shadow: none !important;
}
.room-other-status-box {
    text-align: right;
    border-top: 2px solid red;
    background-color: RGBA(255,0,0,1.0);
    /*background-color: RGBA(255,0,0,0.7);*/
    /*background-color: #b90000;*/
    /*margin-bottom: 5px;*/
    margin-bottom: 0px;
    padding-right: 4px;
    height: 32px;
    border-radius: 7px;
    box-shadow: 1px 1px 5px black;
    margin-top: 2px;

    position: absolute;
    bottom: 0;
    /*width: 125px;*/
    /*width: 134px;*/
}
.want-receipt-img {
    height: 25px;
    filter: brightness(1) drop-shadow(0px 2px 0px black);
    /*opacity: 0.8;*/
    margin-left: 2px;
    border-radius: 8px;
    /*margin-top: 1px;*/
}
.want-receipt-img:hover {
    filter: brightness(0.9) drop-shadow(0px 2px 0px black);
}
.no-pay-img {
    height: 25px;
    filter: brightness(1.2) drop-shadow(0px 2px 2px black);
    /*filter: brightness(1.2) drop-shadow(0px 3px 2px black);*/
    /*opacity: 0.8;*/
    margin-left: 2px;
}
.no-pay-img:hover {
    filter: brightness(0.9) drop-shadow(0px 2px 2px black);
}
.one-bed-img {
    height: 25px;
    /*filter: brightness(1) invert(1);*/
    /*opacity: 0.8;*/
}
.room-item .room_status_free {
    /*background-color: #374631;*/
}
.room-item .room_status_checkin {
    /*background-color: #111;*/
}
.room-item-center {
    margin-right: 10px;
}

/* ROOM CLEANING */
.roomclearning-txt {
    text-shadow: 1px 1px #000000;
    font-weight: 500;
    background-color: RGBA(10,10,10,0.4);
    border-bottom: 2px solid #111;
}
tr:hover {
    background-color: RGBA(10,10,10,0.7);
}
.table .thead-dark th {
    color: #d1b2ff;
    font-weight: 500;
}
.table td, .table th {
    /*padding: .2rem;*/
    padding: 0;
    border-top: 1px solid RGBA(0,0,0,0.2);
    /*border-top: 1px solid RGBA(0,0,0,0.6);*/
    border-left: 1px solid RGBA(255,255,255,0.2);
    text-align: center;
    font-weight: 500;
}
.checkin-total-number {
    color: #ff1c1c;
    font-weight: bold;
}

.roomCusName {
    color: white;
    word-break: break-word;
}
.roomRate {
    display: none;
    color: #31ceff;
}
#car_id_province {
    word-break: break-word;
    height: 150px;
}

.ex-room-month {
    /*color: #00e3e3;*/
    color: #d37bff;
    /*color: #d88bff;*/
    /*color: darkturquoise;*/
    /*color: cornflowerblue;*/
}

.data-table-day-delete {
    /*color: #90dc8b;*/
    color: #9fc0fd;
}

.data-table-day {
    color: #ff8282;
}

.data-table-reserve {
    color: #ffe200;
}

.data-table-month {
    color: #d1b2f2;
}

.page-search-table .result_txt {
    color: #f7f7f7;
}

.lotto-border {
    border-right: 2px solid dodgerblue !important
}

.lotto-border-month {
    border-top: 2px solid dodgerblue !important
}

.lotto-stat-txt {
    color: #00ffcb;
    font-weight: bold;
    background-color: #636363;
    padding-left: 5px;
    padding-right: 5px;
}

.lotto-cal-title {
    background-color: darkblue;
    padding: 0px 8px 0px 8px;
    margin-right: 1px;
}

.lotto-cal-h1 {
    font-size: 1.3rem;
    text-shadow: 1px 1px #000000;
}

.disable-select {
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}

.title-1 {
    font-size: 1.6rem;
    text-shadow: 2px 1px #000000;
}
.title-2 {
    font-size: 1.4rem;
    text-shadow: 2px 1px #000000;
}
.title-3 {
    font-size: 1.2rem;
    text-shadow: 2px 1px #000000;
}
.input-title {
    text-shadow: 2px 1px #000000;
}
.input-box {
    margin-right: 5px;
}
.hr-1 {
    border: 1px solid #ccc;
}
.clr-margin {
    margin: 0 !important;
}
.txt-center {
    text-align: center;
}
.txt-right {
    text-align: right;
}
.m-receipt-tr {
    background-color: RGBA(0,0,0,0.7);
    text-align: left !important;
    padding: 6px !important;
    text-shadow: 1px 1px #000000;
    border-bottom: 1px solid #6d6d6d;
}
.receipt-comp-card-1 {
    background-color: #128c58;
    /*background-color: #332548;*/
    width: 1010px;
    border-radius: 8px;
    border: 1px solid white;
    /*padding: 15px;*/
    padding: 8px 0px 14px 15px;
    font-size: 1.1rem;
    text-shadow: 1px 1px #000000;
    box-shadow: 2px 2px 15px black;
    height: 165px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.receipt-comp-card-2 {
    background-color: #128c58;
    /*background-color: #332548;*/
    width: 300px;
    border-radius: 8px;
    border: 1px solid white;
    padding: 8px 0px 14px 15px;
    font-size: 1.1rem;
    text-shadow: 1px 1px #000000;
    margin-left: 2px;
    box-shadow: 2px 2px 15px black;
    height: 165px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.border-bottom-2 {
    border-bottom: 3px solid #1e1e1e;
}
.form-control:disabled, .form-control[readonly] {
    /*background-color: #b8eed6;*/
    /*background-color: #beffe2;*/
    background-color: #e0e0e0;
}
.vgroup-title {
    color: black;
    font-weight: bold;
    border-radius: 6px;
    /*padding-top: 10px;*/
    /*border-bottom-left-radius: 5px;*/
    /*border-bottom-right-radius: 5px;*/
    /*padding-left: 2px;*/
    /*padding-right: 2px;*/
}
.schedule-item {
    background-color: RGBA(0,0,0,0.3);
    text-align: left !important;
    padding-left: 8px !important;
    border-bottom: 3px solid #1e1e1e;
    color: #f7f7f7;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 900px;
    }
    /*.room-item-center {
        margin-right: 10px;
    }*/
}

@media (max-width: 500px) {
    .submenu-container .btn-group {
        margin-left: 5px !important;
    }
    .submenu-container .btn-item {
        margin-right: 5px !important;
        margin-bottom: 5px;
    }
}

@media (min-width: 1200px) {
    .room-item-center {
        margin-right: 30px;
    }
}