@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
}

*:focus {
  outline: none;
}

body {
  margin: 0;
  padding: 0;
  background-image: url(images/background.png);
}

div#bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #212121;
  display: flex;
}

div#bottom-bar-left {
  width: 23%;
  display: flex;
}

div#windows-icon i {
  line-height: 50px;
}

div#windows-icon:hover {
  color: rgb(242, 242, 242);
  background: rgb(20, 20, 20);
}

div#windows-icon {
  width: 48px;
  color: white;
  font-size: 20px;
  text-align: center;
  transition: all .3s ease-in-out;
}

div#search-bar {
  width: calc(100% - 98px);
  display: flex;
  text-align: center;
}

div#search-bar input {
  border: none;
  width: 100%;
  height: 50px;
  font-size: 15px;
  padding: 0px 5px;
  background: rgb(242, 242, 242);
}

div#search-bar i {
  font-size: 18px;
  line-height: 50px;
  background: rgb(242, 242, 242);
  width: 50px;
}

div#search-bar input, div#search-bar i.fa-circle {
  transition: all .2s ease-in-out;
}

div#search-bar:hover input, div#search-bar:hover i.fa-circle {
  background: white;
}

div#activeapps {
  width: 50px;
  height: 50px;
  background-image: url(images/icons/activeapps.png);
  background-repeat: no-repeat;
  background-position: center;
}

div#bottom-bar-middle {
  width: 63%;
  display: flex;
}

.bottom-app {
  width: 50px;
  height: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 45%;
}

.bottom-app.explorer {
  background-image: url(images/icons/explorer.png);
}

.bottom-app.chrome {
  background-image: url(images/icons/chrome.png);
}

.bottom-app.edge {
  background-image: url(images/icons/edge.png);
}

.bottom-app.discord {
  background-image: url(images/icons/discord.png);
}

.bottom-app.league {
  background-image: url(images/icons/leagueoflegends.png);
}

.bottom-app.spotify {
  background-image: url(images/icons/spotify.png);
}

.bottom-app.steam {
  background-image: url(images/icons/steam.png);
}

div#bottom-bar-right::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 0;
  height: 50px;
  width: 1px;
  background: white;
}

div#bottom-bar-right {
  display: flex;
  width: 14%;
  color: white;
  text-align: center;
  font-size: 15px;
  padding: 0px 15px;
  position: relative;
}

.left-bar-icon i {
  line-height: 50px;
  font-weight: 100;
}

.left-bar-icon {
  width: 25px;
}

.left-bar-lang {
  font-size: 11px;
  line-height: 50px;
  padding: 0px 5px;
}

.left-bar-time {
  font-size: 12px;
  padding: 6px 5px;
}

.left-bar-time .time {
  padding-bottom: 4px;
}

div#bottom-bar-right div {
  transition: all .2s ease-in-out;
}

div#bottom-bar-right div:hover {
  color: rgb(242, 242, 242);
  background: rgb(20, 20, 20);
}