body, html { color: black;  background-color: #ffffff; font-family: 'Open Sans'; margin: 0; padding: 0; font-size: 15px; }
@media (max-width: 690px) { body, html { font-size: 13px; } }

div.maincontainer {  max-width: 690px; margin: 0 auto; padding: 2px;  }

.blue { color: blue; }
.red { color: red; }
.green { color: green; }
.purple { color: purple; }

  .containertable { margin: 0 auto; padding: 2px;  }
  .rowtable { display: grid; 
  grid-template-columns: 35% 65%;
  border: 1px solid #ddd; 
/*  margin-bottom: 12px; */
	margin: 0px;
	padding: 12px 0px;
} 
  .celltable { padding: 4px; text-align: left; }
 
  /* Optional: slightly smaller text on very small screens */
  @media (max-width: 690px) {
     .thumbwidth { width: 90%; }
  }
img.thumb { border: 1px solid #ccc; padding: 4px; border-radius: 10px; }img.map   { border: 1px solid #ddd; padding: 4px; border-radius: 10px; background-color: #f1f2ff; margin: 0px; } 
  /* Desktop container */
  .containersh { max-width: 700px; margin: 0 auto;  }

  /* --- Top Row --- */
  .top-rowsh { display: grid; grid-template-columns: 320px 1fr; border: 1px solid #ddd; margin-bottom: 8px; }
  .top-cellsh { padding: 8px 4px; } /* padding on top row */
  .top-cellsh:first-child { border-right: 0; }

  /* --- Bottom Columns --- */
  .columnssh { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid #ddd; }
  .colsh { padding: 4px 2px; border-right: none; } /* padding columns */
  .colsh:last-child { border-right: none; }

  /* Desktop alignment */
  .colleft { text-align: left; }
  .colcenter { text-align: center; }
  .colright { text-align: right; }

  /* --- Mobile Layout --- */
  @media (max-width: 700px) {

    /* Stack top row */
    .top-rowsh { grid-template-columns: 1fr; }
    .top-cellsh { border-right: none; border-bottom: 0; }
    .top-cellsh:last-child { border-bottom: none; }

    /* Stack bottom columns */
    .columnssh { grid-template-columns: 1fr; }
    .colsh { text-align: left; border-right: none; border-bottom: 0; padding: 4px 8px; }
    .colsh:last-child { border-bottom: none; }
  }

.bar {
height: 26px;
padding: 2px;
background-color: #fde8fd;
text-align: center; border: 1px solid #ddd;
}



/* general css */
.priceconditions { color: #a05300; font-weight: bold; font-size: 0.9em; }
.price { font-size: 13px;  color: #0062c8; font-weight: bold; }
.price6m { font-size: 12px;  color: #0062c8; font-weight: bold; }
.layout { border: 0px solid #ddd; padding: 0; }

.indexpage_no, .indexpage_location { font-size: 18px;  font-weight: bold; }
.codep { font-size: 1.5em; padding: 5px 0 10px 0; font-weight: bold ; border: 0px; color: #0062c8; }
@media (max-width: 700px) {
.indexpage_no, .indexpage_location { font-size: 16px;  font-weight: bold; }
.codep { font-size: 1.2em; }
}




img.sm { border: 1px solid #ddd; border-radius: 50%; padding: 1px; width: 24px; background-color: white; }
img.sm:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); }

h4 { font-size: 16px; color: #010e5a; }

.notavailable { color: #a27301; font-size: 0.9em;}

div.povcontainer { background-color: #f1f2fc; margin: 0px; padding: 0px; 
margin-top: 28px; border-bottom: 1px solid #ddd; width: 220px; font-size: 14px; }
div.povtxt { background-color: inherit; padding: 4px; margin: 6px; text-align: center; color: #080881; font-weight: bold; font-size: 0.9em; }
div.contactbox { text-align: center; width: 220px; padding:0px; margin: 0px; background-color: #f1f2fc; border-bottom: 1px solid #ddd; }

a.none:link, a.none:visited, a.none:active, a.none:hover { text-decoration: none; color: black; }
label { padding-right: 10px; }

input[type='submit'] {
  background-color: #007bff; /* Blue background */
  color: #ffffff;           /* White text */
  border: none;             /* Remove default border */
  border-radius: 5px;       /* Rounded corners */
  padding: 2px 10px;       /* Add padding */
  font-size: 14px;          /* Set font size */
  cursor: pointer;          /* Change cursor on hover */
}

input[type='submit']:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

.rounded-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 2px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 8px 0px;
  text-decoration: none;
}

.rounded-button:hover {
  background-color: #0056b3;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#banner { padding: 0px;  text-align: center; font-family: 'Fira Sans', sans-serif, serif, arial, lucida; }
#banner h1 .kop { color: #9be; }
#banner h1 { color: #8c187b; font-size: 32px; font-weight: normal; letter-spacing: 0.5ex; margin: 0px; text-transform: lowercase;
word-spacing: -0.8ex; }

@media (max-width: 690px) { 
#banner h1 { font-size: 22px; }
}

.button {
/*  border: 1px solid #ddd; */
  color: gray;
  padding: 2px 10px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
    text-decoration:none;
  margin: 2px;
  cursor: pointer;
}

a.nodeco { text-decoration:none; }
a.nodeco:link, a.nodeco:visited, a.nodeco:active {color: blue; }
a.deco { font-size: 0.9em; }
a.deco:link, a.deco:visited, a.deco:active {color: gray; }
a.deco:hover {color : purple; }
img.pnb { width: 11px; height: 11px; border: 0;}