body {
	position: relative;
	}

header {
	background: #FFFFFF;
	padding: 10px 0;
	max-width: 1220px;
	}
	
header {
	width: 98%;
	height: 60px;
	margin: 0 auto;
	margin-top: 1%;
	}

footer {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  background-color: #F7F7F7;
  border-radius: 15px 15px 0 0;
  font-size: 0.9em;
  margin: 0 auto;
  clear: both;
	}
	
.outer-wrap {
  min-height: 100%;
  display: flex;

	}	
	
.wrap {
	width: 98%;
	max-width: 1220px;
	margin: 0 auto;
	}

.wrapnav {
	display: flex;
	justify-content: space-between;
	}
	
.topnav_wrap {
	display: none;
	}	
	
.topnav-left {
    display: flex;
    justify-content: flex-end;
	flex: 1;
	margin: 0 10px;
	padding: 5px 0;
	padding-right: 30px;
	}
	
.topnav-right {
    display: flex;
    justify-content: space-between;
	width: 310px;
	margin: 0;
	padding: 5px 0;
	}
	
.topnav-right form {
	margin: 0;
	}

.topnav-buttonwrap {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
	margin: 0;
	border: 0;
	}

.topnav-button-flex {
	flex: 1;
	margin: 0 1%;
	position: relative;
	}
	
.notification-count {
    position: absolute;
    bottom: -10px; /* Adjust as necessary to position below the icon */
    left: 50%;
    transform: translateX(-50%); /* Centers the element horizontally */
    background-color: red;
    color: white;
    border-radius: 50%; /* Makes it circular */
    padding: 2px 6px; /* Adjust padding to control size */
    font-size: 0.8em; /* Adjust font size as needed */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Optional: Adds a subtle shadow */
	z-index: 2;
	}	
	
.topnav_logo {
	max-height: 45px;

	}

.topnav_logo img {
	height: 45px;
	width: auto;
	}

.logo {
	}

.logo img {
	width: 120px;
	height: auto;
	}
	
.logo-hover {
  width: 200px;
  height: 75px;
  overflow: hidden;
  position: relative;
}

.logo-hover img {
  display: block;
}

.logo-hover:hover img {
  transform: translateY(-76px); /* Show the bottom half */
}

	
.topwrap {
	width: 100%;
	display: flex;
	}
	
nav {
	margin: 0;
	padding: 0;
}
	
/*Topnav single row*/
@media (min-width: 1075px) and (max-width: 1300px) {
	.topnav_wrap {
		display: block;
		background-color: #449FE4;
	}
}	

/* Topnav 2 row - with logo on top and menu below with icons (and no text) for messages/settings/logout */
@media (min-width: 975px) and (max-width: 1075px) {
	.topnav_wrap {
		display: block;
		background-color: green;
	}	
}

/* Topnav 2 row - with logo on top and menu below */
@media (min-width: 875px) and (max-width: 975px) {
	.topnav_wrap {
		display: block;
		background-color: yellow;
	}	
}

/* Topnav 3 row - with logo on top and menu row in middle and search on bottom*/
@media (min-width: 775px) and (max-width: 875px) {
	.topnav_wrap {
		display: block;
		background-color: orange;
	}	
}

/* SMALLEST DISPLAY */
/*Topnav with logo and hidden hamburger menu*/
@media (max-width: 775px) {	

	.topnav_wrap {
		display: block;
		background-color: #8890C0;
	}
	.topnav_logo {
		max-height: 95px;
		height: auto;
		}
	.topnav_logo img {
		height: auto;
		width: auto;
		max-height: 95px;
		}
	.topnav-right {
		width: 100%;
		padding: 0;
		margin: 0;
		}
}
	
@media (max-width: 1075px) {
	.wrap {
		width: 100%;
	}
	.wrapnav {
		flex-direction: column;
	}	
	header {
		margin: 0;
		text-align: center;
		height: 100%;
		width: 100%;
	}
	footer {
		margin: 0;
	}
}

	

	
@media (min-width: 776px) and (max-width: 1075px) {
	.topwrap {
		width: 100%;
		display: flex;
	} 
	.logo {
        width: 100%;
		padding-left: 25%;
		padding-right: 25%;
    }
    .logo img {
		width: 100%;
		height: auto;
    }
}


	




@media (min-width: 775px) and (max-width: 1300px) {
	nav {
		margin-right: 30px;
	}
}

	

	
.tabwrap, .tabwrap_always {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0 15px;
	margin: 0;
	border: 0;
	gap: 5px;
	}
	
