<style type="text/css">

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

.logo {font-family:fontawesome;text-decoration:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:37px;letter-spacing:3px;color:#555555;display:block;position:absolute;top:17px;}

.w3-wide{letter-spacing: 4px;}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}}
.w3-left{float:left!important}.w3-right{float:right!important}

.top {position: relative;background-color: #ffffff;height: 68px;padding-top: 20px;line-height: 50px;overflow: hidden;z-index: 2;}

	/* Estilo basico */
	body,table,tr,td,p,.normal {
		font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
		font-size: 12pt;
	}

       	/* Estilo pequeno */
       	.big {
               	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
               	font-size: 15pt;
		font-weight: bold;
       	}

	/* Estilo pequeno */
	.small {
		font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
		font-size: 10pt;
	}

	/* Links basicos */
	a { text-decoration: none; }
	a:link { color: #0069B3; }
	a:visited { color: #0069B3; }
	a:hover { color: #0069B3; text-decoration: underline; }
	a:active { color: #FFD800; }

	/* Titulos tablas (fila) */
	.thr {
		background-color: #0069B3;
	}

	/* Titulos tablas */
	.th {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 12pt;
		font-weight: bold;
		color: #FFFFFF;
	}

	/* Contenido tablas (fila) */
	.tdr {
		background-color: #E7E7E7;
	}

	/* Contenidos tablas */
	.td {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 12pt;
	}

	.boardTable {
		width:500px;
		align:center;
	}
	@media (max-width:600px)
	{
		.boardTable {
			width:100%;
			align:center;
		}
	}

        .rounded {
                -moz-border-radius: 10px;
                border-radius: 10px;
		padding-left:5px;
		padding-right:5px;
		padding-top:2px;
		padding-bottom:2px;
        }

	.solid_black_border {
		border: solid grey 1px;
	}

	.solid_black_border_top {
		border-top: solid grey 1px;
	}

	.solid_black_border_left {
		border-left: solid grey 1px;
	}

	.solid_black_border_bottom {
		padding-top:2px;
		padding-bottom:2px;
		border-bottom: solid grey 1px;
	}

	/* Formularios */
	form {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 12pt;
		margin: 0px;
	}
	input,option,textarea {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 13pt;
	}

	/* Page Title */
	.pt { font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 15pt;
		font-weight: bold;
		color: #000000;
		text-align: left;
	}

	/* Small Title */
	.st { font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14pt;
		font-weight: bold;
		color: #000000;
	}

	/* Normal Text */
	.nt { font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 13pt;
		color: #000000;
		text-align: left;
	}

	/* Abbreviations */
	html\:abbr, abbr {
		background: yellow;
		border: none;
		cursor: help;
	}

	/* Title link */
	A.title { color: black; text-decoration: none; }

/* MENUS */

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

/* Add a black background color to the top navigation */
.topnav {
  width: 100%;
  background-color: #333;
  overflow: auto;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  height: 21px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Current/active navbar link */
.active {
  background-color: #4CAF50;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 17px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #ddd;
  color: black;
}

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

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  #myTopnav > div:nth-child(7) > div > a {display: block;}
  .topnav div.dropdown:not(:nth-child(7)) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  table.varTable > tbody > tr > td:nth-child(2) {display: none; } 
  table.varTable > tbody > tr > td:nth-child(4) {display: none; } 
  table.varTable > tbody > tr > td:nth-child(5) {display: none; } 

/* used for cuentos_read @comments */
  table.varTable2 > tbody > tr > td:nth-child(2) {display: none; } 

/* used for forum_list */
  table.varTable3 > tbody > tr > td:nth-child(2) {display: none; } 
  table.varTable3 > tbody > tr > td:nth-child(3) {display: none; } 

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive div.dropdown {
    float: none;
    display: block;
    text-align: left;
  }
 .topnav-right {
  float: none;
}
}

@media (max-width: 600px){.w3-hide-small {display: none!important;}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}

/*

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
*/

/* FAQ Accordion Styling */
  .faq {
    font-family: Arial, sans-serif;
  }

  .category {
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
  }

  .category:hover {
    color: #555;
  }

  .questions {
    display: none;
  }

  .question {
    margin-left: 20px;
    cursor: pointer;
  }

  .answer {
    display: none;
    margin-left: 40px;
    margin-bottom: 10px;
  }


/* Conversations */

.messaging-container {
    display: flex;
    height: 70vh;
}

.conversations-panel {
    flex: 1;
    padding: 20px;
    border: 1px solid lightgray;
    background-color: rgba(255, 255, 255, 0.5);
    position: relative;
}

.buttons-container {
  position: absolute;
  top: 30px;
  right: 20px;
}

.new-conversation-btn {
/*  position: absolute; */
  top: 30px; /* Align button to the top */
  right: 60px;
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.refresh-btn {
/*  position: absolute; */
  top: 30px; /* Align button to the top */
  right: 120px; /* Adjust the right position based on your desired spacing */
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

.refresh-btn:hover {
  background-color: #0056b3;
}

.new-conversation-btn:hover {
  background-color: #0056b3;
}

.messages-panel {
    flex: 2;
    padding: 20px;
    border: 1px solid lightgray;
    background-color: rgba(255, 255, 255, 0.5);
/*    flex-grow: 1; */
}

.panel-title {
    margin-bottom: 10px;
    text-align: left;
}

.conversation-list {
    list-style-type: none;
    padding: 0;
/*    max-height: 600px; */ /* Adjust the height as needed */
    max-height: calc(100% - 40px); /* Adjust the height as needed, subtracting the height of the button and padding */
    margin-top: 40px; /* Add a margin to create space for the button */
}

.conversation-list li {
    padding: 10px;
    cursor: pointer;
    text-align: left;
}

.conversation-list li.active {
    background-color: lightgray;
    font-weight: bold;
}

.new-conversation-btn {
    margin-top: 10px;
}

.message-container {
    border: 1px solid lightgray;
    padding: 10px;
    height: 550px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

/* Styles for the new message input */
.new-message-container {
  display: flex;
  align-items: center;
  margin-top: 20px;
/*  background-color: #f7f7f7; */
}

.new-message-input {
  flex-grow: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  font-size: 12px;
  height: 100px;
}

/* Define a media query for smaller screens */
@media (max-height: 1024px) {
  .messaging-container {
    /* Adjust the styles for smaller screens */
    height: 65vh;
  }
  .conversation-list {
    max-height: 350px; /* Adjust the height as needed */
  }
  .message-container {
    height: 350px;
  }
  .new-message-input {
    height: 50px;
  }
  .message-container {
    height: 370px;
  }
}

/* Define a media query for smaller screens */
@media (max-height: 768px) {
  .messaging-container {
    /* Adjust the styles for smaller screens */
    height: 65vh;
  }
  .conversation-list {
    max-height: 320px; /* Adjust the height as needed */
  }
  .message-container {
    height: 300px;
  }
  .new-message-input {
    height: 50px;
  }
  .message-container {
    height: 300px;
  }
}

/* Add overflow-y: auto to enable vertical scrolling */
.scrollable {
    overflow-y: auto;
}

.messages {
  overflow-y: auto;
  /* experiment: */
  display: flex;
  flex-direction: column;
}

.message-container.align-left {
    justify-content: flex-start;
}

.message-content {
    font-size: 16px;
/*    margin-bottom: 5px; */
    margin: 0;
}

.message-info {
    font-size: 12px;
    color: #999999;
    display: flex;
    justify-content: space-between;
}

.message {
    text-align: left;
    background-color: #F5F5F5;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    max-width: 70%;
/*    width: fit-content; */
}

.message-date {
    margin-right: 5px;
}

.message-time {
    margin-left: 5px;
}

.message.left {
  align-self: flex-start;
  background-color: lightblue;
}

.message.right {
  align-self: flex-end;
  background-color: lightgreen;
}

.author-name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.lock-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-left: 4px; /* Adjust the spacing as needed */
}

.watermark-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; /* Adjust the z-index value as needed */
  pointer-events: none; /* Allow interaction with elements behind the overlay */
}

.watermark-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: red;
  opacity: 0.3;
  font-weight: bold;
  text-transform: uppercase;
  pointer-events: none; /* Ensure the overlay doesn't capture mouse events */
  transform: translate(-50%, -50%) rotate(40deg);
}

/* Styles for the send message button */
.send-message-btn {
  margin-left: 10px;
  padding: 10px 20px;
  font-size: 14px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.send-message-btn:hover {
  background-color: #0056b3;
}

/* Add a class for the floating post-it */
.post-it {
  position: fixed;
  top: 150px;
  right: 20px;
  background-color: rgba(255, 255, 0, 0.5); /* Add transparency */
  padding: 10px;
  z-index: 9999;
  text-align: left;
  width: 250px; /* Adjust the width to your desired value */
}

/* Optional styling for the content inside the post-it */
.post-it-content {
  color: black;
  font-size: 10px;
  text-align: left;
  padding: 5px;
  word-wrap: break-word;
}

.post-it-content ul {
  /* Other CSS properties */

  list-style: none;
  padding-left: 10px;
}

.post-it-content ul li {
  /* Other CSS properties */

  text-indent: -10px;
}

.menuItem-beta {
  display: inline-block;
  position: relative;
  margin-left: 0px; /* Adjust the margin as needed */
}

.menuItem-beta .fa-star {
  color: gold; /* Set the color of the star icon */
}

.beta-label {
  position: absolute;
  top: 2px; /* Adjust the vertical position as needed */
  right: 10px; /* Adjust the horizontal position as needed */
  background-color: #ff0000; /* Set the background color of the label */
  color: #ffffff; /* Set the text color of the label */
  font-size: 10px; /* Adjust the font size as needed */
  padding: 2px 5px; /* Adjust the padding as needed */
  border-radius: 3px; /* Set the border radius for rounded corners */
}

/* Styles for the modal window */
.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.5);
}

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

.modal-content h2 {
  font-size: 24px; /* Adjust the font size as needed */
  margin-bottom: 10px;
}

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

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

/* Styles for search results */

#searchResults {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#searchResults li {
  flex: 0 0 auto; /* Let the boxes grow and shrink based on content */
  margin: 5px;
  padding: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
  font-size: 14px;
  font-weight: normal;
  list-style: none; /* Remove the dot in front of each item */
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  background-color: lightblue; /* Set the background color to light blue */
  display: inline-block; /* Make the boxes inline */
  width: fit-content; /* Adjust the width to fit the content */
}

#searchResults li:hover {
  background-color: #f4f4f4;
}

/*
#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  outline: none;
  background-color: #555;
  color: #fff;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
}

#backToTopBtn:hover {
  opacity: 1;
}

#scrollToBottomBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 99;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  outline: none;
  background-color: #555;
  color: #fff;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
}

#scrollToBottomBtn:hover {
  opacity: 1;
}
*/

.scroll-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.scroll-buttons button {
  display: none;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  outline: none;
  background-color: #555;
  color: #fff;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
  margin-left: 10px; /* Adjust the spacing between the buttons */
}

.scroll-buttons button:first-child {
  margin-left: 0; /* Remove the margin for the first button */
}

.scroll-buttons button:hover {
  opacity: 1;
}


</style>
