/*!
 * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Global Styles */

html,
body {
   /*height: 100%;*/
/* 	background:url(../images/capricorn-base-background.png) repeat-x;
	background-color:#EAF4FF; */	
}

/* Fix 1rem in Bootstrap 3 being 10px */
html {
	font-size: 16px;
}

.capricorn-container {
  background-color:#fff;
}

/* Registration Checkbox */
.checkbox-lg{
	width: 26px;
	height: 26px;
	vertical-align: middle;
	margin-top: 0px !important;
}

/* Registration Checkbox */
.checkbox-label-lg{
	line-height: 26px;
}

.drop-shadow {
	-webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);
	box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);
}
.left-drop-shadow {	
	-webkit-box-shadow: -10px 0 5px -5px rgba(0, 0, 0, .3);
	box-shadow: -10px 0 5px -5px rgba(0, 0, 0, .3);
}
.top-drop-shadow {	
	-webkit-box-shadow: 0 -10px 10px -10px rgba(0,0,0,0.6);
    box-shadow: 0 -10px 10px -10px rgba(0,0,0,0.6);
}
.bottom-drop-shadow {	
	-webkit-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.6);
    box-shadow: 0 10px 10px -10px rgba(0,0,0,0.6);
}
.capricorn-carousel-shadow {	
	-webkit-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.6);
    box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.6);
	padding-top:15px;
}
.capricorn-container.drop-shadow {
	padding-left:0;
	padding-right:0;
}

.capricorn-topNav {
	float: right!important;
	margin-top:-15px;	
}
.capricorn-logo-img {
	height:	80px;
	width: 114px;	
}

#capricorn-main-menu {
	margin-top:-15px;
}

.capricorn-block-bottomspace{
	margin-bottom: 20px;
}

.capricorn-popover-fw { width:300px; max-width: 300px; }
.popover-title{ background-color: #428bca; color:#fff; } 
.popover-content{ background-color: #f7f7f7; }
.popover-content > hr { margin-top: 5px; margin-bottom: 5px; }

.capricorn-collapse-menubar-label {
	display:inline-block;
	float:right;
	margin: 15px 10px 0 0;
}

#capricorn-carousel {
	border-top: 1px solid #DDD;
}
.carousel-caption {
	position: absolute;
	right: 15%;
	bottom: 0px;
	left: 15%;
	z-index: 10;
	padding-top: 20px;
	/* padding-bottom: 20px; */
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
	padding-bottom:0;
}

.carousel-caption-title {
    font-size: 34px;
}

.carousel-caption-text {
    font-size: 18px;
    padding-bottom: 10px;
}

.navbar { 
	margin-bottom:0; 
	min-height:0;
}
.navbar-default { 
	background-color: transparent;
    padding-bottom:4px;
	border: 0px;
}
.navbar-brand {
   padding-top: 5px;
}
.navbar-logo {
   /*float: left;
   margin-top:-16px;*/
}

.navbar-brand.company-logo {
    max-width: 200px;
    margin-top: 15px;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
	border: 0px #e7e7e7;
}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
	/*background-color: #efefef;
	border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;*/
}

.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}

/* Home Page Login Panel */
.capricorn-login-container {
	height: 272px;
	border-top: 1px solid #DDD;
	/*border-bottom: 1px solid #CCC;*/
	margin-left:15px;
	margin-right:15px;
}

.capricorn-login-panel > h3 { 
	margin-top:10px; 
}

.capricorn-login-form-group {
	margin-bottom: 15px;
}

.capricorn-rememberme-checkbox {
	position: relative;
	display: inline;
	min-height: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}
/*
#capricorn-login-help-link {
	font-size:0.7em;
}
*/

/* Home Page Carousel */
.carousel {
    height: 272px;
}

.carousel .item,
.carousel .item.active,
.carousel .carousel-inner {
    height: 100%;
}

.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

/* Home Page Marketing Panels */
.capricorn-homepanel-green {
	border-color: #d6e9c6;
	max-width:344px;
	max-height:265px;
	margin-left:auto;
	margin-right:auto;
}
.capricorn-homepanel-green > .panel-heading {
	color: #FFF;
	background-color: #8BC43F;
	border-color: #d6e9c6;
}

.capricorn-homepanel-red {
	border-color: #ebccd1;
	max-width:344px;
	max-height:265px;
	margin-left:auto;
	margin-right:auto;	
}
.capricorn-homepanel-red > .panel-heading {
	color: #FFF;
	background-color: #E01327;
	border-color: #ebccd1;
}

.capricorn-homepanel-blue {
	border-color: #bce8f1;
	max-width:344px;
	max-height:265px;
	margin-left:auto;
	margin-right:auto;	
}
.capricorn-homepanel-blue > .panel-heading {
	color: #FFF;
	background-color: #32A3DC;
	border-color: #bce8f1;
}

.capricorn-homepanel-yellow {
	border-color: #faebcc;
	max-width:344px;
	max-height:265px;
	margin-left:auto;
	margin-right:auto;	
}
.capricorn-homepanel-yellow > .panel-heading {
	color: #FFF;
	background-color: #FF9900;
	border-color: #faebcc;
}
.capricorn-tou-text { 
	color:#666;
	text-align:center;
	margin-left:auto;
	margin-right:auto;	
	padding-top:15px;
}
.capricorn-tou-clock { 
	color:#333;
	font-size: 1.4em;
	width:70%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:15px;
}
.capricorn-tou-text-off { 
	color:#77A934;
	font-weight:bold;
}
.capricorn-tou-clock-off { 
	border:1px solid #77A934;
	background-color:#8BC43F;
}
.capricorn-tou-text-mid { 
	color:#FF9900;
	font-weight:bold;
}
.capricorn-tou-clock-mid { 
	border:1px solid #FF9900;
	background-color:#FFCC00;
}
.capricorn-tou-text-on { 
	color:#DF1326;
	font-weight:bold;
}
.capricorn-tou-clock-on { 
	border:1px solid #DF1326;
	background-color:#FF4242;
}

.panel-capricorn{
	margin-bottom: 0px;
	border:0px;
}

.capricorn-panel-body {
	padding:0px;
}
.capricorn-twitter-panel-body {
    padding:0 0 0 5px;
	max-height:200px;
}
.capricorn-twitter-panel-body iframe {
    width: 100%;
    height: 100%;
}
.capricorn-tou-panel-body {
    padding:0px;
	max-height:200px;
}

