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

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
          text-size-adjust: none;
}

a {
  text-decoration: none;
}

footer, header, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  /* -webkit-appearance: none;*/
  border-radius: 0;
}

.icontrue {
  color: #77b10c;
}

.iconfalse {
  color: #b10c0c;
}

.iconfade {
  color: #9eb7d1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Flex", Helvetica, Arial, sans-serif;
  font-weight: 500;
  margin: 0 0 0 0;
}

h1 {
  font-size: 2rem;
  letter-spacing: -0.1rem;
  font-optical-sizing: auto;
  font-family: "Roboto Flex";
  font-weight: 400;
  font-style: normal;
  line-height: initial;
  font-variation-settings: "opsz" 64;
  color: hsl(214, 30%, 21%);
}
h1 em {
  color: #030e19;
  font-weight: 600;
  letter-spacing: -0.05rem;
}
h1 em i {
  margin-left: 0.5rem;
}
h1 em i:hover {
  color: #ffae00;
}
h1 strong {
  font-size: 3.5rem;
  letter-spacing: -0.15rem;
  font-weight: 700;
  line-height: 100%;
  color: #183454;
  margin-right: 1rem;
}

h1.huge {
  font-size: 3.5rem;
  letter-spacing: -0.15rem;
  font-weight: 700;
  line-height: 100%;
  color: #183454;
}

h1.lighthuge {
  font-size: 3.5rem;
  letter-spacing: -0.15rem;
  font-weight: 700;
  line-height: 100%;
  color: white;
}

h1.lesshuge {
  font-size: 2.5rem;
  letter-spacing: -0.1rem;
  font-weight: 700;
  line-height: 100%;
}

h2 {
  font-size: 1.5rem;
  letter-spacing: -0.05rem;
}

h3 {
  font-size: 1.4rem;
  letter-spacing: -0.01rem;
  line-height: 120%;
}

h4 {
  font-size: 2rem;
  letter-spacing: -0.05rem;
  font-optical-sizing: auto;
  font-family: "Roboto Flex";
  font-weight: 400;
  font-style: normal;
  line-height: initial;
  font-variation-settings: "opsz" 64;
}

p {
  margin-bottom: 0.5rem;
}

a {
  color: #105ec4;
  text-decoration: none;
}
a div {
  height: 100%;
}

b {
  font-weight: 700;
}

a:hover {
  color: #031122;
}

a:visited {
  color: #105ec4;
}

a.block {
  display: block;
}

a.pLink {
  font-weight: 700;
}

.small {
  font-size: 0.8rem;
  opacity: 0.75;
  display: block;
  overflow-wrap: anywhere;
}
.small b {
  font-weight: bold;
  opacity: 1;
}

.large {
  font-size: 1.5rem;
  opacity: 0.9;
  display: block;
}

i {
  margin-right: 0.5rem;
  color: #9eb7d1;
}

em {
  margin-right: 0.5rem;
  color: #9eb7d1;
  font-weight: 700;
}

select {
  font-size: 1rem;
  padding: 1rem;
  background-color: #d0f7b7;
}

dfn {
  background-color: #fff7c8;
  text-decoration: none;
  font-style: normal;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  cursor: pointer;
}
dfn :hover {
  background-color: #ffe96e;
}

.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

input {
  font-size: 1rem;
  font-weight: 400;
  border: 1px solid #183454;
  /* display:block; */
  width: 100%;
  background-color: #d0f7b7;
  padding: 0.25rem;
  /*box-shadow: 1px 1px 2px $col-toolbank-light;*/
}

input[type=checkbox] {
  /* -ms-transform: scale(2); /* IE */
  /*  -moz-transform: scale(2); /* FF */
  /*  -webkit-transform: scale(2); /* Safari and Chrome */
  /*  -o-transform: scale(2); /* Opera */
  -webkit-transform: scale(1);
          transform: scale(1);
  zoom: 2;
  border: 1px solid #183454;
}

fieldset {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0px 0px 0px 0px;
}
fieldset label {
  font-weight: 700;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  font-size: 1rem;
}
fieldset strong {
  font-weight: bold;
}
fieldset input {
  font-size: 1.1rem;
  padding: 0.5rem;
  border: 1px solid #183454;
  display: block;
  width: 100%;
  background-color: #d0f7b7;
  height: 2.8rem;
  /*box-shadow: 1px 1px 2px $col-toolbank-light;*/
}
fieldset select {
  font-size: 1.1rem;
  font-weight: 400;
  border: 1px solid #183454;
  /* display:block; */
  width: 100%;
  background-color: #d0f7b7;
  padding: 0.25rem;
  /*box-shadow: 1px 1px 2px $col-toolbank-light;*/
}
fieldset textarea {
  font-size: 1.1rem;
  padding: 0.5rem;
  border: 1px solid #183454;
  display: block;
  width: 100%;
  background-color: #d0f7b7;
  /*box-shadow: 1px 1px 2px $col-toolbank-light;*/
}
fieldset input:focus {
  border: 1px solid rgb(0, 61, 166);
  outline: none;
}

input.addbasket {
  padding: 0.5rem;
  width: 4rem;
  font-size: 1rem;
  background-position: center right;
  background-repeat: no-repeat;
  border-bottom-color: white;
  border-right-color: white;
}

input.stock-unknown {
  background-color: rgb(239, 0, 0);
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_none.png);
}

input.stock-error {
  background-color: rgb(255, 0, 230);
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_none.png);
}

input.stock-outofstock {
  background-color: rgb(243, 175, 175);
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_none.png);
}

input.stock-instock {
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_in.png);
}

input.stock-instockcdl {
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_in.png);
}

input.stock-centralwarehouse {
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_tss.png);
}

input.stock-otherdepot {
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_otherdepot.png);
}

input.stock-partialstock {
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_partial.png);
}

input.stock-discontinued {
  background-color: rgb(243, 175, 175);
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_discontinued.png);
}

input.stock-direct {
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_direct.png);
}

input.stock-specialorder {
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_in.png);
}

input.stock-instockalt {
  background-image: url(https://toolmedia-res.cloudinary.com/image/upload/toolbank/ui/stock_in.png);
}

button {
  background-color: #183454;
  color: white;
  padding: 0.6666666667rem;
  padding-left: 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0px;
  border-bottom-right-radius: 0px;
  white-space: nowrap;
}
button i {
  color: white;
}

button.icon {
  display: inline;
  all: initial;
  inherits: none;
  font-size: 1.5rem;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0px;
}
button.icon i:hover {
  color: #218fd2;
}

button.icon:hover {
  all: initial;
  font-size: 1.5rem;
}

button.action {
  background-color: #77b10c;
}

button.delete {
  background-color: #b10c0c;
}

button.form {
  background-color: #218fd2;
}

button:hover {
  background-color: #ffae00;
}

button:disabled {
  background-color: #4f5c69;
}

div.sliderId {
  margin: auto;
  margin-top: 1rem;
  text-align: center;
  position: relative;
  height: 70px;
}
div.sliderId *, div.sliderId input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
}
div.sliderId svg,
div.sliderId input[type=range] {
  position: absolute;
  left: 0;
  bottom: 0;
}
div.sliderId input[type=number] {
  text-align: center;
  -moz-appearance: textfield;
}
div.sliderId input[type=number]::-webkit-outer-spin-button,
div.sliderId input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
div.sliderId input[type=number]:invalid,
div.sliderId input[type=number]:out-of-range {
  border: 2px solid #e60023;
}
div.sliderId input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}
div.sliderId input[type=range]:focus {
  outline: none;
}
div.sliderId input[type=range]:focus::-webkit-slider-runnable-track {
  background: #183454;
}
div.sliderId input[type=range]:focus::-ms-fill-lower {
  background: #1da1f2;
}
div.sliderId input[type=range]:focus::-ms-fill-upper {
  background: #1da1f2;
}
div.sliderId input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: #ffae00;
  border-radius: 5px;
  border: 1px;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
}
div.sliderId input[type=range]::-webkit-slider-thumb {
  z-index: 2;
  position: relative;
  -webkit-box-shadow: 2px 2px 8px #000;
          box-shadow: 2px 2px 8px #000;
  border: 1px solid black;
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background: #ffae00;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
  opacity: 0.8;
}
div.sliderId input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: #183454;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}
div.sliderId input[type=range]::-moz-range-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #95cdef;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #ffae00;
  cursor: pointer;
}
div.sliderId input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
div.sliderId input[type=range]::-ms-fill-lower,
div.sliderId input[type=range]::-ms-fill-upper {
  background: #183454;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}
div.sliderId input[type=range]::-ms-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #95cdef;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #a1d0ff;
  cursor: pointer;
}

.select2-container--default .select2-selection--multiple {
  background-color: #d0f7b7;
  border: 1px solid #183454;
}

.select2-container--default .select2-selection--single {
  background-color: #d0f7b7;
  border: 1px solid #030e19;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.select2-container .select2-selection--single {
  height: auto;
  padding: 0.5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgb(72.1875, 157.5, 17.5);
  padding: 0.5rem;
  padding-left: 2rem;
  color: white;
  border-color: #030e19;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
  background-color: rgb(19.59375, 42.75, 4.75);
  padding: 0.5rem;
}

button.deletebutton {
  padding: 2px;
  padding-left: 8px;
  border-radius: 4px;
}

.tb-editable {
  margin: 4px;
  border: 1px solid rgb(175, 243.9655172414, 255);
  display: block;
  padding: 0.25rem;
  /*margin: $basegap/4;*/
}

.tb-editable:before {
  /*
  position: absolute;
  font-family: 'FontAwesome';
  top: 0;
  left: 10px;
  content: "\f005";*/
}

.tb-editable:hover {
  border: 1px solid hsl(214, 30%, 21%);
  background-color: #d0f7b7;
}

.tb-editable-changed {
  border: 1px solid #ffae00;
  background-color: white;
}

select.tb-edit-select {
  position: absolute;
  border: 1px red;
}

ul.tb-editable-menu-helper {
  background-color: hsl(214, 30%, 21%);
  color: #9eb7d1;
  border: 1px solid black;
  padding: 3rem 0 0 0;
  width: auto;
  display: none;
  position: absolute;
}
ul.tb-editable-menu-helper li {
  padding: 0.3333333333rem 1rem 0.3333333333rem 1rem;
  border-top: 1px solid #183454;
}
ul.tb-editable-menu-helper li :first-child {
  border-top: 0px none;
}
ul.tb-editable-menu-helper li.selected {
  background-color: black;
}
ul.tb-editable-menu-helper li.selected::after {
  width: 2rem;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "FontAwesome";
  content: "\f058";
  text-align: right;
}
ul.tb-editable-menu-helper li:hover {
  background-color: rgb(1.3333333333, 2.8888888889, 4.6666666667);
  cursor: pointer;
}

.tbedit-menubox {
  border: 1px solid hsl(214, 30%, 21%);
  background-color: #d0f7b7;
}

content {
  grid-area: content;
  gap: 2rem;
  display: grid;
  grid-template-rows: auto;
  justify-items: stretch;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -ms-flex-line-pack: start;
      align-content: start;
  margin-top: 2rem;
}

content.public-home-page {
  background-color: dimgray;
  margin-top: 2rem;
}

