.text-blue { color: #0000ff; }
.text-dark-blue { color: #123948; }

.text-yellow { color: #EE6353; }
/* dasbhoard graph widget*/
.bg-yellow { background-color: #ffffff !important; }

/* dasbhoard widgets*/
.bg-dark-yellow { background-color: #123A49 !important; }

.bg-dark-blue { background-color: #123A49; }

/* employee icons*/
.btn-dark-blue { background-color: #123A49 !important; color: #ffffff !important; }
.btn-dark-blue i { color: #ffffff !important; }
.btn.btn-outline-dark-blue {
	color: #123A49;
	background-color: transparent;
	border-color: #123A49;
}
.btn.btn-outline-dark-blue i {
	color: #123A49;
}

.bg-grey-blue { background-color: #88A9C3 !important; }
.btn-grey-blue { background-color: #88A9C3 !important; color: #ffffff !important; }
.btn.btn-outline-grey-blue {
	color: #88A9C3;
	background-color: transparent;
	border-color: #88A9C3;
}
.text-grey-blue { color: #88A9C3; }
.btn-org-red { background-color: #EE6353 !important; color: #ffffff !important; }
.btn.btn-org-red i {
	color: #FFFFFF;
}
.btn.btn-outline-org-red {
	color: #EE6353;
	background-color: transparent;
	border-color: #EE6353;
}
.btn.btn-outline-org-red i {
	color: #EE6353;
}
.text-must-yellow { color: #FDA92A; }
.bg-must-yellow { background-color: #FDA92A !important; }
.btn-must-yellow { background-color: #FDA92A !important; color: #ffffff !important; }
.btn.btn-outline-must-yellow {
	color: #FDA92A;
	background-color: transparent;
	border-color: #FDA92A;
}
/* dasbhoard title fonts*/
.text-bblack, .text-bblack-hover:hover { color: #000000 !important; }
/* dasbhoard widget left bottom*/
.bg-bblack { background-color: #EE6353 !important; }
.bg-light-bblack { background-color: #50afd3 !important; }

.text-dark-yellow { color: #ffb536; }
.bg-dark-yellow1 { background-color: #ffb536; }

.btn.btn-green {
	color: #ffffff;
	background-color: #39a7b6;
	border-color: #39a7b6;
}

.checkbox > span { background-color: #88A9C3; }
label .btn.btn-icon { width: 20px !important; height: 20px !important; }

.text-uppercase { text-transform: uppercase; }
.tinymce-h-200 .tox.tox-tinymce { height: 200px !important; }
.tinymce-h-300 .tox.tox-tinymce { height: 300px !important; }
.valign-top { vertical-align: top !important; }

.bg-blue { background-color: var(--blue); }
.bg-blue i { color: #FFFFFF; }

.timeline.timeline-6 .timeline-item .timeline-label { width: 55px; }
.timeline.timeline-6::before { left: 57px; }
/* .apexcharts-tooltip {
  color: #e2d6c9 !important;;
} */

/* .apexcharts-yaxis, .apexcharts-xaxis-inversed { width: 50% !important; } */

.pulse.pulse-org-red .pulse-ring { border-color: #EE6353; }
.text-org-red { color: #EE6353; }
/* sidebar background*/
.bg-noti-sidebar { background-color: #ffffff; }
#kt_quick_panel .offcanvas-content #kt_quick_panel_logs img { width: 100%; }
.masonry {
  column-count: 2; /* Creates two columns */
  column-gap: 16px; /* Space between columns */
}
.cat-card {
  display: inline-block; /* Prevents breaking inside columns */
  width: 100%; /* Ensures cards take full column width */
  margin-bottom: 16px; /* Adds space between cards */
}
/* .cat-card .accordion .card .card-header .card-title:not(.collapsed) .icon { color:#B5B5C3 !important; } */
.cat-card .accordion .card .card-header .card-title.collapsed .icon { color:#ffb536 !important; }
.svg-icon-dark-yellow .st0 { fill: #ffb536; }

.dataTables_wrapper .employee_table tbody tr.active, .dataTables_wrapper .employee_table tbody tr.selected { background-color: #FDA92A !important; }
.dataTables_wrapper .employee_table tbody tr.active th, .dataTables_wrapper .employee_table tbody tr.active td, .dataTables_wrapper .employee_table tbody tr.selected th, .dataTables_wrapper .employee_table tbody tr.selected td {
	background-color: #FDA92A;
	border-left-color: #FDA92A;
	border-right-color: #FDA92A;
	color: #FFF;
}

.btn-xs, .btn-group-xs > .btn {
	padding: 0.35rem 0.55rem;
	font-size: 0.95rem;
	line-height: 1;
	border-radius: 0.42rem;
}

/* start: jstree css */
.jstree-open > .jstree-anchor > .jstree-icon, .text-must-yellow {
    color: #FDA92A !important;
}
/* end: jstree css */

.article-desc, .article-desc span, .article-desc div { font-family: Poppins, Helvetica, "sans-serif" !important; font-size: 13px !important; }

/* start: sticky first column and header */
.sticky-container {
    position: relative;
    overflow: auto;
    max-height: 400px; /* Match the card body height */
}

/* Sticky header */
.sticky-table thead th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa !important;
    z-index: 3; /* Ensure it sits above cells */
    border-bottom: 2px solid #dee2e6;
}

/* Sticky first column */
.sticky-table th:first-child,
.sticky-table td:first-child {
    position: sticky;
    left: 0;
    background-color: #f8f9fa !important;
    z-index: 2; /* Lower than header */
    border-right: 1px solid #dee2e6;
}
/* end: sticky first column and header */
/* Override background on row hover */
.sticky-table tbody tr:hover th:first-child,
.sticky-table tbody tr:hover td:first-child {
    background-color: #E5EAEE !important;
}

/* start: for core_competency */
/* Ensure the table uses fixed layout */
.fixed-width-table {
    table-layout: fixed;
    width: 100%;
}
/* When the table has exactly 3 columns */
.fixed-width-table.three-columns {
    width: auto;
}

/* First Column */
.fixed-width-table th:nth-child(1),
.fixed-width-table td:nth-child(1) {
    width: 200px !important;
	vertical-align: middle;
}

/* Second Column */
.fixed-width-table th:nth-child(2),
.fixed-width-table td:nth-child(2) {
    width: 100px !important;
	flex-shrink: 0; /* Prevent shrinking */
	vertical-align: middle;
}

/* Other Columns */
.fixed-width-table th:nth-child(n+3),
.fixed-width-table td:nth-child(n+3) {
    width: 100px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	text-align: center !important;
	vertical-align: middle;
}

/* for ..en/competency_matrix */ 
.fixed-width-table.table-core-competency-temp th:nth-child(1),
.fixed-width-table.table-core-competency-temp td:nth-child(1) {
    width: 400px !important;
	vertical-align: middle;
}
/* end: for core_competency */

.table-core-competency .checkbox-list {
    display: flex;
    justify-content: center;
    align-items: center;
}
.table-core-competency .checkbox-list .checkbox > input { position: relative; } 
.table-core-competency .checkbox-list .checkbox.checkbox-reverse-primary > span { border: 1px solid #88A9C3; }

/* start::checkbox-must-yellow */
.checkbox.checkbox-must-yellow > span {
	background-color: #fff; border: 1px solid #88A9C3;
}
.checkbox.checkbox-must-yellow > input:checked ~ span {
	background-color: #FDA92A !important;
}
/* end::checkbox-must-yellow */

/* start:: Reverse Primary Checkbox */
.checkbox.checkbox-reverse-primary > span {
	background-color: #fff;
}
.checkbox.checkbox-reverse-primary > input:checked ~ span {
	background-color: #fff !important;
}
.checkbox.checkbox-reverse-primary > input:checked ~ span::after {
	border-color: #88A9C3;
}
/* end:: Reverse Primary Checkbox */

/* start:: Checkbox dark blue */
.checkbox.checkbox-dark-blue > span {
	background-color: #fff !important;
	border-color: #123A49;
}
.checkbox.checkbox-dark-blue > input:checked ~ span {
	background-color: #fff !important;
}
.checkbox.checkbox-dark-blue > input:checked ~ span::after {
	border-color: #123A49;
}
/* end:: Checkbox dark blue */


#matrix-container {
    height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
#matrix-container {
    flex-grow: 1;
}

/* start::on hover sidemenubar */
/* Show menu text */
body.aside-minimize-hover:hover .menu-text {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Show submenu on hover */
body.aside-minimize-hover:hover .aside-menu .menu-nav .menu-item:hover > .menu-submenu {
    display: flex !important;
}

/* Show submenu arrow */
body.aside-minimize-hover:hover .menu-arrow {
    display: flex !important;
}

/* Fix logo + toggle alignment on hover */
/* Force brand section layout on hover */
body.aside-minimize-hover:hover .brand {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
}

/* Force the logo wrapper to show */
body.aside-minimize-hover:hover .brand-logo {
    display: flex !important;
    align-items: center;
}

/* Restore the logo image */
body.aside-minimize-hover:hover .brand-logo img {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 60px !important;
}

/* Align toggle icon to the right */
body.aside-minimize-hover:hover .brand-toggle {
    display: flex !important;
    align-items: center;
    margin-left: auto;
}
/* end::on hover sidemenubar */

/* start::switch/toggle color : dark blue */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-darkblue, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-darkblue {
	background-color: #123A49;
	border-color: #123A49;
	color: #ffffff;
}
/* end::switch/toggle color : dark blue */

.w-200-linebreak {
	white-space: normal !important;
    word-break: break-word;
    max-width: 200px;
}