html, body {
	font-family: Verdana,sans-serif;
	font-size: 16px;
	line-height: 1.5;
	position: relative;
	overflow-x: hidden;
}
/* html {
    box-sizing:border-box
}
*,*:before,*:after{
    box-sizing:inherit
}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body {
    margin:0
}

/* Resets */
ul {
	padding: 0;
	margin: 0 0 20px 0;
	list-style: none;
	display: inline-block;
}

p {
	padding: 0;
	margin: 0 0 20px 0;
}

a:link, a:visited {
	text-decoration: underline;
	color: #00f;
}

a:hover {
	text-decoration: none;
}

ul li {
	padding: 0;
}

ul li input[type="text"], ul li input[type="password"] {
	height: 25px;
}
.logo {
	font: 4vw Times;
	margin: 0 0 1px 0;
	padding: 0;
	color: #51a;
}

.logo2 {
	font: 2vw Times;
	margin: 0 0 5px 0;
	padding: 0;
	width: 1020px;
	color: #51a;
}

/* Team structure tree begin */
.tree ul {
	display: inline-block;
	list-style: none;
	line-height: 2em;
	margin-left: 30px;
}
.tree summary {
	cursor: pointer;
	margin-left: 30px;
}
.tree ul li {
	position: relative;
}
.tree ul li::before {
	position: absolute;
	left: 5px;
	top: 0px;
	border-left: 1.5px solid navy;
	border-bottom: 1.5px solid navy;
	width: 21px;
	height: 1em;
	content: "";
}
.tree ul li::after {
	position: absolute;
	left: 5px;
	bottom: 0px;
	border-left: 1.5px solid navy;
	width: 21px;
	height: 100%;
	content: "";
}
.tree ul li:last-child::after {
	display: none;
}
.tree summary:hover {
	color: silver;
}
.tree ul summary:hover {
	color: darkorchid;
}
ul.tree > li:before, ul.tree > li:after {
	display: none;
}

/* 
details > summary::marker {
  content: "";
}

summary::-webkit-details-marker {
  display: none;
}
summary::marker {
	display: none;
} *
/* Team structure tree end */
/* Headers */
h1, h2 {
	padding: 0;
	margin: 0 0 20px 0;
	font-weight: normal;	
}
h1 {
	font-size: 3vw;
}

h2 {
	font-size: 2.2vw;
}
h3 {
	font-size: 1.5rem;
}
h4 {
	font-size: 1.25rem;
}
h5 {
	font-size: 1.1rem;
}
h6 {
	font-size: 1rem;
}

nicefont {
	font: Courier New;
	color: rgb(153, 51, 51);
}
nicefont2 {
	font-size: 1.5rem;
	font: Courier New;
	color: indigo;
}

@media only screen and (max-width: 600px) {
	ul {
		margin: 0 0 5px 0;
	}
	h1 {
		font-size: 6vw;
	}
	h2 {
		font-size: 4vw;
	}
	h3 {
		font-size: 3.5vw;
	}
	.logo {
		font: 6vw Times;
	}
	.logo2 {
		font: 2.8vw Times;
	}
	p {
		margin: 0 0 5px 0;
	}
}


/* Containers lightslategray */
body {
	background:lightblue;
	font-family: Arial;
	font-size: 1rem;
}
#container, footer {
	background: #095;
	width: 80%;
	margin: 0 auto;
	padding: 40px;
}

header {
	width: 80%;
	padding: 10px;
	margin: 0 auto 10px auto;
}

#container {
	min-height: 600px;
	border-radius: 10px 10px 0 0;
}

footer {
	height: 20px;
	border-radius: 0 0 10px 10px;
}
input[type="submit"] {
  background-color: navy; 
  color: white; /* White text */
  padding: 12px 20px; /* Some padding */
  border: none; /* No border */
  border-radius: 4px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  font-size: 16px;
}

input[type="submit"]:hover {
  background-color: blue; 
}
.hidden-file-input {
	opacity: 0;
	width: 0.1px;
	height: 0.1px;
	position: absolute;
	overflow: hidden;
	z-index: -1; /* Place it behind other elements */
}
.custom-upload-button {
	display: inline-block;
	padding: 5px 10px;
	background-color: navy;
	color: white;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.custom-upload-button:hover {
	background-color: #0056b3;
}
.signin {
	display: block;
}
@media only screen and (max-width: 600px) {
	body {
		font-size: 3vw;
	}
	#container, footer {
		padding: 18px;
	}
	footer {
		height: 12px;
		font-size: 2vw;
	}
	header {
		padding: 5px;
		margin: 0 25px;
	}
	.signin {
		display: none;
	}
}

