Material-Color/material-color.css

/* Material-Color.css
 * Copyright (c) 2017 Netsyms Technologies
 * MIT License
 * https://source.netsyms.com/Netsyms/Material-Color
 */

/*****************************************************\
                      VARIABLES
\*****************************************************/

:root {
    --material-color-primary-red: #f44336;
    --material-text-primary-red: white;

    --material-color-primary-pink: #e91e63;
    --material-text-primary-pink: white;

    --material-color-primary-purple: #9c27b0;
    --material-text-primary-purple: white;

    --material-color-primary-deep-purple: #673ab7;
    --material-text-primary-deep-purple: white;

    --material-color-primary-indigo: #3f51b5;
    --material-text-primary-indigo: white;

    --material-color-primary-blue: #2196f3;
    --material-text-primary-blue: white;

    --material-color-primary-light-blue: #03a9f4;
    --material-text-primary-light-blue: black;

    --material-color-primary-cyan: #00bcd4;
    --material-text-primary-cyan: black;

    --material-color-primary-teal: #009688;
    --material-text-primary-teal: white;

    --material-color-primary-green: #4caf50;
    --material-text-primary-green: black;

    --material-color-primary-light-green: #8bc34a;
    --material-text-primary-light-green: black;

    --material-color-primary-lime: #cddc39;
    --material-text-primary-lime: black;

    --material-color-primary-yellow: #ffeb3b;
    --material-text-primary-yellow: black;

    --material-color-primary-amber: #ffc107;
    --material-text-primary-amber: black;

    --material-color-primary-orange: #ff9800;
    --material-text-primary-orange: black;

    --material-color-primary-deep-orange: #ff5722;
    --material-text-primary-deep-orange: white;

    --material-color-primary-brown: #795548;
    --material-text-primary-brown: white;

    --material-color-primary-grey: #9e9e9e;
    --material-text-primary-grey: black;

    --material-color-primary-blue-grey: #607d8b;
    --material-text-primary-blue-grey: white;



    --material-color-secondary-red: #ef9a9a;
    --material-text-secondary-red: black;

    --material-color-secondary-pink: #f48fb1;
    --material-text-secondary-pink: black;

    --material-color-secondary-purple: #ce93d8;
    --material-text-secondary-purple: black;

    --material-color-secondary-deep-purple: #b39ddb;
    --material-text-secondary-deep-purple: black;

    --material-color-secondary-indigo: #9fa8da;
    --material-text-secondary-indigo: black;

    --material-color-secondary-blue: #90caf9;
    --material-text-secondary-blue: black;

    --material-color-secondary-light-blue: #81d4fa;
    --material-text-secondary-light-blue: black;

    --material-color-secondary-cyan: #80deea;
    --material-text-secondary-cyan: black;

    --material-color-secondary-teal: #80cbc4;
    --material-text-secondary-teal: black;

    --material-color-secondary-green: #a5d6a7;
    --material-text-secondary-green: black;

    --material-color-secondary-light-green: #c5e1a5;
    --material-text-secondary-light-green: black;

    --material-color-secondary-lime: #e6ee9c;
    --material-text-secondary-lime: black;

    --material-color-secondary-yellow: #fff59d;
    --material-text-secondary-yellow: black;

    --material-color-secondary-amber: #ffe082;
    --material-text-secondary-amber: black;

    --material-color-secondary-orange: #ffcc80;
    --material-text-secondary-orange: black;

    --material-color-secondary-deep-orange: #ffab91;
    --material-text-secondary-deep-orange: black;

    --material-color-secondary-brown: #bcaaa4;
    --material-text-secondary-brown: black;

    --material-color-secondary-grey: #eeeeee;
    --material-text-secondary-grey: black;

    --material-color-secondary-blue-grey: #b0bec5;
    --material-text-secondary-blue-grey: black;
}

/*****************************************************\
                        PANELS
\*****************************************************/

.panel-red .panel-heading {
    background-color: var(--material-color-primary-red);
    color: var(--material-text-primary-red);
}

.panel-pink .panel-heading {
    background-color: var(--material-color-primary-pink);
    color: var(--material-text-primary-pink);
}

.panel-purple .panel-heading {
    background-color: var(--material-color-primary-purple);
    color: var(--material-text-primary-purple);
}

.panel-deep-purple .panel-heading {
    background-color: var(--material-color-primary-deep-purple);
    color: var(--material-text-primary-deep-purple);
}

.panel-indigo .panel-heading {
    background-color: var(--material-color-primary-indigo);
    color: var(--material-text-primary-indigo);
}

.panel-blue .panel-heading {
    background-color: var(--material-color-primary-blue);
    color: var(--material-text-primary-blue);
}

.panel-light-blue .panel-heading {
    background-color: var(--material-color-primary-light-blue);
    color: var(--material-text-primary-light-blue);
}

.panel-cyan .panel-heading {
    background-color: var(--material-color-primary-cyan);
    color: var(--material-text-primary-cyan);
}

.panel-teal .panel-heading {
    background-color: var(--material-color-primary-teal);
    color: var(--material-text-primary-teal);
}

.panel-green .panel-heading {
    background-color: var(--material-color-primary-green);
    color: var(--material-text-primary-green);
}

.panel-light-green .panel-heading {
    background-color: var(--material-color-primary-light-green);
    color: var(--material-text-primary-light-green);
}

.panel-lime .panel-heading {
    background-color: var(--material-color-primary-lime);
    color: var(--material-text-primary-lime);
}

.panel-yellow .panel-heading {
    background-color: var(--material-color-primary-yellow);
    color: var(--material-text-primary-yellow);
}

.panel-amber .panel-heading {
    background-color: var(--material-color-primary-amber);
    color: var(--material-text-primary-amber);
}

.panel-orange .panel-heading {
    background-color: var(--material-color-primary-orange);
    color: var(--material-text-primary-orange);
}

.panel-deep-orange .panel-heading {
    background-color: var(--material-color-primary-deep-orange);
    color: var(--material-text-primary-deep-orange);
}

.panel-brown .panel-heading {
    background-color: var(--material-color-primary-brown);
    color: var(--material-text-primary-brown);
}

.panel-grey .panel-heading {
    background-color: var(--material-color-primary-grey);
    color: var(--material-text-primary-grey);
}

.panel-blue-grey .panel-heading {
    background-color: var(--material-color-primary-blue-grey);
    color: var(--material-text-primary-blue-grey);
}

.panel-red .panel-footer {
    background-color: var(--material-color-secondary-red);
    color: var(--material-text-secondary-red);
}

.panel-pink .panel-footer {
    background-color: var(--material-color-secondary-pink);
    color: var(--material-text-secondary-pink);
}

.panel-purple .panel-footer {
    background-color: var(--material-color-secondary-purple);
    color: var(--material-text-secondary-purple);
}

.panel-deep-purple .panel-footer {
    background-color: var(--material-color-secondary-deep-purple);
    color: var(--material-text-secondary-deep-purple);
}

