/* ==========================================================================
NLI Resouces CSS Version 1.0

Content

####    Import Google Font
####    Basic Style
####    NLI First Level Components
####    NLI Second Level Components
####    Override Foundation Style
####    NLI Module Style
####    Landingpage Style Only
####    Resize Scrollbar for Chrome
####    Media Queries Style  


========================================================================== */


/* ==========================================================================
Import Google Font
========================================================================== *.

 */
.test input{
    float: left;
}


/* ==========================================================================
Basic Style
========================================================================== */

body
{
    background-color: #f4f4f4!important;
    overflow-x: hidden;
}

*, *:before, *:after 
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

a
{
    font-size: 0.875rem;
}

/* default body1*/
label, legend
{
    cursor: default!important;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #586B72;
}

span
{
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0;
    color: #586B72;
}

li 
{
    list-style: outside none none;
}

ul 
{
    margin-left: 0!important;
}

input 
{
    outline: none;
}

.input-height, .inputHeight
{
    height: 37px;
    margin: 10px 0;
}

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

.hide
{
    display: none!important;
}

.edit-visiable, .editVisiable
{
    display: none!important;
}

.clearfix 
{
    clear: both;
}

/* Login / Registration */
#panel1, #panel2
{
    padding: 0!important;
}

.panel, .panel-white-bg, .panelWhiteBg 
{
    margin-bottom: 1.25rem!important;
    padding: 0.9375rem!important;
}