.capricorn-social-panel {
	max-width:520px;
	margin-left:auto;
	margin-right:auto;
}
.capricorn-social-panel-body {
    padding:0 0 0 5px;
	height:400px;
}
.capricorn-social-panel-body iframe {
    width: 100%;
    height: 100%;
}

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

.capricorn-selected-panel {
	border-color: #2B7DAF; /*#d9edf7; /* #bce8f1 */
	margin-left:auto;
	margin-right:auto;	
}
.capricorn-selected-panel > .panel-heading {
	color: #FFF;
	font-size: 16px;
	background-color: #2B7DAF;/*#32A3DC;*/
	border-color: #2B7DAF; /*#32A3DC;/*#d9edf7;#bce8f1;*/
}
.capricorn-selected-panel > .panel-footer {
	background-color: #fff;
	border-color: #ddd/*#d9edf7;/*#bce8f1;*/
}

.capricorn-selected-panel-light {
	border-color: #ddd; 
	margin-left:auto;
	margin-right:auto;	
}
.capricorn-selected-panel-light > .panel-heading {
	background-color: #d9edf7;
	border-color: #ddd;
}
.capricorn-selected-panel-light > .panel-footer {
	background-color: #eee;
	border-color: #ddd;
}

/* Left Nav Styles */

/*
.list-group.panel > .list-group-item {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px
}
*/
.list-group-submenu {
  margin-left:15px;
}
.strong { font-weight: bold; }

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.cap-table-wrapper {
  display:table;
  width:100%;
}
.cap-row {
  display:table-row;
}
.cap-cell {
  display:table-cell;
  margin:0;
  padding:0;
  vertical-align:middle;
}

.cap-cell-group {
  display:inline-block;
  margin:0;
  padding:0;
  vertical-align:middle;
}

.cap-cell-label {
  display:inline-block;
  margin:0;
  padding:0 6px 0 6px;
  vertical-align:middle;
  font-weight:bold;
  text-align:right;
}
.cap-cell-data {
  display:inline-block;
  margin:0;
  padding:0 6px 0 6px;
  vertical-align:middle;
}

.cap-cell-top {
  display:table-cell;
  margin:0;
  padding:0;
  vertical-align:top;
}

.cap-subscribe-button-container {
	float:right;
}

#subscribeForm .row {
	margin-bottom:6px;
}

#downloadSheetForm .row {
	margin-bottom:6px;
}

.capricorn-rank-success {

}

.capricorn-text-lg {
	font-size:24px;
}

.capricorn-text-md {
	font-size:20px;
}

.capricorn-text-sm {
	font-size:16px;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Submit Meter Reading Dial Input box */
.knob {
	background: #f5f5f5;
	border: 1px solid #aaa !important;
	border-radius: 3px;
}

/* Pricing Page Styles */

.price {
    display: block;
    font-size: 50px;
    line-height: 75px;
}

.price sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
}

.period {
    display: block;
    font-style: italic;
}

.no-padding {
	padding: 0;	
}

.padding-right-4{
	padding-right: 4px;
}

.padding-left-0{
	padding-left: 0;
}

/* use to center text vertically to align with input field*/
.line-height-35{
	line-height: 35px;
}

.margin-top-5{
	margin-top: 5px;
}

.margin-bottom-5{
	margin-bottom: 5px;
}

.no-bottom-margin {
	margin-bottom: 0;
}

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

/* Dashboard Styles */
#container-electric, #container-water, #container-gas {
	border-bottom:1px solid #ddd;
	width: 100%; height: 110px; float: left;
}

.compare-info-container {
	background-color:#f5f5f5;
	padding: 0 0 0 4px;
	border-bottom:1px solid #ddd;
}

.compare-value-text {
	font-size:20px;
}

.compare-comment-text-active {
	font-size:12px;
	color:#999;
}

.compare-comment-text {
	font-size:12px;
	color:#999;
	border-bottom:1px solid #ddd;
}

.compare-details-link {
	color:#666;
	padding:6px 0 0 0;
}

.badge-notify {
    background: red;
    position: relative;
    color: #fff;
    top: 10px;
    left: -14px;
    padding: 1px 4px 1px 4px;
}

#msgCenterCount.badge-notify {
	top: 4px;
	left: -20px;
}

#paymentExtensionWidgetContainer {
	border-bottom:1px solid #ddd;
}

/* Smart Meter Activity */
#mySmartMeterActivityPortlet .tab-content>.active, #mySmartMeterActivityPortlet .tabContentWrapper {
    background: white;
}

/* Page Rating Styles */
.star-rating {
  line-height:32px;
  font-size:1.25em;
  cursor: pointer;
}

#pageStarRating{
  display: flex; 
  flex-direction: column; 
  align-items: flex-end;
}

#pageStarRatingInner{
  display: flex; 
  flex-direction: column; 
  align-items: flex-start;
}

/* Comparison Styles */
.compare-better-container {
	border: 1px solid #060;
	background-color: #E8FFE8;
	padding:6px;
}
.compare-same-container {
	border: 1px solid #aaa;
	background-color: #f5f5f5;
	padding:6px;
}
.compare-worse-container {
	border: 1px solid #c00;
	background-color: #FFE6E6;
	padding:6px;
}

#customEventWidget {
	margin-top:20px;
}

/* Progress Bar Timeline */
.progress-bar-success {
    position: relative;
}
#horizontal-style {
    display: table;
    width: 100%;
    position:absolute;
    height:20px;
}
#horizontal-style li {
    position:absolute;
    list-style-type:none;
}
li[data-placement="top"] {
    margin-bottom: 10px;
}
li[data-placement="bottom"] {
    margin-top: 20px;
}
li[data-position="0"] {
    left:5%;
}
li[data-position="10"] {
    left:10%;
}
li[data-position="20"] {
    left:20%;
}
li[data-position="30"] {
    left:30%;
}
li[data-position="40"] {
    left:40%;
}
li[data-position="50"] {
    left:50%;
}
li[data-position="60"] {
    left:60%;
}
li[data-position="70"] {
    left:70%;
}
li[data-position="80"] {
    left:80%;
}
li[data-position="90"] {
    left:90%;
}

/* Footer Styles */

footer {
    margin: 15px 0 0 0;
	padding:15px 0 0 0;
	min-height:275px;
}