.panel-indigo .panel-footer {
    background-color: var(--material-color-secondary-indigo);
    color: var(--material-text-secondary-indigo);
}

.panel-blue .panel-footer {
    background-color: var(--material-color-secondary-blue);
    color: var(--material-text-secondary-blue);
}

.panel-light-blue .panel-footer {
    background-color: var(--material-color-secondary-light-blue);
    color: var(--material-text-secondary-light-blue);
}

.panel-cyan .panel-footer {
    background-color: var(--material-color-secondary-cyan);
    color: var(--material-text-secondary-cyan);
}

.panel-teal .panel-footer {
    background-color: var(--material-color-secondary-teal);
    color: var(--material-text-secondary-teal);
}

.panel-green .panel-footer {
    background-color: var(--material-color-secondary-green);
    color: var(--material-text-secondary-green);
}

.panel-light-green .panel-footer {
    background-color: var(--material-color-secondary-light-green);
    color: var(--material-text-secondary-light-green);
}

.panel-lime .panel-footer {
    background-color: var(--material-color-secondary-lime);
    color: var(--material-text-secondary-lime);
}

.panel-yellow .panel-footer {
    background-color: var(--material-color-secondary-yellow);
    color: var(--material-text-secondary-yellow);
}

.panel-amber .panel-footer {
    background-color: var(--material-color-secondary-amber);
    color: var(--material-text-secondary-amber);
}

.panel-orange .panel-footer {
    background-color: var(--material-color-secondary-orange);
    color: var(--material-text-secondary-orange);
}

.panel-deep-orange .panel-footer {
    background-color: var(--material-color-secondary-deep-orange);
    color: var(--material-text-secondary-deep-orange);
}

.panel-brown .panel-footer {
    background-color: var(--material-color-secondary-brown);
    color: var(--material-text-secondary-brown);
}

.panel-grey .panel-footer {
    background-color: var(--material-color-secondary-grey);
    color: var(--material-text-secondary-grey);
}

.panel-blue-grey .panel-footer {
    background-color: var(--material-color-secondary-blue-grey);
    color: var(--material-text-secondary-blue-grey);
}

/*****************************************************\
                        ALERTS
\*****************************************************/

.alert-red {
    background-color: var(--material-color-primary-red);
    color: var(--material-text-primary-red);
}

.alert-pink {
    background-color: var(--material-color-primary-pink);
    color: var(--material-text-primary-pink);
}

.alert-purple {
    background-color: var(--material-color-primary-purple);
    color: var(--material-text-primary-purple);
}

.alert-deep-purple {
    background-color: var(--material-color-primary-deep-purple);
    color: var(--material-text-primary-deep-purple);
}

.alert-indigo {
    background-color: var(--material-color-primary-indigo);
    color: var(--material-text-primary-indigo);
}

.alert-blue {
    background-color: var(--material-color-primary-blue);
    color: var(--material-text-primary-blue);
}

.alert-light-blue {
    background-color: var(--material-color-primary-light-blue);
    color: var(--material-text-primary-light-blue);
}

.alert-cyan {
    background-color: var(--material-color-primary-cyan);
    color: var(--material-text-primary-cyan);
}

.alert-teal {
    background-color: var(--material-color-primary-teal);
    color: var(--material-text-primary-teal);
}

.alert-green {
    background-color: var(--material-color-primary-green);
    color: var(--material-text-primary-green);
}

.alert-light-green {
    background-color: var(--material-color-primary-light-green);
    color: var(--material-text-primary-light-green);
}

.alert-lime {
    background-color: var(--material-color-primary-lime);
    color: var(--material-text-primary-lime);
}

.alert-yellow {
    background-color: var(--material-color-primary-yellow);
    color: var(--material-text-primary-yellow);
}

.alert-amber {
    background-color: var(--material-color-primary-amber);
    color: var(--material-text-primary-amber);
}

.alert-orange {
    background-color: var(--material-color-primary-orange);
    color: var(--material-text-primary-orange);
}

.alert-deep-orange {
    background-color: var(--material-color-primary-deep-orange);
    color: var(--material-text-primary-deep-orange);
}

.alert-brown {
    background-color: var(--material-color-primary-brown);
    color: var(--material-text-primary-brown);
}

.alert-grey {
    background-color: var(--material-color-primary-grey);
    color: var(--material-text-primary-grey);
}

.alert-blue-grey {
    background-color: var(--material-color-primary-blue-grey);
    color: var(--material-text-primary-blue-grey);
}

/*****************************************************\
                        NAVBAR
\*****************************************************/

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: rgba(0,0,0,.3);
}


/* red */
.navbar-red {
    background-color: var(--material-color-primary-red);
}
.navbar-red .navbar-brand {
    color: var(--material-text-primary-red);
}
.navbar-red .navbar-brand:hover,
.navbar-red .navbar-brand:focus {
    color: var(--material-text-primary-red);
}
.navbar-red .navbar-nav > li > a {
    color: var(--material-text-primary-red);
}
.navbar-red .navbar-nav > li > a:hover,
.navbar-red .navbar-nav > li > a:focus {
    color: var(--material-text-primary-red);
}
.navbar-red .navbar-nav > .active > a,
.navbar-red .navbar-nav > .active > a:hover,
.navbar-red .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-red);
    background: rgba(0,0,0,.2);
}
.navbar-red .navbar-nav > .open > a,
.navbar-red .navbar-nav > .open > a:hover,
.navbar-red .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-red);
    background: rgba(0,0,0,.2);
}
.navbar-red .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-red);
    border-bottom-color: var(--material-text-primary-red);
}
.navbar-red .navbar-nav > .dropdown > a:hover .caret,
.navbar-red .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-red);
    border-bottom-color: var(--material-text-primary-red);
}
.navbar-red .navbar-nav > .open > a .caret,
.navbar-red .navbar-nav > .open > a:hover .caret,
.navbar-red .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-red);
    border-bottom-color: var(--material-text-primary-red);
}
.navbar-red .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-red .navbar-toggle:hover,
.navbar-red .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-red .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-red);
}
@media (max-width: 767px) {
    .navbar-red .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-red);
    }
    .navbar-red .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-red .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-red);
    }
}



/* pink */
.navbar-pink {
    background-color: var(--material-color-primary-pink);
}
.navbar-pink .navbar-brand {
    color: var(--material-text-primary-pink);
}
.navbar-pink .navbar-brand:hover,
.navbar-pink .navbar-brand:focus {
    color: var(--material-text-primary-pink);
}
.navbar-pink .navbar-nav > li > a {
    color: var(--material-text-primary-pink);
}
.navbar-pink .navbar-nav > li > a:hover,
.navbar-pink .navbar-nav > li > a:focus {
    color: var(--material-text-primary-pink);
}
.navbar-pink .navbar-nav > .active > a,
.navbar-pink .navbar-nav > .active > a:hover,
.navbar-pink .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-pink);
    background: rgba(0,0,0,.2);
}
.navbar-pink .navbar-nav > .open > a,
.navbar-pink .navbar-nav > .open > a:hover,
.navbar-pink .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-pink);
    background: rgba(0,0,0,.2);
}
.navbar-pink .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-pink);
    border-bottom-color: var(--material-text-primary-pink);
}
.navbar-pink .navbar-nav > .dropdown > a:hover .caret,
.navbar-pink .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-pink);
    border-bottom-color: var(--material-text-primary-pink);
}
.navbar-pink .navbar-nav > .open > a .caret,
.navbar-pink .navbar-nav > .open > a:hover .caret,
.navbar-pink .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-pink);
    border-bottom-color: var(--material-text-primary-pink);
}
.navbar-pink .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-pink .navbar-toggle:hover,
.navbar-pink .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-pink .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-pink);
}
@media (max-width: 767px) {
    .navbar-pink .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-pink);
    }
    .navbar-pink .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-pink .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-pink);
    }
}



