/* ////////////////////////////////
GLOBAL APP STYLES
//////////////////////////////// */ 
:root {
	--default-animation-duration: 800ms;
	--default-easing: cubic-bezier(0.77, 0, 0, 1);
}


body, html {
	margin: 0;
	padding: 0;
	height: 100svh;
	max-width: 100svw;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: transparent;
}
html {
	scroll-behavior: smooth;
}
body {
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
	body.no-safe-area-top {
		padding-top: 0 !important;
	}
	.force-no-safe-area-top {
		margin-top: calc(env(safe-area-inset-top) * -1);
	}
	.p-safe-area-top {
		padding-top: env(safe-area-inset-top);
	}
	.m-safe-area-top {
		margin-top: env(safe-area-inset-top);
	}

#content {
	position: relative;
	width: 100%;
	/* max-width: 450px; */
    max-width: 650px;
	height: 100%;
	margin: 0 auto;
}
#content-main {
    margin-bottom: env(safe-area-inset-bottom) !important;
}
.page {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all var(--default-animation-duration) var(--default-easing);
    padding-top: 4.125rem;
}
.page.no-header {
    padding-top: 0;
}
#footer {
    padding: 0 0 10rem 0;
    background-color: var(--brand-color);
    border-top: 3rem solid var(--brand-color-lt);
    margin-top: 1rem;
}
.Step {
	position: absolute;
	width: calc(100% - 2rem) !important;
	top: 18rem;
	left: 1rem;
	transition: all var(--default-animation-duration) var(--default-easing);
}
.Step hr {
	margin-left: -1rem;
	margin-right: -1rem;
}
.page.back, .page.current, .page.next {
	display: none;
}
.slide-in-partial {
	animation: slide-in-partial var(--default-animation-duration) var(--default-easing) forwards;
}
.slide-in-complete {
	animation: slide-in-complete var(--default-animation-duration) var(--default-easing) forwards;
}
.slide-out-sub {
	animation: slide-out-sub var(--default-animation-duration) var(--default-easing) forwards;
}
.slide-out-reverse {
	animation: slide-out-reverse var(--default-animation-duration) var(--default-easing) forwards;
}
.slide-in-reverse {
	animation: slide-in-reverse var(--default-animation-duration) var(--default-easing) forwards;
}
@keyframes slide-in-partial {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(80%);
	}
}
@keyframes slide-in-complete {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}
@keyframes slide-out-sub {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(-25%);
		opacity: 0;
	}
}
@keyframes slide-out-reverse {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(100%);
		opacity: 1;
	}
}
@keyframes slide-in-reverse {
	from {
		transform: translateX(-25%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/* ////////////////////////////////
FONTS AND TYPOGRAPHY
//////////////////////////////// */
@font-face {
    font-family: soehne-buch;
    src: url('fonts/soehne-buch.woff2');
}
@font-face {
    font-family: soehne-halbfett;
    src: url('fonts/soehne-halbfett.woff2');
}
@font-face {
    font-family: soehne-fett;
    src: url('fonts/soehne-fett.woff2');
}
@font-face {
    font-family: soehne-mono;
    src: url('fonts/soehne-mono-buch.woff2');
}
@font-face {
    font-family: better-rattler;
    src: url('fonts/better-rattler.otf');
}

body {
    font-family: soehne-buch, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: normal !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: soehne-halbfett, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: normal !important;
}

._600,
.font-weight-bold,
strong {
    font-family: soehne-halbfett, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: normal !important;
}
.font-weight-bolder {
    font-family: soehne-fett, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: normal !important;
}

.text-mono {
    font-family: soehne-mono, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: normal !important;
}
.text-script {
    font-family: better-rattler, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: normal !important;
    letter-spacing: normal !important;
}
/* ////////////////////////////////
COLORS
//////////////////////////////// */ 
:root {
    --primary-color: #2c75de;
        --primary-color-slt: #e0edff;
        --primary-color-lt: #66a6ff;
        --primary-color-dk: #1D4E91;
        --primary-color-bl: #153869;
    --accent-color: #69e2e1;
        --accent-color-lt: #a7fcfc;
        --accent-color-dk: #459696;
        --accent-color-bl: #204545;
    --warn-color: #916df6;
        --warn-color-slt: #e8dfff;
        --warn-color-lt: #bca3ff;
        --warn-color-dk: #634AA8;
        --warn-color-bl: #332657;
    /*--info-color: */
    --success-color: #5eca44;
		--success-color-slt: #d2f5c9;
        --success-color-lt: #7de364;
        --success-color-dk: #3b7d2a;
        --success-color-bl: #28541d;
    /* --warning-color: #f8cd61;
        --warning-color-lt: #ffe196;
        --warning-color-dk: #AB8D43;
        --warning-color-bl: #594A23; */
    --warning-color: #fdab29;
        --warning-color-lt: #fec366;
        --warning-color-dk: #e68a6d;
        --warning-color-bl: #594A23;
    --danger-color: #590f0f;
        --danger-color-lt: #a73a54;
        --danger-color-dk: #400b0b;
        --danger-color-bl: #260303;
    --brand-color: #eb5d8f;
        --brand-color-lt: #ff99bd;
        --brand-color-dk: #a73a54;
        --brand-color-bl: #590f0f;
    --text-dark: #1e2835;
    --text-light: #e0e5ef;
    --text-theme: rgba(70, 90, 110, 0.85);
    
    --box-shadow-cont: 0 50px 100px -20px rgba(50,50,93,0.25), 0 30px 60px -30px rgba(0,0,0,0.3) !important;
    --box-shadow-cont-small: 0 20px 40px -10px rgba(50,50,93,.25), 0 20px 20px -15px rgba(0,0,0,.5) !important;
    --box-shadow-cont-small-lt: 0 20px 40px -10px rgba(50,50,93,.2), 0 20px 20px -15px rgba(0,0,0,.3) !important;
    --box-shadow-cont-hover: 0 50px 100px -20px rgba(50,50,93,0.25), 0 50px 70px -30px rgba(0,0,0,0.3) !important;
    /* original: --box-shadow-cont */
    --filter-cont:
        drop-shadow(0px 50px 100px rgba(50, 50, 93, 0.25)) drop-shadow(0px 30px 60px rgba(0, 0, 0, 0.3)) !important;

    /* original: --box-shadow-cont-small */
    --filter-cont-small:
        drop-shadow(0px 20px 40px rgba(50, 50, 93, 0.25)) drop-shadow(0px 20px 20px rgba(0, 0, 0, 0.5)) !important;

    /* original: --box-shadow-cont-small-lt */
    --filter-cont-small-lt:
        drop-shadow(0px 20px 40px rgba(50, 50, 93, 0.2)) drop-shadow(0px 20px 20px rgba(0, 0, 0, 0.3)) !important;

    /* original: --box-shadow-cont-hover */
    --filter-cont-hover:
        drop-shadow(0px 50px 100px rgba(50, 50, 93, 0.25)) drop-shadow(0px 50px 70px rgba(0, 0, 0, 0.3)) !important;
}

/* ////////////////
PRIMARY - DARK BLUE */
.primary {
    background-color: var(--primary-color);
}
    .primary.lt, .primary .lt {
        background-color: var(--primary-color-lt);
    }
    .primary.dk, .primary .dk {
        background-color: var(--primary-color-dk);
    }
        a.primary:hover {
            background-color: var(--primary-color-dk);
        }
    
        a.text-primary:hover {
            color: var(--primary-color-dk) !important;
        }
    
        .text-primary,
        .text-hover-primary a:hover,
        .text-hover-primary .active>a {
            color: var(--primary-color) !important;
        }
        .text-primary-lt,
        .text-hover-primary-lt a:hover,
        .text-hover-primary-lt .active>a {
            color: var(--primary-color-lt) !important;
        }
        .text-primary-dk,
        .text-hover-primary-dk a:hover,
        .text-hover-primary-dk .active>a {
            color: var(--primary-color-dk) !important;
        }
    .b-primary, .btn-outline-primary {
        border-color: var(--primary-color) !important;
    }
	.btn-outline-primary:hover,
    .btn-outline-primary.hover {
		border-color: var(--primary-color-lt) !important;
		background: linear-gradient(10deg, var(--primary-color-dk) 0%, var(--primary-color) 100%);
		color: white !important;
	}
    .b-primrary-dk, .btn-outline-primrary-dk {
        border-color: var(--primrary-color-dk) !important;
    }
	.btn-outline-primrary-dk:hover {
		border-color: var(--primrary-color-dk) !important;
		background: linear-gradient(10deg, var(--primrary-color-dk) 0%, var(--primrary-color) 100%);
		color: white !important;
	}

/* ////////////////
ACCENT - LIGHT BLUE */
.accent {
    background-color: var(--accent-color);
}
    .accent.lt, .accent .lt {
        background-color: var(--accent-color-lt);
    }
    .accent.dk, .accent .dk {
        background-color: var(--accent-color-dk);
    }
        a.accent:hover {
            background-color: var(--accent-color-dk);
        }
        
        a.text-accent:hover {
            color: var(--accent-color-dk) !important;
        }
        
        .text-accent,
        .text-hover-accent a:hover,
        .text-hover-accent .active>a {
            color: var(--accent-color) !important;
        }
        .text-accent-lt,
        .text-hover-accent-lt a:hover,
        .text-hover-accent-lt .active>a {
            color: var(--accent-color-lt) !important;
        }
        .text-accent-dk,
        .text-hover-accent-dk a:hover,
        .text-hover-accent-dk .active>a {
            color: var(--accent-color-dk) !important;
        }
    .b-accent, .btn-outline-accent {
        border-color: var(--accent-color) !important;
    }
	.btn-outline-accent:hover,
	.btn-outline-accent.hover {
		border-color: var(--accent-color-lt) !important;
		background: linear-gradient(10deg, var(--accent-color-dk) 0%, var(--accent-color) 100%);
		color: white !important;
	}
    .b-accent-dk, .btn-outline-accent-dk {
        border-color: var(--accent-color-dk) !important;
    }
	.btn-outline-accent-dk:hover {
		border-color: var(--accent-color-dk) !important;
		background: linear-gradient(10deg, var(--accent-color-dk) 0%, var(--accent-color) 100%);
		color: white !important;
	}

/* ////////////////
WARN - PURPLE */
.warn {
	background-color: var(--warn-color);
}
	.warn.lt, .warn .lt {
		background-color: var(--warn-color-lt);
	}
	.warn.dk, .warn .dk {
		background-color: var(--warn-color-dk);
	}
		a.warn:hover {
			background-color: var(--warn-color-dk);
		}

		a.text-warn:hover {
			color: var(--warn-color-dk) !important;
		}

		.text-warn,
		.text-hover-warn a:hover,
		.text-hover-warn .active>a {
			color: var(--warn-color) !important;
		}
        .text-warn-lt,
        .text-hover-warn-lt a:hover,
        .text-hover-warn-lt .active>a {
            color: var(--warn-color-lt) !important;
        }
        .text-warn-dk,
        .text-hover-warn-dk a:hover,
        .text-hover-warn-dk .active>a {
            color: var(--warn-color-dk) !important;
        }
    .b-warn, .btn-outline-warn {
        border-color: var(--warn-color) !important;
    }
	.btn-outline-warn:hover, .btn-outline-warn.hover,
    .btn-outline-warn.daySlot-selected {
		border-color: var(--warn-color-lt) !important;
		background: linear-gradient(10deg, var(--warn-color-dk) 0%, var(--warn-color) 100%);
		color: white !important;
	}
    .b-warn-dk, .btn-outline-warn-dk {
        border-color: var(--warn-color-dk) !important;
    }
	.btn-outline-warn-dk:hover {
		border-color: var(--warn-color-dk) !important;
		background: linear-gradient(10deg, var(--warn-color-dk) 0%, var(--warn-color) 100%);
		color: white !important;
	}

/* ////////////////
SUCCESS - GREEN */
.success {
        background-color: var(--success-color);
    }
        .success.lt, .success .lt {
            background-color: var(--success-color-lt);
        }
        .success.dk, .success .dk {
            background-color: var(--success-color-dk);
        }
            a.success:hover {
                background-color: var(--success-color-dk);
            }
            
            a.text-success:hover {
                color: var(--success-color-dk) !important;
            }
            
            .text-success,
            .text-hover-success a:hover,
            .text-hover-success .active>a {
                color: var(--success-color) !important;
            }
            .text-success-lt,
            .text-hover-success-lt a:hover,
            .text-hover-success-lt .active>a {
                color: var(--success-color-lt) !important;
            }
            .text-success-dk {
                color: var(--success-color-dk) !important;
            }
    .b-success {
        border-color: var(--success-color) !important;
    }
    .b-success-dk {
        border-color: var(--success-color-dk) !important;
    }
    .b-success, .btn-outline-success {
        border-color: var(--success-color) !important;
    }
	.btn-outline-success:hover, .btn-outline-success.hover {
		border-color: var(--success-color-lt) !important;
		background: linear-gradient(10deg, var(--success-color-dk) 0%, var(--success-color) 100%);
		color: white !important;
	}

/* ////////////////
WARNING - YELLOW */
.warning {
        background-color: var(--warning-color);
    }
        .warning.lt, .warning .lt {
            background-color: var(--warning-color-lt);
        }
        .warning.dk, .warning .dk {
            background-color: var(--warning-color-dk);
        }
            a.warning:hover {
                background-color: var(--warning-color-dk);
            }
            
            a.text-warning:hover {
                color: var(--warning-color-dk) !important;
            }
            
            .text-warning,
            .text-hover-warning a:hover,
            .text-hover-warning .active>a {
                color: var(--warning-color) !important;
            }
            .text-warning-lt,
            .text-hover-warning-lt a:hover,
            .text-hover-warning-lt .active>a {
                color: var(--warning-color-lt) !important;
            }
			.text-warning-dk {
				color: var(--warning-color-dk) !important;
			}
    .b-warning, .btn-outline-warning {
        border-color: var(--warning-color) !important;
    }
    .b-warning-dk {
        border-color: var(--warning-color-dk) !important;
    }
    .b-warning, .btn-outline-warning {
        border-color: var(--warning-color) !important;
    }
	.btn-outline-warning:hover, .btn-outline-warning.hover {
		border-color: var(--warning-color-lt) !important;
		background: linear-gradient(10deg, var(--warning-color-dk) 0%, var(--warning-color) 100%);
		color: white !important;
	}
        
/* ////////////////
DANGER - DARK RED */
.danger {
        background-color: var(--danger-color);
    }
        .danger.lt, .danger .lt {
            background-color: var(--danger-color-lt);
        }
        .danger.dk, .danger .dk {
            background-color: var(--danger-color-dk);
        }
            a.danger:hover {
                background-color: var(--danger-color);
            }
            
            a.text-danger:hover {
                color: var(--danger-color) !important;
            }
            
            .text-danger,
            .text-hover-danger a:hover,
            .text-hover-danger .active>a {
                color: var(--danger-color-lt) !important;
            }
    .b-danger {
        border-color: var(--danger-color) !important;
    }

/* ////////////////
BRAND - PINK/RED */
.brand {
    background-color: var(--brand-color);
}
    .brand.lt, .brand .lt {
        background-color: var(--brand-color-lt);
    }
    .brand.dk, .brand .dk {
        background-color: var(--brand-color-dk);
    }
        a.brand:hover {
            background-color: var(--brand-color-dk);
        }
        
        a.text-brand:hover {
            color: var(--brand-color-dk) !important;
        }
        
        .text-brand,
        .text-hover-brand a:hover,
        .text-hover-brand .active>a {
            color: var(--brand-color) !important;
        }
        .text-brand-dk,
        .text-hover-brand-dk a:hover,
        .text-hover-brand-dk .active>a {
            color: var(--brand-color-dk) !important;
        }
        .text-brand-lt,
        .text-hover-brand-lt a:hover,
        .text-hover-brand-lt .active>a {
            color: var(--brand-color-lt) !important;
        }
    .b-brand, .btn-outline-brand {
        border-color: var(--brand-color) !important;
    }
	.btn-outline-brand:hover, .btn-outline-brand.hover {
		border-color: var(--brand-color-lt) !important;
		background: linear-gradient(10deg, var(--brand-color-dk) 0%, var(--brand-color) 100%);
		color: white !important;
	}
    .b-brand-dk, .btn-outline-brand-dk {
        border-color: var(--brand-color-dk) !important;
    }
	.btn-outline-brand-dk:hover {
		border-color: var(--brand-color-dk) !important;
		background: linear-gradient(10deg, var(--brand-color-dk) 0%, var(--brand-color) 100%);
		color: white !important;
	}
.text-lightgrey, .text-lightgray {
    color: lightgray !important;
}
.b-lightgrey {
	border-color: lightgrey;
}
.btn-outline-dark {
    color: #1e2835;
    border-color: #1e2835;
}
.btn-outline-dark:hover,
.btn-outline-dark.hover {
    color: white !important;
    background: linear-gradient(10deg, var(--text-dark) 0%, #6C757D 100%) !important;
    border-color: #1e2835;
}

/* BADGES */
.badge-avail.warn {
    border: 1px solid var(--warn-color);
}

.badge-avail.warning {
    border: 1px solid var(--warning-color);
}

.badge-avail.headline {
    border: 1px solid white;
    background-color: var(--itemColor);
}

.badge-inactive.warn {
    color: inherit;
    border: 1px solid var(--warn-color);
    background-color: transparent;
}

.badge-inactive.warning {
    color: inherit;
    border: 1px solid var(--warning-color);
    background-color: transparent;
}

.badge-inactive.headline {
    color: inherit;
    border: 1px solid white;
    background-color: transparent;
}
/* ////////////////////////////////
TOP BAR
//////////////////////////////// */ 
click-spark {
    position: fixed !important;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: 2147483647 !important;
}
#gradient-canvas {
    --gradient-color-1: #2c75de;
    --gradient-color-2: #eb5d8f;
    --gradient-color-3: #69e2e1;
    --gradient-color-4: #153869;

    position: absolute;
    /* top: calc(-30% + env(safe-area-inset-top)); */
    top: calc(0% - env(safe-area-inset-top));
    left: 0;
    /* width: 100%; */
    width: 100vw;
    /* transform: skewY(-12deg); */
    height: calc(63vh + env(safe-area-inset-top));
    clip-path: ellipse(125% 90% at 16% 0%);
    z-index: -1;
    transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
}
#gradient-canvas.inactive {
	top: -100%;
}
#content-header,
#pageTitle,
#TapToShare {
    transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
}
#content-header.inactive,
#pageTitle.inactive {
	transform: translateY(calc(-100% - env(safe-area-inset-top)));
}
/* #MenuBox {
	position: absolute;
    font-size: 1.35rem;
    top: .925rem;
    left: .5rem;
	color: white;
	line-height: 1.2;
    z-index: 2;
} */
#content-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    z-index: 999;
}
#MenuTitleCont {
    flex: 1;
}

