@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400&display=swap');



.page-title{
	/* font-family: "ArpiaFont"; */
	font-weight: 400 !important;
}


.icon-nav-enx{
	background-image: url("https://login.enx.one/assets/img/enx-white-icon.png") ;
	background-size: 102px 27px ;
}

.be-left-sidebar .sidebar-elements > li ul{
	padding: 0px;
}

/* small devices */
@media (max-width: 750px) {

	.ss-usage{
		display: none;
	}
	
	.be-left-sidebar .left-sidebar-spacer{
		border-top: none !important;
	}

	.grid-stack{
		top: 10px !important;
	}
	
	.be-left-sidebar .left-sidebar-toggle:before{
		font: var(--fa-font-solid);
		content: "\e0ad";
		font-size: 24px;
	}
	.be-left-sidebar .left-sidebar-toggle.open:before{
		content: "\e0ad" ;
	}

	.be-wrapper{
		padding-top: 47px;
	}
	
	#modal-button-screen-open .page-layout-inner, #modal-button-screen-open .modal-body{
		padding: 0px;
		margin: 0px;
	}


}

@media (min-width: 750px) {
	.be-left-sidebar{
		transition: width 0.25s ease;
	}
	
	.be-navbar-header{
		transition: width 0.25s ease;
	}


	.be-top-header{
		height:47px;
	}
	
	.be-fixed-sidebar .be-left-sidebar{
		margin-top: 47px;
	}
	
	.be-collapsible-sidebar-collapsed .be-left-sidebar .sidebar-elements > li ul.visible{
		top: 0px;
		z-index: 1040;
		width: 280px;
	}
	
	.sidebar-elements > li ul.sub-menu{
		border-right-width: 1px;
		border-top-width: 0px;
		/* border-top-right-radius: 5px; */
	}
	
	.fixed-top{
		z-index: 1000;
	}

	.be-content{
		margin-left: 45px;
	}
	.be-collapsible-sidebar-collapsed .be-content{
		margin-left: 45px;
	}
	
	
	.be-collapsible-sidebar-hide-logo.be-collapsible-sidebar-collapsed .be-top-header .be-navbar-header{
		width: 44px;
	}
	
	
	.be-wrapper{
		padding-top: 47px !important;
	}
	
	.be-collapsible-sidebar-collapsed .be-left-sidebar{
		width: 45px;
	}

	.page-aside{
		left: 45px;
	}

	.be-collapsible-sidebar-collapsed .page-aside{
		left: 45px;
		z-index: 1000;
	}


	.be-top-header .be-navbar-header .be-toggle-left-sidebar{
		width:100%;
		padding: 0px 5px !important;
		text-align: left;
	}

}

body{
	background-color: #eeefF;
}
.main-content{
	padding-top: 10px !important;
	padding-right: 10px !important;
	padding-left: 10px !important;
	padding-bottom: 10px !important;	
}

.be-no-padding .main-content{
	padding:0px !important ;
	padding-bottom: 10px !important;
}

.be-aside-header{
	padding-top: 10px !important;
	padding-right: 10px !important;
	padding-left: 10px !important;
	padding-bottom: 10px !important;
	margin-left: 10px;	
	margin-right: 10px;
}

.be-top-header{
	border: none;
}

.be-top-header .be-navbar-header{
	flex: none !important;
}

.be-top-header .be-right-navbar{
	padding-right: 10px !important;	
}

.be-right-navbar{
	line-height: 47px !important;
	height: 47px !important;
	background-color: #EEEEEE;
}


.be-collapsible-sidebar-collapsed .be-left-sidebar .left-sidebar-content{
	padding-top: 5px !important;
}

.be-left-sidebar .sidebar-elements > li ul{
	background-color: #f4f6f8 ;
}

.be-left-sidebar .sidebar-elements > li > ul{
	border: none;
}

.be-left-sidebar .sidebar-elements > li > a > .icon{
	font-size: 19px !important;
}

.be-left-sidebar .sidebar-elements > li > a{
	line-height: 45px !important;
	padding-left: 12px !important;
}


.be-top-header .navbar-nav > li > a.nav-link{
	line-height: 47px;
}

.be-top-header .page-title{
	font-weight: 200;
	background-color: #EEEEEE;
	line-height: 47px;
}

.be-top-header .navbar-row{
	background-color: #EEEEEE;
	height: 47px;
	margin-left: 0px;
}


.be-top-header .navbar-nav > li > a.nav-link{
	color: black;
}

.be-left-sidebar{
	background-color: white;
}
.be-left-sidebar:before{
	/* border-right: none ; */
}

.be-icons-nav > li.dropdown > a .icon{
	color: black;
}


.bg-light{
	background-color: #EEEEEE;
}

.be-left-sidebar .sidebar-elements > li > a{
	color: black;
}

.aside-header .title{
	margin-top: 5px;
}

.aside-nav .title{
	padding: 8px 10px 4px;
}

.be-left-sidebar .sidebar-elements .sub-menu{
	display: none;
}

.be-left-sidebar .sidebar-elements .sub-menu.open{
	display: block;
}

.sub-menu .content{
	overflow-y: auto;
}

.page-aside .content{
	padding-top: 5px;
}


.tooltip-inner {
	max-width: 500px;
	padding: 3px 8px;
	color: #fff;
	text-align: center;
	background-color: #353535;
	border-radius: .25rem;
}

.selectize-control{
	font-size: 1.15em;
}

.selectize-xs{
	font-size: 11px;
	font-weight: 400;
	min-width: 100px;
}

.selectize-sm{
	font-size: 13px;
	font-weight: 400;
}

.selectize-lg{
	font-size: 18px;
	font-weight: 400;
}

.selectize-control.plugin-remove_button [data-value] .remove{
	font-size: 17px;
	padding: 2px;
}

.selectize-input.full{
	padding:5px !important;
}

.selectize-dropdown.single{
	/* margin-top: -10px !important ; */
}

.selectize-minh{
	min-height:200px;	
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
	margin-left: -3px;
	content: "";
	border-width: 5px 5px 0;
	border-top-color: #353535;
}


.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
	margin-top: -3px;
	content: "";
	border-width: 5px 5px 5px 0;
	border-right-color: #353535;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
	margin-left: -3px;
	content: "";
	border-width: 0 5px 5px;
	border-bottom-color: #353535;
}


.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
	right: 0;
	margin-top: -3px;
	content: "";
	border-width: 5px 0 5px 5px;
	border-left-color: #353535;
}


.btn{
	font-weight: 500;
}

.be-right-sidebar{
	margin-top: 47px;
	padding-bottom: 75px;
	overflow-y: auto;
	z-index: 990;
}

.be-right-sidebar {
  width: 100%;
}

@media (min-width: 768px) {
  .be-right-sidebar {
	width: 750px;
  }
}

.be-right-sidebar.singularai-gpt{
	width: 650px;
	overflow: none;
}

.singular-gpt-container{
	padding: 0px;
	margin: 0px;
}