content.error {
  background-color: #183454;
  color: #9eb7d1;
  position: relative;
}
content.error #errorimage {
  width: 100%;
}
content.error #errorpanel {
  width: 50%;
  margin-top: -6rem;
  background-color: #183454;
  padding: 2rem;
  right: 5%;
  top: 20rem;
  position: absolute;
}
content.error #errordetails {
  padding: 2rem;
  background-color: rgb(12.6666666667, 27.4444444444, 44.3333333333);
  font-size: 0.85rem;
}
content.error #errordetails label {
  display: block;
  color: #ffa703;
}
content.error h1, content.error h2 {
  margin-bottom: 1rem;
  line-height: 120%;
  color: #ffa703;
}
content.error p {
  color: #9eb7d1;
}

content.search-results {
  margin-top: 2rem;
  grid-template-columns: 20rem 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "header header" "sideA mainresults";
}
content.search-results .mainresults {
  grid-area: mainresults;
}
content.search-results .header {
  grid-area: header;
}
content.search-results .sideA {
  grid-area: sideA;
}
content.search-results .sideB {
  grid-area: sideB;
}

content.browse-results {
  margin-top: 2rem;
  grid-template-columns: 20rem 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "header header" "refinedetails mainlisting";
}
content.browse-results .refinedetails {
  grid-area: refinedetails;
}
content.browse-results .listing {
  grid-area: mainlisting;
}
content.browse-results .header {
  grid-area: header;
}

content.product-page {
  margin-top: 2rem;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "headerarea headerarea" "leftside rightside" "fullwidth fullwidth";
}
content.product-page .leftside {
  grid-area: leftside;
}
content.product-page .rightside {
  grid-area: rightside;
}
content.product-page .fullwidth {
  grid-area: fullwidth;
}
content.product-page .header {
  grid-area: headerarea;
}