#MenuBackCont,
#MenuForwardCont {
    flex: 0;
    min-width: 3rem;
    font-size: 1.35rem;
    color: white;
}
/* #MenuBackCont {
} */
#MenuForwardCont {
    padding-right: 1rem;
    text-align: right;
}

#back-button {
    padding: .5rem;
    cursor: pointer;
}

/* .navbar {
	pointer-events: none;
} */

#locationIcon {
    transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
}
#locationIcon.inactive {
    color:white;
}


.spacy3 {
    height: 3rem;
}
.spacy5 {
    height: 5rem;
}
.spacy, .spacy10 {
    height: 10rem;
}
.shadow-cont {
    box-shadow: var(--box-shadow-cont) !important;
}
.shadow-cont-small {
	box-shadow: var(--box-shadow-cont-small) !important;
}
.dropdown-item {
	padding: .5rem 1.5rem
}
.b-0 {
	border:none !important;
}
.no-text-transform {
	text-transform: none !important;
}

/* ////////////////////////////////
BOTTOM MAIN MENU STYLES
//////////////////////////////// */ 

#MainMenu-Cont {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem .5rem 3rem .5rem;
    background-color: rgba(255,255,255,.8);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 -10px 20px rgba(0,0,0,.1) !important;
    z-index: 9990;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.75rem;
    transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
	
}
#MainMenu-Cont.inactive, #main-menu.inactive {
    transform: translateY(110%);
}
.mainmenu-item {
    flex:1;
}
.mainmenu-item > .fa {
    margin: .5rem 0;
}
.mainmenu-item > span {
    display: block;
    font-size: .65rem;
    text-transform: uppercase;
}
.mainmenu-item.active {
    color: var(--primary-color);
}
.mainmenu-item:not(.active) {
    opacity: .3;
}

/*
#jMainMenu {
	width: 393px;
	display: flex;
	position: fixed;
	bottom: -2px;
	left: 50%;
	right: 0;
	transform: translateX(-50%);
	padding: 1rem .5rem 2.2rem .5rem;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1.75rem;
	transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
}
#jMainMenu-bg {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(255,255,255,.8);
	z-index: -1;
}
.jMainMenu-bg-cont {
	z-index: -1;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 111px;
	width: 393px;
	clip-path: path('M294.61,0c-20.96,0-40.26,11.01-51.27,28.85-9.69,15.69-27.04,26.15-46.84,26.15s-37.15-10.46-46.84-26.15C138.66,11.01,119.35,0,98.39,0H0v110h393V0h-98.39Z');
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
*/

#jMainMenu {
	width: 393px;
	display: flex;
	position: fixed;
	bottom: -2px;
	left: 50%;
	right: 0;
	transform: translateX(-50%);
	/* padding: 1rem .5rem 2.2rem .5rem; */
	padding: 1rem 1rem 2.2rem 1rem;
	z-index: 9990;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1.75rem;
	transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
}

.jMainMenu-bg-cont {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Break out of 393px parent to full viewport */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    z-index: -1;
}

/* Shadow is isolated in its own wrapper to avoid breaking backdrop-filter */
.jMainMenu-shadow-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2000px;
    filter: drop-shadow(0 -5px 15px rgba(0,0,0,0.1));
    z-index: -3;
}
.jMainMenu-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,.8);
    clip-path: path('M1098.11,0c-20.96,0-40.26,11.01-51.27,28.85-9.69,15.69-27.04,26.15-46.84,26.15s-37.15-10.46-46.84-26.15C942.16,11.01,922.85,0,901.89,0H0v110h2000V0h-901.89Z');
}

#jMainMenu-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Center a 2000px wide element */
    left: 50%;
    transform: translateX(-50%);
    width: 2000px;
    background: transparent;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    /* Clip-path: 2000px wide with curved cutout centered at x=1000 */
    clip-path: path('M1098.11,0c-20.96,0-40.26,11.01-51.27,28.85-9.69,15.69-27.04,26.15-46.84,26.15s-37.15-10.46-46.84-26.15C942.16,11.01,922.85,0,901.89,0H0v110h2000V0h-901.89Z');
    z-index: -2;
}
	
#jMainMenu.inactive {
    transform: translateY(130%) translateX(-50%);
	opacity: 0;
}
.jmainmenu-item {
    flex:1;
	transition: all 400ms ease-out;
}
.jmainmenu-item-center {
    flex:1.7;
}
.jmainmenu-item > .fa,
.jmainmenu-item-center > .fa {
    margin: .5rem 0;
}
.jmainmenu-item > span,
.jmainmenu-item-center > span,
.text-center-caption {
    display: block;
    font-size: .65rem;
    text-transform: uppercase;
}
.jmainmenu-item.active,
.jmainmenu-item-center.active {
    color: var(--brand-color);
}
.jmainmenu-item:not(.active) {
	color: grey;
	/* mix-blend-mode: plus-darker; */
}


/* NEW CENTER BTN */
.jmainmenu-center {
	height: 4rem;
	width: 4rem;
	/* background-color: var(--brand-color); */
    /* background: linear-gradient(-20deg, var(--brand-color-dk) 0%, var(--brand-color) 100%); */
    background: linear-gradient(-20deg, lightgrey 0%, white 50%);
    /* background: url('/images/_Golden\ Master.png') center center no-repeat; */
    background-size: contain;
	outline: 4px solid var(--brand-color-lt);
	position: absolute;
	border-radius: 4rem;
	left: 50%;
	transform: translateX(-50%);
	top: -1.25rem;
/*	filter: drop-shadow(0 15px 15px rgba(44,117,222,.25));*/
	/* filter: drop-shadow(0 15px 15px rgba(235,93,143,.25)); */
	filter: drop-shadow(0 15px 25px rgba(235,93,143,.65));
    transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}
.jmainmenu-center > a {
    overflow: hidden;
    width: 100%;
    pointer-events: none;
}
.jmainmenu-center.expanded {
    width: 20rem;
    top: -2.5rem;
    filter: drop-shadow(0 15px 15px rgba(0,0,0,.75));
    z-index: 10;
    background: linear-gradient(-20deg, var(--brand-color-dk) 0%, var(--brand-color) 100%);
}
.jmainmenu-center.expanded > a {
    pointer-events: auto;
}
.jmainmenu-center > a > .jmainmenu-item {
    opacity: 0;
    transition: all 400ms;
    color: white !important;
}
.jmainmenu-center.expanded > a > .jmainmenu-item {
    opacity: 1;
}
.jmainmenu-center ~ i {
	position: relative;
	color: white !important;
	top: -1.65rem;
}
#mm-center-selected {
    /* opacity: 0; */
    transition: all 400ms;
    position: absolute;
    width: 100%;
}
#mm-center-selected.inactive {
    opacity: 0;
    pointer-events: none;
    width: 30%;
}
#jmainmenu-center-bg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 50%);
    z-index: 5;
    transition: opacity 400ms;
}
#jmainmenu-center-bg.inactive {
    opacity: 0;
    pointer-events: none;
}



.messages-badge {
	position: absolute;
	right: .5rem;
	bottom: 1.2rem;
	color: white;
	font-size: .65rem;
	background-color: var(--brand-color-dk);
	min-width: 1rem;
	width: fit-content;
	height: 1rem;
	border-radius: 10px;
	padding: 0 .25rem;
}
.messages-badge.inactive {
	display: none;
}

/* ////////////////////////////////
INPUT MATERIAL DESIGN STYLES
//////////////////////////////// */ 

.j-button,
.j-button-outline {
    position: relative;
    padding: .4rem 1.6rem;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
    border-radius: 5rem;
    border: none;
    outline: 4px solid var(--primary-color-lt) !important;
    /* z-index: 10; */
    font-size: 1rem;
    transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
    cursor: pointer;
}
.j-button.brand,
.j-button-outline.brand {
	background-color: var(--brand-color);
	outline: 4px solid var(--brand-color-lt) !important;
}
.j-button.success,
.j-button-outline.success {
	background-color: var(--success-color);
	outline: 4px solid var(--success-color-lt) !important;
}
.j-button.warn,
.j-button-outline.warn {
	background-color: var(--warn-color);
	outline: 4px solid var(--warn-color-lt) !important;
}
.j-button.warning,
.j-button-outline.warning {
	background-color: var(--warning-color);
	outline: 4px solid var(--warning-color-lt) !important;
}
.j-button-outline {
    background: white;
    color: var(--primary-color) !important;
}
.j-button:hover,
.j-button-outline:hover {
    background-color: var(--primary-color-dk) !important;
    color: white;
}
.j-button.brand:hover,
.j-button-outline.brand:hover {
    background-color: var(--brand-color-dk) !important;
    color: white;
}
.j-button.success:hover,
.j-button-outline.success:hover {
	background-color: var(--success-color-dk) !important;
	color: white;
}
.j-button.warn:Hover,
.j-button-outline.warn:Hover {
    background-color: var(--warn-color-dk) !important;
    color: white;
}
.j-button.warning:hover,
.j-button-outline.warning:hover {
	background-color: var(--warning-color-dk) !important;
	color: white;
}
.j-button.locked {
    background-color: grey !important;
    outline-color: lightgrey !important;
    cursor: auto;
	pointer-events: none;
}
.j-button.bottom {
    position: fixed;
    bottom: 2rem;
    left: 1rem;
    right: 1rem;
    width: auto;
}
.j-shadow {
    box-shadow: var(--box-shadow-cont-small) !important;
}
.selection-box {
    outline: 1px solid grey;
    border-radius: .25rem;
    display: flex;
    padding: .5rem 1rem .5rem 1.5rem;
    align-content: center;
    justify-content: center;
    align-items: center;
    background: white;
}
label {
    display: inline;
}
.selection-box > div:first-child {
    flex: 1;
}
.selection-box > div:first-child > span {
    display: block;
}
.selection-box > div > input {
    width: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.2rem;
}
    
    
    
