/* ==========================================================================
   1. DESIGN TOKENS & VARIABLES
   ========================================================================== */

:root {
    /* -- Spacing -- */
    --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);

    /* -- Typography -- */
    --font-heading:    1.2rem;
    --font-subheading: 1rem;
    --font-base:       16px;
    --font-sm:         13px;
    --font-xs:         12px;
    --font-2xs:        12px;

    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* -- Radii -- */
    --radius-card:    4px;
    --radius-control: 4px;

    color-scheme: dark;

    /* -- Dark theme design tokens (default) -- */
    --bg-body:              #1e1e1e;
    --bg-card:              #282828;
    --bg-card-header:       #222;
    --bg-card-header-hover: #242424;
    --bg-card-row-hover:    #2e2e2e;
    --bg-badge:             #2a2a2a;
    --bg-input:             #2a2a2a;
    --controls-bg:          rgba(18, 18, 18, 0.92);

    --border:               #333;
    --border-card:          #333;
    --border-strong:        #666;

    --text-primary:         #ddd;
    --text-body:            #ddd;
    --text-secondary:       #ddd;
    --text-muted:           #aaa;

    --accent:               #44b3e2;
    --accent-hover:         #44b3e2;
    --accent-bg:            rgba(68, 179, 226, 0.1);
    --accent-bg-hover:      rgba(68, 179, 226, 0.22);
    --accent-row-hover:     rgba(68, 179, 226, 0.05);
    --accent-border:        rgba(68, 179, 226, 0.3);
    --focus-ring:           rgba(68, 179, 226, 0.2);

    --bg-vis-graph-color:   rgba(255,255,255,0);

    --color-cat-default: #44b3e2;

    color-scheme: light;
    --bg-body: whitesmoke;
    --bg-card: #fff; 
    --bg-card-header: #ddd; 
    --bg-card-header-hover: #e0e0e0;
    --bg-card-row-hover: #f5f5f5;
    --bg-badge: #efefef;
    --bg-input: #fafafa; 
    --controls-bg: rgba(234, 234, 234, 0.92);

    --border: #e0e0e0; 
    --border-card: #e0e0e0; 
    --border-strong: #c0c0c0;

    --text-primary: #000; 
    --text-body: #000; 
    --text-secondary: #555; 
    --text-muted: #666;

    --accent: #2a8fc7; 
    --accent-hover: #2a8fc7;
    --accent-bg: rgba(42, 143, 199, 0.10);
    --accent-bg-hover: rgba(42, 143, 199, 0.20); 
    --accent-row-hover: rgba(42, 143, 199, 0.05);
    --accent-border: rgba(42, 143, 199, 0.35); 
    --focus-ring: rgba(42, 143, 199, 0.2);

    --bg-vis-graph-color: rgba(255,255,255,0);
}

/* ------------------------------ */
/* 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;
}

/* ==========================================================================
   3. BASE & RESET
   ========================================================================== */

html,body{
    height: initial!important;
    --bg-vis-graph-color: rgba(255,255,255,0);
}

:fullscreen, ::backdrop {
    background-color: var(--bg-vis-graph-color);
}

/* -- Gravatar UI -- */
.img-circle { border-radius: 50%; overflow: hidden; }
.gravatar a.grav-container {
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    overflow: hidden; padding: 0; width: 2.8rem; height: 2.8rem; font-size: 1.5rem;
    transition: background-color 0.1s ease-out;
}
.gravatar a.grav-container:hover { background: var(--bg-menu-top-hover); }
.no-gravatar a.grav-container {
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    overflow: hidden; padding: 0; width: 2.8rem; height: 2.8rem; font-size: 1.5rem;
    transition: background-color 0.1s ease-out;
    background: rgba(255,255,255,0.1);
}
.no-gravatar a.grav-container:hover { background: var(--bg-menu-top-hover); }
a.grav-container img.grav {
    max-height: 1.2em; border: 2px solid rgba(255,255,255,0.4); border-radius: 50%;
}
a.grav-container:hover img.grav { border-color: rgba(255,255,255,0.7); }



#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{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;
}