/*=========================================
RESET
=========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

body{
  
}

/*=========================================
SIDEBAR
=========================================*/

.sidebar{
    width:260px;
    height:100vh;
    background:#ffffff;
    box-shadow:0 0 15px rgba(0,0,0,.12);
    overflow-y:auto;
    position:fixed;
    left:0;
    top:0;
    z-index:999;
    font-family:'Segoe UI',sans-serif;
}

/*=========================================
TOP HEADER
=========================================*/

.sidebar-top{
    position:relative;
    display:flex;
    align-items:center;
    padding:22px 20px;
    background:#247abd;
    overflow:hidden;
}

/* Decorative Shapes */

.sidebar-top::before{
    content:"";
    position:absolute;
    top:-35px;
    right:-35px;
    width:110px;
    height:110px;
    background:rgba(255,255,255,.12);
    transform:rotate(45deg);
}

.sidebar-top::after{
    content:"";
    position:absolute;
    left:-40px;
    top:-20px;
    width:100px;
    height:100px;
    background:rgba(255,255,255,.18);
    transform:rotate(45deg);
}

/*=========================================
PROFILE CARD
=========================================*/

.profile-card{
    display: flex;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 2px solid #e84900 ;
    position: relative;
    background: #247abd;
}

.profile-image{
    position:relative;
    margin-right:15px;
}

.profile-image img{
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #7E80B4;
}

.online{
    width:14px;
    height:14px;
    background:#32cd32;
    border-radius:50%;
    position:absolute;
    bottom:3px;
    right:3px;
    border:2px solid #fff;
}

.profile-info{
    flex:1;
    position:relative;
}

.profile-header{
    cursor:pointer;
    user-select:none;
}

.profile-text h2{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
    color:white;
    font-weight:600;
}

.profile-text p{
    margin-top:4px;
    color:#e84900;
    font-size:14px;
}

.profile-arrow{
    margin-left:8px;
    font-size:14px;
    transition:.3s;
}

/*=========================================
PROFILE DROPDOWN
=========================================*/

.profile-dropdown{
    list-style:none;
    margin-top:15px;
    padding:8px 0;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    display:none;
    overflow:hidden;
    animation:fadeDown .3s ease;
}

.profile-dropdown.show{
    display:block;
}

.profile-dropdown li{
    border-bottom:1px solid #f2f2f2;
}

.profile-dropdown li:last-child{
    border:none;
}

.profile-dropdown a{
    display:flex;
    align-items:center;
    padding:13px 18px;
    color:#444;
    text-decoration:none;
    transition:.3s;
    font-size:15px;
}

.profile-dropdown a i{
    width:28px;
    color:#7E80B4;
    font-size:17px;
}

.profile-dropdown a:hover{
    background:#f5f6ff;
    color:#3F51B5;
    padding-left:25px;
}

.profile-dropdown a:hover i{
    color:#3F51B5;
}

.profile-arrow.rotate{
    transform:rotate(180deg);
}

@keyframes fadeDown{

0%{
    opacity:0;
    transform:translateY(-10px);
}

100%{
    opacity:1;
    transform:translateY(0);
}

}

/*=========================================
MENU
=========================================*/

.sidebar-menu{
    list-style:none;
    margin:0;
    padding:0;
}

.sidebar-menu>li{
    border-bottom:1px solid #f1f1f1;
}

/* Improved Alignment */

.sidebar-menu li a,
.menu-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;   /* Reduced from 25px */
    color:#555;
    text-decoration:none;
    cursor:pointer;
    transition:.3s;
    font-size:16px;
}

.menu-left{
    display:flex;
    align-items:center;
    flex:1;
}

.menu-left i,
.sidebar-menu li>a i{
    width:22px;
    min-width:22px;
    text-align:center;
    margin-right:12px;
    font-size:18px;
    color:#555;
}

.sidebar-menu li>a span,
.menu-left span{
    flex:1;
}

/* Hover */

.sidebar-menu li:hover>a,
.menu-header:hover{
    background:#f5f6ff;
    color:#3F51B5;
}

.sidebar-menu li:hover>a i,
.menu-header:hover i{
    color:#247abd;
}



/*=========================================
ACTIVE MENU
=========================================*/

.sidebar-menu li.active > a{
    background:#eef1ff;
    color:#247abd;
    border-left:4px solid #4CAF50;
    padding-left:16px;
}

.sidebar-menu li.active > a i{
    color:#3F51B5;
}

/*=========================================
SUB MENU
=========================================*/
.submenu{
    list-style:none;
    padding:0;
    margin:0;
    background:#fafafa;
    overflow:hidden;
    max-height:0;
    transition:max-height .35s ease;
}


.menu-item.open .submenu{
    max-height:1000px;
}


.submenu li{
    border:none;
}


.submenu li a{

    display:block;
    padding:12px 65px;

    color:#6b6b6b;

    text-decoration:none;

    font-size:15px;

    transition:all .3s ease;

}


