/* Global styles */
body {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: normal;
    max-width: 500px;
    margin: auto;
    background-color: #ffffff;
}



body.app-body {
    height:100vh;
}

a {
    color: #fe5379; /* Sets the color of all links */
  }
  
  a:hover {
    color: #fe5379; /* Optional: Slightly darker pink color for hover effect */
  }

/* Landing Page */

img {
    max-width: 100%;
    height: auto;
}



@media screen and (max-width: 767px) {
    .app-container {
        width: 95%;
        margin: auto;
    }
}


/* Typography styles */
h1 {
    text-align: center;
}

.caption {
    font-size: 14px;
    margin-top: 8px;
    color: #666;
    text-align: left;
}

.caption.margin-top-bottom {
    margin-top: 20px;
}


p.caption {
    margin-top: 10px;
    margin-bottom: 0px;
}

.no-scroll {
    overflow: hidden;
    height: 100%; /* Optional depending on your design */
}

#hintModal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    overflow-y: auto;
}

#hintModal > div {
    background-color: #fefefe;
    margin: 15% auto; /* Center in the window */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Adjusted to not be full width */
    max-width: 600px; /* Maximum width */
    box-sizing: border-box;
}

#playButton {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #555;
}

#practiceButton {
    display: block; /* Ensure it takes the full width */
    width: 100%;
    padding: 10px 20px;
    margin-top: 15px;
    font-size: 1em;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#practiceButton:active {
    background-color: #367C39;
}

#goBackButton {
    display: block;
    width: 100%;
    padding: 10px 20px;
    margin-top: 15px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Adjust the width for smaller screens */
@media (max-width: 600px) {
    #hintModal > div {
        margin: 15% auto;
        width: 90%;
    }
}




/* Default styles for devices smaller than 750px width */
.hint-div {
    background-color: #fefefe; 
    padding: 20px; 
    width: 100%;
    box-sizing: border-box;
}


/* Media query for devices larger than 750px width */
@media (min-width: 851px) {
    .hint-div {
        padding: 100px; /* adjust as needed */
    }
}

#nativeLanguageModal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    background-color: rgba(0,0,0,0.5);
    overflow-y: auto; /* Allow vertical scrolling if the content overflows */
}

/* General styles for the modal content */
#nativeLanguageModal > div {
    background-color: #fefefe; 
    margin: 0; /* No margin since we want it to take up the whole space */
    padding: 20px; 
    border: 1px solid #ffffff; 
    width: 40%; /* Takes up the entire width */
    box-sizing: border-box; /* To ensure padding and border are included in total width/height */
}

/* Adjust the width for smaller screens */
@media (max-width: 600px) {
    #nativeLanguageModal > div {
        padding: 10px; /* Adjust padding for smaller screens if necessary */
    }
}


#languageModal {
    display: none; 
    position: fixed; 
    z-index: 2; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    background-color: rgba(0,0,0,0.5);
    overflow-y: auto; /* Allow vertical scrolling if the content overflows */
}

/* General styles for the modal content */
#languageModal > div {
    background-color: #fefefe; 
    margin: 0; /* No margin since we want it to take up the whole space */
    padding: 20px; 
    border: 1px solid #ffffff; 
    width: 100%; /* Takes up the entire width */
    box-sizing: border-box; /* To ensure padding and border are included in total width/height */
}

/* Adjust the width for smaller screens */
@media (max-width: 600px) {
    #languageModal > div {
        padding: 10px; /* Adjust padding for smaller screens if necessary */
    }
}

.language-name {
    color:#fe5379
}

.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* Adjusted for better spacing */
    padding: 20px;
    border: 1px solid #ffffff;
    max-width: 500px; /* Could be more or less, depending on screen size */
  
  }

  .select-langauge-modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* Adjusted for better spacing */
    padding: 20px;
    border: 1px solid #ffffff;
  
  }
  
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  .language-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-rows: 1fr; /* All rows will be equal height */
    gap: 10px;
    padding: 20px;
  }
  
  .language-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    cursor: pointer;
    transition: background-color 0.3s;
    height: 100px; /* Fixed height for all buttons */
    box-sizing: border-box; /* Includes padding in the height */
  }
  
  .language-button:hover {
    background-color: #e8e8e8;
  }
  
  .flag-icon {
    width: auto; /* Adjust width automatically */
    height: 50%; /* Maximum flag icon height */
    max-height: 50px; /* Maximum flag icon height */
  }
  
  .language-name {
    margin-top: 5px;
  }

/* styles.css */

#undo-button {
    background-color: #f3f4f6;
    color: #fe5379;
    font-family: 'Source Sans Pro', sans-serif;
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
    margin-right: 10px;
}

#undo-button:hover {
    background-color: #ffdce3;
}


#hint-button {
    background-color: #f3f4f6;
    color: #fe5379;
    font-family: 'Source Sans Pro', sans-serif;
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
    margin-right: 15px;
}

#hint-button:hover {
    background-color: #ffdce3;
}

#save-and-log-button {
    background-color: #f3f4f6;
    color: #fe5379;
    font-family: 'Source Sans Pro', sans-serif;
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
    display:none;
}

#save-and-log-button:hover {
    background-color: #ffdce3;
}


#shareBtn {
    background-color: #f3f4f6;
    color: #fe5379;
    font-family: 'Source Sans Pro', sans-serif;
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
}

#shareBtn:hover {
    background-color: #ffdce3;
}


button#microphone-button {
    margin-right:10px;
}

button#microphone-button-game {
    margin-right:10px;
}

.link-as-caption {
    font-size: 14px;
    margin-top: 10px;
    color: #fe5379;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
  }
  
  
.landing-logo {
    font-size: 24px;
    text-align: right;
}

.landing-tagline {
    font-size: 28px;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

.small-text {
    font-size: 16px;
    margin-top: -20px;
}

/* Button styles */
button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #ff9494;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    font-family: 'Source Sans Pro', sans-serif;
}

button:hover {
    background-color: #fe5379;
}

.login-button {
    background-color: #ff9494;
}

.signup-button {
    background-color: #fe5379; /* New button color */
    color: white;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size:16px;
    font-family: 'Source Sans Pro', sans-serif;
}

.signup-button:hover {
    background-color: #e24a70; /* Darker shade for hover state */
}

.landing-login-button {
    background-color: #ff9494;
}

.start-button {
    background-color: #fe5379;
    margin-bottom: 0px;
}

#start-conversation {
    display: inline-block; /* Make the button inline so it doesn't take up the whole width */
    /* Other button styling here... */
}

#startOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  
  .button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: calc(100% - 70px); /* Adjust this value based on the header height */
    width: 100%;
    padding: 20px;
    z-index:1;
  }
  
  #start-conversation {
    font-size: 16px;
    padding: 10px 20px;
  }
  
  .volume-caption {
    color: rgb(104, 104, 104);
    font-size: 14px;
    margin-top: 10px;
  }

.button-container button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px; /* Space above the button */
}

.button-container p {
    margin: 0; /* Remove default margins */
    font-size: 14px;
}


/* Common styles for all login inputs */
.login-input {
    font-family: 'Source Sans Pro', sans-serif;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box; /* ensures padding and border are included in the total width */
    font-size: 16px; /* readable text size */
    
    border: 1px solid #ccc; /* subtle border color */
    border-radius: 4px; /* rounded corners */
    transition: border-color 0.3s, box-shadow 0.3s; /* smooth transition for focus */
}

/* Placeholder style */
.login-input::placeholder {
    color: #a9a9a9; /* light grey placeholder text, for better readability */
}

/* Focus state style */
.login-input:focus {
    border-color: #fffcfc; /* Pink color for focus */
    outline: none; /* remove default focus outline */
    box-shadow: 0 0 5px rgb(255, 146, 170); /* subtle shadow at the border */
}

/* Error state style */
.login-input.error {
    border-color: #e74c3c; /* red color for error */
}

