/*
AIMS styling

*/
@charset "UTF-8";
@import "../QuickstartBase/base.css";
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");


:root{
	--light-blue:#99D8FF;
	--blue:#005387;
	--dark-blue:#113A54;
	--link-blue:#0E78AD;
	--card-light-blue:#CCEBFF;
	--yellow:#FED51C;
	--orange:#f79c23;
	--red:#EC1D2E;
	--dark-red:#9b080f;
	--grey:#5e5e5e;
	--light-grey:#d6d6d6;
	--black:#222222;
	
	--apace-red:#b53529;
	--apace-light-red:#F9D2CB;

	--max-width:1250px;
}

.bg-grey{
	background-color:var(--light-grey);
}

.bg-light-blue{
	background-color:var(--light-blue);
}

.bg-blue{
	background-color:var(--blue);
}

.bg-dark-blue{
	background-color:var(--dark-blue);
}

.bg-red{
	background-color:var(--red);
}

.bg-yellow{
	background-color:var(--yellow);
}

.red-gradient{
	background: rgb(247,156,35);
	background: -moz-linear-gradient(153deg, rgba(247,156,35,1) 0%, rgba(220,38,39,1) 50%);
	background: -webkit-linear-gradient(153deg, rgba(247,156,35,1) 0%, rgba(220,38,39,1) 50%);
	background: linear-gradient(153deg, rgba(247,156,35,1) 0%, rgba(220,38,39,1) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f79c23",endColorstr="#dc2627",GradientType=1);
}

.blue-gradient{
	background: rgb(0,82,133);
	background: -moz-linear-gradient(308deg, rgba(0,82,133,1) 40%, rgba(98,173,211,1) 100%);
	background: -webkit-linear-gradient(308deg, rgba(0,82,133,1) 40%, rgba(98,173,211,1) 100%);
	background: linear-gradient(308deg, rgba(0,82,133,1) 40%, rgba(98,173,211,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#005387",endColorstr="#62add3",GradientType=1);
}



/* ==========================================================================
   MASTERPAGE ELEMENTS
   ========================================================================== */
/* This applies to the loading bar at the top of the page */
.ProgressDiv {
  background-color: #ffdd6f;
}

/* header logo */

.Wrapper-HomePage #masterHeaderImage {
    background-image: url("/images/MyWebsite/theme/AIMSLogoHWhite3.png");
    width: 500px;
    height: 130px;
}

#masterHeaderImage {
    background-image: url("/images/MyWebsite/theme/AIMSLogoHBlue3.png");
    width: 500px;
    height: 130px;
}

@media (min-width: 992px) {
  #masterHeaderImage {
    background-image: url("/images/MyWebsite/theme/AIMSLogoHBlue3.png");
    width: 500px;
    height: 130px;
  }
}

@media (max-width: 991px) {
  #masterHeaderImage, .Wrapper-HomePage #masterHeaderImage {
    background-image: url("/images/MyWebsite/theme/AIMSLogoHBlue3.png");
	width: 250px;
	height: 60px;
  }
}

/* Header Border */
#masterHeaderBackground,
.header {
  border-bottom: 2px solid #eeeeee;
}

.header-aux-container {
    background: var(--dark-blue);
}

@media (max-width: 991px) {
	.header-aux-container {
    background: #ffffff;
	}
}

.UtilitySearch #SimpleSearchBlock .search-field {
	background-color: var(--dark-blue);
}
	

/* On Behalf Of with target set */
.ProxyPanelContact {
  background-color: #496DAD;
}

.ProxyPanelContact, .ProxyPanelContact .obo-label {
  color: #ffffff;
}

.ProxyPanelContact a {
  color: #d5deed;
}

.obo-panel, .obo-panel a {
    color: #ffffff;
    font-size: 75%;
}

/* ==========================================================================
   Homepage Specific Styles
   ========================================================================== */

@media (min-width: 992px) {
  .FullWidthArea-StyleBg2 {
    padding-top: 40px;
  }
}

.FullWidthArea-StyleBg2 .row {
  padding: 40px 0px;
}

.FullWidthArea-StyleBg2 .home-member-centre, .FullWidthArea-StyleBg2 .home-journal {
  align-items: center;
  justify-content: center;
  gap: 0px 5%;
}

@media (max-width: 991px) {
  .FullWidthArea-StyleBg2 .home-member-centre, .FullWidthArea-StyleBg2 .home-journal {
    max-width: 500px;
    margin: 0px auto;
  }
}

@media (min-width: 992px) {
  a.home-membership-btn {
    width: 22%;
    max-width: 100%;
    margin: 0;
  }
}

a.home-membership-btn img {
    margin-bottom: 15px;
	width: 100px;
}

a.home-membership-btn:hover, a.home-membership-btn:active, a.home-membership-btn:focus {
  background: #C6E4FF;
  color: #000000;
}

.home-news-threeacross .panel-body, .home-news-threeacross .PanelBody {
  padding: 0;
}

.home-news-threeacross .TaggedListPanel {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 0px;
}

