@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css');

html {
  scroll-behavior: smooth;
}

a, h3{
   color: #011F5B;
}

a:hover{
   color: #990000;
}

.menu-base-theme >li a:hover, .menu-base-theme li.active a, .menu-base-theme li a.is-active {
    background: #990000;
    color: #fff;
}

h2{
  color: #990000;
  font-weight: bold;
}

.footer-menu {
    margin: 0;
    border: 0;
    background: #011F5B;
    color: #fff;
}

.footer-menu a, .footer-menu a:hover {
    color: #fff;
}

html .required > legend > span:after, .form-item-field-observer-name-0-value label:after{
    content:"*";
    color: #990000;
    vertical-align: super;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0.3em;
}

html #node-epa-form .form-item-field-name-0-value{
    display: none;
}

#edit-field-plan-of-action-0-format-help-about{
display: none;
}

th, tr, td {
    text-align: left;
    border: 1px solid #aaa;
    padding: 0.25rem 1rem;
}

.epa-wrapper, .completed-wrapper, .tracking-epa-table, .epa-action-plans{
    padding:1rem 1.5rem;
    border-radius: 5px;
    background-color:#eee;
}

h2.epa-header{
    cursor: pointer;
}

.epa-wrapper h3{
    color: #011F5B;
}

.tracking-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
}

.goals-wrapper .epa-wrapper{
    margin-bottom:2rem;
}

.region-header{
    width:100%;
}

.example-expand::after, .epa-header.closed::after{
    font-size: 10px;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content:"\f054";
    display: inline;
    vertical-align: middle;
    padding-left:0.5rem;
    padding-bottom:0.25rem;
    color:#011F5B;
}

.example-expand.expanded::after, .epa-header.open::after{
    font-size: 10px;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content:"\f078";
    display: inline;
    vertical-align: middle;
    padding-left:0.5rem;
    padding-bottom:0.25rem;
    color:#011F5B;
}

.region-header .brand {
    display: inline-block;
    vertical-align: middle;
    line-height: 56px;
    color: #666;
}

.navbar-toggle{
    display: none;
}

.site-name a{
    font-size: 36px;
    color: #004784;
    font-family:serif;
    margin-left:20px;
}

html caption {
    padding-top: 0px;
    padding-bottom: 0px;
    color: black;
    text-align: left;
}

table.cols-3{
    margin-bottom:2rem;
}

#block-views-block-tracking-epas-block-1 h2, #block-views-block-epa-goals-and-action-plans-block-1 h2, #block-views-block-epa-goals-and-action-plans-block-1 h3, #block-views-block-epa-goals-and-action-plans-block-1 h4, #block-views-block-epas-in-progress-block-1 h2, #block-views-block-tracking-epas-block-16 h2, #block-views-block-tracking-epas-block-16 h3, #block-views-block-tracking-epas-admin-dashboard-block-16 h2, #block-views-block-tracking-epas-admin-dashboard-block-16 h3, #block-views-block-epa-goals-and-action-plans-block-3 h3, #block-views-block-epa-goals-and-action-plans-block-3 h4, #block-views-block-epa-goals-and-action-plans-block-3 h2{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.62em;
    color: black;
    margin-top: 10px;
    margin-bottom: 0px;
    font-weight: bold;
}

#block-views-block-epa-goals-and-action-plans-block-1 h4, #block-views-block-epa-goals-and-action-plans-block-3 h4{
    margin-top:0px;
}

#edit-field-plan-of-action-0-value{
    width:100%;
    height:6rem;
}

#block-addepa{
    text-align: right;
}

.path-node #edit-actions{
    text-align: center;
}

.path-node #edit-submit, .path-node #edit-submit:hover{
    width:10rem;
    height:6rem;
    background-color: #011F5B;
    color:white;
    font-size: 2rem;
    background-image: none;
    border:0px solid white;
}

footer > div{
    padding:0px !important;
}

.path-node .js-form-type-vertical-tabs, #edit-footer, #edit-field-plan-of-action-0-format{
    display: none;
}

#all-goals > legend, #all-goals > legend > legend{
    border-bottom: 0px solid white;
}

#block-views-block-tracking-epas-block-16 footer, #block-views-block-tracking-epas-admin-dashboard-block-16 footer{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
}

#block-views-block-tracking-epas-block-16 footer .charts-google, #block-views-block-tracking-epas-admin-dashboard-block-16 footer .charts-google{
    border: 1px solid black;
    background: white;
    border-radius: 3px;
    padding:2rem 1rem !important;
}

#block-completedepasblock{
  height:500px;  
}

.epa-content ul, .epa-content ul li{
    padding-left:0px;
    list-style: none;
}

.graph-complete {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.62em;
    color: black;
}

