/********************************
SITE ELEMENTS
********************************/

#topNavBar, 
#menuBar, 
#mobileMenuBar, 
#bottomBar {
	background-color: #205699;
}

#logoSrchBar, 
#contentWrapper, 
#emeraLogo {
	background-color: #FFF;
}

#yellowBar, 
#yellowBarMbl, 
#breadCrumbBar {
	background-color: #FFD200;
}

.img-lg-fluid, 
.mainContentImg {
	width  : 100%;
	height : auto;
}

.alert, 
.btn, 
.card-img-top, 
.form-control, 
.list-group-item {
	border-radius: 0;
}

/* site message */
#alertWrapper,
#alertWrapper > .container {
	padding-left: 0;
	padding-right: 0;
}
.alert-warning {
	background-color : #FFE985;
	color 			 : #000;
}



#loggedInMsg {
	margin-bottom: -20px;
}

.btn-primary {
	background-color: #205699;
	border-color	: #205699;
}
.btn-primary:hover {
	background-color: #0056BF;
	border-color	: #094999;
}

.btn-bio {
	background-color : #FFD200;
	border 			 : 0;
	width 			 : 100%;
	margin 			 : 0;
	padding 		 : 0;
	font-size 		 : .875rem;
	line-height 	 : 1.5;
	/*border-color	: #FFD200;*/
}
.btn-bio:hover {
	background-color : #FFD200;
	border 		     : 0;
	/*border-color	: #FFD200;*/
}

.btn-bio > span {
	display: block;
}

/*
Phased out with 2019 Usability changes

.residentialHdr {
	background: url('/shared/images/headers/residential-header.jpg');
}
.businessHdr {
	background: url('/shared/images/headers/business-header.jpg');
}
.companyHdr {
	background: url('/shared/images/headers/company-header.jpg');
}
.sunSelectHdr {
	background: url('/shared/images/headers/sunselect-header.jpg');
}
*/


/* used for list or past years in newsroom archives sidebar */
ul.link-list {
	margin 		: 0 0 17px -22px;/*-2rem*/
	padding 	: 0;
	list-style 	: none;
	overflow 	: hidden;
	font-family : sans-serif; /*set to make wrapping more tight/lined-up*/
}
ul.link-list li {
	list-style 	: none;
	float 		: left;
	margin-left : 22px ;/*2rem 22px*/
	display 	: block;
}

/* sets position of very small icons (documents, email, etc...) */
.smIconMarginBtm {
	margin-bottom: 2px;
}
#rssicon {
	margin-bottom: 4px;
}


.table .thead-dark th {
    color 			 : #FFF;
    background-color : #205699;
    border-color	 : #DEE2E6;
}

/* foundation version holdover, mostly used in forms */
.noshow {
	display: none;
}


.content-float-right {
	padding-left : 1.5rem;
	float 		 : right;
}
.content-float-left {
	padding-right : 1.5rem;
	float 		 : left;
}

/* font awesome glyphs */
.fa.fa-plug,
.fas.fa-lightbulb,
.fas.fa-fire,
.fas.fa-star {
	color: #205699;
}


/* FAQs i.e., outdoor lighting */
#accordionFAQ .btn {
    white-space : normal;
	text-align  : left;
}
#accordionFAQ .card-body {
	padding: 1.25rem 2rem;
}
/*#accordionFAQ .btn:hover {
    background-color : #205699;
    border-color     : #205699;;
}
#accordionFAQ .card-header.bg-primary {
    background-color: #205699!important;
}*/

/*site elements*/


/********************************
FORMS
********************************/

#logoSrchBar .invalid-feedback {
	margin-bottom 	: -1.2rem;
	font-size 		: .7rem;
}

label.required {
	padding: 0 10px 0 9px;
	background: url('https://account.tecoenergy.com/shared/images/astr.gif') no-repeat center left;/* no-repeat top left;*/
}

/*forms*/


/********************************
TOP NAVIGATION BAR
********************************/
#socialIconsWh {
	margin-left: -.5rem;
}