/* Fix the UI issue that html tag has some space insdie before body tag.*/
.capricorn-footer-link {
	line-height:30px;
}

/* ----------------------------------------------------------- */
/*                  BOOTSTRAP 3 OVERRIDES                      */
/* ----------------------------------------------------------- */
/*.dataTables_wrapper>.row { margin-right:0; } */

.tab-content>.tab-pane {
/*.tab-pane {*/
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 10px;
	/*
	overflow-y: auto;
	overflow-x: hidden;
	*/
}

head{
  height: 0px;
}

.tab-content>.active,
.tabContentWrapper
{
	background: #f5f5f5;/*#fff;*/
	overflow-x:hidden;
}

.tabContentWrapper h4{
	margin-top: 0px;
}

#tabs > .nav > li > a {
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

#tabs > .nav > li.active > a {
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
	background-color: #f5f5f5;	
}

.table-striped > tbody > tr > td.highlight {
	background-color:#d9edf7;
}
/*.panel-default { border-color:#FFF; }*/
/* 2017-10-30 : use 15 px instead to resolve some UI issue on small screen devices */
/* .panel-body { padding: 4px; } */
.panel-body { padding: 15px; }

/* fix the problem that form-horizontal does not fit right into the new panel-body */
/*
.form-horizontal .form-group {
  margin-right: -4px;
  margin-left: -4px;
}
*/
.form-horizontal .form-group {
  margin-right: -15px;
  margin-left: -15px;
}

@media screen and (max-width: 767px) {
	.table-responsive {
		border: 0px;
	}
}


/*----------------------------------------------------------------------- */
/* Progress Bar on Dashboard*/
/*----------------------------------------------------------------------- */
#alertPortlet .progress {
  position: relative;
}

#alertPortlet .progress-bar {
	overflow-x:visible;
	white-space:nowrap;
	color:black; /* color is for demo purposes */
}
	
#alertPortlet .progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
}


