/*Default Styles*/

body {
    padding: 0px
}



#bws-table {
    height: auto;
}


.grayout {
    opacity: 0.1; /* Real browsers */
    filter: alpha(opacity = 10); /* MSIE */
    pointer-events:none;
}

.dropdown-menu.reveal  {
    display: block;
}

.dtgroup {
    padding-left: 15px;
    padding-right: 15px;
    vertical-align: middle;

}

.bborder {
    border-color: white;
    border-width: thin;
    border-style: solid;
}

.center {
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
}

.right {
    text-align: right;
    vertical-align: middle;
    display: flex;
    justify-content: space-between;
    align-items: right;
}

abbr[title] {
    text-decoration: none;
}

.left {
    text-align: left;
    vertical-align: middle;
    display: flex;
    justify-content: left;
    align-items: left;
}

.bws-mapbtn-hide {
    display: none;
}

.bws-mapbtn-show {
    display: show;
}

.commodityIconGas {
    width: 50px;
    height: 50px;
    color: #128EB8;
}

.commodityIconPower {
    width: 50px;
    height: 50px;
    color: orange;
}

.sitesSelect {
    width: 60px;
    height: 30px;
    color: white;
    padding: 0px;
    margin: 0px;
}
/*Login*/

.sitesSelectRed{
    width: 50px;
    height: 30px;
    color: #b8244a;
}

.filterTitle {
    margin:0px;
    padding:0px;
}



/*Loader*/
.loader {
        width: 40px;
        height: 40px;
        background-color: #b8244a;
      
        margin: 100px auto;
        -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
        animation: sk-rotateplane 1.2s infinite ease-in-out;
      }

      @-webkit-keyframes sk-rotateplane {
        0% { -webkit-transform: perspective(120px) }
        50% { -webkit-transform: perspective(120px) rotateY(180deg) }
        100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
      }
      
      @keyframes sk-rotateplane {
        0% { 
          transform: perspective(120px) rotateX(0deg) rotateY(0deg);
          -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
        } 50% { 
          transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
          -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
        } 100% { 
          transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
          -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
    }

/*Logo -Top Page*/

.dark-logo-bws {
    width: 30px;
    height: 30px
}

.dark-logo-bws-text {
    width: 100px;
    height: 19px
}

.bws-hide {
    display: none;
}

.page-wrapper {
    width: calc(100%-240px);
}

.container-fluid {
    width: 100%;
    
}

.bws-dashboard-bread{
    width: 250px;
}

.bws-btn {
    width: auto;
    height: auto;
}

.btn-info, .btn-info-power {
    background-color: #b8244a;
    border-color: #b8244a;
    color: white
}

.btn-info-gas {
    background-color: green;
    border-color: green;
    color: white
}

.btn-info-water {
    background-color: blue;
    border-color: blue;
    color: white
}

.btn-done {
    background-color: green;
    border-color: green;
}

.btn-in:hover{
    background-color: #128EB8
}

#map {
    height: 400px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
  }


.bws-tableau-space {
    width: 100%;
    max-width: 100%;
}

.bws-tableau-spacesub {
    width: 100%;
    height: 100%;
}

/* Set the colour theme */

.bws-title-color {
color: #b8244a;
background-color: #b8244a;
}

#title{
    color: #b8244a;
}

.lstick {
    color: #b8244a;
    background-color: #b8244a;
    }

a {
    color: #b8244a;
}

/*Breadcrumb behaviour*/
.breadcrumb-item+.breadcrumb-item::before {
    content: "\e649";
    font-family: themify;
    color: #ced4da;
    font-size: 11px;
    overflow: hidden;
}

.nav-breadcrumb {
    overflow: hidden;
}

.CommentBox {
    width:400px;
    height:50px;
    background-color: #A12A1E;
    color:White;
    margin:0 auto;
   
}


input[type="text"] {
    /*margin:10px auto;*/
}

input[type="password"] {
    margin:0px auto;
}

