<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
// when the DOM is ready
$(function() {
  /*** START SCRIPT CONFIG ***/

  // Replace with value for your form. ie. "#your-form-id" or ".your-form-class"
  var FORM_SELECTOR = ".your-class";

  // Do you want to hide the success message after the form is submitted?
  var HIDE_SUCCESS_MESSAGE = false;
  
  // Do you want the success message to show above the form?
  var SUCCESS_MESSAGE_ABOVE_FORM = true;

  /*** END SCRIPT CONFIG ***/

  // define the resetCustomElement function
  var resetCustomElement = function(customElement) {
    // get the input element
    var inputElement = customElement.nextSibling;
    // if it's checked
    if (inputElement.checked) {
      // add the class "w--redirected-checked"
      customElement.classList.add("w--redirected-checked");
    } else {  // if not checked
      // remove the class "w--redirected-checked"
      customElement.classList.remove("w--redirected-checked");
    }
  };

  // define the resetForm function
  var resetForm = function(form, successDiv) {
    // Reset the inputs in the form
    form.reset();

    // Reset custom checkboxes
    document.querySelectorAll(".w-checkbox-input--inputType-custom").forEach(resetCustomElement);

    // Reset custom radio buttons
    document.querySelectorAll(".w-form-formradioinput--inputType-custom").forEach(resetCustomElement);

    // Show the form
    form.style.display = "block";

    // Hide Success Message
    if (HIDE_SUCCESS_MESSAGE) {
      successDiv.style.display = "none";
    }
  };

  // get the form
  var form = document.querySelector(FORM_SELECTOR);
  // get the successdiv
  var successDiv = form.nextSibling;
  
  // If we are not hiding the success message AND we want the message above the form
  if (!HIDE_SUCCESS_MESSAGE && SUCCESS_MESSAGE_ABOVE_FORM) {
    // Move the form last so that the success message appears before it
    form.parentElement.appendChild(form);
  }

  // Create an observer to run our resetForm function when Webflow hides our form after submission
  var observer = new MutationObserver(function(mutations) {
    // if the form's display is set to none
    if (form.style.display === "none") {
      // call the resetForm function
      resetForm(form, successDiv);
    }
  });

  // Listen for when the style attribute of our form changes
  observer.observe(form, { attributes: true, attributeFilter: ["style"] });
});
</script>

<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
/* Hide Accordion Body */
.acc-body {
	display: none;
}
</style>