.submenu li a:hover{

    background:#edf1ff;

    color:#3F51B5;

    padding-left:72px;

}

/*=========================================
ARROW
=========================================*/

.arrow{
    font-size:14px;
    color:#777;
    transition:.3s ease;
}

.menu-item.open .arrow{
    transform:rotate(180deg);
}

/*=========================================
RIPPLE EFFECT
=========================================*/

.menu-header,
.sidebar-menu li a{
    position:relative;
    overflow:hidden;
}

.ripple{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(126,128,180,.35);
    transform:scale(0);
    animation:ripple .6s linear;
    pointer-events:none;
}

@keyframes ripple{

    to{
        transform:scale(25);
        opacity:0;
    }

}

/*=========================================
ICON ANIMATION
=========================================*/

.icon-spin{
    animation:iconSpin .5s ease;
}

@keyframes iconSpin{

    0%{
        transform:rotate(0deg);
    }

    50%{
        transform:rotate(20deg) scale(1.2);
    }

    100%{
        transform:rotate(0deg);
    }

}

/*=========================================
SCROLLBAR
=========================================*/

.sidebar::-webkit-scrollbar{
    width:6px;
}

.sidebar::-webkit-scrollbar-track{
    background:#eeeeee;
}

.sidebar::-webkit-scrollbar-thumb{
    background:#7E80B4;
    border-radius:20px;
}

.sidebar::-webkit-scrollbar-thumb:hover{
    background:#5C63B6;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:768px){

    .sidebar{
        width:260px;
        transform:translateX(-100%);
        transition:.35s ease;
    }

    /* Full Sidebar */

    .sidebar.active{
        transform:translateX(0);
    }

    /* Icons Only */

    .sidebar.collapsed{
        width:85px;
        transform:translateX(0);
    }

    .sidebar.collapsed .profile-info{
        display:none;
    }

    .sidebar.collapsed .profile-card{
        justify-content:center;
        padding:20px 10px;
    }

    .sidebar.collapsed .profile-image{
        margin:0;
    }

    .sidebar.collapsed .sidebar-menu li a span,
    .sidebar.collapsed .menu-left span{
        display:none;
    }

    .sidebar.collapsed .sidebar-menu li a,
    .sidebar.collapsed .menu-header{
        justify-content:center;
        padding:17px 0;
    }

    .sidebar.collapsed .menu-left{
        justify-content:center;
    }

    .sidebar.collapsed .menu-left i,
    .sidebar.collapsed .sidebar-menu li>a i{
        margin:0;
        font-size:20px;
    }

    .sidebar.collapsed .submenu{
        display:none;
    }

    .main-content{
        margin-left:0;
        transition:.35s ease;
    }

}
/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

    .profile-card{
        padding:18px;
    }

    .profile-image img{
        width:52px;
        height:52px;
    }

    .profile-text h2{
        font-size:16px;
    }

    .profile-text p{
        font-size:13px;
    }

    .sidebar-menu li a,
    .menu-header{
        padding:15px 18px;
        font-size:15px;
    }

    .submenu li a{
        padding:11px 55px;
        font-size:14px;
    }

}














/*====================================
      TOP HEADER
====================================*/


.top-header{

    height:70px;

    width:calc(100% - 260px);

    position:fixed;

    top:0;

    right:0;

    z-index:1000;


    display:flex;

    align-items:center;


    padding:0 25px;


    background:#247abd;


    box-shadow:
    0 3px 12px rgba(0,0,0,.25);


    color:#fff;

}



/* LOGO */

.brand-section{

    display:flex;

    align-items:center;

    gap:12px;

    min-width:180px;

}



.brand-icon{

    font-size:28px;

    color:#e84900 ;
    margin-left: 20px;

}



.brand-name{

    font-size:18px;

    font-weight:700;

    letter-spacing:1px;

}



/* MENU ICON */

.header-menu{

    margin-left:25px;

    font-size:24px;

    cursor:pointer;

}



.header-menu i{

    color:white;

}



/* TITLE */

.header-title{

    margin-left:30px;

}



.header-title span{

    font-size:20px;

    font-weight:700;

    letter-spacing:1px;

}



/* RIGHT PROFILE */


.header-profile{


    margin-left:auto;


    display:flex;

    align-items:center;


    gap:25px;


}



.user-name{

    font-size:18px;

    font-weight:700;

}



.profile-circle{

    width:40px;

    height:40px;

    border-radius:50%;

    overflow:hidden;


    border:2px solid #fff;


}



.profile-circle img{

    width:100%;

    height:100%;

    object-fit:cover;

}



/* HOVER EFFECT */


.header-menu:hover{

    transform:scale(1.15);

    transition:.3s;

}



.profile-circle:hover{

    transform:scale(1.1);

    transition:.3s;

}



