/* Imports */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

/*
 * Variables
 */
:root {
  /* When changing color; also generate new shade and tint with https://maketintsandshades.com/ (using 30% value). This is used for hover */
  /*Colors*/
  --primary-color: #102142;
  --primary-color-contrast: #fff;
  --primary-color-shade: #0b172e;
  --primary-color-tint: #58647b;

  --secondary-color: #f47e21;
  --secondary-color-contrast: #fff;
  --secondary-color-shade: #db6409;
  --secondary-color-tint: #f49321;

  --background-color: #fff;
  --text-color: #6d7ea1;
  --link-text-color: #f47e21;
 --text-color-ondark: #97a4c1;

  --border-color: #d2d2d2;

  /* Gradient colors */
  --gradient-color-1-1: #f47e21;
  --gradient-color-1-2: #f49321;

  /*Fonts*/
  --main-font: Montserrat;
  --header-font: Montserrat;
  --button-font: Montserrat;

  /*Corner radius*/
  --border-radius-0: 0px;
  --border-radius-1: 8px;
  --border-radius-2: 16px;
  --border-radius-3: 32px;
  --border-radius-4: 64px;
}

/*
   * Essentials
   */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: 8rem;
}

body {
  font-family: var(--main-font), "Open Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7rem;
  color: var(--text-color);
  background-color: var(--background-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main-content {
  display: flex;
}

body > div:nth-child(2) {
  flex-grow: 1;
}

.foys-footer { 
  display: none;
}


h1,
h2,
h3,
h4,
h5,
h6,
.my-env h1,
.my-env h2,
.my-env h3,
.my-env h4,
.my-env h5,
.my-env h6 {
  font-family: var(--header-font), "Open Sans", sans-serif;
  word-wrap: break-word;
  font-weight: 300;
}

a,
.my-env a {
  color: var(--link-text-color);
  text-decoration: none;
}

a:hover,
.my-env a:hover {
  text-decoration: underline;
  color: var(--link-text-color);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none;
}

.bullet-list {
  list-style-type: none;
  padding-left: 24px;
}

.bullet-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
}

.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 8px;
  width: 12px;
  height: 12px;
  background-color: var(--primary-color);
  border-radius: 0px;
}

a[href$=".pdf"] {
  padding-right: 24px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 512 512'%3E%3Cpath fill='%F47E21' d='M64 464l48 0 0 48-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 304l-48 0 0-144-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px;
}

a[href$=".pdf"]:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 512 512'%3E%3Cpath fill='%F47E21' d='M64 464l48 0 0 48-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 304l-48 0 0-144-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z'/%3E%3C/svg%3E");
}

a[href$=".doc"],
a[href$=".docx"] {
  padding-right: 26px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 20 20'%3E%3Cpath fill='%F47E21' d='M2 14.5H3V16H2C0.875 16 0 15.125 0 14V2C0 0.90625 0.875 0 2 0H7.15625C7.6875 0 8.1875 0.21875 8.5625 0.59375L11.4062 3.4375C11.7812 3.8125 12 4.3125 12 4.84375V9H10.5V5H8C7.4375 5 7 4.5625 7 4V1.5H2C1.71875 1.5 1.5 1.75 1.5 2V14C1.5 14.2812 1.71875 14.5 2 14.5ZM5.5 11H6.5C7.3125 11 8 11.6875 8 12.5V14.5C8 15.3438 7.3125 16 6.5 16H5.5C5.21875 16 5 15.7812 5 15.5V11.5C5 11.25 5.21875 11 5.5 11ZM6 15H6.5C6.75 15 7 14.7812 7 14.5V12.5C7 12.25 6.75 12 6.5 12H6V15ZM14.25 11H14.75C15.4375 11 16 11.5625 16 12.25V12.5C16 12.7812 15.75 13 15.5 13C15.2188 13 15 12.7812 15 12.5V12.25C15 12.125 14.875 12 14.75 12H14.25C14.0938 12 14 12.125 14 12.25V14.75C14 14.9062 14.0938 15 14.25 15H14.75C14.875 15 15 14.9062 15 14.75V14.5C15 14.25 15.2188 14 15.5 14C15.75 14 16 14.25 16 14.5V14.75C16 15.4688 15.4375 16 14.75 16H14.25C13.5312 16 13 15.4688 13 14.75V12.25C13 11.5625 13.5312 11 14.25 11ZM9 12.25C9 11.5625 9.53125 11 10.25 11H10.75C11.4375 11 12 11.5625 12 12.25V14.75C12 15.4688 11.4375 16 10.75 16H10.25C9.53125 16 9 15.4688 9 14.75V12.25ZM10.25 12C10.0938 12 10 12.125 10 12.25V14.75C10 14.9062 10.0938 15 10.25 15H10.75C10.875 15 11 14.9062 11 14.75V12.25C11 12.125 10.875 12 10.75 12H10.25Z' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 19px;
}