.singular-gpt-container .chat-input{
	margin: 10px;
	margin-bottom: 20px !important;
	display: none;
}

.singular-gpt-chat{
	overflow: auto;

	transition: height 0.2s ease;
}

.singular-gpt-header{
	font-size: 20px;
	font-weight: 400;
	padding: 5px 5px 5px;
	background-color: gainsboro;
	margin-bottom: 5px;
}

.singular-ai-gpt-close{
	cursor: pointer;
	font-size: 28px;
	margin-right: 15px;
}

.card-homepage{
	overflow-y: auto !important;
	overflow-x: hidden;
	margin-bottom: -20px;
	width: 100%;
}

.img-thumbnail{
	max-width: 100px;
	min-width: 75px;
	max-height: 100px;
}

.img-signature{
	width: 300px;
	background-color: white;
}

.img-signature-modal{
	background-color: white;
}


.img-thumbnail-lg{
	width: 100%;
	max-width: 200px;
	min-width: 75px;
	max-height: 200px;
}

.page-aside{
	margin-top: 47px !important;
	background: none;
	border-right: 1px solid grey;
	border-top: 0px solid grey;
	background-color: white;
	border-top-right-radius: 0px;
}

.modal { overflow-y: auto }

.modal-open {
/*    -webkit-filter: blur(5px) grayscale(90%); */
}

/*----- JV ( Blur del Backdrop ) -------*/

.modal-open .modal-backdrop {
	backdrop-filter: blur(50px);
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 1 !important;
}

/*------------*/

.sourcecode-font{
	font-family: 'ArpiaFont', monospace;
	font-weight: 300;
	font-size: 19px;
}

.sourcecode, .sourcecode:focus{
	background: dimgray ;
	color: yellow;
	border-color:yellow;
	font-family: 'ArpiaFont', monospace;
	font-weight: 300;	
	border-radius: 5px;
}
.sourcecode, .sourcecode:active{
	border-color:darkgoldenrod;
}

.fc-chart-area{
	/* margin-top: -15px; */
	margin-left: -15px;
	margin-right: -15px;
}

.small-txt{
	font-size: 80% !important;
}

.insights-title{
	font-size: 15px;
}

.be-color-header-dark .be-top-header{
	background-color: #31363b !important ;
	border-bottom-color: #31363b !important ;
}


.aside-nav nav li a{
	padding: 6px 22px !important;
}

.left-sidebar-toggle{
	font-size: 18px !important;
}

#overlay {
		  margin-left: 510px;
		  position: fixed;
		  display: none;
		  width: 100%;
		  height: 100%;
		  top: 46px;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: rgba(197, 197, 197, 0.3);
		  z-index: 1020;
		  cursor: pointer;
}


#overlay-data-app {
		  position: fixed;
		  display: none;
		  width: 100%;
		  height: 100%;
		  top: 46px;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: rgba(138, 138, 138, 0.3);
		  z-index: 1020;
		  cursor: pointer;
}



.be-collapsible-sidebar-collapsed #overlay {
		  margin-left: 325px !important;
}
.dropdown-menu{
	z-index: 20000 !important;
	padding: 5px 0px;
}

.dropdown-menu:not(.be-connections){
	font-size: 1em;
}

.dropdown-menu>.dropdown-item{
	padding: 3px 10px;
	font-size: 12px;
}

.dropdown-menu>.dropdown-item.h4{
	padding: 5px 15px;
	font-size: 1.1875rem;
}

.be-top-header .navbar-nav > li.dropdown .dropdown-menu > a{
	padding: 5px 15px;
}


.dropdown-item.active{
	color: lightgray !important;
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}

.dropdown-item.active{
	color: white !important;
}

.dropdown-item:hover{
	/* color:white !important; */
}

.be-top-header .be-user-nav>li.dropdown .dropdown-menu a:hover{
	color:gray !important;
}


.card-report-opt{
	margin-top:-9px;
	margin-right:-10px;
	margin-bottom: -20px;	
}
.card-full-dark{
	background-color:  black ;
}

.btn{
	text-transform: uppercase !important;
}

.be-aside-header-title{
	font-weight: 500 !important;
}

.input-group-xs {
  font-size: 10px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
	font-weight: 400 !important;
}

.card h3, .card h4{
	text-transform: none !important;
}

.be-icons-nav > li.dropdown > a .icon{
	font-size: 16px !important;
}

.card-header{
	font-weight: 500 !important;
	margin-left: 10px;
}

.card-header-sm{
	font-size: 13px;
}

.card-footer{
	background-color: transparent;
}

.grid-stack:not(.be-right-sidebar .grid-stack) {
	top: 55px;
	margin-bottom: 100px !important;
}

.grid-stack-item-content .card-body{
	padding-top: 0px !important;
}

.grid-stack-item-content .nav-tabs > li.nav-item a.nav-link{
	font-size: 16px;
}

.grid-stack-item-content .nav-tabs{
	width:100% ;
}

.grid-stack-item-content .tab-pane{
	margin-left: -20px;
	margin-right: -20px;
	margin-bottom: -20px;	
}


.grid-stack .grid-stack-item{
	padding: 0px 0px 0px;
}

.grid-stack>.grid-stack-item>.grid-stack-item-content{
	left: 3px !important;
	right: 3px !important;
}

.grid-stack .grid-stack-item-content .card > .card-header{
	padding: 5px 5px 10px 5px;
	margin: 0px 5px;
}

.grid-stack .grid-stack-item-content .card > .card-body{
	padding: 10px 5px 5px ;
}

.grid-admin{
	  padding-left: 10px;
	  padding-right: 10px;
	  border-radius: 5px;
	  background-color: white;
	  background-size: 7px 7px;
	  background-image: radial-gradient(circle, rgb(203, 203, 203) 1px, rgba(255, 255, 255, 0) 1px);
}



#app-scr-workarea{
	padding-bottom: 50px;
}

#app-scr-workarea div.div-layout div.data-dash div.card.card-border, #design-layout div.div-layout div.data-dash div.card.card-border{
	border: none;
} 


.master-detail{
	margin-left: 20px;
	margin-right: 20px;
}

.form{
	margin-left: 20px;
	margin-right: 20px;
}


.timeline{
	max-width: none !important;
}
.timeline-blockquote{
	padding-top: 1px;
}
.card-body .blockquote p{
	margin-top: 10px;
}
.user-info-list table tr td{
	padding: 5px !important;
}

.be-right-sidebar .note-editor.note-frame .note-toolbar > .btn-group .btn-light{
	padding: 5px 10px 5px;
	font-size: 16px;
}

.cursor-pointer{
	cursor: pointer; 
}

.be-icons-nav .nav-item-dropdown a .icon{
	font-size: 19px;
	vertical-align: middle;
	color: var(--main-text-color);
}
.be-icons-nav .nav-item-dropdown a.nav-link{
	line-height: 47px;
	padding: 0px 0px 0px;
	color: white;
}
.be-top-header .nav-item-dropdown{
	padding: 0px 10px;
}

.be-grid-filters{
	overflow: auto !important;
}

