/* You can add global styles to this file, and also import other style files */

$gutter: 1rem; //for primeflex grid system
@import '@/assets/layout/layout.scss';
@import '@/assets/layout/theme.scss';

/* PrimeVue */
// @import 'primevue/resources/primevue.min.css'; // version deplicated. You must open the command line if you are using < 3.29.00
@import 'primeflex/primeflex.scss';
@import 'primeicons/primeicons.css';

@import '@/assets/iconfont.css';
@import '@/assets/svg.css';
/* Demos */
.app-top-bar.p-menubar {
	padding:0;
	flex-direction: column;
	position: relative;
	// overflow: hidden;
	background: #1e1e1e;
	color: rgba(255, 255, 255, 0.87);
	border: 0px solid rgba(255, 255, 255, 0.12);
	border-radius: 0px;
}

.app-bottom-bar.p-menubar {
	padding:0;
	position: fixed;
	bottom: 0px;
	z-index: 1;
	left: 0;
	right: 0;
	// overflow: hidden;
	background: var(--p-surface-html);
	color: rgba(255, 255, 255, 0.87);
	border: 0px solid rgba(255, 255, 255, 0.12);
	border-radius: 0px;
	transform: translateY(0);
	will-change: transform;
}
.empty-bottom{
	display: block;
	width: 30rem;
	height: 64px;
}
.app-top-bar.p-menubar .p-menubar-root-list{
	border: none;
	left: -1px;
	right: -1px;
	width: auto;
	flex-direction: column;
	background: #1e1e1e;
}
.app-bottom-bar.p-menubar .p-menubar-root-list{
	display: flex;
	width: 100%;
	border: none;
}
.app-bottom-bar.p-menubar .p-menubar-root-list > .p-menubar-item {
	flex: 1;
}
.app-top-bar .p-menubar-button,.app-bottom-bar .p-menubar-button{
	color: #fff;
}
.app-top-bar.p-menubar .p-menubar-end{
	position: absolute;
	bottom: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
	width: 100%;
	justify-content: center;
	align-items: center;
}
.app-top-bar.p-menubar .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content{
		width: 100%;
		padding: 5px;
    color: rgba(255, 255, 255, 0.87);
    transition: none;
    border-radius: 0px;
}
.app-bottom-bar.p-menubar .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content{
		width: 100%;
		padding: 0px;
    color: rgba(255, 255, 255, 0.87);
    transition: none;
    border-radius: 0px;
}
.app-top-bar.p-menubar .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-item-link,
.app-bottom-bar.p-menubar .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-item-link{
	color: rgba(255, 255, 255, 0.87);
}
.app-top-bar .menu-icon,.app-bottom-bar .menu-icon{
	font-size: 20px;
	margin-bottom: 0px;
}
.app-top-bar.p-menubar .p-menubar-root-list > .p-menubar-item{
	
	width: 100%;
}
.app-top-bar.p-menubar .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-item-link{
	padding: 14px 0px 10px 0px;
	border-radius: 10px;
	width: 70px;
	justify-content: center;
	text-align: center;
}

.app-bottom-bar.p-menubar .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-item-link{
	padding: 12px 5px 8px 5px;
	height: 64px;
	border-radius: 0px;
	justify-content: center;
	text-align: center;
}
.app-top-bar.p-menubar .p-menubar-root-list > .p-menubar-item:not(.p-highlight):not(.p-disabled) > .p-menubar-item-content,
.app-bottom-bar.p-menubar .p-menubar-root-list > .p-menubar-item:not(.p-highlight):not(.p-disabled) > .p-menubar-item-content{
	background: transparent;
}
.app-top-bar.p-menubar>.p-menubar-root-list>.p-menubar-item a{
	outline: none !important;
}
.app-top-bar.p-menubar .p-menubar-root-list > .p-menubar-item:not(.p-highlight):not(.p-disabled) > .p-menubar-item-content:hover {
    color: rgba(255, 255, 255, 0.87);
    background: rgba(255, 255, 255, 0.04);
		
}
.app-top-bar .logo{
	margin-top: 4px;
}
.app-top-bar.p-menubar>.p-menubar-root-list>.p-menubar-item .actived{
	background: var(--p-primary-color) !important;
	color: var(--p-primary-color-text) !important;
	font-weight: bold;
}
.app-top-bar.p-menubar>.p-menubar-root-list>.p-menubar-item svg{
	color: var(--p-primary-color-text) !important;
}

.app-top-bar.p-menubar>.p-menubar-root-list>.p-menubar-item .actived svg{
	animation: linearAnimation 2s linear 1;
}
.app-bottom-bar.p-menubar>.p-menubar-root-list>.p-menubar-item .p-menubar-item-link{
	color: var(--p-text-color) !important;
}
.app-bottom-bar.p-menubar>.p-menubar-root-list>.p-menubar-item .actived{
	color: var(--p-primary-color) !important;
	font-weight: bold;
}