.widget {
	margin-bottom: 20px;
}

.widget h2 {
	margin: 0 0 10px 0;
	padding: 0 5px;
	font-weight: normal;
	border-bottom: 1px solid #ddd;
}
.widget .inner {
	margin: 5px 5px;
	font-size: 14px;
}

.widget pgdivide {
	border-top: 1px solid #ddd;
}
.submit-container {
	text-align: center;
	margin-top: 10px;	
}

/* Dropdown Button */
.dropbtn {
	background-color: #3498DB;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;

}

.login-password-input-box {
    background: white;
    max-width: 400px;
	border-radius: 5px;
	padding: 3px 5px;
	align-items: center;
}
.login-password-input-box input {
    padding: 2px 5px;
    border: 0;
    outline: 0;
    font-size: 16px;
}
.login-password-input-box img {
    width: 6%;
	cursor: pointer;
	float: right;
	padding: 8px 5px;
	
}
.option-dropdown {
	-moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
	appearance: none;
	width: 200px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px;
	color: #333;
	background-color: #f9f9f9;
	background-image: url('../images/drop-down-arrow-a.png');
	background-repeat: no-repeat;
	/* background-position: right 10px center; */
	background-position: calc(100% - .3rem) center !important;
	
	/* 
	background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); 
	 */
}

@media only screen and (max-width: 600px) {
	.login-password-input-box input {
		font-size: 14px;
	}
	.login-password-input-box img {
		width: 8%;
    	padding: 8px;
	}
	.option-dropdown {
		font-size: 14px;
	}
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
	background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	margin-top: 50px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}
@media only screen and (max-width: 600px) {
	.dropdown-content {
		min-width: 100px;
		margin-top: 30px;
	}
}
/* Links inside the dropdown */
.dropdown-content a {
	color: black;
	padding: 8px 12px;
	text-decoration: none;
	display: block;
}
.dropdown-content span {
	color: black;
	padding: 8px 12px;
	text-decoration: none;
	display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
.dropdown-content span:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
	display: block;
}
.profileimage {
	width: 45%;
}

.dropdown .profileimage {
	width: 30%;
	cursor: pointer;
}

/* Navigation */
nav {
	float: left;
}

nav ul {
	margin: 0;
	font-size: 1.1rem;
}

nav ul li {
	display: inline;
	margin-right: 10px;
}

nav ul li a {
	text-decoration: none;
}

nav ul li.current {
	font-weight: bold;
}

nav ul li a.last {
	border-right: 0;
}
nav ul li a:active {
    background-color: burlywood;
}
.active-link {
	background-color: burlywood;
}
rtext {
	color: #733;
}
errortext {
	font-size: 1.5rem;
	color: #900;
}
/*
Photo
*/
punchline {
	width: 400px;
	border-left: 1px;
	padding-left: 15px;
	color: #999;
}
photo {
	width: 150px;
	float: right;
	border-left: 1px;
	padding-left: 15px;
}
@media only screen and (max-width: 600px) {
	nav ul li a {
		font-size: 2.5vw;
	}
	errortext {
		font-size: 4vw;
	}
}

/* Aside */
aside {
	float: right;
	padding-left: 15px;
}
aside .signedout {
	border-left: 1px dashed #aaa;
	width: 100%;
}
aside .signedin {
	border-left: 0;
	width: 50%;
	margin-top: 10px;
	float: right;
}
.dropdown img {
	float: right;
}
@media only screen and (max-width: 600px) {
	aside .signedout {
		margin-top: 10%;
		float: left;
		border-left: 0;
		padding: 0;
	}
}
/* Login */
#login li.link {
	margin-top: 0;
}

/* Footer */
footer {
	border-top:1px dashed #ddd;
	color: #ddd;
}

.w3-serif {
	font-family:serif
}
.w3-sans-serif {
	font-family:sans-serif
}
.w3-cursive {
	font-family:cursive
}
.w3-monospace {
	font-family:monospace
}
h1, h2, h3, h4,h5, h6 {
	font-family:"Segoe UI", Arial, sans-serif;
	font-weight:400;margin:10px 0
}
.w3-wide {
	letter-spacing:4px
}
hr {
	border:0;
	border-top:1px solid #eee;
	margin:20px 0
}

