* {

  font-family: 'M PLUS Rounded 1c', sans-serif;


  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;

}

body {
  background: linear-gradient(-45deg, #ee582a, #b01b54, #264deb, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

h1 {
  color: #FFF;
}

   .button-container {
      display: flex;
    }

    .button-container {
      display: grid;
    }

    #editBtn,#addBtn {
      grid-column: 1;
      grid-row: 1;
    }

/*searchbox*/

.custom_search {
  color: white !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid #FFF;
  width: 240px !important;
}

.custom_search:focus {
  box-shadow: none;
  background: transparent;
  border-bottom: 2px solid #FFF;
}

.custom_search+.search_span {
  position: absolute;
  bottom: 0;
  width: 0;
  left: 50%;
  transition: width 0.5s, left 0.5s;
}

.custom_search:focus+.search_span {
  width: 240px;
  left: 0;
  border-bottom: 2px solid #c128ea;
}

.custom_search::placeholder {
  color: #FFF !important;
}

.search_button {

  width: 300px;
  border: 0;
}

.search_button:focus {
  border: 0;
  box-shadow: none;
}

.search_button:active {
  background: #8e24aa !important;
  box-shadow: none !important;
}

.search_button:hover {
  background:#f9f9f9;
   
  
}

/*ripple effect*/

.tx--white {
  color: #fff;
}

[ripple] {
  position: relative;
  overflow: hidden;
}

[ripple] .ripple--container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

[ripple] .ripple--container span {
  transform: scale(0);
  border-radius: 100%;
  position: absolute;
  opacity: 0.30;
  background-color: #fff;
  animation: ripple 1000ms;
}

@-moz-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}

@-webkit-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}

@-o-keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}

/*navbar*/

.navbar {
  background: #222 !important;
  line-height: 2rem !important;
}

.navbar .navbar-brand {
  color: #FFF !important;
}

.navbar-nav .active a {
  color: #c128ea !important;
}

.navbar-nav .nav-item .nav-link {
  color: #FFF;
}

.dropdown-menu {
  background: #22221E;
}

.dropdown-menu .dropdown-item {
  color: #FFF;
  transition: all 0.2s;
}

.dropdown-menu .dropdown-item:hover {
  background: #8e24aa;
  color: #FFF;
}

.navbar-toggler-icon {
  color: #FFF !important;
}

.navbar-dark .navbar-toggler {
  border-color: #FFFFFF !important;
}

.bg-white{
  height: 100%;
  box-shadow: 10px 10px 0 black;
}
.bg-white:hover{
  box-shadow: 10px 10px 10px black;
}