#actionLinks .navbar,
#menuContainer .navbar {
	padding: 0;
}

/* image pipe seperator for top three action links */
.nav-pipe { /*mq*/
	padding: .5rem .5rem;
}

/* pipe displayed in nav dropdown for your account */
.menuPipe {
	color: #FFF; 
}

#yourAccountDD.dropdown-menu div a {
	color 			: #FFF; 
	text-decoration : none;
}

#actionLinks .nav-item > a:active,
#actionLinks .nav-item > a:focus {
	background-color: #194883;
}

#yourAccountDD { /*mq*/
	left 			: -36rem; 
	right 			: 0; 
	background-color: #194883;
	border-radius 	: 0;
	font-size 		: .85rem;
}

.addthis_button {
	display: inline-block; /*mq*/
}

#actionLinks a.nav-link { /*mq*/
	font-size 	: 80%;
	font-weight : 400;
}

#actionLinks a.nav-link > img { /*mq*/
	height: 20px;
	width: auto;
}

#actionLinks .nav-item	 > a, 
#actionLinks .nav-item	 > a:hover,
#menuContainer .nav-item > a {
	color: #FFF;
}
/*topnav*/


/********************************
LOGO/SEARCH BAR
********************************/

#companyLogo,
#companyLogoWhite {
	max-width 	: 100%; 
	height 		: auto;
}
#companyLogo {
	min-width 	: 140px;
}

#searchForm .btn-warning,
#searchForm .btn-warning:hover {
	background-color: #FFD200;
}
/*logoSrchBar*/


/********************************
MENU BAR
********************************/
#menuLinksLeft .navbar-nav > li.nav-item,
#menuLinksRight .navbar-nav > li.nav-item {
	font-size: 1.2rem;
}

#menuLinksLeft .nav-link,
#menuLinksRight .nav-link {
	margin: .5rem 0;
}

#menuLinksLeft .dropdown-menu,
#menuLinksRight .dropdown-menu { /*mq*/
	width 		    : 1200px;
	border-radius   : 0;
	padding         : 1.5rem .5rem;
	margin          : 0;
	border          : 0;
	/* firefox on windows will NOT display box shadow */
	box-shadow      : 3px 5px 10px -5px rgba(0,0,0,1), 
					  3px 5px 10px -5px rgba(0,0,0,.1), 
					  -10px 10px 10px -10px rgba(0,0,0,.8);
}


/*#menuLinksLeft .navbar-nav > li.nav-item.dropdown.show,
#menuLinksRight .navbar-nav > li.nav-item.dropdown.show {
	background: url("/shared/images/nav-triangle.png") bottom center no-repeat;
}*/


/*----- 2020 Mega Menu Changes --------*/
#menuContainer .nav-item > a:hover,
#menuContainer .nav-item > a:active {
	color: #FDD200!important;
}

#menuContainer a:hover {
	text-decoration : underline;
	color 			: #06172D!important;
}

#menuContainer a.text-uppercase:hover {
	color 			: #205699!important;
}

#menuLinksLeft .navbar-nav-emeragold > li.nav-item.dropdown.show,
#menuLinksRight .navbar-nav-emeragold > li.nav-item.dropdown.show {
    background: url("https://account.tecoenergy.com/shared/images/nav-triangle-emeragold.png") bottom center no-repeat !important;
}

#resMegaMenuDD img,
#busMegaMenuDD img,
#comMegaMenuDD img  {
	max-width: 256px!important;
	min-width: 150px!important;
}

#resMegaMenuDD a > span.fa-caret-right,
#busMegaMenuDD a > span.fa-caret-right,
#comMegaMenuDD a > span.fa-caret-right {
	font-size: 1.1rem!important;
	padding-right: 0.35rem;
}