.home-news-threeacross .BlockTLItem {
  width: 31%;
  border-bottom: 0;
  display: flex;
  gap: 0px 15px;
  position: relative;
  padding: 0;
  margin: 0px 1.1%;
  flex-shrink: 0;
  align-items: center;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.home-news-threeacross .desc,
.home-news-threeacross .contentTaggedListImageThumbnailR {
  display: none;
}

.home-news-threeacross .newsImage {
  width: 120px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  margin: 2% 2% 2% 20px;
}
.home-news-threeacross .details {
  padding: 50px 20px;
}

.home-news-threeacross h4 {
  margin-bottom: 10px;
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.2;
}

.home-news-threeacross .PublishDate {
  font-size: 0.8em;
  font-style: normal;
}

.home-news-threeacross .readMore {
  font-size: 0.9em;
  position: absolute;
  bottom: 20px;
}

@media (max-width: 991px) {
  .home-news-threeacross .TaggedListPanel {
    display: block;
  }
  .home-news-threeacross .BlockTLItem {
    width: 100%;
    display: block;
    max-width: 500px;
    margin: 0px auto 30px auto;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  }
  .home-news-threeacross .BlockTLItem .newsImage {
    height: 200px;
    width: 100%;
  }
  .home-news-threeacross .BlockTLItem .details {
    padding: 30px;
    background: #ffffff;
  }
  .home-news-threeacross .readMore {
    position: relative;
	bottom: 0px;
  }
  .home-news-threeacross h4 {
    margin-top: 10px;
  }
}

a.btn.homepage {
  	margin: 2% 2% 2% 0%;
}




/* ==========================================================================
   Footer
   ========================================================================== */
footer.footer .footer-content > .container {
  display: block;
}

@media (max-width: 991px) {
    footer.footer .footer-content > .container {
		background-color: var(--dark-blue);
	}
}
   
.footer-nav-copyright {
  padding-top: 1em;
  padding-bottom: 0.35em;
  /* 1em - .65em (bottom margin on nav lis) */
}

.footer-content {
  padding-top: 1em;
}

.footer-content-section {
  padding: 0 15px 1em;
}

.footer-nav-copyright::after {
  display: block;
  clear: both;
  content: "";
}

.footer-nav-copyright .NavigationUnorderedList,
.footer-nav-copyright .footer-copyright {
  float: left;
  margin: 0;
}

.footer-nav-copyright .footer-copyright {
  display: inline-block;
  margin: 0 1.5em .65em 0;
}

@media (max-width: 767px) {
  .footer-nav-copyright .footer-social-copyright {
    text-align: center;
  }
}

.footer-nav-copyright .footer-social-copyright .footer-social,
.footer-nav-copyright .footer-social-copyright .footer-copyright {
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (min-width: 768px) {
  .footer-nav-copyright .footer-social-copyright .footer-social {
    text-align: left;
  }
  .footer-nav-copyright .footer-social-copyright .footer-copyright {
    float: right;
    width: auto;
    clear: right;
  }
}

.footer-copyright p {
  margin-bottom: 0;
}

@media (min-width: 480px) {
  .footer-content-section {
    float: left;
    width: 50%;
  }
}

@media (min-width: 768px) {
  .footer .footer-social {
    width: 33.3333333333%;
  }
  .footer .footer-promo-container {
    width: 66.6666666667%;
  }
}

#masterFooterCopyright {
  clear: both;
}

.footer-content {
  background-color: var(--dark-blue);
  color: #fff;
  text-align: left;
}

.footer-content h2 {
  margin-top: 0;
  color: #fff;
  border-bottom: none;
}

.footer-content a {
  color: #fff;
  text-decoration: none;
}

.footer-content a:hover,
.footer-content a:focus{
  text-decoration:underline;
}

.footer-social {
  padding-top: 15px;
}

.footer-social a {
  margin-right: .5em;
}

.footer-promo-container .promo {
  background-color: #020202;
  /* rgba fallback */
  background-color: rgba(2, 2, 2, 0.5);
  padding: 15px;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.075), 0 1px 0 rgba(255, 255, 255, 0.1);
}

.footer-promo-container .lead {
  font-family: Open Sans, Helvetica, Arial, sans-serif;
  font-weight: 200;
  margin-bottom: .25em;
  font-size: 130%;
  line-height: inherit;
}

@media (min-width: 768px) and (max-width: 991px) {
  .footer-promo-container .lead {
    font-size: 150%;
  }
}

@media (min-width: 992px) {
  .footer-promo-container .lead {
    font-size: 170%;
  }
}

.footer-promo-container .TextButton {
  background-color: #020202;
  /* rgba fallback */
  background-color: rgba(2, 2, 2, 0.5);
  color: #fff;
}

.footer-promo-container .TextButton:hover {
  background-color: #020202;
  /* rgba fallback */
  background-color: rgba(2, 2, 2, 0.8);
}

.footer-nav-copyright {
  background-color: var(--dark-blue);
  color: #fff;
}

.footer-nav-copyright a, .footer-nav-copyright a:visited {
  color: #fff;
}

.footer-nav-copyright a:hover, .footer-nav-copyright a:active {
  color: white;
}

.footer-content{
	font-size:14px;
	padding: 40px 0px;
/*	background-image: url(images/bg_footer.png);
	background-repeat:no-repeat;
	background-position:right center;
	background-size: contain;*/
}

.footer-content ul{
	list-style:none;
	margin:0;
	padding:0;
}

