/* TEMPLATE for Government Window Customer Page
   Based on Macon Bibb by Nathan Davenport
   June 2021
*/

/*****************************
    GENERAL STYLE
*****************************/

/*

bootstrap breakpoints

xs <576 portrait phone
sm >576 landscape phone
md >768 tablet
lg >992 desktops
xl >1200 large desktops
*/

/* VARIABLES TO EDIT */
:root {
  /* Primary color determines Header background color */
  --primary-color: #ffffff;
  /* Secondary color determines the footer color and divider colors */
  --secondary-color: var(--gw-primary); /*rgb(18, 99, 72); */
  /* Selection Color determines the overlay color */
  --selection-color: #bbbcc5;
  /* Background Color */
  --background-color: rgba(242, 242, 242);
  /* Header Image -- delete if want to use primary color as header */
  /*--header-image: url(../images/header.jpg); */
  /* Header height at top of page */
  --header-height: 80px;
  /**/
  /**/
  /**/
  /**/
  /* main palette */
  --dark-grey: #323232;
  --light-grey: #363636;
  --warning: #a20000;
  --success: #006f0b;
  --gw-primary: #3c4981;
  --gw-secondary: #4097db;
  /* section colors -- customize if needed */
  --footer-color: var(--secondary-color);
  --footer-text: var(--light-grey);
  --header-color: var(--primary-color);
  --alert-color: var(--warning);
  --divider-color: var(--secondary-color);
}



/* TEXT -- font-faces found in fonts.css */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Trueno Bold", sans-serif;
  font-style: normal;
  color: var(--dark-grey);
  overflow-y: hidden;
}

body,
a,
span,
p,
label,
td,
th,
thead,
tr,
table,
tbody {
  font-family: "Trueno Light", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 18px;
  /* overflow-x: hidden; */
  color: var(--dark-grey);
}

.accordion h5{
  color: black;
}

b {
  font-family: "Trueno Bold", sans-serif;
  /* overflow-x: hidden; */
  color: var(--dark-grey);
}

strong {
  font-family: "Trueno Extra Bold", sans-serif;
  /* overflow-x: hidden; */
  color: var(--dark-grey);
}

i {
  font-family: "Trueno Light Italic", sans-serif;
  /* overflow-x: hidden; */
  color: var(--dark-grey);
}

i.fas,
a i.fas {
  /* for FONT AWESOME down arrows */
  right: 0px;
  top: 0px;
  color: var(--dark-grey) !important;
  text-align: right;
  font-size: 12pt;
}

p.warning,
span.warning {
  color: var(--warning);
}

h4.success,
span.success,
p.success {
  color: var(--success);
}

a {
  cursor: pointer;
  text-decoration: underline;
}

u {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none !important;
}

body {
  background-color: var(--background-color);
}

/* accessibility */

:not(button a, .close-sidebar-button, .header-button, .button-square):focus,
a:not(button a, .close-sidebar-button, .header-button, .button-square):hover,
a b:not(button a, .close-sidebar-button, .header-button):hover,
:not(button img) .dropbtn:hover {
  color: var(--footer-text) !important;
  background-color: var(--selection-color) !important;
  /*border-radius: 4px;*/
  text-decoration: none !important;
  opacity: 1;
}

/* HEADER */

header {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  /* set the background image here, where it says url() */
  background-color: var(--header-color); 
  /* Header image from Wikipedia, License here: TheMillCreek, CC BY-SA 3.0 <https://creativecommons.org/licenses/by-sa/3.0>, via Wikimedia Commons */
  background-image: linear-gradient(
      180deg,
      rgba(86, 86, 86, 0) 0%,
      rgba(50, 50, 50, 0.6375) 73.44%,
      rgba(50, 50, 50, 0.75) 100%
    ),
    var(--header-image);
  background-size: cover;
  /* adjust positioning here with second percentage */
  background-position: 50% 70%;
  background-repeat: no-repeat;
  height: auto;
  width: 100%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  z-index: 999;
  vertical-align: bottom;
  transition: 0.2s all;
}

header h1 {
  color: black;
  font-size: 38pt;
  transition: height 500ms, background 500ms;
  /*text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); */
  vertical-align: bottom;
  transition: 0.2s all;
  /* overflow-x: hidden; */
  word-wrap: normal;
}

header h4,
header h3,
header h2 {
  color: black;
  transition: height 500ms, background 500ms;
  /*text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);*/
  vertical-align: bottom;
  transition: 0.2s all;
  font-size: 14pt;
}

