#top-bar > nav > a {
  transition: color ease 0.5s;
}

#logo,
body > header > div:first-child > a {
  transition: background-color ease 0.25s;
}

#logo:hover,
header > div:first-child > a:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.sign-out:hover {
  background-color: #ed5654 !important;
}

.highlight,
.highlight a,
.highlight a:hover,
.highlight-red,
.highlight-red a,
.highlight-red a:hover {
  color: #000 !important;
}

.highlight {
  background-color: rgb(255, 220, 0) !important;
}

.highlight-red {
  background-color: #c80000 !important;
}

/* BUTTONS */

button.green,
.button-green {
    background-color: #006633;
    border: 1px solid #00994D;
}

button.green:hover,
button.green:focus,
.button-green:hover, 
.button-green:focus,
button.hover-green:hover,
button.hover-green:focus,
.button-hover-green:hover,
.button-hover-green:focus {
    background-color: #00994D;
    border-color: #00CC66;
    box-shadow: 0px 4px 20px #006633;
}

button.hover-green > .mdi,
.button-hover-green > .mdi {
    color: #00994D;
}

button.orange,
.button-orange {
    background-color: #CC6400;
    border: 1px solid #FF7D00;
}

button.orange:hover,
button.orange:focus,
.button-orange:hover, 
.button-orange:focus,
button.hover-orange:hover,
button.hover-orange:focus,
.button-hover-orange:hover,
.button-hover-orange:focus {
    background-color: #FF7D00;
    border-color: #FF9733;
    box-shadow: 0px 4px 20px #CC6400;
}

button.hover-orange > .mdi,
.button-hover-orange > .mdi {
    color: #FF7D00;
}

button.red,
.button-red {
    background-color: #CC2200;
    border: 1px solid #FF2B00;
}

button.red:hover,
button.red:focus,
.button-red:hover, 
.button-red:focus,
button.hover-red:hover,
button.hover-red:focus,
.button-hover-red:hover,
.button-hover-red:focus {
    background-color: #FF2B00;
    border-color: #FF5533;
    box-shadow: 0px 4px 20px #CC2200;
}

button.hover-red > .mdi,
.button-hover-red > .mdi {
    color: #FF2B00;
}

button.purple,
.button-purple {
    background-color: #6800CC;
    border: 1px solid #8000FF;
}

button.purple:hover,
button.purple:focus,
.button-purple:hover, 
.button-purple:focus,
button.hover-purple:hover,
button.hover-purple:focus,
.button-hover-purple:hover,
.button-hover-purple:focus {
    background-color: #8000FF;
    border-color: #9933FF;
    box-shadow: 0px 4px 20px #6800CC;
}

button.hover-purple > .mdi,
.button-hover-purple > .mdi {
    color: #8000FF;
}

button.green:hover,
button.green:focus,
button.green:hover > .mdi,
button.green:focus > .mdi,
.button-green:hover, 
.button-green:focus,
.button-green:hover > .mdi, 
.button-green:focus > .mdi,
button.hover-green:hover,
button.hover-green:focus,
button.hover-green:hover > .mdi,
button.hover-green:focus > .mdi,
.button-hover-green:hover,
.button-hover-green:focus,
.button-hover-green:hover > .mdi,
.button-hover-green:focus > .mdi,
button.orange:hover,
button.orange:focus,
button.orange:hover > .mdi,
button.orange:focus > .mdi,
.button-orange:hover, 
.button-orange:focus,
.button-orange:hover > .mdi, 
.button-orange:focus > .mdi,
button.hover-orange:hover,
button.hover-orange:focus,
button.hover-orange:hover > .mdi,
button.hover-orange:focus > .mdi,
.button-hover-orange:hover,
.button-hover-orange:focus,
.button-hover-orange:hover > .mdi,
.button-hover-orange:focus > .mdi,
button.red:hover,
button.red:focus,
button.red:hover > .mdi,
button.red:focus > .mdi,
.button-red:hover, 
.button-red:focus,
.button-red:hover > .mdi, 
.button-red:focus > .mdi,
button.hover-red:hover,
button.hover-red:focus,
button.hover-red:hover > .mdi,
button.hover-red:focus > .mdi,
.button-hover-red:hover,
.button-hover-red:focus,
.button-hover-red:hover > .mdi,
.button-hover-red:focus > .mdi,
button.purple:hover,
button.purple:focus,
button.purple:hover > .mdi,
button.purple:focus > .mdi,
.button-purple:hover, 
.button-purple:focus,
.button-purple:hover > .mdi, 
.button-purple:focus > .mdi,
button.hover-purple:hover,
button.hover-purple:focus,
button.hover-purple:hover > .mdi,
button.hover-purple:focus > .mdi,
.button-hover-purple:hover,
.button-hover-purple:focus,
.button-hover-purple:hover > .mdi,
.button-hover-purple:focus > .mdi {
    color: #fff !important;
}