#Pasilobus-cookie-bar {
  z-index: 99999999999;
}

.Pasilobus-cookie-bar {
    overflow: hidden;  /* Hide the element content, while height = 0 */
    height: 0;
    opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}

.Pasilobus-cookie-bar.active {
  display: flex;
  justify-content: space-between;
  left: 0;
  height: auto; 
  opacity: 1;
  transition: height 0ms 0ms, opacity 600ms 0ms;
  height: auto;
  width: 100%;
  z-index: 99999;
}

.Pasilobus-cookie-bar--wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px 30px;
}
 
@media only screen and (max-width: 600px) {
  .Pasilobus-cookie-bar.active { 
    flex-direction: column;
  }
}

  .Pasilobus-cookie-bar--wrapper {
    flex-direction: column;
  }

  .Pasilobus-cookie-bar[data-position=top] {   
    position: absolute;
    top: 0;
  }
  .Pasilobus-cookie-bar[data-position=bottom] {
    position: fixed;
    bottom: 0;
  }
  
  .Pasilobus-cookie-bar[data-textalign=right][data-style=bar]  {
    text-align: right;
  }

  @media only screen and (max-width: 600px) {
    .Pasilobus-cookie-bar.active[data-textalign=right][data-style=bar]  { 
      flex-direction: column-reverse;
    }
  }

  .Pasilobus-cookie-bar[data-textalign=center][data-style=bar]  {
    text-align: center;
  }

  .Pasilobus-cookie-bar[data-textalign=center][data-style=bar] {
    text-align: center;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .Pasilobus-cookie-bar[data-textalign=center][data-style=bar] .Pasilobus-cookie-bar--wrapper {
    display: inline;
  }

  .Pasilobus-cookie-bar[data-textalign=right] .Pasilobus-cookie-bar-text {
    justify-content: flex-end;
    order: 2;
  }

  .Pasilobus-cookie-bar[data-textalign=left] .Pasilobus-cookie-bar-text {
    justify-content: flex-start;
  }

  .Pasilobus-cookie-bar[data-style=overlay] .Pasilobus-cookie-bar--wrapper {
    margin: 0 1rem; 
    max-width: 600px;
  }

  .Pasilobus-cookie-bar[data-style=overlay][data-alignment=right] {
    margin: 1rem 0; 
    right: 0;
    display: flex;
    justify-content: flex-end;
  }

  .Pasilobus-cookie-bar[data-style=overlay][data-alignment=left] {
    margin: 1rem 0; 
    right: 0;
    display: flex;
    justify-content: flex-start;
  }

  .Pasilobus-cookie-bar[data-style=overlay][data-alignment=center] {
    margin: 1rem 0; 
    right: 0;
    display: flex;
    justify-content: center;
  }

  @media only screen and (max-width: 600px) {
    .Pasilobus-cookie-bar.active[data-style=overlay] {
      flex-direction: row;
    }
    
    .Pasilobus-cookie-bar[data-style=overlay] .Pasilobus-cookie-bar--wrapper {
      margin: 0 1rem; 
      max-width: 350px;
    }

    [data-textalign=center][data-style=overlay]  {
      text-align: center;
    }

    [data-textalign=left][data-style=overlay]  {
      text-align: left;
    }

    [data-textalign=right][data-style=overlay]  {
      text-align: right;
    }

    [data-alignment=left][data-style=overlay] .Pasilobus-cookie-bar-actions {
      justify-content: flex-start;
    }

    [data-alignment=right][data-style=overlay] .Pasilobus-cookie-bar-actions {
      justify-content: flex-end;
    }

    [data-textalign=right][data-style=overlay] .Pasilobus-cookie-bar-actions {
      order: 3 !important;
    }

    [data-alignment=center][data-style=overlay] .Pasilobus-cookie-bar-actions {
      justify-content: center;
    }
  }

.Pasilobus-cookie-bar-title {
  line-height: 1.25;
  margin: 0 0 10px 0;
  font-size: 22px;
}

.Pasilobus-cookie-bar-description p {
  display: block;
  line-height: 20px;
  margin: 0 0 1rem 0;
  font-size: 16px;
}

.Pasilobus-cookie-bar[data-textalign=right] .Pasilobus-cookie-bar-actions {
  order: 1;
}

.Pasilobus-cookie-bar[data-textalign=left] .Pasilobus-cookie-bar-actions {
    order: 2;
}

.Pasilobus-cookie-bar-actions {
  display: flex;
  align-items: center;
}

  [data-textalign=left] .Pasilobus-cookie-bar-actions {
    justify-content: flex-end;
  }
  [data-textalign=right] .Pasilobus-cookie-bar-actions {
    justify-content: flex-start;
  }
  [data-textalign=center] .Pasilobus-cookie-bar-actions {
    justify-content: center;
  }

  .Pasilobus-cookie-bar-actions :not([hidden]) ~ :not([hidden]) {
    margin-left: 1rem;
  }

.Pasilobus-cookie-bar-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  padding: 6px 12px;
  transition: filter 200ms linear;
  will-change: filter;
  cursor: pointer;
}

.Pasilobus-cookie-bar-btn--customize {
  background: none;
}

  .Pasilobus-cookie-bar-btn:hover {
    filter: saturate(80%);
  }


.Pasilobus-cookie-bar-customize {
  display: none;
  overflow: hidden;  /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  transition: height 0ms 400ms, opacity 400ms 0ms;
}


.Pasilobus-cookie-bar-customize.active {
  display: flex;
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  opacity: 1;
}

.Pasilobus-cookie-bar-customize .modal-content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: auto;
  min-height: 400px;
  opacity: 0;
  transition: height 0ms 400ms, opacity 400ms 0ms;
}

.Pasilobus-cookie-bar-customize.active .modal-content {
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 600px;
  opacity: 1;
}

#Pasilobus-cookie-bar-customize .preference-item {
    display: flex;
    justify-content: start;
    align-items: start;
}