/* purple */
.navbar-purple {
    background-color: var(--material-color-primary-purple);
}
.navbar-purple .navbar-brand {
    color: var(--material-text-primary-purple);
}
.navbar-purple .navbar-brand:hover,
.navbar-purple .navbar-brand:focus {
    color: var(--material-text-primary-purple);
}
.navbar-purple .navbar-nav > li > a {
    color: var(--material-text-primary-purple);
}
.navbar-purple .navbar-nav > li > a:hover,
.navbar-purple .navbar-nav > li > a:focus {
    color: var(--material-text-primary-purple);
}
.navbar-purple .navbar-nav > .active > a,
.navbar-purple .navbar-nav > .active > a:hover,
.navbar-purple .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-purple);
    background: rgba(0,0,0,.2);
}
.navbar-purple .navbar-nav > .open > a,
.navbar-purple .navbar-nav > .open > a:hover,
.navbar-purple .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-purple);
    background: rgba(0,0,0,.2);
}
.navbar-purple .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-purple);
    border-bottom-color: var(--material-text-primary-purple);
}
.navbar-purple .navbar-nav > .dropdown > a:hover .caret,
.navbar-purple .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-purple);
    border-bottom-color: var(--material-text-primary-purple);
}
.navbar-purple .navbar-nav > .open > a .caret,
.navbar-purple .navbar-nav > .open > a:hover .caret,
.navbar-purple .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-purple);
    border-bottom-color: var(--material-text-primary-purple);
}
.navbar-purple .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-purple .navbar-toggle:hover,
.navbar-purple .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-purple .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-purple);
}
@media (max-width: 767px) {
    .navbar-purple .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-purple);
    }
    .navbar-purple .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-purple .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-purple);
    }
}



/* deep-purple */
.navbar-deep-purple {
    background-color: var(--material-color-primary-deep-purple);
}
.navbar-deep-purple .navbar-brand {
    color: var(--material-text-primary-deep-purple);
}
.navbar-deep-purple .navbar-brand:hover,
.navbar-deep-purple .navbar-brand:focus {
    color: var(--material-text-primary-deep-purple);
}
.navbar-deep-purple .navbar-nav > li > a {
    color: var(--material-text-primary-deep-purple);
}
.navbar-deep-purple .navbar-nav > li > a:hover,
.navbar-deep-purple .navbar-nav > li > a:focus {
    color: var(--material-text-primary-deep-purple);
}
.navbar-deep-purple .navbar-nav > .active > a,
.navbar-deep-purple .navbar-nav > .active > a:hover,
.navbar-deep-purple .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-deep-purple);
    background: rgba(0,0,0,.2);
}
.navbar-deep-purple .navbar-nav > .open > a,
.navbar-deep-purple .navbar-nav > .open > a:hover,
.navbar-deep-purple .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-deep-purple);
    background: rgba(0,0,0,.2);
}
.navbar-deep-purple .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-deep-purple);
    border-bottom-color: var(--material-text-primary-deep-purple);
}
.navbar-deep-purple .navbar-nav > .dropdown > a:hover .caret,
.navbar-deep-purple .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-deep-purple);
    border-bottom-color: var(--material-text-primary-deep-purple);
}
.navbar-deep-purple .navbar-nav > .open > a .caret,
.navbar-deep-purple .navbar-nav > .open > a:hover .caret,
.navbar-deep-purple .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-deep-purple);
    border-bottom-color: var(--material-text-primary-deep-purple);
}
.navbar-deep-purple .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-deep-purple .navbar-toggle:hover,
.navbar-deep-purple .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-deep-purple .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-deep-purple);
}
@media (max-width: 767px) {
    .navbar-deep-purple .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-deep-purple);
    }
    .navbar-deep-purple .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-deep-purple .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-deep-purple);
    }
}



/* indigo */
.navbar-indigo {
    background-color: var(--material-color-primary-indigo);
}
.navbar-indigo .navbar-brand {
    color: var(--material-text-primary-indigo);
}
.navbar-indigo .navbar-brand:hover,
.navbar-indigo .navbar-brand:focus {
    color: var(--material-text-primary-indigo);
}
.navbar-indigo .navbar-nav > li > a {
    color: var(--material-text-primary-indigo);
}
.navbar-indigo .navbar-nav > li > a:hover,
.navbar-indigo .navbar-nav > li > a:focus {
    color: var(--material-text-primary-indigo);
}
.navbar-indigo .navbar-nav > .active > a,
.navbar-indigo .navbar-nav > .active > a:hover,
.navbar-indigo .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-indigo);
    background: rgba(0,0,0,.2);
}
.navbar-indigo .navbar-nav > .open > a,
.navbar-indigo .navbar-nav > .open > a:hover,
.navbar-indigo .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-indigo);
    background: rgba(0,0,0,.2);
}
.navbar-indigo .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-indigo);
    border-bottom-color: var(--material-text-primary-indigo);
}
.navbar-indigo .navbar-nav > .dropdown > a:hover .caret,
.navbar-indigo .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-indigo);
    border-bottom-color: var(--material-text-primary-indigo);
}
.navbar-indigo .navbar-nav > .open > a .caret,
.navbar-indigo .navbar-nav > .open > a:hover .caret,
.navbar-indigo .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-indigo);
    border-bottom-color: var(--material-text-primary-indigo);
}
.navbar-indigo .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-indigo .navbar-toggle:hover,
.navbar-indigo .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-indigo .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-indigo);
}
@media (max-width: 767px) {
    .navbar-indigo .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-indigo);
    }
    .navbar-indigo .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-indigo .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-indigo);
    }
}