.app-bottom-bar.p-menubar>.p-menubar-root-list>.p-menubar-item .actived svg{
	color: var(--p-primary-color) !important;
	animation: linearAnimation 2s linear 1;
}
.app-top-bar.p-menubar>.p-menubar-root-list>.p-menubar-item .actived{
	box-shadow: 0 0 6px 6px rgba(90,0,150,0.5);
}
.p-menubar .p-menubar-item.p-highlight > .p-menubar-item-content{
	background: var(--p-primary-color) !important;
	color: var(--p-primary-color-text) !important;
}
.p-card {
	background: var(--p-surface-card);
	border: 1px solid var(--p-surface-border);
	box-shadow: var(--p-card-shadow);
	border-radius: 12px !important;
}
.nopd.p-card .p-card-body,.nopd.p-card .p-card-content{
	padding: 0;
}
.nopd .p-datatable .p-datatable-header{
	border: none;
	border-radius: 0;
}

.app-top-bar .p-menubar-root-list{
	background: #1e1e1e;
}
.app-top-bar .p-avatar-icon{
	color: #4b5563;
}

.app-top-bar .p-avatar-icon.pi-user{
	color: #fff !important;
}
.app-top-bar .right-icon{
	height: 50px !important;
	line-height: 50px !important;
	border-radius: 0;
	width: 50px;
	text-align: center;
	position: relative;
	right: -1px;
}
.app-top-bar .right-icon .p-avatar-icon{
	color: var(--p-primary-color-text);
}
.card, .p-card, .shadow, .block-section{
	box-shadow: var(--p-card-shadow);
}
.block-section{
	border-radius: 8px;
}
.surface-ground+.layout-config-button{
	display: none !important;
}
.p-card.nopd{
	border-radius: 0;
	border: none;
}
.p-card.nopd .p-datatable-header{
	padding: 0;
}
.bg-primary-sec{
	background-color: var(--p-primary-100);
	color: var(--p-primary-color);
}
.bg-green-sec{
	background-color: var(--p-green-100);
	color: var(--p-green-500);
}
.p-card.nopd .p-datatable-header input.p-inputtext,
.p-card.nopd .p-datatable-header .p-button{
	border-radius: 0;
	border-width: 0;
	font-weight: bold;
}

