@import url('https://fonts.googleapis.com/css?family=Fira+Sans:500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700&display=swap');
/* Core Stuff */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:root{
	--CATC_grey: #515E5D;
	--CATC_red: #D50037;
	--CATC_light-blue: #1EB9FA;
	--CATC_white: #FFFFFF;
	--CATC_10-tint: #E5EBED;
	--CATC_blue-grey: #003B4A;
	--CATC_blue-shade: #0F5D7D;
	--CATC_40-tint: #A5E3FD;
}

body {
    font-size: 1rem;
    line-height: 1.7;
    font-family:'Open Sans', sans-serif;
    font-weight: 400;
    color: var(--CATC_grey);

}

#item > h1,
#item > h2,
#item > h3,
#item > h4,
#item > h5,
#item > h6 {
    color: var(--CATC_grey);
    font-family: 'Fira Sans', sans-serif;
    font-weight: 500;
    font-style: normal;
}

a {
    color: var(--CATC_light-blue);
    text-decoration: none;
}

a:hover {
    color: var(--CATC_blue-shade);
}

/* Utility Classes */
/* wrapper was squeezing text too much on phones so remove it
.wrapper {
    margin: 0 3rem;
}
*/
.padding {
    padding: 1rem;
}

.sg-header {
    display: flex;
    position: relative;
}

.nav-logo {
    width: 80px;
    position: absolute;
    display: inline;
    margin-left: 10px;
    margin-top: 10px;
}

.text-center {
    text-align: center;
}