header h3 {
  font-size: 18pt;
}

header h2 {
  font-size: 22pt;
}

.horizontal-nav i.fas {
  /* for FONT AWESOME down arrows */
  right: 0px;
  top: 7px;
  color: black;
  text-align: right;
  font-size: 12pt;
}

.horizontal-nav {
  display: none;
  z-index: inherit;
}

.horizontal-nav a {
  font-style: normal !important;
  text-decoration: none !important;
  color: black;
  font-family: "Trueno", sans-serif;
  /*text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); */
  vertical-align: bottom;
  font-size: 14pt;
}

.horizontal-nav-elements {
  padding-left: 11px !important;
  padding-right: 11px !important;
}

@media (max-width: 1200px) {
  .horizontal-nav a {
    font-size: 12pt !important;
  }
    .horizontal-nav-elements {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .dropdown-content {
    font-size: 12pt !important;
  }
}

@media (max-width: 991px) {
  .horizontal-nav {
    display: none !important;
  }
}



/* OVERLAY MENUS */

.dropdown-content {
  /* Dropdown Content (Hidden by Default) */
  display: none;
  position: absolute;
  margin-left: -30px;
  z-index: 9999999;
  min-width: 450px;
  transition: visibility 0s, opacity 0.5s linear;
  -webkit-animation: fadeIn 0.2s ease-in;
  animation: fadeIn 0.2s ease-in;
  line-height: 0.75em;
}

.dropdown-content a {
  color: var(--light-grey);
  font-family: "Trueno Light", sans-serif;
  text-shadow: none;
  font-size: 12pt;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  /* Show the dropdown menu on hover */
  -webkit-animation: fadeIn 0.2s ease-in;
  animation: fadeIn 0.2s ease-in;
  display: block;
}

/* other header styling */
.logo{
  text-align: left;
  padding: 20px 0 10px 20px;
}

.header-image {
  width: 100%;
}

.header-text {
  margin-top: var(--header-height);
  vertical-align: bottom;
  flex-wrap: wrap-reverse;
  /*transition: all 300ms, background 300ms;*/
}

.shrink-header .header-text {
  margin-top: auto;
  transition: 0.2s all;
  margin-top: 30px;
  transition: all 300ms, background 300ms;
}

.padding-bottom {
  padding-bottom: 10px;
}

.header-button {
  height: 36px;
  margin-top: 2px;
  display: block;
  -webkit-filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5));
}

.gw-header-button {
  border: white !important;
  height: 48px;
  padding-top: 8px;
  display: block;
  -webkit-filter: drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.3));
  filter: drop-shadow(0px 1px 2px rgba(255, 255, 255, 0.3));
  transition: all 0.2s;
}

/*.shrink-header .header-button,
.shrink-header .gw-header-button {
  padding-top: 4px;
  height: 36px;
}*/

.cart-button,
button:not(.hamburger-menu-button) .header-button {
  /* hiding the cart button for now */
  display: none;
}

.header-button-row {
  position: absolute;
  right: 0;
  left: 0;
  width: 100%;
  padding: 0px;
  margin: 0px;
  z-index: 99999;
}

.header-button:hover,
.close-sidebar-button:hover {
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
  transition: 0.1s all;
}

/* shrinking header -- responsive styling */

.shrink-header {
  transition: 0.2s;
}

@media (max-width: 1440px) {
  .header-text h1 {
    font-size: 36px;
  }
  .header-text h4 {
    font-size: 16px;
  }
  .shrink-header h1 {
    font-size: 32px;
    margin-top: 0;
  }
  .shrink-header h4 {
    font-size: 14px;
  }
  .shrink-header .header-text {
    margin-top: 30px;
  }
}

