/* GENERAL CSS CLASSES */

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", sans-serif;
}

body,
html {
  height: 100%;
  color: #00112c;
  /* line-height: 1.8; */
}

.grid-wrapper-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  column-gap: 16px;
  grid-row-gap: 16px;
}

.vertical-page-layout {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
}

.button-block {
  min-width: 150px;
  min-height: 150px;
  border-radius: 6px;
  position: relative;
}

.vert-hor-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.data-bar {
  width: 100%;
  height: 25px;
  border-radius: 6px;
  position: relative;
}

.data-progress {
  width: 1px;
  height: 25px;
  position: absolute;
}

.footer-bottom {
  margin-top: auto;
}
.square-18 {
  width: 18px;
  height: 18px;
}
.square-100 {
  width: 100px;
  height: 100px;
}

.margin-auto {
  margin: auto;
}

.position-fixed {
  position: fixed !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-bottom {
  bottom: 0 !important;
}

.full-height {
  height: 100%;
}

.column-240 {
  column-width: 240px;
}

.column-300 {
  column-width: 300px;
}

.column-350 {
  column-width: 350px;
}

.padding-all-24 {
  padding: 24px;
}

.padding-8-0 {
  padding: 8px 0;
}

.portal-menu {
  position: absolute;
  right: 0;
  top: 48px;
  z-index: 3;
}

.width-50 {
  width: 50%;
}

.width-100 {
  width: 100%;
}

.width-105 {
  width: 105%;
}

.width-150 {
  width: 150px;
}

.max-width-150 {
  display: inline-block;
  max-width: 150px;
}

.canvas-figure-size {
  width:1200px;
  height:700px;
}

/* Tables */
.max-width-200 {
  max-width: 200px;
}

.max-width-250 {
  max-width: 250px;
}

.fixed-table {
  table-layout: fixed;
  width: 100%;
}

.form-table {
  border: 1px solid #ccc;
  border-collapse: separate;
  border-spacing: 0 16px;
  width: 100%;
  display: table;
}

.form-table tr:nth-child(odd) {
  background-color: #fff;
}

.form-table tr:nth-child(even) {
  background-color: #f1f1f1;
}

.td-form-table {
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  padding-top: 12px;
  padding-bottom: 12px;
}

.td-form-table:first-child {
  border-left: 1px solid #ddd;
}

.td-form-table:last-child {
  border-right: 1px solid #ddd;
}

.form-table tbody:first-child {
  background-color: blue;
}

/* Form */
.max-width-250-form {
  display: inline-block;
  max-width: 250px;
}

.max-width-700 {
  max-width: 700px;
}

.order-data-box {
  width: 225px;
  height: 300px;
}

.list-style-none {
  list-style-type: none
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.button-row-div {
  width: 25%;
}

.button-in-row {
  width: 50%;
  box-shadow: 0 0 3px 0 #6a8692;
  font-weight: 500;
}

.faq-details {
  border-radius: 6px;
  cursor: pointer;
}

.faq-summary {
  padding: 16px;
  font-size: large;
  border: solid 1px;
}

.hover-opacity:hover {
  opacity: 0.5;
}

/* QR-CODE LABELS */
.qrcode-two-column {
  display: grid;
  grid-template-columns: 50% 50%;
}

.qrcode-four-row {
  display: grid;
  grid-template-rows: 74mm 74mm 74mm 74mm;
}

.qrcode-label {
  width: 105mm;
  height: 74mm;
}

.qrcode-label:after {
  content: none;
}

.line-break {
  word-wrap: break-word;
}

.overflow-auto {
  overflow: auto;
}

/* GRID ELEMENTS */
.two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}

.three-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1rem;
}

.grid-container-9 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  column-gap: 1rem;
}

.grid-start-1 {
  grid-column-start: 1;
}

.grid-start-2 {
  grid-column-start: 2;
}

.grid-start-3 {
  grid-column-start: 3;
}

.grid-start-4 {
  grid-column-start: 4;
}

.grid-start-5 {
  grid-column-start: 5;
}

