@import url('https://fonts.googleapis.com/css?family=Lexend&display=swap');
    /* Apply the font to elements */
    
    table {
  font-family: "Lexend", sans-serif;
  border-collapse: collapse;
  width: 60%;
}

td, th {
  border: 3px solid #183538;
  padding: 8px;
  background-color: white;
}


td:hover {background-color: #183538;
color: white}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: white;
  color: white;
}

    body {
        background-color: white;
        color: #183538;
        font-family: 'Lexend', sans-serif;
        margin: 20px; 
    }


    .navbar {
  overflow: hidden;
  background-color: #000435;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #00008B;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #330023;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #ffdbe9;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

chattable.initialize({
   theme : "Tendo"
 }

.container {
  width: 50%; /* Or a specific width */
  height: 300px; /* Or a specific height */
  display: flex; /* Or use grid or other layout methods */
  /* Add any other desired styling */
  overflow-y: auto; /* Or scroll */
  /* overflow-x: hidden;  (optional) */
  transform: scaleX(-1); /* Flip the container */
  background-color: #b8e5e7;
  color: #183538;
  font-family:'lexend', sans-serif;
  margin: 20px
}

.scrollable-content {
  width: 100%; /* Or a specific width */
  height: 200; /* Or a specific height */
  overflow-y: auto;
  overflow-x:hidden;/* Enable vertical scrolling */
   transform: scaleX(-1); /* Flip the content back */
   margin: 20px;
}
  /* Add any other desired styling */




.flex-container {
    display: flex;
    margin: 20px
}
.flex-child {
    flex: 1;
    border: 9px solid #183538;
    margin: 20px }