* {
  outline: none; }

body {
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  background-color: #e6ecf0;
  font-weight: 500; }

.material-icons {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.btn {
  color: #1481c3;
  border: 1px solid #1481c3;
  border-radius: 100px;
  box-shadow: none; }
  .btn:hover {
    color: #af34af; }

.header, #controls span.prefix {
  font-family: 'Lobster', cursive;
  text-align: center;
  color: #1481c3;
  top: 0; }

.header .header-screen_name {
  color: #af34af; }

#controls .card {
  justify-content: space-around;
  padding: 1rem; }
  #controls .card .input-field {
    /* label color */
    /* icon prefix focus color */ }
    #controls .card .input-field label {
      color: #1481c3 !important; }
    #controls .card .input-field input {
      font-weight: 500;
      color: #af34af; }
      #controls .card .input-field input[type=text] {
        /* label underline focus color */ }
        #controls .card .input-field input[type=text]:focus {
          border-bottom: 1px solid #1481c3 !important;
          box-shadow: 0 1px 0 0 #1481c3 !important;
          /* label focus color */ }
          #controls .card .input-field input[type=text]:focus + label {
            color: #1481c3 !important; }
    #controls .card .input-field .prefix {
      color: #1481c3; }
      #controls .card .input-field .prefix.active, #controls .card .input-field .prefix.valid {
        color: #af34af; }
      #controls .card .input-field .prefix.invalid {
        color: #c53d3d; }
        #controls .card .input-field .prefix.invalid + input {
          color: #c53d3d;
          border-bottom: 1px solid #c53d3d !important;
          box-shadow: 0 1px 0 0 #c53d3d !important; }

#tasks li {
  margin: 0; }

.collapsible-header {
  text-align: left;
  transition: 0.5s background-color ease-in-out 2s; }
  .collapsible-header:focus {
    background-color: white !important; }
  .collapsible-header.highlight {
    animation: highlight-animation 1s cubic-bezier(0.24, 0, 0.38, 1) 3; }

@keyframes highlight-animation {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

.collapsible-body {
  background-color: white; }
  .collapsible-body h5 {
    margin-top: 0; }
  .collapsible-body .description-indicator {
    color: black; }

[data-task-id] {
  transition: color 0.6s ease-out; }
  [data-task-id] .task-message {
    flex-grow: 1; }
  [data-task-id][data-task-status="ok"] {
    color: #088810; }
  [data-task-id][data-task-status="ban"] {
    color: #c53d3d; }
  [data-task-id][data-task-status="warn"] {
    color: orange; }
  [data-task-id] .gears {
    width: 2rem;
    margin-right: 1rem;
    background: transparent url("../../img/gears.svg") bottom center no-repeat;
    background-size: contain;
    margin-right: 7px; }

.emoji {
  width: 1em;
  height: 1em;
  vertical-align: text-top; }

footer {
  font-size: .875em;
  margin-top: 6em;
  color: #5a5a5a; }
  footer a {
    color: #1481c3;
    text-decoration: none; }
  footer p {
    margin-bottom: 0.25em; }

@media only screen and (min-width: 993px) {
  #toast-container {
    top: unset;
    bottom: 7%;
    max-width: 90%; } }

#toast-container .toast.qf-setting-toast {
  background-color: #c53d3d;
  color: #eeff41;
  font-size: unset;
  font-weight: unset; }

#donate-modal h4, #donate-modal h6 {
  color: #af34af; }

#donate-modal ul {
  padding-left: 1.5em;
  list-style-type: none; }
  #donate-modal ul > li {
    padding-bottom: 1em;
    text-indent: -0.9em; }
    #donate-modal ul > li:last-child {
      padding: 0; }
    #donate-modal ul > li i.material-icons {
      font-size: 16px;
      padding-right: 0.3em; }