.pay-bill-card {
    width 			: 100%!important;
    min-width 		: 13em!important;
    border-radius 	: 0.6rem;
    box-shadow 		: 0 0 8px 0 grey;
    margin-bottom 	: 0.2rem;
}
.pay-bill-card-glyph-margin {
    margin-top: 0.35rem!important;
}
#resMegaMenuDD div.card-body a,
#busMegaMenuDD div.card-body a,
#comMegaMenuDD div.card-body a {
	font-size: 1.2rem;
}
#resMegaMenuDD div.card-body a > span.fa-caret-right,
#busMegaMenuDD div.card-body a > span.fa-caret-right,
#comMegaMenuDD div.card-body a > span.fa-caret-right {
	font-size 		: 1.6rem!important;
	padding-right 	: 0.25rem;
}

#resMegaMenuDD hr,
#busMegaMenuDD hr ,
#comMegaMenuDD hr  {
	margin-top 	  : 0!important;
	margin-bottom : 0.2rem!important;
}

#resMegaMenuDD h5,
#busMegaMenuDD h5,
#comMegaMenuDD h5 {
    font-size 		: 1.1rem!important;
    font-weight 	: bold;
    margin-bottom 	: 0.25rem !important;
    text-transform  : uppercase;
}

.menu-link-text,
.menu-link-tex {
    font-size: 0.85rem!important;
}

/*----- End 2020 Mega Menu Changes --------*/


#ctuMegaMenu {
	margin-bottom: .54rem!important;
	text-transform: uppercase;
}
/*menuBar*/


/********************************
MOBILE MENU
********************************/

#mobileMenuContainer .navbar-toggler-icon {
	background-image: url("https://account.tecoenergy.com/shared/images/icons/hamburger.png");
	margin-bottom 	: .4rem;
	margin-top    	: .4rem;
}

#mobileMenuContainer .list-group {
	margin-left: 1.25rem;
}

#mobileMenuContainer .list-group .list-group-item:first-child {
	border-top: 0;
}

#mobileMenuContainer .list-group-item {
	border-left   : 0;
	border-right  : 0;
	padding-left  : 0;
}

#mobileMenuContainer .dropdown-menu {
	border        : 0;
	border-radius : 0;
	padding-top   : 0;
}

#mobileMenuContainer .dropdown-menu.show {
	padding-bottom : 0;
	margin-bottom  : -.2rem;
}

#mobileMenuContainer .dropdown-toggle::after {
	border: 0;
}

#mobileMenuContainer .dropdown-toggle > span {
	float: right!important;
}

#mobileMenuContainer .dropdown-toggle > span:after {
    display        : inline-block;
    width          : 0;
    height         : 0;
    margin-left    : .255em;
    vertical-align : .255em;
    content        : "";
    border-top     : .3em solid;
    border-right   : .3em solid transparent;
    border-bottom  : 0;
    border-left    : .3em solid transparent;
    color 		   : #000;
	transition     : 0.1s;
}
#mobileMenuContainer .dropdown-toggle[aria-expanded="false"] > span:after {
  transform: rotate(-90deg);
}

#mobileMenuContainer .dropdown-toggle[aria-expanded="true"] > span:after {
  transform: rotate(0deg);
}

#mmCTU.dropdown-toggle[aria-expanded="false"] {
    border: 0;
}

#mmCTU.dropdown-toggle[aria-expanded="true"] {
    border-bottom: 1px solid #dee2e6!important;
}

#mobileMenuContainer div[aria-labelledby^="dropdown"] > div > a:last-child {
	border-bottom: 0;
}

#mobileMenuContainer a.nav-link.dropdown-toggle {
	color 		: #205699!important;
	font-weight : 600;
}

#mobileMenuContainer div.list-group a {
	color 		: #205699!important;
	font-weight : 400;
	text-transform: uppercase;
}
/*mobileMenuBar*/


/********************************
YELLOW BAR
********************************/

#yellowBar,
#yellowBar a, 
#yellowBar a:hover,
#yellowBarMbl,
#yellowBarMbl a, 
#yellowBarMbl a:hover {
	color: #205699;
	text-decoration: none;
}

#yellowBar form.form-inline { /*mq*/
	display: block;
}


/********************************
BREADCRUMB
********************************/

#breadCrumbBar,
#breadCrumbBar > div.container {
	padding-right 	: 0;
	padding-left 	: 0;
}