.socialIcons{
	display:flex;
	justify-content:flex-end;
	gap:0px 20px;
}

.socialIcons img{
	display:block;
	width:25px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.socialIcons a:hover img{
	transform:scale(1.3);
}

@media(min-width:992px){
	.copyright{
		display:flex;
		justify-content: space-between;
		margin-top: 30px;
	}
	
	.copyright ul{
		display:flex;
	}
	
	.copyright ul li:after{
		display:inline-block;
		content:'|';
		margin:0px 5px;
	}

	.copyright ul li:last-child:after{
		display:none;
	}

	
}

.backToTop {
    background: var(--blue) ;
}

.backToTop:hover {
    transform: scale(1.15);
    background: var(--light-blue);
}

/* ==========================================================================
   LARGE CAPTION - USED ON INTERNAL FULL PAGE SLIDER
   ========================================================================== */

.carousel-row .carousel-inner.bg-img > .item .carousel-caption {
    -webkit-animation: fade-in 0.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) 0.3s both;
    animation: fade-in 0.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) 0.3s both;
}

.largeCaption .carousel-inner.bg-img > .item{
	background-image: none!important;
	background-color: transparent;
	height: 320px !important;
}


.largeCaption .wrapper{
	display:flex;
	flex-direction: row-reverse;
	background: var(--blue);
	justify-content: stretch;
	background-image: url(images/banner-overlay-1.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.largeCaption .img{
	display:block;
	height: 320px;
	background-position:center;
	background-size:cover;
	width: 50%;
	flex-shrink: 0;
	max-width: 700px;
	-webkit-mask-image:url(images/banner-mask.svg);
	-webkit-mask-size:cover;
}

.largeCaption .carousel-caption{
	position:relative;
	text-shadow:none;
	left: auto;
	right: auto;
	text-align: left;
	padding: 20px 20px;
	max-width: 600px;
	height: 320px;
	top: auto;
	align-content: center;
}

.carousel-caption h1 {
    font-size: 4rem;
    text-transform: none;
    margin-bottom: 1rem;
    line-height: 110%;
}

@media (max-width: 991px) {
	.largeCaption .wrapper{
		display:flex;
		flex-direction: row-reverse;
		background: var(--blue);
		background-image: none;
	}

	.largeCaption .img {
		display: none;
	}
	
	.carousel-caption h1 {
		font-size: 3.5rem;
		text-transform: uppercase;
		margin-bottom: 1rem;
	}
	
	.largeCaption .carousel-caption{
		align-content: center;
		height: 320px;
	}
}	

/* ==========================================================================
   NEWS AND EVENT CARDS
   ========================================================================== */

.newsCards .PublishDate,
.eventCards .dates{
	font-style:normal;
	text-transform:uppercase;
	background-color:var(--yellow);
	padding: 8px 18px;
	font-weight:700;
	position:absolute;
	top: -38px;
	left: 0;
	font-size: 14px;
}

.eventCards .dates{
	background-color:var(--blue);
	color:#fff;
}

.newsCards,
.eventCards{
	display:block;
	background-color:#fff;
	padding:30px;
	position:relative;
	margin: 65px auto 0px auto;
	border: 0;
	max-width: 600px;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
}

.newsCards h3,
.eventCards h3{
	margin-top:0;
	margin-bottom:15px;
}

.newsCards a,
.eventCards a{
	display:block;
	margin-top:30px;
}

.eventList .image {
    width: 140px;
    height: 140px;
    display: inline-block;
    background-size: cover;
    background-position: center;
    vertical-align: top;
}

.eventList .content {
    display: inline-block;
    max-width: 70%;
    width: 100%;
}

/* ==========================================================================
   FLIP CARDS
   ========================================================================== */
.flip-card-back .content {
    font-size: 0.8em;
}

.flip-card-back .content.small {
    font-size: 0.7em;
    left: 5px;
    right: 5px;
}


.grey .flip-card-back {
    background-color: var(--light-grey);
    color: var(--black);
}

.grey .flip-card-back h1, .grey .flip-card-back h2, .grey .flip-card-back h3,
.grey .flip-card-back h4, .grey .flip-card-back h5, .grey .flip-card-back h6,
.grey .flip-card-back a, .grey .flip-card-back a:visited{
    color: var(--black);
}

.blue .flip-card-back{
	background-color: var(--card-light-blue);
	color: var(--black);
}

.blue .flip-card-back h1, .blue .flip-card-back h2, .blue .flip-card-back h3,
.blue .flip-card-back h4, .blue .flip-card-back h5, .blue .flip-card-back h6,
.blue .flip-card-back a, .blue .flip-card-back a:visited{
    color: var(--black);
}

.red .flip-card-back{
	background-color: var(--light-grey);
	color: var(--black);
}

.red .flip-card-back h1, .red .flip-card-back h2, .red .flip-card-back h3,
.red .flip-card-back h4, .red .flip-card-back h5, .red .flip-card-back h6,
.red .flip-card-back a, .red .flip-card-back a:visited{
    color: var(--black);
}


/* ==========================================================================
   CALL TO ACTION INTERAL PAGES
   ========================================================================== */
/* Use same format as flip card without rotation */

.cta-card {
  background-color: transparent;
  width: 100%;
  max-width:300px;
  height: 300px;
  border: 1px solid #f1f1f1;
   margin:0px auto;
}

/* This container is needed to position the front and back side */
.cta-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

.round .cta-card-inner {
  border-radius:10px;
  overflow:hidden;
}

.circle .cta-card-inner {
  border-radius:300px;
  overflow:hidden;
}

.cta-card-inner img{
  width:100%;
  max-width:300px;
  height:300px!important;
}

.col-sm-3 .cta-card-inner,
.col-sm-3 .cta-card-inner img{
  width:100%;
  max-width:250px;
  height:250px!important;
}

/* ==========================================================================
   ACCORDION DATA SHOWCASE
   ========================================================================== */
/* Used for FAQ and lists*/

.accordion .panel-heading.Distinguish {
    background-color: var(--blue);
    padding: 10px;
}

.accordion .panel-title {
	font-size: 1.1em;
    font-weight: normal;
    color: white;
}

.accordion .panel-body {
    border: 1px solid var(--dark-blue);
    margin-bottom: 5px;
}

.accordion .sysicon:after {
	background-color: var(--card-light-blue);
}

.accordion table {
    width: 100%;
    border-collapse: collapse;
}

.accordion th, .accordion td {
    padding: 8px;
    text-align: left;
    border: 1px solid var(--grey);
	vertical-align: top;
}

.accordion th {
    background-color: var(--light-grey);
}


.Apace .accordion .panel-heading.Distinguish {
    background-color: var(--apace-red);
}

.Apace .accordion .panel-body {
    border: 1px solid var(--apace-red);
    margin-bottom: 5px;
}

.Apace .accordion .sysicon:after {
	background-color: var(--apace-light-red);
}

/* ==========================================================================
   ACCORDION HTML
   ========================================================================== */
/* Used for replacement for data showcase*/

    .accordion {
    display: flex;
    flex-direction: column;
    }
    .accordion-item {
    border: 1px solid #ccc;
    margin-bottom: 5px;
    overflow: hidden;
    }
    .accordion-title {
    background-color: var(--blue);
    color: white;
    padding: 10px;
    cursor: pointer;
	font-size: 1.1em;
    font-weight: normal;
    }
    .accordion-content {
    padding: 10px;
    display: none;
    }
    .accordion-active {
    display: block;
    }

	.Apace .accordion-title {
    background-color: var(--apace-red);
}

	.Apace .accordion-item {
    border: 1px solid var(--apace-red);
    margin-bottom: 5px;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */
/* set up button base styles */
.btn,
.TextButton,
.RadUpload.RadUpload .ruButton,
.RadUploadProgressArea.RadUploadProgressArea .ruButton {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: normal;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 1.6;
  border-radius: 4px;
  -webkit-user-select: none;
          user-select: none;
  transition: background 0.2s ease-out;
}


/* default button */
.btn,
.TextButton,
.RadUpload.RadUpload .ruButton,
.RadUploadProgressArea.RadUploadProgressArea .ruButton {
  background-color: var(--light-blue);
  border-color: var(--light-blue);
}

.btn, .btn:visited,
.TextButton,
.TextButton:visited,
.RadUpload.RadUpload .ruButton,
.RadUpload.RadUpload .ruButton:visited,
.RadUploadProgressArea.RadUploadProgressArea .ruButton,
.RadUploadProgressArea.RadUploadProgressArea .ruButton:visited {
  color: #222222;
}

.btn:hover, .btn:focus, .btn:active,
.TextButton:hover,
.TextButton:focus,
.TextButton:active,
.RadUpload.RadUpload .ruButton:hover,
.RadUpload.RadUpload .ruButton:focus,
.RadUpload.RadUpload .ruButton:active,
.RadUploadProgressArea.RadUploadProgressArea .ruButton:hover,
.RadUploadProgressArea.RadUploadProgressArea .ruButton:focus,
.RadUploadProgressArea.RadUploadProgressArea .ruButton:active {
  color: #222222;
  text-decoration: none;
  background-color: #b5b5b9;
  border-color: #ababaf;
}

.RadGrid.RadGrid input.TextButton.PrimaryButton,
.RadGrid.RadGrid a.TextButton.PrimaryButton {
  background-color: #496DAD;
  color: #ffffff;
}

/* primary button */
.PrimaryButton,
.UsePrimaryButton .TextButton,
.RadGrid input.PrimaryButton {
  background-color: #496DAD;
  border-color: transparent;
}

.PrimaryButton, .PrimaryButton:visited,
.UsePrimaryButton .TextButton,
.UsePrimaryButton .TextButton:visited,
.RadGrid input.PrimaryButton,
.RadGrid input.PrimaryButton:visited {
  color: #ffffff;
}

.PrimaryButton:hover, .PrimaryButton:focus, .PrimaryButton:active,
.UsePrimaryButton .TextButton:hover,
.UsePrimaryButton .TextButton:focus,
.UsePrimaryButton .TextButton:active,
.RadGrid input.PrimaryButton:hover,
.RadGrid input.PrimaryButton:focus,
.RadGrid input.PrimaryButton:active {
  color: #ffffff;
  text-decoration: none;
  background-color: #3d5b90;
  border-color: rgba(0, 0, 0, 0);
}

.PrimaryButton:disabled, .PrimaryButton:disabled:hover, .PrimaryButton:disabled:focus, .PrimaryButton:disabled:active, .PrimaryButton.disabled, .PrimaryButton.disabled:hover, .PrimaryButton.disabled:focus, .PrimaryButton.disabled:active, .PrimaryButton.aspNetDisabled, .PrimaryButton.aspNetDisabled:hover, .PrimaryButton.aspNetDisabled:focus, .PrimaryButton.aspNetDisabled:active,
.UsePrimaryButton .TextButton:disabled,
.UsePrimaryButton .TextButton:disabled:hover,
.UsePrimaryButton .TextButton:disabled:focus,
.UsePrimaryButton .TextButton:disabled:active,
.UsePrimaryButton .TextButton.disabled,
.UsePrimaryButton .TextButton.disabled:hover,
.UsePrimaryButton .TextButton.disabled:focus,
.UsePrimaryButton .TextButton.disabled:active,
.UsePrimaryButton .TextButton.aspNetDisabled,
.UsePrimaryButton .TextButton.aspNetDisabled:hover,
.UsePrimaryButton .TextButton.aspNetDisabled:focus,
.UsePrimaryButton .TextButton.aspNetDisabled:active,
.RadGrid input.PrimaryButton:disabled,
.RadGrid input.PrimaryButton:disabled:hover,
.RadGrid input.PrimaryButton:disabled:focus,
.RadGrid input.PrimaryButton:disabled:active,
.RadGrid input.PrimaryButton.disabled,
.RadGrid input.PrimaryButton.disabled:hover,
.RadGrid input.PrimaryButton.disabled:focus,
.RadGrid input.PrimaryButton.disabled:active,
.RadGrid input.PrimaryButton.aspNetDisabled,
.RadGrid input.PrimaryButton.aspNetDisabled:hover,
.RadGrid input.PrimaryButton.aspNetDisabled:focus,
.RadGrid input.PrimaryButton.aspNetDisabled:active {
  color: #ffffff;
  background-color: #496DAD;
  border-color: transparent;
}

.SmallButton,
.UseSmallButton .TextButton {
  font-size: 85%;
  padding: 8px 18px;
  border-radius: 4px;
}

.MediumButton,
.UseMediumButton .TextButton {
  font-size: 120%;
  padding: 14px 24px;
  border-radius: 4px;
}

.LargeButton,
.UseLargeButton .TextButton {
  font-size: 150%;
  padding: 17px 27px;
  border-radius: 4px;
}

.FullWidthButton,
.UseFullWidthButton .TextButton {
  width: 100%;
}

/* Style buttons to look like links for deemphasis */
.LinkButton {
  -webkit-appearance: none !important;
  background: transparent !important;
  color: #496DAD;
  text-shadow: none;
  box-shadow: none;
  border: none;
  font-weight: normal;
  padding: 5px 10px;
  font-size: 18px;
  line-height: 1.6;
  border-radius: 4px;
  color: #496DAD ;
  text-decoration: none;
}

.LinkButton:visited {
  color: #577ab8 ;
}

.LinkButton:hover, .LinkButton:focus, .LinkButton:active {
  color: #3a5689 ;
  text-decoration: underline ;
}

.LinkButton.aspNetDisabled, .LinkButton.aspNetDisabled:hover, .LinkButton.aspNetDisabled:focus, .LinkButton.aspNetDisabled:active, .LinkButton.aspNetDisabled:visited, .LinkButton:disabled, .LinkButton:disabled:hover, .LinkButton:disabled:focus, .LinkButton:disabled:active, .LinkButton:disabled:visited {
  color: #999999 ;
  text-decoration: none ;
}

@media (min-width: 992px) {
  .StandardButtonMd {
    padding: 5px 10px;
    font-size: 18px;
    line-height: 1.6;
    border-radius: 4px;
  }
}

/* Generic red and green buttons to be used for all themes (styling is not theme dependant) */
.DangerButton {
  background-color: #d03528;
  border-color: transparent;
}

.DangerButton, .DangerButton:visited {
  color: #fff;
}

.DangerButton:hover, .DangerButton:focus, .DangerButton:active {
  color: #fff;
  text-decoration: none;
  background-color: #ae2c21;
  border-color: rgba(0, 0, 0, 0);
}

.DangerButton:disabled, .DangerButton:disabled:hover, .DangerButton:disabled:focus, .DangerButton:disabled:active, .DangerButton.disabled, .DangerButton.disabled:hover, .DangerButton.disabled:focus, .DangerButton.disabled:active, .DangerButton.aspNetDisabled, .DangerButton.aspNetDisabled:hover, .DangerButton.aspNetDisabled:focus, .DangerButton.aspNetDisabled:active {
  color: #fff;
  background-color: #d03528;
  border-color: transparent;
}

.SuccessButton {
  background-color: #68bd49;
  border-color: transparent;
}

.SuccessButton, .SuccessButton:visited {
  color: #fff;
}

.SuccessButton:hover, .SuccessButton:focus, .SuccessButton:active {
  color: #fff;
  text-decoration: none;
  background-color: #57a23b;
  border-color: rgba(0, 0, 0, 0);
}

.SuccessButton:disabled, .SuccessButton:disabled:hover, .SuccessButton:disabled:focus, .SuccessButton:disabled:active, .SuccessButton.disabled, .SuccessButton.disabled:hover, .SuccessButton.disabled:focus, .SuccessButton.disabled:active, .SuccessButton.aspNetDisabled, .SuccessButton.aspNetDisabled:hover, .SuccessButton.aspNetDisabled:focus, .SuccessButton.aspNetDisabled:active {
  color: #fff;
  background-color: #68bd49;
  border-color: transparent;
}

/**account page button group**/
.button-group .LargeButton {
  width: 100%;
  height: 100%;
  font-size: 19px !important;
  line-height: 1.2;
  min-height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ==========================================================================
   TABLE FORMAT
   ========================================================================== */

.AIMStable table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--blue);
    color: #ffffff;
}

.AIMStable th, .AIMStable td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ffffff;
	vertical-align: top;
}

.AIMStable th {
    background-color: var(--dark-blue);
    color: #ffffff;
}

.AIMStable h2 {
	color: #ffffff;
}

.AIMStable a {
	color: #ffffff !important;
}	

.Apacetable table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--apace-red);
    color: #ffffff;
}