a[href$=".doc"]:hover,
a[href$=".docx"]:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 20 20'%3E%3Cpath fill='%F47E21' d='M2 14.5H3V16H2C0.875 16 0 15.125 0 14V2C0 0.90625 0.875 0 2 0H7.15625C7.6875 0 8.1875 0.21875 8.5625 0.59375L11.4062 3.4375C11.7812 3.8125 12 4.3125 12 4.84375V9H10.5V5H8C7.4375 5 7 4.5625 7 4V1.5H2C1.71875 1.5 1.5 1.75 1.5 2V14C1.5 14.2812 1.71875 14.5 2 14.5ZM5.5 11H6.5C7.3125 11 8 11.6875 8 12.5V14.5C8 15.3438 7.3125 16 6.5 16H5.5C5.21875 16 5 15.7812 5 15.5V11.5C5 11.25 5.21875 11 5.5 11ZM6 15H6.5C6.75 15 7 14.7812 7 14.5V12.5C7 12.25 6.75 12 6.5 12H6V15ZM14.25 11H14.75C15.4375 11 16 11.5625 16 12.25V12.5C16 12.7812 15.75 13 15.5 13C15.2188 13 15 12.7812 15 12.5V12.25C15 12.125 14.875 12 14.75 12H14.25C14.0938 12 14 12.125 14 12.25V14.75C14 14.9062 14.0938 15 14.25 15H14.75C14.875 15 15 14.9062 15 14.75V14.5C15 14.25 15.2188 14 15.5 14C15.75 14 16 14.25 16 14.5V14.75C16 15.4688 15.4375 16 14.75 16H14.25C13.5312 16 13 15.4688 13 14.75V12.25C13 11.5625 13.5312 11 14.25 11ZM9 12.25C9 11.5625 9.53125 11 10.25 11H10.75C11.4375 11 12 11.5625 12 12.25V14.75C12 15.4688 11.4375 16 10.75 16H10.25C9.53125 16 9 15.4688 9 14.75V12.25ZM10.25 12C10.0938 12 10 12.125 10 12.25V14.75C10 14.9062 10.0938 15 10.25 15H10.75C10.875 15 11 14.9062 11 14.75V12.25C11 12.125 10.875 12 10.75 12H10.25Z' /%3E%3C/svg%3E");
}

a[href$=".xls"],
a[href$=".xlsx"] {
  padding-right: 24px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' fill='%F47E21' %3E%3Cpath d='M4 14.5V16H2C0.875 16 0 15.125 0 14V2C0 0.90625 0.875 0 2 0H7.15625C7.6875 0 8.1875 0.21875 8.5625 0.59375L11.4062 3.4375C11.7812 3.8125 12 4.3125 12 4.84375V9H10.5V5H8C7.4375 5 7 4.5625 7 4V1.5H2C1.71875 1.5 1.5 1.75 1.5 2V14C1.5 14.2812 1.71875 14.5 2 14.5H4ZM7 11.5V11.5312C7 11.75 7.0625 11.9688 7.1875 12.1562L7.5 12.625L7.78125 12.1562C7.90625 11.9688 8 11.75 8 11.5C8 11.25 8.21875 11 8.5 11C8.75 11 9 11.25 9 11.5C9 11.9375 8.875 12.3438 8.625 12.7188L8.09375 13.5L8.625 14.3125C8.875 14.6875 9 15.0938 9 15.5C9 15.7812 8.75 16 8.5 16C8.21875 16 8 15.7812 8 15.5C8 15.2812 7.90625 15.0625 7.78125 14.875L7.5 14.4062L7.1875 14.875C7.0625 15.0625 7 15.2812 7 15.5C7 15.7812 6.75 16 6.5 16C6.21875 16 6 15.7812 6 15.5C6 15.0938 6.125 14.6875 6.34375 14.3125L6.875 13.5L6.34375 12.7188C6.125 12.3438 6 11.9375 6 11.5C6 11.25 6.21875 11 6.5 11C6.75 11 7 11.25 7 11.5ZM10 15.5V11.5C10 11.25 10.2188 11 10.5 11C10.75 11 11 11.25 11 11.5V15H12C12.25 15 12.5 15.25 12.5 15.5C12.5 15.7812 12.25 16 12 16H10.5C10.2188 16 10 15.7812 10 15.5ZM12.75 12.4375C12.75 11.6562 13.375 11 14.1562 11H15C15.25 11 15.5 11.25 15.5 11.5C15.5 11.7812 15.25 12 15 12H14.1562C13.9375 12 13.75 12.2188 13.75 12.4375C13.75 12.5938 13.8438 12.75 13.9688 12.8125L14.9375 13.3125C15.4375 13.5625 15.75 14.0312 15.75 14.5938C15.75 15.375 15.0938 16 14.3125 16H13.5C13.2188 16 13 15.7812 13 15.5C13 15.25 13.2188 15 13.5 15H14.3125C14.5312 15 14.75 14.8125 14.75 14.5938C14.75 14.4375 14.6562 14.2812 14.5 14.2188L13.5312 13.7188C13.0312 13.4688 12.75 12.9688 12.75 12.4375Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px;
}

