/* Style Sheet is based on the open source Materialize Front End Frame Work as provided in https://materializecss.com/
Use and modification of Materialize as is permissible under MIT license.  Please see https://github.com/Dogfalo/materialize/blob/master/LICENSE
 */

:root{
  --radius-general:25px;
  --pos-1: 8.3333333333%;
  --pos-2: 16.6666666667%;
  --pos-3: 25%;
  --pos-4: 33.3333333333%;
  --pos-5: 41.6666666667%;
  --pos-6: 50%;
  --pos-7: 58.3333333333%;
  --pos-8: 66.6666666667%;
  --pos-9: 75%;
  --pos-10: 83.3333333333%;
  --pos-11: 91.6666666667%;
  --pos-12: 100%;  
  --lt-blue-1:#5885AF;
  --dk-blue-1: #395065;
  --dk-blue-2: #232f3b;
  --white-1: #F5F5F5;
  --gray-1: #282828;
  --lt-gray-1: #a7a7a7;

}
body {
	font-family: 'Roboto';
	background-color:var(--white-1); 
	margin:0;}

.hidden{
  display:none;
}



h1, h2, h3, h4, h5, h6 {
  margin-top:-0.1em;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
  padding:8px 0;
  margin-bottom:16px;
  color:var(--white-1);
}


.main,#main{
	z-index: 0; 
}
.main > div:first-child,#main > div:first-child{
	margin-top:12vh;
	z-index: 0; 
}

.grid-container:not([id="header"]) {
  margin: 64px auto;
  width: 90%;
  height: auto;
  
}


.row {
  margin-left: auto;
  margin-right: auto;
 overflow:hidden;

}


.grid-container:not([id="header"]) .row::after{
  content:"";
  display:table;
  clear: both;
}

.row [class*="span-"] {
	float:left;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 8px 8px;
	min-height: 1px;
	margin-left: auto;
	left: auto;
	right: auto;
	border: 0 solid transparent;


}

[class*="span-"] .row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
 
}


.row [class*="span-"][class*="push-"], .row [class*="span-"][class*="pull-"] {
  position: relative;
 
}

.row .span-s1 { width: var(--pos-1);}
.row .span-s2 { width: var(--pos-2);}
.row .span-s3 { width: var(--pos-3);}
.row .span-s4 { width: var(--pos-4);}
.row .span-s5 { width: var(--pos-5);}
.row .span-s6 { width: var(--pos-6);}
.row .span-s7 { width: var(--pos-7);}
.row .span-s8 { width: var(--pos-8);}
.row .span-s9 { width: var(--pos-9);}
.row .span-s10 { width: var(--pos-10);}
.row .span-s11 { width: var(--pos-11);}
.row .span-s12 { width: var(--pos-12);}




.row [class*="span-s"].offset-s1 {
  margin-left: var(--pos-1);
}

.row [class*="span-s"].pull-s1 {
  right: var(--pos-1);
}

.row [class*="span-s"].push-s1 {
  left: var(--pos-1);
}

.row [class*="span-s"].offset-s2 {
  margin-left: var(--pos-2);
}

.row [class*="span-s"].pull-s2 {
  right: var(--pos-2);
}

.row [class*="span-s"].push-s2 {
  left: var(--pos-2);
}

.row [class*="span-s"].offset-s3 {
  margin-left: var(--pos-3);
}

.row [class*="span-s"].pull-s3 {
  right: var(--pos-3);
}

.row [class*="span-s"].push-s3 {
  left: var(--pos-3);
}

.row [class*="span-s"].offset-s4 {
  margin-left: var(--pos-4);
}

.row [class*="span-s"].pull-s4 {
  right: var(--pos-4);
}

.row [class*="span-s"].push-s4 {
  left: var(--pos-4);
}

.row [class*="span-s"].offset-s5 {
  margin-left: var(--pos-5);
}

.row [class*="span-s"].pull-s5 {
  right: var(--pos-5);
}

.row [class*="span-s"].push-s5 {
  left: var(--pos-5);
}

.row [class*="span-s"].offset-s6 {
  margin-left: var(--pos-6);
}