/* blue */
.navbar-blue {
    background-color: var(--material-color-primary-blue);
}
.navbar-blue .navbar-brand {
    color: var(--material-text-primary-blue);
}
.navbar-blue .navbar-brand:hover,
.navbar-blue .navbar-brand:focus {
    color: var(--material-text-primary-blue);
}
.navbar-blue .navbar-nav > li > a {
    color: var(--material-text-primary-blue);
}
.navbar-blue .navbar-nav > li > a:hover,
.navbar-blue .navbar-nav > li > a:focus {
    color: var(--material-text-primary-blue);
}
.navbar-blue .navbar-nav > .active > a,
.navbar-blue .navbar-nav > .active > a:hover,
.navbar-blue .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-blue);
    background: rgba(0,0,0,.2);
}
.navbar-blue .navbar-nav > .open > a,
.navbar-blue .navbar-nav > .open > a:hover,
.navbar-blue .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-blue);
    background: rgba(0,0,0,.2);
}
.navbar-blue .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-blue);
    border-bottom-color: var(--material-text-primary-blue);
}
.navbar-blue .navbar-nav > .dropdown > a:hover .caret,
.navbar-blue .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-blue);
    border-bottom-color: var(--material-text-primary-blue);
}
.navbar-blue .navbar-nav > .open > a .caret,
.navbar-blue .navbar-nav > .open > a:hover .caret,
.navbar-blue .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-blue);
    border-bottom-color: var(--material-text-primary-blue);
}
.navbar-blue .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-blue .navbar-toggle:hover,
.navbar-blue .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-blue .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-blue);
}
@media (max-width: 767px) {
    .navbar-blue .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-blue);
    }
    .navbar-blue .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-blue .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-blue);
    }
}



/* light-blue */
.navbar-light-blue {
    background-color: var(--material-color-primary-light-blue);
}
.navbar-light-blue .navbar-brand {
    color: var(--material-text-primary-light-blue);
}
.navbar-light-blue .navbar-brand:hover,
.navbar-light-blue .navbar-brand:focus {
    color: var(--material-text-primary-light-blue);
}
.navbar-light-blue .navbar-nav > li > a {
    color: var(--material-text-primary-light-blue);
}
.navbar-light-blue .navbar-nav > li > a:hover,
.navbar-light-blue .navbar-nav > li > a:focus {
    color: var(--material-text-primary-light-blue);
}
.navbar-light-blue .navbar-nav > .active > a,
.navbar-light-blue .navbar-nav > .active > a:hover,
.navbar-light-blue .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-light-blue);
    background: rgba(0,0,0,.2);
}
.navbar-light-blue .navbar-nav > .open > a,
.navbar-light-blue .navbar-nav > .open > a:hover,
.navbar-light-blue .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-light-blue);
    background: rgba(0,0,0,.2);
}
.navbar-light-blue .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-light-blue);
    border-bottom-color: var(--material-text-primary-light-blue);
}
.navbar-light-blue .navbar-nav > .dropdown > a:hover .caret,
.navbar-light-blue .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-light-blue);
    border-bottom-color: var(--material-text-primary-light-blue);
}
.navbar-light-blue .navbar-nav > .open > a .caret,
.navbar-light-blue .navbar-nav > .open > a:hover .caret,
.navbar-light-blue .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-light-blue);
    border-bottom-color: var(--material-text-primary-light-blue);
}
.navbar-light-blue .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-light-blue .navbar-toggle:hover,
.navbar-light-blue .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-light-blue .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-light-blue);
}
@media (max-width: 767px) {
    .navbar-light-blue .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-light-blue);
    }
    .navbar-light-blue .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-light-blue .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-light-blue);
    }
}



/* cyan */
.navbar-cyan {
    background-color: var(--material-color-primary-cyan);
}
.navbar-cyan .navbar-brand {
    color: var(--material-text-primary-cyan);
}
.navbar-cyan .navbar-brand:hover,
.navbar-cyan .navbar-brand:focus {
    color: var(--material-text-primary-cyan);
}
.navbar-cyan .navbar-nav > li > a {
    color: var(--material-text-primary-cyan);
}
.navbar-cyan .navbar-nav > li > a:hover,
.navbar-cyan .navbar-nav > li > a:focus {
    color: var(--material-text-primary-cyan);
}
.navbar-cyan .navbar-nav > .active > a,
.navbar-cyan .navbar-nav > .active > a:hover,
.navbar-cyan .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-cyan);
    background: rgba(0,0,0,.2);
}
.navbar-cyan .navbar-nav > .open > a,
.navbar-cyan .navbar-nav > .open > a:hover,
.navbar-cyan .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-cyan);
    background: rgba(0,0,0,.2);
}
.navbar-cyan .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-cyan);
    border-bottom-color: var(--material-text-primary-cyan);
}
.navbar-cyan .navbar-nav > .dropdown > a:hover .caret,
.navbar-cyan .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-cyan);
    border-bottom-color: var(--material-text-primary-cyan);
}
.navbar-cyan .navbar-nav > .open > a .caret,
.navbar-cyan .navbar-nav > .open > a:hover .caret,
.navbar-cyan .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-cyan);
    border-bottom-color: var(--material-text-primary-cyan);
}
.navbar-cyan .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-cyan .navbar-toggle:hover,
.navbar-cyan .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-cyan .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-cyan);
}
@media (max-width: 767px) {
    .navbar-cyan .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-cyan);
    }
    .navbar-cyan .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-cyan .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-cyan);
    }
}



/* teal */
.navbar-teal {
    background-color: var(--material-color-primary-teal);
}
.navbar-teal .navbar-brand {
    color: var(--material-text-primary-teal);
}
.navbar-teal .navbar-brand:hover,
.navbar-teal .navbar-brand:focus {
    color: var(--material-text-primary-teal);
}
.navbar-teal .navbar-nav > li > a {
    color: var(--material-text-primary-teal);
}
.navbar-teal .navbar-nav > li > a:hover,
.navbar-teal .navbar-nav > li > a:focus {
    color: var(--material-text-primary-teal);
}
.navbar-teal .navbar-nav > .active > a,
.navbar-teal .navbar-nav > .active > a:hover,
.navbar-teal .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-teal);
    background: rgba(0,0,0,.2);
}
.navbar-teal .navbar-nav > .open > a,
.navbar-teal .navbar-nav > .open > a:hover,
.navbar-teal .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-teal);
    background: rgba(0,0,0,.2);
}
.navbar-teal .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-teal);
    border-bottom-color: var(--material-text-primary-teal);
}
.navbar-teal .navbar-nav > .dropdown > a:hover .caret,
.navbar-teal .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-teal);
    border-bottom-color: var(--material-text-primary-teal);
}
.navbar-teal .navbar-nav > .open > a .caret,
.navbar-teal .navbar-nav > .open > a:hover .caret,
.navbar-teal .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-teal);
    border-bottom-color: var(--material-text-primary-teal);
}
.navbar-teal .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-teal .navbar-toggle:hover,
.navbar-teal .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-teal .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-teal);
}
@media (max-width: 767px) {
    .navbar-teal .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-teal);
    }
    .navbar-teal .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-teal .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-teal);
    }
}