<!-- Simple JQuery Accordion --> 
<script>
(function ($) {
	'use strict'; 
  	// Targeting the head/button of the accordion item to run a function when it's clicked
		$('.acc-head').on("click", function () {
    	// Looking for the next sibling within this accordion item, which is the body (for content) of the accordion to show and slide open  
			$(this).next().slideToggle(300); // 300 is the milliseconds on open
      // Finds any body of any accordion that is NOT the one currently being clicked on to hide and slide closed
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>

<!-- COUPON COPY TO CLIPBOARD --> 
<script>
// change SAVE20NOW to whatever coupon or text you want to be copied
$('.coupon-field').val('SAVE20NOW')
                  .prop('readOnly', true)
                  .css( 'cursor', 'text' );

// on .copy-btn click
$('.copy-btn').click(function(){
  // copy the .coupon-field's value
  copyToClipboard($('.coupon-field').val());
  
  // save the .copy-btn's original text
  const origText = $(this).text();
  // save the .copy-btn's original font color
  const origColor = $(this).css('color');
  
  // change the .copy-btn's text
  $(this).text('Copied! 🤙');
  // change the .copy-btn's font color
  $(this).css('color', '#1fbd41');
  
  setTimeout(()=>{ // after a 2 sec setTimeout
    $(this).text(origText); // reset text back to original
    $(this).css('color', origColor); // reset font color back to original
  }, 2000);
});

// define copyToClipboard function
function copyToClipboard(str){
  // Create new element
  const el = document.createElement('textarea');
  // Set value (string to be copied)
  el.value = str;
  // Set non-editable to avoid focus and move outside of view
  el.setAttribute('readonly', '');
  el.style = {position: 'absolute', left: '-9999px'};
  document.body.appendChild(el);
  // Select text inside element
  el.select();
  // Copy text to clipboard
  document.execCommand('copy');
  // Remove temporary element
  document.body.removeChild(el);
}
</script>

<!-- Custom Select Field Styles --> 
<style>
  /************ ADD YOUR VALUES BELOW ************/
  :root {
    /* ----------- Colors ----------- */
		--list-bg-color: white;
    --list-text-color: inherit; /* Use "inherit" to take on parent text color */
    --select-field-arrow-color: black; /* This is the select field arrow color */
    --border-color-active: black; /* Active State */
    --border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
    --list-item-bg-color: #ededed; /* Select Field Hover/Focus State */

    /* ----------- Spacing ----------- */
    --select-field-padding-left: 12px; /* Match the padding values for your form fields */
    --select-field-padding-right: 12px; /* Match the padding values for your form fields */
    --list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
    --list-max-height: 150px; /* You can set this to "Auto" as well */
    --list-item-padding-left: 18px; 
    --list-item-padding-right: 18px;
    --list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
    --list-item-line-height: 40px; /* This is the height of each list item in the dropdown */

             /* ^^^  Make sure both "line-height" and "min-height" are the same! ^^^  */
  }
  /************ END OF CUSTOM VALUES ************/



  .nice-select {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    clear: both;
    padding-left: var(--select-field-padding-left);
    padding-right: var(--select-field-padding-right);
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap; 
  }


  .nice-select:hover {
    border-color: var(--border-color-hover); 
  }


  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: var(--border-color-active);
  }


  .nice-select:after {
    border-bottom: 2px solid var(--select-field-arrow-color);
    border-right: 2px solid var(--select-field-arrow-color);
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; 
  }


  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); 
  }


  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); 
  }


  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; 
  }


  .nice-select.disabled:after {
    border-color: #cccccc; 
  }


  .nice-select.wide {
    width: 100%; 
  }


  .nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; 
  }


  .nice-select.right {
    float: right; 
  }


  .nice-select.right .list {
    left: auto;
    right: 0; 
  }


  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; 
  }


  .nice-select.small:after {
    height: 4px;
    width: 4px; 
  }


  .nice-select.small .option {
    line-height: 34px;
    min-height: 34px; 
  }


  .nice-select .list {
    background-color: var(--list-bg-color);
    color: var(--list-text-color);
    border-radius: 5px;
    box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
    border-color: 3px solid #ededed;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: var(--list-padding-top-bottom) 0px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: var(--list-max-height);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; 
  }


  .nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important; 
  }


  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: var(--list-item-line-height);
    list-style: none;
    min-height: var(--list-item-min-height);
    outline: none;
    padding-left: var(--list-item-padding-left);
    padding-right: var(--list-item-padding-right);
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  .nice-select .option:first-child {
    display: none;
  }

  span.current {
    color: var(--list-text-color);
  }

  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: var(--list-item-bg-color);
  }

  .nice-select .option.selected {
    font-weight: bold; 
  }

  .nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default; 
  }

  .no-csspointerevents .nice-select .list {
  display: none; 
  }

  .no-csspointerevents .nice-select.open .list {
  display: block; 
  }
</style>

<!-- CUSTOM SELECT FIELD --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

<script>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>

<!-- Browser Back Button -->
<script>
$( document ).ready(function() {
	$( ".back-button__class-name" ).click(function() { // Create any class name between the " ". Then add this class name to any back button on that page.  
		window.history.back();
	});
});
</script>

<!-- Dynamic Copyright Year -->
<script>
// For using a class to select multiple elements
const yearElems = document.querySelectorAll(".year")

yearElems.forEach(function(yearElem) {
  yearElem.innerText = new Date().getFullYear()
})
</script>

<!-- Dynamic Copyright Year -->
<script>
// For targeting a single element using ID
 function copyrightYear() {
   const yearElem = document.getElementById("year")
   yearElem.innerText = new Date().getFullYear()
 }
copyrightYear()
</script>

<!-- DYNAMIC WEEKDAY --> 
<script>
// for each .weekday element
document.querySelectorAll('.weekday').forEach(weekday => {
  // get today's day
  const today = new Intl.DateTimeFormat('en', {weekday:'long'}).format(new Date());
  // set it as the current text
  weekday.textContent = today;
});
</script>

<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED --> 
<script>
  $(function(){

    // Only show submit button on proper email
    ;( function( $, window, document, undefined ) {
        'use strict';
        var form        = '.email-form',
            className   = 'email-active',
            submit      = 'input[type="submit"]',
            email       = 'input[type="email"]';
        $( form ).each( function(){
            var $form   = $( this ),
                $email  = $form.find( email ),
                $submit  = $form.find( submit ),
                val     = '';
            $email.on( 'keyup.addClassWhenEmail', function(){
                val = $email.val();
                $submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );    
            });
        });
    })( jQuery, window, document );
  })
</script>

<!-- DISABLE SUBMIT WITH ENTER KEY --> 
<script>
$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});
</script>

