img {
  width: 20%;
  height: auto;
  max-height: 280px;
  z-index: 100;
  float: center;
}

figure {
    /* Ensures the figure acts as a block and can be styled as a unit */
    display: block; 
    text-align: center; /* Centers both the image and the figcaption text */
    margin: 0; /* Resets default margin if needed */
}

figcaption {
    /* Add some space between the image and the text */
    margin-top: 0px; 
    font-size: 20px; /* Makes the text slightly smaller */
    font-weight: bold;
    color: midnightblue;
    background-color: lightgray;
}

.web-header {
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
  background-color: lightgray;
  color: midnightblue;	
}

.web-sub-header {
  font-size: 16px;
  font-weight: bold;
  color: #191970;
  margin-left: 10px;
  background-color: lightgray;
  color: midnightblue;	
}

.web-lines {
  font-size: 16px;
  font-weight: normal;
  color: black;
  margin-left: 10px;
}

.google-maps {
    position: relative;
    padding-bottom: 75%; 
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.iframe-responsive {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


.buttonclass {
   border-style:solid; 
   margin-left: 3px;
   font-weight:bold;
   font-size: 16px;
   color:white;
   background-color:#0673A0;
}

.buttonclass.hover {
   background-color:maroon;	
}

.img:hover {
   color: #424242; 
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(2.00);
  -ms-transform: scale(2.00); /* IE 9 */
  -webkit-transform: scale(2.15); /* Safari and Chrome */
}

html.can-touch a:hover{
	background: none;
}

.container {
  max-height: 450px;
}
li {
  list-style-type: none;	
}   

body {
  font-family: 'lato', sans-serif;
  margin: 0;
  padding: 0;
  font-size: 10px;
  box-sizing: border-box; 
}

.wrapper {
	display: flex;
	justify-content: center;
	flex-flow: column;
	max-width: 1500px;
	margin: auto auto 0 auto;
	background: lightgrey;
	height: 800px;
	font-size: 14px; 
}

.nav-content {
   	flex: 2; 
}

.header-content {
	flex: 4;
	background: skyblue;
	margin: auto;
	width: 100%
}

.container {
	flex: 14;
	display: flex;
	flex-flow: row;
	max-width: 1500px;
	justify-content: space-around;
	/*position: relative;*/
	z-index: 0;
	background-color: lightgrey;
	overflow: scroll;
}

.aside-left {
	flex: 3;
	margin: 5px 5px;
	padding: 7px;
	height: auto;
	overflow-x: scroll;
	overflow-y: scroll;
	order: 1;
	background: lightgrey;
}

.main-content {
	flex: 9;
	margin: 5px 0px 5px 0px;
	padding: 7px;
	background: #E6E3E3;
	height: auto;
	overflow-x: scroll;
	overflow-y: scroll;
	order: 2;
}

.aside-right {
	flex: 2;
	margin: 5px 5px;
	padding: 7px;
	background: lightgrey;
	height: auto;
	overflow-x: scroll;
	overflow-y: scroll;
	order: 3;
}

.footer-content {
	flex: 2;
	background: skyblue;
	/*text-align: center;
	height: auto;*/
}

/**** added on 2020-07-29 for console message */
.main-window {
	display: flex;
	flex-flow: column;
	overscroll-behavior: contain;
}
.main {
	flex: 9; 
}
.console-message {
	background-color: skyblue;
    flex: 1;
    font-size: 16px;	
}
/****** end of css for index page ********/

/* smart phones (P and L) */
@media only screen 
     and (min-device-width : 320px)
     and (max-device-width : 480px) {
     }

/* smart phones (L) */
@media only screen 
     and (min-device-width : 321px) {
     }     

/* smart phones (P) */
@media only screen 
     and (max-device-width : 320px) {
     }

/* smart phones (ipads L) */
@media only screen 
     and (min-device-width : 768px)
     and (max-device-width : 1024px) 
     and (orientation : landscape) {
     }

 /* desktops and laptops */
@media only screen 
     and (min-device-width : 1224px) {
     }

 /* large desktops */
@media only screen 
     and (min-device-width : 1824px) {
     }     

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
       only screen and (-min-device-pixel-ratio : 1.5) {
     }     
      
@media all and (max-width: 500px) {
	
	
    .table-header {
      display: none;
    }
    .table-row {
      background-color: grey;
      margin-right: 35px;
      margin-bottom: 30px;
      height: 200px;
    }
     
    /*   
    .list-container ul li {
      display: block;
      padding: 10px 10px;
      margin-bottom: 30px;
      list-style-type: none;
    }
    */
    
    .col {
      display: flex;
      padding: 0px 0px;
    } 
    /* 
    col::before {
        color: #6C7A89;
        padding-right: 10px;
        content: attr(data-label);
        flex-basis: 50%;
    } 
    */
  }
  
  
  /* default classes for the dropdown list   */
  .dropdown-title-default {
    color: maroon;
	text-align: center;
	font-style: normal;
	font-size: 1.0em;
	font-weight: bold;
  }
  
  .dropdown-language-title {
    color: maroon;
	text-align: left;
	font-style: normal;
	font-size: 1.0em;
	font-weight: bold;
  }  
  
  .dropdown-value-default {
    color: green;
	text-align: center;
	font-style: italic;
	font-size: 1.0em;
	font-weight: bold;
  } 
  
  .is-phone .clickable-styled-container {
    position: relative;
  }
  .is-phone select  {
    position: absolute;
    width: auto;
    top: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
  }
  
  /***** classes for forms ********/
  .mustenter {
    background-color: yellow;
    list-style: none;
    width: 250px;
  }
  
  /*
  .li_class  {
    padding-left: 20px;
    display: table-row;
  }  

  li label {
    display: table-cell;
  }

  li label:not(:first-child) {
    padding-left: 50px;
  }
  */
  
  .ulstyle {
    list-style: none;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
	color: green;
	font-style: italic;
	font-size: 1.0em;
	font-weight: bold;
    justify-content: left;
    overflow-x: scroll;
	overflow-y: scroll;
  }
    
  .table_div  {
	overflow-x: scroll;  
	overflow-y: scroll;  
  }
  
  table,
  td {
    border: 1px solid #333;
  }
  
  thead,
  tfoot {
    background-color: #333;
    color: #fff; 
  }
   	
  .table-heading-format {
    background-color: lightgrey;
    color: maroon;
	font-style: normal;
	font-size: 1.5em;
	font-weight: bold;
	overflow-y:auto;
	overflow-x:auto;
   }
      
  .language-title-format {
    color: maroon;
	font-style: normal;
	font-size: 0.95em;
	font-weight: bold;
   }
   	
  .table-cell-format {
    background-color: lightgrey;
    color: black;
	font-style: normal;
	font-size: 1.2em;
	font-weight: bold;
   }
   	
  .open-cell-format {
    background-color: green;
    color: white;
	font-style: normal;
	font-size: 1.2em;
	font-weight: bold;
	
   }
   
  .booked-cell-format {
    background-color: blue;
    color: white;
	font-style: normal;
	font-size: 1.2em;
	font-weight: bold;
   }
   
  .closed-cell-format {
    background-color: grey;
    color: white;
	font-style: normal;
	font-size: 1.2em;
	font-weight: bold;
   }
   
  .disabled-cell-format {
    color: blue;
	font-style: normal;
	font-size: 1.2em;
	font-weight: bold;
   }

.flex-smallform-container {
    display: flex;
    flex-direction: row;
    width: 400px;
    font-size: 15px;
    background-color: Silver;
    border: 1px solid #8888bb;
    text-align: center;
    justify-content: space-between;
  
}

.flex-form-item1 {
    flex-basis: 160px; 
    background-color: Silver;
    font-size: 14px;  
}

.flex-form-item2 {
    flex-basis: 240px;
    font-size: 14px;
}

.flex-form-textarea {
    flex-basis: 240px;
    font-size: 14px;
    width:  300px;
    height: 150px;
}

.flex-form-item2g {
    flex-basis: 240px;
    background-color: Silver;
    font-size: 14px;
}

.flex-form-item3 {
    flex-basis: 240px;
    background-color: yellow;
    font-size: 12px;
    font-weight: bold;
}

.flex-form-item4 {
    flex-basis: 240px;
    background-color: yellow;
    font-size: 14px;
    font-weight: bold;
}

.block-title {
	height:auto;
    background-color:lightgrey;
    width:400px;
}

.checkbox-div {
	overflow-y:scroll;
    overflow-x:hidden;
    height: auto;
    background-color: lightgrey;
}

/*
.flex-checkbox {
	display: flex;
	flex-flow: row;
	flex: 10;
	width: 400px;
	justify-content: space-around;
	z-index: 0;
	background-color: grey;
    font-size: 14px; 
    vertical-align:left;
     
} 

.flex-checkbox-label {
	flex: 7;
	margin: 5px 5px;
	padding: 7px;
	height: auto;
	order: 1;
	background-color: silver;
}

.flex-checkbox-option {
	flex: 3;
	margin: 5px 5px;
	padding: 7px;
	height: auto;
	order: 2;
	background-color: blue;
}
*/
/******** end classes for form   ********/
 
/******** classes for the console message *******/

.console-error {
	color: red;	
	background-color: lightgrey;
	border: double;	
	border-color:maroon;
	height: 30px;
	font-size: 1.0em;
}

.console-warning {
	color: black;	
	background-color: lightgrey;
	border: double;	
	border-color:maroon;
	height: 30px;
	font-size: 1.0em;
}

.console-success {
	color: green;	
	background-color: lightgrey;
	border: double;	
	border-color:maroon;
	height: 30px;
	font-size: 1.0em;
}

.console-information {
	color: blue;
	background-color: lightgrey;
	border: double;	
	border-color:blue;
	height: 30px;
	font-size: 1.0em;
}

.background-yellow {
	background-color: yellow;
}

.background-lightgreen {
	background-color: lightgreen;
}

.background-lightgrey {
	background-color: lightgrey;
}

.color-maroon {
	color: maroon;
}
.social {
  display: flex;
}

.items_soc {
  height: 100%;  /* Set the desired height */
  width:  400px;  /* Set the desired width */
  object-fit: cover;
  margin-left: 20px;
  /* filter: brightness(0%) invert(100%); */
}
   
.privateaccess-format {
  color: maroon;
  font-style: normal;
  font-size: 16px;
  font-weight: bold;
 }