@charset "utf-8";
/* CSS Document */

/* Global styles */
body{
	font-size: 14pt;
	 font-family: "Times New Roman", Times, serif;
}
a{
	color: #ed3e15;
	text-decoration: none;
}
a:visited{
	color: #ed3e15;
	text-decoration: none;
}
h5{
	text-align: center;
}
.container {
	margin: auto; 
	width: 1200px;
}
#main {
margin-top:- 50px;
padding-top: 20px;
text-align: center;
    display: block;
}
.center{
	margin: 0 auto;
}

.linkButton {
	font-size: 17px;
	background-color:#F77B0A;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
    text-align: center;
    padding: 14px 16px;
	}
a.linkButton{
	color: #FFFFFF;
	}
a:hover.linkButton{
	color: #FFFFFF;
	}
a:visited.linkButton{
	color: #FFFFFF;
	}
.orange_button{
	background-color: #ef9208;
	border: none;
	border-radius: 4px;
	color: white;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	margin: 4px 2px;
	cursor: pointer;
}
.collapsible {
  background-color: #ebeae8;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 30%;
  border: none;
  outline: none;
  font-size: 14pt;
}

.collapsed-active, .collapsible:hover {
  background-color: #adaaa3;
}

.collapsed-content {
  display: none;
  overflow: hidden;
}

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

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  min-width: 90px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #F77B0A;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a: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;}
.comp-background {
	background: #F77B0A;

}
.subtitle {
	font-size: 16pt;
	font-weight: bold;
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
	width: 80%;
}
.checkListItem{
	position: relative;
	padding-bottom: 25px;
	margin-left:5px;
	vertical-align: top;
	list-style-type: none;
}

.checkListItem:before {
        content: "";
        position: absolute;
        top: 0px;
        left: -38px;
        width: 36px;
        height: 36px;
        background-image: url('../images/check.gif');
	background-repeat:no-repeat;
}

/* Header */
.katalyst_header img{
	max-width: 100%;
    height: auto;
}
.katalyst_slogan {
	text-align: center; 
	color: #ED3E15; 
	font-weight: bold; 
	font-size: 2em
}
.katalyst_slogan .larger{
	font-size: 2.25em;
}
#header{
	width: 100%;

}
.acctButton {
	font-size: 17px;
	color: #F77B0A;
	text-decoration: none;
	float: right;
    display: block;
    text-align: center;
    padding: 10px 10px;
    border-left:#F77B0A 1pt solid;
	}
#katalystLogo{
	float: left;
	padding-left: 75px;
}

/* Main Nax Bar */
.topnav {
	background-color:  #F77B0A;
	overflow: hidden;
	width: 100%;
}

.navLink, .navLink:visited {
  float: left;
  font-size: 16px;
	 font-family: Arial, Helvetica, sans-serif;
  color: white;
  background-color:  #F77B0A;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navButton{
  float: left;
  font-size: 16px;
	 font-family: Arial, Helvetica, sans-serif;
  color: white;
  background-color:  #F77B0A;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: none;
  outline: none;
}
.topnav .icon{
	display: none;
}
.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subNavLink {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navLink:hover, .subNavLink:hover, .navButton:hover, .topnav .active {
    background-color: #ed3e15;
  color: white;
}


.subnav-content {
  display: none;
  position: absolute;
  margin-top: 46px;
  background-color: #F77B0A;
  font-family: Arial, Helvetica, sans-serif;
  width: inherit;
   z-index: 1;
}

.subnav-content .subNavLink {
  color: white;
  display: block;
  width: 100%;
  text-decoration: none;
  text-align: left;
}



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

/* Sub Nav Bar (Non-responsive)*/
.subnav2 {
	width:100%; 
	background-color: #ed3e15;
  font-family: Arial, Helvetica, sans-serif;
	overflow: hidden;
    display: none;
}
.subnav2.active {
    display: block;
}
.subnav2 a {
	float: left;
	display: block;
	text-align: center;
	padding: 14px 16px;
	background-color:#ed3e15;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 17px;
    }
.subnav2 a:hover{
	background-color: #FFFFFF;
	color: #ed3e15;
}
.subnav2 .active {
	font-weight: bold;
}

/* sidebar */
.sidebar {
  display: inline-block;
  width: 200px;
  height: 100%;
 float: left;
  background-color: #ef9208;
  overflow-x: hidden;
  padding-top: 60px;
  text-align: left;
  }


.collapsible-sidebar {
  background-color: #ef9208;
 padding: 8px 8px 8px 12px;
text-align: left;
  text-decoration: none;
  font-size: 17px;
  color: #FFFFFF;
  display: block;
  border: none;
  outline: none;
  width: 100%;
}
.sidebar  button:hover {
  background-color: #ED3E15;
}

.sidebar-content{
  display: inline-block;
  padding: 20px;
   width: 960;
}
.collapsed-sidebar-active{
  background-color: #ED3E15;
}


/* chart related */
#corr th {
	background-color:#46678e;
	color:#FFFFFF;
	text-align:left;
}
#corr td{
	background-color:#9eb9d8;
}