/*Chart Defaults*/

.ct-legend {
    position: relative;
    overflow: hidden;
    font-size: 11px;
    margin-bottom: 3px;
}

.ct-legend  li {
    position: relative;
    padding-left: 23px;
    margin-bottom: 3px;
    float: left;
}

.ct-legend     li:before {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    content: '';
    border: 3px solid transparent;
    border-radius: 2px;
}
.ct-legend     li::marker {
    width: 0px;
    height: 0px;
    position: absolute;
    left: 0;
    content: '';
    border: 3px solid transparent;
    border-radius: 2px;
}

.ct-legend  li.inactive:before {
    background: transparent;
}

.ct-legend .ct-legend-inside {
    position: absolute;
    top: 0;
    right: 0;
}


.ct-legend .ct-series-0 {
    padding-left: 30px;
    padding-right: 20px;
    overflow: hidden;
    padding-bottom: 3px;
}

.ct-legend .ct-series-1 {
    padding-left: 30px;
    padding-right: 20px;
    overflow: hidden;
    padding-bottom: 3px;
}

.ct-legend .ct-series-2 {
    padding-left: 30px;
    padding-right: 20px;
    overflow: hidden;
    padding-bottom: 3px;
}

.ct-legend .ct-series-3 {
    padding-left: 30px;
    padding-right: 20px;
    overflow: hidden;
    padding-bottom: 3px;
}

.ct-legend .ct-series-4 {
    padding-left: 30px;
    padding-right: 20px;
    overflow: hidden;
    padding-bottom: 3px;
}

.ct-legend .ct-series-5 {
    padding-left: 30px;
    padding-right: 20px;
    overflow: hidden;
    padding-bottom: 3px;
}

.ct-legend .ct-series-6 {
    padding-left: 30px;
    padding-right: 20px;
    overflow: hidden;
    padding-bottom: 3px;
}

.ct-legend .ct-series-7 {
    padding-left: 30px;
    padding-right: 20px;
    overflow: hidden;
    padding-bottom: 3px;
}


/*Axis Labels*/
/*Data Viwer*/
[data-x-axis]::before {
    content: "Period";
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 0;
    font-size: 11px;
    color: #455a64;
    padding:5px;
}
/*Monthly*/
[data-x-axis-1]::before {
    content: "Month";
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: -20px;
    font-size: 11px;
    color: #455a64;
    padding:5px;
}

[data-x-axis-2]::before {
    content: "Month";
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: -20px;
    font-size: 11px;
    color: #455a64;
    padding:5px;
}

[data-x-axis-3]::before {
    content: "Month";
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: -25px;
    font-size: 11px;
    color: #455a64;
    padding:5px;
}

/*Price*/
[data-y-axis]::after {
    content: "p/kWh";
    position: absolute;
    top: 40%;
    left: -30px;
    font-size: 11px;
    color: #455a64;
    text-align: center;
    transform: rotate(-90deg)translateY(50%);
}

/*Reference Volume - Power*/

[data-y-axis-1P]::after {
    content: "MW";
    position: absolute;
    top: 50%;
    left: -30px;
    font-size: 11px;
    color: #455a64;
    text-align: center;
    transform: rotate(-90deg)translateY(50%);
}

[data-y-axis-1G]::after {
    content: "th/day";
    position: absolute;
    top: 50%;
    left: -30px;
    font-size: 11px;
    color: #455a64;
    text-align: center;
    transform: rotate(-90deg)translateY(50%);
}

/*Spend*/
[data-y-axis-2]::after {
    content: "£";
    position: absolute;
    top: 50%;
    left: -25px;
    font-size: 11px;
    color: #455a64;
    text-align: center;
    transform: rotate(-90deg)translateY(50%);
}

.ct-label {
    color: #455a64;
}

