/*Write your custom css in this file.*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html,
body,
*{
	font-family: "Roboto", serif!important;
}
textarea.form-control{
  height: auto;
}
.sidebar-brand{
	background-color:#fff!important;
}
#contract-preview h2{
	font-size:18px;
	text-transform:uppercase;
	font-weight:bold;
	margin-top:20px;
}
#contract-preview h3{
	font-size:16px;
	text-transform:uppercase;
	font-weight:bold;
	margin-top:15px;
}
#contract-preview > p{
	text-align:justify
}
#contract-preview :is(tr,td){
	border:0;
}
#contract-preview li > em{
		font-size:90%;
	}

#contract-preview table{
		margin-top:20px!important;
	}
.timeline-images .file-mockup{
	height:auto;
}
.timeline-images .file-mockup .mt-12{
	margin-top:0!important;
	  margin-bottom: 30px;
	max-height:100px;
}
#contract-preview .table-responsive :is(ul ~ br, li ~ br){
  display: none;
}

#contract-preview .table-responsive td{
		padding-top:2px!important;
		padding-bottom:2px!important;
	}
	#contract-preview hr{
		border:0;
		height:0;
		page-break-after: always;
	}
.modal-fullscreen{
	width: 80vw;
	margin-left:20vw;
}
.modal-fullscreen .modal-body{
	max-height:calc(100vh - 130px); 
}
.bg-info{
	background-color:#174785!important;
}
.contract-title-section ul.dropdown-menu li:has(a[href*='pdf']){
	display:none
}
input,textarea,[contenteditable="true"],* [contenteditable="true"]{
	cursor: pointer;
}
ul :has(a[href*=diagram]) ~ div table#asset-table td:first-child{
	width:100px;
}

.modal-body{
	max-height:75vh!important;
	overflow-y:auto;
}
.modal-content #client-form div.container-fluid{
display: flex;
  flex-direction: column;
}
.modal-content #client-form div.form-group:has(#vat_number){
	order:-1;
}
.modal-content #client-form div.form-group:has(#type_organization){
	order:-2;
}
.app-modal-content .app-modal-content-area:has(iframe){
  height: 100vh!important;
}
select[multiple="true"]{
	height:auto!important;
	min-height:100px!important;
}
#invoice-list-table td:first-child,
#invoice-list-table td:nth-child(2)
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50px;  
  direction: rtl;
}
#invoice-list-table td:nth-child(2){
  max-width: 120px;  
}
@media print {
	@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
	html,body{
		background-color:#ffffff!important;
		padding:0!important;
		margin:0!important;
		font-family: 'Roboto', sans-serif;
		font-size:12pt;
	}
	.invoice-preview-container{
		border:0!important;
		-webkit-box-shadow:none!important;
		margin-top:0.4cm!important;
		margin-right:0.4cm!important;
		margin-bottom:0.5cm!important;
		margin-left:0.8cm!important;
		padding:0!important;
		font-family: 'Roboto', sans-serif;
	}
	.invoice-preview-container * {
		font-family: 'Roboto', sans-serif;
		font-style: normal;
	}
	.invoice-preview-container > table{
		margin-top:0!important;
	}
	.invoice-preview-container table{
		margin-top:10px!important;
	}
	.invoice-preview-container li > em{
		font-size:85%;
	}
	.invoice-preview-container h2{
		margin-top:20px!important;
		margin-bottom:3px!important;
		text-transform:uppercase!important;
		font-weight:700;
		font-size:18px;
		font-family: 'Roboto', sans-serif;
		font-style: normal;
	}
	.invoice-preview-container h3{
		margin-top:15px!important;
		margin-bottom:2px!important;
		text-transform:uppercase!important;
		font-weight:500;
		font-size:16px;
		font-family: 'Roboto', sans-serif;
		font-style: normal;
	}
	.invoice-preview-container .table-responsive :is(ul ~ br, li ~ br){
	  display: none;
	}

	.invoice-preview-container .table-responsive td{
		padding-top:2px!important;
		padding-bottom:2px!important;
	}
	.invoice-preview-container hr,hr{
		border:0;
		height:0;
		page-break-after: always;
	}
	.invoice-preview-container ul{
		padding:0;
		margin:0;
		margin-bottom:3px!important;
		
	}
	.invoice-preview-container li,
	.invoice-preview-container li *,
	.invoice-preview-container li em
	{
		margin:0!important;
		padding:0!important;
		line-height:1.1!important;
	}
	.invoice-preview-container em{
		font-style:italic!important;
		font-size:90%!important;
	}
	.invoice-preview-container table:not(.table-responsive) *{
		height:auto!important;
		margin:0!important;
		margin-bottom:10px!important;
		padding:0!important;
	}
	.invoice-preview-container table:not(.table-responsive){
		border-collapse: collapse!important;
		border-bottom-width:1px!important;
		border-bottom-color:#cccccc!important;
	}
	.invoice-preview-container table:not(.table-responsive) td *{
		height:auto!important;
		margin:0!important;
		padding:0!important;
	}
	.invoice-preview-container :not(.badge){
		line-height:1!important;
	}
	.invoice-preview-container p:not(em){
		margin:0!important;
		padding:0!important;
		line-height:1.2!important;
		margin-bottom:5px!important;
	}
	.rich-text-container{
		padding:0!important;
		margin:0!important;
	}
	div :is(ul,li){
		padding-top:0!important;
		padding-right:0!important;
		padding-bottom:0!important;
		padding-left:0!important;
		margin-top:0!important;
		margin-right:0!important;
		margin-bottom:0!important;
		margin-left:0!important;
		line-height:1!important;
	}
}
#estimate-item-table .max-height-50{
	overflow:hidden;
	max-height:50px!important;
}
#estimate-item-table .max-height-50:after{
	content:'...';
	display:inline-block;
	width:20px;
}
/* @media (max-width: 990px) {
	.modal-dialog.modal-lg{
		position: absolute;
	  right: 0;
	  top: 0;
	  bottom: 0;
	  padding: 0;
	  margin: 0;
	  min-width:50%;
	}
} 
@media (min-width: 990px) {
	.modal.show:has( .modal-dialog.modal-lg){
		left: 40%;
		-webkit-box-shadow: -2px 0px 15px 0px #6b6969;
		box-shadow: -2px 0px 15px 0px #6b6969;
	}
	.modal.show .modal-dialog.modal-lg{
		padding: 0;
		margin: 0;
		margin-right: 1rem;
		width: 60%;
		--bs-modal-width:60%;
	}

	.modal-dialog.modal-lg .modal-content{
	
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}
}
.modal-dialog.modal-lg > div{
	height: 100vh;
}
.modal-dialog.modal-lg .modal-body{
	height:  calc(100vh - 140px)!important;
	max-height: calc(100vh - 140px)!important;
}
.modal-dialog.modal-lg .modal-footer {
 
  position: absolute;
  width: 100%;
  bottom: 0;
}
*/
@media (min-width: 992px) {
  /* Đặt modal ở bên phải màn hình thay vì ở giữa */
  .modal.modal-lg, 
  .modal .modal-dialog.modal-lg {
    position: fixed;
    right: 0;
    margin: 0;
    height: 100%;
    min-width: 60%;
    max-width: 60%;
    top: 0;
  }

  /* Định dạng lại nội dung modal để phù hợp với chiều cao đầy đủ */
  .modal.modal-lg .modal-content,
  .modal .modal-dialog.modal-lg .modal-content {
    border-radius: 0;
    height: 100%;
    overflow-y: auto;
  }

  /* Loại bỏ lớp overlay để có thể tương tác với nội dung phía dưới */
  .modal-backdrop {
    display: none;
  }

  /* Đảm bảo modal vẫn hiển thị khi không có backdrop */
  .modal.show {
    background-color: transparent;
    pointer-events: none;
  }

  /* Đảm bảo vẫn có thể tương tác với nội dung bên trong modal */
  .modal.show .modal-dialog {
    pointer-events: auto;
  }
  .modal.modal-lg .modal-body, 
  .modal .modal-dialog.modal-lg .modal-body{
	max-height: calc(100vh - 120px) !important;
	height: calc(100vh - 130px) !important;
  }
  .modal.modal-lg .modal-footer{
	padding:10px!important;
	align-self: center !important;
  }
  
}