/*====================================
        RESPONSIVE
====================================*/

@media (max-width:992px){

    .top-header{
        width:100%;
        padding:0 18px;
    }

    .brand-section{
        min-width:auto;
        gap:10px;
    }

    .brand-icon{
        margin-left:10px;
        font-size:24px;
    }

    .brand-name{
        font-size:16px;
    }

    .header-menu{
        margin-left:10px;
        font-size:22px;
    }

    .header-title{
        margin-left:20px;
    }

    .header-title span{
        font-size:18px;
    }

    .header-profile{
        gap:15px;
    }

    .user-name{
        font-size:16px;
    }

}

@media (max-width:768px){

    .top-header{
        width:100%;
        height:70px;
        padding:0 15px;
    }

    .brand-section{
        min-width:auto;
    }

    .brand-name{
        display:none;
    }

    .brand-icon{
        margin-left:5px;
        font-size:22px;
    }

    .header-menu{
        margin-left:0;
        font-size:22px;
    }

    .header-title{
        margin-left:15px;
        flex:1;
    }

    .header-title span{
        font-size:16px;
    }

    .user-name{
        display:none;
    }

    .header-profile{
        gap:10px;
    }

    .profile-circle{
        width:36px;
        height:36px;
    }

}

@media (max-width:480px){

    .top-header{
        padding:0 10px;
    }

    .header-title{
        margin-left:10px;
    }

    .header-title span{
        font-size:14px;
    }

    .brand-icon{
        font-size:20px;
    }

    .header-menu{
        font-size:20px;
    }

    .profile-circle{
        width:34px;
        height:34px;
    }

}








/*=========================================
DESKTOP SIDEBAR TOGGLE
=========================================*/


@media(min-width:769px){


/* COLLAPSED SIDEBAR */

.sidebar.collapsed{

    width:85px;

}


/* Hide profile details */

.sidebar.collapsed .profile-info{

    display:none;

}


.sidebar.collapsed .profile-card{

    justify-content:center;
    padding:20px 10px;

}


.sidebar.collapsed .profile-image{

    margin:0;

}


/* Hide menu text */

.sidebar.collapsed .sidebar-menu li a span,
.sidebar.collapsed .menu-left span{

    display:none;

}


/* Center icons */

.sidebar.collapsed .sidebar-menu li a,
.sidebar.collapsed .menu-header{

    justify-content:center;
    padding:17px 0;

}


.sidebar.collapsed .menu-left{

    justify-content:center;

}


.sidebar.collapsed .menu-left i,
.sidebar.collapsed .sidebar-menu li>a i{

    margin:0;
    font-size:20px;

}


/* Hide submenu */

.sidebar.collapsed .submenu{

    display:none;

}


/* Header resize */

.top-header.collapsed-header{

    width:calc(100% - 85px);

}


/* Logo alignment */

.sidebar.collapsed + .top-header .brand-icon{

    margin-left:10px;

}



}

/*====================================
        RESPONSIVE
====================================*/


@media(max-width:768px){


.top-header{

    width:100%;

}



.brand-name{

    display:none;

}



.header-title span{

    font-size:16px;

}



.user-name{

    display:none;

}


}











/*==========================
    MAIN CONTENT
===========================*/

.main-content{

    margin-left:270px;
    margin-top:70px;
    padding:20px;
    background:#f5f6fa;
    min-height:100vh;
    transition:.3s;

}

/* If sidebar collapsed */

/* Sidebar collapsed - Main Content moves left */

.sidebar.collapsed ~ .main-content{
    margin-left:95px;
    transition:all .3s ease;
}

/* Header also resize */

.sidebar.collapsed ~ .top-header{
    width:calc(100% - 85px);
}

/* Normal */

.sidebar ~ .main-content{
    transition:all .3s ease;
}


/*==========================
    MAIN WRAPPER
==========================*/

.wrapper{

    width:100%;

    padding:20px;

}

/*==========================
    CALENDAR CARD
==========================*/

.calendar-card{

    background:#fff;

    border:1px solid #dddddd;

    border-radius:4px;

    padding:15px;

    box-shadow:0 1px 4px rgba(0,0,0,.08);

}

/*==========================
    CALENDAR
==========================*/

#calendar{

    width:100%;

}

/*==========================
    TOOLBAR
==========================*/

.fc .fc-toolbar{

    margin-bottom:15px;

}

.fc-toolbar-title{

    font-size:32px !important;

    color:#374151;

    font-weight:700;

    text-transform:uppercase;

}

/*==========================
    BUTTONS
==========================*/

.fc-button{

    background:#ffffff !important;

    border:1px solid #cfcfcf !important;

    color:#444 !important;

    text-transform:capitalize !important;

    box-shadow:none !important;

    padding:7px 14px !important;

}

.fc-button:hover{

    background:#efefef !important;

}

