html {
    }
body{
       /* background-image: linear-gradient(darkgrey, white); */
   		background-color: white;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
		padding: 0px;
		margin: 0px;
   
}

a {
		color: rgba(0,85,255,1.00);
	}
	#menu {
		color: blue;
	}


#logout {
		color:red;
	}
	
	a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

h1{
    font-size: 18px;
}
.badge-0{
	color: grey;
}
.badge-1{
	
}
.badge-2{
	
}
.badge-3{
	
}
/*h2{
     font-size: 14px;
		 background:
        linear-gradient(black, transparent),
        linear-gradient(to top left, black, transparent),
        linear-gradient(to top right, darkgrey, transparent);
    background-blend-mode: screen;
}*/

/* -------- home page banners --------- */
.banner{
   /* background-image:url("media/background/header_cctBoard.jpg"); */
    /*    background-image:url("media/background/header_blue.jpg");*/
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    overflow: hidden;
    width: 100%;
    height: 300px;
    font-family:  Verdana ;
    font-display: block;
    font-size: 20px;
    text-align: center;
    align-content: center;
    margin: 0px;
    padding: 0px;
}
.banner p{
    font-family:  Verdana ;
    font-size: 14px;
    color: white;
}
.banner h1{
    font-family:  Verdana ;
    color: #f1be7f;
}
.banner .check{
    color: black;
    position: relative;
    float: left;
    height: 100%;
    width: 33%;
    padding-top: 100px;
    
}

.banner .record{
    color: black;
    height: 100%;
    width: 33%;
    padding-top: 150px;
    vertical-align: middle;
    position: relative;
    float: left;
    
}
.banner .share{
    color: black;
    height: 100%;
    width: 33%;
    padding-top: 100px;
    position: relative;
    float: left;
    
}
/* ----------------------- HOW TO STYLE ---------------------------------- */
.help{
background-image: linear-gradient(to bottom, royalblue, lightblue);
}

.help .content{
	padding: 20px ;
	margin: 10px ;
	background-color: white ;
	border-radius: 20px;
}
.help .content  i{
	font-weight: 500;
	font-size: 30px;
}
.help .content h1{
	font-size: 24px;
}
.help .content h2{
	font-size: 18px;
}
.help .content img{
	padding: 10px;
	margin: 10px;
}
.help .content ul li{
	margin-bottom: 10px;
}
/* -- HELP FORM -- */
.help .form{
	position: relative ;
	width: 240px;
	padding: 5px ;
	margin: 10px ;
	background-color: dodgerblue ;
	border-radius: 10px;
	
}
.help .form h2{
	font-size: 20px ;
	color: white;
	font-weight: 900;
}

.help table{
	border:none;
	border-width: 0px;
	border-spacing: 0px;
	padding: 0px;
}
.help table th{
	font-size: 14px ;
	font-weight: 900;
}

	.help .form label{
		font-size: 14px;
	}
	 .help .form input{
		height: 40px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		}
		/*task test bar with 5 quick buttons*/
	.help .form select{
		height: 40px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		}
	.help .form textarea{
		height: 80px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		}
		/*Quick selector button on task_test.php*/
	.help .form button{
	 -webkit-appearance:none;
    width:125px;
	background-color: royalblue;
   /*	background-color: #4e4e4e; */ 
    border: none;
	border-radius:6px;
    font-size: 18px;
     color: white;
	font-weight: 500;
	text-align: center;
    text-decoration: none;
    display: inline-block;
	margin: 5px;
}
/* -- END HELP FORM STYLE-- */

/*----------------------start of new menu--------------------------------*/
.topmenu {
		position:fixed;
		top:0px;
		width:100%;
		z-index: 9;
   		margin-bottom: 10px;
		}

.topmenu  ul   {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	text-decoration: none;
	background:
        linear-gradient(black, transparent),
        linear-gradient(to top left, lightgrey, transparent),
        linear-gradient(to top right, darkgrey, transparent);
    background-blend-mode: screen;
	
	/*Gradient
	
	  background-image: -webkit-repeating-linear-gradient(90deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(90deg, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(90deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    
    linear-gradient(270deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);
	background-color: black;
	*/
	
}

.topmenu li {
    padding: 0;
    list-style-type: none;
    float: left;
}

.topmenu li a {
    display: block;
	background-color: transparent;
    color:dodgerblue;;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}
.topmenu li span {  
	display: block;
	background-color: #000000;
    color:#faca24;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	
	}

