/* dark theme */

/* 
#ffb300
color:
rgba(255, 179, 0, .26)
rgba(255, 179, 0, .5)
rgb(255, 179, 0)

body:
#222

 */

.mdl-layout__header,
.mdl-mini-footer {
    background-color: black;
    color: rgb(189, 189, 189);
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link, .mdl-navigation__link, .mdl-navigation i {
    color: #bdbdbd;
}

.mdl-layout__header-row .mdl-navigation__link {
    color: rgb(189, 189, 189);
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover {
    background-color: #1f1f1f
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link--current {
    background-color: #1f1f1f;
    color: #fff
}

.mdl-layout__drawer {
    color: #bdbdbd;
}

.mdl-button {
    color: #black;
}

.mdl-button.mdl-button--colored {
    color: rgb(255, 179, 0)
}

.mdl-button--raised.mdl-button--colored, #logOutput span {
    background: rgb(255, 179, 0);
    color: rgb(0,0,0,0.87);
}

.mdl-button--raised.mdl-button--colored:hover {
    background-color: rgb(255, 179, 0)
}

.mdl-button--raised.mdl-button--colored:active {
    background-color: rgb(255, 179, 0)
}

.mdl-button--raised.mdl-button--colored:focus:not(:active) {
    background-color: rgb(255, 179, 0)
}

.mdl-button--raised.mdl-button--colored .mdl-ripple {
    background: rgb(189, 189, 189)
}


/* text inputs */
.mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
    color: rgb(255, 179, 0);
}


.mdl-textfield__input {
    border-bottom: 1px solid rgba(255,255,255, .12);
    color: white;
}

.mdl-textfield__label {
    color: rgba(255,255,255, .26);
}

.mdl-textfield__label:after {
    background-color: rgb(255, 179, 0);
}

.mdl-checkbox__box-outline {
    border: 2px solid rgba(255,255,255, .8);
}

.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid rgb(255, 179, 0)
}

fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline,
.mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
    border: 2px solid rgba(255, 255, 255, .26);
}

.mdl-checkbox.is-focused .mdl-checkbox__focus-helper {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .1);
    background-color: rgba(255, 255, 255, .1)
}

.mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper {
    box-shadow: 0 0 0 8px rgba(255, 179, 0, .26);
    background-color: rgba(255, 179, 0, .26)
}

.mdl-checkbox__label {
    color:rgba(255,255,255,0.8)
}

.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: rgb(255, 179, 0)url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K")
}

fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,
.mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline {
    background: rgba(255, 255, 255, .26)url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K")
}

fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,
.mdl-checkbox.is-disabled .mdl-checkbox__label {
    color: rgba(255, 255, 255, .26);
    cursor: auto
}

.mdl-list__item {
    color: rgba(255, 255, 255, .87);
}

.mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-info {
    color: rgba(255, 255, 255, .54)
}

.mdl-switch.is-checked .mdl-switch__track {
    background: rgba(255, 179, 0, .5)
}

.mdl-switch__track fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__track {
    background: rgba(255, 255, 255, .12);
}

.mdl-switch.is-checked .mdl-switch__thumb, .mdl-switch__thumb {
    background: rgb(255, 179, 0);
}

.mdl-switch__thumb fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__thumb {
    background: #bdbdbd;
}

.mdl-switch.is-focused.is-checked .mdl-switch__focus-helper {
    box-shadow: 0 0 0 20px rgba(255, 179, 0, .26);
    background-color: rgba(255, 179, 0, .26)
}

.mdl-switch__label fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__label {
    color: #424242;
}

.mdl-switch__ripple-container .mdl-ripple {
    background: rgb(255, 179, 0)
}

#editor,
#switchTable,
#themePopup, #logOutput,
#bmOutput {
    background-color: black;
    color: rgba(255, 255, 255, .7);
}


#switchTable {
    overflow: hidden;
}

#switchTable li:hover {
    background-color: rgba(74, 58, 95, 0.2);
}


body {
    background-color: #0b0b0b;
}

.editorFocus, #switchTable:hover, #bmOutputWrapper:hover {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}

.editorBlur, #switchTable, #bmOutputWrapper {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}




        #infoArea {
            text-align: left;
            color: white;
            padding-top: 2em;
        }

        #infoArea h3 {
            color: #3AABB6;
        }

        #infoArea h1 {
            font-style: italic;
        }

        #infoArea p {
            font-size: 1.3em;
            color: rgba(255,255,255,0.7)
        }