* {
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 16px;
}

body {
    text-align: center; /* Centers the page in older browsers */
    background-color: #FFF;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}

#container {
    background-color: #FFF;
    margin: 0 auto;    /* Centers the page in modern browsers */
    text-align: left;  /* Centers the page in older browsers */
    width: 100%;      /* This sets our total page width */
}

#header {
    background-color: #FFF;
    width: 100%;      /* This sets the header to stretch the full page width */
    /*height: 120px;*/
}

#navigation li {
    display: inline;   /* Make our navigation display in a line */
    float: right;
}

#subNav {
    background-color: #06ABBA;
}

#content {
    background-color: #FFF;
    /*float: left;*/     /* This causes the content to move to the right */
    width: 100%;        /*  Set the width when floating an element */
}
.content-inner {
    /*width: 66.666667%;
    margin: auto;
    margin-bottom: 5em;*/
}


#sidebar {
    
    float: right;       /* This causes the sidebar to move to the left */
    /*width: 240px;*/   /*  Set the width when floating an element */
    width: 100%;
    padding: 0 1em;     /* 16px */
    text-align:center;
}

#footer {
    width: 100%;
}


img {

}

/*============================================ TEXT FORMATTING ===================================================*/

h1 {

}

.bold {
    font-weight:bolder;
}

.emphasis {
    font-style: italic;
}

.underline {
    text-decoration:underline;
}

.center {
    text-align: center;
}

.no-bullets {
     list-style-type: none;
     margin: 0;
     padding: 0;
}


/*===================================================== RESPONSIVE DESIGN ===============================================*/

/* For mobile phones: */
[class*="col-"] {
    width: 100%;  /* Reduce column width to 1, 100% of viewport */
    float: left;
    padding: 1em; /* 16px */
}

@media (max-width: 768px) 
{
    /* Hide spacing columns when on mobile to tighten up design*/
    .col-1, .col-2 {
        display: none;
    }
}


@media only screen and (max-width: 600px) {
/* Extra small devices (phones, 600px and down) */
    .youtube {
        /*width:280px;
        height:157.5px;*/
        width: auto;
        height: auto;
    }   

}


@media only screen and (min-width: 600px) {
/* Small devices (portrait tablets and large phones, 600px and up) */
/* Columns for tablets: */
      .col-s-1 {width: 8.33%;}
      .col-s-2 {width: 16.66%;}
      .col-s-3 {width: 25%;}
      .col-s-4 {width: 33.33%;}
      .col-s-5 {width: 41.66%;}
      .col-s-6 {width: 50%;}
      .col-s-7 {width: 58.33%;}
      .col-s-8 {width: 66.66%;}
      .col-s-9 {width: 75%;}
      .col-s-10 {width: 83.33%;}
      .col-s-11 {width: 91.66%;}
      .col-s-12 {width: 100%;}


    .youtube {  /* Youtube thumbnail resize */
        /*width:420px;
        height:236.25px;*/
        width: 480px;
        height: 270px;
    }   

}


@media only screen and (min-width: 768px) {
/* Medium devices (iPad, landscape tablets, 768px and up) */
/* Also these column sizes apply to desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}

    .youtube {
        width:500px;
        height:281.25px
    }   

}

/* Large devices (iPad Pro, laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .youtube {
        width:560px;
        height:315px;
    }  
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}

.responsive {
  max-width: 100%;
  height: auto;
  font-size: calc(8px + .5vw); /*minimum font size of 7pt and scale up from there depending on viewport width*/

}

.responsive-lg {
    font-size: calc(1em + .25vw);
}

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


/* ================================================== NAVIGATION MENU =========================================================*/


/* Add a black background color to the top navigation */
.topnav {
  background-color: #405b8a;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 0.875em 1em; /* 14px 16px*/
  text-decoration: none;
  font-size: 1em;
}