.Apacetable th, .Apacetable td {
    padding: 8px;
    text-align: left;
	border: 0px;
    border-bottom: 1px solid #ffffff;
	vertical-align: top;
}

.Apacetable th {
    color: #ffffff;
}

.Apacetable h2 {
	color: #ffffff;
}

.Apacetable a {
	color: #ffffff !important;
}	

.custom-table {
	width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: var(--dark-blue);
    border-collapse: collapse;
}

.custom-table td {
    border-color: var(--dark-blue);
    border-style: solid;
    border-width: 1px;
    padding: 20px;
    }


.internal-table table {
    width: 100%;
    border-collapse: collapse;
}

.internal-table th, .internal-table td {
    padding: 8px;
    text-align: left;
    border: 0;
	vertical-align: top;
}


/* ==========================================================================
   MISCELLANEOUS
   ========================================================================== */

.content-box-container{
	width: 100%;
	min-height: 300px;
	margin: 0 auto;
	display: -webkit-flex; /* Safari */		
	display: flex; /* Standard syntax */
}

.content-box-container .column{
	padding: 20px;
	-webkit-flex: 1; /* Safari */
	-ms-flex: 1; /* IE 10 */
	flex: 1; /* Standard syntax */
	background-color: var(--dark-blue);
	border-radius: 10px;
    transition: background-color 0.3s ease-in-out;
	margin: 10px; 
}
   