<!-- MATH CAPTCHA --> 
<script>
// Contact Form Captcha
(function($) {
		"use strict";

		$.fn.captcha = function(param) {
				// DEFAULT VARIABLES
				var params = $.extend({
						idCaptchaText: 'captchaText',   // The ID for the captcha text which is the label as the math question. Default is 'captchaText'.
						idCaptchaInput: 'captchaField', // The ID for the captcha input. Default is 'captchaInput'.
						class: ''                       // Class name for the submit button toggle. Default is ''.
				}, param);

				// Find and disable the submit button
				var submit = $(this).find('input[type=submit]');
				submit.attr('disabled', 'disabled');

				// Insert captcha text and input before the submit button with the given ID's
				$('<label id="' + params.idCaptchaText + '"></label>');
				$('<input id="' + params.idCaptchaInput + '" aria-label="Captcha Input" type="text" required>');   

				// Select text and input elements to fill
				var label = this.find('#' + params.idCaptchaText);
				var input = this.find('#' + params.idCaptchaInput);

				// Generate random numbers and the sum of them
				var rndmNr1 = Math.floor(Math.random() * 10),
						rndmNr2 = Math.floor(Math.random() * 10),
						totalNr = rndmNr1 + rndmNr2;

				// Print the numbers to screen
				//$(label).text(rndmNr1 + ' + ' + rndmNr2 + ' =');
				$(input).attr("placeholder", rndmNr1 + ' + ' + rndmNr2 + ' =');

				// Check the input value, enable it if the sum is correct
				$(input).keyup(function () {
						if ($(this).val() == totalNr)
								submit.removeAttr('disabled').addClass(params.class);
						else
								submit.attr('disabled', 'disabled').removeClass(params.class);
				});

				// Don't breake jQuery chain!
				return this;
		}
})(jQuery);


//Inst Plugin
$(document).ready(function () {
	$('.form-class-name').captcha();
});
</script>

<!-- Add the COOKIE CONSENT css -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />

<!-- Add the COOKIE CONSENT dependency script file --> 
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>

<script>
// initialize cookieconsent & define options
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#ebe5ca",       // Background color for popup card
      "text": "#000000"              // Main text color for message
    },
    "button": {
      "background": "#a09e91",       // Background color for button (use "transparent" if you use the "wire" theme below.     "
      "text": "#fcf8f2",             // Button text color
      //border: "#a09e91"            // Remove the first "//" if you plan on using the wire theme below
    }
  },
  "theme": "block",               // Theme options: "edgeless", "block", "classic", "wire"  
  "position": "bottom-right",        // Positions options: "bottom-right", "bottom-left", "top", "bottom" 
  "static": false,                  // Set to "true" only if you choose "top" for the position which will push your content down instead of covering it.
  "content": {
    // Main message text on the cookie popup
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    
    // Button text to accept
    "dismiss": "Got it!",
    
    // Button Link to your cookie policy or remove this line if you want it to go to: https://www.cookiesandyou.com/ (info site about cookies for your visitors)
    "href": "https://yoursite.com/cookie-policy"        
  }
});
</script>