.nav-sub-menu .nav-link{
	font-size: 16px;
	font-weight: 600;
	border-bottom: 3px var(--main-text-color) solid;
}

.nav-tabs > li.nav-item a.nav-link{
	padding: 5px 15px;
	margin-top: 5px;
}	
.nav-tabs > li.nav-item a.nav-link h4, .nav-tabs > li.nav-item a.nav-link h3{
	margin-top: 0px;
}

.nav-sub-menu .nav-link.active{
	border-bottom: 4px #1445ff solid;
}

.parent > ul.sub-menu.visible{
	background-color: white;
}

.be-left-sidebar .sidebar-elements > li ul li > a{
	background-color: white;
}

.be-icons-nav > li.dropdown .dropdown-menu{
	width: 500px;
}



.data-app-page-layout .row{
	margin-right: 0px;
	margin-left: 0px;
}

.data-app-page-layout .row > .col, .data-app-page-layout .row > [class*="col-"]{
	padding-right: 3px;
	padding-left: 3px;
}

.data-app-page-layout .card{
	margin-bottom: 10px;
}


.workshop div.table{
	background-size: 10px 10px;
	background-image: radial-gradient(circle, lightgrey 1px, rgba(0, 0, 0, 0) 1px);

}

.card-header .btn-card-header{
	border: none;
	box-shadow: none;
	-webkit-box-shadow:none;
}

.input-group-sm>.form-control:not(textarea), .input-group-sm>.input-group-prepend>.input-group-text, .input-group-sm>.input-group-append>.input-group-text, .input-group-sm>.input-group-prepend>.btn, .input-group-sm>.input-group-append>.btn{
	height: 32px;
}

.input-group-xs>.form-control:not(textarea), .input-group-xs>.input-group-prepend>.input-group-text, .input-group-xs>.input-group-append>.input-group-text, .input-group-xs>.input-group-prepend>.btn, .input-group-xs>.input-group-append>.btn{
	height: 28px;
	font-size: 12px;
}



.workshop div.table-layout{
	background-size: 7px 7px;
	background-image: radial-gradient(circle, rgb(246, 246, 246) 1px, rgba(255, 255, 255, 0) 1px);

}

.workshop div.table-layout thead{
	background-color: white;
}


.navbar-dark .navbar-nav .nav-link.btn-secondary{
	color: gray;
}
.navbar-dark .navbar-nav .nav-link.btn-primary{
	/* color: black; */
}
.accordion .card-header button{
	font-size: 1em;
}

.accordion .note-editor button{
	padding: 0px 10px;
}

.btn-group-justified > button.btn{
	width: 100% ;
}
.btn-group-justified .btn, .btn-group-justified .btn-group{
	width: 100%;
}

.table-responsive table thead th{
	white-space: nowrap;
}
.table-responsive table tbody td{
	min-width: 75px;
	max-width: 50ch;
}



.icon-container .icon{
	transition: background-color 100ms ease-in-out;
}

.icon-container .icon span{
	color: black;
}
.icon-container .icon:hover{
	background-color: black;
	color:white;
}

.btn-secondary{
	color: black;
}

.nav-orchestrator > .icon-orchestrator, .nav-link-white > .icon{
	color: white !important;
}

.nav-link-rounded{
	border-bottom-right-radius: 50px;
	border-bottom-left-radius: 50px;
	
}

.be-icons-nav .nav-item-dropdown a.nav-link{
	color:black;
}

.btn-primary{
	background-color: black;
	color: white;
	border-color: black;
}
.btn-primary:hover, .btn-primary.hover{
	background-color: dimgrey !important ;
	border: none !important ;
	border-color: transparent;
}

.btn-primary:active, .btn-primary.active{
	background-color: dimgrey !important ;
	border: none !important ;
	border-color: transparent;
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
	border: none;
}

div.prompt-responses .prompt-chain:nth-child(odd){
	background-color: transparent;
}
div.prompt-responses .prompt-chain:nth-child(even){
	background-color: #FFF;
}



.form-control-slider{
	width:100%;
}

.badge{
	border-radius: 4px;
}


/* Custom Badge Colors */
.badge-pink {
  background-color: #ff99cc;
  color: #fff;
  border-color: #ff99cc ;
}

.badge-purple {
  background-color: #800080;
  color: #fff;
  border-color: #800080 ;

}

.badge-aqua {
  background-color: #00ffff;
  color: #000;
  border-color: #00ffff ;

}

.badge-turquoise {
  background-color: #40e0d0;
  color: #fff;
  border-color: #40e0d0 ;

}

.badge-yellow {
  background-color: #ffff66;
  color: #000;
  border-color: #ffff66 ;

}

.badge-orange {
  background-color: #ff9900;
  color: #fff;
  border-color: #ff9900;
}

.badge-lime {
  background-color: #00ff00;
  color: #000;
 border-color: #00ff00;
 
}

.badge-teal {
  background-color: #008080;
  color: #fff;
  border-color: #008080;

}

.badge-brown {
  background-color: #a52a2a;
  color: #fff;
  border-color: #a52a2a;

}


/*
#open-session .grid-area{
	display: grid; 
	grid-gap: 5px; 
	grid-template-columns: repeat(auto-fill, 250px);
	justify-content: center;
}

@media only screen and (max-width: 600px) {
	#open-session  .grid-area{
		grid-template-columns: repeat(auto-fill, 100%);
	}
}

#open-session .grid-area-col{
	display: table-cell;
}

#open-session .grid-area-col .card{
	margin: 5px;
}

*/

#open-session .row .col-sm-3 .card-body{
	height: 75px;
}

#open-session .row .col-sm-3 .card-body .a{
	color: black;
}

#open-session .btn-open-session{
	color: black;
	line-height: 1.6;
}

#open-session .col-sm-3.current .card{
	border-color: green;
	border-width: 2px;
}

.aside-nav .nav.file-list li a, .aside-nav .nav.file-list-global li a{
	padding: 5px 15px;
}

#run-console{
	position: fixed; 
	bottom: 0; 
	width: 100%; 
	height: 350px; 
	background-color: black;
	color: white;
}

#run-console > .run-console-header{
	width:100%; 
	background-color: rgb(197, 197, 197); 
	padding: 5px;
	color: black ;
}

	.chat-bg-singular{
	background-color: #FFF;
	border-radius: 15px !important;
	border: 1px solid rgba(90, 90, 90, 0.2);
}
.user-question{
	padding: 10px 20px;
	background-color: #f3f3f3;
	border-radius: 25px;
	display: inline-block;
	position: relative;
	word-wrap: anywhere;
}