.content-box {
    background-color: var(--dark-blue);
    color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    transition: background-color 0.3s ease-in-out;
}

.content-box-container:hover,
.content-box:hover {
    background: linear-gradient(to right, var(--blue), var(--dark-blue));
}

.content-box h1, 
.content-box h2,
.content-box h3 {
	color: #ffffff;
}







/* Classes that can be used for iParts and HTML content */
/* Use class CalloutArea1 or CalloutArea2 to call out an iPart or content block */
.CalloutArea1, .CalloutBlockType1 {
  background-color: var(--blue);
  padding: 20px;
  margin: 20px;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
}

.CalloutArea1 label, .CalloutArea1 h1, .CalloutArea1 h2, .CalloutArea1 h3, .CalloutArea1 h4, .CalloutArea1 h5, .CalloutArea1 .PanelTitle, .CalloutArea1 .TitleBarCaption, .CalloutArea1 a.FeatureActionLink, .CalloutBlockType1 label, .CalloutBlockType1 h1, .CalloutBlockType1 h2, .CalloutBlockType1 h3, .CalloutBlockType1 h4, .CalloutBlockType1 h5, .CalloutBlockType1 .PanelTitle, .CalloutBlockType1 .TitleBarCaption, .CalloutBlockType1 a.FeatureActionLink {
  color: #fff;
}

