:root {
  --background: white;
  --card: #ddd;
  --accent: #1565C0;
  --text: #4B4D4F ;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: var(--background);
    margin-bottom: 20px;
  }
  
  main {
    flex: 1 0 auto;
  }
  
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
  }
  
  header, main, footer {
    padding-left: 0px;
  }
  
  img {
    max-width: 100%;
    max-height: 100%;
  }
  
/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--background); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--accent); 
}

.product-sans {
  font-family: "Product Sans";
}
.pointer {
  cursor: pointer;
}

.sidenav li>a>i, .sidenav li>a>i.material-icons {
    margin:0 0 0 0;

}

#app {
  padding-bottom: 10px !important;
}

.card-action a {
  color: var(--accent) !important;
  background-color: var(--background) !important;

}
.card {
  margin: 0px;
  background-color: var(--background) !important;
}
.accent {
  color: var(--accent);
}

.welcome {
  padding-bottom: 20px;
}

.line {
  border-top: 1px solid var(--accent);

}
.welcome {
  font-weight: bold;
}

#slide-out, a {
  background-color: var(--background) !important;
  color: var(--text) !important;
}

.black-text {
  color: var(--text) !important;
}

a{
  cursor: pointer;
}
pre{
  word-break:break-all;
  overflow:hidden;
  white-space:pre-line;
  font-size: 14px;
  font-family: "Product Sans";
}
.sidenav-trigger,.sidenav-trigger:hover  {
  background-color: var(--accent) !important;
}
a:hover{
  background-color: var(--background) !important;
  color: var(--accent) !important;
}
.card a:hover{
  background: var(--card) !important;
}
table a {
  color: var(--accent) !important;
  background-color: var(--background) !important;
}
#homelogo {
  fill: var(--accent);
}
.error {
  fill: var(--accent);
}
li a {
  background-color: var(--background) !important;
}
#sublogo {
  fill: var(--accent);
}
#sublogo-svg {
  margin: 12.5%;
}
#settings {
  position: fixed;
  right: 0;
  top:10px;
  padding: 3px;
}
.nav-wrapper{
  background-color: var(--accent);
}

.menu {
  height: 280px;
  width: 220px;
  background-color: var(--background);
  position: fixed;
  right: 0px;
  top: 45px;
  margin: 15px;
  margin-bottom: 35px;
  padding: 4px;
  text-align: center;
  z-index: 10;
  border-radius: 2px;
}

.menu ul li{
  float: left;
  margin: 2.5px;
}

.ball {
  width: 30px;
  height: 30px;
  border-radius: 2px;
}

i {
  color: var(--accent) !important;
  margin-right: 7px !important;
}
.bar-logo:hover {
  background-color: transparent !important;
}
.device-name {
  color: var(--accent);
  text-transform: uppercase;
  font-weight: bold;
}
#home-desc{
  margin-top: 30px;
}
#home-desc .card{
  width: 100%;
  min-height: 80px;
  padding:15px;
  font-size: 20px;
}

.btn-flat {
  color: var(--accent) !important;
  background-color: transparent !important;
}
#modal-title {
  padding-bottom: 10px;
  color: var(--accent);
}
.modal, .modal-footer{
  background-color: var(--background) !important;
}
.modal-content {
  padding-bottom: 0px !important;
}

@media only screen and (min-width: 1000px) {
    #slide-out {
        transform: translateX(0%);
    }
    .center {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    body{
      padding-left: 300px;
    }
    .nav-wrapper {
      display: none;
    }
    nav {
      background-color: var(--accent);
    }
    .navbar-fixed {
      display: none;
    }
    .bar-settings {
      display: block;
    }
    .menu {
      top: 30px;
    }
}

.search-link {
  font-family: "Product Sans";
  background-color: transparent !important;
  color: var(--accent) !important;
  padding: 10px !important;
  margin-left: 5px !important;
  display: block !important;
  text-align: left !important;
  padding-left: 5px !important;

}
input {
  padding: 0px !important;
  margin: 0px !important;
  padding-left: 5px !important;
  border-bottom: none !important;
  color: var(--accent) !important;

}
input::placeholder {
  color: var(--accent) !important;
}
input:focus {
  border-bottom: none !important;
  box-shadow: none !important;
}
.is-s {
  font-size: 24px !important;
  margin-left: 10px !important;
  margin-right: 0px !important;
  vertical-align: middle;
}
.square {
  border: 1px solid var(--card);
  border-radius: 5px;
}
.desc {
  font-size: 19px;
  padding: 10px;
  margin: 5px;
}
.builds {
  padding: 15px;
}
.fail {
  padding: 20px;
}