/* Apply a readable font globally */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px; /* Base font size */
    line-height: 1.5; /* Better line spacing for readability */
    color: #333; /* Dark gray text color for better contrast */
}

#clock {
    position: fixed;
    top: 0; /* No change (0px is equivalent to 0rem) */
    left: 0; /* No change (0px is equivalent to 0rem) */
    height: 2.5rem; /* Converted from 40px */
    padding: 0.625rem 0 0 0.625rem; /* Converted from 10px */
    font-size: 0.75rem; /* Converted from 12px */
}

/* Header Styling */
header {
    width: 100%; /* No change */
    height: 2.5rem; /* Converted from 40px */
    background-color: #3B5998;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

#header_wrap {
    width: 78.125rem; /* Converted from 1250px */
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}


/* Flex containers for header sections */
#header_left {
    display: flex; /* Align items horizontally */
    align-items: center; /* Vertically centers the items */
}

#header_right {
    display: flex; /* Align items horizontally */
    align-items: center; /* Vertically centers the items */
    margin-left: auto; /* Pushes #header_right to the far right */
}

/* Header navigation buttons (nav_btn) */
.nav_btn {
    padding: 0.25rem 0.5rem; /* Converted from 4px 8px */
    cursor: pointer;
    font-size: 0.875rem; /* Converted from 14px */
    margin-right: 1.25rem; /* Converted from 20px */
    background-color: #3B5998;
    color: white;
    border: none;
    border-radius: 0.25rem; /* Converted from 4px */
    text-align: center;
    display: inline-block;
}


.nav_btn:hover {
    background-color: #3B5998; /* Hover effect */
}

/* Hamburger menu styling */
.hamburger-menu {
    display: none; /* Hidden by default */
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 1.5625rem; /* Converted from 25px */
    height: 1.25rem; /* Converted from 20px */
}

.hamburger-menu .line {
    width: 100%;
    height: 0.25rem; /* Converted from 4px */
    background-color: white;
}

main {
    margin: 0 auto; /* Centers the main section */
    width: 78.125em; /* Matches the width of the header_wrap */
    padding-top: 1.5625rem; /* Converted from 25px */
	padding-bottom:100px;
}


.hide_div, .main_div{
	display: none;
}

.ff_content {
    background-color: #c1d7ec;
    width: 78.125rem; /* 1250px */
    max-width: 100%; /* Ensures it doesn't overflow */
    margin: 0 auto; /* Centers the div */
    padding: 1rem; /* Adds some spacing inside */
    box-sizing: border-box; /* Ensures padding doesn't increase width */
    border-left: 1px solid #999;  /* Thin dark grey left border */
    border-right: 1px solid #999; /* Thin dark grey right border */
    border-bottom: 1px solid #999; /* Thin dark grey right border */
	font-size:14px;
}



#dataview_div{
	font-size:12px;
}


/*** nav icons **********************************************************/

.account_div { /* for nav client icon */
    height: 1.375rem; /* Converted from 22px */
    width: 1.375rem; /* Converted from 22px */
    background-image: url(../images/account-icon.png);
    background-repeat: no-repeat;
    background-position: left;
    margin-top: 0.125rem; /* Converted from 2px */
    margin-left: 0.75rem; /* Converted from 12px */
}

.account_div:hover {
    background-image: url(../images/account-icon_hover.png);
    background-repeat: no-repeat;
    background-position: left;
    cursor: pointer;
}

.logout_div { /* for nav client icon */
    height: 1.375rem; /* Converted from 22px */
    width: 1.375rem; /* Converted from 22px */
    background-image: url(../images/logout-icon.png);
    background-repeat: no-repeat;
    background-position: left;
    margin-top: 0.125rem; /* Converted from 2px */
    margin-left: 0.3125rem; /* Converted from 5px */
}

.logout_div:hover {
    background-image: url(../images/logout-icon_hover.png);
    background-repeat: no-repeat;
    background-position: left;
    cursor: pointer;
}



#home_icon { /* for nav client icon */
    margin-left: 0.5rem; /* Converted from 8px */
    float: left;
    height: 1.375rem; /* Converted from 22px */
    width: 1.375rem; /* Converted from 22px */
    background-image: url(../images/home-icon.png);
    background-repeat: no-repeat;
    background-position: left;
}

#home_icon:hover {
    background-image: url(../images/home-icon_hover.png);
    background-repeat: no-repeat;
    background-position: left;
}

.set_goals_div {
    margin-right: 0.417em;  /* No change (already in em) */
    height: 1.5625rem; /* Converted from 25px */
    width: 1.5625rem; /* Converted from 25px */
    background-image: url(../images/goal-icon.png);
    background-repeat: no-repeat;
    background-position: left;
    margin-top: 0.0625rem; /* Converted from 1px */
    margin-right: 0.9375rem; /* Converted from 15px */
}