.row [class*="span-s"].pull-s6 {
  right: var(--pos-6);
}

.row [class*="span-s"].push-s6 {
  left: var(--pos-6);
}

.row [class*="span-s"].offset-s7 {
  margin-left: var(--pos-7);
}

.row [class*="span-s"].pull-s7 {
  right: var(--pos-7);
}

.row [class*="span-s"].push-s7 {
  left: var(--pos-7);
}

.row [class*="span-s"].offset-s8 {
  margin-left: var(--pos-8);
}

.row [class*="span-s"].pull-s8 {
  right: var(--pos-8);
}

.row [class*="span-s"].push-s8 {
  left: var(--pos-8);
}

.row [class*="span-s"].offset-s9 {
  margin-left: var(--pos-9);
}

.row [class*="span-s"].pull-s9 {
  right: var(--pos-9);
}

.row [class*="span-s"].push-s9 {
  left: var(--pos-9);
}

.row [class*="span-s"].offset-s10 {
  margin-left: var(--pos-10);
}

.row [class*="span-s"].pull-s10 {
  right: var(--pos-10);
}

.row [class*="span-s"].push-s10 {
  left: var(--pos-10);
}

.row [class*="span-s"].offset-s11 {
  margin-left: var(--pos-11);
}

.row [class*="span-s"].pull-s11 {
  right: var(--pos-11);
}

.row [class*="span-s"].push-s11 {
  left: var(--pos-11);
}

.row [class*="span-s"].offset-s12 {
  margin-left: var(--pos-12);
}

.row [class*="span-s"].pull-s12 {
  right: var(--pos-12);
}

.row [class*="span-s"].push-s12 {
  left: var(--pos-12);
}




/* ^^^^^^^^^^^   TEXT and <P>    ^^^^^^^^^^^ */
.content{
	border-radius:25px;
	width:auto;
	padding: 16px;
	overflow:hidden;
}


.card{
	border-radius:0 0 25px 25px;
	width:100%;
	overflow:hidden;
	float: left;
	background-position: 100% 75%;
	flex:1;
}