.grid-start-6 {
  grid-column-start: 6;
}

.grid-start-7 {
  grid-column-start: 7;
}

.grid-start-8 {
  grid-column-start: 9;
}

.grid-end-2 {
  grid-column-end: 2;
}

.grid-end-3 {
  grid-column-end: 3;
}

.grid-end-4 {
  grid-column-end: 4;
}

.grid-end-5 {
  grid-column-end: 5;
}

.grid-end-6 {
  grid-column-end: 6;
}

.grid-end-7 {
  grid-column-end: 7;
}

.grid-end-8 {
  grid-column-end: 8;
}

.grid-end-9 {
  grid-column-end: 9;
}

/* ROW CLASSES ALSO INCLUDE CSS THAT APPLIES TO SMALL SCREENS */
.two-row-grid {
  display: grid;
  grid-template-rows: auto auto;
  grid-row-gap: 1rem;
}

.three-row-grid-myorder {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-row-gap: 1rem;
}

.four-row-grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

.five-row-grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  /* 60px 80px 50px 50px 80px; */
  grid-row-gap: 1rem;
}

.grid-header {
  grid-row-start: 1;
  grid-row-end: 2;
  /* grid-auto-rows: 50px;
  height: 50px; */
}

.grid-row-second {
  grid-row-start: 2;
  grid-row-end: 3;
}

.grid-row-third {
  grid-row-start: 3;
  grid-row-end: 4;
}

.grid-row-fourth {
  grid-row-start: 4;
  grid-row-end: 5;
}

.grid-row-fifth {
  grid-row-start: 5;
  grid-row-end: 6;
}

.grid-row-sixth {
  grid-row-start: 6;
  grid-row-end: 7;
}

.grid-row-seventh {
  grid-row-start: 7;
  grid-row-end: 8;
}

/* SPECIFIC GRIDS */
/* Form-row-grid */
.six-row-grid-form {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  grid-row-gap: 1rem;
}

.form-row-first {
  grid-row-start: 1;
  grid-row-end: 2;
}

.form-row-second {
  grid-row-start: 2;
  grid-row-end: 3;
}

.form-row-third {
  grid-row-start: 3;
  grid-row-end: 4;
}

.form-row-fourth {
  grid-row-start: 4;
  grid-row-end: 5;
}

.form-row-fifth {
  grid-row-start: 5;
  grid-row-end: 6;
}

.form-row-sixth {
  grid-row-start: 6;
  grid-row-end: 7;
}

/* Fieldset row-grid */
.five-row-grid-fieldset {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  grid-row-gap: 1rem;
}

.five-row-grid-fieldset-30 {
  display: grid;
  grid-template-rows: 30px 30px 30px 30px 50px;
  grid-row-gap: 1rem;
}

.seven-row-grid-fieldset {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-row-gap: 1rem;
}

.fieldset-row-first {
  grid-row-start: 1;
  grid-row-end: 2;
}

.fieldset-row-second {
  grid-row-start: 2;
  grid-row-end: 3;
}

.fieldset-row-third {
  grid-row-start: 3;
  grid-row-end: 4;
}

.fieldset-row-fourth {
  grid-row-start: 4;
  grid-row-end: 5;
}

.fieldset-row-fifth {
  grid-row-start: 5;
  grid-row-end: 6;
}

.fieldset-row-sixth {
  grid-row-start: 6;
  grid-row-end: 7;
}

.fieldset-row-seventh {
  grid-row-start: 7;
  grid-row-end: 8;
}