.md-form-group {
    outline: 1px solid lightgrey;
    border-radius: 10px;
    padding: 1.35rem 1rem .5rem 1.5rem;
    background: white;
    position: relative;
}
.md-form-group.inactive {
    outline: none;
    pointer-events: none;
}
.md-input {
    background: transparent;
    position: relative;
    z-index: 5;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
    color: inherit;
    font-size: 1rem;
    height: auto;
    padding: 0;
}
.md-input:focus, .md-input.focus {
    border: 0;
    padding: 0;
}
.md-input:focus ~ label, .md-input.focus ~ label {
    color: var(--primary-color-lt);
    opacity: 1;
    top: .5rem !important;
    font-size: 0.8rem !important;
}
.float-label .md-input ~ label {
    top: .9rem;
    left: 1.5rem;
    font-size: 1rem;
}
.float-label label {
    z-index: 1;
}
.float-label .md-input:not([value=""]) ~ label,
.float-label .md-input:valid ~ label,
.float-label .md-input ~ label.active {
    top: .5rem;
    font-size: .8rem;
}
.md-input ~ label {
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    font-size: 1rem;
    position: absolute;
    z-index: 0;
    opacity: 0.5;
    display: inline-block;
    top: .5rem;
    left: 0;
}
.md-input.is-invalid {
    color: #ea2e49;
}
.md-input.is-valid {
    color: #22b66e;
}
.md-input.disabled, .md-input[disabled] {
    opacity: 0.5;
}

.md-form-group ~ a {
    position: absolute;
    right:.5rem;
}

.md-form-group.intlTel {
    padding-top: .5rem;
}
.md-form-group.intlTel > label {
    opacity: .6;
}

span.input-checked {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
    font-size: 1rem;
    color: var(--success-color);
}
 
.progress-pips {
    margin-bottom: .5rem;
}
    .progress-pip-completed,
    .progress-pip-current,
    .progress-pip-next {
        width: 10px;
        height: 10px;
        border-radius: 15px;
        display: inline-block;
        opacity: .25;
    }
    .progress-pip-completed {
        background-color: var(--text-dark);
    }
    .progress-pip-current {
        width: 30px;
        opacity: 1;
        background-color: var(--text-dark);
    }
    .progress-pip-next {
        border: 2px solid var(--text-dark);
    }

#resetBTN {
	flex: initial;
	width: 1.5rem;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1rem;
	cursor: pointer;
	opacity: 0;
	transition: all 400ms;
	pointer-events: none;
}
#resetBTN.active {
	opacity: 1;
	pointer-events: all;
}

/* AlertBox */

.alertBox {
	position: relative;
	z-index: 2;
	border-radius: 10px;
	background: var(--warning-color-lt);
	color: var(--warning-color-dk);
	outline:5px solid rgba(255,255,255,.3);
	box-shadow: var(--box-shadow-cont);
	margin-bottom: 2rem;
	transition: all 400ms;
	display: flex;
	padding: 1rem;
}
.alertBox.danger {
	background:var(--brand-color-lt);
	color: var(--brand-color-dk);
}
.alertBox.success {
	background:var(--success-color-lt);
	color: var(--success-color-dk);
}
.alertBox.warn {
	background:var(--warn-color-lt);
	color: var(--warn-color-dk);
}
.alertBox > div {
	flex: 1;
    overflow: scroll;
}
.alertBox > div:first-child {
	flex:initial;
	margin-right: 1rem;
}
.alertBox > div > p,
.alertBox > div > h6 {
	margin-bottom: 0;
}

/* HOME PAGE STYLES */
.filter-shadow {
    filter: drop-shadow(0 .25rem 5px rgba(0,0,0,.5));
}
.rbox {
	width: 100%;
	background-color: white;
	outline: 4px solid rgba(255,255,255,.5);
	border-radius: 10px;
	box-shadow: var(--box-shadow-cont);
	overflow: hidden;
    
}
.rbox.with-hero {
	margin-top: -2.5rem;
}
.rbox-hero {
	width: 5rem;
	height: 5rem;
	border-radius: 100%;
	overflow: hidden;
	outline: 4px solid rgba(255,255,255,.5);
	margin: 0 0 0 1rem;
	box-shadow: var(--box-shadow-cont-small);
	position: relative;
}
.rbox-header.bg-brand, .bg-brand, .badge-brand {
	background: linear-gradient(10deg, var(--brand-color-dk) 0%, var(--brand-color) 100%) !important;
}
.bg-activity, .badge-activity {
    background: linear-gradient(10deg, aliceblue 0%, var(--primary-color-slt) 100%) !important;
}
.bg-accent, .badge-accent {
    background: linear-gradient(10deg, var(--accent-color-dk) 0%, var(--accent-color) 100%) !important;
}
.rbox-header.bg-primary, .bg-primary, .badge-primary {
	background: linear-gradient(10deg, var(--primary-color-dk) 0%, var(--primary-color) 100%) !important;
}
.rbox-header.bg-warn, .bg-warn, .badge-warn {
	background: linear-gradient(10deg, var(--warn-color-dk) 0%, var(--warn-color) 100%) !important;
}
.rbox-header.bg-warning, .bg-warning, .badge-warning {
	/* background: linear-gradient(10deg, var(--warning-color-dk) 0%, var(--warning-color) 100%); */
    background: linear-gradient(10deg, #fdab29 0%, var(--brand-color) 100%) !important;
}
.rbox-header.bg-warning-alt, .bg-warning-alt, .badge-warning-alt {
	background: linear-gradient(10deg, var(--warning-color-dk) 0%, var(--warning-color) 100%) !important;
    /* background: linear-gradient(10deg, #fdab29 0%, var(--warning-color-lt) 100%); */
}
.rbox-header.bg-success, .bg-success, .badge-success {
	background: linear-gradient(10deg, var(--success-color-dk) 0%, var(--success-color) 100%) !important;
}
.bg-secondary, .badge-secondary {
	background: linear-gradient(10deg, var(--text-dark) 0%, #6C757D 100%) !important;
}


.rbox-header {
	padding: 1rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* text-transform: capitalize; */
}
.rbox.with-hero > .rbox-header {
	padding-left: calc(6rem + 14px);
}
.rbox-header > * {
	padding: 0;
	margin: 0;
}
.rbox-header.rbox-header-border {
    margin-top: -.75rem;
    position: relative;
    outline: 4px solid rgba(255, 255, 255, .5);
}
.rbox-header.rbox-header-border.listing-settings {
    margin-top: -1.25rem;
    z-index: 2;
}
.rbox-body.rbox-with-imgColors {
    overflow: hidden;
    padding-bottom: 1rem;
}

/* .rbox-body {
} */
#RTai-input {
	width: 100%;
	font-size: 1rem;
	background: transparent;
	padding: 0;
	border: 0;
	outline: 0;
	color: inherit;
}
.finger {
	cursor: pointer;
}

.display-counter {
    background-color: var(--brand-color-dk);
    padding: .25rem;
    border-radius: 10px;
}

#counterCont div {
    flex: 1;
}

#counterCont div span.text-xs {
    display: block;
    margin-top: .35rem;
}


/* ///////////////////////////////////
// ICON LISTS AND CATEGORIES */
.categories-cont,
.search-cont {
	width: 100%;
	background: white;
	border-radius: 10px;
	outline:4px solid rgba(255,255,255,.3);
	box-shadow: var(--box-shadow-cont);
	margin-top: 5rem;
	position: relative;
	overflow: hidden;
	transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
	z-index: 5;
}

.categories-title,
.search-title {
	font-size: 1.25rem;
	padding: 1rem;
	position: relative;
	transition: all 600ms cubic-bezier(0.77, 0, 0, 1);
}
.categories-title.inactive {
	transform: translateX(-3rem);
	opacity: 0;
}
.categories-back {
	font-size: 1.25rem;
	position: absolute;
	top: 1rem;
	left: 1rem;
	transition: all 600ms cubic-bezier(0.77, 0, 0, 1);
}
.categories-back.inactive {
	transform: translateX(3rem);
	opacity: 0;
	pointer-events: none;
}
.category-item {
	display: flex;
	border-top: 1px solid lightgrey;
	padding: 1rem;
	font-size: 1rem;
    /* text-transform: capitalize; */
}
.category-item.listing-type-btn, .category-item.rate-type-btn, .category-item.typeGroup-btn {
    padding: 1rem .5rem 1rem 0;
}
.category-item-sub {
	padding: .65rem 1rem;
	font-size: .8rem;
}
.category-item.align-center {
	align-items: center;
}
.category-item.messages {
	padding: 1rem .5rem 1rem 0;
}
.category-item > div:nth-child(2) {
	flex:1;
}
.category-item > div:nth-child(1) {
	width: 2.5rem;
	text-align: center;
}
.listing-type-btn > div:nth-child(1),
.rate-type-btn > div:nth-child(1),
.typeGroup-btn > div:nth-child(1) {
    align-self: center;
    width: 3rem;
}
.category-item > div:nth-child(3) {
	flex: initial;
}
.listing-type-btn > div:nth-child(3),
.rate-type-btn > div:nth-child(3),
.typeGroup-btn > div:nth-child(3) {
    align-self: center;
}
.subcategory-item {
	display: flex;
	border-top: 1px solid lightgrey;
	padding: .75rem 1rem;
	font-size: 1rem;
}
.subcategory-item > div:nth-child(1) {
	flex: 1;
}
.subcategory-item > div:nth-child(2) {
	flex: initial;
}

.categories-scroll-cont {
	position: relative;
	transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
}
.categories-main,
.search-main {
	position: relative;
	transition: all 600ms cubic-bezier(0.77, 0, 0, 1);
}
.categories-main.inactive {
	transform: translateX(-25%);
}
.categories-sub {
	background: white;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	transform: translateX(100%);
	transition: all 600ms cubic-bezier(0.77, 0, 0, 1);
	overflow: scroll;
}
.categories-sub.active {
	transform: translateX(0);
}

/* ///////////////////////////////////
// J-CAL CALENDAR STYLES 
/////////////////////////////////// */

    #bg-shader, #bg-shader2 {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,.85);
        z-index: 10;
        opacity: 1;
        transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
    }