.breadcrumb {
	font-size 		: .85rem;
	background-color: transparent;
	padding 		: .5rem 0;
	margin-bottom 	: 0;
}

.breadcrumb-item a {
	color: #707070;
}

/* make breadcrumb font and padding less on small devices */
.breadcrumb-item { /*mq*/
	font-size 		: 80%;
	text-transform  : uppercase;
}
.breadcrumb-item+.breadcrumb-item { /*mq*/
	padding-left : .25rem;
	font-size 	 : 80%;
}
.breadcrumb-item+.breadcrumb-item::before { /*mq*/
    color 			: #707070;
    content 		: "|";
    padding-right 	: .25rem;
}
/* breadcrumb */





/********************************
CONTENT
********************************/

#contentWrapper .card-footer {
	background-color : #FFF;
	border-top 		 : 0; 
}

#contentWrapper .card {
	border 			: 0;
	margin-bottom 	: 1.5rem;
}

#contentWrapper .topcat .card {
	background-color: #FEF7D7;
}

#contentWrapper .topcat .card .card-text {
	color: #000;
}

#contentWrapper .topcat .card a {
	color 			: #205699;
	text-decoration : none;
}

#contentWrapper .topcat .card a:hover,
#contentWrapper .topcat .card a:hover .card-text,
#contentWrapper .topcat .card a:hover .card-text i {
	background-color : #205699!important;
	color 			 : #FFF!important;
}

#sectionImgHdr {
	padding: 3rem;
}

#contentWrapper {
	padding-right 	: 0;
	padding-left 	: 0;
	padding-top 	: 1.5rem;
	margin-top 		: .5rem;
}

#contentWrapper > div.row > div.col:first-child h1 {
	color 			: #205699;
	font-weight 	: bold;
	margin-top 		: -.7rem;
	margin-bottom 	: 1.5rem;
}

#contentWrapper > div.row > div.col:first-child h3 {
	padding-bottom 	: 1rem;
	font-weight 	: bold;
}

#contentWrapper ul.flush,
#contentWrapper ol.flush {
	margin-left 	: -1.25rem;
}

/* remove margin from last p tag in the content */
#contentWrapper #content p:last-child {
	margin-bottom: 0;
}


/* css for tabs <--> accordion */
#tabsContainer .nav-tabs { /*mq*/
	display:none;
}
#contentWrapper #myTabContent .card { /*mq*/
    margin-bottom: 0;
}
#tabsContainer a[data-parent="#myTabContent"][aria-expanded="true"] {
    color: #495057;/*#205699;*/
}


/* homepage features headline link */
.card .card-body > h4.card-title > a {
	color 			: #205699;
	text-decoration : none;
}
.card .card-body > h4.card-title > a:hover {
	text-decoration : underline;
}



/* content */


/********************************
SIDE BAR
********************************/

#sidebarMenu {
	margin-bottom 	: 1.5rem;
}
#sidebarMenu a.list-group-item {
	border-radius 	 : 0;
	background-color : #fef7d7;
	color 			 : #205699;
	padding 		 : .3rem .3rem .3rem 1.5rem;
	border 			 : 1px solid #D5D5D5;
}

#sidebarMenu > a.list-group-item:hover,
#sidebarMenu .sidebarSubMenu > a.list-group-item:hover {
	background-color: #FFEEA1;
}

#sidebarMenu .list-group-item.active,
#sidebarMenu .list-group-item.active:hover {
	background-color : #205699;
	font-weight 	 : 700;
	color 			 : #FFF;
}

#sidebarMenu .sidebarSubMenu > a.list-group-item {
	background-color : #F5F4EF;
	padding-left 	 : 3rem;
	font-size 		 : .85rem;
}

#sidebarMenu .sidebarSubMenu .list-group-item.active,
#sidebarMenu .sidebarSubMenu .list-group-item.active:hover {
	background-color : #DFDFDF;
	font-weight 	 : 700;
	color 			 : #205699;
}