.p-card.nopd .calendar-bar,
.p-card.nopd .p-datatable-header .p-inputtext,
.p-card.nopd .calendar-bar,
.p-card.nopd .p-datatable-header .p-select-trigger,
.p-button-primary.calendar-icon{
	background: rgba(129, 102, 241, 0.06) !important;
	color: var(--p-primary-color);
}
.p-button-primary.calendar-icon{
	padding-right: 0;
}
.p-card.nopd .p-datatable-header .p-select{
	border: none;
}
.p-card.nopd .p-datatable-header .p-select .p-inputtext{
	border-radius: 6px 0 0 6px;
}
.p-card.nopd .calendar-bar i{
	position: relative;
	top: 1px;
}
.p-card.nopd .p-paginator{
	background: transparent;
}
.p-card.nopd .p-datatable-header .p-inputtext:focus,
.p-card.nopd .p-datatable-header .p-button:focus,
.p-card.nopd .p-datatable-header .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext{
	box-shadow:none;
}
.p-card.nopd .p-paginator{
	padding: 0;
}
.border-block,.border-block .p-card-body,.border-block .block-header,.border-block .block-content{
	border-radius: 0 !important;
}
.p-dataview-emptymessage{
	padding:2rem;
}
.noheader .p-sidebar-header{
	display: none;
}
.nocontentpd .p-card-content{
	padding: 0;
}
pre.app-code code{
	white-space: break-spaces;
	word-break: break-all;
	padding-right: 30px;
}
.nopd.p-tabview .p-tabview-panels{
	padding: 0;
}
.p-accordion .p-accordion-tab:last-child{
	margin-bottom: 0;
}
.p-splitter{
	border: none;
}
.p-tabview .p-tabview-panels{
	position: relative;
}
.p-metergroup-meter-container{
	height: 10px;
}
.p-metergroup-meter{
	
	border-radius: 5px;
}
.add-tag-input{
	display: inline-block;
}
.add-tag-input, .add-tag-input input{
	border:none;
	background: transparent;
	outline: none;
	width:60px;
	transition: width .3s;
}
.add-tag-input input{
	width: 100%;
}
.add-tag-input:focus, .add-tag-input:hover{
	width:120px;
}
.add-tag-input.xxl{
	width:140px;
}
.add-tag-input.xxl:focus,.add-tag-input.xxl:hover{
	width:200px;
}
.add-tag-input.max{
	max-width:400px;
	width: 100%;
}
.add-tag-input.max:focus,.add-tag-input.max:hover{
	max-width:400px;
	width: 100%;
}
.teatarea-panel{
	width: 100%;
	max-width:400px;
}
.teatarea-panel>span,.teatarea-panel textarea{
	width: 100%;
}
.add-tag-input.xl{
	width:100px;
}
.add-tag-input.xl:focus, .add-tag-input.xl:hover{
	width:160px;
}
.p-chip textarea{
	background-color: transparent;
	border: none;
	box-shadow:none;
}
.p-chip .add-tag-input{
	min-height: 2rem;
}
.p-inputgroup{
	border-collapse: collapse;
}
.p-inputgroup>input{
	border-width: 1px;
	border-color: var(--p-inputgroup-addon-border-color);
	border-style: solid solid solid none;
	border-collapse: collapse;
}
.fr{
	float: right;
}
.min-btn{
	width: 2rem;
	height: 2rem;
	padding: 0;
}
.p-radiobutton .p-radiobutton-box{
	z-index: 0;
}
.p-radiobutton .p-radiobutton-input{
	appearance: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	opacity: 0;
	z-index: 1;
	outline: 0 none;
	border: 1px solid #cbd5e1;
	border-radius: 50%;
}
.p-radiobutton.p-highlight .p-radiobutton-box {
    border-color: var(--p-primary-color);
    background: #ffffff;
}
.p-radiobutton .p-radiobutton-box .p-radiobutton-icon{
	width: 0.75rem;
	height: 0.75rem;
	transition-duration: 0.2s;
	background-color: var(--p-primary-color);
}
.p-inputswitch.p-highlight .p-inputswitch-slider{
	background-color: var(--p-primary-color);
}
.p-inputswitch.p-highlight .p-inputswitch-slider:before{
	transform: translateX(1rem);
}
.p-checkbox .p-checkbox-input {
	appearance: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	opacity: 0;
	z-index: 1;
	outline: 0 none;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
}
.p-checkbox.p-highlight .p-checkbox-box {
    border-color: var(--p-primary-color);
    background: var(--p-primary-color);
}
.tabview-vertical{
	display: flex;
	flex-direction: row;
}
.tabview-vertical .p-tabview-tablist-container{
}
.tabview-vertical .p-tabview-tablist {
	background-color: transparent;
	display: block;
}
.tabview-vertical .p-tabview-tablist li{
	display: block;
	position: relative;
	left: 3px;
}
.tabview-vertical .p-tabview-panels{
	flex: 1;
}
.p-tabview-tab-header{
	min-height: 50px;
}
.tabview-vertical .p-tabview-tablist li .p-tabview-tab-header{
	background: transparent;
	border-width: 0;
	border-color: transparent;
	border-radius: 0;
}
.tabview-vertical .p-tabview-tablist-scroll-container{
	
	height: 100%;
}
.tabview-vertical .p-tabview-tablist{
	height: 100%;
	border-width: 0 3px 0 0;
	border-color: transparent var(--p-surface-border) transparent transparent;
	border-radius: 0;
}
.tabview-vertical .p-tabview-tablist .p-tabview-tablist-item-active .p-tabview-tab-header{
	border-width: 0 3px 0 0 !important;
	border-color: var(--p-primary-color) !important;
	border-style: solid !important;
}
.tabview-vertical .p-tabview-tablist .p-tabview-tablist-item-active .p-tabview-tab-header:hover{
	
	border-color: var(--p-primary-color) !important;
}
.search-bar .p-select,.search-bar .p-multiselect{
	background-color: var(--p-primary-color) !important;
	
	border: none;
}
.search-bar .p-button{
	min-height: 36px;
	max-height: 36px !important;
	border-radius: 0 !important;
}
.search-bar .p-button .p-button-label{
	font-weight: bold;
}
.search-bar .p-select .p-select-label,.search-bar .p-multiselect .p-multiselect-label{
	color:rgba(255,255,255,0.8);
	font-weight: bold;
}
.search-bar .p-disabled .p-select-label,.search-bar .p-disabled .p-multiselect-label{
	color:rgba(255,255,255,0.7) !important;
}
.search-bar .p-inputtextarea{
	min-height: 36px !important;
	line-height: 22px;
	border: none;
}
.search-bar .p-inputtext{
	border: none;
}
.p-chip .p-select-label,.p-chip .p-multiselect-label{
	padding-bottom: 0;
	padding-top: 0;
}
.search-bar .p-select .p-select-trigger,.search-bar .p-multiselect-dropdown{
	color:#fff;
}
.disabled{
	opacity: 0.5;
}
.p-chip.align-items-top{
	align-items: flex-start !important;
}
.vertical-organization>.p-organizationchart-table{
	position: relative;
	transform: rotate(-90deg);
}
.vertical-organization .p-organizationchart-node-content .vertical-node{
	position: relative;
	transform: rotate(90deg);
}
.vertical-organization .p-organizationchart-node-content{
	width: 80px;
	height: 300px;
	padding: 0px;
}
.vertical-organization{
	padding-top: 0px;
	height: auto;
}
.vertical-organization .mini-btn{
	width: 20px;
	height: 20px;
	line-height: 20px;
	padding: 0;
	margin: 0;
	text-align: center;
	display: block;
}
.vertical-organization .pi:before{
	position: relative;
	left: 1px;
}
.vertical-organization .p-organizationchart-node-content{
	position: relative;
}
.vertical-organization .close{
	position: absolute;
	left: auto;
	right: 29px;
	bottom: -10px;
}
.vertical-organization .actions{
	position: absolute;
	left: auto;
	right: 29px;
	bottom: 16px;
}
.vertical-organization .actions .p-button{
	position: relative;
	transform: rotate(90deg);
}
.vertical-organization .p-inputgroup-addon{
	min-width: 80px;
	width: 80px;
	border: none;
	border-radius: 0;
}
.vertical-organization .vertical-node .p-inputtext{
	width: auto;
	border-style: none none solid none;
	outline: none;
	border-radius: 0;
	
}
iframe{
	z-index: 2;
}
.p-inputgroup>.p-component{
	border-radius:0px !important;
}
.p-inputgroup .p-selectbutton .p-togglebutton-content{
	line-height: 20px;
	display: block;
}
.vertical-organization .vertical-node .item:last-child .p-inputtext{
	border-style: none;
}
.bg-gray-900 .p-inputnumber-input{
	background-color: var(--p-gray-900) !important;
	border: none;
}
.text-white .p-inputnumber-input{
	color: #fff;
}
.tabview-vertical .p-tabview-ink-bar{
	display: none !important;
}
.pointer{
	cursor: pointer;
}
.flex{
	display: flex;
}
.flex-item{
	flex: 1;
	justify-self: center;
}
.refresh-icon{
	position: relative;
	top: 1px;
	opacity: 0.7;
}
.refresh-icon:hover{
	opacity: 1;
}
.spiner{
	position: relative;
	-webkit-animation: fa-spin 2s infinite linear;
	animation: fa-spin 2s infinite linear
}
.transparent-form .p-select{
	border-width: 4px;
	background-color: rgba(255, 255, 255, 0.2);
	color: #fff;
	border-color:rgba(255,255,255,0.5);
}
.transparent-form .p-select-label{
	color: rgba(255,255,255,0.9);
	font-weight: bold;
}
.transparent-form .p-select-label.p-placeholder{
	color: rgba(255,255,255,0.5) !important;
	font-weight: bold;
}
.transparent-form .p-select-trigger-icon{
	color: rgba(255,255,255,0.5);
}
.transparent-form .p-button{
	color: rgba(255,255,255,0.7);
	font-weight: bold;
	text-align: center;
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.2);
	border-width: 0px;
	min-height: 34px;
}
.transparent-form input.p-inputtext{
	width: 100%;
	font-weight: bold;
	text-align: center;
	border-width: 4px;
	border-color:rgba(255,255,255,0.5);
	color: rgba(255,255,255,0.7);
	background-color: rgba(255, 255, 255, 0.2);
}
.transparent-form .p-button:hover{
	
	background-color: rgba(255, 255, 255, 0.5);
	border-color:rgba(255,255,255,0);
	color: rgba(255,255,255,1);
}