.fc-button-active{

    background:#d9d9d9 !important;

}

/*==========================
    HEADER
==========================*/

.fc-col-header-cell{

    background:#dddddd;

}

.fc-col-header-cell-cushion{

    text-decoration:none;

    color:#555;

    font-weight:600;

    padding:12px 0;

}

/*==========================
    DAY GRID
==========================*/

.fc-daygrid-day{

    height:120px;

}

.fc-daygrid-day-number{

    text-decoration:none;

    color:#666;

    font-size:14px;

    padding:8px;

}

/*==========================
    TODAY
==========================*/

.fc-day-today{

    background:#fff8dc !important;

}

/*==========================
    BORDERS
==========================*/

.fc-theme-standard td,
.fc-theme-standard th{

    border:1px solid #dddddd;

}

/*==========================
    EVENTS
==========================*/

.fc-event{

    background:#247abd !important;

    border:none !important;

    color:#fff !important;

    border-radius:3px;

    padding:2px;

    font-size:12px;

}

/*==========================
    WEEK VIEW
==========================*/

.fc-timegrid-slot{

    height:42px;

}

.fc-timegrid-slot-label{

    color:#666;

    font-size:13px;

}

.fc-timegrid-axis{

    background:#ffffff;

}

.fc-timegrid-divider{

    display:none;

}

.fc-timeGridWeek-view{

    min-height:700px;

}

/*==========================
    DAY VIEW
==========================*/

.fc-timeGridDay-view{

    min-height:700px;

}

/*==========================
    SCROLLBAR
==========================*/

::-webkit-scrollbar{

    width:8px;

    height:8px;

}

::-webkit-scrollbar-thumb{

    background:#bdbdbd;

    border-radius:10px;

}

::-webkit-scrollbar-track{

    background:#f1f1f1;

}

/*==========================
    RESPONSIVE
==========================*/

@media(max-width:992px){

.fc-toolbar{

    display:block !important;

    text-align:center;

}

.fc-toolbar-chunk{

    margin-bottom:10px;

}

.fc-toolbar-title{

    font-size:24px !important;

}

}

@media(max-width:768px){

.wrapper{

    padding:10px;

}

.calendar-card{

    padding:10px;

}

.fc-toolbar-title{

    font-size:20px !important;

}

.fc-daygrid-day{

    height:80px;

}

.fc-timegrid-slot{

    height:32px;

}

}



/*==========================
    RESPONSIVE
==========================*/

@media (max-width: 992px){

    .main-content{
        margin-left:0;
        padding:15px;
    }

    .wrapper{
        padding:15px;
    }

    .calendar-card{
        padding:12px;
    }

    .fc-toolbar{
        display:flex !important;
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .fc-toolbar-chunk{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:8px;
    }

    .fc-toolbar-title{
        font-size:24px !important;
        text-align:center;
    }

    .fc-daygrid-day{
        height:95px;
    }

    .fc-timegrid-slot{
        height:36px;
    }
}

@media (max-width:768px){

    .main-content{
        margin-left:0;
        padding:10px;
    }

    .wrapper{
        padding:10px;
    }

    .calendar-card{
        padding:10px;
        overflow-x:auto;
    }

    #calendar{
        min-width:700px;
    }

    .fc-toolbar{
        display:flex !important;
        flex-direction:column;
        align-items:center;
        gap:8px;
        margin-right: 149px;
    }

    .fc-toolbar-chunk{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:6px;
    }

    .fc-toolbar-title{
        font-size:20px !important;
        text-align:center;
    }

    .fc-daygrid-day{
        height:80px;
    }

    .fc-timegrid-slot{
        height:32px;
    }
}

@media (max-width:480px){

    .main-content{
        padding:8px;
    }

    .wrapper{
        padding:8px;
    }

    .calendar-card{
        padding:8px;
    }

    .fc-toolbar-title{
        font-size:18px !important;
    }

    .fc-button{
        font-size:12px !important;
        padding:5px 8px !important;
    }

    .fc-daygrid-day{
        height:65px;
    }

    .fc-daygrid-day-number{
        font-size:12px;
    }
}






















/*=========================================
ROOM TYPE
=========================================*/


.container{
    width:98%;
    margin:20px auto;
}

/*=========================================
PAGE TITLE
=========================================*/

.page-title{
    font-size:24px;
    font-weight:400;
    color:#3d4d63;
    margin-bottom:25px;
    text-transform:uppercase;
}

/*=========================================
LAYOUT
=========================================*/

.room-wrapper{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.left-panel{
    width:33%;
    background:#fff;
    border:1px solid #ddd;
}

.right-panel{
    width:67%;
    background:#fff;
    border:1px solid #ddd;
}

/*=========================================
HEADER
=========================================*/

.panel-header{
    background:#007bff;
    color:#fff;
    padding:16px 20px;
    font-size:22px;
    font-weight:600;
    text-transform:uppercase;
}

/*=========================================
BODY
=========================================*/

.panel-body{
    padding:20px;
}

/*=========================================
FORM
=========================================*/

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    font-size:18px;
    color:#333;
    margin-bottom:8px;
    font-weight:600;
}