<!-- OPEN SPECIFIC TABS -->
<script>
// get the webflow array or define a new one if none exists
var Webflow = Webflow || [];
// push the click tabs handler function into the webflow array
Webflow.push(function () {
  // get the respective tab name using the getParam function and store it in a tabName variable
  var tabName = getParam('tab');
  // terminate the function if no tab name was found
  if (!tabName) return;

  // click on the tab
  $('.' + tabName).triggerHandler('click');

  // define the getParam function
  function getParam(name) {
    // replace any '[' in the tab name with '\['
    // & also replace any ']' in the tab name with '\]'
    // this escapes the symbols '[' & ']' so they can be used in regex
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    // define a regex to search for the tab name
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      // search for the tab name in the query string part of the page's url
      results = regex.exec(location.search);
    // return the tab name OR "" if no tab name found
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>

<!-- CUSTOM QUANTITY BUTTONS -->
<style>
/* remove form styles & set margin at 0 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>

<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
const quantityGroupClass = "CLASS-NAME-HERE"
const quantityIncrementButtonClass = "CLASS-NAME-HERE"
const quantityDecrementButtonClass = "CLASS-NAME-HERE"
const quantityNumberFieldClass = "CLASS-NAME-HERE"

// attach click event to document that then delegates to the '+' increase button
// this ensures the click event works on dynamically added '+' buttons
$(document).on('click', `.${quantityIncrementButtonClass}`, function(){
  // get the input field that displays the number of items
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);
  // get its current value 
  var val = parseInt($input.val(), 10);
  // add one to the current value
  $input.val(val + 1);
  // dispatch the 'change' event on the input field to update the cart's total items value
  $input[0].dispatchEvent(new Event('change'));
});

// attach click event to document that then delegates to the '-' decrease button
// this ensures the click event works on dynamically added '-' buttons
$(document).on('click', `.${quantityDecrementButtonClass}`, function(){
  // get the input field that displays the number of items
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);
  // get its current value 
  var val = parseInt($input.val(), 10);
  // minus one from the current value while it's more than one
  // the value never goes below 1
  $input.val(Math.max(val - 1, 1));
  // dispatch the 'change' event on the input field to update the cart's total items value
  $input[0].dispatchEvent(new Event('change'));
});
</script>

<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
const quantityGroupClass = "CLASS-NAME-HERE"
const quantityIncrementButtonClass = "CLASS-NAME-HERE"
const quantityDecrementButtonClass = "CLASS-NAME-HERE"
const quantityNumberFieldClass = "CLASS-NAME-HERE"

// Increment
$(document).on('click', `.${quantityIncrementButtonClass}`, function(){
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);    
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
  $input[0].dispatchEvent(new Event('change'));
});

// Decrement
$(document).on('click', `.${quantityDecrementButtonClass}`, function(){
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);    
  var val = parseInt($input.val(), 10);
  $input.val(Math.max(val - 1, 1));
  $input[0].dispatchEvent(new Event('change'));
});
</script>

<!-- Javascript Accordion Styles -->
<style>
.js-accordion-body {
	display: none;
}
</style>

<!-- Javascript Accordion -->
<script>
// Accordion Settings 
const accSettings = {
  speed: 300, // Animation speed
  oneOpen: true, // Close all other accordion items if true
  offsetAnchor: true, // Activate scroll to top for active item
  offsetFromTop: 180, // In pixels – Scroll to top at what distance
  scrollTopDelay: 400, // In Milliseconds – Delay before scroll to top 
  
  classes: {
  	accordion: 'js-accordion',
    header: 'js-accordion-header',
    item: 'js-accordion-item',
    body: 'js-accordion-body',
    icon: 'js-accordion-icon',
    active: 'active',
  }
};


const prefix = accSettings.classes

const accordion = (function(){
  const accordionElem = $(`.${prefix.accordion}`)
  const accordionHeader = accordionElem.find(`.${prefix.header}`)
  const accordionItem = $(`.${prefix.item}`)
  const accordionBody = $(`.${prefix.body}`)
  const accordionIcon = $(`.${prefix.icon}`)
  const activeClass = prefix.active
    
  return {
    // pass configurable object literal
    init: function(settings) {
      accordionHeader.on('click', function() {
        accordion.toggle($(this));
        if(accSettings.offsetAnchor) {
        	setTimeout(() => { 
        		$('html').animate({scrollTop: $(this).offset().top-accSettings.offsetFromTop}, accSettings.speed);
    			}, accSettings.scrollTopDelay);
        }
      });
      
      $.extend(accSettings, settings); 
      
      // ensure only one accordion is active if oneOpen is true
      if(settings.oneOpen && $(`.${prefix.item}.${activeClass}`).length > 1) {
        $(`.${prefix.item}.${activeClass}:not(:first)`).removeClass(activeClass).find(`.${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      // reveal the active accordion bodies
      $(`.${prefix.item}.${activeClass}`).find(`> .${prefix.body}`).show();
      
    },
    
    toggle: function($this) {
      if(accSettings.oneOpen && $this[0] != $this.closest(accordionElem).find(`> .${prefix.item}.${activeClass} > .${prefix.header}`)[0]) {
        $this.closest(accordionElem).find(`> .${prefix.item}`).removeClass(activeClass).find(accordionBody).slideUp(accSettings.speed);
        $this.closest(accordionElem).find(`> .${prefix.item}`).find(`> .${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      
      // show/hide the clicked accordion item
      $this.closest(accordionItem).toggleClass(`${activeClass}`).find(`> .${prefix.header} > .${prefix.icon}`).toggleClass(activeClass);
      $this.next().stop().slideToggle(accSettings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init(accSettings);
});
</script>

<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>

<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>

<!-- FORM STYLES --> 
<style>
.input-label {
	pointer-events: none;
}

.input::placeholder {
	opacity: 0;
  transition: opacity .2s ease-out;
}

.input:focus::placeholder {
	opacity: 1;
}
</style>

<!-- FLOATING FORM LABELS -->
<script defer src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/floating-form-labels@0.1.0/index.min.js"></script>
<script>
window.CodeCrumbs.floatLabels({
  inputSelector: ".input",
  labelActiveClass: "float",
})
</script>

<!-- FIND, STYLE AND REPLACE MATCHING STRINGS --> 
<script>
const targetStrings = [
  {
  	selector: 'h2',
    targetString: 'String 1',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
  {
  	selector: 'p',
    targetString: 'String 2',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
]

function wrapAndReplaceMatches(selector, newClass, wordTarget, replacement) {
  const pattern = new RegExp(`\\b(${wordTarget})\\b`, 'gi');
  const hasClassAttr = newClass ? `class=${newClass}` : ''
  const wrapAndReplace = !replacement
  ? `<span ${hasClassAttr}>$1</span>`
  : `<span ${hasClassAttr}>${replacement}</span>`;
  Array.from(document.querySelectorAll(selector)).forEach((element) => {
		element.innerHTML = element.innerHTML.replace(pattern, wrapAndReplace);
	});
}

document.addEventListener('DOMContentLoaded', () => {
  targetStrings.forEach(({
  	selector,
    targetString,
    replacementString,
    appendedClassName
  }) => {
    wrapAndReplaceMatches(selector, appendedClassName, targetString, replacementString)
  })
});
</script>

<!-- SWAP VALUES ON CLICK --> 
<script>
function setupSwitcher({
  /* Click Trigger Class */
  swapTrigger = "switcher",

  /* Essentials */
  swapText = "swap-text",
  swapDisplay = "swap-display",
  swapClass = "swap-class",
  swapUrl = "swap-url",

  /* Toggle and Add Attributes */
  swapToggleAttribute = "swap-toggle-attribute",
  swapAddAttribute = "swap-add-attribute",
  swapAddAttributeValue = "swap-add-attribute-value",

  /* Replace Attribute Value */
  swapAttributeTarget = "swap-attribute-target",
  swapTargetValue = "swap-target-value"

} = {}) {
  const swapAll = () => {
    // SWAP TEXT
    document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapText);
      const currentValue = swapDomElement.innerText;

      swapDomElement.innerText = nextValue;
      swapDomElement.setAttribute(swapText, currentValue);
    });

    // SWAP DISPLAY
    document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapDisplay);
      const currentValue = swapDomElement.style.display;

      swapDomElement.style.display = nextValue;
      swapDomElement.setAttribute(swapDisplay, currentValue);
    });

    // SWAP CLASS
    document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapClass);
      swapDomElement.classList.toggle(nextValue);
    });

    // SWAP URL
    document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapUrl);
      const currentValue = swapDomElement.href;

      swapDomElement.href = nextValue;
      swapDomElement.setAttribute(swapUrl, currentValue);
    });

    // TOGGLE ATTRIBUTE
    document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
      const toggleAttribute = swapDomElement.getAttribute(
        swapToggleAttribute
      );
      swapDomElement.toggleAttribute(toggleAttribute);
    });

    // ADD ATTRIBUTE
    document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
      const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
      const newAttributeValue = swapDomElement.getAttribute(
        swapAddAttributeValue
      );

      if (swapDomElement.hasAttribute(newAttribute)) {
        swapDomElement.removeAttribute(newAttribute);
      } else {
        swapDomElement.setAttribute(newAttribute, newAttributeValue);
      }
    });

    // REPLACE ATTRIBUTE VALUE
    document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
      const attributeTarget = swapDomElement.getAttribute(
        swapAttributeTarget
      );
      let attributeValue = swapDomElement.getAttribute(attributeTarget);
      let newValue = swapDomElement.getAttribute(swapTargetValue);

      swapDomElement.setAttribute(attributeTarget, newValue);
      swapDomElement.setAttribute(swapTargetValue, attributeValue);
    });
  };

  document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
    switcherDomElement.addEventListener("click", swapAll);
  });
}

