/*
All Emoncms code is released under the GNU Affero General Public License.
See COPYRIGHT.txt and LICENSE.txt.

---------------------------------------------------------------------
Emoncms - open source energy visualisation
Part of the OpenEnergyMonitor project:
http://openenergymonitor.org

*/


/* ------------------------------ */
/* Colour schemes */
/* ------------------------------ */

.theme-standard, .theme-blue {
  --bg-menu-top: #44b3e2;
  --bg-menu-top-hover: #007eb3;
  --bg-menu-top-active: #209ed3;
  --bg-body-login: #1d8dbc;
  --bg-menu-tr: #1d8dbc;
  --bg-menu-tr-hover: #1d8dbc;
}

.theme-black {
  --bg-menu-top: #555;
  --bg-menu-top-hover: #666;
  --bg-menu-top-active: #444;
  --bg-body-login: #333;
  --bg-menu-tr: #333;
  --bg-menu-tr-hover: #333;
}

.theme-sun {
  --bg-menu-top: #ffbe14;
  --bg-menu-top-hover: #F9D10B;
  --bg-menu-top-active: #f7a90c;
  --bg-body-login: #f7a90c;
  --bg-menu-tr: #f7a90c;
  --bg-menu-tr-hover: #f7a90c;
}

.theme-yellow2 {
  --bg-menu-top: #dfc72d;
  --bg-menu-top-hover: #AFA041;
  --bg-menu-top-active: #C8B328;
  --bg-body-login: #C8B328;
  --bg-menu-tr: #C8B328;
  --bg-menu-tr-hover: #C8B328;
}

.theme-copper {
  --bg-menu-top: #e97b00;
  --bg-menu-top-hover: #FF8600;
  --bg-menu-top-active: #d16e00;
  --bg-body-login: #d16e00;
  --bg-menu-tr: #d16e00;
  --bg-menu-tr-hover: #d16e00;
}

.theme-green {
  --bg-menu-top: #4eaa05;
  --bg-menu-top-hover: #55B806;
  --bg-menu-top-active: #469904;
  --bg-body-login: #469904;
  --bg-menu-tr: #469904;
  --bg-menu-tr-hover: #469904;
}

.sidebar-dark {
  --bg-l2: #333;
  --l2-border: #444;
  --l2-title: #ccc;
  --l2-text: #fff;
  --bg-l2-active:#222;
  --bg-l2-hover:#444;
  --bg-l3:#222;
  --l3-border:#333;
  --l3-text:#999;
  --l3-title: #ccc;
  --l3-text-active:#fff;
  --l3-text-hover:#fff;
}

.sidebar-light {
  --bg-l2: #eaeaea;
  --l2-border: #fff;
  --l2-title: #000;
  --l2-text: #000;
  --bg-l2-active:#ddd;
  --bg-l2-hover:#fff;
  --bg-l3:#f3f3f3;
  --l3-border:#fff;
  --l3-text:#333;
  --l3-title: #333;
  --l3-text-active:#000;
  --l3-text-hover:#000;
}
/* ------------------------------ */


html,body{height: initial!important}

#wrap{
  min-height: calc(100vh - 5.4rem)!important;
  margin-top: 0;
}

#footer {
    transition: margin .3s ease-out;
}

.fullwidth.collapsed #wrap,
.fullwidth.collapsed #footer{
    margin-left: 0!important;
}

.container-fluid { padding: 0px 10px 0px 10px; }

@media (min-width: 768px) {
    .container-fluid { padding: 0px 20px 0px 20px; }
}    
    

#wrap main.content-container{
  height: 100%;
  /*margin-top: 2.7rem;
  margin-left: 15rem;
  margin-bottom: 0;
  margin-right: 0;*/
  margin: 46px auto 0 auto;
  padding-bottom: 2rem!important;
  box-sizing: border-box;
}

body.collapsed #wrap main.content-container{
  margin-left: auto;
  margin-right: auto;
} 

svg.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  vertical-align: -0.15em;
}