#sidebarMenu .sidebarSubMenu > a.list-group-item:last-child,
#sidebarMenu .sidebarSubMenu > a.list-group-item:last-child:hover {
	border-bottom 	: 0;
}

#sidebarMenu .sidebarSubMenu > a.list-group-item:first-child,
#sidebarMenu .sidebarSubMenu > a.list-group-item:first-child:hover {
	border-top 		: 0;
}

#sidebar .aside > p,
#sidebar .aside ul,
.text-darkgray {
	color: #777;
}
/* remove margin from last p tag in an aside */
#sidebar .aside > p:last-child {
	margin-bottom: 0;
}
/* sidebar */


/********************************
BOTTOM BAR
********************************/

#bottomBar {
	color: #FFF;
}

#bottomBar a, 
#bottomBar a:hover {
	color 	: #FFD200;
}

#bottomBar #socialIconsYel a { /*mq*/
	padding-right: .9rem;
}
#bottomBar #socialIconsYel a:last-child {
    padding-right: 0;
}

#bottomBar #socialIconsYel a[href="https://plus.google.com/113909226485462164723"] {
	display: none !important;
}

#bottomBar #socialIconsYel a[href="http://tampaelectricblog.com"] {
	display: inline !important;
}
/*bottomBar*/


/* ----------- 2019 Usability changes------------*/
.navbar-menu-icon {
    font-size: 20px;
}

#yellowPageTitleBar {
    background-color: #FFD200;
}

#yellowPageTitleBar .page-title {
    color: #205699;
    font-weight: bold;
	font-size: 1.5rem;
}

.sticky-menuBar {
    position: fixed;
    top: 0;
}

.menu-bar-zindex {
    z-index: 1000;
}


/* ----------- End 2019 Usability changes------------*/



/*------------2020 Footer Changes-----------*/
/*headers*/
#bottomBar h6 {
    font-weight    : normal!important;
    color          : #FFD200!important;
    font-size      : 0.9rem!important;
    text-transform : uppercase;
}

#bottomBar img {
	height     : 50%!important;
	margin-top : 0.5rem!important;/*MQ below*/
}

/*links*/
#bottomBar a, 
#bottomBar p.text-white {
	font-size: 0.8rem!important;
}

#bottomBar div a.text-white {
	padding-bottom: 0.25rem!important;
}
#bottomBar p.text-white {
	white-space: nowrap!important;
}

/*social icons*/
#bottomBar a > span {
	font-size: 1.2rem!important;
}

/*------------2020 Footer Changes-----------*/


/*------------2020 Colors-----------*/

/*colors*/
.text-emera-light-blue {
    color: #106DDC!important;
}

.text-emera-blue {
    color: #205699!important;
}

.text-emera-medium-blue {
    color: #173F71!important;
}
.text-dark-blue {
    color: #06172D !important;
}

.text-emera-gold {
    color: #FDD200 !important;
}

.border-emera-light-blue {
    color: #106DDC!important;
}

.border-emera-medium-blue {
    color: #173F71!important;
}

.border-dark-blue {
    border-color: #06172D !important;
}

.border-emera-gold {
    border-color: #E1C213!important;
}

/*------------End 2020 Colors-----------*/




/********************************
MEDIA QUERIES
********************************/

@media (max-width: 320px) {
	/* don't show share icon on super small devices like iphone se */
	.addthis_button {
		display: none;
	}
	/* fix display of last link in TE/PGS yellowbar, style not applied to portal/te */
	#lastYBlink {
		margin-left  : 0!important;
		margin-right : 0!important;
		padding-top  : 1rem;
	}
}

/* ----------- 2019 Usability changes------------*/
@media (max-width: 576px) {
    .nav-bar-text-size {
        font-size: 60% !important;
    }

    #yellowPageTitleBar .page-title {
        font-size: large!important;
    }
}
/* ----------- 2019 Usability changes------------*/

/* resets the position of the your account nav dropdown for small devices */
@media (max-width: 767.9px) {
	#yourAccountDD {
		left       : -2.2rem; 
		margin-top : -.1rem;
	}
}