.CalloutArea1 a, .CalloutBlockType1 a {
  color: #fff;
}

.CalloutArea1 .Error, .CalloutBlockType1 .Error {
  color: #eeeeee !important;
}

.CalloutArea1 h2, .CalloutArea1 .PanelHead.Distinguish, .CalloutArea1 .TitleBarCaption, .CalloutBlockType1 h2, .CalloutBlockType1 .PanelHead.Distinguish, .CalloutBlockType1 .TitleBarCaption {
  border-bottom: none;
}

.CalloutArea2 {
  background-color: var(--light-blue);
  padding: 20px;
  margin: 20px;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
}

.CalloutArea2 label, .CalloutArea2 h1, .CalloutArea2 h2, .CalloutArea2 h3, .CalloutArea2 h4, .CalloutArea2 h5, .CalloutArea2 .PanelTitle, .CalloutArea2 .TitleBarCaption, .CalloutArea2 a.FeatureActionLink {
  color: #fff;
}

.CalloutArea2 a {
  color: #fff;
}

.CalloutArea2 .Error {
  color: #eeeeee !important;
}

.CalloutArea2 h2, .CalloutArea2 .PanelHead.Distinguish, .CalloutArea2 .TitleBarCaption {
  border-bottom: none;
}

.CalloutArea3 {
  background-color: var(--link-blue);
  padding: 10px;
  margin: 20px;
  border-radius: 0;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  color: #fff;
}