/*-------------------------------------*/
/* Previously in emon-blue.css */
/*-------------------------------------*/

.body-login {
    background-color:var(--bg-body-login);
}

#login-form input[type="text"], #login-form input[type="password"] {
    width: 94%;
}

#push, #footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    padding-top: 10px;
}

#footer a {
    color: #77b4d9;
    text-decoration: none;
}

#footer span {
    color: #999;
}

div#account {
    width:250px;
}

/* Used user/profile/profile.php */
.account-item {
    margin-bottom:10px;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.menu-dashboard,.menu-left,.menu-extra,.menu-setup,.menu-right {
    display: inherit !important;
}

/* dashboardeditor */
.scrollable-menu {
    height: auto;
    max-height: 333px;
    overflow-y: auto;
}

.ajax-loader {
    position: absolute;
    top: 0; bottom:0; left: 0; right:0;
    margin: auto;
    background: rgba(255, 255, 255, .8)
        url(ajax-loader.gif)
        center
        no-repeat;
}

.caret {
    border-top-color: #fff !important;
}

.text-larger {
    font-size: larger
}

.expand-all .icon-resize-small {
    display: none
}
.expand-all.in .icon-resize-small {
    display: inline-block
}
.expand-all.in .icon-resize-full {
    display: none
}

/* collapsable groups of items */
.node.accordion {
    line-height: 41px;
}

.node .accordion-toggle {
    background: #ddd;
    height: 41px;
}
.node .accordion-toggle:hover {
    background-color: #e3e3e3;
}

/* dropdown indicator */
.node .has-indicator .icon-indicator {
    opacity: 0.333;
    float: none;
}

.node .select input {margin-top: -1px}
.node .collapse {
    width: 100%;
    transition-duration: 350ms;
    transition-property: all;
    transition-timing-function: ease;
}
.node .collapse > * {
    width: 100%;
    position: relative;
    border-bottom: 1px solid #fff;
    background: #f0f0f0;
}
.node .collapse > *:hover {
    background-color: #f5f5f5;
}
.node .collapse > *:before {
    content: '';
    width: 0px;
    background: #44b3e2;
    height: 100%;
    display: block;
    position: absolute;
    transition: width .2s ease-out;
}
.node .collapse > *:hover:before {
    width: 2px;
}
.node .collapse > *:last-child {
    border-bottom-width: 0
}
.node > * > * ,
.node > * > * > * ,
.node > * > * > .pull-right > * {
    float: left;
    min-height: 1px;
}
.pull-right{float:right!important}
.line-height-expanded{line-height: 2;}
.line-height-normal{line-height: 1.5;}
.cursor-pointer{ cursor: pointer; }

/* input_view interface */
.device-key,
.device-schedule,
.device-configure,
.device-last-updated {
    border-left: 1px solid #eee;
    color: white;
}

.device-key:hover {background-color:#eaeaea;}
.device-configure:hover {background-color:#eaeaea;}
.label-container{padding-top:.6em; display:inline-block; min-width:200px}

/* #table used by device, input, profile, feedlist, schedule view */
#table .accordion {
    margin-bottom: .5em
}

/* Used by dashboard designer */
.controls {
    transition: all .2s ease-out
}
.controls.affix:before {
    content: '';
    background: var(--bg-menu-top-active);
    opacity: 0.90;
    width: 100%;
    display: block;
    position: fixed;
    z-index: -1;
    height: 2.6rem;
    left: 0;
    margin-top: -.3rem;
}
.controls.affix > * {
    z-index: 2
}
.controls.affix {
    z-index: 2;
    top: 2.9rem;
    padding: .3rem 0;
}
.controls.affix-top{position:absolute;}

@media only screen and (max-width:979px) {
    .controls.affix{top:0}
}
@media only screen and (min-width:870px) {
    body{font-size:16px}
}

/*-------------------------------------*/
/* Log windows */
/* used by: admin page, emonhub config */
/* backup, postprocess modules
/*-------------------------------------*/
.log {
    /*width:100%;*/
    height:12rem;
    margin:0px;
    padding:0px;
    
    color:#fff;
    background-color:#300a24;
    overflow: scroll;
    overflow-x: hidden;
    /*font-size:14px;*/
}

.log div {
    padding-left:10px;
    padding-top:10px;
}

/* Used to create log level selector */
#log-level {
    position: absolute;
    right: .2rem;
    bottom: 0;
}
#log-level .dropdown-menu {
    background: 0;
    background: transparent;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    margin: 0;
}
#log-level .dropdown-menu .active {
    font-weight: bold;
}
#log-level .dropdown-menu .btn {
    border: 0;
    border-radius: 0;
    background-image: none;
}
#log-level li:first-child .btn {
    border-radius: .3em .3em 0 0;
}
#log-level li:last-child .btn {
    border-radius: 0 0 .3em .3em;
}