/* css for tabs <--> accordion and color change for contact us */
@media (max-width: 767px){
	#myTabContent .tab-pane {
		display : block !important;
		opacity : 1;
	}

	#contactUs .bg-light {
		background-color: #FFF!important;
	}

    /*------------2020 Mega Menu and Footer Changes-----------*/
    #bottomBar img {
        margin-top: .25rem!important;
    }
    /*------------End 2020 Mega Menu and Footer Changes-----------*/

}

/* man handle the mega menu position */
@media (min-width: 768px) {/*, ((max-width: 786px) AND (min-width: 576px))*/
 	#searchTxt, 
 	#searchTxtErr {
		width: 10rem;
	}

 	#menuLinksLeft .dropdown-menu,
	#menuLinksRight .dropdown-menu {
		width  : 768px;
		bottom : -30rem;
	}
	#resMegaMenuDD {
		left: -5rem;
	}
	#busMegaMenuDD {
		left: -14.8rem;
	}
	#comMegaMenuDD {
		left: -22.95rem
	}
	#ctuMegaMenuDD {
		left: -36.425rem;
	}

	/* css for tabs <--> accordion */
	#tabsContainer .nav-tabs {
		display: flex;
	}
	#contentWrapper #myTabContent .card {
		border: none;
	}
	#myTabContent > .card > .card-header {
		display:none;
	}  
	#myTabContent > .card > .collapse{
		display:block;
	}

	/* ----------- 2019 Usability changes------------*/
	.nav-bar-color {
        background-color: #fff !important;
    }
    .nav-bar-color a:focus {
        background-color: #fff !important;
    }
    .nav-bar-text-color {
        color: #205699 !important;
    }

    .your-account-menu {
        background-color: #fff !important;
    }
    .your-account-menu a {
        color: #205699 !important;
    }
    .your-account-menu .menuPipe {
        color: #205699 !important;
    }
    /* ----------- 2019 Usability changes------------*/
}

@media (min-width: 992px) {
 	#menuLinksLeft .dropdown-menu,
	#menuLinksRight .dropdown-menu {
		width  : 992px;
		bottom : -25rem;
	}
	#resMegaMenuDD {
		left: -7.5rem;
	}
	#busMegaMenuDD {
		left: -20.3rem;
	}
	#comMegaMenuDD {
		left: -31.45rem
	}
	#ctuMegaMenuDD {
		left: -50.925rem;
	}
}

@media (min-width: 1200px) {
 	#menuLinksLeft .dropdown-menu,
	#menuLinksRight .dropdown-menu {
		width  : 1200px;
		bottom : -21rem;
	}
	#resMegaMenuDD {
		left: -8.5rem;
	}
	#busMegaMenuDD {
		left: -21.3rem;
	}
	#comMegaMenuDD {
		left: -32.45rem
	}
	#ctuMegaMenuDD {
		left: -63.18rem;
	}
	.img-lg-fluid {
		width : 263px;
		height: auto;
	}
}

@media 	(min-width: 1200px),
		(min-width: 992px),
		(min-width: 768px) {
	#actionLinks a.nav-link {
		font-size 	: 100%;
		font-weight : normal;
	}
	#actionLinks a.nav-link > img {
		height 		: 29px;
		width 		: auto;
	}
	/* make the breadcrumb larger at higher res */
	.breadcrumb-item {
		font-size: 100%;
	}
	.breadcrumb-item+.breadcrumb-item {
		padding-left : .5rem;
		font-size 	 : 100%;
	}
	.breadcrumb-item+.breadcrumb-item::before {
		padding-right: .5rem;
	}

	#bottomBar #socialIconsYel a {
		padding-right: .75rem;
	}  

}

/* logo search bar */
@media 	(min-width: 1200px),
		(min-width: 992px) {
	.nav-pipe {
		padding: .5rem 1rem;
	}
	#searchTxt, #searchTxtErr {
		width: 18rem;
	}
	#yellowBar form.form-inline {
		display: flex;
	}
}