.chat-input .input-wrapper{
 border-radius: 15px;
 background-color: #f8f8f8;
 padding: 10px;
 padding-right: 14px;
 padding-left: 14px;
 border: 1px solid rgba(90, 90, 90, 0.2) !important;
 box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

.chat-input .input-wrapper .col-md-12>input, .chat-input .input-wrapper .col-md-12>textarea{
  border: 0;
	background-color: transparent;
  width: 100%;
  font-size: 17px;
  font-weight: 300;
  outline: 0;
  border-radius: 15px;
	resize: none;
	field-sizing: content;
	max-height: 100px;
	line-height: 22px;
	overflow-y: auto;
	color: rgba(50,50,50,1);
	vertical-align: middle;
	height: 25px;
}


.chat-input .input-wrapper .optionBtn{
padding: 6px 12px;
font-size: 1em;
line-height: 28px;
border-radius: 100%;
display: inline-block;
background-color: rgba(0,0,0,0.05);
user-select: none;
-webkit-user-select: none;
font-size: 18px;
cursor: pointer;
position: relative;
}

.chat-input .input-wrapper .optionBtn:hover{
padding: 6px 12px;
font-size: 1em;
line-height: 28px;
border-radius: 100%;
display: inline-block;
background-color: rgba(0,0,0,1);
color: #FFF;
user-select: none;
-webkit-user-select: none;
font-size: 18px;
cursor: pointer;
}

.chat-input .input-wrapper .optionBtnSm{
padding: 2px 8px;
font-size: 1em;
line-height: 28px;
border-radius: 20px;
display: inline-block;
background-color: rgba(0,0,0,0.05);
user-select: none;
-webkit-user-select: none;
font-size: 16px;
cursor: pointer;
}

.chat-input .input-wrapper .optionBtnSm:hover{
padding: 2px 8px;
font-size: 1em;
line-height: 28px;
border-radius: 20px;
display: inline-block;
background-color: rgba(0,0,0,1);
color: #FFF;
user-select: none;
-webkit-user-select: none;
font-size: 16px;
cursor: pointer;
}

.chat-input .input-wrapper .indicatorlegend{
padding: 0px; font-size: 10px; border-radius: 40px !important; display: inline-block; color: #2f2f2f; background-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0) !important; margin-top: 16px;
}


 .chat-input .input-wrapper .sendMsg{
	
	background-color: #2f2f2f;
	
	font-size: 1.7rem;
	margin-top: px;
	cursor: pointer;
	
	height: 36px;
	width: 36px;
	border-radius: 18px;
	color: #2f2f2f;
	box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
  }
  
  .chat-input .input-wrapper .sendMsg .sendIcon{
	color: #FFF;
	margin-left: 8.5px;
	margin-bottom: -1.5px;
  }
  
  .chat-input .input-wrapper .sendMsg .loader{
	  color: #FFF;
	  margin-left: 8.5px;
	  margin-bottom: -3.5px;
	}
	
  /* Loader Animation */
	.fa-loader {
		font-size: 20px;  /* Adjust size */
		color: #FFF;   /* Change color */
		animation: spin 1.5s linear infinite; /* Rotation effect */
	}
	
	/* Keyframes for rotation */
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

  .app-sai-chat{
	  background-color: #FFF;
	  border-radius: 20px;
	  margin: 0px 10px 0px 10px;
  }
  

  
  #input-container{
	  padding-left: 10px;
	  padding-right: 10px;
  }
  
  @media (max-width: 768px) {
  
  .app-sai-chat{
	  margin: 0px 0px 0px 0px;
	  border-radius: 0px;
  }
	  
  }

/* DEMO-SPECIFIC STYLES */
.typewriter-loader-container{
	padding: 8px;
	background-color: #000;
	animation: 
	blink-bg 2s linear infinite;
	-webkit-animation-delay:0.9s;
	display: inline-block;
}

.typewriter-loader-txt{
  color: #fff;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid #FFF; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
	typing 0.8s steps(30, end),
	blink-caret 1s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #FFF; }
}

