<style>
a { 
    text-decoration: none; 
}
table {
  width: calc(100vw - 50px); /* Adjust margin as needed */
  max-width: 660px; /* Limit width to 500x on larger screens */
  border-collapse: collapse;
  overflow-x: auto;
}

input[type="radio"] {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
  transform: scale(1.5);
}

 .overflow-wrap {
     overflow-wrap: anywhere; /* similar to word-wrap: break-word, but more modern */
  }

input[type="button"] {
  background-color: #4c6585;
	FONT: bold 15px Verdana;
    COLOR: white;
  width: 185px;
  height: 50px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: block; 
  margin-top: 20px; /* Adjust margin as needed */ 
  text-align: center;
}


input[type="button"]:hover {
  background-color: #81abde; /* Darker green on hover */
}


input[type="checkbox"] {
  -webkit-appearance: checkbox; /* For WebKit browsers (Chrome, Safari) */
  -moz-appearance: checkbox;    /* For Firefox */
  appearance: checkbox;         /* Standard property */
  width: 20px;  /* Set width and height */
  height: 20px;
}

.RT-DIV
{ 
  /* Styles specifically for .container.RT-container */
	
  padding: 20px; 
  display: flex; 

}

.RT-container { 
  /* Styles specifically for .container.RT-container */

  background-color: white; 
	border: 1px solid silver;
  	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;

}


.item {
  flex: 1 1 200px; /* Adjust width as needed */
  margin: 10px; /* Add spacing between items */
}
@media (max-width: 500px) { 
  /* For mobile devices */
  .RT-container {
    flex-direction: column; 
  }
 
}


th, td {
  border: 1px solid silver;
  padding: 4px;
	
}


.resizable-column {
  overflow: hidden;
	text-align: center
}

.resizer {
  position: absolute;
  right: -5px;
  top: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 999;
}

/* Media query for smaller screens (adjust as needed) */
@media (max-width: 500px) { 
  table {
    font-size: 0.8em; /* Reduce font size for better readability */
  }
}




/* Media query for smaller screens */
@media (max-width: 280px) { 
  .container {
    flex-direction: column; /* Change to vertical layout */
	
  }
}


button {
  background-color: #4c6585;
	FONT: bold 15px Verdana;
    COLOR: white;
  width: 185px;
  height: 50px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: block; 
  margin-top: 20px; /* Adjust margin as needed */ 
  text-align: center; 
}

button:hover {
  background-color: #81abde; /* Darker green on hover */
}

 .food-button {
    background-image: url('img/dining.jpg');
    background-size: cover; /* Or contain, or specify width/height */
    background-repeat: no-repeat;
    width: 150px; /* Adjust as needed */
    height: 50px; /* Adjust as needed */
    border: none;
    cursor: pointer;
    color: white; /* Adjust text color for visibility */
    padding: 10px 20px; /* Add some padding */
    font-size: 16px; /* Adjust font size */
  }

.NewReservationButton {
  	width: 320px;
  	height: 80px;
  	font-size: 25px;
	border: none;
}


textarea {
  resize: vertical; /* Allow resizing only vertically */
  /* resize: horizontal; */ /* Allow resizing only horizontally */
  /* resize: both; */ /* Allow resizing both vertically and horizontally (default) */
  /* resize: none; */ /* Disable resizing */
}

Select { 
  width: 100px;
  height: 40px;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 0px;
 FONT: 15px Verdana;
	COLOR: #3f4245;
  margin-left: 0px;
}

.textBold25grey
{
    FONT: bold 25px Verdana;
    COLOR: #929ca6;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.textBold25
{
    FONT: bold 25px Verdana;
    COLOR: #3f4245;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.textBold20grey
{
    FONT: bold 20px Verdana;
    COLOR: #929ca6;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.textBold20
{
    FONT: bold 20px Verdana;
    COLOR: #3f4245;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.textBold15grey
{
    FONT: bold 15px Verdana;
    COLOR: #929ca6;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.textBold15
{
    FONT: bold 15px Verdana;
    COLOR: #3f4245;
    TEXT-DECORATION: none;
	white-space: nowrap;

}
.text15grey
{
    FONT: 15px Verdana;
    COLOR: #929ca6;
    TEXT-DECORATION: none;
	white-space: nowrap; 
}

.text15
{
    FONT: 15px Verdana;
    COLOR: #3f4245;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.textBold12grey
{
    FONT: bold 12px Verdana;
    COLOR: #929ca6;
    TEXT-DECORATION: none;
	white-space: nowrap; 

}

.textBold12
{
    FONT: bold 12px Verdana;
    COLOR: #3f4245;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.text12grey
{
    FONT: 12px Verdana;
    COLOR: #929ca6;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.text12
{
    FONT: 12px Verdana;
    COLOR: #3f4245;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.textBold10grey
{
    FONT: bold 10px Verdana;
    COLOR: #929ca6;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.textBold10
{
    FONT: bold 10px Verdana;
    COLOR: #3f4245;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.text10grey
{
    FONT: 10px Verdana;
    COLOR: #929ca6;
    TEXT-DECORATION: none;
	white-space: nowrap; 

}

.text10
{
    FONT: 10px Verdana;
    COLOR: #3f4245;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.textBold8grey
{
    FONT: bold 8px Verdana;
    COLOR: #929ca6;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.textBold8
{
    FONT: bold 8px Verdana;
    COLOR: #3f4245;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.text8grey
{
    FONT: 8px Verdana;
    COLOR: #929ca6;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}

.text8
{
    FONT: 8px Verdana;
    COLOR: #3f4245;
    TEXT-DECORATION: none;
	white-space: nowrap; 
	
}
.maintext
{
    FONT: 11px Verdana, Arial, Helvetica, sans-serif;
    TEXT-TRANSFORM: none;
    COLOR: #000000;
    TEXT-ALIGN: justify;
    TEXT-DECORATION: none
}
.small
{
    FONT: 9px Verdana, Arial, Helvetica, sans-serif;
    TEXT-TRANSFORM: none;
    COLOR: black;
    TEXT-ALIGN: justify;
    TEXT-DECORATION: none
}
.smallbold
{
    FONT: bold 9px Verdana, Arial, Helvetica, sans-serif;
    TEXT-TRANSFORM: none;
    COLOR: black;
    TEXT-ALIGN: justify;
    TEXT-DECORATION: none
}


.password-container {
  position: relative; /* Needed for absolute positioning of the button */
  display: flex; /* To potentially align input and button */
  align-items: center; /* Vertically align items in the flex container */
}

#password {
  padding-right: 30px; /* Make space for the eye icon */
  width: 200px; /* Adjust as needed */
}

.toggle-password {
  position: absolute;
  right: 5px; /* Adjust position from the right */
  top: 50%;
  transform: translateY(-50%); /* Vertically center the button */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none; /* Remove default button outline */
}

.toggle-password img {
  width: 20px; /* Adjust icon size */
  height: auto;
}


  .slider-container {
    width: 500px;
    overflow: hidden;
    position: relative;
  }

  .slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .slide {
    min-width: 100%;
    height: 500px; /* Set a fixed height */
    overflow: hidden; /* Hide any image overflow */
  }

  .slide img {
    width: 100%; /* Image takes full width of slide */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Crop/resize to fill */
  }

  .slider-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .slider-controls span {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
  }
</style>
