.search::placeholder {
  font-size: 2.0rem;
}

.btn {
  font-weight: 50;
}

.home {
  font-size: 1.0rem;
}

.Nav_logo{
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.margin{
  margin-left: 4px;
}

    * {

      font-family: 'IBM Plex 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;
    }

    .button-container {
      display: flex;
    }

    .button-container {
      display: grid;
    }

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

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

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

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

    h1 {
      color: #FFF;
    }

    /*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: #8e24aa;
    }

    /*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;
    }
    #addBtn{
  max-width:30vw;
}