/*Table Styles*/
table{
    overflow-y:scroll;
    overflow-x:visible;
    max-height: 30vh;
    display:block;
    font-size: 10px;
    border-collapse: separate; /* Don't collapse */
 }

 th {

    position: sticky;
    top: 0;
    z-index: 2;
    background-color: white;
    margin-top: 2px ;
  }

 .table-noscroll{      
    display:block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    font-size: 10px;
    overflow: hidden;
 }

.table-whole-page {
    height:calc(100vh - 200px);
    max-height:calc(100vh - 200px);
    
}

.table-sm {
   
    max-height:calc(100vh - 500px);
}



.topbar .filterMenu {
    width:1000px;
    /*height:calc(100vh - 200px);*/
    background-color: white;
 }
 
 select.form-control[multiple], select.form-control[size]{
     height:100px;
     
 }

 .menu-links {
    cursor: pointer;
 }

 .sidebar-nav ul .sidebar-item .sidebar-link {
    padding: 12px 15px;
    display: flex;
    border-radius: 4px;
    white-space: nowrap;
    align-items: center;
    position: relative;
    line-height: 25px;
    font-size: 12px;
    opacity: .6;
    color: #fff;
}

.left-sidebar {
    position: absolute;
    width: 175px;
    height: 100%;
    top: 0;
    padding-top: 70px;
    z-index: 10;
    background: #fff;
    box-shadow: 1px 0 20px rgba(0,0,0,.08);
    transition: .2s ease-in;
}
/*
.navbar-brand {
    width: 150px;
}
*/
.container {
    padding: 0px
}

.page-wrapper>.container-fluid, .page-wrapper>.container-lg, .page-wrapper>.container-md, .page-wrapper>.container-sm, .page-wrapper>.container-xl {
    padding: 15px;
    min-height: calc(100vh - 175px);
}

#main-wrapper[data-layout=vertical][data-sidebartype=full] .page-wrapper {
    margin-left: 175px;
}


#main-wrapper[data-layout=vertical][data-sidebartype=full] .topbar .top-navbar .navbar-header {
    width: 175px;
}

#main-wrapper[data-layout=vertical][data-sidebar-position=fixed][data-sidebartype=full] .topbar .top-navbar .navbar-collapse, #main-wrapper[data-layout=vertical][data-sidebar-position=fixed][data-sidebartype=overlay] .topbar .top-navbar .navbar-collapse {
    margin-left: 175px;
}

.card {
    margin-bottom: 20px;
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}

.bt-switch {
    padding: 0px;
}

.dropdown-divider {
    width:100%
}

option {
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 12px;
    padding: 0px 2px 1px;
    font-size: 11px;
}


.custom-select {
    display: inline-block;
    width: 75%;
    height: calc(1.25em + 0.75rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: .65rem;
    font-weight: 400;
    line-height: 1.5;
    color: #54667a;
    vertical-align: middle;
    background: #fff url(../../assets/images/custom-select.png) no-repeat right 0.75rem center/12px 8px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    appearance: none;
    
    
}

.form-control {
    display: block;
    min-width: 100%;
    height: calc(1.25em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #54667a;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control-1rem {
    font-size: 1rem;
}

.btn {
    font-size: .65rem;
  }

  .selector-box {
      width:100%
  }



  .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
    background: #128EB8;
    color: #fff;
    font-size: 12px;
    
    
    padding-left: 5px;
    padding-right: 5px;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
    color: #fff;
    background:#b8244a;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
}

.bootstrap-switch-container {
    width:100px;
}
/*CSS for better looks and show only on hover*/


/*

  .chartist-tooltip:before {
    position: absolute;
    bottom: -14px;
    left: 50%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    pointer-events: none;
    border-color: rgba(251, 249, 228, 0);
    border-top-color: #383838;
    border-width: 7px;
    margin-left: -8px;
  }
*/

.ct-tooltip {
    position: absolute;
    display: inline-block;
    min-width: 5em;
    padding: 8px 10px;
    background: rgba(83, 39, 49, 0.65);
    color: #fff;
    text-align: center;
    pointer-events: none;
    z-index: 100;
    transition: opacity .2s linear;
}

.textHighlight {
    color: #b8244a;
}

.btn-download {
   widows: 15px;
   height: 15px;
}

.btn-download img {
  width: 45px;
  height: 45px;
  object-fit: contain; /* keeps aspect ratio inside */
}

.btn-contracts {
    widows: 50px;
    height: 30px;
 }
 
 .ti-light-bulb{
     height: 15px;
     width:10px
    }

.input-group {
    padding:21px;
    padding-left:10px;
    padding-right:5px;
    max-width:235px;
}

.topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
    line-height: 70px;
    height: 70px;
    padding: 0 15px;
    font-size: 12px;
}

