:root {
		--main-grey: #2c2b2b;
		--light-grey: #616060;
		--modal-grey :#303030;
		--text-main: #fe9b38 !important;
		--mint-green: #57e5af !important;
        --lavender: #d790ff !important;
		--neu-box-shadow: 7px 7px 14px #1a1919, -7px -7px 14px #3e3d3d !important;
		--neu-inset-box-shadow: inset 6px 6px 9px #1a1919, inset -6px -6px 9px #3e3d3d !important;
		--neu-inset-shallow-box-shadow: inset 4px 4px 8px #1a1919, inset -4px -4px 8px #3e3d3d !important;
	}

	body {
		min-height: 200vh;
		background-color: #2c2b2b;
	}

/*  .neu {
		background: inherit !important;
		box-shadow: 7px 7px 14px #1a1919,
					-7px -7px 14px #3e3d3d !important;
	}*/

	.neu {
		background: inherit !important;
		box-shadow:
			inset 0 0 0 rgba(0, 0, 0, 0), 
			inset 0 0 0 rgba(255, 255, 255, 0), 
			7px 7px 14px rgba(26, 25, 25, 1), 
			-7px -7px 14px rgba(62, 61, 61, 1);
/*		transition: box-shadow 1s ease;*/
	}

	.neu-shallow {
		box-shadow:
			inset 0 0 0 rgba(0, 0, 0, 0), 
			inset 0 0 0 rgba(255, 255, 255, 0), 
			5px 5px 12px rgba(26, 25, 25, 1), 
			-5px -5px 12px rgba(62, 61, 61, 1);
	}

	.neu-convex {
		background: linear-gradient(145deg, #2f2e2e, #282727) !important;
	}

/*  .neu-inset {
		box-shadow: inset 6px 6px 9px #1a1919,
					inset -6px -6px 9px #3e3d3d !important;
	}*/

	.neu-inset {
		box-shadow:
			inset 6px 6px 9px rgba(26, 25, 25, 1), 
			inset -6px -6px 9px rgba(62, 61, 61, 1), 
			0 0 0 rgba(26, 25, 25, 0), 
			0 0 0 rgba(62, 61, 61, 0);
		transition: box-shadow 1s ease;
	}

	.neu-inset-shallow {
		box-shadow: inset 4px 4px 8px #1a1919,
					inset -4px -4px 8px #3e3d3d !important;
	}

	.action-btn-row button {
		margin-inline: 0.75rem !important;
		margin-block: 0.5rem !important;
		width: 3.25rem;
		height: 3.25rem;
		
	}

	#phoneUIDropdown button:not(.keypad .btn) {
		margin-inline: 0.75rem !important;
		margin-block: 0.5rem !important;
	}

	#phoneUIDropdown #callBtnGroup button {
		margin-inline: 0 !important;
		margin-block: 0 !important;
	}

	#phoneUIDropdown .btn-icon-only {
		width: 3.1rem;
		height: 3.1rem;
	}


	.keypad button {
		width: 3.7rem !important;
		height: 3.7rem !important;
		font-size: 1.6rem !important;
		margin-inline: 0.3rem !important;
		margin-block: 0.4rem !important;
	}



/* Existing rules for btn-neu */
.btn-group > .btn:not(:first-child), 
.btn-group > .btn-group:not(:first-child) {
	box-shadow: 4px 4px 8px #1a1919, -4px -4px 8px #3e3d3d !important;
}

