:root,
[data-bs-theme=light] {
  --ar-primary: #f32d09;
  --ar-primary-rgb: 243, 45, 9;
  --bs-primary: #f32d09;
  --bs-primary-rgb: 243, 45, 9;
  --ar-secondary: #edf1f5;
  --ar-secondary-rgb: 237, 241, 245;
  --bs-secondary: #edf1f5;
  --bs-secondary-rgb: 237, 241, 245;
  --ar-warning: #edcb50;
  --ar-warning-rgb: 237, 203, 80;
  --bs-warning: #edcb50;
  --bs-warning-rgb: 237, 203, 80;
  --ar-info: #3f7fca;
  --ar-info-rgb: 63, 127, 202;
  --bs-info: #3f7fca;
  --bs-info-rgb: 63, 127, 202;
  --ar-success: #3fca90;
  --ar-success-rgb: 63, 202, 144;
  --bs-success: #3fca90;
  --bs-success-rgb: 63, 202, 144;
  --ar-danger: #ed5050;
  --ar-danger-rgb: 237, 80, 80;
  --bs-danger: #ed5050;
  --bs-danger-rgb: 237, 80, 80;
  --ar-light: #ffffff;
  --ar-light-rgb: 255, 255, 255;
  --bs-light: #ffffff;
  --bs-light-rgb: 255, 255, 255;
  --ar-dark: #121519;
  --ar-dark-rgb: 18, 21, 25;
  --bs-dark: #121519;
  --bs-dark-rgb: 18, 21, 25;
  --ar-link-color: #f32d09;
  --ar-link-hover-color: #da1400;
  --bs-link-color: #f32d09;
  --bs-link-color-rgb: 243, 45, 9;
  --bs-link-hover-color: #da1400;
  --ar-body-font-family: Lato, sans-serif;
  --ar-heading-font-family: Anton, sans-serif;
  --ar-root-font-size: 1.0rem;
  --ar-body-font-size: 1.05rem;
  --ar-border-width: 0px;
  --ar-border-radius: 0rem;
  --ar-border-radius-sm: calc(var(--ar-border-radius) * 0.75);
  --ar-border-radius-lg: calc(var(--ar-border-radius) * 1.25);
  --ar-border-radius-xl: calc(var(--ar-border-radius) * 1.5);
  --ar-border-radius-xxl: calc(var(--ar-border-radius) * 2.25);
}
[data-bs-theme=light] {
  --ar-body-bg: #ffffff;
  --bs-body-bg: #ffffff;
  --ar-body-bg-rgb: 255, 255, 255;
  --bs-body-bg-rgb: 255, 255, 255;
  --ar-body-color: #576071;
  --bs-body-color: #576071;
  --ar-body-color-rgb: 87, 96, 113;
  --bs-body-color-rgb: 87, 96, 113;
  --ar-secondary-color: #858c97;
  --bs-secondary-color: #858c97;
  --ar-heading-color: #121519;
  --bs-heading-color: #121519;
  --ar-border-color: #e3e9ef;
  --bs-border-color: #e3e9ef;
}
[data-bs-theme=light] .card {
  --ar-card-bg: #ffffff;
}
.btn-primary {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #f32d09;
  --ar-btn-border-color: #f32d09;
  --ar-btn-hover-bg: #da1400;
  --ar-btn-hover-border-color: #da1400;
  --ar-btn-active-bg: #da1400;
  --ar-btn-active-border-color: #da1400;
  --ar-btn-disabled-bg: #f32d09;
  --ar-btn-disabled-border-color: #f32d09;
}
.btn-outline-primary {
  --ar-btn-color: #f32d09;
  --ar-btn-border-color: #f32d09;
  --ar-btn-hover-bg: #f32d09;
  --ar-btn-hover-border-color: #f32d09;
  --ar-btn-active-bg: #f32d09;
  --ar-btn-active-border-color: #f32d09;
  --ar-btn-disabled-color: #f32d09;
  --ar-btn-disabled-border-color: #f32d09;
}
.btn-secondary {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #edf1f5;
  --ar-btn-border-color: #edf1f5;
  --ar-btn-hover-bg: #d4d8dc;
  --ar-btn-hover-border-color: #d4d8dc;
  --ar-btn-active-bg: #d4d8dc;
  --ar-btn-active-border-color: #d4d8dc;
  --ar-btn-disabled-bg: #edf1f5;
  --ar-btn-disabled-border-color: #edf1f5;
}
.btn-outline-secondary {
  --ar-btn-color: #edf1f5;
  --ar-btn-border-color: #edf1f5;
  --ar-btn-hover-bg: #edf1f5;
  --ar-btn-hover-border-color: #edf1f5;
  --ar-btn-active-bg: #edf1f5;
  --ar-btn-active-border-color: #edf1f5;
  --ar-btn-disabled-color: #edf1f5;
  --ar-btn-disabled-border-color: #edf1f5;
}
.btn-warning {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #edcb50;
  --ar-btn-border-color: #edcb50;
  --ar-btn-hover-bg: #d4b237;
  --ar-btn-hover-border-color: #d4b237;
  --ar-btn-active-bg: #d4b237;
  --ar-btn-active-border-color: #d4b237;
  --ar-btn-disabled-bg: #edcb50;
  --ar-btn-disabled-border-color: #edcb50;
}
.btn-outline-warning {
  --ar-btn-color: #edcb50;
  --ar-btn-border-color: #edcb50;
  --ar-btn-hover-bg: #edcb50;
  --ar-btn-hover-border-color: #edcb50;
  --ar-btn-active-bg: #edcb50;
  --ar-btn-active-border-color: #edcb50;
  --ar-btn-disabled-color: #edcb50;
  --ar-btn-disabled-border-color: #edcb50;
}
.btn-info {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #3f7fca;
  --ar-btn-border-color: #3f7fca;
  --ar-btn-hover-bg: #2666b1;
  --ar-btn-hover-border-color: #2666b1;
  --ar-btn-active-bg: #2666b1;
  --ar-btn-active-border-color: #2666b1;
  --ar-btn-disabled-bg: #3f7fca;
  --ar-btn-disabled-border-color: #3f7fca;
}
.btn-outline-info {
  --ar-btn-color: #3f7fca;
  --ar-btn-border-color: #3f7fca;
  --ar-btn-hover-bg: #3f7fca;
  --ar-btn-hover-border-color: #3f7fca;
  --ar-btn-active-bg: #3f7fca;
  --ar-btn-active-border-color: #3f7fca;
  --ar-btn-disabled-color: #3f7fca;
  --ar-btn-disabled-border-color: #3f7fca;
}
.btn-success {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #3fca90;
  --ar-btn-border-color: #3fca90;
  --ar-btn-hover-bg: #26b177;
  --ar-btn-hover-border-color: #26b177;
  --ar-btn-active-bg: #26b177;
  --ar-btn-active-border-color: #26b177;
  --ar-btn-disabled-bg: #3fca90;
  --ar-btn-disabled-border-color: #3fca90;
}
.btn-outline-success {
  --ar-btn-color: #3fca90;
  --ar-btn-border-color: #3fca90;
  --ar-btn-hover-bg: #3fca90;
  --ar-btn-hover-border-color: #3fca90;
  --ar-btn-active-bg: #3fca90;
  --ar-btn-active-border-color: #3fca90;
  --ar-btn-disabled-color: #3fca90;
  --ar-btn-disabled-border-color: #3fca90;
}
.btn-danger {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #ed5050;
  --ar-btn-border-color: #ed5050;
  --ar-btn-hover-bg: #d43737;
  --ar-btn-hover-border-color: #d43737;
  --ar-btn-active-bg: #d43737;
  --ar-btn-active-border-color: #d43737;
  --ar-btn-disabled-bg: #ed5050;
  --ar-btn-disabled-border-color: #ed5050;
}
.btn-outline-danger {
  --ar-btn-color: #ed5050;
  --ar-btn-border-color: #ed5050;
  --ar-btn-hover-bg: #ed5050;
  --ar-btn-hover-border-color: #ed5050;
  --ar-btn-active-bg: #ed5050;
  --ar-btn-active-border-color: #ed5050;
  --ar-btn-disabled-color: #ed5050;
  --ar-btn-disabled-border-color: #ed5050;
}
.btn-light {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #ffffff;
  --ar-btn-border-color: #ffffff;
  --ar-btn-hover-bg: #e6e6e6;
  --ar-btn-hover-border-color: #e6e6e6;
  --ar-btn-active-bg: #e6e6e6;
  --ar-btn-active-border-color: #e6e6e6;
  --ar-btn-disabled-bg: #ffffff;
  --ar-btn-disabled-border-color: #ffffff;
}
.btn-outline-light {
  --ar-btn-color: #ffffff;
  --ar-btn-border-color: #ffffff;
  --ar-btn-hover-bg: #ffffff;
  --ar-btn-hover-border-color: #ffffff;
  --ar-btn-active-bg: #ffffff;
  --ar-btn-active-border-color: #ffffff;
  --ar-btn-disabled-color: #ffffff;
  --ar-btn-disabled-border-color: #ffffff;
}
.btn-dark {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #121519;
  --ar-btn-border-color: #121519;
  --ar-btn-hover-bg: #000000;
  --ar-btn-hover-border-color: #000000;
  --ar-btn-active-bg: #000000;
  --ar-btn-active-border-color: #000000;
  --ar-btn-disabled-bg: #121519;
  --ar-btn-disabled-border-color: #121519;
}
.btn-outline-dark {
  --ar-btn-color: #121519;
  --ar-btn-border-color: #121519;
  --ar-btn-hover-bg: #121519;
  --ar-btn-hover-border-color: #121519;
  --ar-btn-active-bg: #121519;
  --ar-btn-active-border-color: #121519;
  --ar-btn-disabled-color: #121519;
  --ar-btn-disabled-border-color: #121519;
}
.accordion-button:not(.collapsed)::after {
  --ar-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23f32d09'%3e%3cpath%20d='M.5%206.3c.6-.6%201.6-.6%202.3%200l9.3%209.3%209.3-9.3c.6-.6%201.6-.6%202.3%200%20.6.6.6%201.6%200%202.3L13.3%2018.8c-.6.6-1.6.6-2.3%200L.8%208.5c-.9-.8-.9-1.6-.3-2.2z'/%3e%3c/svg%3e");
}
.mosaic-grid-row:not(.bg-primary){
    .tile-heading {
        color:var(--ar-primary);
    }
}

