/* Global CSS variables: */

:root {
  --cadwork-blue: #144094;
  --light-gray: #e4e4e4;
  --currency-selector-color: white;
}

/* 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;
  color: var(--currency-selector-color);
}
/* 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.5em;
}

/* 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 USD */
html:has(#currency-usd:checked) .currency.usd {
  display: block;
}

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

/* End of cadwork changes. */

sp-header .logo {
}

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

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

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

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    background: #E7EBF3; 
	color: #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: #ffff;
    padding: 10px;
    border-radius: 5px;
    color: #1F3C90;
    border: solid 2px #1F3C90;
    margin: 25px 0px 0px 0px;
}

#offcanvas-toggler {
    float: right;
    line-height: 70px;
    margin-left: 15px;
    font-size: 20px;
    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
}

.sp-menu-item.signin {
  border-style: solid;
  border-width: 2px;
  border-radius: 50px;
  background: #ffffff; 
  padding: -40px !important;
margin: 20px 10px 0px 10px;
transition: background 1s;
}

.sp-menu-item.order {
  border-style: solid;
  border-width: 2px;
  border-radius: 50px;
background: #ffffff;
  padding: -40px !important;
transition: background 1s;
}

.sp-menu-item.order:hover {
background: #E7EBF3;
}

.sp-menu-item.signin:hover {
background: #E7EBF3;
}

.top-bar {
  padding: 0px !important;
}



/* Anpassungen Template web2use.ch 13.07.2024 */

#sp-top-bar .sp-module {margin: 0 0 0 0px !important;}


@media (min-width: 1400px) {
  .container {
    max-width: 1320px !important;
	padding: 0 10px !important;
  }
}


#sp-footer1 {
  padding: 0;
}

.sp-contact-info {
  padding-top: 5px;
}