.btn-neu {
	background: linear-gradient(145deg, #2f2e2e, #282727);
	box-shadow: 4px 4px 8px #1a1919, -4px -4px 8px #3e3d3d;
}

/* Hover, Focus, Active state for .btn-neu */
.btn-neu:hover, .btn-neu:focus, .btn-neu:active {
	box-shadow: inset 2px 2px 5px #1a1919,
				inset -2px -2px 5px #3e3d3d !important;
	background: linear-gradient(-145deg, #2f2e2e, #282727) !important;
}

/* Hover, Focus, Active states for the buttons in the btn-group */
.btn-group > .btn:not(:first-child):hover, 
.btn-group > .btn:not(:first-child):focus, 
.btn-group > .btn:not(:first-child):active,
.btn-group > .btn-group:not(:first-child):hover, 
.btn-group > .btn-group:not(:first-child):focus, 
.btn-group > .btn-group:not(:first-child):active {
	box-shadow: inset 2px 2px 5px #1a1919,
				inset -2px -2px 5px #3e3d3d !important;
	background: linear-gradient(-145deg, #2f2e2e, #282727) !important;
}


	.profile-card input {
		font-size: 1.5rem;
		font-weight: bold;
		text-align: center;
		margin-bottom: 1.4rem;
		text-overflow: ellipsis;
	}

	.profile-card, .side-column-card {
		margin-bottom: 2.25rem !important;
	}


	.bg-inherit {
		background: inherit;
	}

	.neu-input {
		box-shadow: inset 3px 3px 6px #1a1919,
					inset -3px -3px 6px #3e3d3d !important;
		border: none;
	}

	.neu-input:focus, .neu-input:active {
		background: inherit !important;
		box-shadow: inset 2px 2px 5px #1a1919,
					inset -2px -2px 6px #3e3d3d !important;
	}

	.neu-input-shallow {
		background-color: inherit !important;
		box-shadow: inset 4px 4px 6px #1a1919, inset -3px -3px 6px #3e3d3d !important;
		border: none;
	}

	.neu-input::placeholder, .neu-input-shallow::placeholder {
		color: inherit !important;
		opacity: 1;
	}


	.neu-input-shalllow:focus, .neu-input-shalllow:active {
		background: inherit !important;
		box-shadow: inset 4px 4px 6px #1a1919, inset -3px -3px 6px #3e3d3d !important;
	}

	.neu-flat {
		background: var(--main-grey);
	}

	.text-mint-green {
		color: var(--mint-green);
	}

	.text-bronze {
		color: #fe9b38 !important;
	}

	.text-lavender {
		color: var(--lavender);
	}

	.accordion-panel-header .icon-title {
		font-size: 1.25rem !important;
	}

	.accordion-panel-header .icon span {
		font-size: 1rem;
	}

	.custom-select {

		font-size: 1.1rem;
		padding: 0.5rem;
		padding-left: 1.5rem;
		background-color: var(--main-grey) !important;
		padding-bottom: 0.25rem;
		background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23fe9b38' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center / 8px 10px !important;
		padding-right: calc(0.75rem + 16px);
	}

	.custom-select-green {
		background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%2357e5af' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center / 8px 10px !important;
		font-size: 1rem;
		padding-left: 0.8rem;
/*      max-width: 75%;*/
	}


	.input-group-text {
		background-color: inherit !important;
	}

	.datepicker {
		border: 0;
		background-color: inherit;
		color: #fe9b38 !important;
		box-shadow: inset 4px 4px 6px #1a1919, inset -3px -3px 6px #3e3d3d !important;
	}

	.datepicker-green {
		color: var(--mint-green) !important;
	}

	.day:hover {
		background-color: var(--light-grey) !important;
		color: unset;
	}

	.input-group {
		box-shadow: none !important;
	}

	.input-group-text {
		border: 1px solid black;
		border-right: 0;
	}

	.table>:not(caption)>*>* {
		background-color: unset !important;
/*      color: var(--text-main);*/
		color: inherit !important;
		border-color: #545454;
	}

	#timeline {
		padding-inline: 2rem !important;
	}


	#timeline .table th, .table td {
		border-top: 0;
		vertical-align: middle;
	}

	#timeline .form-group {
		margin-bottom: 0;
	}


	.form-control:focus {
		color: inherit !important;
	}

	#phoneUIDropdown textarea {
		margin-inline: auto;
	}

	@keyframes ringAnimation {
	  0% {
		transform: rotate(0deg);
	  }
	  15% {
		transform: rotate(-10deg);
	  }
	  30% {
		transform: rotate(10deg);
	  }
	  45% {
		transform: rotate(-10deg);
	  }
	  60% {
		transform: rotate(10deg);
	  }
	  100% {
		transform: rotate(0deg);
	  }
	}


	.contactUIButton {
		width: 60%;
	}

	#callButtonIcon {
		transition: transform 0.6s linear;
	}

	/* Apply the animation to the icon when ringing */
	#callButtonIcon.ringing {
	  animation: ringAnimation 2s ease-in-out infinite;
	}


	@media (max-width: 768px) {
		.table thead {
			display: none;
		}

		.table, .table tbody, .table tr, .table td {
			display: block;
			width: 100%;
		}

		.table td {
			text-align: right;
			padding-left: 50%;
			position: relative;
		}

		.table td::before {
			content: attr(data-label);
			position: absolute;
			left: 0;
			width: 50%;
			padding-left: 15px;
			font-weight: bold;
			text-align: left;
		}

		.morphing th, .morphed th {
			/* Headers took too long without this */
			transition: color 1s;
			color: var(--text-main) !important;
		}
	}



