@import 'def';
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800');

$cardpadding: 20px 25px;

html {
    height:100%;
}

body {
    font-family:'Montserrat', sans-serif!important;
    padding:0px;
    @include themify($themes) {
        font-size:themed('bodysize');
    }
    font-weight:400;
    height:100%;
    overflow-x: hidden;
}
.bg {
    position: fixed;
    width:100%;
    height:100%;
    z-index:0;
    @include themify($themes) {
        background-color:themed('bodybg');
      }

}

.wrapper {
    @include themify($themes) {
        background-color:themed('bodybg');
        color: themed('txtcolor1');
        height:100%;
      }
}

.container-fluid {
    padding-right: 40px;
    padding-left: 40px;
    
    > .row {
    margin-top:25px; 
    }
}

h1,h2,h3,h4,h5,h6,p,a,ul,li{
    font-family:'Montserrat', sans-serif!important;
}

h1 {
    @include themify($themes) {
        font-size: themed('h1');
        color: themed('txtcolor1');
    }
}

h2 {
    @include themify($themes) {
        font-size: themed('h2');
        color: themed('txtcolor1');
    }
}

h1, h2 {
    font-weight:400;
}

p {
    @include themify($themes) {
        font-size: themed('p');
    }
    font-weight: 300;
}

a {
    &:hover {
        text-decoration: none;
    }
}

.color-power {
    @include themify($themes) {
        color:themed('barvalue')!important;
    }
}

.color-wind {
    @include themify($themes) {
     color:themed('service')!important;
    }
}

.color-alert {
    @include themify($themes) {
        color:themed('alert')!important;
    }
}

.color-warning {
    @include themify($themes) {
        color:themed('warning')!important;
    }
}

.color-service {
    @include themify($themes) {
        color:themed('service')!important;
    }
}

.color-comm {
    @include themify($themes) {
        color:themed('comm')!important;
    }
}

.color-100 {
    @include themify($themes) {
        color:themed('txtcolor100')!important;
    }
}

.bg-alert {
    @include themify($themes) {
        background-color:themed('alert')!important;
    }
}

.bg-warning {
    @include themify($themes) {
        background-color:themed('themed('warning')')!important;
    }
}

.bg-service {
    @include themify($themes) {
        background-color:themed('service')!important;
    }
}

.bg-green {
    @include themify($themes) {
        background-color:themed('grassgreen')!important;
    }
}

.bg-blue {
    @include themify($themes) {
        background-color:themed('windblue')!important;
    }
}

.bg-neutral {
    @include themify($themes) {
        background-color:themed('neutral')!important;
    }
}

/* CARDS */

.scadacard {
    border-radius: 10px;
    border:none;
    padding: $cardpadding;
    position:relative;
    overflow: hidden;
    transition: all 0.4s;

    @include themify($themes) {
        background-color: themed('cardbg');
    }

    &.level1 {
        box-shadow: 0px 0px 10px rgba(0,0,0,0.05);

    }

    &.level2 {
        box-shadow: 0px 0px 10px rgba(0,0,0,0.2);

    }

    &.nopadding {
        padding:0;
    }
}    

#monitorwrapper {
    overflow-y:visible;
    margin-bottom:30px;
}

#mapmonitorwrapper {
    padding:0;
}

 /* Custom Chrome Scroll bars */

 ::-webkit-scrollbar {
    width: 8px;
    background-color: rgba(0,0,0,0);
    -webkit-border-radius: 100px;
  }
  ::-webkit-scrollbar:hover {
    background-color: rgba(0, 0, 0, 0.09);
  }
  
  ::-webkit-scrollbar-thumb:vertical {
    background: rgba(0,0,0,0.5);
    -webkit-border-radius: 100px;
  }
  ::-webkit-scrollbar-thumb:vertical:active {
    background: rgba(0,0,0,0.61); 
    -webkit-border-radius: 100px;
  }