setupSwitcher();
</script>

<!-- CUSTOM QUANTITY BUTTONS -->
<style>
/* remove form styles & set margin at 0 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>

<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
const quantityGroupClass = "CLASS-NAME-HERE"
const quantityIncrementButtonClass = "CLASS-NAME-HERE"
const quantityDecrementButtonClass = "CLASS-NAME-HERE"
const quantityNumberFieldClass = "CLASS-NAME-HERE"

// attach click event to document that then delegates to the '+' increase button
// this ensures the click event works on dynamically added '+' buttons
$(document).on('click', `.${quantityIncrementButtonClass}`, function(){
  // get the input field that displays the number of items
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);
  // get its current value 
  var val = parseInt($input.val(), 10);
  // add one to the current value
  $input.val(val + 1);
  // dispatch the 'change' event on the input field to update the cart's total items value
  $input[0].dispatchEvent(new Event('change'));
});

// attach click event to document that then delegates to the '-' decrease button
// this ensures the click event works on dynamically added '-' buttons
$(document).on('click', `.${quantityDecrementButtonClass}`, function(){
  // get the input field that displays the number of items
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);
  // get its current value 
  var val = parseInt($input.val(), 10);
  // minus one from the current value while it's more than one
  // the value never goes below 1
  $input.val(Math.max(val - 1, 1));
  // dispatch the 'change' event on the input field to update the cart's total items value
  $input[0].dispatchEvent(new Event('change'));
});
</script>

<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
const quantityGroupClass = "CLASS-NAME-HERE"
const quantityIncrementButtonClass = "CLASS-NAME-HERE"
const quantityDecrementButtonClass = "CLASS-NAME-HERE"
const quantityNumberFieldClass = "CLASS-NAME-HERE"

// Increment
$(document).on('click', `.${quantityIncrementButtonClass}`, function(){
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);    
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
  $input[0].dispatchEvent(new Event('change'));
});

// Decrement
$(document).on('click', `.${quantityDecrementButtonClass}`, function(){
  var $input = $(this).closest(`.${quantityGroupClass}`).find(`.${quantityNumberFieldClass}`);    
  var val = parseInt($input.val(), 10);
  $input.val(Math.max(val - 1, 1));
  $input[0].dispatchEvent(new Event('change'));
});
</script>

<!--Removes iOS form styling--> 
<style>
/* Set css appearance to none & border radius to 0 */
input, textarea {
  -webkit-appearance: none; /* webkit browsers */
  -moz-appearance: none; /* firefox browser */
  appearance: none;
  border-radius: 0;  
}
</style>

