:root {
	--color-custom-grey: #423e3b;
	--color-custom-orange: #fea82f;
	--color-custom-yellow: #fffecb;
	--color-custom-purple: #5448c8;
}

.text-custom-grey	{ color: var(--color-custom-grey); }
.text-custom-orange	{ color: var(--color-custom-orange); }
.text-custom-yellow	{ color: var(--color-custom-yellow); }
.text-custom-purple	{ color: var(--color-custom-purple); }

.bg-custom-grey		{ background-color: var(--color-custom-grey); }
.bg-custom-orange	{ background-color: var(--color-custom-orange); }
.bg-custom-yellow	{ background-color: var(--color-custom-yellow); }
.bg-custom-purple	{ background-color: var(--color-custom-purple); }

.btn-custom-grey {
  --bs-btn-bg: var(--color-custom-grey);
  --bs-btn-border-color: var(--color-custom-grey);
  --bs-btn-color: #fff;

  --bs-btn-hover-bg: color-mix(in oklch, var(--color-custom-grey) 85%, black);
  --bs-btn-hover-border-color: color-mix(in oklch, var(--color-custom-grey) 85%, black);
  --bs-btn-hover-color: #fff;

  --bs-btn-active-bg: color-mix(in oklch, var(--color-custom-grey) 70%, black);
  --bs-btn-active-border-color: color-mix(in oklch, var(--color-custom-grey) 70%, black);
  --bs-btn-active-color: #fff;
}
.btn-custom-orange {
  --bs-btn-bg: var(--color-custom-orange);
  --bs-btn-border-color: var(--color-custom-orange);
  --bs-btn-color: #fff;

  --bs-btn-hover-bg: color-mix(in oklch, var(--color-custom-orange) 85%, black);
  --bs-btn-hover-border-color: color-mix(in oklch, var(--color-custom-orange) 85%, black);
  --bs-btn-hover-color: #fff;

  --bs-btn-active-bg: color-mix(in oklch, var(--color-custom-orange) 70%, black);
  --bs-btn-active-border-color: color-mix(in oklch, var(--color-custom-orange) 70%, black);
  --bs-btn-active-color: #fff;
}
.btn-custom-yellow {
  --bs-btn-bg: var(--color-custom-yellow);
  --bs-btn-border-color: var(--color-custom-yellow);
  --bs-btn-color: var(--color-custom-purple);

  --bs-btn-hover-bg: color-mix(in oklch, var(--color-custom-yellow) 85%, black);
  --bs-btn-hover-border-color: color-mix(in oklch, var(--color-custom-yellow) 85%, black);
  --bs-btn-hover-color: var(--color-custom-purple);

  --bs-btn-active-bg: color-mix(in oklch, var(--color-custom-yellow) 70%, black);
  --bs-btn-active-border-color: color-mix(in oklch, var(--color-custom-yellow) 02%, black);
  --bs-btn-active-color: var(--color-custom-purple);
}
.btn-custom-purple {
  --bs-btn-bg: var(--color-custom-purple);
  --bs-btn-border-color: var(--color-custom-purple);
  --bs-btn-color: #fff;

  --bs-btn-hover-bg: color-mix(in oklch, var(--color-custom-purple) 85%, black);
  --bs-btn-hover-border-color: color-mix(in oklch, var(--color-custom-purple) 85%, black);
  --bs-btn-hover-color: #fff;

  --bs-btn-active-bg: color-mix(in oklch, var(--color-custom-purple) 70%, black);
  --bs-btn-active-border-color: color-mix(in oklch, var(--color-custom-purple) 70%, black);
  --bs-btn-active-color: #fff;
}

.popover-body { padding: 0 !important; border-radius: var(--bs-popover-border-radius); overflow: hidden; box-shadow: 0px -10px 30px rgba(0,0,0,.25); }


/********************************************************************************************************/

.appearOnScroll { transition-delay: 300ms; }
.appearOnScroll { opacity: 0; transition: all .4s; }
.appearOnScroll.appearOnScroll-visible { opacity: 1; }

.appearOnScroll.aosTranslateShow { transform: scale(.9) translateY(2rem); }
.appearOnScroll.aosTranslateShow.appearOnScroll-visible { transform: scale(1) translateY(0); }

.appearOnScroll.aosTranslateHide { transform: scale(.9) translateY(0rem); }
.appearOnScroll.aosTranslateHide.appearOnScroll-visible { transform: scale(1) translateY(-2rem); }

/********************************************************************************************************/

.bg-custom-texture-yellow	{ background-image: url('/img/background-texture-yellow.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.bg-custom-texture-purple	{ background-image: url('/img/background-texture-purple.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }

body { font-family: "Bricolage Grotesque", sans-serif; color: var(--color-custom-grey); }

.magicContainer { width: 100%; height: 100%; position: relative; }

#siteContainer, #appContainer { min-height: 100%; }
@media (width >= 1200px) { #siteContainer { height: 100%; } }

.fs-1-responsive { font-size: calc(3.1vw + 1rem); }
.fs-2-responsive { font-size: calc(2vw + 1rem); }

.mainBtn::before { content: attr(data-year); z-index: -1; display: block; font-weight: bold; color: var(--color-custom-orange); top: 50%; left: 50%; font-size: 14vw; position: absolute; transform: translate(-50%, -50%); line-height: 1; }
@media (width < 992px) { .mainBtn::before { display: none; } }

.dateCtr { margin: calc(-2 * var(--bs-border-width)) 0 0 calc(-2 * var(--bs-border-width)); border-color: var(--color-custom-grey) !important; }
.dateRest { background: rgba(66, 62, 59, .6); color: #fff; }
.dateOff { background: var(--color-custom-grey); color: #fff; }
.dateOptim { background: var(--color-custom-orange); color: var(--color-custom-grey); }
.dateCountDay { cursor: pointer; }
.dateCountDay:hover { transform: scale(1.1); z-index: 2; }
.dateCtr .month { font-size: 60%; margin: 0px 3px; }

.dateCountDay .holidays { position: absolute; left: 0; width: 100%; height: 3px; }
.dateCountDay .holidays[data-zone='Zone A'] { top: 0px; background: #35b16b; }
.dateCountDay .holidays[data-zone='Zone B'] { top: 3px; background: var(--color-custom-purple); }
.dateCountDay .holidays[data-zone='Zone C'] { top: 6px; background: #ffca00; }

.optimWeek { cursor: pointer; transform: translate(-70%,-50%) !important; height: 70%; }
@media (width >= 992px) { .week .optimWeek { opacity: 0 !important; } .week:hover .optimWeek { opacity: 1 !important; } }