/* TOU Indicator */
.touIndicatorBorder { border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px; }
.touIndicatorText { color: #333; font-size: 14px; text-align:center; padding: 0 0 15px 0;}
.touIndicatorOffPeakText { color: #8BC43F;font-weight:bold; }
.touIndicatorMidPeakText { color: #FF9900;font-weight:bold; }
.touIndicatorOnPeakText { color: #DF1326;font-weight:bold; }
.touIndicatorPricingText { padding:4px;font-weight:bold; }
.touIndicatorOffPeakTime { color: #333; font-size: 24px; border: 1px solid #77A934; background-color: #8BC43F; width:80%;margin:auto;line-height:38px; }
.touIndicatorMidPeakTime { color: #333; font-size: 24px; border: 1px solid #FF9900; background-color: #FFCC00; width:80%;margin:auto;line-height:38px;  }
.touIndicatorOnPeakTime { color: #333; font-size: 24px; border: 1px solid #E01327; background-color: #FF4242; width:80%;margin:auto;line-height:38px;  }

/* TOU Dial */
#tou-dial-container { text-align:center;height:170px; }
#tou-dial-container > * { margin: auto auto 8px auto; }
#tou-info-container { text-align:center; }
.touDialBorder { border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px; }
.touDialText { color: #333; font-size: 14px; text-align:center; padding: 0 0 10px 0;}

.touDialOffPeakBorder { border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border: 1px solid #77A934;width:180px;margin:auto auto 8px auto; background-color: #fff;  }
.touDialMidPeakBorder { border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border: 1px solid #FFCC00; width:180px;margin:auto auto 8px auto; background-color: #fff;  }
.touDialOnPeakBorder { border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border: 1px solid #E01327; width:180px;margin:auto auto 8px auto; background-color: #fff;  }

.touDialOffPeakText { color: #8BC43F;font-weight:bold; }
.touDialMidPeakText { color: #FFCC00;font-weight:bold; }
.touDialOnPeakText { color: #DF1326;font-weight:bold; }
.touDialPricingText { padding:4px;font-weight:bold; }
.touDialOffPeakTime { color: #333; font-size: 24px; /*border: 1px solid #77A934;*/ background-color: #fff; width:140px;margin:auto;line-height:38px;text-align:center; }
.touDialMidPeakTime { color: #333; font-size: 24px; /*border: 1px solid #FFCC00;*/ background-color: #fff; width:140px;margin:auto;line-height:38px;text-align:center;  }
.touDialOnPeakTime { color: #333; font-size: 24px; /*border: 1px solid #E01327;*/ background-color: #fff; width:140px;margin:auto;line-height:38px;text-align:center;  }

/* the help button (show when "enableHelp" is set to true on property file) */
.helpButtonContainer{
	text-align: right; 
	margin-bottom: 10px;
}

/* Datatable-responsive: allow word to be wrapped in the child row (collapsed detail row) of the datatable  */
table.dataTable tr.child ul li {
	white-space: inherit;
}

/* 2016-11-11 : make the first column in the consumption table (for all electirc, water and gas table) have the min-width so that 
   the content will not be automatically warrpped (It was affected by the plus sign inside the first column) */
table#consumptionTable > tbody > tr > td:first-child{
	min-width: 90px;
}
/* currently used for the consumption, usage charts */
.chartBox{
	margin-top:12px;
	border: 1px solid #ddd;
	/*border-radius: 4px;*/
	overflow: auto;
	background-color:#fff;
}

/* currently used for the usage charts */
.rankingBox{
	border: 1px solid #aaaaaa;
	padding:15px;
	margin-bottom:15px;
}

/* currently used for the usage charts */
.rankingBox-light{
	border: 1px solid #dddddd;
	margin-bottom:10px;
	padding:10px;
}

/* currently used for the usage charts */
.rankingTipBox{
	border: 1px solid #dddddd;
	margin-bottom:10px;
	padding:10px;
	background:#f5f5f5;
	min-height:140px;
}

/* currently used for the usage charts */
#recentUsageTabContents .rankingTipBox{
	border: 1px solid #dddddd;
	margin-bottom:10px;
	padding:10px;
	background:#fff;
	min-height:140px;
}

#recentUsageTabContents .rankingBox-light{
	border: 1px solid #dddddd;
	margin-bottom:10px;
	padding:10px;
	background-color:#FFF;
}

/* add vertical space between bootstrap buttons */
.verticalBtn{
	margin-top: 3px;
	margin-bottom: 3px;
}

.form-inline .form-group{
	margin-right: 15px;
	margin-bottom: 15px; /* fix the issue that each form-group does not have space in between at smaller screen */
}

.paymentExtensionContainer { padding:6px; background:#FFC; }
.chartTipsContainer { background:#FFC; border: 1px solid #FC0; color:#333; padding:4px; font-size:12px; }
.pageIntroContainer { margin: 12px 0 12px 0; }

.apollo-form-button {
	width:100%;
	text-align:left;
	font-size:16px;
    /*background-color: #eea236;
    border-color: #eea236;
    color: white;	*/
}

/* ----------------------------------------------------------- */
/*                         Responsive Styles                   */
/* ----------------------------------------------------------- */

@media (min-width: 768px) {
	.capricorn-container {
		padding: 24px;
		width: 750px;
		margin-right: auto;
		margin-left: auto;
		-webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);			
	}
	.capricorn-login-container {
		margin-left:-15px;
	}
	.capricorn-topNav {
		margin-top:5px;	
	}
	.nav > li > a {
		padding: 10px 10px;
	} 
	.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
		/*background-color: #fff;
		border: 0px solid #eee;*/
	}
	.capricorn-twitter-panel-body  {
		height:200px;
	}
	.capricorn-tou-panel-body  {
		height:200px;
	}	
	.carousel-caption {
		padding-bottom: 0px;
		right: 0;
		left: 0;
		width:98%;
		margin-left:auto;
		margin-right:auto;
	}
	
	/* an official experimental example of same-height columns using CSS flexbox in Bootstrap v3.2.0. */
	/* This will break columns stack in small screen, therefore use it for desktop screen or above only */
	.row-eq-height {
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: -ms-flexbox;
	  display: flex;
	}
	.panel-capricorn { border: 1px solid #ddd; }
	.panel-body { padding: 15px; }
	
	.form-inline .form-group{
		margin-right: 0;
		margin-bottom: 0;
	}	
	
	/* Align input field to top so that input field with error message can be still parallel to others without error message. */
	.form-inline-align-element .form-group{
		vertical-align: top;
	}
	
	.sm-padding-right-4{
		padding-right: 4px;
	}

	.sm-padding-left-0{
		padding-left: 0;
	}
	
}

@media (min-width: 992px) {
	.capricorn-container {
		padding: 24px;
		width: 970px;
		margin-right: auto;
		margin-left: auto;
		-webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);			
	} 
	.capricorn-login-container {
		margin-left:-15px;
	}
	.capricorn-topNav {
		margin-top:5px;	
	}
	.nav > li > a {
		padding: 10px 15px;
	} 
	.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
		/*background-color: #fff;
		border: 0px solid #eee;*/
	}
	.capricorn-panel-body  {
		height:150px;
	}	
	.capricorn-twitter-panel-body  {
		height:150px;
	}
	.capricorn-tou-panel-body  {
		height:150px;
	}	
	.panel-capricorn { border: 1px solid #ddd; }
	.panel-body { padding: 15px; }

	.apollo-form-button {
		width:50%;
	}		
}

@media (min-width: 1200px) {
	.capricorn-container {
		width: 1170px;
		margin-right: auto;
		margin-left: auto;
		-webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);			
	}
	.capricorn-login-container {
		margin-left:-15px;
	}
	.capricorn-topNav {
		margin-top:5px;	
	}
	.nav > li > a {
		padding: 10px 15px;
	}	
	.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
		/*background-color: #fff;
		border: 0px solid #eee;*/
	}
	.capricorn-panel-body  {
		height:150px;
	}
	.capricorn-twitter-panel-body  {
		height:150px;
	}
	.capricorn-tou-panel-body  {
		height:150px;
	}
	.panel-capricorn { border: 1px solid #ddd; }
	.panel-body { padding: 15px; }
	
} 

@media (max-width: 1199px) {
	.star-rating-label {
		font-size:0.7em;
	}	

	/* currently used for the usage charts */
	.rankingTipBox{
		min-height:140px;
	}		
}


@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
	.navbar-form .input-group>.form-control {
		/*width: 160px;*/
	}
	.capricorn-login-panel > h3 {
		font-size:1.2em;
	}
	/*#capricorn-login-signup {
		padding:0px;
	}*/
	#capricorn-main-menu {
		margin-top:0px;
	}	
	.star-rating-label {
		font-size:0.8em;
	}

	/* currently used for the usage charts */
	.rankingTipBox{
		min-height:160px;
	}		

}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
	.navbar-form .input-group>.form-control {
		width: 100%;
	}
	.navbar-logo {
		/*margin-top: -86px;*/
	}

	/* break the text into multiple lines if the screen size does not fit the width */
	.multilineBtn{
		white-space:normal;word-wrap: break-word;
	}

	/* currently used for the usage charts */
	.rankingTipBox{
		min-height:80px;
	}	
	.cap-subscribe-button-container {
		margin: 6px 0 6px 0;
		text-align:center;
		float:none;
	}	
}

/****************************************************/
/*			Dashboard - Left Navigation				*/
/****************************************************/
#dashboard-left-nav-container #tabs{
	overflow-x:hidden;
	background-color:#f5f5f5;
}

 #dbln-tab-content.tab-content > .tab-pane {
	min-height:inherit;
}

#mainTabs-dashboard{
	background-color:white;
}

#dashboard-left-nav-container{
	width:100%;
	padding: 0;
}

#dbln_selectAccountTableMenu{
	padding: 0 1em;
}

.sidebar {
    z-index: 1;
    position: absolute;
    width: 50px;
	padding:0;
}
  
.sidebar .sidebar-nav.navbar-collapse {
  padding-left: 0;
  padding-right: 0;
}
.sidebar .sidebar-search {
  padding: 15px;
}
.sidebar ul li {
  border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
  background-color: #eeeeee;
}
.sidebar .arrow {
  float: right;
}
.sidebar .fa.arrow:before {
  content: "\f104";
}
.sidebar .active > a > .fa.arrow:before {
  content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
  border-bottom: none !important;
}
.sidebar .nav-second-level li a {
  padding-left: 37px;
}
.sidebar .nav-third-level li a {
  padding-left: 52px;
}
@media (min-width: 992px) {
  .sidebar {
    z-index: 1;
    position: absolute;
    width: 150px;
  }
  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
    margin-left: auto;
  }
}

.tab-pane{
	padding-top:10px;
}

.page-wrapper{
	margin-left:0;
}

.tabs-left{
	padding-top:0;
}

.show-nav{
	overflow-x:hidden;
	transform: translate(50px);
}

@media(max-width: 767px){
	.nav > li > a {
		padding: 10px 10px;
	}
	
	.fa-3x{
		font-size:2em;
	}
	
	#dbln-tab-content.tab-content > .tab-pane {
		padding:4px;
	}	
	
	#scotch-panel {
		background-color: #005C82 !important;
	}
}

@media(min-width: 768px){
	.page-wrapper{
		margin-left:180px;
	}
	
	.fa-3x{
		font-size:2em;
	}
	

}

@media(min-width: 992px){
	.page-wrapper{
		margin-left:150px;
	}
	
	.fa-3x{
		font-size:3em;
	}
	

}

.ldb-nav{
	padding-right:1em;
}

.ldb-nav a, .ldb-nav a:hover, .ldb-nav a:focus, .ldb-nav a:active {
	color:#24557e;
	text-decoration:underline;
}

.fa-1-5x{
	/*font-size: 1.5em;*/
	font-size: 28px;
}

@media only screen and (min-width : 768px) {
    /* Closes the Panel on window resize from small to large. */
    /* Important tags aren't always bad otherwise you can close with JS on resize. */
    .scotch-panel-canvas {
        -o-transform: translate3d(0px, 0px, 0px) !important;
        -ms-transform: translate3d(0px, 0px, 0px) !important;
        -moz-transform: translate3d(0px, 0px, 0px) !important;
        -webkit-transform: translate3d(0px, 0px, 0px) !important;
        transform: translate3d(0px, 0px, 0px) !important; 
    }
	
	#scotch-panel{
		width:50px;
		left:0 !important;
		display: block !important;
	}
}

@media only screen and  (min-width: 992px){
	#scotch-panel{
		width:180px !important;
		left:0 !important;
	}
	
	.page-wrapper {
		margin-left: 180px;
	}
}