@keyframes blink-bg {
  from, to { background-color: #000; opacity: 0.5;}
  50% { background-color: #000; opacity: 1; }
}

.full-width-98, .full-width-100{
	width: 98%;
	max-width: none;
}

.full-width{
	width: 98%;
	max-width: none;
}

.be-wrapper-no-padding{
	padding-top: 0px !important;
}

.page-aside-no-margin{
	margin-top: 0px !important;
	left: 0px !important;
}

.note-btn.btn{
	color: #444;
}

.note-editor.note-frame.card{
	background: transparent !important;
}

.note-editor.note-frame{
	border: 1px solid transparent !important;
}

/* Block Selection */

.no-select {
	-webkit-user-select: none; /* Chrome, Safari, Opera */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* Internet Explorer/Edge */
	user-select: none;         /* Non-prefixed version, currently supported by most modern browsers */
}




/* ------ SWITCH ------*/


.switch-toggle-button-cover {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.switch-toggle-button-cover .button-cover,
.switch-toggle-button-cover .knobs,
.switch-toggle-button-cover .layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.switch-toggle-button-cover .button {
  position: relative;
  width: 72px;
  height: 24px;
  overflow: hidden;
}

.switch-toggle-button-cover .button.r,
.switch-toggle-button-cover .button.r .layer {
  border-radius: 100px;
}

.switch-toggle-button-cover .button.b2 {
  border-radius: 2px;
}

.switch-toggle-button-cover .checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.switch-toggle-button-cover .knobs {
  z-index: 2;
}

.switch-toggle-button-cover .layer {
  width: 100%;
  background-color: #ffdfde;
  border-radius: 4px;
  transition: 0.3s ease all;
  z-index: 1;
}

.switch-toggle-button-cover .switch .knobs:before,
.switch-toggle-button-cover .switch .knobs:after,
.switch-toggle-button-cover .switch .knobs span:before,
.switch-toggle-button-cover .switch .knobs span:after {
  position: absolute;
  top: 0px;
  width: 28px;
  height: 10px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 8px 4px;
  border-radius: 2px;
  transition: 0.3s ease all;
}

.switch-toggle-button-cover .switch .knobs:before,
.switch-toggle-button-cover .switch .knobs:after {
  color: #4e4e4e;
  z-index: 1;
}

.switch-toggle-button-cover .switch .knobs:before {
  content: "NO";
  left: 4px;
}

.switch-toggle-button-cover .switch .knobs:after {
  content: "YES";
  right: 4px;
}

.switch-toggle-button-cover .switch4 .knobs span {
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.switch-toggle-button-cover .switch .knobs span:before {
  left: 4px;
  top: -28px;
 background-color: rgba(35,211,101,1);
}

.switch-toggle-button-cover .switch .knobs span:after {
  top: 4px;
  left: 39px;
 
  background-color: rgba(254,93,87,1);
}

.switch-toggle-button-cover .switch .knobs span:before,
.switch-toggle-button-cover .switch .knobs span:after {
  content: "";
  width: 28px;
  z-index: 2;
}

.switch-toggle-button-cover .switch .checkbox:checked + .knobs span:before {
  top: 4px;
}

.switch-toggle-button-cover .switch .checkbox:checked + .knobs span:after {
  top: -28px;
}

.switch-toggle-button-cover .switch .checkbox:checked ~ .layer {
  background-color: #daf6e1;
  border-radius: 4px;
}


.js-signature{
	width: 100%; /* Use 100% width for responsive design */
	height: 300px; /* Set a fixed height */
}

/*--------------*/




 .checkbox-wrapper-16 *,
  .checkbox-wrapper-16 *:after,
  .checkbox-wrapper-16 *:before {
	box-sizing: border-box;
  }

  .checkbox-wrapper-16 .checkbox-input {
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(100%);
			clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
  }
  .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {
	border-color: #45a500;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	color: #45a500;
  }
  .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile:before {
	transform: scale(1);
	opacity: 1;
	background-color: #45a500;
	border-color: #45a500;
  }
  .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,
  .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {
	color: #45a500;
  }
  .checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {
	border-color: #45a500;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
  }
  .checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile:before {
	transform: scale(1);
	opacity: 1;
  }

  .checkbox-wrapper-16 .checkbox-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 8rem;
	min-height: 7rem;
	border-radius: 0.5rem;
	border: 2px solid #b5d9bf;
	background-color: #fff;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	transition: 0.15s ease;
	cursor: pointer;
	position: relative;
  }
  .checkbox-wrapper-16 .checkbox-tile:before {
	content: "";
	position: absolute;
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid #b5d9bf;
	background-color: #fff;
	border-radius: 50%;
	top: 0.5rem;
	left: 0.5rem;
	opacity: 0;
	transform: scale(0);
	transition: 0.25s ease;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
  }
  .checkbox-wrapper-16 .checkbox-tile:hover {
	border-color: #45a500;
  }
  .checkbox-wrapper-16 .checkbox-tile:hover:before {
	transform: scale(1);
	opacity: 1;
  }

  .checkbox-wrapper-16 .checkbox-icon {
	transition: 0.375s ease;
	color: #494949;
	margin-top:15px;
	margin-bottom: 5px;
  }
  .checkbox-wrapper-16 .checkbox-icon svg {
	width: 3rem;
	height: 3rem;
  }

  .checkbox-wrapper-16 .checkbox-label {
	color: #707070;
	transition: 0.375s ease;
	text-align: center;
	margin-top:10px;
	margin-bottom: 10px;
  }
  
  
/* Map BOX */

.mapboxgl-popup-content{
	padding: 1px 4px 5px !important;
}

.mapboxgl-popup-content h5{
	margin-top: 5px;
	margin-bottom: 5px;
}

.mapboxgl-popup-content p{
	padding: 0px;
	margin: 0px;
}


/* IMAGE ARRAY AND SHOW */



.icon-img-group {
  position: relative;
  width: 140px; /* Ajusta el tamaño del "icono" */
  height: 140px;
  
}

.icon-img.badge{
position: absolute;
top: 5px;
z-index: 10;
left: -5px;
}

.icon-image .img-div{
	width: 90px; height: 90px; background-size: cover; background-position: center;
}

tr .icon-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}

tr .icon-image:nth-child(1) {
  z-index: 4;
  top: 0;
  left: 0;
}

tr .icon-image:nth-child(2) {
  z-index: 3;
  top: 10px;
  left: 0px;
}

tr .icon-image:nth-child(3) {
  z-index: 2;
  top: 20px;
  left: 0px;
}

tr .icon-image:nth-child(4) {
  z-index: 1;
  top: 30px;
  left: 0px;
}

tr .icon-image:nth-child(5) {
  z-index: 0;
  top: 40px;
  left: 0px;
}

tr .table-video{
	width: 200px; /* Ancho fijo para todos los videos */
	  height: 120px; /* Altura fija para todos los videos */
	  border-radius: 6px; /* Bordes redondeados opcionales */
	  background: #000;
}

.btn-show-geojson{
	white-space: nowrap ;
}

pre{
	background-color: transparent;
}

pre.text-light{
	color: #333333;
}

/* Fullscreen Modal with Proper Centering */
.modal-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center; /* Vertically center */
  justify-content: center; /* Horizontally center */
  background: rgba(0, 0, 0, 0.8); /* Optional backdrop */
  z-index: 1050;
  padding: 20px; /* Adds gap around modal */
  overflow: hidden; /* Prevent overflow */
}

.modal-fullscreen .modal-dialog {
  width: 100%;
  max-width: calc(100% - 40px); /* Horizontal gap */
  max-height: calc(100% - 40px); /* Vertical gap */
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: 10px; /* Rounded corners */
  background-color: #333; /* Modal background */
  overflow: hidden;
}

.modal-fullscreen .modal-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border: 0;
}

.modal-fullscreen .modal-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  color: #fff; /* Text color for better readability */
}

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  flex-shrink: 0;
}



//-- STACK IMPLEMENTATION - JV //


/* COMPONENTS */
/* The primary layout component that powers HStack and VStack */
.chat-input .input-wrapper .flex {
	--spacing: 4px;
	--direction: row;
	--align: center;
	display: flex;
	justify-content: space-between;
	align-items: var(--align);
	flex-direction: var(--direction);
}

/* Adjust the spacing of all (immediate) inner children */
.chat-input .input-wrapper .flex > * + * {
	margin-left: var(--spacing);
}

/* Horizontally stack items in line. */
.chat-input .input-wrapper .hstack {
	--direction: row;
}

/* Vertically stack items on top of each other. */
.chat-input .input-wrapper .vstack {
	--align: stretch;
	--direction: column;
}
/* Adjust spacing for vertically stacking items */
.chat-input .input-wrapper .vstack > * + * {
	margin-left: unset;
	margin-top: var(--spacing);
}

/* Adaptive take up space within a stack, used for content or for pushing items. */
.chat-input .input-wrapper .spacer {
	flex: 1;
}

/* MODIFIERS */
/* Adjusts spacing between items */
.chat-input .input-wrapper .--sp1 {
	--spacing: calc(var(--grid) * 1);
}
.chat-input .input-wrapper .--sp2 {
	--spacing: calc(var(--grid) * 2);
}
.chat-input .input-wrapper .--sp3 {
	--spacing: calc(var(--grid) * 3);
}
.chat-input .input-wrapper .--sp4 {
	--spacing: calc(var(--grid) * 4);
}
.chat-input .input-wrapper .--sp5 {
	--spacing: calc(var(--grid) * 5);
}
.chat-input .input-wrapper .--sp6 {
	--spacing: calc(var(--grid) * 6);
}

/* Adjusts alignment of items within a stack. */
.chat-input .input-wrapper .--top {
	--align: flex-start;
}
.chat-input .input-wrapper .--left {
	justify-content: flex-start;
}
.chat-input .input-wrapper .--center {
	justify-content: center;
}
.chat-input .input-wrapper .--right {
	justify-content: flex-end;
}
.chat-input .input-wrapper .--edge {
	justify-content: space-between;
}

/* Vertically center items in a VStack */
.chat-input .input-wrapper .--v-center {
	--align: center;
}

