:root {
  --body-bg: linear-gradient(135deg, #f5f7fa 0%, #4459AA 100%);
  --msger-bg: #fff;
  --border: 2px solid #ddd;
  --left-msg-bg: #ececec;
  --right-msg-bg: #4459AA;
  --primary-button-color: #4459AA;
  --primary-button-hover-color: #5671bc; /* Slightly lighter shade */
  --primary-button-disabled-color: #ccc;
  --primary-button-transition: background 0.23s;
  --secondary-button-color: #4d63a7; /* Slightly lighter than primary */
  --secondary-button-hover-color: #5a70b9; /* Even lighter shade */
  --suggested_msgs_background: #dae1f1; /* Light bluish background */
  --suggested_msgs_color: #AFCBEE; /* Same as primary color for consistency */
  --header_height: 60px;
}




html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

body {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligning to the top of the screen */
    /*height: 100vh; I'm setting this in the content wrapper*/
    background-image: var(--body-bg);
    font-family: Helvetica, sans-serif;
    margin: 0; /* Removing margin */
    line-height: 1.2; /* Example line height, adjusts the space between lines of text */

}


.content-wrapper {
    display: flex;
    flex-direction: column; /* Stacking children vertically */
    width: 100%; /* Taking full width */
    max-width: 1200px;
    height: 100vh; /* Taking full viewport height */
    overflow: hidden; /* Hiding any overflow content */
}

h3 {
    font-size: large;
    margin-bottom: 3px;
  }

p{
  margin-top: 15px;
  }

ul, ol {
  list-style-type: none; /* Removes the default bullets/numbers */
  padding-left: 0; /* Removes the default padding */
  margin-left: 0; /* Aligns to the left edge of the container */
  margin-top:10px
}

ul li::before, ol li::before {
  content: "•"; /* Adds custom bullet for UL */
  color: black; /* Bullet/number color */
  display: inline-block; /* Makes the bullet/number inline with the text */
  width: 1em; /* Width of the bullet/number area */
  margin-left: -1em; /* Align bullets/numbers outside the text area */
}

ol li::before {
  content: counter(list-item) " "; /* Adds numbers for OL */
  counter-increment: list-item; /* Increments the number */
}

ul li, ol li {
  margin-bottom: 0.2em; /* Adds space between list items */
  padding-left: 1em; /* Indents the text inside list items */
  text-align: left; /* Aligns text to the left */
}
  

.columns {
    display: flex;
    height: calc(100% - var(--header_height)); 
    position: relative;
}

.left-column,
.right-column {
  flex: 1; /* Make both columns take up equal width */
  height: 100%; /* Ensuring the right column takes the full height */
  overflow: hidden; /* Optional: in case the content overflows */
}

.msger-columns-btn {
  display: flex;
  align-items: center; /* Center vertically */
  padding: 0px;
  background-color: #ffffff00; /* Adjust as needed */
  border: none;
  cursor: pointer;
}

#left-text, #right-text {
  font-size: 14px; /* Adjust as needed */
  text-shadow: 1px 1px 2px #fff; 
}

#left-text {
  color: #555;/* or any color you want for the initial state */
  text-shadow: 1px 1px 2px #fff; 
  
}

#right-text {
  color: black; /* or any color you want for the initial state */
}

#toggle-icon {
  margin: 0 5px; /* Space between text and icon */
  width: 40px; /* Adjust as needed */
  height: 40px;
}

.togge-visibility-text {
  color: black;
  margin-right:10px;
}

.temporary-popup {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  z-index: 1000;
  opacity: 0; /* Start with an opacity of 0 */
  transition: opacity 0.5s ease-in-out; /* Add a transition effect */
}

.temporary-popup.fade-in {
  opacity: 1; /* Set the opacity to 1 to make it visible (fade-in) */
}

.temporary-popup.fade-out {
  opacity: 0; /* Set the opacity back to 0 to hide it (fade-out) */
}

.explanation_title {
 font-size: large;
 padding-top: 20px;
 padding-left: 10px;
 padding-right: 10px;
}

.explanation_box {
 font-size: medium;
 padding: 10px;
 line-height: 20px;
}
  
@media (max-width: 800px) {
    .columns {
      flex-direction: column;
    }
    .left-column,
    .right-column {
      display: none; /* Initially hide both columns */
    }
    /* Additional class to show the column when toggled */
    .show-column {
      display: block;
    }
    /* Style for the toggle button */
    .toggle-button {
      display: block;
      /* Add additional styling for the button here */
    }
    .content-wrapper {
      height: calc(100vh - 100px); /* Taking full viewport height */
  }
  }