.card p{
	margin:auto;
	padding: 16px;
}
.pop-forward, .pop-forward input, .pop-forward textarea {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.bg-gray-1{
	background-color:var(--gray-1);
	color: var(--white-1);
}
.bg-dk-blue-1{
	background-color:var(--dk-blue-1);
	color: var(--white-1);
}
.bg-dk-blue-2{
	background-color:var(--dk-blue-2);
	color: var(--white-1);
}

.bg-gray-1-transparent{
	background-color:rgba(15.7,15.7,15.7,0.8);
	color: var(--white-1);
}

.bg-dk-blue-1-transparent{
	background-color:rgba(57,80,101,0.8);
	color: var(--white-1);
}


.bg-dk-blue-2-transparent{
	background-color:rgba(35,47,59,0.8);
	color: var(--white-1);
}

.bg-gray-1-gradient-up{
	background: linear-gradient(to bottom, rgba(255,0,0,0) 150px, #282828 300px);
	color: var(--white-1);
}




.bg-blue-1{
	background-color:var(--dk-blue-1);
}

.bg-lt-blue-1{
	background-color: var(--lt-blue-1);
}

.bg-lt-red-1{
	background-color: #b30000;
}

.bg-lt-red-1 p{
	color:white;
}


.filter-grayscale{filter:grayscale(100%);}
.filter-none{filter:none;}

.text-dkblue{color:var(--dk-blue-1);}
.text-greyblue{color:var(--lt-blue-1);}
.text-grey{color:var(--gray-1);}
.text-lt-grey{color:var(--lt-gray-1);}


.text-fit {overflow:hidden;}
.br-l-white {	border-left: 5px solid white;}
.br-t-white {	border-top: 5px solid white; }
.br-r-white {	border-right: 5px solid white;}
.br-b-white {	border-bottom: 5px solid white;}


p {margin: 0 0 16px 0;}


th{
	text-align:left;
}
td{
	padding-right:50px;
}

a:link{
	color: #73adff;
	font-weight:bold;
	text-decoration: none;
}

a:visited{
	color: #9873ff;
	font-weight:bold;
	text-decoration: none;
}

/* ^^^^^^^^^^^   IMAGES    ^^^^^^^^^^^ */
.bgstrip {
  background-position:center;
  background-repeat:no-repeat;
  padding:64px 0;
}

.bgstrip > .grid-container:not([id="header"]) {
	margin: 0 auto;
  }



img.img-contain{
	object-fit: contain;
}
img.img-cover{
	object-fit: cover;
}
.inline-left{
	margin-right: 32px;
	margin-bottom: 8px;
	float:left;
}
.inline-right{
	margin-left: 32px;
	margin-bottom: 8px;
	float:right;
}

.profile-picture{
	border-radius:100%;
}



/* ^^^^^^^^^^^   LISTS    ^^^^^^^^^^^ */
ul {
  list-style-type: disc;
  list-style-position: outside;
  margin:0;
  padding-inline-start:25px;
  overflow-x:hidden;
}

ul li {
  padding-bottom:12px;
}

ul ul {
  list-style-type: circle;
}

ul.special {
  list-style-type: none;
  list-style-position: inside;
  padding-inline-start:0px;
  border-radius: var(--radius-general);
  padding-inline-start:0px;
}



/* <<<<<<<<<<< Nav Menu >>>>>>>>>>> */
/*replaces the Nav Bar in small screens*/



ul.navmenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  padding-inline-start:0px;
  
}
.navmenu li {
  display: block;
  margin:auto;
   border-bottom-color: 8px solid var(--lt-blue-1);
}
.navmenu li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

.navmenu li a:hover {
  background-color: var(--lt-gray-1);
  border-radius: 15px 15px;
}


/*ul.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  padding-inline-start:0px;
  border-radius: var(--radius-general);
  
}

.navbar li {
  float: left;
}

.navbar li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar li a:hover, .dropdown-content a:hover, .dropdown:hover > a:first-child  {
  background-color: #6192b0;
}
.navbar .activepage {
  background-color: var(--lt-gray-1);
}*/


/* <<<<<<<<<<< Selectable List >>>>>>>>>>> */
li div.selectable-list-header {
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 16px 32px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1vw;
}

li div.selectable-list-header:hover {
  background-color: var(--lt-blue-1);
}

li div.selectable-list-content {
  display: none;
  overflow: hidden;
}


li div.active,li div.active:hover {
  background-color: var(--dk-blue-1);
  color: #fff;
}

/* <<<<<<<<<<< Collapsible List >>>>>>>>>>> */
/* Style the button that is used to open and close the collapsible content */
li div.collapsible-list-header {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  
}


/* Style the collapsible content. Note: hidden by default */
li div.collapsible-list-content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

/* <<<<<<<<<<< Collapsible Else >>>>>>>>>>> */

.collapsible-button {
	cursor: pointer;
	background-color: var(--lt-gray-1);
	color: white;
	padding: 8px;
	width: 25%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
}


.collapsible-content {
	margin-top:8px;
	padding: 0px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}


/* ^^^^^^^^^^^   INPUTS    ^^^^^^^^^^^ */

label{
	margin-bottom: 16px;
}

textarea{
	width: 100%;
	height:15vw;
	border-radius:var(--radius-general);
	padding:16px;
	box-sizing:border-box;
	resize:none;
	font-size: 16px;
}

.input-field {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.input-field input[type="text"]{
  background-color: white;
  border: none;
  border-bottom: 1px solid var(--lt-gray-1);;
  border-radius: 10px;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 16px;
  margin: 0 0 8px 0;
  padding: 0 16px;
  box-sizing: border-box;
  color:black;
}
.button-container{
  text-align: center;
}

[class^="btn"]{
  border-radius: var(--radius-general);
  border: none;
  padding: 12px 16px;
  color: black;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  outline:none;
  border-radius: 8px;
  text-decoration: none;
  box-sizing: border-box;
  width:100%;
  border: none;
  cursor:pointer;
}


.btn-blue:not(visited){
  background-color: var(--dk-blue-1);
  border: 2px solid var(--dk-blue-1);
  color:white;
}

[class^="btn"]:hover {
  background-color: var(--white-1);
  color:black;
  border: 2px solid var(--dk-blue-1);
}

.expanding-search-bar{
  width: 100%;
  box-sizing: border-box;
  border: none;
  font-size: 16px;
  background-color: white;
  outline: none;
  padding: 8px;
  border-radius: var(--radius-general);
}

.expanding-search-container{
  margin:auto;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: var(--radius-general);
  background-color: white; 
}

.x-button{
  display: inline-block;
  margin-left: 15px;
  cursor: pointer;
  font-style:normal;
}


select {
  width: 100%;
  padding: 16px 20px;
  text-align: center;
  border-radius: var(--radius-general);
  background-color: #f1f1f1;
  outline:none;
}

/* ^^^^^^^^^^^   SIDE PANELS    ^^^^^^^^^^^ */




[class*="side-panel-"].forward {
  width: 100%;
}

[class*="side-panel-"].expanded {
  width: 100%;
  height: 100%;
  top: 0; 
}

/* The navigation menu links */
[class^="side-panel-"] a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: var(--lt-gray-1);
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
[class^="side-panel-"] a:hover {
  color: var(--white-1);
}

/* Position and style the close button (top right corner) */
[class*="side-panel-left"] .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


[class*="side-panel-right"] .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-right: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s, margin-right .5s;
}



/* ############## Scale/Responsive   ############## */

@media only screen and (max-width: 768px) { 
	/* duplicated from side-panel-left to prevent weird formatting at larger screens*/
	#navmenu-header{
		display:block;
		 position: fixed;
		width: 100%;
		top:0px;
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
		z-index: 100;
	}
	
	.side-panel-left-navmenu {
		position: fixed; 
	  z-index: 102; 
	  transition: 0.5s; 
	  left: -0.5%;
	  border-radius: 0px;
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	  height: 100%;
	  width: 0; 
	  top: 0; 
	  overflow:scroll;
	  background-color: var(--dk-blue-2); 
	  padding: 0.5% 0.5%  0.5%  0; 
	}
}