<!-- Ignore Cursor Events --> 
<style>
/* disable any cursor events e.g. click & hover */
.your-class-name {
	pointer-events: none;
}
</style>

<!-- Input Field Placeholder Animation --> 
<style>
  ::placeholder {
  	transition: all 350ms ease;
  }
  
  .your-input-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
  
  .your-textarea-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
</style>

<!-- Custom Select Field Styles --> 
<style>
  /************ ADD YOUR VALUES BELOW ************/
  :root {
    /* ----------- Colors ----------- */
		--list-bg-color: white;
    --list-text-color: inherit; /* Use "inherit" to take on parent text color */
    --select-field-arrow-color: black; /* This is the select field arrow color */
    --border-color-active: black; /* Active State */
    --border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
    --list-item-bg-color: #ededed; /* Select Field Hover/Focus State */

    /* ----------- Spacing ----------- */
    --select-field-padding-left: 12px; /* Match the padding values for your form fields */
    --select-field-padding-right: 12px; /* Match the padding values for your form fields */
    --list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
    --list-max-height: 150px; /* You can set this to "Auto" as well */
    --list-item-padding-left: 18px; 
    --list-item-padding-right: 18px;
    --list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
    --list-item-line-height: 40px; /* This is the height of each list item in the dropdown */

             /* ^^^  Make sure both "line-height" and "min-height" are the same! ^^^  */
  }
  /************ END OF CUSTOM VALUES ************/



  .nice-select {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    clear: both;
    padding-left: var(--select-field-padding-left);
    padding-right: var(--select-field-padding-right);
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap; 
  }


  .nice-select:hover {
    border-color: var(--border-color-hover); 
  }


  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: var(--border-color-active);
  }


  .nice-select:after {
    border-bottom: 2px solid var(--select-field-arrow-color);
    border-right: 2px solid var(--select-field-arrow-color);
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; 
  }


  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); 
  }


  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); 
  }


  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; 
  }


  .nice-select.disabled:after {
    border-color: #cccccc; 
  }


  .nice-select.wide {
    width: 100%; 
  }


  .nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; 
  }


  .nice-select.right {
    float: right; 
  }


  .nice-select.right .list {
    left: auto;
    right: 0; 
  }


  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; 
  }


  .nice-select.small:after {
    height: 4px;
    width: 4px; 
  }


  .nice-select.small .option {
    line-height: 34px;
    min-height: 34px; 
  }


  .nice-select .list {
    background-color: var(--list-bg-color);
    color: var(--list-text-color);
    border-radius: 5px;
    box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
    border-color: 3px solid #ededed;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: var(--list-padding-top-bottom) 0px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: var(--list-max-height);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; 
  }


  .nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important; 
  }


  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: var(--list-item-line-height);
    list-style: none;
    min-height: var(--list-item-min-height);
    outline: none;
    padding-left: var(--list-item-padding-left);
    padding-right: var(--list-item-padding-right);
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  .nice-select .option:first-child {
    display: none;
  }

  span.current {
    color: var(--list-text-color);
  }

  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: var(--list-item-bg-color);
  }

  .nice-select .option.selected {
    font-weight: bold; 
  }

  .nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default; 
  }

  .no-csspointerevents .nice-select .list {
  display: none; 
  }

  .no-csspointerevents .nice-select.open .list {
  display: block; 
  }
</style>

<!-- CUSTOM SELECT FIELD --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

<script>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>

<!-- Dynamic Copyright Year -->
<script>
// For using a class to select multiple elements
const yearElems = document.querySelectorAll(".year")

yearElems.forEach(function(yearElem) {
  yearElem.innerText = new Date().getFullYear()
})
</script>

