body {
  font-family: tahoma;
  color: #282828;
  margin: 0px;
}

.nav-bar {
  background: linear-gradient(-90deg, #84CF6A, #16C0B0);
  height: 60px;
  margin-bottom: 15px;

}

.nav-bar span {
  margin-left: 60px;
  margin-top: 40px;
  font-size: 2rem;
  font-family: 'MuseoModerno', cursive;
}


.nav-bar img{
  width: 50px;
  height: 50px;
}

.color-box {
  width: 40px;
  height: 40px;
  margin-top: 5px;
}

button {
  margin-top: 30px;
  border: none;
  background-color: #1E95EA;
  color: white;
  height: 40px;
  width: 100px;
  font-size: 14px;
}

.disabledButton {
  background-color: #d8d8d8;
}

input {
  width: 100%;
  height: 25px;
  margin-bottom: 20px;
}


#app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.search-wrapper {
  position: relative;
  width: 300px;
 
}

.search-wrapper i{
  display: inline-block;
}

.search-wrapper label{
  display: none;
}

.search-wrapper i {
  
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
  top: 8px;
  left: 12px;
  z-index: -1;
  transition: .15s all ease-in-out;
  margin-right: 12px;

}

.search-wrapper input {
  padding: 4px 12px;
  color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.12);
  transition: .15s all ease-in-out;
  background: white;
  display:inline-block;
  width:80%;
}

.search-wrapper input:focus {
  outline: none;
  transform: scale(1.05);
}

.search-wrapper input:focus+i {
  font-size: 16px;
  transform: translateY(+24px) translateX(+12px);
}

.search-wrapper input::-webkit-input-placeholder {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 100;
}

.wrapper {
  display: flex;
  max-width: 90%;
  flex-wrap: wrap;
  padding-top: 12px;
}

.card {
  box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
  max-width: 200px;
  margin: 8px;
  margin-left: 4px;
  height: 75px;
  margin-bottom: 0px;
  transition: .15s all ease-in-out;
  padding: 5px;
  flex-direction: unset !important;
}

.cardHeader{
  width: 50px !important;
  height: 50px;
  display:block !important;
}

.cardFooter{
  width: 100%;
  height: 20px;
  display:block !important;
  margin-bottom: 0px;
}


.icon{
  width: 32px;
  height: 32px;
}

.icon img{
  width: 32px;
  height: 32px;
}

.card:hover {
  transform: scale(1.1);
}

.card a {
  text-decoration: none;
  padding: 4px;
  color: #03A9F4;
  font-size: 14px;
  display: inline-block;
  max-width: 150px;
  align-items: center;
  vertical-align: middle;
  font-family: 'Roboto', sans-serif;
}

.card small {
  text-decoration: italic;
  font-size: 10px;
  padding: 2px;
  padding-left: 6px;
  display: block;
  
  align-items: center;
}

.card-title{
  margin-bottom: 0px !important;
}

.hotpink {
  background: hotpink;
}

.green {
  background: green;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}