/* Misc */
.clear {
	clear:both;
}
.medium-button {
	padding: 5px 20px;
	font-size: 16px;
	border-radius: 5px;
	border: 1px solid black;
	background-color: pink;
}
.large-button {
	white-space: normal; /* Allow text to wrap */
  	word-break: break-word; /* Break long words if necessary */
	padding: 7px;
	font-size: 14px;
	border-radius: 10px;
	width: 200px;
	height: 150px;
	border: 1px solid darkgoldenrod;
	background-color: darkkhaki;
	text-align: left;
	font-family: 'Franklin Gothic Medium';
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
	overflow: hidden;
	background-color: #999;
	color: white;
	cursor: pointer;
	padding: 12px;
	width: 95%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 18px;
	color: #51a;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
	background-color: #777;
}

.collapsible:after {
	content: '\002B'; /* '\02795' Unicode character for "plus" sign (+) */
	font-size: 18px;
	color: #51a;
	float: left;
	margin-left: 5px;
}

.active:after {
	content: "\2212"; /* "\2796" Unicode character for "minus" sign (-) */
}
/* Style the collapsible content. Note: hidden by default */
.content {
	display: none;
	overflow: hidden;
	width: 90%;
	/*background-color: #222;*/
}
/* styling for pagination begin*/
.pagination a {
	color: #500;
	float: left;
	padding: 8px 16px;
	text-decoration: none;
}

.pagination a.active {
	background-color: #4c6faf;
	color: white;
}

.pagination a:hover:not(.active) {background-color: #1af;}

@media only screen and (max-width: 600px) {
	.pagination a {
		font-size: 3vw;
		padding: 3px 16px
	}
}
/* styling for pagination end*/

/* Style the tab */
.tab {
	/*overflow: hidden;
	border: 1px solid #ccc;*/
	background-color: pink;
}

/* Style the buttons inside the tab */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: auto;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #bbb;
}

/* Create an active/current tablink class */
.tab button.active {
	background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}
.expand-content {
	max-height: 0; /* Initially hide the content by setting max-height to 0 */
	overflow: hidden; /* Hide overflow content */
	transition: max-height 0.3s ease-in-out; /* Smooth transition for expansion */
}