/* green */
.navbar-green {
    background-color: var(--material-color-primary-green);
}
.navbar-green .navbar-brand {
    color: var(--material-text-primary-green);
}
.navbar-green .navbar-brand:hover,
.navbar-green .navbar-brand:focus {
    color: var(--material-text-primary-green);
}
.navbar-green .navbar-nav > li > a {
    color: var(--material-text-primary-green);
}
.navbar-green .navbar-nav > li > a:hover,
.navbar-green .navbar-nav > li > a:focus {
    color: var(--material-text-primary-green);
}
.navbar-green .navbar-nav > .active > a,
.navbar-green .navbar-nav > .active > a:hover,
.navbar-green .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-green);
    background: rgba(0,0,0,.2);
}
.navbar-green .navbar-nav > .open > a,
.navbar-green .navbar-nav > .open > a:hover,
.navbar-green .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-green);
    background: rgba(0,0,0,.2);
}
.navbar-green .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-green);
    border-bottom-color: var(--material-text-primary-green);
}
.navbar-green .navbar-nav > .dropdown > a:hover .caret,
.navbar-green .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-green);
    border-bottom-color: var(--material-text-primary-green);
}
.navbar-green .navbar-nav > .open > a .caret,
.navbar-green .navbar-nav > .open > a:hover .caret,
.navbar-green .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-green);
    border-bottom-color: var(--material-text-primary-green);
}
.navbar-green .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-green .navbar-toggle:hover,
.navbar-green .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-green .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-green);
}
@media (max-width: 767px) {
    .navbar-green .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-green);
    }
    .navbar-green .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-green .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-green);
    }
}



/* light-green */
.navbar-light-green {
    background-color: var(--material-color-primary-light-green);
}
.navbar-light-green .navbar-brand {
    color: var(--material-text-primary-light-green);
}
.navbar-light-green .navbar-brand:hover,
.navbar-light-green .navbar-brand:focus {
    color: var(--material-text-primary-light-green);
}
.navbar-light-green .navbar-nav > li > a {
    color: var(--material-text-primary-light-green);
}
.navbar-light-green .navbar-nav > li > a:hover,
.navbar-light-green .navbar-nav > li > a:focus {
    color: var(--material-text-primary-light-green);
}
.navbar-light-green .navbar-nav > .active > a,
.navbar-light-green .navbar-nav > .active > a:hover,
.navbar-light-green .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-light-green);
    background: rgba(0,0,0,.2);
}
.navbar-light-green .navbar-nav > .open > a,
.navbar-light-green .navbar-nav > .open > a:hover,
.navbar-light-green .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-light-green);
    background: rgba(0,0,0,.2);
}
.navbar-light-green .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-light-green);
    border-bottom-color: var(--material-text-primary-light-green);
}
.navbar-light-green .navbar-nav > .dropdown > a:hover .caret,
.navbar-light-green .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-light-green);
    border-bottom-color: var(--material-text-primary-light-green);
}
.navbar-light-green .navbar-nav > .open > a .caret,
.navbar-light-green .navbar-nav > .open > a:hover .caret,
.navbar-light-green .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-light-green);
    border-bottom-color: var(--material-text-primary-light-green);
}
.navbar-light-green .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-light-green .navbar-toggle:hover,
.navbar-light-green .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-light-green .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-light-green);
}
@media (max-width: 767px) {
    .navbar-light-green .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-light-green);
    }
    .navbar-light-green .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-light-green .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-light-green);
    }
}



/* lime */
.navbar-lime {
    background-color: var(--material-color-primary-lime);
}
.navbar-lime .navbar-brand {
    color: var(--material-text-primary-lime);
}
.navbar-lime .navbar-brand:hover,
.navbar-lime .navbar-brand:focus {
    color: var(--material-text-primary-lime);
}
.navbar-lime .navbar-nav > li > a {
    color: var(--material-text-primary-lime);
}
.navbar-lime .navbar-nav > li > a:hover,
.navbar-lime .navbar-nav > li > a:focus {
    color: var(--material-text-primary-lime);
}
.navbar-lime .navbar-nav > .active > a,
.navbar-lime .navbar-nav > .active > a:hover,
.navbar-lime .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-lime);
    background: rgba(0,0,0,.2);
}
.navbar-lime .navbar-nav > .open > a,
.navbar-lime .navbar-nav > .open > a:hover,
.navbar-lime .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-lime);
    background: rgba(0,0,0,.2);
}
.navbar-lime .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-lime);
    border-bottom-color: var(--material-text-primary-lime);
}
.navbar-lime .navbar-nav > .dropdown > a:hover .caret,
.navbar-lime .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-lime);
    border-bottom-color: var(--material-text-primary-lime);
}
.navbar-lime .navbar-nav > .open > a .caret,
.navbar-lime .navbar-nav > .open > a:hover .caret,
.navbar-lime .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-lime);
    border-bottom-color: var(--material-text-primary-lime);
}
.navbar-lime .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-lime .navbar-toggle:hover,
.navbar-lime .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-lime .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-lime);
}
@media (max-width: 767px) {
    .navbar-lime .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-lime);
    }
    .navbar-lime .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-lime .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-lime);
    }
}



/* yellow */
.navbar-yellow {
    background-color: var(--material-color-primary-yellow);
}
.navbar-yellow .navbar-brand {
    color: var(--material-text-primary-yellow);
}
.navbar-yellow .navbar-brand:hover,
.navbar-yellow .navbar-brand:focus {
    color: var(--material-text-primary-yellow);
}
.navbar-yellow .navbar-nav > li > a {
    color: var(--material-text-primary-yellow);
}
.navbar-yellow .navbar-nav > li > a:hover,
.navbar-yellow .navbar-nav > li > a:focus {
    color: var(--material-text-primary-yellow);
}
.navbar-yellow .navbar-nav > .active > a,
.navbar-yellow .navbar-nav > .active > a:hover,
.navbar-yellow .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-yellow);
    background: rgba(0,0,0,.2);
}
.navbar-yellow .navbar-nav > .open > a,
.navbar-yellow .navbar-nav > .open > a:hover,
.navbar-yellow .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-yellow);
    background: rgba(0,0,0,.2);
}
.navbar-yellow .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-yellow);
    border-bottom-color: var(--material-text-primary-yellow);
}
.navbar-yellow .navbar-nav > .dropdown > a:hover .caret,
.navbar-yellow .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-yellow);
    border-bottom-color: var(--material-text-primary-yellow);
}
.navbar-yellow .navbar-nav > .open > a .caret,
.navbar-yellow .navbar-nav > .open > a:hover .caret,
.navbar-yellow .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-yellow);
    border-bottom-color: var(--material-text-primary-yellow);
}
.navbar-yellow .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-yellow .navbar-toggle:hover,
.navbar-yellow .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-yellow .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-yellow);
}
@media (max-width: 767px) {
    .navbar-yellow .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-yellow);
    }
    .navbar-yellow .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-yellow .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-yellow);
    }
}