content.order-page {
  margin-top: 2rem;
  grid-template-columns: 1fr 20rem;
  /*grid-template-rows: 5rem 5rem 1fr;*/
  grid-template-areas: "header ordersidebar" "info ordersidebar" "mainlisting ordersidebar";
}
content.order-page .sidebar {
  font-size: 0.8rem;
  grid-area: ordersidebar;
}
content.order-page .main-order {
  grid-area: mainlisting;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
content.order-page .header {
  grid-area: header;
}
content.order-page .infosection {
  grid-area: info;
}

content.wide-order-page {
  margin-top: 2rem;
  grid-template-columns: 1fr 20rem;
  /*grid-template-rows: 5rem 5rem 1fr;*/
  grid-template-areas: "header header" "info info" "mainlisting mainlisting";
}
content.wide-order-page .sidebar {
  font-size: 0.8rem;
  grid-area: ordersidebar;
}
content.wide-order-page .main-order {
  grid-area: mainlisting;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
content.wide-order-page .header {
  grid-area: header;
}
content.wide-order-page .infosection {
  grid-area: info;
}

content.orderlisting-page {
  margin-top: 2rem;
  grid-template-columns: 20rem 1fr;
  grid-template-rows: 4rem 1fr;
  grid-template-areas: "sidebar header" "sidebar listing";
}
content.orderlisting-page .sidebar {
  grid-area: sidebar;
}
content.orderlisting-page .listing {
  grid-area: listing;
}
content.orderlisting-page .header {
  grid-area: header;
}

content.orderarchive-page {
  margin-top: 2rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 4rem 1fr;
  grid-template-areas: "header header" "topleft topright" "mainlisting mainlisting" "bottomleft bottomright";
}
content.orderarchive-page .topleft {
  grid-area: topleft;
}
content.orderarchive-page .topright {
  grid-area: topright;
}
content.orderarchive-page .bottomleft {
  font-size: 0.8rem;
  grid-area: bottomleft;
}
content.orderarchive-page .bottomright {
  font-size: 0.8rem;
  grid-area: bottomright;
}
content.orderarchive-page .main-order {
  grid-area: mainlisting;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
content.orderarchive-page .header {
  grid-area: header;
}

content.side-by-side {
  margin-top: 2rem;
  grid-template-columns: 1fr 1fr;
  /* grid-template-rows: 1fr 20rem;*/
  grid-template-areas: "header header" "leftcol rightcol" "base base";
}
content.side-by-side .leftside {
  grid-area: leftcol;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
content.side-by-side .rightside {
  grid-area: rightcol;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
content.side-by-side .header {
  grid-area: header;
}
content.side-by-side .base {
  grid-area: base;
}

content.side-by-smallside {
  margin-top: 2rem;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "header header" "leftcol rightcol";
}
content.side-by-smallside .header {
  grid-area: header;
}
content.side-by-smallside .leftside {
  grid-area: leftcol;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
content.side-by-smallside .rightside {
  grid-area: rightcol;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

content.smallside-by-side {
  margin-top: 2rem;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "header header" "leftcol rightcol";
}
content.smallside-by-side .header {
  grid-area: header;
}
content.smallside-by-side .leftside {
  grid-area: leftcol;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
content.smallside-by-side .rightside {
  grid-area: rightcol;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

content.five-col {
  margin-top: 2rem;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

content.article-sidebar {
  margin-top: 2rem;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 5rem 1fr;
  grid-template-areas: "header sidebar" "mainarticle sidebar";
}
content.article-sidebar .mainarticle {
  grid-area: mainarticle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
content.article-sidebar .sidebar {
  grid-area: sidebar;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
content.article-sidebar .header {
  grid-area: header;
}

content.content-home {
  margin-top: 2rem;
  grid-template-columns: 1fr;
  /* grid-template-rows: 5rem 1fr;*/
  grid-template-areas: "mainarticle";
}
content.content-home .maingrid {
  grid-area: mainarticle;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

content.header-main {
  margin-top: 2rem;
  grid-template-columns: 1fr;
  grid-template-rows: 3rem 1fr;
  grid-template-areas: "header" "main";
}
content.header-main .main {
  grid-area: main;
}
content.header-main .header {
  grid-area: header;
}

content.header-grid {
  margin-top: 2rem;
  grid-template-columns: 1fr;
  grid-template-rows: 3rem 1fr;
  grid-template-areas: "header" "maingrid";
}
content.header-grid .maingrid {
  grid-area: maingrid;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: dense;
  gap: 1rem;
  /*
  :nth-child(2) {
      grid-column-start: 2;
    }

   :nth-child(3):last-child {
      grid-column-start: span 2;
    }*/
}
content.header-grid .header {
  grid-area: header;
}

content.grid-side-by-side {
  margin-top: 2rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 3rem 1fr;
  grid-template-areas: "header header" "maingrid maingrid" "left right";
}
content.grid-side-by-side .maingrid {
  grid-area: maingrid;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: dense;
  gap: 1rem;
}
content.grid-side-by-side .header {
  grid-area: header;
}
content.grid-side-by-side .left {
  grid-area: left;
}
content.grid-side-by-side .right {
  grid-area: right;
}

input.searchbox {
  font-size: 1.25rem;
  background-color: #9eb7d1;
  padding: 0.5rem;
  border-radius: 5px;
  font-weight: 500;
  border: 0px;
  border: 1px solid #183454;
  color: #183454;
  width: 20rem;
}
@media (min-width: 1425px) {
  input.searchbox {
    width: 30rem;
  }
}
input.searchbox :hover {
  background-color: azure;
}
input.searchbox :focus {
  outline: none;
}

input.searchbox::-webkit-input-placeholder {
  color: rgb(88.8111888112, 131.6433566434, 176.1888111888);
}

input.searchbox::-moz-placeholder {
  color: rgb(88.8111888112, 131.6433566434, 176.1888111888);
}

input.searchbox:-ms-input-placeholder {
  color: rgb(88.8111888112, 131.6433566434, 176.1888111888);
}

input.searchbox::-ms-input-placeholder {
  color: rgb(88.8111888112, 131.6433566434, 176.1888111888);
}

input.searchbox::placeholder {
  color: rgb(88.8111888112, 131.6433566434, 176.1888111888);
}

input.searchbox:focus {
  outline: none;
  border-color: rgb(0, 157, 255);
  background-color: azure;
}

div.easy-autocomplete {
  margin: auto;
}

div.easy-autocomplete-container ul li div.eac-item {
  padding: 1rem 0 1rem 0;
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}
div.easy-autocomplete-container ul li div.eac-item i {
  font-size: 0.8rem;
}
div.easy-autocomplete-container ul li div.eac-item span.info {
  padding-left: 1rem;
  padding-right: 1rem;
}
div.easy-autocomplete-container ul li div.eac-item span.info i {
  color: #183454;
}

div#categorydisplay {
  background-color: #d5e5f7;
  color: whit #183454;
  overflow: visible;
  grid-area: categories;
  display: none;
  grid-template-columns: auto 1fr;
  justify-items: stretch;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -ms-flex-line-pack: start;
      align-content: start;
  grid-template-areas: "root classes";
}
div#categorydisplay div.root {
  grid-area: root;
  background-color: #183454;
  padding: 2rem;
  padding-right: 1rem;
  height: 100%;
}
div#categorydisplay div.root a {
  display: block;
  color: #9eb7d1;
  font-weight: 500;
  line-height: 170%;
}
div#categorydisplay div.root a:hover {
  color: #ffae00;
}
div#categorydisplay div.root a.selected {
  font-weight: 900;
  color: #ffae00;
}
div#categorydisplay div.classpanel {
  padding: 2rem;
  grid-area: classes;
  display: none;
  position: relative;
  height: 100%;
  overflow: hidden;
}
div#categorydisplay div.classpanel a {
  display: block;
  color: #183454;
  font-weight: 500;
  line-height: 170%;
}
div#categorydisplay div.classpanel a:hover {
  color: #ffae00;
}
div#categorydisplay div.classpanel .classlisting {
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
  z-index: 2;
  position: relative;
}
div#categorydisplay div.classpanel img.categoryback {
  position: absolute;
  right: 0%;
  bottom: -20%;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: multiply;
}

div.panel {
  position: relative;
}

/*
div.highlight-panel {
    background-color: $col-backhighlight;
    padding: $basegap;
    border-radius: $basegap/2;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    position: relative;

    h2 {
        margin-bottom: $basegap*2;
        margin-top:-($basegap/2);
        margin-left:-($basegap/2);
        color:$col-toolbank-light;
    }


}*/
div.action-panel {
  background-color: #034b9d;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  position: relative;
  color: rgb(211.825, 231.625, 254.175);
  padding-top: 4rem;
}
div.action-panel a {
  color: rgb(230, 245, 255);
}
div.action-panel a.inactive {
  color: black;
}
div.action-panel h2.selected {
  background-color: #ffae00;
  color: #183454;
}
div.action-panel h2 {
  margin-bottom: 2rem;
  padding: 0.5rem;
  padding-right: 3rem;
  padding-bottom: 1rem;
  display: inline-block;
  background-color: rgb(2.04375, 51.09375, 106.95625);
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
  position: absolute;
  top: 0px;
  left: 0px;
}
div.action-panel input {
  font-size: 1rem;
  background-color: white;
  color: black;
}
div.action-panel fieldset {
  margin-bottom: 1rem;
}
div.action-panel fieldset input,
div.action-panel fieldset select {
  background-color: rgb(211.825, 231.625, 254.175);
  color: rgb(0.13125, 3.28125, 6.86875);
}
div.action-panel fieldset select {
  background-color: rgb(211.825, 231.625, 254.175);
  color: rgb(0.13125, 3.28125, 6.86875);
  padding: 0.75rem;
  height: 2rem;
}
div.action-panel div.action-option {
  border-top: 1px solid rgb(3.95625, 98.90625, 207.04375);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding-top: 0.5rem;
}
div.action-panel div.action-option div {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
div.action-panel div.action-option label {
  color: white;
}
div.action-panel div.action-option button {
  -ms-flex-item-align: end;
      align-self: end;
}
div.action-panel div.action-option input {
  padding: 0.5rem;
}
div.action-panel div.action-option-vert {
  border-top: 1px solid rgb(3.95625, 98.90625, 207.04375);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding-top: 0.5rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
div.action-panel div.action-option-vert div {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
div.action-panel div.action-option-vert label {
  color: white;
}
div.action-panel div.action-option-vert button {
  -ms-flex-item-align: end;
      align-self: end;
}
div.action-panel div.action-option-vert input {
  padding: 0.5rem;
}
div.action-panel div.action-option-horiz {
  border-top: 1px solid rgb(3.95625, 98.90625, 207.04375);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding-top: 0.5rem;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
div.action-panel div.action-option-horiz div {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
div.action-panel div.action-option-horiz label {
  color: white;
}
div.action-panel div.action-option-horiz button {
  -ms-flex-item-align: end;
      align-self: end;
}
div.action-panel div.action-option-horiz input {
  padding: 0.5rem;
}
div.action-panel div.inner-panel {
  background-color: rgb(2.521875, 63.046875, 131.978125);
}

div.highlight-panel {
  background-color: #ffebac;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  position: relative;
  color: #aa7e2a;
}
div.highlight-panel a {
  color: rgb(121, 91.843373494, 0);
}
div.highlight-panel h2 {
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  margin-bottom: 2rem;
  /*background-color: darken($col-actionpanel,25%);
  position: absolute;
  top:0px;
  left: 0px;*/
}
div.highlight-panel {
  /*
      a.inactive {
          color:black;
      }

      h2.selected {
          background-color: $col-highlight;
          color: $col-toolbank-dark;
      }

      h2 {
          margin-bottom: $basegap*2;
          padding: $basegap/2;
          display: inline-block;
          background-color: darken($col-actionpanel,25%);
          position: absolute;
          top:0px;
          left: 0px;
      }

      input {
          font-size: 1rem;
          background-color: lighten($col-actionpanel,20%);
          color: lighten($col-actionpanel,90%);        
      }

      fieldset {
          margin-bottom: 1rem;

          input,select {
              font-size: 0.8rem;
              background-color: lighten($col-actionpanel,20%);
              color: lighten($col-actionpanel,90%);
              padding: 0.75rem;
          }

      }
  */
}

div.navtab-panel {
  background-color: #d5e5f7;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  position: relative;
  color: #aa7e2a;
}
div.navtab-panel a {
  color: rgb(121, 91.843373494, 0);
}
div.navtab-panel h2 {
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  margin-bottom: 2rem;
  /*background-color: darken($col-actionpanel,25%);
  position: absolute;
  top:0px;
  left: 0px;*/
}
div.navtab-panel {
  /*
      a.inactive {
          color:black;
      }

      h2.selected {
          background-color: $col-highlight;
          color: $col-toolbank-dark;
      }

      h2 {
          margin-bottom: $basegap*2;
          padding: $basegap/2;
          display: inline-block;
          background-color: darken($col-actionpanel,25%);
          position: absolute;
          top:0px;
          left: 0px;
      }

      input {
          font-size: 1rem;
          background-color: lighten($col-actionpanel,20%);
          color: lighten($col-actionpanel,90%);        
      }

      fieldset {
          margin-bottom: 1rem;

          input,select {
              font-size: 0.8rem;
              background-color: lighten($col-actionpanel,20%);
              color: lighten($col-actionpanel,90%);
              padding: 0.75rem;
          }

      }
  */
}

div.breadcrumbs {
  font-size: 1.25rem;
  font-family: "Roboto Flex", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  line-height: initial;
  font-variation-settings: "opsz" 64;
  color: hsl(214, 30%, 21%);
}
div.breadcrumbs i {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
div.breadcrumbs em {
  font-weight: 600;
  letter-spacing: -0.05rem;
  color: black;
}

div.refinecrumbs {
  font-size: 1rem;
  font-family: "Roboto Flex", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  line-height: initial;
  font-variation-settings: "opsz" 64;
  color: hsl(214, 30%, 21%);
}
div.refinecrumbs i {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
div.refinecrumbs em {
  font-weight: 600;
  letter-spacing: -0.05rem;
  color: black;
}

div.profilesection,
div.ordersection {
  position: relative;
}
div.profilesection ul.navmenu,
div.ordersection ul.navmenu {
  position: absolute;
  display: none;
  background-color: hsl(214, 30%, 21%);
  right: 0px;
  z-index: 9999;
  width: 20rem;
  padding: 0.5rem;
}
div.profilesection ul.navmenu li a,
div.ordersection ul.navmenu li a {
  padding: 0.5rem 1rem 0.5rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #9eb7d1;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
div.profilesection ul.navmenu li a:hover,
div.ordersection ul.navmenu li a:hover {
  background-color: #030e19;
  color: #ffa600;
}
div.profilesection ul.navmenu li h5,
div.ordersection ul.navmenu li h5 {
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1.25rem;
  color: rgb(255, 214.5, 127.5);
}
div.profilesection ul.navmenu li span.nolink,
div.ordersection ul.navmenu li span.nolink {
  padding: 0.5rem 1rem 0.5rem 1rem;
  color: #9eb7d1;
  display: block;
}

div.site-info-panel {
  background-color: #00ba00;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
div.site-info-panel h2 {
  margin-bottom: 1rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
}
div.site-info-panel p {
  margin-left: 5rem;
}
div.site-info-panel i {
  position: absolute;
  font-size: 2rem;
  color: rgb(128, 255, 0);
}
div.site-info-panel a {
  color: #61fc61;
}
div.site-info-panel a:hover {
  color: white;
}

div.site-error-panel {
  background-color: #e20707;
  color: white;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
div.site-error-panel h2 {
  margin-bottom: 1rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
}
div.site-error-panel p {
  margin-left: 5rem;
}
div.site-error-panel i {
  position: absolute;
  font-size: 2rem;
  color: rgb(130, 8, 8);
}
div.site-error-panel a {
  color: rgb(255, 237, 101);
}

div.site-notification-panel {
  background-color: #ffb300;
  color: rgb(255, 233, 182);
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  color: #183454;
}
div.site-notification-panel div.note {
  position: relative;
}
div.site-notification-panel h4 {
  font-weight: 700;
  font-weight: 4rem;
}
div.site-notification-panel em {
  color: rgb(249, 223, 164);
  font-weight: normal;
}
div.site-notification-panel p {
  font-size: 1.25rem;
}
div.site-notification-panel a {
  color: rgb(255, 249, 202);
}
div.site-notification-panel i {
  color: rgb(255, 249, 202);
}

div.form-panel {
  background-color: #e9f2dc;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  position: relative;
  color: rgb(56.875, 76.5625, 28.4375);
  padding-top: 4rem;
}
div.form-panel h2 {
  padding: 0.5rem;
  padding-right: 3rem;
  padding-bottom: 1rem;
  display: inline-block;
  background-color: rgb(221.3125, 235.09375, 201.40625);
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
  position: absolute;
  top: 0px;
  left: 0px;
}
div.form-panel h2.inline {
  margin-bottom: 1rem;
  margin-top: 2rem;
  margin-left: -0.5rem;
}
div.form-panel a {
  color: #1c3278;
}
div.form-panel a:hover {
  color: black;
}
div.form-panel fieldset {
  /*
  padding-top: $basegap/2;
  margin-bottom: $basegap;*/
}
div.form-panel fieldset div {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
  flex-grow: 1;
}
div.form-panel fieldset label {
  display: block;
  font-weight: bold;
}
div.form-panel fieldset span {
  margin-top: 0px;
  display: block;
  font-weight: normal;
  margin-bottom: 0.5rem;
}
div.form-panel fieldset.filterset {
  border-top: 0px;
}
div.form-panel fieldset.filterset label {
  margin: 0 0 0 0;
  color: rgb(56.875, 76.5625, 28.4375);
  font-size: 0.8rem;
}
div.form-panel div.inner-panel {
  margin-top: 2rem;
  background-color: rgb(209.625, 228.1875, 182.8125);
}
div.form-panel div.inner-panel div.lighterstill {
  background-color: rgb(244.6875, 248.90625, 238.59375);
}

div.form-panel-nopadding {
  padding-top: 1rem;
}

div.developer-panel {
  background-color: rgb(188, 158, 209);
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  overflow-x: scroll;
  font-size: 0.8rem;
}
div.developer-panel table {
  font-size: 0.8rem;
}
div.developer-panel h2 {
  margin-bottom: 2rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  color: rgb(114, 52, 158);
}
div.developer-panel div {
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
div.developer-panel em {
  color: rgb(36, 24, 44);
}
div.developer-panel li {
  border-bottom-color: rgb(122, 95, 142);
}
div.developer-panel div.inner-panel {
  background-color: rgb(176.0524475524, 140.7027972028, 200.7972027972);
}

div.help-panel {
  background-color: #fff4ce;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  color: #183454;
  font-size: 1rem;
  line-height: 150%;
  position: relative;
  padding-top: 4rem;
}
div.help-panel h2 {
  padding: 0.5rem;
  padding-right: 3rem;
  padding-bottom: 1rem;
  display: inline-block;
  background-color: rgb(255, 221.1020408163, 104);
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
  position: absolute;
  top: 0px;
  left: 0px;
}
div.help-panel i {
  color: hsl(214, 30%, 21%);
}
div.help-panel img {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
div.help-panel {
  /*
  div {
      margin-left: $basegap/2;
      margin-top: $basegap/2;
      margin-bottom: $basegap/2;
  }

  p {
      color: lighten($col-toolbank-dark, 50%);
  }*/
}

/*
div.help-panel:hover {
    background-color: $col-backpanel;
    color: $col-toolbank-dark;

    p {
        color: $col-toolbank-dark;
    }
}*/
div.promo-panel {
  /*background-color: $col-highlight;*/
  padding: 1rem;
  color: white;
  font-size: 1rem;
  /*clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 80%);*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-shadow: 0px -5px 6px rgba(64, 68, 80, 0.5) inset;
          box-shadow: 0px -5px 6px rgba(64, 68, 80, 0.5) inset;
}
div.promo-panel div.saving {
  font-size: 6rem;
  line-height: 4rem;
  font-weight: 700;
  letter-spacing: -0.2rem;
}
div.promo-panel div.ctoa {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0rem;
  margin: 0 0 0 0;
}
div.promo-panel div.ctoa h4 {
  margin: 0 0 0 0;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
}
div.promo-panel div.ctoa h2 {
  font-size: 2.5rem;
  font-weight: 500;
  margin: 0 0 0 0;
  margin-bottom: 0.5rem;
  letter-spacing: 0;
  letter-spacing: -0.1rem;
}

div.promo-panel:hover {
  background-color: black;
  -webkit-animation-duration: 1;
          animation-duration: 1;
  color: white;
}

div.imagetint-panel {
  /*background-color: $col-highlight;*/
  padding: 0.5rem;
  color: white;
  font-size: 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgb(227.1888111888, 234.3566433566, 241.8111888112);
  border-radius: 0.5rem;
}

div.imagetint-panel:hover {
  background-color: #9eb7d1;
  -webkit-animation-duration: 1;
          animation-duration: 1;
  color: white;
}

div.simple-panel {
  margin-top: 0.3333333333rem;
  font-size: 1rem;
}
div.simple-panel a {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
div.simple-panel a.inctive {
  color: hsl(214, 30%, 21%);
}
div.simple-panel a:hover {
  color: #ffae00;
}
div.simple-panel a.selected {
  color: #030e19;
  background-color: rgb(230, 245, 255);
  font-weight: bold;
}

div.link-panel {
  margin-top: 0.3333333333rem;
  font-size: 0.85rem;
}
div.link-panel a {
  display: inline-block;
  padding: 0.3333333333rem;
  border-radius: 0.25rem;
}
div.link-panel a.inctive {
  color: hsl(214, 30%, 21%);
}
div.link-panel a:hover {
  color: #ffae00;
}
div.link-panel a.selected {
  background-color: #183454;
  color: #ffae00;
}
div.link-panel a.selected::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\f2d3";
  margin-right: 5px;
}

div.facetlinkslist {
  margin-top: 0.5rem;
}
div.facetlinkslist a {
  display: block;
  padding: 0.5rem;
  border-radius: 0.25rem;
}
div.facetlinkslist a:hover {
  color: #ffae00;
}
div.facetlinkslist a.selected {
  background-color: #183454;
  color: #ffae00;
}
div.facetlinkslist a.inctive {
  color: hsl(214, 30%, 21%);
}

div.tag-panel {
  overflow: visible;
  font-size: 0.8rem;
  background-color: rgb(161.78125, 204.53125, 253.21875);
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  position: relative;
  color: white;
}
div.tag-panel h2 {
  margin-bottom: 2rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  color: white;
}
div.tag-panel a {
  border: 1px solid rgb(140.6666666667, 178.7777777778, 222.3333333333);
  padding: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.5rem;
  background-color: rgb(244.486013986, 247.1958041958, 250.013986014);
  display: inline-block;
  color: #183454;
  margin-top: 0.5rem;
}
div.tag-panel a:hover {
  background-color: rgb(52.3333333333, 113.3888888889, 183.1666666667);
  color: white;
}
div.tag-panel a.selected {
  border: 1px solid rgb(140.6666666667, 178.7777777778, 222.3333333333);
  padding: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 1rem;
  background-color: rgb(52.3333333333, 113.3888888889, 183.1666666667);
  display: inline-block;
  color: #9eb7d1;
}

div.progress * {
  -webkit-box-flex: unset;
      -ms-flex: unset;
          flex: unset;
}
div.progress {
  padding-bottom: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
div.progress a.progressindicator {
  font-weight: normal;
  color: rgb(16.48, 49.44, 86.52);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  padding-bottom: 0.5rem;
  border-bottom: 0.5rem solid #d5e5f7;
  white-space: nowrap;
}
div.progress a.progressindicator i {
  font-size: 2rem;
  width: 2rem;
  color: rgb(0, 61, 166);
}
div.progress a.progressindicator em {
  font-weight: normal;
  display: block;
  font-size: 0.85rem;
  color: rgb(32.8, 98.4, 172.2);
}
div.progress a.progressindicator:hover {
  color: rgb(0, 61, 166);
  border-bottom: 0.5rem solid rgb(127.32, 175.96, 230.68);
}
div.progress a.progressindicator:hover i {
  color: rgb(0, 61, 166);
}
div.progress a.selected {
  color: black;
  font-weight: bold;
  border-bottom: 0.5rem solid rgb(0, 61, 166);
}
div.progress a.selected i {
  color: black;
}
div.progress a.selected em {
  color: black;
}
div.progress div.button {
  display: block;
  vertical-align: middle;
}
div.progress a.progress-error {
  color: #b10c0c;
  font-weight: bold;
}
div.progress a.progress-error i {
  color: red;
}
div.progress a.progress-error em {
  color: #b10c0c;
}

div.progress .progress-error.selected {
  border-bottom: 0.5rem solid red;
}

a.togglehelp i {
  font-size: 2rem;
  width: 2rem;
  color: rgb(0, 61, 166);
  opacity: 0.5;
}

a.togglehelp:hover i {
  opacity: 1;
}

div.warning-panel {
  background-color: #fb9797;
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
div.warning-panel h2 {
  margin-bottom: 1rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
}
div.warning-panel p {
  margin-left: 5rem;
}
div.warning-panel i {
  position: absolute;
  font-size: 3em;
  color: #26ff00;
}
div.warning-panel div {
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

div.info-panel {
  background-color: rgb(228, 244, 246);
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
div.info-panel h2 {
  margin-bottom: 2rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
}
div.info-panel h3 {
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  color: rgb(29.25, 81.25, 87.75);
}
div.info-panel h4 {
  color: rgb(113.25, 197.25, 207.75);
  font-size: 1.5rem;
}
div.info-panel p {
  /*margin-left: 5rem;*/
}
div.info-panel p img {
  vertical-align: middle;
}
div.info-panel em {
  color: red;
}
div.info-panel .inner-panel {
  background-color: rgb(208.875, 236.2083333333, 239.625);
}
div.info-panel .form-panel {
  background-color: rgb(201.225, 233.0916666667, 237.075);
}

div.dark-panel {
  background-color: #183454;
  color: #9eb7d1;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
div.dark-panel h2 {
  margin-bottom: 2rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
}
div.dark-panel h3 {
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  color: black;
}
div.dark-panel h4 {
  color: black;
  font-size: 1.5rem;
}
div.dark-panel p img {
  vertical-align: middle;
}
div.dark-panel em {
  color: red;
}

div.refine-panel {
  color: #183454;
  padding-top: 0;
  padding-left: 0;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1rem;
}
div.refine-panel div.panel-header {
  position: relative;
  padding-top: 0.5rem;
}
div.refine-panel div.panel-header h2 {
  color: #183454;
}
div.refine-panel div.panel-header h2.active {
  color: #ffae00;
}
div.refine-panel div.panel-header {
  /*
  a {
      display: inline-block;
     position: absolute;
      right: 0;
      top: 4px;
      vertical-align: middle;
      font-size: 0.8rem;
      line-height: 1.5rem;
      padding: 0;
      margin: 0;

      span {
          display: none;
          ;
      }

      span.show {
          display: inline-block;
      }

      i {
          font-size: 1rem;
      }

      ;
  }*/
}
div.refine-panel div.multifacetlinks {
  margin-top: 0.3333333333rem;
  font-size: 0.85rem;
}
div.refine-panel div.multifacetlinks a {
  display: block;
  padding: 0.3333333333rem;
  vertical-align: middle;
}
div.refine-panel div.multifacetlinks a::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\f0c8";
  margin-right: 5px;
  font-size: 1.5rem;
}
div.refine-panel div.multifacetlinks a.inactive {
  color: hsl(214, 30%, 71%);
}
div.refine-panel div.multifacetlinks a.inactive:hover {
  color: hsl(214, 30%, 71%);
}
div.refine-panel div.multifacetlinks a:hover {
  color: #ffae00;
}
div.refine-panel div.multifacetlinks a.selected {
  font-weight: 900;
}
div.refine-panel div.multifacetlinks a.selected::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\f14a";
  margin-right: 5px;
  font-size: 1.5rem;
}

a.removefilter {
  color: #b10c0c;
}

a.removefilter::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\f2d3";
  margin-right: 5px;
}

div.panel-collapsed {
  height: 3.5rem;
  overflow: hidden;
  margin-bottom: 2rem;
}

div.filter-panel {
  background-color: #d5e5f7;
  color: hsl(214, 30%, 21%);
  padding: 1rem;
  padding-top: 0.5rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*flex-direction: row;*/
  position: relative;
  /*   h2 {
      margin-bottom: $basegap*2;
      padding: $basegap/2;
      display: inline-block;
      background-color: darken($col-backpanel,10%);
      position: absolute;
      top:0px;
      left: 0px;
  }*/
}
div.filter-panel fieldset {
  border-right: 1px solid rgb(170.16, 202.48, 238.84);
  padding-right: 1rem;
  /*
  padding-top: $basegap/2;
  margin-bottom: $basegap;*/
  color: rgb(32.8, 98.4, 172.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*
  div {
      flex-grow: 1;

      display: flex;
      gap: $basegap;
      //justify-content: space-between;
      align-content: stretch;
      align-items: left;
      flex-grow: 1;
  }*/
}
div.filter-panel fieldset label {
  display: block;
  font-weight: normal;
  margin: 0 0 0 0;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}
div.filter-panel fieldset:last-child {
  border-right: none;
  padding-right: 0;
}
div.filter-panel span {
  /* margin-right: $basegap; */
}
div.filter-panel span img {
  vertical-align: middle;
}
div.filter-panel {
  /*
  i {
      position: absolute;
      font-size: 3em;
      color: #26ff00;
  }


  em {
      color: red;
  }*/
}

div.mini-map-panel {
  min-height: 300px;
  border: 1px solid red;
}

div.map-panel {
  min-height: 800px;
}
div.map-panel .map-info-popup {
  font-size: 1rem;
  font-family: "Noto Sans Display", serif;
}
div.map-panel #pac-card {
  background-color: white;
  padding: 1rem;
  font-family: "Roboto Flex", Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  width: 300px;
}
div.map-panel #title {
  margin-bottom: 0.5rem;
}
div.map-panel #pac-input {
  font-size: 1.2rem;
  font-weight: 400;
  border: 1px solid #183454;
  /* display:block; */
  background-color: #d0f7b7;
  padding: 0.5rem;
}

div.summary-panel {
  background-color: #d5e5f7;
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  position: relative;
  padding-bottom: 2rem;
  color: #030e19;
}
div.summary-panel img {
  width: 100%;
}
div.summary-panel h1 {
  color: #183454;
}
div.summary-panel a {
  color: #183454;
}
div.summary-panel h3 {
  color: #030e19;
  font-size: 1.8rem;
  letter-spacing: -0.1rem;
  line-height: 110%;
  padding-top: 0.5rem;
  padding-right: 2rem;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #d5e5f7;
}
div.summary-panel div.imgwithoverlay h3 {
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
  width: 70%;
}
div.summary-panel h4 {
  background-color: #d5e5f7;
  color: white;
  line-height: 120%;
  padding: 0.5rem;
  font-size: 1.25rem;
}
div.summary-panel h3:hover {
  color: #ffae00;
}
div.summary-panel div.summarytext div {
  line-height: 1.3rem;
  font-size: 1rem;
}

div.summary-panel:hover {
  background-color: #9eb7d1;
}
div.summary-panel:hover div.summarytext {
  color: black;
}
div.summary-panel:hover h3 {
  background-color: #9eb7d1;
}

div.related-panel {
  background-color: hsl(214, 30%, 21%);
  padding: 1rem;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  position: relative;
  color: #9eb7d1;
}
div.related-panel h1 {
  color: #9eb7d1;
}
div.related-panel h3 {
  color: white;
  line-height: 120%;
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  margin-top: 0px;
  margin-bottom: 0px;
}
div.related-panel h4 {
  background-color: #183454;
  color: white;
  line-height: 120%;
  padding: 0.5rem;
  font-size: 1.25rem;
}
div.related-panel h3:hover {
  color: #aa7e2a;
}

div.related-panel:hover {
  background-color: #f3a10a;
}

/*
  div.error-panel {
    background-color: #750000;
    color: white;
    padding: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }

  div.error-panel h2 {
    margin-bottom: 1rem;
    margin-top: -0.5rem;
    margin-left: -0.5rem;
  }

  div.error-panel p {
    margin-left: 5rem;
  }

  div.error-panel i {
    position: absolute;
    font-size: 3em;
    color: red;
  }*/
div.inner-panel {
  position: relative;
  margin: 0.3333333333rem;
  padding: 1rem;
  padding-top: 0.5rem;
}
div.inner-panel h2 {
  margin: 0 0 0 0;
  padding-bottom: 2rem;
  padding-top: 0.5rem;
  background-color: transparent;
  position: relative;
}
div.inner-panel h3 {
  margin-bottom: 0.5rem;
}

div.page-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  font-size: 1rem;
  font-weight: 700;
}
div.page-panel a {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
div.page-panel .page {
  font-size: 2.5rem;
  font-weight: 700;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
div.page-panel .page i {
  position: relative;
}
div.page-panel .page i span {
  font-size: 0.85rem;
  position: absolute;
  left: 0.5rem;
  bottom: 0.4rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.1rem;
}
div.page-panel .selected i {
  color: #183454;
}
div.page-panel .selected i span {
  color: white;
}

div.product-grid-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}
@media (min-width: 1425px) {
  div.product-grid-panel {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
div.product-grid-panel h3 {
  font-size: 1.6rem;
  line-height: 100%;
}
div.product-grid-panel div.product {
  background-color: rgb(249.9, 249.9, 249.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  position: relative;
}
div.product-grid-panel div.product img {
  /* width: 100%; */
}
div.product-grid-panel div.product div.productinfo {
  padding: 1rem;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-line-pack: justify;
      align-content: space-between;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
}
div.product-grid-panel div.product div.productinfo .cta {
  height: 4rem;
  margin-top: 0.5rem;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: -1rem;
  padding: 1rem;
  background-color: rgb(242.25, 242.25, 242.25);
}
div.product-grid-panel div.product div.productinfo .cta .tbprice {
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -0.05rem;
}
div.product-grid-panel div.group {
  background-color: rgb(229.5, 229.5, 229.5);
}
div.product-grid-panel a.grouphighlight div.product,
div.product-grid-panel div.grouphighlight div.product {
  background-color: rgb(194.3, 230.72, 255);
}
div.product-grid-panel div.product:hover {
  background-color: #dcf4ff;
}
div.product-grid-panel div.group:hover {
  background-color: rgb(216.75, 216.75, 216.75);
}
div.product-grid-panel div.group:hover div.hoverhighlight {
  color: #ffae00;
}
div.product-grid-panel div.group:hover div.hoverhighlight i {
  color: #ffae00;
}

div.promo-grid-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
@media (min-width: 1425px) {
  div.promo-grid-panel {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
div.promo-grid-panel div.promotionsection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  position: relative;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  padding: 1rem;
}
div.promo-grid-panel div.promotionsection h1 {
  color: #183454;
  font-size: 2rem;
}
div.promo-grid-panel div.promotionsection table {
  font-size: 1rem;
}
div.promo-grid-panel div.promotionsection table tr td {
  padding-top: 0.3333333333rem;
  padding-bottom: 0.3333333333rem;
  white-space: nowrap;
}
div.promo-grid-panel div.promotionsection img.brandlogo {
  width: 20%;
  position: absolute;
  top: 1rem;
  right: 1rem;
}
div.promo-grid-panel div.promotionsection div.productinfo {
  padding: 1rem;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-line-pack: justify;
      align-content: space-between;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  position: relative;
  color: #9eb7d1;
}
div.promo-grid-panel div.promotionsection div.productinfo .cta {
  height: 2rem;
  margin-top: 0.5rem;
}
div.promo-grid-panel div.promotionsection div.productinfo .cta .tbprice {
  font-weight: 900;
  font-size: 1.2rem;
}
div.promo-grid-panel div.product:hover {
  background-color: rgb(229.5, 229.5, 229.5);
}

body.wall-grid {
  display: grid;
  width: 100vw;
  height: 100vh;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 1rem;
}
body.wall-grid div {
  background-color: #221946;
  padding: 1rem;
  color: white;
}
body.wall-grid div h4 {
  color: #5c80d6;
  margin-bottom: 1rem;
}
body.wall-grid div h1 {
  color: white;
  font-size: 4rem;
}
body.wall-grid div h2 {
  color: rgba(255, 255, 255, 0.75);
  font-size: 2rem;
  line-height: 120%;
}

div.bloc_surround {
  border: 1px dotted hsl(214, 30%, 21%);
  padding-right: 4rem;
}
div.bloc_surround div.bloc_render {
  border: 1px solid black;
  position: relative;
}
div.bloc_surround div.bloc_render button {
  position: absolute;
  top: 1rem;
  right: -3rem;
}
div.bloc_surround div.bloc_edit {
  background-color: bisque;
  padding: 1rem;
  border: 1px solid black;
  position: relative;
  display: none;
}
div.bloc_surround div.bloc_edit button {
  position: absolute;
  top: 1rem;
  right: -3rem;
}

div.bloc-black-back {
  background-color: #030e19;
  opacity: 0.9;
  color: white;
}
div.bloc-black-back h1 {
  color: white;
}
div.bloc-black-back p {
  color: white;
}
div.bloc-black-back a {
  color: #ffae00;
}
div.bloc-black-back a:hover {
  color: #ffebac;
}

div.bloc_surround:hover {
  border: 1px solid red;
}

div.article-blocs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  line-height: 120%;
  padding: 0 0 0 0;
  border-radius: 0px;
}
div.article-blocs div.bloc {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}
div.article-blocs div.bloc p.title {
  font-size: 2.5rem;
  line-height: 140%;
}
div.article-blocs div.bloc p.heading {
  font-size: 1.5rem;
  line-height: 140%;
}
div.article-blocs div.bloc p {
  margin-bottom: 1rem;
  line-height: 140%;
}
div.article-blocs div.bloc li {
  margin-bottom: 1rem;
  line-height: 140%;
}
div.article-blocs div.bloc img.elementright {
  float: right;
  padding-left: 1rem;
}
div.article-blocs div.bloc img.elementleft {
  float: left;
  padding-right: 1rem;
}

div.Layout-blocs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  grid-auto-flow: dense;
}
div.Layout-blocs div.bloc {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  line-height: 120%;
}
div.Layout-blocs div.bloc-white {
  color: rgb(0, 0, 0);
}
div.Layout-blocs div.bloc-white h1,
div.Layout-blocs div.bloc-white h2,
div.Layout-blocs div.bloc-white h3 {
  color: black;
}
div.Layout-blocs div.bloc-black {
  color: rgb(255, 255, 255);
}
div.Layout-blocs div.bloc-black h1,
div.Layout-blocs div.bloc-black h2,
div.Layout-blocs div.bloc-black h3 {
  color: white;
}

div.layout-blocs-3 {
  grid-template-columns: repeat(3, 1fr);
}

div.bloc-listing {
  background-color: aqua;
}

div.bloc-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

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

div.bloc-grid-four {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
}

div.bloc-container {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 10rem;
  padding: 2rem;
  border-radius: 1rem;
  border-bottom-right-radius: 0px;
  /*
  div {
      padding: 1rem;
  }

  div.tb-content {
      padding: 0 0 0 0;
  }*/
}

div.bloc-slider,
div.block-tbslider {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 10rem;
  border-radius: 1rem;
  border-bottom-right-radius: 0px;
}
div.bloc-slider .glide,
div.block-tbslider .glide {
  height: 100%;
}
div.bloc-slider .glide__track,
div.block-tbslider .glide__track {
  height: 100%;
}
div.bloc-slider .glide__slides,
div.block-tbslider .glide__slides {
  height: 100%;
}
div.bloc-slider .glide__slide,
div.block-tbslider .glide__slide {
  height: 100%;
}
div.bloc-slider div.slide-content,
div.block-tbslider div.slide-content {
  background-size: cover;
  background-position: top left;
  height: 100%;
}
div.bloc-slider .glide__arrow,
div.block-tbslider .glide__arrow {
  background-color: rgba(255, 255, 255, 0.5);
}
div.bloc-slider .glide__arrow:hover,
div.block-tbslider .glide__arrow:hover {
  background-color: #ffae00;
}
div.bloc-slider,
div.block-tbslider {
  /*
  div {
      padding: 0rem;
  }*/
}

div.bloc-video {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 10rem;
  background-color: hsl(214, 30%, 21%);
  color: #9eb7d1;
  border-radius: 1rem;
  border-bottom-right-radius: 0px;
}
div.bloc-video div.videoplayer {
  width: 100%;
  height: 100%;
  margin-left: -1rem;
  margin-top: -1rem;
}

div.bloc-image {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 10rem;
  background-color: hsl(214, 30%, 21%);
  color: #9eb7d1;
  border-radius: 1rem;
  border-bottom-right-radius: 0px;
}

div.bloc-panel-category {
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 1rem;
  padding: 1rem;
}
div.bloc-panel-category img {
  border: 1px solid hsl(214, 30%, 21%);
  width: 96px;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  max-height: 96px;
}
div.bloc-panel-category div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

div.bloc-panel-product-small {
  border-radius: 1rem;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 1rem;
  position: relative;
  min-height: 12rem;
  padding: 1rem;
  background-position: -10% center;
  background-size: 40%;
  background-repeat: no-repeat;
  background-color: rgb(3.478125, 86.953125, 182.021875);
  z-index: 1;
  width: 1fr;
  overflow: hidden;
}
div.bloc-panel-product-small img.product {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute;
  top: -5%;
  right: -20%;
  width: 80%;
}
div.bloc-panel-product-small img.brand {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute;
  bottom: 0;
  right: 0;
}
div.bloc-panel-product-small h3 {
  padding-right: 20%;
  z-index: 10;
}
div.bloc-panel-product-small div.price {
  padding: 0.5rem;
  background-color: #183454;
}

div.bloc-panel-category-small {
  border-radius: 1rem;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 1rem;
  position: relative;
  min-height: 10rem;
  padding: 1rem;
  background-position: -20% center;
  background-size: 40%;
  background-repeat: no-repeat;
  background-color: rgb(3.478125, 86.953125, 182.021875);
  z-index: 1;
  width: 1fr;
  overflow: hidden;
}
div.bloc-panel-category-small img.category {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute;
  /*top:-5%;
  right:-10%;*/
  width: 110%;
  /* mix-blend-mode: multiply; */
  opacity: 0.5;
}
div.bloc-panel-category-small img.brand {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute;
  bottom: 0;
  right: 0;
}
div.bloc-panel-category-small h3 {
  padding-right: 20%;
  z-index: 10;
  font-size: 1.8rem;
  line-height: 110%;
  letter-spacing: -0.05rem;
}
div.bloc-panel-category-small div.price {
  padding: 0.5rem;
  background-color: #183454;
}

div.Layout-blocs div.bloc div.bloc-panel-product-small:hover {
  background-color: #f3a10a;
}

div.bloc-panel-category:hover {
  color: #aa7e2a;
  background-color: #183454;
}

div.bloc-panel-product {
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem;
}
div.bloc-panel-product div.head {
  color: white;
  font-size: 3rem;
  letter-spacing: -0.1rem;
  z-index: 1000;
  line-height: 90%;
  text-align: right;
  right: 1rem;
  top: 1rem;
  z-index: 2;
}
div.bloc-panel-product div.head b {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  display: block;
  line-height: 70%;
  padding: 0px;
  margin: 0px;
}
div.bloc-panel-product div.head a {
  color: white;
}
div.bloc-panel-product img.product {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 100%;
  z-index: 1;
  opacity: 0.5;
}
div.bloc-panel-product div.desc {
  position: relative;
  font-size: 1.75rem;
  line-height: 2rem;
  font-weight: 300;
  letter-spacing: -0.05rem;
  z-index: 2;
}
div.bloc-panel-product div.desc p {
  line-height: 2rem;
}
div.bloc-panel-product div.price {
  float: right;
  bottom: 0;
  right: 0;
  background-color: #183454;
  text-align: right;
  padding: 0.5rem;
  font-size: 2rem;
  line-height: 100%;
  letter-spacing: -0.1rem;
}
div.bloc-panel-product div.price i {
  display: block;
  color: white;
  font-weight: 700;
  font-size: 50%;
  text-align: left;
  line-height: 100%;
}

div.bloc-panel-promotion {
  border-radius: 1rem;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 1rem;
  position: relative;
  min-height: 256px;
  padding: 1rem;
  background-position: -20% center;
  background-size: 40%;
  background-repeat: no-repeat;
  background-color: #9eb7d1;
  z-index: 1;
  overflow: hidden;
}
div.bloc-panel-promotion img.promimage {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute;
  width: 320px;
  /* mix-blend-mode: multiply; */
  z-index: 1;
}
div.bloc-panel-promotion h3 {
  padding-right: 40%;
  z-index: 10;
  font-size: 3rem;
  line-height: 110%;
  letter-spacing: -0.1rem;
  z-index: 10;
}
div.bloc-panel-promotion div.mid {
  color: white;
  z-index: 10;
}
div.bloc-panel-promotion div.details {
  padding: 0.5rem;
  background-color: #183454;
  z-index: 10;
  opacity: 0.75;
}

div.Layout-blocs div.bloc-panel-promotion:hover {
  background-color: #f3a10a;
}

div.bloc-panel-promoitem {
  border-radius: 1rem;
  color: #183454;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  position: relative;
  min-height: 256px;
  padding: 1rem;
  background-position: -20% center;
  background-size: 40%;
  background-repeat: no-repeat;
  background-color: rgb(227.1888111888, 234.3566433566, 241.8111888112);
  /* background-color: aqua;*/
  z-index: 1;
  overflow: hidden;
  position: relative;
}
div.bloc-panel-promoitem img.promimage {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute;
  top: 15%;
  right: -128px;
  width: 320px;
  /* mix-blend-mode: multiply; */
  opacity: 0.3;
  z-index: 1;
}
div.bloc-panel-promoitem h4 {
  padding-right: 20%;
  z-index: 10;
  font-size: 1.8rem;
  line-height: 105%;
  letter-spacing: -0.1rem;
  z-index: 10;
  color: #183454;
  font-weight: 500;
}
div.bloc-panel-promoitem h5,
div.bloc-panel-promoitem p {
  z-index: 10;
}
div.bloc-panel-promoitem div.mid {
  color: #030e19;
  z-index: 10;
}
div.bloc-panel-promoitem div.details {
  padding: 0.5rem;
  background-color: #183454;
  z-index: 10;
  opacity: 0.75;
}
div.bloc-panel-promoitem div.price {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: auto;
  padding: 0.5rem;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.8);
  padding-right: 2rem;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
}
div.bloc-panel-promoitem div.price span.label {
  color: white;
  font-size: 1rem;
  display: block;
  line-height: 110%;
}
div.bloc-panel-promoitem div.price span.price {
  display: block;
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.15rem;
  text-align: left;
  display: block;
  line-height: 110%;
}
div.bloc-panel-promoitem div.prices {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  max-height: 5.5rem;
}
div.bloc-panel-promoitem div.prices div.pricebreak {
  padding: 0.5rem;
  opacity: 1;
  -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
          box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
  padding-right: 2rem;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
  max-width: 14rem;
  gap: 0rem;
}
div.bloc-panel-promoitem div.prices div.pricebreak span.label {
  color: white;
  font-size: 1rem;
  font-weight: 900;
  line-height: 95%;
}
div.bloc-panel-promoitem div.prices div.pricebreak span.price {
  display: block;
  color: #9eb7d1;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.15rem;
  line-height: 90%;
}
div.bloc-panel-promoitem div.prices div.pricebreak span.price span {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
div.bloc-panel-promoitem div.prices div.pricebreak span.note {
  color: #9eb7d1;
  font-size: 0.85rem;
  font-weight: 900;
  text-align: right;
  line-height: 95%;
}

div.Layout-blocs div.bloc-panel-promoitem:hover {
  background-color: #9eb7d1;
}

div.bloc-panel-full-image {
  border-radius: 1rem;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 1rem;
  position: relative;
  min-height: 10rem;
  z-index: 1;
  overflow: hidden;
}
div.bloc-panel-full-image img {
  width: 100%;
}

div.layout-blocs div.bloc div.bloc-panel-full-image:hover {
  background-color: #f3a10a;
  border: 1px solid red;
}

div.bloc-bulletpoint {
  border-radius: 1rem;
  position: relative;
  padding: 1rem;
  background-repeat: no-repeat;
  z-index: 1;
  overflow: hidden;
  min-height: 320px;
}
div.bloc-bulletpoint img.image {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute;
  /* mix-blend-mode: multiply; */
  z-index: 1;
  width: 100%;
  min-height: 200px;
  margin-left: 2rem;
  margin-top: 4rem;
}
div.bloc-bulletpoint div.header {
  margin-right: 20%;
  z-index: 10;
  line-height: 130%;
  z-index: 10;
  color: white;
  background-color: #183454;
  padding: 1rem;
  padding-right: 10%;
  position: absolute;
  top: 0px;
  left: 0px;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
  opacity: 0.95;
}
div.bloc-bulletpoint div.header h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
  line-height: 110%;
  opacity: 1;
}
div.bloc-bulletpoint div.header p {
  opacity: 1;
}
div.bloc-bulletpoint div.header:hover {
  opacity: 0.25;
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  cursor: default;
}

div.bloc-headlines a {
  color: #ffae00;
}

.bloc-span-1 {
  grid-column: span 1;
}

.bloc-spanrow-2 {
  grid-row: span 2;
}

.bloc-span-2 {
  grid-column: span 2;
}

.bloc-span-4 {
  grid-column: span 4;
}

.bloc-span-3 {
  grid-column: span 3;
}

.bloc-span-full {
  grid-column: 1/-1;
}

.bloc-spanrow-full {
  grid-row: 1/-1;
}

.bloc-spanrow-3 {
  grid-row: span 3;
}

div.tb-content {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

div.block-container {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 10rem;
  padding: 2rem;
  border-radius: 1rem;
  border-bottom-right-radius: 0px;
  /*
  div {
      padding: 1rem;
  }

  div.tb-content {
      padding: 0 0 0 0;
  }*/
}

div.block-tbslider {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 10rem;
  border-radius: 1rem;
  border-bottom-right-radius: 0px;
}
div.block-tbslider .glide {
  height: 100%;
}
div.block-tbslider .glide__track {
  height: 100%;
}
div.block-tbslider .glide__slides {
  height: 100%;
}
div.block-tbslider .glide__slide {
  height: 100%;
}
div.block-tbslider div.slide-content {
  background-size: cover;
  background-position: top left;
  height: 100%;
}
div.block-tbslider .glide__arrow {
  background-color: rgba(255, 255, 255, 0.5);
}
div.block-tbslider .glide__arrow:hover {
  background-color: #ffae00;
}
div.block-tbslider {
  /*
  div {
      padding: 0rem;
  }*/
}

div.block-image {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 10rem;
  background-color: hsl(214, 30%, 21%);
  color: #9eb7d1;
  border-radius: 1rem;
  border-bottom-right-radius: 0px;
}

.tb-cms-block {
  border: 1px solid #eee;
  padding: 12px;
  border-radius: 6px;
  background: #fafafa;
}

.tb-cms-block__header {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #ddd;
}

/* Settings area */
.tb-cms-block__settings {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  padding: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  border: 1px solid #ddd;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.tb-cms-block__settings-group {
  display: block;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}

.tb-cms-block__settings-label {
  font-size: 12px;
  color: #444;
}

.tb-cms-block__settings-input {
  font-size: 12px;
}

/* Items list */
.tb-cms-block__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}

.tb-cms-block__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.tb-cms-block__preview {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ddd;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #f0f0f0;
}

.tb-cms-block__preview-img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.tb-cms-block__fields {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
}

.tb-cms-block__input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
}

/* Per-item controls */
.tb-cms-block__controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  margin-left: auto;
}

.tb-cms-block__control-btn {
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #ffa200;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  line-height: 1.2;
}

.tb-cms-block__control-btn:hover {
  background: #e9e9e9;
}

.tb-cms-block__control-btn--remove {
  color: #b00020;
}

/* Footer with add button */
.tb-cms-block__footer {
  margin-top: 10px;
  padding: 8px 10px;
  background: #d0d0d0;
  border-radius: 4px;
  text-align: left;
}

.tb-cms-block__add-btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #aaa;
  background: #ffa200;
  cursor: pointer;
  font-size: 13px;
}

.tb-cms-block__add-btn:hover {
  background: #6d3901;
}

.tb-cms-block__overlay-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* Container for the whole template selector */
.tb-cms-block__template-selector {
  position: relative;
  display: inline-block;
  min-width: 220px;
}

/* Hidden value input (no special styling needed) */
.tb-cms-block__template-value {
  display: none;
}

/* Selected (closed) state */
.tb-cms-block__template-selected {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}

/* Small colour swatch */
.tb-cms-block__template-thumb {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #eee; /* actual color set inline from JS */
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Selected label text */
.tb-cms-block__template-selected-label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dropdown arrow */
.tb-cms-block__template-selected-arrow {
  font-size: 10px;
  opacity: 0.7;
}

/* Dropdown list container */
.tb-cms-block__template-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 10;
  max-height: 220px;
  overflow-y: auto;
}

/* One option row */
.tb-cms-block__template-option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  cursor: pointer;
}

.tb-cms-block__template-option:hover {
  background: #f3f3f3;
}

.tb-cms-block__visibility-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.tb-cms-block__visibility-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  margin-top: 8px;
  padding-bottom: 4px;
}

.outertrigger:hover .imagezoom-hover {
  /* CSS properties for child divs when the enclosing div is hovered */
  -webkit-animation: child-animation-zoom 0.5s ease;
          animation: child-animation-zoom 0.5s ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes child-animation-zoom {
  /* Define the animation for child divs */
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
    opacity: 1;
  }
}

@keyframes child-animation-zoom {
  /* Define the animation for child divs */
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
    opacity: 1;
  }
}
.imagezoom-hover {
  overflow: hidden;
  /* Common CSS properties for child divs */
}

.outertrigger:hover .imageshrink-hover {
  /* CSS properties for child divs when the enclosing div is hovered */
  -webkit-animation: child-animation-shrink 0.5s ease;
          animation: child-animation-shrink 0.5s ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes child-animation-shrink {
  /* Define the animation for child divs */
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}

@keyframes child-animation-shrink {
  /* Define the animation for child divs */
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
.imageshrink-hover {
  overflow: hidden;
  /* Common CSS properties for child divs */
}

div.tb-toggle {
  padding: 0.25rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 1rem;
  background-color: rgb(225.852, 236.956, 249.448);
  overflow: hidden;
}
div.tb-toggle a {
  width: 50%;
  z-index: 10;
  border-radius: 1rem;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  font-size: 0.8rem;
  line-height: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
div.tb-toggle a i {
  color: #183454;
  font-size: 1.25rem;
  margin: 0 0 0 0;
  opacity: 0.7;
  text-align: center;
}
div.tb-toggle a i:hover {
  color: #ffae00;
}
div.tb-toggle a span {
  margin-left: 4px;
}
div.tb-toggle a.active {
  color: rgb(255, 255, 255);
}
div.tb-toggle a.active i {
  color: white;
  font-size: 1.25rem;
  margin: 0 0 0 0;
}
div.tb-toggle .active-indicator {
  background-color: rgb(170.16, 202.48, 238.84);
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 1;
  border-radius: 0.25rem;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}
div.tb-toggle .left {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
div.tb-toggle .right {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.frontcard {
  position: relative;
  opacity: 1;
}

a.promo-surround:hover .frontcard {
  -webkit-animation: child-animation-shrink 0.5s ease;
          animation: child-animation-shrink 0.5s ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.backcard {
  position: absolute;
  width: 100%;
  background-color: #183454;
  opacity: 1;
  padding: 1rem;
}

@-webkit-keyframes animateIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6) translateY(-8px);
            transform: scale(0.6) translateY(-8px);
  }
  100% {
    opacity: 1;
  }
}

@keyframes animateIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6) translateY(-8px);
            transform: scale(0.6) translateY(-8px);
  }
  100% {
    opacity: 1;
  }
}
.animatedInSequence {
  -webkit-animation-name: animateIn;
          animation-name: animateIn;
  -webkit-animation-duration: 350ms;
          animation-duration: 350ms;
  -webkit-animation-delay: calc(var(--animation-order) * 100ms);
          animation-delay: calc(var(--animation-order) * 100ms);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

.col-dark-light {
  color: hsl(214, 30%, 21%);
}

.col-highlight {
  color: #d6c071;
}

.col-brighthighlight {
  color: #ffae00;
}

.col-tradehighlight {
  color: #e37200;
}

.textright {
  text-align: right;
}

.bg-col-back {
  background-color: white;
}

.bg-col-back-panel {
  background-color: rgb(226, 251, 255);
}

.bg-col-backhighlight {
  background-color: rgb(230, 245, 255);
}

.bg-col-highlight {
  background-color: #ffae00;
}

.bg-col-link {
  background-color: #105ec4;
}

.bg-col-errorlight {
  background-color: #750000;
}

.bg-col-input {
  background-color: #d0f7b7;
}

.bg-col-toolbank {
  background-color: rgb(0, 61, 166);
}

.bg-col-toolbank-dark {
  background-color: #183454;
}

.bg-col-toolbank-light {
  background-color: #9eb7d1;
}

.bg-col-toolbank-dark-light {
  background-color: hsl(214, 30%, 21%);
}

.bg-col-user {
  background-color: #eb9e0f;
}

.bg-col-order {
  background-color: #a9eb0f;
}

.bg-col-filter {
  background-color: #aacaef;
}

.bg-high-1 {
  background-color: rgb(0, 61, 166);
}

.bg-high-2 {
  background-color: rgb(9, 116, 198);
}

.bg-high-3 {
  background-color: rgb(0, 49, 132);
}

.bg-high-0 {
  background-color: rgb(1, 88, 211);
}

.p1 {
  padding: 1rem;
}

.p2 {
  padding: 2rem;
}

.p2-tb {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.p-t {
  padding-top: 0.5rem;
}

.p-b {
  padding-top: 0.5rem;
}

.pl-1 {
  padding-left: 0.5rem;
}

.m0-r {
  margin-right: 0.5rem;
}

.m-r {
  margin-right: 1rem;
}

.m1 {
  margin: 1rem;
}

.mt {
  margin: 1rem;
}

.mb {
  margin-bottom: 1rem;
}

.m1-tb {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.m-t {
  margin-top: 0.5rem;
}

.m2-b {
  margin-bottom: 0.5rem;
}

.m2-t {
  margin-top: 2rem;
}

.m4-t {
  margin-top: 4rem;
}

.m2 {
  margin: 2rem;
}

.m2-tb {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.m2-t {
  margin-top: 2rem;
}

.m1-t {
  margin-top: 1rem;
}

.m2-b {
  margin-bottom: 2rem;
}

.ml {
  margin-left: 0.5rem;
}

.gap1 {
  gap: 1rem;
}

.gap2 {
  gap: 2rem;
}

.m-centre {
  margin-left: auto;
  margin-right: auto;
}

.postr {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.posbl {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}

.posbr {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.posbrnopad {
  position: absolute;
  bottom: 0;
  right: 0;
}

.relative {
  position: relative;
}

.posfr {
  float: right;
}

.posFR {
  float: right;
  border: 1px solid right;
  margin-left: 1rem;
}

.ce-block .posFL {
  float: left;
  width: 40%;
  margin: 0 1rem 1rem 0;
  border: 4px solid red;
}

.ce-block .posFR {
  float: right;
  width: 40%;
  margin: 0 0 1rem 1rem;
  border: 4px solid green;
}

.y10 {
  height: 10rem;
}

.y2 {
  height: 2rem;
}

.two-col {
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
  gap: 1rem;
}

.h-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  gap: 1rem;
  /* flex-wrap: wrap; */
}
.h-flex :not(:first-child):not(:last-child) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.h-flex :not(:first-child):not(:last-child) .noflex {
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
}
.h-flex :not(:first-child):not(:last-child) input.noflex {
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
}

.h-flex-even {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  /*align-content: stretch;*/
  /*align-items: baseline;*/
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  gap: 1rem;
}
.h-flex-even * {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
}

.h-flex-no-grow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  gap: 1rem;
}
.h-flex-no-grow :not(:first-child):not(:last-child) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.h-flex-no-grow :not(:first-child):not(:last-child) .noflex {
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
}
.h-flex-no-grow .noflex :not(:first-child):not(:last-child) {
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
}
.h-flex-no-grow input {
  width: auto;
}

.flex-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.flex-centre {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.h-flex-start {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  /* gap: $basegap/2;*/
  /** {
      border:1px solid green;
  }*/
}

.v-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  gap: 1rem;
  /*
      * {
          border:1px solid red;
      }*/
  /*
      :last-child {

         align-self: flex-end;
      }
  */
}

.v-flex-centred {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.v-flex-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 0;
}

.v-flex-stretch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  gap: 1rem;
}
.v-flex-stretch :last-child {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.f-pad {
  -webkit-box-flex: 100;
      -ms-flex: 100;
          flex: 100;
}

.flex-no-gap {
  gap: 0;
}

.lozenge {
  border-radius: 500px;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: rgb(0, 51.6295180723, 140.5);
}

.lozenge:hover {
  background-color: #ffae00;
  color: #030e19;
}
.lozenge:hover i {
  color: #030e19;
}

.lozenge-sm {
  border-radius: 500px;
  color: white;
  display: inline-block;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.9rem;
  line-height: 140%;
  height: 1.3rem;
}

div.asgrid {
  display: grid;
}

.lozengeicononly {
  font-size: 1.2rem;
}
.lozengeicononly i {
  padding: 0px;
  margin: 0px;
}

.lozengered {
  background-color: red;
}

i.icon-large {
  font-size: 1.5rem;
}

ul.asgrid, ul.listing {
  display: grid;
  gap: 1rem;
}
ul.asgrid li, ul.listing li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid #9eb7d1;
  padding-bottom: 1rem;
}
ul.asgrid li label, ul.listing li label {
  font-weight: 400;
}
ul.asgrid li span, ul.listing li span {
  color: #183454;
  font-weight: 900;
}

.x20 {
  width: 20rem;
}

.x30 {
  width: 30rem;
}

.x2 {
  width: 2rem;
}

.x3 {
  width: 3rem;
}

.x4 {
  width: 4rem;
}

.x8 {
  width: 7rem;
}

.x75p {
  width: 75%;
}

.x50p {
  width: 50%;
}

div.aspect1to1 {
  height: 0px;
  overflow: none;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
}

div.aspectcover {
  height: 0px;
  overflow: none;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

div.twocolresponsivecontainer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 1425px) {
  div.twocolresponsivecontainer {
    grid-template-columns: 1fr 1fr;
  }
}

.footer-info {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1rem;
  color: #9eb7d1;
  margin-top: 1rem;
}

div.masonrygrid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 20px;
}
div.masonrygrid .masonryitem img {
  max-width: 100%;
  min-width: 100%;
}

div.asgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
div.asgrid h3 {
  width: 100%;
}
div.asgrid * img {
  max-width: 100%;
}

div.ascolumns {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  gap: 1rem;
}
div.ascolumns h3 {
  width: 100%;
}
div.ascolumns * img {
  max-width: 100%;
}

div.imgwithoverlay {
  position: relative;
}
div.imgwithoverlay a {
  position: absolute;
  left: 0px;
  bottom: 0px;
}
div.imgwithoverlay h3 {
  position: absolute;
  left: 0px;
  bottom: 0px;
}

tr.backordered td {
  background-color: rgb(222, 147, 147);
}

tr.lost td {
  background-color: rgb(224, 84, 84);
}

tr.nonvan td {
  background-color: rgb(167, 210, 233);
}

.rulebelow {
  border-bottom: 1px solid #9eb7d1;
}

span.error {
  background-color: rgb(187, 18, 18);
  color: white;
  padding: 0.25rem;
  margin-top: 0.25rem;
  display: inline-block;
}

p.information {
  background-color: rgb(0, 0, 0);
  color: black;
  padding: 0.25rem;
  margin-top: 0.25rem;
  display: inline-block;
  text-align: left;
}

pre {
  font-family: "Courier New", Courier, monospace;
  text-wrap: wrap;
  white-space: break-spaces;
  overflow-wrap: anywhere;
}
pre em {
  color: #183454;
}

.blackbacktext {
  text-shadow: 2px 2px 10px #000000;
}

p.warning {
  /*background-color: $col-warningline;*/
  display: block;
  padding: 0.3333333333rem;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
}

p.warning::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\f071";
  padding-top: 2px;
  margin-right: 5px;
  font-size: 1.25rem;
  /*   padding-top: 4px;*/
  color: red;
}

p.error {
  /*background-color: $col-warningline;*/
  display: block;
  padding: 0.3333333333rem;
  background-color: rgb(156, 3, 3);
  font-size: 1rem;
  color: white;
}

p.error::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\f071";
  padding-top: 2px;
  margin-right: 5px;
  font-size: 1.25rem;
  /*   padding-top: 4px;*/
  color: red;
}

p.info {
  /*background-color: $col-warningline;*/
  display: block;
  padding: 0.3333333333rem;
  background-color: rgba(255, 255, 255, 0.25);
  font-size: 1rem;
}

p.info::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  content: "\f071";
  padding-top: 2px;
  margin-right: 5px;
  font-size: 1.25rem;
}

.col3, div.col3 {
  grid-template-columns: repeat(3, 1fr);
}

.col2, div.col2 {
  grid-template-columns: repeat(2, 1fr);
}

.col6 {
  grid-template-columns: repeat(6, 1fr);
}

.spanall {
  grid-column: 1/-1;
}

.span1 {
  grid-column: span 1;
}

.span2 {
  grid-column: span 2;
}

.span3 {
  grid-column: span 3;
}

.gridposR {
  grid-column: -1;
  grid-row: 1/10;
}

.largergap {
  gap: 2rem;
}

div.tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
div.tabs a {
  background-color: hsl(214, 30%, 21%);
  display: inline-block;
  margin-right: 1rem;
  padding: 1rem;
  color: white;
  border-radius: 0.5rem;
}
div.tabs a:hover {
  background-color: #ffa600;
}
div.tabs a.selected {
  background-color: #6ca504;
}

div.tb-content p {
  line-height: 1.7rem;
}
div.tb-content h2 {
  margin-bottom: 0.5rem;
}
div.tb-content h3 {
  margin-bottom: 0.5rem;
}
div.tb-content p.warningnote {
  background-color: #f5ab9b;
  color: rgb(80, 1, 1);
  padding: 1rem;
  padding-left: 5rem;
  border-radius: 0.5rem;
  position: relative;
  margin-bottom: 1rem;
}
div.tb-content p.warningnote em {
  margin-bottom: 0.5rem;
  display: block;
  color: black;
}
div.tb-content p.warningnote i {
  position: absolute;
  font-size: 2rem;
  color: rgb(165, 48, 48);
  left: 1rem;
}

body {
  font-size: 1rem;
  font-family: "Noto Sans Display", serif;
  font-weight: 400;
  display: grid;
  width: 100vw;
  height: 100vh;
  line-height: 1.25rem;
  background: white top center/cover no-repeat fixed;
}

body.main {
  grid-template-columns: 1fr 60rem 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "header header header" "leftsidebar categories rightsidebar" "leftsidebar content rightsidebar" "footer footer footer";
  /* background-color: blue; */
  background: white top center/cover no-repeat fixed;
}
@media (min-width: 1425px) {
  body.main {
    grid-template-columns: 1fr 80rem 1fr;
    grid-template-rows: auto auto 1fr auto;
    /* background-color: fuchsia; */
  }
}

body.error {
  grid-template-columns: 1fr 60rem 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "header header header" "leftsidebar content rightsidebar";
  /* background-color: blue; */
  background-color: #18312e;
  color: #9ed1b5;
}
@media (min-width: 1425px) {
  body.error {
    grid-template-columns: 1fr 80rem 1fr;
    grid-template-rows: auto auto 1fr auto;
    /* background-color: fuchsia; */
  }
}

hr {
  height: 1px;
  border: 0px;
  border-top: 1px solid #9ed1b5;
}

p {
  /*line-height: 130%;*/
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
}

img.logo {
  height: 2em;
}

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

header {
  grid-area: header;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  overflow: visible;
}
header a.mlink {
  padding-top: 10px;
  padding-bottom: 0px;
  margin-right: 1rem;
  color: #9ed1b5;
  font-family: "Noto Sans Display", serif;
  font-size: 1.1rem;
  border-bottom: 8px solid transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: visible;
  font-weight: 400;
}
header a.mlink:hover {
  color: #ffa600;
}
header div.top {
  margin: 0 0 0 0;
  padding-bottom: 1rem;
  padding-top: 1rem;
  background-color: rgb(0, 61, 166);
}
header div.top div.headermain {
  width: 60rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1425px) {
  header div.top div.headermain {
    width: 80rem;
  }
}
header div.panelcontainer {
  width: 60rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
}
@media (min-width: 1425px) {
  header div.panelcontainer {
    width: 80rem;
  }
}
header div.bottom {
  background-color: #18312e;
  padding-bottom: 1rem;
  border-top: 1px solid #9ed1b5;
}
header div.bottom nav {
  width: 60rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
}
@media (min-width: 1425px) {
  header div.bottom nav {
    width: 80rem;
  }
}

aside {
  background-color: transparent;
}

aside.left {
  grid-area: leftsidebar;
  background-color: transparent;
}

aside.right {
  grid-area: rightsidebar;
}

footer {
  background-color: #18312e;
  grid-area: footer;
  color: #9ed1b5;
  font-size: 0.85rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
footer div.footermain {
  width: 60rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  display: grid;
  grid-template-areas: "main log" "links links";
  min-height: 8rem;
  gap: 1rem;
}
@media (min-width: 1425px) {
  footer div.footermain {
    width: 80rem;
  }
}
footer i {
  color: #d6c071;
}
footer h3 {
  color: #ffae00;
}
footer div.main {
  padding-top: 2rem;
  grid-area: main;
}
footer div.log {
  color: #9ed1b5;
  padding-top: 2rem;
  grid-area: log;
  position: relative;
}
footer div.log p {
  margin: 0px;
}
footer div.log .fail {
  color: red;
}
footer div.log .success {
  color: green;
}
footer div.log img.footerlogo {
  position: absolute;
  right: -5px;
  bottom: 0px;
  height: 3rem;
  opacity: 0.5;
}
footer div.links {
  grid-area: links;
}
footer div.links a {
  color: #218fd2;
}
footer div.links a:hover {
  color: #ffa600;
}

div#devfooter {
  grid-area: devfooter;
}

/* Just definitions 
@function frcol($variant: 'base') {
    @return map-get($fr-colour-map, $variant);
}*/
table {
  width: 100%;
  table-Layout: auto;
  font-size: 1rem;
}
table td {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  vertical-align: middle;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
table td.top {
  vertical-align: top;
}
table td.large {
  font-size: 1.5rem;
  letter-spacing: -0.05rem;
  vertical-align: middle;
}
table th {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  vertical-align: top;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
table td.optional {
  display: none;
}
@media (min-width: 1425px) {
  table td.optional {
    display: table-cell;
  }
}
table tr th {
  font-weight: 900;
  text-align: left;
  color: hsl(214, 30%, 21%);
}
table tr th.smallhead {
  padding-right: 0px;
  font-size: 0.8rem;
  font-weight: 700;
}
table tr th:last-child {
  padding-right: 0px;
  text-align: right;
}
table tr th:first-child {
  padding-left: 0px;
}
table tr td:first-child {
  padding-left: 0px;
}
table tr td:last-child {
  padding-right: 0px;
  text-align: right;
}
table tr.smallhead th {
  padding-right: 0px;
  font-size: 0.8rem;
  font-weight: 700;
}
table tr.upperline td {
  padding-bottom: 0px;
}
table tr.lowerline td {
  padding-top: 0px;
}
table tr.notfirst td:first-child {
  padding-left: 0.5rem;
}
table tr.connectedline {
  border-left: 1px dotted hsl(214, 30%, 21%);
  border-bottom: 1px dotted hsl(214, 30%, 21%);
  padding: 1rem;
}
table tr.connectedline td:first-child {
  padding-left: 1rem;
}
table tr.row-fulfilled td {
  background-color: #ffa8a8;
}
table td.aline {
  border-left: 2px solid hsl(214, 30%, 21%);
}
table tr.bordertop td {
  border-top: 0.5rem solid white;
  padding-top: 0px;
}
table tr td.all-left {
  text-align: left;
}
table tr td.olinemsg_error {
  background-color: #f7c8c8;
  font-size: 0.85rem;
  color: rgb(56.3095238095, 8.1904761905, 8.1904761905);
  text-align: left;
  border-left: 0.5rem solid rgb(168, 0, 0);
}
table tr td.olinemsg_error b {
  font-weight: 600;
}
table tr td.olinemsg_warning {
  background-color: #f7e2d6;
  font-size: 0.85rem;
  color: rgb(65.6836734694, 32.0408163265, 12.8163265306);
  text-align: left;
  border-left: 0.5rem solid rgb(220, 95, 6);
}
table tr td.olinemsg_warning b {
  font-weight: 600;
}
table tr td.olinemsg_True {
  background-color: #f7c8c8;
  font-size: 0.85rem;
  color: rgb(56.3095238095, 8.1904761905, 8.1904761905);
  text-align: left;
  border-left: 0.5rem solid rgb(168, 0, 0);
}
table tr td.olinemsg_True b {
  font-weight: 600;
}
table tr td.olinemsg_delivery {
  background-color: rgb(236.3444444444, 236.3444444444, 186.0555555556);
  font-size: 0.85rem;
  color: rgb(29.8630136986, 49.2739726027, 5.2260273973);
  text-align: left;
}
table tr td.olinemsg_delivery b {
  font-weight: 600;
}
table tr td.olinemsg_upsell {
  background-color: rgb(246.2210526316, 246.2210526316, 235.9789473684);
  font-size: 0.85rem;
  color: black;
  text-align: left;
}
table tr td.olinemsg_upsell b {
  font-weight: 600;
}
table tr td.olinemsg_info {
  background-color: #f3f3e5;
  font-size: 0.85rem;
  color: rgb(65.6836734694, 32.0408163265, 12.8163265306);
  text-align: left;
}
table tr td.olinemsg_info b {
  font-weight: 600;
}
table tr td.olinemsg_none {
  background-color: #f3f3e5;
  font-size: 0.85rem;
  color: rgb(65.6836734694, 32.0408163265, 12.8163265306);
  text-align: left;
}
table tr td.olinemsg_none b {
  font-weight: 600;
}
table tr td.olinemsg_False {
  background-color: #f3f3e5;
  font-size: 0.85rem;
  color: rgb(65.6836734694, 32.0408163265, 12.8163265306);
  text-align: left;
  border-left: 0.5rem solid rgb(255, 166, 0);
}
table tr td.olinemsg_False b {
  font-weight: 600;
}
table tr td.tinted {
  background-color: #f7e2d6;
  font-size: 0.85rem;
  color: rgb(65.6836734694, 32.0408163265, 12.8163265306);
  text-align: left;
}
table tr td.form-tinted {
  background-color: #e9f2dc;
  font-size: 0.85rem;
  color: rgb(43.0625, 57.96875, 21.53125);
  text-align: left;
}
table tr.top-align td {
  vertical-align: top;
}
table td.group {
  -webkit-box-align: right;
      -ms-flex-align: right;
          align-items: right;
  text-align: right;
  border-left: 4px solid #9ed1b5;
  padding-top: 0;
  padding-bottom: 0;
}
table td.group img {
  margin: auto 0 auto auto;
  margin-top: 0.5rem;
  display: block;
}
table td.small {
  display: table-cell;
}

table.allleft tr td {
  text-align: left;
}

table.lined tr td {
  border-bottom: 1px solid hsl(214, 30%, 21%);
}

ul.linklisting li {
  padding: 0.5rem 0 0.5rem 0;
}

a.feedback {
  background-color: rgb(255, 153, 0);
  -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.498);
          box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.498);
  border-radius: 1rem;
  border-top-left-radius: 0px;
  padding: 0.5rem;
  color: black;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* CSS3 */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* Vertical align */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* Horizontal align */
}
a.feedback i {
  color: rgb(88, 39, 2);
  font-size: 1.5em;
}

a.feedback:hover {
  background-color: rgb(144, 50, 0);
  color: white;
}

div.bloc-bulletpoint div.header {
  background-color: rgb(48, 144, 14);
}/*# sourceMappingURL=main-home.css.map */