html, body {
    height: 100%;
    margin: 0;
}

@font-face {
    font-family: 'NulshockRg-Bold';
    src: url('/assets/fonts/NulshockRg-Bold.otf') format('opentype');
    font-display: swap;
}

.mtitle{
    color: #000D70; 
    margin-bottom: 22px; 
    font-family: NulshockRg-Bold;
}
h3 {
    font-family: 'NulshockRg-Bold', sans-serif;
}
/* Full screen container for particles.js */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* ensures particles are behind content */
}

/* end of dots joining code */

/* Sticky Header */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Keeps it above other content */
    background: linear-gradient(to bottom, #004e92, #000428); /* Custom header gradient */
    color: white;
    height: 55px;
    padding: 0;
}
.bg-primary {
    background-color: #002668 !important;
}

.bg-logo{
background: #000428;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #004e92, #000428);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
height: 55px;
}
.dis{
	margin: 10px;
}
.lead{
	color: #030375;
}
.navbar .bg-logo .positi{
 position: absolute;
 bottom: 0;
 width: 90%;
}  /* Height of the footer */
.navbar-nav{
	margin-right: 15px;
}

.txt-dev{
	float:right;
	margin-right: 0px;
}
	
.row{
	width: 100%;
}
.center{
	text-align: center;
	color: #212529;
	font-weight: 700;
	margin-top: 40px;
}
/* Profile Image Styles */
    .profile-image {
    box-shadow: 0px 0px 20px rgba(60, 60, 60, 0.5); /* Glow effect */
    border-radius: 5%; /* Optional: makes the image circular */
    }
    
/* Additional styles to ensure the layout works */
#timeFields {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#timeFields .form-group {
    flex: 0 0 48%; /* Allow each input to take up approximately half of the width */
}

@media (max-width: 768px) {
    #timeFields .form-group {
        flex: 0 0 100%; /* Stacks inputs on small screens */
    }
}    
    
/* Sidebar Styles */
.sidebar {
    position: fixed;
    top: 55px; /* Adjust according to your header height */
    left: 0;
    width: 250px;
    height: 100%;
    background-color: #333;
    padding-top: 70px; /* Adjust according to your header height */
    transition: transform 0.3s ease;
    transform: translateX(0); /* Sidebar is visible by default on large screens */
}

/* Show the sidebar when the 'active' class is added */
.sidebar.active {
    transform: translateX(0); /* Sidebar comes into view when active */
}

/* Sidebar link styles */
.sidebar a {
    padding: 10px;
    text-decoration: none;
    font-size: 18px;
    color: white;
    display: block;
    width: 100%; /* Ensures that each link spans the full width of the sidebar */
}

.sidebar a:hover {
    background-color: #ddd;
    color: black;
}

.sidebar .active {
    background-color: #4CAF50;
    color: white;
}

/* Hamburger Icon (visible on mobile) */
.burger-icon {
    display: none; /* Hidden by default */
    background: transparent;
    border: none;
    font-size: 30px;
    color: #333;
    position: absolute;
    top: 55px;  /* Position under the header */
    right: 20px; /* Position to the right side of the screen */
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
    .sidebar-container {
        padding-left: 0;
    }

    /* Hide sidebar by default on small screens */
    .sidebar {
        transform: translateX(-100%); /* Sidebar is hidden by default on small screens */
    }

    /* Show burger icon on small screens */
    .burger-icon {
        display: block; /* Show the hamburger icon on mobile */
    }

    /* Show the sidebar when the 'active' class is added */
    .sidebar.active {
        transform: translateX(0); /* Sidebar comes into view on mobile when active */
    }

    /* Ensure each sidebar link is displayed on a new line in mobile view */
    .sidebar a {
        width: 100%; /* Makes each link span the full width of the sidebar */
        padding: 12px 20px; /* Adjust the padding to make the links more clickable */
        text-align: left; /* Align the text to the left */
    }

    /* Adjust the sidebar width in mobile view */
    .sidebar {
        width: 100%; /* Sidebar takes full width on mobile */
        padding-top: 20px; /* Adjust padding as needed */
    }
}

/* Adjust the content to account for the header and footer */
.content {
    margin-left: 250px;  /* Adjust for the sidebar width */
    margin-top: 55px;  /* Ensure content doesn't overlap with the header */
    padding: 20px;
    overflow: hidden;
    height: calc(100vh - 55px);  /* Full screen height minus header */
}

/* Optional: Table Specific Styling */

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

/* Make the table responsive */
.table-container {
    overflow-x: auto; /* Enables horizontal scrolling if the table is too wide */
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS devices */
}

table th, table td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

table th {
    position: sticky;
    top: 0;
    background-color: #00086d;
    color: white;
    z-index: 1;
}

/* Table body rows */
table tr:nth-child(even) {
    background-color: #f9f9f9;
}

table tr:hover {
    background-color: #f1f1f1;
}

/* Footer formating */
#bot {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #000428;
    color: white;
    display: flex;
    justify-content: space-between; /* Distributes content between left and right */
    align-items: center; 
    padding: 10px 20px; 
    font-size: 14px;
}
/* Default state, no margin */
footer {
    margin-top: -20px;
}

