/* Modal user feedback style prepared for slide in animation */
.modal_user_feedback {
    position: fixed; /* Stay in place */
    bottom: 0;
    z-index: 19999; /* Sit on top */
    background: #9a9a9a;
    width: 100%;
    text-align: center;
    transform: translateY(calc(100% + 10px));
    overflow: hidden;
    box-shadow: 0 0 5px black;
  }
  /* Modal Content */
  .modal_user_feedback_content {
    color: #fff;
    margin: auto;
    padding: 20px 0;
    width: 80%;
    max-width: 620px;
    text-align: left;
  }
  .feedback_content_layout {
    display: flex;
  }
  .modal_user_feedback_content label {
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    user-select: none;
  }
  .modal_user_feedback_content .label1 {
    margin: 0;
  }
  .modal_user_feedback_content .label2 {
    margin-bottom: 5px;
  }
  .modal_user_feedback_content textarea {
    background: none;
    width: 100%; 
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; 
    margin-top: 6px; 
    margin-bottom: 16px;
    resize: none;
    color: #fff
  }
  .modal_user_feedback_content textarea:focus-visible {
    outline: 1px solid #ccc;
  }
  .modal_user_feedback_content textarea::placeholder {
    font-size: 16px;
    color: #fff
  }
  .modal_user_feedback_content .btns_div {
    align-self: center;
    text-align: right;
  }
  .modal_user_feedback_content .btns_div .cancel {
    color: #fff;
    background: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 3px 15px;
    font-size: 17px;
  }
  .modal_user_feedback_content .btns_div .cancel:hover {  
    border-color: #8AC2C9;
    background-color: #b4b4b4;
  }
  .modal_user_feedback_content .btns_div .submit_btn {
    background: #8AC2C9;
    border: none;
    border-radius: 5px;
    padding: 4px 15px;
    font-size: 17px;
    color: white;
    margin-bottom: 20px;
    user-select: none;
  }
  .modal_user_feedback_content .btns_div .submit_btn:hover {
    background: #73b5bd;
  }
  .modal_user_feedback_content .btns_div .submit_btn:disabled, .cancel:disabled {
    cursor: not-allowed;
    color: #cecece;
  }
  /* The Close Button */
  .modal_user_feedback .close_btn_uf {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 7px;
  }
  
  .modal_user_feedback .close_btn_uf:hover,
  .modal_user_feedback .close_btn_uf:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Star rating style */
  .rate {
    float: left;
    height: 46px;
  }
  .rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
  }
  .rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
  }
  .rate:not(:checked) > label:before {
    content: '★ ';
  }
  .rate > input:checked ~ label {
    color: #ffc700;    
  }
  .rate:not(:checked) > label:hover,
  .rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
  }
  .rate > input:checked + label:hover,
  .rate > input:checked + label:hover ~ label,
  .rate > input:checked ~ label:hover,
  .rate > input:checked ~ label:hover ~ label,
  .rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
  }
  
  
  /* Show feedback modal notification style */
  @keyframes slideUp {
  0% { transform: translateY(100% + 10px); }
  100% { transform: translateY(0); }
}
@keyframes slideDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(100% + 10px); }
}
#show_user_feedback_notification {
  position: fixed;
  bottom: 0;
  height: 50px;
  background: #9a9a9a;
  width: 100%;
  text-align: center;
  transform: translateY(calc(100% + 10px));
  overflow: hidden;
  box-shadow: 0 0 5px black;
}

#show_user_feedback_notification.show, #user_feedback_modal.show {
  animation: slideUp .5s ease forwards;
}
#show_user_feedback_notification.hide, #user_feedback_modal.hide {
  animation: slideDown .5s ease forwards;
}

#show_user_feedback_modal {
  margin: 0;
  padding: 8px;
  text-align: center; 
  color: white; 
  cursor: pointer; 
  font-weight: 300;
  width: fit-content;
  margin: auto;
}

#show_user_feedback_modal button {
  background: #8AC2C9;
  border: none;
  border-radius: 5px;
  padding: 4px 15px;
  font-size: 17px;
  color: white;
  margin-left: 15px;
}

#show_user_feedback_modal button:hover {
  background: #73b5bd;
}

/* The Close Button for notification */
#show_user_feedback_notification .close_btn_uf_notification {
  color: #e0e0e0;
  float: right;
  font-size: 28px;
  line-height: 25px;
  padding-right: 7px;
}

#show_user_feedback_notification .close_btn_uf_notification:hover,
#show_user_feedback_notification .close_btn_uf_notification:focus {
  color: #b9b9b9;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 992px) {
  .modal_user_feedback_content {
    width: 85%;
  }
}
@media only screen and (max-width: 576px) {
  .modal_user_feedback_content {
      width: calc(100% - 30px);
  }
  .feedback_content_layout{
    flex-direction: column;
  }
  .rate_div {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }
  .rate_div label {
    flex-basis: 50%;
  }
  .rate_div .rate {
    flex-basis: 50%;
  }
}
@media only screen and (max-width: 369px) {
  #show_user_feedback_notification {
    height: 80px;
  }
  .rate_div {
    flex-direction: column;
  }
  .rate_div .rate {
    align-self: flex-start;
    flex-basis: 100%;
  }
}