#bg-shader.white {
	background-color: white;
}
    #bg-shader.inactive, #bg-shader2.inactive {
        opacity: 0;
        pointer-events: none;
    }
	#bg-shader.blocker {
		opacity: 0;
	}
    #SearchSortFilter-Cont,
    #Calendar-Cont,
    #Days-Cont,
    #PartySize-Cont {
		max-width: 400px;
		margin: 0 auto;
        position: fixed;
        top: calc(env(safe-area-inset-top) + 3.75rem);
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 20;
        outline: 5px solid rgba(255,255,255,.3);
        border-radius: 20px;
        transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
        overflow: hidden;
    }
    #Days-Cont,
    #PartySize-Cont {
        left: 1rem;
        right: 1rem;
        bottom: calc(env(safe-area-inset-bottom) + 1rem);
    }

    #SearchSortFilter-Cont.inactive,
    #Calendar-Cont.inactive,
    #Days-Cont.inactive,
    #PartySize-Cont.inactive {
        transform: translateY(120%);
        pointer-events: none;
        opacity: 0;
    }
    #content-main.inactive {
        pointer-events: none;
    }
    #SearchSortFilter-Cont,
    #PartySize-Cont,
    #Days-Cont {
        top: auto;
		padding-bottom: calc( env(safe-area-inset-bottom) + 7.5rem );
    }

    #Cal-Cont {
        width: 100%;
        background: white;
    }
    #Jcal-Months {
        max-height: calc(100vh - 158px);
        overflow: scroll;
        padding-bottom: 10rem;
    }
    .jcal-row-flex {
        display: flex;
    }
    .jcal-close, .jcal-clear {
        flex:1;
        padding: 1rem 1.25rem .5rem 1.25rem;
        font-size: 1rem;
    }
    .jcal-clear {
        text-align: right;
    }
    .jcal-row-flex.jcal-header {
        border-bottom: 1px solid lightgrey;
    }
    .jcal-start-date, .jcal-end-date, .jcal-arrow {
        flex: 1;
        font-size: 1rem;
        padding: .25rem 1rem .5rem 1rem;
    }
    .jcal-start-date span, .jcal-end-date span {
        display: block;
        font-size: .6rem;
        margin-top: -.25rem;
    }
    .jcal-arrow {
        flex: none;
    }
    .jcal-curMonth {
        flex: 1;
        font: 1rem;
        padding: 1rem 0 .5rem 0;
        text-align: center;
    }
    .jcal-row-flex.weekdays > div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: lightgrey;
    }
    .jcal-row-flex.week > div {
        flex: 1;
        display: flex;
        aspect-ratio: 1;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    .jcal-row-flex.week > div.inactive {
        color: lightgrey;
    }
    .jcal-row-flex.week > div:not(div.inactive):hover,
    .jcal-row-flex.week > div.selected {
        color: white;
    }
    .jcal-row-flex.week > div:not(div.inactive):hover::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-color: var(--primary-color);
        border-radius: 100%;
    }
    .jcal-row-flex.week > div.inactive.today {
        color: white;
    }
    .jcal-row-flex.week > div.inactive.today::after {
        content: "";
        position: absolute;
        color: white;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-color: var(--brand-color);
        border-radius: 100%;
        border:3px solid var(--brand-color-lt);
    }
    .jcal-row-flex.week > div.today {
        color: white;
    }
    .jcal-row-flex.week > div.today::after {
        content: "";
        position: absolute;
        color: white;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-color: var(--brand-color);
        border-radius: 100%;
        border:3px solid var(--brand-color-lt);
    }
    
    .jcal-row-flex.week > div.selected::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-color: var(--primary-color);
        border-radius: 100%;
        opacity: .2;
    }
    .jcal-row-flex.week > div.selected.rangeStart::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-color: var(--primary-color);
        border-radius: 100% 0 0 100%;
        opacity: .2;
    }
    .jcal-row-flex.week > div.selected.rangeEnd::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-color: var(--primary-color);
        border-radius: 0 100% 100% 0;
        opacity: .2;
    }
    .jcal-row-flex.week > div.selected::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-color: var(--primary-color);
        border-radius: 100%;
        border:3px solid var(--primary-color-lt);
    }
    .jcal-row-flex.week > div.range::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-color: var(--primary-color);
        opacity: .2;
    }
    .jcal-button {
        position: absolute;
        bottom: calc( env(safe-area-inset-bottom) + 2rem );
        left: 1rem;
        right: 1rem;
        padding: .6rem;
        text-align: center;
        background-color: var(--primary-color);
        color: white;
        border-radius: 5rem;
        outline: 4px solid var(--primary-color-lt);
        z-index: 10;
        font-size: 1rem;
        transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
        box-shadow: var(--box-shadow-cont-small);
        cursor: pointer;
    }
    .jcal-button:hover {
        outline-color: var(--primary-color-dk);
    }
    .jcal-button.locked {
        background-color: grey;
        outline-color: lightgrey;
        cursor: auto;
    }
    
    /* ///////////////////////
    PARTY SIZE STYLES 
    ///////////////////////*/
    
    .pS-row {
        text-align: center;
        padding: 1rem 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pS-title {
        flex: 4;
        text-align: left;
        font-size:1rem;
    }
    .pS-title span {
        display: block;
        font-size: .6rem;
        margin-top: -.25rem;
    }
    .pS-minus {
        flex: 1;
        outline: 2px solid lightgrey;
        display: flex;
        aspect-ratio: 1;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        border-radius: 100%;
        cursor: pointer;
    }
    .pS-num {
        flex: 2;
        font-size: 1rem;
    }
    .pS-add {
        flex: 1;
        outline: 2px solid lightgrey;
        display: flex;
        aspect-ratio: 1;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        border-radius: 100%;
        cursor: pointer;
    }
	/* .child-item {
	} */

/* ///////////////////////////////////
TRIPS STYLES
/////////////////////////////////// */
.optionsCont {
	position: relative;
	z-index: 2;
	border-radius: 10px;
	background: white;
	outline:5px solid rgba(255,255,255,.3);
	box-shadow: var(--box-shadow-cont);
	margin-bottom: 2rem;
	transition: all 400ms;
}

.profile-pic-hero {
        width: 8rem;
        height: 8rem;
        background: url("https://cdn.redtulip.io/Hawaii/profiles/default.jpg") center center;
        background-size: cover;
        outline: 4px solid rgba(255,255,255,.5);
        border: 4px solid #f2f2f2;
        border-radius: 100%;
        position: relative;
        z-index: 2;
        margin: 0 auto;
		box-shadow: var(--box-shadow-cont-small);
		overflow: hidden;
    }
    .profile-pic-text {
        position: relative;
        color: white;
        z-index: 2;
        text-align: center;
        margin-top: .5rem;
    }
.hero-pic-edit {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,.6);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	padding: .5rem 0;
}
	
    .optionsCont.create-new-trip {
        padding: 2rem 1rem .5rem 1rem;
        background: var(--primary-color-slt);
		box-shadow: var(--box-shadow-cont);
		position: relative;
		text-align: center;
		color: var(--primary-color);
    }
    .hero-icon {
        width: 6rem;
		height: 6rem;
		background-color: white;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2.5rem;
		color: var(--primary-color-dk);
		outline: 1rem solid rgba(255,255,255,.35);
		position: absolute;
		top: -3rem;
		left: 50%;
		transform: translate(-50%, 0);
    }
    .create-new-trip-bg {
        background-color: var(--primary-color-dk);
    }
    .create-new-trip-color {
        color: var(--primary-color-dk);
    }
	.icon-offset {
		position: absolute;
		right: 1rem;
		bottom: 1.75rem;
		font-size: 1.25rem;
	}
	.fa-circle-plus {
		color: var(--primary-color-dk);
	}


/*/////////////////////////////
CHAT STYLES
/////////////////////////////*/

.chat-item {
    display: flex;
    margin-bottom: .75rem;
}
.chat-item > * {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
[data-class="alt"].chat-item, .chat-item.alt {
    flex-direction: row-reverse;
}
[data-class="alt"].chat-item .chat-body, .chat-item.alt .chat-body {
    align-items: flex-end;
}
[data-class="alt"].chat-item .chat-content, .chat-item.alt .chat-content {
    color:white;
    background-color: var(--primary-color-dk);
	border-radius: 10px;
	border-top-right-radius: 0;
	outline: 3px solid rgba(255,255,255,.5);
}
[data-class="alt"].chat-item .chat-date, .chat-item.alt .chat-date {
    text-align: right;
}
.chat-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.avatar img {
	width: 40px;
	outline: 3px solid rgba(255,255,255,.5);
}
.chat-content {
    display: block;
    padding: .5rem .75rem;
    color: var(--primary-color-dk);
    background-color: #fff;
    margin-bottom: .75rem;
	border-radius: 10px;
	border-top-left-radius: 0;
	/* outline: 3px solid rgba(255,255,255,.5); */
	outline: 3px solid var(--primary-color-dk);
	box-shadow: var(--box-shadow-cont-small);
}
.chat-content p,
.chat-content ul,
.chat-content ol {
    margin-bottom: .5rem;
    margin-top: 0;
}
.chat-content ul,
.chat-content ol {
    padding-left: 1.5rem;
}

.chat-content.accent-msg {
    outline-color: var(--warn-color-dk);
    color: var(--warn-color-dk);
}
.chat-content.system-msg {
    outline-color: var(--brand-color);
    color: var(--brand-color-dk);
}
[data-class="alt"].chat-item .chat-content.accent-msg, .chat-item.alt .chat-content.accent-msg {
    background-color: var(--warn-color-dk);
    color:white;
	outline: 3px solid rgba(255,255,255,.5);
}

.chat-date {
    opacity: 1;
    font-size: 0.8em;
    display: block;
	color: grey;
}
.chat-form {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	min-height: 5rem;
    height: fit-content;
}
#ChatSpinner {
    transition: all 400ms ease-out;
}

.rbox.chat-banner {
    width:fit-content;
    margin: 0 auto .75rem auto; 
    padding: .25rem 1rem;
    background-color: var(--primary-color-dk);
    color:white;
}
.rbox.chat-banner.accent-banner {
    background-color: var(--warn-color-dk);
}


/*/////////////////////////////
SEARCH RESULTS STYLES Search-Results.php
/////////////////////////////*/


.resultItem {
	padding: 0 !important;
	overflow: hidden;
}
/* .resultItem.inactive {
} */
.resultItem-img {
	background-size: cover;
	background-position: center center;
	width: 100%;
	padding-top: 60%;
}

.save-listing {
	position: absolute;
	top: .5rem;
	right: .5rem;
	height: 2rem;
	width: 2rem;
	background: white;
	border-radius: 100%;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	outline: 4px solid rgba(255,255,255,.5);
	font-size: 1rem;
	box-shadow: var(--box-shadow-cont-small);
}
.save-listing.active {
	color: var(--brand-color);
}
.popular-listing {
	position: absolute;
	top: calc(100% * .5625 - 2.3rem);
	left: .5rem;
	display: inline;
	background:  var(--brand-color);
	color: white;
	padding: .25rem .75rem;
	border-radius: 20px;
	font-size: .75rem;
}
.p-relative {
    position: relative;
}
.booking-date {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: inline;
    background:  var(--primary-color);
    color: white;
    padding: .25rem .75rem .25rem 2.5rem;
    border-radius: 20px;
    font-size: 1rem;
    outline: 2px solid rgba(255,255,255,.5);
}
.booking-date.cards {
    background: var(--itemColorBG);
    top: 0.8rem;
    left: 0.8rem;
    transition: all 4s ease-out;
}
.booking-date.cards i {
    transition: all 4s ease-out;
}
.booking-date.nearby {
    background: var(--itemColorBG);
}
.booking-date.pending {
    background: var(--warn-color);
}
.booking-date.past {
    background: var(--text-dark);
}
.booking-date-circle {
    position: absolute;
    top: .2rem;
    left: .2rem;
    right: calc(100% - 1.8rem);
    bottom: .2rem;
    background-color: white;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.booking-time {
    position: absolute;
    top: 2.25rem;
    left: 2.25rem;
    display: inline;
    background:  var(--primary-color-dk);
    color: white;
    padding: .25rem .75rem;
    border-radius: 20px;
    font-size: .75rem;
}
.booking-time.cards {
    background: var(--itemColorBG);
    top: 2.55rem;
    left: 2.55rem;
    transition: all 4s ease-out;
}
.booking-time.nearby {
    background: var(--itemColorBG);
}
.booking-time.pending {
    background: var(--warn-color-dk);
}
.booking-time.past {
    background: var(--text-dark);
}
.optionsCont {
	padding: 15px 10px;
	display: flex;
	box-shadow: var(--box-shadow-cont-small);
	z-index: 5;
}
.optionsCont div {
	flex: 1;
}


/*/////////////////////////////
CARDS SEARCH RESULTS
/////////////////////////////*/

#InstructionsCards {
    left: 50%;
    top: 25%;
    transform: translateX(-50%) scale(1);
    width: 80%;
    position: fixed;
    z-index: 1000;
    transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
    pointer-events: none;
}

#InstructionsCards.inactive {
    transform: translateX(-50%) scale(.8);
    opacity: 0;
    pointer-events: none;
}
/*
.tinder {
  width: 100vw;
  height: calc(100vh - 3.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: all 400ms ease-out;
}*/

.rCard {
	perspective: 900px;

	position: absolute;
	width: 90vw; /*90 ---------------*/
	max-width: var(--max-width);
	max-height: 620px;
	height: fit-content; /*72 ---------------*/
	will-change: transform;
	transition: all 0.3s ease-in-out;
	cursor: -webkit-grab;
	cursor: grab;
	min-height: 60vh;
}

.rContent {
	position: absolute;
	width: 100%;
	height: 100%;

	transition: transform 1s;
	transform-style: preserve-3d;

	background: #FFF;
	border-radius: 10px;
	outline: 5px solid rgba(255,255,255,.5);
	box-shadow: var(--box-shadow-cont);
	pointer-events: none;
}

.rCard.flip .rContent {
	animation: rCard-flip 2s var(--default-easing) forwards;
}
@keyframes rCard-flip {
	0% {
		transform: rotateY(0) scale(1);
	}
	30% {
		transform: rotateY(180deg) scale(.8);
	}
	100% {
		transform: rotateY( 180deg ) scale(2);
	}
}

.rCard .front,
.rCard .back {
	position: absolute;
	height: 100%;
	width: 100%;
	background: white;
	backface-visibility: hidden;
	overflow: hidden;
	border-radius: 10px;
}
.rCard .front {
	background-size: cover;
	background-position: center center;
}
.rCard.result .result-title {
	background-color:rgba(255,255,255,.85);;
	position: absolute;
	bottom: 0;
}

.rCard .back {
	background: white;
	color: white;
	transform: rotateY( 180deg );
}

.rCard.moving {
  transition: none;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.rCard.moving .back {
	display: none;
}

/* .result-title {
	background-color:rgba(255,255,255,.85);;
	position: absolute;
	bottom: 0;
} */

.tinder {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: all 400ms ease-out;
	position: fixed;
	bottom: env(safe-area-inset-bottom);
	left: 0;
	right: 0;
	top: 0;
	margin-top: calc(env(safe-area-inset-top) + 5rem);
}

.loaded.tinder {
  opacity: 1;
}

.tinder--status {
  position: absolute;
  top: 40%;
  margin-top: -50px;
  z-index: 2;
  width: 100%;
  text-align: center;
  pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tinder--status i {
  font-size: 100px;
  opacity: 0;
  transform: scale(0.3);
  transition: all 0.2s ease-in-out;
  position: absolute;
/*  width: 100px;
  margin-left: -50px; */
}

.tinder_love #tinder--right {
  opacity: 0.8;
  transform: scale(1.8);
}

.tinder_nope #tinder--left {
  opacity: 0.8;
  transform: scale(1.8);
}
	
.tinder--cards {
/*  flex-grow: 1; */
    height: calc((100vh * 0.9) - 3.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.tinder--card {
    position: absolute;
    width: 90vw; /*90 ---------------*/
    max-width: 500px;
    max-height: 620px;
    height: fit-content; /*72 ---------------*/
    background: #FFF;
    border-radius: 10px;
    overflow: hidden;
    will-change: transform;
    transition: all 300ms ease-out;
    cursor: -webkit-grab;
    cursor: grab;
    outline: 5px solid rgba(255,255,255,.5);
    box-shadow: var(--box-shadow-cont);
    min-height: 60vh;
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
}
.tinder--card.full {
	display: flex;
	align-items: center;
	justify-content: center;
    background-color: var(--text-dark);
}
.tinder--card.full.result {
	background-position: center center;
	background-size: cover;
    flex-direction: column;
}
.tinder--card.full.result.searchResult {
    position: relative;
    min-height: 380.65px !important;
    max-height: 380.65px !important;
    height:380.65px !important;
    pointer-events: auto !important;
    cursor: auto !important;
}
/* .tinder--card.searchResult video {
    top: -10% !important;
} */
.tinder--card.full.result .result-img {
    flex: 1 1 auto;
    background-size: cover;
    width: 100%;
    background-position: center center;
}
.tinder--card.result .result-title {
	background-color:rgba(255,255,255,.8);
    margin-top: auto;
    backdrop-filter: blur(5px);
	/* position: absolute;
	bottom: 0; */
}
.tinder--card.result .result-title2 {
    width: 100%;
    margin-top: auto;
    background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .35) 100%);
    z-index: 0;
}
.tinder--card.result .result-title2 i,
.tinder--card.result .imgColors-content h3 i {
    color: color-mix(in srgb, var(--itemColor) 100%, #FFFFFF 100%) !important;
    transition: color 4s ease-out;
} 
.tinder--card.result .result-title2 h3 {
    /* color: var(--itemColor) !important; */
    color: color-mix(in srgb, var(--itemColor) 100%, #FFFFFF 100%) !important;
}


.moving.tinder--card {
  transition: none;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.tinder--img {
	width: 100%;
	height: 45vh;
	background-size: cover;
	background-position: center center;
}
.tinder--img.third {
	height: 24vh;
}
.tinder--img.full {
	height: 100%;
	position: absolute;
}

.rbox.full {
	position: absolute;
	width: fit-content;
}
.rbox.card-description {
	position: absolute;
	bottom:0;
	background-color:rgba(255,255,255,0.9);
}
.fa-preload {
	position: fixed;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
	z-index: -9999;
}
.fa-bounce-once {
    animation-iteration-count: 1 !important;
  }
.fa-bounce-twice {
    animation-iteration-count: 2 !important;
  }
.tinder--card img,
.tinder--card h3,
.tinder--card p,
.tinder--card div {
  pointer-events: none;
}
.tinder--card label,
.tinder--card select {
	pointer-events: all;
}
.tinder--card h3.line-limit2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
    line-clamp: 2;
	-webkit-box-orient: vertical;
}
.tinder--buttons {
/*  flex: 0 0 170px; /*0 0 170 ---------------*/
    text-align: center;
	z-index: 99;
    transition: all 1s ease-in-out;
}
.tinder--buttons.inactive {
    opacity: 0;
    pointer-events: none;
}

.tinder--buttons div#love, 
.tinder--buttons div#undo, 
.tinder--buttons div#nope {
  border-radius: 50%;
  /* height: 60px; */
  height: 60px;
  /* width: 60px; */
  width: 60px;
  border: 0;
  background: #FFFFFF;
  display: inline-block;
  margin: 0 8px;
	box-shadow: var(--box-shadow-cont-small-lt);
    align-content: center;
    justify-content: center;
}

.tinder--buttons button:focus {
  outline: 0;
}

/* .tinder--buttons i {
    font-size: 32px;
    font-size: 25px;
    vertical-align: middle;
} */

.tinder--buttons i.fa-smaller {
	font-size: 24px !important;
}

	#numCont {
		position: relative;
		margin: 1rem 0;
	}
    
	#numSaved {
		padding: .25rem 1rem;
		height: 2.2rem;
		min-width: 2.2rem;
		background-color: var(--brand-color);
		color:white;
		border-radius: 100px;
        margin: 0 .75rem 0 -2px;
	}

@keyframes shake {
	0%, 25%, 100% {
    	transform: translateX(0);
 	}
  	5%, 15% {
    	transform: translateX(-20px) rotate(-2deg);
  	}
  	10%, 20% {
    	transform: translateX(20px) rotate(2deg);
  	}
}
@keyframes shake-little {
	0%, 25%, 100% {
    	transform: translateX(0);
 	}
  	5%, 15% {
    	transform: translateX(-5px);
  	}
  	10%, 20% {
    	transform: translateX(5px);
  	}
}

.shake-div {
  animation: shake 4s ease-in-out 0s 5 forwards;
}
.shake-div-once {
	animation: shake-little 2s ease-in-out 0s 1 forwards;
}




.overflow-hidden {
	overflow: hidden;
}



	.savedItem {
		width: calc(50% - 1rem);
		min-height: 5rem;
		background-color: white;
		outline: 4px solid rgba(255,255,255,.5);
		border-radius: 10px;
		margin-bottom: 1.5rem;
		box-shadow: var(--box-shadow-cont-small);
		transition: all 800ms cubic-bezier(0.77, 0, 0, 1);
		position: relative;
		overflow: hidden;
		float: left;
		margin-right: 2rem;
	}
    .recentViewedItem {
		width: 8rem;
		min-height: 5rem;
		background-color: white;
		outline: 4px solid rgba(255,255,255,.5);
		border-radius: 10px;
		margin-bottom: 1.5rem;
		box-shadow: var(--box-shadow-cont-small);
		transition: all 800ms cubic-bezier(0.77, 0, 0, 1);
		position: relative;
		overflow: hidden;
		float: left;
		margin-right: 1rem;
	}
    .recentViewedStorefrontItem {
        transition: all 800ms cubic-bezier(0.77, 0, 0, 1);
        float:left;
        margin-right:1rem;
        margin-bottom: 2rem;
    }
        .recentViewedStorefrontItem > div:nth-child(1) {
            width: 7rem;
            height:7rem;
            background-color:white;
            border-radius:8rem;
            outline: 4px solid rgba(255,255,255,.5);
            background-position: center center;
            background-size: cover;
            
        }
        .recentViewedStorefrontItem.alt-small {
            margin-bottom: 0;
        }
        .recentViewedStorefrontItem.alt-small > div:nth-child(1) {
            width: 5rem;
            height:5rem;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
        .recentViewedStorefrontItem > div:nth-child(2) > p.badge {
            position: relative;
            top: -1rem;
            text-wrap: normal;
            background-color:rgba(255,255,255,.85);
        }
        .recentViewedStorefrontItem.alt-small > div:nth-child(2) > p.badge {
            position: relative;
            top: -.5rem;
        }

        .savedItem.available {
            outline-color:var(--success-color);
        }
        .savedItem.unavailable {
            outline-color:var(--brand-color);
            opacity: .5;
        }
            .savedItem.unavailable > div:nth-child(1) {
                filter: grayscale(100%);
            }

        #saved-listing-cont,
        #saved-listing-cont-alt {
            position: absolute;
            top: 1.4rem;
            right: 4rem;
            background: var(--brand-color);
            color: white;
            z-index: 1;
            padding: .25rem 1rem;
            outline: 4px solid rgba(255,255,255,.5);
            border-radius: 25px;
            transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
            box-shadow: var(--box-shadow-cont-small);
        }
        #saved-listing-cont-alt {
            background-color: rgba(0,0,0,.85);
        }
        #saved-listing-cont.inactive,
        #saved-listing-cont-alt.inactive {
            right: 6rem;
            opacity: 0;
            pointer-events: none;
        }
.savedItem.active,
.recentViewedItem.active {
	outline-color: var(--success-color-lt);
}
	.savedItem.itin,
    .recentViewedItem.itin {
		width: 100%;
		margin-right: 0;
		display: flex;
		transform: none !important;	
	}

	.savedItem.even,
    .recentViewedItem.even {
		transform: rotate(-2deg);
	}
		.savedItem.inactive.even,
        .recentViewedItem.inactive.even {
			opacity: 0;
			transform: rotate(0) translateX(25%) translateY(25%);
		}
	.savedItem.odd,
    .recentViewedItem.odd {
		margin-right: 0;
		transform: translateY(20%) rotate(2deg);
	}
		.savedItem.inactive.odd,
        .recentViewedItem.inactive.odd {
			opacity: 0;
			transform: rotate(0) translateX(-25%) translateY(25%);
		}
	.savedItem > div:nth-child(1),
    .recentViewedItem > div:nth-child(1) {
		background: center center;
		background-size: cover;
		width: 100%;
		aspect-ratio: 1 / 1.2;
	}
	.savedItem.itin > div:nth-child(1),
    .recentViewedItem.itin > div:nth-child(1) {
		width: 5rem;
		aspect-ratio: 1 / 1;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}
	.savedItem > div:nth-child(2),
    .recentViewedItem > div:nth-child(2) {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 2rem .5rem .5rem .5rem;
		background: linear-gradient(0, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,0) 100%);
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		opacity: 1;
		align-self: center;
	}
	.savedItem.colorBlock > div:nth-child(2),
    .recentViewedItem.colorBlock > div:nth-child(2) {
		background: transparent;
		bottom: .75rem;
	}
	.savedItem > div:nth-child(2) > h5 {
		color:var(--text-dark);
		text-shadow:
			0 0 7px #fff,
			0 0 10px #fff,
			0 0 51px var(--primary-color-lt);
		}
    .recentViewedItem > div:nth-child(2) > h5 {
		color:var(--text-dark);
		text-shadow:
			0 0 7px #fff,
			0 0 10px #fff,
			0 0 51px var(--primary-color-lt);
        font-size: 1rem;
		}
	.savedItem.colorBlock > div:nth-child(2) > h5,
    .recentViewedItem.colorBlock > div:nth-child(2) > h5 {
		color: white;
		text-shadow: none;
	}
	.savedItem.itin > div:nth-child(2),
    .recentViewedItem.itin > div:nth-child(2) {
		position: relative;
		flex: 1;
		opacity: 1;
		padding: .5rem;
		align-self: flex-start;
	}
	.savedItem > div:nth-child(3),
    .recentViewedItem > div:nth-child(3) {
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 4rem;
		transform: translateX(-50%) translateY(-75%);
		text-shadow:
			0 0 7px #000,
			0 0 10px var(--success-color-lt),
			0 0 51px var(--success-color-lt);
	}

	.savedItem.colorBlock > div:nth-child(3),
    .recentViewedItem.colorBlock > div:nth-child(3) {
		text-shadow: none;
	}
/**/
	.savedItem.itin > div:nth-child(3),
    .recentViewedItem.itin > div:nth-child(3) {
		display: block;
		align-self: center;
		opacity: 1;
		
		position: static;
		top: 0;
		left: 0;
		font-size: inherit;
		transform: none;
		text-shadow: none;
		padding-right: 1rem;
	}
	.dateTitle {
		display: none;
		opacity: 0;
	}
	.dateTitle.itin {
		display: block;
		opacity: 1;
	}


/*/////////////////////////////
DETAILS PAGE
/////////////////////////////*/

sup {
    top: -.75em;
}

.details-title {
	color: var(--text-dark);
	text-shadow: 0 0 10px #fff,
		0 0 17px #fff, 
		0 0 25px #fff,
		0 0 31px var(--primary-color-lt);
	margin: -6.5rem 1rem 0 1rem;
	position: relative;
	min-height: 6rem;
}
.details-title > h1 {
	font-size: 3rem;
	line-height: 1.1; 
	letter-spacing: -.04em;
}
    .map-img {
        width: 100%;
        aspect-ratio: 1.4;
        background: url('/Hawaii/images/Hawaii/Dev-Map.svg') top center;
        background-size: cover;
        position: relative;
    }
        .map-img > div {
            background: white;
            position: absolute;
            bottom: 1.5rem;
            left: 1.5rem;
            right: 1.5rem;
            padding: 1rem 1.5rem;
            font-size: .9rem;
        }
        .map-img > div > span {
            display: block;
            font-size: .7rem;
        }
    .local-host-cont {
        background: var(--primary-color-slt);
        padding: 1rem;
        border-radius: 10px;
    }
    .local-host {
        
        display: flex;
        
        align-items: center;
        justify-content: center;

    }
    .host-picture {
        flex:1;
        aspect-ratio: 1;
        border-radius: 100%;
        background-position: center center;
        background-size: cover;
        outline: 4px solid rgba(255,255,255,.5);
    }
    .host-name {
        flex:5;
        padding: 0 1rem;
    }
    .host-message {
        flex:initial;
        font-size:1.25rem
    }
    .selection-box {
        outline: 1px solid grey;
        border-radius: .25rem;
        display: flex;
        padding: .5rem 1rem .5rem 1.5rem;
        align-content: center;
        justify-content: center;
        align-items: center;
        background: white;
    }
    .selection-box > div:first-child {
        flex: 1;
    }
    .selection-box > div:first-child > span {
        display: block;
    }
    
    .options-box {
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
    }
    .options-box:last-child {
        margin-bottom: 0;
    }
    .option-selector {
        flex: 1;
    }
    .option-title {
        flex: 5;
    }
    .option-price {
        flex: 1;
    }
    
    .suggested-list {
        display:flex; 
        max-width:100%; 
        overflow-x:scroll;
        padding-bottom: 1rem;
    }
    .suggested-listing-item {
        margin-right: .5rem;
    }
    .suggested-image {
        width: 10rem;
        aspect-ratio: 1.5;
        background-position: center right;
        background-size: cover;
    }
    
    
    #Book-Now-Cont {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(255,255,255,.8);
        padding: 1rem;
		padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 9999;
        box-shadow: 0 -10px 20px rgba(0,0,0,.1) !important;
        transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
    }
    #Book-Now-Cont.inactive {
        transform: translateY(9rem);
        opacity: 0;
    }
    
    .booknow-button {
        padding: .6rem 1.5rem;
        margin-top: .1rem;
        text-align: center;
        background-color: var(--primary-color);
        color: white;
        border-radius: 5rem;
        outline: 4px solid var(--primary-color-lt);
        font-size: 1rem;
        transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
        box-shadow: var(--box-shadow-cont-small);
        cursor: pointer;
    }
    .booknow-button:hover {
        outline-color: var(--primary-color-dk);
    }
    .booknow-button.locked {
        background-color: grey;
        outline-color: lightgrey;
        cursor: auto;
    }
    
    #img-cont {
        display: flex;
		background: radial-gradient(circle, rgba(255,255,255,1) 0%, var(--primary-color-slt) 100%);
		min-height: 60vh;
        /*aspect-ratio: 1;*/
        overflow-x: scroll;
        margin-bottom: .5rem;
        scroll-snap-type: x mandatory;
		/* clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); */
		margin-top: calc(env(safe-area-inset-top) * -1);
        transition: all 400ms cubic-bezier(0.77, 0, 0, 1);

        clip-path: ellipse(125% 95% at 16% 0%);
	}
    .img-cont-recent {
        display: flex;
        align-items: center;
        overflow-x: scroll;
        margin-bottom: .5rem;
        scroll-snap-type: x mandatory;
        transition: all 800ms cubic-bezier(0.77, 0, 0, 1);
        padding-bottom:1rem;
	}
	#img-cont.inactive {
		transform: translateY(calc(-110% - 3.5rem));
	}
    .img-item {
        width: 100vw;
        display: flex;
        align-content: center;
        justify-content: center;
        /*aspect-ratio: 1;*/
        overflow: hidden !important;
        scroll-snap-align: start;
		min-height: 100vw;
		height: 60vh;
		position: relative;
		align-items: center;
    }
    .img-item > img {
		position: absolute; /* Position the img inside the div */
		top: 50%; /* Start from the center */
		left: 50%; /* Start from the center */
		transform: translate(-50%, -50%); /* Center the image */
		width: 100%; /* Make the width of the image 100% */
		height: 100%; /* Make the height of the image 100% */
		object-fit: cover; /* Ensures the image covers the div */
    }
    .img-back, .img-fav {
        position: absolute;
        height: 2.5rem;
        width: 2.5rem;
        background: white;
        border-radius: 100%;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        outline: 4px solid rgba(255,255,255,.5);
        font-size: 1rem;
		z-index: 9999;
        transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
    }
    .img-back {
        left: 1rem;
        top: 1rem;
        box-shadow: var(--box-shadow-cont-small);
    }
    .img-fav {
        right: 1rem;
        top: 1rem;
        box-shadow: var(--box-shadow-cont-small);
    }
    .img-fav.isSaved {
        background: linear-gradient(-20deg, var(--brand-color-dk) 0%, var(--brand-color) 100%);
        outline-color: var(--brand-color-lt);
        color:white;
    }
    .img-fav.isAiSearch {
        /* height: 2rem;
        width: 2rem;
        top: .8rem;
        right: .8rem; */
        outline-width: 2px;
    }
    .img-count {
        position: absolute;
        top: 1.8rem;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,.8);
        color: white;
        padding: .25rem .5rem;
        border-radius: 20px;
        font-size: .5rem;
        z-index: 5;
    }
    .img-count > i:not(:first-child) {
        margin-left: .25rem;
    }

.highlights-cont > span {
	display: inline-block;
	margin-right: .5rem;
}
.highlights-cont > span:last-of-type {
	margin-right: 0;
}

#UnavailableCont,
#timeSlots,
#numDays,
#partySize,
#numQty,
#baseRate,
#PricingDetails-InlineCont {
	transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
	/* overflow: hidden; */
	height: fit-content;
}
#UnavailableCont.inactive,
#timeSlots.inactive,
#numDays.inactive,
#numDaysSelector.inactive,
#partySize.inactive,
#numQty.inactive,
#baseRate.inactive,
#PricingDetails-InlineCont.inactive {
	max-height: 1px;
	opacity: 0;
	visibility: hidden;
    display: none;
}

.dateSlots-Cont,
.timeSlot-Cont,
.partySize-Cont {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
    #Display-Times.inactive,
    #Display-NumDays.inactive {
        display: none;
    }
    .timeSlot-Wrapper.perHour {
        position: relative;
        width: 100%;
        min-height: 6rem;
    }
    .timeSlot-Cont.perHour {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
        height: 100%;
        position: relative;
    }
    .timeSlot-Wrapper.perHour::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(255,255,255,1) 100%);
        pointer-events: none;
    }
.dateSlot,
.timeSlot,
.partySizeSlot,
.searchSortFilter {
	border: 2px solid lightgrey;
	padding: .5rem 1rem;
	border-radius: 100px;
	margin:0 .25rem 1rem .25rem;
	transition: all 400ms ease-in-out;
	cursor: pointer;
}
.timeSlot {
    padding: .5rem;
}
	.timeSlot.perHour {
		border-radius: 0;
        margin: 0 -2px 1rem 0;
        text-align: center;
        display: inline-block;
        width: calc(100vw / 3.75);
	}
        .timeSlot-Wrapper.perHour .timeSlot.perHour {
            margin: 0 -4px 1.5rem 0;
        }
		.timeSlot.perHour.minLock {
			opacity: .6;
			pointer-events: none;
		}
		.timeSlot.perHour:first-of-type,
        .timeSlot.perHour.timeSlot-first {
			border-top-left-radius: 100px;
			border-bottom-left-radius: 100px;
            margin-left: .5rem !important;
		}
		.timeSlot.perHour:last-of-type,
        .timeSlot.perHour.timeSlot-last {
			border-top-right-radius: 100px;
			border-bottom-right-radius: 100px;
            margin-right: .5rem !important;
		}
		.timeSlot.perHour.range {
			background-color: var(--warn-color-slt);
		}
	.dateSlot.check,
	.timeSlot.check,
    .searchSortFilter.check {
		color: var(--warn-color-dk);
	}
		.dateSlot.check > i,
		.timeSlot.check > i,
		.searchSortFilter.check > i {
			color: var(--warn-color);
		}
	.timeSlot .remaining-label {
		color: var(--accent-color-dk);
	}

	.dateSlot.selected,
	.timeSlot.selected,
	.searchSortFilter.selected {
		color: white;
		background-color: var(--warn-color);
		border-color: var(--warn-color-lt);
		box-shadow: 0 20px 40px -10px rgba(50,50,93,.2), 0 20px 20px -15px rgba(0,0,0,.3) !important;
	}
	.dateSlot.selected > i,
	.timeSlot.selected > i,
	.searchSortFilter.selected > i,
    .timeSlot.selected .remaining-label {
		color: white;
	}

.partySizeItem {
	flex:1;
	margin:0 1rem;
}
.partySizeSlot {
	display: flex;
	margin-right:0;
	align-items: center;
	justify-content: center;
	align-content: center;
	text-align: center;
}
.partySizeBTN {
	flex:1;
	cursor: pointer;
}
.partySizeCount {
	flex:3;
}
.partySizeCount > h5 {
	margin: 0;
}

.reviewItem p {
	margin-bottom: 0;
}
	
.timeline-cont {
	margin: 1rem;
}
.timeline-item {
	margin-bottom: 1rem;
	display: flex;
	line-height: 1rem !important;
	position: relative;
}
.timeline-item.alt {
	margin-left: 2rem;
	margin-bottom: .5rem;
}
.timeline-item > div:nth-child(1) {
	width: .5rem;
	height: .5rem;
	outline: 4px solid var(--primary-color-lt);
	background: var(--primary-color);
	border-radius: 100%;
	margin-right: 1rem;
	margin-top: .25rem;
	position: absolute;
	z-index: 1;
}
.timeline-item::before {
	content: '';
	height: calc(100% + 1rem);
	width: 4px;
	background: var(--primary-color-lt);
	position: absolute;
	top: 0;
	left: calc(.25rem - 2px);
	z-index: 0;
	opacity: .5;
}
.timeline-item.alt::before {
	background: var(--brand-color-lt);
}
.timeline-item.last::before {
	background: transparent !important;
}
.timeline-item.alt > div:nth-child(1) {
	outline-color: var(--brand-color-lt);
	background-color: var(--brand-color);
}
.timeline-item > div:nth-child(2) {
	font-size: 1rem;
	padding-left: 1.75rem;
}

/* NEW DAYSLOT PICKER */
#DateSlots-Cont {
    display: flex;
    align-items: center;
    justify-content: center;
}
.daySlot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 400ms ease-in-out;
    cursor: pointer;
}
.daySlot > div {
    height: 2rem;
    width: 2rem;
    border: 2px solid lightgrey;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 400ms ease-in-out;
}
.daySlot-Title {
    font-family: soehne-halbfett;
    margin-bottom:.25rem;
    transition: all 400ms ease-in-out;
}
.daySlot-Date {
    opacity: .5;
    font-size:.65rem;
    margin-top: .25rem;
    transition: all 400ms ease-in-out;
}
.daySlot-available .daySlot-Title {
    color: var(--warn-color-dk);
}
.daySlot-available > div {
    border: 2px solid var(--warn-color-lt);
    color: var(--warn-color);
}
.daySlot-selected > div {
    background-color: var(--warn-color);
    border-color: var(--warn-color-lt);
    color: white;
    font-size: 1.125rem;
    box-shadow: 0 5px 15px -5px rgba(50,50,93,.5) !important
}
.daySlot-locked {
    cursor: default !important;
    opacity: 0.75;
}
.daySlot-locked > div {
    box-shadow: none !important;
}

/* TAP TO SHARE */
#TapToShare {
    transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
    transform-origin: top center;
}
#TapToShare.inactive {
    opacity: 0;
}
#TapToShare.centerStage {
    transform: scale(2.2);
    position: relative;
    z-index: 99;
}
#QR-cont {
    transition: all 400ms cubic-bezier(0.77, 0, 0, 1);
}
#QR-cont.inactive {
    opacity: 0;
}

/*/////////////////////////////
LOADING-SCREEN STYLES
/////////////////////////////*/
:root {
    /* Brand colors for the spinner dots */
    /* --pl-color1: #eb5d8f; */
    /* --pl-color2: #5eca44; */
    /* --pl-color3: #2c75de; */
    --pl-color1: var(--brand-color);
    --pl-color2: var(--success-color);
    --pl-color3: var(--primary-color);

    /* Default spinner size (can be overridden per-usage) */
    --pl-size: 10.5em;

    /* Overlay theme variables */
    --loading-overlay-bg: rgba(0, 0, 10, .65);
    --loading-card-bg: rgb(0, 0, 30);
    --loading-text-color: #fff;
    --loading-outline: rgba(0, 0, 0, .2);
    --loading-shadow-1: 0 50px 100px -20px rgba(129, 129, 240, 0.5);
    --loading-shadow-2: 0 30px 60px -30px rgba(255, 255, 255, 0.6);
}
#loading-screen {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--loading-overlay-bg);
    transition: all 600ms cubic-bezier(0.77, 0, 0, 1);
    transition-delay: 2500ms;
    z-index: 9999;
    backdrop-filter: blur(10px);
}
#loading-screen.light {
    --loading-overlay-bg: rgba(255, 255, 255, .55);
    --loading-card-bg: rgba(255, 255, 255, .65);
    --loading-text-color: lightgrey;
    color: lightgrey !important;
    /* --loading-outline: rgba(0, 0, 0, .08); */
    /* backdrop-filter: blur(0); */
}

#loading-screen.inactive {
    transition-delay: 0ms;
    transform: scale(.8);
    opacity: 0;
    pointer-events: none;
    border-radius: 3rem;
}

#loading-screen.now {
    transition-delay: 0ms !important;
}

#loading-screen #loading-bg {
    position: fixed;
    top: 52%;
    left: 50%;
    width: 12rem;
    height: 14rem;
    transform: translate(-50%, -50%);
    background-color: var(--loading-card-bg);
    border-radius: 3rem;
    z-index: -1;
    display: flex;
    align-items: end;
    justify-content: center;
    outline: 8px solid var(--loading-outline);
    box-shadow: var(--loading-shadow-1), var(--loading-shadow-2);
}
#loading-screen.small {
    color: lightgrey;
}
#loading-screen.small #loading-bg {
    width: 5rem;
    height: 5rem;
    top: 50%;
    border-radius: 1rem;
    outline: 4px solid var(--loading-outline);
}
#loading-screen.small #loading-bg #loading-text {
    display: none;
}

#loading-screen #loading-text {
    font-size: .75rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    color: var(--loading-text-color);
}

.pl {
    --dur: 2s;
    animation-name: spin;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    margin: auto;
    position: relative;
    width: var(--pl-size);
    height: var(--pl-size);
    font-size: calc(var(--pl-size) / 10.5);
    color: inherit;
}

.pl,
.pl__dot-layer {
    animation-duration: var(--dur);
    animation-iteration-count: infinite;
}

.pl__dot {
    top: calc(50% - 0.875em);
    left: calc(50% - 0.875em);
    width: 1.75em;
    height: 1.75em;
}

.pl__dot,
.pl__dot-layer {
    position: absolute;
}

/* Updated colors here */
.pl__dot-layer {
    animation-name: scale-down-1;
    animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
    background-color: var(--pl-color1);
    /* Pinkish Red */
    border-radius: 50%;
    mix-blend-mode: var(--pl-blend, screen);
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
}

.pl__dot-layer:nth-child(2) {
    animation-name: scale-down-2;
    background-color: var(--pl-color2);
    /* Green */
    transform: translate(0, 20%) scale(0.85);
}

.pl__dot-layer:nth-child(3) {
    animation-name: scale-down-3;
    background-color: var(--pl-color3);
    /* Blue */
    transform: translate(0, 40%) scale(0.7);
}

.pl__dot:nth-child(even) {
    top: calc(50% - 1.125em);
    left: calc(50% - 1.125em);
    width: 2.25em;
    height: 2.25em;
}

.pl__dot:nth-child(even) .pl__dot-layer {
    animation-name: scale-up-1;
    transform: translate(0, 0) scale(0.33);
}

.pl__dot:nth-child(even) .pl__dot-layer:nth-child(2) {
    animation-name: scale-up-2;
    transform: translate(0, 15%) scale(0.3);
}

.pl__dot:nth-child(even) .pl__dot-layer:nth-child(3) {
    animation-name: scale-up-3;
    transform: translate(0, 30%) scale(0.27);
}

.pl__dot:nth-child(1) {
    transform: rotate(0deg) translate(0, -4em);
}

.pl__dot:nth-child(2) {
    transform: rotate(-60deg) translate(0, -4em);
}

.pl__dot:nth-child(2) .pl__dot-layer {
    animation-delay: calc(var(--dur) * 0.02);
}

.pl__dot:nth-child(3) {
    transform: rotate(-120deg) translate(0, -4em);
}

.pl__dot:nth-child(3) .pl__dot-layer {
    animation-delay: calc(var(--dur) * 0.04);
}

.pl__dot:nth-child(4) {
    transform: rotate(-180deg) translate(0, -4em);
}

.pl__dot:nth-child(4) .pl__dot-layer {
    animation-delay: calc(var(--dur) * 0.06);
}

.pl__dot:nth-child(5) {
    transform: rotate(-240deg) translate(0, -4em);
}

.pl__dot:nth-child(5) .pl__dot-layer {
    animation-delay: calc(var(--dur) * 0.08);
}

.pl__dot:nth-child(6) {
    transform: rotate(-300deg) translate(0, -4em);
}

.pl__dot:nth-child(6) .pl__dot-layer {
    animation-delay: calc(var(--dur) * 0.1);
}

/* Animations */
@keyframes scale-down-1 {

    from,
    90%,
    to {
        transform: translate(0, 0) scale(1);
    }

    30% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(0, -45%) scale(0.57);
    }

    40% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(10%, -45%) scale(0.57);
    }

    50% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(-10%, -45%) scale(0.57);
    }

    60% {
        animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
        transform: translate(0, -45%) scale(0.57);
    }
}

@keyframes scale-down-2 {

    from,
    90%,
    to {
        transform: translate(0, 20%) scale(0.85);
    }

    30%,
    60% {
        transform: translate(0, -45%) scale(0.57);
    }
}

@keyframes scale-down-3 {

    from,
    90%,
    to {
        transform: translate(0, 40%) scale(0.7);
    }

    30% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(0, -45%) scale(0.57);
    }

    40% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(-10%, -45%) scale(0.57);
    }

    50% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(10%, -45%) scale(0.57);
    }

    60% {
        animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
        transform: translate(0, -45%) scale(0.57);
    }
}

@keyframes scale-up-1 {

    from,
    90%,
    to {
        transform: translate(0, 0) scale(0.33);
    }

    30% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(0, 0) scale(1);
    }

    40% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(10%, 0) scale(1);
    }

    50% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(-10%, 0) scale(1);
    }

    60% {
        animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
        transform: translate(0, 0) scale(1);
    }
}

@keyframes scale-up-2 {

    from,
    90%,
    to {
        transform: translate(0, 15%) scale(0.3);
    }

    30%,
    60% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes scale-up-3 {

    from,
    90%,
    to {
        transform: translate(0, 30%) scale(0.27);
    }

    30% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(0, 0) scale(1);
    }

    40% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(-10%, 0) scale(1);
    }

    50% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: translate(10%, 0) scale(1);
    }

    60% {
        animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
        transform: translate(0, 0) scale(1);
    }
}

@keyframes spin {
    from {
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
        transform: rotate(120deg);
    }

    33.33% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        transform: rotate(130deg);
    }

    66.67% {
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
        transform: rotate(255deg);
    }

    to {
        transform: rotate(240deg);
    }
}

/** Reusable spinner utilities **/
.pl--inline {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

.pl--sm {
    --pl-size: 1.75rem;
}

.pl--md {
    --pl-size: 2.5rem;
}

.pl--lg {
    --pl-size: 4rem;
}

/* On light backgrounds, avoid "screen" wash-out */
.pl--on-light .pl__dot-layer {
    mix-blend-mode: multiply;
}

/* Inline theming helpers */
.pl--light {
    --pl-blend: multiply;
}

/* better on white UIs */
.pl--dark {
    --pl-blend: screen;
}

/* explicit dark-mode default */
.pl--normal {
    --pl-blend: normal;
}

/* no blending */

/* Single-color mode driven by --pl-mono (falls back to currentColor) */
.pl--mono {
    --pl-color1: var(--pl-mono, currentColor);
    --pl-color2: var(--pl-mono, currentColor);
    --pl-color3: var(--pl-mono, currentColor);
}


/*/////////////////////////////
DASHBOARD STYLES
/////////////////////////////*/

	.dashboard-3-col {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
        gap: .5rem;
        padding: 0 .5rem .5rem .5rem;
	}
.dashboard-highlight-item {
    flex: 1;
    padding: 1rem 0;
    background: #f1f2f4;
    border-radius: 10px;
}

.redtulip-card {
    border-radius: 10px;
    min-height: 14rem;
    box-shadow:var(--box-shadow-cont-small);
    display: flex;
    outline: 4px solid rgba(255,255,255,.5);
    background: url('https://cdn.redtulip.io/images/RT-Card.jpg') center center no-repeat;
    background-size: cover;
    line-height: 1 !important;
}
.redtulip-card h5, .redtulip-card h3, .redtulip-card p {
    margin:0;
    line-height: 1 !important;
    filter: drop-shadow(0 2px rgba(255,255,255,.5));
}
.keeper-wallet-balance {
    display: flex;
    align-items: center;
    align-self: flex-end;
    flex:1;
}
.keeper-wallet-balance > div {
    flex: 1;
}


/* MESSAGES */
.line-clamp-1 {
	display: -webkit-box !important;
	-webkit-line-clamp: 1;
    line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
 .line-clamp-1-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.line-clamp-2 {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
    line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.line-clamp-3 {
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
    line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


.align-self-center {
	align-self: center;
}

/* STREAMLINE STYLES */
.sl-brand.sl-item:after {
	border-color: var(--brand-color) !important;
}

/*/////////////////////////////
IMG COLORS STYLES
/////////////////////////////*/
.imgColors-cont {
    display: flex;
    position: relative;
    margin-top:-4rem;
    overflow: visible;
}
.imgColors-item {
    width: calc(70%);
    aspect-ratio: 1;
    border-radius: 100%;
    background-color: var(--itemColor);
    /* background: radial-gradient(circle at center,
                rgba(255, 51, 102, 1) 0%,
                rgba(255, 51, 102, 0) 70%); */
    /* filter: blur(30px); */
    position: absolute;
    transform:translateX(-50%);
    transition: all 800ms ease-out;
}
/* .imgColors-item.cards {
    width: calc(70%);
    aspect-ratio: 1;
    border-radius: 100%;
    background-color: var(--itemColor);
    background: radial-gradient(circle at center, var(--itemColorF) 35%, var(--itemColor0) 70%);
    position: absolute;
    transform:translateX(-50%);
    transition: all 800ms ease-out;
} */
.imgColors-item.cards {
    width: 130%;
    aspect-ratio: 1;
    border-radius: 100%;
    background: radial-gradient(circle at center, var(--itemColorF) 45%, var(--itemColor0) 70%);
    position: absolute;
    transform: translateX(-50%);
    transition:
        --itemColor0 4s ease-out,
        --itemColorF 4s ease-out,
        transform 800ms ease-out;
    /* keep transforms smooth too */
}
.cluster-hero-cont {
    transform: perspective(400px) rotateY(15deg);
    transform-origin: 50% 20%;
    height: 100%;
}
/* Enable interpolation of our color custom properties */
@property --itemColor0 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(0, 0, 0, 0);
}

@property --itemColorF {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(0, 0, 0, 1);
}
.imgColors-item {
    --base-y: -12%;
    --offset-amount: 2.5%;
}

.imgColors-item.c1 {
    left: 0;
    transform: translate(-35%, calc(var(--base-y) + 0 * var(--offset-amount)));
    animation-delay: .5s;
}

.imgColors-item.c2 {
    left: 25%;
    transform: translate(-35%, calc(var(--base-y) + 1 * var(--offset-amount)));
}

.imgColors-item.c3 {
    left: 50%;
    transform: translate(-35%, calc(var(--base-y) + 2 * var(--offset-amount)));
    animation-delay: 1.5s;
}

.imgColors-item.c4 {
    left: 75%;
    transform: translate(-35%, calc(var(--base-y) + 3 * var(--offset-amount)));
    animation-delay: 3s;
}

.imgColors-item.c5 {
    left: 100%;
    transform: translate(-35%, calc(var(--base-y) + 4 * var(--offset-amount)));
    animation-delay: 1s;
}
.imgColors-content {
    position: relative;
    z-index: 2;
    width: 100%;
}
.imgColors-content.cards {
    position: relative;
    z-index: 2;
    width: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 100%);
    padding: .5rem;
    line-height: normal;
}
/* imgColors for tiles */
.imgColors-cont-tile {
    display: flex;
    position: relative;
    margin-top: 0;
    overflow: visible;
}
.cluster-thumb .imgColors-cont-tile {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.imgColors-content-tile {
    position: relative;
    z-index: 2;
    width: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, 0) 100%);
    padding: .5rem;
    line-height: normal;
    text-transform: capitalize;
}
.savedItem.tiles > div:nth-child(2) {
    background: transparent;
    padding: 0;
}
.recentViewedItem.tiles > div:nth-child(2) {
    padding: 0;
    background: transparent;
}


/*/////////////////////////////
APPLE PAY STYLES
/////////////////////////////*/
/* #apple-pay-button {} */

#apple-pay-button::after {
    content: "or";
    display: block;
    /* ensures the text is on its own line */
    text-align: center;
    /* centers the text */
    color: lightgrey;
    margin-top: .25rem;
    /* space above/below the text */
    font-size: 14px;
    /* adjust as you like */
}

.button-applepay-tap {
    border-radius: 50px !important;
    height: 50px !important;
}

/*/////////////////////////////
GOOGLE MAPS STYLES
/////////////////////////////*/
#map {
    width: calc(100% + 2rem);
    min-height: 300px;
    aspect-ratio: 1;
    margin-left: -1rem;
    margin-right: -1rem;
}
.pac-item{
    padding-top:.5rem;
    padding-bottom:.5rem;
}

#clear-address, #clear-city {
    float: right;
    cursor: pointer;
    width: 10%;
    text-align: right;
    transition: all 400ms ease-out;
}
#clear-address.inactive, #clear-city.inactive {
    opacity: 0;
    pointer-events: none;
}

/*/////////////////////////////
SELECT2 STYLES
/////////////////////////////*/
.select2.select2-container.select2-container--default {
    margin-top:-.25rem;
}
.select2-container--default .select2-dropdown {
    border-radius: 10px;
    box-shadow: var(--box-shadow-cont-small);
    outline: 2px solid lightgrey;
    overflow: hidden;
}
.select2-search__field {
    border:none !important;
    outline: none;
    box-shadow: none;
    padding: .5rem;
    margin: 0;
    background: transparent;
    color: var(--text-dark);
    font-size: 1rem;
    font-family: soehne-halbfett,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    font-weight: normal !important;
}
.select2-results {
    border-top: 2px solid lightgrey;
}
.select2-results__group {
    color: var(--text-dark) !important;
}
.select2-container--default .select2-selection {
    border: none;
}
/* .select2-container--default .select2-results__option .select2-results__option {
    padding-left: 1.5rem !important;
} */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--primary-color);
    font-size: 1rem;
    font-family: soehne-halbfett,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
        font-weight: normal !important;
}
.select2-brand .select2-selection__rendered {
    color: var(--brand-color) !important;
}
.select2-accent .select2-selection__rendered {
    color: var(--accent-color-dk) !important;
}
.select2-results__option {
    padding: .5rem;
    text-indent: .5rem !important;
}
.select2-results__option.select2-results__option--highlighted {
    background-color: var(--primary-color-lt) !important;
    color: white !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--primary-color) !important;
    color: white !important;
}
/* .select2-container--default .select2-selection {
    border:none;
} */
.select2-container {
    width: 100% !important;
}

/*/////////////////////////////
SUMMERNOTE STYLES
/////////////////////////////*/
.note-editable.card-block {
    min-height: 10rem;
}
.note-editor.note-frame.card {
    border-radius: 10px;
}
.btn-group.note-view {
    float:right;
}
body.note-fullscreen-body #Step4,
body.note-fullscreen-body #Step2,
.transform-none {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
}
.note-editor.note-frame.fullscreen,
.note-editor.note-airframe.fullscreen {
    top: calc(env(safe-area-inset-top) + 4.25rem) !important;
    outline: 4px solid rgba(255,255,255,.5);
}

.note-editable.card-block p {
    margin-bottom: 0.5rem;
}
.note-editable.card-block > p b,
.note-editable.card-block > b {
    color: var(--text-dark) !important;
    font-size: 1rem;
    font-family: soehne-halbfett,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    font-weight: normal !important;
}
/* .note-editable.card-block li p {
    margin-bottom: 0;
} */

/*/////////////////////////////
NEARBY STYLES
/////////////////////////////*/
#map-container {
    height: 50vh;
    min-height: 50vh;
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 95%);
    transition: all 800ms var(--default-easing);
}
#map-container.inactive {
    transform: translateY(calc(-110%));
}
#map-container.places {
    clip-path: ellipse(125% 95% at 16% 0%);
    height: 30vh;
    min-height: 30vh;
}
#map-container.place-details {
    clip-path: ellipse(125% 95% at 16% 0%);
}
#map.places-map {
    min-height: 200px;
    aspect-ratio: 0;
    height: 30vh;
}

.nearbyScroller {
    height: 360px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    position: fixed;
    margin:0;
    padding:0 .5rem;
    width: 100%;
    top:45%;
}
.nearbyScroller > .scrollerItem {
    scroll-snap-align: start;
    width: 100%;
    position: relative;
    height: 100%;
    /* background-color:rgba(0,0,0,.5); */
    /* border-bottom:5px solid red; */
}
.nearbyDisplay {
    position: fixed;
    width: 100%;
    max-width: calc(500px + 1rem);
    margin: 0;
    padding: 0;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 .5rem;
    pointer-events: none;
    /* opacity: .2 !important; */
}
.nearbyScroller {
    z-index: 30;
    pointer-events: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scroll-snap-stop: always;
}
.nearbyScroller.inactive {
    pointer-events: none;
}
.nearbyDisplay .img-fav {
    pointer-events: auto;
    cursor: pointer;
}
.nearbyDisplay {
    z-index: 20;
    pointer-events: none;
    transition: all 800ms var(--default-easing);
}
.nearbyDisplay.inactive {
    transform: translateX(-75%);
    opacity: 0;
    pointer-events: none;
}
.nearbyDisplay video {
    pointer-events: none !important;
    touch-action: none;
    -webkit-user-drag: none;
    user-select: none;
}
.displayItem {
    position: absolute;
    width: calc(100% - 1rem);
    transition: all 800ms var(--default-easing);
}
.displayItem h3.displayTitle {
    line-height: 2rem;
    max-height: 4rem;
    min-height: 4rem;
    overflow: hidden;
    display: flex !important;
    align-items: end;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    text-overflow: ellipsis;
}
.displayItem.tinder--card {
    min-height: 42vh !important;
}
.displayItem.closer {
    transform: translateY(-20%);
    opacity: 0;
}
.displayItem.active {
    /* background-color: rgba(0,255,0,.5); */
    opacity: 1;
    transform: translateY(0);
}
.displayItem.active.isScrollingDown {
    transform: translateY(-2%) scale(1);
}
.displayItem.active.isScrollingUp {
    transform: translateY(2%) scale(1);
}
.displayItem.further {
    transform: translateY(20%) scale(0.7);
    opacity: 0;
}
.displayItem.further.nextUp {
    transform: translateY(8%) scale(0.9);
    opacity: .9;
}
.displayItem.further.nextNextUp {
    transform: translateY(16%) scale(0.8);
    opacity: .9;
}
.displayItem.inactive {
    transform: translateY(30%) scale(0.5) !important;
    opacity: 0 !important;
}
.custom-marker-user {
    position: absolute;
    left: 0;
    top: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--brand-color);
    outline: 4px solid rgba(255, 255, 255, .5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%);
    /* center on lat/lng */
    pointer-events: none;
    /* keep map clicks clean */
    /* animation: markerPulse 3s infinite; */
}
.custom-marker-user::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5rem;
    height: 5rem;
    /* size of the outward pulse */
    border-radius: 100%;
    background: var(--brand-color);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    animation: markerRipple 3s infinite;
}
.custom-marker-user,
.custom-marker-user::after {
    animation-play-state: paused;
}

.custom-marker-user.run,
.custom-marker-user.run::after {
    animation-play-state: running;
}
.custom-marker-location,
.custom-marker-place {
    position: absolute;
    /* transform: translate(-50%, -50%); */
    background: var(--primary-color);
    color: #fff;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    outline: 4px solid rgba(255, 255, 255, .5);
    font-size: .75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    pointer-events: auto;
    transition: transform .2s, box-shadow .2s, background .2s;
    top:-.5rem;
    left:-.5rem;
}
.custom-marker-place {
    background: var(--warn-color-dk);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    top:-.75rem;
    left:-.75rem;
}

.custom-marker-location.is-active,
.custom-marker-place.is-active {
    background: var(--success-color);
    /* transform: translate(-50%, -50%); */
    /* transform: scale(1.2); */
    box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
    top:-.75rem;
    left:-.75rem;
}
.custom-marker-location.is-active::after,
.custom-marker-place.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    background: var(--success-color);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    animation: markerRipple 3s infinite;
}

.custom-marker-location.bounce,
.custom-marker-place.bounce {
    animation: markerBounce .6s ease-in-out 2;
}

@keyframes markerBounce {

    0%,
    100% {
        transform: translate(-50%, -110%) scale(1.1);
    }

    50% {
        transform: translate(-50%, -125%) scale(1.1);
    }
}

@keyframes markerPulse {

    0%,
    5%,
    15%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    10% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes markerRipple {
    10% {
        opacity: .5;
        transform: translate(-50%, -50%) scale(0.2);
    }

    70% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/*/////////////////////////////
NEARBY STYLES
/////////////////////////////*/

#nearby-instructions {
    position: fixed;
    inset:0;
    z-index: 40;
    background:rgba(0,0,0,.65);
    /* backdrop-filter: blur(5px); */
    transition: all 800ms var(--default-easing);
}
#nearby-instructions.inactive {
    transform: scale(.8);
    opacity: 0;
    pointer-events: none;
}
#nearby-user, #nearby-location, #nearby-location-active, #nearby-user-info, #nearby-location-info, #nearby-location-info-active {
    position: absolute;
}
#nearby-user {
    left:50%;
    top:25%;
    transform: translate(-50%, -50%);
}
    #nearby-user-info {
        left:50%;
        top:25%;
        transform: translate(-50%, 15px);
        line-height: 0.85rem;
    }
#nearby-location {
    right:50%;
    top:25%;
    transform: translate(110px, 60px);
}
    #nearby-location-info {
        right: 50%;
        top: 25%;
        transform: translate(144px, 83px);
        line-height: 0.85rem;
    }
#nearby-location-active {
    right:38%;
    top:20%;
}
    #nearby-location-info-active {
        right:38%;
        top:20%;
        transform: translate(calc(50% - .5rem), -38px);
        line-height: 0.85rem;
    }
#nearby-card {
    position: absolute;
    top:calc(45% - 4px);
    width:calc(100% - 1rem);
    left:.5rem;
    border:4px solid white;
    border-radius: 10px;
    height: calc(42vh + 8px);
}
#nearby-card .nearby-close {
    position: absolute;
    top:0;
    right:.5rem;
    color:white;
    font-size: 2rem;
}
#nearby-card .nearby-upArrow, #nearby-card .nearby-downArrow {
    position: absolute;
    left:50%;
    transform: translate(-50%, -50%);
    color:white;
    font-size: 3rem;
    cursor: pointer;
}
#nearby-card .nearby-upArrow {
    top:4rem;
}
#nearby-card .nearby-downArrow {
    bottom:-0.5rem;
    transform: translate(-50%, -50%) rotate(180deg);
}
#nearby-card .nearby-card-content {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:100%;
}

/* Container that masks the strip */
.displayItem.cluster .cluster-hero {
  overflow: hidden;
  position: absolute;
  top: 1rem;
  left: 0;
}
.cluster-hero.cluster-hero--alt {
    transform: translateY(100%);
    padding-top: .5rem;
}
.cluster-hero.cluster-hero--alt2 {
    transform: translateY(200%);
    padding-top: .75rem;
}

.displayItem.cluster .cluster-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  will-change: transform;
  transform: translate3d(0,0,0);
  animation: cluster-marquee var(--cluster-strip-duration, 35s) linear infinite;
  animation-play-state: paused;
}

.displayItem.cluster.active .cluster-strip {
  animation-play-state: running;
}
.displayItem.cluster .cluster-strip--rev {
    animation-direction: reverse;
    --cluster-strip-duration: 30s;
}
.displayItem.cluster .cluster-strip--bottom {
    --cluster-strip-duration: 45s;
}
.displayItem.cluster .cluster-thumb {
  flex: 0 0 auto;
  width: 38vw;
  max-width: 200px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.displayItem.cluster .cluster-strip::-webkit-scrollbar { display: none; }
.displayItem.cluster .cluster-strip { scrollbar-width: none; }

@keyframes cluster-marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-50% - .5rem),0,0); } /* move by one copy width */
}
#place-details {
    transition: all 800ms var(--default-easing);
}
#place-details.inactive {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

#nearbyFiltersBTN-Cont {
    position: fixed;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    z-index: 100;
    transition: all 400ms var(--default-easing);
}
#nearbyFiltersBTN-Cont.inactive {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

#NearbyFilters-Cont {
    position: fixed;
    inset:0;
    z-index: 200;
    background:rgba(0,0,0,.65);
    transition: all 400ms var(--default-easing);
    backdrop-filter: blur(5px);
}
#NearbyFilters-Cont .rbox {
    width: calc(100% - 2rem);
    overflow: scroll;
    max-height: calc(100vh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#NearbyFilters-Cont.inactive {
    transform: scale(.8);
    opacity: 0;
    pointer-events: none;
    border-radius: 3rem;
}
#searchLocationBTN-Cont {
    position: sticky;
    bottom: 0;
    background: white;
}

/* NEARBY FILTERS STYLES */
.filterBTN {
    display: block;
    border: 2px solid lightgrey;
    line-height: 1.5;
    border-radius: 10px;
    transition: all 400ms ease-out;
    width: 100%;
    font-size: 1rem;
    padding: .5rem .4rem;
}
.filterBTN.alt {
    line-height: 1.2;
    padding: .5rem .4rem .5rem 1.8rem;
}
.filterBTN.alt i {
    position: absolute;
    left: .9rem;
    top: 20%;
}

.filter-outline-experiences i {
    color: var(--warn-color-dk);
}
.filter-outline-experiences.hover i {
    color: white;
}
.filter-outline-experiences.hover {
    border-color: #ac5a9d;
    background: linear-gradient(10deg, var(--warn-color-dk) 0%, var(--brand-color) 100%) !important;
    color: white !important;
}

.filter-outline-goods i {
    color: var(--primary-color-dk);
}
.filter-outline-goods.hover i {
    color: white;
}
.filter-outline-goods.hover {
    border-color: #419bbc;
    background: linear-gradient(10deg, var(--primary-color-dk) 0%, var(--accent-color) 100%) !important;
    color: white !important;
}

.filter-outline-dark {
    border-color: #1e2835;
}
.filter-outline-dark i {
    color: #1e2835;
}
.filter-outline-dark.hover i {
    color: white;
}
.filter-outline-dark.hover {
    border-color: #1e2835;
    background: linear-gradient(10deg, var(--text-dark) 0%, #6C757D 100%) !important;
    color: white !important;
}

.filter-outline-warning i {
    color: var(--warning-color);
}
.filter-outline-warning.hover i {
    color: white;
}
.filter-outline-warning.hover {
    border-color: var(--warning-color);
    background: linear-gradient(10deg, var(--warning-color-dk) 0%, var(--warning-color) 100%) !important;
    color: white !important;
}

.filter-outline-primary i {
    color: var(--primary-color);
}
.filter-outline-primary.hover i {
    color: white;
}
.filter-outline-primary.hover {
    border-color: var(--primary-color);
    background: linear-gradient(10deg, var(--primary-color-dk) 0%, var(--primary-color) 100%) !important;
    color: white !important;
}

.filter-outline-accent i {
    color: var(--accent-color);
}
.filter-outline-accent.hover i {
    color: white;
}
.filter-outline-accent.hover {
    border-color: var(--accent-color);
    background: linear-gradient(10deg, var(--accent-color-dk) 0%, var(--accent-color) 100%) !important;
    color: white !important;
}

.filter-outline-success i {
    color: var(--success-color);
}
.filter-outline-success.hover i {
    color: white;
}
.filter-outline-success.hover {
    border-color: var(--success-color);
    background: linear-gradient(10deg, var(--success-color-dk) 0%, var(--success-color) 100%) !important;
    color: white !important;
}

.filter-outline-warn i {
    color: var(--warn-color);
}
.filter-outline-warn.hover i {
    color: white;
}
.filter-outline-warn.hover {
    border-color: var(--warn-color);
    background: linear-gradient(10deg, var(--warn-color-dk) 0%, var(--warn-color) 100%) !important;
    color: white !important;
}

.filter-outline-brand i {
    color: var(--brand-color);
}
.filter-outline-brand.hover i {
    color: white;
}
.filter-outline-brand.hover {
    border-color: var(--brand-color);
    background: linear-gradient(10deg, var(--brand-color-dk) 0%, var(--brand-color) 100%) !important;
    color: white !important;
}





/*/////////////////////////////
GOODS STYLES
/////////////////////////////*/
.option-value-btn {
    text-transform: capitalize;
    margin:.25rem;
}
.option-value-btn.out-of-stock {
    border-color: lightgrey !important;
    color: lightgrey !important;
    opacity: 0.5;
    pointer-events: none;
}

/* OPTION SETS STYLES */
/* .OS_scope {
    
} */

.OS_scope label {
    display: block;
    margin: .75rem 0 .25rem;
    font-weight: 600
}

.OS_scope input {
    width: calc(80% - 1rem);
    padding: .5rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    text-transform: capitalize;
}

.OS_scope button {
    padding: .6rem 0;
    font-size: 1rem;
    line-height: 1rem;
    border: 4px solid var(--accent-color);
    border-radius: 10px;
    background: var(--accent-color-dk);
    color: white;
    width: 20%;
}
.OS_scope button.btn-block {
    width: 100%;
    border-radius: 100px;
}

.OS_scope .option-values {
    float: right;
}

.OS_scope .option-sets-cont {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.OS_scope .submit-btn {
    display: block;
    width: 100%;
    padding: .6rem 1.2rem;
    font-size: 1rem;
    border: 0;
    border-radius: 100px;
    background: var(--primary-color);
    outline: 4px solid var(--primary-color-lt);
    color: #fff;
    margin-top: 1rem;
}

.OS_scope .option-set {
    position: relative;
}

.OS_scope .option-set .option-values {
    position: absolute;
    right: 0;
    top: 0;
}

.OS_scope .option-values-cont {
    background-color: rgba(0, 0, 10, .65);
    transition: all 600ms cubic-bezier(0.77, 0, 0, 1);
    backdrop-filter: blur(5px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    padding: calc(env(safe-area-inset-top) + 11.5rem) 1rem 1rem;
    overflow-y: scroll;
}

.OS_scope .option-values-cont.inactive {
    transform: scale(0.8);
    opacity: 0;
    pointer-events: none;
}
.OS_scope .ov-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.OS_scope .os-suggest {
    position: absolute;
    left: 0;
    top: 2.5rem;
    width: calc(75% - 2rem);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    padding: .25rem 0;
    display: none;
    z-index: 5;
}

.OS_scope .os-suggest li {
    list-style: none;
    padding: .45rem .6rem;
    cursor: pointer;
}

.OS_scope .os-suggest li:hover {
    background: #f5f5f5;
}

.OS_scope .os-suggest .hint {
    padding: .45rem .6rem;
    color: #888;
    font-size: .9rem;
}

/* DROPDOWN STYLES */
.dropdown-menu {
    animation: dropdownMenu-Down 300ms var(--default-easing);
    border-radius: 10px;
    opacity: 0;
    box-shadow: var(--box-shadow-cont-small);
}
.dropdown-menu.show {
    opacity: 1;
    top: 0;
}
/* get .dropdown-menu x-placement=top-end  */
.dropdown-menu[x-placement="top-end"] {
    animation: dropdownMenu-Up 300ms var(--default-easing);
}
@keyframes dropdownMenu-Down {
    from {
        opacity: 0;
        top: -10px;
    }
}
@keyframes dropdownMenu-Up {
    from {
        opacity: 0;
        top: 10px;
    }
}


/* /////////////////////////////
PhotoSwipe custom video 
//////////////////////////////*/
.pswp__video-container {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pswp__video-container video.pswp__video {
    background: #000;
    width: 100%;
    height: 90vh;
    max-height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    object-fit: contain;
    pointer-events: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ISLAND SELECT FROM ROOT */
#island-select-cont {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .5);
    z-index: 9999;
    backdrop-filter: blur(10px);
    padding: 2rem;
    padding-top: calc(env(safe-area-inset-top) + 2rem);
    padding-bottom: calc(env(safe-area-inset-bottom) + 5rem);
    width: 100vw;
    min-height: 100vh;
    overflow-y: scroll;
    transition: all 800ms cubic-bezier(0.77, 0, 0, 1);
}

#island-select-cont.inactive {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
    border-radius: 20px;
    overflow: hidden;
}

.j-button-light {
    background: white !important;
    outline-color: rgba(255, 255, 255, .5) !important;
    color: var(--brand-color) !important;
}

.j-button-light:hover {
    color: white !important;
}

#island-select-cont .savedItem {
    line-height: 1;
}