/* styles for the notification card */
.ituCardNotification{
    position: fixed;
	top: 270px;
	right: 19px;
    border-radius: 4px;
    background-color:#2f2f2f;
    color:white;
    width: 320px;
    padding: 1.5rem;
    box-shadow: 00 0 1.5rem #a9cad814;
    overflow: hidden;
	display: none;
	z-index: 999999999999999999999999;
	border-left: 3px solid #009CD6;
    /* transform: translateX(calc(100% + 0px)); */
    /* transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35); */

}

 
.ituCardNotification.active{
    transform: translateX(0);
    display: block;
	
}

.ituCardNotification .ituCardNotificationContent{
    display: flex;
    align-items: center;
}


.ituCardNotificationContent .message{
    display: flex;
    flex-direction: column;
   
}

.message .text{
    font-size: 16px;
    font-weight: 400;
    color: white;
	margin-left: 0px !important;
}
.text-2 {
	font-size: 16px;
    font-weight: 400;
    color: white;
	margin-left: 0px !important;		
	text-decoration: underline;
		}
.text-3 {
	font-size: 16px;
    font-weight: 400;
    color: #3789bd !important;
	margin-left: 0px !important;		
	text-decoration: underline;
	cursor: pointer;
		}

.ituCardNotification .close{
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;

}

.ituCardNotification .close::before {  
content: "×";  
color: white;  
font-weight: bold;  
}  

.ituCardNotification .close{
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;

}

.ituCardNotification .close:hover{
    opacity: 1;
}


.ituCardNotification.active ~ button{
    pointer-events: none;
}


.about {
  text-align: center;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about a {
  color: #333;
  text-decoration: none;
  font-size: 12px;
}

.about a:hover {
  color: #e91e63;
}

.about span {
  margin: 0 5px;
}

/* style for the sticky button */
.sticky-btn {
  position: fixed;
  top: 200px;
  right: -15px;
  transition: right 0.3s ease-in-out;
}
.sticky-btn-icon {
	padding-bottom: 8px; 
	margin-right: -8px;
}

.btn-container {
  position: relative;
}

.feedback-btn {
  background-color: white;
  color: #fff;
  padding: 0px 20px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 30px;
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.3);
}

.feedback-btn:hover + .language-options {
  right: 0;
}

/* styles for the ul/li list */
.language-options {
  position: absolute;
  top: 20;
  right: -150px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: right 0.1s ease-in-out;
  z-index: 999;
  width: 140px;
}

.language-options ul {  
  margin: 0;  
  padding: 0;  
  list-style: none;  
}  

.language-options ul li {  
  display: block; /* Make each list item appear on its own line */  
  margin-bottom: 5px; /* Add some space between list items if desired */  
}  
  
/* Styles for the separator to ensure it appears as a horizontal line */  
.language-options .separator {  
  border: none;  
  height: 1px;  
  margin: 10px 0; /* Adjust vertical spacing around the separator as needed */  
  overflow: hidden;  
  background: linear-gradient(to right, transparent, #ccc, transparent);  
  width: 100%; /* Separator should span the full width */  
}  
  
/* Ensure language links are displayed block to take full width */  
.language-options li a {  
  display: block; /* This will make each link take the full width of its container */  
  color: #333;  
  text-decoration: none;  
  font-size: 14px;  
}  

.language-options li a:hover {
  color: #e91e63;
}

.btn-container:hover .feedback-btn {
  transform: translateX(0);
}

.btn-container:hover .feedback-btn:hover {
  transform: translateX(0);
}

.btn-container:hover .language-options {
  right: 15px;
}