a {
    color: #005ea9;
}

/* Fixed height container with internal scrolling */
.content-fixed-height {
    height: calc(100vh - 210px); /* Fixed height to match withMenu offset */
    min-height: calc(100vh - 210px);
    max-height: calc(100vh - 210px);
    overflow-y: auto; /* Enable vertical scrolling within container */
    display: flex;
    flex-direction: column;
    border: none !important;
    outline: none !important;
    /* Remove default margins and padding that would interfere with fixed height */
    margin: 0 !important;
    padding: 1rem; /* Add some internal padding for spacing */
}

/* Ensure inner container grows to fill available space for proper scrolling */
.content-fixed-height .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow shrinking below content size */
}

/* Action button containers should not grow but take natural space */
.content-fixed-height .container.d-flex.justify-content-end {
    flex: 0 0 auto; /* Don't grow, take only needed space */
    padding: 0.5rem 0; /* Some vertical spacing for buttons */
}

/* Table container should be scrollable within the fixed container */
.content-fixed-height .table-responsive-sm,
.content-fixed-height .table-responsive-lg,
.content-fixed-height .table-container {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    /* Override any dynamic height calculations */
    position: relative;
}

/* Specific override for content-fixed-height to prevent JS interference */
div.content-fixed-height .table-responsive-sm,
div.content-fixed-height .table-responsive-lg,
div.content-fixed-height .table-container {
    /* Force override of any JavaScript-applied styles */
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
}

/* Dynamic content height utilities - intelligent page filling */
.dynamic-content-height {
    min-height: calc(100vh - 170px); /* Base page-filling height */
    height: auto; /* Allow natural height expansion */
    display: flex;
    flex-direction: column;
    border: none !important; /* Remove any unwanted borders */
    outline: none !important; /* Remove any unwanted outlines */
}

/* When content is substantial, let it drive the height naturally */
.dynamic-content-height.has-content {
    min-height: calc(100vh - 170px); /* Keep page-filling base */
}

/* Container should size naturally without forcing expansion */
.dynamic-content-height .container {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
}

/* Table container should be flexible within page structure */
.dynamic-content-height .table-responsive-sm,
.dynamic-content-height .table-responsive-lg {
    flex: 0 1 auto; /* Size naturally, don't force expansion by default */
    min-height: 400px; /* Reasonable minimum table area */
    height: auto;
}

/* When we have many rows, let table grow naturally */
.dynamic-content-height.has-content .table-responsive-sm,
.dynamic-content-height.has-content .table-responsive-lg {
    min-height: auto;
    flex: 0 1 auto; /* Don't force flex growth when content is substantial */
}

#sidebar a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar i, #sidebar span {
    display: inline-block;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    position: relative;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    height: 100vh !important;
    background: #fff;
    color: #999;
    transition: all 0.3s;
    z-index: 2;
    box-shadow: 0px 0px 20px 20px #a9a9a975;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    overflow-y: auto;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

#sidebarContents {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 20px;
}

#sidebar.active {
    min-width: 60px;
    max-width: 60px;
    height: 100vh !important;
    top: 0 !important;
    bottom: 0 !important;
    text-align: center;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

#sidebar.active #sidebarContents {
    min-width: 60px;
    max-width: 60px;
    text-align: center;
    padding-bottom: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
}

#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
    display: none;
}

#sidebar.active .sidebar-header strong {
    display: block;
}

#sidebar ul li a {
    text-align: left;
    font-weight: 500;
}

#sidebar.active ul li a {
    padding: 5px 5px;
    text-align: center;
    font-size: 10px;
}

#sidebar.active .sidebartext{
    display: none;
}

#sidebar.active #sidebarCollapse{
    display: none;
}

#sidebar.active .sidebarheadertext{
    display: none;
}

/* ===================================================================
   COMPREHENSIVE TEXT HIDING FOR MINIMIZED SIDEBAR (#sidebar.active)
   Added to ensure ALL text elements are properly hidden
   =================================================================== */

/* Hide all text with hide-text-side class (CRITICAL - was missing) */
#sidebar.active .hide-text-side {
    display: none !important;
}

/* Hide company name specifically (has Bootstrap .collapse class) */
#sidebar.active #companymenuText {
    display: none !important;
}

