/* Global CSS variables: */

:root {
  --cadwork-blue: #144094;
  --light-gray: #e4e4e4;
  --top-bar-color: var(--light-gray);
  --main-menu-bg: var(--light-gray);
}

/* Hide 🏠 */

.mod-custom153 {
  display: none;
}

/* Change color of check and radio buttons */
.form-check-input:checked {
  background-color: var(--cadwork-blue);
  border-color: var(--cadwork-blue);
}

/* Currency selector and prices: */

/* Put some space after each of them. */
#currency-selector label {
  margin-right: 1em;
}
/* But not for the last one. */
#currency-selector label:last-child {
  margin-right: 0;
}

/* Change the mouse pointer to show that one can click on it. */
#currency-selector label,
#currency-selector input[type="radio"] {
  cursor: pointer;
}

/* The currency headings should be blue and a bit bigger. */
h3.currency {
  color: var(--cadwork-blue);
  font-weight: bold;
  font-size: 1.2em;
}

/* Hide all currencies. */
.currency {
  display: none;
}

/* But show them all on edit view. */
.layout-edit-iframe .currency {
  display: block !important;
}

/* Show only CHF */
html:has(#currency-chf:checked) .currency.chf {
  display: block;
}

/* Show only EUR */
html:has(#currency-eur:checked) .currency.eur {
  display: block;
}

/* Show only GBP */
html:has(#currency-gbp:checked) .currency.gbp {
  display: block;
}

#sp-header {
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 99;
}

.sp-megamenu-parent > li > a {
  font-size: 18px;
  color: #1f3c90;
  line-height: 40px;
  font-weight: 400;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-size: 18px;
  color: #1f3c90;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  background: #1f3c90;
}

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  color: #1f3c90;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: #e4e4e4;
  padding: 10px;
  border-radius: 5px;
  color: #1f3c90;
  border: solid 2px #c6c6c6;
  margin: 25px 0px 0px 0px;
}

#offcanvas-toggler {
  float: right;
  line-height: 70px;
  margin-left: 15px;
  font-size: 18px;
  height: 75px;
}

#offcanvas-toggler > i {
  color: #1f3c90;
}

.offcanvas-menu {
  background-color: white !important;
  color: #1f3c90;
}

.offcanvas-menu .close-offcanvas > i {
  color: #1f3c90;
}

.offcanvas-inner .sp-module ul > li a {
  color: #1f3c90 !important;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover {
  color: #1f3c90 !important;
}

#sp-bottom {
  padding: 0px !important;
}

/* Top bar */
.top-bar {
  padding: 8px 0;
}
/* Top bar text and link color. */
.top-bar,
.top-bar a,
.top-bar a:visited,
.top-bar a:hover,
.top-bar a:active {
  color: var(--top-bar-color);
}

/* Top bar elements on the left side. */
#sp-top-bar .sp-module {
  margin: 0 !important; /* Remove left margin of 20px. */
}

/* Top left cadwork logo link */
.cadwork-logo-link {
  margin-right: 1em;
  display: inline-block; /* So that it displays nicely on the left. */
  text-decoration: none; /* No underline on the link. */
  vertical-align: top; /* It's to high up if we don't set this. */
}

/* Language switcher : */

/* Change color of the button. */
#sp-top-bar .mod-languages button,
#sp-top-bar .mod-languages button:hover,
#sp-top-bar .mod-languages button:active,
#sp-top-bar .mod-languages button:focus {
  background-color: var(--top-bar-color);
  color: var(--cadwork-blue);
}

/* Make the dropdown menu smaller. */
#sp-top-bar .mod-languages .dropdown-menu {
  padding: 0;
}
#sp-top-bar .mod-languages ul.lang-block {
  min-width: 100%; /* At least as large as the button. But can get bigger if needed. */
}
#sp-top-bar .mod-languages ul.lang-block li {
  margin: 0;
  padding: 0; /* Put the padding on the inner <a> element. */
  background-color: var(--top-bar-color);
}
#sp-top-bar .mod-languages ul > li > a,
#sp-top-bar .mod-languages ul > li > a:visited {
  padding: .375rem .75rem;
  line-height: normal;
  font-size: .875rem;
  color: var(--cadwork-blue);
}
#sp-top-bar .mod-languages ul > li > a:hover,
#sp-top-bar .mod-languages ul > li > a:active {
  color: white;
  background-color: var(--cadwork-blue);
}

/* Hide the ">" symbol in front of each language. */
#sp-top-bar .mod-languages ul > li > a::before {
  content: none;
}
/* Change active language design. */
#sp-top-bar .mod-languages ul > li.lang-active > a {
  color: white;
  background-color: var(--cadwork-blue);
}

/* Contact information at the top right.
   Move it a bit down and align it on the right. */
.sp-contact-info {
  margin: 3px -7px 0 0; /* Instead of 0 -10px */
}

/* Main menu : */

.sp-menu-item.free-trail a {
  color: #ffffff !important;
  border-radius: 10px;
  background: var(--cadwork-blue);
  margin: 20px 0px 0px 10px;
  transition: background 1s;
}

.sp-menu-item.free-trail a:hover {
  background: #00aff3;
}



/* Top menu corrections only for wide screens. */
@media (min-width: 992px) {
  /* Push down the menu */
  .sp-megamenu-parent {
    top: 5px;
  }
  /* Font smaller */
  #sp-header .sp-megamenu-parent > li > a {
    font-size: 15px;
  }

  /* For french, we need to make the logo column smaller and menu wider. */
  #sp-logo {
    width: 20%; /* Instead of the 25% coming from col-lg-3. */
  }
  #sp-menu {
    width: 80%; /* Instead of the 75% coming from col-lg-9. */
  }
}

/* For large screens: */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px !important;
    padding: 0 20px !important;
  }
}