html,body{height: initial!important}

#wrap{
  min-height: calc(100vh - 5.4rem)!important;
  margin-top: 0;
}
/* animate both elements at same speed to get shift effect */
#wrap,#footer {
  transition: margin .3s ease-out;
}
.fullwidth.collapsed #wrap,
.fullwidth.collapsed #footer{
    margin-left: 0!important;
}
#wrap main.content-container{
  height: 100%;
  margin-top: 2.7rem;
  margin-left: 15rem;
  margin-bottom: 0;
  margin-right: 0;
  padding-bottom: 2rem!important;
  box-sizing: border-box;
}
body.collapsed #wrap main.content-container{
  margin-left: auto;
  margin-right: 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;
}

/* -------------------------------------------------------------------
   Control affix
--------------------------------------------------------------------*/

.controls {
  transition: all .2s ease-out
}
.controls.affix:before {
  content: '';
  opacity: 0.85;
  width: 100%;
  display: block;
  position: fixed;
  z-index: -1;
  height: 2.5rem;
  left: 0;
  margin-top: -.3rem;
}
.controls.affix > * {
  z-index: 2;
}
.controls.affix {
  z-index: 2;
  top: 2.5rem;
  padding-top: .5rem;
  padding-bottom: .25rem;
}
.controls.affix-top{ position:absolute; }

@media only screen and (max-width:979px) {
  .controls.affix{ top:0 }
}

/* -------------------------------------------------------------------
   Utilities
--------------------------------------------------------------------*/

/* text colours */
.text-black{color: black !important}
.text-white{color: white !important}
.text-light {color: #aaa !important;}
.text-grey {color: #999 !important;}
.text-dark {color: #333 !important;}
.text-primary{color: #0699fa !important}
.text-warning{color: #dccc1f !important}
.text-success{color: #89ae65 !important}
.text-secondary{color: #6c757d !important}
.text-tertiary{color: #b7aa1 f!important}
.text-quaternary {color: #fb7b50 !important}
.text-danger{color: #d52e2e !important}
.text-exporting{color: #2ed52e !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;
}
/*-------------------------------------*/

/* override topnav styling in tabs */
#emoncms-navbar .nav.nav-tabs > li > a {
    color: #999 !important;
}
#emoncms-navbar .nav.nav-tabs > li.active > a {
    color: #efefef !important;
}
#emoncms-navbar .nav.nav-tabs > li > a:hover {
    color: #fff !important;
}

/* 
 * #sidebar above #wrap on narrow screens
 */
 body {
   padding: 0;
   margin: 0;
 }
 @media only screen and (min-width:870px) {
  .fullwidth.has-sidebar #wrap,
  .fullwidth.has-sidebar #footer {
    /*margin-left: 15rem !important;*/
  }
  .fullwidth.has-sidebar.collapsed #wrap,
  .fullwidth.has-sidebar.collapsed #footer {
    margin-left: 0px !important;
  }
  #sidebar {
    position: fixed;
  }
}

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
    }
}