.pulseLabel{
	width:350px;
	display: inline-block;
	text-align: left;
}
.pulseInput{
	width: 300px;
	text-align: left;
	display: inline-block;
}
.pulsePicker, .eventPicker{
    width: 200px;
    text-align: center;
    position: fixed;
    z-index: 1;
    top: 275px;
    left: 10px;
    overflow-x: hidden;
    padding: 8px 0;
}
.pulsePicker2{
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 500px;
    left: 10px;
    overflow-x: hidden;
    padding: 8px 0;
}
.pulsePickerStatic{
	margin: 0 auto;
	text-align: center;
}
.pulseListLabel, .eventListLabel{
    width: 200px;
    background-color:#ed3e15; 
    font-size:18pt;
    color: #FFFFFF; 
    text-align: center;
}
.progress-chart{ 
	width: 200px; 
	height: 250px; 
	display: inline-block;
}
.pie-chart{ 
	margin: 0 auto;
	width: 700px; 
	height: 500px; 
}
.sankey-chart{
	margin: 0 auto;
	width: 900px; 
	height: 700px;
}
.chart{
	margin: 0 auto;
	width: 900px; 
	height: 500px;
}
#CausalDaysLabel, #CausalTypeLabel{
	display: inline;
}
.pulseList, .eventList{
	width: 200px;
	padding:0;
	margin:0;
	z-index: 6;
}
#priTable td{
	padding: 0 2px;
}



/* form related */
#newPulseForm { 
  display: none;
  border: 6px solid #ef9208; 
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%)
  
}

.MessageModal { 
  display: none;

  border: 6px solid #ef9208; 
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%)
  
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav button, .topnav a {display: none;}
  .topnav a.icon {
    display: block;
float: none;
text-align: left;
    padding: 14px 150px;
  }
  .subnav .subNavButton {display: none;}
  
.container {
	margin: auto; 
	width: 600px;
}
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative; padding-top: 50px; padding-bottom:100px;}
  .topnav.responsive .icon {
    position: absolute;
	width: 100%;
    top: 0;
  }

  .topnav.responsive a, .topnav.responsive .subnav{
    float: none;
    display: block;
    text-align: left;
    padding: 14px 150px;
    width: 100%;
  }
.topnav.responsive .subnav a{
    float: none;
    display: block;
    text-align: left;
    padding: 14px 10px;
    width: 100%;
  }
.topnav.responsive .subnav-content{
    margin-left: 150px;
  }
.topnav.responsive button{
    float: none;
    display: block;
    text-align: left;
    padding: 0;
}
.topnav.responsive  .navLink:hover, .topnav.responsive .subnav:hover {
    background-color: #ed3e15;
}

.topnav.responsive .subnav-content {
	    background-color: #ed3e15;
}

  .subnav.responsive {position: relative;}
  .subnav.responsive .subNavButton {
    float: none;
    display: block;
    text-align: center;
    width: 100%;	
  }
.subNavLink {
	padding-left: 0px;
}
.subnav2.active {
    display: none;
}
  .katalyst_header img{
	max-width: 100%;
    height: auto;
	}
#main {
	text-align: left;
	}
#katalystLogo{
	padding-left: 5px;
	#topNav {
	padding-left: 5px;
	}

.katalyst_slogan {
	text-align: center; 
	color: #ED3E15; 
	font-weight: bold; 
	font-size: 1em
}
.katalyst_slogan .larger{
	font-size: 1.25em;
}
	}