/* Hide section heading container text to prevent spacing issues */
#sidebar.active .sidebar-heading span {
    display: none !important;
}

/* Ensure dropdown toggles don't show any text */
#sidebar.active .dropdown-toggle span {
    display: none !important;
}

/* Explicitly keep icons visible (override any conflicts) */
#sidebar.active .sidebaricon {
    display: inline-block !important;
    visibility: visible !important;
}

/* End of comprehensive text hiding rules */
/* ======================================================================= */

#sidebar.active .sidebarheadericon{
    font-size: 14px;
    /* padding-right: 20px; */
    color: #999;
}

.sidebarheadericon{
    font-size: 14px;
    padding-right: 20px;
    color: #999;
}

.sidebarheadericon:hover, .sidebarheadertext:hover{
    color: #005ea9;
}

.sidebaricon{
    font-size: 14px;
    
}

.sidebarheadertext {
    margin-left: -5px;
}

#sidebar.active ul li a i {
    margin-right: 0;
    display: block;
    font-size: 10px;
    margin-bottom: 5px;
}

#sidebar.active ul ul {
    list-style-type: none;
    padding-inline-start: 0px;
}

#sidebar.active ul ul li {
    text-align: left;
    /* text-indent: -25px; */
}

#sidebar.active ul ul a {
    padding: 5px !important;
}

#sidebar.active ul ul a {
    font-size: 0px;
}

#sidebar.active ul ul a:first-letter {
    font-size: 16px;
}

#sidebar.active .dropdown-toggle::after {
    bottom: 10px;
    right: 10px;
    transform: translateX(20%) translateY(-50%) rotate(180deg);
}

#sidebar.active .dropdown-toggle.collapsed::after {
    /* color: red; */
    right: 10px;
    transform: translateX(20%) translateY(-50%) rotate(360deg);
}



#sidebar .sidebar-header {
    padding: 20px;
    background: #005ea9;
}

#sidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
}

#sidebar ul.components {
    padding: 0px 0px 20px 0px;
}

#sidebar ul li a {
    padding: 5px 10px;
    display: block;
}

#sidebar ul li a span.hide-text-side{
    margin-left: 10px;
}

#sidebar ul li a:hover {
    /* color: #fff;
    background: #02508fd4; */
    color: #005ea9;
}

#sidebar ul li a i {
    margin-right: 10px;
}

/* #sidebar ul li.active>a,
#sidebar a[aria-expanded="true"] {
    color: #fff;
    background: #02508fd4;
} */

a[data-bs-toggle="collapse"] {
    position: relative;
}

#sidebar .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(180deg);
}

#sidebar .dropdown-toggle.collapsed::after {
    /* color: red; */
    transform: rotate(360deg);
}

#sidebar ul ul a {
    font-size: medium;
    /* padding-left: 30px !important; */
    /* background: #fff; */
}

#sidebar ul li ul li {
    list-style-type: none;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}


.hr-sidebar {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgb(245,245,245);
}

.sidebar .nav-link .feather {
    margin-right: 4px;
    color: #999;
  }

#sidebar .nav-link.active {
     color: #005ea9;;
     
    /* background-color: #0f436cbd; */
}

.topmargin1{
	margin-top: 15px;
	width: 95%;
}

.sidebar #productmenu, #equipmentmenu, #historymenu, #packagingmenu, #devicetypemenu{
	font-size: small;
}

.sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
    color: #666666;
}

.sidebarCollapse {
    padding-inline-start: 0px;
}

/* #sidebar.active .sidebar-heading span{
    font-size: .6rem;
    text-align: center;
    display: inline-block;
}*/

#sidebar.active .sidebar-heading a span{
    /* display: none; */
    text-align: center;
} 

#sidebar img{
    max-width: 130px;
    padding: 8px; 
    float: right;
}

#sidebar.active img{
    display: none;
}

#sidebar:not(.active) .sidebaricon{
    min-width: 20px;
    max-width: 20px;
    text-align: center;
}

#sidebar:not(.active) .sidebarTopHeader{
    margin-left: 15px;
    font-size: 20px;
}

#sidebar.active .sidebarTopHeader{
    margin-left: 5px;
    font-size: 20px;
}

/* ---------------------------------------------------
    HEADER STYLE
----------------------------------------------------- */