.tab, .tab-disabled {
	flex: 1;
    justify-content: center;
    align-items: center;
	padding: 5px 0;
	border-radius: 10px 10px 0 0;
	border: 2px solid #E0E0E0;
	}
	
.tab {
	background-color: #EDEDED;
	}
	
.tab-disabled {
	background-color: #E0E0E0;
	}
	
.tab a, .tab-active, .tab-disabled {
	display: flex;
	justify-content: center;
    align-items: center;
    height: 100%;
    text-decoration: none;
    color: #555;
	font-size: 0.9em;
	}
	
.tab:hover {
	background-color: #F1FEE6;
	}
	
.tab-active, .tab-active:hover {
	background-color: #F7F7F7;
	border-bottom: 2px solid #F7F7F7;
	}
	
.tab-disabled, .tab-disabled: hover {
	background-color: #E0E0E0;
	border-bottom: 2px solid #F7F7F7;	
	cursor: none;
}
	
.tab img, .tab-disabled img {
	margin: 0 4px;
	width: 24px;
	max-width: 24px;	
	}

	.tab span, .tab-disabled span {
		display: flex;
	}	
	
@media (min-width: 1300px) {
	.tabwrap {
		display: none;
	}
}	
	
@media (max-width: 775px) {
	.tab span, .tab-disabled span {
		display: none;
	}
}	
	
.topnav-button-flex span {
	display: none;
	}

.topnav-button-flex a {
    display: flex;
	justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #FFF; /*Change to #555 for old topnav*/
	font-size: 1em;
	font-weight: bold;
	}
	
.topnav-button-flex a:hover, .topnav-buttonwrap a:hover {
	text-decoration: none;
	}	
	
.searchwrap {
	width: 170px;
	margin: 0;
	margin-top: -6px;
}

@media (max-width: 1160px) {
	.topnav_searchwrap {
		
	display: none;
	}
}

.search-container {
    position: relative;
    width: 166px;
}

.search-input {
    padding-right: 30px;
    padding-left: 10px;
    width: 100%;
    height: 35px;
    border: 2px solid grey;
    font-size: 16px;
	border-radius: 6px;
}

.sidenav_search {
	display: none;
}

@media (min-width: 1160px) {
	.sidenav_search {
		display: block;
		padding: 0 0 5px 0;
	}
	.search-container {
		width: 100%;
	}
}

.fa-search {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 16px;
	color: #449FE4;
}	

/* Show text beside topnav icon button */
@media (max-width: 975px) {
	.topnav-button-flex span {
		display: flex;
	}
}
	
@media (max-width: 775px) {
	.topnav-buttonwrap {
		width: 100%;
		flex-wrap: wrap;
		flex-direction: column;
		margin: 20px 0 0 0;
	}
	.topnav-button-flex {
		width: 100%;
		margin: 2px 0;
		justify-content: center;
		background-color: #7E88BA;
	}
	
	.topnav-button-flex:hover {
		background-color: #949DC8;
	}

	.topnav-button-flex a {
		padding: 10px 0;
		font-size: 1.2em;
	}
	.searchwrap {
		display: border-box;
		width: 100%;
		padding: 0 10px;
		margin: 0;
	}
	.search-container {
        position: relative;
		width: 100%;		
	}
    .search-input {
        width: 100%;
        height: 55px;
        border: 2px solid grey;
        font-size: 16px;
		border-radius: 10px;
    }
	.topnav-left {
		display: flex;
		justify-content: center;
		flex: 1;
		margin: 0 10px;
		padding: 5px 0;
		width: 100%;
		}
}	
	
@media (max-width: 875px) {
	.topwrap {
		width: 100%;
		flex-wrap: wrap;
		flex-direction: column;
		margin: 0;
	}
	.topnav-left {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.topnav-right {
		width: 100%;
	}	
}

@media (min-width: 776px) and (max-width: 975px) {
	.topnav_right {
		width: 100%;
		text-align: center;	
		background-color: orange;
	}
	.searchwrap {
		width: 100%;
	}
	.search-container {
        position: relative;
		width: 100%;	
	}
    .search-input {
        padding: 0;
        width: 100%;
        height: 35px;
        border: 2px solid grey;
        font-size: 16px;
		border-radius: 10px;
    }
    .fa-search {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        font-size: 16px;
    }
}

nav ul {
	display: flex;
	list-style: none;
	padding: 0;
	justify-content: center;
	}

nav li {
	margin: 12px 0;
	padding: 0 12px;
	}
	
nav li {
	font-family: arial, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #1EC28B;
	}
	
nav a {
	color: #1EC28B;
	text-decoration: none;
	}

nav a:hover {

	}
	
.toggle-button {
	position: relative;
	top: .75rem;
	right: 1rem;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	height: 17px;
	}	
	
.toggle-button .bar {
	height: 0.5rem;
	width: 100%;
	background-color: #FFF;
	border-radius: 10px;
	}

@media (max-width: 775px) {
	nav ul {
		flex-direction: column;
	}
	nav li {
		margin: .4em 0;
		font-size: 2em;
		justify-content: center;
	}
	nav li #myBurger {
		display: none;
	}
	.toggle-button {
		position: absolute;
		top: 0;
		right: 0;
		padding: 1rem;
		padding-top: 1.5rem;
		width: 16%;
		height: 5rem;
		display: flex;
	}
	.toggle-button .bar {
		height: 10px;
		width: 100%;
	}
}