.CalloutArea3 label, .CalloutArea3 h1, .CalloutArea3 h2, .CalloutArea3 h3, .CalloutArea3 h4, .CalloutArea3 h5, .CalloutArea3 .PanelTitle, .CalloutArea3 .TitleBarCaption, .CalloutArea3 a.FeatureActionLink {
  color: #fff;
}

.CalloutArea3 a {
  color: #fff;
}

.CalloutArea3 .Error {
  color: #eeeeee !important;
}

.CalloutArea3 h2, .CalloutArea3 .PanelHead.Distinguish, .CalloutArea3 .TitleBarCaption {
  border-bottom: none;
}

.CalloutPart2 .panel-heading,
.CalloutPart2 .panel-body {
  background-color: var(--qs-light-grey);
}

.CalloutPart1 .panel-heading,
.CalloutPart1 .panel-body {
  background-color: #93cadc;
}

.CalloutPart2 .panel-heading.Distinguish,
.CalloutPart1 .panel-heading.Distinguish {
  background-color: transparent;
}

/* Use class ContentBlockPrimary to give a block of content extra emphasis */
.ContentBlockPrimary {
  padding: 20px;
  background-color: var(--qs-light-grey);
}

.ContentBlockPrimary .Quote {
  background-color: #fff;
}

/* Make the titles on secondary columns smaller - used on the Member home page */
.SecondaryColumn h2,
.SecondaryColumn .PanelTitle,
.SecondaryColumn .panel-title {
  font-family: inherit;
  font-weight: bold;
  font-size: 90%;
  color: #999999;
  text-transform: uppercase;
}

.SecondaryColumn h2,
.SecondaryColumn .PanelHead,
.SecondaryColumn .TitleBarCaption,
.SecondaryColumn .panel-heading {
  border-bottom: none;
}

.SecondaryColumn .PanelHead,
.SecondaryColumn .panel-heading {
  padding: 0 4px;
}

.SecondaryColumn .CommunityBlogItem {
  padding: 0 0 0 10px;
}

.SecondaryColumn .CommunityBlogItem .PanelFieldValue {
  padding: 0;
}

.SecondaryColumn .CommunityItemTitle {
  font-weight: normal;
  font-size: inherit;
}

.SecondaryColumn .RadGrid .rgRow td,
.SecondaryColumn .RadGrid .rgNoRecords td {
  padding: 4px;
}

/* Use class ContentBlockPictureArea to surround an image within a ContentBlockPrimary area */
.ContentBlockPictureArea,
.ContentBlockLeft {
  width: 250px;
  float: left;
  margin-right: .5em;
  margin-bottom: .5em;
}

.ContentBlockPictureArea.FloatRight,
.ContentBlockLeft.FloatRight {
  float: right;
  margin-left: .5em;
}

.ContentBlockPictureArea img,
.ContentBlockLeft img {
  max-width: 100%;
  height: auto !important;
}

.BlockList ul {
  margin: 0;
  padding: 0;
}

.BlockList li {
  list-style: none;
}

.BlockList a {
  display: block;
  text-decoration: none;
  padding: 20px;
}

.BlockList a:hover {
  background-color: #eef0e3;
}

.BlockList a span {
  text-decoration: underline;
}

.BlockList p {
  color: #333333;
  margin-bottom: 0;
}

/* Tagged list format, styled similar to BlockList */
.BlockTLItem {
  display: block;
  text-decoration: none;
  padding: 20px;
}

.BlockTLItem,
.BlockList li {
  border-bottom: 1px dotted #ddd;
}

.BlockTLItem h4,
.BlockList h4 {
  font-size: 110%;
  font-weight: normal;
}

/* PublishDate and ReadMoreLink are used in the Block tagged list format */
.PublishDate {
  font-size: 85%;
  font-style: italic;
}

/* Use on the blockquote element for a styled quote */
.Quote {
  background: var(--qs-light-grey);
  border-left: 10px solid var(--blue);
  margin: 1.5em .7em 1.5em 0;
  padding: 1.5em .7em;
  quotes: "\201C" "\201D" "\201C" "\201D";
  font-weight: normal;
}

.Quote:before {
  color: var(--grey);
  content: open-quote;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  font-size: 500%;
  line-height: 0.1em;
}

.Quote p {
  display: inline;
}

.Quote cite {
  display: block;
  margin-left: 1em;
  margin-top: .5em;
  font-style: italic;
}

.Quote cite:before {
  content: "— ";
}

@media (min-width: 768px) {
  .Quote {
    font-size: 120%;
  }
  .Quote cite {
    font-size: 90%;
    margin-left: 2em;
  }
}

.QuoteStyle2 {
  border-left-color: var(--link-blue);
}

/* CalloutPanelField1 can be used as a wrapper for PanelFields, or on the PanelField directly, to callout the first label. */
.CalloutPanelField1 .PanelField label:first-child,
.CalloutPanelField1.PanelField label:first-child,
.CalloutPanelField1 .PanelField .Label:first-child,
.CalloutPanelField1.PanelField .Label:first-child {
  position: relative;
  padding: 15px;
  margin: 0 0 1em;
  color: #fff;
  background: #ff6610;
  width: auto;
  border-radius: 3px;
}

