/*main page css*/

#container-2020 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 1550px;  
}

#navbar-2020 {
  width: 25%;
}

#content-2020 {
  width: 75%;
}

/*menu css*/

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
#cssmenu {
  width: 300px;
  color: black;
  float: left;
}
#cssmenu ul ul {
  display: none;
}
#cssmenu > ul > li.active > ul {
  display: block;
}
.align-right {
  float: right;
}

#cssmenu ul li.activePage > a:link, #cssmenu ul li.activePage > a:visited, 
#cssmenu ul li.activeMainPage > a:link, #cssmenu ul li.activeMainPage > a:visited {
  background: #F2F2F2 !important;
  color: #01295F !important;
  font-size: 25px;
  font-weight: 700;
  text-shadow: none;
  border-top: 8px solid #4BB1BA;
  border-bottom: 2px solid #FFF;
  text-decoration: none !important;
}


#cssmenu ul li.activePage > a:hover{
  background: #CBCBCB !important;
}

.cssmenu-selected-page{
  font-weight: 700 !important;
}

#cssmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  text-decoration: none;
  color: #01295F !important;
/*  background: #ffffff;*/
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  line-height: normal;
}
#cssmenu > ul > li > a:hover {
  color: black;
}

#cssmenu ul ul li a {
  padding: 14px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  color: #01295F !important;
  background: #ffffff;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul ul li a {
  padding-left: 32px;
}
#cssmenu ul ul li a:hover {
  color: #01295F !important;
}
#cssmenu ul ul > li.has-sub > a:after {
  top: 16px;
  right: 26px;
  background: #dddddd;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 20px;
  background: #dddddd;
}

.cssmenu-level-one{
  background: #F2F2F2 !important;
  border-bottom: 2px solid #FFF !important;
}

.cssmenu-level-one:hover{
   background: #CBCBCB !important;
}


.cssmenu-level-two{
    border-bottom: 1px solid #4BB1BA !important;
}

.cssmenu-level-two:hover{
    background: #F2F2F2 !important;
}

.cssmenu-level-three{
  padding-left: 20px !important;
  border-bottom: 1px solid #4BB1BA !important;
}

.cssmenu-level-three:hover{
    background: #F2F2F2 !important;
}

.cssmenu-level-four{
  padding-left: 40px !important;
  border-bottom: 1px solid #4BB1BA !important;
}

.cssmenu-level-four:hover{
    background: #F2F2F2 !important;
}
.cssmenu-level-five{
  padding-left: 60px !important;
  border-bottom: 1px solid #4BB1BA !important;
}

.cssmenu-level-five:hover{
    background: #F2F2F2 !important;
}

/* #arrow-pointer{
  float: right;
  position: relative;
  display: inline-block;
  vertical-align: top;
} */

.horizontal-rule-lightblue {
  width: 125px;
  border-bottom: 5px solid #4BB1BA;
  margin-bottom: 35px;
  margin-left: 5px;
}

/*card boxes*/

.box {
  float: left;
  width: 300px;
  margin-right: 15px;
  margin-bottom: 25px;
  margin-left: 0px;
}

.box-nw {
  float: left;
  margin-right: 15px;
  margin-bottom: 25px;
}

.callout {
  bottom: 35px;
  float: left;
  border: 1px solid #4BB1BA;
  margin-left: 5px;
  min-width: 295px;
}

.callout:hover, .callout:active, .callout:focus {
  -moz-box-shadow: 0 0 15px #4BB1BA;
  -webkit-box-shadow: 0 0 15px #4BB1BA;
  box-shadow: 0 0 15px #4BB1BA;
}