.fluency-score-and-date{
    margin-top:0;
    margin-bottom:20px;
}

.back-to-profile-button,
.delete-account-button {
  padding: 15px 25px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: none;
  cursor: pointer;
  margin: 10px;
  border-radius: 10px;
  display: inline-block;
  text-align: center;
  width: 200px; /* You can adjust the width */
  transition: background-color 0.3s ease;
  text-decoration: none; /* Removing underline from links */
}

.back-to-profile-button {
  background-color: #ff9494; /* Pink */
}

.back-to-profile-button:hover {
  background-color: #fe8080; /* Slightly darker pink on hover */
}

.delete-account-button {
  background-color: #ff4d4d; /* Red */
}

.delete-account-button:hover {
  background-color: #e63939; /* Slightly darker red on hover */
}


#submit-btn,
#user-input,
#response-div,
#review-vocab-btn,
#fluency-score-container,
#write-phrases-container,
#profile-button {
    font-family: 'Source Sans Pro', sans-serif;
}

/* Form styles */
.form-group {
    margin-top:20px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.tickboxes {
    margin-top: 10px;
    display: flex;
    font-weight: normal;
    margin-bottom: 10px;
}

.tickboxes a {
    color: #fe5379; /* Replace with your desired color */
}

select,
input[type="text"],
#write-phrases-input {
    padding: 8px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}

#write-phrases-input {
    resize: vertical;
    overflow: auto;
    font-family: 'Arial';
    border-width: 0.1px;
}

#language-select {
    border-radius: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    border-color:#ccc;
}

/* Container styles */
#response-div,
#conversation-history-container {
    /* Existing styles */
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    font-size: 16px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    background-color: #ffffff;
    border: 0.5px solid #e7e7e7;
    overflow-y: auto;
    line-height: 1.5em;
    width: 100%;

    /* Updated height */
    height: calc(100vh - 330px); /* Adjust 200px to the actual height of your buttons container */
}




.sidebar {
    background-color: #f4f4f4;
    width: 60px;
    height: 100vh;
    padding-top: 20px;
    position: fixed;
    padding-right:8px;
    padding-left:8px;
    z-index:100;
  }
  
  .sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .sidebar li {
    color: #555;
    font-size: 10px;
    text-align: center;
    padding: 12px 0;
    margin-bottom: 8px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 8px;
  }
  
  .sidebar li.active i,
  .sidebar li.active span,
  .sidebar li:hover i,
  .sidebar li:hover span {
    color: #ffffff; /* White text/icons for the active and hover states */
  }
  
  .sidebar li.active,
  .sidebar li:hover {
    background-color: #fe5379; /* Pink background for active and hover */
    border-radius: 8px;
  }
  
  .sidebar i {
    font-size: 20px;
    color: #555;
    display: block;
    margin-bottom: 4px;
  }
  
  .sidebar span {
    display: block;
    color: #555;
  }






/* Base styles for all messages */
.message {
    display: block;
    max-width: 80%;
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
    font-size: 16px;
    line-height: 1.4;
    border-radius: 20px;
  }
  
  /* Styles for assistant messages */
  .assistant-message {
    background-color: #e0e0e0; /* light grey */
   
    align-self: flex-start;
  }
  
  /* Styles for user messages */
  .user-message {
    background-color: #4e8cff; /* light blue */
    color: white;
   
    align-self: flex-end;
  }
  
  /* Align messages to the ends of the container */
  #conversation-history-container {
    display: flex;
    flex-direction: column;
  }
  
  
  


#fluency-score-container,
#write-phrases-container,


.restart-icon::before {
    content: "\f021";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* Landing page styles */
.landing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right:10px;
    padding-left:10px;
    background-color: #ffffff;
    margin-bottom: 20px;
    margin-top:20px;
    z-index: 4;
}

/* Media query for screens less than 767 pixels */
@media (max-width: 767px) {
    .landing-header {
        padding: 0px;
    }
}

