.display-flex {
	display: flex;
	height: 100%;
}

#app-head {
	width: 100%;
	height: 60px;
	background-color: #fff;
	border-bottom: 1px solid #dbdfe9;
	box-shadow: 2px 0 4px #dbdfe9;
}

#app-head #app-head-logo {
	/* width: 60px;
	height: 60px; */
	float: left;
}

#app-head #app-head-logo img {
	margin: 13px 15px 0 15px !important;
	/* width: 30px; */
	height: 30px;
}

#app-head #app-head-location {
	font-size: 14px;
	/* height: 60px; */
	padding: 21px 0 0 60px;
	float: left;
}

#app-head #app-head-button {
	float: right;
	padding: 0 15px 0 0 !important;
}


#app-head #app-head-button .btn-app-head {
	font-size: 18px;
	padding: 6px 8px;
	font-weight: 500;
	margin-left: 5px;
	margin-top: 12px;
}

#app-head #app-head-button .btn-app-head-text {
	font-size: 12px;
	padding: 9px 8px;
	font-weight: 500;
	margin-left: 5px;
	top: -2px !important;
	position: relative;
}

#app-head #app-head-button .btn-app-head i {
	margin: 0;
}



#app-head #app-head-button .btn-app-head-small {
	font-size: 12px !important;
	padding: 6px 8px;
	margin-left: 5px;
	top: -2px !important;
	position: relative;
	/* letter-spacing: 0.03em; */
	text-transform: uppercase;
}

#app-head #app-head-button-small .btn-app-head-small i {
	margin: 0;
}

#app-body {
	display: flex;
	height: calc(100% - 61px);
}

#app-menu {
	background: linear-gradient(45deg, #2d78ff 0%, #1f5bc9 50%, #134db9 100%);
	text-align: left;
	overflow: auto;

	box-shadow: 0 2px 4px #c4cada;
}



#app-menu ul {
	text-align: center;
}

#app-menu ul li {
	cursor: pointer;
	color: #dbdfe9;
	font-size: 14px !important;
	border-radius: 10px;
}

#app-menu ul li:not(:first-child, .btn-user):hover,
#app-menu .active {
	/* background: rgb(255, 255, 255, .15); */
	background: rgb(255, 255, 255, .15);
}

#app-admin {
	overflow-x: auto;
	display: flex;
	/* background: red; */
}


#app-admin-menu {
	background: #f1f1f4;
	overflow-x: auto;
	box-shadow: inset 2px 0px 4px #f1f1f4, inset -2px 0px 4px #f1f1f4, inset 0px 2px 2px #dbdfe9;
	/* display: none; */
}


#app-admin-menu .active{
	color: var(--color-primary);
}


#app-admin-menu .app-admin-menu-data {
	padding: 0px 20px 20px 20px;
	display: none;
	/* display: flex; */
}

#app-admin-menu .app-admin-menu-data .app-admin-menu-data-col p {
	color: var(--color-gray-900) !important;
	font-weight: 600;
	/* margin-top: 40px !important; */
	margin-bottom: 10px !important;
}

#app-admin-menu .app-admin-menu-data ul li {
	margin-bottom: 10px;
	font-size: 14px;
	cursor: pointer;
	font-weight: 500;
	color: var(--color-gray-600);
}


#app-admin-body {
	/* background: crimson; */
	width: 100%;
	height: 100%;
	overflow-x: auto;
	/* background: #fff; */
	/* box-shadow: 0 2px 4px #c4cada; */
}


#app-admin-body .app-admin-body-data{
	padding: 15px;
	width: calc(100% - 30px);
}


@media (max-width: 1023px) {

	.mobile-display-flex-column {
		width: 100%;
		flex-direction: column;
	}

	#app-menu {
		width: 100%;
		height: 60px;
		border-top: 1px solid #dedede;
		order: 2;
	}

	#app-menu ul {
		text-align: center;
		margin-top: 10px;
	}

	#app-menu ul li {
		text-align: center;
		padding: 12px 10px;
		margin-right: 5px;
		width: 20px !important;
		display: inline-block;
	}

	#app-menu ul li:last-child {
		/* padding: 10px; */
	}

	/* #app-menu ul li img {
		width: 30px !important;
		height: 30px !important;
		position: absolute;
		margin-top: -8px;
		margin-left: -5px;
	} */

	#app-admin {
		width: 100%;
		height: calc(100% - 61px);
	}



	#app-admin-menu {
		width: 100%;
		height: 200px;
		order: 2;
		border-top: 1px solid #dbdfe9;
	}


	#app-admin-menu .app-admin-menu-data {
		display: flex;
	}

	#app-admin-menu .app-admin-menu-data .app-admin-menu-data-col:first-child {
		margin-top: 20px;
		margin-left: 0px;
	}
	
	
	#app-admin-menu .app-admin-menu-data .app-admin-menu-data-col {
		margin-top: 20px;
		margin-left: 40px;
	}
	


	#app-admin-body {
		width: 100%;
		height: calc(100% - 201px);
		order: 1;
	}

	/* #app-menu ul li:first-child {
		display: none;
	} */


}

