/* Body ------------------------------------------------------------ */
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab 
{
    height: 30px !important;
    display: block;
}


/*AutoComplete flyout */

.autocomplete_completionListElement
{ 
    cursor :default ;  
    height :150px;   
    text-align : left ;
    list-style-type : none ;
    font-size: 11px;
    color: #000;
    padding: 3px 5px;
    border: 1px solid #eeeeee;
    background: #fff;
    width: 300px;
    float: left;
    z-index: 1;
    position:absolute;
    margin-left:0px;
    }
/* AutoComplete highlighted item */
.autocomplete_highlightedListItem
   {
    background-color : #eeeeee;
    color : black ;
    padding : 1px ;
    
    }

    /* AutoComplete item */
.autocomplete_listItem
    {
    background-color :#ffffff;
    color : black ;
    padding : 1px ;
   }

BODY.catalogue {
    margin:                 0px;
    color:                  black;
    background-color:       #ffffff;
    font-size:             10pt;
    font-family:           verdana,sans-serif;
}


.textBoxSearch
{
 
  background-position:right; 
  background-repeat:no-repeat; 
  padding-right:20px;
}
.ddlSearch {
    height: 30px;
}
 
.textBoxSearch
{
 
  background-position:right; 
  background-repeat:no-repeat; 
  padding-right:20px;
}


.TextBoxNotes {
        
color: #000000; 
border-style:solid;
border-width:1px;
border-color:#c0c0c0;
text-align:left;
font-family:Arial;

    }


 .txtwatermark 
    {
        color:gray;
        font-family:Arial;
    }
    .txtwatermark:focus 
    {
        color:black;
    }
   
 
.ButtonSearch
{
 
border-radius: 3px;
background-image: url(../wddc_members/Images/Buttons/Submit.gif);
background-position: left;
cursor:pointer;
text-align:center;
color: #fff;
background-repeat:no-repeat;
width:150px;
padding: 0 0 0 20px;
}

.ButtonSearch2
{
 
border-radius: 3px;
background-image: url(../wddc_members/Images/Buttons/Submit.gif);
background-position: left;
cursor:pointer;
text-align:center;
color: #fff;
background-repeat:no-repeat;
width:150px;
padding: 0 0 0 20px;
}
.ButtonBack2
{
 

background-image: url('../wddc_members/Buttons/Back.gif');

}