a[href$=".xls"]:hover,
a[href$=".xlsx"]:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' fill='%F47E21' %3E%3Cpath d='M4 14.5V16H2C0.875 16 0 15.125 0 14V2C0 0.90625 0.875 0 2 0H7.15625C7.6875 0 8.1875 0.21875 8.5625 0.59375L11.4062 3.4375C11.7812 3.8125 12 4.3125 12 4.84375V9H10.5V5H8C7.4375 5 7 4.5625 7 4V1.5H2C1.71875 1.5 1.5 1.75 1.5 2V14C1.5 14.2812 1.71875 14.5 2 14.5H4ZM7 11.5V11.5312C7 11.75 7.0625 11.9688 7.1875 12.1562L7.5 12.625L7.78125 12.1562C7.90625 11.9688 8 11.75 8 11.5C8 11.25 8.21875 11 8.5 11C8.75 11 9 11.25 9 11.5C9 11.9375 8.875 12.3438 8.625 12.7188L8.09375 13.5L8.625 14.3125C8.875 14.6875 9 15.0938 9 15.5C9 15.7812 8.75 16 8.5 16C8.21875 16 8 15.7812 8 15.5C8 15.2812 7.90625 15.0625 7.78125 14.875L7.5 14.4062L7.1875 14.875C7.0625 15.0625 7 15.2812 7 15.5C7 15.7812 6.75 16 6.5 16C6.21875 16 6 15.7812 6 15.5C6 15.0938 6.125 14.6875 6.34375 14.3125L6.875 13.5L6.34375 12.7188C6.125 12.3438 6 11.9375 6 11.5C6 11.25 6.21875 11 6.5 11C6.75 11 7 11.25 7 11.5ZM10 15.5V11.5C10 11.25 10.2188 11 10.5 11C10.75 11 11 11.25 11 11.5V15H12C12.25 15 12.5 15.25 12.5 15.5C12.5 15.7812 12.25 16 12 16H10.5C10.2188 16 10 15.7812 10 15.5ZM12.75 12.4375C12.75 11.6562 13.375 11 14.1562 11H15C15.25 11 15.5 11.25 15.5 11.5C15.5 11.7812 15.25 12 15 12H14.1562C13.9375 12 13.75 12.2188 13.75 12.4375C13.75 12.5938 13.8438 12.75 13.9688 12.8125L14.9375 13.3125C15.4375 13.5625 15.75 14.0312 15.75 14.5938C15.75 15.375 15.0938 16 14.3125 16H13.5C13.2188 16 13 15.7812 13 15.5C13 15.25 13.2188 15 13.5 15H14.3125C14.5312 15 14.75 14.8125 14.75 14.5938C14.75 14.4375 14.6562 14.2812 14.5 14.2188L13.5312 13.7188C13.0312 13.4688 12.75 12.9688 12.75 12.4375Z'/%3E%3C/svg%3E");
}

.text-ondark {
color: var(--text-color-ondark) !important;
}
/*
   * Bootstrap overwrites
   */
.text-primary {
  color: var(--primary-color) !important;
}
.text-secondary {
  color: var(--secondary-color) !important;
}
.btn {
  font-family: var(--button-font), "Open Sans", sans-serif;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 300;
}

.btn-primary,
.my-env .btn-primary {
  background-color: var(--secondary-color);
  border: 0;
  color: var(--primary-color-contrast);
}

.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:focus,
.btn-primary:hover,
.my-env .btn-primary:hover {
  background-color: var(--secondary-color-tint);
}

.btn-secondary,
.my-env .btn-secondary {
  background-color: var(--secondary-color-contrast);
  border: 0;
  color: var(--secondary-color);
}

.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:focus,
.btn-secondary:hover,
.my-env .btn-secondary:hover {
  background-color: var(--secondary-color-tint);
  color: var(--secondary-color-contrast);
}

.btn-tertiary,
.my-env .btn-tertiary {
  background-color: var(--secondary-color-contrast);
  border: 0;
  color: var(--secondary-color);
}

.btn-tertiary:active,
.btn-tertiary:not(:disabled):not(.disabled):active,
.btn-tertiary:focus,
.btn-tertiary:hover,
.my-env .btn-tertiary:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color-contrast);
}

