.modal-feedback-container {
    display: none;
    
    position: absolute;
    top: 0;

    align-items: flex-start;
    justify-content: center;

    width: 100%;
    height: 110%;

    background: rgba(0, 0, 0, 0.5);

    z-index: 1070;          
}

.modal-feedback {
    position: relative;
    width: 30.8125rem;
    min-width: 17.5rem;
    min-height: 18.75rem;
    padding: var(--spacing-04, 0.5rem);
    flex-direction: column;
    align-items: center;

    margin-top: 5%;

    border-radius: var(--spacing-07, 1.5rem);
    background: #FFF;

    box-shadow: 0px 4px 44px 0px rgba(53, 109, 198, 0.20);
}

.modal-feedback-block-yellow {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  top: 1.12rem;
  left: 14.19rem;

  width: 4rem;
  height: 4rem;
  flex-shrink: 0;  

  background: linear-gradient(224deg, rgba(255, 199, 0, 0.80) 1.54%, #FFDC5F 1.55%, rgba(255, 196, 45, 0.57) 100%);

  filter: drop-shadow(0px 10px 16px rgba(28, 141, 255, 0.24));
  backdrop-filter: blur(12.22169017791748px);

  border-radius: 10px;

  /* shadow-04 */
  box-shadow: 0px 16px 44px 0px rgba(0, 112, 224, 0.20);
  z-index: 1071;
}

.modal-feedback-block-yellow svg {
  width: 2.22213rem;
  height: 2.22225rem;
  flex-shrink: 0;
}

.modal-feedback-block-green {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  top: 5.75rem;
  left: 15.75rem;

  width: 3.6875rem;
  height: 3.6875rem;
  flex-shrink: 0;

  background: linear-gradient(224deg, rgba(228, 255, 227, 0.80) 1.54%, rgba(116, 182, 115, 0.30) 100%);
  filter: drop-shadow(0px 10px 16px rgba(28, 141, 255, 0.24));
  backdrop-filter: blur(12.22169017791748px);  

  border-radius: 10px;

  /* shadow-04 */
  box-shadow: 0px 16px 44px 0px rgba(0, 112, 224, 0.20);
  z-index: 1073;
}

.modal-feedback-block-green svg {
  width: 2.0485rem;
  height: 2.04863rem;
  flex-shrink: 0;
}

.modal-feedback-block-red {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  top: 8.62rem;
  left: 13.37rem;

  width: 3.1875rem;
  height: 3.1875rem;
  flex-shrink: 0;

  background: linear-gradient(314deg, #FDA498 0%, rgba(255, 219, 214, 0.41) 97.66%);

  filter: drop-shadow(0px 10px 16px rgba(28, 141, 255, 0.24));
  backdrop-filter: blur(12.22169017791748px);

  border-radius: 10px;

  /* shadow-04 */
  box-shadow: 0px 16px 44px 0px rgba(0, 112, 224, 0.20);
  z-index: 1072;
}

.modal-feedback-block-red svg {
  width: 1.77075rem;
  height: 1.77081rem;
  flex-shrink: 0;
}

.modal-feedback-top {
    display: flex;
    height: 12.3125rem;
    align-self: stretch;
    gap: 0.69rem;
    border-radius: var(--spacing-06, 1rem);
}

.modal-feedback-top-left {
    position: relative;
    width: 16.625rem;
    height: 12.3125rem;
    flex-shrink: 0;
    border-radius: var(--spacing-06, 1rem);
    background: var(--colors-azul-marinho-99, #F2F5F9);
}

.modal-feedback-top-left span {
  position: absolute;

  top: 3rem;
  left: 1.56rem;

  max-width: 10.75rem;
  color: var(--colors-azul-marinho-20, #03045E);
  font-family: Nunito Sans;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;  
}

.modal-feedback-top-left span strong {
  color: var(--colors-azul-marinho-20, #03045E);
  font-family: Nunito Sans;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.modal-feedback-top-right {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    width: 12.5rem;
    height: 12.3125rem;
    flex-shrink: 0;
    border-radius: 1rem;
    background: linear-gradient(180deg, #4CCAE4 -10.58%, #4BC7E2 100%);
}

.modal-feedback-mid {
    display: flex;
    height: 11.875rem;

    padding-top: var(--spacing-07, 24px);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-05, 0.75rem);
    align-self: stretch;    
}

.modal-feedback-text {
    display: flex;

    max-width: 28.625rem;
    width: 100%;
    color: var(--colors-cinza-10, #191A1E);
    text-align: center;
    font-family: Nunito Sans;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;    
}

.modal-feedback-divider {
    width: 9.125rem;
    height: 0.0625rem;
}

.modal-feedback-rate {
    display: flex;    
    gap: 0.75rem;
    flex-direction: row-reverse;

    margin-top: 0.75rem;
}

/* Estrelas  */
  input.star {
    display: none;
  }
  
  label.star {    
    font-size: 1rem;
  
    color: #0073E5;
  
    transition: all 0.2s;
  
    margin: 0;
  
    cursor: pointer;
  }
  
  input.star:checked ~ label.star:before {
    content: "\f005";
  
    color: rgb(255, 208, 0);
  
    transition: all 0.25s;
  }
  
  input.star-5:checked ~ label.star:before {
    /* color: #fe7; */
  
    text-shadow: 0 0 10px #fe7;    
  }
  
  input.star-1:checked ~ label.star:before {
    color: #f62;
  }
  
  label.star:hover {
    transform: rotate(-15deg) scale(1.3);
  }
  
  label.star:before {
    content: "\f006";
  
    font-family: FontAwesome;
  }

  .modal-feedback-fieldset {
    display: flex;
    height: 100%;
    padding: var(--spacing-00, 0rem) var(--spacing-04, 0.5rem);
    align-items: center;
    gap: var(--spacing-04, 0.5rem);
    align-self: stretch;
    border-radius: var(--spacing-05, 0.75rem);
    border: 1px solid var(--colors-cinza-80, #ABB2C0);
    background: rgba(255, 255, 255, 0.80);

    color: var(--colors-cinza-80, #ABB2C0);
    font-family: Nunito Sans;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: normal;

    resize: none;
  }

  .modal-feedback-fieldset:focus {
    outline: none !important;
    border: 1px solid black;
  }
  
  .modal-feedback-bottom {
    display: flex;    
    align-items: flex-end;    
    justify-content: space-between;

    margin-top: 0.5rem;
  }

  .close-modal-feedback {
    display: flex;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: var(--spacing-04, 0.5rem);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-02, 0.25rem);    
    border-radius: var(--spacing-06, 1rem);

    color: var(--colors-secondary-20, #03045E);
    font-family: Nunito Sans;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    transition: all ease-in-out .3s;
    cursor:pointer;

    z-index: 1073;
  }

  .close-modal-feedback:hover {
    background: rgba(28, 141, 255, 0.12);
    box-shadow: 0px 4px 8px 0px rgba(37, 99, 192, 0.16);
  }

  .send-feedback {
    display: flex;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: var(--spacing-04, 0.5rem);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-02, 0.25rem);
    flex-shrink: 0;
    border-radius: var(--spacing-06, 1rem);
    background: var(--colors-primary-50, #0073E5);
    
    color: var(--White, #FFF);
    font-family: Nunito Sans;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    transition: all ease-in-out .3s;
    cursor:pointer;
  }

  .send-feedback:hover {
    background: #50a8ff;
  }

  .modal-feedback-success {
    display: none;
    align-items: center;
    justify-content: center;

    flex-direction: column;
  }

  .modal-feedback-success.active {
    display: flex;
  }

  .modal-feedback-success-span1 {
    color: #03045E;
    text-align: center;
    font-family: Nunito Sans;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .modal-feedback-success-span2 {
    color: #191A1E;
    text-align: center;
    font-family: Nunito Sans;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .modal-feedback-success svg {
    width: 3rem;
    height: 3rem;
  }

  .modal-feedback-close-btn {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    top: 0.75rem;
    right: 0.75rem;

    width: 1.5rem;
    height: 1.5rem;        

    border-radius: 50%;    

    background: #fff;
    box-shadow: 0px 4px 8px 0px rgba(37, 99, 192, 0.16);

    transition: all ease-in-out .3s;
    cursor: pointer;
  }

  .modal-feedback-close-btn svg {
    width: 1rem;    
    height: 1rem;   
    flex-shrink: 0;
  }

  .modal-feedback-close-btn:hover {
    background: #F6E0DD ;
  }

  @media screen and (max-width: 500px) {
    .modal-feedback-top-right {
      display: none;
    }

    .modal-feedback-top-left {
      width: 100%;
      padding: 20px;
    }
  }

  @media screen and (max-width: 350px) {
    .modal-feedback-block-yellow, .modal-feedback-block-green, .modal-feedback-block-red {
      display: none;
    }

    .modal-feedback-top-left {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-feedback-top-left span {
      position: relative;
      top: unset;
      left: unset;
      max-width: 100%;      
    }
  }