.landing-logo img {
    height: 50px;
    width: auto;
    color: #45a049;
}

.landing-main {
    padding: 40px;
    text-align: center;
}

/* Keyframe animation */
@keyframes pulse {
    0% {
        background-color: #fe5379;
    }
    50% {
        background-color: #fdc95a;
    }
    100% {
        background-color: #fe5379;
    }
}

.pulse {
    animation: pulse 2s infinite;
}

#practiceButton {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera, and Edge */
  }

/* Additional styles specific to the login page */

.login-form {
    border: 1px solid #ffffff;
    background-color: #ffffff;
    margin-bottom: 20px;
}

.login-input {
    padding: 8px;
    font-size: 16px;
    margin-bottom: 10px;
    font-family: 'Source Sans Pro', sans-serif;
}

/* Inline styles removed */

.login-button {
    margin-top: 15px;
    background-color: #fe5379;
}

.error-text {
    color: red;
}

/* Additional styles specific to the profile page */
.profile-body {
    max-width: 950px;
    background-color: #ffffff;
    margin: 20px auto;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: normal;
}

/* Media query for screens less than 767 pixels */
@media (max-width: 767px) {
    .profile-body {
        margin: 13px auto;
    }
}

.login-body {
    background-color: #ffffff;
    margin: 20px auto;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: normal;
}

/* Media query for screens less than 767 pixels */
@media (max-width: 767px) {
    .login-body {
        margin: auto;
        padding-left:13px;
        padding-right:13px;
    }
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
}

.profile-logo {
    font-size: 24px;
    color: #45a049;
}

#error-message {
    font-size: 16px; /* Adjust this value to your preference for the text size */
    margin-top: 5px;
    margin-bottom: 5px; /* Adjust this value to bring the error message nearer to the button above */
    /* Any other styling rules you want to apply */
}


.profile-container {
    padding: 0px;
    border: 1px solid #ffffff;
    border-radius: 4px;
    background-color: #ffffff;
    margin-bottom: 20px;
    flex-direction: row;  /* Arrange children horizontally */
    margin:20px;
}

/* Media query for screens less than 767 pixels */
@media (max-width: 767px) {
    .profile-container {
        margin: 0px;
    }
}

.profile-heading {
    text-align: center;
    margin-bottom: 20px;
}

.profile-info {
    margin-top: 0px;
    margin-bottom: 10px;
}

.profile-conversations {
    font-size: 24px;
    margin-bottom: 20px;
}

.profile-conversation {
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Inner spacing */
    padding-bottom:10px;
    background-color: #f4f4f4; /* White background. You can adjust the color to your preference. */
    margin-bottom: 30px; /* Space between cards. Adjust as needed. */
    transition: box-shadow 0.3s; /* Transition for hover effect */
}

.existing-content {
    width: 67%;
    margin-right: 40px;
}

@media (max-width: 900px) {
    .existing-content {
        width: 100%;
        margin-right:0px;
    }
}


.new-column {
    width: 300px;
    flex:none;
}

@media (max-width: 900px) {  /* Adjust breakpoint to 800px */
    .new-column {
        display: none;
        width: 0;
    }
}





.profile-card {
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Inner spacing */
    background-color: #f4f4f4; /* White background. You can adjust the color to your preference. */
    margin-bottom: 20px; /* Space between cards. Adjust as needed. */
    font-size: 24px;
    transition: box-shadow 0.3s; /* Transition for hover effect */
}



.content-wrapper {
    display: flex;
}

.existing-content {
    margin-left: 0;
}

#practice-message p {
    /* Add your styles here */
    font-size: 16px;
}

#reminder-message p {
    /* Add your styles here */
    font-size: 16px;
}

#reminder-message p a {
    /* Add your styles here for the link inside the paragraph */
    font-size: 16px;
}



.conversation-text {
    margin-top: 8px;   /* Adjust as needed */
    margin-bottom: 8px; /* Adjust as needed */
}

.landing-page {
    max-width: 1200px;
    margin: 0 auto;
}