.callout-header {
  padding: 15px 5px 1px 15px;
  height: 50px;
  background: #F2F2F2 !important;
  font-size: 16px;
  text-decoration: none;
  border-top: 8px solid #4BB1BA;
  text-decoration: none;
  color: #01295F !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}


.callout:hover  > .callout-header{
   text-decoration: underline;
}

.callout:hover  > .callout-header-2l{
   text-decoration: underline;
}


.callout-header-2l {
  padding: 10px 5px 1px 15px;
  height: 55px;
  background: #F2F2F2 !important;
  font-size: 16px;
  text-decoration: none;
  border-top: 8px solid #4BB1BA;
  text-decoration: none;
  color: #01295F !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.callout-container {
  padding: 15px;
  height: 135px;
  font-size: 14px;
  color: #000000;
  font-family: Helvetica, Arial, sans-serif;
}

.callout-container-nh {
  padding: 15px;
  font-size: 14px;
  color: #000000;
  font-family: Helvetica, Arial, sans-serif;
}

.box-small {
  float: right;
  width: 150px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-left: 5px;
}

.callout-small {
  bottom: 5px;
  float: left;
  border: 1px solid #4BB1BA;
  margin-left: 5px;
  margin-top: -3px;
}

.callout-small:hover, .callout:active {
  -moz-box-shadow: 0 0 15px #4BB1BA;
  -webkit-box-shadow: 0 0 15px #4BB1BA;
  box-shadow: 0 0 15px #4BB1BA;
}


.callout-header-small {
  padding-top: 5px;
  padding-bottom: 1px;
  height: 32px;
  background: #F2F2F2 !important;
  font-size: 16px;
  text-decoration: none;
  border-top: 8px solid #4BB1BA;
  text-decoration: none;
  color: #01295F !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.callout-container-small {
  padding: 5px;
  height: 88px;
  font-size: 14px;
  color: #000000;
  font-family: Helvetica, Arial, sans-serif;
}

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

#landing-title{
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  padding-left: 7px;
  padding-bottom: 18px;

}

.landing-Text{
    padding-left: 7px;
}

.information-box{
  border: 2px solid #4BB1BA;
  margin-bottom: 10px;
}

.information-box-hover{
  border: 2px solid #4BB1BA;
  margin-bottom: 10px;
}

.information-box-hover:hover, .information-box-hover:active {
    -moz-box-shadow: 0 0 15px #4BB1BA;
    -webkit-box-shadow: 0 0 15px #4BB1BA;
    box-shadow: 0 0 15px #4BB1BA;
}


.information-box-top{
  background: #F2F2F2 !important;
  color: #01295F !important;
  font-size: 20px;
  text-shadow: none;
  border-top: 8px solid #4BB1BA;
  text-decoration: none !important;
  width: 100%;
}

.information-box-top > h4 {
  margin-top: 5px;
  margin-left: 15px;
}

.information-box-bottom{
  text-shadow: none;
  text-decoration: none !important;
  width: 100%;
}

.information-box-bottom > p {
  margin: 15px;
}

.recording-box{
  border: 2px solid #4BB1BA;
  margin-bottom: 10px;
}

.recording-box-myttac {
  float: left;
  border: 2px solid #4BB1BA;
  width: 48%;
  padding: 0;
  margin: 0 10px 10px 0;
}

.recording-box-top {
  background: #F2F2F2 !important;
  color: #01295F !important;
  font-size: 20px;
  text-shadow: none;
  border-top: 8px solid #4BB1BA;
  border-bottom: 2px solid #4BB1BA;
  text-decoration: none !important;
  width: 100%;
  min-height: 75px;
}
.recording-box-myttac > .recording-box-top {
  font-size: 18px;
}

.recording-box-top > h4 {
  margin-top: 15px;
  margin-left: 20px;
}
.recording-box-myttac > .recording-box-top > h4 {
  margin-bottom: 0px;
}
.recording-box-top-link{
  color: #01295F !important;
  text-decoration: none;
}

.recording-box-top a.recording-box-top-link:hover{
  color: #4BB1BA !important;
  text-decoration: none;
}


.recording-box-top > p {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 20px;
}

.recording-box-bottom{
  display: flex;
  flex-direction: row;
  min-height: 100px;
}

.recording-box-bottom-left{
  text-shadow: none;
  text-decoration: none !important;
  width: 65%;
}

.recording-box-bottom-right{
  text-shadow: none;
  text-decoration: none !important;
  width: 35%;
  border-left: 2px solid #4BB1BA;
}

.recording-box-bottom-full, .recording-box-bottom-full-myttac {
  text-shadow: none;
  text-decoration: none !important;
}

