.rankcookie-overlay {
  background: rgba(0, 0, 0, 0.6);
  display: none; /* Change via js */
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.rankcookie {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  margin: 0 auto;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem 30px;
  position: relative;
  top: 5vh;
  width: 340px;
  z-index: 10000;
}

.rankcookie__title {
  font-size: 1.5rem; 
  margin-bottom: 0.75rem;
}

.rankcookie__text {
  margin-bottom: 1rem;
}

.rankcookie__label {
  font-weight: bold;
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding-left: 5px;
}

.rankcookie__custom-settings {
  display: none;
}

.rankcookie__btns {
  margin: 1.5rem 0 0.5rem 0;
}

.rankcookie__btn {
  background-color: #e7e7e7;
  border: 1px solid #b3b3b3; 
  margin-bottom: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  width: 100%; 
}

.rankcookie__btn,
.rankcookie__btn:focus,
.rankcookie__btn:hover {
  border-radius: 0; 
}

.rankcookie__btn--accept-all {
  background-color: #007cba;
  border: 2px solid #007cba;
  color:#fff;
  font-size: 1.15rem; 
  font-weight: bold;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.rankcookie__btn--accept-all:hover,
.rankcookie__btn--accept-all:focus {
  background-color: #006699; 
  border-color: #006699; 
}

.rankcookie__btn--accept-all:focus {
  outline-color:#006699;
}


.rankcookie__btn--custom-settings:hover,
.rankcookie__btn--save-settings:hover {
  background-color:#d9d9d9;
}

.rankcookie__btn--save-settings {
  display: none;
}

.rankcookie__links {
  text-align: center;
}

.rankcookie__link {
  cursor: pointer;
  font-size: 0.85rem;
}

.rankcookie__link:hover {
  text-decoration: underline;
}

.rankcookie__link--back {
  display: none; 
  margin: 1.25rem 0 1rem 0;
  text-align: center;
}

.rankcookie__link--back:before {
  content: "«";
  display: inline-block;
  margin-right: 2px;
  vertical-align: 7%;
}

/* Open custom-settings */

.rankcookie.is-open .rankcookie__title + .rankcookie__text {
  display: none;
}

.rankcookie.is-open .rankcookie__custom-settings{
  display: block;
}

.rankcookie.is-open .rankcookie__btn--save-settings {
  display: block;
}

.rankcookie.is-open .rankcookie__btn--custom-settings {
  display: none;
}

.rankcookie.is-open .rankcookie__link--back {
  display: block;
}

/* Media queries */

@media (min-width:576px) {
  .rankcookie {
    width: 420px;
  }
}

@media (min-width:992px) {
  .rankcookie {
    max-height: 60vh;
    top: 20vh;
  }

  .rankcookie.is.open {
    max-height: 80vh;
    top: 10vh;
  }
}