.delete-conversation-btn {
    font-size: 20px; /* adjust as needed */
    color: #fe5379;
    cursor: pointer; /* makes it obvious it's clickable */
    margin-left: 10px; /* adds some space between the icon and adjacent content */
}




.profile-logout {
    text-align: center;
}

.logout-link {
    color: #FF5757;
    text-decoration: none;
}

.logout-link:hover {
    text-decoration: underline;
}

.profile-delete {
    text-align: center;
}

.delete-link {
    color: #FF5757;
    text-decoration: none;
}

.delete-link:hover {
    text-decoration: underline;
}

.fluency-score-and-date{
    margin:0
}

.delete-icon-wrapper {
    display: flex;
    align-items: center;
}




#calendar-container {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    font-size: 0.6em;
}

#calendar-header {
    text-align: center;
    padding: 8px;
    background-color: #f4f4f4;
}

#calendar-header span {
    cursor: pointer;
}

#calendar-table {
    width: 100%;
    border-collapse: collapse;
    height: 100%;
    
}

#calendar-table th, #calendar-table td {
    border-radius: 10px;
    text-align: center;
    padding: 5px;
    width: 14.285%;  /* Equal width for all 7 columns */
    margin:10px;
}

#calendar-table .active-day {
    background-color: #fff16f;
    border-radius:25px;
    padding:3px;
}



details summary {
    font-size: 16px;
    font-weight: bold;
    color: #fe5379;
    margin-bottom:5px;
    margin-top:5px;
}

details p {
    font-size: 16px;
    color: black;
    margin-left: 20px;
}


.success-message {
    text-align: center;
}
.success-message h1 {
    color: green;
    margin-bottom: 1em;
}
.success-message a {
    display: inline-block;
    background-color: #008CBA;
    color: white;
    padding: 10px 24px;
    text-decoration: none;
    font-size: 1.25em;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.success-message a:hover {
    background-color: #005a80;
}

.subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
    margin-bottom: 20px;
  }

  .subscription-main {
    padding:20px;
    padding-top: 10px;
    text-align: left;
  }

  .upgrade-button {
    margin-top: 20px;
    background-color: #fe5379;
  }

  .subscription-logo img {
    height: 50px;
    width: auto;
    color: #45a049;
  }

  .subscription-img {
    height: 50px;
    width: auto;
    color: #45a049;
  }

  #chat-container {
    height: 400px; /* or whatever height you desire */
    overflow-y: auto;
}

.flashes .flash-message {
    color: red;
    margin: 5px 0;
}

.button-container {
    position: relative;
    width: 100%; /* Set the container width to 100% */
  }

  .spinner {

    vertical-align: middle;
    margin-top:0px;
    margin-left: 20px;
    display: none; /* Initially hidden */
    border: 4px solid rgba(255, 255, 255, 0.3);
    width: 25px; /* Match the button's height */
    height: 25px; /* Match the button's height */
    border-radius: 50%;
    border-top: 4px solid #fe5379;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.feedback-container.hidden {
    display: none; /* Hide the element with the 'hidden' class */
  }


#feedback {
    font-family: 'Source Sans Pro', sans-serif;
    width:100%;
}

.feedback-label {
    margin-bottom: 30px;
}


