@import url('https://fonts.googleapis.com/css?family=Roboto');
/* I rebranded SSWD to a flatter design (like Meridian's) so that it would look better on mobile devices.
   If you want to revert back to the pre-repsonsive design theme: remove properties with UNDO by them, and uncommit out the properties
    with TODO by them.
*/


/*Media Queries*/
@media (max-width: 575px) {
    .bhSmallBASTable {
        display: inherit;
    }

    .bhLargeBASTable,
    .bhUsageChart {
        display: none;
    }

    .listAccountMenu {
        padding-left: 0px;
        list-style: none;
    }
    .masterHeaderInner {
        text-align: center !important;
    }
}

@media (min-width: 576px) {
    .masterHeaderInner,
    .masterFooterInner,
    .PortalHeader,
    .PortalView,
    div.PortalCopyright {
        max-width: 540px;
    }

    .bhSmallBASTable {
        display: inherit;
    }

    .bhLargeBASTable,
    .bhUsageChart {
        display: none;
    }

    .listAccountMenu {

    }

}

@media (min-width: 768px) {
    .masterHeaderInner,
    .masterFooterInner,
    .PortalHeader,
    .PortalView,
    div.PortalCopyright {
        max-width: 720px;
    }

    .bhSmallBASTable {
        display: inherit;
    }

    .bhLargeBASTable,
    .bhUsageChart {
        display: none;
    }

}

@media (min-width: 992px) {
    .masterHeaderInner,
    .masterFooterInner,
    .PortalHeader,
    .PortalView,
    div.PortalCopyright {
        max-width: 960px;
    }

    .bhSmallBASTable {
        display: none;
    }

    .bhUsageChart,
    .bhLargeBASTable {
        display: inherit;
    }

}

@media (min-width: 1200px) {
    .masterHeaderInner,
    .masterFooterInner,
    .PortalHeader,
    .PortalView,
    div.PortalCopyright {
        max-width: 1140px;
    }

    .bhSmallBASTable {
        display: none;
    }

    .bhLargeBASTable {
        display: inherit;
    }
}


*
{
    margin:0px;
    box-sizing: border-box;
}

html,body
{
    height:100%;
    width: 100%;
}
a
{
	font-weight: bold;
}

a:visited, a:link
{
	color: #1f7aa5;
}

a:hover
{
	color: #1692E5;
}

a.PaymentLink {
    font-size: 0.9rem;
    padding-bottom: 2px;
    margin-top: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid #1e7e34;
    color: white;
    text-decoration: none;
}

a.PaymentLink:hover 
{
    text-decoration: none;
    border-bottom: 1px solid #23527c;
}

.divPortalMaster 
{
    height: 100vh;
}

body.portalMaster {
    /*background: #005375 url(Images/body_background.jpg) center 0 no-repeat; TODO */
    background-color: white; /*UNDO*/
    background-size: cover;
    background-attachment: fixed;
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
    height: 100vh;
    width: 100%;
}

/* This sets the height of the main content*/
form.portalMaster
{	
    height: 90vh;
}
textarea
{
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
}
.PortalOuter
{  
    background-color: transparent;
    overflow: scroll;
    margin: 0px auto;
    position:relative;
	width: 100%;
    color:white;
}
div.masterHeader {
    width: 100%;
    /*background-color: transparent; TODO*/
    background-color: white; /*UNDO*/
}
div.masterHeaderInner
{
    border-collapse:collapse;
    margin: 0 auto;
    position:relative;
    height: inherit;
    padding-left:0px;
}

div.masterHeaderInner img
{
    /*padding: TOP RIGHT BOTTOM LEFT*/
   padding: 20px 0px 5px 0px;
}

.masterFooter {
    background-color: white;
    /*background-image: linear-gradient(to top, #005472, transparent); TODO*/
    width: 100%;
    margin: auto 0;
    position: relative;
}
div.masterFooterInner {
    color: black;
    padding:50px 0px 25px 5px;
    margin: 0 auto;
    z-index: 1;
}

.masterFooterInner a {
    font-size: 15px; 
    font-family: 'Roboto', sans-serif; 
    color: black; 
    text-decoration: none;
    font-weight:normal;
}

.masterFooterInner a:hover {
    text-decoration: underline;
    color:ffae54;
}

td.PortalHeader {
    background-color: #0b658f; 
    color: white;
    /*background-color:  lightgray ;*/  
}

div.PortalHeader {
    font-size: 12px;
    margin: 0px auto;
    padding: 5px 15px 5px 15px;
    z-index: 0;
}

td.PortalMenu
{
	color:black;
    background-image: url(Images/content_strip.gif);
}

div.PortalView {
    padding: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0px auto;
    background-color: white;
}
td.PortalView > div.PortalView > table.PortalView {
    margin: 0 auto;
    overflow-y: auto;
}

td.PortalView {
    margin: 0;
    width: 100%;    
}
div.PortalCopyright
{
    bottom: 0px;
	font-size:7pt;	
    margin:auto 0;
    padding:2px 0px;
    margin: 0 auto;
    position: relative;
	text-align:center;
    width: 100%;
    background-color: white;
    color: #414a53;
    /*border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;*/
}
a.PortalCopyright:visited, a.PortalCopyright:link
{
	color: #1f7aa5;
}

div.PortalMenuBottom
{
}