@media (max-width: 1140px) {
  .header-text h1 {
    font-size: 32px;
  }
  .header-text h4 {
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  .header-text h1 {
    font-size: 32px;
  }
  .header-text h4,
  .header-text h3,
  .header-text h2 {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .padding-top {
    padding-top: 200px;
  }
  .header-text h1 {
    font-size: 28pt;
  }
  .header-text h4,
  .header-text h3,
  .header-text h2 {
    display: contents !important;
    font-size: 12pt;
  }
}

@media (max-width: 576px) {
  .header-text h1 {
    font-size: 24px;
  }
  .header-text h4,
  .header-text h3,
  .header-text h2 {
    font-size: 12px;
  }
}

@media (max-width: 300px) {
  .header-text h1 {
    font-size: 14pt;
  }
  .header-text h4,
  .header-text h3,
  .header-text h2 {
    font-size: 10pt;
  }
}

/* HAMBURGER MENU */

#sidebar {
  visibility: hidden;
}

.sidebar-menu {
  height: 100%;
  width: 300px;
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: -300px;
  overflow-x: hidden;
  transition: 0.4s;
  background: #ffffff;
  /* Drop Shadow */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  border-radius: 0px 20px 20px 0px;
}

.sidebar-menu img {
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 0;
}

.sidebar-menu h1 {
  padding-top: 70px;
  padding-bottom: 140px;
  height: 160px;
  z-index: 5;
}

.sidebar-logo {
  max-width: 250px;
  max-height: 80px;
  height: auto !important;
  width: auto !important;
}

.sidebar-menu a {
  text-decoration: none;
  font-size: 18px;
  display: block;
  transition: 0.3s;
  padding-bottom: 10px;
}

.sidebar-menu p {
  font-size: 12px;
}

.sidebar-menu .close-sidebar-button {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  cursor: pointer;
  z-index: 5;
}

.hamburger-dropdown-container {
  /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
  display: none;
  padding-left: 12px;
  -webkit-animation: fadeIn 0.3s ease-in;
  animation: fadeIn 0.3s ease-in;
}

.hamburger-dropdown-container a {
  font-size: 12pt;
}

 @media (min-width: 992px) {
  .hamburger-menu-button {
    /* hiding sidebar button on desktop */
    display: none !important;
  }
}

@media screen and (max-height: 450px) {
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  .sidebar-menu {
    padding-top: 15px;
  }
  .sidebar-menu a {
    font-size: 18px;
  }
}

/*Carousel*/
.carousel-item img{
  height: 750px;
  width: 100%;
  background-color: white;
  object-fit: cover;
}



@media (min-width: 992px){
  .carousel-container {
  margin-bottom: 80px;
  }
  .overlap-button-row {
    position: absolute;
    top: 680px;
    right: 10px;
    left: 10px;
    z-index: 2;
    padding-left: 135px;
    padding-right: 135px;
  }
}

@media (max-width: 600px){
  .carousel-item img{
    height: 200px;
  }
}

/* FOOTER AND ALERT BARS */

footer {
  background-color: var(--footer-color);
  margin-bottom: 0px !important;
  padding-bottom: 2px !important;
  padding-top: 2px !important;
  margin-top: 24px;
  box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
}

.sticky-footer {
  position: fixed !important;
  bottom: 0px !important;
  left: 0px;
  right: 0px;
}

.alert {
  /* normal styles */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: 0px;
  padding: 0px;
  padding-top: 4px;
  padding-bottom: 4px;
  background: var(--alert-color);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  transition: visibility 0s, opacity 0.5s linear;
}

.alert p,
.alert a,
.alert b,
footer p,
footer a,
footer b {
  color: white !important;
  transition: visibility 0s, opacity 0.5s linear;
  margin: 0px;
  padding: 0px;
  text-decoration: none !important;
  font-size: 12pt;
}

.alert .container-fluid,
footer .container-fluid {
  width: 90% !important;
}

.alert .close-footer-button {
  background-color: transparent;
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  right: 0px;
  font-size: 36px;
  margin-right: 24px;
  cursor: pointer;
  z-index: 99999;
  color: white;
  border-radius: 0;
  opacity: 1;
}

.hidden {
  opacity: 0;
  transition: opacity 0s, opacity 0.2s linear;
}

@media (max-width: 500px) {
  .alert p,
  .alert a,
  .alert b,
  footer p,
  footer a,
  footer b {
    font-size: 9pt;
  }
  .alert .container-fluid {
    width: 85% !important;
  }
  .alert .close-footer-button {
    margin-right: 16px;
  }
}

/* FORM STYLING */

select,
input {
  background: rgba(227, 227, 228, 0.5);
  border-radius: 8px;
  padding: 8px;
  border: none;
  margin-top: 12px;
  margin-bottom: 12px;
  color: rgba(86, 86, 86, 0.85);
}

.dropdown select {
  color: rgba(86, 86, 86, 0.85);
  width: 100%;
}

.input-form input {
  color: rgba(86, 86, 86, 0.85);
  color: rgba(86, 86, 86, 0.85);
  width: 100%;
}

.card-form {
  background: rgba(227, 227, 228, 0.5);
  border-radius: 0;
  padding: 8px;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
}

.remove-form-styling {
  background-color: transparent !important;
  border-radius: 0px !important;
  border: none !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  margin: 0 !important;
}

.card-form select {
  /* Hiding arrow */
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
  /* removing all padding */
  box-sizing: border-box;
  border-radius: 0;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

label {
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
  padding-left: 2px;
  padding-right: 2px;
}

label.no-styling {
  margin-top: auto;
  margin-bottom: auto;
  width: 150px;
  padding-left: auto;
  padding-right: auto;
}

/* BUTTON STYLING */

button {
  background: rgba(227, 227, 228, 0.5);
  border-radius: 8px;
  padding: 8px;
  padding-left: 32px;
  padding-right: 32px;
  border: none;
  cursor: pointer;
  opacity: 1;
}

button.no-styling {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

button.table-button {
  padding-left: 12px;
  padding-right: 12px;
  margin-left: 12px;
  margin-right: 12px;
}

button:hover {
  /* Change color on hover */
  opacity: 95%;
  transition: 0.2s;
}

button.drop-shadow {
  -webkit-filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
}

button.success {
  background: var(--success);
  color: white;
}

button.warning {
  background: var(--warning);
  color: white;
}

button.primary-color {
  background: var(--primary-color);
  color: var(--footer-text);
}

button.grey {
  background: var(--dark-grey);
  color: white;
}

button:focus {
  border-radius: 8px !important;
  opacity: 1 !important;
}

button:active {
  transform: scale(1.05);
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
  transition: 0.2s;
  opacity: 1 !important;
}

.floating-top-button {
  position: fixed !important;
  bottom: 40px !important;
  z-index: 50;
  width: 100%;
  opacity: 1 !important;
}

@media (min-width: 992px) {
  .floating-top-button {
    display: none !important;
  }
} 

/* TABLE STYLING */

tbody {
  cursor: pointer;
}

thead tr th {
  /* removing the top line from table to look cleaner */
  border-top: none !important;
  color: var(--dark-grey) !important;
}

td.warning {
  color: var(--warning);
}

/* CARD STYLING */

.card {
  /* Primary White */
  background: #ffffff;
  /* Drop Shadow */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  padding: 20px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.card.fill-height {
  height: 98%;
}

.divider-line {
  opacity: 0.2;
  /* Primary Grey */
  border: 1px solid var(--divider-color);
  fill: var(--divider-color);
  border-radius: 10px;
  margin-top: 0;
  margin-bottom: 10px;
}

.card-image {
  -webkit-filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
  /*border-radius: 20px;*/
  margin-top: 8px;
  margin-bottom: 8px;
}

.card-video {
  -webkit-filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
  margin-top: 12px;
  margin-bottom: 12px;
}

.carousel-image {
  border-radius: 20px !important;
}

.gw-image {
  width: auto !important;
  margin: auto !important;
  padding: auto !important;
  position: unset !important;
  z-index: auto !important;
  /*width: 42px !important;*/
}

.gw-image-bordered {
  border-radius: 20px;
  background-color: white;
  padding: 4px;
  -webkit-filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));
}

.nav-card a {
  text-decoration: none;
}

.sticky-nav-card a {
  margin-top: 2px;
  margin-bottom: 4px;
}

/* Website page background color */
body {
  background-color: var(--background-color);
} /* white */

/* LINKS IN CARDS */
section.card:not(.nav-card) a {
  display: contents !important;
  color: blue !important;
}
section.card:not(.nav-card) a:hover {
  color: #a20000 !important;
}

@media (min-width: 992px) {
  /* makes nav card sticky to the side */
  .sticky-nav-section {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100%;
    padding-bottom: 10px;
  }
  .sticky-nav-card {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    /* top: 145px; */
  }
  .sticky-nav-card a,
  .sticky-nav-card p span {
    margin-top: 2px;
    margin-bottom: 4px;
    font-size: 10pt;
  }
  .header-card,
  .new-header-image {
    border-radius: 0px 0px 20px 20px;
  }
}

/* RESPONSIVE DESIGN */

/* Fixing the container widths for bootstrap */

@media (min-width: 0px) {
  .container-wrapper {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .container-wrapper {
    max-width: 95%;
  }
}

/* bounds width for ultrawide and 4k */

@media (min-width: 2000px) {
  .container-wrapper {
    max-width: 1900px;
  }
}

/* Fade animation between pages */

.animate-in {
  -webkit-animation: fadeIn 0.4s ease-in;
  animation: fadeIn 0.4s ease-in;
}

.animate-out {
  transition: opacity 0.4s;
  opacity: 0;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#google_translate_wrapper {
  background: rgba(227, 227, 228, 0.5);
  padding: 8px;
  padding-left: 32px;
  margin-right: 6px;
  margin-left: 6px;
  padding-right: 32px;
  padding-bottom:  10px;
  padding-top:  10px;
  border: none;
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
  font-family: "Trueno Bold", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal;
  filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.25));
  background-color: #3C4981;
  height:70px;
  
}

.goog-te-gadget img {
  vertical-align: middle;
  border: none;
}

#google_translate_wrapper label {
  vertical-align: middle;
  display: inline-block;
  cursor: auto;
  color:  white !important;
  font-family: "Trueno Bold", sans-serif;

}

