[data-component-id="amphibios:feelings_carousel"] {
  .modal-fullscreen {
    .modal-header {
      border: none;
      h2{
      color: var(--amphibios-white);
      padding:0 1rem;
      }
    }
    .modal-content {
      background-color: var(--amphibios-dark-blue);
      color: var(--amphibios-white);
      a {
        font-size: var(--amphibios-h4-font-size);
        color: var(--amphibios-white);
        text-decoration: none;
        margin-bottom: 2rem;
        display: block;
        padding: 1rem;
        text-transform: uppercase;
        text-align: center;
        &:hover {
          color: var(--amphibios-pink);
        }
        @media (min-width: 768px) {
            text-align: left;
        }
      }
    }
    .modal-footer {
      border: none;
    }
  }

}

button.close_the_button {
  background-image: url(./images/x_button.svg);
  background-color: transparent;
  height: 45px;
  width: 45px;
  border-color: transparent;
  background-repeat: no-repeat;
  position: fixed;
  bottom: 147px;
  left:122px;
  z-index:200;
}

button.close_the_button:has(+ .hide) {
  display:none;
}

@keyframes rotating {
  0% {	rotate: 0; 	}
  100% {	rotate: 1turn; 	}
}

.feeling-carousel-button {
  background-image: url(./images/circle_plus_font_desktop.svg);
  background-color: none;
  width: 175px;
  height: 175px;
  background-position: bottom right;
  border: none;
  box-shadow: none;
  color: var(--amphibios-white);
  font-size: var(--amphibios-h4-font-size);
  padding-right: 60px;
  word-wrap: break-word;
  position: fixed;
  z-index: 100;
  bottom: 0;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
  &:hover {
    animation: rotating 4s linear infinite;
  }
}

.feeling-carousel-button.hide {
  bottom: 0;
  left: 0;
  background-image: url(./images/circle_hidden_desktop.svg);
  background-repeat: no-repeat;
  width: 100px;
  height: 115px;
  &:hover {
    animation: none;
  }
}

@media (max-width: 768px) {
 .feeling-carousel-button {
   background-image: url(./images/circle-plus-font-mobile.svg);
   background-repeat: no-repeat;
   width:140px;
   height:140px;
 }
  button.close_the_button {
    background-image: url(./images/x_button.svg);
    background-color: transparent;
    height: 45px;
    width: 45px;
    border-color: transparent;
    background-repeat: no-repeat;
    position: fixed;
    bottom: 115px;
    left:100px;
    z-index:200;
  }
}