/* amber */
.navbar-amber {
    background-color: var(--material-color-primary-amber);
}
.navbar-amber .navbar-brand {
    color: var(--material-text-primary-amber);
}
.navbar-amber .navbar-brand:hover,
.navbar-amber .navbar-brand:focus {
    color: var(--material-text-primary-amber);
}
.navbar-amber .navbar-nav > li > a {
    color: var(--material-text-primary-amber);
}
.navbar-amber .navbar-nav > li > a:hover,
.navbar-amber .navbar-nav > li > a:focus {
    color: var(--material-text-primary-amber);
}
.navbar-amber .navbar-nav > .active > a,
.navbar-amber .navbar-nav > .active > a:hover,
.navbar-amber .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-amber);
    background: rgba(0,0,0,.2);
}
.navbar-amber .navbar-nav > .open > a,
.navbar-amber .navbar-nav > .open > a:hover,
.navbar-amber .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-amber);
    background: rgba(0,0,0,.2);
}
.navbar-amber .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-amber);
    border-bottom-color: var(--material-text-primary-amber);
}
.navbar-amber .navbar-nav > .dropdown > a:hover .caret,
.navbar-amber .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-amber);
    border-bottom-color: var(--material-text-primary-amber);
}
.navbar-amber .navbar-nav > .open > a .caret,
.navbar-amber .navbar-nav > .open > a:hover .caret,
.navbar-amber .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-amber);
    border-bottom-color: var(--material-text-primary-amber);
}
.navbar-amber .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-amber .navbar-toggle:hover,
.navbar-amber .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-amber .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-amber);
}
@media (max-width: 767px) {
    .navbar-amber .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-amber);
    }
    .navbar-amber .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-amber .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-amber);
    }
}



/* orange */
.navbar-orange {
    background-color: var(--material-color-primary-orange);
}
.navbar-orange .navbar-brand {
    color: var(--material-text-primary-orange);
}
.navbar-orange .navbar-brand:hover,
.navbar-orange .navbar-brand:focus {
    color: var(--material-text-primary-orange);
}
.navbar-orange .navbar-nav > li > a {
    color: var(--material-text-primary-orange);
}
.navbar-orange .navbar-nav > li > a:hover,
.navbar-orange .navbar-nav > li > a:focus {
    color: var(--material-text-primary-orange);
}
.navbar-orange .navbar-nav > .active > a,
.navbar-orange .navbar-nav > .active > a:hover,
.navbar-orange .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-orange);
    background: rgba(0,0,0,.2);
}
.navbar-orange .navbar-nav > .open > a,
.navbar-orange .navbar-nav > .open > a:hover,
.navbar-orange .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-orange);
    background: rgba(0,0,0,.2);
}
.navbar-orange .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-orange);
    border-bottom-color: var(--material-text-primary-orange);
}
.navbar-orange .navbar-nav > .dropdown > a:hover .caret,
.navbar-orange .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-orange);
    border-bottom-color: var(--material-text-primary-orange);
}
.navbar-orange .navbar-nav > .open > a .caret,
.navbar-orange .navbar-nav > .open > a:hover .caret,
.navbar-orange .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-orange);
    border-bottom-color: var(--material-text-primary-orange);
}
.navbar-orange .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-orange .navbar-toggle:hover,
.navbar-orange .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-orange .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-orange);
}
@media (max-width: 767px) {
    .navbar-orange .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-orange);
    }
    .navbar-orange .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-orange .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-orange);
    }
}



/* deep-orange */
.navbar-deep-orange {
    background-color: var(--material-color-primary-deep-orange);
}
.navbar-deep-orange .navbar-brand {
    color: var(--material-text-primary-deep-orange);
}
.navbar-deep-orange .navbar-brand:hover,
.navbar-deep-orange .navbar-brand:focus {
    color: var(--material-text-primary-deep-orange);
}
.navbar-deep-orange .navbar-nav > li > a {
    color: var(--material-text-primary-deep-orange);
}
.navbar-deep-orange .navbar-nav > li > a:hover,
.navbar-deep-orange .navbar-nav > li > a:focus {
    color: var(--material-text-primary-deep-orange);
}
.navbar-deep-orange .navbar-nav > .active > a,
.navbar-deep-orange .navbar-nav > .active > a:hover,
.navbar-deep-orange .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-deep-orange);
    background: rgba(0,0,0,.2);
}
.navbar-deep-orange .navbar-nav > .open > a,
.navbar-deep-orange .navbar-nav > .open > a:hover,
.navbar-deep-orange .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-deep-orange);
    background: rgba(0,0,0,.2);
}
.navbar-deep-orange .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-deep-orange);
    border-bottom-color: var(--material-text-primary-deep-orange);
}
.navbar-deep-orange .navbar-nav > .dropdown > a:hover .caret,
.navbar-deep-orange .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-deep-orange);
    border-bottom-color: var(--material-text-primary-deep-orange);
}
.navbar-deep-orange .navbar-nav > .open > a .caret,
.navbar-deep-orange .navbar-nav > .open > a:hover .caret,
.navbar-deep-orange .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-deep-orange);
    border-bottom-color: var(--material-text-primary-deep-orange);
}
.navbar-deep-orange .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-deep-orange .navbar-toggle:hover,
.navbar-deep-orange .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-deep-orange .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-deep-orange);
}
@media (max-width: 767px) {
    .navbar-deep-orange .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-deep-orange);
    }
    .navbar-deep-orange .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-deep-orange .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-deep-orange);
    }
}



/* brown */
.navbar-brown {
    background-color: var(--material-color-primary-brown);
}
.navbar-brown .navbar-brand {
    color: var(--material-text-primary-brown);
}
.navbar-brown .navbar-brand:hover,
.navbar-brown .navbar-brand:focus {
    color: var(--material-text-primary-brown);
}
.navbar-brown .navbar-nav > li > a {
    color: var(--material-text-primary-brown);
}
.navbar-brown .navbar-nav > li > a:hover,
.navbar-brown .navbar-nav > li > a:focus {
    color: var(--material-text-primary-brown);
}
.navbar-brown .navbar-nav > .active > a,
.navbar-brown .navbar-nav > .active > a:hover,
.navbar-brown .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-brown);
    background: rgba(0,0,0,.2);
}
.navbar-brown .navbar-nav > .open > a,
.navbar-brown .navbar-nav > .open > a:hover,
.navbar-brown .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-brown);
    background: rgba(0,0,0,.2);
}
.navbar-brown .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-brown);
    border-bottom-color: var(--material-text-primary-brown);
}
.navbar-brown .navbar-nav > .dropdown > a:hover .caret,
.navbar-brown .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-brown);
    border-bottom-color: var(--material-text-primary-brown);
}
.navbar-brown .navbar-nav > .open > a .caret,
.navbar-brown .navbar-nav > .open > a:hover .caret,
.navbar-brown .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-brown);
    border-bottom-color: var(--material-text-primary-brown);
}
.navbar-brown .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-brown .navbar-toggle:hover,
.navbar-brown .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-brown .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-brown);
}
@media (max-width: 767px) {
    .navbar-brown .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-brown);
    }
    .navbar-brown .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-brown .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-brown);
    }
}