.set_goals_div:hover {
    background-image: url(../images/goal-icon_hover.png);
    background-repeat: no-repeat;
    background-position: left;
    cursor: pointer;
}



#sc_header {
    width: 1245px; /* No change (already in em) */
    background: #f0f0f0;
    border: 0.083em solid #666666; /* No change (already in em) */
    border-top: 0.000em;  /* No change */
    border-bottom-right-radius: 0.5rem; /* Converted from 0.5em */
    border-bottom-left-radius: 0.5rem; /* Converted from 0.5em */
    height: 1.769em; /* No change (already in em) */
    border-right: 0.000em;  /* No change */
    font-size: 0.75rem; /* Converted from 12px */
    color: #333;
    margin: 0 auto; /* No change */
    padding-bottom: 3px; /* Converted from 2px */
	padding-left:5px;
}

#sc_header span {
    margin-right: 1.154em;
    border-radius: 0.154em;
    background: #333333;
    color: #FFFFFF;
    font-weight: bold;
    display: inline-flex; /* Use flexbox for centering */
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
    min-width: 1rem; /* Ensures a minimum size */
    padding: 0px 2px; /* Adjust padding as needed */
    text-align: center;
    margin-top: 0.1875rem;
}



#sc_header .customer_holder {
    padding-right: 0.625rem; /* Converted from 10px */
    float: right;
    margin: 0.000em; /* No change */
    font-weight: normal;
    border: 0.083em solid #666666; /* No change (already in em) */
    border-top: 0.000em; /* No change */
    -webkit-border-bottom-right-radius: 0.5rem; /* Converted from 0.5em */
    -moz-border-bottom-right-radius: 0.5rem; /* Converted from 0.5em */
    border-bottom-right-radius: 0.5rem; /* Converted from 0.5em */
    background: #e62929;
    padding: 0.1875rem 0.3125rem; /* Converted from 3px 5px */
    color: #FFF;
    cursor: pointer;
}

#sc_header .customer_holder span {
    margin: 0.000em; /* No change */
    background: #e62929;
}

.new_customer_small {
    float: right;
    padding: 0.3125rem; /* Converted from 5px */
    margin-right: 0.3125rem; /* Converted from 5px */
    color: #e62929;
    font-weight: bold;
    font-size: 0.625rem; /* Converted from 10px */
}

.new_customer_small:hover {
    color: #333;
    cursor: pointer;
}





/* Media Query for Small Screens */
@media (max-width: 800px) {
	/* Show the hamburger menu on small screens */
	.hamburger-menu {
		display: flex;
	}

	/* Hide the regular header navigation */
	#header_nav {
		display: none;
		flex-direction: column;
		align-items: center;
		width: 100%;
		position: absolute;
		top: 2.5rem; /* Converted from 40px */
		left: 0;
		background-color: #333;
		z-index: 10;
	}

	/* Make the nav visible when the hamburger is clicked */
	#header_nav.active {
		display: flex;
		margin-left: 10%; /* No change (percentage) */
		width: 75%; /* No change (percentage) */
	}

	/* Adjust #header_wrap to take up less space on small screens */
	#header_wrap {
		width: 100%; /* Take full width of the screen */
		padding: 0 0.625rem; /* Converted from 10px */
		justify-content: space-between; /* Space out the elements */
	}

	/* Adjust #header_right to be more centered on small screens */
	#header_right {
		margin-left: 0; /* Remove the default margin to align better */
		width: 70%; /* No change (percentage) */
		justify-content: space-between; /* Space between the input and other elements */
	}

	/* Make the nav menu items stack vertically */
	#header_nav .nav_btn {
		width: 100%;
		text-align: left;
		padding: 0.625rem; /* Converted from 10px */
		border-top: 1px solid #444;
	}

	/* Add a border to the first nav item for a better separation */
	#header_nav .nav_btn:first-child {
		border-top: none;
	}

	/* Ensure the search input is not too wide */
	#search_input {
		width: 60%; /* No change (percentage) */
		margin: 0 0.625rem; /* Converted from 10px */
	}

	/* Hide these elements */
	#clock, #sc_header, .set_goals_div {
		display: none;
	}

}

.content_div{
	width:100%;
	min-height:500px;
}


/***** FONT SIZE ******/

.font10px{
	font-size:10px !important;
}
.font12px{
	font-size:12px !important;
}
.font18px{
	font-size:18px !important;
}


/*** WIDTH CLASS *********/