/* RESPONSIVE */
/* Responsive styles to swap between HStack and VStack for tablet/desktop */
@media (min-width: 40em) {
	.chat-input .input-wrapper .vstack\@md {
		--align: stretch;
		--direction: column;
	}
	.chat-input .input-wrapper .vstack\@md > * + * {
		margin-left: unset;
		margin-top: var(--spacing);
	}
}
@media (min-width: 60em) {
	.chat-input .input-wrapper .vstack\@lg {
		--align: stretch;
		--direction: column;
	}
	.chat-input .input-wrapper .vstack\@lg > * + * {
		margin-left: unset;
		margin-top: var(--spacing);
	}
}

@media (min-width: 40em) {
	.chat-input .input-wrapper .hstack\@md {
		--direction: row;
	}
	.chat-input .input-wrapper .hstack\@md > * + * {
		margin-top: unset;
		margin-left: var(--spacing);
	}
}
@media (min-width: 60em) {
	.chat-input .input-wrapper .hstack\@lg {
		--direction: row;
	}
	.chat-input .input-wrapper .hstack\@lg > * + * {
		margin-top: unset;
		margin-left: var(--spacing);
	}
}





.floating-menu {
	right: -50px !important;  /* Default resting position */
	overflow: hidden;
	background: #FFF;
	min-width: 450px;
	max-width: 500px;
	transform: translateX(450px);  /* Start fully hidden off-screen */
	transition: transform 0.4s ease, opacity 0.4s ease;

}

.floating-menu.show {
	transform: translateX(0);  /* Slide in to simulate right: -50px */
	opacity: 1;
}


.menu-toggle.hide, .menu-add-toggle.hide {
	right: -300px;
	opacity: 1;
}


.floating-menu .conversation-item {
	display: flex;
	align-items: center;
	padding: 10px 0px;
	margin: 10px;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.2s ease;
	border-radius: 6px;
	background-color: rgba(0,0,0,0.02);
	color: #666;
}

.floating-menu .conversation-item:hover {
	display: flex;
	align-items: center;
	padding: 10px 0px;
	margin: 10px;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.2s ease;
	border-radius: 6px;
	background-color: rgba(0,0,0,0.04);
	color: #444;
}



.floating-container {
	width: 400px;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 110px);  /* Adjust height to fit within viewport */
}

.conversations-list {
	flex: 1;  /* Take up remaining space */
	overflow-y: auto;  /* Enable scrolling for all conversations */
	scroll-behavior: smooth;
	
}





.conversation-item-nof{
	padding: 12px 16px 12px 10px;
	text-align: center;

}

.menu-section {
	padding: 5px 10px;
	font-weight: normal;
	color: #888;

	
}

.floating-menu a {
	display: flex;
	align-items: center;
	padding: 12px 16px 12px 10px;
	text-decoration: none;
	color: inherit;
	
	transition: background-color 0.2s ease;
}

.floating-menu a:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.selected-conversation{
	background-color: rgba(0, 0, 0, 0.06) !important;
	border: 1px solid rgba(0,0,0,0.1) !important;
}


.menu-toggle {
	position: fixed;
		top: 80px;
		right: -27px;
		width: 64px;
		z-index: 100;
		padding: 10px 4px;
		padding-right: 30px;
		justify-content: space-between;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		transition: right 0.4s ease, opacity 0.4s ease;
		
		
}

.menu-toggle .btnTitle {
		
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		transition: right 0.4s ease, opacity 0.4s ease;
}

.menu-toggle .icon {
		
		writing-mode: vertical-rl;
		transform: rotate(360deg);
		transition: right 0.4s ease, opacity 0.4s ease;
		margin-right: 5px;
		margin-top: 5px;
}

.menu-add-toggle {
	position: fixed;
		top: 220px;
		width: 64px;
		right: -27px;
		z-index: 100;
		padding: 10px 4px;
		padding-right: 30px;
		justify-content: space-between;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		transition: right 0.4s ease, opacity 0.4s ease;
		
		
}

.menu-add-toggle .icon {
		
		writing-mode: vertical-rl;
		transform: rotate(360deg);
		transition: right 0.4s ease, opacity 0.4s ease;
		margin-right: 5px;
}

.menu-toggle.responsiveT {
	top: 120px;
}

.menu-add-toggle.responsiveT {
	top: 260px;
}

.menu-toggle .badge {
	font-size: 8px;
	top: 2px;
	position: absolute;
	left: 30px;
	background-color: red;
	color: white;
	border-radius: 10rem;
	border: 0px;
}

/* Dark Mode Specific Background */
[data-theme="light"] .menu-toggle {
	background-color: rgba(255, 255, 255, 0.6); /* Light background with transparency */
}

[data-theme="dark"] .menu-toggle {
	background-color: rgba(47, 47, 47, 0.8); /* Darker transparent background */
}

/* Dark Mode Specific Background */
[data-theme="light"] .menu-add-toggle {
	background-color: rgba(255, 255, 255, 0.6); /* Light background with transparency */
}

[data-theme="dark"] .menu-add-toggle {
	background-color: rgba(47, 47, 47, 0.8); /* Darker transparent background */
}


.search-bar {
	position: sticky;
	top: 0;
	z-index: 10;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 0px 0px;
	margin: 10px;
}

.search-bar input {
	width: 100%;
	padding: 8px 8px 8px 8px;
	border: none;

	color: #444;
	font-size: 16px;
	outline: none;  /* Removes the blue outline */
	box-shadow: none;  /* Removes any shadow on focus */
	background: transparent;
}




.search-bar .icon {
	position: absolute;
	right: 12px;  /* Move icon to the right */
	top: 50%;
	transform: translateY(-50%);  /* Align icon vertically center */
	font-size: 18px;  /* Adjust size if needed */
	pointer-events: none;  /* So clicks go through to input */
}

:root {
	--menu-bg-color: rgba(47, 47, 47, 0.8);
	--menu-text-color: #ffffff;
}

[data-theme="light"] {
	--menu-bg-color: #ffffff;
	--menu-text-color: rgba(47, 47, 47, 0.8);
}

.dark-mode-toggle {
	position: fixed;
	top: 20px;
	left: 20px;
	background-color: var(--menu-bg-color);
	color: var(--menu-text-color);
	border: none;
	border-radius: 8px;
	padding: 10px 20px;
	cursor: pointer;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Header Styling */
.conversation-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 15px;
	background-color: rgba(250, 250, 250, 1);
	border-bottom: 1px solid rgba(90, 90, 90, 0.4);
	padding-right: 60px;
}

.conversation-header .title {
	flex-grow: 1;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
}

.conversation-notification {
	position: fixed;
	top: 85px;
	right: -350px;  /* Start off-screen */
	
	color: white;
	padding: 5px 10px;
	border-radius: 8px 0 0 8px;
	box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.3);
	font-size: 14px;
	z-index: 2000;
	opacity: 0;
	transition: right 0.4s ease, opacity 0.4s ease;
}

.conversation-notification.show {
	right: -0px;  /* Slide in to simulate right: -50px */
	opacity: 1;
}

.be-data-apps-list{
	max-height: 350px;
	overflow-y: auto;
}












