/* Add your css code here */
/*
Variable Definitions:
  --r-bg: Region background color. Sets the overall background color of the region wrapper.
  --r-tx: Region text color. Sets the default text color for all paragraph and inline text within the region.
  --r-h1: Region heading color. Specifically sets the color for headings (h1, h2, h3) within the region, allowing heading color control independently from body text.
  --r-lk: Region link color. Sets the color for anchor (<a>) links within the region in their normal (non-hover) state.
  --r-lk-h: Region link hover color. Sets the color of links within the region when hovered or focused, providing clear interactive feedback.
  --r-br: Region border color. Sets the border color for the region, useful for visual separation of sections.
  --r-bg-fr: Form background color within the region. Sets the background color specifically for input forms (e.g., login forms, search bars) within the region, enabling clear visual separation of form areas.
  --r-tx-lk: Menu link text color within the region. Sets the text color for menu links in navigation blocks or region-based menus, ensuring consistency with your theme’s navigation design.
  --r-tx-lk-h: Menu link hover text color within the region. Sets the hover or focus color for menu link text, aiding in clear navigation feedback for users.
  --r-bg-lk: Menu link background color within the region. Sets the background color of menu links in their normal state within the region for better menu styling control.
  --r-bg-lk-h: Menu link background hover color within the region. Sets the background color for menu links on hover/focus, ensuring clear user interaction indication.
  --r-tx-bt:  Button text color within the region. Sets the text color for buttons within the region (e.g., call-to-action buttons, form submit buttons).
  --r-tx-bt-h: Button text hover color within the region. Sets the text color for buttons when hovered/focused, providing interactive feedback.
  --r-bg-bt: Button background color within the region. Sets the background color for buttons in their normal state, aligning them visually with your design system.
  --r-bg-bt-h:  Button background hover color within the region. Sets the background color for buttons on hover/focus, improving interactivity and user experience.
*/

/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:

#page-wrapper {
  background-color: var(--r-bg);
  color: var(--r-tx);
  border-color: var(--r-br);
}

h1, h2, h3 {
  color: var(--r-h1);
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk);
  color: var(--r-lk-h);
}

input:not(.button) {
  background-color: var(--r-bg-fr);
}

li.nav__menu-item a {
  color: var(--r-tx-lk);
  background-color: var(--r-bg-lk);
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h);
  background-color: var(--r-bg-lk-h);
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt);
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h);
  background-color: var(--r-bg-bt-h);
}
https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo/instructions-for-developers-on-using-colors-in-solo-theme
*/

/* Start Var tags */
.page-wrapper {
  --r-bg: #ffffff;
}
#fixed-search-block {
  background-color: var(--solo-teal);
}
.solo-search-block-form {
  background-color: var(--r-bg);
}
a:not(li.nav__menu-item a) {
  --r-lk: #993f3d;
  --r-lk-h: var(--solo-teal);
}
.page-wrapper li.nav__menu-item > a, .page-wrapper li.nav__menu-item > button, .page-wrapper .login-button-open, .page-wrapper .hamburger-icon button, .block-user-login-block form + .item-list ul li a {
  --r-br: white;
}
.page-wrapper a.button, .page-wrapper input.button, .page-wrapper .solo-file-button, .page-wrapper .search-button-close button {
  --r-tx-bt: #ffffff;
  --r-tx-bt-h: #ffffff;
  --r-br: white;
  --r-bg-bt: #993f3d;
  --r-bg-bt-h: var(--solo-teal);
}
/* End Var tags */