<!-- Dynamic Copyright Year -->
<script>
// For targeting a single element using ID
 function copyrightYear() {
   const yearElem = document.getElementById("year")
   yearElem.innerText = new Date().getFullYear()
 }
copyrightYear()
</script>

<!-- DYNAMIC WEEKDAY --> 
<script>
// for each .weekday element
document.querySelectorAll('.weekday').forEach(weekday => {
  // get today's day
  const today = new Intl.DateTimeFormat('en', {weekday:'long'}).format(new Date());
  // set it as the current text
  weekday.textContent = today;
});
</script>

<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED --> 
<script>
  $(function(){

    // Only show submit button on proper email
    ;( function( $, window, document, undefined ) {
        'use strict';
        var form        = '.email-form',
            className   = 'email-active',
            submit      = 'input[type="submit"]',
            email       = 'input[type="email"]';
        $( form ).each( function(){
            var $form   = $( this ),
                $email  = $form.find( email ),
                $submit  = $form.find( submit ),
                val     = '';
            $email.on( 'keyup.addClassWhenEmail', function(){
                val = $email.val();
                $submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );    
            });
        });
    })( jQuery, window, document );
  })
</script>

<!-- CUSTOM SELECTION / HIGHLIGHT COLOR --> 
<style>
	:-moz-selection { color: #000; background: #90fcdc;}
	::selection { color: #000; background: #90fcdc;}
</style>

<!-- APPLE FROST BLUR --> 
<style>
.frost-blur {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
</style>

<!-- DISABLES TEXT SELECT -->
<style>
/* disable user selection of an element */
.noselect {
  -webkit-user-select: none; /* webkit browsers */
  -khtml-user-select: none; /* Konqueror browser */
  -moz-user-select: none; /* firefox browser */
  -ms-user-select: none; /* internet explorer & edge */
  user-select: none;
}
</style>

<!-- Javascript Accordion Styles -->
<style>
.js-accordion-body {
	display: none;
}
</style>

<!-- Javascript Accordion -->
<script>
// Accordion Settings 
const accSettings = {
  speed: 300, // Animation speed
  oneOpen: true, // Close all other accordion items if true
  offsetAnchor: true, // Activate scroll to top for active item
  offsetFromTop: 180, // In pixels – Scroll to top at what distance
  scrollTopDelay: 400, // In Milliseconds – Delay before scroll to top 
  
  classes: {
  	accordion: 'js-accordion',
    header: 'js-accordion-header',
    item: 'js-accordion-item',
    body: 'js-accordion-body',
    icon: 'js-accordion-icon',
    active: 'active',
  }
};


const prefix = accSettings.classes

const accordion = (function(){
  const accordionElem = $(`.${prefix.accordion}`)
  const accordionHeader = accordionElem.find(`.${prefix.header}`)
  const accordionItem = $(`.${prefix.item}`)
  const accordionBody = $(`.${prefix.body}`)
  const accordionIcon = $(`.${prefix.icon}`)
  const activeClass = prefix.active
    
  return {
    // pass configurable object literal
    init: function(settings) {
      accordionHeader.on('click', function() {
        accordion.toggle($(this));
        if(accSettings.offsetAnchor) {
        	setTimeout(() => { 
        		$('html').animate({scrollTop: $(this).offset().top-accSettings.offsetFromTop}, accSettings.speed);
    			}, accSettings.scrollTopDelay);
        }
      });
      
      $.extend(accSettings, settings); 
      
      // ensure only one accordion is active if oneOpen is true
      if(settings.oneOpen && $(`.${prefix.item}.${activeClass}`).length > 1) {
        $(`.${prefix.item}.${activeClass}:not(:first)`).removeClass(activeClass).find(`.${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      // reveal the active accordion bodies
      $(`.${prefix.item}.${activeClass}`).find(`> .${prefix.body}`).show();
      
    },
    
    toggle: function($this) {
      if(accSettings.oneOpen && $this[0] != $this.closest(accordionElem).find(`> .${prefix.item}.${activeClass} > .${prefix.header}`)[0]) {
        $this.closest(accordionElem).find(`> .${prefix.item}`).removeClass(activeClass).find(accordionBody).slideUp(accSettings.speed);
        $this.closest(accordionElem).find(`> .${prefix.item}`).find(`> .${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
      }
      
      // show/hide the clicked accordion item
      $this.closest(accordionItem).toggleClass(`${activeClass}`).find(`> .${prefix.header} > .${prefix.icon}`).toggleClass(activeClass);
      $this.next().stop().slideToggle(accSettings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init(accSettings);
});
</script>

<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>

<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>

<!-- SNIPPET NAME HERE -->
<style>
/* clip elements to specific shapes */
/* provide 4 values for each side in the order: top, right, bottom, left to create the polygon */
/* the calc() property is used to make calculations based on viewport  */
.cp-1{
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%); /* webkit browsers */
}

.cp-2{
	clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%); /* webkit browsers */
}

.cp-3{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%); /* webkit browsers */
}

.cp-4{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%); /* webkit browsers */
}

.cp-btn {
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); /* webkit browsers */
}

.cp-btn:hover {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); /* webkit browsers */
}
</style>

<!-- FORM STYLES --> 
<style>
.input-label {
	pointer-events: none;
}

.input::placeholder {
	opacity: 0;
  transition: opacity .2s ease-out;
}

.input:focus::placeholder {
	opacity: 1;
}
</style>

<!-- FLOATING FORM LABELS -->
<script defer src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/floating-form-labels@0.1.0/index.min.js"></script>
<script>
window.CodeCrumbs.floatLabels({
  inputSelector: ".input",
  labelActiveClass: "float",
})
</script>

<!-- FIND, STYLE AND REPLACE MATCHING STRINGS --> 
<script>
const targetStrings = [
  {
  	selector: 'h2',
    targetString: 'String 1',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
  {
  	selector: 'p',
    targetString: 'String 2',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
]

function wrapAndReplaceMatches(selector, newClass, wordTarget, replacement) {
  const pattern = new RegExp(`\\b(${wordTarget})\\b`, 'gi');
  const hasClassAttr = newClass ? `class=${newClass}` : ''
  const wrapAndReplace = !replacement
  ? `<span ${hasClassAttr}>$1</span>`
  : `<span ${hasClassAttr}>${replacement}</span>`;
  Array.from(document.querySelectorAll(selector)).forEach((element) => {
		element.innerHTML = element.innerHTML.replace(pattern, wrapAndReplace);
	});
}

document.addEventListener('DOMContentLoaded', () => {
  targetStrings.forEach(({
  	selector,
    targetString,
    replacementString,
    appendedClassName
  }) => {
    wrapAndReplaceMatches(selector, appendedClassName, targetString, replacementString)
  })
});
</script>

<!-- SWAP VALUES ON CLICK --> 
<script>
function setupSwitcher({
  /* Click Trigger Class */
  swapTrigger = "switcher",

  /* Essentials */
  swapText = "swap-text",
  swapDisplay = "swap-display",
  swapClass = "swap-class",
  swapUrl = "swap-url",

  /* Toggle and Add Attributes */
  swapToggleAttribute = "swap-toggle-attribute",
  swapAddAttribute = "swap-add-attribute",
  swapAddAttributeValue = "swap-add-attribute-value",

  /* Replace Attribute Value */
  swapAttributeTarget = "swap-attribute-target",
  swapTargetValue = "swap-target-value"

} = {}) {
  const swapAll = () => {
    // SWAP TEXT
    document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapText);
      const currentValue = swapDomElement.innerText;

      swapDomElement.innerText = nextValue;
      swapDomElement.setAttribute(swapText, currentValue);
    });

    // SWAP DISPLAY
    document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapDisplay);
      const currentValue = swapDomElement.style.display;

      swapDomElement.style.display = nextValue;
      swapDomElement.setAttribute(swapDisplay, currentValue);
    });

    // SWAP CLASS
    document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapClass);
      swapDomElement.classList.toggle(nextValue);
    });

    // SWAP URL
    document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapUrl);
      const currentValue = swapDomElement.href;

      swapDomElement.href = nextValue;
      swapDomElement.setAttribute(swapUrl, currentValue);
    });

    // TOGGLE ATTRIBUTE
    document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
      const toggleAttribute = swapDomElement.getAttribute(
        swapToggleAttribute
      );
      swapDomElement.toggleAttribute(toggleAttribute);
    });

    // ADD ATTRIBUTE
    document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
      const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
      const newAttributeValue = swapDomElement.getAttribute(
        swapAddAttributeValue
      );

      if (swapDomElement.hasAttribute(newAttribute)) {
        swapDomElement.removeAttribute(newAttribute);
      } else {
        swapDomElement.setAttribute(newAttribute, newAttributeValue);
      }
    });

    // REPLACE ATTRIBUTE VALUE
    document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
      const attributeTarget = swapDomElement.getAttribute(
        swapAttributeTarget
      );
      let attributeValue = swapDomElement.getAttribute(attributeTarget);
      let newValue = swapDomElement.getAttribute(swapTargetValue);

      swapDomElement.setAttribute(attributeTarget, newValue);
      swapDomElement.setAttribute(swapTargetValue, attributeValue);
    });
  };

  document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
    switcherDomElement.addEventListener("click", swapAll);
  });
}

setupSwitcher();
</script>