.feedback-container {
    background-color: #ffe0e0; /* Light pink background */
    border-radius: 10px; /* Rounded edges */
    padding-left: 20px;
    padding-top:5px;
    padding-bottom:15px;
    padding-right: 20px; /* Padding inside the box */
    margin: 0; /* Margin outside the box */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional shadow effect */
    font-size: 0.85em; /* Smaller text size */
  }
  
  .feedback-container h3 {
    font-size: 1em; /* Header size within the feedback container */
    font-weight: bold; /* Normal weight for header */
  }
  
  .feedback-container select,
  .feedback-container input {
    font-size: 0.8em; /* Smaller font size for dropdown and input */
    padding: 5px; /* Padding for dropdown and input */
    margin-bottom: 10px; /* Space underneath the dropdown and input */
    font-family: 'Source Sans Pro', sans-serif;
  }
  
  .feedback-container label {
    font-weight: normal; /* Normal weight for labels */
  }
  
  .mode-toggle {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.mode-toggle label {
    padding: 5px 10px;
    cursor: pointer;
    border: 1px solid #cccccc;
    text-align: center;
    flex-grow: 1;
    font-size: 14px;
    font-weight: light;
}

.mode-toggle label input[type="radio"] {
    display: none;
}

.mode-toggle label * {
    font-size: 10px; /* Change this to the desired font size */
}

.mode-toggle label:hover,
.mode-toggle label.selected {
    background-color: #ffd6dd;
}

.mode-toggle label.selected {
    font-weight: 400;
}

.toggle-label {
    font-size: 20px; /* adjust as needed */
    font-weight: 400;
}
  


.left-side {
    text-align: left;
}

.right-side {
    text-align: right;
}

.align-vertically {
    display: flex;
    align-items: center;  /* This ensures vertical alignment */
  }

.spinner-right-side {
    text-align: right;
    min-width: 30px;
    min-height: 30px;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);  /* This line was slightly modified for a dimming effect */
    z-index: 1000;  /* Increased to ensure it overlays other elements */
    overflow-y: auto;
    font-family: 'Source Sans Pro', sans-serif;
}

.popup-content {
    font-size: 16px;
    position: relative;
    margin: 10% auto;
    padding: 30px;
    background-color: #fff;
    width: 75%;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
    z-index: 1001; /* Make sure the content appears on top of the overlay */
}

  
.popup-content h2 {
    margin-bottom: 20px;
    font-size: 24px;
}
  
.popup-content ul {
    list-style-type: none;
    padding-left: 0;
}
  
.popup-content li {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}
  
.close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #555;
}

.close-popup {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #555;
}
  
#cancel-button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #ccc;
    border: none;
    border-radius: 5px;
}
  
.inline-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;  /* Align to the top */
    flex-wrap: wrap;
}
  
.prompt-text-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
  
input.small-input {
    flex-grow: 1;
    width: 100px;
    height: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 2px !important;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
}

.prompt-start-conversation {
    background-color: #fe5379;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    margin-left: 20px;
}
  
.error-message {
    color: red;
    font-size: 14px;
    margin-left: 10px;
}

.chart-container #fluencyChart {
    height: auto !important; /* or specify a height */
    display: block;
}


#conversation-history-container div {
    cursor: pointer;
}

@keyframes ellipsisLoader {
    0% { transform: scale(1); }
    33% { transform: scale(1.2); }
    66% { transform: scale(1); }
}

.ellipsis-loader span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background: #fe5379; /* Change the color if needed */
    border-radius: 50%;
    animation: ellipsisLoader 0.5s infinite alternate;
}

.ellipsis-loader span:nth-child(2) {
    animation-delay: 0.2s;
}

.ellipsis-loader span:nth-child(3) {
    animation-delay: 0.4s;
}
  
.speech-instruction {
    display: none;
}

.switch {
    position: relative;
    display: inline-block;
    width: 45px;  /* 75% of 60px */
    height: 25.5px;  /* 75% of 34px */
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 25.5px; /* 75% of 34px, maintains the rounded appearance */
}

.slider:before {
    position: absolute;
    content: "";
    height: 19.5px;  /* 75% of 26px */
    width: 19.5px;  /* 75% of 26px */
    left: 3px;  /* 75% of 4px */
    bottom: 3px;  /* 75% of 4px */
    background-color: white;
    border-radius: 50%; /* this rounds the moving part of the toggle */
}

input:checked + .slider {
    background-color: #fe5379;
}

input:focus + .slider {
    box-shadow: 0 0 1px #fe5379;
}

input:checked + .slider:before {
    -webkit-transform: translateX(19.5px);  /* 75% of 26px */
    -ms-transform: translateX(19.5px);  /* 75% of 26px */
    transform: translateX(19.5px);  /* 75% of 26px */
}

