/* Basic Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; padding: 20px; background-color: #f4f4f4; }




#room_status_not_available {
	animation-name: room_status_not_available;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	padding: 2%;
	font-size:13.5px;
	width:180px;
	height:22px;
	border-radius:20%;
	
}

@keyframes room_status_not_available {
	0% {background-color: blue; color: white; }
	15% {background-color: blue; color: brown; }
	25% { background-color: orange; }
	50% {background-color: yellow; color: black;}
	75% { background-color: orange;	}
	87% {background-color: green; color: white;}
	100% { background-color: pink;	}
	
	
}



.tab-wrapper { max-width:  inherit; margin: 0 auto; }

/* Tab Menu - Desktop */
.tab-menu {
    display: flex;
    border-bottom: 2px solid #ccc;
}

.tab-link {
    padding: 15px 20px;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 16px;
    transition: 0.3s;
}

.tab-link:hover { background-color: #ddd; }
.tab-link.active {
    border-bottom: 2px solid #007bff;
    color: #007bff;
    font-weight: bold;
}

/* Tab Content */
.tab-panel {
    display: none;
    padding: 20px;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
}

.tab-panel.active { display: block; }

/* Responsive Media Query - Mobile */
@media screen and (max-width: 600px) {
    .tab-menu { flex-direction: column; }
    .tab-link { text-align: left; border-bottom: 1px solid #ccc; }
    .tab-link.active { border-bottom: 2px solid #007bff; }
}