body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

html, body {
  margin: 0;
  padding: 0; }

*, *::before, *::after {
  box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

label, button {
  cursor: pointer; }

img, video, embed, object {
  max-width: 100%; }

img {
  vertical-align: middle; }

ol, ul {
  list-style: none; }

caption, th {
  text-align: left; }

fieldset {
  border: none; }

.clearfix::before, .clearfix::after {
  content: "";
  display: table; }

.clearfix::after {
  clear: both; }

.center_text {
  text-align: center; }

.center_image {
  position: absolute;
  left: 50%; }

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px; }

.bodem {
  position: absolute;
  bottom: 0; }

.relatief {
  position: relative; }

.absoluut {
  position: absolute; }

.flexi {
  display: flex; }

.flexi_space {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

.flexi_center {
  display: flex;
  justify-content: center; }

.flexi_kolom {
  display: flex;
  flex-direction: column; }

.verborgen {
  display: none; }

.zichtbaar {
  display: block; }

.tekst_medium {
  font-size: 0.8em; }

.tekst_klein {
  font-size: 0.6em; }

.schuin {
  font-style: italic; }

.text_licht {
  color: #557A95; }

.text_italic {
  font-style: italic; }

.kader {
  border-style: double;
  border-width: 1px; }

.streep {
  border-bottom-style: solid;
  border-width: 1px; }

.streep-dash {
  border-bottom-style: dashed;
  border-width: 1px; }

.rand_streep {
  border: 1px solid; }

.full_width {
  width: 100%; }

.padding_20 {
  padding: 20px; }

.padding_10 {
  padding: 10px; }

.mb-2 {
  margin-bottom: 2px; }

.mt-10 {
  margin-top: 10px; }

/* Algemene instellingen */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  font: 400 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  font-family: Arial, sans-serif;
  background: url("../opmaak/achtergrond.jpg") repeat;
  color: AliceBlue;
  font-size: 1em; }

h1 {
  font-weight: bold;
  font-size: 1.6em; }

h2 {
  font-weight: bold;
  font-size: 1.4em; }

h3 {
  font-weight: bold;
  font-size: 1.2em; }

ul {
  list-style-type: none; }

.pointer {
  cursor: pointer; }

/* unvisited link */
a:link {
  color: AliceBlue; }

/* visited link */
a:visited {
  text-decoration: none;
  color: AliceBlue; }

/* mouse over link */
a:hover {
  text-decoration: underline;
  color: AliceBlue; }

/* selected link */
a:active {
  text-decoration: underline;
  color: AliceBlue; }

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; }

.logo {
  font-size: 24px;
  font-weight: bold; }

/* structuur */
/* Grid Layout voor Main Content */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 20px; }

.panel-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 2fr;
  gap: 10px;
  padding: 10px; }

.caroussel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px; }

/* Footer */
footer {
  text-align: center;
  padding: 20px; }

/* Hero Section */
.hero {
  align-items: center;
  text-align: center;
  padding: 10px 10px; }

/* Filters */
aside {
  padding: 20px;
  border-right: 1px solid #ddd; }

.ws__data__updt,
.ws__data__temp,
.ws__data__wind,
.ws__data__rain {
  font-family: verdana;
  font-size: 1em;
  text-align: left; }

.almanak__sun {
  position: absolute;
  left: 60px;
  top: 0px; }

.almanak__maan {
  position: absolute;
  right: 100px;
  top: 0px; }

.almanak__data {
  display: flex;
  justify-content: space-between; }

.almanak__data_sun_moon {
  display: flex;
  justify-content: space-between; }

.almanak__data__sun {
  width: 50%; }

.almanak__data__moon {
  width: 50%; }

.almanak__straling {
  position: absolute;
  top: 50%;
  width: 100%; }

.almanak__uvwaarde {
  position: absolute;
  top: 30%;
  width: 100%; }

.almanak__maanfase {
  position: absolute;
  top: 50%;
  width: 100%; }

.ws-wrapper {
  width: 100%; }

.ws__data {
  width: 100%; }

.ws__data__updt {
  text-align: center; }

.grafiek {
  width: 100%;
  height: 300px; }

#datatable1, #datatable2, #datatable3 {
  display: none; }

.windN {
  -ms-transform: rotate(0deg);
  /* IE 9 */
  -webkit-transform: rotate(0deg);
  /* Safari prior 9.0 */
  transform: rotate(0deg);
  /* Standard syntax */ }

.windNO {
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari prior 9.0 */
  transform: rotate(45deg);
  /* Standard syntax */ }

.windO {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari prior 9.0 */
  transform: rotate(90deg);
  /* Standard syntax */ }

.windZO {
  -ms-transform: rotate(135deg);
  /* IE 9 */
  -webkit-transform: rotate(135deg);
  /* Safari prior 9.0 */
  transform: rotate(135deg);
  /* Standard syntax */ }

.windZ {
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Safari prior 9.0 */
  transform: rotate(180deg);
  /* Standard syntax */ }

.windZW {
  -ms-transform: rotate(225deg);
  /* IE 9 */
  -webkit-transform: rotate(225deg);
  /* Safari prior 9.0 */
  transform: rotate(225deg);
  /* Standard syntax */ }

.windW {
  -ms-transform: rotate(270deg);
  /* IE 9 */
  -webkit-transform: rotate(270deg);
  /* Safari prior 9.0 */
  transform: rotate(270deg);
  /* Standard syntax */ }

.windNW {
  -ms-transform: rotate(315deg);
  /* IE 9 */
  -webkit-transform: rotate(315deg);
  /* Safari prior 9.0 */
  transform: rotate(315deg);
  /* Standard syntax */ }

/* Responsive layout */
@media (max-width: 1400px) {
  .almanak__maan {
    right: 80px; }
  .almanak__sun {
    left: 50px; } }

@media (max-width: 1200px) {
  .panel-grid {
    grid-template-columns: 1fr 2fr; }
  .almanak__maan {
    right: 60px; }
  .almanak__sun {
    left: 40px; } }

@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr; }
  .almanak__maan {
    right: 100px; }
  .almanak__sun {
    left: 60px; } }

@media (max-width: 900px) {
  .panel-grid {
    grid-template-columns: 1fr 2fr; }
  .almanak__maan {
    right: 80px; }
  .almanak__sun {
    left: 40px; }
  .caroussel-grid {
    grid-template-columns: 1fr; } }

/*# sourceMappingURL=D:/WEBSERVER/weerstation2/app/public/maps/styles_index.css.map */