html {
	scroll-behavior: smooth;
}

/* body {
	width: 100%;
	height: 100%;
} */

/* App */
.app {
	background: var(--gray-50);
}

.app-container {}

.app-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	background: var(--gray-100);
	z-index: 100;
	opacity: .9;
}

.app-sidebar {
	min-width: 275px;
	max-width: 275px;
	margin-left: -350px;
	transition: margin .15s linear;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 1.5rem;
	z-index: 101;
	height: auto;
	margin-top: 3rem;
	margin-bottom: 3rem;
}

[dir="rtl"] .app-sidebar {
	margin-left: initial;
	left: initial;
	right: 0;
	margin-right: -350px;
}

body.app-sidebar-opened .app-sidebar {
	margin-left: 0;
}

[dir="rtl"] body.app-sidebar-opened .app-sidebar {
	margin-left: initial;
	margin-right: 0;
}

@media (min-width: 992px) {
	.app-sidebar {
		margin-left: 0;
	}

	[dir="rtl"] .app-sidebar {
		margin-left: initial;
		margin-right: 0;
	}
}

.app-sidebar-title {
	display: flex;
	align-items: center;
	justify-content: center;
}

.app-sidebar-title a {
	color: var(--gray-900);
	font-weight: 600;
}

.app-sidebar-title a:hover {
	text-decoration: none;
}

.app-sidebar-title img {
	margin-bottom: 1.15rem;
}

.app-sidebar-title div {
	margin-bottom: 1.5rem;
}

.app-sidebar-links-wrapper {
	background: var(--white);
	border-radius: var(--border-radius);
	padding: 1.5rem;
	overflow-y: scroll;
	height: calc(100% - 3.5rem);
	width: calc(100% - 6px);
	border: 1px solid var(--gray-100);
	scrollbar-width: none;
}

.app-sidebar-links-wrapper:hover {
	width: 100%;
	scrollbar-width: initial;
}

.app-sidebar-links-wrapper::-webkit-scrollbar {
	background-color: transparent;
	width: 0;
}

.app-sidebar-links-wrapper::-webkit-scrollbar-thumb {
	background: var(--gray-200);
	border-radius: 10px;
}

.app-sidebar-links-wrapper:hover::-webkit-scrollbar {
	width: 6px;
}

.app-sidebar-links-wrapper:hover::-webkit-scrollbar-track {
	width: 6px;
}

.app-sidebar-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.app-sidebar-links>li {
	width: 100%;
	padding: 0.25rem 0;
}

.app-sidebar-links>li>a {
	width: 100%;
	display: flex;
	align-items: center;
	color: var(--gray-600);
	border-radius: var(--border-radius);
	padding: 0.75rem 1rem;
	transition: background .3s;
	font-size: .9rem;
	font-weight: 500;
}

.app-sidebar-links>li>a:hover {
	text-decoration: none;
	/* background: var(--gray-200); */
	color: var(--gray-600);
}

[data-theme-style="dark"] .app-sidebar-links>li>a:hover {
	/* background: var(--gray-200); */
	color: var(--gray-800);
}

.app-sidebar-links>li.active>a {
	/* background: var(--primary); */
	color: var(--white);
	font-weight: 500;
}

[data-theme-style="dark"] .app-sidebar-links>li.active>a {
	background: var(--primary-800);
	color: var(--white);
}

.app-sidebar-avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.app-sidebar-footer-block {
	max-width: 100%;
}

.app-sidebar-footer-text {
	color: var(--gray-600);
}

.app-content {
	height: 100%;
	overflow: auto;
	margin-left: 0;
	position: relative;
	flex-grow: 1;
}

[dir="rtl"] .app-content {
	margin-left: initial;
	margin-right: 0;
}

@media (min-width: 992px) {
	.app-content {
		margin-left: calc(275px + 1.5rem);
	}

	[dir="rtl"] .app-content {
		margin-left: initial;
		margin-right: calc(275px + 1.5rem);
	}
}

.app-navbar {
	border: 1px solid var(--gray-100);
}

[data-theme-style="dark"] .app-navbar {
	border-color: var(--gray-100);
}


/* Dropdown */
.dropdown-item:hover,
.dropdown-item:focus {
	border-radius: var(--border-radius);
}

.dropdown-item svg {
	color: var(--gray-600);
}