.prompt-chain .steps-container {
	width: 100%;
	padding: 0px;
}
.prompt-chain .step-item {
	display: flex;
	align-items: flex-start;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	position: relative;
}
.prompt-chain .step-item.show {
	opacity: 1;
	transform: translateY(0);
}
.prompt-chain .bullet-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 10px;
	width: 20px;
	flex-shrink: 0;
	position: relative;
}
.prompt-chain .bullet {
	width: 10px;
	height: 10px;
	background: #555;
	border-radius: 50%;
	position: relative;
	z-index: 2;
}
.prompt-chain .bullet-line {
	position: absolute;
	width: 2px;
	background: #555;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}
.prompt-chain .step-content {
	flex-grow: 1;
}
.prompt-chain .accordion-item {
	background: #fff;
	border: none;
	margin: 0;
	border-radius: 0;
}
.prompt-chain .accordion-button {
	background: #f8f9fa;
	color: #000;
	font-size: 14px;
	padding: 8px;
	border-radius: 0 !important;
}
.prompt-chain .accordion-button:focus {
	box-shadow: none;
}
.prompt-chain .accordion-body {
	font-size: 12px;
	padding: 8px;
	background: #ffffff;
}

.prompt-chain .accordion .card-header button{
	padding: 5px;
	padding-left: 30px;
	padding-right: 10px;
	font-size: 14px;
	text-transform: none !important;
	text-decoration: none;
	color: #666;
}

.prompt-chain .accordion .card .connect-line{
	top: 0px;
	width: 1px;
	bottom: 0px;
	background-color: #666;
	position: absolute;
	left: 15.4px;
}

.prompt-chain .accordion .card:only-child  .connect-line{
	display: none;
}

.prompt-chain .accordion .card:first-child  .connect-line{
	top: 20px;
	width: 1px;
	bottom: 0px;
	background-color: #666;
	position: absolute;
	left: 15.4px;
}




.prompt-chain .accordion .card:last-child .connect-line{
	top: 0px;
	width: 1px;
	bottom: 20px;
	background-color: #666;
	position: absolute;
	left: 15.4px;
	height: 20px;
}

.prompt-chain .accordion .card + .card{
	margin-top: 0px;
}

.prompt-chain .card .collapse{
	padding-left: 20px;
	padding-right: 10px;
}

.prompt-chain .accordion .card-body{
	padding: 10px 10px;
	border-top: 0;
	line-height: 22px;
	border-radius: 0px;
}

.prompt-chain .accordion .collapsing{
	padding-left: 20px;
	padding-right: 10px;
}

.prompt-chain .accordion .card{
	border-radius: 0px;
	background: transparent;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}


/* Default bullet style */
.prompt-chain .accordion .card .bullet {
	position: absolute; top: 15px; height: 8px; width: 8px; background-color: #666; border-radius: 4px; left: 12px;
}

/* Last bullet glowing effect */
.prompt-chain .accordion .card.working:only-child .bullet {
	background: #01a44d; /* Green color */
	box-shadow: 0 0 10px #01a44d;
	animation: glow 1.5s infinite alternate ease-in-out;
}

.prompt-chain .accordion .card.working:last-child .bullet {
	background: #01a44d; /* Green color */
	box-shadow: 0 0 10px #01a44d;
	animation: glow 0.5s infinite alternate ease-in-out;
}

/* Glow animation */
@keyframes glow {
	0% {
		box-shadow: 0 0 2px rgba(1, 97, 46, 1);
		color: rgba(0.2, 123, 58, 1);
	}
	100% {
		box-shadow: 0 0 20px rgba(0, 81, 102, 1);
		color: rgba(2, 147, 185, 1);
	}
}

.system-answer .alert{
	color: #333;
}

.system-answer .thead-dark th{
	background: #f5f5f5 !important;
	color: #222 !important;
}
/* ---------- SHARED STYLES ---------- */
.system-answer table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.system-answer thead th,
.system-answer tbody td {
  padding: 10px 16px;
  text-align: left;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.1) !important;
}

.system-answer thead tr:first-child th:first-child {
  border-top-left-radius: 12px;
}
.system-answer thead tr:first-child th:last-child {
  border-top-right-radius: 12px;
}
.system-answer tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}
.system-answer tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

/* ---------- LIGHT THEME ---------- */
.system-answer table {
  background-color: #ffffff;
  color: #111;
}

.system-answer thead th {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  color: #222;
}

.system-answer tbody td {
  border-bottom: 1px solid #eee;
  color: #333;
}

.system-answer tbody tr:hover {
  background-color: #f9f9f9;
}

.accordion{
	margin-bottom: 10px !important;
}

.prompt-chain[data-promtp-type='assistant']{
	//overflow-x: auto;
}

.prompt-chain .card.bg-dark{
background: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.prompt-chain .card.bg-dark.text-white{
color: #444 !important;
}

.prompt-chain .card.bg-secondary{
	background-color: transparent !important;
	border: 2px solid rgba(0,0,0,0.08);
	border-radius: 10px;
}

.prompt-chain .card .table.table-bordered{
	border: none !important;
}
.prompt-chain .card .table-bordered th, .prompt-chain .card .table-bordered td{
	border-color: 1px solid rgba(0,0,0,0.1) !important;
}



	#input-container .dropdown-menu>.dropdown-item{
	padding: 10px 0px;
	font-size: 14px !important;
	cursor: pointer;
}


/* Add arrow pointing down */
#input-container .dropdown-menu.custom-dropdown-top {
  top: auto !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(calc(-72% - 10px)) translateY(-14px) !important;
 
  position: absolute;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  min-width: 340px;
  z-index: 10;
}

#input-container .dropdown-menu.custom-dropdown-top::after {
  content: "";
  position: absolute;
  top: 99%;
  left: calc(80% + 5px);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-radius: 10px;
  border-top: 10px solid #fff;
  z-index: 10;
}

#input-container .dropdown-menu {
  display: none;
}

#input-container .dropdown.show .dropdown-menu {
  display: block;
}

#input-container .dropdown-item.tools-items{
	border-radius: 10px;
}


#input-container .toolsOptions span{
	margin-left: 0px;
}

#input-container .toolsOptions span.first{
	margin-left: 4px;
}

#input-container .toolsOptions span.unic{
	margin-left: 2px;
	margin-right: 2px;
}

#input-container .toolsOptions span.last{
	margin-right: 4px;
}

#input-container .toolsOptions svg{
	margin-left: 0px;
}

#input-container .toolsOptions svg.first{
	margin-left: 4px;
}

#input-container .toolsOptions svg.last{
	margin-right: 4px;
}

#input-container .toolsOptions i.first{
	margin-left: 4px;
}
#input-container .toolsOptions i.last{
	margin-right: 4px;
}

#input-container .toolsOptions svg:only-child{
	margin-left: 0px;
}



.web-reff{
	padding: 4px 8px;
	
	background-color: rgba(0,0,0,0.04);
	border-radius: 4px;
	display: inline-block;
	vertical-align: middle;
	margin: 2px;
	user-select: none;
	cursor: pointer;
	filter: grayscale(100%);
	width: 24%;
	position: relative;
}