.topnav a:visited {
    color: #f2f2f2;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #003366;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 1em;
  border: none;
  outline: none;
  color: white;
  padding: 0.875em 1em; /* 14px 16px*/
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #6e8ec4;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown a:visited {
    color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 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: 768px) {
    .topnav {
        display: block;
        font-size: 1em;
        height: auto;
    }
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (min-width: 768px) {
    .full-width-img {
        margin: auto;
        width: 90%;

    }
}

/* Reset navbar look when going from small to large view.  Otherwise menu font shrinks from 
    the 'responsive' flag thrown on by the javascript */
@media screen and (min-width: 768px) {
    .topnav {
        font-size: 1em;
        height: 50px;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }
}

/* 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: 768px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    font-size: 1em;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


/* ================================================== PHP LOGO =========================================================*/

@media screen and (max-width: 768px) {
    .mobile-hide {display: none;}
    .mobile-full {width: 100%;}
    .mobile-center {background-position: center;}
 
    .toplogo {
        background-image: url("../Images/txphp-trunc-lg.png");
        width: 100%;
        height: 88px;
        background-repeat: no-repeat;
        background-size: 200px auto;
        
    }
}
@media screen and (min-width: 768px) {
    .toplogo {
        /*background-image: url("../Images/hero02.jpg");*/
        background-image: url("../Images/txphp-logo-01.png");
        width: 300px;
        height: 140px;
        background-repeat: no-repeat;
        background-size: 300px auto;
        margin: .5em;
    }
}


.logo-txt {
    font-size: medium;
    margin: 0;
    text-align: center;
    font-family: Arial;
}

.logo-text-sub {
    font-size: smaller;
    margin: 0;
    text-align: center;
    font-family: Arial;
}

/*==================================================== Address =========================================================*/
@media  screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .address {
        display: none;
    }
}

@media screen and (min-device-width : 768px) {
    .address {
        text-align: right;
        margin-top: 1.5em;
    }
}
.top {  
}
/* ================================================== HERO BANNER ======================================================*/
@media screen and (max-width: 768px) {
    .hero-image {
        display: none;
    }
}

.hero-image {
  background-image: url("../Images/hero02.jpg");
  /* Set a specific height */
  height: 200px;
  clear:both;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  border-bottom: 3px solid gray;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}


/* ===================== FOOTER ======================= */

#footer 
{      
    background-color: #405b8a;
    clear: both;       /* This makes sure that the footer clears both the sidebar and content floats */
    padding: 0 0 1.25em 0; /* 20px 0*/
	text-align: center;

}

.footer-title {		
	color: #FFF;
	padding-bottom: 0.5em; /* 8px */
}

.footer-body ul {
	margin: 0;
	padding: 0;
	color: #FFF;
}

.footer-body ul li {
	/*display: block;
    width: 20%;
    float: left; */
    text-align: left;
    text-decoration: none;
    display: block;
}

.footer-body ul li::after {
    display: inline-block;
}

.footer-body ul li a {
	color: #FFF;
	text-decoration: none;
    font-size: 1em;
}

.footer-body ul li a:hover{
	color: #7fb51c;
}

.border-line {
    border-right: 1px solid #26486b;
}

.footer-body {
    padding-left: 3em;
}
/*===================== SUB SECONDARY MENU =======================*/