#translation-text {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    color: #333;
}

.profile-page .form-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.conversations-left-message {
    display: none;
}


.profile-page .form-group > span {
    flex: 1;
}

.profile-page-container {
    font-size: 14px;
}

.profile-page-container .form-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-page-container .form-group > span {
    flex: 1;
}

.button-wrapper {
    display: flex;
    justify-content: start; 
    gap: 10px; 
    margin-top: 20px;
}

.reminder-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.reminder-modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.reminder-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.reminder-close:hover,
.reminder-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* This styles the wrapper to take up the full width of its parent and position its children (the icon) to the right. */
.delete-icon-wrapper {
    display: flex;
    justify-content: flex-end;
}

/* This styles the delete icon to appear in red. */
.delete-conversation-icon {
    color: #fe5379;
    cursor: pointer; /* Makes the icon look clickable. */
    padding: 5px;    /* Gives a little space around the icon for easier clicking. */
}

.premium-content {
    display: none;
}

.button-container-profile {
    display: flex; /* Align buttons in a row */
    width: 100%; /* Sets the width of the container to full width */
}

.equal-width-button {
    flex-grow: 1; /* Each button grows equally to fill the container */
    text-align: center; /* Centers the text inside the button */
    padding: 10px; /* Adds some padding inside the button for better appearance */
    margin-top: 20px;
    margin-right: 5px;
    margin-left: 5px; /* Adjusts margins */
    background-color: #fe5379;
}

.freestyle-button {
    flex-grow: 1; /* Each button grows equally to fill the container */
    text-align: center; /* Centers the text inside the button */
    padding: 10px; /* Adds some padding inside the button for better appearance */
    margin-top: 20px;
    background-color: #fe5379;
}

.freestyle-button:hover {
    background-color: #ff8096; /* Lighter shade on hover */
    color: white; /* Change text color on hover */
}

.buttons-wrapper {
    display: flex;
    flex-direction: column; /* Stack button containers vertically */
}

.equal-width-button:hover {
    background-color: #ff8096; /* Lighter shade on hover */
    color: white; /* Change text color on hover */
}

#startGameButton{

    background-color: #fe5379;
}

#startGameButton:hover {
    background-color: #ff8096; /* Lighter shade on hover */
    color: white; /* Change text color on hover */
}

#gameContent ul {
    list-style-type: disc; /* Adds bullet points */
    padding-left: 20px; /* Adds space before the bullet points */
}

.hint-text {
    font-size: 0.9em; /* Makes the font slightly smaller */
}

.completion-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.completion-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.complete {
    background-color:#ff9797 
}

.current {
    background-color: blue; /* Example style */
}

.locked {
    background-color: grey; /* Example style */
    cursor: not-allowed;
}


.pricing-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px;
   
}

.subscription-option {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative; /* For positioning the recommended badge */
}

.subscription-option input[type="radio"] {
    display: none;
}

.subscription-option label {
    cursor: pointer;
    display: block;
    min-height: 200px; /* Adjust height based on content */
}



.subscription-option.popular::before {
    content: 'Most Popular';
    position: absolute;
    top: -10px;
    right: -10px;
    background: blue;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.85em;
}

.discount {
    color: #4CAF50; /* A more web-friendly shade of green */
    font-weight: bold;
    font-size: 0.9em;
}

.cta-button {
    background-color: #fe5379; /* New button color */
    color: white;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: rgb(255, 146, 153); /* Darker shade for hover state */
}

/* List styles */
.subscription-main ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.subscription-main li {
    margin-bottom: 10px;
    font-size: 1em;
}

.pronunciation-feedback {
    display: none;
}

.scenario-margin-top {
    margin-top: 20px;
}

.scenario-width-full {
    width: 100%;
}

.scenario-text-2xl {
    font-size: 1.5rem;
}

.scenario-font-bold {
    font-weight: bold;
}

.scenario-mb-2 {
    margin-bottom: 0.5rem;
}