.topmenu li a:hover:not(.active) {
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
  box-shadow: 

   /*gradient*/
    hsla(210,100%,75%, .8) 0  0px 3px 2px, /* outer SD */
    hsla(210,50%,40%, .25) 0 -5px 6px 4px, /* outer SD */
    hsla(210,80%,95%,   1) 0  5px 6px 4px; /* outer HL */
}

.topmenu td { padding:10px;
	
	}
.topmenu th { padding:10px;
	
	}
.topmenu .title {
		background-color:blue;
		color:white;
		font-size:16px
		}
		
.detail { 
	font-size: 16px;
	font-style:normal;
	font: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-weight:400;
		}

.active {
    background-color: #4CAF50;
}
/*---------------------------------END TOP MENU ---------------------------*/
/*-- STICKY MENU --*/

/* test device sticky to top */
.sticky{
		position: -webkit-sticky;
  		position: sticky;
		z-index: 8;
  		top: 10px;
		margin: 0px;
		padding: 0px;
		width: 100%;
		background-color: dodgerblue;
	/*Gradient*/
/*background:
        linear-gradient(black, transparent),
        linear-gradient(to top left, darkgrey, transparent),
        linear-gradient(to top right, black, transparent);
    background-blend-mode: screen;*/
}
.sticky button{
	color: white;
}

/* Test button menu sticky to bottom */
.stickyBottom{
	position: -webkit-sticky;
	position: sticky;
	bottom: 0px;
	padding: 2px;
	margin: 0px;
	background-color: dodgerblue;
		/*Gradient*/
/*background:
        linear-gradient(black, transparent),
        linear-gradient(to top left, lightgrey, transparent),
        linear-gradient(to top right, black, transparent);
    background-blend-mode: screen;*/
	overflow:hidden;
	z-index: 8;
}
/*-- END STICKY MENU --*/

/* Text auto complete */

/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}
/*END AUTOCOMPLET*/


/*------------------- BOTTOM MENU ------------------------ 	*/
.btmmenu {
		clear: both;
		position:fixed;
		width:100%;
		z-index: 9;
   		bottom: 0px;
		}

.btmmenu  ul   {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	text-decoration: none;
	
	/*Gradient*/
background:
        linear-gradient(black, transparent),
        linear-gradient(to top left, lightgrey, transparent),
        linear-gradient(to top right, black, transparent);
    background-blend-mode: screen;
}

.btmmenu li {
    padding: 0;
    list-style-type: none;
    float: left;
}

.btmmenu li a {
    display: block;
	background-color: transparent;
    color:dodgerblue;;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}
.btmmenu li span {  
	display: block;
	background-color: #000000;
    color:#faca24;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	
	}

.btmmenu li a:hover:not(.active) {
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
  box-shadow: 

   /*gradient*/
    hsla(210,100%,75%, .8) 0  0px 3px 2px, /* outer SD */
    hsla(210,50%,40%, .25) 0 -5px 6px 4px, /* outer SD */
    hsla(210,80%,95%,   1) 0  5px 6px 4px; /* outer HL */
}
/* ------------------ END BOTTOM MENU -------------------- */


/* -- LOGIN SCREEN -- */
.login{
	
}
.login .pageTop{
	font-size: 40px ;
	color: #4e4e4e ;
	margin: 10px;
}
.login h3{
	font-size: 14px;
	color: darkslategray;
}
.login h1{
		font-size: 20px;
	font-weight: 900;
}
.login h2{
		font-size: 20px;
	font-weight: 900;
}
.login p{
		font-size: 12px;
}
.login i{
	font-size: 40px;
}
.loginBox{
	width: 50% ;
	margin: 10px ;
	font-size: 14px;
	color: white ;
	padding: 5px ;
	border-radius: 10px;
	background-color: dodgerblue;
}
	 .loginBox input{
		height: 40px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		}
		/*task test bar with 5 quick buttons*/
	.loginBox select{
		height: 40px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		}
	.loginBox textarea{
		height: 80px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		}


/* -- END LOGIN SCREEN -- */

/* -- DASH STYLE --*/
.dash{
	margin: auto;
}

.dash .column{
	position: relative ;
	float: left;
	max-width: 400px ;
	min-width: 250px ;
	margin: 10px ;
	font-size: 25px;
}

.dash h2{
	background-color: transparent ;
	color: dodgerblue ;
	margin: 10px;
	font-size: 20px;
}
.dash ul{
	margin: auto;
    list-style-type: none;
    padding: 0px;
	overflow: hidden;
}