.expand-content.active {
	max-height: 200px; /* Adjust as needed to reveal all content */
}
.card-scroll::-webkit-scrollbar {
	width: .4vw;
}
.card-scroll::-webkit-scrollbar-track {
	background: gray;
	border-radius: 100vw;
	margin-block: .1vw;
}
.card-scroll::-webkit-scrollbar-thumb {
	background: #222;
	border-radius: 100vw;
}
.card-scroll::-webkit-scrollbar-thumb:hover {
	background: navy;
}
@media only screen and (max-width: 600px) {
	.card-scroll::-webkit-scrollbar {
		width: .7vw;
	}
}
/* style="display:flex; flex-direction: row; justify-content: center; align-items: center" */
.card-container {
	display: flex;
	flex-wrap: wrap; /* This is the key property */
	gap: 10px; /* Adds space between buttons */
	justify-content: left; /* Optional: centers buttons within the row */
	margin-left: 20px;
}
.card {
	width: 100px;
	height: 80px;
	margin: 5px 0 0 0x;
	position: relative;
	/* display: flex;
	flex-direction: column;*/
	justify-content: center;
	background-color: lightblue;
	align-items: center;
	border: 1px solid #ccc;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	/* transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; */
	transition: all 0.4s ease;
	cursor: pointer;
	overflow: hidden;  /*Hide overflow content initially */
}
.card:hover {
	background-color: lavender;
}
.card.expanded {
	transform: scale(1.6); /* Enlarge the card */
	box-shadow: 0 15px 15px rgba(0, 0, 0, 0.5);
	background-color: honeydew;
	position: relative;
	overflow: auto;
	z-index: 1; /* Bring expanded card to front */
}
.card-expanded-text {
	font-family: "Georgia", serif;
	font-size: 14px;
	/* line-height: 1.6; */
	color: #333; /* Example: text color */
}
.card-content {
	font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 9px; /* or 1em, or 1rem */
	overflow: hidden;
	text-align: start;
	padding-left: 2px;
}
.w3-container, .w3-panel {
	padding:0.01em 16px
}
.w3-panel {
	margin-top:16px;
	margin-bottom:16px
}
.w3-padding-16 {
	padding-top:16px !important;
	padding-bottom:16px !important
}
.w3-padding-24 {
	padding-top:24px !important;
	padding-bottom:24px !important
}
.w3-padding-32 {
	padding-top:32px !important;
	padding-bottom:32px !important
}
.w3-padding-48 {
	padding-top:48px !important;
	padding-bottom:48px !important
}
.w3-padding-64 {
	padding-top:64px !important;
	padding-bottom:64px !important
}
.w3-center {
	text-align:center !important
}
.w3-center .w3-bar {
	display:inline-block;
	width:auto
}
.w3-centered tr th, .w3-centered tr td {
	text-align:center
}
.w3-theme-l5 {
	color:#000 !important; 
	/* background-color:#f0f0f0 !important */
	background-color:#095 !important
}
.w3-padding-large {
	padding:12px 24px !important
}
.w3-xlarge {
	font-size:24px !important
}
.w3-border-sand,.w3-hover-border-sand:hover {
	border-color:#fdf5e6 !important
}
.w3-bottombar{
	border-bottom:6px solid #ccc !important
}
.w3-text-deep-purple, .w3-hover-text-deep-purple:hover {
	color:#673ab7 !important
}
.w3-display-middle {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%)
}
.w3-jumbo {
	font-size:64px !important
}
.w3-row-padding, .w3-row-padding > .w3-half, .w3-row-padding > .w3-third, .w3-row-padding > .w3-twothird,
.w3-row-padding > .w3-threequarter, .w3-row-padding > .w3-quarter, .w3-row-padding > .w3-col {
	padding:0 8px
}
.w3-container:after, .w3-container:before, .w3-panel:after, .w3-panel:before, .w3-row:after, .w3-row:before,
.w3-row-padding:after, .w3-row-padding:before, .w3-cell-row:before, .w3-cell-row:after, .w3-clear:after,
.w3-clear:before, .w3-bar:before, .w3-bar:after {
	content:"";
	display:table;
	clear:both
}
.w3-circle {
	border-radius:50%
}
.w3-opacity, .w3-hover-opacity:hover {
	opacity:0.60
}
.w3-opacity-off, .w3-hover-opacity-off:hover {
	opacity:1
}
.w3-opacity-max {
	opacity:0.25
}
.w3-opacity-min {
	opacity:0.75
}
.w3-display-container {
	position:relative
}
.w3-display-container:hover .w3-display-hover {
	display:block
}
.w3-display-container:hover span.w3-display-hover {
	display:inline-block
}
.w3-display-hover {
	display:none
}
.w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter {
	float:left;
	width:100%
}
.w3-col.s1 {
	width:8.33333%
}
.w3-col.s2 {
	width:16.66666%
}
.w3-col.s3 {
	width:24.99999%
}
.w3-col.s4 {
	width:33.33333%
}
.w3-col.s5 {
	width:41.66666%
}
.w3-col.s6 {
	width:49.99999%
}
.w3-col.s7 {
	width:58.33333%
}
.w3-col.s8 {
	width:66.66666%
}
.w3-col.s9 { 
	width:74.99999%
}
.w3-col.s10 {
	width:83.33333%
}
.w3-col.s11 {
	width:91.66666%
}
.w3-col.s12 {
	width:99.99999%
}

@media (min-width:601px) {
    .w3-col.m1 {
        width:8.33333%
    }
    .w3-col.m2 {
        width:16.66666%
    }
    .w3-col.m3, .w3-quarter {
        width:24.99999%
    }
    .w3-col.m4, .w3-third {
        width:33.33333%
    }
    .w3-col.m5 {
        width:41.66666%
    }
    .w3-col.m6, .w3-half {
        width:49.99999%
    }
    .w3-col.m7 {
        width:58.33333%
    }
    .w3-col.m8, .w3-twothird {
        width:66.66666%
    }
    .w3-col.m9, .w3-threequarter {
        width:74.99999%
    }
    .w3-col.m10 {
        width:83.33333%
    }
    .w3-col.m11 {
        width:91.66666%
    }
    .w3-col.m12 {
        width:99.99999%
    }
}
/* media queries for navigation bar*/
@media only screen and (max-width: 600px) {
	nav ul li {
		font-size: 10px;
	}
}

.w3-animate-opacity {
	animation:opac 0.8s
}@keyframes opac {
	from{opacity:0} to{opacity:1}
}
.w3-animate-top {
	position:relative;
	animation:animatetop 0.4s
}@keyframes animatetop {
	from {top:-300px;opacity:0} to {top:0;opacity:1}
}
.w3-text-white, .w3-hover-text-white:hover {
	color:#fff !important
}
.w3-border-grey, .w3-hover-border-grey:hover, .w3-border-gray, .w3-hover-border-gray:hover {
	border-color:#9e9e9e !important
}
.w3-display-topleft {
	position:absolute;
	left:0;
	top:0
}