/* Content Styling */
#header {
    background-color: var(--CATC_red);
    border-bottom: 10px solid var(--CATC_10-tint);
    height: 50px;`
}

.off-canvas-wrapper {
    overflow-x: unset;
}

.up-arrow {
  text-align: center;
  font-size: 4em;
}

.footer {
    background-color: var(--CATC_blue-grey);
    height: 65px;
    border-top: 5px solid var(--CATC_grey);
}

.footer-text {
	color: var(--CATC_10-tint);
	font-size: 0.875rem;
	line-height: 1.4;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	margin-left: 20px;
	padding-top: 13px;
}

.footer-email-div {
	display: inline-grid;
	padding-top: 13px;
}

.footer-logo {
	width: 120px;
	margin-left: 35px;
	margin-top:15.5px;
}
.footer-wrapper{
	display:-webkit-inline-box;
}
.myheader{
  background-color: var(--CATC_red);
  background-repeat:no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;   
  background-size:cover;
  background-position: left bottom;
  width: auto;   
}

.header-logo {
    width: 350px;
    z-index: 999;
    position: absolute;
    top: 25px;
    left: 25px;
}
/* Menu Settings */
.main-nav ul {
    position: absolute;
    right: 0;
    letter-spacing: -1em;
    margin-top: 6px;
    padding: 0;
}

.main-nav ul li {
    display: inline;
    letter-spacing: normal;
}

.main-nav ul li a {
    color:var(--CATC_white);
    padding: 6px 12px 6px;
    border: 0;
    margin-left: 0;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    font-size: 18px;
}

.main-nav > ul > li > a {
    border-radius: 2px;
}

/*Active dropdown nav item */
.main-nav ul li:hover > a {
    background-color:var(--CATC_10-tint)!important;
    color:var(--CATC_grey);
}

/* Selected Dropdown nav item */

/* Dropdown CSS */
.main-nav ul li {
position: relative;
}

.main-nav ul li ul {
    position: absolute;
    background-color:var(--CATC_red);
    min-width: 100%;
    text-align: left;
    z-index: 999;
    display: none;
}
.main-nav ul li ul li {
    display: block;
}

/* Dropdown CSS */
.main-nav ul li ul ul {
    left: 100%;
    top: 0;
}

/* Active on Hover */
.main-nav li:hover > ul {
    display: block;
}

/* Child Indicator */
.main-nav .has-children > a {
}
.main-nav .has-children > a:after {
    font-family: FontAwesome;
    content: '\f107';
    right: 8px;
    top: 0;
}

.main-nav .has-children .has-children > a:after {
    content: '\f105';
}

.main-nav .has-children > ul li a {
    font-size: small;
    background-color: var(--CATC_red);
}

.main-nav .has-children > ul li {
    width: 150px !important;
}

/*Sidebar Styling*/
.sidebar-content {
  margin-bottom: 14px!important;
  font-family: "Poppins", sans-serif;
  color: var(--CATC_grey);
}

.side-search >  h5  {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 400; 
  margin-top: 24px;
  font-family: "Poppins", sans-serif;
  color: var(--CATC_grey);

}

.sidebar-content > h5, 
.sidebar-content > h4,
.sidebar-content > h3,
.sidebar-content > h2,
.sidebar-content > h1 {
	font-weight: 700;
	font-family: "Poppins", sans-serif;
	color: var(--CATC_grey);
}
.sidebar-content >  p {
	font-size: 1rem;
	line-height: 1.6;
	font-weight: 400;
}

.search-input::placeholder {
	color: var(--CATC_blue-grey);
}

.search-input {
	border: 1px solid var(--CATC_10-tint);
}

/* Style Table */
table {
	font-family: "Poppins", sans-serif;
	color: var(--CATC_blue-grey);
	font-size: 0.9375rem;
	line-height: 1.7;
	font-weight: 400;
}
table tbody tr:nth-child(even) {
    background-color: var(--CATC_10-tint);
}
table thead,
table tfoot {
	font-weight: 500;
	color: var(--CATC_blue-grey);
	background-color: var(--CATC_10-tint);
}

/* tablesorter styling - modify the builtin blue theme */

.tablesorter-blue tbody>tr.odd.hover>td, 
.tablesorter-blue tbody>tr.odd:hover+tr.tablesorter-childRow+tr.tablesorter-childRow>td, 
.tablesorter-blue tbody>tr.odd:hover+tr.tablesorter-childRow>td, 
.tablesorter-blue tbody>tr.odd:hover>td {
	background-color: var(--CATC_40-tint);
}

.tablesorter-blue tbody>tr.even.hover>td, 
.tablesorter-blue tbody>tr.even:hover+tr.tablesorter-childRow+tr.tablesorter-childRow>td, 
.tablesorter-blue tbody>tr.even:hover+tr.tablesorter-childRow>td, 
.tablesorter-blue tbody>tr.even:hover>td, .tablesorter-blue tbody>tr.hover>td, 
.tablesorter-blue tbody>tr:hover+tr.tablesorter-childRow+tr.tablesorter-childRow>td, 
.tablesorter-blue tbody>tr:hover+tr.tablesorter-childRow>td, 
.tablesorter-blue tbody>tr:hover>td {
	background-color: var(--CATC_40-tint);
}

.tablesorter-blue td{
	color: var(--CATC_blue-grey);
	font-family: "Poppins", sans-serif;
/* 	font-size: 0.9375rem;*/
	font-weight: 400;
	line-height:1.7;	
	
}

.tablesorter-blue th, 
.tablesorter-blue thead td {
	background-color: var(--CATC_10-tint);
	color: var(--CATC_blue-grey);
	font-family: "Poppins", sans-serif;
/*	font-size: 0.9375rem;*/
	font-weight: bold;
	line-height: 1.7;
}

.tablesorter-blue tbody tr.odd>td {
    background-color: var(--CATC_10-tint);
} 

/* Manage sidebar collapsing to hamburger menu when window small*/
@media only screen and (max-width: 800px) {
    .myheader {
        height: 100px;
}
    #hamburger-menu {
    color: var(--CATC_white);
    cursor: pointer;
    font-size: 2rem;
    margin-right: 1rem ;
    margin-top: 5px ;
    position: absolute;
    right: 0;
    z-index: 1;
}
    #header {
	transition: height 1s;
}   

    .main-nav{
	visibility: hidden;
	opacity: 0;
	transition: visibility;
}

    .main-nav.responsive {
	position: absolute;
	left: 50%;
	visibility: visible;
	opacity: 1;
	transition: visibility ease-in 0.5s 0.3s, opacity ease-out 2s;
}
/*
  This is tricky.  The left 50% above creates a centered line.  The problem is
  that the ul block aligns either to the left or right of this line, not in its
  middle.  So, the strategy being used here is to physically shift the ul block
  to the left a distance equal to half its width.  This is where the -95px came
  from below.  The problem is that the width of the ul depends upon the entries
  in the navigation menu.  The word "Conferences" determines the 95px width.
  If this word is eliminated or a larger one put in, then then -95px value may
  need to be updated to reflect the change.  The advantage of the current
  strategy is that the drop down menu does indeed remain centered correctly,
  even with variable screen widths.
*/
    .main-nav ul {
	right: unset;
	left: -95px;
}
    .main-nav ul li{
	display: block;
	float: none;
	text-align: center;
}
    .header-logo {
	width: 295px;
} 
	table {
        font-size: 0.625rem;
}

	table tbody th,
	table tbody td {
		padding:0.35rem;
}

}
@media only screen and (min-width : 800px) {
    .myheader {
        height: 120px;
    }
    #hamburger-menu {
	display: none;
     }
    #header {
	height: 50px!important;
	}
}
/* Styling for toggle block */
.start-hidden{
	display: none;
}
.toggle-label > * {
	display: inline-block;
 }

.toggle-label > .fa {
	font-size: x-large;
}

/* Form Styling */

.catc-inline-flex {
        display: inline-flex;
}
.catc-inline-block {
        display: inline-block;
}
.catc-flex {
        display: flex;
}
.catc-margin-top {
        margin-top: 15px;
}
.catc-margin-left {
        margin-left: 10rem;
}
.catc-radio {
        margin-top: 5px;
        margin-left: 10px;
}
.catc-text {
        margin-right: 10px;
}
.catc-checkbox {
        margin: 5px 5px 5px 5px;
}
.catc-fieldset legend {
  display: block;
  margin: 0;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.8;
  color: #0a0a0a; }

form > .has-errors {
  background: rgba(255,0,0,0.05);
  border: 3px solid rgba(255,0,0,0.2);
  border-radius: 5px;
  padding: 0 5px;
}
.red {
  color: #EC5840;
}
.green {
  color: #228B22;
}
.yellow {
  color: #FFFF00;
}
.notices {
  margin: 1.5rem 0;
  padding: 0.4rem;
  font-weight: bold;
  border-left: 7px solid;
  background: lightgoldenrodyellow;
}