h1, h2, h3, h4, h5, h6, p {
	color: var(--text-main);
}


.mailbox-icon {
	padding: 0.8rem;
}


.email-field-prepend {
	width: 4rem;
	display: flex;
	justify-content: center;
}

.dropdown-toggle.show .dropdown-arrow {
	transform: rotate(180deg);
}

.text-mint-green, .text-mint-green > *, .text-mint-green > * > * {
	color: var(--mint-green) !important;
}

.text-main, .text-main > *, .text-main > * > * {
	color: var(--text-main) !important;
}

.bg-main {
	background-color: var(--main-grey) !important;
}


.keypad button.active {
	transform: scale(0.95); /* Slightly shrink the button when active */
}

.new-interaction-card, 
.new-interaction-card *:not(.keypad):not(.keypad *):not(.dropdown-menu):not(.dropdown-menu *) {
	transition: all 0.2s;
}

.morphing {
/*  transform: scale(0.99);*/
/*  transition: transform 1s ease;*/
}

.morphed {
/*  transform: scale(1);*/
/*  transition: transform 1s ease;*/
}

.morphing, .morphing * {
	color: var(--text-main) !important;
}

.morphed, .morphed * {
	color: var(--text-main) !important;
}

.morphing .hide-on-save, .morphing .hide-on-save * {
	transition: all 0.5s;
	opacity: 0;
}

.morphed .hide-on-save {
	display: none;
}

.morphing th, .morphed th {
	/* Headers took too long without this */
	/* They still take too long on small screens */
	transition: color 1s;
	color: var(--text-main) !important;
}


.collapsible {
/*	overflow: hidden;*/
	transition: max-height 0.2s ease, margin-bottom 0.2s ease;
	max-height: 200px;
}

.collapsible.hidden {
	max-height: 0; /* Collapses to zero height */
}


#phoneUIDropdown .neu-inset {
	transition: box-shadow 1s ease !important;
}


#past-events .card, #phoneUIDropdown, #emailUIDropdown, #smsUIDropdown, #noteUIDropdown, #meetingUIDropdown, #hwlUIDropdown, #taskUIDropdown {
	margin-bottom: 2rem;
}

.custom-switch .custom-control-label::before {
	box-shadow: var(--neu-inset-shallow-box-shadow);
	background-color: inherit;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	box-shadow: var(--neu-inset-shallow-box-shadow);
}

.custom-control-input:checked ~ .custom-control-label::before {
	background-color: inherit;
}

.custom-switch .custom-control-label::after {
	background: linear-gradient(180deg, rgba(97,96,96,1) 0%, rgba(62,62,62,1) 100%);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
	background: linear-gradient(180deg, rgba(87,229,175,1) 0%, rgba(45,113,88,1) 100%);
}

.custom-switch {
	padding-left: 0;
}



.rich-text-editor [contenteditable="true"] {
	border-radius: 0.55rem;
	min-height: 13rem;
	padding: 1rem;
	padding-bottom: 6rem;
}

[contenteditable]:focus {
	outline: 0px solid transparent;
}

[contenteditable] a {
	color: #e764ff !important
}

[contenteditable="true"] a[href="null"] {
	color: #ff4e4e !important;
	text-decoration: underline dotted;
}

/*a:hover::after {
	content: attr(href);
	color: white;
	text-decoration: underline;
	width: 5rem;
	height: 3rem;
	background-color: var(--light-grey);
	position: absolute;
	right: 0;
	padding: 1rem;
	border-radius: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
}*/

.toolbar button {
	width: 2.25rem;
	height: 2.25rem;
	margin: 0 0.3rem; /* spacing between buttons */
}

.toolbar .dropdown-menu button {
	width: 2.5rem !important;
}

.toolbar button i {
	font-size: 0.95rem !important;
}

.toolbar {
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	padding: 0.65rem;
	border-radius: 3rem;
	margin-bottom: 1rem;
	margin-left: 2rem;
	width: auto;
}

