body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /*background-color: #f4f4f4;*/
    /*background: url('texture-16.jpg');*/
    background: linear-gradient( rgba(150, 30, 80, 0.85), rgba(30, 80, 255, 0.85) ), url('texture-19.png');
    background-size: 8%;
}


.top-right-menu{
    position: absolute;	
    display: inline-flex;
    top:15px;
    right:20px;

}
.share-icon,
.top-right-menu a {
	margin-left: 8px;
    padding: 8px 8px 4px 8px;
    background-color: linear-gradient(rgba(52, 12, 3, 0.85));/*#daaf37;*/
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    transition: background-color 0.3s ease;
    cursor: pointer;
}
.share-icon:hover,
.top-right-menu a:hover {
  filter: invert(100%);
}

/*share container*/

.share-container {
    display: inline-flex;

}
.share-options {
    display: none;
}

.share-button {
    display: inline-block;
	background: linear-gradient(45deg, rgba(237,209,16,1) 0%, rgba(203,93,30,1) 100%);
}



.container {
    position: absolute;
    top:65px;
    left:20px;
    right:20px;
    bottom: 20px;
    display: flex;

    max-width: 100%;
    max-height: 100%;  /*80vh;*/
    background-color: #ffffff42;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.feedback-display {
    width: 60%;
    max-height: 100%;
    padding: 20px 20px 20px 20px;
    /*border-radius: 15px;*/
    margin: 20px;/* 20px 20px 20px;*/

    overflow-y: auto;
    background-color: #fff;
}

.feedback-form-panel {
    width: 40%;
    max-height: 100%;
	  padding: 20px 20px 20px 20px;
    background-color: #c3bef0;
    /*border-radius: 15px;*/
    margin: 20px;/* 20px 20px 20px;*/
    overflow-y: auto;
    /*position:relative;*/
}

.rate {
    display: inline-flex;
}

.feedback-form-panel input[type="text"]{
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;

}

.feedback-form-panel label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  color: #222;
  text-decoration-style: bold;
  font-weight: bold;

}

.feedback-form-panel textarea {
  width: 100%;
  height: 10em;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
  resize:none;
}

.feedback-form-panel button[type="submit"] {
  display: block;
  width: 100%;
  padding: 5px;
  margin-top: 10px;
  border: none;
  border-radius: 5px;
  background-color: #28a745;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.feedback-form-panel button[type="submit"]:hover {
  background-color: #0056b3;
}

.feedback-item {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}
.feedback-item h3 {
    color:#233142;
    font-size: 20px;
}

.feedback-item h4 {
    font-family: Calibri, sans-serif;
    color:#18587a;
}

.feedback-item p {
    margin: 5px 0 0;
    font-family: Cambria, sans-serif;
    font-size: 10;
    text-align: right;
}
.feedback-item small {

    font-family: Calibri, sans-serif;
    font-size: 10;
    color:#aaa;
}

/*star rating system*/


*{
    margin: 0;
    padding: 0;
}
.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:#323643;
}
.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;
}

/* Modified from: https://github.com/mukulkant/Star-rating-using-pure-css , codepen*/

/*customise scrollbar*/
/*width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ecefe0; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #7a7f68; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #acbb7c; 
}



@media (max-width:400px){
  .container{display:inline-block;}
  .feedback-form-panel{max-height:35%; width:auto; overflow-y: auto;}
  .feedback-display {max-height:38%; width:auto;   overflow-y: auto;}

}