root{
    --bottom-nav-bar-hight:85px;
}

.fo-container{
    transition:all 0.5s;
    margin-bottom:100px;
}
/*start- fo nav menu bar*/
.fo-nav-top {
    background-color: #E4DCCF;
    height: var(--top-nav-bar-fo-height);
}

.text-nav-menu {
    font-family: Lato !important;
    font-size: 1rem !important;
    font-weight: 400;
    display: inline-block !important;
    margin-left: 15px !important;
    color: black !important;
}

.img-nav-sm {
    width: 1.55rem !important;
    height: auto;
}

.sidebar-fo {
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 0;
    width: auto;
    z-index: 1;
    transition: all 0.5s;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
    background-color: #fff;
}

@media (max-width:480px) {
    .sidebar-fo {
        display: none;
    }
}
/*end - fo nav menu bar*/

/* start - fo layout*/
.fo-main-container {
    min-height: 100vh;
    position: relative;
    padding: 10px;
    transition: all 0.5s;
}

.fo-bottom-nav-bar {
    height: var(--bottom-bar-height);
    width:100%;
    background-color: #DFD7BF;
    left: 0;
    bottom: 0;
    padding: 5px;
    margin-top:5px;
    position: fixed;
    border-top: 2px solid #E4DCCF;
}

.text-property-name {
    font-family: Lato, 'Segoe UI', Tahoma;
    font-size: 1.5rem !important;
    font-weight: 800
}

.div-client-name {
    font-family: Lato, 'Segoe UI', Tahoma;
    font-size: 1.2rem !important;
    font-weight: 800
}

@media (max-width:578px) {
    .text-property-name {
        font-size: 1.05rem !important;
    }

    .div-client-name {
        display: none;
    }
}

@media (max-width:480px) {
    .div-client-name {
        display: none;
    }
}
/*end - fo layout*/


/* start - fo dashboard */
.text-working-date {
    font-family: 'BebasNeue-Regular';
    font-size: 1.5rem !important;
}
.fo-dashboard-info-box {
    width: auto;
    height: auto;
    padding: 10px;
    text-align: center;
    margin: 5px;
}

.span-info-box-label {
    padding: 0px;
    margin: 0px;
    font-family: Lato;
    font-size: 1.2rem !important;
    font-weight: 800;
    color: black;
    text-align: center;
}

.span-info-box-value {
    padding: 0px;
    font-family: 'BebasNeue-Regular';
    font-size: 4rem !important;
    font-weight: 800;
    text-align: center;
}

.bg-total-rooms{
    background-color: #FFC700 !important;
    color: #0C1844 !important;
}
.bg-blocked-rooms {
    background-color: #C80036 !important;
    color: #FFF455 !important;
}
.bg-blocked-rooms span{
    color: #FFF455 !important;
}
.bg-booked-rooms {
    background-color: #0C1844 !important;
    color: #F3F7EC !important;
}
    .bg-booked-rooms span{
        color: #F3F7EC !important;
    }

.bg-occupied-rooms {
    background-color: #365E32 !important;
    color: #FFF5E1 !important;
}
    .bg-occupied-rooms span {
        color: #FFF5E1 !important;
    }

.bg-vacant-rooms {
    background-color: #0F67B1 !important;
    color: #fbf9f9 !important;
}

    .bg-vacant-rooms span {
        color: #fbf9f9 !important;
    }

.bg-todays-check-ins {
    background-color: #AF47D2 !important;
    color:white !important;
}

.bg-todayscheckedin-rooms {
    background-color: #FFF5E1 !important;
}
    .bg-todayscheckedin-rooms span {
        color: #0C1844 !important;
    }

.bg-todayscheckedin-guests {
    background-color: #F1F8E8 !important;
}

    .bg-todayscheckedin-guests span {
        color: #0C1844 !important;
    }

.bg-todays-check-outs {
    background-color: #4C4B16 !important;
    color: #F7F1E5 !important;
}

    .bg-todays-check-outs span {
        color: #F7F1E5 !important;
    }

.bg-todayscheckedout-rooms {
    background-color: #FFF5E1 !important;
}
    .bg-todayscheckedout-rooms span {
        color: #0C1844 !important;
    }