/* grey */
.navbar-grey {
    background-color: var(--material-color-primary-grey);
}
.navbar-grey .navbar-brand {
    color: var(--material-text-primary-grey);
}
.navbar-grey .navbar-brand:hover,
.navbar-grey .navbar-brand:focus {
    color: var(--material-text-primary-grey);
}
.navbar-grey .navbar-nav > li > a {
    color: var(--material-text-primary-grey);
}
.navbar-grey .navbar-nav > li > a:hover,
.navbar-grey .navbar-nav > li > a:focus {
    color: var(--material-text-primary-grey);
}
.navbar-grey .navbar-nav > .active > a,
.navbar-grey .navbar-nav > .active > a:hover,
.navbar-grey .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-grey);
    background: rgba(0,0,0,.2);
}
.navbar-grey .navbar-nav > .open > a,
.navbar-grey .navbar-nav > .open > a:hover,
.navbar-grey .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-grey);
    background: rgba(0,0,0,.2);
}
.navbar-grey .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-grey);
    border-bottom-color: var(--material-text-primary-grey);
}
.navbar-grey .navbar-nav > .dropdown > a:hover .caret,
.navbar-grey .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-grey);
    border-bottom-color: var(--material-text-primary-grey);
}
.navbar-grey .navbar-nav > .open > a .caret,
.navbar-grey .navbar-nav > .open > a:hover .caret,
.navbar-grey .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-grey);
    border-bottom-color: var(--material-text-primary-grey);
}
.navbar-grey .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-grey .navbar-toggle:hover,
.navbar-grey .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-grey .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-grey);
}
@media (max-width: 767px) {
    .navbar-grey .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-grey);
    }
    .navbar-grey .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-grey .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-grey);
    }
}



/* blue-grey */
.navbar-blue-grey {
    background-color: var(--material-color-primary-blue-grey);
}
.navbar-blue-grey .navbar-brand {
    color: var(--material-text-primary-blue-grey);
}
.navbar-blue-grey .navbar-brand:hover,
.navbar-blue-grey .navbar-brand:focus {
    color: var(--material-text-primary-blue-grey);
}
.navbar-blue-grey .navbar-nav > li > a {
    color: var(--material-text-primary-blue-grey);
}
.navbar-blue-grey .navbar-nav > li > a:hover,
.navbar-blue-grey .navbar-nav > li > a:focus {
    color: var(--material-text-primary-blue-grey);
}
.navbar-blue-grey .navbar-nav > .active > a,
.navbar-blue-grey .navbar-nav > .active > a:hover,
.navbar-blue-grey .navbar-nav > .active > a:focus {
    color: var(--material-text-primary-blue-grey);
    background: rgba(0,0,0,.2);
}
.navbar-blue-grey .navbar-nav > .open > a,
.navbar-blue-grey .navbar-nav > .open > a:hover,
.navbar-blue-grey .navbar-nav > .open > a:focus {
    color: var(--material-text-primary-blue-grey);
    background: rgba(0,0,0,.2);
}
.navbar-blue-grey .navbar-nav > .dropdown > a .caret {
    border-top-color: var(--material-text-primary-blue-grey);
    border-bottom-color: var(--material-text-primary-blue-grey);
}
.navbar-blue-grey .navbar-nav > .dropdown > a:hover .caret,
.navbar-blue-grey .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: var(--material-text-primary-blue-grey);
    border-bottom-color: var(--material-text-primary-blue-grey);
}
.navbar-blue-grey .navbar-nav > .open > a .caret,
.navbar-blue-grey .navbar-nav > .open > a:hover .caret,
.navbar-blue-grey .navbar-nav > .open > a:focus .caret {
    border-top-color: var(--material-text-primary-blue-grey);
    border-bottom-color: var(--material-text-primary-blue-grey);
}
.navbar-blue-grey .navbar-toggle {
    border-color: rgba(0,0,0,.2);
}
.navbar-blue-grey .navbar-toggle:hover,
.navbar-blue-grey .navbar-toggle:focus {
    background: rgba(0,0,0,.2);
}
.navbar-blue-grey .navbar-toggle .icon-bar {
    background-color: var(--material-text-primary-blue-grey);
}
@media (max-width: 767px) {
    .navbar-blue-grey .navbar-nav .open .dropdown-menu > li > a {
        color: var(--material-text-primary-blue-grey);
    }
    .navbar-blue-grey .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-blue-grey .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--material-text-primary-blue-grey);
    }
}

/*****************************************************\
                       BUTTONS
\*****************************************************/

.btn-red, .btn-red:hover, .btn-red:active, .btn-red:focus {
    background-color: var(--material-color-primary-red);
    color: var(--material-text-primary-red);
}

.btn-pink, .btn-pink:hover, .btn-pink:active, .btn-pink:focus {
    background-color: var(--material-color-primary-pink);
    color: var(--material-text-primary-pink);
}

.btn-purple, .btn-purple:hover, .btn-purple:active, .btn-purple:focus {
    background-color: var(--material-color-primary-purple);
    color: var(--material-text-primary-purple);
}

.btn-deep-purple, .btn-deep-purple:hover, .btn-deep-purple:active, .btn-deep-purple:focus {
    background-color: var(--material-color-primary-deep-purple);
    color: var(--material-text-primary-deep-purple);
}

.btn-indigo, .btn-indigo:hover, .btn-indigo:active, .btn-indigo:focus {
    background-color: var(--material-color-primary-indigo);
    color: var(--material-text-primary-indigo);
}

.btn-blue, .btn-blue:hover, .btn-blue:active, .btn-blue:focus {
    background-color: var(--material-color-primary-blue);
    color: var(--material-text-primary-blue);
}

.btn-light-blue, .btn-light-blue:hover, .btn-light-blue:active, .btn-light-blue:focus {
    background-color: var(--material-color-primary-light-blue);
    color: var(--material-text-primary-light-blue);
}

.btn-cyan, .btn-cyan:hover, .btn-cyan:active, .btn-cyan:focus {
    background-color: var(--material-color-primary-cyan);
    color: var(--material-text-primary-cyan);
}

.btn-teal, .btn-teal:hover, .btn-teal:active, .btn-teal:focus {
    background-color: var(--material-color-primary-teal);
    color: var(--material-text-primary-teal);
}

.btn-green, .btn-green:hover, .btn-green:active, .btn-green:focus {
    background-color: var(--material-color-primary-green);
    color: var(--material-text-primary-green);
}

.btn-light-green, .btn-light-green:hover, .btn-light-green:active, .btn-light-green:focus {
    background-color: var(--material-color-primary-light-green);
    color: var(--material-text-primary-light-green);
}

.btn-lime, .btn-lime:hover, .btn-lime:active, .btn-lime:focus {
    background-color: var(--material-color-primary-lime);
    color: var(--material-text-primary-lime);
}

.btn-yellow, .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus {
    background-color: var(--material-color-primary-yellow);
    color: var(--material-text-primary-yellow);
}

.btn-amber, .btn-amber:hover, .btn-amber:active, .btn-amber:focus {
    background-color: var(--material-color-primary-amber);
    color: var(--material-text-primary-amber);
}

.btn-orange, .btn-orange:hover, .btn-orange:active, .btn-orange:focus {
    background-color: var(--material-color-primary-orange);
    color: var(--material-text-primary-orange);
}