#google_translate_element {
  display: inline-block;
  padding:  0;
}
.goog-te-gadget-simple span {
  display: none;
  padding:  0;
}
/* slide down menu */
.SlideDownMenu {
  position: fixed;
  border-radius: 0px;
  left: -25px;
  top:200px;
}
.SlideDownMenu nav {
  background-color: #43638C;
  display: none;
  padding-bottom:0px;
  border-radius: 20px 20px 20px 20px;
  max-height:45vh;
  min-width:10vw;

}
/*Nav Tap*/
.NavTab {
    background-color: #43638C;
    border-radius: 10px 10px 10px 10px;
    overflow-wrap: break-word;
    /* height: 65px; */
    width: 125px;
    padding-bottom:5px;
    padding-left:30px;
    padding-top: 5px;
}
/*Border*/
.NavTab a {
  position: fixed;
}

.NavTab a:before {
  content: "";
  position: relative;
  /* top: 16px; */
  left: 0;
  width: 25px;
  height: 0.125em;
}
.SlideDownMenu ul {
  list-style: outside none none;
  margin: 0;
  padding: 5px ;
  text-align: left;
}

.SlideDownMenu ul li {
display: inline-block;
}
.SlideDownMenu ul li a {
position:relative;
z-index: 1;
display: inline-block;
padding: 5px 5px;
text-decoration: none;
color: white;
margin: 0 10px;
}
.SlideDownMenu ul li a:hover {
color: #fff;
/* background: black !important; */
}