.bg-todayscheckedout-guests {
    background-color: #F1F8E8 !important;
}
    .bg-todayscheckedout-guests span {
        color: #0C1844 !important;
    }

.bg-todaysotherinfo {
    background-color: #344C64 !important;
    color: #F7F1E5 !important;
}
.bg-rooms-awaiting-check-out {
    background-color: #FEFFD2 !important;
    color: #0C1844 !important;
}
    .bg-rooms-awaiting-check-out span{
        color: #0C1844 !important;
}

.bg-bookings-awaiting-check-in {
    background-color: #F6E9B2 !important;
}
    .bg-bookings-awaiting-check-in span {
        color: #0C1844 !important;
    }

@media (max-width:480px) {
    .text-working-date{
        font-size:1.2rem !important;
    }
    .fo-dashboard-info-box {
        width: 100px;
        height: 80px;
        padding: 5px;
        margin: 2px;
    }

    .span-info-box-label {
        font-family:Lato;
        font-size: 0.8rem !important;
        font-weight:normal;
    }

    .span-info-box-value {
        font-size: 2rem !important;
        margin:10px;
    }
    .td-width {
        min-width: 80px;
    }
}
/* end - fo dashboard */

/* START - STYLE SHEET HW RESERVATIONS */
.div-add-booking {
}
    .div-add-booking span {
        width: 150px;
    }
/* END - STYLE SHEET HW RESERVATIONS */

/* START - STYLE SHEET MIS REPORTS */
.list-mis-reports{
    list-style-type: none;
    padding: 1px;
    margin: 1rem;
}
.list-mis-reports button{
    text-align: center;
    padding: 10px;
    border: none;
    background-color: transparent;
    font-family: Lato;
    font-size: 1rem;
    font-weight: 400;
    text-align:start;
    color: black;
    margin:2px;
    white-space:nowrap;
}
    .list-mis-reports button:hover{
        background-color: #E4DCCF;
}
@media (max-width:480px) {
    .list-mis-reports button{
        font-size: 0.9rem;
        margin-left:0px;
    }
}
/* END - STYLE SHEET MIS REPORTS */

/* START - STYLE SHEET ROOM PANEL */
.div-room-continer{
    width:250px;
    height: 250px;
}
/*END - STYLE SHEET ROOM PANEL*/

/* START - STYLE SHEET CHECK INS */
.btn-tab-link{
    font-family:Lato,Tahoma;
    font-size:1.2rem!important;
    border-radius:0px;
}
.btn-tab-link p{
    font-family:Lato,Tahoma;
    font-size:1.2rem !important;
    display:inline;
}
.btn-link-to-details{
    font-size:1.2rem!important;
}
.div-check-in-details, .div-room-allotements, .div-invoices-for-check-ins {
    font-size: 1.2rem !important;
    font-family: Lato,Tahoma;
}
    .div-room-allotements table, .div-invoices-for-check-ins table {
        font-size: 1.2rem !important;
        font-family: Lato,Tahoma;
    }
        .div-room-allotements table th, .div-invoices-for-check-ins table th {
            text-align: center;
            vertical-align: middle;
        }
@media (max-width:480px) {
    .div-check-in-details, .div-room-allotements, .div-invoices-for-check-ins {
        font-size: 0.8rem !important;
    }
        .div-room-allotements table tr, .div-invoices-for-check-ins table tr{
            font-size: 0.8rem !important;
        }

    .btn-link-to-details {
        font-size: 0.9rem !important;
    }
    .btn-tab-link{
        font-size: 0.9rem !important;
        margin:2px;
        padding:5px;
    }
    .btn-tab-link p {
        font-family: Lato,Tahoma;
        font-size: 0.9rem !important;
        display:block;
    }
}
/*END - STYLE SHEET CHECK INS*/

/* START STYLE INVOICES*/
.div-invoice-details {
    font-size: 1.2rem !important;
    font-family: Lato,Tahoma;
}
.div-invoice-summary {
    font-size: 1rem !important;
    font-family: Lato,Tahoma;
}
@media (max-width:480px) {
    .div-invoice-details, .div-invoice-summary {
        font-size: 0.8rem !important;
    }
}
/*END STYLE INVOICES*/