.solo-account-menu {
  float: right;
}
.branding-second {
  display: none;
}
@media (min-width: 62rem) {
  .site-name {
    font-size: 3rem !important;
  }
}
@media (max-width: 61.9375rem) {
  h2 {
    font-size: 2rem !important;
  }
  h3 {
    font-size: 1.75rem !important;
  }
}
p,
.field--name-body ol li,
.field--name-body ul li,
.block-layout-builder ol li,
.block-layout-builder ul li {
  font-size: 1.25em;
  line-height: 1.75 !important;
}
hr {
  --r-br: #993f3d;
}
.anchor {
  display: inline;
  position: relative;
  top: -15rem;
  visibility: hidden;
}
@media not all and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
  .anchor {
    top: 0;
    padding-top: 10rem;
    vertical-align: top;
  }
}
.solo-account-menu .menu__url-title,
.copyright-inner p {
  font-size: 14px;
}
.solo-account-menu .menu__url-title {
  color: #993f3d;
}

@media (max-width: 36rem) {
  #fixed-search-block,
  #search-button-open,
  #primary-menu {
    display: none;
  }
  .site-logo {
    width: 14rem;
  }
  img.media__element {
    margin-bottom: 1rem !important;
  }
  p.Indent1, ul.Indent1, ol.Indent1 {
    margin-left: 1em;
  }
}

#sidebar-button-open,
#search-button-open {
  margin-top: 0.75rem;
}
#header {
  z-index: 99;
}
#block-mysolo-main-menu {
  margin-top: 6rem;
}
.solo-inner .navigation__menubar > li.nav__menu-item > a,
.solo-inner .navigation__menubar > li.nav__menu-item > button,
.solo-inner .navigation__menubar > li.nav__menu-item .nav__submenu-item > a {
  font-size: 1.125em;
  font-weight: 300 !important;
  text-transform: uppercase;
}
.solo-inner .navigation__menubar > li.nav__menu-item > a:hover,
.solo-inner .navigation__menubar > li.nav__menu-item > button:hover,
.solo-inner .navigation__menubar > li.nav__menu-item .nav__submenu-item > a:hover {
  color: #993f3d;
}

@media screen and (min-width:36.0625rem) and (max-width:79.9375rem) {
  .primary-menu {
    display: none;
  }
  .site-logo {
    width: 16rem;
  }
}

.page-wrapper nav ul:not(.header ul, .solo-ul, .field ul, .pager ul) li>a::after,
.page-wrapper nav ul:not(.header ul, .solo-ul, .field ul, .pager ul) li>a::before,
.page-wrapper nav ul:not(.header ul, .solo-ul, .field ul, .pager ul) li>button::after,
.page-wrapper nav ul:not(.header ul, .solo-ul, .field ul, .pager ul) li>button::before {
  border-block-end: 5px solid #993f3d !important;
}
.hero {
  margin-top: 0;
  padding: 0;
}
.hero-inner,
.highlight-top-inner,
.hero-middle-inner,
.mappa-inner {
  padding: 0 !important;
}
.top-container {
  background-color: #993f3d;
}
.top-container h2 {
  text-align: center;
}
.top-box-inner {
  padding: 0 !important;
}
#block-mysolo-matworkhpimage .media--view-mode-default,
#block-mysolo-reformerpilatesimg .media--view-mode-default,
#block-mysolo-posturalpilatesimg .media--view-mode-default {
  margin: 0 !important;
}
#block-mysolo-heroreformerpilatestext .field--name-body,
#block-mysolo-highlighttop .field--name-body {
  padding: 0 1rem;
}
@media (min-width:80rem) {
  .highlighted {
    position: fixed;
    height: 3rem;
    margin-bottom: 3rem;
    background-color: transparent;
    z-index: 1002 !important;
  }
  #header {
    position: fixed;
  }
  .site-logo {
    width: 16rem;
  }
  .hero {
    margin-top: 8rem;
  }
  .top-container-inner {
    width: 80rem;
  }
  .page-node-type-page .page-title,
  .path-contact .page-title {
    margin-top: 13.5rem;
  }
  .path-search .page-title {
    margin-top: 6.5rem;
  }
  .main-container-inner {
    width: 62rem;
    margin-left: auto;
    margin-right: auto;
  }
  #primary-menu {
    position: fixed;
    width: 48rem;
    margin-left: 25%;
    box-shadow: none;
    background-color: transparent;
  }
  #block-mysolo-main-menu {
    margin-top: 3rem;
  }
  #primary-menu {
    z-index: 201;
  }
  #block-mysolo-hero .align-center {
    float: none;
    max-width: 100%;
    margin-top: 0;
  }
  #block-mysolo-heroreformerpilatestext .field--name-body,
  .highlight-middle-inner,
  .highlight-bottom-inner {
    width: 60rem;
    margin-left: auto;
    margin-right: auto;
  }
  .main-navigation-wrapper {
    width: 62rem;
  }
  .path-user-login .page-title,
  .path-user .page-title {
    margin-top: 10rem;
  }
}
@media (min-width:100rem) {
  #primary-menu {
    margin-left: 25%;
  }
}
.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: space-around;
  padding: 1rem;
}
blockquote {
  padding: 10px 20px;
  font-size: 1.25em;
  border-left: 0px solid #9f9f9f !important;
  background-color: #ccff66;
}
.sm-icons a > span .path-update:hover {
  fill: #fff !important;
}
.red {
  color: #993f3d;
}