.dash ul .list{
    list-style-type: none;
    padding: 0px;
	text-decoration: none;
	display: block;
	float: left;
	word-wrap: break-word;
	white-space: normal;
}
/* Style the collapsible content. Note: hidden by default */
.dash .content {
  padding: 0px;
margin: 0px;
	margin-bottom: 20px;
  display: none;
  overflow: hidden;
	width: 100%;
	background-color: transparent;
}
/* -- DASH FORM -- */
.dash .form{
	position: relative ;
	width: 240px;
	padding: 5px ;
	margin: 10px ;
	background-color: dodgerblue ;
	border-radius: 10px;
	
}
.dash .form h2{
	font-size: 20px ;
	color: white;
	font-weight: 900;
}

.dash table{
	border:none;
	border-width: 0px;
	border-spacing: 0px;
	padding: 0px;
}
.dash table th{
	font-size: 14px ;
	font-weight: 900;
}

	.dash .form label{
		font-size: 14px;
	}
	 .dash .form input{
		height: 40px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		}
		/*task test bar with 5 quick buttons*/
	.dash .form select{
		height: 40px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		-webkit-appearance:none;
		-webkit-search-results-decoration : none;
		-webkit-search-decoration: none ;
		}
	.dash .form textarea{
		height: 80px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		}
		/*Quick selector button on task_test.php*/
	.dash .form .testButton {
	 -webkit-appearance:none;
    width:125px;
	background-color: royalblue;
   /*	background-color: #4e4e4e; */ 
    border: none;
	border-radius:6px;
    font-size: 18px;
     color: white;
	font-weight: 500;
	text-align: center;
    text-decoration: none;
    display: inline-block;
	margin: 5px;
}
	.dash .form button{
	 -webkit-appearance:none;
    width:125px;
	background-color: royalblue;
   /*	background-color: #4e4e4e; */ 
    border: none;
	border-radius:6px;
    font-size: 18px;
     color: white;
	font-weight: 500;
	text-align: center;
    text-decoration: none;
    display: inline-block;
	margin: 5px;
}
/* -- END DASH FORM STYLE-- */
/*------------------ switch blue ------------------*/

.dash .form .switchBlue {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.dash .form .switchBlue input {display:none;}

.dash .form .sliderBlue {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: grey;
  -webkit-transition: .4s;
  transition: .4s;
}

.dash .form .sliderBlue:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.dash .form input:checked + .sliderBlue {
  background-color: royalblue;
}

.dash .form input:focus + .sliderBlue {
  box-shadow: 0 0 1px royalblue;
}

.dash .form input:checked + .sliderBlue:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.dash .form .sliderBlue.round {
  border-radius: 34px;
}

.dash .form .sliderBlue.round:before {
  border-radius: 50%;
}

/*------------------END  switch blue------------------*/




/* -- END DASH STYLE --*/

/*-------------------------TEST FORM -----------------------------*/
.test{
      postion:relative;
      font-size: 11px;
      }
.test ul li{
    list-style-type: none;
    padding: 0px;
}

.test a{
    text-decoration: none;
}


			
.test h1{
    font-size: 20px;
	width:100%;
	background-color: #4e4e4e;
    /*	background-color: dodgerblue;
*/
	color: white;
	padding: 5px;
	margin-bottom: 5px;
}

.test h2{
	font-size: 22px;
	color: #424949;
	margin: 5px;
	width: 100%;
/*    font-size: 11px;
	width:90%;
	background-color: #373737;
	color: white;
	padding: 5px;
	margin-bottom: 5px;*/
}
.test h3{
	font-size: 11px;
}
.test th i{
	font-size: 20px;
}





/* ----------------- FORMS --------------------------*/
.test form {
	padding-top: 10px;
	margin: 0px;
	
}
.test .tab {
  overflow: hidden;
  border: none;
  background-color: transparent;
	width: 100%;
}
 button {
-webkit-appearance:none;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 2px;
  transition: 0.3s;
   min-width:65px;
	width: 15%;
	background-color: royalblue;
   /*	background-color: #4e4e4e; */ 
	border-radius:6px;
    font-size: 14px;
    color: #FFA600;
	text-align: center;
    text-decoration: none;
    display: inline-block;
	margin: 2px;
}
/* Change background color of buttons on hover */
.test .tab button:hover {
  background-color: #4e4e4e;
}

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

.test .tabcontent {
clear: left ;
width: 100%;
  display: none;
  padding: 6px 12px;
  border: none;
  border-top: none;
} 
	 .test input{
		height: 40px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		}
		/*task test bar with 5 quick buttons*/
	.test select{
		height: 40px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		}
	.test textarea{
		height: 80px;
		width: 80%;
		margin: 5px;
		border-radius:6px;
		font-size:18px;
		border:none;
		}
		/*Quick selector button on task_test.php*/
	.testButton {
	 -webkit-appearance:none;
    width:125px;
	background-color: royalblue;
   /*	background-color: #4e4e4e; */ 
    border: none;
	border-radius:6px;
    font-size: 18px;
     color: white;
	font-weight: 500;
	text-align: center;
    text-decoration: none;
    display: inline-block;
	margin: 5px;
}
/*Quick selector button on task_test.php*/
	.test .testButton {
	 -webkit-appearance:none;
    width:125px;
	background-color: royalblue;
   /*	background-color: #4e4e4e; */ 
    border: none;
	border-radius:6px;
    font-size: 18px;
    color: white;
	font-weight: 500;
	text-align: center;
    text-decoration: none;
    display: inline-block;
	margin: 5px;
}

/*------------------ TEST PASS BUTTON / line test action buttons -------------------*/
	.test .btnFail {
	 -webkit-appearance:none;
	background-color: red;
	color: white;
   /*	background-color: #4e4e4e; */ 
    border: none;
	padding: 2px;
	border-radius:6px;
    font-size: 14px;
	text-align: center;
    text-decoration: none;
    display: inline-block;
	margin: 5px;
}
	.test .btnToDo {
	 -webkit-appearance:none;
	background-color: royalblue;
	color: white;
   /*	background-color: #4e4e4e; */ 
    border: none;
	border-radius:6px;
	padding: 2px;
    font-size: 14px;
	text-align: center;
    text-decoration: none;
    display: inline-block;
	margin: 5px;
}


/*------------------ switch for Pass test result button ------------------*/

.test .switchPass {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
    color: black;
}

.test .switchPass input {display:none;}

.test .sliderPass {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
    color: grey;
  background-color: grey;
  -webkit-transition: .4s;
  transition: .4s;
}

.test .sliderPass:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
    color: grey;
  background-color: lawngreen;
  -webkit-transition: .4s;
  transition: .4s;
}