.status-point{
	opacity: 0.8;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #EA4739;
	box-shadow: 0 0 2px 2px #EA4739;
}
.status-point.run{
	opacity: 0.8;
	background-color: #00AB5B;
	-webkit-animation: bling 2s infinite linear;
	animation: bling 2s infinite linear
}
@keyframes bling{
	0% {
		box-shadow: 0 0 2px 2px #00AB5B;
	}
	100% {
		box-shadow: 0 0 4px 4px #00AB5B;
	}
}
@keyframes bling2 {
	0% {
			opacity: 0.8;
	}
	50% {
			opacity: 0.5;
	}
	100% {
			opacity: 0.8;
	}
}
.p-tabview-tablist-link{
	outline: none !important;
}
.p-tabview .p-tabview-panels{
	padding-left: 0;
	padding-right: 0;
}
.empty-btn{
	// position: absolute !important;
	// opacity: 0.8;
	// top: 41%;left: 50%;
	// width: 160px; margin-left: -80px;
	font-size: 20px;
}


.mobile-show{
	display: none !important;
}
.layout-main-container{
	transition: transform 0.5s ease;
}
.layout-wrapper{
	z-index: 2;
	overflow-x: hidden;
	transition: transform 0.5s ease;
}
.layout-main{
	background-color: var(--p-surface-ground);
}
.layout-main-container{
	z-index: 2;
}
.surface-html{
	background-color: var(--p-surface-html);
}
.surface-ground{
	background-color: var(--p-surface-ground);
}
.embed-root{
	width: 80%;
	overflow: hidden;
	position: relative;
	opacity: 0;
	transition: .3s opacity;
	z-index: 0;
	.e-card{
		padding-top: env(safe-area-inset-top, 0);
	}
	.e-card,.infotop,.config-pannel,.container{
		right: 20% !important;
	}
	.actions{
		right: 21% !important;
	}
	.transparent.p-select{
		width: 18rem;
	}
}
.embed-root.show{
	opacity: 1;
}
.p-button:not(.p-button-icon-only){
	min-width: 3.5rem;
}
.small-icon.p-fileupload-choose-button{
	min-width: 0 !important;
	font-size: 0.875rem;
	width: 2.2rem;
	height: 2.2rem;
}