@media (min-width: 1024px) {

	#app-menu {
		width: 60px;
		height: 100%;
		/* border-right: 1px solid #dbdfe9; */
	}

	#app-menu ul {
		padding: 10px 10px;
	}

	#app-menu ul li {
		text-align: center;
		padding: 10px 5px;
		margin-bottom: 10px;
		font-size: 16px !important;
	}

	#app-menu ul li:first-child {
		margin-top: 5px !important;
		/* margin-bottom: 10px;
		padding: 0 0 10px 6px !important; */
	}

	#app-admin {
		width: calc(100% - 60px);
		height: 100%;
	}

	#app-admin-menu {
		width: 220px;
		height: 100%;
		border-right: 1px solid #dbdfe9;
	}


	#app-admin-menu .app-admin-menu-data .app-admin-menu-data-col:first-child {
		margin-top: 20px !important;
	}
	
	
	#app-admin-menu .app-admin-menu-data .app-admin-menu-data-col {
		margin-top: 40px !important;
	}


	#app-admin-body {
		width: calc(100% - 220px);
		height: 100%;
	}

}



.text-color-gray-100 {
	color: #f9f9f9;
}

.text-color-gray-200 {
	color: #f1f1f4;
}

.text-color-gray-300 {
	color: #dbdfe9;
}

.text-color-gray-400 {
	color: #c4cada;
}

.text-color-gray-500 {
	color: #99a1b7;
}

.text-color-gray-600 {
	color: #78829d;
}

.text-color-gray-700 {
	color: #4b5675;
}

.text-color-gray-800 {
	color: #252f4a;
}

.text-color-gray-900 {
	color: #071437;
}

.img-circle{
	border-radius: 50%;
}

.img-circle-30{
	width: 30px;
	height: 30px;
}

.img-circle-40{
	width: 40px;
	height: 40px;
}

.img-circle-50{
	width: 50px;
	height: 50px;
}



#chat-robbot-menu-data {
	display: flex;
}


.tree ul {
	margin: 0 0 0 1em;
	/* indentation */
	padding: 0;
	list-style: none;
	color: #1c1c1e;
	position: relative;
}

.tree ul {
	margin-left: 0.5em;
}

.tree:before,
.tree ul:before {
	content: "";
	display: block;
	width: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	border-left: 1px solid;
}

.tree li {
	margin: 0;
	padding: 0 1.5em;
	/* line-height: 2em; */
	/* font-weight: bold; */
	position: relative;
	margin-top: 10px;
}

.tree li:before {
	content: "";
	display: block;
	width: 10px;
	/* same with indentation */
	height: 0;
	border-top: 1px solid;
	margin-top: -1px;
	/* border top width */
	position: absolute;
	top: 1em;
	/* (line-height/2) */
	left: 0;
}

#treeMenu .chat-robbot-menu-data-desc {
	border: 1px solid #ccc;
	/* background: #FFF; */
	max-width: 600px;
	border-radius: 10px;
	/* border-bottom-right-radius: 0; */
	padding: 10px 10px;

	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 0px 5px rgba(0, 0, 0, 0.3);
}


#treeMenu .title {
	font-size: 10px;
	color: #333;
	font-weight: 600 !important;
}

#treeMenu .title a {
	font-size: 16px;
	cursor: pointer;
}


#treeMenu .message-text {
	/* margin-top: 5px !important; */
	font-size: 14px;
	color: #666 !important;
	font-weight: 500 !important;
	overflow: auto;
	max-height: 80px;

}

#treeMenu .baseline {
	margin-top: 8px !important;
	font-size: 10px;
	text-align: right;
	font-weight: 600 !important;
	/* color: #48a5e3 !important; */
}

#chat-robbot-menu-data-btns{
	margin-right: 5px;
}

#chat-robbot-menu-data-btns a {
  padding: 5px 5px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  width: 15px; /* Set a width if needed */
  display: block; /* Make the buttons appear below each other */
  text-align: center;
  font-size: 10px;
}

#chat-robbot-menu-data-btns a:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#chat-robbot-menu-data-btns a:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#chat-robbot-menu-data-btns a:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}