.form-group label span{
    color:red;
}

.form-group input{
    width:100%;
    height:44px;
    border:1px solid #5aaeff;
    padding:0 12px;
    font-size:17px;
    outline:none;
}

.form-group input:focus{
    border-color:#3399ff;
}

/*=========================================
FOOTER
=========================================*/

.panel-footer{
    border-top:1px solid #ddd;
    padding:15px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.btn{
    border:none;
    padding:10px 22px;
    color:#fff;
    cursor:pointer;
    font-size:17px;
}

.btn-discard{
    background:#e84900;
}

.btn-save{
    background:#e84900;
}

.btn:hover{
    opacity:.9;
}

/*=========================================
SEARCH
=========================================*/

.search-box{
    display:flex;
    margin-bottom:18px;
}

.search-box input{
    width:100%;
    height:42px;
    border:1px solid #999;
    border-right:none;
    padding:0 12px;
    font-size:16px;
    outline:none;
}

.search-box button{
    width:48px;
    background:#2eb7ff;
    border:none;
    color:#fff;
    cursor:pointer;
    font-size:18px;
}

/*=========================================
TABLE
=========================================*/

table{
    width:100%;
    border-collapse:collapse;
}

table th{
    background:#007bff;
    border:1px solid #666;
    padding:10px;
    text-align:left;
    color:#444;
    font-size:17px;
}

table td{
    border:1px solid #666;
    padding:10px;
    font-size:17px;
   
}

table tbody tr:hover{
    background:#fafafa;
}

/*=========================================
ACTION ICONS
=========================================*/

td a{
    text-decoration:none;
    color:#1d74d8;
    margin-right:8px;
    font-size:15px;
}

td a:hover{
    color:#0a58ca;
}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px){

    .room-wrapper{
        flex-direction:column;
    }

    .left-panel,
    .right-panel{
        width:100%;
    }

}

@media(max-width:768px){

    .page-title{
        font-size:22px;
    }

    .panel-header{
        font-size:18px;
        padding:14px 15px;
    }

    .panel-body{
        padding:15px;
    }

    .form-group label{
        font-size:16px;
    }

    .form-group input{
        height:40px;
        font-size:15px;
    }

    table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

}














/*=========================================
ROOMS
=========================================*/








/* HEADER */


.header{

position:fixed;

left:230px;
right:0;
top:0;

height:70px;

background:white;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 30px;

box-shadow:0 1px 5px #ccc;

}


.menu{

font-size:22px;

}



.profile{

font-size:16px;

display:flex;

gap:10px;

align-items:center;

}






/* MAIN */

.main{

margin-left:230px;

padding:100px 30px 30px;


}



.main h1{

font-size:24px;

font-weight:400;

color:#444;

margin-bottom:25px;

}





.room-container{


display:grid;

grid-template-columns:450px 1fr;

gap:20px;


}





.card{


background:white;

border:1px solid #ddd;

}





.card-title{


background:#222;

color:white;

padding:18px 20px;

font-weight:bold;

font-size:14px;


}





/* FORM */


.form-body{

padding:25px 20px;


}



label{

display:block;

font-weight:bold;

font-size:14px;

margin-bottom:7px;


}



input,
select{


width:100%;

height:35px;

border:1px solid #333;

padding:0 12px;

margin-bottom:18px;

color:#666;


}





.form-footer{


border-top:1px solid #ddd;

padding:10px 15px;

text-align:right;


}



button{


border:none;

padding:10px 15px;

color:white;

cursor:pointer;


}



.discard{

background:#ff5b5b;

}



.save{

background:#2ecc71;

margin-left:5px;

}








/* TABLE */


.table-body{

padding:20px;


}



.search-box{


display:flex;

margin-bottom:15px;


}


.search-box input{

margin:0;

height:35px;

border:1px solid #ccc;


}


.search-box button{


width:40px;

background:#247abd;


}




table{

width:100%;

border-collapse:collapse;

}



th,
td{

border:1px solid #444;

padding:12px 10px;

text-align:left;

font-size:14px;

color:#555;

}



th{

font-weight:bold;

}





.edit{

color:#247abd;

margin-right:8px;

}



.delete{

color:#247abd;

}





/* PAGINATION */

.table-footer{

    width:100%;

    margin-top:40px;

    display:flex;

    justify-content:flex-end;

}



.pagination{

    display:flex;

    list-style:none;

    padding:0;

    margin:0;

}



.pagination li a{

    width:40px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#333;

    background:#fff;

    border:1px solid #ddd;

    font-size:14px;

    transition:0.3s;

}



.pagination li:not(:last-child) a{

    border-right:none;

}