.transform-layout.layout-wrapper {
	transform: translateX(80%);
	// margin-left: 50px;
	box-shadow: var(--p-card-shadow);
} 
.absolute-scroll-panel{
	width: 100%;
	position: absolute;
	top:35px;bottom: 0;
}

.ios{
	.p-scrollpanel-content{
		height: calc(100% + calc(2* var(--p-scrollpanel-bar-size)) - env(safe-area-inset-bottom, 0) - env(safe-area-inset-top, 0));
	}
	.layout-main-container,.min-h-screen{
		min-height: calc(100vh - env(safe-area-inset-bottom, 0) - env(safe-area-inset-top, 0)) !important;
	}
	.empty-bottom{
		height: calc(65px + env(safe-area-inset-bottom, 0));
	}
	.app-bottom-bar.p-menubar{
		bottom: unset;
		top:calc(100vh - 65px - env(safe-area-inset-bottom, 0));
		// background: #1e1e1e;
		height: calc(65px + env(safe-area-inset-bottom, 0));
	}
	
	.empty-header{
		height: calc(50px + env(safe-area-inset-top, 0)) !important;
	}
}

@media screen and (min-width: 768px){
	.p-tabview .p-tabview-panels{
		padding: 0.875rem 1.125rem 1.125rem 1.125rem;
	}
		
	.ios{
		.p-scrollpanel-content{
			height: calc(100% + calc(2* var(--p-scrollpanel-bar-size)) - env(safe-area-inset-bottom, 0) - env(safe-area-inset-top, 0));
		}
		.layout-main-container,.min-h-screen{
			 min-height: calc(100vh - env(safe-area-inset-bottom, 0) - env(safe-area-inset-top, 0)) !important;
		}
	}
}
// .surface-border.flex-wrap>div{
// 	line-height: 24px;
// }
.p-chip .p-select,.p-chip .p-multiselect{
	background-color: transparent;
	border: none;
	box-shadow: none;
	line-height: 20px;
}
.p-chip .p-select.p-disabled,.p-chip .p-multiselect.p-disabled{
	background-color: transparent;
}
.p-chip .p-select-label.p-inputtext,.p-chip .p-multiselect-label.p-inputtext{
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.p-chip .add-tag-input,.p-chip .add-tag-input>input{
	font-size: 1rem;
}
.vm{
	vertical-align: middle;
}
.nopd>.p-dialog-content{
	background-color: transparent;
	padding: 0;
}
.transparent{
	background-color: transparent !important;
}
.transparent.p-togglebutton .p-togglebutton-content{
	// background-color: transparent;
}
.transparent.p-select .p-select-label.p-placeholder{
	padding-right: 0 !important;
}
.transparent>.p-dialog-content{
	background-color: transparent;
	
}
.transparent>.p-dataview-content{
	background-color: transparent;
}
.nowrap{
	white-space: nowrap;
}
.text-ellipsis{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
}
.multiline-ellipsis {
	word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; 
  line-clamp: 3; 
  overflow: hidden;
  text-overflow: ellipsis;
}
.multiline-ellipsis-2 {
	word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  line-clamp: 2; 
  overflow: hidden;
  text-overflow: ellipsis;
}
fieldset{
	min-inline-size:auto;
}

.p-button.p-button-icon-only{
	height: 2.5rem;
}
.noheader.p-dialog{
	border: none;
}
.noheader.p-dialog .p-dialog-header{
	display: none;
	
}
.noheader.p-dialog .p-dialog-content{
	background-color: transparent;
	padding: 0;
}

.small.p-button.p-button-icon-only,.p-button-sm.p-button.p-button-icon-only{
	font-size: 0.875rem;
	width: 2.2rem;
	height: 2.2rem !important;
}
.p-selectbutton .p-togglebutton{
	width: 100%;
	line-height: 36px;
	height: 36px;
}
.small .p-togglebutton{
	font-size: 0.9rem;
	padding: 0 0.875rem;
	line-height: 36px;
	height: 36px;
}
.noheader-upload .p-fileupload-content{
	border: none;
	padding: 0;
}
.noheader-upload .p-fileupload-header{
	display: none;
}
.noheader-upload .p-fileupload{
	background-color: transparent !important;
	border: none;
}
.layout-main .p-tabview-tablist{
	background-color: transparent;
}
.p-fileupload-content{
	border: none !important;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a{
	padding-top: 0;
	padding-bottom: 0;
}
.search-bar{
	overflow: hidden;
	border-radius: 0px;
	width: auto !important;
}
.embed-ep-header{
	min-height: calc(100vh - 100px) !important;
	height: calc(100vh - 100px) !important;
}
.p-inputgroup.search-bar .p-select-dropdown{
	color: #fff;
	border-radius: 0px;
}
.p-datatable-paginator-bottom .p-paginator{
	background-color: transparent;
}
.p-inputgroup.search-bar .p-inputtextarea::placeholder{
	color: #d1d1d1;
}
.p-inputgroup.search-bar .p-multiselect-label{
	height: 100%;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 36px;
}
.app-top-bar .p-menubar-end .p-select{
	
	width: 100%;
	background-color: var(--p-primary-color) !important;
	border-radius: 0;
	border: none;
}
.app-top-bar .p-menubar-end .p-select-dropdown{
	color: #fff;
}
.app-top-bar .p-menubar-end .p-select-label{
	border-radius: 0px;
	text-align: center;
	width: 100%;
	display: block;
	flex: 1;
	color: #fff;
}

.p-tabview-tablist-link,.p-datatable-column-filter-button{
	outline: none !important;
}
.p-tabview-tablist-item,.p-tabview-tablist-item>a,.p-row-even,.p-row-odd{
	outline: none !important;
}
.p-togglebutton-checked .pi{
	z-index: 3;
	color: #fff;
}
.p-togglebutton.p-togglebutton-checked{
	z-index: 3;
	color: #fff !important;;
}
.p-togglebutton-checked::before{
	background-color: var(--p-primary-color) !important;
}
.p-tabview-tablist-item-active .p-tabview-tab-header{
	color: var(--p-primary-color) !important;
}
.p-radiobutton.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon{
	background-color: var(--p-primary-color) !important;
}
.p-radiobutton.p-radiobutton-checked .p-radiobutton-box{
	background-color: transparent !important;
}
.p-datatable .p-datatable-thead > tr > th{
	background-color: transparent;
}
.text-tip{
	color: var(--p-surface-tip);
}
.link{
	color: var(--p-primary-color)
}
.footer .p-button-text.p-button-help:not(:disabled):hover{
	background-color: var(--p-primary-300);
}
.p-paginator-rpp-dropdown{
	border: none !important;
	box-shadow: none !important;
}

.nopd-header {
	
	.p-datepicker{
		padding: 0 !important;
		border: none;
		border-radius: 0;
		box-shadow: none;
		height: 100%;
	}
	
	.p-breadcrumb{
		padding: 0 !important;
		border: none;
		border-radius: 0;
		box-shadow: none;
		height: 100%;
		.p-breadcrumb-list{
			height: 100%;
		}
		.p-select{
			background-color: transparent;
			border-width: 0 !important;
		}
	}
	.p-breadcrumb,.p-dataview-content{
		// background-color: var(--p-gray-50) !important;
	}
	.surface-card,.list{
		background-color: #fff !important;
	}
	.p-dataview-footer{
		// background-color: var(--p-gray-50);
	}
	.p-paginator{
		background-color: transparent;
	}
		
	.p-dataview-header{
		padding: 0;
		border:none !important;
		.p-inputtext{
		}
		.p-button,.p-togglebutton{
			margin: 0 !important;
		}
	}
	.p-datatable-header{
		border-top-right-radius: 6px !important;
		overflow: hidden;
		padding: 0;
		background-color: var(--p-gray-50);
		border:none !important;
		.p-button,.p-togglebutton{
			margin: 0 !important;
		}
	}
	.p-datatable-footer{
		border-radius: 0 0 6px 6px;
	}
}
.nopd-header.p-toolbar{
	overflow: hidden;
	padding: env(safe-area-inset-top, 0) 0 0 0;
	box-shadow: none;
	border-radius: 0;
	// background-color: var(--p-surface-bg);
	border:none !important;
	.p-button,.p-togglebutton{
		margin: 0 !important;
	}
	.p-button{
		min-height: 36px;
	}
	.p-toolbar-end,.p-button,.p-toolbar-start{
		height: 100%;
	}
}

.p-chip{
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}
.nopd-header .p-dataview-header,.nopd-header .p-datatable-header,.nopd-header.p-toolbar{
	.p-button,.p-selectbutton,.p-togglebutton{
		border:none !important;
		border-radius: 0 !important;
		box-shadow: none;
	}
	.p-inputtext{
		border-top:none;
		border-left:none;
		border-right:none;
		border-bottom:none;
		box-shadow: none;
		border-radius: 0 !important;
		background-color: var(--p-gray-50);
	}
	.p-select{
		// background-color: var(--p-gray-50);
		margin-right: 1px;
		border-top:none;
		border-left:none;
		border-right-style:dashed;
		border-bottom:none;
		box-shadow: none;
		border-radius: 0 !important;
	}
}

.message-list .message-item{
	transition: .3s all;
	background-color: var(--p-overlay-modal-background);
	color: var(--p-text-color);
}
.message-list .message-item:not(:last-child){
	border-bottom: 1px solid var(--p-surface-border);
}
.message-list .message-item:hover{
	background-color: var(--p-primary-100);
}
.surface-card-selected{
	background-color: var(--p-primary-200) !important;
}
.surface-card-hover{
	cursor: pointer;
	transition: .3s all;
}
.surface-card-hover:hover{
	
	background-color: var(--p-primary-100) !important;
}
@media (prefers-color-scheme: dark){
		
	.message-list .message-item:hover{
		background-color: var(--p-primary-900);
	}
	:root {
		--button-primary-color: #fff !important;
		--button-primary-hover-color: #fff !important;
	}
	.bg-primary-sec{
		background-color: var(--p-primary-700);
		color: var(--p-primary-300) !important;
	}
	.bg-green-sec{
		background-color: var(--p-green-700);
		color: var(--p-green-300) !important;
	}
	.bg-primary{
		background-color: var(--p-primary-700) !important;
		color: var(--p-primary-300) !important;
	}
	.layout-main .p-tabview-tablist-item-active .p-tabview-tab-header{
		color: var(--p-primary-300) !important;
	}
	.p-datatable .p-datatable-thead > tr > th{
		color:var(--p-gray-300);
	}
	.empty-result {
		margin-top: 30px;
	}
	.empty-result img{
			opacity: 0.5;
	}
	.link{
		color: var(--p-primary-300) !important;
	}
	.surface-card-selected{
		background-color: var(--p-primary-800) !important;
	}
	.surface-card-hover:hover{
		
		background-color: var(--p-primary-900) !important;
	}
}
.nav-ul{
	background-color: var(--p-surface-subground) !important;
	margin:0;
	list-style: none;
	padding: 0;
}
.nav-li{
	background-color: var(--p-surface-ground) !important;
	transition: .3s all;
	line-height: 46px;
	position: relative;
	padding-left: 1rem;
	cursor: pointer;
}
.nav-li input[type=text]{
	background-color: transparent !important;
	border: none;
	line-height: 46px;
	text-align: right;
	padding: 0 15px;
	outline: none !important;
	font-size: 12px;
}
.nav-li>.p-button{
	line-height: 46px;
	min-width: 46px;
	height: 48px;
	border-radius: 0;
}
.nav-li:hover{
	background-color: var(--p-surface-hoverground) !important;
}
.nav-ul .nav-li:not(:first-child):after{
	content: '';
	position: absolute;
	background-color: var(--p-surface-border) !important;
	left: 0px;
	right: 0px;
	height: 1px;
}
.nav-li> i.pi{
	opacity: 0.8;
	position: relative;
	padding-right: 15px;
	top: 16px;
}
.nav-li{
	.p-datepicker,.p-datepicker-panel,.p-datepicker-header,.p-datepicker .p-button{
		padding: 0;
		border: none;
		border-radius: 0;
	}
}
.p-terminal-prompt-label{
	
	color: #7eda28;
}
.p-terminal{
	border: none !important;
	border-radius: 0 !important;
	background: rgba(50, 4, 40, 1) !important;
}
.p-terminal-welcome-message{
	color: var(--p-primary-color);
}
.p-terminal-command-response{
	color: #d5d0ce;
}
.p-terminal-prompt-value,.p-terminal-command-value{
	color: #f5f5f5 !important;
}
.p-terminal-command-response{
	white-space: pre;
}
.p-menu-item-content .p-fileupload-basic{
	// align-items: left !important;
	justify-content:left;
}
.p-menu-item-content .p-fileupload-choose-button{
	background-color: transparent;
	text-align: left;
	width: 100%;
	justify-content:left;
	border: none;
	color: var(--p-text-color);
}
.footer .p-fileupload-choose-button{
	background-color: transparent;
	border-radius: 50%;
}
.p-toast-close-button{
	border-width: 0 !important;
	outline: 0 !important;
}
.none{
	display: none;
}

.fixed_container {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.absolute_container {
	position: absolute;
	top: 0px;
	bottom: 0;
	left: 0;
	right: 0;
}
.container_pannel{
	.p-chip{
		background-color: var(--p-gray-900) !important;
		color: #ffffff !important;
		border-radius: 8px;
	}
	.border-circle{
		border-radius: 8px !important;
	}
	.input_pannel{
		border-radius: 4px;
		background-color: rgba(76, 40, 60, 1);
		padding: 1rem;
	}
	.add-tag-input{
		color: #fff;
	}
}
.green.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider{
	background-color: var(--p-green-600) !important;
	width: 35px;
}
.transparent.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon{
	color: #fff !important;
}


.p-datatable-frozen-column{
	background-color: var(--p-surface-ground) !important;
	z-index: 1;
}
.file-block .selector.active{
	background-color: rgba(0, 0, 255, 0.2);
	border:1px solid var(--p-blue-500);
	border-radius: 10px;
}
.p-tree{
	background-color: transparent !important;
}

.p-treetable .p-treetable-thead > tr > th,.p-treetable .p-treetable-tbody > tr{
	background-color: transparent !important;
}
.noEvent{
	pointer-events: none;
}
.noSelect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.error .p-progressbar-value{
	background-color: var(--p-red-500);
}
.noborder{
	border: none !important;
}
.noshadow{
	box-shadow: none !important;
}
.noclose .p-dialog-header-actions{
	width: 30px;
}
.noclose .p-dialog-close-button{
	display: none;
}
.smheader .p-dialog-header{
	padding: 1rem;
}
.noborder{
	.p-listbox-option,.p-listbox-list{
		padding: 0 !important;
	}
} 
.p-inputgroup textarea{
	min-height: 36px;
	border:none !important;
}
.p-button:focus-visible{
	outline: none !important;
}
.p-drawer{
	border: none !important;
	.p-drawer-content{
		padding: 0;
	}
	.p-drawer-header{
		padding: 5px 5px 5px 15px;
	}
}
@media screen and (max-width: 768px){
		
	.block-content,.p-tabview .p-tabview-panels,.block-section{
		border-radius: 0;
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}
	.mobile-show{
		display: block !important;
	}
	.mobile-hidden{
		display: none !important;
	}
	.empty-result img{
		width: 100% !important;
	}
	.mobile-fixed{
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}
	.layout-wrapper,.layout-main-container,.layout-main{
		// min-height: 300px;
	}
	.nopd-header{
		height: calc(3.5rem + env(safe-area-inset-top, 0));
		z-index: 2;
		position: fixed;
		top: 0;
		padding-top: env(safe-area-inset-top, 0);
		width: 100%;
		.p-button.p-button-icon-only{
			width: 3.5rem;
		}
	}
		
	.absolute-scroll-panel{
		top: calc(3.5rem) !important;
	}
	.main-wrapper .absolute-scroll-panel{
		bottom: 60px;
	}
	.empty-header{
		width: 100%;
		display: block;
		height: 50px;
		background: var(--p-toolbar-background);
	}
}

.transparent-header{
	background-color: transparent !important;
	color: #fff !important;
	.p-togglebutton{
		border: none;
		color: transparent;
	}
	.p-togglebutton .pi{
		color: #fff !important;
	}
}
@media screen and (min-width: 768px) and (max-width: 1024px){
	.empty-btn{
		// top: 39%;
		// left: 50%;
		// width: 120px; 
		// margin-left: -60px;
		font-size: 14px !important;
	}
}

.grid-menu{
	background-color: var(--p-surface-ground);
	transition: .3s all;
	cursor: pointer;
	border-radius: 10px;
	width: 80px;
	height: 80px;
	opacity: 1;
	margin: 15px auto;
}
.grid-menu:hover{
	background: var(--p-primary-color) !important;
	color: var(--p-primary-color-text) !important;
}
.ztm-browser-bar{
	display: none !important;
}
.grayfilter{
	filter: grayscale(100%);
}
.p-scrollpanel-bar-x{
	opacity: 0 !important;
}
.p-toast-message{
	border-width:0 !important;
	box-shadow: 0 0 6px 6px rgba(0,0,0,0.05) !important;
}
.text-uppercase{
	text-transform: uppercase;
}
.p-toolbar-center{
	overflow: hidden;
	white-space: break-spaces;
	word-break: break-all;
	justify-content: center;
	flex: 1;
}
.p-toolbar-center b{
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	max-width: 50%;
	text-overflow: ellipsis;
}