.web-reff:hover{
	padding: 4px 8px;
	position: relative;
	background-color: rgba(0,0,0,0.1);
	border-radius: 4px;
	display: inline-block;
	vertical-align: middle;
	margin: 2px;
	user-select: none;
	cursor: pointer;
	filter: none;
	width: 24%;
	
}

@media (max-width: 768px) {
  .web-reff{
	  width: 100%;
  }
  
  .web-reff:hover{
	  width: 100%;
  }
}



.web-source-container{
border-radius: 6px;
background: rgba(0, 0, 0, 0.03);
padding: 10px 0px;
margin: 10px;
cursor: pointer;
}

.web-source-container:hover{
border-radius: 6px;
background: rgba(0, 0, 0, 0.08);
padding: 10px 0px;
margin: 10px;
}

.web-reff .web-icon, .web-source-container .web-icon{
 width: 16px;
 height: 16px;
 border-radius: 100%;
 display: inline-block;
 background-size: cover;
 background-position: center;
 margin-right: 4px;
 vertical-align: middle;
 font-size: 12px;
 
 
}

.web-reff .web-title{
max-width: 100px;
 height: 15px;
 display: inline-block;
 white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
   text-decoration: none;
   margin-bottom: 3px;
   font-size: 12px;
   margin-right: 10px;
}

.web-source-container .web-title{
	height: 15px;
	 display: inline-block;
	 white-space: nowrap;
	   overflow: hidden;
	   text-overflow: ellipsis;
	   vertical-align: middle;
	   text-decoration: none;
	   margin-bottom: 3px;
	   font-size: 14px;
	   margin-bottom: 10px;
}

.web-reff .web-text{
 max-width: 150px;
 height: 15px;
 display: inline-block;
 white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
   text-decoration: none;
   font-size: 10px;
}

.web-source-container .web-text{
	   text-decoration: none;
	   font-size: 10px;
}

.web-reff .web-more{
	 height: 15px;
	 display: inline-block;
	 white-space: nowrap;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 vertical-align: middle;
	 text-decoration: none;
	 font-size: 12px;
	 font-weight: bold;
}

.web-reff .web-more-text{
	 height: 15px;
	 display: inline-block;
	 white-space: nowrap;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 vertical-align: middle;
	 text-decoration: none;
	 font-size: 12px;
	 margin-left: 15px;
}


.previewPdf{
	display: inline-block;
	position: relative;
	padding: 5px 10px;
	border-radius: 10px;
	background-color: #f3f3f3;
	border: 0px solid #999;
	margin: auto;
	margin-top: 5px; 
	margin-bottom: 8px;
	margin-right: 15px;
	vertical-align: top;
	padding: 5px;
}

.previewContainer{
	text-align: left; width: 100%; white-space: nowrap; vertical-align: top;
}

.previewImage{
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
	background-color: #f3f3f3;
	border: 0px solid #999;
	margin: auto;
	margin-top: 5px; 
	margin-bottom: 8px;
	vertical-align: top;
	margin-right: 15px;
	padding: 5px;
	text-align: left;
}

.previewPdf .file-icon, .previewImage .file-icon{
	color: #333; margin:10px 10px 10px 10px; font-size: 20px; display: none;
}

.previewPdf .file-icon-error, .previewImage .file-icon-error{
	color: #333; margin:10px 10px 10px 10px; font-size: 20px; display: none;
}

.previewPdf .file-name{
	color: #333; font-weight: bold; display: flex;
}

.previewImage .file-name{
	color: #333; font-weight: bold; display: flex;
}


.previewPdf .file-descrip, .previewImage .file-descrip{
	color: #333;
}

.previewPdf .progress-container, .previewImage .progress-container{
	margin:10px 10px 10px 10px !important;
}

.singularai-gpt .filePreviewCont .progress-circle{
	width: 28px !important; height: 28px !important;
}

.previewPdf .clean-error-file, .previewImage .clean-error-file{
	padding: 4px 7px; background-color: #fbcf24; position: absolute; right: -8px; top: -8px; border-radius: 100%; color: rgba(0,0,0,0.8); cursor: pointer; font-size: 10px; display: none;
}

.previewPdf .clean-file, .previewImage .clean-file{
	padding: 4px 7px; background-color: #dc2d43; position: absolute; right: -8px; top: -8px; border-radius: 100%; color: #FFF; cursor: pointer; font-size: 10px; display: none;
}

.previewPdf .spacer, .previewImage .spacer{
	--spacing: 4px;
		--direction: row;
		--align: center;
		display: flex
	;
		justify-content: space-between;
		align-items: var(--align);
		flex-direction: var(--direction);
}

.system-answer pre{
	padding: 5px !important;
}

.system-answer pre code.hljs{
	border-radius: 8px;
	border: 1px solid rgba(50,50,50,0.2);
	padding: 2em;
}



.btn-prompt-example{
	background-color: rgba(248, 248, 248, 1) !important;
	border: 1px dashed rgba(216, 216, 216, 1) !important;
}

.btn-prompt-example:hover{
	background-color: rgba(255, 255, 255, 1) !important;
	border: 1px solid rgba(216,216,216,0.6) !important;
}

.card-model{
	border: 1px solid #ccc;
}

.card-model:hover{
	border: 1px solid #ccc;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}

.card-model.selected{
	border: 1px solid rgba(119, 204, 119, 0.723);
	background-color: rgba(204, 255, 204, 0.544);
}

.card-model.selected:hover{
	border: 1px solid rgba(119, 204, 119, 0.923);
	background-color: rgba(204, 255, 204, 0.744);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}


.model-vision{
	background: #20c0d5; border: 1px solid #20c0d5; color: rgba(0,0,0,0.6);
}

.model-sql{
	background: #e2c943; border: 1px solid #e2c943; color: rgba(0,0,0,0.6);
}

.model-reasoning{
	background: #44e297; border: 1px solid #44e297; color: rgba(0,0,0,0.6);
}
.ai-model-selector .txt {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.data-table{
	overflow: auto;
	padding: 1px;
	width: 100%;
}

.screen-layout{
	overflow: auto;
}

.tab-content{
	margin-bottom: 5px;
}

.longtext{
	max-height: 400px;
	overflow: auto;
}

.sai-llm-system{
  font-family: 'ArpiaFont', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}


.sai-table-responsive{
	width: 100%;
	overflow: auto;
	max-height: 600px;
}


.outline-feedback{
	position: absolute;
	top: -40px;
	width: 100%;
	text-align: center;
	display: none;
}

.outline-feedback .indicator {
  max-width: 350px;
  margin: 5px auto 0 auto; /* add margin between stacked indicators */
  display: inline-block;
  border-radius: 20px;
  background-color: rgba(0,0,0,0.8);
  color: #FFF;
  padding: 4px 15px;
  animation: fadeIn 0.3s ease-in-out;
}

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

.outline-feedback .scrollToAnsware{
	cursor: pointer;
	user-select: none;
}

.jsoneditor.jsoneditor-mode-view{
	color: #222;
}