.recording-box-bottom-full-myttac {
  min-height: 200px;
  max-height: 200px;
  width: 100%;
  overflow: auto;
}
.recording-box-bottom-left > p, 
.recording-box-bottom-full > p, 
.recording-box-bottom-full-myttac > p {
  margin-left: 15px;
  margin-right: 5px;
}

.recording-box-bottom-full td, 
.recording-box-bottom-full-myttac td {
  padding: 5px 5px 5px 15px;
  vertical-align: top;
}
.recording-box-bottom-left > ul {
  margin-right: 5px;
}

.recording-box-bottom-right > p {
  margin-left: 15px;
}

.recording-box-bottom-right > ul, 
.recording-box-bottom-full > ul,
.recording-box-bottom-full-myttac > ul {
  font-size: 16px;
  list-style-type: square;
  margin-right: 5px;
}

.recording-box-vertical-spacing{
   height: 25px;
}

.pds-checklist {
  display: flex;
  flex-direction: row;
}

.pds-checklist-left, .pds-checklist-right{
  width: 50%;
}

.pds-checklist-item {
  display: flex;
  padding-bottom: 5px;
}

.pds-checklist-checkmark {
  padding-right: 15px;
  padding-top: 3px;
}

@media only screen and (max-width: 1215px) {

  #cssmenu {
    width: 250px;
  }

}

.input90 {
	width: 90% !important;
}
.input95 {
	width: 95% !important;
}
.input100 {
	width: 100% !important;
}
.input90, .input95 {
	float: right;
}
.inputwSideText {
  display: inline-block !important;
  margin-top: auto;
}
.inputNoBottom {
  vertical-align: bottom;
  margin-bottom: 0;
}
.sideText {
  display: inline-block !important;
}
.inputBlue {
  color: blue !important;
}
.hiddenPDS {
  display: none;
}
.showPDS {
  display: inline;
}
.flexAlignCenter {
  display: flex;
  align-items: center;
}
.flexAlignCenter h2 {
  padding: 0px;
  margin: 0px;
}
.flexJustifyContent {
  justify-content: space-between;
}
@media only screen and (min-width: 1024px) {
  .showHideTVA {
    display: none;
  }
}
.flexOnly {
  display: flex;
}
.flexAlignStart {
  display: flex;
  align-items: flex-start;
}
@media only screen and (max-width: 1024px) {
  .showHideTVA {
    display: inline;
  }
  .flexJustifyContent {
    flex-direction: column;
  }
  .flexOnly, .flexAlignStart {
    flex-direction: column;
    align-items: center;
  }
}
#PSEMap {
  border:none; 
  float:right;
  width:347px;
  height:285px;
}
@media only screen and (max-width: 992px) {
  #PSEMap {
    border:none; 
    float:none;
    width:200px;
    height:164px;
  }
}

@media only screen and (max-width: 375px) {
  #PSEMap {
    border:none; 
    float:none;
    width:100px;
    height:82px;
  }
}

#videoIntro, #videoVT, #W3icon, #videoMV, #toolkit-notice,
 #nvaa_main, #nvaa_li, #nvaa_ems, #nvaa_asi, #ht_art {
  text-align:right;
}
#videoSMCCP {
  text-align:right;
  width: 250px;
}

@media only screen and (max-width: 992px) {
  #videoIntro, #videoVT, #W3icon, #videoMV, #toolkit-notice, 
  #ht_art {
    text-align:center;
  }

  #nvaa_main, #nvaa_li, #nvaa_ems, #nvaa_asi {
    text-align:left;
  }
}

#tellus {
  padding: 0px;
  max-width:930px;
}

@media only screen and (max-width: 840px) {
  #videoSMCCP {
    text-align:center;
    width: 100%;
  }

  #tellus {
    padding: 0px;
    max-width:320px;
  }
}

#TellUsForm.ui-input-text input {
  border-style: thin solid #4BB1BA !important;
}


.x_greenboarder{
  border: thin solid #4BB1BA !important;
}

.rc-anchor-light {
    background: #ffffff !important;
    color: #000;
}

/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	/* border-bottom: 1px dotted black;*/ /* If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	font-weight: normal;
	text-align: center;
	padding: 5px;
	border-radius: 6px;

	/* Put the tooltip above */
	bottom: 100%;
	left: 50%;
	margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
   
	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 10;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
	visibility: visible;
  }