/* Arrow */

.pagination li:first-child a,
.pagination li:last-child a{

    font-size:18px;

    color:#555;

}



/* Active Page */

.pagination li.active a{

    background:#2878e8;

    color:#fff;

    border-color:#2878e8;

}



/* Hover */

.pagination li a:hover{

    background:#2878e8;

    color:white;

}



/*=========================================
        RESPONSIVE MEDIA QUERY
=========================================*/

/* Tablet */
@media (max-width:1024px){

    .header{
        left:0;
        padding:0 20px;
    }

    .main{
        margin-left:0;
        padding:90px 20px 20px;
    }

    .room-container{
        grid-template-columns:1fr;
    }

}


/* Mobile */
@media (max-width:768px){

    .header{
        left:0;
        height:65px;
        padding:0 15px;
    }

    .main{
        margin-left:0;
        padding:85px 15px 20px;
    }

    .main h1{
        font-size:22px;
    }

    .room-container{
        grid-template-columns:1fr;
        gap:15px;
    }

    .card-title{
        padding:15px;
        font-size:14px;
    }

    .form-body{
        padding:15px;
    }

    input,
    select{
        font-size:14px;
    }

    .search-box{
        flex-wrap:nowrap;
    }

    .search-box input{
        width:100%;
    }

    .search-box button{
        width:45px;
        flex-shrink:0;
    }

    .table-body{
        overflow-x:auto;
    }

    table{
        min-width:700px;
    }

    .table-footer{
        justify-content:center;
        overflow-x:auto;
        margin-top:20px;
    }

}


/* Small Mobile */
@media (max-width:480px){

    .header{
        padding:0 10px;
    }

    .menu{
        font-size:20px;
    }

    .profile{
        font-size:14px;
        gap:6px;
    }

    .main{
        padding:80px 10px 15px;
    }

    .main h1{
        font-size:20px;
        margin-bottom:15px;
    }

    .form-footer{
        display:flex;
        gap:10px;
    }

    .discard,
    .save{
        width:100%;
        margin-left:0;
    }

    .pagination li a{
        width:34px;
        height:34px;
        font-size:13px;
    }

}






/* dashboard1 renamed CSS */

.checkin-top-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.checkin-top-header h2{
    font-size:32px;
    font-weight:400;
    color:#333;
}

.checkin-list-button{
    background:#247abd;
    color:white;
    border:none;
    padding:12px 20px;
    font-size:18px;
    cursor:pointer;
}

.checkin-main-container{
    display:flex;
    gap:20px;
}

.checkin-left-panel{
    flex:2;
    background:white;
    border:1px solid #ddd;
}

.checkin-right-panel{
    flex:1;
    background:white;
    border:1px solid #ddd;
}

.checkin-panel-header{
    background:#247abd;
    color:white;
    padding:15px 20px;
    font-weight:bold;
    font-size:20px;
}

.checkin-panel-body{
    padding:25px;
}

.checkin-form-row{
    display:flex;
    gap:20px;
    margin-bottom:20px;
}

.checkin-form-group{
    flex:1;
}

.checkin-form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:bold;
    color:#333;
}

.checkin-form-group input,
.checkin-form-group select,
.checkin-form-group textarea{
    width:100%;
    padding:6px 12px;
    border:1px solid #999;
    font-size:16px;
}

.checkin-button{
    width:100%;
    background:#247abd;
    color:white;
    border:none;
    padding:12px;
    font-size:20px;
    cursor:pointer;
    margin-bottom:20px;
}

.checkin-table{
    width:100%;
    border-collapse:collapse;
}

.checkin-table th,
.checkin-table td{
    border:1px solid #999;
    padding:8px;
    text-align:center;
}

.checkin-table-button{
    background:#1e73d8;
    color:white;
    border:none;
    padding:6px 12px;
    width:100%;
    font-weight:bold;
}

.checkin-input-group{
    display:flex;
}

.checkin-input-group select{
    flex:1;
}

.checkin-plus-button{
    width:40px;
    background:#1e73d8;
    color:white;
    border:none;
    cursor:pointer;
    height:35px;
}

.checkin-save-button{
    width:100%;
    background:#45c073;
    color:white;
    border:none;
    padding:14px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
}

.checkin-footer{
    border-top:1px solid #ddd;
    padding:15px;
}

@media(max-width:992px){
    .checkin-main-container{
        flex-direction:column;
    }

    .checkin-form-row{
        flex-direction:column;
        gap:15px;
    }
}
 /* Mobile Responsive Media Query */