.toolbar .dropdown-menu.show {
	display: flex !important;
	align-items: center;
}

.toolbar .dropdown-menu button {
/*  margin-inline: 1rem;*/
	font-size: 1rem !important;
}

.rich-text-editor {
	position: relative;
}


i {
	vertical-align: middle !important;
}


#muteButton i {
	transition: unset !important;
}

.modal-backdrop {
   background-color: var(--main-grey);
}

.modal-header {
	border-color: var(--light-grey);
}

.profile-image {
	height: 4rem;
	width: 4rem;
}

input[type="time"]::-webkit-calendar-picker-indicator{
	filter: invert(96%) sepia(81%) saturate(847%) hue-rotate(76deg) brightness(92%) contrast(94%);
}

.dropdown-menu .dropdown-item:hover {
	box-shadow: unset;
	background-color: var(--light-grey);
}

.schedule-popup {
    display: none;
    position: absolute;
/*    top: 100%;*/
    left: 0;
    width: 250px;
    border-radius: 8px;
    z-index: 1050;
}

/* Optional: Fade-in effect */
.schedule-popup.show {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}


#hwlBody {
	font-family: cursive;
	font-size: 1.1rem !important;
}


::-webkit-scrollbar {
	width: .4rem;
	height: .4rem;
}

::-webkit-scrollbar-track {
	background: var(--main-grey);
	border-radius: 100vw;
	margin-block: 0.1rem;
}

::-webkit-scrollbar-thumb {
	background: grey;
	border-radius: 100vw;
}

@supports (scrollbar-color: red blue) {
	* {
		scrollbar-color: hsl(0, 0%, 12%);
	}
}

/* Custom Audio Player Styles */
.custom-audio-player {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: inherit;
    border-radius: 1rem;
}

.custom-audio-player .play-pause-btn,
.custom-audio-player .volume-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: inherit;
    border: none;
    color: var(--text-main);
    transition: all 0.3s ease;
}

.custom-audio-player .play-pause-btn:hover,
.custom-audio-player .volume-btn:hover {
    box-shadow: var(--neu-inset-box-shadow);
}

.custom-audio-player .progress-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-audio-player .progress-bar {
    flex: 1;
    height: 0.5rem;
    background: var(--main-grey);
    border-radius: 0.25rem;
    cursor: pointer;
    position: relative;
    box-shadow: var(--neu-inset-box-shadow);
    overflow: hidden;
}

.custom-audio-player .progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--text-main);
    border-radius: 0.25rem;
    transition: width 0.3s linear;
}

.custom-audio-player .time {
    font-size: 0.875rem;
    color: var(--text-main);
    min-width: 3.5rem;
    text-align: center;
}

.custom-audio-player .volume-container {
    position: relative;
}

.custom-audio-player .volume-slider {
    position: absolute;
    bottom: 125%;
    right: 50%;
    width: 0.1rem;
    height: 5rem;
    background: inherit;
    border-radius: 0.25rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    display: none;
    transform: rotate(180deg);
}

.custom-audio-player .volume-slider.show {
    display: block;
}

.custom-audio-player .volume-slider input {
    width: 5rem;
    height: 0.5rem;
    transform: rotate(90deg) translateX(-2rem);
    transform-origin: left;
    -webkit-appearance: none;
    background: inherit;
    border-radius: 0.25rem;
    box-shadow: var(--neu-inset-box-shadow);
}

.custom-audio-player .volume-slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    transform: translateY(-25%);
    background: var(--text-main);
    cursor: pointer;
}

.custom-audio-player .volume-slider input::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    transform: translateY(-25%);
    background: var(--text-main);
    cursor: pointer;
    border: none;
}

.custom-audio-player .volume-slider input::-ms-thumb {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    transform: translateY(-25%);
    background: var(--text-main);
    cursor: pointer;
}

.custom-audio-player .volume-slider input::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    background: inherit;
    border-radius: 0.25rem;
    box-shadow: var(--neu-inset-box-shadow);
}

.custom-audio-player .volume-slider input::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    background: inherit;
    border-radius: 0.25rem;
    box-shadow: var(--neu-inset-box-shadow);
}

.custom-audio-player .volume-slider input::-ms-track {
    width: 100%;
    height: 0.5rem;
    background: inherit;
    border-radius: 0.25rem;
    box-shadow: var(--neu-inset-box-shadow);
}