.scenario-bg-white {
    background-color: white;
}

.scenario-shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.scenario-rounded {
    border-radius: 0.25rem;
}

.scenario-my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.scenario-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.scenario-table-header {
    padding: 1rem;
    background-color: #f7fafc;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.875rem;
    border-bottom: 1px solid #e2e8f0;
}



.scenario-flex-1 {
    flex: 1;
}

.scenario-table-container {
    overflow-x: auto; /* Allows horizontal scrolling */
    max-width:100%;
    width:100%;
  }
  

.scenario-table-cell-right {
    text-align: right;
}

.scenario-hover-bg:hover {
    background-color: #ebf4ff;
}

.scenario-table-cell {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
  }
  
  @media (max-width: 550px) {
    .scenario-table-cell {
      padding: 0.4rem;
    }
  }

  @media (max-width: 768px) {
    .gender-column {
      display: none;
    }
  }

.scenario-button {
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    background-color: #fe5379;
    border: none;
    cursor: pointer;
}

.scenario-button:hover {
    background-color: #ff8096; /* Lighter shade on hover */
    color: white; /* Change text color on hover */
}

.scenario-button-icon {
    margin-left: 4px;
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
  }

.scenario-button-delete {
    background-color: #ff0000; /* Red color for delete button */
}

.scenario-button-delete:hover {
    background-color: #cc0000; /* Darker shade of red on hover */
}

.scenario-button-edit {
    background-color: #6c757d; /* Secondary color for edit button */
}

.scenario-button-edit:hover {
    background-color: #5a6268; /* Darker shade of secondary color on hover */
}


.scenario-table-cell-center {
    text-align: center;
  }


  input[type="text"],
textarea {
  font-family: inherit;
  font-size: inherit;
}


.test-button {
    background-color: #fe5379;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 16px;
}

.test-button:hover {
    background-color: #e24a70;
}

.conv-scenario-container {
    display: flex;
    overflow-x: hidden; /* No horizontal scrollbar needed */
    width: 100%; /* Full width */
    padding: 10px 0; /* Padding on top and bottom */
    margin-left: 10px;
}



.conv-scenario-card {
    width: 100%; /* Full width of its container */
    height: 120px; /* Reduced height to make it shallower */
    border-radius: 8px;
    background-color: #f4f4f4;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center; /* Align items in the middle vertically */
    padding: 5px;
    color: #333;
    transition: background-color 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: adds shadow for depth */
}

.conv-scenario-image-container {
    width: 100px; /* Fixed width for the image container */
    height: 100%; /* Full height of the card */
    position: relative;
    flex-shrink: 0; /* Prevents the container from shrinking */
}

.conv-scenario-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 0 0 8px; /* Rounded corners on the left side */
}

.conv-scenario-character {
    position: absolute;
    bottom: 10px; /* Position character info at the bottom of the image container */
    left: 10px;
    background-color: rgba(255, 255, 255, 0.8); /* Light background for better visibility */
    border-radius: 15px;
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.conv-scenario-content {
    flex-grow: 1; /* Takes up remaining space */
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space between title and action */
}

.conv-scenario-title {
    font-weight: bold;
    font-size: 16px; /* Larger font size for better visibility */
    color: #333;
    margin-bottom: 5px; /* Reduced margin */
}

.conv-scenario-action {
    font-size: 14px; /* Slightly larger font for actions */
    color: #666; /* Slightly lighter color for less emphasis */
}

.conv-scenario-action button {
    padding: 7px 10px;
    background-color: #fe5379;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.conv-top-container {
    display: flex;
    width: 100%; /* Full width to cover the top of the page */
}

.conv-menu-button {
    font-size: 24px; /* Larger icon size */
    background: none;
    border: none;
    color: #333; /* Matching the text color of the scenario card */
    cursor: pointer;
    padding: 10px;
    margin-right: 20px; /* Space between the menu button and the scenario card */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 13px auto;
}

.conv-menu-button:hover {
    color: #fff; /* Change text color to white on hover */
}