.dropdown-item:active svg {
	color: var(--white);
}

/* Footer */
.footer {
	font-size: .95rem;
}

.footer {
	color: var(--gray-600);
}

.footer a:not(.dropdown-item),
.footer a:hover:not(.dropdown-item) {
	color: var(--gray-600);
}

.footer a.icon {
	color: var(--gray-600);
}

.footer button,
.footer button:hover {
	color: var(--gray-600);
}

.footer-logo {
	max-height: 2.5rem;
	height: 2.5rem;
}

/* Filters */
.filters-dropdown {
	width: 18rem;
	max-height: 30rem;
	overflow-y: auto;
}

canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

/* .modal-header {
	padding: 1rem;
	border-bottom: 0;
} */

.modal-subheader {
	padding: 0 1rem;
	border-bottom: 0;
	margin: 0;
}

/* .modal-content {
	padding: 1rem;
	border: none;
	box-shadow: none;
	-webkit-box-shadow: none;
} */

/* Forms */
.input-group-text {
	font-size: 0.9rem;
}

/* Custom breadcrumbs */
.custom-breadcrumbs {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.custom-breadcrumbs>li {
	margin-right: .5rem;
}

.custom-breadcrumbs>li>a {
	color: var(--gray);
}

.custom-breadcrumbs>li>svg {
	color: var(--gray-400);
	margin-left: .5rem;
}

.custom-breadcrumbs>li.active {}

/* Helper classes */
.cursor-grab {
	cursor: grab !important;
}

.list-style-none {
	list-style: none;
	padding: 0;
}

.appearance-none {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

.clickable {
	cursor: pointer;
}

.icon-favicon {
	width: 1rem;
	height: auto;
}

/* Navbar custom menu */
.navbar-nav>li {
	font-size: .9rem;
	font-weight: 500;
}

.navbar-expand-lg .navbar-nav .nav-link {
	padding-top: .75rem;
	padding-bottom: .75rem;
}

@media (min-width: 992px) {
	.navbar-expand-lg .navbar-nav .nav-link {
		padding-right: 1rem;
		padding-left: 1rem;
	}
}

.navbar-logo {
	max-height: 6.5rem;
	height: 6.5rem;
}

.navbar-avatar {
	width: 20px;
	height: 20px;
	border-radius: 0;
}

.navbar-custom-toggler {
	padding: 0.5rem .8rem;
	font-size: 1.25rem;
	line-height: 1;
	background-color: transparent;
	border-radius: var(--border-radius);
	color: var(--gray-500);
	border-color: var(--gray-300);
}

.chart-container {
	position: relative;
	margin: auto;
	height: 275px;
	width: 100%;
}

/* Index */
.index-pattern {
	background-image: radial-gradient(#3C83F6 0.55px, transparent 0.55px), radial-gradient(#3C83F6 0.55px, transparent 0.55px);
	background-size: 22px 22px;
	background-position: 0 0, 11px 11px;
}

[data-theme-style="dark"] .index-pattern {
	background-image: radial-gradient(#2e405d 0.55px, transparent 0.55px), radial-gradient(#103570 0.55px, transparent 0.55px);
}

.index-header {
	font-size: 3.5rem;
	font-weight: 700;
	color: var(--primary);
}

.index-subheader {
	font-size: 1.45rem;
	color: var(--gray-700);
}

.index-button {
	padding: 1.25rem 4rem;
	font-size: 1.25rem;
	font-weight: 500;
}

/* Header container */
.user-avatar {
	border-radius: 50%;
	max-width: 70px;
	max-height: 70px;
}

/* Others */
.container-disabled {
	pointer-events: none;
	opacity: .5;
}

.container-disabled-simple {
	pointer-events: none;
}

/* Tables */
.table-custom-container {
	border-radius: var(--border-radius);
	border: 1px solid var(--gray-100);
}

.table-custom {
	margin-bottom: 0;
	background: var(--white);
}

.table-custom thead th {
	border-top: 0;
	border-bottom: 0;
	color: var(--gray);
}

.table-custom th {
	padding: 1.25rem 1.25rem;
	font-size: .9rem;
}

[data-theme-style="dark"] .table-custom thead th {
	color: var(--gray-800)
}

.table-custom tbody tr {
	border-top: 1px solid var(--gray-50);
}

.table-custom td {
	padding: 1.25rem 1.25rem;
	vertical-align: middle;
}

.table-custom tbody tr td {
	border-top: 0;
}

[data-theme-style="dark"] .table-custom tbody tr td {}

.table-custom tbody tr {
	transition: all .3s ease-in-out;
}

.table-custom tbody tr:hover td {}

/* Custom Radio Boxes */
.custom-radio-box {
	cursor: pointer;
}

.custom-radio-box .custom-radio-box-main-text {
	font-size: 1.15rem;
	font-weight: bold;
}

.custom-radio-box .custom-radio-box-main-icon {
	font-size: 1.25rem;
}

.custom-radio-box input[type="radio"]+div {
	transition: all .3s ease-in-out;
	border: 1px solid var(--gray-200);
	background: var(--white);
}

.custom-radio-box input[type="radio"]:checked+div {
	border: 1px solid var(--primary);
}

.custom-radio-box input[type="radio"]:hover+div {
	border: 1px solid var(--primary);
}

/* Pricing cards */
.pricing-card {
	border: 1px solid var(--gray-100);
}

/* Round circles */
.round-circle-md {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

.round-circle-lg {
	width: 4.5rem;
	height: 4.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

/* Badge colors */
.badge {
	padding: 0.45em 0.9em;
}

.badge-primary {
	color: hsl(211, 100%, 35%);
	background-color: hsl(211, 100%, 85%);
}

[data-theme-style="dark"] .badge-primary {
	background-color: hsl(211, 100%, 35%);
	color: hsl(211, 100%, 85%);
}

.badge-secondary {
	color: hsl(208, 7%, 35%);
	background-color: hsl(208, 7%, 85%);
}

[data-theme-style="dark"] .badge-secondary {
	background-color: hsl(208, 7%, 35%);
	color: hsl(208, 7%, 85%);
}

.badge-success {
	color: hsla(134, 50%, 30%, 1);
	background-color: hsla(134, 50%, 85%, 1);
}

[data-theme-style="dark"] .badge-success {
	background-color: hsla(134, 50%, 30%, 1);
	color: hsla(134, 50%, 85%, 1);
}

.badge-danger {
	color: hsla(354, 70%, 35%, 1);
	background-color: hsla(354, 70%, 85%, 1);
}

[data-theme-style="dark"] .badge-danger {
	background-color: hsla(354, 70%, 35%, 1);
	color: hsla(354, 70%, 85%, 1);
}

.badge-warning {
	background-color: hsla(45, 100%, 85%, 1);
	;
	color: hsla(40, 80%, 30%, 1);
}

[data-theme-style="dark"] .badge-warning {
	background-color: hsla(50, 20%, 20%, 1);
	color: hsla(45, 100%, 85%, 1);
}

.badge-info {
	color: hsla(188, 60%, 30%, 1);
	background-color: hsla(188, 78%, 85%, 1);
}

[data-theme-style="dark"] .badge-info {
	background-color: hsla(188, 60%, 30%, 1);
	color: hsla(188, 78%, 85%, 1);
}

.badge-light {
	color: hsla(210, 15%, 35%, 1);
	background-color: hsl(210, 17%, 95%);
}

[data-theme-style="dark"] .badge-light {
	background-color: hsla(210, 15%, 35%, 1);
	color: hsl(210, 17%, 95%);
}

.badge-dark {
	color: hsla(210, 10%, 90%, 1);
	background-color: hsla(210, 10%, 20%, 1);
}

[data-theme-style="dark"] .badge-dark {
	background-color: hsla(210, 10%, 90%, 1);
	color: hsla(210, 10%, 20%, 1);
}

/* Invoice css */
.invoice-table th {
	border-top: 0 !important;
}

@media print {
	.invoice-logo {
		filter: grayscale(100%);
	}
}

/* Base animation */
.altum-animate {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

.altum-animate-fill-both {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.altum-animate-fill-none {
	-webkit-animation-fill-mode: none;
	animation-fill-mode: none;
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.altum-animate-fade-in {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}

/* Opacity */
.opacity-50 {
	opacity: 50;
}

.opacity-75 {
	opacity: 75;
}

/* App sub menu */
.account-header-navbar {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-left: 0;
	list-style: none;
	margin: 0 0 1.5rem 0;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 .25rem;
}

@media (min-width: 992px) {
	.account-header-navbar {
		flex-direction: row;
	}
}

.account-header-navbar .nav-item {
	margin-bottom: .5rem;
	min-width: fit-content;
}

.account-header-navbar .nav-link,
.btn-custom {
	padding: .5rem 1.5rem;
	color: var(--gray-500);
	border-radius: var(--border-radius);
	border: 1px solid var(--gray-50);
	font-size: .9rem;
	font-weight: 500;
	background: var(--white);
	transition: background .3s;
}

.account-header-navbar .nav-link:hover,
.btn-custom:hover {
	color: var(--gray-800);
	background: var(--gray-100);
	border-color: var(--gray-100);
}

.account-header-navbar .nav-link.active,
.btn-custom.active {
	color: var(--gray-800);
	border: 1px solid var(--gray-200);
	background: var(--gray-200);
}

/* Blog */
.blog-post-image {
	max-height: 25rem;
	object-fit: cover;
}

/* File input */
.altum-file-input {
	padding: 1rem;
	background: var(--gray-100);
	border: 1px solid var(--gray-200);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: .9rem;
}

.altum-file-input:hover {
	border-color: var(--gray-300);
}

.altum-file-input::file-selector-button {
	border: 0;
	padding: .4rem .75rem;
	border-radius: var(--border-radius);
	background-color: var(--white);
	cursor: pointer;
	font-size: .9rem;
	margin-right: 1rem;
}

.sticky {
	position: sticky !important;
	top: 1rem;
	height: min-content;
}

/* Icons on links animations */
a svg {
	transition: transform .15s;
}

a:hover svg {
	transform: scale(1.1);
}

a:active svg {
	transform: scale(.9);
}

/* Color picker border */
.pcr-button {
	border: 1px solid white !important;
	outline: 1px solid var(--gray-300) !important;
}

/* Width fit content */
.w-fit-content {
	width: fit-content !important;
}

/* Ajax loading overlay */
.loading-overlay {
	padding: 1.25rem;
	border-radius: var(--border-radius);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--white);
	z-index: 100;
	opacity: 0.8;
}

[data-theme-style="dark"] .loading-overlay {
	background: var(--gray-50);
}

/* Ai */
.ai-chat-avatar {
	width: 35px;
	height: 35px;
}

.ai-chat-big-avatar {
	width: 50px;
	height: 50px;
}

/* Shiki code highlighter */
.shiki {
	overflow: auto;
	border-radius: var(--border-radius);
	padding: 1.5rem;
	font-size: .9rem;
	line-height: 1.5rem;
}

.shiki code {
	background: initial !important;
}

/* Btn group */
.btn-group-custom {
	border: 1px solid var(--gray-100);
	padding: 0.5rem 0;
	border-radius: var(--border-radius);
}

.btn-group-custom .btn {
	margin: 0 .5rem;
	border-radius: var(--border-radius) !important;
	background: var(--gray-100);
}

.btn-group-custom .btn.active {
	background: var(--dark);
	color: var(--white);
}

.position-relative {
	position: relative;
}

.submit-chat-btn {
	background-color: #3c83f6;
	align-items: center;
	justify-content: center;
	padding-bottom: 14px;
	padding-top: 13px;
}

.submit-chat-btn-fa {
	color: #ffff;
	border: none;
}

.footer-text-muted {
	color: silver !important;
}

.footer-link::after {
	content: "";
	position: absolute;
	top: 5px;
	right: 91%;
	height: 27%;
	width: 1px;
	background-color: #9e9f9ee8
}

.footer-link {
	padding-right: 10px;
}

.footer-logo::after {
	content: "";
	position: absolute;
	top: 5px;
	right: -5%;
	height: 114%;
	width: 2px;
	background-color: black;
}

.chat-input {
	position: fixed;
	top: calc(100vh - 132px);
	padding: 10px;
	width: calc(100vw - 470px);
	background-color: #f6f7f9;
}

.message-container {
	flex: 1;
}

.main-container {
	height: 100%;
}

.bg-white-100 {
	background-color: #ffff !important;
}

.feedback-action {
	/* width: 65px; */
	/* position: absolute; */
	/* padding-left: calc(100vw - 695px); */
}

.feedback-action-parent {
	text-align: right;
}

.feedback-action-parent a {
	color: #8a8686;
}

.hover-display {
	display: none;
}

.hover-display.show {
	display: block;
}

#infovaultsList {
	position: absolute;
	background: #f3f4f6;
	padding: 10px;
	z-index: 999999;
	bottom: 23px;
	cursor: pointer;
	list-style-type: none;
	border-radius: 5px;
	overflow: auto;
	max-height: 50vh;
}

.infovaultsList {
	position: absolute;
	background: #f3f4f6;
	padding: 10px;
	z-index: 999999;
	bottom: 23px;
	cursor: pointer;
	list-style-type: none;
	border-radius: 5px;
	overflow: auto;
	max-height: 50vh;
}

#infovaultsList li {
	border-bottom: 1px solid #c8cacd;
	padding: 10px;
	/* background-color: #53daf9; */
}

.infovaultsList li {
	border-bottom: 1px solid #c8cacd;
	padding: 10px;
	/* background-color: #53daf9; */
}

#prompts {
	position: absolute;
	padding: 5px;
	z-index: 999999;
	bottom: -49px;
	cursor: pointer;
	font-weight: bold;
	background-color: #97939317;
	display: flex;
	width: 100%;
}

.large_modal {
	max-width: 80%
}

.no_style {
	list-style-type: none;
}

.no_style a {
	color: black;
}

.modal_column {
	max-height: calc(100vh - 350px);
	overflow-y: scroll;
}

#prompt_description {
	padding: 20px;
	background: silver;
}

.strong_infovault {
	background-color: #53daf9;
	padding: 3px;
	cursor: pointer;
}

.infovaultsList_hash {
	color: #0ac7f2;
	margin-bottom: -10px
}

#infovaultsList .active {
	background-color: #60d4ee;
}

.infovaultsList .active {
	background-color: #60d4ee;
}

.inline-input {
	height: calc(1.5em + 0.9rem + 2px);
	padding: 0.45rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #384252;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #e5e7eb;
	border-radius: 0.3rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


.progress {
	width: 150px;
	height: 150px;
	background: none;
	position: relative;
}

.progress::after {
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 20px solid #eee;
	position: absolute;
	top: 0;
	left: 0;
}

.progress>span {
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 1;
}

.progress .progress-left {
	left: 0;
}

.progress .progress-bar {
	width: 100%;
	height: 100%;
	background: none;
	border-width: 20px;
	border-style: solid;
	position: absolute;
	top: 0;
}

.progress .progress-left .progress-bar {
	left: 100%;
	border-top-right-radius: 80px;
	border-bottom-right-radius: 80px;
	border-left: 0;
	-webkit-transform-origin: center left;
	transform-origin: center left;
}

.progress .progress-right {
	right: 0;
}

.progress .progress-right .progress-bar {
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-1 1.8s linear forwards;
}

.progress .progress-value {
	position: absolute;
	top: 0;
	left: 0;
}

@keyframes loading-1 {
	0% {
		/* -webkit-transform: rotate(0deg); */
		/* transform: rotate(0deg); */
	}

	100% {
		/* -webkit-transform: rotate(180deg); */
		/* transform: rotate(180deg); */
	}
}

.bold {
	font-weight: bold;
}

.c-black {
	color: black !important;
}

.card-icon {
	width: 30px;
	background: #d8dee9;
	border-radius: 5px;
	padding: 3px;
	text-align: center;
	margin-right: 11px !important;
}

.prompt-card {
	width: 100%;
}

.i_active {
	color: #3c83f6
}

.i_inactive {
	color: #d7dfea
}

.custom-value-switch {
	float: right;
	margin-bottom: 6px;
}

.bootstrap-select {
	display: inherit !important;
	width: 100% !important;
}

.dropdown-toggle {
	background: none !important;
}

.space {
	background: space !important;
}

@media only screen and (max-width: 1000px) {
	.chat-input {
		width: 100% !important;
	}

}

@media only screen and (max-width: 450px) {
	#prompts {
		bottom: -61px;
		padding: 0px;
	}
}

.max-height-300 {
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
}

.chat-content pre {
	text-wrap: wrap;
}

.audio_btn .audio_fa {
	display: none;
}

.audio_btn:hover .audio_fa {
	display: inline-block;
}

.badge-light-dark {
	background-color: #d3d6da8a;
}

.mw-90 {
	max-width: 90% !important;
}

.mw-80 {
	max-width: 80% !important;
}

.mw-100 {
	max-width: 100% !important;
}

.w-20 {
	max-width: 20% !important;
}

.w-80 {
	max-width: 80% !important;
}

.mw-70 {
	max-width: 70% !important;
}

.h-100 {
	height: 100% !important;
}

#prompts .bootstrap-select {
	width: 200px !important;
}

#prompts .dropdown-menu {
	/* transform: translate3d(0px, 250px, 0px) !important; */
}

.chat-content p img {
	max-width: 300px !important;
}

.chat-content img {
	max-width: 300px !important;
}

.code_header {
	color: white;
	background: #555551;
	padding: 5px;
	justify-content: space-between;
}

.chat-content .shiki {
	border-radius: 0% !important;
}

.selected-image {
	max-width: 150px;
	max-height: 150px;
}

.selected-images-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.remove-button {
	position: absolute;
	background: none;
	color: red;
	border: none;
}

.attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.c-white {
	color: var(--white);
}

.div-disabled {
	background-color: #d4d8db !important;
    border: #d4d8db !important;
    cursor: not-allowed !important;
    border-radius: 10px;
    padding: 6px;
}
.conversation-container{
	height: 100% !important;
}
.mb-0{
	margin-bottom: 0px !important;
}
.chat-attachment{
	width: 20px !important;
	height: 20px !important;
	color: black !important;
	cursor: not-allowed !important;
}

.c-silver {
	color: silver;
}

.mh-10 {
	max-height: 10px !important;
}

.fs-12 {
	font-size: 12px !important;
}

.fs-20 {
	font-size: 20px !important;
}

.fs-18 {
	font-size: 18px !important;
}

.studio-header {
	padding: 10px;
	background: #b5b5b554;
	color: white !important;
}

.studio-btn {
	height: 40px;
	margin-top: 30px !important;
}

.d-none {
	display: none !important;
}

.create-btn {
	display: none;
}

li:hover .create-btn {
	display: block;
}

.create-btn-container {
	width: 20px;
	/* margin-top: 5px; */
	height: 45px;
}

.w-100 {
	width: 100% !important;
}

.b-none {
	border: none !important;
}

.custom-card {
	display: flex;
	position: relative
}

.app-sidebar-links {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0;
	margin: 0;
}

.app-sidebar-links li {
	padding: .25rem 0;
	transition: background .3s linear;
	border-radius: .4rem;
}

.app-sidebar-links li:hover:not(.active):not(.profile_list) {
	background: var(--gray-200)
}

.app-sidebar-links li>a {
	color: var(--gray-800);
}

.app-sidebar-links li>a svg {
	color: var(--gray-600);
}

.app-sidebar-links li.active {
	background: var(--primary);
}

.app-sidebar-links li.active>a,
.app-sidebar-links li.active>a svg {
	color: var(--white);
}

[data-theme-style="dark"] .app-sidebar-links li.active>a,
[data-theme-style="dark"] .app-sidebar-links li.active>a svg {
	color: var(--black);
}

.custom-card .card:hover {
	border: 1px solid #3c83f6;
}

.horizontal-line {
	border-top: 1px solid #b3bbcb;
	margin: 10px 0;
}

.pt-13 {
	padding-top: 13px;
}

.welcome-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.welcome-header {
	max-width: 70% !important;
	margin-bottom: 50px;
}

.welcome-links:hover .bg-gray {
	background-color: #e5e7eb;
	color: #4b5563;
}

.bg-gray {
	border: solid #e5e7eb 2px !important;
}

@media (min-width: 992px) {
	.d-lg-flex {
		display: flex !important;
	}
}

.fr {
	float: right !important;
}

.vh-100 {
	height: calc(100vw);
}

.overflow-hidden {
	overflow: hidden;
}

.new-chat-input {
	position: fixed;
	top: calc(100vh - 90px) !important;
	/* padding: 10px; */
	width: calc(70%);
	background-color: #f6f7f9;
}

.custom-option {
	position: relative;
}

.custom-option::after {
	content: "okkkkkk";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;

}


.vodiapicker {
	display: none;
}

.vodiapicker_list {
	padding-left: 0px;
	z-index: 1000;
}

.vodiapicker_list img,
.vodiapicker-btn-select img {
	width: 30px;
	border-radius: 50%;
}

.vodiapicker_list li {
	list-style: none;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
}

.vodiapicker_list li:hover {
	background-color: #e5e7eb;
}

.vodiapicker_list li img {
	margin: 5px;
}

.vodiapicker_list li span,
.vodiapicker-btn-select li span {
	margin-left: 10px;
}

/* item list */

.vodiapicker_list_container {
	display: none;
	/* width: 100%; */
	max-width: 350px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 5px;
	position: absolute;
	z-index: 1000;
	background-color: #f6f7f9;
	;

	width: 100%;
	/* Ensure .vodiapicker_list_container takes the full width of .lang-select */
	top: 100%;
	/* Position .vodiapicker_list_container below .lang-select */
	left: 0;
	/* Position .vodiapicker_list_container at the left edge of .lang-select */
}

.open {
	display: show !important;
}

.vodiapicker-btn-select {
	margin-top: 10px;
	width: 100%;
	max-width: 350px;
	height: 45px;
	border-radius: 5px;
	background-color: #fff;
	border: 1px solid #ccc;
	background: #f6f7f9;
	/* margin-left: 15px; */

}

.vodiapicker-btn-select li {
	list-style: none;
	float: left;
	padding-bottom: 0px;
	padding-left: 20px;
}

.vodiapicker-btn-select:hover {
	background-color: #e5e7eb;
	border: 1px solid transparent;
	box-shadow: inset 0 0px 0px 1px #ccc;


}

.vodiapicker-btn-select:focus {
	outline: none;
}

.lang-select {
	/* margin-left: 50px; */
	min-width: 350px;
	position: relative;
}

.vh-104 {
	height: calc(104vh);
}

.new-chat-container {
	padding-bottom: 43px;
	overflow-y: scroll;
	max-height: calc(90%);
}

.mic::after {
	content: "\f130";
	/* Unicode for the Font Awesome icon */
	font-family: "Font Awesome 5 Free";
	/* Font family for Font Awesome */
	font-weight: 900;
	/* Font weight for the icon */
	position: absolute;
	top: 0;
	right: 140px;
	font-size: 20px;
	/* Adjust the size of the icon */
	color: #333;
	/* Adjust the color of the icon */
	padding: 5px;
	/* Adjust padding around the icon if needed */
	pointer-events: none;
}

.chat-input-container {
	position: relative;
	display: flex;
	align-items: center;
}

.chat-input {
	padding: 10px;
	/* border: 1px solid #ccc; */
	border-radius: 5px;
	flex-grow: 1;
}

.chat-icons {
	position: absolute;
	right: 65px;
	display: flex;
	align-items: center;
	z-index: 1000;
	top: 7px;
}

.chat-icons i {
	margin-left: 10px;
	cursor: pointer;
}
.chat-attachments-icons {
	position: absolute;
	display: flex;
	align-items: center;
	z-index: 1000;
	top: 7px;
}

.chat-attachments-icons i {
	margin-left: 10px;
	cursor: pointer;
}
.chat-listing-navbar{
	overflow-y: scroll;
    max-height: calc(80vh);
    padding-bottom: 20% !important;
}
.chat-listing-navbar::-webkit-scrollbar {
    width: 7px; /* Set the width of the scrollbar */
}
/* Hide the scrollbar by default */
.chat-listing-navbar::-webkit-scrollbar-thumb {
    background-color: transparent; /* Set the scrollbar thumb color */
	border-radius: 5px;
}

/* Display the scrollbar on hover */
.chat-listing-navbar:hover::-webkit-scrollbar-thumb {
    background-color: #e5e7eb; /* Set the color of the scrollbar thumb on hover */
}
.w-15{
	max-width: 15% !important;
}
.nm-225{
	min-width: 225px;
}
.vodiapicker_list_caret {
    float: right;
    margin-right: 15px;
	margin-top: 4px;
}
.vodiapicker_list li{
	cursor: pointer;
}
#chat_bio{
	display: block !important;
}
.img-h-20{
	height: 20px;
}
.img-w-20{
	width: 20px;
}
.img-round{
	border-radius: 50%;
}
.cursor-link{
	cursor: pointer;
}
.new-heading{
	color: #044177;
}
.new-heading:hover {
    color: #044177;
}