.graph-complete caption {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.62em;
    color: black;
    margin-top: 10px;
    margin-bottom: 0px;
    font-weight: bold;
}

.graph-complete tbody th {
	text-align:right;
}

.graph-complete tr, .graph-complete td{
    padding:0px;
}

		.graph-complete {
			display:block;
      width:100%;
      height:300px;
		}

		.graph-complete caption {
			display:block;
		}

		.graph-complete thead {
			display:none;
		}

		.graph-complete tbody {
			position:relative;
			display:grid;
			grid-template-columns:repeat(auto-fit, minmax(2%, 2%));
			column-gap:0.5%;
			align-items:end;
			height:50%;
			margin:3em 0 1em 2.8em;
			padding:0 1em;
			border-bottom:2px solid rgba(0,0,0,0.5);
			background:repeating-linear-gradient(
				180deg,
				rgba(170,170,170,0.7) 0,
				rgba(170,170,170,0.7) 1px,
				transparent 1px,
				transparent 20%
			);
		}

		.graph-complete tbody:before,
		.graph-complete tbody:after {
			position:absolute;
			left:-3.2em;
			width:2.8em;
			text-align:right;
			font:bold 80%/120% arial,helvetica,sans-serif;
		}

		.graph-complete tbody:before {
			content:"5+";
			top:-0.6em;
		}

		.graph-complete tbody:after {
			content:"0";
			bottom:-0.6em;
		}

		.graph-complete tr {
			position:relative;
			display:block;
            border: 0px solid white;
		}

		.graph-complete tr:hover {
			z-index:999;
		}

		.graph-complete th,
		.graph-complete td {
			display:block;
			text-align:center;
            border: 0px solid white;
		}

		.graph-complete tbody th {
			position:absolute;
			bottom:-2em;
			right:-1em;
			width:100%;
			font-weight:normal;
			text-align:center;
            white-space:nowrap;
			text-indent:0;
            border: 0px solid white;
            transform:rotate(90deg);
		}

		.graph-complete tbody th:after {
			content:"";
		}

		.graph-complete td {
			width:100%;
			height:100%;
			background:transparent;
			border-radius:0.5em 0.5em 0 0;
			transition:background 0.5s;
		}

        .graph-complete td.completed-bar{
            background: #011F5B;
        }

        .graph-complete td.required-bar{
            background: #990000;
        }

		.graph-complete td span {
			overflow:hidden;
			position:absolute;
			left:50%;
			top:50%;
			width:0;
			padding:0.5em 0;
			margin:-1em 0 0;
			font:normal 85%/120% arial,helvetica,sans-serif;
/* 			background:white; */
/* 			box-shadow:0 0 0.25em rgba(0,0,0,0.6); */
			font-weight:bold;
			opacity:0;
			transition:opacity 0.5s;
      color:white;
		}

.graph-legend{
    margin: 1rem auto;
    padding:2rem;
    border: 1px solid black;
    max-width:300px;
}

.graph-legend .blue-box{
    width:1.5rem;
    height:1.5rem;
    background: #011F5B;
    display: inline-block;
    margin-right:1rem;
}

.graph-legend .red-box{
    width:1.5rem;
    height:1.5rem;
    background: #990000;
    display: inline-block;
    margin-right:1rem;
}

.tracking-epa-table footer .tracking-epa-table:empty{
    display: none;
}

#block-userlogin ul{
    text-align: center;
    list-style: none;
}

#block-addepa h2 a::before{
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content:"\f055";
    display: inline;
    vertical-align: middle;
    padding-right:0.5rem;
}

.form-composite > .fieldset-wrapper > .description, .form-item .description {
    font-size: 14px;
    color: #333;
    font-style: italic;
}

.footer-menu input{
    color: #000;
}

#block-views-block-tracking-epas-block-16 > h2, #block-views-block-epa-goals-and-action-plans-block-1 > h2{
    padding-bottom: 0.5rem;
}

.epa-class{
    display: flex;
    flex-direction: row;
}

.epa-class .epa-core-class{
    flex: 0 0 60%;
    text-align: center;
    font-weight:bold;
}

.epa-class .epa-advanced-class{
    flex: 0 0 30%;
    text-align: center;
    font-weight:bold;
}

.path-frontpage #block-userlogin{
    display: none;
}

#block-pennkeylogin{
    text-align: right;
}

#edit-submit-supervised-epa-report{
    margin-left:2rem;
}

@media only screen and (max-width: 500px) {
  .site-name a{
    font-size: 26px;
    color: #004784;
    font-family:serif;
    margin-left:0px;
  }
    
#block-views-block-tracking-epas-block-16 footer{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 2rem;
    grid-row-gap: 3rem;
}
}