.navbar-toggler-icon, .navbar-toggler-icon::after, .navbar-toggler-icon::before {
    background-color: var(--ar-primary) !important;
}

.card-text,
p {
    color: var(--ar-heading-color);
    font-weight:300;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.btn {
    font-family: Anton, sans serif;
    font-weight: 500;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-weight: 500;
}

.display-1 {
    font-size:7rem; 
}

.btn-lg>[class*=" ai-"], .btn-lg>[class^=ai-] {
    font-size: 1.75em;
}

.read-more-btn {
    background-color: #fff;
    color: #000;
    font-size: 1.5rem;
}

div.steps {
    --ar-steps-connect-width:3px;
    --ar-steps-number-size:2.5rem;
    --ar-steps-number-inner-size:1.75rem;
}

div.hotspots{
  --ar-hotspots-size:3rem !important;  
  .hotspot {
    border-radius:0;
    text-decoration:none;
  }
  .hotspot-inner {
    border: 1px solid var(--ar-primary);
    border-radius:0;    
  }

}

.card.card-has-image {
    .card-body {
        padding:2.5rem 0;
    }
}
 
.card-flip {
    height:350px !important;
} 

div.card-flip-front {
    text-align:center !important;
    background-color:rgba(var(--ar-primary-rgb)) !important;

    h2 {
        background-color:transparent !important;
        color: var(--ar-light) !important;
        font-size:4rem !important;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }
    .me-auto {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: auto !important;

    }
}

div.card-flip-back {
    border: 4px solid rgba(var(--ar-primary-rgb)) !important;
    color: var(--ar-heading-color) !important;
}

div.card-flip-front:before,
div.card-flip-back:before  {
    content: '';
    height:4px;
    width:90%;
    border: 4px solid #fff !important;
    border-left: 0;
	border-right: 0;
	border-top: 0;
	bottom:-8px;
	left:50%;
	transform: rotate(180deg);
	position: absolute;
}


.offcanvas-backdrop.show {
    opacity: 0;
}

.offcanvas-header .btn-close {
    opacity: 1;
    background-size:42px;
}
.bg-primary {
    h1 {
        color: #fff !important;
    }
}

.step-number::before {
    background-color: #fff;
    opacity:0.5 !important;
}

.navbar-toggler-icon, .navbar-toggler-icon::after, .navbar-toggler-icon::before {
    position: absolute;
    height: .275rem;
}

@media (width <= 800px) {
    
  img.header-logo {
      height: 60px;
  }
  .hotspot{
     --ar-hotspots-size:2rem !important; 
  }
  .hotspots [class^=ai-], .hotspots [class*=" ai-"] 
  {
    font-size: 0.75em;
  }
  .display-1 {
    font-size: 4rem !important; 
  }
  .card-flip {
    height:400px !important;
  } 
  div.card-flip-front {
       h2 {
           font-size: 3rem !important;
       }
   }
}

body.template-folder_contents,
body[class*="controlpanel"],
body.template-sharing,
body.template-historyview {
  --ar-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ar-heading-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#edit-zone { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }