:root {
	
	--nav-medium-width:271px;
	--nav-small-width:72px;
	--nav-tint-color:white;
	--nav-bg-color:var(--sl-color-primary-400);
}

html {
	
	overflow-y:scroll;
}

html, body {
	
	-webkit-overflow-scrolling: touch;
}


button {
	
	font-size: 14px;
}

body {

	background:var(--new-bg);
	padding: 0;
	margin: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	
}

.ptr--icon {
	
	color: var(--sl-color-primary-400) !important;
}

.ptr--text {
	
	color: var(--sl-color-primary-400) !important;
}

*, *:before, *:after {
	box-sizing: inherit;
}


input,textarea,button {
	
	font-family:var(--sl-font-sans);
}

html {
	
	font-family:var(--sl-font-sans);
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

a {
	
	text-decoration: none;
	color: var(--sl-color-neutral-1000);
}

.ripple {

	position: relative;
	overflow: hidden;
	transition: transform 300ms;
}

.ripple::before {
	content: "";
	position: absolute;
	background-color: rgba(0,0,0,.1);
	width: 10%;
	height: 25%;
	border-radius: 20%;
	z-index: 1;
	top: 35%;
	left: 45%;
	-webkit-transform: scale(0);
	transform: scale(0);
	pointer-events: none;
}

.ripple:hover::before {
	-webkit-transform: scale(12);
	transform: scale(12);
	-webkit-transition: border-radius .5s .5s,-webkit-transform .5s;
	transition: border-radius .5s .5s,-webkit-transform .5s;
	transition: transform .5s,border-radius .5s .5s;
	transition: transform .5s,border-radius .5s .5s,-webkit-transform .5s;;
}

.ripple:hover::after {
	
	content: "";
	position: absolute;
	z-index: 2;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.ripple:active {
	
	/* -webkit-transform: scale(0.95); */
}

.page-header-title {
	
	width: 100%;
}


.global-loader,.global-loader-dark,.global-lock {
	
	position: fixed;
	top: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	/* background: rgba(0, 0, 0, 0.8); */
	z-index: 100000;
	left: 0px;
	color:var(--sl-color-primary-500);
}

.global-lock {
	
	z-index: 1;
}

.global-loader-dark {
	background: rgba(0, 0, 0, 0.8);
	flex-direction: column;
	gap:15px;
}

.data-spinner {
	
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.app { 
	
	display: flex;
	justify-content: space-between;
	width:100%;
	top:56px;
	position: relative;
	/* height: 100vh; */
}

.app-content {
	
	width: calc(100% - var(--nav-medium-width));
	height: 100%;
	left: var(--nav-medium-width);
	position: relative;
	/* background: var(--sl-color-neutral-0); */
}

.main-content {
	
	width:100%;
	height: 100%;
	/* max-width: 935px; */
	margin-left: auto;
	margin-right: auto;
}

/* .app-header-program {
	
	width:calc(100% - var(--nav-small-width)) !important;
	margin-left: var(--nav-small-width) !important;;
} */

.program-app .app-content {
 
  width: calc(100% - (var(--nav-small-width) + var(--nav-medium-width)));
  
  left: calc(var(--nav-small-width) + var(--nav-medium-width));
}

.program-app .tw-container {
	
	left:calc(var(--nav-small-width) + 15px) !important;
}

.admin-room .program-app .app-content{
	
  width: calc(100% - (var(--nav-small-width) + var(--nav-medium-width))) !important;
  left: calc(var(--nav-small-width) + var(--nav-medium-width))  !important;
}
/* 
.message-app .app-content {
 
  width: calc(100% - var(--nav-small-width));
  
  left:var(--nav-small-width);
} */

.program-app .main-nav {
	
	width: var(--nav-small-width) !important;
	min-width: var(--nav-small-width) !important;
}

.program-app .admin-drawer-tooltip {
	
	display: block !important;
}

.program-app .nav-text {
	
	display: none !important;
}

.program-app .main-nav-body .nav-item {
	
	justify-content: center !important;
}

.program-app .nav-footer .nav-item {
	
	justify-content: center !important;
}



.program-app .admin-drawer {
	
	display: none;
}

.program-app .nav-image {
	
	display: none !important;
}

.program-app .nav-image-mobile {
	
	display: block !important;
}

.program-app .program-nav {
	
	display: flex !important;
}

.program-app .mobile-nav-active{
	
	width:100% !important;
	min-width: 100% !important;
}

.mobile-nav-active .nav-logo {
	
	display: none !important;
}

.mobile-nav-active .nav-text {
	
	display: block !important;
}

.mobile-nav-active .nav-image {
	
	display: none !important;
}

.mobile-nav-active .nav-image-mobile {
	
	display: block !important;
}

.mobile-nav-active .program-nav {
	
	display: flex !important;
}


.ql-container {
	
	font-family:var(--sl-font-sans) !important;
}

.ql-snow .ql-tooltip {
	
	left: 0px !important;
}

.ql-toolbar.ql-snow {
  
  border: none !important;
}

.ql-container.ql-snow {
	
	background: none !important;
	border:none !important;
}

.ql-snow .ql-stroke {
	
	/* stroke:var(--sl-color-neutral-900) !important; */
}

.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {
	
	/* fill:var(--sl-color-neutral-900) !important; */
}

.ql-editor.ql-blank::before {
	
	font-style: normal !important;
	left: 16px !important;
	right:16px !important;
	color:var(--sl-color-neutral-600) !important;
}

.vjs-theme-fantasy {
	--vjs-theme-fantasy--primary: var(--sl-color-primary-400) !important;
	--vjs-theme-fantasy--secondary: #fff;
}

/* .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
	
	stroke:var(--sl-color-primary-500) !important;
} */

tr {
	
	/* transform: none !important; */
}


  
  
  
  .timezone-picker-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
  }
  .timezone-picker {
	background: var(--light-background);
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	padding: 20px;
	width: 300px;
	max-height: 80%;
	overflow-y: auto;
  }
  .timezone-picker h2 {
	margin-top: 0;
  }
  .timezone-picker select {
	width: 100%;
	padding: 10px;
	margin-top: 10px;
	cursor: pointer;
	border-radius: 4px;
  }
  .timezone-picker button {
	margin-top: 20px;
	padding: 10px 20px;
	background: var(--sl-color-primary-400);
	border: none;
	border-radius: 4px;
	color: #ffffff;
	cursor: pointer;
  }
  
  .timezone-picker button:active {
	  opacity: 0.5;
  }
  .timezone-picker button:hover {
	background: var(--sl-color-primary-300);
  }
  
  #cancel-timezone {
	  
	  border:1px solid var(--line-sep); 
	  background: var(--sl-color-neutral-0);
	  color:var(--sl-color-danger-500);
  }
  
  #cancel-timezone:hover {
	  
	  color: white;
	  background:var(--sl-color-danger-500);
  }
  
  /* .timezone-picker button:active {
	  
	  opacity: 0.5;
  }
  
  
  .course-picker-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
  }
  .course-picker {
	background: #1e1e1e;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	padding: 20px;
	width: 800px;
	max-height: 90%;
	overflow-y: auto;
  }
  .course-picker .header {
	display: flex;
	align-items: center;
  }
  .course-picker .header img {
	width: 150px;
	border-radius: 8px;
	margin-right: 20px;
  }
  .course-picker .header .info {
	flex-grow: 1;
  }
  .course-picker .header .info h1 {
	margin: 0;
	color: #ffffff;
  }
  .course-picker .header .info .rating {
	margin: 10px 0;
	color: #ffcc00;
  }
  .course-picker .video {
	margin-top: 20px;
	text-align: center;
  }
  .course-picker .video iframe {
	width: 100%;
	height: 400px;
	border-radius: 8px;
  }
  .course-picker .description {
	margin-top: 20px;
  }
  .course-picker .description h2 {
	margin: 0 0 10px 0;
  }
  .course-picker .curriculum {
	margin-top: 20px;
  }
  .course-picker .curriculum h2 {
	margin: 0 0 10px 0;
  }
  .course-picker .price {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .course-picker .price .amount {
	font-size: 24px;
	color: #ffcc00;
  }
  .course-picker .price .enroll {
	padding: 10px 20px;
	background: #007bff;
	border: none;
	border-radius: 4px;
	color: #ffffff;
	cursor: pointer;
  }
  .course-picker .price .enroll:hover {
	background: #0056b3;
  }
  .course-picker .close {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 24px;
	cursor: pointer;
  } */

.tool-holder {
	
	padding-bottom:164px !important;
}

.mobile-search {
	
	padding-top: 20px;
	display:none;
	align-items: center;
	justify-content: space-between;
	gap:10px;
}

.mobile-search .search-input-container {
	
	width: 100%;
}

.mobile-search input {
	
	width: 100%;
}

.search-action {
	
	border:1px solid var(--line-sep);
	border-radius: 5px;
	padding: 10px;
	min-width: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.search-action:active {
	
	opacity: 0.5;
}


.message-app .program-nav {
	
	display: none !important;
}

.admin-room .message-app .program-nav {
	
	display: flex !important;
}



@media only screen and (max-width: 1263px) {
	 
	.app-content {
		
		width: calc(100% - var(--nav-small-width));
		left: var(--nav-small-width);
	}
	
	.main-nav-body .nav-item {
		
		justify-content: center !important;
	}
	
	.nav-footer .nav-item {
		
		justify-content: center !important;
	}

	
	.admin-drawer {
		
		display: none;
	}
	
	.admin-drawer-tooltip {
		
		display: block !important;
	}
	
}

@media only screen and (max-width: 1050px) {
	 
	.main-content {
		
		max-width: 100%;
	}
	
}


.mobile-fab h1 {

	font-size: 22px !important;
}


@media only screen and (max-width: 767px) {
	
	.mobile-fab h1 {

		font-size: 20px !important;
	}
	
	.program-app .tw-container {
		
		left:0px !important;
	}

	.fab-btns .button {

		box-shadow: var(--shadow-all);
	}
	
	.tw-container  {
		
		left:0px !important;
		width:100% !important;
		z-index: 10 !important;
		bottom:0px !important;
	}

	
	/* .app-header-program {
		
		width:100% !important;
		margin-left:0px !important;;
	}
	 */
	.main-nav-body .nav-item {
		
		justify-content: flex-start !important;
	}
	
	.nav-footer .nav-item {
		
		justify-content: flex-start !important;
	}

	
	.app-bar ._toastContainer {
		
		bottom: 49px !important;
	}
	
	.app-bar {
		
		padding-bottom: 56px;
	}
	
	.app-bar .scroll-arrow {
		
		bottom: 49px !important;
	}
	
	.hide-bar .scroll-arrow {
		
		bottom:0px !important;
	}
	
	
	.message-app .scroll-circle {
		
		transform: initial !important;
	}
	
	body .mobile-tabbar { 
		
		display: flex !important;
	}
	
	.hide-bar .mobile-tabbar {
		
		display: none !important;
	}
	
	.hide-bar {
		
		padding-bottom: 0px;
	}
	
	.hide-bar ._toastContainer {
		
		bottom: 15px !important;
	}
	
	
	.mobile-search {
		
		display: flex;
	}
	.program-switch {
		
		padding-top: 10px !important;
	}
	
	.filter-holder {
		
		display: none !important;
	}
	
	/* .post-dots,.reply-dots {
		
		visibility: visible !important;
		
	} */

	
	.program-header {
		
		padding-bottom: 10px !important;
		padding-top: 10px !important;
	}
	
	
	
	.profile-header > .profile-pic {
		
		flex: initial !important;
		padding-right: 15px !important;
	} 
	
	.profile-header .profile-pic img  {
		
		width: 77px !important;
		height: 77px !important;
	}
	
	.main-nav {
		
		display: none !important;
		height: calc(100% - 56px) !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		top:56px !important;
	}
	
	.mobile-nav-active {
		
		width:100% !important;
		display: flex !important;
	}

	
	
	.app-content {
		left:0px !important;
		width: 100% !important;
	}
	
		
	.admin-room .program-app .app-content {
	  left:0px !important;
		width: 100% !important;
	}
	
	.program-container {
		
		flex-direction: column !important;
	}
	
	/* .program-card {
		
		width: 100% !important;
	} */
	
	.giphy-holder .results {
		
		column-count: 2 !important;
	}
	
	.program-app .program-nav {
		
		display: none !important;
	}
	
	.admin-room .message-app .program-nav {
		
		display: none !important;
	}

	.program-app .program-nav-mobile {
		
		position: fixed !important;
		left: 0px !important;
		top:0px !important;
		z-index: 100 !important;
		background: var(--sl-color-neutral-0) !important;
		display: flex !important;
	}
	
	.program-app .main-nav-body .nav-item {
		
		justify-content: flex-start !important;
	}
	
	.program-app .nav-footer .nav-item {
		
		justify-content: flex-start !important;
	}
	
	
	.admin-room .message-app .program-nav-mobile  {
		
		position: fixed !important;
		left: 0px !important;
		top:0px !important;
		z-index: 100 !important;
		background: var(--sl-color-neutral-0) !important;
		display: flex !important;
	}
	
	.course-form-title {
		
		position: relative !important;
		z-index: 0 !important;
	}
	
	/* .send-holder {
		
		position: relative !important;
	}
	 */
	.tool-holder .course-form {
		
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	
	.tool-holder .course-form-title {
		
		flex-wrap: wrap !important;
	}
	
	.program-app .membership-nav {
		
		background:var(--sl-color-neutral-0);
		left: 0px !important;
		z-index: 1;
		height: calc(100vh - 56px) !important;
	}
	
	/* .membership-nav .active-link {
		
		color: var(--sl-color-neutral-900) !important;
		font-weight: 400 !important;
	}
	
	.program-app .membership-nav-active {
		
		display: none !important;
		
	}  */
	
}


/* select {
	
	height: 45px;
	background:var(--sl-color-neutral-0) !important;
	color:var(--sl-color-neutral-1000) !important;
	border-radius: 5px;
}
 */


select {

	color:var(--sl-color-neutral-1000) !important;
	border-radius: 5px;
	min-height: 45px;
	cursor: pointer;
    appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1rem !important;
    padding-right: 2.5rem !important;
	background-color:var(--sl-color-neutral-0) !important;
}


a {
  -webkit-touch-callout: none;
}

button, a {
	
	touch-action: manipulation;
}

* {
	-webkit-tap-highlight-color: transparent;
}

img {
  -webkit-touch-callout: none; /* Disable iOS long press context menu */
  -webkit-user-select: none; /* Prevent selection/copying in Safari */
  -moz-user-select: none; /* Prevent selection/copying in Firefox */
  -ms-user-select: none; /* Prevent selection/copying in IE */
  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


/* @media (hover: none) and (pointer: coarse) {
  *:hover {
	all: unset !important;
  }
} */


.focused-search-input {
	border:1px solid var(--sl-color-primary-400) !important;
}

.header-title span {
	
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ql-size-10px { font-size: 10px; }
.ql-size-12px { font-size: 12px; }
.ql-size-14px { font-size: 14px; }
.ql-size-16px { font-size: 16px; }
.ql-size-18px { font-size: 18px; }
.ql-size-24px { font-size: 24px; }
.ql-size-36px { font-size: 36px; }
.ql-size-48px { font-size: 48px; }
.ql-size-72px { font-size: 72px; }
.ql-size-100px { font-size: 100px; }

.ql-font-roboto {
	font-family: 'Roboto', sans-serif;
}

.tribute-container ul {
	  
	  background: var(--sl-color-neutral-0) !important;
	  border-radius: 8px;
	  border:1px solid var(--sl-color-neutral-200);
	  overflow: hidden;
  }
  
 .tribute-container li {
	  
	  border-radius: 0px;
  }
  
.tribute-container li.highlight {
	
	background: var(--sl-color-neutral-100) !important;
	border-radius: 0px;
}

  
.tribute-container .tag-cell {
	
	display: flex;
	align-items: center;
	gap:12px;
	
}

.tribute-container .tag-info {
	
  display:flex;
  flex-direction: column;
  gap:5px;
  flex:1;
}
  
.tribute-container .tag-username {
	
  
  font-weight: 400;
  font-size: 14px;
  color:var(--sl-color-neutral-700);
  word-break: break-word;
}

.tribute-container .tag-name {
	  
  
  color:var(--sl-color-neutral-1000);
  font-weight: 500;
  font-size: 15px;
  word-break: break-word;
	
}

.tribute-container .tag-cell img {
	  
	width:30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
}


.no-results {

	text-align: center;
	padding-left: 16px;
	padding-right: 16px;
}

.v2 .no-results-text {
		
	margin-top: 8px !important;
	font-weight: 500 !important;
	font-size: 18px !important;
	text-align: center;
}
	
.v2 .no-results-subtext {
		
	font-size: 15px !important;
	color: var(--sl-color-neutral-500) !important;
}
	

.v2-page-loader {

	display: flex;
	align-items: center;
	justify-content: center;
	height:calc(100vh - 71px);
	width:100%;
	color:var(--app-accent-color);
}

button {

	color:var(--sl-color-neutral-1000);
}

@keyframes v2-ripple {
	to {
	  transform: scale(4);
	  opacity: 0;
	}
  }
  
  span.v2-ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: v2-ripple 600ms linear;
	background-color: var(--tb-active-color);
	opacity: 0.5;
	will-change: transform;
	pointer-events: none;
  }


  input, textarea, [contenteditable="true"] {
	caret-color: var(--sl-color-neutral-1000) !important;
  }


  /* .rounded-page .banner img {

	object-position: top;
} */
 


/* .page .content-section {

	max-width: 100% !important;
} */