/***** MODAL DIALOG ****/
/* #modal {
	
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;

	
	z-index:111000;

	
	display:flex;
	flex-direction:column;
	align-items:center;

	
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal > .modal-underlay {
	
	position: absolute;
	z-index: -1;

	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
  
}

#modal > .modal-content {

	width: 94.5%;
  
	
  margin-left: calc(4.5vw + 1rem);
  
  margin-top: 4.5vw;
	
	border: solid 1px white;
	border-radius:8px;

  
	padding: 1rem;

	
	animation-name:zoomIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing {
	
	animation-name: fadeOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing > .modal-content {
	
	animation-name: zoomOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
}

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
} */




/* .star {
    font-size: 1.325rem;
    height: 1.325rem;
    font-size: 1rem;
    color: var(--clr-light);
    
    cursor: pointer;
    
    transition: color 0.2s;
    line-height: 1;
    display: inline-block; /
} */

/* @-moz-document url-prefix() { .star { font-size:  1.325rem;} } */
/* Adjust the font-size for Firefox */ 

/* .star.gold {
    
    color: var(--clr-accent);
}

#rating-container {
  display: flex;
  gap: 0.245rem;
  min-width: 7rem;
  justify-content: flex-end;
} */


#rating-container {
    display: flex;
    gap: 0.245rem;
    padding-top: 0.5rem;
    min-width: 7rem;
    /* justify-content: flex-end; */
    position: relative;
}

/* Microtooltip */
/* #rating-container::after {
    content: "♡ Leave feedback";
    
    position: absolute;
    top: -0.9rem;
    right: 0;

    font-size: var(--fs-100);
    letter-spacing: 0.02em;
    white-space: nowrap;

    color: var(--clr-light);

    opacity: 0;
    transform: translateY(2px);

    pointer-events: none;

    transition:
        opacity 160ms ease,
        transform 160ms ease;
} */

/* Only reveal on intentional hover */
#rating-container:hover::after {
    opacity: 0.414;
    transform: translateY(0);
	/* color: var(--clr-accent); */
	color: var(--clr-dark);
}

.star {
    font-size: 1rem;
    height: 1.325rem;

    color: var(--clr-light);

    cursor: pointer;

    line-height: 1;
    display: inline-block;

    /* opacity: 0.42; */
	opacity: 1;

    transition:
        color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}

/* Firefox optical correction */
@-moz-document url-prefix() {
    .star {
        font-size: 1.325rem;
    }
}

/* Hover state */
#rating-container:hover .star {
    opacity: 0.72;
	/* color: var(--clr-background-4); */
}

/* Individual star hover */
.star:hover {
    opacity: 1;
    transform: translateY(-3px);
}

/* Active/selected */
.star.gold {
    color: var(--clr-accent);
    opacity: 1;
}

#review-container {
	/* padding-top: 1rem; */
	/* position: absolute; */
	/* background-color: red; */
    width: 100%;
	/* height: 100%; */
    /* margin-top: 2rem; */
    /* margin-left: -1px; */
	/* height: 12rem; */
    box-sizing: border-box;
    z-index: 44;
    /* align-self: end; */
    position: relative;
		/* min-height: 15rem; */
		
  }


#review-form {
    
    background-color:var(--clr-white);
    
    border: solid 1px var(--clr-light);
    
    border-radius: var(--border-radius);
    padding: 1rem 1rem 1rem 1rem;
        /* min-height: 15rem; */
	height: 100%;
    width: 100%;
    
    display:flex;
    flex-direction:column;
    align-items: start;
  }


#review {
    resize: none;
    outline: none;
    border: none;
    padding-top: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    
    background-color:var(--clr-white);
    
    /* height: 7.8rem; */
	height: 100%;
    width: 100%;
    
    color: var(--clr-lighter);
    
  }

/* .close-icon {
    margin-top: 0.57rem !important;
    margin-right: -0.43rem !important;
  } */


#review-form > textarea {
    padding: 0;
    height: 100%;
}


/* #success_review {

text-align: center;
font-size: var(--fs-300);
color: var(--clr-green);
background-color: white;
padding: 1rem;
border: 1px solid var(--clr-green);
border-radius: var(--border-radius);
max-width: 55ch;
} */

#submit-container button {
    /* align-self: flex-end; */
    margin-top: auto;
    width: max-content;
    /* position: absolute; */
    /* right: 1rem; */
}

#submit-container {
    display: flex;
    color: var(--clr-green)!important;
    font-weight: 400 !important;
    width: 100%;
}