.subnav {               /* Add a white background color to the top navigation */
  background-color: #405b8a;
  overflow: hidden;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.subnav ul {
    margin: 0;
    padding: 0;
}

.subnav li {
    display: inline-block;
    border-right: 2px solid #FFF;
}

.subnav li:last-child{
    border-right: 0;
}

.subnav li a {             /* Style the links inside the navigation bar */
  float: left;
  color: #FFF;
  padding: 0 16px;
  text-decoration: none;
  font-size: 17px;
  width: auto;
  border-right: 1px #fff;

}

.subnav a:hover {
    text-decoration:underline;
}

.subnav a:visited {
    color: #fff;
}

.subnav .icon {         /* Hide the link that should open and close the topnav on small screens */
  display: none;
}


/*========================= MAIN CONTENT FORMATTING ===========================*/

h1 {
    font-size: 2em;
    text-align: center;
    color: #003366;
}

h2 {
    font-size: 1.5em;
    color: #003366;
}

h3{
    font-size: 1.25em;
    color: #003366;
    font-weight: bold;
}

h4 {
    font-size: 1.17em;
    font-variant:small-caps;
    color: #000;
    font-weight: bold;
}

.sidebar a {
    color: #2c3e09;
}

.callout {

}

.callout img {
    width: 400px;
}

a {
    color: #003366;
}

a:visited {
    color: #12273b;
}

a:hover {
    color: #5a7ab2;
}

.indent {
    margin-left: 40px;
}

.bio{
    /*display: flex;
    justify-content: center;
    align-items: center;*/
}
.bio img {
    height: 300px;
    max-height: 300px;
    margin: 2em 1em 1em 0;
}

.lfloat {
    float: left;
}

.rfloat {
    float: right;
}
/*====================================== Donations =================================*/

a.donatebtn {
    display: inline-block;
    padding: 0.46em 1.6em;
    border: none;
    margin: 0 0.2em 0.2em 0;
    border-radius: 0.12em;
    box-sizing: border-box;
    text-decoration: none;
    color: #FFF;
    
    text-shadow: 0 0 2em rgba(255,255,255,1);
    background-color: #61900c;
    text-align: center;
    transition: all 0.15s;
    width: 200px;
}
a.donatebtn:hover{
    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
    color:#FFFFFF;
    border-color:rgba(0,0,0,0.2);
    background-color: #7fb51c;
}
@media all and (max-width:30em){
    a.donatebtn {
        display: block;
        margin: 0.4em auto;
    }
}

.donate p {

}

.donate img {
    max-height: 300px;
    margin: auto;
    display: block;
    margin-bottom: 40px;
}

/* Medium devices (iPad, landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .donate img{
        float:right;
        padding: 0 40px;
    }
}

/*================================================ Donation Form ==============================================*/

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
        display: inline-block;
    padding: 0.46em 1.6em;
    border: none;
    margin: 0 0.2em 0.2em 0;
    border-radius: 0.12em;
    box-sizing: border-box;
    text-decoration: none;
    color: #FFF;
    
    text-shadow: 0 0 2em rgba(255,255,255,1);
    background-color: #61900c;
    text-align: center;
    transition: all 0.15s;
    width: 200px;
    font-size: 1em;
    cursor: pointer;
  /*background-color: #61900c;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;*/
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
    color:#FFFFFF;
    border-color:rgba(0,0,0,0.2);
    background-color: #7fb51c;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/*================================================== Card ==================================================*/

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  background-color: #FFF;
  max-width: 320px;
  min-width: 260px;
  margin: auto;

}

/* Add some padding inside the card container */
.cardlist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.cardrow {

}

.cardcol {

}

.card h1 {
    font-size: large;
}

.card img {
    float:left;
    width: 60px;
    height: 60px;
}

.cardbanner {
    background-color: #9AB545;
    max-width: 100%;
    margin: 0;
    padding: 10px 10px 20px 10px;
}

.card p{
    display: block;
    margin:auto;
    padding: 10px 0 0 10px;
    font-size: 1em;
}

.card ul{
    margin-block-start: .5em;
}

.card ul li{
    padding: 3px 15px;
    font-size: 1em;
}

.card ul li:last-child{
    padding-bottom: 15px;
}

.card a {
    text-decoration:none;

}