.panel-white-bg, .panelWhiteBg 
{
    background: none repeat scroll 0 0 #FFF;
    border-style: none;
    color: #333;
    padding: 0.9375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.contract-description-bg
{
    background: none repeat scroll 0 0 #FFF;
    border-style: none;
    color: #333;
    padding: 0.9375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    padding: 0.9375rem!important;
    min-height: 50px;
}


/* Farbeshema  & Font & Color */

/*  #FDC501 Gelb     #00468E Blau      #395C8F Text Blau  */

.primary-color {    background-color: FFAF05;}
.primary-text-color{    color: FFAF05;}

.primary-dark-color{    background-color: #14148C;}
.primary-dark-text-color{    color: #14148C;}

.accent-color{    background-color: #009ADA;}
.accent-text-color{    background-color: #009ADA;}

.dark-grey{    background-color: #4D4D4D;}
.text-dark-grey{    color: #4D4D4D;}

.grey{    background-color: #777777;}
.text-grey{    color: #777777;}

.grey-500{ background-color: #4CAF50; }
.text-grey-500{ color: #4CAF50; }

.grey-700{ background-color: #616161; }
.text-grey-700{ color: #616161; }

.light-grey{    background-color: #F4F4F4;}
.text-light-grey{    color: #f4f4f4;}

.white{    background-color: #FFFFFF;}
.text-white{    color: #FFFFFF;}

.amber-100{    background-color:#FFECB3;}
.text-amber-100 {    color:#FFECB3;}

.amber-700{    background-color:#14148C;} 
.text-amber-700{    color: #14148C   }

.green-500{ background-color: #4CAF50; }
.text-green-500{ color: #4CAF50; }

.red-100{ background-color: #FFCDD2; }
.text-red-100{ color: #FFCDD2; }

.red-500{ background-color: #F44336; }
.text-red-500{ color: #4CAF50; }

.ligth-blue-500{ background-color: #03A9F4; }
.text-light-blue-500{ color: #03A9F4; }


/* Header Font Style */

/*h1 
{
    font-size: 72px;
    font-weight: 300;
    letter-spacing: 0.16em;
}

h2 
{
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0.05em;
}

h3 
{
    font-size: 26px;
    font-weight: 400;
}

h4 
{
    font-size: 24px;
    font-weight: 400;
}

h5 
{
    font-size: 22px;
    font-weight: 400;
}

h6 
{
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.05em;
}

p 
{
    font-size: 16px;
    font-weight: 400;
}*/


.display1, .header1{    font-size: 1.5rem;      }
.display1 span, .header1 span{    font-size: 1.5rem;}
/*    background-color: #FDC501;*/
/*    color: #FFF;*/

/* Title Roboto Medium */
.title, .header2{    font-size: 1.25rem;    margin: 0 0 0.5rem;}
.title span, .header2 span{    font-size: 1.25rem;}

.subheading, .header3{    font-size: 1rem;}
.sbbheading span, .header3 span{    font-size: 1rem;}

.body2,.header4{    font-size: 0.875rem!important; font-weight: 600;opacity: 0.87;}
.body2 span, .header4 span{    font-size: 0.875rem!important; font-weight: 600;}

.body1, div {  font-size: 0.875rem;  }

.caption  {  font-size: 0.75rem;  }


.help-text, .helpText 
{
    float: left;
    font-size: 0.75rem;
    color: #9E9E9E; 
    /*    Grey-500*/
}

.info-text, .infoText 
{
    float: right;
    font-size: 0.75rem;
    color: #9E9E9E; 
    /*    Grey-500*/
}

.error-text, .errorText 
{
    /*float: left;*/
    font-size: 0.75rem;
    position: relative;
    top: -10px;
    color: #F44336;
    /*    Red-500*/
}

div.error-text span, div.errorText span 
{
    float: left;
    font-size: 0.75rem!important;
    position: relative;
    /*    top: -10px;*/
    color: #F44336!important;
    /*    Red-500*/
}

info-error-text, .infoErrorText 
{
    float: right;
    font-size: 0.75rem;
    color: #F44336;
    /*    Red-500*/
}


.input-error, .inputError 
{
    border-bottom-color: #F44336 !important;
}

.paymentPlanInput {
    min-width: 5rem;
}

.active-link, .activeLink 
{
    border-bottom: solid 4px #FFF!important;
}

.redAccount {
    color: #F44336;
    /*    Red-500*/
}

.greenAccount {
    color: #4CAF50;
    /*    Green-500*/
}






.selected {
    background-color: rgba(141, 192, 219, 0.25); !important;
    color: #424242;
    /*    Grey-800*/
}

.succeeded {
    color: #4CAF50;
    /*    Green-500*/
}

.failed {
    color: #F44336;
    /*    Red-500*/
}

.in-progress {
    color: #03A9F4;
    /*    Light-Blue-500*/
}

.circleSucceeded {
    color: #C8E6C9;
    /*    Green-100*/
}

.circleInProgress {
    color: #03A9F4;
    /*    Light-Blue-500*/
}

.circleFailed {
    color: #FFCDD2;
    /*    Red-100*/
}

.smallFontSpan {
    font-size: 0.75rem !important;
}

.portalBlueColor {
    color: #03A9F4;
    /*    Light-Blue-500    */
}

.label-color, .labelColor { 
    color: #616161;
    /*    Grey-700*/
}






.productChangeFontSize {
    font-size: 0.875rem;
}

.customerDataBankAccountBankLabel {
    bottom: 5px;
}

.fi-info {
    font-size: 20px;
}

.fi-info:hover
{

}


.margin-bottom-10
{
    margin-bottom: 0.875rem!important;
}

.margin-bottom-20
{
    margin-bottom: 1.5rem!important;
}

.margin-bottom-40
{
    margin-bottom: 18rem!important;
}

.margin-top-10
{
    margin-top: 0.875rem!important;
}

.margin-top-20
{
    margin-top: 0.9375rem !important;
}

.margin-right-20
{
    margin-right: 0.9375rem !important;
}


/* DW Loading */

[dw-loading] {
    position: relative;
}

.dw-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    display: none;
}

.dw-loading:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.dw-loading.dw-loading-active {
    display: block;
}

.dw-loading.dw-loading-overlay {
    background-color: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.dw-loading > .dw-loading-body {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.dw-loading > .dw-loading-body > .dw-loading-spinner {
    position: relative;
}

.dw-loading > .dw-loading-body > .dw-loading-text {
    position: relative;
    top: 25px;
    font-weight: bold;
    font-size: 11px;
    text-shadow: 0 0 2px rgb(255, 255, 255);
}

.balancValueColor
{
    color:#424242;
    /*    Grey-800*/
}

/* Tooltip */
.has-tip
{
    border-bottom: none!important;
}

.has-tip:hover
{
    border-bottom: none!important;
}

.list-style
{
    margin-bottom: 0.75rem;
}

.list-style li {
    list-style: inside none disc;
}

.list-style dd
{
    margin-bottom: 0rem;
}



/* Placeholder */

::-webkit-input-placeholder 
{
    text-align: left;
}

:-moz-placeholder 
{
    text-align: left;  
}

::-moz-placeholder
{  
    text-align: left;  
}

:-ms-input-placeholder 
{
    text-align: left; 
}


.text-uppercase 
{
    text-transform: uppercase;
}

.text-uppercase input
{
    text-transform: uppercase;
}


.scroll-it, .scrollit
{
    overflow-y : auto;
    max-height: 350px;
}

.cursor 
{
    cursor: pointer;
}

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


nvd3 svg
{
    overflow: visible!important;
    margin-bottom: 100px;
    padding-left: 40px;
}

.consHistChart svg
{
    height: 350px;
}

.tabs-content
{
    margin-bottom: 0 !important;
}


.label-padding, .labelPadding
{
    padding: 0.5rem 0 0;
}

.label-padding-2, .labelPadding2
{
    padding-top: 0.5rem;
}

.labelPadding-tarif-icon
{
    padding-top: 1rem;
}

.no-padding, .noPadding{
    padding: 0 0 0;
}

.area
{
    position: relative;
    text-align: center;
    height: 0;
    overflow: visible;
    top: -35px;
}

.list-active, .listActive
{
    background-color: #eee;
}

/* ??? */
.arrow-down input, .arrowDown input
{
    background-image: url(../imgs/arrowDown.svg)!important;
    width: 37px; 
    height: 37px; 
    border: 1px solid #c8c8c8;
    border-radius: 20px;
    background-color: #FFFFFF;
}

.arrow-down input:hover, .arrowDown input:hover
{
    background-color: #EEEEEE;
}






.header-row 
{
    align-items: center;
    align-self: stretch;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    flex-shrink: 0;
    height: 28px;
    margin: 0;
}

.header-row > * 
{
    flex-shrink: 0;
}

.menu-icon 
{
    height: 30px;
    width: 30px;
    position: absolute; 
    top: 10px; 
    left: 20px;
    z-index: 20;
}

.header-row > * 
{
    flex-shrink: 0;
}
.layout-spacer 
{
    flex-grow: 1;
}

.header-row .mdl-navigation 
{
    align-items: center;
    flex-direction: row;
    height: 64px;
    margin: 0;
    padding: 0;
}

.navigation 
{
    direction: ltr;
    justify-content: flex-end;
}

.mdl-navigation 
{
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
}

.navigation .navigation-link 
{
    background-color: transparent !important;
    border-bottom: 4px solid transparent;
    display: inline-block;
    height: 60px;
    line-height: 68px;
}

.header-row .navigation-link 
{
    color: rgba(255,255,255,0.7);
    display: block;
    line-height: 64px;
    padding: 0 24px;
}

.navigation-link 
{
    font-size: 0.875rem;
    font-weight: bold;
    margin: 0;
    text-decoration: none;
    color: rgba(255,255,255,0.7);
}

.navigation-link:hover 
{
    color: #FFF;
}





/* Side Menu */

.side-menu
{
    padding: 0 !important; 
    height: 100%!important;
    background-color: #FFF!important;
    z-index: 1004!important; 
    position: fixed!important;
    overflow-y: auto;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.45);
}

.side-menu-header
{

    height: 128px;
    background-size: cover;
    background-color: #14148C;
    /*    Amber-700*/
}
.side-menu-content
{
    margin-top: 128px;
}

.side-menu::-webkit-scrollbar {
    width: 0em;
}

.side-menu-list-active, 
side-menu-list-active:hover 
{
    color: #FFAF05!important;
    /*    Amber-500*/
}

.side-menu-list
{
    color: #9E9E9E;
    /*    Grey-500*/
}

.side-menu-list:hover
{
    color: #FFAF05;
    /*    Amber-500*/
}

.tree-leaf-head 
{
    left: 0!important;
}



/*Sdie Menu Popup Navigation*/

#side-nav
{
    background: #f4f4f4 none repeat scroll 0 0;
    border-right: 1px solid rgba(0, 0, 0, 0.14);
    bottom: 0;
    display: block;
    left: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    color: #424242;
    /*    Grey-800*/
}

.side-nav-wrapper
{
    min-height: 100%;
    padding-bottom: 96px;
    position: relative;
    display: block;
}

.side-menu-nav li:hover
{
    background-color: #EEEEEE;
    /*    Grey-200*/
}

.side-menu-nav a
{
    padding: 10px;
    display: block;
}

.side-menu-nav hr
{
    margin:0!important;
}




.menuLogin,
.menuLogin2,
.menuHome,
.menuDashboard,
.menuPersonalData,
.menuBankAccount,
.menuChangePassword,
.menuChangeUsername,
.menuPostboxInbox,
.menuPostboxDocument,
.menuReporting,
.menuPostboxTransaction,
.menuAccountOverview,
.menuContact,
.menuAcquisition,
.menuAcquisition2,
.menuFaq,
.menuContractOverview,
.menuContractAdd,
.menuContractAccountSelect,
.menuDeliveryState,
.menuConsumptionHistory,
.menuMeterReading,
.menuMeterReadingHistory,
.menuInvoiceOverview,
.menuInvoiceOverviewCheck,
.menuInvoiceDeliveryMethod,
.menuPaymentPlan,
.menuProductChange,
.menuMoveIn,
.menuMoveOut,
.menuMeterProfile,
.menuInvoiceSimulation,
.menuLogout,
.menuGasAcquisition,
.menuEnergyAcquisition,
.menuMeterReadingDownload,
.menuExcelUpload,
.menuAdministrationFaq,
.menuLanguageAdministration,
.menuPortalUserOverview,
.menuContractCancel,
.menuCorrespondence,
.menuContractTariffOverview,
.menuMailbox,
.menuClientRecommendation,
.menuGasConsumptionCalculator,
.menuNewsChannel,
.menuDeliveryPlace
{
    padding: 3px 0 5px 35px;
    background-position-y: 0px;
    width: calc(100% - 15px)!important;
    position: relative;
    left: 0.9375rem;
    padding: 3px 0 5px 35px!important;
}


treecontrol li .tree-label 
{
    cursor: pointer;
    display: inline;
    width: 100%;
}





/* Fix invoice Overvier Inline Icons */
.nli-inline-icon
{
    margin-right: 8px; 
    position: absolute;
}

.nli-inline-text
{
    word-wrap: break-word;
    display: inline-block; 
    width: calc(100% - 20px);  
    padding-left: 20px;
}





/* END NLI Anpassung */


.labelFloatRight 
{
    float: right;
}

.labelFloatLeft 
{
    float: left;
}


div.noBorder fieldset {
    border: 0px;
    padding-left: 0;
}




fieldset {
    margin: 0 0 1.125rem!important;
}




/* Footer Style */


.footer-style
{
    border-top:solid 5px #14148C; 
    background-color: #424242;
    padding-top: 30px;
    /*    Amber-700, Grey-900*/
}

.footer-small-style
{
    padding: 15px; 
    background-color: #FFAF05;
    /*    Grey-900*/
}

.footer-style a, 
.footer-small-style a,
nli-registration a,
nli-login a,
.product a
{
    color: #395C8F!important;
    /*    Amber-700*/
}

nli-registration a {
    text-decoration: underline!important; 
}

.footer-style a:hover, 
.footer-small-style a:hover,
nli-registration a:hover,
nli-login a:hover,
.product a:hover
{
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-decoration: underline;
    /*    Amber-900*/
}


/* Sticky Footer */

.site {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.site-header,
.site-footer {
    flex: none;
}

.site-content {
    flex: 1 0 auto;
    padding: 0;
    width: 100%;
}
.site-content::after {
    content: '\00a0'; /*   */
    display: block;
    margin-top: 0;
    height: 0px;
    visibility: hidden;
}



.fa-stack
{
    vertical-align: inherit;
}

/* hide the attach icon */

.fa-paperclip:before {
    content: ""!important;
}



.search-icon, .customIcon
{
    padding: 0.25rem 0.25rem 0;
    font-size: 1.375rem;
    color: #03A9F4;
    /*    Light-Blue-500*/
}

.unitContainer{
    display: flex;
    justify-content: flex-start;
    padding: unset;
}

.unitLabel
{
    float: right;
    padding:0.5rem 15px 0 0;
}


.state-min-width
{
    min-width: 60px;
}

.paddingLeft-20
{
    padding-left: 20px;
}

.paddingRight-20
{
    padding-right: 20px;
}


.myRow
{
    margin: 0 auto;
    width: 100%;
    min-height: 100%;
}


.tableHeaderRight
{
    text-align: right;
}



/*#bs-example-navbar-collapse-1 ul li .active
{
    color: #00468E!important;
    border-bottom: solid;
}*/











/* ==========================================================================
NLI First Level Components
========================================================================== */


/* NLI-Span */

.nli-span
{
    margin: 0;
}

/* NLI-Input ======== Button */

.nli-button input[type="button"] 
{
    background: #fff;
    line-height: 25px;
    padding: 0 10px;
    border: 1px solid rgb(200, 200, 200);
    width: 100%;
}

.nli-button input[type="button"]:hover 
{
    background-color: #EEEEEE;
}

.nli-number-input .spinner
{
    float: right;
    width: 37px;
    height: 37px;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgb(200, 200, 200);
    border-left: 0;
}

/* NLI-Input Number */
.nli-number-input .spinner .up,
.nli-number-input .spinner .down 
{
    overflow: hidden;
    border: 0;
    text-align: center;
}

.nli-number-input .spinner input 
{
    height: 17px;
    line-height: 17px;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.nli-number-input .spinner .up:hover,
.nli-number-input .spinner .down:hover {
    background: rgba(200, 200, 200, 0.2);
}

.nli-number-input .spinner .up {
    background: rgb(255, 255, 255);
    font-size: 0.8em;
}

.nli-number-input .spinner .down {
    background: rgb(255, 255, 255);
    font-size: 0.8em;
    border: 0;
    border-top: 1px solid rgba(200, 200, 200, 0.7);
}

.nli-number-input .number-input {
    text-align: left;
}


/* NLI-Date */
.nli-date 
{
    height: 37px;
    margin: 0 0 10px;
}

.nli-date .base 
{
    position: relative;
    z-index: 98;
}

.nli-date .base .nli-button 
{
    border-color: -moz-use-text-color -moz-use-text-color #ccc;
    border-left: medium none;
    border-right: medium none;
    border-top: medium none;
    border-style: none none solid;
    border-width: medium medium 1px;
    float: right;
    height: 37px;
    width: 37px;
}

.calendar-icon
{
    background-image: url(../imgs/calendar-icon.svg)!important;
}

.nli-date .base .nli-text-input 
{
    width: 100%;
    padding-right: 37px;
}

.nli-date .base .nli-button input 
{
    font-weight: bold;
}

.nli-date .base .nli-button input:hover 
{
    background-color: #EEEEEE;
}

.nli-date .nli-date-wrapper-5-weeks {
    position: absolute;
    border: 1px solid rgb(200, 200, 200);
    background: rgb(255, 255, 255);
    box-shadow: 0 0 15px rgba(150, 150, 150, 0.7);
    overflow: hidden;
    height: 260px;
    width: 245px;
    z-index: 10000;
    margin-top: -15px;
    margin-left: 0px;
}
.nli-date .nli-date-wrapper-6-weeks {
    position: absolute;
    border: 1px solid rgb(200, 200, 200);
    background: rgb(255, 255, 255);
    box-shadow: 0 0 15px rgba(150, 150, 150, 0.7);
    overflow: hidden;
    height: 290px;
    width: 245px!important;
    z-index: 10000;
    margin-top: -15px;
    margin-left: 0px;
}

.nli-date .nli-date-wrapper .nav 
{
    text-align: center;
    width: 243px;
    height: 45px;
    background-color: #FFAF05;
}

.nli-date .nli-date-wrapper .nav .prev_month 
{
    float: left;
    position: relative;
    left: 2px;
    top: 2px;
    width: 37px;
    height: 37px;
    background-image: url(../imgs/arrow-left-icon.svg);
    border: none;
    border-radius: 37px;
    background-color: #FFAF05;
}

.nli-date .nli-date-wrapper .nav .prev_month:hover 
{
    background-color: #6cd4ff;
}

.nli-date .nli-date-wrapper .nav .curr_month 
{
    line-height: 45px;
    top: 2px;
    color: #FFFFFF;
    font-weight: bold;
}

.nli-date .nli-date-wrapper .nav .next_month 
{
    float: right;
    position: relative;
    right: 2px;
    top: 2px;
    width: 37px;
    height: 37px;
    background-image: url(../imgs/arrow-right-icon.svg);
    border: none;
    border-radius: 37px;
    background-color: #FFAF05;
}

.nli-date .nli-date-wrapper .nav .next_month:hover 
{
    background-color: #6cd4ff;
}

.nli-date .nli-date-wrapper table 
{
    margin: 5px auto;
    border: none!important;
}

.nli-date .nli-date-wrapper table thead th 
{
    text-align: center;
}

.nli-date .nli-date-wrapper table thead tr th, .nli-date .nli-date-wrapper table thead tr td
{
    padding: 0.25rem!important;
}

.nli-date .nli-date-wrapper table tr th, table tr td, .nli-date .nli-date-wrapper table tr th, table tr td
{
    padding: 0.25rem!important;
}

.nli-date .nli-date-wrapper table tbody tr td.day div 
{
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 5px;
    cursor: pointer;
}

.nli-date .nli-date-wrapper table tbody tr td.day div:hover 
{
    background-color: #6cd4ff;
}

.nli-date .nli-date-wrapper table tbody tr td div.today 
{
    background-color: #FFF;
    color: #FFAF05;
    font-weight: bold;
}

.nli-date .nli-date-wrapper table tbody tr td div.selected 
{
    background-color: #FFAF05;
    color: #FFFFFF;
}

.nli-date .nli-date-wrapper table tbody tr td div.outside_month 
{
    color: rgb(150, 150, 150);
}


/* NLI-Email */

.nli-email-input input 
{
    border: 1px solid rgb(200, 200, 200);
    line-height: 25px;
    padding: 0 5px;
}

.nli-email-input input[disabled] 
{
    background: rgb(235, 235, 235);
}

.nli-email-input input:focus 
{
    background: rgb(255, 255, 255);
}

.nli-icon, .nli-faq-question, .nli-faq-answer
{
    display: inline;
}

.nli-faq-answer label
{
    padding-left: 20px;
}


/* NLI Text Input */

.nli-text-input input 
{
    border: 1px solid rgb(200, 200, 200);
    line-height: 1.5em;
    padding: 0 5px;
    background-color: transparent;
}

.nli-text-input input[disabled] 
{
    background: rgb(235, 235, 235);
}


input[type="file"], input[type="checkbox"], input[type="radio"], select 
{
    margin: 0 0 0!important;
}


/* Text Input Bottom Bars  */

.bar
{ 
    position:relative; 
    display:block; 
}

.bar:before, .bar:after 
{
    content:'';
    height:2px; 
    width:0;
    bottom:15px; 
    position:absolute;
    background:#FFAF05; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}

.bar:before 
{
    left:50%;
}

.bar:after 
{
    right:50%; 
}

/* active state */

input:focus ~ .bar:before, 
input:focus ~ .bar:after, 
textarea:focus ~ .bar:before, 
textarea:focus ~ .bar:after 
{
    width:50%;
}


/*  NLI File Uploader   */

nli-file-uploader .file-name-input
{
    height: 39px; 
    border: 1px solid #EEE;
}


/* NLI-Dropdown */

.nli-dropdown 
{
    height: 37px;
    margin: 0 0 1em;
}

.nli-dropdown .nli-dropdown-base 
{
    position: relative;
    background-color: transparent;
}

.nli-dropdown .nli-dropdown-base .nli-text-input
{
    width: 100%;
    padding-right: 37px;
}

.nli-dropdown .nli-dropdown-base .nli-button 
{
    border-color: -moz-use-text-color -moz-use-text-color #ccc;
    border-left: medium none;
    border-right: medium none;
    border-top: medium none;
    border-style: none none solid;
    border-width: medium medium 1px;
    float: right;
    height: 37px;
    width: 37px;
}

.nli-dropdown .nli-dropdown-base .nli-button input 
{
    font-weight: bold;
    background-color: transparent;
}

.nli-dropdown .nli-dropdown-base .nli-button input:hover, 
.nli-dropdown .nli-dropdown-base .nli-button input:focus 
{
    background-color: #EEEEEE;
}

.dropdown-icon
{
    background-image: url(../imgs/dropdown-icon.svg)!important;
}

.dropdown-button
{
    width: 37px; 
    height: 37px; 
    border: 1px solid #0078a0;
    border-left: none;
}

.dropdown-button:hover
{
    background-color: #EEEEEE;
}

.nli-dropdown .nli-dropdown-list-wrapper 
{
    position: absolute;
    border: 1px solid rgb(200, 200, 200);
    z-index: 10000;
    background: rgb(255, 255, 255);
    box-shadow: 0 0 15px rgba(150, 150, 150, 0.7);
    overflow: hidden;
    margin-top: -15px;
    color: #222;
    max-height: 300px;
    overflow-y: auto;
}

.nli-dropdown .nli-dropdown-list-wrapper .nli-dropdown-list 
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.nli-dropdown .nli-dropdown-list-wrapper .nli-dropdown-list li 
{
    height: 37px;
    line-height: 37px;
    cursor: pointer;
    vertical-align: middle;
    padding-right: -5px;
    padding-left: 5px;
    font-size: 0.875rem;
}

.nli-dropdown .nli-dropdown-list-wrapper .nli-dropdown-list li:hover 
{
    background: rgb(235, 235, 235);
}

.nli-dropdown .nli-dropdown-list-wrapper .nli-dropdown-list li.selected 
{
    background: rgb(220, 220, 220);
}

.nli-switch-contract-account .nli-dropdown .nli-dropdown-base .nli-text-input input
{
    color: #FFF!important;
    border-bottom: none!important;
}

.nli-switch-contract-account .nli-dropdown .nli-dropdown-base .nli-button
{
    border-bottom: none!important;
}

.nli-switch-contract-account .nli-dropdown .nli-dropdown-base .nli-button:hover
{
    background-color: transparent;
}

.nli-switch-contract-account .nli-dropdown-base .dropdown-icon
{
    background-image: url(../imgs/dropdown-icon-white.svg)!important;
}

.nli-switch-contract-account .selected
{
    color: #444444!important;
}

/* NLI Password-input */
.nli-password-input input 
{
    border: 1px solid rgb(200, 200, 200);
    line-height: 25px;
    padding: 0 5px;
}

.nli-password-input input[disabled] 
{
    background: rgb(235, 235, 235);
}

.nli-password-input input:focus 
{
    background: rgb(255, 255, 255);
}


/* NLI-Textarea */
.nli-textarea textarea 
{
    border: 1px solid rgb(200, 200, 200);
    line-height: 25px;
    padding: 0 5px;
    background-color: transparent;
    height: 110px!important;
}

.nli-textarea textarea:focus 
{
    background-color: transparent;
}

.nli-textarea textarea[disabled] 
{
    background: rgb(235, 235, 235)
}


/* NLI-Slider */

.nli-slider 
{
    border: 1px solid #ddd;
    display: block;
    height: 2px;
    margin: 23px 0;
    padding: 0;
    position: relative;
}

.nli-slider 
{
    background: #fafafa;
}

.nli-slider .slider-handle:after 
{
    box-sizing: border-box;
}

.nli-slider .slider-handle 
{
    background-color: #14148C;
    border-color: #14148C;
    border-radius: 20px;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    position: absolute;
    top: -10px;
    width: 20px;
    z-index: 1;
}

.nli-slider .slider-handle:hover:not([disabled]) 
{
    transform: scale(1.2);
}

.nli-slider .slider-handle:active:not([disabled]) 
{
    transform: scale(1.5);
}

.nli-slider .slider-active-segment 
{
    background: none repeat scroll 0 0 #14148C;
    display: inline-block;
    height: 2px;
    position: absolute;
    top: -1px;
}


/* NLI-Radio-Group */

.nli-radio-group 
{
    padding: 0.375rem 0;
}

.nli-radio-group legend 
{

}

.nli-radio-group span 
{
    display: block;
}

.nli-radio-group span label 
{
    /*display: inline!important;*/
    top: -3px;
    position: relative;
}

.nli-radio-group span field[type="radio"] 
{

}

.nli-radio-group input[type="radio"] 
{
    clip: rect(0px 0px 0px 0px);
    position: absolute;
}

.nli-radio-group input[type="radio"]:focus + label 
{
    outline: 0px dotted black;
}

.nli-radio-group input[type="radio"] + label 
{
    background: url("../imgs/radio.svg") no-repeat scroll 0 0 transparent;
    padding-left: 20px;
    margin-left: 0rem!important;
}

.nli-radio-group input[type="radio"]:checked + label 
{
    background: url("../imgs/radio-selected.svg") no-repeat scroll 0 0 transparent;
}


/* NLI-Checkbox-Group */

.nli-checkbox-group 
{
    padding: 0.375rem 0;
}

.nli-checkbox-group span 
{
    display: block;
}

.nli-checkbox-group span label 
{
    display: inline!important;
    top: -3px;
    position: relative;
}


.nli-checkbox-group input[type="checkbox"] 
{
    clip: rect(0px 0px 0px 0px);
    position: absolute;
}

.nli-checkbox-group input[type="checkbox"]:focus + label
{
    outline: 0px dotted black;
}

.nli-checkbox-group input[type="checkbox"] + label
{
    background: url("../imgs/checkbox.svg") no-repeat scroll 0 0 transparent;
    padding-left: 20px;
    margin-left: 0rem!important;
}

.nli-checkbox-group input[type="checkbox"]:checked + label {
    background: url("../imgs/checkbox-checked.svg") no-repeat scroll 0 0 transparent;
}



/* NLI-Data-Table */

.nli-data-table .nli-data-table-row  
{
    display: block;
}

.nli-data-table .nli-data-table-row .nli-data-table-col  
{
    display: inline-block;
    width: 100px;
}

/* NLI-Bar-Chart */
.nli-bar-chart 
{

}

/* SVG - FORMATTING */
.nli-bar-chart svg 
{

}

.nli-bar-chart svg g text 
{
    fill: rgb(0, 0, 0);
}

.nli-bar-chart svg g.axis g.tick line 
{
    fill: rgb(0, 0, 0);
    stroke-width: 5px;
}

.nli-bar-chart svg g.axis g.tick text 
{
    fill: rgb(0, 0, 0);
    font-size: 11px;
}

.nli-bar-chart svg g.axis path.domain 
{
    fill: none;
    stroke: rgb(0, 0, 0);
    stroke-width: 2px;
}












/* ==========================================================================
NLI Second Level Components
========================================================================== */


/* NLI-Rate-Calculator */
.nli-rate-calculator {}

.nli-rate-calculator .base {}

.nli-rate-calculator .base .pictograms_row {}

.nli-rate-calculator .base .pictograms_row .picto {}

.nli-rate-calculator .base .pictograms_row .picto.active {}

.nli-rate-calculator .base .nli-slider {}

.nli-rate-calculator .base .nli-number-input input {}

.nli-rate-calculator .base .consumption_unit_label {}



/* NLI-Areacode-City-Form */
.nli-areacode-city-form {}

.nli-areacode-city-form  .nli-number-input 
{
    display: inline;
    float: left;
}

.nli-areacode-city-form .nli-number-input input 
{
    width: 45px;
}

.nli-areacode-city-form  .nli-text-input 
{
    display: inline;
    float: left;
    margin-left: 10px;
}

.nli-areacode-city-form .nli-text-input input {}




















/* ==========================================================================
Override Foundation Style
========================================================================== */

.row 
{
    max-width: 82.5rem!important;
}


.tabs dd > a, .tabs .tab-title > a 
{
    padding: 0.25rem!important;
}


h1, h2, h3, h4, h5, h6 
{
    margin-top: 0rem!important;
}


button, .button 
{
    padding: 0.625rem 0 !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    margin-bottom: 0!important;
    background-color: #ebebeb!important;
    border-color: #ebebeb!important;
    color: #444;
}

button, .button:active 
{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}

.login-button
{
    color:#FFF!important;
}

button.success, 
.button.success, 
.login-button,
.raised
{
    background-color: #FFFFFF!important;
    border-color: #FFFFFF!important;
    font-weight: 600;
    color: #000000 !important;
}

button.success:hover, 
.button.success:hover, 
.login-button:hover,
.raised:hover
{
    background-color: #f7a600!important;
    border-color: #f7a600!important;
    color: #FFFFFF !important;
}

button.success[disabled]:hover,
.button.success[disabled]:hover, 
.login-button[disabled]:hover
{
    background-color: #f7a600!important;
    border-color: #f7a600!important;
    color: #FFFFFF !important;
}

button.success:focus, 
.button.success:focus, 
.login-button:focus,
.raised:focus
{
    background-color: #f7a600!important;
    border-color: #f7a600!important;
    color: #FFFFFF !important;
}

button.secondary, 
.button.secondary,
button.secondary, 
.button.secondary 
{
    font-weight: 600;
}

button.secondary:hover, 
.button.secondary:hover,
button.secondary:focus, 
.button.secondary:focus  
{
    background-color: #b9b9b9!important;
    border-color: #b9b9b9!important;
}


button.flat,
.button.flat
{
    padding: 0.625rem 1rem !important;
    margin-bottom: 0!important;
    background-color: transparent!important;
    border-color: transparent!important;
    box-shadow: none!important;
    color: #FFA000;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 3px;
}

button.flat:hover,
button.flat:focus,
.button.flat:hover,
.button.flat:focus
{
    background-color: rgba(255,160,0, 0.12)!important;
}

button.flat-secondary,
.button.flat-secondary
{
    padding: 0.625rem 1rem !important;
    margin-bottom: 0!important;
    background-color: transparent!important;
    border-color: transparent!important;
    box-shadow: none!important;
    color: rgba(0, 0, 0, 1);
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 3px;
}

button.flat-secondary:hover,
button.flat-secondary:focus,
.button.flat-secondary:hover,
.button.flat-secondary:focus
{
    background-color: rgba(0, 0, 0, 0.12)!important;
}


/* Input

input[type="text"][disabled], 
input[type="text"][readonly], 
fieldset[disabled] input[type="text"], 
input[type="password"][disabled], 
input[type="password"][readonly], 
fieldset[disabled] input[type="password"], 
input[type="date"][disabled], 
input[type="date"][readonly], 
fieldset[disabled] input[type="date"], 
input[type="datetime"][disabled], 
input[type="datetime"][readonly], 
fieldset[disabled] input[type="datetime"], 
input[type="datetime-local"][disabled], 
input[type="datetime-local"][readonly], 
fieldset[disabled] input[type="datetime-local"], 
input[type="month"][disabled], 
input[type="month"][readonly], 
fieldset[disabled] input[type="month"], 
input[type="week"][disabled], 
input[type="week"][readonly], 
fieldset[disabled] input[type="week"], 
input[type="email"][disabled], input[type="email"][readonly], 
fieldset[disabled] input[type="email"], 
input[type="number"][disabled], 
input[type="number"][readonly], 
fieldset[disabled] input[type="number"], 
input[type="search"][disabled], 
input[type="search"][readonly], 
fieldset[disabled] input[type="search"], 
input[type="tel"][disabled], 
input[type="tel"][readonly], 
fieldset[disabled] input[type="tel"], 
input[type="time"][disabled], 
input[type="time"][readonly], 
fieldset[disabled] input[type="time"], 
input[type="url"][disabled], 
input[type="url"][readonly], 
fieldset[disabled] input[type="url"], 
input[type="color"][disabled], 
input[type="color"][readonly], 
fieldset[disabled] input[type="color"], 
textarea[disabled], 
textarea[readonly], fieldset[disabled] textarea
{
    background-color: #FFF!important;
}*/

input[type="text"], 
input[type="password"], 
input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="month"], 
input[type="week"], 
input[type="email"], 
input[type="number"], 
input[type="search"], 
input[type="tel"], 
input[type="time"], 
input[type="url"], 
input[type="color"], 
textarea
{
    border-left: medium none !important;
    border-right: medium none !important;
    border-top: medium none !important;
    box-shadow: none!important;
    padding: 0.5rem 0 0.5rem 0;
}


/* Columns NO Padding */
.columns-no-padding-right {
    padding-right: 0;
    padding-left: 0.9375rem;
    position: relative;

    float: left;
}

.columns-no-padding-left {
    padding-left: 0;
    padding-right: 0.9375rem;
    position: relative;

}

.columns-no-padding {
    padding-left: 0;
    padding-right: 0;
    position: relative;
    width: 100%;
}


/* ==========================================================================
NLI Module Style
========================================================================== */


/* ============= Login Registration ============= */

#registrationTabs a
{
    border-bottom: solid 4px transparent;
}

#registrationTabs .active a
{
    background-color: #f7a600;
    border-bottom: 1px dotted rgba(255,255,255,.6)!important;
    color: #FFFFFF;
}

#registrationTabs a h5
{
    color: #777777;
}

#registrationTabs .active a h5
{
    color: #f7a600;
}

#registrationTabs a:hover {
    background-color: #f7a600;
    border-bottom: 1px dotted rgba(255,255,255,.6)!important;
    color: #FFFFFF;
}

#registrationTabs a {
    background-color: #FFF;
}



/* ============= Acquisition ============= */

.tariffName
{
    font-size: 1.375em;
}

.gasCaculator
{
    float: left;
    margin-left:0.9375em;
    height: 50px;
    overflow: hidden;
}

.gasCaculator img:hover
{
    cursor: pointer;
}



div#imgsEnergyConsumption, div#imgsGasConsumption 
{
    height: 50px;
    overflow: hidden;
}

div#imgsEnergyConsumption img, div#imgsGasConsumption img
{
    cursor: pointer;
}

.gray-scale, .grayscale
{
    position: relative;
    top: -50px;
}

.tarif-gas-label
{
    padding-top: 20px;
    text-align: center;
}


/* ============= Payment Plan ============= */

.payMentTableHeader
{
    font-size: 1rem;
    color: #222;
    font-weight: bold;
    padding: 0.9375rem!important;
    background-color: #EEE;
}

.paymentTableHeaderRight
{
    text-align: right;
}

#categoryPlans table tr td
{
    padding: 0.625rem 0.9375rem!important;
}

.widgetPaymentPlanLeftDiv {
    border-top: 1px solid #CACACA;
    border-right: 1px solid #CACACA;
}

.widgetPaymentPlanRightDiv {
    border-top: 1px solid #CACACA;
    border-left: 1px solid #CACACA;
}

.widgetPaymentPlanMiddleDiv {
    border-top: 1px solid #CACACA;
}




/* ============= Customer Data ============= */


.customerDataRadioGrupPadding 
{
    padding: 0.1625rem 0;
}

.customerDataBankAccountLabelBottom 
{
    bottom: 18px;
}

.customerDataBankAccountInfoBottom 
{
    bottom: 12px;
}

.customerDataPersonalInfoLabel 
{
    bottom: 6px;
}

.customerDataPersonalInfoInput 
{
    bottom: 3px;
}

.customerDataBankAccountView 
{
    top: 4px;
}

.customerDataCustomerContactLabel 
{
    bottom: 10px;
}

.customerDataCustomerContactInput 
{
    bottom : 7px;
}

.customerDataCustomerFaxInput 
{
    bottom : 9px;
}




/* ============= Postbox Inbox ============= */

.widgetPostboxInboxLeftDiv {
    border-top: 1px solid #CACACA;
    border-left: 1px solid #CACACA;
}

.widgetPostboxInboxRightDiv {
    border-top: 1px solid #CACACA;
    border-left: 1px solid #CACACA;
    border-right: 1px solid #CACACA;
}

.widgetPostBoxInboxButton {
    top: 12px;
}


/* ============= Faq ============= */


.faq-label-padding
{
    padding: 0.5rem 0 0 0;
}














/* ==========================================================================
Landingpage Style Only
========================================================================== */


/* Adjust Landingpage login popup */

#myModal .panelWhiteBg, #myModal .panel-white-bg
{
    margin-left: 25%!important;
}

.block-image
{
    position: relative; 
    left: 0;
    right: 0; 
    top: 0;
}

.module-header
{
    height: 60px;
    margin-top: 40px;
}

/* Display 1 */
.module-header span
{
    font-size: 1.5rem;
    color: #FFF!important;
}


.nav-logo
{
    display: block;
    height: 50px;
    margin: 39px auto;
    vertical-align: middle;
}

.navbar-nav > li
{
    float: left!important;
}

.nav-wrap ul
{
    margin: 50px 15px 0px 0;
    padding: 10px 0 0 0;
}

/* Landingpage Buttons Styles */

.btn-transparent 
{
    background: transparent;
    border: 3px solid #fff;
    padding: 15px 30px;
    font-size: 14px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #fff;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-transparent:hover,
.btn-transparent:focus,
.btn-transparent:active
{
    background: #fff;
    color: #0d0d0d;
    text-decoration: none;
}

.btn-transparent-small
{
    background: transparent;
    border: 3px solid #fff;
    padding: 5px 30px;
    font-size: 14px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #fff;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-transparent-small:hover,
.btn-transparent-small:focus,
.btn-transparent-small:active 
{
    background: #fff;
    color: #0d0d0d;
    text-decoration: none;
}

.btn-light 
{
    background: #fff;
    border: 3px solid #fff;
    padding: 15px 30px;
    font-size: 14px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #0d0d0d;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active 
{
    background: transparent;
    color: #fff;
    text-decoration: none;
}

.btn-light-small
{
    background: #fff;
    border: 3px solid #fff;
    padding: 5px 30px;
    font-size: 14px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #0d0d0d;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-light-small:hover,
.btn-light-small:focus,
.btn-light-small:active 
{
    background: transparent;
    color: #fff;
    text-decoration: none;
}

.btn-block 
{
    background: #24242a;
    padding: 15px 0;
    font-size: 16px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #fff;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 3px solid #24242a;
}

.btn-block:hover,
.btn-block:focus,
.btn-block:active 
{
    background: #fff;
    color: #0d0d0d;
    text-decoration: none;
}

.product .header2
{
    margin-bottom: 0!important;
}

.dark-bg
{
    background: #24242a;
}

.light-bg 
{
    background: #fff;
}


.container
{
    margin-right:auto;
    margin-left:auto
}

.navbar-default 
{
    background: rgba(13, 13, 13, 0.6);
    margin-bottom: 0;
    border: none;
}
.navbar-default .navbar-header 
{
    width: 28%;
    padding-left: 35px;
}
.navbar-default .nav-wrap 
{
    width: 50%;
}

.nav > li > a
{
    display: block;
    position: relative;
}

.navbar-default .nav > li > a 
{
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 15px 10px 15px;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus,
.navbar-default .nav > li > a:active 
{
    color: #FFF;
}
.navbar-default .social-media 
{
    float: right;
    padding: 0 15px;
}

.navbar-default .social-media i 
{
    font-size: 22px;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover 
{
    background: transparent;
    color: #FFF;
    border-bottom: 4px solid;
}

.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse
{
    padding-right:0;
    padding-left:0
}

.navigation-container
{
    margin-top: 50px;
}

.navbar-fixed-top
{
    position:fixed;
    right:0;
    left:0;
    z-index:1004;
    min-height: 64px;
}

.top-nav-collapse .nav-wrap ul
{
    margin: 30px 15px 0px 0;
}

.top-nav-collapse .navbar-brand
{
    padding: 0;
}

.navbar-brand
{
    float:left;
}

.top-nav-collapse .navbar-brand > img
{
    margin-top: 13px;
}

.navbar-brand > img
{
    display: block;
    transform: scale(1.8);
    margin-top: 28px;
    transition: all 0.3s ease-in-out 0s;
}


.top-nav-collapse 
{
    background: #24242a;
    transition: all 0.3s ease-in-out 0s;
}

.top-nav-collapse .navbar-brand 
{
    height: auto;
}
.top-nav-collapse .navbar-brand img 
{
    transform: scale(1);
}
.top-nav-collapse .nav > li > a 
{
    padding: 5px 15px;
}



/* Portal Slider */
#portal-slider 
{
    overflow: hidden;
}

#portal-slider .item 
{
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 600px;
}

#portal-slider .item .caption1 
{
    position: absolute;
    top: 20%;
    left: 2%;
    right: 2%;
    text-align: left;
    z-index: 15;
}

#portal-slider .item .caption2 
{
    position: absolute;
    top: 20%;
    left: 2%;
    right: 2%;
    text-align: right;
    z-index: 15;
}

#portal-slider .item .caption3 
{
    position: absolute;
    top: 20%;
    left: 2%;
    right: 2%;
    text-align: left;
    z-index: 15;
}

#portal-slider .item .caption h1 
{
    margin-top: 40px;
}

#portal-slider .item .caption h1 span 
{
    font-weight: 700;
}

#portal-slider .item .caption h6 
{
    color: #fff;
    margin: 0;
}

#portal-slider .owl-pagination 
{
    position: absolute;
    display: block;
    text-align: center;
    width: 100%;
    bottom: 5%;
}

#portal-slider .owl-pagination .owl-page.active span 
{
    background: #fff;
}

#portal-slider .owl-pagination .owl-page span 
{
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    opacity: 1;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#portal-slider .owl-buttons div 
{
    background: #fff;
    font-size: 24px;
    color: #a3a3a3;
    opacity: 1;
}

#portal-slider .owl-buttons .owl-prev 
{
    left: -60px;
}

#portal-slider .owl-buttons .owl-next 
{
    right: -60px;
}

#portal-slider .owl-buttons .owl-prev,
#portal-slider .owl-buttons .owl-next 
{
    position: absolute;
    background: #fff;
    top: 50%;
    height: 51px;
    width: 51px;
    line-height: 45px;
    border-radius: 0;
    border: 1px solid #fff;
    z-index: 20;
    text-align: center;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#portal-slider:hover .owl-prev 
{
    left: -5px;
}

#portal-slider:hover .owl-next 
{
    right: -5px;
}

.slider-h1
{
    background: rgba(0,0,0, 0.3);
    padding: 10px;
    text-align: left;
    display: inline-block;
    border-radius: 5px;
}

.slider-h2
{
    background: rgba(0,0,0, 0.3);
    padding: 10px;
    text-align: left;
    display: inline-block;
    border-radius: 5px;
}




/* Landingpange Kontakt Module in Footer */

.landingPage nli-contact .header2
{
    color:#FFF;
    font-size: 1rem;
}

.landingPage nli-contact .nli-dropdown input
{
    color: #FFF;
}

.landingPage nli-contact .nli-button input[type="button"]
{
    background: transparent!important;
}

.landingPage nli-contact .dropdown-icon
{
    background-image: url(../imgs/dropdown-icon-white.svg)!important;
}

.landingPage nli-contact label
{
    color:#FFF;
    font-size: 1rem;
}

.landingPage nli-contact textarea, 
.landingPage nli-contact input 
{
    color: #fff!important;
}

.landingPage nli-contact input, 
.landingPage nli-contact input[type="text"],
.landingPage nli-contact input[type="text"]:focus
{
    background-color: transparent;
}

.landingPage nli-contact .errorText 
{
    float: none; 
    color: #ff4444;
    font-size: 0.875rem;
    position: relative;
    top: -18px;
}

.landingPage nli-contact .calendar-icon 
{
    background-image: url(../imgs/calendar-icon-white.svg)!important;
}

.landingPage nli-contact .success
{
    margin: 10px 0;
}

.landingPage nli-contact input[type="text"][disabled]
{
    display: none;
}

.contact-textarea textarea, 
.contact-textinput input
{
    color: #fff!important;
}








/* ==========================================================================
Resize Scrollbar for Chrome
========================================================================== */

@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
        -moz-appearance: none !important;
        background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
        -moz-appearance: none !important;
        background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
        -moz-appearance: none !important;
        background-color: rgb(255,0,0) !important;
    }

    scrollbarbutton {
        display: none !important;
    }

    scrollbar[orient="vertical"] {
        width: 5px !important;
    }
}


.customHeader {
    font-size: 2rem;
    position: absolute;
    top: 10px;
    z-index: 999999;
}






/* ==========================================================================
Media Queries Style
========================================================================== */

/* min Width 1440px */

@media only screen and (min-width: 1441px)
{
    .nli-large-3
    {
        width: 400px;
    }

    .nli-large-offset-3
    {
        margin-left: 400px!important;
    }

    .nli-large-9
    {

        width: -moz-calc(100% - 400px);
        width: -webkit-calc(100% - 400px);
        width: -o-calc(100% - 400px);
        width: calc(100% - 400px);
    }
}


/* min Width 1025px and max Width */

@media only screen and (min-width: 1025px) and (max-width: 1440px)
{
    .nli-large-3
    {
        width: 320px;
    }

    .nli-large-offset-3
    {
        margin-left: 320px!important;
    }

    .nli-large-9
    {
        width: -moz-calc(100% - 320px);
        width: -webkit-calc(100% - 320px);
        width: -o-calc(100% - 320px);
        width: calc(100% - 320px);
    }
}


/* Width between 640px and 1024px */

@media (min-width: 641px) and (max-width: 1024px) 
{
    /*-- Navigation --*/

    .navbar-default {
        background: #24242a;
    }

    .navbar-default .navbar-header 
    {
        width: 100%;
        padding-right: 0;
    }

    .navbar-default .navbar-header .navbar-brand 
    {
        height: auto;
    }

    .navbar-default .navbar-header .navbar-brand img 
    {
        width: 52px;
        height: 52px;
    }

    .navbar-default .nav-wrap 
    {
        width: 100%;
    }

    .navbar-default .navbar-toggle 
    {
        padding-top: 25px;
        padding-bottom: 25px;
        border: none;
    }

    .navbar-default .navbar-toggle .icon-bar 
    {
        background-color: #fff;
    }

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus,
    .navbar-default .navbar-toggle:active 
    {
        background: none;
    }

    .navbar-default .navbar-left,
    .navbar-default .navbar-right 
    {
        float: none !important;
    }
    .navbar-default .navbar-toggle 
    {
        display: block;
    }
    .navbar-default .navbar-collapse 
    {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .navbar-default .navbar-collapse.collapse 
    {
        display: none !important;
    }

    .navbar-default .navbar-nav 
    {
        float: none !important;
        margin-top: 7.5px;
    }

    .navbar-default .navbar-nav > li 
    {
        float: none;
    }

    .navbar-default .collapse.in 
    {
        display: block !important;
    }

    /*-- Sliders --*/

    .slider-h1 
    {
        font-size: 46px;
        text-align: center;
        margin: 15px;
    }

    #portal-slider h6 
    {
        font-size: 16px;
    }

    #portal-slider .btn 
    {
        margin-top: 20px;
    }

    #portal-slider .owl-buttons 
    {
        display: none;
    }

    /*-- Services --*/
    #services h3 {
        font-size: 22px;
    }

    /*-- section styles --*/
    section h2 {
        font-size: 32px;
    }

    #testimonials h5 
    {
        font-size: 18px;
    }

    .portal-header
    {
        height: 64px;
        position: fixed;
    }

    .site-content
    {
        /*        margin-top: 64px;*/
    }

    .contract-description
    {
        margin-top: 64px;
    }

    .contract-description-height
    {
        height: 64px;
        min-height: 64px;
    }

    .menu-icon
    {
        top: 17px;
    }

    .menu-icon-at-small 
    {
        top: 17px;
    }

    .module-header 
    {
        height: 0;
        padding-top: 0; 
        position: relative;
        left: 40px;
        top: -20px;
    }

    .module-header 
    {
        height: 0;
        padding-top: 0; 
        position: relative;
        left: 40px;
        top: -13px;
    }

    .module-header span
    {
        font-size: 1.5rem;
    }

    .menu-tree ul li a
    {
        max-width: 245px;
    }

    .header-row 
    {
        height: 0px;
    }

    .module-header {
        height: 60px;
        margin-top: 28px;
    }

}


/* max Width 640px */

@media (max-width: 640px) 
{
    body
    {
        background-color: #FFF!important;
        overflow-x: hidden;
    }

    .panel-white-bg, .panelWhiteBg 
    {
        padding-left: 0!important;
        padding-right: 0!important;
        box-shadow: none!important;
    }

    .module-header span
    {
        font-size: 1.5rem;
        color: #FFF;
    }

    .bg-amber-100
    {
        background-color: #FFF;
    }

    #portal-slider .item 
    {
        height: 400px;
    }

    .module-header 
    {
        height: 0;
        padding-top: 0; 
        position: relative;
        left: 40px;
        top: -20px;
    }

    .portal-header
    {
        height: 48px;
        background-image: none;
        position: fixed;
    }

    .menu-icon-at-small 
    {
        top: 10px;
    }

    .slider-h1 
    {
        font-size: 28px;
        text-align: center;
        margin: 5px;
    }

    #portal-slider .item .caption 
    {
        top: 20%;
    }

    .btn-light-small
    {
        margin-bottom: 0.9375rem;
        display: inline-block;
    }

    .site-content
    {
        /*        margin-top: 48px;*/
    }

    .contract-description
    {
        margin-top: 48px;
    }

    .contract-description-height
    {
        height:  48px;
        min-height:  48px;
    }


    .module-header
    {
        height: 60px;
        margin-top: 0px;
    }

    .dashboard-column {
        padding-left: 0px;
        padding-right: 0px;
    }

}
/* max Width 480px */

@media (max-width: 480px) {
    .slider-h1 {
        font-size: 22px;
        text-align: center;
        margin: 5px;
    }

    #portal-slider .item .caption {
        top: 20%;
    }
}



/* Print visibility */
@media print 
{
    *{  background: transparent !important; box-shadow: none !important; color: #000000 !important; text-shadow: none !important; }
    body,label,a,span,span a{ font: 10pt Arial,"TheSerif700",Chicago,Charcoal,serif;   color: #000;   background: #FFF;   padding: 0;   margin: 0;   line-height: 1;   }
    .row { margin: 0 auto; max-width: 62.5em; width: 100%; }
    .column,.columns {  padding-left: 0.9375em;  padding-right: 0.9375em;  width: 100%;  float: left; }
    .panelWhiteBg, .panelYellow {    border:none;     box-shadow: none;    }
    .panelWhiteBg:hover, .panelYellow:hover {   border:none!important;     box-shadow: none!important; }
    button.success, .button.success {display: none }
    button.secondary, .button.secondary{display: none}
    #registrationTabs {display: none;}
    #panel2{display: none}
    .module-header-panel  { padding-left: 8pt!important;}
    .module-header  { left:0px;}
    .circleSucceeded {color:#EEE!important;}

    .break-before { page-break-before: always; }
    .break-after { page-break-after: always; }
    .helpText {display: none}

    .large-1 { width: 8.33333%;}
    .large-2 { width: 16.66667%; }
    .large-3 { width: 25%; }
    .large-4 { width: 33.33333%; }
    .large-5 { width: 41.66667%; }
    .large-6 { width: 50%; }
    .large-7 { width: 58.33333%;}
    .large-8 { width: 66.66667%; }
    .large-9 { width: 75%; }
    .large-10 { width: 83.33333%; }
    .large-11 { width: 91.66667%; }
    .large-12 { width: 100%; }
    .print-full-widht { width: 100%; }

    .display1, .display1 span,
    .headline, .header1,
    .headline span, .header1 span,
    .title, .header2,
    .title span, .header2 span,
    .subheading, .header3,
    .sbbheading span, .header3 span,
    .body2,.header4,
    .body2 span, .header4 span,
    .body1, div,
    .caption{font-family: 'Roboto',  'Arial', 'Helvetica', sans-serif!important; font-weight: normal; font-style: normal;}

    table.show-for-print {  display: table !important; }
    thead.show-for-print { display: table-header-group !important; }
    tbody.show-for-print { display: table-row-group !important; }
    tr.show-for-print { display: table-row !important; }
    td.show-for-print { display: table-cell !important; }
    th.show-for-print { display: table-cell !important; }

    a,a:visited {  text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after {   content: " (" attr(title) ")"; }

    .ir a:after,
    a[href^="javascript:"]:after, a[href^="#"]:after {  content: ""; }

    pre, blockquote  {  border: 1px solid #999999;   page-break-inside: avoid;   }

    thead {  display: table-header-group;   }
    tr,img {  page-break-inside: avoid; }
    img {  max-width: 100% !important; }

    h2,h3 {  page-break-after: avoid; }
    .hide-on-print { display: none !important; }
    .print-only {  display: block !important; }
    .show-for-print {  display: inherit !important; }
    .show-for-print {  display: block; }
    .hide-for-print {  display: none; }
    .notPrint, .not-print {display: none}
    table.show-for-print {    display: table !important; }
    thead.show-for-print {   display: table-header-group !important; }
    tbody.show-for-print {   display: table-row-group !important; }
    tr.show-for-print {   display: table-row !important; }
    td.show-for-print {   display: table-cell !important; }
    th.show-for-print {    display: table-cell !important; } 

    @page { margin: .5cm;    }
    p,h2,h3 {  orphans: 3;widows: 3;   }


}

treecontrol.menu-tree li.tree-collapsed i.tree-branch-head
{
    padding: 14px 10px;
    margin-left: 10px;
    width: 16px;
    height: 16px;
    background: url(../imgs/leaf-right.svg) no-repeat;
    position: relative;
    top: 2px;
}

treecontrol.menu-tree li.tree-expanded i.tree-branch-head
{
    padding: 12px 10px;
    margin-left: 10px;
    width: 16px; height: 16px;
    background: url("../imgs/leaf-down.svg") no-repeat;
}

.edit-visiable, .editVisiable
{
    display: none!important;
}

.editVisiableTrue {
    display: none !important;
}

.dashboard-container {
    margin-top: 20px!important;
}

.nli-switch-contract-account {
    visibility: hidden;
}

/*#contactBox {
    width:210px;
    height:280px;
    float:left;
    margin-left:5px;
    margin-top: 32px;
    background-repeat: repeat;
    padding: 5px;
    border-radius: 5px;
    color:#586b72;

    border: 1px solid #D8D7D5;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 2px #D8D7D5;
}*/

.tablesaw td {
    padding: 0.25em 0.75em 0.25em 0.75em!important;
}

.contactBox 
{
    position: absolute;
    right: 0;
    z-index: 2;
}

#contactBox.ng-hide {
    display: none!important;
}

#contactBoxSmall.ng-hide {
    display: none!important;
} 

.row.minHeight {
    min-height: 95px;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px
}

.pagination>li {
    display: inline
}

.pagination>li>a,.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd
}

.pagination>li:first-child>a,.pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.pagination>li:last-child>a,.pagination>li:last-child>span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover {
    color: #23527c;
    background-color: #FFAF05;
    border-color: #ddd
}

.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #FFD664;
    border-color: #FFD664
}

.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd
}

.pagination-lg>li>a,.pagination-lg>li>span {
    padding: 10px 16px;
    font-size: 18px
}

.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
}

.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

.pagination-sm>li>a,.pagination-sm>li>span {
    padding: 5px 10px;
    font-size: 12px
}

.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}

.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.pager {
    padding-left: 0;
    margin: 20px 0;
    text-align: center;
    list-style: none
}

.pager li {
    display: inline
}

.pager li>a,.pager li>span {
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 15px
}

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

.pager .next>a,.pager .next>span {
    float: right
}

.pager .previous>a,.pager .previous>span {
    float: left
}

.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span {
    color: #777;
    cursor: not-allowed;
    background-color: #fff
}



@media only screen and (device-width: 768px) {
    /* For general iPad layouts */
    .ipadMargin{
        margin-top: 64px!important;
    }

}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
    .ipadMargin{
        margin-top: 64px!important;
    }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
    .ipadMargin{
        margin-top: 64px!important;
    }
}

.tableDate {
    width: 150px;
}

.consumptionMarginBottom table {
    margin-bottom: 4em!important;
}

#loaderDiv {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;
    background-color: rgba(255, 255, 255, 0.8);
}

.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -35px; /* -1 * image width / 2 */
    margin-top: -35px; /* -1 * image height / 2 */
    display: block;
}
.hidden{display:none !important}

.googleReCaptchaErrorSpanRight{
    float: right;
    padding-right: 0.9375rem;
}

.cursor-help{
    cursor: help;
}
.tooltip span{
    color: #ffffff;
}
.tooltip{
    min-width: 250px;
}

.padding-unset{
    padding: unset;
}

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

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

.nli-checkbox-margin{
    margin-top: -1rem
}

.info-icon{
    position: relative;
    display: inline-block;
    width: 19px;
    height: 19px;
    background: url("/swn/imgs/acq/info-icon-power-01.png") transparent center center no-repeat scroll;
    cursor: pointer;
}