/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap');

:root {
  --blue-link: #005AA8;
  --deep-gov-blue: #193050;
  --light-blue: #d7ecfd;
  --focus-red: #c42020;
  --gov-grey: #f4f3f1;
}

.light {
 font-family:'Open Sans Light'; 
}

.center {
  text-align:center;
}

strong {
  font-family:'Open Sans SemiBold';
}

em {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}

.material-icons {
  font-family:'Material Icons';
}

h2, h3, h4 {
  font-family:'Open Sans SemiBold';
}

h1 {
 font-family:'Open Sans Light';
 font-weight:normal;
}

.content-box p, ul, ol {
  line-height:1.6em;
}

p a, a:visited {
  color: var(--blue-link);
}

p a:hover {
  color:red;
}

p a:focus {
  background-color: var(--blue-link);
  color:white;
  text-decoration:underline;
}

.p-smaller {
  font-size:14px; 
}

.footer-column h3, .u-heading {
  padding-bottom:5px;
  border-bottom:1px solid #c7c7c7;
}

hr {
  margin-top:30px;
  margin-bottom:30px;
}

.page-h1 {
  font-size:35px;
  font-family:'Open Sans Light';
  font-weight:bolder;
}

p.intro {
  font-size:20px;
  font-family:'Open Sans Light';
  line-height:1.6em;
}

body {
  margin: 0;
  font-family: 'Open Sans Regular', sans-serif;
  background-color: var(--gov-grey);
}

header {
  background-color: white;
  padding: 23px 0 20px 0;
  height:75px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 270px;
}

.logo {
  width: 188px;
  height: 74px;
}

.logo:focus {
  border:3px solid var(--blue-link);
}

.search-box {
  width: 400px;
  height: 32px;
  border:1px solid black;
  background-color: white;
  vertical-align:middle;
  padding-top:8px;
  padding-left:10px;
}

nav {
  background-color: var(--deep-gov-blue);
  height: 50px;
}

.main {
  padding: 30px 20px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-box {
  background-color: white;
  width: 75%;
  padding: 8px 30px 30px 40px;
  margin-bottom: 20px;
}

.footer-blue {
  background-color: var(--deep-gov-blue);
  color: white;
  display: flex;
  justify-content: space-around;
  padding: 20px 20px;
  width: 75%;
  margin: auto;
}

.footer-column {
  width: 30%;
}

.footer-white {
  background-color: white;
  display: flex;
  align-items: center;
  padding: 20px;
  justify-content: space-between;
  width: 75%;
  margin: auto;
}

.footer-white .logo {
  margin-left:70px;
}

.footer-text {
  flex: 1;
  text-align:left;
  margin-left:330px;
  font-size:14px;
}

.footer-text p:not(:last-child) {
  margin-bottom:10px;
}

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: var(--deep-gov-blue);
  height:49px;
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;
}

.row {
  width:100%;
  margin:0 50px;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  cursor: pointer;
}

.dropbtn:after {
  font-family:'Material Icons';
  content:"keyboard_arrow_down";
  font-size: 20px;
  margin-left: 1px;
  vertical-align: middle;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color:white;
  color:black;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  inset-block-start:167px;
  background-color: var(--deep-gov-blue);
  width: 80%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  color:white;
  margin:0 160px;
  height:300px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display:flex;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 30%;
  padding: 10px;
  background-color: var(--deep-gov-blue);
  height: 250px;
}

/* Style links inside the columns */re

.column a.list, a.list {
  float: none;
  color: white;
  padding: 3px 3px 3px 0;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size:14px;
}

.column a:before, a.list:before {
  font-family: 'Material Icons';
  content: 'chevron_right';
  font-size: 20px;
  margin-right: 1px;
  vertical-align: middle;
}

