// rename the file extension to .css and sere it from your static folder
// or place the content into ui_template trgeted to site head.


:root{
    --base-color:#d3d3d3;
    --shadow-dark:0, 0, 0;
    --shadow-light:255, 255, 255;
    --widgetColor:#cccccc;
    --widgetColorAccent:#b6b6b6;
    --accentColor:#6a87a3;
    
    --h1:10px;
    --v1:10px;
    --h2:-8px;
    --v2:-8px;
    --blur1:16px;
    --blur2:12px;

    --shadowColor: var(--h1) var(--v1) var(--blur1) 0 rgba(var(--shadow-dark), 0.3),
    var(--h2) var(--v2) var(--blur2) 0 rgba(var(--shadow-light), 0.25);

    --text-color:#5a8f86;
    --nr-dashboard-widgetTextColor:#5a8f86;
}

body.md-default-theme, body, html.md-default-theme, html {
    color: var(--text-color);
    
}
.masonry-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    min-height:unset !important;
}
body.nr-dashboard-theme {
    background:var(--base-color)
}
body.nr-dashboard-theme md-toolbar {
   background:var(--base-color);
    color: var(--text-color);
}
body.nr-dashboard-theme md-sidenav {
    color: var(--text-color);
    background:var(--base-color)
}
body.nr-dashboard-theme md-sidenav div.md-list-item-inner {
    color: var(--text-color);
    background-color: transparent;
}
.nr-dashboard-theme ui-card-panel {
    background:linear-gradient(-45deg, rgba(var(--shadow-dark),0.2), rgba(var(--shadow-light),0.3));
    border-radius: 1em;
    box-shadow: var(--shadowColor);
    border:none;

}
body.nr-dashboard-theme md-content md-card {
    background:transparent;
    color: var(--text-color);
}
.nr-dashboard-theme .nr-dashboard-template {
    background:transparent;
}
.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
    color:var(--text-color);
  
}

.md-button{
    border-radius:0.6em;
    color: var(--text-color);
}
.nr-dashboard-theme .nr-dashboard-button .md-button {
    background-color: var(--widgetColor);
    color:var(--text-color);
}
.md-button.md-raised:not([disabled]) {
    box-shadow: 2px 4px 7px 0 rgb(0 0 0 / 26%);
}
.md-button:not([disabled]).md-fab:active, .md-button:not([disabled]).md-raised:active {
    box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 30%);
}
.nr-dashboard-theme .nr-dashboard-button .md-button:hover {
    background-color: var(--widgetColor);
}
.nr-dashboard-theme .nr-dashboard-button .md-button:focus {
    background-color: var(--widgetColor);
}
md-list-item.md-no-proxy.md-button, md-list-item .md-no-style.md-button {
    box-shadow: 2px 4px 7px 0 rgb(0 0 0 / 26%);
}
.nr-dashboard-theme .nr-dashboard-numeric .value {
    background:unset;
    color:var(--text-color);
}
.nr-dashboard-theme .nr-dashboard-form {
    color:var(--text-color);
}
.nr-dashboard-theme .nr-dashboard-form-button {
    background-color: var(--widgetColor);
    color:var(--text-color);
}

.nr-dashboard-theme .nr-dashboard-form-button:hover {
    background-color: var(--widgetColor) !important;
}
.nr-dashboard-theme .nr-dashboard-form-button:focus {
    background-color: var(--widgetColor) !important;
}
.nr-dashboard-theme md-input-container.md-default-theme .md-input, md-input-container .md-input {
     color:var(--text-color);
    border-color: var(--widgetColor) !important;
}
.nr-dashboard-theme .nr-dashboard-switch md-switch .md-thumb {
    background-color: var(--widgetColor);

}
.nr-dashboard-theme .nr-dashboard-switch md-switch .md-bar {
    background-color: rgb(var(--widgetColor));
    box-shadow: inset  var(--shadowColor);
}
.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-bar {
    background-color: var(--widgetColorAccent);
     box-shadow: 0 0 10px 0px var(--widgetColor);
}
.nr-dashboard-theme .nr-dashboard-switch md-switch.md-checked .md-thumb {
    background-color: var(--accentColor);
    box-shadow: 0 0 10px 0px rgba(var(--shadow-dark),25%);
}
.nr-dashboard-theme .nr-dashboard-slider .md-track {
    background-color: var(--accentColor);
}
md-slider .md-thumb {
    box-shadow: var(--shadowColor)
}

.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {
    background-color: var(--accentColor);
    border-color: var(--accentColor);
}

.nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {
    background-color: rgb(255 255 255 / 20%);
    color:var(--text-color);
    border-radius:0.8em;
}

.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {
    margin-top: -3px;
    border-color: #eeeeee7a;
    
}
.nr-dashboard-theme .md-select-menu-container {
    max-height: 85%;
    overflow-y: auto;
    border: none;
    border-radius: 0.8em;
}

.nr-dashboard-theme md-select-menu md-option {
    background-color: var(--widgetColor);
   
    height: 29px;
    border-radius: 0.6em;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 2px;
    box-shadow: 0 0 6px 6px #24202133;
    transition: 0.3s;
}
.nr-dashboard-theme md-select-menu md-option[selected] {
    color: var(--base-color) !important;
    background-color: var(--accentColor) !important;
}
.nr-dashboard-theme md-select-menu md-option:nth-child(even) {
    background-color: var(--widgetColorAccent);
}
.nr-dashboard-theme md-select-menu md-option:last-child {
   margin-bottom: 8px;
}
.nr-dashboard-theme md-select-menu md-option:hover {
    background-color: var(--widgetColorAccent) !important;
    padding-left: 26px;
}
.nr-dashboard-theme md-select-menu md-option > .md-ripple-container{
     border-radius: 14px;
}
.nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value, .nr-dashboard-theme .nr-dashboard-dropdown md-select .md-select-value.md-select-placeholder {
    color: var(--text-color);
    border-color: var(--text-color);
    border-bottom-width: 1px;
    padding: 0px 2px;
}