.CalloutPanelField1 .PanelField label:first-child:after,
.CalloutPanelField1.PanelField label:first-child:after,
.CalloutPanelField1 .PanelField .Label:first-child:after,
.CalloutPanelField1.PanelField .Label:first-child:after {
  content: "";
  position: absolute;
  bottom: -8px;
  /* value = - border-top-width - border-bottom-width */
  left: 30px;
  /* controls horizontal position */
  border-width: 8px 8px 0;
  /* vary these values to change the angle of the vertex */
  border-style: solid;
  border-color: #ff6610 transparent;
  /* reduce the damage in FF3.0 */
  display: block;
  width: 0;
}

/* TotalBox can be used as a wrapper for PanelFields, or on the PanelField directly, to visually distinguish a calculated total. */
.TotalBox {
  border-color: #ddd;
}

.TotalBox label {
  background-color: var(--blue);
  color: #fff;
  padding: .25em .75em;
  color: #fff;
}

/* Add zone style "CCOGrayBg" to give CCO content a gray background */
.CCOGrayBg .RadMultiPage {
  background-color: var(--qs-light-grey);
}

.CCOGrayBg .yui-g {
  float: none;
}

/* Add zone style "TitleBarNoBorder" to remove the bottom border from the title bar caption */
.TitleBarNoBorder .TitleBarCaption, .TitleBarNoBorder .PanelHead.Distinguish, .TitleBarNoBorder .panel-heading.Distinguish {
  border-bottom: none;
}

/* Use the FeatureText class to make a block of text larger for emphasis */
.FeatureText {
  color: var(--grey);
  font-size: 150%;
  line-height: 170%;
}

/* Use the CenterText class to center the text within the iPart */
.CenterText {
  text-align: center;
}

.FullWidthButtons .btn, .FullWidthButtons .TextButton {
  display: block;
}

/* Use class FeatureActionLink on a link to call attention to it */
a.FeatureActionLink {
  transition: all 0.2s ease-in;
  font-family: Open Sans, Helvetica, Arial, sans-serif;
  font-size: 110%;
  font-weight: 200;
  line-height: 1.5em;
  padding: 8px 0;
  text-decoration: none;
}

@media screen and (prefers-reduced-motion: reduce) {
  a.FeatureActionLink {
    transition: none;
  }
}

@media (min-width: 992px) {
  a.FeatureActionLink {
    font-size: 150%;
  }
}

a.FeatureActionLink:hover {
  text-decoration: underline;
}



/* ==========================================================================
   RESOURCE CARDS
   ========================================================================== */

	.search-listing thead {
    display: none;
    }
    .search-listing .RadGrid_MetroTouch {
    border-color: transparent;
    background-color: transparent;
    }
    .search-listing .RadGrid.RadGrid_MetroTouch .rgMasterTable, .search-listing .RadGrid.RadGrid_Metro .rgMasterTable {
    background-color: transparent;
    }
    .search-listing .RadGrid.RadGrid_MetroTouch > table > tbody > tr {
    background: #fff0 !important;
    }
    .search-listing .RadGrid.RadGrid_MetroTouch > table > tbody > tr > td {
    padding: 1.5rem 0 !important;
    border: none !important;
    }
    td .resource-card  {
    padding: 2rem;
    border-radius: .7rem;
    border: 1px solid var(--light-grey);
    display: flex;
    position: relative;
    transition: top .5s ease-in-out, border-color .3s ease-in-out, box-shadow .3s ease-in-out !important;
    top: 0;
    }
    td .resource-card:hover {
    border-color: var(--blue);
    top: -1.5rem;
    box-shadow: 0px 0px 2rem 0px rgb(0 0 0 / 14%);
    }
    td .resource-card > div {
    width: 100%;
    padding: 0 1.5rem;
    }
    td .resource-card > .resource-details {
    width: 100%;
    }
    td .resource-card > .resource-details p {
    margin: 0;
    }
    td .resource-card > .resource-details p.title {
    color: var(--blue) !important;
    font-size: 2rem;
    font-weight: bold !important;
    text-decoration: none;
    line-height: 2.5rem;
    }
    td .resource-card > p.title {
    margin-bottom: 1.5rem;
    }
    td .resource-card > .resource-details > div > p {
    font-size: 1.6rem;
    }
    td .resource-card > .resource-details p.details {
    font-size: .9em;
    line-height: 1.5;
    margin-bottom: 1em;
    color: var(--black);
    }
    td .resource-card > .resource-details > p.download > a {
    text-decoration: none !important;
    color: var(--black) !important;
    }
    td .resource-card > .resource-details > p.download > a:hover {
    text-decoration: none !important;
    color: var(--black) !important;
    }
    td .resource-card > .image-container {
    width: 25%;
    padding-right: 0;
    text-align: center;
    }
    td .resource-card > .image-container img {
    width: 100% !important;
    max-width: 200px;
    border: solid lightgray 0.25px;
    }
    @media (max-width: 767px) {
    .search-listing .RadGrid.RadGrid_MetroTouch > table {
    margin-top: 0;
    }
    }	
	.search-listing tbody {
    display: flex;
    flex-wrap: wrap;
	column-gap: 1rem
	}
	.search-listing .rgRow, .search-listing .rgAltRow {
    width: 30%;
    display: flex;
    }
	.resource-card {
    height: 100%;
    flex-direction: column;
    }