.width30px{
	width:30px !important;
}

.width40px{
	width:40px !important;
}
.width50px{
	width:50px !important;
}

.width60px{
	width:60px !important;
}

.width75px{
	width:75px !important;
}
.width80px{
	width:80px !important;
}
.width90px{
	width:90px !important;
}
.width100px{
	width:100px !important;
}
.width105px{
	width:105px !important;
}


.width1050px{
	width:1050px !important;
}

.width1100px{
	width:1100px !important;
}


.textalignleft{
    text-align: left;
}

#reminder_holder {
    display: flex;
    width: 100%; /* Updated container width */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.reminder_tables {
    padding-right: 20px;
}
.reminder_tables:last-child {
    padding: 0px;
}
.action_table {
    width: 233px; /* Updated div width */
    box-sizing: border-box;
    background-color: #3B5998;
    border: 1px solid #333;
    text-align: center;
    padding: 20px;

}
.action_table tr:first-child {
    color: white;
    font-weight: bold;
    height: 40px; /* Set a fixed height */
}
.action_table td{
    text-align:left;
}
.action_table_large{
    width: 193px;
}
#quote_table .pcs_header, #to_do_table .pcs_header{
	font-size:8px !important;
	font-weight:normal !important;
    color: white;
}
/*Import css*/
.account_info .account_left {
    float: left;
    width: 650px;
}
.account_info .account_right {
    float: left;
}
.account_info .account_right label {
    width: 65px !important;
}
.account_info .form_btm_btns input {
    font-size: 10px;
    width: 100px;
    padding: 5px;
    text-align: center;
    border: 1px solid #333;
    margin-bottom: 5px;
}
.account_info .form_btm_btns p {
    font-size: 12px;
    margin-top: 6px;
    width: 120px;
    padding-bottom: 3px;
    font-weight: bold;
}
.account_info select,
.rename-file-wrapper input[type="text"] {
    width: 165px;
    padding: 3px;
    margin-bottom: 10px;
    border: 1px solid #999;
    font-size: 14px;
}
input[type="date"] {
    width: auto;
    padding: 3px;
    margin-bottom: 10px;
    border: 1px solid #999;
    font-size: 14px;
}
.account_info .datepicker {
    background-image: url(../images/date-icon.png);
    background-repeat: no-repeat;
    background-position: right;
}
.account_info input[type=radio] {
    width: auto;
}
.account_info input[name="note[0]"] {
    width: 455px;
    padding-right: 27px;
    background-image: url(../images/add_comment.png);
    background-repeat: no-repeat;
    background-position: right;
    border: 1px solid #999;
}
.account_info label {
    display: inline-block;
    text-align: right;
    padding: 3px;
    width: 110px !important;
    font-size: 12px;
    font-weight: normal;
}
.account_info {
    text-align: left;
    font-size: 14px;
}
.account_info fieldset {
    border: 1px solid #666;   /*  1px - 0.077em  */
    padding: 10px;  /*  5px - 0.417em  (font size 12) */
    float: left;
    margin-right: 10px; /* 10px - 0.769em  */
    margin-bottom: 10px;
}
.account_info legend {
    color: #333;
    font-weight: bold;
    font-size: 13px;
    text-align: left;
}

/* Container and headings */
.import_container {
    width: 500px;
    float: left;
}
.import_container h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

/* File input and hint wrapper */
.file-input-wrapper {
    display: block;
    text-align: left;
    margin-bottom: 6px;
}
#upload_form input[type="file"] {
    display: block;
    margin-bottom: 0 !important; /* override other margins */
}
.file-hint {
    font-size: 10px;
    color: #555;
    line-height: 1;
    margin: 0;
    padding: 0;
    margin-top: 2px; /* small spacing below input */
}

/* Rename file wrapper */
.rename-file-wrapper {
    display: block;
    text-align: left;
    margin-bottom: 10px;
}
.rename-file-wrapper label {
    font-size: 12px;
    color: #333;
    display: block;
    margin-bottom: 2px;
    padding: 0;
    text-align: left;
}

#uploadFile {
    font-size: 12px;
    padding: 2px 8px;       /* less padding for tighter fit */
    margin-top: 10px;
    width: auto;
    border-radius: 4px;     /* subtle rounded corners */
    border: 1px solid #999; /* add a subtle border */
    background-color: #f0f0f0; /* light background to look like a button */
}

.rename-file-wrapper label {
    margin: 0;
    padding: 0;
}
.file-hint {
  font-size: 10px;
  color: #555;
  line-height: 1;
  margin: 0 0 12px 0; /* increase bottom margin to 12px */
  padding: 0;
}

#import_commission_html {

    display: none;

}