@media (max-width:992px) and (min-width: 601px) {

  /* GRID ROWS APPLIES ONLY TO MEDIUM AND LARGE SCREENS */
  .bgimg-1 {
    background-image: url('/img/ai-data-l.jpg');
    background-color: #000;
    /* min-height: 100%; */
  }

  .bgimg-2 {
    background-image: url('/img/ai-data-bgimg.jpg');
    background-color: #000;
    /* min-height: 100%; */
  }

  .logo-size {
    width: 50px;
    height: 50px;
  }

  .border-bottom-m {
    border-bottom: 1px solid #ccc !important;
  }

  .cookie-div-medium {
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 5;
    border-radius: 6px;
    width: 100%;
  }

  .display-flex-medium {
    display: flex;
  }

  .medium-top {
    top: 0 !important;
  }

  .margin-medium-16 {
    margin: 16px;
  }

  .padding-top-64-medium {
    padding-top: 64px;
  }

  .two-column-grid-m {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .six-row-grid {
    display: grid;
    grid-template-rows: auto auto auto auto auto auto;
    grid-row-gap: 1rem;
  }

  .seven-row-grid {
    /* display: grid; */
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-row-gap: 1rem;
  }

  /* Amount of columns */
  .grid-container-m3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-container-m4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 2rem;
  }

  .grid-container-m5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-container-m6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-container-m8 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-container-m9 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  /* Start of column */
  .grid-start-m1 {
    grid-column-start: 1;
  }

  .grid-start-m2 {
    grid-column-start: 2;
  }

  .grid-start-m3 {
    grid-column-start: 3;
  }

  .grid-start-m4 {
    grid-column-start: 4;
  }

  .grid-start-m5 {
    grid-column-start: 5;
  }

  .grid-start-m6 {
    grid-column-start: 6;
  }

  .grid-start-m7 {
    grid-column-start: 7;
  }

  .grid-start-m8 {
    grid-column-start: 8;
  }

  /* End of column */
  .grid-end-m3 {
    grid-column-end: 3;
  }

  .grid-end-m4 {
    grid-column-end: 4;
  }

  .grid-end-m5 {
    grid-column-end: 5;
  }

  .grid-end-m6 {
    grid-column-end: 6;
  }

  .grid-end-m7 {
    grid-column-end: 7;
  }

  .grid-end-m8 {
    grid-column-end: 8;
  }

  .grid-end-m9 {
    grid-column-end: 9;
  }

  .grid-end-m10 {
    grid-column-end: 10;
  }

  .center-div-medium {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    /* height: 100%; */
  }

  .center-div-m-50 {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  .w3-padding-top-64-medium {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media only screen and (min-width: 993px) {
  .bgimg-1 {
    background-image: url('/img/ai-data-l.jpg');
    background-color: #000;
    /* min-height: 100%; */
  }

  .bgimg-2 {
    background-image: url('/img/ai-data-bgimg.jpg');
    background-color: #000;
    /* min-height: 100%; */
  }

  .cookie-div-large {
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 5;
    border-radius: 6px;
    width: 35%;
  }

  .logo-size {
    width: 50px;
    height: 50px;
  }

  .margin-large-16 {
    margin: 16px;
  }

  .border-bottom-l {
    border-bottom: 1px solid #ccc !important;
  }

  .two-column-grid-l {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-container-l3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-container-l4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 2rem;
  }

  .grid-container-l5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-container-l6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-container-l9 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-container-l10 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-container-l11 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-container-l12 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
  }

  .grid-start-l1 {
    grid-column-start: 1;
  }

  .grid-start-l2 {
    grid-column-start: 2;
  }

  .grid-start-l3 {
    grid-column-start: 3;
  }

  .grid-start-l4 {
    grid-column-start: 4;
  }

  .grid-start-l5 {
    grid-column-start: 5;
  }

  .grid-start-l6 {
    grid-column-start: 6;
  }

  .grid-start-l7 {
    grid-column-start: 7;
  }

  .grid-start-l8 {
    grid-column-start: 8;
  }

  .grid-start-l9 {
    grid-column-start: 9;
  }

  .grid-start-l10 {
    grid-column-start: 10;
  }

  .grid-start-l11 {
    grid-column-start: 11;
  }

  .grid-end-l3 {
    grid-column-end: 3;
  }

  .grid-end-l4 {
    grid-column-end: 4;
  }

  .grid-end-l5 {
    grid-column-end: 5;
  }

  .grid-end-l6 {
    grid-column-end: 6;
  }

  .grid-end-l7 {
    grid-column-end: 7;
  }

  .grid-end-l8 {
    grid-column-end: 8;
  }

  .grid-end-l9 {
    grid-column-end: 9;
  }

  .grid-end-l10 {
    grid-column-end: 10;
  }

  .grid-end-l11 {
    grid-column-end: 11;
  }

  .grid-end-l12 {
    grid-column-end: 12;
  }

  .grid-end-l13 {
    grid-column-end: 13;
  }

  .center-div-large {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
  }

  .center-div-l-40 {
    margin-left: auto;
    margin-right: auto;
    width: 40%;
  }

  .w3-padding-top-64-large {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* HEADER */
#div-alert-box {
  z-index: 25;
}

/* CREATE BACKGROUND-IMAGES */
.bgimg-1 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.bgimg-2 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}



.hover-pointer {
  cursor: pointer;
}

/* SIDEBAR */
.sidebar-category-select {
  border: none;
  padding: 8px 16px;
  font-size: 18px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  /* color:inherit; */
  background-color: inherit;
  text-align: center;
  white-space: nowrap;
  scrollbar-width: none;
}

.sidebar-select {
  margin-left: 2rem;
}

.overlay-100 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 3;
  background-color: #616161;
  opacity: 0.5;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* TEXT  */
.text-z-index-2 {
  position: relative;
  z-index: 2;
  background-color: white;
}

/* FOOTER */
.display-flex {
  display: flex;
}

.footer-menu {
  flex: 30%;
}

.footer-copyright {
  flex: 30%;
  margin-right: 16px;
}

.beam-75 {
  width: 100%;
  height: 75px;
  /* background-color: white;
  z-index: -3; */
}

/* CARDS */
.product-row {
  display: flex;
  box-sizing: border-box;
  /* margin: 16px; */
}

.product-card {
  position: relative;
  width: 33%;
  padding: 16px !important;
  margin-right: 8px;
  box-shadow: 0 0 3px 0 #6a8692;
}

a.product-card-link:link {
  text-decoration: none;
}

.card-picture {
  background-size: cover;
  overflow: hidden;
  display: block;
}

.card-picture-overlay {
  z-index: 5;
}

.card-picture-img {
  /* clip-path: polygon(0 0, 100% 0%, 100% 83%, 0% 98%); */
  width: 100%;
  margin-bottom: -6px;
}

.card-sub-heading {
  text-align: left;
  /* height: 40px; */
}

.card-text {
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-footer {
  white-space: nowrap;
  height: 70px;
  /* position: absolute;
  bottom: 0; */
}

.price-tag {
  display: flex;
  margin-top: .5rem;
  white-space: nowrap;
}

/* BASKET */

.a-picture-checkout {
  display: block;
  margin-bottom: 1.5rem;
  text-align: center;
}

.picture-checkout {
  width: auto;
  max-width: 100%;
  height: auto !important;
  vertical-align: middle;
}

.amount-of-products {
  width: 50px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: #777 solid 1px;
  margin-left: 2rem;
}

.price-field {
  width: 100%;
  border: none;
  text-align: right;
}

.flow-root {
  display: flow-root;
}

.grid-order {
  display: grid;
}

.display-ruby {
  display: ruby !important;
}

.display-block-ruby {
  display: block ruby !important;
}

.display-inline-flex-end {
  display: inline-flex;
  float: inline-end;
}

/* LOGIN */
.div-login {
  border-radius: 6px;
  opacity: 95%;
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* General */
.padding-top-05 {
  padding-top: 0.5rem
}

.width-75 {
  width: 75%;
}

.grid-position {
  height: fit-content;
  margin: inherit;
}

.display-inline-flex {
  display: inline-flex;
}

/* Forms */
.li-form {
  list-style: none;
  margin-top: 1rem;
  overflow: auto;
  min-height: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  /* grid-template-areas: 
  "label sublabel input input input"; */
}

/* RESPONSIVE FORMS */

.form-row:after {
  content: "";
  display: table;
  clear: both;
}

.label-column {
  float: left;
  width: 30%;
  margin-top: 6px;
}

.field-column {
  float: left;
  width: 70%;
  margin-top: 6px;
}

.resp-label {
  overflow-wrap: break-word;
  padding: 12px 12px 12px 0;
  display: inline-block;
}

.resp-field {
  width: 100%;
  padding: 12px;
  border: none;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  resize: vertical;
}

/* Default forms */

.input-field {
  /* padding:8px; */
  /* display:block; */
  border: none;
  border-bottom: 1px solid #ccc;
  /* color: #777; */
  margin-left: 1rem;
}

.cursor-default {
  cursor: default !important;
}

.radio-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}

.div-search-fields {
  grid-column-start: 2;
  grid-column-end: 7;
}

.input-search {
  /* padding:8px; */
  /* display:block; */
  overflow: auto;
  border: none;
  border-bottom: 1px solid #ccc;
  /* color: #777; */
  margin-left: 1rem;
}

.select-search {
  overflow: auto;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  margin-left: 1rem;
}

.no-border {
  border: none;
}

.width-40 {
  width: 40%;
}

.width-60 {
  width: 60%;
}

.select-small {
  width: 25%;
  border: none;
  border-bottom: 1px solid #ccc;
  background: #fff;
  /* color: #777 */
}

.fieldset-standard {
  border: none;
  margin: 0 2px;
  padding: .35em .625em .75em;
}

.fieldset-subdoc {
  border: 1px solid #ccc;
  margin-bottom: 2rem;
}

.div-subdocfield {
  grid-column-start: 3;
  grid-column-end: 6;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* grid-template-rows: 1fr 1fr; */
}

.form-summary {
  color: #fff;
  background-color: #4CAF50;
  padding: 16px;
  font-size: large;
}

.input-subdocfield {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  text-align: left;
  border: none;
  border-bottom: 1px solid #ccc;
}

.input-checkbox-subdocfield {
  width: 1rem;
  height: 1rem;
  grid-column-start: 1;
  /* grid-column-end: 2; */
}

.textarea-subdocfield {
  grid-column-start: 1;
  grid-column-end: 4;
  min-height: 150px;
  /* font-size: 120%; */
  border: none;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;

}

.div-multiple-fields {
  grid-column-start: 1;
  grid-column-end: 6;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "label label input input input";
  column-gap: 15px;
}

.array-change-button {
  border: none;
  padding: 16px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  height: fit-content;
}

.array-save-button {
  /* display: none; */
  border: none;
  padding: 16px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  height: fit-content;
}

.div-addbutton {
  grid-column-start: 1;
  grid-column-end: 6;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
}

.add-array {
  grid-column-start: 3;
  grid-column-end: 4;
}

.div-added-field {
  grid-column-start: 1;
  grid-column-end: 7;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;


  /* grid-template-rows: auto ;
  grid-template-areas: 
    "label label input input input";
  column-gap: 15px; */
}


.multiple-fields {
  grid-column-start: 3;
  grid-column-end: 5;
  background-color: var(--snow-brightest);
  border: none;
  border-bottom: 1px solid var(--snow);
  margin-top: 0.75rem;
}

.extra-option-text {
  grid-column-start: 1;
  grid-column-end: 3;
}

.input-text-multiple-fields {
  grid-column-start: 1;
  grid-column-end: 5;
}

.template-option-fields {
  grid-column-start: 3;
  grid-column-end: 7;
  min-height: 150px;
  margin-top: 0.75rem;
  border: none;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.button-open-options {
  grid-column-start: 3;
}

.margin-bottom-32 {
  margin-bottom: 32px;
}

.margin-top-025 {
  margin-top: .25rem;
}

.input-text {
  grid-column-start: 3;
  grid-column-end: 6;
  border: none;
  border-bottom: 1px solid #ccc;
}

.arrayfield {
  grid-column-start: 3;
  grid-column-end: 6;
  border: none;
  border-bottom: 1px solid #ccc;
}

.textarea-text {
  grid-column-start: 3;
  grid-column-end: 6;
  min-height: 150px;
  /* font-size: 120%; */
  border: none;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.multiple-fields-close-icon {
  grid-column-start: 7;
  cursor: pointer;
}

.select-select-one {
  grid-column-start: 3;
  grid-column-end: 6;
  border: none;
  border-bottom: 1px solid #ccc;
  background: #fff;
}

.input-date {
  grid-column-start: 3;
  grid-column-end: 6;
  border: none;
  border-bottom: 1px solid #ccc;
}

.input-number {
  grid-column-start: 3;
  grid-column-end: 6;
  border: none;
  border-bottom: 1px solid #ccc;
}

.input-checkbox {
  grid-column-start: 3;
  width: 1rem;
  height: 1rem;
  /* border:1px solid #ccc; */
}


/* ONDERSTE TWEE HOREN BIJ ELKAAR OM UPLOAD FILE BUTTON AAN TE PASSEN. Zie http://jsfiddle.net/4cwpLvae/ */
/* input[type="file"] { */
/* display: none; */
/* } */
.save-file-button {
  border: 5px solid red;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

/* Table */
.modal-table {
  position: relative;
  z-index: 3;
  height: 100%;
}

.modal-form {
  position: relative;
  z-index: 4;
  /* height: 100%; */
}

.z-index-4 {
  position: relative;
  z-index: 4;
}

.chevron-icon:hover {
  cursor: pointer;
  /* font-size:110%; */
  font-weight: bold;
  background-color: #ccc;
  /* padding:20px 40px; */
}

.table-select {
  background-color: #6a8692;
  color: #fff;
  border: none;
}


/* Basket */
.basket-row {
  height: 180px;

}

.center-child {
  display: flex;
  justify-content: center;
  align-items: center;
}

.picture-shoppingcard {

  /* display: block;
    margin-left: auto;
    margin-right: auto;  */
  height: 60%;
  width: 60%;
}

/* SPINNER */
/* Spinners */

.loader-spinner {
  display: inline-block;
  position: relative;
  color: official;
  height: 60px;
  width: 60px;
}

.loader-spinner div {
  animation: loader-spinner 1.2s linear infinite;
  transform-origin: 30px 30px;
}

.loader-spinner div:after {
  display: block;
  position: absolute;
  top: 3px;
  left: 27px;
  border-radius: 20%;
  content: " ";
  height: 10px;
  width: 5px;
}

.loader-spinner div:nth-child(1) {
  animation-delay: -1.1s;
  transform: rotate(0deg);
}

.loader-spinner div:nth-child(2) {
  animation-delay: -1s;
  transform: rotate(30deg);
}

.loader-spinner div:nth-child(3) {
  animation-delay: -0.9s;
  transform: rotate(60deg);
}

.loader-spinner div:nth-child(4) {
  animation-delay: -0.8s;
  transform: rotate(90deg);
}

.loader-spinner div:nth-child(5) {
  animation-delay: -0.7s;
  transform: rotate(120deg);
}

.loader-spinner div:nth-child(6) {
  animation-delay: -0.6s;
  transform: rotate(150deg);
}

.loader-spinner div:nth-child(7) {
  animation-delay: -0.5s;
  transform: rotate(180deg);
}

.loader-spinner div:nth-child(8) {
  animation-delay: -0.4s;
  transform: rotate(210deg);
}

.loader-spinner div:nth-child(9) {
  animation-delay: -0.3s;
  transform: rotate(240deg);
}

.loader-spinner div:nth-child(10) {
  animation-delay: -0.2s;
  transform: rotate(270deg);
}

.loader-spinner div:nth-child(11) {
  animation-delay: -0.1s;
  transform: rotate(300deg);
}

.loader-spinner div:nth-child(12) {
  animation-delay: 0s;
  transform: rotate(330deg);
}

@keyframes loader-spinner {
  0% {
      opacity: 1;
  }

  100% {
      opacity: 0;
  }
}

.section-spinner {
  color: #00112c;
  background: transparent;
}

.section-spinner .loader-spinner div:after{
  background: #00112c;
}