.card a.button {

  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: gray;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card a.button:hover {
  opacity: 0.7;
}

/*.left.cardcontainer {
    max-width: 300px;
    width: 250px;
    height: auto;
}

.left.cardcontainer h3 {
    color: #003366;
    text-align: center;
}*/

/*============================================== Columns =====================================================*/

/*.col-container {
    display: table; 
    width: 100%;
}*/

.row {

}
.col {
    /*display: table-cell; /* Make elements inside the container behave like table cells */
    /*padding: 20px;*/
}

.left {
  width: 25%;
}

.left-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.right {
    width: 75%;
    padding-right: 100px;
    padding-bottom: 5em;
}

.full {
    /*width: 100%;
    display: inherit;*/
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns 
    stack on top of each other instead of next to each other */
@media screen and (max-width: 690px) {
  .col right left{
    width: 100%;
    padding-bottom: 5em;
  }
}

.right h1 {
    text-align:left;
}

.phy {
 float: left;
}
/*================================================= FORMS ===================================================*/


.forms {

  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
  -webkit-column-rule: 1px dotted #ddd;
     -moz-column-rule: 1px dotted #ddd;
          column-rule: 1px dotted #ddd;
  -webkit-column-width: 540px;
     -moz-column-width: 540px;
          column-width: 540px;

}

.forms h1{
      -webkit-column-span: all; 
          column-span: all; 
}
.forms ul {
    /* Override user agent stylesheet formatting */
    margin-block-start: 0;
     margin-block-end: 0;
    padding-inline-start: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;

   

}

.forms ul li {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  background-color: gray;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  color: #FFF;
  margin-bottom: 20px;
  flex-wrap: nowrap;
    break-inside: avoid-column;
  page-break-inside: avoid;
  
  
}

.forms a {
    color: white;
    text-decoration: none;
    margin-left: 30px;

}

.forms a:hover {
    text-decoration:underline;
}

.forms img {
    width:65px;
    height: 65px;
    padding: 10px;
    background-color: #9AB545;
}

.forms ul {
    list-style-position: outside;

}

.forms p{
    text-align: center;
      -webkit-column-span: all; 
          column-span: all; 
}

.forms ul li p {
    padding-left: 1em;
    text-align:left;
}

@media only screen and (max-width: 540px) {
    .forms ul li p {
    font-size: calc(12px + .25vw);
    }
}
/*=========================================== Associations ===========================================*/

.linkflag {

  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
  -webkit-column-width: 400px;
     -moz-column-width: 400px;
          column-width: 400px;
}

.linkflag h1{
      -webkit-column-span: all; 
          column-span: all; 
}


.linkflag ul {
    /* Override user agent stylesheet formatting */
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.linkflag ul li {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  background-color: gray;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  color: #FFF;
  margin-bottom: 30px;
  flex-wrap: nowrap;
  break-inside: avoid-column;
  page-break-inside: avoid;
  max-height: 78px;
}

.linkflag a {
    color: white;
    text-decoration: none;
}

.linkflag a:hover{
    text-decoration:underline;
}

.linkflag img {
    width:78px;
    height: 78px;

    padding: 10px;
    background-color: #9AB545;
}

.linkflag ul {
    list-style-position: outside;

}

.linkflag ul li p {
    padding-left: 1em;
    text-align:left;
}

.linkflag p {
    text-align: center;
      -webkit-column-span: all; 
          column-span: all; 
}

@media only screen and (max-width: 768px) {
    .linkflag ul li p {
    font-size: calc(12px + .25vw);
    }
}

@media screen and (max-width: 768px){
    .linkflag ul li{
        margin-bottom: 20px;
    }
}
/*=========================================== Articles ===========================================*/

.articles {
      -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
  -webkit-column-width: 540px;
     -moz-column-width: 540px;
          column-width: 540px;
}

.articles h1{
      -webkit-column-span: all; 
          column-span: all; 
}

.articles ul {
    /* Override user agent stylesheet formatting */
    margin-block-start: 0;
     margin-block-end: 0;
    padding-inline-start: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.articles ul li {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  background-color: gray;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  max-width: 540px;
  color: #FFF;
  margin-bottom: 20px;
  flex-wrap: nowrap;
    break-inside: avoid-column;
  page-break-inside: avoid;
}
.articles ul li p {
    padding-left: 1em;
    text-align:left;
}

.articles a {
    color: white;
    text-decoration: none;

}

.articles img {
    width:78px;
    height: 78px;
    padding: 10px;
    background-color: #9AB545;
}

.articles ul {
    list-style-position: outside;

}

.articles p {
    text-align: center;
      -webkit-column-span: all; 
          column-span: all; 
}
@media only screen and (max-width: 540px) {
    .articles ul li p {
     font-size: calc(12px + .25vw);
    }
}


/*================================================= About Us ======================================================*/

.emergency {
    font-weight: bold;
    color: red;
    text-align: center;
    margin-bottom: 40px;
}

.about h3 {
    color: #003366;
}

.about ul {
    margin-bottom: 5px;
}
.no-bullet {
    list-style-type:none;
}

.about img {
    max-height: 300px;
    margin: auto;

}

/* Medium devices (iPad, landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .about img{
        float:right;
        padding: 0 40px;
    }
}

@media screen and (max-width: 768px) {
    .bio img{
        display: block;
        margin: 2em auto 0 auto;
        float: none;
    }
}
/*===================================================== Services ====================================================*/
.services .cardcontainer {
}

.services .cardlist {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.services .card h1 {
    font-size: large;
}

.services .card img {
    display: block;
    margin-right: 15px;
    float:left;
    width: 60px;
    height: 60px;
}

.services .cardbanner {
    background-color: #9AB545;
    margin: 0;
    padding: 10px 10px 20px 10px;
}

.services .card p{
    display: block;
    margin:auto;
    padding: 10px;
}

.services .card ul{

}

.services .card ul li{
    padding: 3px 15px;
    font-size: smaller;
}

.services .card a {
    text-decoration:none;
    width: 100%;
}

.services .card a.button {

  padding: 12px 0px;
  color: white;
  background-color: gray;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
    display: flex;
    align-items:flex-end;
    justify-content: center;
    align-content: center;
}

.services .card a.button:hover {
  opacity: 0.7;
}

.services .card {
    margin-bottom: 50px;
}

/*=========================================================== News =====================================================*/

.news .date {
    background-color: #9AB545;
    color: #003366;
    margin:0;
    width: 100%;
}

.news {
    margin: auto;
    margin-bottom: 5em;
    padding-bottom: 1em;
}


/*============================================== BOARD CALENDAR ==================================*/

table.paleBlueRows {
  /*font-family: "Times New Roman", Times, serif;*/
  border: 1px solid #FFF;
  text-align: center;
  border-collapse: collapse;
  margin: auto;

}

table.paleBlueRows td, table.paleBlueRows th {
  border: 5px solid #FFFFFF;
  padding: 10px 15px;
}

table.paleBlueRows tbody td {
  font-size: 1em;
}

table.paleBlueRows tr:nth-child(even) {
  background-color: #c0d2f1;
}

table.paleBlueRows tr:nth-child(odd) {
  background-color: #f2f2f2;
}

table.paleBlueRows thead {
  background: #0B6FA4;
  border-bottom: 1px solid #FFFFFF;
}

table.paleBlueRows thead th {
  font-size: 1.25em;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #FFFFFF;
  background-color: #405b8a;
}

table.paleBlueRows thead th:first-child {
  border-left: none;
}

table.paleBlueRows tfoot {
  font-size: 1em;
  font-weight: bold;
  color: #333333;
  background: #D0E4F5;
  border-top: 3px solid #444444;
}

table.paleBlueRows tfoot td {
  font-size: 1em;
}


table.paleBlueRows tbody tr td img {
    padding-right: 0.5em;
}

table.paleBlueRows a {
    display: flex;
    justify-content: center;
}
    

/* =================================================================== TOP BUTTON ==================================================*/
#toTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #61900c;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
}

#toTopBtn:hover {
  background-color: #555;
}


/* ================================================= TOOLTIP =================================================*/
/* Tooltip Wrapper */
.has-tooltip {
  position: relative;
}
.has-tooltip .tooltip {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s ease 0.5s,opacity .3s ease-in;
  -moz-transition: visibility 0s ease 0.5s,opacity .3s ease-in;
  -o-transition: visibility 0s ease 0.5s,opacity .3s ease-in;
  transition: visibility 0s ease 0.5s,opacity .3s ease-in;
}
.has-tooltip:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

/* Tooltip Body */
.tooltip {
  background-color: #222;
  bottom: 130%;
  color: #fff;
  font-size: 12px;
  left: 50%;
  margin-left: -56px;
  padding: 6px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  width: 186px;
  z-index: 4;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

/* Tooltip Caret */
.tooltip:after {
  border-top: 5px solid #222;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  bottom: -5px;
  content: " ";
  font-size: 0px;
  left: 50%;
  line-height: 0%;
  margin-left: -4px;
  position: absolute;
  width: 0px;
  z-index: 1;
}