@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* Original content from testbackup/css/main.css */
body
{
width:100%;
font: 15px "Century Gothic", "Times Roman", sans-serif;
background:#eee;
min-height:550px;
background-attachment:fixed;
}
.bg
{
min-height:540px;
}
.bg1
{
background:url(https://images.unsplash.com/photo-1509062522246-3755977927d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80);
min-height:535px;
}

@font-face {
   font-family: 'typo';
    src: url('../fonts/typo.ttf');
	}

@font-face {
   font-family: 'gothic';
    src: url('../fonts/gothics.ttf');
	}

.panel{
border-color:#eee;
margin:40px;
padding:20px;
font: 15px "Century Gothic", "Times Roman", sans-serif;
}

.title
{
font-family:'typo';
}

.header
{
background:#202020;
height:70px;
}
.logo
{
font-family:'typo';
font-size:35px;
color:#ffbb33;
margin:15px;
}

.title1{
font: 16px "Century Gothic", "Times Roman", sans-serif;
}
.title2{
font-family: 'Ubuntu', sans-serif;
font-size:20px;
}


.sub1
{
display: inline-block;
color:#202020;
background:orange;
font-size:15px;
padding: 8px 12px;
white-space: nowrap;
text-decoration: none;
margin: 5px;
}


.sub
{
width:100%;
background-color:#9acd32;
font-size:20px;
padding:2px;
margin-top:15px;
margin-right:20px;
}
.sub:hover
{
color:#fff;
}

.footer
{
font-size:15px;
text-align:center;
border-top:1px solid;
border-color:#323232;
background-color:#202020;
}
.footer a
{
margin:25px;
color:orange;
text-decoration:none;
font: 15px "Century Gothic", "Times Roman", sans-serif;

}
.footer a:hover
{
text-decoration:none;
color:#9acd32;
border-top:2px solid;
border-color:orange;

}

.box
{
padding:9px;
}
hr{
color:#000000;
}
.top
{
margin-top:20px;
}
.log1
{
font: 15px 'Ubuntu', sans-serif;
color:orange;
margin-left:10px;
}

.log
{
margin:10px;
margin-right:60px;
margin-left:5px;
color:orange;
text-decoration:none;
font-size:20px;
font-size:15px;
}
.log:hover
{
color:#9acd32;
border-top:2px solid;
border-color:orange;
text-decoration:none;
}

.timer-container {
    position: fixed;
    top: 70px;
    left: 0;
    background-color: #f2f2f2;
    padding: 10px;
    border: 1px solid #ccc;
    z-index: 1000;
}

#countdown {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}


/* --- Modern Sidebar Styling --- */
.d-flex.flex-column.flex-shrink-0.p-3.text-white.bg-dark {
    background: linear-gradient(180deg, #2c3e50 0%, #1a252f 100%) !important; /* Subtle gradient */
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3); /* Stronger shadow */
    border-right: none; /* Remove border, rely on shadow */
    padding-top: 25px !important; /* More padding at top */
    overflow-y: auto; /* Add scrollbar for vertical overflow */
}

.d-flex.align-items-center.mb-3.mb-md-0.me-md-auto.text-white.text-decoration-none .fs-4 {
    font-family: 'Poppins', sans-serif; /* More modern font */
    font-weight: 700; /* Bolder title */
    color: #e0e0e0; /* Slightly darker white for title */
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Subtle text shadow */
    margin-bottom: 20px !important; /* More space below title */
}

.nav-pills .nav-item .nav-link {
    color: #b0b0b0; /* Lighter gray for inactive links */
    padding: 12px 18px; /* More padding */
    margin-bottom: 8px; /* More margin */
    border-radius: 10px; /* More rounded corners */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
    display: flex; /* Align icon and text */
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Separator line */
}

.nav-pills .nav-item .nav-link i { /* Style for Bootstrap Icons */
    font-size: 1.1em;
    margin-right: 12px; /* Space between icon and text */
    color: #95a5a6; /* Icon color */
}

.nav-pills .nav-item .nav-link:hover {
    background-color: rgba(52, 152, 219, 0.1); /* Very subtle blue background on hover */
    color: #ffffff; /* White text on hover */
    transform: translateX(8px); /* More pronounced slide effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow on hover */
}

.nav-pills .nav-item .nav-link.active {
    background: linear-gradient(90deg, #3498db 0%, #2980b9 100%) !important; /* Gradient for active link */
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Stronger shadow for active state */
    border: none; /* Ensure no border */
}

/* Submenu styling */
.collapse.show .nav-link {
    padding-left: 40px; /* More indent for submenu items */
    font-size: 0.9em;
    color: #a0a0a0;
    border-bottom: none; /* No separator for submenu items */
}

.collapse.show .nav-link:hover {
    background-color: rgba(52, 152, 219, 0.05); /* Lighter hover for submenu */
    color: #e0e0e0;
}

/* Dropdown for user profile */
.dropdown-menu-dark {
    background-color: #2c3e50;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.dropdown-menu-dark .dropdown-item {
    color: #bdc3c7;
    padding: 10px 15px;
}

.dropdown-menu-dark .dropdown-item:hover {
    background-color: #34495e;
    color: #ecf0f1;
}

/* Hide scrollbar for WebKit browsers */
.d-flex.flex-column.flex-shrink-0.p-3.text-white.bg-dark::-webkit-scrollbar {
    width: 0;
    background: transparent; /* make scrollbar transparent */
}

/* Hide scrollbar for Firefox */
.d-flex.flex-column.flex-shrink-0.p-3.text-white.bg-dark {
    scrollbar-width: none; /* Firefox */
}