/* Element definitions */

BODY, HTML { padding: 0; margin: 0; background: #fff; }
BODY { font-family:Lucida Sans Demi, Lucida Sans, Calibri, sans-serif; color: #312422; font-size: 14px;}
TD, TH { font-family:Lucida Sans Demi, Lucida Sans, Calibri, sans-serif; color: #312422; font-size: 14px;}
SELECT, TEXTAREA, INPUT { font-family:Lucida Sans Demi, Lucida Sans, Calibri, sans-serif; color: #312422; background: #f0f0f0; font-size: 14px; }
BUTTON {font-family:Lucida Sans Demi, Lucida Sans, Calibri, sans-serif; color: #ffffff; background: #ffae69; font-size: 14px; }

A { text-decoration: none; color: #312422; }
A:hover { text-decoration: underline !important; }
IMG { border: none; }
P { margin: 0.7em 0 0 0; padding: 0; }
FORM { padding: 0; margin: 0; }

H1 { color: #000000; padding: 0; font-weight: bold; font-size: 16px; margin: 0; }
H2 { color: #000000; padding: 0; font-weight: bold; font-size: 14px; margin: 2em 0 0 0; padding: 0 0 0 10px; background: url(../images/dot03.gif) 0 4px no-repeat; }
H2.nmt { color: #000000; padding: 0; font-weight: bold; font-size: 11px; margin: 0 0 0 0; padding: 0 0 0 10px; background: url(../images/dot03.gif) 0 4px no-repeat; }
TABLE { border-collapse: collapse; border-spacing: 0; }
TABLE.form TH H3 {margin-top:10px; margin-bottom:10px;}

.error {color: red;}

/* Login */
INPUT.loginButton {font-weight: bold !important; font-size: 24px !important; background-color: #F79421 !important; color: white}
INPUT.successButton {font-weight: bold !important; font-size: 24px !important; background-color: green !important; color: white}
INPUT.cancelButton {font-weight: bold !important; font-size: 24px !important; background-color: red !important; color: white}
#loginHeader {float:left; font-weight: bold; font-size: 24px; color: rgb(19%, 14%, 13%); margin-left: 150px; margin-top:20px;}
#socialLoginHeader {float:left; font-weight: bold; font-size: 22px; color: rgb(19%, 14%, 13%); margin-left: 150px; margin-top:20px;}
#registerLink {padding-top:20px !important;}
#registerLink A {color: #F79421 !important; font-weight: bold; float:right; margin-right: 25% !important;}
#registerLink .link {color: #F79421 !important; font-weight: bold; float:right; margin-right: 25% !important;}
#login {background: url(../images/login_area.png) 0 0px no-repeat; width:627px; height:auto; margin-left: auto; margin-right:auto; margin-top: 50px; padding: 70px 40px;}
#restoreActivationLink {color: #F79421; font-weight: bold; font-size: 12px;}
#login TR {height:3em;}
#login TH {width: 6.1em;}
#login TH .short{color:#FF0000 !important;}
#login TH .weak{color:#E66C2C !important;}
#login TH .good{color:#E66C2C !important;}
#login TH .strong{color:#312422 !important;}
#login P.red SPAN{color: red !important; position: absolute; margin-top: -5em;}

/* Activation */
#activationHeader {font-weight: bold; font-size: 24px; color: rgb(19%, 14%, 13%); margin-left: 150px; margin-top: 1%;}
#activation {background: url(../images/login_area.png) 0 0px no-repeat; width:px; height:312px; margin-left: 25%; margin-top: 5%; padding: 70px 40px;}
#activation TR {height:3em;}
#activation TH {width: 11em;}
#activation P.red {color: red !important; position: absolute; margin-top: -3em;}
#restorePasswordData {font-weight: bold; font-size: 24px; color: rgb(19%, 14%, 13%); margin-left: 150px; margin-top: 1%;}


#newPasswordData {margin-top: 2em;}
#newPasswordData .passwordBlock {}
#newPasswordData input {display: initial;}
#newPasswordData input + .glyphicon {cursor: pointer; pointer-events: all;}
#newPasswordData .btn-success {font-size: 18px; color: #FFFFFF; background-color: #4551A3; border-color: #FBFBFB;}

/* Main framework */
#main { min-width:1024px; width: 100%; height: 600px; margin: auto; text-align: left; font-family:Lucida Sans Demi, Lucida Sans, Calibri, sans-serif; font-size: 14px;}
#mainHeader {background: url(../images/header_bar.png) repeat-x; background-position: left bottom; width: 96%; height: 89px; margin: auto; float: left; padding: 0% 0% 0% 0%; position: relative; top: 0%; left: 2%; right:2%;}
#mainLogo { background: none; width: 100px; height: 89px; float: left; padding: 0 0 0 0; position: relative; right: 0%; bottom: -15px;}
#logoHighenergy {position: absolute; left: 100px; bottom: 8px;}

#userGreeting { justify-content: space-around; display: flex; height: 100%; align-items: end; float: right; padding: 0px 0px 0px 0px; position: absolute; right: 5px; bottom: 50%; font-weight: bold; font-size: 12px;}
#userGreeting A {text-decoration: none; font-weight: bold; font-size: 12px;}
#userGreeting A:hover {text-decoration: none !important; font-weight: bold; font-size: 12px; color:red;}
#userGreeting .dropdown-menu {left: -30px; min-width: 100px;}
#userGreeting .dropdown-menu A {cursor: pointer; margin-top: 1em; margin-bottom: 1em;}
#userGreeting #languageButtonGroup .language-select-name {float:left;}
#userGreeting #languageButtonGroup IMG {float:left; margin-right:2px;}

#adminButton {margin: -7px 0px;}
#primaryMenu {background: url(../images/header_tab.png) no-repeat; width: 271px; height: 35px; float: right; padding: 0px 0px 0px 0px; position: absolute; right: 0%; bottom: 0; vertical-align: bottom;}
#primaryMenu A {color: #ffffff; background: transparent; text-align:center; padding: 0px 0px 0px 0px; font-weight: bold; font-size: 12px; text-decoration: none;}
#primaryMenu .dropdown-menu A {color: black;}
#primaryMenu TABLE {align: center; vertical-align: bottom; width: 95%; height: 75%; position: relative; top: 10%;}
#primaryMenu TR TD {justify-content: space-around; display: flex; height: 100%; align-items: center; color: #ffffff; background: transparent; text-align: center; vertical-align: bottom; font-weight: bold; font-size: 12px; }
#primaryMenu P { padding: 0; margin: 0;}
#primaryMenu .dropdown-menu {left: -30px; min-width: 100px;}
#primaryMenu .dropdown-menu A {cursor: pointer; margin-top: 1em; margin-bottom: 1em;}
#primaryMenu #languageButtonGroup .language-select-name {float: left;}
#primaryMenu #languageButtonGroup IMG {float: left; margin-right:2px;}

#commonContent {width:96%; height: 100%; margin: auto; float: left; padding: 0% 0% 0% 0%; position: relative; top: 0%; left: 2%; right:2%; }
#contentLeft {height: 100%; margin-top: 0px; margin-right: 271px;}
#contentRight {width:271px; height: 100%; float: right; padding: 0px 0px 0px 0px; position: absolute; right: 0%; top:0%; border-left: 1px solid #e1e1e1;}
#data {width:96%; float: right; padding: 2% 2% 2% 2%; }
#data:has(#customerListCommand) {width:100%; float: right; padding: 2% 2% 2% 0%; }
#infoBar {width:94%;  margin: auto; float: right; padding: 2% 2% 2% 4%; overflow:auto }
DIV#menu    {width:94%; height: 46%; margin: auto; float: right; padding: 2% 2% 2% 4%;   }
#menuUser {width:100%; margin: auto; float: right; padding: 0px 0px 0px 0px; border-top: 1px solid #e1e1e1; }

#footer {}
<!-- { position: relative; bottom: 0; width: 99%; background: #000000; height: 4px; font-size: 1px; line-height: 0px; margin: auto; clear: both; border-left: solid #fff; } -->
#bottom {float:bottom; padding: 0% 0% 0% 0%; width: 99%; margin-bottom:0%; margin-left:auto;margin-right:auto;margin-top:auto; text-align:center; vertical-align:bottom;}

ul.menuUser { list-style: none; padding: 0; margin: 5px 0 20px 0; font-family: 'Lucida Sans', Calibri, sans-serif; font-weight: bold; font-size: 14px; line-height: 150%;}
ul.menuUser ol {display: none;  list-style-type: none;  margin: 0;  padding: 5px;}
ul.menuUser li {}
ul.menuUser ol li {border-bottom: none;}
ul.menuUser ol li:before { content: "";}
ul.menuUser a { display: block; padding: 3px 10px 3px 10px; text-decoration: none; height: 100%; color: #F79421;}
ul.menuUser li ol li a { display: block; padding: 3px 10px 3px 20px; text-decoration: none; height: 100%; color: #F79421;}
ul.menuUser a:hover {}
ul.menuUser a.active {font-weight: bolder; }

#surveyHistoryListCommand h2 {font-size: 24px; background: none; margin: 0;}
#surveyHistoryListCommand TABLE.data {border-color: #e1e1e1;}
ul.surveyHistory {text-decoration:none; list-style: none; padding: 0; margin: 15px 0 20px 0; font-family: 'Lucida Sans', Calibri, sans-serif; font-weight: bold; font-size: 14px; line-height: 150%;}
ul.surveyHistory ol {display: none;  list-style-type: none;  margin: 0;  padding: 5px;}
ul.surveyHistory li {display: table}
ul.surveyHistory ol li {border-bottom: none; display: block; width: fit-content}
ul.surveyHistory ol li:before { content: "";}
ul.surveyHistory li ol li a {font-size: 12px; background: none; display: block; padding: 0 0 0 30px; text-decoration: none; height: 100%; color: rgb(94%, 50%, 29%);}
ul.surveyHistory a:hover {}
ul.surveyHistory li a {float:left; text-indent:30px; background: url(../images/icon-collapsed.png) no-repeat; display: block; padding: 3px 10px 3px 12px; text-decoration: none; height: 100%; color: rgb(47%, 59%, 60%);}
ul.surveyHistory li a.active {cursor: pointer; text-indent:30px; background: url(../images/icon-expanded.png) no-repeat; font-weight: bold; color: rgb(47%, 59%, 60%);}

ul.vradiobutton, ul.radiobutton { list-style-type: none; margin: 0; padding: 0 }
/*ul.radiobutton > li { display: inline; padding-right: 1em; }*/

#logo { display: block; margin-bottom: 25px; }

#contact { font-style: normal; font-size: 9px; color: #000000; border-right: 1px solid #e1e1e1; padding: 10px; margin: 0 0 20px 0; }
#contact STRONG { font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #000000; display: block; }
#contact P { color: #969696; font-weight: bold; font-size: 9px; text-transform: uppercase; margin: 0; }
#contact A { color: #000000; text-decoration: none; }

DIV.slider { background-color:white;}
INPUT.slider-input { background-color:white;}
INPUT.i-right { background-color:white; text-align: right;}

#contextVariables { font-size:14px; height: 40em; overflow : auto;}
#contextVariables TABLE TBODY TR TD{ font-size:11px; border-top: solid 1px #e1e1e1; }

#surveyFactoidHeader { font-size:14px; font-weight: bold; width: 98%; height: 8px; margin-top: 2%; float: clear; padding: 0 0 5px 0; color: #bcbfbf; }
#surveyFactoid {font-weight: bold; font-size: 14px; text-align: left; width: 100%;  padding: 10px 0 0 0; margin: auto; float: clear; vertical-align: top; color:olive;}
#surveyProgressHeader { width: 98%; height: 0px; margin-top: 0%; float: clear; padding: 0 0 0 0; color: #bcbfbf; position: relative; top: 1%; bottom: 1%;}
#surveyProgress { width: 100%; height: 31px; margin: auto; float: clear; padding: 0px 0px 0px 0px; text-align:center;  vertical-align: middle; position: relative; top:0%; bottom:1%;}
#surveyDataHeader { font-size:12px; font-weight: bold; width: 98%; height: 16px;  float: clear; padding: 0 0 5px 0;  border-bottom: 1px solid #e1e1e1; color: #bcbfbf; position: relative; top: 14px;}
#surveyData { font-size:21px; font-weight: bold; color:#332623; text-align: left; width: 94%; height: 96%; padding: 0% 4% 1% 2%; margin: auto; float: clear; text-align: left; position: relative;}
#paneHelp {margin-top: -5%; position: relative; float: right; padding: -10px 0px 0px 0px;}
#paneHelp A {font-size:21px; font-weight: bold; color: #990;}
#surveyButtons { width: 98%; height: 37px; position:relative;  margin: 25px 0% 5px 0%;}
#surveyButtons #_prev, #surveyButtons #_cancel { cursor: pointer; width: 74px; height: 24px; border: none; }
#surveyButtons #_prev:hover, #surveyButtons #_cancel:hover {  }
#surveyButtons #_prev.disabled, #surveyButtons #_cancel.disabled {  }
#surveyButtons #_prev.disabled:hover, #surveyButtons #_cancel.disabled:hover {  cursor: default; }
#surveyButtons #_next, #surveyButtons #_save { cursor: pointer; width: 74px; height: 24px; border: none; }
#surveyButtons #_next:hover, #surveyButtons #_save:hover {  }
#surveyButtons #_next.disabled, #surveyButtons #_save.disabled {  cursor: default; }
#surveyButtons #_next.disabled:hover, #surveyButtons #_save.disabled:hover {  }
#surveyQuestionAnswered {width: 100%; height: 25px; font-size: 17px; color: #666666; position: relative; right: 0; top: 0; text-align: right; vertical-align: middle;}
#surveyLabel {color: rgb(50%, 51%, 52%); font-weight: bold; width: 100%; text-align: center; margin-top: 1em; padding-bottom: 1em;}

#surveyLeaks { width: 100%; height: 50%; font-weight: bold; font-size: 12px; color:#000000; padding: 10px 0 0 0; margin: auto; float: left; vertical-align: middle;}
#surveyLeaksGroup { width: 100%; height: 100%; margin-top:2%;}
#surveyLeaksGroup A {text-decoration: none;}
#surveyLeaksGroup DIV.leak {position: relative;  float: left; background-repeat: no-repeat; background-position: center; width: 82px; height: 82px; margin-top:5px; text-align: center; }
#surveyLeaksGroup DIV.leakValue {font-size:10px; font-weight: bold; position:absolute; bottom:0; margin-bottom: 20%; text-align:center; width:100%;}
#surveyLeaksSeeAll {color:#F79421; float: right; font-size: 12px; font-weight: bold; margin-left: 100%;position: relative; text-align: right; width: 100%;}
#surveyLeaksSeeAll A {font-size:12px; font-weight: bold; color:#F79421; text-decoration: none;}

#surveyUnique { width: 96%; height: 50%; font-size: 17px; color:#000000; margin: 5% 0; float: left; padding: 5% 2% 2% 2%; vertical-align: middle; border-top: 1px solid rgb(74%, 74%, 75%);}
#surveyUnique DIV.surveyUniqueElement { font-size: smaller; float:none; margin-top:5px;}
#surveyUnique DIV.surveyUniqueElement2 { width:100%; height:5%; position:relative;}
#surveyUnique DIV.surveyUniqueElementScale1 {background-color: #dbdbdb; width:30%; float: left;}
#surveyUnique DIV.surveyUniqueElementScale2{background-color: #7a9999; text-align: center;}

#surveyRightTop {font-weight: bold; font-size: 14px; color:#999900; margin: auto; float: clear; padding: 5px 0 1px 0; vertical-align: middle;}
#surveyRightBottom {font-weight: bold; font-size: 14px; color:#999900; margin: auto; float: clear; padding: 5px 0 1px 0; vertical-align: middle;}
#surveyChart {text-align: left; width: 100%; height: 100%}
#surveyReport {text-align: left; width: 100%; height: 100%}

#caldiv {position:absolute;visibility:hidden;background-color:white;layer-background-color:white; z-index: 1000;}

TABLE.survey {float: center; width: 100%; height: 100%; text-align: left; margin-left: auto; margin-right: auto; margin-top: 0px;}
TABLE.survey TH { font-size: 21px; text-align: left; }
TABLE.survey TH A { color: #FFF; }
TABLE.survey TH B { font-weight: bold; }
TABLE.survey TD { font-size:21px;}
TABLE.survey TD.jqplot-table-legend { font-size:10pt; text-align:left;}
@-moz-document url-prefix() 
{ 
	#chartSeasonalStack TABLE.jqplot-table-legend {bottom: -20px !important;}
}

TABLE.survey .field_help {display: inline;}
TABLE.survey TD P {font-size:21px; padding-left: 20px;}
TABLE.survey TD A {text-decoration: none !important; color: dimGray; border-bottom: 1px solid #ccc; }
TABLE.survey TD A:hover { text-decoration: none !important; color: #000000; border-bottom: 1px solid #000000; }
#surveyPageText {color:rgb(39%, 39%, 40%); font-weight: bold; font-size:14px; margin-left:auto; margin-right:auto; width:99%;}
#surveyPageText P {color:rgb(39%, 39%, 40%); font-weight: bold; font-size:14px;}
#surveyFooter {color:rgb(39%, 39%, 40%); font-weight: bold; font-size:14px; margin-left:auto; margin-right:auto; width:99%;}
#surveyFooter P {color:rgb(39%, 39%, 40%); font-weight: bold; font-size:14px;}

TABLE.surveyAnswerBlocks {font-weight: normal; font-size: 21px; float: none; width: 100%; height: 100%; text-align: center; margin-left: auto; margin-right: auto; margin-top: 1%;}
TABLE.surveyAnswerBlocks THEAD {text-align: center; margin-top: 1%;}
TABLE.surveyAnswerBlocks TH {text-align: center;}
TABLE.surveyAnswerBlocks TD {text-align: center;}

TABLE.blockSurveyAnswers {float: left; width: 100%; height: 100%; margin-left: auto; margin-right: auto;  margin-top: 1%;}
TABLE.blockSurveyAnswers TR {height: 2em;}
TABLE.blockSurveyAnswers THEAD {text-align: center; margin-top: 1%; border-bottom: 2px solid #e1e1e1; }
TABLE.blockSurveyAnswers THEAD TH {text-align: center; font-weight: bolder; font-size: 12px; color: rgb(39%, 39%, 40%);}
TABLE.blockSurveyAnswers TH {text-align: center; }
TABLE.blockSurveyAnswers TH.right {text-align: right; }
TABLE.blockSurveyAnswers TD {text-align: center; font-weight: bold; font-size: 12px; color: rgb(39%, 39%, 40%);}
TABLE.blockSurveyAnswers TD.left {text-align: left; }
TABLE.blockSurveyAnswers TD.right {text-align: right; }
TABLE.blockSurveyAnswers TD INPUT {font-weight: bold; font-size: 12px; color: rgb(39%, 39%, 40%); text-align: left; }
TABLE.blockSurveyAnswers TD SELECT {font-weight: bold; font-size: 12px; color: rgb(39%, 39%, 40%); text-align: left; }
TABLE.blockSurveyAnswers TD FONT.small {font-weight: normal; font-size: 11px; color: rgb(39%, 39%, 40%);}
TABLE.blockSurveyAnswers .underline_date {margin-left: -2em;}

TABLE.surveyAnswers {width: 95%; height: 98%;  margin-left: auto; margin-right: auto; margin-top: 2%; margin-bottom: 2%;}
TABLE.surveyAnswers THEAD {text-align: center;  margin-top: 1%;}
TABLE.surveyAnswers THEAD TH {font-weight: bold; text-align: center; }
TABLE.surveyAnswers TH {}
TABLE.surveyAnswers TH.center {text-align: center; }
TABLE.surveyAnswers TH.left {text-align: left; }
TABLE.surveyAnswers TD {}
TABLE.surveyAnswers TD.center {text-align: left; }
TABLE.surveyAnswers TD.right {text-align: right; }
TABLE.surveyAnswers TD INPUT {font-size: 14px; text-align: left; font-weight: bold;}
TABLE.surveyAnswers TD SELECT {font-size: 14px; text-align: left; font-weight: bold;}
TABLE.surveyAnswers TD OPTION {font-size: 14px; text-align: left; font-weight: bold;}
TABLE.surveyAnswers TD FONT.small {font-weight: normal; font-size: 12px;}
TABLE.surveyAnswers TD INPUT[type=checkbox] { transform: scale(2); -ms-transform: scale(2); -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); padding: 10px; margin-left: 10px; margin-right: 10px; font-size: 16px;}

TABLE.surveyChart {width: 100%; height: 100%; margin-left: auto; margin-right: auto; margin-top: 1%;}
TABLE.surveyChart THEAD {}
TABLE.surveyChart TH {text-align: center; }
TABLE.surveyChart TD {text-align: center;}
.chartHelp {height: 20px; width: 20px; position: absolute; left: 95%;}

#userLeakList {width: 100%; height: 100%; position: relative;}
#userLeakListHeader {width: 100%;  position: relative; float: left; vertical-align: middle; border-bottom: 1px solid #7f7f7f;}
#userLeakListHeader DIV.back {width: 100px; position: relative; float: left; }
#userLeakListHeader INPUT.cancel {}
#userLeakListHeader DIV.header {width: 80%; font-weight:bold; font-size: 24px; color: rgb(19%, 14%, 13%); position:relative; float: left; text-align: left; margin-left: 50px;}
#userLeakListHeader DIV.subheader {width: 80%; font-weight:bold; font-size: 14px; color: rgb(50%, 51%, 52%); position:relative; float: left; text-align: left; margin-left: 150px;}
#userLeakPageNavigation {float: right; text-align: right; font-weight:bold; font-size: 14px; color: rgb(50%, 51%, 52%);}
#userLeakPageNavigation A.firstPage {color: #F79421; text-decoration: none;}
#userLeakPageNavigation A.prevPage {color: #F79421; text-decoration: none;}
#userLeakPageNavigation A.page {color: rgb(50%, 51%, 52%); text-decoration: none;}
#userLeakPageNavigation A.nextPage {color: #F79421; text-decoration: none;}
#userLeakPageNavigation A.lastPage {color: #F79421; text-decoration: none;}
#userLeakListTable {float: left;}
#userLeakListTable TD.leakValue {width: 150px; border-right: 1px solid #7f7f7f; text-align: center;}
#userLeakListTable TD.leakBody {overflow: visible;}
#userLeakListTable DIV.data {}
#userLeakListTable DIV.leak {position: relative;  float: left; background-repeat: no-repeat; background-position: center; width: 82px; height: 82px; margin-top:5px; text-align: center; }
#userLeakListTable DIV.leakValue {font-size:10px; font-weight: bold; position:absolute; bottom:0; margin-bottom: 20%; text-align:center; width:100%;}
#userLeakListTable DIV.leakBody { position: relative; float: bottom; margin-left: 2%;}
#userLeakListTable DIV.leakLabel {font-weight:bold; font-size: 21px; color: rgb(19%, 14%, 13%);}
#userLeakListTable DIV.leakScale { width: 100%; height: 16px; font-size: smaller; float:top; margin-top:1%; position: relative; float: left;}
#userLeakListTable DIV.leakScale1  {background-color: rgb(86%, 86%, 85%); width: 5%; position: relative; float: left;}
#userLeakListTable DIV.leakScale2 {background-color: rgb(47%, 59%, 60%);  text-align: center; position: relative; float: left;}
#userLeakListTable DIV.scaleHappening {width: 70%; font-weight:bold; font-size: 12px; color: rgb(50%, 51%, 52%);  position: relative; float: top; margin-left: 6%;}
#userLeakListTable DIV.leakWasted {width: 100%; color: rgb(47%, 59%, 60%); font-size:14px; font-weight: bold; position: relative; float: left; margin-top:1%;}
#userLeakListTable DIV.leakDescription { color: rgb(50%, 51%, 52%); font-weight: bold; font-size: 14px;}
#userLeakListTable DIV.line {width:95%; border-bottom: 1px solid #7f7f7f; margin-left: 1%;}
#userLeakListTable DIV.leakRecommendations {width: 100%; background: none; font-size:14px; font-weight: bold; position: relative; float: left; margin-top:1%;}
#userLeakListTable DIV.leakRecommendations TABLE TH {width: 100%; background: none; color: rgb(47%, 59%, 60%); font-size:14px; font-weight: bold; position: relative; float: left; margin-top:1%;}
#userLeakListTable DIV.leakRecommendations TABLE TD A {width: 100%; background: none; color: #F79421; font-size:14px; font-weight: bold; position: relative; float: left; margin-top:1%; border: none;}
#userLeakListTable DIV.leakRecommendations TABLE TD IMG {vertical-align: middle;}
#userLeakListTable DIV.leakRecommendations TABLE TH.recommendations {width: 48%; text-align: left;}
#userLeakListTable DIV.leakRecommendations TABLE TH.askForHelp {width: 48%; text-align: right;}
#userLeakListTable DIV.leakRecommendations TABLE TH.askForHelp A {background: none; color: red; font-size:14px; font-weight: bold; border: none;}

#recommendationInstruction { width:95%; height:100%; font-size:16px; margin-top:40px; margin-left:40px; margin-right:40px; }
#recommendationInstruction DIV.header { width: 80%; font-weight:bold; font-size: 24px; color: rgb(19%, 14%, 13%); position:relative; text-align: left; margin-left: 20px; margin-bottom:5px;}
#recommendationInstruction DIV.subheader {width: 80%; font-weight:bold; font-size: 14px; color: rgb(50%, 51%, 52%); position:relative; text-align: left; margin-left: 20px; margin-bottom:0px;}
#recommendationInstruction DIV.divider {width: 100%;border-bottom: 1px solid #7f7f7f;margin-bottom:20px;}


#userRecommendationList {width: 100%; height: 100%; position: relative;}
#userRecommendationListHeader {width: 100%; height: 70px; margin-top:10px; position: relative; float: left; vertical-align: middle; border-bottom: 1px solid #7f7f7f;}
#userRecommendationListHeader DIV.back {width: 100px; position: relative; float: left; }
#userRecommendationListHeader INPUT.cancel {}
#userRecommendationListHeader DIV.header     {width: 40%; color: rgb(19%, 14%, 13%); font-weight:bold; font-size: 24px; position:relative; float: left; text-align: left; margin-left: 10px;}
#userRecommendationListHeader DIV.subheader  {width: 40%; color: rgb(50%, 51%, 52%); font-weight:bold; font-size: 14px; position:relative; float: top; text-align: left; margin-left: 110px; margin-top: 35px;}
#userRecommendationPageSort {position: relative; float:left; width:50%; height:2em; text-align: left; font-weight:bold; font-size: 14px; color: rgb(62%, 62%, 64%); margin-top: 10px;}
#userRecommendationPageSort A {color: #F79421; text-decoration: none;}
#userRecommendationPageSort SPAN {color: rgb(19%, 14%, 13%);  text-decoration: none;}
#userRecommendationPageNavigation {position: relative; float:right; width:50%; height:2em; text-align: right; font-weight:bold; font-size: 14px; color: rgb(50%, 51%, 52%); margin-top: 10px;}
#userRecommendationPageNavigation A.firstPage {color: #F79421;  text-decoration: none;}
#userRecommendationPageNavigation A.prevPage {color: #F79421;  text-decoration: none;}
#userRecommendationPageNavigation A.page {color: #F79421;  text-decoration: none;}
#userRecommendationPageNavigation A.nextPage {color: #F79421;  text-decoration: none;}
#userRecommendationPageNavigation A.lastPage {color: #F79421;  text-decoration: none;}

#userRecommendationListTable {position:relative; float:left; width:845px; min-width: 51%;}
#userRecommendationListTable TD.userRecommendationListTableHeader {border-bottom: 2px solid black;}
#userRecommendationListTableHeaderRecommendation {margin-bottom: 0.5em; font-weight: bold; font-size: 16px; color: rgb(19%, 14%, 13%); position:relative; float:left; width:50%; }
#userRecommendationListTableHeaderSavings {margin-bottom: 0.5em; font-weight: bold; font-size: 16px; color: rgb(19%, 14%, 13%); position:relative; float:left; width:50%; text-align: right;}
#userRecommendationListTable TD.surveyRecommendationValue {width: 125px; text-align: center;}
#userRecommendationListTable TD.surveyRecommendationBody {overflow:visible}
#userRecommendationListTable DIV.data {}
#userRecommendationListTable DIV.surveyRecommendation {position: relative;  float: left; margin-left: 25%; background-repeat: no-repeat; background-position: center; width: 86px; height: 82px;}
#userRecommendationListTable DIV.surveyRecommendationValue {font-size: 12px; font-weight: bold; position:absolute; bottom:0; text-align:center; width:100%;}
#userRecommendationListTable DIV.surveyRecommendationBody { position: relative; float: bottom; margin-top: 5px; margin-left: 10px;}
#userRecommendationListTable DIV.surveyRecommendationLabel {position: relative; float:left; font-weight:bold; font-size: 16px; color: rgb(19%, 14%, 13%); width:90%;}
#userRecommendationListTable DIV.surveyRecommendationLabel IMG {vertical-align : middle;}
#userRecommendationListTable DIV.surveyRecommendationLabel SPAN {cursor: pointer;}
#userRecommendationListTable DIV.surveyRecommendationLabel A {border-bottom: none;}
#userRecommendationListTable DIV.surveyRecommendationSavings {position: relative; float:left; font-weight:bold; font-size: 16px; color: rgb(19%, 14%, 13%); width:10%; text-align: right;}
#userRecommendationListTable DIV.surveyRecommendationDescriptionLabel {position: relative; float:left; font-weight:bold; font-size: 14px; color: #F79421; width:40%; text-align:right;}
#userRecommendationListTable DIV.surveyRecommendationDescriptionLabel A {font-weight:bold; font-size: 14px; color: #F79421; border-bottom: none;}
#userRecommendationListTable DIV.surveyRecommendationDescriptionLabel A:hover {font-weight:bold; font-size: 14px; color: #F79421; border-bottom: none; text-decoration: underline !important;}
#userRecommendationListTable DIV.surveyRecommendationDescription {position: relative; top: 10px; clear: both; width: 90%; color: rgb(50%, 51%, 52%); font-weight:bold; font-size: 14px;}
#userRecommendationListTable DIV.surveyRecommendationTakeback {position: relative; margin-top: 2em; margin-left: 2em; clear: both; width: 100%; color: rgb(50%, 51%, 52%); font-size:14px; font-weight: bold;}
#userRecommendationListTable DIV.surveyRecommendationTakebackHeader {font-weight:bold; font-size: 14px; color: rgb(47%, 59%, 60%);}
#userRecommendationListTable DIV.surveyRecommendationTakebackIcon {position: relative; float:left; width: 50px;}
#userRecommendationListTable DIV.surveyRecommendationTakebackLabel {float: none; margin-top: 10px; background: none; color: #F79421; font-size:14px; font-weight:bold; border: none;}
#userRecommendationListTable DIV.surveyRecommendationTakebackLabel A {background: none; color: #F79421; font-size:14px; font-weight:bold; border: none;}
#userRecommendationListTable DIV.surveyRecommendationTakebackValue {float: none; margin-top: 5px; font-weight:bold; font-size: 12px; color: rgb(14%, 12%, 13%);}
#userRecommendationListTable DIV.surveyRecommendationStatus {position: relative; margin-top: 2em; clear: both; width: 90%; color: rgb(14%, 12%, 13%); font-size:14px; font-weight: bold;}
#userRecommendationListTable DIV.surveyRecommendationStatus A {color: #F79421;font-size:14px; font-weight: bold; text-decoration: none; border-bottom:none;}
#userRecommendationListTable DIV.surveyRecommendationStatus IMG {margin-left: 2em; vertical-align : middle;}
#userRecommendationListTable DIV.line {width:100%; border-bottom: 1px solid rgb(74%, 74%, 75%); margin-left: 0%;}
#userRecommendationListTable INPUT.expand {background: transparent;}

#keyIndicatorsHeader {width: 100%; height: 50px; margin-top:10px; position: relative; float: left; vertical-align: middle; border-bottom: 2px solid #302421;}
#keyIndicatorsHeader DIV.homeHeader {color: #F79421; font-weight:bold; font-size: 24px; position: relative; float: left; }
#keyIndicatorsHeader DIV.homeHeader A {color: #F79421;}
#keyIndicatorsHeader DIV.header {width: 40%; color: rgb(19%, 14%, 13%); font-weight:bold; font-size: 24px; position:relative; float: left; text-align: left; margin-left: 10px;}
#keyIndicatorsTable {position:relative; float:left; width:100%;}
#keyIndicatorsTable TR.keyIndicatorRow { height: 175px; border-bottom: 1px solid rgb(74%, 75%, 75%); }
#keyIndicatorsTable TR.keyIndicatorRow TD {padding: 1em 1em;}
#keyIndicatorsTable DIV.indicatorPart {min-width: 360px; height:172px; margin 1% 1% 1% 1%; font-size: 12px; position: relative; float: left;}
#keyIndicatorsTable DIV.trendingPart {width: 30%; margin 1% 1% 1% 1%; font-size: 12px; color: rgb(50%, 51%, 52%); position: relative; float: left; padding-left: 2.5em; padding-right: 2em}
#keyIndicatorsTable DIV.explainPart {width: 60%; height: 92px; margin 1% 1% 1% 1%; font-size: 14px; color: rgb(50%, 51%, 52%); position: relative; float: left;}
#keyIndicatorsTable DIV.explainPart DIV {font-size: 15px; width:90%; height:120px; margin: 0% 0% 0% 5%; float:clear;}

#trendingPartsHeader {width: 100%; height: 50px; margin-top:10px; position: relative; float: left; vertical-align: middle; border-bottom: 2px solid #302421;}
#trendingPartsHeader DIV.homeHeader {color: #F79421; font-weight:bold; font-size: 24px; position: relative; float: left; }
#trendingPartsHeader DIV.homeHeader A {color: #F79421;}
#trendingPartsHeader DIV.header {color: rgb(19%, 14%, 13%); font-weight:bold; font-size: 24px; position:relative; float: left; text-align: left; margin-left: 10px;}
#trendingPartsTable {position:relative; float:left; width:100%;}
#trendingPartsTable TR.trendingPartRow { height: 175px; border-top: 1px solid rgb(74%, 75%, 75%); }
#trendingPartsTable DIV.trendingPartLabel {width: 99%; height:30px; margin-top: 1em; font-weight:bold; font-size: 16px; color: rgb(35%, 35%, 36%); position: relative; float: left;}
#trendingPartsTable DIV.normingPartExplanation {width: 99%; margin-top: 1em; float: left; font-size: 14px; color: rgb(50%, 51%, 52%);}
#trendingPartsTable DIV.explainPartCharts {width: 99%; margin-top: 1em; margin-bottom: 1em; float: left;}

#smallFont {font-size: small;}

#help { color: #666666; font-size: 16px; text-align: justify; margin-left:5%; margin-right:5%;}
#help H2 { color: #000000; padding: 0; font-weight: bold; font-size: 14px; margin: 2em 0 0 0; padding: 0 0 0 10px; background: url(../images/dot03.gif) 0 4px no-repeat; }
#help P { line-height: 20px;}
#help A { color:#990;}
#help UL {}
#help UL LI {}

/* Summary */
#summaryBaseLoad {position: relative; width:100%; height: 50%; min-height: 20em;}
#summaryBaseFilter {position: relative; width:100%; height: 20%; top:1em;}
#summaryBaseFilterResourceUse {position: relative; float:left; width:75%; height: 2em; font-weight: bold; font-size: 18px; color: rgb(20%, 15%, 14%);}
#summaryBaseFilterResourceUse .grey {font-weight: bold; font-size: 12px; color: rgb(62%, 63%, 64%);}
#summaryBaseFilterResourceUse .black {font-weight: bold; font-size: 12px; color: rgb(20%, 15%, 14%);}
#summaryBaseFilterResourceUse A {font-weight: bold; font-size: 12px; color: #F79421; text-decoration: none;}
#summaryBaseFilterResourceUse A.selected {padding: 3px 0 3px 3px; background-color: #F79421; color:#ffffff; height: 2em;}
#summaryBaseFilterUnitType {position: relative; float:right; text-align: right; width:24%; height: 2em; font-weight: bold; font-size: 12px; color: rgb(62%, 63%, 64%);}
#summaryBaseFilterUnitType .black {font-weight: bold; font-size: 12px; color: rgb(20%, 15%, 14%);}
#summaryBaseFilterUnitType A {font-weight: bold; font-size: 12px; color: #F79421; text-decoration: none;}
#summaryBaseFilterUnitType A.selected {padding: 3px 0 3px 3px; background-color: #F79421; color:#ffffff; height: 2em;}
#summaryBaseFilterUseType {position: relative; float:left; white-space: nowrap; width:100%; height: 4em; font-weight: bold; font-size: 12px; color: rgb(62%, 63%, 64%);}
#summaryBaseFilterUseType SELECT {font-weight: bold; font-size: 12px; color: rgb(14%, 12%, 13%);}
#summaryBaseChart {position: relative; float:left; width:100%; height: 75%; top: 0em; padding: 0px 0px 10px 0; border-top: 1px solid rgb(74%, 75%, 75%);}

#summaryBottom {position: relative; float:left; width:100%; height:45%; top: 1em; border-top: 1px solid rgb(20%, 15%, 14%); padding: 1% 0px;}
#summaryDiscovery {float:left; width:50%; height:100%; border-right: 1px solid rgb(74%, 75%, 75%);}
#summaryDiscoveryHeader{float:left; width:100%; height:5%;}
#summaryDiscoveryHeader DIV.left {float:left; width:50%; height:100%; font-weight: bold; font-size: 18px; color: rgb(19%, 14%, 13%);}
#summaryDiscoveryHeader DIV.right {float:left; width:49%; height:100%;}
#summaryDiscoveryHeader DIV.right A {font-weight: bold; font-size: 12px; color: #F79421; text-decoration:none;}
#summaryDiscoveryTopics {width:100%; height:100%; position: relative; margin-top: 30px; font-weight: bold; font-size: 14px; color: rgb(47%, 59%, 60%);}
#summaryDiscoveryTopicHeader {width:100%; height:5%; position: relative; font-weight: bold; font-size: 14px; color: rgb(47%, 59%, 60%);}
#summaryDiscoveryRemainingTopics {width:50%; height:100%; float:left; font-weight: bold; font-size: 12px; color: rgb(50%, 51%, 52%);}
#summaryDiscoveryRemainingTopics DIV.header{width:100%; height:10%; position: relative; padding: 0px 0px 10px; font-weight: bold; font-size: 12px; color: rgb(47%, 59%, 60%);}
#summaryDiscoveryRemainingTopics DIV.topic {width:100%; height:30px; float:clear; vertical-align: middle;}
#summaryDiscoveryRemainingTopics DIV.topic IMG {vertical-align: middle;}
#summaryDiscoveryCompletedTopics {width:49%; height:100%; float:left; font-weight: bold; font-size: 12px; color: rgb(50%, 51%, 52%);}
#summaryDiscoveryCompletedTopics DIV.header{width:100%; height:10%; position: relative; padding: 0px 0px 10px; font-weight: bold; font-size: 12px; color: rgb(47%, 59%, 60%);}
#summaryDiscoveryCompletedTopics DIV.topic {width:100%; height:30px; float:clear; vertical-align: middle;}
#summaryDiscoveryCompletedTopics DIV.topic IMG {vertical-align: middle;}
#summarySurveyRecommendations {float:left; width:49%; height:100%; border-left: 1px solid #e1e1e1;}
#summarySurveyRecommendationHeader {margin-left: 10px; width:100%; height:5%; font-weight: bold; font-size: 14px; color: rgb(47%, 59%, 60%);}
#summarySurveyRecommendationHeader A {font-weight: bold; font-size: 14px; color: #F79421; text-decoration:none;}
#summarySurveyRecommendationList {margin-left: 10px; margin-top: 10px; width:100%; height:95%; font-weight: bold; font-size: 14px; color: rgb(47%, 59%, 60%);}
#summarySurveyRecommendationList DIV.summaryLeak {margin-bottom: 10px; width:48%; float: left; font-weight: bold; font-size: 14px; color: rgb(47%, 59%, 60%);}
#summarySurveyRecommendationList DIV.summaryLeak IMG {vertical-align: middle;}

#customerRegistrationHeader {float:left; width:55%; height:5%; margin-left: 150px; margin-top: 20px; font-weight: bold; font-size: 24px; color: rgb(19%, 14%, 13%);}
#customerRegistrationLoginLink {float:right; margin-right: 5%; margin-top:20px; color: #F79421 !important;}
#customerRegistrationLoginLink A {font-weight:bold; color: #F79421 !important;}
#customerRegistrationIntro {float:left; width:55%; height:95%; margin-top: 20px; padding: 0px 20px; border-right: 1px solid #e1e1e1;  font-weight: bold; font-size: 14px; color: rgb(39%, 39%, 40%); text-align:justify}
#customerRegistrationIntro IMG {margin-top: 30px;}
#customerRegistrationForm {float:left; width:35%; height:95%; margin-top: 20px; padding: 0px 20px; font-weight: bold; font-size: 14px; color: rgb(19%, 14%, 13%); display: block; position: relative;}
#customerRegistrationForm P.error {font-weight: bold; font-size: 14px; color: rgb(60%, 10%, 12%);}
#customerRegistrationForm P.success {font-weight: bold; font-size: 14px; color: green;}
#customerRegistrationForm TR {height: 3em;}
#customerRegistrationForm TH {padding: 0px 10px 0px 0px; bold; font-size: 14px; color: rgb(19%, 14%, 13%);}
#customerRegistrationForm TD {font-weight:bold; font-size: 14px; color: rgb(19%, 14%, 13%);}
#customerRegistrationForm A {font-weight:bold; font-size: 14px; color: #F79421;}
#customerRegistrationValidating {float:left; margin-top: 20px; margin-left: 10%; width:25%; height:95%; display: none; font-weight:bold; font-size: 14px; color: rgb(19%, 14%, 13%); text-align:center;}
#customerRegistrationValidating IMG {margin-top: 20%; margin-left: 0%; width:60px; height:60px;}
#customerRegistrationValidated {background: url(../images/icons.png)  no-repeat 85% 0%; float:left; width:85%; height:95%; margin-top: 20px; margin-left: 200px;  padding: 0px 20px; font-weight: bold; font-size: 14px; color: rgb(39%, 39%, 40%); text-align:justify}
#customerRegistrationValidated P { max-width:65%; margin-top: 1em;}
#customerRegistrationSpamFilterTest {margin: 5%; padding: 2%; width:50%; font-size: 12px; border: 5px solid; border-color: #312422;}

#co-sites { float: left; list-style: none; padding: 5px 0 0 0; margin: 0; }
#co-sites LI { float: left; padding: 0; margin: 0; background: url(../images/dot01.gif) 0 9px no-repeat; font-weight: bold; }
#co-sites LI A { display: block; font-size: 10px; padding: 4px 12px 4px 12px; position: relative; text-decoration: none; }

#lang { float: right; list-style: none; color: #64b0ce; font-weight: bold; padding: 5px 0 0 0; margin: 0; display: inline-table; }
#lang LI { float: left; padding: 0; margin: 0; }
#lang LI.active { background: #eff7fa; }
#lang LI A { display: block; font-size: 10px; color: #64b0ce; padding: 4px 8px; position: relative; text-decoration: none; }
#lang LI A:hover { background: #eff7fa; text-decoration: none !important; }

#header01 { float: left; border-bottom: 8px solid #000000; width: 100%; margin-right: 1px; }
#header01 DIV { height: 60px; margin-bottom: 1px; background: url(../images/header01.jpg) 0 0 no-repeat; }

/* Content styles */

.col-type1 { float: left; width: 330px; margin-right: 20px; }
.col-type2 { float: left; width: 330px; }

.smallerfont {font-size:12px !important;}

.button-add { float: none; background: #ffae69; color: #ffffff; text-decoration: none; padding: 2px 2px 2px 2px; font-size: 10px; }
.button-add:hover { background: #ffae69; color: #000000 !important; }

.button-add-r { float: right; background: #ffae69; color: #ffffff; text-decoration: none; padding: 2px 2px 2px 2px; font-size: 10px; }
.button-add-r:hover { background: #ffae69; color: #000000 !important; }

.button-type1 { float: right; background: #ffae69; color: #ffffff; text-decoration: none; padding: 2px 2px 2px 2px; font-size: 10px; }
.button-type1:hover { background: #ffae69; color: #000000 !important; }

.button-type2 { float: right; margin-top: -1.5em; background: #ffae69; color: #000000; text-decoration: none; padding: 2px 6px 3px 6px; font-size: 9px; border: 1px solid; border-color: #000000 #ad5206 #ad5206 #000000; }
.button-type2:hover { text-decoration: none !important; background: #ffeee0; }

.button-type3 { border: none !important; background: #ffae69; color: #fff !important; font-size: 9px; padding: 0 3px; }
.button-type3:hover { text-decoration: none !important; background: #000000; }

.button-type4 { float: right; margin-top: -1.3em; background: #ffae69; color: #ffffff; text-decoration: none; padding: 1px 6px 2px 6px; font-size: 9px; border: 1px solid; border-color: #ddd #7b7b7b #7b7b7b #ddd; }
.button-type4:hover { text-decoration: none !important; background: #fafafa; }

.button-type5 { float: right; margin-top: 10px; background: #ffae69; color: #ffffff; text-decoration: none; padding: 1px 6px 2px 6px; font-size: 9px; border: 1px solid; border-color: #ddd #7b7b7b #7b7b7b #ddd; font-weight: bold; }
.button-type5:hover { text-decoration: none !important; background: #fafafa; }

.button-type6 { float: right; margin-top: 10px; background: #ffae69; color: #ffffff; text-decoration: none; padding: 1px 6px 2px 6px; font-size: 9px; border: 1px solid; border-color: #ddd #7b7b7b #7b7b7b #ddd; }
.button-type6:hover { text-decoration: none !important; background: #fafafa; }

TABLE.fixed { table-layout:fixed; }
TABLE.data { width: 100%; margin: 1em 0 0 0; }
TABLE.data TH { font-size: 12px; font-weight: bold; text-align: left; vertical-align: top; padding: 4px 5px; white-space: nowrap; background: #000000; color: #FFF; overflow: hidden;}
TABLE.data TH.center { font-size: 12px; font-weight: bold; text-align: center; vertical-align: top; padding: 4px 5px; white-space: nowrap; background: #000000; color: #FFF;}
TABLE.data TH A {color: #FFF;}
TABLE.data TH B { font-weight: normal; }
TABLE.data TD { font-weight: normal; text-align: left; vertical-align: top; padding: 4px 5px; overflow: hidden;}
TABLE.data TD.center { font-weight: normal; text-align: center; vertical-align: top; padding: 4px 5px; }
TABLE.data TD A { text-decoration: none !important; color: #000000; border-bottom: 1px solid #e1e1e1; }
TABLE.data TD A:hover { text-decoration: none !important; color: #ffae69; border-bottom: 1px solid #000000; }
TABLE.data TD.actions { padding: 2px; text-align: right; }
TABLE.data TD.actions A { text-decoration: none; border-bottom: none !important; }
TABLE.data TD.actions-links { color: #ccc; text-align: right; }
TABLE.data TD.actions-links A { color: #64b0ce; text-decoration: underline !important; border-bottom: none; }
TABLE.data TR.subheading TD { font-size: 10px; font-weight: bold; color: #64b0ce; background: url(../images/bg01.gif) 0 100% repeat-x; padding: 10px 0 10px 4px; border-right: 20px solid #FFF; }
TABLE.data TR.group TD { background: #ffeee0; color: #b95c0f; border-bottom: 1px solid #e1e1e1; }
TABLE.data TR.group A { color: #b95c0f; border-bottom: 1px solid #fec89b;  }
TABLE.data TR.filter TD { padding: 2px 2px 1px 2px; border-bottom: 1px solid #e1e1e1; text-align: center;}
TABLE.data TR.filter TD.left { padding: 2px 2px 1px 2px; border-bottom: 1px solid #e1e1e1; text-align: left;}
TABLE.data TR.filter TD.right { padding: 2px 2px 1px 2px; border-bottom: 1px solid #e1e1e1; text-align: right;}
TABLE.data TR.filter INPUT,
TABLE.data TR.filter IMG { margin-left: 3px; }
TABLE.data TR.filter A { vertical-align: bottom; text-decoration: none; border: none !important; }
TABLE.data TR.filter TD.actions INPUT { border: 1px solid; border-color: #94cde4 #3687a7 #3687a7 #94cde4; background: #ffae69; color: #64b0ce; font-weight: bold; font-size: 12px; overflow: visible; padding: 0px 5px; margin-top: 1px; cursor: pointer; } 
TABLE.data TR.filter TD.actions BUTTON { border: 1px solid; border-color: #94cde4 #3687a7 #3687a7 #94cde4; background: #ffae69; color: #ffffff; font-weight: bold; font-size: 12px; overflow: visible; padding: 0px 5px; margin-top: 1px; cursor: pointer; }
TABLE.data .inpt { padding: 1px 2px !important; }

.even TD,
.even TH { background: #f4f4f4; }

TABLE.smallform { width: 100%; margin: 1em 0 0 0; }
TABLE.smallform A { color: #000000; }
TABLE.smallform TH { font-weight: normal; text-align: left; vertical-align: top; padding: 4px 5px; white-space: nowrap; }
TABLE.smallform TD { font-weight: normal; text-align: left; vertical-align: top; padding: 4px 5px; }

P.actions { text-align: right; }
P.actions INPUT { overflow: visible; padding: 0px 8px 1px 8px; font-size: 12px; font-weight: bold; background: #FFF; border: 1px solid; border-color: #ddd #7b7b7b #7b7b7b #ddd; color: #777; cursor: pointer; }
P.actions INPUT.pdf { background: #FFF url(../images/ico_pdf.gif) 100% -1px no-repeat; padding: 0px 20px 1px 8px; }
P.actions INPUT.csv { background: #FFF url(../images/ico_csv.gif) 100% -1px no-repeat; padding: 0px 20px 1px 8px; }
P.actions INPUT.xml { background: #FFF url(../images/ico_xml.gif) 100% -1px no-repeat; padding: 0px 20px 1px 8px; }
P.actions INPUT.add { background: #ffae69; color: #ffffff; url(../images/ico_add.gif) 100% -1px no-repeat; padding: 0px 20px 1px 20px; }
P.actions INPUT.delete { background: #ffae69; color: #ffffff; padding: 0px 20px 1px 20px; }
P.actions INPUT.back { background: #ffae69; color: #ffffff; url(../images/ico_back2.gif) 5px 50% no-repeat; padding: 0px 20px 1px 20px; float: left; }
P.actions INPUT.button_left { background: #ffae69; color: #ffffff; padding: 0px 20px 1px 20px; float: left; }
P.actions INPUT.button_right { background: #ffae69; color: #ffffff; padding: 0px 20px 1px 20px; float: right; }

P.actions2 { text-align: right; margin: 0; }
P.actions2 INPUT { overflow: visible; padding: 0px 8px 1px 8px; font-size: 12px; font-weight: bold; background: #FFF; border: 1px solid; border-color: #ddd #7b7b7b #7b7b7b #ddd; color: #777; cursor: pointer; }
P.actions2 INPUT.pdf { background: #FFF url(../images/ico_pdf.gif) 100% -1px no-repeat; padding: 0px 20px 1px 8px; }
P.actions2 INPUT.csv { background: #FFF url(../images/ico_csv.gif) 100% -1px no-repeat; padding: 0px 20px 1px 8px; }
P.actions2 INPUT.xml { background: #FFF url(../images/ico_xml.gif) 100% -1px no-repeat; padding: 0px 20px 1px 8px; }
P.actions2 INPUT.add { background: #ffae69; url(../images/ico_add.gif) 100% -1px no-repeat; padding: 0px 20px 1px 20px; }
P.actions2 INPUT.back { background: #ffae69; url(../images/ico_back2.gif) 5px 50% no-repeat; padding: 0px 20px 1px 20px; float: left; }
P.actions2 INPUT.cancel { background: #ffae69; padding: 0px 20px 1px 20px; }
P.actions2 INPUT.save { background: #ffae69; padding: 0px 20px 1px 20px; }

P.actions3 { text-align: right; margin-right: 10px; }
P.actions3 INPUT { overflow: visible; padding: 0px 8px 1px 8px; font-size: 12px; font-weight: bold; background: #FFF; border: 1px solid; border-color: #ddd #7b7b7b #7b7b7b #ddd; color: #777; cursor: pointer; }
P.actions3 INPUT.pdf { background: #FFF url(../images/ico_pdf.gif) 100% -1px no-repeat; padding: 0px 20px 1px 8px; }
P.actions3 INPUT.csv { background: #FFF url(../images/ico_csv.gif) 100% -1px no-repeat; padding: 0px 20px 1px 8px; }
P.actions3 INPUT.xml { background: #FFF url(../images/ico_xml.gif) 100% -1px no-repeat; padding: 0px 20px 1px 8px; }
P.actions3 INPUT.add { background: #ffae69; url(../images/ico_add.gif) 100% -1px no-repeat; padding: 0px 20px 1px 20px; }
P.actions3 INPUT.back { background: #ffae69;url(../images/ico_back2.gif) 5px 50% no-repeat; padding: 0px 20px 1px 20px; float: left; }

P.banklink { text-align: center; margin: 2px 0 0 0; padding: 0.4em; background: #fbcda7; }
P.login1 { text-align: center; background: #fafafa; padding: 9px 5px 7px 0px; border: solid #e1e1e1; border-width: 1px 0; }
P.login1 INPUT { background: #ffae69; margin: 8px 0 8px 0; }

P.pages { list-style: none; border: 1px solid #e1e1e1; padding: 2px 1px; margin: 10px 0 0 0; text-align: center; font-size: 12px; }
P.pages A { background: #f4f4f4; text-decoration: none; padding: 1px 4px; font-size: 12px; position: relative; }
P.pages A:hover,
P.pages A.active { background: #ffae69; color: #ffF; text-decoration: none !important; }
P.pages .f-left { background: #ffae69; margin: -1px 1px 0 0; }
P.pages .f-first { background: #ffae69; margin: -1px 1px 0 0; }
P.pages .f-last { background: #ffae69; margin: -1px 1px 0 0; }
P.pages .f-right { background: #ffae69; margin: -1px 0 0 1px; }

P.progress { padding: 2px 4px 4px 4px; font-family: Tahoma, Arial, Helvetica, sans-serif; margin: 1em 0 2em 0; }
P.progress A { text-decoration: none; color: #64b0ce; margin: 0 5px 0 0; }
P.progress A B { background: #64b0ce; color: #fff; padding: 0 3px; margin: 0 5px 0 0; font-size: 9px; font-weight: normal; }
P.progress A:hover,
P.progress A.active { text-decoration: none !important; color: #000000; }
P.progress A:hover B,
P.progress A.active B { background: #000000; }

P.progress-actions { text-align: right; background: #ffffff; padding: 2px; margin: 2em 0 0 0; }
P.progress-actions INPUT,
P.progress-actions BUTTON { overflow: visible; padding: 0px 20px 1px 20px; font-size: 12px; font-weight: bold; background: #ffae69; border: 1px solid; border-color: #96cde3 #166f92 #166f92 #96cde3; color: #fff; cursor: pointer; }
P.progress-actions .cancel { float: left; background: #ffae69; padding: 0px 20px 1px 20px; margin-right: 2px; }
P.progress-actions .back { float: left; background: #ffae69; padding: 0px 20px 1px 20px; margin-right: 2px; }
P.progress-actions .continue { background: #ffae69; padding: 0px 20px 1px 20px; }

DL.progress-info { background: #f8f8f8; margin: -1.9em 0 2em 0 !important; padding: 5px 5px 10px 10px; line-height: 17px; }
DL.progress-info DT { padding: 0 5px 0 0; margin: 0; display: inline; font-size: 10px; }
DL.progress-info DD { padding: 0 30px 0 0; margin: 0; display: inline; font-size: 10px; }

#tooltip { position: absolute; width: 240px; background: #a3bd2e; text-align: left; padding: 1px; display: none; }
#tooltip-header { background: #dbe4ab; margin-bottom: 1px; height: 14px; }
#tooltip-header STRONG { background: #a3bd2e; color: #fff !important; font-size: 9px; padding: 0 3px; font-weight: normal; margin: 1px; float: left; }
#tooltip-close { float: right; font-size: 9px; color: #fff; padding: 1px 3px 2px 3px; background: #ff8510; text-decoration: none !important; line-height: 9px; border: 1px solid #FFF; }
#tooltip-close:hover { text-decoration: none !important; color: #ffe6ca; }
#tooltip-content { padding: 10px; line-height: 14px; color: #bcbfbf; background: #fff; }

#popupHelp { color: #000000; font-size: 18px; margin-top: 10%; }
.hidden {display: none;}

#overDiv {position:absolute; visibility:hidden; z-index:9999; border: 2px solid; background: none white; border-radius: 6px;}
#overDiv A {text-decoration: underline !important;}

.waitReport {text-align:center; color:#990; font-size: 20px;}
.unavailableReport {text-align:center; color:red; font-size: 20px; margin: 5%; }
.CodeMirror {border: 1px solid black;}

/* Trending Home */
#trendingHome {width: 100%; margin-top: 2em;}
#trendingHomeLeft {width: 33%; float:left; padding-bottom: 30px;}
#trendingHomeRight {width: 65%; float:left; border-left: 2px solid #e1e1e1; padding-left: 1em;}
#trendingHomeLeaks {width: 95%; float: left;}
#trendingHomeLeaksHeader {background-color: rgb(93%, 89%, 89%); width: 100%; height: 2.5em; position: relative;}
#trendingHomeLeaksHeaderName {float: left; width: 45%; height: 2em; font-size: 18px; font-weight: bold; margin-top: 1%; margin-left: 0.5em;}
#trendingHomeLeaksHeaderName IMG {vertical-align: middle;}
#trendingHomeLeaksHeaderLink {float: left; width: 50%; height: 2em; font-size: 12px; font-weight: bold; text-align: right; margin-top: 2%;}
#trendingHomeLeaksHeaderLink A {color: #F79421;}
#trendingHomeLeaksWasting {width: 100%; color: rgb(50%, 51%, 52%); float: left; margin-left: 1em;}
#trendingHomeLeaksList {width: 100%; float: left; margin-left: 1em; margin-top: 1em;}
#trendingHomeLeaksList .summaryLeak {float: left; width: 40px;}
#trendingHomeLeaksList .summaryLeak SPAN {float: left; width: 33px; text-align: center;}
#trendingHomeRecommendations {float: left; width: 95%; margin-top: 1em; margin-bottom: 1em;}
#trendingHomeRecommendationsHeader {float: left; background-color: rgb(93%, 89%, 89%); width: 100%; height: 2.5em; position: relative;}
#trendingHomeRecommendationsHeaderName {float: left; width: 70%; height: 2em; font-size: 18px; font-weight: bold; margin-top: 0.25em; margin-left: 0.5em;}
#trendingHomeRecommendationsHeaderLink {float: left; width: 25%; height: 2em; font-size: 12px; font-weight: bold; text-align: right; margin-top: 0.5em;}
#trendingHomeRecommendationsHeaderLink A {color: #F79421;}
#trendingHomeRecommendationsHeaderName IMG {vertical-align: middle;}
#trendingHomeRecommendationsList {width: 100%; float: left; margin-left: 1em; margin-top: 1em;}
#trendingHomeRecommendationsList .surveyRecommendation {color: #F79421; vertical-align: middle; margin-top: 0.3em;}
#trendingHomeRecommendationsList .surveyRecommendation A {color: #F79421;}
#trendingHomeRecommendationsList .surveyRecommendation IMG {vertical-align: middle;} 
#trendingHomeNextTopic {width: 95%; float: left; border-top:1px solid #e1e1e1;}
#trendingHomeNextTopicHeader {float: left; background-color: rgb(93%, 89%, 89%); width: 100%; height: 2.5em; position: relative;}
#trendingHomeNextTopicHeaderName {float: left; width: 45%; height: 2em; font-size: 18px; font-weight: bold; margin-top: 0.25em; margin-left: 0.5em;}
#trendingHomeNextTopicHeaderName IMG {vertical-align: middle;}
#trendingHomeNextTopicHeaderLink {float: left; width: 50%; height: 2em; font-size: 12px; font-weight: bold; text-align: right; margin-top: 0.5em;}
#trendingHomeNextTopicHeaderLink A {color: #F79421;}
#trendingHomeNextTopicTitle {float: left; margin: 2em 0em 0.5em 1em; color: #F79421;}
#trendingHomeNextTopicTitle IMG {vertical-align: middle;}
#trendingHomeNextTopicTitle A {color: #F79421;}
#trendingHomeNextTopicBody {float: left; color: rgb(50%, 51%, 52%); margin: 1em 0em 0.5em 1em;}
#trendingHomeNextTopicViewAllLink {float: left; width: 100%; height: 2em; font-size: 12px; font-weight: bold; text-align: right; margin-top: 0.5em;}
#trendingHomeNextTopicViewAllLink A {color: #F79421;}
#trendingHomeNextTopicEmpty {float: left; color: rgb(50%, 51%, 52%); margin-left: 1em; margin-top: 30px; margin-bottom: 30px; font-style: italic;}
#trendingHomeReports {width: 95%; float: left; margin-top: 1em; border-top:1px solid #e1e1e1;}
#trendingHomeReportsHeader {float: left; background-color: rgb(93%, 89%, 89%); width: 100%; height: 2.5em; position: relative;}
#trendingHomeReportsHeaderName {float: left; width: 45%; height: 2em; font-size: 18px; font-weight: bold; margin-top: 0.25em; margin-left: 0.5em;}
#trendingHomeReportsHeaderName IMG {vertical-align: middle;}
#trendingHomeReportsList {width: 100%; float: left; margin-left: 1em; margin-top: 1em;}
#trendingHomeReportsListLink {margin-top: 0.6em;}
#trendingHomeReportsListLink A {font-weight: bold; margin-top: 1em; color: #F79421;}
#trendingHomeReportsList A {font-weight: bold; margin-top: 1em; color: #F79421;}
#trendingHomeTrends {width: 100%; float: left;}
#trendingHomeTrendsHeader {float: left; width: 100%; height: 2.5em; position: relative; }
#trendingHomeTrendsHeader1 {background-color: rgb(93%, 89%, 89%); float: left; width: 49%; height: 2.5em; position: relative; }
#trendingHomeTrendsHeader2 {background-color: rgb(93%, 89%, 89%); float: right; width: 49%; height: 2.5em; position: relative; }
#trendingHomeTrendsHeader3 {background-color: rgb(93%, 89%, 89%); float: left; width: 100%; height: 2.5em; position: relative; }
#trendingHomeTrendsHeaderName {float: left; width: 44%; height: 2em; font-size: 18px; font-weight: bold; margin-top: 0.25em; margin-left: 0.5em;}
#trendingHomeTrendsHeaderName IMG {vertical-align: middle;}
#trendingHomeTrendsHeaderKPIName {float: left; width: 44%; height: 2em; font-size: 18px; font-weight: bold; margin-top: 0.25em; margin-left: 0.5em;}
#trendingHomeTrendsHeaderLink {float: right; width: 50%; height: 2em; font-size: 12px; font-weight: bold; text-align: right; margin-top: 0.5em; margin-right: 1em;}
#trendingHomeTrendsHeaderLink A {color: #F79421;}
#trendingHomeTrendsAllTrendsLink {float: right; width: 50%; height: 2em; font-size: 12px; font-weight: bold; text-align: right; margin-top: 0.5em; margin-right: 1em;}
#trendingHomeTrendsAllTrendsLink A {color: #F79421;}
#trendingHomeTrendsAllKPILink    {float: right; width: 50%; height: 2em; font-size: 12px; font-weight: bold; text-align: right; margin-top: 0.5em; margin-right: 1em;}
#trendingHomeTrendsAllKPILink A {color: #F79421;}
#trendingHomeTrendsCharts {float: left; margin-top: 1em; margin-left: 1em; width: 95%}
trendingHomeTrendsChartsEmpty {float: left; color: rgb(50%, 51%, 52%); margin-left: 1em; margin-top: 30px; margin-bottom: 30px; font-style: italic;}
#trendingHomeProfile {width: 100%; float: left; margin-top: 1em;}
#trendingHomeProfileHeader {background-color: rgb(93%, 89%, 89%); float: left; width: 100%; height: 2.5em; position: relative; border-top:1px solid #e1e1e1;}
#trendingHomeProfileHeaderName {float: left; width: 45%; height: 2em; font-size: 18px; font-weight: bold; margin-top: 0.25em; margin-left: 0.5em;}
#trendingHomeProfileHeaderName IMG {vertical-align: middle;}
#trendingHomeProfileHeaderLink  {float: right; width: 50%; height: 2em; font-size: 12px; font-weight: bold; text-align: right; margin-top: 0.5em; margin-right: 1em;}
#trendingHomeProfileHeaderLink A {color: #F79421;}
#trendingHomeProfileChart {float: left; margin-top: 1em;  margin-left: 1em; zoom: 90%;}
#trendingHomeMessages {width: 100%; float: left; margin-top: 1em;}
#trendingHomeMessagesHeader {background-color: rgb(93%, 89%, 89%); float: left; width: 100%; height: 2.5em; position: relative; border-top:1px solid #e1e1e1;}
#trendingHomeMessagesHeaderName {float: left; width: 45%; height: 2em; font-size: 18px; font-weight: bold; margin-top: 0.25em; margin-left: 0.5em;}
#trendingHomeMessagesHeaderName IMG {vertical-align: middle;}
#trendingHomeMessagesHeaderLink {float: right; width: 50%; height: 2em; font-size: 12px; font-weight: bold; text-align: right; margin-top: 0.5em; margin-right: 1em;}
#trendingHomeMessagesHeaderLink A {color: #F79421;}
#trendingHomeMessagesList {float: left; margin-top: 1em; margin-left: 1em;}
#trendingHomeMessagesList .mailArchive {}
#trendingHomeMessagesList .mailArchive A {color: rgb(50%, 51%, 52%);}
#trendingHomeOverlayNavigation .overlayText {background-color: Transparent; background-repeat: no-repeat; color: white; font-size: 1.5em;} 
#trendingHomeOverlayNavigation .getStarted {cursor: pointer; border-color: white; height: 2.4em;}
#trendingHomeOverlayNavigation .overlay-start-text {top: 45% !important}
#trendingHomeOverlayNavigation .overlay-start-help {color: white; position: fixed;}
#trendingHomeOverlayNavigation .overlay-action {z-index: 1000 !important; height: 0% !important;}

#trendingProfileHeader {width: 100%; height: 50px; margin-top:10px; position: relative; float: left; vertical-align: middle; border-bottom: 2px solid #302421;}
#trendingProfileHeader DIV.homeHeader {color: #F79421; font-weight:bold; font-size: 24px; position: relative; float: left; }
#trendingProfileHeader DIV.homeHeader A {color: #F79421;}
#trendingProfileHeader DIV.header {width: 40%; color: rgb(19%, 14%, 13%); font-weight:bold; font-size: 24px; position:relative; float: left; text-align: left; margin-left: 10px;}

#trendingProfileLoad {position: relative; float: left; width:100%; height: 50%; min-height: 20em;}
#trendingProfileFilter {position: relative; width:100%; height: 20%; top:1em;}
#trendingProfileFilterResourceUse {position: relative; float:left; width:75%; height: 2em; font-weight: bold; font-size: 18px; color: rgb(20%, 15%, 14%);}
#trendingProfileFilterResourceUse .grey {font-weight: bold; font-size: 12px; color: rgb(62%, 63%, 64%);}
#trendingProfileFilterResourceUse .black {font-weight: bold; font-size: 12px; color: rgb(20%, 15%, 14%);}
#trendingProfileFilterResourceUse A {font-weight: bold; font-size: 12px; color: #F79421; text-decoration: none;}
#trendingProfileFilterResourceUse A.selected {padding: 3px 0 3px 3px; background-color: #F79421; color:#ffffff; height: 2em;}
#trendingProfileFilterUnitType {position: relative; float:right; text-align: right; width:24%; height: 2em; font-weight: bold; font-size: 12px; color: rgb(62%, 63%, 64%);}
#trendingProfileFilterUnitType .black {font-weight: bold; font-size: 12px; color: rgb(20%, 15%, 14%);}
#trendingProfileFilterUnitType A {font-weight: bold; font-size: 12px; color: #F79421; text-decoration: none;}
#trendingProfileFilterUnitType A.selected {padding: 3px 0 3px 3px; background-color: #F79421; color:#ffffff; height: 2em;}
#trendingProfileFilterUseType {position: relative; float:left; white-space: nowrap; width:100%; height: 4em; font-weight: bold; font-size: 12px; color: rgb(62%, 63%, 64%);}
#trendingProfileFilterUseType SELECT {font-weight: bold; font-size: 12px; color: rgb(14%, 12%, 13%);}
#trendingProfileChart {position: relative; float:left; width:100%; height: 75%; top: 0em; border-top: 1px solid rgb(74%, 75%, 75%);}
#trendingProfileChartHeader {margin-top: 1em; width: 100%; height: 1em;}
#trendingProfileChartHeaderExplainChart {width: 50%; height: 1em; float: left;}
#trendingProfileChartHeaderExplainChart A {color: #F79421; float: left; font-weight: bold; font-size: 12px;}
#trendingProfileChartHeaderTrendDetails {width: 50%; height: 1em; float: left;}
#trendingProfileChartHeaderTrendDetails A {color: #F79421; float: right; font-weight: bold; font-size: 12px;}
#trendingProfileKeyIndicators {float:left; width:100%; border-top: 1px solid rgb(74%, 75%, 75%);}
#trendingProfileKeyIndicatorsList {float:left; width: 800px; margin-left: 20%;}
#trendingProfileKeyIndicators .indicatorPart {float:left; padding: 1em;}
#trendingProfileKeyIndicatorsHeader {margin-top: 1em; width: 100%; height: 1em;}
#trendingProfileKeyIndicatorsHeader A {color: #F79421; float: right; font-weight: bold; font-size: 12px;}

#trendingProfileChartTrends {margin-bottom:1em; width:375px; height:45%; position:relative; border-bottom: 1px solid rgb(74%, 75%, 75%);}
#chartThreeNorms1 {width:250px; height:68px; position:relative;}
#chartThreeNorms2 {width:250px; height:55px; position:relative;}
#trendingProfileChartLegendSection {float: left; width: 100%; margin-top: 1em; margin-left: 2em; margin-bottom: 1em;}

.nostyle {
    background: transparent  !important;
    border: 0  !important;
    margin: 0  !important;
    padding: 0  !important;
    vertical-align: baseline  !important;
    text-decoration: none  !important;
    font-size: 100%  !important;
    font-family: arial, sans serif  !important;
    color: black  !important;
    line-height: normal  !important;
    text-decoration: none !important;
    border: none  !important;
}

.notes {float: left; color: #312422 !important; margin-left: 1em; margin-top: 5px; margin-bottom: 5px; font-style: italic;}

DIV .redAlert    { height: 0.5em; width: 0.5em; -webkit-border-radius: 0.25em; -moz-border-radius: 0.25em; border-radius: 0.25em; border: 0.01em solid #888943; background-color: #C5614A !important; margin: auto; }
DIV .yellowAlert { height: 0.5em; width: 0.5em; -webkit-border-radius: 0.25em; -moz-border-radius: 0.25em; border-radius: 0.25em; border: 0.01em solid #888943; background-color: #E8C772 !important; margin: auto; }
DIV .greenAlert  { height: 0.5em; width: 0.5em; -webkit-border-radius: 0.25em; -moz-border-radius: 0.25em; border-radius: 0.25em; border: 0.01em solid #888943; background-color: #1798A3 !important; margin: auto; }
#alertCircle { font-family: sans-serif; text-align: center; font-size: 0.05em; margin: 0em!important;}

TABLE.newsurvey {float: center; width: 800px; border:4px solid #e8ce79; color:#000000;}
TABLE.newsurvey td {font-family:Arial !important; font-size:16px;}
TABLE.newsurvey tr {border-bottom:3px solid #e8ce79;}
TABLE.newsurvey #firsttr { background:#e8ce79; color:#FFFFFF !important; font-size:20px; font-weight:bold;}
TABLE.newsurvey .tdborder {border-left:4px solid #e8ce79; border-right:4px solid #e8ce79;}
TABLE.newsurvey .tdborder  ol{ margin-left:25px; padding-left:0px; text-align:left;}
TABLE.newsurvey .tdborder  ol li{margin:3px 0px;}
TABLE.newsurvey .greytr{ background:#dcdedf;}

.dataguard1 {left: 10px; position: absolute; top: -4em;}
.dataguard1 img {width: 100px;}
.dataguard1 a {!position: absolute; right: 381px; top: 0; width: 100px; z-index: 1000;}

.overlay {height: 0%; width: 100%; position: fixed; z-index: 998; top: 0; left: 0; background-color: rgba(0,0,0, 0.6); overflow-y: hidden; display: none; transition: 0.5s;}
.overlay-svg {height: 0%; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; overflow-y: hidden;}
.overlay-center-content {position: relative; top: 25%; width: 100%; text-align: center; margin: auto;}
.overlay a {padding: 8px; text-decoration: none; font-size: 3em; color: white; display: block; transition: 0.3s;}
.overlay a:hover, .overlay a:focus {color: #f1f1f1;}

#customerRegistrationCommand #userInfoAlert, #customerRegistrationCommand #userInfoMessage {margin-top: 3em;} 

.typeform-share {
	right: -10px;
    top: 33%;
    padding: 5px 14px 14px 14px;
    border-bottom: 0px;
    border: 1px solid black;
    color: #993300 !important;
    display: block;
    position: fixed;
    background-color: white;
    font-size: 15px !important;
    font-family: Arial;
    line-height: 15px;
    opacity: 1;
    z-index: 999995;
    cursor: pointer;
    text-decoration: none !important;
    border-radius: 9px 9px 0px 0px;
    -moz-border-radius: 9px 9px 0px 0px;
    transform-origin: 100% 100% 0;
    -webkit-transform-origin: 100% 100% 0;
    -ms-transform-origin: 100% 100% 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg) scale(1.02);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
}
.typeform-share:hover {right: -1px;}

A.helpbtn, A.helpbtn:hover {background-color: white !important; vertical-align: top !important;} 
A.helpbtn IMG {background-color: white !important; vertical-align: top !important;}

A.call-chat-button
{
	display: block;
    bottom: 0;    
    direction: ltr;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 14px;
    height: 35px;
    position: fixed;
    right: 0;
    width: auto;
    z-index: 1031;
	background-color: #578ea9;    
    color: white;
    float: right;    
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}
A.call-chat-button:hover 
{
	padding: 5px 10px;
    outline: 0;
}

.clickRow {cursor: pointer;}

.dropzone {}
.dropzone.in {font-size: larger;}
.dropzone.hover {background: #c0c0c0;}
.dropzone.fade {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1;
}

#customerFileName {display: inline;}
#customerFileImgPreview {border: 1px solid #ccc!important; border-radius: 16px; padding: 1%; margin: 1%; width: fit-content;}
#customerFileImgPreview .label {float:left;}

.usageHistoryRow {cursor: pointer}
.usageHistoryPeriod {font-family: monospace; white-space: nowrap;}

.button-medium {background-color: #E9621F; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 5px; }

.p4p {font-family: 'Roboto', sans-serif; color: #000000; font-size: 16px;}
.p4p .facebook-login {width: 200px;}
.p4p .google-login {width: 200px;}
.p4p .facebook-login-small {width: 45px;}
.p4p .google-login-small {width: 45px;}
.p4p .btn-primary {font-size: 19px; color: #FFFFFF; background-color: #E9621F; border-color: #EFEFEF;}
.p4p .btn-success {font-size: 19px; color: #FFFFFF; background-color: #E9621F; border-color: #EFEFEF;}
.p4p .btn-default {font-size: 19px;}
.p4p label {font-size: 16px; color: #373737; float: left; font-weight: normal;}
.p4p input {font-size: 17px; color: #000000;}
.p4p .title {font-size: 20px; margin-top: 2%;}
.p4p A {font-size: 16px; color:#373737; text-decoration: underline; }

#customerRegistrationSMDData .terms {width: 320px; font-size: 16px; color:#373737; }
#customerRegistrationSMDData .terms-link {font-size: 16px; color:#373737; }
#customerRegistrationSMDData .terms-link A {font-size: 16px; color:#373737; text-decoration: underline; }
#customerRegistrationSMDData .popover-content {text-align: left;}

#customerRegistrationSMDData .step1 {margin-top: 2em;}
#customerRegistrationSMDData .step1 .facebook-login {margin-left: -115px;}
#customerRegistrationSMDData .step1 .google-login {margin-left: -115px;}
#customerRegistrationSMDData .step1 #userEmailBlock {width: 440px;}
#customerRegistrationSMDData .step1 #userEmail {width: 250px; display: inline-block;}
#customerRegistrationSMDData .step1 #socialBlock {width: 440px;}
#customerRegistrationSMDData .step1 .btn-next {color: #FFFFFF; background-color: #4551A3; border-color: #FBFBFB;}
#customerRegistrationSMDData .step1 .btn-next .glyphicon {width: 21px;}

#customerRegistrationSMDData .step2 {margin-top: 2em;}
#customerRegistrationSMDData .step2 .passwordBlock {width: 325px;}
#customerRegistrationSMDData .step2 input {display: initial;}
#customerRegistrationSMDData .step2 input + .glyphicon {cursor: pointer; pointer-events: all;}
#customerRegistrationSMDData .step2 .btn-success {font-size: 18px; color: #FFFFFF; background-color: #4551A3; border-color: #FBFBFB;}
#customerRegistrationSMDData .step2 .btn-next {color: #FFFFFF; background-color: #4551A3; border-color: #FBFBFB;}
#customerRegistrationSMDData .step2 .btn-next .glyphicon {width: 21px;}

#customerRegistrationSMDData .step3 {margin-top: 2em;}
#customerRegistrationSMDData .step3 .btn-next {color: #FFFFFF; background-color: #4551A3; border-color: #FBFBFB;}
#customerRegistrationSMDData .step3 .btn-next .glyphicon {width: 21px;}

#customerRegistrationSMDData .step4 {margin-top: 2em;}
#customerRegistrationSMDData .step4 .passwordBlock {width: 325px;}
#customerRegistrationSMDData .step4 input {display: initial;}
#customerRegistrationSMDData .step4 input + .glyphicon {cursor: pointer; pointer-events: all;}
#customerRegistrationSMDData .step4 .btn-success {font-size: 18px; color: #FFFFFF; background-color: #4551A3; border-color: #FBFBFB;}
#customerRegistrationSMDData .step4 .btn-next {color: #FFFFFF; background-color: #4551A3; border-color: #FBFBFB;}
#customerRegistrationSMDData .step4 .btn-next .glyphicon {width: 21px;}

#customerRegistrationSuccessData .title {color: #4551A3;}
#customerRegistrationSuccessData .envelope {width: 100px;}
#customerRegistrationSuccessData #phoneBlock {width: 300px;}
#customerRegistrationSuccessData #phone {width: 230px; display: initial;}
#customerRegistrationSuccessData .btn-next {width: 52px; color: #FFFFFF; background-color: #4551A3; border-color: #FBFBFB;}
#customerRegistrationSuccessData .woman-image { 
	background-image: url(../images/lady-on-phone.jpg); 
	background-repeat: no-repeat; 
	background-position: center top; 
	background-size: 100% auto; 
	-moz-background-size: 100% auto;
	-webkit-background-size: 100% auto;
	-o-background-size: 100% auto;
	width: 100%; 
	height: 1000px;}
#customerRegistrationSuccessData .woman-image { color: white;}
#customerRegistrationSuccessData .woman-image label { color: white;}

#customerRegistrationSMDLink {font-size: 18px; color:#373737; }
#customerRegistrationSMDLink .buttonBlock {}
#customerRegistrationSMDLink .questions {margin-top: 1em;}
#customerRegistrationSMDLink .questions HR {color:#D8D8D8;}
#customerRegistrationSMDLink .question {color:#0B21D1; font-weight:400; font-size: 14px; text-decoration: underline;}
#customerRegistrationSMDLink .answers {margin-top: 2em; margin-bottom: 1em;}
#customerRegistrationSMDLink .answers HR {color:#D8D8D8;}
#customerRegistrationSMDLink .answer {margin-top: 1em; margin-bottom: 1em; font-weight:400; font-size: 14px; color: #010101}
#customerRegistrationSMDLink .answer-header {font-weight:900; color: black;}
#customerRegistrationSMDLink .answer .row {margin-bottom: 1em;}
#customerRegistrationSMDLink .footer {background-color: #EFEFEF;}
#customerRegistrationSMDLink .buttonBlock button {font-size: 24px; font-weight: bold; width: 180px; height: 45px; background-color: #E9621F; border: none; color: white;}
#customerRegistrationSMDLink .dataguardBlock img {width: 142px;}

.notification-message {width: 95%;}
.notification-message .red {color: white !important;}
.notification-message-remove {width: 1%; margin-right: 2%;}
.notification-message-div {width: 50%; margin-left: 25%;}
@media (max-width: 992px) {
	.notification-message {width: 95%;}
	.notification-message-div {width: 74%; margin-left: 13%;}
}
@media (max-width: 768px) {
	.notification-message {width: 95%;}
	.notification-message-div {width: 98%; margin-left: 1%;}
}

.simple-block {float: left}

#loadingImage2 {width: 180px; height: 180px; z-index:9999;}

.copy-to-clipboard A {border-bottom: none !important; background-color: transparent !important;}
.copy-to-clipboard A:hover {text-decoration: none !important; background-color: transparent !important; border-bottom: none !important;}

.tooltip-cp {position: relative; display: inline-block;}
.tooltip-cp-action {cursor: pointer;}
.tooltip-cp .tooltiptext-cp {visibility: hidden; width: auto; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; opacity: 0; transition: opacity 0.3s; font-size: small; font-weight: normal;}
.tooltip-cp .tooltiptext-cp::after {content: ""; position: absolute; top: 100%; left: 0.5em; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;}
.tooltip-cp:hover .tooltiptext-cp {visibility: visible; opacity: 1;}

.btn-hea {background: #ffae69 !important; color: #ffffff !important;}
.btn-direction {width:75px; height:25px; padding:0}

.popover-content {width: 250px; text-align: left; color: black;}

.otpDiv {display: none;}
.otpMessage {margin-top: -3em; font-weight: bold;}

#customerLoginOtp {font-family: 'Roboto', sans-serif; color: #000000; font-size: 16px;}
#customerLoginOtp .otpMessageBlock {padding-top: 1em; width: 640px;}
#customerLoginOtp .otpBlock {width: 325px;}
#customerLoginOtp .buttonBlock {width: 325px;}
#customerLoginOtp .linkBlock {width: 325px;}
#customerLoginOtp input {display: initial;}
#customerLoginOtp input + .glyphicon {cursor: pointer; pointer-events: all;}
#customerLoginOtp .btn-success {font-size: 18px; color: #FFFFFF; background-color: #4551A3; border-color: #FBFBFB;}
#customerLoginOtp A {color: #4551A3;}