.capricorn-account-table-panel{
	background-color:white; 
	padding:10px; border-left: 
	1px solid #ddd; 
	border-right:1px solid #ddd;
}

.capricorn-menu-btn{
	margin-right:5px;
	color: #333333 !important;
}

.panel-body > .table {
	margin:0;
}

#capricorn-dashboard-panel-title{
	padding-top:5px;
	padding-bottom: 5px;
}

/* 2017-08-02 : Responsive capricorn table styles */

/* Property 						: Color Code */
/* border   			  			: #e7e7e7 	 */
/* head/foot background   			: #ddd 		 */
/* alternatinc cell background   	: #eee/#fff  */

.cap-table {
	display: table;
	width: 100%;
}

.cap-table-row, .cap-table-footer {
	display: table-row;
}

.cap-table-header{
	display: table-header-group;
}

.cap-table-body{
	display: table-row-group;
}

.cap-table-cell, .cap-table-head, .cap-table-foot {
	display: table-cell;
	padding: 6px;
}

.cap-table-head, .cap-table-foot{
	font-weight: bold;
	background-color: #f5f5f5;
}

.cap-table-foot{
	border-right: 1px solid #f5f5f5;
}

.cap-table-cell, .cap-table-head{
	border-bottom: 1px solid #e7e7e7;
	border-right: 1px solid #e7e7e7;
}

.cap-table-cell:last-child, .cap-table-head:last-child{
	border-right: none;
}

.cap-table-foot:nth-last-child(2){
	border-right: 1px solid #e7e7e7;
}

.cap-table-striped .cap-table-row-odd{
	background-color:#fff;
}

.cap-table-striped .cap-table-row-even{
	background-color:#fcfcfc;
}

.highlight{
	background-color: #d9edf7;
}

.cap-table-row:hover{
	background-color: #eeeeee;
}

#select_account_panel_body{
	padding:0;
}

.plannedOutageComments {
	max-height:75px;
	border: 1px solid #faebcc;
	padding:4px;
	margin-top:4px;
	background-color:#FFF;
	overflow-x: auto;
    overflow-y: auto;
}

/* 330-315 CMS Search Site Results styles */
.searchSiteResultTitle {
	padding-bottom:8px; 
	border-bottom:1px solid #ccc;
	text-align: center;
}

.searchSiteResultList {
	
}

.searchSiteResultFooter {
	border:1px solid #ccc; 
	background-color:#efefef; 
	padding:4px;
}

.notification-account-title {
	background-color:#eee !important;
}

/* enable bootstrap tooltip on disabled button */
.btn-default[disabled] { pointer-events:none; } 

/* 
To make disabled button show tooltip properly. It seems to be removed since the newer version after Bootstrap v3.32
*/
.btn.disabled.cap-btn-tooltip, .btn[disabled].cap-btn-tooltip, fieldset[disabled].cap-btn-tooltip{
	 pointer-events: none;
}

/*#330-143  2018-05-28 */
.force-inline-btn-group-200{
	min-width: 200px;
}

/* 2018-05-28 : img-responsive does not work perfectly in IE 11. Need this to resolve the responsive issue in IE. */
.img-responsive{
	width: auto;
}

.cursor-pointer{
	cursor: pointer;
}

.cursor-not-allowed {
	cursor: not-allowed;
}

.pointer-disabled {
	pointer-events: none;
}

/* Scrollable modal css */
.scrollable-modal-dialog{
    overflow-y: initial !important
}
.scrollable-modal-body{
    max-height: 600px;
    overflow-y: auto;
}


/* START Toggle Checkbox */
.onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #27A1CA; border-radius: 0px;
}

.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 26px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.onoffswitch-inner:before {
    content: "Yes";
    padding-left: 10px;
    background-color: #FFFFFF; color: #27A1CA;
}

.onoffswitch-inner:after {
    content: "No";
    padding-right: 10px;
    background-color: #FFFFFF; color: #666666;
    text-align: right;
}

.onoffswitch-switch {
    display: block; width: 25px; margin: 0px;
    background: #27A1CA;
    position: absolute; top: 0; bottom: 0; right: 65px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}


.onoffswitch-checkbox:disabled + .onoffswitch-label{
	border-color: #ccc;
}

.onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-inner {
    background-color: #ccc;
}

.onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-switch {
    background-color: #ccc;
}


/* END Toggle Checkbox */