.ct-savings {
    overflow-y: hidden;
    /*overflow-x: scroll;*/
}

.ct-flex-hedged {
    overflow-y: hidden;
    /*overflow-x: scroll;*/
}




.micrologo {
    width:35px;
    height: 35px;
}

.row {
    margin-right: 0px;
    margin-left: 0px;
}

.feather-chevrons {
    width:15px;
    height:15px;
}

.navPoundIcon {
    width:20px;
    height:20px;
    padding-right: 5px;
    padding-left: 5px;
}

.small-icon {
    width:15px;
    height:15px;
}

.bootstrap-switch {
    font-size: 11px;
}

.form-group {
    margin-bottom: 1px;
}

.heading-filter-area {
    padding-top: 7px;
}

    .container-login100 {
        width: 100%;
        min-height: 100vh;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 35px;
        background: #e9faff;
    }  


.wrap-login100 {
    width: 35%;
    height: 10%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
}


.loginBackground {
    background-image: url('../../assets/images/Businesswise/The-Energy-Centre.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.green {
    background-color: rgb(64, 148, 64);
    border-color: rgb(64, 148, 64);
}



.brown {
    background-color: skyblue;
    border-color: skyblue;
}


.login100-form-btn {
    background-color: #b8244a;
}

/*Chart Total Savings*/
.ct-FMD .ct-series-0 .ct-bar {
    stroke: #b8244a;
    stroke-width: 20px;
}


.ct-FMD .ct-bar:nth-child(5) {
    stroke: green;
}
.ct-FMD .ct-bar:nth-child(4) {
    stroke: grey;
}
.ct-FMD .ct-bar:nth-child(3) {
    stroke: #128EB8;
}
.ct-FMD .ct-bar:nth-child(2) {
    stroke: #b8244a;
}
.ct-FMD .ct-bar:nth-child(1) {
    stroke: black;
}

.user-list {
    cursor:pointer
}

.logoutbutton {
    background-color: Transparent;border: none; color: #fff
}

.leaf{
   /* color : green;*/
}

.noleaf{
    /*color : black;*/
}
#filterIcon
{
    background-color: #b8244a;
    color: white;
}

#filterIcon:hover {
    background-color: #128EB8;
    color: white;
  }

.ti-filter {
    color: white;
    font-size: 20px;
}

.filterArea {
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.caption {
    display: block;
    font-size:12px;
    color: white;
    padding-top:5px;
}

.itemLogo {
    margin-right: 10px;
}
.dateContainer {
    width: 250px;
    font-size:11px
}

.dateContainer2 {
    width: 225px;
    font-size:11px
}

.monthContainer {
    width: 300px;
    font-size:11px
}

.datePicker {

    font-size: 11px;
}

.nopadding {
    padding: 0px
}

/*Login Small Screens*/
@media (max-width: 479px) {
    .container-login100 {
        width: 100%;
        min-height: 100vh;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 0px;
        background-image: url('../../assets/images/Businesswise/The-Energy-Centre.jpeg');
        padding: 5px
    };
}

/*Login Small Screens*/
@media (max-width: 479px) {
    .wrap-login100 {      
        width: 100%;
        height: 100%;
        
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
        -o-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
        -ms-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
    }
}