* {	box-sizing: border-box; padding: 0; margin: 0; }
html, body{height: 100%; font-family:Lato;}
element{background-image:none;}
body{background-color:#90C2F0;	margin: 20px auto;	font-size: 16px; display:flex; flex-direction: column;}
h1{color:#ffffff; padding: 20px 0;}
h2{color:#2c679d; padding: 10px 0;}
h3{color:#2c679d; margin:10px 0;}
img{width:100%;height: auto;}
a{color:#2c679d; text-decoration: none; font-weight: bold;}
li{padding-left:5px;}
li span{display: block; margin-left: 20px;}
input{padding:5px; border-radius: 10px; border: none; background-color: #eeeeee; margin:5px; }
.userentry input{border-radius:10px; background-color:#dbedfe; outline: 0 transparent!important;}
.editform input{margin:0;}
input[type=submit]{ padding: 10px 20px 10px 20px;	margin-top:30px!important;	border-radius: 10px;background-color: #aafd94; border:none;	color:#357fc2;	font:1em;	font-weight:bold;	text-align:center;	text-decoration: none; cursor: pointer;}
input[type=submit]:hover{background-color: #357fc2; color:#aafd94;}
input[type=checkbox]{margin-right: 10px;}
input[type=search]{border-radius: 10px;}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}
input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: .3;
  pointer-events: all;
}
a.button{padding: 10px 20px 10px 20px;	margin-top:10px!important;	border-radius: 10px;background-color: #aafd94; border:none;	color:#357fc2;	font:1em;	font-weight:bold;	text-align:center;	text-decoration: none; cursor: pointer;}
.button, button{background-color:#AAFD94; color:#2c679d; font-weight:bold; border-radius:5px; padding:10px;border:none;margin-top:10px!important;}
.button:hover, button:hover{background-color:#2c679d; color:#AAFD94;}
.buttonreverse{background-color:#90C2F0!important; color:#2c679d; font-weight:bold; border-radius:5px!important; padding:10px;border:none;margin-top:10px;}
.buttonreverse:hover{background-color:#90C2F0; color:#AAFD94;border-radius: 5px;cursor:pointer;}
/* Nav layout sections */
#header{display:flex;}
nav{background-color: #90C2F0;}
.logo{font-size:20px; padding: 7.5px 10px 7.5px 0;}
.logo img{max-width: 350px;}
.container {width: 1200px;	max-width: 100%; padding: 0; margin: 0 auto;}
#main-header .container {display: flex;	 align-items: center; justify-content: space-around; flex-wrap: wrap;}

/* full page layout */
.full-table{background-color:#ffffff; border-radius:10px;padding:10px; margin:10px auto;}
/* flex */
.flex-container{display:flex;	justify-content: space-around;	padding: 20px;}
.flex-container-center{display:flex; justify-content: center;	padding: 20px;}
.flex-toolbar{background-color:#ffffff; display:flex;	justify-content: space-between;	align-items: flex-end; padding: 5px;
	border-radius: 5px; width:100%; margin:5px auto;}
.flex-toolbar select{background-color: #eeeeee; border-radius: 10px; width:15em; padding:.25rem;}
.flex-child{background-color:#ffffff;	border-radius: 10px;}
.flex-child-plain{background-color: inherit;}
.content{flex: 1 0 auto; padding: 20px;}
footer{flex-shrink:0; display:flex;	justify-content: space-around; padding:20px 0; margin:0; background-color: #2c679d;}
footer a{color:#ffffff;}
.footer-item{background-color:#2c679d;color:#ffffff;}
.flex-child:first-child{margin-right: 20px;}
.col{background-color: #ffffff; margin-right: 0.5rem; margin-left: 0.5rem; padding:1rem; border-radius: 5px;}
.sidebar{flex:1;}
.main{flex:2;}
#make-group{display:none;}
#make-item{display:none;}
.login_table{background-color:#ffffff; padding: 10px;border-radius:10px; margin:20px 0;}
.form_controls{display:flex; justify-content: space-between;flex-wrap:wrap;margin:20px;}
.form_actions{display:flex; justify-content: center;background-color:#2c679d; border-radius:10px;padding:5px; color:#ffffff; align-items: flex-end;}
.form_item{margin:10px;}
.break {flex-basis: 100%; height: 0;}
.flex-callout{display:flex; flex-wrap: wrap; justify-content: center; flex-grow:1; flex-shrink:1; }
.flex-child-callout{position:relative; padding: 1em; margin: .5em; width: 100%; max-width: 250px; text-align: center; background-color:#ffffff; border-radius: 10px; overflow: hidden;}
.flex-child-callout img{width:150px; height:150px;}

/*Generic classes */
.center{text-align: center;}
.messagebox{padding:10px;	text-align: center; background-color:#eeeeee; border: 1px dotted #2C679D; border-radius: 5px;}
.clearfloat{float:none;}
.errclass{font-style:italic;font-size: .9em;color:#fc7508;}
.indent{margin-left: 50px;}
.nobullets{list-style-type: none; margin-left:50px; padding:5px;}
.label_cell{color:#2c679d; font-weight: bold;}
.left{text-align: left;}

/*grids */
.displaygrid{display: grid; grid-template-columns: 1fr 2fr 2fr 2fr 4fr 2fr 1fr;}
.displaygrid > span{padding: 4px 2px;}
.displaygrid > span:nth-child(14n+1),.displaygrid > span:nth-child(14n+2),.displaygrid > span:nth-child(14n+3),.displaygrid > span:nth-child(14n+4),
.displaygrid > span:nth-child(14n+5),.displaygrid > span:nth-child(14n+6),.displaygrid > span:nth-child(14n+7){background-color: #d2e6f8;}
.displaygrid input{border-radius:0;	background-image:none;	background-color:none!important; background: transparent;	border:0;	outline: none;}
.displaygrid > span:nth-child(-n+7) { background-color: #2C679D;color:#ffffff; margin:5px; border-radius:5px;}

/*tables*/
td{padding:.5rem;}
.listview table{display: table;}
.listview th{background-color:#2c679d; color:#ffffff; padding:5px; border-radius:5px;}
.listview tr:nth-child(even){background-color: #d2e6f8;}
.listview td{padding:10px 5px;}

.long{width:35%;}
.medium{width:15%;}
.short{width:10%;}
.veryshort{width:5%;text-align: center;}
.editform table{width:80%;}
.editform td{padding:10px;}
/*sliders */
.switch {position: relative; display: inline-block; width: 60px; height: 24px;}
.switch input {opacity: 0;width: 0;height: 0;}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;}
.slider:before {position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
input:checked + .slider { background-color: #2C679D;}
input:focus + .slider { box-shadow: 0 0 1px #2C679D;}
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(15px;);}
/* Rounded sliders */
.slider.round {border-radius: 34px;}
.slider.round:before { border-radius: 50%;}
/*menus */
.menu, .submenu{list-style-type: none;}
.item{padding:10px;}
.item.button{padding: 9px 5px;}
.item:not(.button) a:hover, .item a:hover::after{color:#aafd94;}
/*Mobile menu */
.menu{display:flex; flex-wrap:wrap; justify-content: space-between;align-items: center;}
.menu li a{display: block; padding: 15px 5px;;}
.menu li.subitem a{padding: 15px;}
.toggle{order:1; font-size: 20px};
.item.button{order:2;}
.item{order:3; width:100%; text-align: center: display:none;}
.active .item{display: block;}
.button.secondary{border-bottom: 1px #fff solid;}
.submenu{display: none;}
.submenu-active .submenu{display: block;}
.has-submenu i{font-size: 12px;}
.has-submenu >a::after{font-family:"Font Awesome 5 Free"; font-size: 12px; line-height: 16px; content: "\f078"; padding-left: 5px;}
.subitem a{padding:10px 15px;}
.submenu-active{background-color:#71aee8; border-radius: 3px;}

/* Tablet menu */
@media all and (min-width: 700px) {
    .menu {justify-content: center; }
    .logo { flex: 1; }
    .item.button { width: auto; order: 1; display: block; }
    .toggle { flex: 1; text-align: right; order: 2; }
    /* Button up from tablet screen */
    .menu li.button a { padding: 10px 15px; margin: 5px 0;}
    .button a {background: #0080ff; border: 1px royalblue solid;}
    .button.secondary {border: 0;}
    .button.secondary a {background: transparent;border: 1px #0080ff solid; }
    .button a:hover {text-decoration: none;}
    .button:not(.secondary) a:hover {background: royalblue;border-color: darkblue;}
}
/* Desktop menu */
@media all and (min-width: 960px) {
    .menu {align-items: flex-start; flex-wrap: nowrap; background: none;}
    .logo {order: 0;}
    .item { order: 1; position: relative; display: block; width: auto;}
    .button {order: 2;}
    .submenu-active .submenu { display: block;
        position: absolute;
        left: 0;
        top: 68px;
        background: #111;
    }
    .toggle {display: none;}
    .submenu-active {border-radius: 0;}
}

/*Breadcrumbs */
.breadcrumb {list-style: none; overflow: hidden; font: 13px Raleway; padding: 0;
	background-color:#90C2F0; margin-left:30px;}
.breadcrumb li {float: left;}
.breadcrumb li a {
  color: white;
  text-decoration: none;
  padding: 5px 0 5px 35px;
  background: #006BAE;
  background: hsla(203,99%,27%,1);
  position: relative;
  display: block;
  float: left;
}
.smallbread{font:11px!important}
.breadcrumb li a::after {  content: " "; display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid hsla(203,99%,27%,1);
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}
.breadcrumb li a::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
}
.breadcrumb li:first-child a {padding-left: 10px; border-top-left-radius:10px; border-bottom-left-radius: 10px;}
.breadcrumb li:nth-child(2) a       { background:        hsla(203,100%,34%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(203,100%,34%,1); }
.breadcrumb li:nth-child(3) a       { background:        hsla(203,100%,44%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(203,100%,44%,1); }
/*#nav ul{list-style-type: none; margin: 1em 0 .5em;	text-align: center;}
#nav li{display:inline;}
#nav a{	display:inline-block;	text-decoration: none;	color:#2c679d;	font-weight: bold;	font-size:1.1em;	padding: .5em 1.5em;}
#nav a:hover{color:#aafd94;}*/

/*TESTING */
{box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}
#createProject{display:none;}
/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}