h3.regolamento a {
  color: #993f3d;
}
h3.regolamento a:hover {
  color: green;
}

h4.caption {
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  font-size: 14px;
}

@media (min-width:48rem) {
  .align-left {
    margin-right: 3rem !important;
  }
  .align-right {
    margin-left: 3rem !important;
  }
}
.field--name-field-privacy {
  padding-top: 1rem;
}

/*******************************************************************************
START VIDEO RESPONSIVE
*******************************************************************************/
.field--name-field-media-video-file,
.field--name-field-media-oembed-video,
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
.field--name-field-media-video-file video,
.field--name-field-media-oembed-video iframe,
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
/*******************************************************************************
END VIDEO RESPONSIVE
*******************************************************************************/

/*******************************************************************************
START LAYOUT BUILDER
*******************************************************************************/
.rosa-sezione {
  border-bottom: none !important;
  background-color: #fdeada;
}
.block-inline-blockbasic {
  padding: 1rem;
  border-bottom: 1px solid #993f3d;
}
.block-layout-builder h2 {
  height: auto !important;
  font-size: 1.25rem !important;
  text-align: center;
}
.block-layout-builder h2.page-title,
h2.page-title {
  font-size: 1.5em !important;
  color: #993f3d;
}
.path-frontpage .block-inline-blockbasic .field--name-body {
  padding-top: 1rem;
}
@media (min-width:62rem) {
  .block-layout-builder h2 {
    height: 3rem !important;
    font-size: 1.5rem !important;
  }
  .block-layout-builder h2.page-title,
  h2.page-title {
    font-size: 2em !important;
  }
  .rosa-sezione {
    border-bottom: 1px solid #993f3d !important;
  }
  .block-inline-blockbasic {
    border-bottom: none !important;
  }
}
/*******************************************************************************
END LAYOUT BUILDER
*******************************************************************************/

/*******************************************************************************
START WEBFORM
*******************************************************************************/
.webform-type-webform-booking .form-item__label,
.webform-booking-total-price {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
  font-size: 2em;
}
[id^='paypal-button-container'] {
margin: 20px auto;
max-width: 300px;
width: 100%;
}

form fieldset:not(td fieldset) {
border: 1px solid white !important;
}

[id^="appointment-wrapper"] {
  & [id^="calendar-container"] {
    & .calendar-days {
      & .calendar-day {
        &.active {
          color: white;
          background-color: #993f3d !important;
            &:hover {
              background-color: var(--solo-teal) !important;
            }
        }
      }
    }
  }
}

table.sticky-header thead {
  position: sticky;
  z-index: 500;
  top: 0;
}
.page-wrapper table tr:nth-child(even) {
  background-color: #efefef;
}
/*******************************************************************************
END WEBFORM
*******************************************************************************/