html { font-size: 20px; }

::selection { background-color: #005547; color: #fff; }

:root {
  --green: #005547;
}

.bg-theme-green { background-color: #005547 }
.hover\:bg-theme-green:hover { background-color: #005547 }
.text-theme-green { color: #005547 }
.border-theme-green { border-color: #005547 }

.bg-theme-lightgreen { background-color: #E1EFE3; }
.bg-theme-green-light { background-color: #E1EFE3; }
.bg-theme-yellow-light { background-color: #f4e7db; }
.bg-theme-yellow { background-color: #fdc753; }
.hover--bg-theme-green:hover { background-color: #005547; }

.bg-theme-red { background-color: #F6AF95 }
.text-theme-red { color: #F6AF95 }
.border-theme-red { border-color: #F6AF95 }

.hover-bg-theme-red:hover { background-color: #F6AF95; }
.hover-text-theme-red:hover { color: #F6AF95; }

.text-theme-yellow { color: #fdc753; }
.hover\:text-theme-yellow:hover { color: #fdc753; }

.hover--bg-theme-yellow-light:hover { background-color: #f4e7db; }

.font-youngserif { font-family: YoungSerif, sans-serif; }

.font-silka { font-family: Silka, sans-serif; }

@media (min-width: 640px) {
  .sm\:font-youngserif { font-family: YoungSerif, sans-serif; }
}

.text-9px { font-size: 9px; line-height: 12px; }
.text-16px { font-size: 16px; line-height: 22px; }

.bg-cover { background-size: cover; }
.bg-center { background-position: center center; }

@media (min-width: 640px) {
  .sm-text-16px {
    font-size: 16px;
    line-height: 22px;
  }
}

.text-20px {
  font-size: 20px;
  line-height: 24px;
}

.text-40px {
  font-size: 40px;
  line-height: 48px;
}

@media (min-width: 640px) {
  .sm-text-28px {
    font-size: 28px;
    line-height: 34px;
  }
  .sm-text-40px {
    font-size: 40px;
    line-height: 48px;
  }
}

a {
  text-decoration: underline
}

.max-width {
  width: 1460px;
  max-width: 100%;
}

@media (min-width: 640px) {
  .RegisterBanner-imageWrapper {
    background-image: url(/components/RegisterBanner/matthijs.png)
  }
  .HeaderNav-register-button {
    font-size: 24px;
    line-height: 29px;
  }
}


* {
  box-sizing: border-box;
  font-display: swap;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  /* overflow-x: hidden; */
  font-family: Silka, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

body {
  overflow-y: auto;
  font-size: 18px;
  color: #000;
}

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

img {
  max-width: 100%;
}

.fix-ios-scrolling {
  -webkit-overflow-scrolling: touch;
}

*:focus {
  outline: none;
}

#react-root {
  min-height: 100%;
}

p {
  line-height: 1.5em;
}

.landing-free-text {
  margin: 0 auto;
  text-align: center;
}

.landing-free-text table {
  margin: 0 auto;
  width: 980px;
  max-width: 100%;
}

.landing-free-text img {
  max-width: 1000px;
  height: 120px;
  display: block;
  margin: 0 auto;
}

#cart-icon {
  transition: transform 1.2s;
}
 
.animate-scale {
  transform: scale(1.2);
}

.hide-images-inside-element input,
.hide-images-inside-element img {
  display: none;
}

/* Keeping commented font-face declarations as they are */

.ContentPage img,
.DezeWeekInDeBox input[type="image"] {
  max-width: 100%;
  height: auto;
  display: block;
}

.DezeWeekInDeBox table {
  width: auto;
  overflow-x: auto;
  min-width: 100%;
}

.App-loading {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: none;
}

.only-show-on-mobile {
}

@media(min-width: 426px) {
  .only-show-on-mobile {
    display: none;
  }
}

.only-show-on-desktop {
  display: none;
}

@media(min-width: 426px) {
  .only-show-on-desktop {
    display: block;
  }
}

/* Admin */
body .ao {
  display: none !important;
}

body.is-admin-mode .ao {
  display: block !important;
}

.flex { 
  display: flex; 
}

.flex-wrap { 
  flex-wrap: wrap; 
}

.justify-between { 
  justify-content: space-between; 
}

.my-4 { 
  margin-top: 1em; 
  margin-bottom: 1em; 
}

@font-face {
    font-family: 'Silka';
    src: url('/font/silka/silka-regular-webfont.eot');
    src: url('/font/silka/silka-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/silka/silka-regular-webfont.woff2') format('woff2'),
         url('/font/silka/silka-regular-webfont.woff') format('woff'),
         url('/font/silka/silka-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'YoungSerif';
    src: url('/font/YoungSerif/youngserif-regular-webfont.woff2') format('woff2'),
         url('/font/YoungSerif/youngserif-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.button:focus {
  outline: none !important;
}



.scrollbar-custom {
  /* Enable horizontal scroll with smooth behavior */
  overflow-x: auto;
  scroll-behavior: smooth;
  
  /* Hide default scrollbar for Chrome, Safari and Opera */
  &::-webkit-scrollbar {
    height: 8px;
  }
  
  /* Track */
  &::-webkit-scrollbar-track {
    background: #cfe1d6;
    border-radius: 4px;
  }
  
  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: #005547;
    border-radius: 4px;
  }
  
  /* Handle on hover */
  &::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  /* For Firefox */
  scrollbar-width: thin;
  scrollbar-color: #005547 #cfe1d6;
}