@media (max-width: 768px) {

    .checkin-top-header{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .checkin-top-header h2{
        font-size: 24px;
    }

    .checkin-list-button{
        width: 100%;
        font-size: 16px;
        padding: 10px;
    }

    .checkin-main-container{
        flex-direction: column;
        gap: 15px;
    }

    .checkin-left-panel,
    .checkin-right-panel{
        width: 100%;
    }

    .checkin-panel-header{
        font-size: 18px;
        padding: 12px 15px;
    }

    .checkin-panel-body{
        padding: 15px;
    }

    .checkin-form-row{
        flex-direction: column;
        gap: 15px;
    }

    .checkin-form-group input,
    .checkin-form-group select,
    .checkin-form-group textarea{
        font-size: 14px;
        padding: 8px 10px;
    }

    .checkin-button{
        font-size: 18px;
        padding: 12px;
    }

    .checkin-table{
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .checkin-table th,
    .checkin-table td{
        font-size: 12px;
        padding: 6px;
    }

    .checkin-table-button{
        font-size: 12px;
        padding: 5px 8px;
    }

    .checkin-plus-button{
        width: 35px;
        height: 35px;
    }

    .checkin-save-button{
        font-size: 16px;
        padding: 12px;
    }

    .checkin-footer{
        padding: 10px;
    }
}       
        
        
        
        
        /*dashboard2*/
        /* Unique Dashboard CSS */

.hotel-dashboard-wrapper{
    display:grid;
    grid-template-columns:32% 41% 27%;
    gap:15px;
    padding:15px;
}

.hotel-dashboard-box{
    background:#4a4a4a;
    color:#fff;
    border-radius:3px;
    overflow:hidden;
}

.hotel-dashboard-header{
    padding:4px 16px;
    font-weight:bold;
    text-transform:uppercase;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #777;
}

.hotel-dashboard-body{
    padding:16px;
}

.hotel-dashboard-table{
    width:100%;
    border-collapse:collapse;
}

.hotel-dashboard-table td,
.hotel-dashboard-table th{
    border:1px solid #2db4ff;
    padding:8px;
    font-size:14px;
    color:#fff;
}

.hotel-dashboard-table th{
    color:#ffd400;
    text-align:left;
}

.hotel-dashboard-label{
    color:#ffd400;
    font-weight:bold;
}

.hotel-dashboard-title{
    text-align:center;
    color:#ff4d4d;
    font-weight:bold;
    padding:8px;
    border:1px solid #2db4ff;
}

.hotel-dashboard-btn{
    border:none;
    padding:8px 14px;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
}

.hotel-dashboard-btn-purple{
    background:#7a56c2;
}

.hotel-dashboard-btn-blue{
    background:#29a8df;
}

.hotel-dashboard-btn-pink{
    background:#ef4d8b;
}

.hotel-dashboard-btn-extend{
    width:100%;
    background:#29a8df;
    padding:10px;
    margin-bottom:10px;
    border:none;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
}

.hotel-dashboard-total td{
    color:#ffd400;
    font-weight:bold;
}

.hotel-dashboard-right{
    text-align:right;
}

@media(max-width:1000px){
    .hotel-dashboard-wrapper{
        grid-template-columns:1fr;
    }
}
/* Mobile Responsive Media Query */

@media (max-width: 768px) {

    .hotel-dashboard-wrapper{
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
    }

    .hotel-dashboard-header{
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px;
    }

    .hotel-dashboard-body{
        padding: 10px;
    }

    /* Make tables scrollable on mobile */
    .hotel-dashboard-table{
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .hotel-dashboard-table th,
    .hotel-dashboard-table td{
        font-size: 12px;
        padding: 6px;
    }

    .hotel-dashboard-title{
        font-size: 13px;
        padding: 6px;
    }

    .hotel-dashboard-btn{
        width: 100%;
        margin-top: 5px;
        padding: 8px;
        font-size: 12px;
    }

    .hotel-dashboard-btn-extend{
        font-size: 13px;
        padding: 10px;
    }
}
/* Remove all hover animation and color change */

.hotel-dashboard-wrapper * {
    transition: none !important;
    animation: none !important;
}

.hotel-dashboard-wrapper *:hover {
    background: inherit !important;
    color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
}


/*dashboard*/
.dashboard{
    background:#4a4a4a;
    margin:4px;
    border-radius:2px;
    overflow:hidden;
}

.top-header1{
    padding:14px 20px;
    color:white;
    font-weight:bold;
    font-size:14px;
    border-bottom:1px solid #666;
}

.top-controls{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 20px;
    background:#f5f5f5;
}

.datetime-box{
    display:flex;
    align-items:center;
    background:#4a4a4a;
    color:white;
    border:1px solid white;
    font-weight:bold;
    font-size:12px;
}

.datetime-box .arrow-btn{
    background:#f15b5b;
    padding:8px 10px;
    border-right:1px solid white;
}

.datetime-box .time{
    padding:8px 12px;
}

.right-buttons{
    display:flex;
}

.right-buttons button{
    border:none;
    padding:8px 12px;
    color:white;
    font-size:12px;
    cursor:pointer;
}

.red-btn{
    background:#f15b5b;
}

.blue-btn{
    background:#2d9bf0;
}

.section-title{
    color:white;
    font-weight:bold;
    padding:10px 20px;
    font-size:13px;
    border-top:1px solid #666;
    border-bottom:1px solid #666;
}

.rooms-container{
    padding:18px;
}

.rooms-grid{
    display:grid;
    grid-template-columns:repeat(10,1fr);
    border:1px solid #2db4ff;
}

.room{
    height:96px;
    border:1px solid #2db4ff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
}

.room.green{
    background:#3fc06f;
    width: 102px;
    margin-left: 23px;
}

.room.blue{
    background:#35a8f5;
    width: 102px;
    margin-left: 23px;
}

.room-top{
    position:absolute;
    top:4px;
    left:6px;
    right:6px;
    display:flex;
    justify-content:space-between;
    color:white;
    font-size:10px;
    font-weight:bold;
}

.room-image{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(0,0,0,0.3);
}

.room-number{
    color:white;
    font-weight:bold;
    margin-top:4px;
    font-size:18px;
}



@media(max-width:1200px){
    .rooms-grid{
        grid-template-columns:repeat(5,1fr);
    }
}

@media(max-width:768px){
    .top-controls{
        flex-direction:column;
        gap:10px;
        align-items:flex-start;
    }

    .rooms-grid{
        grid-template-columns:repeat(3,1fr);
    }
}


/* Bottom dashboard unique CSS */

.hotel-bottom-wrapper{
    display:grid;
    grid-template-columns:48% 24% 24%;
    gap:20px;
    padding:0 18px 18px 18px;
}

.hotel-bottom-panel{
    background:#4a4a4a;
    border-radius:3px;
    overflow:hidden;
}

.hotel-bottom-header{
    color:white;
    font-weight:bold;
    font-size:13px;
    padding:14px 18px;
    border-bottom:1px solid #666;
    text-transform:uppercase;
}

.hotel-bottom-body{
    padding:18px;
}

.hotel-bottom-table{
    width:100%;
    border-collapse:collapse;
}

.hotel-bottom-table th,
.hotel-bottom-table td{
    border:1px solid #2db4ff;
    padding:10px;
    font-size:14px;
    color:white;
}

.hotel-bottom-table th{
    color:#ff4d4d;
    text-align:left;
    font-weight:normal;
}

.hotel-bottom-label{
    color:#ffd400;
    font-weight:bold;
}

.hotel-bottom-right{
    text-align:right;
}

.hotel-bottom-empty{
    height:285px;
    border:1px solid #2db4ff;
    border-top:none;
}

@media(max-width:992px){
    .hotel-bottom-wrapper{
        grid-template-columns:1fr;
    }
}
/* Remove all mouse hover effects */

.hotel-bottom-panel:hover,
.hotel-bottom-table tr:hover,
.hotel-bottom-table td:hover,
.hotel-bottom-table th:hover,
button:hover {
  
    color: inherit !important;
    cursor: default !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Mobile Responsive CSS */

@media (max-width: 768px) {

    /* Top controls stack */
    .top-controls{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
    }

    .datetime-box{
        width: 100%;
        justify-content: center;
    }

    .right-buttons{
        width: 100%;
        justify-content: space-between;
    }

    .right-buttons button{
        flex: 1;
        margin: 0 2px;
        font-size: 11px;
        padding: 8px 5px;
    }

    /* Room grid mobile */
    .rooms-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        border: none;
    }

    .room{
        width: 100% !important;
        margin-left: 0 !important;
        height: 90px;
    }

    .room-number{
        font-size: 16px;
    }

    .room-image{
        width: 30px;
        height: 30px;
    }

    /* Bottom dashboard mobile */
    .hotel-bottom-wrapper{
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
    }

    .hotel-bottom-panel{
        width: 100%;
    }

    .hotel-bottom-body{
        overflow-x: auto;
    }

    .hotel-bottom-table{
        min-width: 500px;
    }

    /* Table text smaller */
    .hotel-bottom-table th,
    .hotel-bottom-table td{
        font-size: 12px;
        padding: 8px;
    }

    .section-title,
    .top-header1{
        font-size: 12px;
        padding: 10px;
    }

    .rooms-container{
        padding: 10px;
    }

    /*---------------------------------------------------------------------------------------------------------------- */
    /* Available Room */
    .available-room {
        background: #28a745;
        border: 2px solid #1f8b39;
    }

    /* Occupied Room */
    .occupied-room {
        background: #4FC3F7;
        border: 2px solid #2196F3;
    }

    .available-room span,
    .available-room .room-number,
    .available-room i,
    .available-room a {
        color: #fff !important;
    }

    .occupied-room span,
    .occupied-room .room-number,
    .occupied-room i,
    .occupied-room a {
        color: #fff !important;
    }
    /*---------------------------------------------------------------------------------------------------------------- */
}