/* NAV ORDER START */	
/* Switching order of Log Out and Search bar in the navigation menu based on screen size */

.order-1 {
	order: 1;
	}
	
.order-2 {
	order: 2;
	}
	
@media (max-width: 975px) {
	.order-1 {
		order: 2;
		}
		
	.order-2 {
		order: 1;
		}
}

/* NAV ORDER END */	

/* Horizontal Timeline Start */

.h_timeline_wrap {
  width: 100%;
  margin: auto;
}

.h_timeline{
  position: relative;
}

.h_timeline li{
  list-style: none;
  float: left;
  width: 14%;
  position: relative;
  text-align: center;
  font-size: 0.9em;
  font-family: arial, helvetica;
  color: #666;
}

.h_timeline ul:nth-child(1){
  color: #4caf50;
}

.h_timeline li:before{
  content: "✓";
  width: 20px;
  height: 20px;
  border: 3px solid #4caf50;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 20px;
  margin: 0 auto 10px auto;
  background-color: #FFF;
  color: #4caf50;
  transition: all ease-in-out .3s;
}

.h_timeline li:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #4caf50;
  top: 11px;
  left: -50%;
  z-index: 0; /* Not showing for some reason */
  transition: all ease-in-out .3s;
}

.h_timeline li:first-child:after{
  content: none;
}
.h_timeline li.active-tl{
  color: #555555;
}
.h_timeline li.active-tl:before{
  background: #4caf50;
  color: #F1F1F1;
}

.h_timeline li.active-tl + .h_timeline li:after{
  background: #4caf50;
}

/* Horizontal Timeline End */

/* Zig Zag Start */

@media print {
  body * {
    visibility: hidden;
  }
  #printableDiv, #printableDiv * {
    visibility: visible;
  }
  #printableDiv {
    position: absolute;
    left: 0;
    top: 0;
  }
}

.zigzag {
    width: 100%;
    height: 20px;
	border-top: 1px solid #8890C0;
	margin-bottom: 20px;
    background-color: #8890C0; /* Your desired background color */
    position: relative;
        clip-path: polygon(
                0% 100%, 
                2.5% 75%,  /* More zigzags with smaller intervals */
                5% 100%, 
                7.5% 75%, 
                10% 100%, 
                12.5% 75%, 
                15% 100%, 
                17.5% 75%, 
                20% 100%, 
                22.5% 75%, 
                25% 100%, 
                27.5% 75%, 
                30% 100%, 
                32.5% 75%, 
                35% 100%, 
                37.5% 75%, 
                40% 100%, 
                42.5% 75%, 
                45% 100%, 
                47.5% 75%, 
                50% 100%, 
                52.5% 75%, 
                55% 100%, 
                57.5% 75%, 
                60% 100%, 
                62.5% 75%, 
                65% 100%, 
                67.5% 75%, 
                70% 100%, 
                72.5% 75%, 
                75% 100%, 
                77.5% 75%, 
                80% 100%, 
                82.5% 75%, 
                85% 100%, 
                87.5% 75%, 
                90% 100%, 
                92.5% 75%, 
                95% 100%, 
                97.5% 75%, 
                100% 100%, 
                100% 0%, 
                0% 0%
        );
    }

/* Hide zigzag on larger screens*/
    @media (min-width: 1076px) { 
        .zigzag {
            display: none;
        }
    }
	
/* Zig Zag End */

/* Construction Bar Start */

.under_construction {
	background: repeating-linear-gradient(
				45deg,
				#FAD71B,
				#FAD71B 10px,
				#393939 10px,
				#393939 20px
				);
	width: 100%;
	padding: 0;
	border-radius: 10px;
	border: 3px solid #FFF;
	}
	
.under_construction p {
	font-weight: bold;
	text-shadow: 1px 1px 2px black;
	color: #FFF;	
	}


/* Construction Bar End */