@media only screen and (min-width: 768px) {
		
	#navmenu-header, #navmenu-x{
		display:none;
	}
	
	.header{
	  position: relative;
	  height: 10%;
	  padding-bottom:16px;
	  width:100%;
	  z-index: 100;
	}
	.header #header{
	  
	  position: fixed;
	  width: 100%;
	  top:0px;
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	}
	

	.row .span-w1 { width: var(--pos-1);}
	.row .span-w2 { width: var(--pos-2);}
	.row .span-w3 { width: var(--pos-3);}
	.row .span-w4 { width: var(--pos-4);}
	.row .span-w5 { width: var(--pos-5);}
	.row .span-w6 { width: var(--pos-6);}
	.row .span-w7 { width: var(--pos-7);}
	.row .span-w8 { width: var(--pos-8);}
	.row .span-w9 { width: var(--pos-9);}
	.row .span-w10 { width: var(--pos-10);}
	.row .span-w11 { width: var(--pos-11);}
	.row .span-w12 { width: var(--pos-12);}
	
	.row [class*="span-w"].offset-w1 {
	  margin-left: var(--pos-1);
	}

	.row [class*="span-w"].pull-w1 {
	  right: var(--pos-1);
	}

	.row [class*="span-w"].push-w1 {
	  left: var(--pos-1);
	}

	.row [class*="span-w"].offset-w2 {
	  margin-left: var(--pos-2);
	}

	.row [class*="span-w"].pull-w2 {
	  right: var(--pos-2);
	}

	.row [class*="span-w"].push-w2 {
	  left: var(--pos-2);
	}

	.row [class*="span-w"].offset-w3 {
	  margin-left: var(--pos-3);
	}

	.row [class*="span-w"].pull-w3 {
	  right: var(--pos-3);
	}

	.row [class*="span-w"].push-w3 {
	  left: var(--pos-3);
	}

	.row [class*="span-w"].offset-w4 {
	  margin-left: var(--pos-4);
	}

	.row [class*="span-w"].pull-w4 {
	  right: var(--pos-4);
	}

	.row [class*="span-w"].push-w4 {
	  left: var(--pos-4);
	}

	.row [class*="span-w"].offset-w5 {
	  margin-left: var(--pos-5);
	}

	.row [class*="span-w"].pull-w5 {
	  right: var(--pos-5);
	}

	.row [class*="span-w"].push-w5 {
	  left: var(--pos-5);
	}

	.row [class*="span-w"].offset-w6 {
	  margin-left: var(--pos-6);
	}

	.row [class*="span-w"].pull-w6 {
	  right: var(--pos-6);
	}

	.row [class*="span-w"].push-w6 {
	  left: var(--pos-6);
	}

	.row [class*="span-w"].offset-w7 {
	  margin-left: var(--pos-7);
	}

	.row [class*="span-w"].pull-w7 {
	  right: var(--pos-7);
	}

	.row [class*="span-w"].push-w7 {
	  left: var(--pos-7);
	}

	.row [class*="span-w"].offset-w8 {
	  margin-left: var(--pos-8);
	}

	.row [class*="span-w"].pull-w8 {
	  right: var(--pos-8);
	}

	.row [class*="span-w"].push-w8 {
	  left: var(--pos-8);
	}

	.row [class*="span-w"].offset-w9 {
	  margin-left: var(--pos-9);
	}

	.row [class*="span-w"].pull-w9 {
	  right: var(--pos-9);
	}

	.row [class*="span-w"].push-w9 {
	  left: var(--pos-9);
	}

	.row [class*="span-w"].offset-w10 {
	  margin-left: var(--pos-10);
	}

	.row [class*="span-w"].pull-w10 {
	  right: var(--pos-10);
	}

	.row [class*="span-w"].push-w10 {
	  left: var(--pos-10);
	}

	.row [class*="span-w"].offset-w11 {
	  margin-left: var(--pos-11);
	}

	.row [class*="span-w"].pull-w11 {
	  right: var(--pos-11);
	}

	.row [class*="span-w"].push-w11 {
	  left: var(--pos-11);
	}

	.row [class*="span-w"].offset-w12 {
	  margin-left: var(--pos-12);
	}

	.row [class*="span-w"].pull-w12 {
	  right: var(--pos-12);
	}

	.row [class*="span-w"].push-w12 {
	  left: var(--pos-12);
	}

	/* <<<<<<<<<<< Nav Bar >>>>>>>>>>> */

	ul.navbar {
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	  overflow: hidden;
	  padding-inline-start:0px;
	  
	}

	.navbar li {
	  display: inline-block;
	  margin:auto;
	   border-bottom-color: 8px solid var(--lt-blue-1);
	}

	.navbar li a {
	  display: block;
	  color: white;
	  padding: 14px 16px;
	  text-decoration: none;
	}

	.navbar li:not([class^="dropdown"]) a:hover{

	  background-color: var(--lt-gray-1);
	  border-radius: 15px 15px;
	}

	.navbar .dropdown > a:hover {
	  background-color: var(--lt-gray-1);
	  border-radius: 15px 15px 0 0;
	}

	.dropdown-content a:hover {
	  background-color: var(--lt-gray-1);
	  border-radius: 15px;
	}

	.navbar .activepage {
	  font-weight:900;
	  color:white;

	}
	.dropdown-content {
		text-align:left;
	  display: none;
	  position: absolute;
	  background-color: #333;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  border-radius: 0 0 15px 15px;
	}



	.dropdown:hover .dropdown-content {
	  display: block;
	}


  /* ^^^^^^^^^^^   LISTS    ^^^^^^^^^^^ */
  /* <<<<<<<<<<< Selectable List >>>>>>>>>>> */
  
  .item-details, .edit-details {
    border-radius: var(--radius-general) 0px 0px var(--radius-general);
  }

  /* ^^^^^^^^^^^   INPUTS    ^^^^^^^^^^^ */

  
  select {width: 25%;}

}