.test input:checked + .sliderPass {
  background-color: lawngreen;
    text-align: left;
    vertical-align: middle;
    color: black;
    padding-top: 5px;
}

.test input:focus + .sliderPass {
  box-shadow: 0 0 1px lawngreen;
}

.test input:checked + .sliderPass:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/*------------------ switch for Fail test result button ------------------*/

.test .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
    color: black;
}

.test .switch input {display:none;}

.test .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
    color: grey;
  background-color: grey;
  -webkit-transition: .4s;
  transition: .4s;
}

.test .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
color: grey;
  background-color: red;
  -webkit-transition: .4s;
  transition: .4s;
}

.test input:checked + .slider {
  background-color: red;
    text-align: left;
    vertical-align: middle;
    color: black;
    padding-top: 5px;
}

.test input:focus + .slider {
  box-shadow: 0 0 1px lawngreen;
}

.test input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */
.test .slider.round {
  border-radius: 34px;
}

.test .slider.round:before {
  border-radius: 50%;
}

/*------------------END  switch for Pass fail test result button ------------------*/

/*------------------ switch blue ------------------*/

.test .switchBlue {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.test .switchBlue input {display:none;}

.test .sliderBlue {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: grey;
  -webkit-transition: .4s;
  transition: .4s;
}

.test .sliderBlue:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.test input:checked + .sliderBlue {
  background-color: royalblue;
}

.test input:focus + .sliderBlue {
  box-shadow: 0 0 1px royalblue;
}

.test input:checked + .sliderBlue:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.test .sliderBlue.round {
  border-radius: 34px;
}

.test .sliderBlue.round:before {
  border-radius: 50%;
}

/*------------------END  switch blue------------------*/



/*------------------Radio button custom ------------------*/
/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
/* --------------------------------End radio button custom     -------------------------------------------*/
	
/*------------------END TEST ------------------*/

/*--- Asset Tabs ----*/
/* Style the button that is used to open and close the collapsible content */
.test .collapsible {
  background-color: transparent;
  color: lightgray;
  cursor: pointer;
  padding: 2px;
	margin: 2px;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
	width: 5%;
	height: 20px;
}

/* 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) */
.test .active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.test .content {
  padding: 0px;
margin: 0px;
  display: none;
  overflow: hidden;
	width: 100%;
}
/*---- End Asset Tabs ----*/

#hideMe {

    -moz-animation: cssAnimation 0s ease-in 4s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 4s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 4s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 4s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

    .menu {
		text-align:center;
		position:Fixed;
		right:3px;
		top:60px;
		margin-left:3px;
	}
	.pticon{
		float: none;
		position:fixed;
		bottom:3px;
		right:3px;
		}
		 .logoutbutton {
		width:100%;
		top:3px;
		right:5px;
		font-size:18px
	}
	 .menubutton {
        background-color: #000000;
		border-radius:15px;
		font-size:24px
	}
	 .subbutton {
		 appearance:none;
		 -webkit-appearance:none;
		background-color:#000000 ;
		 text-decoration: none;
		color: #faca24;
		border-radius:6px;
		font-size:24px;
		margin:0px;
	}
	
	 .dobutton {
		 appearance:none;
		 -webkit-appearance:none;
		background-color: grey;
		 text-decoration: none;
		color: black;
		border-radius:20%;
		font-size:30px;
		margin:2px;
		padding:15px;
	}
		 .donebutton {
		 appearance:none;
		 -webkit-appearance:none;
		background-color:springgreen ;
		 text-decoration: none;
		color: white;
		/*#faca24*/
		border-radius:20%;
		font-size:30px;
		margin:2px;
		padding:15px;
	}
		 .badbutton {
		 appearance:none;
		 -webkit-appearance:none;
		background-color: orangered ;
		 text-decoration: none;
		color: white;
		/*#faca24*/
		border-radius:20%;
		font-size:30px;
		margin:2px;
		padding:15px;
	}
	.bmenu {
		background-color: #000000 ;
		color: white;
		border-radius:6px;
		text-align:center;
		text-decoration: none;
		width: 100%;
		position:Fixed;
		bottom:2%;
		right:3px;
	}
	
	

	
	
	/* old sub button*/
	 .altsubbutton {
        appearance:none;
		 -webkit-appearance:none;
		 text-decoration: none;
		background-color:#4F4F4F ;
		color: #FFFFFF;
		border-radius:6px;
		font-size:24px;
		margin:0px;
		padding:0px;
	}
	
	
	  .mheader {
	text-align:center;
	color:#4F4F4F;
	font-size:24px;
	background-color: #E1E1E1;
	width: 60%;
	height:50px;
	position: relative;
	left: 15%;
	padding:10px;
	}
	  .jobmheader {
	text-align:center;
	color:#4F4F4F;
	font-size:24px;
	background-color: #E1E1E1;
	width: 60%;
	height:50px;
	position: absolute;
	left: 20%;
	padding:10px;
	}
		.tableheader {
	text-align:center;
	color:#4F4F4F;
	font-size:24px;
	background-color: #faca24;
	}
	
	.header {
	text-align:center;
	color:#4F4F4F;
	font-size:24px;
	background-color: #E1E1E1;
	width: 60%;
	position:relative;
	left: 16%;
	}
	
	/*job selectable buttons*/
.startbutton {
	color:#faca24 ;
	text-align:right;
	font-size:18px;
	background-color: #000000;
	border-radius:15px 0px 0px 15px;
	padding: 60px 0px 60px 0px; 
	}
	padding order top, right, bottom, left  
	/* .startbutton a {color:#faca24;} */

.startEnroute {
	color:#FF7900;
	text-align:right;
	font-size:18px;
	background-color: #474747;
	border-radius:15px 0px 0px 15px;
	padding: 60px 0px 60px 0px; 
	}

	
.startOnsite {
	color:springgreen;
	text-align:right;
	font-size:18px;
	background-color: #474747;
	border-radius:15px 0px 0px 15px;
	padding: 60px 0px 60px 0px; 
	}

	/*background-color: #faca24;*/
	
		.jobheader {
	color: #000000;
	font-size:18px;
	background-color: #faca24;
	}
		.todayHeader {
	color: white;
	font-size:18px;
	background-color:#566AFF;
	}
	
	.jobbutton {
		background-color:#000000 ;
		color: #faca24;
		border-radius:0px 15px 15px 0px;
		font-size:18px;
	}
	
	
	



.productsubmitbutton {
    background-color: #000000;
    border: 2px solid #faca24;
	border-radius:6px;
    font-size: 28px;
    color: #faca24;
	text-align: center;
    text-decoration: none;
    display: inline-block;
	margin: 5px;
	appearance:none;
	-webkit-appearance:none;
}


#pass{ 
background-color:#000000;
color:#faca24;
border-radius:6px;
position:abolute;
left:0px;
top:0px;
padding:10px;
margin-bottom:5px;
}

#fail{
	background-color:#000000;
	color:#faca24;
	border-radius:6px;
	position:static;
	right:0px;
	top:0px;
	padding:10px;
	margin-top:5px;
	}

.tickoff{
	padding: 5px;
	border-color: #FF0004 ;
}
.tickon{
	padding: 5px;
	background-color: green;
	
	}