.table>:not(caption)>*>* { color: #374151;}
table.dataTable th { font-weight: 500;}
.dataTable a { color: #374151; }

.task .actions {display: flex; flex-direction: column;}
.task .actions .row_option{display: none; font-size: 12px;}
.task .actions .row_option a{color: #6b7280;}
.task .table-responsive tbody tr:hover .actions .row_option{display: block;}
.task .table-responsive tbody tr {height: 79px;}
.task .actions .row_option a.disable{opacity: 0.6; cursor: not-allowed;}
.task .actions .row_option .start:hover {color: rgb(21 128 61);}
.task .actions .row_option .delete:hover {color: rgb(223 38 38);}
.task .actions .row_option a.disable:hover{opacity: 0.6; cursor: not-allowed; color: #000;}
.task .actions a { color:#374151;}
.task .assigned{display: flex; align-items: center; flex-wrap: wrap;}
.task .assigned img{width: 28px; height: 28px; box-shadow: none !important;}
.tags-labels {align-items: center; display: inline-flex; flex-wrap: wrap; gap: .25rem; max-width: 180px; min-width: 100%; color: #000;}
.label-tag { background-color: rgba(209, 213, 219, .3); border-radius: .25rem; color: rgb(31 41 55 / var(--tw-text-opacity)); font-size: .8rem; font-weight: 500; padding: .25rem .5rem;}
.task_popup .modal-dialog {width: 900px;}
.task_popup .modal-dialog .label{align-items: center; border-radius: .375rem; display: inline-flex; font-size: .75rem; font-weight: 500; line-height: 1rem; padding: .25rem .5rem;}
.task_popup .modal-dialog .modal-title {display: flex; align-items: center;}
.task_popup .modal-dialog .modal-header {position: relative; display: block;}
.task_popup .modal-dialog .modal-header .btn-close{position: absolute; right: 19px; top: 21px; font-size: 13px;}
.task_popup .modal-dialog .modal-header p{margin-bottom: 0; font-size: 13px; margin-top: 2px;}
.task_popup .task-single-col-left { padding: 25px; background: #fff; min-height: 600px; border-bottom-left-radius: 6px;}
.tw-mb-4 { margin-bottom: 1rem;}
.tw-font-medium { font-weight: 500;}
.tw-mb-0 { margin-bottom: 0;}
.tw-font-normal { font-weight: 400;}
.tw-ml-5 { margin-left: 1.25rem;}
.hide { display: none !important;}
.hide {display: none !important;}
.task-single-menu ul li { margin-bottom: 10px;}
.task-single-menu ul li a { font-size: 14px;}
.task_popup .modal-body {padding-top: 0; padding-bottom: 0; background: #f8fafc; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;}
.task_popup .modal-body .row {margin-right: -15px; margin-left: -15px;}
.text-has-action { border-bottom: 1px dashed #e5e7eb; padding-bottom: 2px;}
.pointer {cursor: pointer;}
.no-margin { margin: 0 !important;}
.pull-left { float: left !important;}
a.btn.disabled, fieldset[disabled] a.btn { pointer-events: none;}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { cursor: not-allowed; opacity: .65; -webkit-box-shadow: none; box-shadow: none;}
.task_popup .please_wait{background-color: rgb(31 41 55); border-color: rgb(31 41 55 );}
.btn, .btn-group>.btn { border-radius: .5rem; font-size: 13.45px; font-weight: 500; line-height: 20px; padding-left: calc(.5rem + 1px); padding-right: calc(.5rem + 1px);}
.no-margin { margin: 0 !important;}
.pull-left { float: left !important;}
.mright5 { margin-right: 5px;}
.mbot10 { margin-bottom: 10px;}
.btn-success, .btn-success.focus, .btn-success:focus { border-color: rgb(34 197 94); color: rgb(255 255 255);}
.fa-regular, .far { font-weight: 400;}
.btn { display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none;
 border: 1px solid transparent; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none;  -ms-user-select: none;  user-select: none;}
 .task_popup .btn{border: 1px solid rgb(209 213 219) }
 hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #d9d9d9;}
.hr-10 { margin-top: 10px; margin-bottom: 10px;}
.tw-text-sm { font-size: .8rem;}
.tw-mt-2\.5 { margin-top: .625rem;}
.tw-ml-2 { margin-left: .5rem;}
.text-muted { color: rgb(107 114 128);}
.tw-font-semibold { font-weight: 600;}
.tw-text-base { font-size: .9rem;}
.tw-mb-1 { margin-bottom: .25rem;}
.task_popup .modal-dialog .description{display: flex; align-items: center;}
.task_popup .modal-dialog .description h4 {margin-bottom: 0;}
.task_popup .modal-dialog .description a {margin-top: 0;}
.task_popup .modal-dialog .description .bx-message-square-edit {font-size: 16px;}
.task_popup .modal-dialog .tc-content p { color: #111827; margin-bottom: 0;}
.tc-content { line-height: 1.5rem;}
#task_view_description.mce-content-body { background: #f8fafc; padding: 8px; border-radius: 4px;}
div[contenteditable]:focus { outline: 0;}
.task .status_btn { border: solid 1px #ccc; font-size: .75rem; font-weight: 500; line-height: 1rem; padding: .25rem .5rem;}
.task .status_btn.awaiting { color: #84cc16; border: 1px solid #ceeba2; background: #fafdf6;} 
.task .status_btn.testing {     color: #0284c7; border: 1px solid #9acee9; background: #f5fafd;} 
.task .status_btn.inprogress { color: #3b82f6; border: 1px solid #b1cdfb; background: #f7faff;} 
.task .status_btn.Complete {     color: #22c55e; border: 1px solid #a7e8bf; background: #f6fdf9;} 
.task table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td { border-bottom-width: 1px; border-right: 0px; }
.task table.dataTable th {     background-color: rgba(243, 244, 246, .7);}
.task table.dataTable th:nth-child(1) { border-right: solid 1px #ebebeb !important;}
.task table.dataTable td:nth-child(1) {  border-right: solid 1px #ebebeb !important; }
.popup_btns { display: flex; border-bottom: solid 1px #eee; padding-bottom: 20px; margin-bottom: 20px; height: 60px;}
.popup_btns .btn { padding: 5px 5px;     display: flex ; align-items: center;}
.popup_btns .btn .bx {font-size: 18px; line-height: 18px;}
.task_popup .tc-content { border-bottom: solid 1px #eee; padding-bottom: 20px; margin-bottom: 20px;}
.task_popup .checklist_block .hed {  display: flex; justify-content: space-between; align-items: start;}
.task_popup .comments_block .hed {  display: flex; justify-content: space-between; align-items: start;}
.task_popup h3.subtitle { font-size: 14px; font-weight: 500; color: #111827;}
.task_popup .text_icon { color: #6b7280;     display: flex ; align-items: center;}
.task_popup .text_icon .icon {font-size: 20px; margin-left: 5px;}
.task_popup .text_icon:hover { color: #374151;}
.task_popup .input_block {     padding: 5px 15px 5px 5px; margin-top: 10px; border-radius: 8px;}
.task_popup .input_block:hover {     background: #f3f4f6;}
.task_popup .input_block .textarea { resize: none; overflow: hidden; font-size: 14px; border-radius: 3px; padding: 0 5px 0 5px; border: 0; outline: 0; width: 100%;}
.task_popup .input_block .btns { display: flex; align-items: center; margin-left: 10px;  justify-content: space-between;}
.task_popup .input_block .btns .bx { color: #6b7280; font-size: 18px;}
.task_popup .input_block .btns a { margin: 0 4px;}
.task_popup .input_block .btns .dropdown {  margin: 0 4px;}
.task_popup .input_block .btns a:hover .bx {color: #23527c;}
.task_popup .input_block .d-flex { align-items: start;}
.task_popup .input_block .input_text {      color: #6b7280;   font-size: 13px !important; margin-bottom: 0px;}
.checklist_block {border-bottom: solid 1px #eee; padding-bottom: 20px; margin-bottom: 20px;}
.task_popup .file_upload { margin-top: 20px;}
.task_popup .file_upload .ff_fileupload_wrap .ff_fileupload_dropzone { border: dashed 2px #d1d5db; height: 130px;     background-size: 70px; filter: grayscale(1);}
.task_popup  .btn { float: right;     margin-top: 10px; border-radius: .5rem; background-color: #1f2937; font-size: 14px; border: solid 1px #1f2937; color: #fff;}
.task_popup .btn:hover { background-color: #151d2b;}
.task_popup .popup_right .icon_title { display: flex; align-items: center; margin-bottom: 10px;}
.task_popup .popup_right .icon_title .icon {font-size: 20px; margin-right: 5px; color: #6b7280;}
.task_popup .popup_right { padding: 20px 15px; border-left: solid 1px #dee2e6;}
.task_popup .popup_right .icon_text { display: flex; align-items: center; line-height: 14px; padding: 8px;}
.task_popup .popup_right .icon_text .icon { font-size: 20px; margin-right: 5px;  color: #9ca3af; line-height: 19px; margin-left: -8px;}
.task_popup .popup_right .icon_text .sub { color: #1f2937; margin-left: 5px;}
.task_popup .popup_right .status .title { background: #eeeeee; border-bottom: 1px solid #e4e5e7; font-weight: 500;  margin-top: -8px;   border-radius: 5px 5px 0 0; padding: 8px 14px; font-size: 14px;}
.task_popup .popup_right .status {transform: translate3d(-71px, 16px, 0px) !important;}
.task_popup .popup_right .status .dropdown-item { padding: 7px 15px !important;}
.task_popup .popup_right .icon_text input.sub { border: none; background-color: transparent; max-width: 100px;}
.task_popup .popup_right .icon_text input.sub:focus-visible {    outline: none;}
.task_popup .popup_right .icon_text .sub.green { color: #16a34a;}
.tags .bootstrap-tagsinput { background-color: transparent; border: none; box-shadow: inherit;}
.tags .bootstrap-tagsinput input { display: block; border-left: solid 2px #d1d5db; margin-top: 10px; height: 27px;}
.tags .bootstrap-tagsinput .badge { margin: 2px 3px; padding: 7px 10px; font-size: 100%; font-weight: 400; color: #111827 !important; background-color: #6b728033 !important; }
.task_popup .popup_right .separator {       margin: 15px 0; margin-left: -16px; margin-right: -16px; border-top: 1px solid #e5e7eb !important;}
.task_popup .popup_right .select2-selection--single {  background-color: transparent; border: none; box-shadow: inherit !important; padding: 0px !important;}
.task_popup .popup_right .select2-selection__placeholder {     color: #64748b !important; font-size: 13.5px;}
.task_popup .popup_right .select2-container--bootstrap-5 .select2-dropdown { z-index: 1056; overflow: hidden; color: #212529; background-color: #fff; border-color: #d4d4d4; border-radius: .25rem; }
.task_popup .popup_right .users { display: flex; }
.task_popup .popup_right .users .user {  margin-right: 3px;   border: 1px solid #e2e8f0; padding: 2px; border-radius: 50%; vertical-align: middle; margin-bottom: 5px; display: inline-block; position: relative;}
.task_popup .popup_right .users .user img { height: 32px; width: 32px; border-radius: 50%; }
.task_popup .remove-task-user { position: absolute; top: 35px; left: 12px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity .5s linear; }
.task_popup .popup_right .users .user:hover>a+.remove-task-user { visibility: visible; opacity: 1; }
.task_popup .popup_right .users .user:active, .popup_right .users .user:hover { border: 1px dashed #9ca3af; }
.task_popup .popup_right  .file_upload .ff_fileupload_wrap .ff_fileupload_dropzone { background-color: #fff; }
.task_popup .ff_fileupload_dropzone:hover { background-color: #f3f4f6 !important; }
.new_task .checks { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px;}
.new_task .checks .left { display: flex;}
.form-check { margin-right: 20px;}
.new_task.modal {   --bs-modal-width: 800px;}
.new_task.modal .form-group label { font-weight: 500; margin-bottom: 3px;}
.new_task.modal .b-b{border-bottom: solid 1px #eee;}
.new_task .form-control { font-size: 14px;}
.task .btn_solid { border-radius: .5rem; background-color: #1f2937; padding: 6px 12px; font-size: 14px; border: solid 1px #1f2937; color: #fff;}
.task .btn_solid:hover { background-color: #151d2b;}
.task .btn_border { border-radius: .5rem; background-color: transparent; padding: 6px 12px; font-size: 14px; border: solid 1px #1f2937; color: #1f2937;}
.task .btn_border:hover { background-color: #151d2b; color: #fff;}
.task .text-right { text-align: right; }
#comments_box, #comment_upload, #add_comment_btn{
	display:none;
}
.task_popup .input_block .title {
    background: #eeeeee;
    border-bottom: 1px solid #e4e5e7;
    font-weight: 500;
    margin-top: -8px;
    border-radius: 5px 5px 0 0;
    padding: 8px 14px;
    font-size: 14px;
}
#add_comment_btn{
	margin-bottom: 20px;
}
.task_popup .attachs_block .hed {  display: flex; justify-content: space-between; align-items: start;}
.attachs_block {border-bottom: solid 1px #eee; padding-bottom: 20px; margin-bottom: 20px;}
#viewattachments .col-md-6 { position: relative; height: 250px; background: #edfaff; border: 1px solid #def6ff; text-align: center;}
#commentitems .col-md-6 { text-align: center;}
.imgcmprv{
	text-align: center;
	vertical-align: middle;
}
.imgcmprv div{
	text-align: center;
    padding-top: 5px;
	word-break: break-all;
}
.delimage {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255, 255, 255, 0.8); /* Optional: Better visibility */
	cursor: pointer;
}
.delimage i {
	font-size: 20px; /* Adjust icon size */
	color: red; /* Optional: Make delete icon red */
}
.viewimage{
	max-height: 220px; object-fit: contain; width: auto;
}
.panel_s .hr-panel-separator {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity));
    margin: 1.25rem -1.5rem;
}
@media (min-width: 768px) {
	.md\:tw-border-r {
		--tw-border-opacity: 1;
		border-right: 1px solid rgb(203 213 225/var(--tw-border-opacity))
	}
	
}

.cm-image-box {
	position: relative;
	height: 250px; /* Adjust as needed */
	background: #edfaff;
	border: 1px solid #def6ff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 10px;
}
.cm-image-box a {
	text-align: center;
}
.cm-image-box img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.cm-title {
	position: absolute;
	bottom: 3px;
	width: 90%;
	text-align: center;
	word-wrap: break-word;
	word-break: break-all;
}
.cm-delete-icon {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	color: red;
	font-size: 20px;
}
#viewOnly_tasktags span{
	padding: 7px 10px;
    border-radius: 10%;
    margin: 2px 3px;
    font-size: 100%;
    font-weight: 400;
    color: #111827;
    background-color: #6b728033;
}
.form-error {
    border-color: #dc3545;
}