.MMItem
{
	border-bottom: white 1px solid;
	color: white;
	background-color: Transparent;
	padding:4px 2px 2px 2px;
	text-transform:uppercase;
	white-space:nowrap;
	width: 100%;
	display: inline-block;
	font-size: .8em;
}
.MMItemDynamic
{
	color: white;
	border-bottom: white 1px solid;
	padding-left:2px;
	padding-right:4px;
	text-transform:uppercase;
	z-index:100000;
	white-space:nowrap;
	font-size: 1em;
}
.MMItemDynamicHover
{
	color: white;
	border-bottom: white 1px solid;
	background-color: #99cc99;
	text-transform:uppercase;
	z-index:100000;
}
.MMItemHover
{
	border-bottom: white 1px solid;
	color: white;
	padding-top:2px;
	padding-bottom:2px;
	background-color: #99cc99;
	text-transform:uppercase;
}
.MMItemSelected
{
	color:White;
}

div.LoggedInMsg, div.LoggedOutMsg
{
	white-space:nowrap;	
	height:100%;
    /*width: 300px;*/
    z-index:auto;
    color: white;
}

table.FormHeader
{
	background-color: #5C8BB3;
	color: white;
	font-weight: bold;
	font-size: 0.9em;
	width:100%;
}
tr.FormHeader
{
	
}
td.FormHeaderText
{
	font-family: arial, helvetica, sans-serif;
	font-weight:normal;
	font-size:8pt;	
	text-transform:uppercase;
}
td.FormLabel
{
	font-family: arial, helvetica, sans-serif;
	font-weight:normal;
	font-size:8pt;	
}
td.FormData
{
	font-family: arial, helvetica, sans-serif;
	font-weight:normal;
	font-size:8pt;	
	text-transform:uppercase;
	background-color:Lightyellow;	
}
td.MenuBackground
{
	display:none;
}
table.FormOuter
{
	width: 100%;
	text-align:left;
}
.HelpDesk {
    padding-top: 4px;
    color:black;
}
td.HelpDeskSection
{
	border:solid 2px #363636;
	background-color: white;
}
td.HelpDeskHeader
{
	/*border:solid 1px #5C8BB3;*/
    border-bottom:solid 1px #789090;
	text-align:center;
	background-color: White;
	padding:4px;
}
div.HelpDeskHeader
{
	font-size:16pt;
	font-family: arial, helvetica, sans-serif;
	font-weight:bold;
	color:#363636;
	width:100%;
}
td.MobilePortalView
{
	padding-left: 4px;
	padding-top: 4px;
}
.MMMobileItem
{
	font-size: 14pt;
	text-decoration: underline;
	width:100%;
	color: white;
	background-color: Transparent;
	padding-left:2px;
	padding-right:4px;
	text-transform:uppercase;
}
.MMMobileItemDynamic
{
	border: solid 1px silver;
	color: white;
	background-color: #1866A8;
	padding-left:2px;
	padding-right:4px;
	text-transform:uppercase;
	z-index:100000;
}
.MMMobileItemHover
{
	border-right: white 1px solid;
	border-left: white 1px solid;
	color: white;
	padding-top:2px;
	padding-bottom:2px;
	border-bottom: white 1px solid;
	background-color: #1692E5;
	text-transform:uppercase;
}

hr.separator
{
   color: white;
	margin: 4px;
	padding: 0;
	height: 2px;
}

span.lbl 
{
	display: inline-block;
}

.dataGrid
{
	/* Will center the grid horizontally if the width is not 100%*/
	margin: 0 auto;
}

.siteMapPath 
{
    /*width: 757px;*/
    font-family: Arial, Helvetica, sans-serif;
    /*color: #414a53 !important;   Color is set in Site.skin*/ 
}


.homeOuter
{
	background-color: white;
    color: #414a53;
}

.homeInner
{
	background-color: white;
    font-size: 10pt;
}

.homeHeaderSection
{
    margin-top: 10px;
    text-align: center;
}

.homeHeaderSection h2 
{
    font-size: 150% !important;
    color: #424a54 !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

.homeHeader {
    color: #414A53;
    font-size: 1.4em;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
}

.homeBillingAddress {
    padding-top: 7px;
    padding-left: 25px !important;
}

.headerBillingAddress {
    border-bottom: solid 1px silver;
}

.homeAccount {
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    border-bottom: dashed 1px silver;
}

.SSWDBlueBackground {
   background-color: #1f7aa5;
}

/* Billing History Screen*/
.bhBalanceTitle {
    padding-top: 10px;
    padding-left: 20px;
    margin-bottom: 0px;
    text-align: center;
    color: inherit;
    padding-top: 10px;
    font-size: 130%;
    color: #424a54;
    font-weight: normal;
    line-height: 1.2;
}

.bhBody {
    background: #F2F2F2;
}

.bhHeadeRow {
    background-color: #006698;
    text-align: center;
}

.bhTitleRow {
    background-color: #006698;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.bhRow {
    margin-top: 10px;
}

.bhPaymentHistoryRow {
    padding-bottom: 20px;
}

.bhBottomRow {
    padding-bottom: 20px;
}

.bhBucket {
    margin-top: 10px;
}

.bhTitleText {
    color: white;
    font-size: 1.2em;
    width: 100%;
    text-transform: uppercase;
}

.bhPrintLink {
    float: right;
}

.bhPrintLink a {
    color: white;
}

/*h3.bhBalanceTitle {
    padding-top: 10px;
    padding-left: 20px;
    margin-bottom: 0px;
}*/

.balanceItemTitle {
    float: left;
    font-weight: bold;
}

.balanceItemValue {
    float: right;
}

.bhBalanceAmount {
    text-align: right;
    padding-right: 5em !important;
}

table.AccountSummary {
    color: rgb(59, 60, 61);
    font: 14px/18px Arial, Helvetica, sans-serif;
    font-size-adjust: none;
    font-stretch: normal;
}

table {
    color: rgb(59, 60, 61);
}