/* For New Notification page */
.panel-lightblue {
  border-color: #27A1CA;
}
.panel-lightblue > .panel-heading {
	color: rgb(255, 255, 255);
    background-color: #27A1CA;
    border-color: #27A1CA;
}
.panel-lightblue > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #27A1CA;
}
.panel-lightblue > .panel-heading .badge {
  color: #27A1CA;
  background-color: #fff;
}
.panel-lightblue > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #27A1CA;
}

/* #330-338 - to fix the scroll action in the background in iOS devices in order to fix the modal UI problem since iOS 12.1 */
html.modal-open, body.modal-open{
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
}



/* CAP-2070 Fix toggle password button missing valid/error style */
.has-error .multiselect,
.has-error .input-group-btn>.btn-default {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .multiselect:focus,
.has-error .input-group-btn>.btn-default:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}

.has-error .input-group-btn>.btn-default {
    color: #a94442;
    background-color: #f2dede;
}

.has-success .multiselect,
.has-success .input-group-btn>.btn-default {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-success .multiselect:focus,
.has-success .input-group-btn>.btn-default:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
}

.has-success .input-group-btn>.btn-default {
    color: #3c763d;
    background-color: #dff0d8;
}

/* 2019-03-15 : Fix the issue caused by bootstrap.vertical-tabs.css*/
.tab-content>.tab-pane {
	min-height: auto;
}


/* for Message Center widget */
.badge-notify {
    background: red;
    position: relative;
    color: #fff;
    top: 10px;
    left: -14px;
    padding: 1px 4px 1px 4px;
    z-index: 10;
}

.alert-button {
        color: black;        
}

.alert-button:hover, .alert-button:focus {
    color: #23527c;
}



/* 330-462 KUBRA Integration */
#KubraContainer {
	text-align: center;
}

/* 330-552 Solid Waste */
#solidWasteEquipmentContainer {
	margin-bottom: 15px;
}
#solidWasteEquipmentTable {
	border: 1px solid #e7e7e7;
	background-color:#FFF;
}
.cap-table-row-horizonal {
	display: -webkit-flex;
	display: flex;
}	
.cap-table-cell-label {
	display:inline-block;
}
.cap-table-cell-data {
    -webkit-flex: auto;
    flex: auto;
}

/* Irrigation Alert Widget 
------------------------------------------------------------------------ */
.icon-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.icon-stack-1x,
.icon-stack-2x,
.icon-stack-3x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.icon-stack-1x {
  line-height: inherit;
}
.icon-stack-2x {
  font-size: 1.5em;
}
.icon-stack-3x {
  font-size: 2em;
}

/* 330-681: START - The sticky class is added to the header with JS when it reaches its scroll position */
#selectAccountRibbon {
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.15);
    -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,.15);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.15);
    right: 0;
    left: 0;
    z-index: 1003;	
}
.sticky-header {
  position: fixed;
  top: 0;
  width: 100%
}
/* 330-681: END - The sticky class is added to the header with JS when it reaches its scroll position */

.sbs-left-nav-menu-option {
	
}

/* Fix the bootstrap-calendar issue caused by jQuery3 version (The issue still exists up to 3.4.1) */
.bootstrap-datetimepicker-widget {
	display: block;
}

.sbs-toggle-group {
	padding-right: 3px;
}

/* 330-783 add support to pull up and down divs vertically, similar to bootstrap pull left and right
  which does not do the same for horizontal only*/
.pull-top {
	display: table-header-group;
}
.pull-bottom {
	display: table-footer-group;
}
.pull-top-wrapper {
	display: table;
}
/* CAP-1544 fix paddings are missing on small screen when set pullPayMyBillUp=true */
@media (max-width: 768px) {
	.pull-top-wrapper {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* #400-063 */
#accountLookupContainerCsr, 
#accountLookupContainerRegister,
#accountLookupButtonQuickPay1,
#accountLookupButtonRegister1,
#accountLookupContainerQuickPay {
	margin-bottom:6px;
}
#oldAccountNumberToLookupForCsr, 
#oldAccountNumberToLookupForRegister {
	-webkit-box-shadow: 0 1px 3px 1px rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 3px 1px rgba(0,0,0,.1);
	box-shadow: 0 1px 3px 1px rgba(0,0,0,.1);
}

/* ---------------------------------------------------------------
   Left Nav Dashboard Styles - START */

/* Small Left Nav Tab Icons */
.tabs-left > li, .tabs-right > li {
    text-align: left !important;
}
/*
.sbs-left-nav-icon {
    font-size: 1.7em;
    margin-right: 4px;
}
*/
#myAccountTabs {
	background-color:#FFF;
	border-right:1px solid #eee;
}

.nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #eee;
}

.ldb-nav > a, .ldb-nav > a:visited, .ldb-nav > a:active, .ldb-nav > a:focus, .ldb-nav > a:hover {
	color: #FFF;
}

.tabs-left > li, .tabs-right > li {
    margin-bottom: 0px;
}

.tabs-left > li.active > a {
	background-color: #eee;
	border-left: solid 4px #FFCC00;
	border-radius: 0;	
}

.tabs-left > li.active > a:hover {
	background-color: #eee;
	border-left: solid 4px #FFCC00;
	border-radius: 0;	
	color: #FFCC00;
}

.tabs-left > li.active > a:focus, .tabs-left > li > a:hover {
	background: #017dbf;
	border-left: solid 4px #FFCC00;
	border-radius: 0;
	color:#FFF;
}

/* Carousel Images size setting to avoid over-size or blank space*/
.carousel-inner>.item>img, .carousel-inner > .item> a> img{
	height:272px;
	width: 100%;
}

/* ---------------------------------------------------------------
   Left Nav Dashboard Styles - END */

.margin-left-10 {
	margin-left: 10px;
}

.margin-right-10 {
	margin-right: 10px;
}

.cap-tableColumn-accountNumField{
	min-width:200px;
}

.cap-admin-delete-icon {
	background-color: #fff;
    color: #d9534f;
}

.cap-admin-edit-icon {
	background-color: #fff;
    color: #2e6da4;
}

.cap-admin-copy-icon {
    background-color: #fff;
    color: #449d44;
}

.w-90 {
	width: 90%;
}

.modal-h500 {
    max-height: 500px;
    overflow-y: auto;
}

#paymentAllowInputGroup.cap-display-inline {
	display: inline;
}
		
/* CAP-542: Display Inactive Account Label under account Table : crateUser.jsp */
TD.padding-lr-10{
	padding: 0 10px !important;
}