/* Similar to a modal, used for notifications */
/* on the admin and emonhub config pages      */
/* when log level is changed e.g INFO to DEBUG*/
#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}
#snackbar.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/*-------------------------------------*/
/* utilities */
/*-------------------------------------*/

/* text colours */
.text-white{color:white!important}
.text-light {color: #aaa !important;}
.text-primary{color:#0699fa!important}
.text-warning{color:#dccc1f!important}
.text-success{color:#89ae65!important}
.text-secondary{color:#6c757d!important}
.text-tertiary{color:#b7aa1f!important}
.text-quaternary {color: #fb7b50!important}
.text-danger{color:#d52e2e!important}
.text-exporting{color:#2ed52e!important}
.text-dark {color: #333 !important;}

/* colours */
.bg-dark {background: #333 !important;}
.bg-primary {background: #44b3e2 !important;}
.bg-secondary {background: #6c757d !important;}
.bg-success {background: #28a745 !important;}
.bg-danger {background: #dc3545 !important;}
.bg-warning {background: #ffc107 !important;}
.bg-info {background: #17a2b8 !important;}
.bg-light {background: #f8f9fa !important;}
.bg-white {background: #fff !important;}
.bg-transparent {background: transparent !important;}

/* spaces: 
    1 = .25rem
    2 = .5rem
    3 = 1rem
*/
:root{
    --spacer: 1rem;
    --s1: calc(var(--spacer) * .25);
    --s2: calc(var(--spacer) * .5);
    --s3: var(--spacer);
    --s4: calc(var(--spacer) * 1.25);
    --s5: calc(var(--spacer) * 1.5);
    --s6: calc(var(--spacer) * 2);
}
/*-------------------------------------*/
/* @see: bootstrap 4 documentation for examples */
.m-1{padding: var(--s1)}
.m-2{padding: var(--s2)}
.m-3{padding: var(--s3)}
.m-4{padding: var(--s4)}
.m-5{padding: var(--s5)}
.m-6{padding: var(--s6)}
/* remove margins */
.my-0,.mb-0,.m-0{margin-bottom:0!important}
.my-0,.mt-0,.m-0{margin-top:0!important}
.mx-0,.ml-0,.m-0{margin-left:0!important}
.mx-0,.mr-0,.m-0{margin-right:0!important}

/*-------------------------------------*/
/* margin top */
.my-1,.mt-1{margin-top: var(--s1)!important}
.my-2,.mt-2{margin-top: var(--s2)!important}
.my-3,.mt-3{margin-top: var(--s3)!important}
.my-4,.mt-4{margin-top: var(--s4)!important}
.my-5,.mt-5{margin-top: var(--s5)!important}
.my-6,.mt-6{margin-top: var(--s6)!important}

/* margin right */
.mx-1,.mr-1{margin-right: var(--s1)!important}
.mx-2,.mr-2{margin-right: var(--s2)!important}
.mx-3,.mr-3{margin-right: var(--s3)!important}
.mx-4,.mr-4{margin-right: var(--s4)!important}
.mx-5,.mr-5{margin-right: var(--s5)!important}
.mx-6,.mr-6{margin-right: var(--s6)!important}

/* margin bottom */
.my-1,.mb-1{margin-bottom: var(--s1)!important}
.my-2,.mb-2{margin-bottom: var(--s2)!important}
.my-3,.mb-3{margin-bottom: var(--s3)!important}
.my-4,.mb-4{margin-bottom: var(--s4)!important}
.my-5,.mb-5{margin-bottom: var(--s5)!important}
.my-6,.mb-6{margin-bottom: var(--s6)!important}

/* margin left */
.mx-1,.ml-1{margin-left: var(--s1)!important}
.mx-2,.ml-2{margin-left: var(--s2)!important}
.mx-3,.ml-3{margin-left: var(--s3)!important}
.mx-4,.ml-4{margin-left: var(--s4)!important}
.mx-5,.ml-5{margin-left: var(--s5)!important}
.mx-6,.ml-6{margin-left: var(--s6)!important}

/*-------------------------------------*/
.p-1{padding: var(--s1)}
.p-2{padding: var(--s2)}
.p-3{padding: var(--s3)}
.p-4{padding: var(--s4)}
.p-5{padding: var(--s5)}
.p-6{padding: var(--s6)}

/* remove padding */
.py-0,.pb-0,.p-0{padding-bottom:0!important}
.py-0,.pt-0,.p-0{padding-top:0!important}
.px-0,.pl-0,.p-0{padding-left:0!important}
.px-0,.pr-0,.p-0{padding-right:0!important}

/* padding top */
.py-1,.pt-1{padding-top: var(--s1)!important}
.py-2,.pt-2{padding-top: var(--s2)!important}
.py-3,.pt-3{padding-top: var(--s3)!important}
.py-4,.pt-4{padding-top: var(--s4)!important}
.py-5,.pt-5{padding-top: var(--s5)!important}
.py-6,.pt-6{padding-top: var(--s6)!important}

/* padding right */
.px-1,.pr-1{padding-right: var(--s1)!important}
.px-2,.pr-2{padding-right: var(--s2)!important}
.px-3,.pr-3{padding-right: var(--s3)!important}
.px-4,.pr-4{padding-right: var(--s4)!important}
.px-5,.pr-5{padding-right: var(--s5)!important}
.px-6,.pr-6{padding-right: var(--s6)!important}

/* padding bottom */
.py-1,.pb-1{padding-bottom: var(--s1)!important}
.py-2,.pb-2{padding-bottom: var(--s2)!important}
.py-3,.pb-3{padding-bottom: var(--s3)!important}
.py-4,.pb-4{padding-bottom: var(--s4)!important}
.py-5,.pb-5{padding-bottom: var(--s5)!important}
.py-6,.pb-6{padding-bottom: var(--s6)!important}

/* padding left */
.px-1,.pl-1{padding-left: var(--s1)!important}
.px-2,.pl-2{padding-left: var(--s2)!important}
.px-3,.pl-3{padding-left: var(--s3)!important}
.px-4,.pl-4{padding-left: var(--s4)!important}
.px-5,.pl-5{padding-left: var(--s5)!important}
.px-6,.pl-6{padding-left: var(--s6)!important}

.d-none{display:none!important}
.d-block{display:block!important}
.d-inline{display:inline!important}
.d-inline-block{display:inline-block!important}

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

/* "bs4 style" utility styles */
/* flexbox */
.d-flex {
    display: flex !important;
}
.justify-content-between {
    justify-content: space-between !important;
    flex-wrap: wrap;
}
.justify-content-center {
    justify-content: center !important;
}
.justify-content-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
}
.justify-content-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
}
.justify-content-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
}

.align-items-center {
    align-items: center !important;
}
.align-items-end {
    align-items: flex-end !important;
}
.align-items-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
}
.align-self-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
}

.flex-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}
.flex-column {
    flex-direction: column !important;
}
.flex-fill {
    flex: 1 1 auto !important;
}
.flex-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
}
.flex-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
}

/* sizing */
.img-fluid {
    max-width: 100%;
    height: auto;
}
.h-100 {
    height: 100% !important;
}
.w-100 {
    width: 100% !important;
}

/* borders */
.border-top{
    border: 0;
    border-top: 1px solid currentColor;
}
.border-bottom{
    border-bottom: 1px solid rgba(222, 226, 230, .5) !important
}
/* text cut offs */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.color-box {
    margin-right:2px;
    width:20px;
    height:20px;
    display:inline-block;
    border: 2px solid #ddd;
    cursor:pointer;
}

.color-box-active {
    border: 2px solid #000;
}

.color-box:hover {
    border: 2px solid #000;
}

body {
 padding: 0;
 margin: 0;
}

html {
    scroll-behavior: smooth;
}

ul.nav > li > [disabled] {
    opacity: .2!important;
}
.alert .alert-link {
    color: inherit;
    opacity: .8;
    transition: all .2s ease-in-out;
    font-weight: bold;
}
.alert .alert-link:hover {
    opacity: 1;
    color: inherit;
}

/* bs4 style grid 
@todo: upgrade to bs4 if possible
*/
[class*="col-"]{
    position: relative;
    width: 100%;
    margin: 0;
}
.col-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    flex-grow: 0;
    flex-basis: 33.3333%;
    max-width: 33.333333%;
}
.col-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    flex-grow: 0;
    flex-basis: 66.6667%;
    max-width: 66.666667%;
}
.col-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
/* end of grid css */


/** MOBILE FIRST **/
/*-------------------------------------*/

/* 
// Extra small devices (portrait phones, 320px and up)
*/
@media (min-width: 320px) {
    .text-xs-right {
        text-align: right!important;
    }
    .text-xs-center {
        text-align: center!important;
    }
    .d-xs-none{display:none!important}

    .d-xs-inline-block {
        display: inline-block!important;
    }
    .d-xs-inline {
        display: inline!important;
    }
    .justify-content-xs-between {
        justify-content: space-between !important;
        flex-wrap: wrap;
    }
}
/* 
// Small devices (landscape phones, 576px and up)
*/
@media (min-width: 576px) {
    .d-sm-none {
        display: none!important;
    }
    .d-sm-inline-block {
        display: inline-block!important;
    }
    .d-sm-block {
        display: block!important;
    }
    .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        flex-grow: 0;
        flex-basis: 33.3333%;
        max-width: 33.333333%;
    }
    .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        flex-grow: 0;
        flex-basis: 66.6667%;
        max-width: 66.666667%;
    }
    .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
    .justify-content-sm-between {
        justify-content: space-between !important;
        flex-wrap: wrap;
    }
}
/* 
// Medium devices (tablets, 768px and up)
*/
@media (min-width: 768px) {
    .d-md-none {
        display: none!important;
    }
    .d-md-inline-block {
        display: inline-block!important;
    }
    .d-md-flex {
        display: flex !important;
    }
    .pb-md-0{
        padding-bottom: 0!important
    }
    .mb-md-2{
        margin-bottom: var(--s2) !important;
    }

    .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        flex-grow: 0;
        flex-basis: 33.3333%;
        max-width: 33.333333%;
    }
    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        flex-grow: 0;
        flex-basis: 66.6667%;
        max-width: 66.666667%;
    }
    .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
}
/* 
// Large devices (desktops, 992px and up)
*/
@media (min-width: 992px) {
    .mb-lg-3{
        margin-bottom: .3em!important;
    }
    .py-lg-3,.pt-lg-3{
        padding-top: calc(var(--spacer) * .8)
    }
    .py-lg-3,.pb-lg-3{
        padding-bottom: calc(var(--spacer) * .8)
    }
    .d-lg-none{display:none!important}

}
/* 
// Extra large devices (large desktops, 1200px and up)
*/
@media (min-width: 1200px) {
    .d-xl-none{
        display:none!important
    }
}