.min-height{
  min-height:50vh;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(2.2rem + .75rem + 2px);
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-color);
    background-color: #fff;
    background-clip: padding-box;
    border: 0px solid #ced4da;
    border-radius: 8px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-group {
    margin-bottom: 1.3rem;
    }

/*
   * Bootstrap extensions
   */
.py-8 {
  padding-block: 5rem;
}
.pt-8 {
  padding-top: 5rem;
}
.pb-8 {
  padding-bottom: 5rem;
}
.my-8 {
  margin-block: 5rem;
}
.mt-8 {
  margin-top: 5rem;
}
.pt-navbar {
  padding-top: 4.8rem;
}
.pb-navbar {
  padding-bottom: 4.6rem;
}
.mb-8 {
  margin-bottom: 5rem;
}

.radius-0 {
  border-radius: 0px;
}
.radius-1 {
  border-radius: 8px;
}
.radius-2 {
  border-radius: 16px;
}
.radius-3 {
  border-radius: 32px;
}
.radius-4 {
  border-radius: 64px;
}

.align-justify {
  text-align: justify;
}

.align-center {
  text-align: center;
}

.border-top {
  border-top: 1px solid rgb(210, 210, 210);
}

.border-bottom {
  border-bottom: 1px solid rgb(210, 210, 210);
}

.border-top-none {
  border-top: none !important;
}

.border-bottom-none {
  border-bottom: none !important;
}
    /* Agenda styling MYENV */
.my-env {
  font-family: var(--main-font), "Open Sans", sans-serif !important;
}

.my-env .navbar {
  border-radius: var(--border-radius-1);
}

.my-env .absolute-card {
  max-width: 100% !important;
  background: none !important;
}

.my-env .image-container {
  background-image: none !important;
}

.my-env .cover-image-container {
  height: unset !important;
}

.my-env .absolute-card div {
  color: var(--primary-color) !important;
  font-size: 1.2rem;
}

.my-env h4,
.my-env .h4 {
  color: var(--secondary-color) !important;
}

.my-env .card {
  border-radius: 1rem !important;
}
.my-env .btn-group-sm, .my-env .btn-sm, .my-env .custom-select, .my-env .dropdown-menu, .my-env .form-control, .my-env .form-control-plaintext {
    border-radius: 8px;
}

.my-env u {
    text-decoration: unset;
}

.my-env p {
  color:var(--primary-color);
  font-weight: 400;
  font-size: 16px;
}

  .btn,
  .my-env .btn {
    border-radius: 8px !important;
    padding: 8px 12px 8px 12px;
    text-decoration: none;
  }

  .btn-primary, .my-env .btn-primary {
    background-color: var(--secondary-color);
    border: 0;
    color: var(--primary-color-contrast);
  }

  .btn-secondary, .my-env .btn-secondary {
    background-color: #EE7326;
    border: 0;
    color: #FFFFFF;
    font-weight: 700;
  }

  .btn-secondary:active,
  .btn-secondary:not(:disabled):not(.disabled):active,
  .btn-secondary:focus,
  .btn-secondary:hover,
  .my-env .btn-secondary:hover {
    background-color: #004899;
    color: #FFFFFF;
  }

  .btn-white, .my-env .btn-white{
    background-color: transparent;
    opacity: 1;
    border: 1;
    border-color: #EE7326;
    color: #EE7326;
    font-weight: 700;
  }

  .btn-white:active,
  .btn-white:not(:disabled):not(.disabled):active,
  .btn-white:focus,
  .btn-white:hover,
  .my-env .btn-white:hover {
    background-color: #EE7326;
    color: #FFFFFF;
    opacity: 1;
  }

  .btn-white-border, .my-env .btn-white-border{
    background-color: transparent;
    opacity: 1;
    border: 1;
    border-color: #FFFFFF;
    color: #FFFFFF;
  }

  .btn-white-border:active,
  .btn-white-border:not(:disabled):not(.disabled):active,
  .btn-white-border:focus,
  .btn-white-border:hover,
  .my-env .btn-white-border:hover {
    background-color: #FFFFFF;
    color: #004899;
    }
    
    
  .my-env .court-booking-wizard .timeslots-container {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
  }
  
  .my-env .court-booking-wizard .btn {
        border: 1px solid #102142 !important;
  }
  
  .my-env .court-booking-details .bdr {
    border-radius: 1rem;
  }
/* ! GENERAL ! */
#my-env {
  margin-top: 4rem;
  padding-top: 2.5rem;
  padding-bottom: 1rem;
  border-radius: 1.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}


/* ! NAVBAR ! */
#navbar {
  position: fixed;
  background-color: #fff;
  width: 100vw;
  max-height: 4.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  padding-right: 1rem;
}

.navbar-logo {
  max-height: 3.8rem;
  padding-left: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.background-image-home {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background: #102142;
    width: 100%;
}