.pointer {
  display: inline-block;
  cursor: pointer;
  /*  */
}
.divider-line2 {
  opacity: 0.2;
  /* Primary Grey */
  border: 1px solid white;
  fill: white;
  border-radius: 10px;
  margin-top: 0;
  margin-bottom: 10px;
}
.SlideDownMenu{
  z-index: 1;
}

.carousel-control-hover {
  opacity: 40% !important;
}

.nav-dropdown-scroll {
  max-height: 400px;
  overflow-y: auto;
  width: auto;
}

.button-square {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  border-radius: 0;
  color:black;
  text-decoration: none !important;
  font-weight: bold !important;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  width: /*220px*/ 100%;
  height: 100px;
  margin: 20px 0px 10px 0px;
  padding: 10px;
}

.button-square ul{
  display: block;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.button-square li{
  text-align: center;
  list-style: none;
}
.button-square hr{
  border: 1px solid black;
  width: 50%;
}

:hover.button-square {
  transform: scale(1.1);
  color:black;
}
/*
@media (max-width: 600px){
  .button-square {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
*/
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

th {
  text-align: center;
  background-color:lightgrey;
}
/* accessibility */
section.card:not(.nav-card) a {
  display: inline !important;
  color: blue !important;
  text-decoration: underline;
}

section.card:not(.nav-card) a:hover, 
section.card:not(.nav-card) a:focus{
  color: #a20000 !important;
  background-color: white !important;
}
#skip-to-main {
  margin: 0;
  padding: 0;
}

#skip-to-main a {
  width: 280px;
  display: block;
  color: #fff;
  background: #333;
  text-decoration: none;
  padding: 5px;
  position: absolute;
  left: -1000px;
  top: 0;
  font-weight: bold;
}

#skip-to-main a:visited {
  color: #fff
}

#skip-to-main a:focus,
#skip-to-main a:active {
  z-index: 9999;
  left: auto;
  border: solid #777 2px;
  color: #fff !important;
  background: #333 !important
}

.skip-target {
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#nav_tab_title a:focus,
#nav_tab_title a:active {
    border: none;
}

#nav_tab_title:has(a:focus),
#nav_tab_title:has(a:active) {
    border: #000 2px solid;
}