.perfo-header{
    background: #005ea9;
    color: #D9D9D9 !important;
    height: 50px;
    border-bottom: solid 1px rgba(0, 0, 0, .1);
    opacity: 1;
}

.perfo-header a {
    color: #D9D9D9;
}

.vertical-separator {
    border-left: 1px solid #D9D9D9;
    height: 40px;
}

.topMenuDropdownItem {
	text-transform: none !important;
	padding: 0.25rem 0.25rem;
}

a.topMenuDropdownItem {
    color: #999;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: calc(100% - 250px);
    margin-left: 250px;
    /* min-height: 100vh; */
    transition: all 0.3s;
}

#content.active {
    width: calc(100% - 60px);
    margin-left: 60px;
}

.bg-light {
    background: #fff !important;
}

body {
    background: #E8E8E8;
    /* background-image: radial-gradient(circle at 1px 1px, #DDD 1px, transparent 0); */
    background-image: radial-gradient(#AAA 1px, transparent 0);
    background-size: 22px 22px;
    /* background-position: ; */
}

.content-container {
    margin-top: 40px;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 80px;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #005ea9 !important;
    border-color: #005ea9 !important;
}

.btn-outline-primary {
    color: #005ea9 !important;
    border-color: #005ea9 !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #005ea9 !important;
}

/* ---------------------------------------------------
    DEVICE MENU STYLE
----------------------------------------------------- */

/* .deviceMenu {
    border-bottom: 4px solid #D9D9D9;
} */

.deviceMenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.deviceMenu li {
    width: 170px;
    border-bottom: 3px solid #D9D9D9;
}

.deviceMenu li.active {
    border-bottom: 3px solid #005ea9;
}

.deviceMenu li a{
    font-size: 20px;
    font-weight: 500;
    color: #999;
    
}

.deviceMenu li.active a{
    color: #005ea9;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (min-width: 1900px){
    .container{
        max-width: 1800px !important;
    }
}


@media (max-width: 768px) {
    #sidebar {
        min-width: 90px;
        max-width: 90px;
        text-align: center;
        margin-left: -90px !important;
    }

    #sidebar:not(.active) {
        display: none;
    }
    .dropdown-toggle::after {
        top: 15px;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
    #sidebar.active {
        margin-left: 0 !important;
    }
    #sidebar .sidebar-header h3,
    #sidebar .CTAs {
        display: none;
    }
    #sidebar .sidebar-header strong {
        display: block;
    }
    #sidebar ul li a {
        padding: 20px 10px;
    }
    #sidebar ul li a span {
        font-size: 11px;
    }
    #sidebar ul li a i {
        margin-right: 0;
        display: block;
    }
    #sidebar ul ul a {
        padding: 10px !important;
    }
    #sidebar ul li a i {
        font-size: 1.3em;
    }
    #sidebar {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }


}

/*--------------
FOOTER
--------------*/

.footer {
    position: fixed;
    bottom: 0;
    width: calc(100vw - 250px);
    height: 40px; /* Set the fixed height of the footer here */
    line-height: 40px; /* Vertically center the text there */
    background: linear-gradient(to right, #231D1D, #272020);
    padding-left: 40px;
    padding-right: 40px;
    z-index: 5;
  }

  .socialicon {
    color: #AAA3A3;
  }

  .footerCircleImage{
    height: 40px;
    width: 40px;
    margin-top: -20px;
    overflow: hidden;
    border-radius: 50%;
    border:2px solid white;
  }


/*--------------
TOP MENU
--------------*/

.companyMenuItem:hover {
    color: #fff;
    background: #02508fd4!important;
}

a {
    text-decoration: none !important;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

/* ---------------------------------------------------
    SELECT DROPDOWN ARROW STYLING (BASE/LIGHT MODE)
----------------------------------------------------- */
/* Remove browser default arrow and Bootstrap's arrow */
.form-select,
select.form-control,
select.form-select,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Add our custom arrow */
.form-select,
select.form-control,
select.form-select,
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}
.table-hover tbody tr:hover {
    background-color: #ffdfaf !important;
  --bs-table-hover-bg: #ffdfaf;
}
  
    

/* #varietyTable td, #varietyTable th{
    padding-bottom: 10px!important;
    padding-top: 10px!important;
} */