.column a:hover, a.list:hover {
  text-decoration:underline;
  background-color:var(--deep-gov-blue);
  color:white;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.main-column {
  float:left;
  width:70%;
  padding:1px;
}

.right-column {
  float:right;
  width:25%;
  padding:1px;
}

.content-columns:after {
  content:"";
  display:table;
  clear:both;
}

.menu-column {
  float:left;
  width:30%;
  padding:1px 0 0 20px;
}

.main-column-right {
  float:left;
  width:65%;
  padding:1px;
}

.blue-button {
  padding: 9px;
  margin: 2px;
  text-align: center;
  color: white;
  font-size: 15.5px;
  background-color: var(--deep-gov-blue);
  cursor: pointer;
  border: 2px solid var(--deep-gov-blue);
  border-radius: 2px;
  text-decoration: none;
}

.blue-button:visited {
  color: white;
}

.blue-button:hover {
  background-color: white;
  color: var(--deep-gov-blue);
  text-decoration: none;
}

.button-group {
  display:flex;
  gap:10px;
  justify-content:center;
}

.grey-box {
  background-color: var(--gov-grey);
  padding: 15px;
  margin: 12px 12px 25px 12px;
  font-size: 15px;
}

.grey-box h3 {
  margin:0 0 10px 0;
}

.blue-link:hover {
  text-decoration:underline;
}

.reglist {
  float: none;
  color: var(--blue-link);
  padding: 3px 3px 3px 0;
  text-decoration: none;
  display: block;
  text-align: left;
  /* font-size: 16px; */
  font-family:'Open Sans SemiBold';
}

.reglist:before {
  font-family: 'Material Icons';
  content: 'chevron_right';
  font-size: 20px;
  margin-right: 1px;
  vertical-align: middle;
}

.reglist:hover {
  text-decoration: none;
  color: #c42020;
}

.reglist:focus {
  background-color: var(--blue-link);
  color: white;
  text-decoration: none;
}

.vertical-menu {
  width:300px;
  list-style-type:none;
  padding-left:0;
}

.vertical-menu li {
  padding:10px 9px;
  border-bottom:1px solid #c7c7c7;
  font-family:'Open Sans SemiBold';
}

.vertical-menu li:first-child {
  border-top:1px solid #c7c7c7;
}

.vertical-menu li:hover {
  background-color:var(--gov-grey);
}

.vertical-menu li a {
  color: var(--blue-link);
  text-decoration:none;
}

.vertical-menu li a:hover {
  color:red;
  text-decoration:underline;
}

.vertical-menu li a:focus {
  background-color: var(--blue-link);
  color:white;
  text-decoration:underline;
}

.vertical-menu .current {
  background-color:#f2f1ef;
}

.vertical-menu .current:before {
  content:"• "
}

.vertical-menu .sub {
  font-size:14px;
  padding-left:20px !important;
}

.vertical-menu .sub:before {
  content:"↳ ";
}

.menu-column h1 {
  font-size:25px;
}

.blue-heading {
  background-color:var(--deep-gov-blue);
  padding:5px 5px 5px 10px;
  color:white;
  font-size:18px;
  font-family:'Open Sans SemiBold';
  margin:15px 15px 10px 0;
}

.three-columns {
  display: flex;
  padding: 10px 0;
  width: 98%;
  gap: 20px;
}

.col {
  width:30%;
}


.gov-card {
  display: flex;
  align-items: center;
  max-width: 300px;
}

.gov-card img {
  margin-right: 20px; 
}

#info {
  border-left: 1px solid #999;
  height: 63px;
  padding-left: 20px;
  vertical-align: middle;
  float: right;
  padding-top: 14px;
}

#info p {
  margin: 0;
}

#name {
  font-size: 15px;
  font-family: 'Open Sans SemiBold';
}

#title {
  font-size: 13px;
  font-family: 'Open Sans';
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}

.breadcrumbs {
  padding: 18px 0 0 0;
  font-size: 14px;
  width: 100%;
  list-style-type: none;
  display: flex;
  margin: 0;
}