.ButtonBack
{
 

background-image: url('../wddc_members/Buttons/Back.gif');
background-repeat:no-repeat;
background-color:white

}

    .GridViewLiquidation { border-spacing: 2px; border-collapse: separate; color:#595959}
    .GridViewLiquidation > tbody > tr > th, 
    .GridViewLiquidation > tbody > tr > td { border: 1px solid #dddddd; padding: 2px; }
  
.TextBoxBlack {
        
color: #000000; 
border-style:solid;
border-width:1px;
border-color:#c0c0c0;
text-align:right;

    }

.TextBoxBlue {
        
color: #0071C1; 
border-style:solid;
border-width:1px;
text-align:left;

    }

.Login {
   
    cursor: pointer;
    text-align: left;
    color: #0071C1;
    background-image: url('../p_images/UserName.gif');
    background-position: right;
    background-repeat:no-repeat;

}
.Password {
   
    cursor: pointer;
    text-align: left;
    color: #0071C1;
    background-image: url('../p_images/Password.gif');
    background-position: right;
    background-repeat:no-repeat;
}
.ButtonLogin {
      
border-radius: 3px;
cursor:pointer;
text-align:center;
color: #ffffff;
border-width: 1px;
border-color:#ffffff;

    
    }
.ButtonSubmit {
        -moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
background-image: url(../wddc_members/Images/Buttons/Submit.gif);
background-position: center;
cursor:pointer;
text-align:right;
color: #0071C1;
background-repeat:no-repeat;
border-width:0px;
    }



.ButtonAddToCart
{
border-radius: 3px;
cursor:pointer;
text-align:center;
color: #ffffff;
background-color:#be8842;
border-width:0px;
}
.ButtonTags
{
border-radius: 3px;
cursor:pointer;
text-align:center;
color: #0071C1;
background-color:#dddddd;
border-width:0px;
}
.ButtonViewCart
{
border-radius: 3px;
cursor:pointer;
text-align:center;
color: #ffffff;
background-color:#935aa3;
border-width:0px;
}
.ButtonClearCart
{
border-radius: 3px;
cursor:pointer;
text-align:center;
color: #ffffff;
background-color:#88c540;
border-width:0px;
}

.ButtonPrint {
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    color: #ffffff;
    background-color: #666666;

}

.BackgroundPurple
{
border-radius: 3px;
cursor:pointer;
text-align:center;
color: #ffffff;
background-color:#935aa3;
border-width:0px;
}
.BackgroundGold
{
border-radius: 3px;
cursor:pointer;
text-align:center;
color: #ffffff;
background-color:#be8842;
border-width:0px;
    font-weight: 700;
}
.BackgroundGreen
{
border-radius: 3px;
cursor:pointer;
color: #ffffff;
background-color:#81bd41;
    
    font-weight: 700;
    text-align: center;
}
.BackgroundBlue {
    border-radius: 3px;
    border-width: 0px;
    cursor: pointer;
    color: #ffffff;
    background-color: #0071C1;
    font-weight: 700;
    text-align: center;
}

.BackgroundRed
{
border-radius: 3px;
border-style:solid;
cursor:pointer;
text-align:center;
color: #ffffff;
background-color:#FF0000;
font-size:7pt;
font-weight:bold;
}

.BackgroundDarkGrey
{
border-radius: 3px;
cursor:pointer;
text-align:center;
color: #ffffff;
background-color:#E9DDCD;
}

.ButtonLogin
{
border-radius: 3px;
cursor:pointer;
text-align:center;
color: #0071C1;
background-color:#ffffff;
font-weight:bold;
border:2px outset #3da5f0;
}
.ButtonReports
{
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
background-image: url(../wddc_members/Buttons/ButtonReports.gif);
background-position: right;
cursor:pointer;
background-repeat:no-repeat;
border-width:0px;
height:35px;
width:350px;
}
.ButtonReports2
{
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
background-color:#eeeeee;
background-position: right;
cursor:pointer;
background-repeat:no-repeat;
border-width:0px;
height:35px;
width:350px;
}

.SearchTextBox
{

border-radius: 3px;
cursor:pointer;
text-align:left;
color: #000000;
border-color:#0071C1;
border-width:1px;
border-style:solid;
}
ul 
{ font-family:Verdana,sans-serif;
	font-size:small;
	color:#000000;
	}

CAPTION.banner {
    padding-top:            15px;
    padding-left:           10px;
    background-image:       url('');
    background-repeat:      no-repeat;
    background-position:    right bottom;
}

A.commonlink:link,
A.commonlink:active { 
	color:			#2a4ac1;
	text-decoration:	none;
    }

A.commonlink:visited { 
	color:			#AE8648;
	text-decoration:	none;
}

A.commonlink:hover {
	color:			#be8842;
	text-decoration:	underline;
	cursor:			pointer;
}



A.promos:link,
A.promos:active { 
	color:			#000000;
	text-decoration:none;
    }

A.promos:visited { 
	color:			#000000;
	text-decoration:	none;
}

A.promos:hover {
	color:			#be8842;
	text-decoration:	underline;
	cursor:		pointer;
}

A.hr:link,
A.hr:active { 
	color:			#0071C1;
	text-decoration:none;
    }

A.hr:visited { 
	color:			#0071C1;
	text-decoration:	none;
}

A.hr:hover {
	color:			#be8842;
	text-decoration:	underline;
	cursor:		pointer;
}

A.videos:link,
A.videos:active { 
	color:			#0071C1;
	text-decoration:	none;
    }

A.videos:visited { 
	color:			#0071C1;
	text-decoration:	none;
}

A.videos:hover {
	color:			#be8842;
	text-decoration:	underline;
	cursor:		pointer;
}


A.grid:link,
A.grid:active { 
	color:			#0c19b2;
	text-decoration:	none;
    font-weight:normal;
}

A.grid:visited { 
	color:			    #ae6505;
	text-decoration:	none;
    font-weight:        normal;
}

A.grid:hover {
	color:			    #ae6505;
	text-decoration:    underline;
	cursor:			    pointer;
    font-weight:        normal;
}

A.VS:link,
A.VS:active { 
	color:			#000000;
	text-decoration:	none;
    font-weight:normal;
}

A.VS:visited { 
	color:			    #ae6505;
	text-decoration:	none;
    font-weight:        normal;
}

A.VS:hover {
	color:			    #0071C1;
	text-decoration:    underline;
	cursor:			    pointer;
    font-weight:        normal;
}

/* Banner/Header/Footer ------------------------------------------------------------ */

    
TD.banner
{
	background-color: white;
	padding: 3px;
	text-align: justify;
	font-size:xx-small;
	border-right-color:#0071C1;
	border-right-style:solid;
	border-right-width:thin;
	color: #cc0000;	
}

TD.footer
{
	background-color: white;
	padding: 7px;
	text-align: justify;
	font-size:xx-small;
	color: #c0c0c0;
}

TD.memberbuttons
{
	background-color: white;
	padding: 3px;
	text-align: justify;
	font-size:xx-small;
	color: #c0c0c0;
}



TR.banner {
    height:                 40px;
    font-size: smaller;
    padding:7px;
}

TR.header {
    height:                 40px;
    font-size: smaller;
    background-color:#ffffff;
    padding:7px;
}
TR.footer
{
	height: 40px;
	color: #cc0000;
	font-size: smaller;
	padding: 7px;
}
A.footerwhite:link,
A.footerwhite:visited,
A.footerwhite:active { 
	color:			#ffffff;
	text-decoration:none;
    font-weight: bold;
}
A.footergrey:link,
A.footergrey:visited,
A.footergrey:active {
    color: #c0c0c0;
    text-decoration: none;
    font-weight: bold;
}
A.footer:hover {
	color:			#be8842;
	text-decoration:	none;
}

/* Menu ------------------------------------------------------------ */

A.menu:link,
A.menu:visited,
A.menu:active { 
	color:			#000000;
	text-decoration:	none;
}







TD.topmenu
{
	background-color: #F7F6F3;
	border:1px;
	border-color:Red;
	padding: 7px;
	text-align: justify;
	font-size: small;
	color: #cc0000;
}

TD.leftmenu
{
	background-color: #F7F6F3;
	padding: 7px;
	text-align: justify;
	font-size:small;
	font-weight:bold;
	color: #cc0000;
	font-family:Verdana;
}


TD.rightmenu
{
	background-color: #F7F6F3;
	border-right-color:white;
	border-right-style:solid;
	border-right-width:thick;
	padding: 7px;
	text-align: justify;
	font-size: xx-small;
	color: #000000;
}

TD.nav_bar { 
	border-color: #9aa29c; 
	border-style: outset; 
	background-color: #d9e0e4;
    background-repeat:    no-repeat;
    background-position:  top left;
    background-color:     #E9DDCD;
    padding-left:         5px;
    padding-right:        5px;
    margin:               10px 20px;
    height:               25px;
    text-align:           left;
    }
TH.menu {
    border-right:           2px solid #0071C1;
    text-align:			center;
}


/* Core ------------------------------------------------------------ */

TD.core
{
	background-color: white;
	padding: 7px;
	text-align: justify;
	font-size: small;
	color: black;
	width:1024px;
}

TABLE.core {
    background-color: white;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif
}

TABLE.core {
    background-color: white;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif
}
textbox.core {
    background-color: white;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif
}
   


TABLE.membercontent
{
	background-color:	white;
	border:				2;
	font:				verdana,sans-serif;
	width:				600;
	float:				none;
	padding:			6px;
	font-size:			small;
	color:				black;
	max-width:			650;
}

A.core:Link
{ 
	color:          #be8842;
	text-decoration:	none;
    
}
A.core:visited
{ 
	color:          #ab6c0b;
	text-decoration:	underline;
    
}
A.core:active
{ 

	text-decoration:	underline;
    
}
A.core:hover {
	color:			#0071C1;
	
	text-decoration:	underline;
	cursor:			pointer;
}


H3.core {
	font-family:		verdana, sans-serif;
	font-size:			16px;
	text-align:			left;
	color:				#0071C1;
}

H4.core {
    font-family:		verdana, sans-serif;
	font-size:			14px;
	text-align:			left;
	color:			#000000;
	
}
H5.core {
	color:			#000000;
	padding-left:		10px;
}

P.core {
	text-indent:		1em;
}

HR.blue {
	color:			#0071C1;
}

HR.red {
	color:			#cc0000;
}

SPAN.button {
    border-style:         outset;
    border-color:         #E9DDCD;
    background-image:     url('');
    background-repeat:    no-repeat;
    background-position:  left top;
    background-color:     #E9DDCD;
    padding-left:         25px;
    padding-right:        5px;
    margin:               10px 20px;
    font-family:          tahoma, sans-serif;
    font-style:           normal;
    font-size:            8pt;
    font-weight:          bolder;
    height:               25px;
    text-align:           left;
}

SPAN.newsclippings_list {
    font-family:          verdana, sans-serif;
    font-style:           normal;
    font-size:            12pt;
    font-weight:          bold;
    height:               25px;
    text-align:           left;
}
TABLE.main
{
}

.txtsearch
{	background-color:	#ffffff;
	border-style:		ridge;
	font-weight:		bold;
	height:				20px;
	width:				100px;		 	
}
#lblSearchString
{
	font-size: small;
	color: background;
	font-family: Arial;
	font-weight:bold;
}
LABEL.lblSearchString
{
	font-size: 10pt;
	color: background;
	font-family: Arial;

}

.redWord {
    background-color: #0033A0; /* Alberta blue */
    color: #FFFFFF; /* White text */
    border-radius: 4px; /* Rounded corners */
    padding: 1px 2px; /* Add some padding for better spacing */
    font-weight: bold; /* Keep the text bold for emphasis */
    font-size: 0.9em; /* Slightly smaller font size */
}

.greenWord {
    background-color: #D71920; /* Manitoba red */
    color: #FFFFFF; /* White text */
    border-radius: 4px; /* Rounded corners */
    padding: 1px 2px; /* Add some padding for better spacing */
    font-weight: bold; /* Keep the text bold for emphasis */
    font-size: 0.9em; /* Slightly smaller font size */
}
   
 .GridPager a, .GridPager span
    {
        display: block;
        height: 20px;
        width: 20px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }
    .GridPager a
    {
        background-color: #f5f5f5;
        color: #969696;
        border: 1px solid #c0c0c0;
        font-size:12pt;
    }
    .GridPager span
    {
        background-color: #515050;
        color: #fff;
        border: 1px solid #c0c0c0;
        font-size:12pt;
    }

    .accordion-header {
            width: 500px;
            background-color: none;
            border-width: 2px;
            border-color: #cc0000;
            border-radius: 0px;
            margin-bottom: 5px;
            padding: 4px;
            color: #000000;
            font-weight:normal;
            cursor: pointer;
            text-decoration: underline;
            font-size:14pt;
            font-weight:bold;
            text-align:left;
        }
     .accordion-header-hr {
           width: 750px;
            background-color: none;
            border-width: 2px;
            border-color: #cc0000;
            border-radius: 0px;
            margin-bottom: 5px;
            padding: 4px;
            color: #000000;
            font-weight:normal;
            cursor: pointer;
            text-decoration: underline;
            font-size:10pt;
            font-weight:bold;
            text-align:left;
        }
     .accordion-selected-hr {
            width: 750px;
            background-color: none;
            margin-bottom: 5px;
            margin-top: 5px;
            padding: 4px;
            color: #be8842;
            font-weight: bold;
            cursor: pointer;
            border-width: 2px;
            border-color: #cc0000;
            border-radius: 0px;
            font-size:10pt;
            font-weight:bold;
            text-align:left;
            text-decoration: underline;
            
            
        }
        .accordion-content-hr {
            
           width: 750px;
            background-color: none;
            margin-bottom: 5px;
            margin-top: 5px;
            padding: 4px;
            color: #be8842;
            font-weight: bold;
            cursor: pointer;
           
            font-size:10pt;
            font-weight:normal;
            text-align:left;
           
            overflow-x:hidden;
            
        }

        .accordion-selected {
            width: 500px;
            background-color: none;
            margin-bottom: 5px;
            margin-top: 5px;
            padding: 4px;
            color: #000000;
            font-weight: bold;
            cursor: pointer;
            border-width: 2px;
            border-color: #cc0000;
            border-radius: 0px;
            font-size:14pt;
            font-weight:bold;
            text-align:left;
            text-decoration: underline;
        }

      
       



        /* Style for unselected tab headers */
.MyTabStyle .ajax__tab_header {
    font-size: 14px;
    font-weight: bold;
    display: inline-block; /* Display tabs inline */
    padding-left: 0px;
    margin-right: 10px;
    color: #000;
   
   
}

    .MyTabStyle .ajax__tab_header .ajax__tab_outer {
        border: solid 0px #888888; /* Set the border color to medium gray */
        border-color: #0071C1;
        color: #0071C1;
        padding-left: 5px;
        margin-right: 3px;
        border-radius: 10px 10px 0 0; /* Add rounded corners to the top */
        transition: background-color 0.3s;
    }




.MyTabStyle .ajax__tab_tab {
    color: #0071C1;
}

.MyTabStyle .ajax__tab_header .ajax__tab_inner {
    border-color: #cccccc;
    color: #000;
    padding: 3px 10px 2px 0px;
    border: none;
}

.MyTabStyle .ajax__tab_hover .ajax__tab_outer {
    background-color: #eeeeee;
}

.MyTabStyle .ajax__tab_hover .ajax__tab_inner {
    color: #fff;
    border: none;
}

.MyTabStyle .ajax__tab_active .ajax__tab_outer {
    border-bottom-color: #fff;
    background-color: #F7F6F3;
    outline: none;
    border-radius: 10px 10px 0 0; /* Add rounded corners to the top */
    transition: background-color 0.3s;
}

.MyTabStyle .ajax__tab_active .ajax__tab_tab {
    color: #ff0000;
    border-color: #ffffff;
    outline: none;
}

.MyTabStyle .ajax__tab_body {
    
    font-size: 10pt;
    background-color: #fff;
    border-top-width: 0;
    border: none;
    border-top-color: #ffffff;
    color: #000;
}

      .ListBoxNoBordermedium {
    border: none;
    width: 300px; /* Fixed width prevents resizing */
    font-size: 16pt;
    font-weight: bold;
    border-radius: 5px;
    background: #f8f8f8;
    color: #555555;
    padding: 10px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin: 0 auto;
    display: block;
    overflow-y: hidden;
}



    .ListBoxNoBordermedium option:checked,
    .ListBoxNoBordermedium option:focus,
    .ListBoxNoBordermedium option:active {
        background-color: #e6f2ff !important; /* Light blue */
        color: #555555 !important; /* Brand blue text */
    }

.LinkButtonFinance {
    font-size: 14pt;
    color: #000;
}

/* Style for the button */
.new-messages-button {
    background-color: #f5f5f5; /* Very light gray background */
    padding: 7px 7px; /* Increase padding to make the button larger */
    border: none; /* Remove button border */
    border-radius: 5px; /* Rounded corners for the button */
    font-size: 12px; /* Increase font size */
    text-decoration: none; /* Remove underlines for link buttons */
    margin-top: 10px; /* Add margin on top of the button */
    position: relative; /* Required for positioning the badge */
}


     /* Style for the icon */
    .new-messages-button i {
        
        color: #fff; /* White text color for the icon */
        padding: 3px; /* Padding for the icon to create space */
        border-radius: 5px; /* Rounded corners for the icon (adjust as needed) */
        margin-right: 3px; /* Add margin to separate the icon from the text */
        font-size: 20px; /* Increase font size for the icon */
        position: relative; /* Required for positioning the badge */
    }

/* Style for the badge */
.badge {
    background-color: #f00; /* Red background color for the badge */
    color: #fff; /* White text color for the badge */
    padding: 2px 6px; /* Padding to create space around the badge */
    border-radius: 50%; /* Make the badge background a circle */
    font-size: 12px; /* Font size */
    position: absolute; /* Position the badge relative to its parent */
    top: -5px; /* Adjust the top position to place it in the top-right corner of the icon */
    right: -10px; /* Adjust the right position to place it in the top-right corner of the icon */
}

    /* Hide the badge when count is 0 */
    .badge:empty {
        display: none;
    }

/* Style for the word "Messages" */
.new-messages-button span:last-child {
    color: #000; /* Black text color for the word "Messages" */
}

/* Style for the search box */
.search-box {
    height: 30px; /* Adjust the height as needed */
    vertical-align: middle; /* Align content vertically to the middle */
    padding: 6px; /* Adjust padding as needed */
    /* Add any other styles for the search box */
}

/* Style for the search button */
.search-button {
    height: 30px; /* Match the same height as the search box */
    padding: 6px 16px; /* Adjust padding as needed */
    vertical-align: middle; /* Align content vertically to the middle */
    /* Add any other styles for the search button */
}
/* Style for unread messages (bold) */
.unread {
    font-weight: bold;
}
.read {
    font-weight:normal;
}

.search-input {
    width: 300px; /* Adjust the width as needed */
    height: 20px;
    padding: 5px;
    border: 1px solid #ccc; /* Soft gray border */
    border-radius: 4px; /* Rounded corners */
}

.search-button {
    background-color: #0071C1; /* Blue color for the button */
    color: #fff;
    padding: 5px 10px;
    border: 1px solid #007bff; /* Border color matches button color */
    border-radius: 4px; /* Rounded corners */
}


/* Style for the search button */
.btn.btn-primary.fas.fa-search {
    position: relative; /* Create a relative positioning context */
}

    /* Style for the search wand icon */
    .btn.btn-primary.fas.fa-search::after {
        content: '\f002'; /* Unicode for the FontAwesome search icon */
        font-family: FontAwesome; /* Use FontAwesome font family */
        font-size: 1em; /* Adjust the size of the icon as needed */
        position: absolute; /* Position the icon absolutely */
        right: 10px; /* Adjust the right spacing of the icon */
        top: 50%; /* Align the icon vertically in the middle */
        transform: translateY(-50%); /* Center the icon vertically */
    }


/* Custom styling for the dropdown */
.custom-dropdown {
    height: 35px; /* Adjust the height as needed */
    padding: 5px; /* Add padding for better appearance */
    font-size: 14px; /* Adjust font size as needed */
    padding: 5px;
    border: 1px solid #ccc; /* Soft gray border */
    border-radius: 5px; /* Rounded corners */

}

/* Style for the GridView with rounded corners */
.gridview-container {
    border: 1px solid #ddd; /* Add a border with a light gray color */
    border-radius: 5px; /* Rounded corners */
    overflow: hidden; /* Hide the overflowing content within the rounded corners */
    width: 70%;
}

.gridview-container100 {
    border: 1px solid #ddd;
    border-radius: 7px;
    overflow-x: auto;         /* Enable horizontal scroll */
    width: 100%;
    min-width: 900px;         /* Prevents squishing on small screens */
    font-family: 'Arial Narrow';
    font-size: 1em;
    color: #3b3b3b;
    background-color: #ffffff;
}

.gridview-container100-2 {
    border: 1px solid #ddd; /* Add a border with a light gray color */
    border-radius: 7px; /* Rounded corners */
    overflow: hidden; /* Hide the overflowing content within the rounded corners */
    width: 99%;
    
}


/* Sidebar styles and other styles for New Features page */

.modern-tabpanel {
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin: 10px;
}

    .modern-tabpanel strong {
        font-weight: bold;
        color: #333;
    }

    .modern-tabpanel ul {
        list-style-type: disc;
        padding-left: 20px;
    }

        .modern-tabpanel ul li {
            margin: 5px 0;
        }

    .modern-tabpanel a {
        text-decoration: none;
        color: #0071C1;
    }

.modern-tab-header {
    background-color: #007bff;
    color: #fff;
    height: 40px; /* Set the height to make the tabs twice as tall */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    border: none; /* Remove the border */
}

/* General list item styles */
.feature-list {
    list-style-type: none;
    padding-left: 0;
}
    
    .feature-list li {
        padding: 10px;
        margin-bottom: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .feature-list a {
        text-decoration: none;
        color: #333;
        display: block;
    }
    .feature-list span {
        font-size: 0.9em;
        color: #555;
    }

    .feature-list .date-label {
        font-size: 0.9em;
        color: #555;
    }



     /* Selected feature styles */
    .feature-list .selected {
        background-color: #eeeeee; /* Change this color to suit your design */
        font-weight: bold;
    }

.sidebar {
    background-color: #fff;
    padding: 10px;
    border: 0px solid #ccc;
    text-align: left;
}

.feature-details {
    margin-bottom: 20px;
    text-align: left;
}

    .feature-details h2 {
        font-size: 24px;
        margin-bottom: 10px;
        color: #333;
    }

    .feature-details p {
        font-size: 16px;
        line-height: 1.6;
        color: #555;
    }

    .feature-details ul {
        list-style-type: disc;
        margin-left: 20px;
    }

    .feature-details img {
        max-width: 100%;
        display: block;
        margin-top: 20px;
    }


/* Page loading overlay */
/* Add styles for the overlay */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1000;
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

p.loading-text {
    font-size: 16px; /* Adjust the font size as needed */
    color: #333; /* Set the text color */
    margin-top: 10px; /* Add some top margin for separation */
}




.hyperlink {
    background-color: transparent !important;
    border: none !important;
    color: black !important; /* Set the font color to black */
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}


.link-container {
    text-align: center;
    background-color: #eeeeee; /* Light green background color */
    padding: 10px; /* Adjust padding as needed */
    border-radius: 8px; /* Rounded corners */
    text-decoration: none;
}

    .link-container a {
        text-decoration: none;
        color: #333; /* Dark grey text color */
        font-size: 1rem; /* Adjust the font size as needed */
        display: inline-block; /* Ensures background applies to full width */
        padding: 8px 16px; /* Adjust padding as needed */
        border-radius: 8px; /* Rounded corners */
    }

        .link-container a:hover {
            background-color: #a3d3a3; /* Darker green on hover */
        }

/* Define the styles for the not-favorited state (light grey) */
.not-favorited {
    color: lightgrey; /* Change this to the desired light grey color */
}

/* Define the styles for the favorited state (red) */
.favorited {
    color: red; /* Change this to the desired red color */
}



.btn-remove-from-favorites {
    display: inline-block;
    background-color: white;
    color: black; /* Set text color to black */
    border: 2px solid #cccccc;
    border-radius: 15px;
    padding: 5px 15px;
    font-size: 12px;
    text-decoration: none; /* Remove underline from the link */
}

    .btn-remove-from-favorites:hover {
        background-color: black;
        color: white; /* Set text color to white on hover */
    }

    .btn-remove-from-favorites .fa-heart {
        color: red; /* Set heart icon color to red */
        margin-right: 5px;
    }

.btn-add-to-favorites {
    display: inline-block;
    background-color: white;
    color: black;
    border: 2px solid #cccccc;
    border-radius: 15px;
    padding: 5px 15px;
    font-size: 12px;
    text-decoration: none;

}

    .btn-add-to-favorites:hover {
        background-color: black;
        color: white;
    }

    .btn-add-to-favorites .fa-heart {
        color: red;
        margin-right: 5px; /* Adjust spacing between text and heart icon */
    }

.BackgroundRedBold {
    border-radius: 3px;
    border-style: solid;
    cursor: pointer;
    text-align: center;
    color: #ffffff;
    background-color: #FF0000;
   
    font-weight: bold;
}

.expandable-textbox {
        overflow-y: auto; /* Enable vertical scrollbar when needed */
        resize: none; /* Disable resizing of the textarea */
    }

.ButtonGrayImportPO {
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    color: #ffffff;
    background-color: #666666;
}




h2 {
    text-align: left; /* Aligns the heading text to the left */
    margin-left: 0; /* Removes any left margin */
}


/* Item styling */
.item {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; /* Fixed width */
    padding: 10px;
    text-align: center;
    margin-bottom: 20px; /* Adds space below each item */
    color: #333333; /* Dark grey color for text */
    text-decoration: none; /* Remove underline from hyperlink */
}

.item-date {
    color: #0076bc;
    font-weight: normal;
    margin-bottom: 10px;
}


/* General Styles - Veterinary apparel */

.vetapparel-col {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    margin: 1%;
}

/* Heading Styles */
.vetapparel-header, .vetapparel-brand-heading {
    color: #333333; /* Dark gray for headers */
    font-weight: bold;
    margin-bottom: 15px;
}
  

.vetapparel-brand-heading {
    font-size: 1.2em; /* Increase brand heading size */
}

/* Row Styling */
.vetapparel-row {
    padding: 20px 0;
    border-bottom: 1px solid #cccccc;
    
}

    .vetapparel-row:last-child {
        border-bottom: none;
    }


/* Utility */
.vetapparel-padding {
    padding: 10px 0;
}

.vetapparel-spacing {
    margin-bottom: 20px;
}

.vetapparel-border-light {
    border: 1px solid #eeeeee;
    border-radius: 5px;
}
.vetapparel-brand-heading a {
    color: #333333; /* Dark gray color */
    text-decoration: none; /* Remove underline */
}

    .vetapparel-brand-heading a:hover {
        color: #555555; /* Slightly lighter gray on hover */
    }
.vetapparel-icon {
    font-size: 2em; /* Increased size for larger icons */
    margin-right: 15px; /* Adjusted spacing between icon and text */
    color: #555555; /* Dark gray color for the icon */
}

.vetapparel-commonlink {
    text-decoration: none;
    color: #0066cc; /* Link color */
}

    .vetapparel-commonlink:hover {
        text-decoration: underline;
    }






/* Popup Styling */
.popupControl {
    background-color: #ffffff; /* White background */
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Padding around content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    max-width: 300px; /* Maximum width for the popup */
}

.popup-close {
    color: red;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    float: right;
    padding: 0;
}

.description-label {
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Ensure long words break if necessary */
    word-break: break-word; /* Break long unbreakable words */
    width: 100%; /* Ensure label respects the container width */
}

.eta-label {
    white-space: normal; /* Allow text to wrap */
    width: 200px; /* Width constraint for the note */
    word-wrap: break-word; /* Ensure long words break if necessary */
    word-break: break-word; /* Break long unbreakable words */
}


/* Style for the TextBox with rounded corners and shadow box */
.search-textbox {
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow box effect */
    border: 1px solid #ddd; /* Light border color */
    padding: 5px 10px; /* Padding inside the TextBox */
    font-family: Arial, sans-serif; /* Font style */
    font-size: 1em; /* Font size */
    color: #333; /* Text color */
    background-color: #fff; /* Background color */
}



body-links {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container-links {
    text-align: center;
    max-width: 600px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.h3-links {
    color: #555555;
}

.link-button-links {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    background-color: #dddddd;
    color: #0071C1;
    border-radius: 4px;
    font-size: 16px;
    transition: background-color 0.3s;
}

    .link-button-links:hover {
        background-color: #0056b3;
        color: #fff;
    }



.banner-info {
    background-color: #007bff;
    color: white;
    padding: 5px;
    text-align: center;
    border-radius: 8px;
    margin: 10px auto;
    max-width: 700px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

    .a-banner {
        text-decoration: none;
        display: inline-block;
        background-color: white;
        color: #007bff;
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 16px;
        font-weight: bold;
        transition: background-color 0.3s, color 0.3s;
    }

        .a-banner:hover {
            background-color: #0056b3;
            color: white;
        }


.tablestatement {
    width: 80%;
    border-collapse: collapse;
}

    .tablestatement th, .table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .tablestatement th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

.help-link {
    font-size: 20px; /* Increase size */
    color: #c0c0c0; /* Make it red */
    text-decoration: none;
    margin-left: 8px;
}

    .help-link:hover {
        color: #c0c0c0; /* Darker red on hover */
    }

/* Common style for report buttons */
.ReportButton {
    border-radius: 8px;
    cursor: pointer;
    background-color: #cde6c7; /* Light green background color */
    color: #333; /* Dark grey text color */
    border: none;
    height: 75px; /* Adjust the height as needed */
    width: 300px;
    font-size: 1rem; /* Adjust the font size as needed */
    text-align: center;
    white-space: normal; /* Allow text to wrap */
}


.ButtonReports2 {
    background-color: #E9DDCD; /* Light grey background color */
}

.ButtonReports3 {
    background-color:lightblue; /* Light grey background color */
}

/* Hover effect for all report buttons */
.ReportButton:hover {
    background-color: #a3d3a3; /* Darker green on hover */
}

.reset-link {
    color: #c0c0c0; /* Dark gray text color */
    text-decoration: none; /* Remove underline */
    font-size: 14px; /* Adjust font size */
    padding: 5px 10px; /* Adjust padding if needed */
    cursor: pointer; /* Makes it clickable */
}

    .reset-link:hover {
        color: #0071C1; /* Change to blue or any color on hover */
        text-decoration: underline; /* Add underline on hover */
    }


    .reset-link:disabled {
        color: #cccccc; /* Light gray text for disabled state */
        cursor: not-allowed; /* Change cursor to indicate it's disabled */
    }


.filter-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.filter-textbox {
    width: 100%;
    height: 40px; /* Increased from 30px to 40px */
    box-sizing: border-box;
    padding-right: 40px; /* space for the reset button */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow box effect */
    border: 1px solid #ddd; /* Light border color */
    font-family: Arial, sans-serif; /* Font style */
    font-size: 1em; /* Font size */
    color: #333; /* Text color */
    background-color: #fff; /* Background color */
    padding: 5px 10px; /* Padding inside the TextBox */
}

.reset-link-inside {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    z-index: 2;
    text-decoration: none;
}

    .reset-link-inside:hover {
        color: #333;
        text-decoration: underline;
    }



.details-btn {
    display: inline-block;
    padding: 6px 18px;
    background: #E9DDCD;
    color: #555555 !important;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 1em;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.details-btn:hover, .details-btn:focus {
    background: #0071C1;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}




.order-details-grid {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 6px;
    margin-bottom: 30px;
    font-size: 11px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    width: 100%;
    table-layout: auto;
    overflow-x: auto;
}

.order-details-grid th, .order-details-grid td {
    padding: 4px 6px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-details-grid th {
    background: #eeeeee;
    font-weight: bold;
    border-bottom: 1px solid #e0e0e0;
}

.order-details-grid tr:nth-child(even) {
    background: #f4f4f4;
}

.order-details-grid tr:hover {
    background: #e9f5f1;
}


/* Filter Panel Container */
.order-filter-panel {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 18px 24px 10px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: inline-block;
    min-width: 400px;
    max-width: 700px;
}

    /* Label styling */
    .order-filter-panel label {
        font-weight: 600;
        margin-right: 8px;
        color: #333;
        margin-bottom: 6px;
        display: inline-block;
    }

/* Input with icon wrapper */
.input-with-icon {
    position: relative;
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 10px;
}

/* Textbox styling */
.order-filter-input {
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    padding: 6px 32px 6px 10px; /* right padding for icon */
    width: 140px;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

    .order-filter-input:focus {
        border-color: #0071c1;
        outline: none;
    }

/* Calendar icon button styling */
.calendar-icon-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #0071c1;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    line-height: 1;
}

    .calendar-icon-btn:focus {
        outline: none;
        color: #005fa3;
    }

    .calendar-icon-btn i {
        pointer-events: none;
    }

/* Filter button styling */
.order-filter-btn {
    background: #0071c1;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 7px 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    margin-left: 16px;
    margin-top: 8px;
    font-size: 1em;
}

    .order-filter-btn:hover,
    .order-filter-btn:focus {
        background: #005fa3;
    }

/* Error message styling */
.order-filter-panel .error-message {
    color: #FF0000;
    font-weight: 500;
    margin-top: 8px;
    display: block;
}

.ButtonSearchOutline {
    background: #fff;
    color: #0071C1;
    border: 2px solid #0071C1;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

    .ButtonSearchOutline:hover,
    .ButtonSearchOutline:focus {
        background: #0071C1;
        color: #fff;
    }

/* Responsive adjustments */
@media (max-width: 600px) {
    .order-filter-panel {
        min-width: 0;
        width: 98%;
        padding: 12px 6px 8px 6px;
    }

    .order-filter-input {
        width: 95vw;
        max-width: 98%;
        margin-bottom: 8px;
    }

    .input-with-icon {
        width: 100%;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .order-filter-btn {
        width: 100%;
        margin-left: 0;
    }
}

/* Invoices page */
.invoice-panel {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(60,72,88,0.07);
    padding: 18px 24px;
    margin-bottom: 20px;
}

.invoice-listbox-label {
    font-weight: bold;
    color: #1976d2;
    margin-bottom: 6px;
    display: block;
    font-size: 1.05em;
}

.invoice-listbox {
    width: 100%;
    max-width: 400px;
    min-height: 50px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1rem;
    background: #f8f9fa;
    border: 1px solid #bfc9d1;
    border-radius: 6px;
    padding: 8px;
    color: #333;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(60,72,88,0.07);
}

    .invoice-listbox option {
        padding: 6px 10px;
        border-bottom: 1px solid #e9ecef;
    }

        .invoice-listbox option:hover, .invoice-listbox option:focus {
            background: #e3f2fd;
            color: #1976d2;
        }

.ButtonDownload {
    border-radius: 5px;
    background-color: #1976d2;
    color: #fff;
    font-weight: bold;
    border: none;
    padding: 8px 24px;
    font-size: 1em;
    box-shadow: 0 2px 8px rgba(60,72,88,0.07);
    transition: background 0.2s;
}

    .ButtonDownload:hover, .ButtonDownload:focus {
        background-color: #125ea2;
        color: #fff;
    }

.shadow-box {
    background-color: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 10px;
    margin: 12px 0;
}

.styled-gridview {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 1em;
    color: #2d2d2d;
    overflow: hidden;
    margin-bottom: 20px;
}

    /* Header */
    .styled-gridview th {
        background: linear-gradient(90deg, #e0e0e0 0%, #f5f5f5 100%);
        color: #333;
        font-weight: 600;
        font-size: 1.08em;
        border-bottom: 2px solid #cccccc;
       
        text-align: left;
        letter-spacing: 0.03em;
        text-shadow: 0 1px 2px rgba(255,255,255,0.2);
    }

        .styled-gridview th:first-child {
            border-top-left-radius: 7px;
        }

        .styled-gridview th:last-child {
            border-top-right-radius: 7px;
        }
.styled-gridview th.grid-header-center {
    text-align: center !important;
}

    /* Data rows */
    .styled-gridview td {
       
        border-bottom: 1px solid #e0e0e0;
        background-color: #fff;
        font-size: 1em;
        color: #2d2d2d;
        vertical-align: middle;
        transition: background 0.2s, color 0.2s;
        letter-spacing: 0.01em;
    }

    /* Remove border from last row */
    .styled-gridview tr:last-child td {
        border-bottom: none;
    }

        /* Rounded corners for bottom */
        .styled-gridview tr:last-child td:first-child {
            border-bottom-left-radius: 7px;
        }

        .styled-gridview tr:last-child td:last-child {
            border-bottom-right-radius: 7px;
        }

   /* === Light gray row hover for GridView using styled-gridview === */
   .styled-gridview tbody tr:hover td {
       background-color: #f5f7fa; /* very light gray */
   }

   /* Keep header unaffected */
   .styled-gridview thead tr:hover th {
       background: inherit;
   }

   /* If alternating rows have a different bg, ensure hover wins */
   .styled-gridview tbody tr:nth-child(even):hover td {
       background-color: #f5f7fa;
   }

/* Pager styling (optional, for consistency) */
.GridPager {
    background-color: #f5f5f5;
    color: #666;
    font-weight: 600;
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #ddd;
}

    .GridPager a {
        color: #0071C1;
        padding: 4px 10px;
        margin: 0 2px;
        border-radius: 4px;
        text-decoration: none;
        transition: background 0.2s, color 0.2s;
    }

        .GridPager a:hover, .GridPager span {
            background-color: #e0e0e0;
            color: #222;
        }

.blue-label {
    color: #fff; /* White text for contrast */
    background-color:#c0c0c0; /* Your blue shade */
    padding: 4px 10px; /* Optional: add some padding */
    border-radius: 4px; /* Optional: rounded corners */
    display: inline-block; /* Ensures background fits text */
    font-weight:normal; /* Optional: makes it stand out */
}

/* Short-dated expiry badge */
.badge-shortdated {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #b12f1f;
    background: linear-gradient(90deg,#fff7f7 0%, #ffe5e5 100%);
    border: 1px solid #f3b3aa;
    padding: 3px 8px 3px 6px;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    white-space: nowrap;
}

    .badge-shortdated i {
        font-size: 12px;
        line-height: 1;
        color: #d64432;
    }

    .badge-shortdated:hover {
        background: linear-gradient(90deg,#ffecec 0%, #ffd6d6 100%);
        border-color: #ee978b;
        text-decoration: none;
    }

    .badge-shortdated:focus-visible {
        outline: 2px solid #d64432;
        outline-offset: 2px;
    }

.short-dated-wrapper {
    margin-top: 4px;
}

/* NOTE: Enhanced .lblmsg retained below (do not redefine earlier) */
.lblmsg {
    display: block;
    margin: 12px 0 8px 0;
    padding: 10px 18px;
    background: #fff4f4;
    border-left: 5px solid #e74c3c;
    color: #a94442;
    font-size: 1em;
    font-family: Arial, sans-serif;
    border-radius: 4px;
    min-height: 32px;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

    .lblmsg:empty {
        display: none;
    }

    .lblmsg .fa {
        margin-right: 8px;
    }

/* Item description preview (max 20 lines) */
.item-desc-preview-wrapper {
    position: relative;
    font-family: Arial, sans-serif;
}

.item-desc-preview {
    background: #ffffff;
    border: 1px solid #d6dadd;
    border-radius: 6px;
     padding: 6px 12px 16px 12px;
    font-size: 12px;
    line-height: 1.35;
    color: #24292f;
    max-height: calc(10 * 1.35em); /* 20 lines */
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,.05);
   

    
}

  
.item-desc-expand {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #0071C1;
    text-decoration: none;
}

    .item-desc-expand:hover {
        text-decoration: underline;
    }

/* Modal for full description */
.item-desc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1100;
}

.item-desc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    max-width: 92vw;
    max-height: 80vh;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    z-index: 1101;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.item-desc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f7fa;
    padding: 10px 14px;
    border-bottom: 1px solid #e1e4e8;
}

.item-desc-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: #2d3740;
}

.item-desc-modal-close {
    background: #ddd;
    border: 1px solid #c2c7cc;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 15px;
    cursor: pointer;
    line-height: 1;
}

    .item-desc-modal-close:hover {
        background: #cacaca;
    }

.item-desc-modal-body {
    padding: 14px 16px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.item-desc-modal-footer {
    padding: 8px 14px 12px;
    text-align: right;
    background: #f5f7fa;
    border-top: 1px solid #e1e4e8;
}

.item-desc-modal-btn {
    background: #0071C1;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .item-desc-modal-btn:hover {
        background: #005fa3;
    }

/* Order header chips */
.order-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin: 8px 0 16px 0;
}

.order-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 16px;
    background: #f3f6fb; /* softer background */
    border: 1px solid #cfd7e3; /* clearer edge */
    box-shadow: 0 1px 2px rgba(0,0,0,0.06); /* subtle depth */
    font-size: 13px;
    line-height: 1.2;
}

.order-chip__label {
    background: #e7eef9;
    color: #1f2a44;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
}

.order-chip__value {
    color: #1a1a1a;
}

/* Optional: compact mode on smaller screens */
@media (max-width: 640px) {
    .order-chip {
        padding: 5px 8px;
        gap: 4px;
        font-size: 12px;
    }
}




/* Templates */
.template-badge {
    display: inline-block;
    background: #007bff;
    color: #fff;
    border-radius: 12px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    min-width: 22px;
    text-align: center;
    vertical-align: middle;
    margin-left: 6px;
}

/* === Template Bar (consolidated) === */
.template-bar {
    /* component tokens */
    --tpl-bg: #f8fafc;
    --tpl-border: #d9e2ec;
    --tpl-accent: #2563eb;
    --tpl-danger: #b91c1c;

    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 20px;
    padding: 14px 16px 12px 20px; /* left padding clears accent */
    border: 1px solid var(--tpl-border);
    border-radius: 6px;
    background: linear-gradient(145deg, #ffffff 0%, #f5f8fb 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    font-size: 12px;
    transition: box-shadow .25s, border-color .25s;
}

.template-bar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    background: linear-gradient(180deg,#0071C1 0%, #0a5da0 55%, #094a80 100%);
    box-shadow: 1px 0 0 rgba(255,255,255,.35) inset, 0 0 0 1px rgba(0,0,0,.06);
    pointer-events: none;
}

.template-bar--elevated:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
    border-color: #c3ced9;
}

/* Header */
.template-bar__header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.template-bar__title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.template-bar__title i { color: var(--tpl-accent); font-size: 15px; }

.template-bar__status { margin-left: auto; font-size: 11px; font-weight: 500; color: #475569; }

/* Body rows */
.template-bar__body { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.template-bar__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; }

.template-bar__row--actions {
    justify-content: flex-start;
    border-top: 1px dashed #e2e8f0;
    padding-top: 10px;
    margin-top: 4px;
}

/* Inputs */
.template-bar__select,
.template-bar__textbox {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    min-height: 28px;
}

.template-bar__select:focus,
.template-bar__textbox:focus {
    outline: 2px solid rgba(37,99,235,.35);
    outline-offset: 1px;
}

/* Buttons */
.template-bar__btn {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
    text-decoration: none;
}

.template-bar__btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.template-bar__btn:disabled { opacity: .55; cursor: not-allowed; }

.template-bar__btn--danger { border-color: var(--tpl-danger); color: var(--tpl-danger); }
.template-bar__btn--danger:hover { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; }

.template-bar__primary {
    background: var(--tpl-accent);
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.template-bar__primary:hover { background: #1e4fb3; }

/* Feedback */
.template-bar__feedback {
    flex: 0 0 100%;
    margin-top: 4px;
    font-size: 11px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #b7d4f5;
    padding: 4px 6px;
    border-radius: 4px;
}
.template-bar__feedback:empty { display: none !important; }

/* Badge */
.template-badge {
    background: #2563eb;
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 12px;
    font-weight: 600;
    display: inline-block;
    min-width: 26px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* High contrast */
.high-contrast .template-bar { background: #ffffff; border-color: #0f172a; box-shadow: none; }
.high-contrast .template-bar__title i { color: #0f172a; }
.high-contrast .template-bar__primary { background: #0f172a; }

/* Block layout variant */
#templateBar.template-bar { display: block; width: 100%; box-sizing: border-box; }
#templateBar .template-bar__controls > * { display: inline-block; vertical-align: middle; margin: 0 6px 4px 0; }
#templateBar .template-bar__title { margin-right: 8px; }

/* Legacy feedback (explicit block) */
#templateBar .template-bar-feedback {
    display: block;
    width: 100%;
    clear: both;
    margin-top: 6px;
    padding: 6px 10px;
    box-sizing: border-box;
    background: #fde4e4;
    border: 1px solid #f4bcbc;
    color: #7d1d1d;
    font-weight: 600;
    border-radius: 4px;
}
#templateBar .template-bar-feedback:empty { display: none; }

/* FINAL override helpers (only if earlier duplicates leak in) */
#templateBar.template-bar { display: block !important; }
#templateBar.template-bar * { box-sizing: border-box; }
#templateBar.template-bar > * { display: inline-block; vertical-align: middle; }
#templateBar .template-bar-break { display: block !important; flex: 0 0 100% !important; width: 100% !important; height: 0; line-height: 0; margin: 0; padding: 0; }

/* Responsive */
@media (max-width: 760px) {
    .template-bar { padding: 12px 16px 12px 16px; gap: 6px; }
    .template-bar__title { flex: 0 0 100%; margin-bottom: 2px; }
    .template-bar__select, .template-bar__textbox { min-width: 150px; flex: 1 1 150px; }
    .template-bar__btn { padding: 4px 8px; }
    .template-bar__primary { order: 99; width: 100%; text-align: center; }
}
/* Responsive tweaks */
@media (max-width: 900px) {
    .search-panel__row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-panel__actions {
        margin-left: 0;
        justify-content: flex-start;
    }
}

.template-row.highlight {
    background-color: #fff3cd !important;
    outline: 2px solid #ff9800;
    transition: background-color 1.2s ease;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    text-decoration: none;
font-size: 10px;
}

.btn-action--blue {
    background-color: #2b6cb0; /* blue */
    color: #ffffff;
    border-color: #2b6cb0;
}

    .btn-action--blue:hover {
        background-color: #2c5282;
        border-color: #2c5282;
    }

.btn-action--gray {
    background-color: #e2e8f0; /* gray */
    color: #1a202c;
    border-color: #cbd5e0;
}

    .btn-action--gray:hover {
        background-color: #cbd5e0;
        border-color: #a0aec0;
    }

/* === Add To Template button (cleaned) === */
.btn-add-template {
    /* uses global tokens; keep component-local overrides if needed */
    --btn-bg: #0071C1;
    --btn-bg-hover: #005fa3;
    --btn-bg-active: #004b82;
    --btn-border: #0064ac;
    --btn-shadow: 0 2px 6px rgba(0,0,0,.15);
    --btn-shadow-hover: 0 4px 10px rgba(0,0,0,.22);

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 8px;
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: #fff;
    font: 600 14px/1 Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    box-shadow: var(--btn-shadow);
    transition: background .18s, box-shadow .18s, transform .18s, border-color .18s;
}

.btn-add-template i {
    font-size: 16px;
    line-height: 1;
    opacity: .95;
    transition: transform .25s;
}

/* States */
.btn-add-template:hover,
.btn-add-template:focus {
    background: var(--btn-bg-hover);
    box-shadow: var(--btn-shadow-hover);
    outline: none;
    text-decoration: none;
}

.btn-add-template:active {
    background: var(--btn-bg-active);
    transform: translateY(1px);
    box-shadow: var(--btn-shadow);
}

.btn-add-template:focus-visible {
    outline: 3px solid #c9e5f9;
    outline-offset: 2px;
}

/* Disabled */
.btn-add-template[disabled],
.btn-add-template:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Loading */
.btn-add-template.loading {
    pointer-events: none;
    opacity: .75;
}

.btn-add-template.loading::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.55);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnSpin .75s linear infinite;
    margin-left: 4px;
}

/* Modernized search panel */
.search-panel-modern {
    background: #f4f6f8;
    border: 1px solid #e1e5e9;
    padding: 12px 16px 10px;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    margin-bottom: 12px;
}

.search-panel__primary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-panel__row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.search-panel__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.search-panel__field--grow {
    flex: 1 1 300px;
}

.search-panel__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #37465a;
}

.search-input {
    height: 34px;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #c8d0d7;
    border-radius: 4px;
    width: 100%;
    background: #ffffff;
}

    .search-input:focus,
    .search-select:focus {
        outline: 2px solid #0071C1;
        outline-offset: 1px;
    }

.search-select {
    height: 34px;
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid #c8d0d7;
    background: #ffffff;
    border-radius: 4px;
    width: 100%;
}

.search-panel__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.search-panel__filters {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
    gap: 12px;
    align-items: end;
}

.filter-group select[disabled] {
    opacity: .55;
}

.search-panel__secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn {
    display: inline-block;
    cursor: pointer;
    font-size: 13px;
    padding: 6px 14px;
    line-height: 20px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}

.btn--primary {
    background: #0071C1;
    color: #fff;
    border-color: #0064ac;
    font-weight: 600;
}

    .btn--primary:hover {
        background: #005c99;
    }

.btn--flat {
    background: #ffffff;
    color: #0071C1;
    border: 1px solid #c8d0d7;
}

    .btn--flat:hover {
        background: #eef4fa;
    }

.search-panel__feedback {
    font-size: 12px;
    min-height: 16px;
    color: #d03c30;
}

/* Reduce space around old legacy elements that remain */
.search-string-panel {
    margin-bottom: 8px !important;
}

.search-count-label {
    margin-left: 8px;
}

/* Template bar adjustments for tighter look if desired */
.template-bar {
    margin-top: 4px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
}

.template-bar__select,
.template-bar__textbox {
    height: 30px !important;
    font-size: 13px;
}

/* Responsive tweaks */
@media (max-width: 900px) {
    .search-panel__row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-panel__actions {
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* --- Adjusted layout to prevent overlap between Search textbox and Search Type dropdown --- */

/* Ensure each field is a flex item with controlled growth */
.search-panel__row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* Base field sizing */
.search-panel__field {
    flex: 0 1 180px;
    min-width: 170px;
    position: relative;
}

/* Search textbox gets priority width */
.search-panel__field--grow {
    flex: 1 1 320px;
    min-width: 260px;
}

/* Avoid overlap caused by legacy class widths */
.search-panel-modern .search-input,
.search-panel-modern .search-select {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
}

/* Explicit height to align bottoms cleanly */
.search-input,
.search-select {
    height: 34px;
    line-height: 20px;
}

/* Keep actions on far right but prevent squeezing other inputs */
.search-panel__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
}

/* If very narrow, stack cleanly */
@media (max-width: 640px) {
    .search-panel__row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-panel__actions {
        justify-content: flex-start;
    }
}

/* Prevent autocomplete list from forcing width overflow */
.autocomplete_completionListElement {
    max-width: 100%;
    box-sizing: border-box;
}

/* Optional: soften label spacing */
.search-panel__label {
    margin-bottom: 2px;
}

/* Remove any stray inline widths from legacy .custom-dropdown that may cause collision */
.search-panel-modern .custom-dropdown {
    width: 100% !important;
}

/* Guard against overlap if outer container shrinks */
.search-panel-modern {
    min-width: 0;
}

/* Make vendor dropdown span full width on its own line */
.search-panel__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.filter-group {
    flex: 0 1 160px;
    min-width: 160px;
}

.filter-group--full {
    flex: 0 0 100%;
    min-width: 100%;
    margin-top: 4px;
}

@media (max-width:640px) {
    .filter-group {
        flex: 1 1 45%;
    }

    .filter-group--full {
        flex: 0 0 100%;
    }
}

/* === Stretch first 3 filter dropdowns horizontally, vendor full width on its own line === */
.search-panel__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group--stretch {
    flex: 1 1 calc((100% - 24px)/3); /* three columns, subtract gaps */
    min-width: 220px;
}

.filter-group--full {
    flex: 0 0 100%;
    min-width: 100%;
    margin-top: 4px;
}

.search-select {
    width: 100% !important;
}

/* Responsive: stack gracefully */
@media (max-width: 960px) {
    .filter-group--stretch {
        flex: 1 1 48%; /* two per row */
    }
}

@media (max-width: 640px) {
    .filter-group--stretch {
        flex: 1 1 100%; /* each full width */
    }
}

/* --- Vendor toggle layout --- */
.vendor-toggle {
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
    margin-top: 4px;
}

.vendor-btn {
    background: #ffffff;
    color: var(--color-blue);
    border: 1px solid #c8d0d7;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .18s, color .18s;
}

    .vendor-btn:hover {
        background: #eef4fa;
    }

.vendor-dd-wrapper {
    display: none; /* hidden by default */
    position: relative;
    min-width: 260px;
}

    .vendor-dd-wrapper.show {
        display: inline-block; /* shown when toggled */
    }

    .vendor-dd-wrapper .search-panel__label {
        margin-bottom: 4px;
        display: block;
    }

.vendor-dd {
    width: 100% !important;
    min-width: 260px;
}

@media (max-width:640px) {
    .vendor-toggle {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .vendor-dd-wrapper.show {
        display: block;
        width: 100%;
    }

    .vendor-dd {
        min-width: 100%;
    }
}

/* Vendor toggle block */
.vendor-toggle {
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
    margin-top: 4px;
}

.vendor-btn {
    background: #ffffff;
    color: var(--color-blue);
    border: 1px solid #c8d0d7;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .18s, color .18s;
}

    .vendor-btn:hover {
        background: #eef4fa;
    }

.vendor-dd-wrapper {
    display: none;
    min-width: 260px;
}

    .vendor-dd-wrapper.show {
        display: inline-block;
    }

    .vendor-dd-wrapper .search-panel__label {
        margin-bottom: 4px;
        display: block;
    }

.vendor-dd {
    width: 100% !important;
    min-width: 260px;
}

@media (max-width:640px) {
    .vendor-toggle {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .vendor-dd-wrapper.show {
        display: block;
        width: 100%;
    }

    .vendor-dd {
        min-width: 100%;
    }
}
/* Inline Vendor Toggle */
.vendor-toggle-inline {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.vendor-btn {
    background: #ffffff;
    color: var(--color-blue);
    border: 1px solid #c8d0d7;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .18s, color .18s;
}

    .vendor-btn:hover {
        background: #eef4fa;
    }

.vendor-dd-wrapper {
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
}

    .vendor-dd-wrapper.show {
        display: flex;
    }

.vendor-dd {
    width: 100% !important;
}

@media (max-width:700px) {
    .vendor-toggle-inline {
        flex: 1 1 100%;
    }

    .vendor-dd-wrapper.show {
        margin-top: 6px;
    }
}
/* Inline vendor + template dropdown sizing */
.vendor-group,
.templates-group {
    flex: 1 1 260px; /* share row if width allows */
    min-width: 240px;
}

@media (max-width: 960px) {
    .vendor-group,
    .templates-group {
        flex: 1 1 48%; /* two per row */
    }
}

@media (max-width: 640px) {
    .vendor-group,
    .templates-group {
        flex: 1 1 100%; /* stack on narrow screens */
    }
}

/* Tight bounds + safe wrapping for the search summary panel */
.search-string-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 6px 10px 8px;
    margin: 8px 0 14px;
    background: #fafafa;
    border: 1px solid #e2e5e8;
    border-radius: 6px;
    overflow: hidden; /* prevent visual spill */
}

    .search-string-panel .search-string-label,
    .search-string-panel .search-count-label {
        display: block;
        margin: 0 0 6px 0;
        font-size: 13px;
        line-height: 1.35;
        overflow-wrap: break-word; /* modern wrap */
        word-break: break-word; /* legacy fallback */
        max-width: 100%;
    }

  
    /* If lblmsg (used on count) adds extra outer margins, neutralize inside panel */
    .search-string-panel .lblmsg {
        margin: 0;
        padding: 8px 12px;
        box-sizing: border-box;
    }


/* Modern cart button */
.btn-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border-radius: 6px;
    background-color: #be8842;
    color: #ffffff;
    font: 600 14px/1 Arial, sans-serif;
    text-decoration: none;
    border: 1px solid #b57d34;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    cursor: pointer;
    position: relative;
    transition: background .18s, box-shadow .18s, transform .18s;
}

    .btn-cart:hover,
    .btn-cart:focus {
        background-color: #be8842;
        box-shadow: 0 3px 10px rgba(0,0,0,.20);
        text-decoration: none;
    }

    .btn-cart:active {
        transform: translateY(1px);
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }

    .btn-cart[disabled],
    .btn-cart:disabled {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
    }

.btn-cart__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 1;
}

.btn-cart__text {
    white-space: nowrap;
}

/* High contrast (optional if body gets .high-contrast) */
.high-contrast .btn-cart {
    background: #be8842;
    border-color: #815b23;
}

    .high-contrast .btn-cart:hover {
        background: #c89244;
    }

/* Force loader above any page stacking contexts */
#tplLoader.tpl-new-loader {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2147483647; /* very high */
    width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#tplLoader .spin {
    width: 74px;
    height: 74px;
    border: 10px dotted #b8c4cc;
    border-radius: 50%;
    animation: tplSpin 1.2s linear infinite;
}

@keyframes tplSpin {
    to {
        transform: rotate(360deg);
    }
}

.icon-heart-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff4d4d ; /* circle fill */
  color: #ffffff;       /* default icon color */
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  line-height: 1;
  vertical-align: middle;
}



    /* Ensure FA heart inherits the white color and scales inside */
    .icon-heart-circle i.fa-heart {
        color: inherit !important;
        font-size: 12px;
        display: inline-block;
    }


/* ====== Template Items (rptTemplateItems) Styling ====== */

/* Container UL */
#templateList.sortable-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* Individual row */
.template-row {
    display: grid;
    grid-template-columns: 30px 30px 110px 1fr 120px 90px auto;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #d6dadd;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 6px;
    font: 13px/1.35 Arial, sans-serif;
    position: relative;
    transition: background .15s ease, box-shadow .15s ease, border-color .15s;
}

    .template-row:hover {
        background: #f5faff;
        border-color: #c2ccd6;
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
    }

    .template-row:focus-within {
        outline: 2px solid #0071C1;
        outline-offset: 2px;
    }

    /* Selected (checkbox checked) highlight */
    .template-row.selected {
        background: #eef7ff;
        border-color: #b7d4ee;
    }

    /* Marked for deletion state */
    .template-row.marked-delete {
        background: #fff4f4;
        border-color: #f3c2bf;
        opacity: .85;
    }

/* Checkbox column */
.li-select {
    margin: 0;
    cursor: pointer;
    transform: translateY(-1px);
}

/* Code column */
.template-row .item-code {
    font-weight: 600;
    letter-spacing: .4px;
    color: #2d3b45;
    white-space: nowrap;
}

/* Description flex */
.template-row .item-desc {
    color: #304652;
    overflow-wrap: anywhere;
    min-width: 140px;
}

/* Vendor */
.template-row .item-vendor {
    font-size: 11px;
    color: #6a7782;
    white-space: nowrap;
}

/* Price */
.template-row .li-price {
    font-size: 12px;
    font-weight: 600;
    color: #0f3552;
    text-align: right;
    white-space: nowrap;
}

/* Move buttons group */
.row-move-buttons {
    display: inline-flex;
    gap: 4px;
}

.move-btn {
    background: #f1f5f9;
    border: 1px solid #c7d1da;
    color: #2e536d;
    font-size: 11px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .12s;
}

    .move-btn:hover {
        background: #e2ecf4;
        border-color: #b6c4cf;
    }

    .move-btn:active {
        transform: translateY(1px);
    }

/* Remove link */
.li-remove {
    background: none;
    border: none;
    padding: 2px 4px;
    color: #c02a22;
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    transition: background .15s, color .15s;
}

    .li-remove:hover {
        background: #ffe5e3;
        color: #991e17;
        text-decoration: underline;
    }

/* Compact (mobile) adjustments */
@media (max-width: 780px) {
    .template-row {
        grid-template-columns: 26px 26px 80px 1fr 70px 60px auto;
        padding: 6px 10px;
        font-size: 12px;
    }

        .template-row .item-vendor {
            display: none;
        }

        .template-row .li-price {
            font-size: 11px;
        }
}

/* Super narrow: stack parts */
@media (max-width: 520px) {
    .template-row {
        grid-template-columns: 24px 24px 70px 1fr auto;
        grid-auto-rows: auto;
    }

        .template-row .li-price,
        .template-row .row-move-buttons {
            justify-self: end;
        }

        .template-row .item-vendor {
            display: none;
        }
}

/* Accessible focus on interactive elements */
.template-row a.move-btn:focus,
.template-row .li-remove:focus,
.template-row .move-btn:focus,
.template-row .li-select:focus {
    outline: 2px solid #0071C1;
    outline-offset: 2px;
}

/* Drag (if later enabled) */
.template-row.dragging {
    opacity: .6;
    background: #e9f4ff;
    border-color: #82bce8;
}

/* Utility classes for dynamic scripting */
.hide {
    display: none !important;
}

.fade-out {
    animation: fadeOut .35s forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        height: 0;
        margin: 0;
        padding: 0;
    }
}

.template-editor-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.template-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.status-label {
    font-weight: bold;
    color: #0b5;
    min-height: 20px;
}

.template-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.panel {
    flex: 1 1 480px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0f3f6;
    padding: 8px 10px;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
}

.panel-header-actions {
    display: flex;
    gap: 6px;
}

.panel-body {
    padding: 8px 10px;
    overflow: auto;
}

.filter-box, .add-box, .rename-box {
    width: 220px;
    max-width: 100%;
}

tpl-dd {
    min-width: 220px;
}

.btn {
    padding: 5px 12px;
    cursor: pointer;
    border: 1px solid #777;
    background: #e6e6e6;
    border-radius: 4px;
    font-size: 13px;
}

.btn-primary {
    background: #0071c1;
    color: #fff;
    border-color: #0060a5;
}

.btn-danger {
    background: #c62828;
    color: #fff;
    border-color: #ab2020;
}

.btn-secondary {
    background: #555;
    color: #fff;
    border-color: #444;
}

.btn-small {
    padding: 4px 8px;
    font-size: 12px;
}

.btn-wide {
    margin-top: 6px;
    width: 100%;
}

/* ==== FIX: Restore comfortable column widths for template items (override) ====
   Placed at end to override earlier narrower grid settings only. */
#templateList .template-row {
    grid-template-columns:
        60px                  /* thumb */
        120px                 /* item code */
        minmax(320px,1fr)     /* description flex */
        160px                 /* vendor */
        100px                 /* price */
        70px                  /* move buttons */
        40px;                 /* checkbox */
}

/* Medium (before vendor hides) */
@media (max-width: 1100px) {
    #templateList .template-row {
        grid-template-columns:
            60px 115px minmax(280px,1fr) 150px 95px 70px 40px;
    }
}

/* Existing rule hides vendor at <=780px; keep generous spacing for remaining cols */
@media (max-width: 780px) {
    #templateList .template-row {
        grid-template-columns:
            60px              /* thumb */
            105px             /* code */
            minmax(230px,1fr) /* description */
            95px              /* price */
            64px              /* move */
            40px;             /* checkbox */
    }
}

/* Narrow phones */
@media (max-width: 520px) {
    #templateList .template-row {
        grid-template-columns:
            56px              /* thumb */
            92px              /* code */
            minmax(160px,1fr) /* description */
            82px              /* price */
            56px              /* move */
            36px;             /* checkbox */
    }
}

/* Circular icon badge for sticky note (yellow pad) */
.note-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffd84a; /* yellow pad */
    color: #2d2d2d; /* dark icon for contrast */
    border: 1px solid #d4a71a; /* slightly darker yellow border */
    vertical-align: middle;
    text-decoration: none;
}

    .note-circle i {
        font-size: 12px;
        line-height: 1;
        color: inherit; /* ensure icon uses dark color */
    }

.note-link .note-circle {
    margin-left: 4px;
}

.btn--primary {
    background: #0071C1;
    color: #fff;
    border-color: #0064ac;
    font-weight: 600;
}

    .btn--primary:hover {
        background: #005c99;
    }







/* ============================
 Enhanced Clinic Note Preview Card
 ============================ */
.note-preview-bar {
 position: relative;
 display: flex;
 align-items: flex-start;
 gap: 16px;
 padding: 14px 18px 16px 22px;
 background: linear-gradient(135deg,#fafafa 0%, #f1f4f9 65%, #eef3ff 100%);
 border: 1px solid #d1d7de;
 border-radius: 12px;
 box-shadow: 0 4px 14px rgba(0,0,0,.08);
 margin: 16px 0 24px;
 transition: box-shadow .25s, transform .25s, border-color .25s;
}
.note-preview-bar:hover {
 box-shadow: 0 6px 18px rgba(0,0,0,.12);
 transform: translateY(-2px);
 border-color: #b8c2cc;
}
.note-preview-bar::before {
 content:"";
 position:absolute;
 inset:0 0 0 0;
 border-radius:12px;
 background:
     linear-gradient(90deg,#935aa3 0 8px,transparent 8px);
 pointer-events:none;
 mix-blend-mode:normal;
}
.note-preview-bar.clinic-has-note {
 background: linear-gradient(135deg,#fdfcfe 0%, #f5f0ff 55%, #efe8ff 100%);
 border-color:#bca7d4;
}
.note-preview-bar.clinic-has-note::before {
 background:
     linear-gradient(90deg,#6f4d87 0 8px,transparent 8px);
}
.note-preview-bar.clinic-empty {
 background: repeating-linear-gradient(135deg,#fcfcfc 0 12px,#f6f6f6 12px 24px);
 border:1px dashed #bfc5cb;
}
.note-preview-icon {
 flex:0 0 auto;
 width:42px;
 height:42px;
 border-radius:10px;
 background:#935aa3;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#fff;
 font-size:20px;
 box-shadow:0 2px 6px rgba(147,90,163,.35);
}
.clinic-has-note .note-preview-icon {
 background:#6f4d87;
}
.clinic-empty .note-preview-icon {
 background:#999;
}
.note-preview-text {
 margin:0;
 font-size:.9rem;
 font-weight:bold;
 line-height:1.4;
 color:#2d2d2d;
 flex:1 1 auto;
 max-height:4.2em; /* ~3 lines */
 overflow:hidden;
 position:relative;
max-width: 50ch;
}
.note-preview-text.long::after {
 content:"";
 position:absolute;
 bottom:0; right:0; left:0;
 height:1.8em;
 background:linear-gradient(180deg,rgba(250,250,250,0) 0%, rgba(240,240,240,.85) 70%);
}
.note-preview-actions {
 display:flex;
 flex-direction:column;
 align-items:flex-end;
 gap:6px;
}
.note-hint {
 font-size:11px;
 color:#5b5b5b;
 font-style:italic;
 margin:0 0 4px;
}
.clinic-has-note .note-hint {
 color:#4a3a63;
}
.note-badge {
 display:inline-block;
 background:#6f4d87;
 color:#fff;
 font-size:10px;
 letter-spacing:.5px;
 padding:3px 8px 2px;
 border-radius:12px;
 font-weight:600;
 box-shadow:0 2px 4px rgba(0,0,0,.15);
 margin-bottom:4px;
}
.clinic-empty .note-badge {
 background:#7a7a7a;
}
.manage-note-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #935aa3;
    color: #fff;
    font: 600 14px/1 Arial, sans-serif;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(147,90,163,0.18);
    transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
    text-decoration: none;
    position: relative;
}

    .manage-note-btn i {
        font-size: 16px;
        opacity: 0.92;
        margin-right: 4px;
    }

    .manage-note-btn:hover,
    .manage-note-btn:focus {
        background: #6f4d87;
        box-shadow: 0 4px 10px rgba(147,90,163,0.22);
        outline: none;
    }

/* Restore white font for Manage Note button (overrides global link color) */
a.manage-note-btn,
a.manage-note-btn:visited,
a.manage-note-btn:hover,
a.manage-note-btn:focus,
a.manage-note-btn:active {
    color:#ffffff !important;
}

a.manage-note-btn i {
    color:#ffffff !important;
}


/* Optional mini link to expand full note */
.note-expand-link {
 font-size:11px;
 color:#935aa3;
 text-decoration:none;
 font-weight:600;
}
.note-expand-link:hover {
 text-decoration:underline;
}

.modal-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.45);
    align-items: center;
    justify-content: center;
}

    .modal-overlay[style*="display: flex"] {
        display: flex !important;
    }

.modal-box {
    background: #fff;
    margin: auto;
    padding: 24px 32px 16px 32px;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.2);
    min-width: 320px;
    max-width: 90vw;
    position: relative;
    text-align: center;
}

.modal-header {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 12px;
}

.modal-body {
    margin-bottom: 18px;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.btn-cancel, .btn-remove {
    padding: 6px 18px;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
}

.btn-cancel {
    background: #eee;
    color: #333;
}

.btn-remove {
    background: #c00;
    color: #fff;
}

.modal-close {
    position: absolute;
    right: 12px;
    top: 8px;
    font-size: 1.5em;
    color: #888;
    cursor: pointer;
}


/* Item Note Modal layout */
.note-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
    padding: 0;
}

.note-modal-body {
    margin-bottom: 14px;
}

.note-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.note-close-btn {
    background: #ddd;
    color: #333;
    border: 1px solid #bbb;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

    .note-close-btn:hover {
        background: #c9c9c9;
        border-color: #999;
    }

    .note-close-btn:focus-visible {
        outline: 2px solid #0071C1;
        outline-offset: 2px;
    }


/* Notices (compact, accessible, color-coded) */
.notice {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin: 8px 0;
    border-left: 4px solid transparent;
    border-radius: 4px;
    background: #f8f9fa;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
}

    .notice i {
        margin-top: 2px;
        font-size: 14px;
        opacity: 0.9;
    }

.notice--info {
    color: #0b5c8a;
    background: #eef7fc;
    border-left-color: #0b5c8a;
}

.notice--alert {
    color: #8b0000;
    background: #fff3f3;
    border-left-color: #ff4d4f;
    font-weight: 600;
}

.notice--action {
    color: #6d3b00;
    background: #fff7e8;
    border-left-color: #cc6600;
}
/* Full-width variant for notice bars */
.notice--full {
    display: flex; /* override inline-flex */
    width: 100%;
    box-sizing: border-box;
}

/* Liquidation - Order form container: allow horizontal scroll if inner grid is wider */
.order-panel {
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto; /* horizontal scroll as needed */
    -webkit-overflow-scrolling: touch;
    padding: 0; /* shadow-box already has padding */
}

    /* Tighten table and allow wrapping */
    .order-panel .styled-gridview {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        table-layout: fixed; /* prevents expansion beyond container */
    }

        .order-panel .styled-gridview th,
        .order-panel .styled-gridview td {
            padding: 6px 8px;
            white-space: normal; /* allow wrapping */
            word-wrap: break-word; /* legacy */
            overflow-wrap: anywhere; /* modern */
        }

/* Prevent long labels/buttons from stretching header row */
.title-bar {
    min-width: 0; /* allow children to shrink */
}

    .title-bar > * {
        min-width: 0; /* flex children can wrap */
    }

/* Ensure shadow-box doesn’t create unexpected overflow via padding */
.shadow-box {
    box-sizing: border-box;
    overflow: visible; /* let inner elements render, panel controls scroll */
}
/* END Liquidation - Order form

.title-heading {
    color: #6c757d; /* title text color */
}

    .title-heading i {
        vertical-align: middle;
        margin-right: 8px;
        font-size: 1.5em;
        color: inherit; /* icon uses the same color as title */
    }

/* Stronger selector to override theme/resets */
h2.title-heading {
  color: #6c757d !important;
}
h2.title-heading i {
  color: inherit !important;
}

/* Guard lblmsg panel against horizontal overflow */
.lblmsg {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden; /* prevent visual spill beyond container */
}

/* Make the left column shrinkable without pushing the count out */
.search-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto; /* allow left to shrink safely */
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure both sides can wrap safely inside tight table cells */
.search-summary__left,
.search-summary__right {
    min-width: 0; /* critical to allow text wrapping inside grid cells */
}

/* Primary text: wrap anywhere if needed */
.search-summary__primary {
    overflow-wrap: anywhere;
    word-break: break-word; /* legacy fallback */
}

/* Count: prefer single line but don’t overflow; clamp with ellipsis */
.search-summary__count {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On narrow screens or tight layouts, allow the count to wrap and stack */
@media (max-width: 560px) {
    .search-summary {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .search-summary__count {
        white-space: normal; /* allow wrapping when stacked */
    }
}

/* Count badge: distinct rounded box on the right */
.search-summary__count {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    color: #0f3d66; /* muted deep blue text */
    background-color: #e6f0fb; /* light blue background */
    border: 1px solid #c7def7; /* soft blue border */
    white-space: nowrap; /* prefer single line */
    max-width: 100%; /* clamp width if container is tight */
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    flex-shrink: 0; /* don’t shrink the badge */
}

/* Ensure left/right columns behave inside tight containers */
.search-summary {
    grid-template-columns: minmax(0, 1fr) auto; /* left grows, count hugs */
}

.search-summary__left,
.search-summary__right {
    min-width: 0;
}

/* Narrow screens: stack, let badge wrap if needed */
@media (max-width: 560px) {
    .search-summary {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .search-summary__count {
        white-space: normal;
    }
}

/* Smaller alert note variant for inline warnings */
.alert-note--sm {
    font-size: 10px; /* down from default 12-13px */
    line-height: 1.3;
}

/* Case-only badge shown under Description when AVP sells each but WDDC sells case */
.case-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: #6d3b00;
    background: #fff7e8;
    border: 1px solid #f2d2a8;
    white-space: nowrap;
}

    .case-badge i {
        font-size: 12px;
        color: #b86a00;
    }

.badge-primary {
    background-color: #0071C1;
    color: #fff;
    padding: 2px 6px;
    border-radius: 50%;
    font-size: 12px;
    position: absolute;
    top: -8px;
    right: -12px;
    z-index: 1;
}
.badge-primary:empty {
    display: none;
}

/* Inline label style to match bold labels inside modal */
.narcotic-label-inline {
    display: inline-block;
    margin: 0 6px 6px 0;
    font-weight: bold;
    font-size: 10pt; /* aligns with .narcotic-modal font-size */
    color: #333;
}

/* Enclosed card for the quick path */
.narcotic-card {
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    background: #f9fbff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Hide the divider to keep the sections visually separated by the card */
.narcotic-divider {
    display: none !important;
}

/* Tighten leading paragraph */
.narcotic-lead {
    margin: 6px 0 0;
    color: #444;
}


/* Add inside the existing <style> in the head */
.narcotic-signup-cta {
    margin-top: 8px;
}

.narcotic-signup-fields {
    margin-top: 12px;
}

    .narcotic-signup-fields[hidden] {
        display: none !important;
    }


/* Top-right close button for narcotic modal */
.narcotic-modal { position: relative; }

.narcotic-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #c2c7cc;
    background: #ddd;
    color: #333;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.narcotic-modal-close:hover { background: #cacaca; }

.narcotic-modal-close:focus-visible {
    outline: 2px solid #0071C1;
    outline-offset: 2px;
}

#overlay.overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#overlay .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#overlay .spinner {
    width: 74px;
    height: 74px;
    border: 10px dotted #b8c4cc;
    border-radius: 50%;
    animation: tplSpin 1.2s linear infinite;
    margin: 0;
}

#overlay .loading-text {
    display: none;
}

.orders-nav {
    width: 100%;
    max-width: 760px;
    margin: 18px auto 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 16px;
}

.orders-nav__tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 88px;
    padding: 18px 22px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid #d9dee5;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-sizing: border-box;
}

    .orders-nav__tile:hover,
    .orders-nav__tile:focus {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
        text-decoration: none;
        outline: none;
    }

.orders-nav__tile--wide {
    grid-column: 1 / -1;
}

.orders-nav__title {
    font-size: 18px;
    font-weight: 700;
    color: #2d3748;
    line-height: 1.2;
    margin-bottom: 6px;
}

.orders-nav__subtitle {
    font-size: 13px;
    color: #5f6b7a;
    line-height: 1.35;
}

.orders-nav__tile--recent {
    background: linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
    border-color: #cfe0f5;
}

.orders-nav__tile--regular {
    background: linear-gradient(180deg, #f8fcf7 0%, #eef7ec 100%);
    border-color: #d5e6d0;
}

.orders-nav__tile--ecommerce {
    background: linear-gradient(180deg, #fffaf6 0%, #fdf1e7 100%);
    border-color: #ecd8c7;
}

.orders-nav__tile--vendor {
    background: linear-gradient(180deg, #f9f8fd 0%, #efecfb 100%);
    border-color: #dad3f2;
}

.orders-nav__tile--narcotics {
    background: linear-gradient(180deg, #fff8f8 0%, #fbeeee 100%);
    border-color: #edd3d3;
}

@media (max-width: 640px) {
    .orders-nav {
        grid-template-columns: 1fr;
    }

    .orders-nav__tile--wide {
        grid-column: auto;
    }
}

.orders-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 18px;
    border: 1px solid #d6dbe1;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
    color: #4f5b66 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .orders-back-link:hover,
    .orders-back-link:focus {
        background: linear-gradient(180deg, #eef4fa 0%, #e2ebf5 100%);
        color: #2f4f6f !important;
        text-decoration: none !important;
        box-shadow: 0 5px 12px rgba(0,0,0,0.10);
        transform: translateY(-1px);
    }

    .orders-back-link i {
        font-size: 12px;
        color: inherit;
    }

.orders-page-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px 0;
    box-sizing: border-box;
    text-align: left;
}

.orders-page-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #666666 !important;
    font-size: 1.8em;
    font-weight: 700;
}

    .orders-page-title i {
        color: #6c757d;
        font-size: 0.95em;
    }

.orders-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #d6dbe1;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
    color: #4f5b66 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}

    .orders-back-link:hover,
    .orders-back-link:focus {
        background: linear-gradient(180deg, #eef4fa 0%, #e2ebf5 100%);
        color: #2f4f6f !important;
        text-decoration: none !important;
        box-shadow: 0 5px 12px rgba(0,0,0,0.10);
        transform: translateY(-1px);
    }

    .orders-back-link i {
        font-size: 12px;
        color: inherit;
    }

@media (max-width: 640px) {
    .orders-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.order-status-badge {
    display: inline-block;
    min-width: 50px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.order-status-badge--processed {
    background: #eef8f0;
    color: #256c2f;
    border-color: #cfe7d3;
}

.order-status-badge--hold {
    background: #fff6e8;
    color: #8a5a00;
    border-color: #f0d8a8;
}

.order-status-badge--received {
    background: #eef4fb;
    color: #245b8f;
    border-color: #cddff3;
}

.order-status-badge--unknown {
    background: #f3f4f6;
    color: #666666;
    border-color: #dddddd;
}


.shipment-chip {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #eef4fb 0%, #e2edf9 100%);
    border: 1px solid #c9d9ee;
    color: #2b5f90 !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .shipment-chip:hover,
    .shipment-chip:focus {
        background: linear-gradient(180deg, #e3eef9 0%, #d5e6f6 100%);
        color: #1f4f7d !important;
        text-decoration: none !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.10);
        transform: translateY(-1px);
    }

.file-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 14px;
    margin-left: 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

    .file-link-btn:hover,
    .file-link-btn:focus {
        text-decoration: none !important;
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(0,0,0,0.10);
    }

    .file-link-btn i {
        font-size: 16px;
        color: inherit;
    }

.file-link-btn--recall {
    background: linear-gradient(180deg, #fff6f4 0%, #fdecea 100%);
    border-color: #f1d2cc;
    color: #8a3d34 !important;
}

    .file-link-btn--recall:hover,
    .file-link-btn--recall:focus {
        background: linear-gradient(180deg, #fdeeea 0%, #fbded8 100%);
        color: #733028 !important;
    }

.file-link-btn--info {
    background: linear-gradient(180deg, #f5f7fc 0%, #eceffd 100%);
    border-color: #d6dbf3;
    color: #ff0000 !important;
}

    .file-link-btn--info:hover,
    .file-link-btn--info:focus {
        background: linear-gradient(180deg, #eef1fb 0%, #e2e7fa 100%);
        color: #3f4373 !important;
    }

.qty-confirm-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    background: #fff8cc;
    border: 1px solid #e2cf7a;
    font-weight: 600;
    line-height: 1.4;
}

/* Cart page banner message */

.cart-banner-message {
    width: 100%;
    margin: 0 0 16px 0;
    border: 1px solid #fdba74;
    border-radius: 12px;
    background-color: #fff7ed;
    box-sizing: border-box;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.cart-banner-message__inner {
    padding: 14px 18px 16px 18px;
    color: #9a3412;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    text-align: left;
}

.cart-banner-message__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cart-banner-message__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background-color: #ea580c;
    color: #ffffff;
    font-size: 12pt;
    flex: 0 0 auto;
}

.cart-banner-message__title {
    font-size: 13pt;
    font-weight: 700;
    color: #9a3412;
}

.cart-banner-message__body {
    font-size: 10.5pt;
    line-height: 1.6;
    color: #7c2d12;
}

    .cart-banner-message__body p {
        margin: 0 0 8px 0;
    }

        .cart-banner-message__body p:last-child {
            margin-bottom: 0;
        }

    .cart-banner-message__body a,
    .cart-banner-message__body a:visited {
        color: #c2410c;
        font-weight: 600;
    }