/* CAP-815: Two-Factor Authentication UI and accepting empty input bug */
#login2faPrompt .popover {
	max-width: 350px !important;
    word-wrap: break-word;
}

.sb-video-container{
	height: auto; 
	width:100%; 
	aspect-ratio: 16/9;
}


/* CAP-1217 */
/* Side Menu Navigation Starts Here */

aside.dashboard-side-menu {
	background-color: #fff;
	max-width: 180px;
	width: 100%;
	position: absolute;
}

aside.dashboard-side-menu a {
	border-left: solid 4px transparent;
	border-bottom: 1px solid #e7e7e7;
}

aside.dashboard-side-menu a:hover {
	background-color: #017dbf;
	color: white;
	border-left: solid 4px #fc0;
	border-radius: 0;
}

aside.dashboard-side-menu li.active>a {
	padding: 10px 15px;
	border-bottom: 1px solid #e7e7e7;
	border-left: solid 4px #fc0;
	background-color: #eee;
}

aside.dashboard-side-menu li.active>a:hover {
	color:#017dbf;
}

aside .sbs-left-nav-icon {
	font-size: 1.33333333em;
	line-height: .75em;
	vertical-align: -15%;
	width: 1.28571429em;
	text-align: center;
}  
/* Side Menu Navigation Ends Here */


/* Skip to Main Content Starts Here */
.sr-only.sr-only-focusable.skip-to-content {
    position: absolute;
    background-color: #337ab7;
    color: white;
    padding: 1em;
    top: 0;
    left: 50%;
    width: auto;
    z-index: 10;
    height: auto;
	transform: translateY(-100%);
    transition: transform 0.3s;
}

.sr-only.sr-only-focusable.skip-to-content:focus {
    transform: translateY(0%);
}
/* Skip to Main Content Ends Here */

/* Footer Styling Starts Here */
.contacts-section {
    background-color: #2989dd;
    padding-top: 30px;
    padding-bottom: 30px;
}

.contacts-section h4,
.contacts-section dl,
.contacts-section address,
.contacts-section dd a {
    color: white;
}

.copyrights-section {
	background-color: #f7f7fd;
}

.copyrights-text {
    text-align: center;
    margin: 0;
    padding: 15px 0;
}

.page-font-resize {
	margin-bottom: 20px;
}

/* Footer Styling Ends Here */

/* Login Screen Fix Starts Here */

form#login-form .controls {
    margin-bottom: 10px;
}

form#login-form  a#capricorn-forgot-password-link {
    padding: 0;
}

form#login-form  a#capricorn-forgot-user-link {
    padding: 0;
}

form#login-form a#capricorn-login-help-link {
    padding: 0;
}

form#login-form  .form-actions.pull-right {
    margin-top: 10px;
}

.capricorn-login-btn-wrapper,
.capricorn-login-rememberme-wrapper {
    display: flex;
    align-items: center;
	flex-wrap: wrap;
}

.capricorn-login-rememberme-wrapper {
	margin-bottom: 15px;
}

.login-quickpay-button .capricorn-block-bottomspace {
	margin-bottom: 0;
}

/* Fixing the YouTube Video on Mobile in Login screen */
.check-it-out {
    margin-left: auto;
    width: fit-content;
}

/* Login Screen Fix Ends Here */

/* Mobile App CSS Starts */

/* select account table */
.modal-body .capricorn-account-table-panel {
	border: 0px;
}

/* floating action button */
.fab-container {
	position: fixed;
	bottom: 16px;
	right: 16px;
	z-index: 4;
}

.fab-button {
	width: 56px;
	height: 56px;
	border-radius: 100%;
	border: 0px;
	background: #2b7daf;
	box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%), 0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
	transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),opacity 15ms linear 30ms,transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);
}

.fab-button:hover {
	background: #408ab7;
	box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
}

.fab-button:active {
	box-shadow: 0px 7px 8px -4px rgb(0 0 0 / 20%), 0px 12px 17px 2px rgb(0 0 0 / 14%), 0px 5px 22px 4px rgb(0 0 0 / 12%);
}

.fab-button i {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: white;
	height: 100%;
}

.rotate {
	-moz-transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
	transition: all 0.25s linear;
}

.rotate.down {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

/* Mobile App CSS Ends */

/* Popover - WCAG 2.1 AA Start Here */
.popover-wcag {
	cursor: pointer;
	font-size: 18px;
    vertical-align: middle;
}
.popover-wcag:focus {
	outline-offset: 0px;
	border-radius: 10px;
	outline-color: #2989dd;
}
.popover-wcag .fa-question-circle {
    padding: 0 4px;
}
/* Popover - WCAG 2.1 AA Ends Here */

/*CSR button css starts here*/
.crs-box {
	display:flex;
    align-items:center;
}
.crs-title {
    margin-right:auto;
}
.crs-menu-button {
    display:flex;
    justify-content:end;
}
/*CSR button css ends here*/

/* Page rating - WCAG 2.1 AA Start Here */
.rating-page-star{
    background-color: #fff;
    border: #fff;
    padding: 0;
}
/* Page rating - WCAG 2.1 AA Ends Here */

.datepicker-color a{
	color:#555; 
}

/* account setting checkBox and Label WCAG 2.1 AA start Here */
.account-setting-label{
	font-weight: normal;
}
/* account setting checkBox and Label WCAG 2.1 AA end Here */

/* WCAG  CAP-3135 start "overwrite css"*/
h1, .h1{
	font-size: 24px;	
   }
h2, .h2{
 font-size: 18px;	
}
/* WCAG  CAP-3135 style level end  */

/* CAP-2999: Highcharts CSS *****************************************************************************/
/* consumptionInquiry_jQueryChart_dataLabel_style=textOutline: false, fontSize: '0.8vw' 
   CAP-3960: highcharts datalabels text colour control by 'fill', and default colour is black - HEX #000000
*/

.highcharts-data-labels text{
	text-decoration: none !important;
	text-shadow: none !important;
	fill: #000000 !important;
}

/* consumptionInquiry_jQueryChart_legend_itemStyle=color: '#5E57EC', fontSize: '0.8vw', textDecoration: 'none !important;' */
.highcharts-legend-item text {
	fill: #5E57EC !important;
	text-decoration: none !important;
}

/* consumptionInquiry_jQueryChart_legend_itemHiddenStyle=color: '#999', fontSize: '0.8vw', textDecoration: 'none !important;' */
.highcharts-legend-item-hidden text {
	fill: #999 !important;
	text-decoration: none !important;
}


/* consumptionInquiry_jQueryChart_primary_yAxis_label_style=color: '#0083BF', fontSize: '0.8vw' */
.highcharts-yaxis-labels > text{
	color: #0083BF !important;
	fill: #0083BF !important;
}

/* Changes properties of x-axis title*/
.highcharts-axis.highcharts-xaxis > .highcharts-axis-title {
	fill: #0083BF !important;
}

/* Changes properties of y-axis title*/
.highcharts-axis.highcharts-yaxis > .highcharts-axis-title {
	fill: #0083BF !important;
}


.highcharts-stack-labels > text {
	fill: #ffffff !important;
}

/* CAP-4694: Add chart title/sub-title css to pie chart in smart meter */
.summary-container-hc .highcharts-title {
	font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.summary-container-hc .highcharts-subtitle {
	font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
/* end highcharts CSS ******************************************************************************/
/* WCAG  CAP-3135 style level end  */

/* CAP-2936: moved outageMap css styling to capCore */
/* OutageMap Start */
#outageMap-page, #outageMap-page body {
	height: auto;
	width: 100%;
	margin: 0;
	padding: 0;
}

#outageMap-page .container-fluid, #outageMap-page .fill, #outageMap-page .row {
	min-height: 100%;
	height: 100%;
}

#outageMap-page #map_wrapper {
	height: 70vh;
}