.breadcrumbs li:after {
  content: "•";
  vertical-align: top;
  margin: 0 8px;
}

.breadcrumbs li:last-child:after {
  content: "";
}

.breadcrumbs a {
  text-decoration: none;
  color: var(--blue-link);
}

.breadcrumbs a:hover {
  color: red;
  text-decoration: none;
}

#search {
  margin: 15px;
  width: 610px;
  height: 42px;
  border-radius: 0;
  border: 1px solid black;
  padding-left: 10px;
}

#search:focus {
  border:2px solid black;
  border-radius:0;
}

#search::placeholder {
  font-size:16px;
  font-family:'Open Sans Light';
}

.menu-column h1 a {
  color:black;
  text-decoration:none;
  font-family:'Open Sans Light';
}

.menu-column h1 a:hover {
  color: black;
  text-decoration: underline;
  font-family: 'Open Sans Light';
}

.menu-column h1 a:focus {
  background-color: var(--blue-link);
  color:white;
  text-decoration:underline;
}

.welcome-text {
  display: inline-block;
  animation: changeText 4s infinite;
  color: black;
  font-size:2em;
  font-family:'Open Sans Light';
}

.categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.category {
  font-family: 'Open Sans SemiBold';
  color: #145ea5;
  background-color: #d7edfd;
  border-radius: 4px;
  font-size: 16px;
  padding: 6px 16px;
  text-decoration: none;
  white-space: nowrap;
}

.category:hover {
  background-color: #e2f4fe;
  text-decoration: none;
}

.category:focus {
  background-color: #3b65c7;
  color: white;
}

.right-column .categories .category {
  font-size: 14px;
}

.right-column h4 {
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 60px;
}

.last-updated {
  font-size: 14px;
  color: #666;
}

.content-owner {
  border-left: 1px solid #666;
  padding-left: 24px;
  padding-bottom: 20px;
  margin-top: 30px;
  margin-bottom: 60px;
}

.owner-link {
  padding-top: 20px;
}

.owner-link a {
  color: #666;
  font-size: 19px;
  text-decoration: none;
}

.owner-link a:hover {
  color: black;
}

.owner-link a:focus {
  color: black;
  text-decoration: underline;
}

/* Pagination */

#pagination {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

#pagination button {
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid #ccc;
  background: var(--gov-grey);
  cursor: pointer;
  color: var(--blue-link);
  font-weight: bold;
  font-size: 15px;
}

#pagination button:hover {
  background: var(--focus-red);
  color: white;
}

#category-filter {
  background-color: #ededed;
  padding: 9px;
  font-size: 16px;
  color: #19314e;
  width: 230px;
}

#category-filter:focus {
  border: 1px solid black;
}

#category-filter option {
  color: #19314e;
  padding: 9px;
  font-family: 'Open Sans Regular';
}

#category-filter option:hover {
  background-color: #19314e;
  color: white;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: var(--light-blue);
  color: #444;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--blue-link);
  border-radius: 6px;
  transition: 0.4s;
  font-family: 'Open Sans Regular';
  font-size: 16px;
}

.panel {
  padding: 0 10px;
  background-color: white;
  overflow: hidden;
  font-family: 'Open Sans Regular';
  max-height: 0;
  transition: max-height 0.3s ease;
  font-size: 15px;
}

.accordion:before {
  content: '+';
  font-size: 16px;
  color: black;
  float: left;
  margin-right: 5px;
  font-family: 'Open Sans SemiBold';
}

.active:before {
  content: '-';
  font-size: 16px;
  font-family: 'Open Sans SemiBold';
}

/* Work areas */

.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 40px;
  margin: 35px 0 10px 0;
}

.area-link {
  display: block;
  text-decoration: none;
  color: var(--blue-link);
  font-size: 16px;
  font-family: 'Open Sans SemiBold';
}

.area-link:hover {
  color: var(--focus-red);
}

.pdf-viewer iframe {
  width: 100%;
  height: 700px;
  border: none;
}