.btn-deep-orange, .btn-deep-orange:hover, .btn-deep-orange:active, .btn-deep-orange:focus {
    background-color: var(--material-color-primary-deep-orange);
    color: var(--material-text-primary-deep-orange);
}

.btn-brown, .btn-brown:hover, .btn-brown:active, .btn-brown:focus {
    background-color: var(--material-color-primary-brown);
    color: var(--material-text-primary-brown);
}

.btn-grey, .btn-grey:hover, .btn-grey:active, .btn-grey:focus {
    background-color: var(--material-color-primary-grey);
    color: var(--material-text-primary-grey);
}

.btn-blue-grey, .btn-blue-grey:hover, .btn-blue-grey:active, .btn-blue-grey:focus {
    background-color: var(--material-color-primary-blue-grey);
    color: var(--material-text-primary-blue-grey);
}

/*****************************************************\
                         TEXT
\*****************************************************/

.text-red {
    color: var(--material-color-primary-red);
}

.text-pink {
    color: var(--material-color-primary-pink);
}

.text-purple {
    color: var(--material-color-primary-purple);
}

.text-deep-purple {
    color: var(--material-color-primary-deep-purple);
}

.text-indigo {
    color: var(--material-color-primary-indigo);
}

.text-blue {
    color: var(--material-color-primary-blue);
}

.text-light-blue {
    color: var(--material-color-primary-light-blue);
}

.text-cyan {
    color: var(--material-color-primary-cyan);
}

.text-teal {
    color: var(--material-color-primary-teal);
}

.text-green {
    color: var(--material-color-primary-green);
}

.text-light-green {
    color: var(--material-color-primary-light-green);
}

.text-lime {
    color: var(--material-color-primary-lime);
}

.text-yellow {
    color: var(--material-color-primary-yellow);
}

.text-amber {
    color: var(--material-color-primary-amber);
}

.text-orange {
    color: var(--material-color-primary-orange);
}

.text-deep-orange {
    color: var(--material-color-primary-deep-orange);
}

.text-brown {
    color: var(--material-color-primary-brown);
}

.text-grey {
    color: var(--material-color-primary-grey);
}

.text-blue-grey {
    color: var(--material-color-primary-blue-grey);
}

/*****************************************************\
                        LABELS
\*****************************************************/

.label-red {
    background-color: var(--material-color-primary-red);
    color: var(--material-text-primary-red);
}

.label-pink {
    background-color: var(--material-color-primary-pink);
    color: var(--material-text-primary-pink);
}

.label-purple {
    background-color: var(--material-color-primary-purple);
    color: var(--material-text-primary-purple);
}

.label-deep-purple {
    background-color: var(--material-color-primary-deep-purple);
    color: var(--material-text-primary-deep-purple);
}

.label-indigo {
    background-color: var(--material-color-primary-indigo);
    color: var(--material-text-primary-indigo);
}

.label-blue {
    background-color: var(--material-color-primary-blue);
    color: var(--material-text-primary-blue);
}

.label-light-blue {
    background-color: var(--material-color-primary-light-blue);
    color: var(--material-text-primary-light-blue);
}

.label-cyan {
    background-color: var(--material-color-primary-cyan);
    color: var(--material-text-primary-cyan);
}

.label-teal {
    background-color: var(--material-color-primary-teal);
    color: var(--material-text-primary-teal);
}

.label-green {
    background-color: var(--material-color-primary-green);
    color: var(--material-text-primary-green);
}

.label-light-green {
    background-color: var(--material-color-primary-light-green);
    color: var(--material-text-primary-light-green);
}

.label-lime {
    background-color: var(--material-color-primary-lime);
    color: var(--material-text-primary-lime);
}

.label-yellow {
    background-color: var(--material-color-primary-yellow);
    color: var(--material-text-primary-yellow);
}

.label-amber {
    background-color: var(--material-color-primary-amber);
    color: var(--material-text-primary-amber);
}

.label-orange {
    background-color: var(--material-color-primary-orange);
    color: var(--material-text-primary-orange);
}

.label-deep-orange {
    background-color: var(--material-color-primary-deep-orange);
    color: var(--material-text-primary-deep-orange);
}

.label-brown {
    background-color: var(--material-color-primary-brown);
    color: var(--material-text-primary-brown);
}

.label-grey {
    background-color: var(--material-color-primary-grey);
    color: var(--material-text-primary-grey);
}

.label-blue-grey {
    background-color: var(--material-color-primary-blue-grey);
    color: var(--material-text-primary-blue-grey);
}

/*****************************************************\
                    PROGRESS BARS
\*****************************************************/

.progress-bar-red {
    background-color: var(--material-color-primary-red);
    color: var(--material-text-primary-red);
}

.progress-bar-pink {
    background-color: var(--material-color-primary-pink);
    color: var(--material-text-primary-pink);
}

.progress-bar-purple {
    background-color: var(--material-color-primary-purple);
    color: var(--material-text-primary-purple);
}

.progress-bar-deep-purple {
    background-color: var(--material-color-primary-deep-purple);
    color: var(--material-text-primary-deep-purple);
}

.progress-bar-indigo {
    background-color: var(--material-color-primary-indigo);
    color: var(--material-text-primary-indigo);
}

.progress-bar-blue {
    background-color: var(--material-color-primary-blue);
    color: var(--material-text-primary-blue);
}

.progress-bar-light-blue {
    background-color: var(--material-color-primary-light-blue);
    color: var(--material-text-primary-light-blue);
}

.progress-bar-cyan {
    background-color: var(--material-color-primary-cyan);
    color: var(--material-text-primary-cyan);
}

.progress-bar-teal {
    background-color: var(--material-color-primary-teal);
    color: var(--material-text-primary-teal);
}

.progress-bar-green {
    background-color: var(--material-color-primary-green);
    color: var(--material-text-primary-green);
}

.progress-bar-light-green {
    background-color: var(--material-color-primary-light-green);
    color: var(--material-text-primary-light-green);
}

.progress-bar-lime {
    background-color: var(--material-color-primary-lime);
    color: var(--material-text-primary-lime);
}

.progress-bar-yellow {
    background-color: var(--material-color-primary-yellow);
    color: var(--material-text-primary-yellow);
}

.progress-bar-amber {
    background-color: var(--material-color-primary-amber);
    color: var(--material-text-primary-amber);
}

.progress-bar-orange {
    background-color: var(--material-color-primary-orange);
    color: var(--material-text-primary-orange);
}

.progress-bar-deep-orange {
    background-color: var(--material-color-primary-deep-orange);
    color: var(--material-text-primary-deep-orange);
}

.progress-bar-brown {
    background-color: var(--material-color-primary-brown);
    color: var(--material-text-primary-brown);
}

.progress-bar-grey {
    background-color: var(--material-color-primary-grey);
    color: var(--material-text-primary-grey);
}

.progress-bar-blue-grey {
    background-color: var(--material-color-primary-blue-grey);
    color: var(--material-text-primary-blue-grey);
}