/* When the viewport is smaller than 600px or any breakpoint you choose */
@media (max-height: 600px) {
    footer {
        margin-top: 20px; /* Adjust this value as necessary */
    }
}
#footerleft {
    text-align: left; /* Aligns left content to the left */
}

#footerright {
    text-align: right; /* Aligns right content to the right */
}
/* End of Footer formating */
.dash{
	float: right;
	margin-top: 0px;
}
.jumbotron{
	padding: 20px;
}
.label {
    float: left;
}
.card-header{
	text-align: center;
}
.card-title{
	text-align: center;  
}
.card-title a {
  color: #000d80;
  text-decoration: none; /* Optionally, if you want to remove the underline */
}

.card-title a:hover {
  color: #27235c; /* Optional: You can also add a hover effect */
  font-weight: 500;
}
.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}
.icone{
	font-size: 60px;
	color:#f4958;
}
.badge .badge-info{
	padding: 3px;
}

#sub_dt{
	float: right;
	margin-right: 0px;
	font-weight: 700;	
}
.btn-group{
	position: absolute;
}
.dropdown-menu{
	text-align: center;
}
.list{
	list-style-type:none;
	font-weight: 500;
}
table { 
  width: 100%; 
}


/* Drop down menu style to convert bottom */
    .navbar-expand-md .navbar-nav .dropdown-menu {
        position: absolute;
        margin-top: 5px;
    }

.dropdown-menu {
    right: 0;
    left: auto;
    background-color: #ffffff82;
    background-clip: padding-box;
}

.totalhrs{
	color: #fff;
}
.totalhrs:hover{
	color: #186a3b;
}
.fwidth{
	max-width: 100%;
	bottom: 0;
}
#LiveClockIE{
	width: auto !important;
}
.cyber a{
	color: #ff0000 !important;
}
.cyberimg{
	margin-bottom: 30px;
	align-items: center;
}
.sdvcolor{
	color: #001777;
	font-weight: 600;
}
.table-info, .table-info > th, 
.table-info > td {
    vertical-align: middle;
}
.safecyber{
    text-align: justify;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 0px;
}
#backbutton{
    float: right;
    padding-bottom: 70px;
    padding-top: 10px;
}

        /*       ScrollBar 1        */
        
        html::-webkit-scrollbar {
            width: 12px;
        }
        
       html::-webkit-scrollbar-track {

            background-color: #e7e7e7;
            border: 1px solid #001777;
        }
        
        html::-webkit-scrollbar-thumb {

            background-color: #001777;
        }
        
/* Default state for all input elements (rounded corners) */
input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="time"], Select, textarea {
    border-radius: 55px; /* Rounded corners by default */
    border: 1px solid #ccc; /* Default border color */
    transition: all 0.3s linear; /* Fast transition (0.3s) */
}

/* Focus state - when input elements are focused (highlighted and border-radius changes) */
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="time"]:focus, select:focus, textarea:focus {
    border-radius: 5px; /* Change to rectangular on focus */
    border-color: #007bff; /* Change border color when focused (blue highlight) */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.6); /* Light blue shadow with lower opacity */
    outline: none; /* Remove the default outline (optional) */
}

/* Hover state - when input elements are hovered (same as focus) */
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="date"]:hover, input[type="time"]:hover, select:hover, textarea:hover {
    border-radius: 5px; /* Make them rectangular on hover */
    border-color: #007bff; /* Highlight the border color on hover */
    outline: none; /* Remove outline on hover (optional) */
}

/* Custom select styling */
select {
    border-radius: 55px; /* Ensure rounded corners for select */
    padding: 10px;
    border: 1px solid #ccc;
    transition: all 0.3s linear; /* Fast transition (0.3s) */
}

/* Styling for the select dropdown */
select:focus {
    border-radius: 5px; /* Make select rectangular on focus */
    border-color: #007bff; /* Highlight the border color on focus */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.6); /* Light blue shadow with lower opacity */
    outline: none; /* Remove the outline when focused */
}

select:hover {
    border-radius: 5px; /* Make select rectangular on hover */
    border-color: #007bff; /* Highlight the border color on hover */
    outline: none; /* Remove outline on hover */
}

/* Remove dropdown icon for Internet Explorer */
select::-ms-expand { 
    display: none; 
}
/* Default state for buttons - rounded corners */
button, .btn {
    border-radius: 40px; /* Rounded corners by default */
    padding: 10px 20px;
    border: 1px solid #ccc; /* Default border color */
    transition: all 0.3s linear; /* Fast transition for all changes (0.3s) */
}

/* Hover state for buttons - rectangular corners */
button:hover, .btn:hover {
    border-radius: 5px; /* Change to rectangular on hover */
}

/* Pointer customized */

/* Floating gear cursor */
#gear-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;   /* adjust size if needed */
  height: 30px;
  pointer-events: none; /* don't block clicks */
  z-index: 9999;
  transform: translate(35%, 35%);
}

#gear-cursor img {
  width: 100%;
  height: 100%;
  animation: spin 2s linear infinite; /* spinning gear */
  transition: transform 0.2s ease, filter 0.2s ease; /* smooth hover effect */
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hover state when we add "hovering" class */
#gear-cursor.hovering img {
  transform: scale(1.6); /* make bigger */
  filter: drop-shadow(0 0 4px #000070); /* brand glow color */
}