.sidebar-menu li a{
	padding-right:5px!important;
	padding-left:5px!important;
}
#sidebar-menu li.expand > a:before{
	right:5px;
}
@media (max-width: 832px) {
	.quick-add-button{
		display:block!important
	}
	#page-content{
		padding:0!important;
	}
	#page-content iframe.rounded{
		border-radius:0!important;
	}
}
@media (max-width: 832px) {
	
}

@media (min-width: 744px) and (max-width: 990px) {
	:root{
		--fold7-offset:70px;
	}
	#pre-loader{
		width: calc(100% - var(--fold7-offset));
	}
	.navbar-collapse > ul.navbar-nav{
		max-width:200px;
		padding-left:var(--fold7-offset);
		padding-right:50px;
	}
	.navbar-collapse > ul.navbar-nav li:first-child{
		display:none!important;
	}
	.navbar-nav li:not(:nth-child(2)){
		display:block!important;
	}
	.navbar-collapse > div > .navbar-nav .nav-link{
		padding-left:10px!important;
		padding-right:10px!important;
	}
	.nav-item #user-dropdown span.user-name{
		display:none!important
	}
	.sidebar-brand.brand-logo{
		display:none!important;
	}
	.sidebar-brand.brand-logo-mini{
		display:block!important;
		width:70px!important;
		padding:13px 10px!important;
	}
	.sidebar{
		position: fixed;
		overflow: visible;
		width:70px!important;
	}
	.sidebar .menu-text {
		display:none!important;
	}/* 
	.sidebar .expand.main.open ul{
		position: fixed;
		  top: auto;
		  width: 250px;
		  left: calc(var(--fold7-offset) - 10px);
		  background: indianred;
		  margin-top:-50px;
	} */
	.sidebar-menu > li > ul {
		position: fixed;
		top: auto;
		width: 250px;
		left: calc(var(--fold7-offset) - 5px);
		background: indianred;
		margin-top: -50px;
		display:none;
		/* Hiệu ứng slide + fade */
		transform: translateY(-10px);
		opacity: 0;
		pointer-events: none;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}
	.sidebar-menu > li{
		margin-bottom:1px;
	}
	.sidebar-menu > li:not(.expand) > a{
		text-align:center;
	}
	/* Khi hover hoặc touch */
	.sidebar-menu > li:hover ul,
	.sidebar-menu > li:focus-within ul{
		display:block;
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}
	#sidebar-menu li.expand.open > a:before{
	 right:0.5rem
	}
	.sidebar-scroll:has(.sidebar-menu li > ul:visible) {
		overflow-y: hidden!important;
	}
	.sidebar-scroll:has(.sidebar-menu li > ul[style*="display: block"]) {
		overflow-y: hidden!important;
	}
	.modal.show .modal-dialog{
		margin-left:auto;
		margin-right:0;
	}
	/* .navbar .navbar-nav > li:has(.sidebar-toggle-btn){
		display:block!important;
	}*/
	.dashboards-row .widget-container.col-md-3{
		width: 50%!important;
		max-width: 50%!important;
	} 
	.dashboards-row .widget-container.col-md-4{
		width: 100%!important;
		max-width: 100%!important;
	}
	.sidebar-toggle-btn.hide{
		display:none!important;
	}
	.sidebar-off{
		left:0!important
	}
	.page-container{
		margin-left:var(--fold7-offset)!important;
		padding-right:0;
	}
	
	.expand.main{
		
	}
	.sidebar .sidebar-scroll .sidebar-menu {
		padding-bottom:100px;
	}
	.page-wrapper {
	  padding: 10px 0 10px 10px;
	}
	table.dataTable.nowrap th, table.dataTable.nowrap td{
		white-space: normal!important;
	}
	.filter-section-left,
	.filter-section-right,
	.filter-section-flex-row{
		flex: initial!important;
		width: initial!important;
		display: initial!important;
	}
	#profile-image-section{
		display:flex;
	}
	.cover-widget .box-content:nth-child(1){
		width:40%;
	}
	.cover-widget .box-content:nth-child(2){
		width:60%;
	}
	/**livechat**/
	.livechat-container.show-chat,
	.livechat-conversations-panel{
		margin-left: var(--fold7-offset);
		width: calc(100% - var(--fold7-offset)) !important;
	}
	.livechat-dashboard .livechat-container:not(.show-chat) .livechat-conversations-panel {
		width: 280px !important;
	}
	.livechat-dashboard .livechat-container:not(.show-chat) .livechat-chat-panel{
		display:block!important;
		margin-left: 351px!important;
		width: calc(100% - 351px)!important;
	}
	.livechat-dashboard .livechat-container.show-chat .livechat-chat-panel{
		width:calc(100% - 250px);
	}
	.livechat-dashboard .livechat-container.show-chat .livechat-info-panel:not(.show) {
		display: block !important;
		width: 250px;
		margin-right: 0;
		position: unset;
		margin-left: calc(100% - 250px);
		height: calc(100vh - 60px);
		border-radius:0;
	}
	.livechat-dashboard .livechat-container.show-chat .livechat-info-panel:not(.show) .close-info-panel{
		display:none;
	}
	.livechat-container.show-chat:not(.livechat-conversations-panel:is(:hidden)) .livechat-panel.livechat-info-panel.show{
			display: block !important;
			width: 400px!important;;
			margin-right: 0;
			position: unset;
			margin-left: calc(100% - 400px);
			height: calc(100vh - 60px);
			border-radius:0;
	}
	.livechat-conversations-panel .panel-body .tab-content > div{
		margin-bottom:100px!important;
	}
	.livechat-conversations-panel .panel-footer{
		bottom:40px!important;
	}
	.livechat-conversations-panel .panel-footer a{
		background:#cccccc50!important;
	}
	.message.tracking .message-bubble{
		white-space: normal!important;
	}
	.livechat-dashboard #message-input{
		height: 30px;
	  line-height: 1.2;
	  padding: 5px;
	}
	@media (pointer: coarse) and (hover: none) {
	.livechat-dashboard .nav-tabs {
		white-space: nowrap;
		flex-wrap: nowrap;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scroll-behavior: smooth;
		
		/* Ẩn scrollbar */
		scrollbar-width: none;
		-ms-overflow-style: none;
	  }
	  
	.livechat-dashboard .nav-tabs::-webkit-scrollbar {
		display: none;
	  }
	  
	  /* Đảm bảo các tab items không bị wrap */
	.livechat-dashboard .nav-tabs .nav-item {
		flex: 0 0 auto;
	  }
	  
	  /* Optional: Thêm padding cho mobile */
	.livechat-dashboard .nav-tabs {
		padding: 0 15px;
	  }
	}
	.mobile-bottom-menu{
		display:block!important;
		width:auto!important;
		left:auto!important;
		background: #ff000014 !important;
	}
	.mobile-bottom-menu .quick-add-dropdown,
	.mobile-bottom-menu .mobile-function-button-dropdown{
		left:auto!important;
		width:auto!important;
		max-width:300px!important;
	}
	.mobile-bottom-menu .nav-link.sidebar-toggle-btn{
		display:none!important;
	}
}
.mobile-bottom-menu #js-init-chat-icon,
.mobile-bottom-menu #quick-add-icon,
.mobile-bottom-menu .sidebar-toggle-btn,
.mobile-bottom-menu .todo-btn,
.mobile-bottom-menu .home-btn{
	padding: 15px 20px!important;
}
.mobile-bottom-menu .quick-add-dropdown,
.mobile-bottom-menu .mobile-function-button-dropdown{
	border-radius: 12px;
	margin: 10px 10px 0 10px !important;
	width: calc(100% - 20px) !important;
}
.mobile-bottom-menu #mobile-function-button .dropdown{
	padding:10px!important
}
@media (max-width: 768px) {
	#mobile-bottom-menu,
	.mobile-bottom-menu{
		border-radius: 12px;
		margin: 10px;
	}
}
@media (max-width: 590px) {
  .sidebar .sidebar-scroll {
    height: 100vh !important;
  }
  .sidebar .sidebar-scroll .sidebar-menu {
    padding-bottom:150px;
  }
}
.global-search-modal .modal-content{
	-webkit-border-top-left-radius: 12px!important;
-webkit-border-bottom-left-radius: 12px!important;
-moz-border-radius-topleft: 12px!important;
-moz-border-radius-bottomleft: 12px!important;
border-top-left-radius: 12px!important;
border-bottom-left-radius: 12px!important;
	-webkit-border-top-right-radius: 0!important;
	-webkit-border-bottom-right-radius: 0!important;
	-moz-border-radius-topright: 0!important;
	-moz-border-radius-bottomright: 0!important;
	border-top-right-radius: 0!important;
	border-bottom-right-radius: 0!important;
}
.global-search-modal .search-modal{
	height:100vh!important;
	min-height:100vh!important;
}
.global-search-modal .search-modal .form-group .col-sm-3,
.global-search-modal .search-modal .form-group .col-sm-9
{
	width:100%;
}