#outageMap-page #mapContent, #outageMap-page #map_canvas {
	height: 100%;
}

/* keeps map in the bounds of its parent div / stops it from overflowing onto the footer */
#outageMap-page #mapContentContainer {
	height: 90%;
}

#outageMap-page #map_root {
	height: 95% !important;
}

/* OutageMap End */

/* CAP-3612 added color for PassedDue and MinPaymentAmount */

#myAccounts_showPastDueAmountDueDateOnDashboardWidget {
	color: #a94442;
}
#myAccounts_showPassedDue {
	color: #a94442;
}

/* CAP-3612 END */
/* CAP-3590 payment arrangement */
@media (min-width: 768px){
	.payment-checkbox{
		margin-top: 5px;
		margin-left:8px;
	}
}
/* CAP-3590 payment arrangement */

/* CAP-3808 WCAG Color contrast */
.has-success .active .checkbox {
	color: #90EE90;
	background-color: #1D4663;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover {
	background-color: #1D4663;
}

/* CAP-4053 fix Bootstrap Multiselect components can go offscreen */
button.multiselect, .multiselect-container label {
	white-space: normal;
}

/* CAP-4085 Prevent portal input focus from triggering the automatic zoom-in effect on Safari on iPhone */
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
	font-size: 16px;
}
/* CAP-4356 For wrapping a text in button */
.btn-text-wrap {
    white-space: normal;
}

/* CAP-4502 Remove active class from the button*/
.btn-remove-active{
	background-color: unset !important ;
	outline: transparent !important;
}

/* CAP-2070 fix height of toggle password butttons */
.input-group .btn-default{
	height: 34px;
}

/* CAP-4501 rating star label alignment  */
.page-rating-star-label{
	display:flex;
	justify-content:end;
}

/* CAP-4572 - Keyboard Navigation - added focus carousel button*/
.carousel .carousel-control:focus{
	outline: 5px auto #000000 !important;
}

/* CAP-4573 notification button focus outline*/
.alert-button:focus{
	outline:5px auto #000000;	
}

/* CAP-5052 multiselect custom */
.dropdown-multiselect .dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 183px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 100;
	max-height: 200px;
    overflow: hidden auto;
}
.dropdown-multiselect .dropdown-content .dropdown-option {
	padding: 8px 16px;
	cursor: pointer;
}
.dropdown-multiselect .dropdown-content .dropdown-option:hover {
	background-color: #1D4663;
	color:#fff;
}
.dropdown-arrow-icon{
	position: absolute;
	top:14px;
	right:10px;
}
.dropdown-multiselect #dropdownButton {
    position: relative; 
    padding-right: 32px;
} 
.dropdown-contain-arrow{
	position:relative;
	width:fit-content;
}
.dropdown-multiselect .dropdown-content .dropdown-option[aria-selected="true"] {
	background-color: #1D4663; 
	color:#fff;
  }
 
/* CAP-5109 adjust space for button */
.button-container{
	margin-left:auto;
}

@media only screen and (max-width: 375px) {
  .return-login-btn {
      margin-top:10px;
  }
}

/* CAP-4972 Add "Select All" option to Guest Access Tab */
.select-all-separator{
	border-bottom:1px solid #ddd;
}

/* CAP-5764 Mobile APP : Portal side - pages kept going out of bounds. */
.quick-pay-bill{
	padding-left:0;
	padding-right:0;
}

/*CAP-5748 Mobile APP Billed Usage :: Usage Analysis on Mobile is not responsive visually and goes beyond screen borders */
#summaryTable .dtr-details li[data-dtr-index="3"] {
    background-color: #e8ffe8;
}

#summaryTable .dtr-details li[data-dtr-index="4"] {
    background-color: #ffe6e6;
}

/*CAP-4584 New MFA Modal */
#twoFactorModal .panel{
	border:none !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	margin-bottom: 0 !important;
}

#twoFactorModal .panel-heading{
	background-color: #fff !important;
	border: none !important;
	padding-bottom: 0 !important;
}

#twoFactorModal .panel-body{
	padding-bottom: 0 !important;
}

#twoFactorModal .mb-0{
	margin-bottom: 0;
}

/* Additional styles to ensure consistent appearance in Bootstrap 3 */
.code-inputs-container {
   display: flex; 
   justify-content: center;
}

.code-inputs-container .form-control {
    display: inline-block;
    margin: 0 2px;
    width: 50px;
    height: 50px;
    font-size: 24px;
}

.code-inputs-container div {
    margin: 0 5px;
}

.code-input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.mt-15{
	margin-top: 15px;
}

#twoFactorModal ol{
	padding-left: 25px;
}

/* Ensure proper spacing on mobile */
@media (max-width: 768px) {
    .code-inputs-container .form-control {
        width: 40px;
        height: 40px;
        font-size: 20px;
        margin: 0 2px;
    }
}